From 406cfad31a49af235c3f0631d7e2de5eccdd57bf Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 20 Oct 2025 10:14:04 +0700
Subject: [PATCH 01/92] chore(FE-140): adjust border radius

---
 src/components/Button.tsx            |  2 +-
 src/components/input/SelectInput.tsx | 39 +++++++----------
 src/components/input/TextArea.tsx    | 62 +++++++++++++---------------
 src/components/input/TextInput.tsx   |  2 +-
 4 files changed, 45 insertions(+), 60 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c67a29c2..5da6e5ad 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -43,7 +43,7 @@ const Button = ({
       'btn-warning': color === 'warning',
       'btn-error': color === 'error',
     },
-    'h-fit justify-center items-center gap-2 rounded-xl p-2 text-base transition-all'
+    'h-fit justify-center items-center gap-2 rounded p-2 text-base transition-all'
   );
 
   return (
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 43a3f622..f6cef527 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  ComponentType,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
 import Select, {
   OptionProps,
   GroupBase,
@@ -98,10 +92,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     return { ...base, IndicatorSeparator: () => null };
   }, [isAnimated]);
 
-  const internalInputChangeHandler = (
-    val: string,
-    meta: InputActionMeta
-  ) => {
+  const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
     if (meta.action === 'menu-close') setInternalInputValue('');
   };
@@ -113,9 +104,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const SelectComponent = createables ? CreatableSelect : Select;
 
   /** 🎯 handleChange tanpa any */
-  const handleChange = (
-    val: MultiValue<T> | SingleValue<T>
-  ): void => {
+  const handleChange = (val: MultiValue<T> | SingleValue<T>): void => {
     if (!val) {
       onChange?.(null);
       return;
@@ -145,15 +134,15 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         >
           {label}
           {required && (
-            <span className="tooltip tooltip-error" data-tip="required">
-              <span className="text-error"> *</span>
+            <span className='tooltip tooltip-error' data-tip='required'>
+              <span className='text-error'> *</span>
             </span>
           )}
         </span>
       )}
 
       <SelectComponent<T, boolean, GroupBase<T>>
-        instanceId="select"
+        instanceId='select'
         value={value ?? (isMulti ? [] : null)}
         onChange={handleChange}
         options={options}
@@ -171,7 +160,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           control: ({ isFocused, isDisabled }) =>
             cn(
-              'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+              'w-full min-h-12! rounded! border bg-base-100 transition-shadow cursor-pointer!',
               {
                 'border-red-500! ring-2 ring-red-200': isError,
                 'border-indigo-500 ring-2 ring-indigo-200': isFocused,
@@ -187,24 +176,24 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           input: () => cn('text-gray-900'),
           indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1 rounded-md hover:bg-gray-100', {
+            cn('p-1 rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
           menu: () =>
-            cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
+            cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
-              'bg-indigo-600 text-white': isFocused,
+            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
+              'bg-indigo-600 text-base-100': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
             }),
           multiValue: ({ getValue, index }) => {
             const selectedValues = getValue() as T[];
             return cn(
-              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
+              'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
               selectedValues[index]?.className
             );
           },
@@ -225,9 +214,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         }}
       />
 
-      {isError && <p className="w-full text-sm text-error">{errorMessage}</p>}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {!isError && bottomLabel && (
-        <p className="w-full text-sm opacity-60">{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
     </div>
   );
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index e9517277..fbb1637a 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -1,10 +1,6 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-} from 'react';
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
 
@@ -52,7 +48,7 @@ const TextArea = ({
   onBlur,
   readOnly = false,
   isLoading = false,
-  rows = 3
+  rows = 3,
 }: TextAreaProps) => {
   return (
     <div
@@ -83,35 +79,35 @@ const TextArea = ({
           )}
         </label>
       )}
-        {startAdornment && startAdornment}
+      {startAdornment && startAdornment}
 
-        <textarea
-          className={cn(
-            'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
-            {
-              'border-error': isError,
-              'border-success!': isValid,
-            },
-            className?.inputWrapper
-          )}
-          id={name}
-          name={name}
-          placeholder={placeholder}
-          value={value}
-          rows={rows}
-          onChange={onChange}
-          onBlur={onBlur}
-          disabled={disabled}
-          readOnly={readOnly}
-        />
-
-        {(isLoading || endAdornment) && (
-          <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
-
-            {endAdornment && endAdornment}
-          </div>
+      <textarea
+        className={cn(
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded! outline-none! transition-all',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+          },
+          className?.inputWrapper
         )}
+        id={name}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        rows={rows}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+
+      {(isLoading || endAdornment) && (
+        <div className='flex flex-row gap-2'>
+          {isLoading && <span className='loading loading-spinner' />}
+
+          {endAdornment && endAdornment}
+        </div>
+      )}
 
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index eec312c1..fa80cb4f 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -87,7 +87,7 @@ const TextInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded! outline-none! transition-all duration-200',
           {
             'border-error': isError,
             'border-success!': isValid,

From a088189ed161982b5b83e27bb75e86c826dd055b Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 20 Oct 2025 10:14:22 +0700
Subject: [PATCH 02/92] chore(FE-140): add Produksi and Transfer ke Laying menu

---
 src/config/constant.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index ed68adb5..a623fd9e 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -12,6 +12,19 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     icon: 'gg:chart',
   },
 
+  {
+    title: 'Produksi',
+    link: '/production',
+    icon: 'ix:machine-a',
+    submenu: [
+      {
+        title: 'Transfer ke Laying',
+        link: '/production/transfer-to-laying',
+        icon: 'streamline:transfer-van',
+      },
+    ],
+  },
+
   {
     title: 'Master Data',
     link: '/master-data',
@@ -88,8 +101,8 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
         title: 'Penyesuaian Persediaan',
         link: '/inventory/adjustment',
         icon: 'material-symbols:box-edit-outline-rounded',
-      }
-    ]
+      },
+    ],
   },
 ] as const;
 

From 4e6d2088e1fbb5fbfeab107675c7041b4d1c15ef Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 14:55:37 +0700
Subject: [PATCH 03/92] feat(FE-147): create Transfer to Laying list page

---
 src/app/production/transfer-to-laying/page.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/app/production/transfer-to-laying/page.tsx

diff --git a/src/app/production/transfer-to-laying/page.tsx b/src/app/production/transfer-to-laying/page.tsx
new file mode 100644
index 00000000..40829c20
--- /dev/null
+++ b/src/app/production/transfer-to-laying/page.tsx
@@ -0,0 +1,16 @@
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+
+const TransferToLaying = () => {
+  return (
+    <section className='w-full p-4'>
+      <h1 className='mb-4'>Transfer to Laying</h1>
+      <Button href='/production/transfer-to-laying/add' color='primary'>
+        <Icon icon='ic:round-plus' width={24} height={24} />
+        Tambah Transfer to Laying
+      </Button>
+    </section>
+  );
+};
+
+export default TransferToLaying;

From 7fdbfe6dfb6191722051a8be4ef28865e606e291 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 14:56:58 +0700
Subject: [PATCH 04/92] feat(FE-113): create Add Transfer to Laying page

---
 src/app/production/transfer-to-laying/add/page.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/app/production/transfer-to-laying/add/page.tsx

diff --git a/src/app/production/transfer-to-laying/add/page.tsx b/src/app/production/transfer-to-laying/add/page.tsx
new file mode 100644
index 00000000..6f29085f
--- /dev/null
+++ b/src/app/production/transfer-to-laying/add/page.tsx
@@ -0,0 +1,11 @@
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+const AddTransferToLaying = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <TransferToLayingForm />
+    </div>
+  );
+};
+
+export default AddTransferToLaying;

From d550dcbf4823538779014584e3c4b4d042d845ed Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 14:57:32 +0700
Subject: [PATCH 05/92] feat(FE-141): create layout for detail Transfer to
 Laying route

---
 .../production/transfer-to-laying/detail/layout.tsx   | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/app/production/transfer-to-laying/detail/layout.tsx

diff --git a/src/app/production/transfer-to-laying/detail/layout.tsx b/src/app/production/transfer-to-laying/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

From 0bab704163c143dd981d81aef42bda86a657af02 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:01:19 +0700
Subject: [PATCH 06/92] chore(FE-113): create getByPath helper function

---
 src/lib/helper.ts | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index d85b7b16..0f827e8a 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -27,3 +27,37 @@ export const formatCurrency = (
     maximumFractionDigits,
   }).format(value);
 };
+
+/**
+ * Retrieves a nested value from an object using a dot-delimited key path.
+ * Supports array indexes (e.g., "users.0.name") and returns a default value
+ * if the path does not exist.
+ *
+ * @param obj - The source object to search.
+ * @param path - Dot-delimited key string (e.g., "user.address.city").
+ * @param defaultValue - Optional value to return if the key path is not found.
+ * @returns The value found at the specified path, or the default value.
+ */
+export function getByPath<T, D = undefined>(
+  obj: T,
+  path: string,
+  defaultValue?: D
+): unknown | D {
+  if (obj == null) return defaultValue as D;
+  if (!path) return obj as unknown;
+
+  const segments = path.split('.').filter(Boolean);
+  let cur: { [key: string]: unknown } = obj;
+
+  for (const seg of segments) {
+    if (cur == null) return defaultValue as D;
+    const key: string | number =
+      Array.isArray(cur) && /^\d+$/.test(seg) ? Number(seg) : seg;
+    if (Object(cur) !== cur || !(key in cur)) {
+      return defaultValue as D;
+    }
+    cur = cur[key] as { [key: string]: unknown };
+  }
+
+  return cur as unknown;
+}

From 8b403a4208710e9c247f61d86c348d3421fefd4d Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:01:48 +0700
Subject: [PATCH 07/92] feat(FE-113): create useSelect hook

---
 src/components/input/SelectInput.tsx | 48 +++++++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index f6cef527..e16bbea0 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+
 import Select, {
   OptionProps,
   GroupBase,
@@ -11,7 +13,10 @@ import Select, {
 import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
-import { cn } from '@/lib/helper';
+import { cn, getByPath } from '@/lib/helper';
+import { httpClientFetcher } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse } from '@/types/api/api-general';
 
 export interface OptionType {
   value: string | number;
@@ -222,4 +227,45 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   );
 };
 
+const useSelect = <T,>(
+  basePath: string,
+  valueKey: keyof T,
+  labelKey: keyof T,
+  searchKey: string = 'search',
+  params?: { [key: string]: string }
+) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const optionsUrlParams = useMemo(() => {
+    return new URLSearchParams({
+      [searchKey]: inputValue ?? '',
+      ...params,
+    }).toString();
+  }, [inputValue, searchKey]);
+
+  const optionsUrl = `${basePath}?${optionsUrlParams}`;
+
+  const { data, isLoading } = useSWR(optionsUrl, async (url) => {
+    return await httpClientFetcher<BaseApiResponse<T[]>>(url);
+  });
+
+  const options = isResponseSuccess(data)
+    ? data.data.map((item) => {
+        return {
+          value: getByPath(item, valueKey as string),
+          label: getByPath(item, labelKey as string),
+        };
+      })
+    : [];
+
+  return {
+    inputValue,
+    setInputValue,
+    options,
+    isLoadingOptions: isLoading,
+    rawData: data,
+  };
+};
+
+export { useSelect };
 export default SelectInput;

From 1a76913f3f6b57fd40e2d60c89fef34317b18d4a Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:05:36 +0700
Subject: [PATCH 08/92] chore(FE-113): set vertical-align to top

---
 src/styles/daisyui.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/daisyui.css b/src/styles/daisyui.css
index 9a148fb4..dadaa2fa 100644
--- a/src/styles/daisyui.css
+++ b/src/styles/daisyui.css
@@ -8,4 +8,8 @@
     --step-bg: var(--color-error);
     --step-fg: var(--color-error-content);
   }
+
+  .table :where(th, td) {
+    vertical-align: top;
+  }
 }

From 5af9c3ee27398b82320435ee37d7313dda066db8 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:06:10 +0700
Subject: [PATCH 09/92] chore(FE-113): change api route for getting user info
 to /auth/sso/userinfo

---
 src/components/helper/RequireAuth.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/helper/RequireAuth.tsx b/src/components/helper/RequireAuth.tsx
index 1d9d86b4..dbd4b6bc 100644
--- a/src/components/helper/RequireAuth.tsx
+++ b/src/components/helper/RequireAuth.tsx
@@ -158,7 +158,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
 
   const { data: userResponse, isLoading: isLoadingUserResponse } =
     useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
-      '/auth/get-me',
+      '/auth/sso/userinfo',
       httpClientFetcher,
       {
         shouldRetryOnError: false,
@@ -194,4 +194,4 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
   return <>{children}</>;
 };
 
-export default RequireAuth;
\ No newline at end of file
+export default RequireAuth;

From bac72b8eb361e9997bea1158b560c857207d8376 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:06:39 +0700
Subject: [PATCH 10/92] feat(FE-113): create Transfer to Laying type

---
 .../api/production/transfer-to-laying.d.ts    | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/types/api/production/transfer-to-laying.d.ts

diff --git a/src/types/api/production/transfer-to-laying.d.ts b/src/types/api/production/transfer-to-laying.d.ts
new file mode 100644
index 00000000..77d35d8f
--- /dev/null
+++ b/src/types/api/production/transfer-to-laying.d.ts
@@ -0,0 +1,37 @@
+import { BaseApiResponse, BaseMetadata, flags } from '@/types/api/api-general';
+import { Kandang } from '@/types/api/master-data/kandang';
+
+export type BaseTransferToLaying = {
+  id: number;
+  transfer_date: string;
+  flock_source: {
+    id: number;
+    name: string;
+  };
+  flock_destination: {
+    id: number;
+    name: string;
+  };
+  quantity: number;
+  kandangs: {
+    kandang: Kandang;
+    quantity: number;
+  }[];
+  reason: string;
+};
+
+export type TransferToLaying = BaseMetadata & BaseTransferToLaying;
+
+export type CreateTransferToLayingPayload = {
+  transfer_date: string;
+  flock_source_id: number;
+  flock_destination_id: number;
+  totalQuantity: number;
+  kandangs: {
+    kandang_id: number;
+    quantity: number;
+  }[];
+  reason: string;
+};
+
+export type UpdateTransferToLayingPayload = CreateTransferToLayingPayload;

From 2f4daea253120ab40b6d036b9f20935aadb7fb5f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:07:51 +0700
Subject: [PATCH 11/92] feat(FE-113): create API Service for Transfer to Laying

---
 .../api/production/transfer-to-laying.ts      | 182 ++++++++++++++++++
 1 file changed, 182 insertions(+)
 create mode 100644 src/services/api/production/transfer-to-laying.ts

diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
new file mode 100644
index 00000000..94af7ae8
--- /dev/null
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -0,0 +1,182 @@
+import { sleep } from '@/lib/helper';
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse } from '@/types/api/api-general';
+
+import { FlockWithKandangs } from '@/types/api/master-data/flock';
+
+// TODO: delete this dummy data
+const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
+  code: 200,
+  status: 'success',
+  message: 'Get all projectflocks successfully',
+  meta: {
+    page: 1,
+    limit: 10,
+    total_pages: 1,
+    total_results: 2,
+  },
+  data: [
+    {
+      id: 2,
+      name: 'Flock Banten',
+      totalQuantity: 300,
+      kandangs: [
+        {
+          kandang: {
+            id: 3,
+            name: 'Cikaum 1',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+        {
+          kandang: {
+            id: 4,
+            name: 'Cikaum 2',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 150,
+        },
+        {
+          kandang: {
+            id: 5,
+            name: 'Cikaum 3',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 50,
+        },
+      ],
+    },
+
+    {
+      id: 3,
+      name: 'Flock Priangan',
+      totalQuantity: 200,
+      kandangs: [
+        {
+          kandang: {
+            id: 3,
+            name: 'Cikaum 1',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'Priangan',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+        {
+          kandang: {
+            id: 4,
+            name: 'Cikaum 2',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+      ],
+    },
+  ],
+};
+
+export class TransferToLayingService<
+  T,
+  CreatePayloadGeneric,
+  UpdatePayloadGeneric
+> extends BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  async getFlockSource(): Promise<
+    BaseApiResponse<FlockWithKandangs[]> | undefined
+  > {
+    try {
+      //   const getFlockSourcePath = `${this.basePath}/${flockSourcePath}`;
+      //   const getSingleRes = await httpClient<FlockSourceType>(getFlockSourcePath);
+      //   return getSingleRes;
+
+      await sleep(500);
+
+      return FLOCK_SOURCE_DUMMY_DATA;
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+}
+
+export const TransferToLayingApi = new TransferToLayingService<
+  unknown,
+  unknown,
+  unknown
+>('');

From d9fa685ae627dd29632dc23d0bcd27400136702a Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:08:11 +0700
Subject: [PATCH 12/92] feat(FE-113): create Transfer to Laying Create Form

---
 .../form/TransferToLayingForm.tsx             | 562 ++++++++++++++++++
 1 file changed, 562 insertions(+)
 create mode 100644 src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx

diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
new file mode 100644
index 00000000..c4428a72
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
@@ -0,0 +1,562 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+import useSWR from 'swr';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import SelectInput, {
+  OptionType,
+  // useSelect,
+} from '@/components/input/SelectInput';
+import TextArea from '@/components/input/TextArea';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+import {
+  TransferToLayingFormSchema,
+  TransferToLayingFormValues,
+  UpdateTransferToLayingFormSchema,
+} from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import {
+  TransferToLaying,
+  CreateTransferToLayingPayload,
+  UpdateTransferToLayingPayload,
+} from '@/types/api/production/transfer-to-laying';
+import { cn } from '@/lib/helper';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+
+interface TransferToLayingFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: TransferToLaying;
+}
+
+const TransferToLayingForm = ({
+  type = 'add',
+  initialValues,
+}: TransferToLayingFormProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  const [formErrorMessage, setFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createTransferToLayingHandler = useCallback(
+    async (payload: CreateTransferToLayingPayload) => {
+      console.log('Create transfer to laying:', { payload });
+
+      toast.success('Berhasil menambahkan data transfer ke laying!');
+    },
+    [router]
+  );
+
+  const updateTransferToLayingHandler = useCallback(
+    async (
+      transferToLayingId: number,
+      payload: UpdateTransferToLayingPayload
+    ) => {
+      console.log(
+        `Update transfer to laying with ID of ${transferToLayingId}:`,
+        { payload }
+      );
+
+      toast.success('Berhasil mengubah data transfer ke laying!');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
+    return {
+      transfer_date: initialValues?.transfer_date ?? '',
+      flockSource: initialValues?.flock_source
+        ? {
+            value: initialValues?.flock_source.id,
+            label: initialValues?.flock_source.name,
+          }
+        : undefined,
+      flockDestination: initialValues?.flock_destination
+        ? {
+            value: initialValues?.flock_destination.id,
+            label: initialValues?.flock_destination.name,
+          }
+        : undefined,
+      totalQuantity: initialValues?.quantity ?? undefined,
+
+      kandangs: initialValues?.kandangs
+        ? initialValues.kandangs.map((kandang) => ({
+            kandang: {
+              value: kandang.kandang.id,
+              label: kandang.kandang.name,
+            },
+            quantity: kandang.quantity,
+          }))
+        : [],
+
+      reason: initialValues?.reason ?? undefined,
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<TransferToLayingFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      type === 'edit'
+        ? UpdateTransferToLayingFormSchema
+        : TransferToLayingFormSchema,
+    onSubmit: async (values) => {
+      console.log({ values });
+
+      setFormErrorMessage('');
+
+      const transferToLayingPayload: CreateTransferToLayingPayload = {
+        transfer_date: values.transfer_date as string,
+        flock_source_id: values.flockSource?.value as number,
+        flock_destination_id: values.flockDestination?.value as number,
+        totalQuantity: values.totalQuantity as number,
+
+        kandangs: values.kandangs?.map((kandang) => ({
+          kandang_id: kandang.kandang.value,
+          quantity: kandang.quantity,
+        })) as {
+          kandang_id: number;
+          quantity: number;
+        }[],
+
+        reason: values.reason as string,
+      };
+
+      switch (type) {
+        case 'add':
+          await createTransferToLayingHandler(transferToLayingPayload);
+          break;
+
+        case 'edit':
+          await updateTransferToLayingHandler(
+            initialValues?.id as number,
+            transferToLayingPayload
+          );
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues, values: formikValues } = formik;
+  const { kandangs: kandangsValue } = formikValues;
+
+  const deleteTransferToLayingClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete TransferToLaying!');
+
+    setIsDeleteLoading(false);
+  };
+
+  const isRepeaterInputError = (
+    column: keyof TransferToLayingFormValues['kandangs'][0],
+    idx: number
+  ) => {
+    return (
+      formik.touched.kandangs?.[idx]?.[column] &&
+      Boolean(
+        formik.errors.kandangs?.[idx] instanceof Object &&
+          formik.errors.kandangs?.[idx]?.[column]
+      )
+    );
+  };
+
+  const repeaterInputErrorMessage = (
+    column: keyof TransferToLayingFormValues['kandangs'][0],
+    idx: number
+  ) => {
+    return (formik.errors.kandangs?.[idx] as Record<string, string>)?.[column];
+  };
+
+  // TODO: remove dummy data and use real data
+  // Flock Source
+  // const {
+  //   inputValue: flockSourceInputValue,
+  //   setInputValue: setFlockSourceInputValue,
+  //   options: flockSourceOptions,
+  //   isLoadingOptions: isLoadingFlockSourceOptions,
+  // } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-source', 'id', 'name');
+
+  // TODO: remove this dummy data
+  const { data: flockSources, isLoading: isLoadingFlockSourceOptions } = useSWR(
+    'test',
+    () => TransferToLayingApi.getFlockSource()
+  );
+
+  const flockSourceOptions = isResponseSuccess(flockSources)
+    ? flockSources?.data.map((flockSource) => ({
+        value: flockSource.id,
+        label: flockSource.name,
+      }))
+    : [];
+
+  const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
+    // Get flock source data for total quantity and kandang
+    const flockSource =
+      isResponseSuccess(flockSources) && val !== null
+        ? flockSources.data.find(
+            (item) => item.id === (val as OptionType).value
+          )
+        : undefined;
+
+    // Set total quantity and kandangs
+    if (flockSource) {
+      const formattedKandangs = flockSource.kandangs.map((item) => ({
+        kandang: {
+          value: item.kandang.id,
+          label: item.kandang.name,
+        },
+        quantity: '',
+        maxQuantity: item.quantity,
+      }));
+
+      formik.setFieldValue('totalQuantity', flockSource.totalQuantity);
+      formik.setFieldValue('maxTotalQuantity', flockSource.totalQuantity);
+      formik.setFieldValue('kandangs', formattedKandangs);
+    } else {
+      formik.setFieldValue('totalQuantity', undefined);
+      formik.setFieldValue('kandangs', undefined);
+      formik.setFieldValue('reason', '');
+    }
+
+    formik.setFieldTouched('flockSource', true);
+    formik.setFieldValue('flockSource', val);
+  };
+
+  // TODO: remove dummy data and use real data
+  // Flock Destination
+  // const {
+  //   inputValue: flockDestinationInputValue,
+  //   setInputValue: setFlockDestinationInputValue,
+  //   options: flockDestinationOptions,
+  //   isLoadingOptions: isLoadingFlockDestinationOptions,
+  // } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-destination', 'id', 'name');
+
+  // TODO: remove this dummy data
+  const {
+    data: flockDestinations,
+    isLoading: isLoadingFlockDestinationOptions,
+  } = useSWR('test', () => TransferToLayingApi.getFlockSource());
+
+  const flockDestinationOptions = isResponseSuccess(flockDestinations)
+    ? flockDestinations?.data.map((flockDestination) => ({
+        value: flockDestination.id,
+        label: flockDestination.name,
+      }))
+    : [];
+
+  const flockDestinationChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    formik.setFieldTouched('flockDestination', true);
+    formik.setFieldValue('flockDestination', val);
+  };
+
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  useEffect(() => {
+    // calculate total quantity if kandangs quantity change
+    if (kandangsValue && kandangsValue.length > 0) {
+      let newTotalQuantity = 0;
+
+      kandangsValue.forEach((item) => {
+        newTotalQuantity += item.quantity as number;
+      });
+
+      formik.setFieldValue('totalQuantity', newTotalQuantity);
+      formik.validateField('totalQuantity');
+    }
+  }, [formikSetValues, kandangsValue]);
+
+  return (
+    <>
+      <section className='w-full max-w-3xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/nonstock'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Transfer ke Laying'}
+            {type === 'edit' && 'Edit Transfer ke Laying'}
+            {type === 'detail' && 'Detail Transfer ke Laying'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              type='date'
+              label='Tanggal Transfer'
+              name='transfer_date'
+              placeholder='Masukkan tanggal transfer'
+              value={formik.values.transfer_date}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.transfer_date &&
+                Boolean(formik.errors.transfer_date)
+              }
+              errorMessage={formik.errors.transfer_date}
+              readOnly={type === 'detail'}
+            />
+
+            <div className='flex flex-col sm:flex-row gap-4'>
+              <SelectInput
+                required
+                label='Flock Asal'
+                placeholder='Flock asal'
+                value={formik.values.flockSource as OptionType}
+                options={flockSourceOptions}
+                onChange={flockSourceChangeHandler}
+                isLoading={isLoadingFlockSourceOptions}
+                // onInputChange={setFlockSourceInputValue}
+                isError={
+                  formik.touched.flockSource &&
+                  Boolean(typeof formik.errors.flockSource === 'string')
+                }
+                errorMessage={formik.errors.flockSource as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+
+              <SelectInput
+                required
+                label='Flock Tujuan'
+                placeholder='Flock tujuan'
+                value={formik.values.flockDestination as OptionType}
+                options={flockDestinationOptions}
+                onChange={flockDestinationChangeHandler}
+                isLoading={isLoadingFlockDestinationOptions}
+                // onInputChange={setFlockDestinationInputValue}
+                isError={
+                  formik.touched.flockDestination &&
+                  Boolean(typeof formik.errors.flockDestination === 'string')
+                }
+                errorMessage={formik.errors.flockDestination as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+            </div>
+
+            <TextInput
+              required
+              type='number'
+              name='totalQuantity'
+              label='Jumlah Transfer'
+              bottomLabel={
+                formikValues.maxTotalQuantity
+                  ? `Max: ${formikValues.maxTotalQuantity}`
+                  : undefined
+              }
+              placeholder='Masukkan jumlah transfer'
+              value={formik.values.totalQuantity ?? ''}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.totalQuantity &&
+                Boolean(formik.errors.totalQuantity)
+              }
+              errorMessage={formik.errors.totalQuantity}
+              // readOnly={type === 'detail'}
+              // disabled={Boolean(formik.errors.flockSource)}
+              disabled
+            />
+
+            <div>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      <th>Kandang</th>
+                      <th>Kuantitas</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {(!formik.values.kandangs ||
+                      formik.values.kandangs.length === 0) && (
+                      <tr>
+                        <td colSpan={2}>
+                          <p className='w-full text-center text-gray-400'>
+                            Pilih flock asal terlebih dahulu!
+                          </p>
+                        </td>
+                      </tr>
+                    )}
+
+                    {formik.values.kandangs &&
+                      formik.values.kandangs.map((kandang, idx) => (
+                        <tr key={idx}>
+                          <td>
+                            <SelectInput
+                              value={kandang.kandang}
+                              options={[]}
+                              isDisabled
+                            />
+                          </td>
+
+                          <td>
+                            <TextInput
+                              required
+                              type='number'
+                              name={`kandangs[${idx}].quantity`}
+                              bottomLabel={
+                                kandang.maxQuantity
+                                  ? `Max: ${kandang.maxQuantity}`
+                                  : undefined
+                              }
+                              placeholder='Masukkan kuantitas'
+                              value={kandang.quantity}
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              isError={isRepeaterInputError('quantity', idx)}
+                              errorMessage={repeaterInputErrorMessage(
+                                'quantity',
+                                idx
+                              )}
+                              readOnly={type === 'detail'}
+                            />
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <TextArea
+              required
+              rows={5}
+              name='reason'
+              label='Alasan Transfer'
+              placeholder='Alasan transfer'
+              value={formik.values.reason}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.reason && Boolean(formik.errors.reason)}
+              errorMessage={formik.errors.reason}
+              readOnly={type === 'detail'}
+              disabled={Boolean(formik.errors.flockSource)}
+            />
+          </div>
+
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteTransferToLayingClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {type !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {type !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': type === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {formErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{formErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text='Apakah anda yakin ingin menghapus data TransferToLaying?'
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default TransferToLayingForm;

From 4127075b132a1e514e67d88fcb12b16aac8830c7 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:09:33 +0700
Subject: [PATCH 13/92] feat(FE-113): create Transfer to Laying Create Form
 Schema

---
 .../form/TransferToLayingForm.schema.ts       | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts

diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
new file mode 100644
index 00000000..e0273a9a
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
@@ -0,0 +1,83 @@
+import * as Yup from 'yup';
+
+type TransferToLayingFormSchemaType = {
+  transfer_date?: string;
+  flockSource?: {
+    value: number;
+    label: string;
+  };
+  flockDestination?: {
+    value: number;
+    label: string;
+  };
+
+  totalQuantity?: number;
+  maxTotalQuantity?: number; // original cap (hidden), helper
+
+  kandangs: {
+    kandang: {
+      value: number;
+      label: string;
+    };
+    quantity: number | string; // editable
+    maxQuantity?: number; // original cap (hidden), helper
+  }[];
+  reason?: string;
+};
+
+export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSchemaType> =
+  Yup.object({
+    transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
+
+    flockSource: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Flock asal wajib diisi!'),
+
+    flockDestination: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Flock tujuan wajib diisi!'),
+
+    totalQuantity: Yup.number()
+      .min(1, 'Jumlah transfer minimal 1')
+      .max(
+        Yup.ref('maxTotalQuantity'),
+        ({ max }) => `Kuantitas maksimal ${max}!`
+      )
+      .required('Jumlah transfer wajib diisi!'),
+
+    maxTotalQuantity: Yup.number()
+      .min(1, 'Jumlah transfer minimal 1')
+      .required('Jumlah transfer wajib diisi!'),
+
+    kandangs: Yup.array()
+      .of(
+        Yup.object({
+          kandang: Yup.object({
+            value: Yup.number().min(1).required(),
+            label: Yup.string().required(),
+          }).required('Kandang wajib diisi!'),
+
+          quantity: Yup.number()
+            .min(0, 'Kuantitas minimal 0!')
+            .max(
+              Yup.ref('maxQuantity'),
+              ({ max }) => `Kuantitas maksimal ${max}!`
+            )
+            .required('Kuantitas wajib diisi!'),
+
+          maxQuantity: Yup.number().min(1).required(), // internal helper field
+        })
+      )
+      .min(1, 'Minimal 1 kandang terisi!')
+      .required('Kandang wajib diisi!'),
+
+    reason: Yup.string().required('Alasan transfer wajib diisi!'),
+  });
+
+export const UpdateTransferToLayingFormSchema = TransferToLayingFormSchema;
+
+export type TransferToLayingFormValues = Yup.InferType<
+  typeof TransferToLayingFormSchema
+>;

From a2c43a7f1ee6f9d3d43af5a3034628d6f4d8f463 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:12:09 +0700
Subject: [PATCH 14/92] feat(FE-141): create Transfer to Laying Detail page

---
 .../transfer-to-laying/detail/page.tsx        | 138 ++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 src/app/production/transfer-to-laying/detail/page.tsx

diff --git a/src/app/production/transfer-to-laying/detail/page.tsx b/src/app/production/transfer-to-laying/detail/page.tsx
new file mode 100644
index 00000000..91b70bc6
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/page.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
+  id: 1,
+  transfer_date: '14-10-2025',
+  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',
+        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',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
+const TransferToLayingDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const transferToLayingId = searchParams.get('transferToLayingId');
+
+  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
+    useSWR(transferToLayingId, (id: number) =>
+      TransferToLayingApi.getSingle(id)
+    );
+
+  if (!transferToLayingId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying || isResponseError(transferToLaying))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingTransferToLaying && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+        <TransferToLayingForm
+          type='detail'
+          initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TransferToLayingDetail;

From a29bbc9a4252ea30ac93f4bb83ecafd0fc1fe549 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:23:13 +0700
Subject: [PATCH 15/92] chore(FE-113): comment Inventory Product link

---
 src/config/constant.ts | 22 +++++-----------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index f3ea80b3..06659f69 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -30,11 +30,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     link: '/inventory',
     icon: 'mdi:warehouse',
     submenu: [
-      {
-        title: 'Product',
-        link: '/inventory/product',
-        icon: 'mdi:package-variant-closed',
-      },
+      // {
+      //   title: 'Product',
+      //   link: '/inventory/product',
+      //   icon: 'mdi:package-variant-closed',
+      // },
       {
         title: 'Penyesuaian Stok',
         link: '/inventory/adjustment',
@@ -115,18 +115,6 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
       },
     ],
   },
-  {
-    title: 'Persediaan',
-    link: '/inventory',
-    icon: 'material-symbols:box-outline-rounded',
-    submenu: [
-      {
-        title: 'Penyesuaian Persediaan',
-        link: '/inventory/adjustment',
-        icon: 'material-symbols:box-edit-outline-rounded',
-      },
-    ],
-  },
 ] as const;
 
 export const ROWS_OPTIONS = [

From 6e6675d0a7ac3c23b9e34f76966858e44ee29831 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:37:25 +0700
Subject: [PATCH 16/92] feat(FE-113): change title and add Transfer ke Laying
 link

---
 src/config/constant.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index c7546890..b7afc19a 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -13,7 +13,7 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
   },
 
   {
-    title: 'Production',
+    title: 'Produksi',
     link: '/production',
     icon: 'material-symbols:conveyor-belt-outline-rounded',
     submenu: [
@@ -32,6 +32,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
         link: '/production/recording',
         icon: 'mdi:clipboard-text',
       },
+      {
+        title: 'Transfer ke Laying',
+        link: '/production/transfer-to-laying',
+        icon: 'streamline:transfer-van',
+      },
     ],
   },
 

From e29613a37e362017d1b590dff26e3a11e264eec0 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:54:11 +0700
Subject: [PATCH 17/92] chore(FE-113): add status field

---
 src/app/production/transfer-to-laying/detail/page.tsx | 2 ++
 src/services/api/production/transfer-to-laying.ts     | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/src/app/production/transfer-to-laying/detail/page.tsx b/src/app/production/transfer-to-laying/detail/page.tsx
index 91b70bc6..4d603098 100644
--- a/src/app/production/transfer-to-laying/detail/page.tsx
+++ b/src/app/production/transfer-to-laying/detail/page.tsx
@@ -28,6 +28,7 @@ const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
       kandang: {
         id: 1,
         name: 'Kandang test',
+        status: 'ACTIVE',
         location: {
           id: 1,
           name: 'test location',
@@ -55,6 +56,7 @@ const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
       kandang: {
         id: 1,
         name: 'Kandang test 2',
+        status: 'ACTIVE',
         location: {
           id: 1,
           name: 'test location',
diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
index 94af7ae8..69b4db73 100644
--- a/src/services/api/production/transfer-to-laying.ts
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -25,6 +25,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
           kandang: {
             id: 3,
             name: 'Cikaum 1',
+            status: 'ACTIVE',
             location: {
               id: 1,
               name: 'Singaparna',
@@ -47,6 +48,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
           kandang: {
             id: 4,
             name: 'Cikaum 2',
+            status: 'ACTIVE',
             location: {
               id: 1,
               name: 'Singaparna',
@@ -69,6 +71,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
           kandang: {
             id: 5,
             name: 'Cikaum 3',
+            status: 'ACTIVE',
             location: {
               id: 1,
               name: 'Singaparna',
@@ -99,6 +102,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
           kandang: {
             id: 3,
             name: 'Cikaum 1',
+            status: 'ACTIVE',
             location: {
               id: 1,
               name: 'Singaparna',
@@ -121,6 +125,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
           kandang: {
             id: 4,
             name: 'Cikaum 2',
+            status: 'ACTIVE',
             location: {
               id: 1,
               name: 'Singaparna',

From 06f1d3f6a4fbd0134321bbcce9d0cfc207496f35 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:54:25 +0700
Subject: [PATCH 18/92] fix(FE-113): fix merge error

---
 src/components/input/SelectInput.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 082f9ae5..b491077f 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -97,7 +97,6 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     return { ...base, IndicatorSeparator: () => null };
   }, [isAnimated]);
 
-  const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
   const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
     if (meta.action === 'menu-close') setInternalInputValue('');
@@ -140,8 +139,6 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         >
           {label}
           {required && (
-            <span className='tooltip tooltip-error' data-tip='required'>
-              <span className='text-error'> *</span>
             <span className='tooltip tooltip-error' data-tip='required'>
               <span className='text-error'> *</span>
             </span>
@@ -150,7 +147,6 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
       )}
 
       <SelectComponent<T, boolean, GroupBase<T>>
-        instanceId='select'
         instanceId='select'
         value={value ?? (isMulti ? [] : null)}
         onChange={handleChange}
@@ -223,11 +219,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         }}
       />
 
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
     </div>
   );

From 9f24d22a2c90906a115d6983e690cef056313a58 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:54:50 +0700
Subject: [PATCH 19/92] feat(FE-113): create FlockWithKandangs type

---
 src/types/api/master-data/flock.d.ts | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/types/api/master-data/flock.d.ts b/src/types/api/master-data/flock.d.ts
index 3ac5d390..daa7babf 100644
--- a/src/types/api/master-data/flock.d.ts
+++ b/src/types/api/master-data/flock.d.ts
@@ -1,14 +1,26 @@
-import { BaseMetadata } from "@/types/api/api-general";
+import { BaseMetadata } from '@/types/api/api-general';
 
 export type BaseFlock = {
   id: number;
   name: string;
-}
+};
 
 export type Flock = BaseMetadata & BaseFlock;
 
 export type CreateFlockPayload = {
   name: string;
-}
+};
 
-export type UpdateFlockPayload = CreateFlockPayload;
\ No newline at end of file
+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;
+  }[];
+};

From e53325cdc5eaefec0e9592e93cf9bf8b3fcf8592 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 11:53:12 +0700
Subject: [PATCH 20/92] feat(FE-147): show Transfer to Laying table

---
 src/app/production/transfer-to-laying/page.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/app/production/transfer-to-laying/page.tsx b/src/app/production/transfer-to-laying/page.tsx
index 40829c20..84513542 100644
--- a/src/app/production/transfer-to-laying/page.tsx
+++ b/src/app/production/transfer-to-laying/page.tsx
@@ -1,14 +1,9 @@
-import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
+import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
 
 const TransferToLaying = () => {
   return (
     <section className='w-full p-4'>
-      <h1 className='mb-4'>Transfer to Laying</h1>
-      <Button href='/production/transfer-to-laying/add' color='primary'>
-        <Icon icon='ic:round-plus' width={24} height={24} />
-        Tambah Transfer to Laying
-      </Button>
+      <TransferToLayingsTable />
     </section>
   );
 };

From c24c0817aec51eb81da39c5b5de47b4dddb22cd4 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 11:53:35 +0700
Subject: [PATCH 21/92] chore(FE-147): add rowSelection and setRowSelection
 props

---
 src/components/Table.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

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

From 22f1a32e1b0dc699655f64f63d1a392429235561 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 11:59:22 +0700
Subject: [PATCH 22/92] feat(FE-137): integrate API for daily recording with
 enhanced data structure and validation

---
 .../recording/form/RecordingForm.schema.ts    |  275 +--
 .../recording/form/RecordingForm.tsx          | 1903 ++++++-----------
 src/types/api/production/recording.d.ts       |   86 +-
 3 files changed, 764 insertions(+), 1500 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
index 4b0b37dd..beffa26a 100644
--- a/src/components/pages/production/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/production/recording/form/RecordingForm.schema.ts
@@ -1,212 +1,167 @@
 import * as Yup from 'yup';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
-import { Recording } from '@/types/api/production/recording';
+import {
+  Recording,
+  CreateRecordingPayload,
+} from '@/types/api/production/recording';
 
 export const RecordingFormSchema = Yup.object({
-  flock: Yup.object({
+  project_flock_kandang: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  flock_id: Yup.number()
+  project_flock_kandang_id: Yup.number()
     .default(0)
-    .typeError('Flock wajib diisi!')
+    .typeError('Project Flock Kandang wajib diisi!')
     .test(
-      'is-valid-flock',
-      'Flock wajib diisi!',
+      'is-valid-project-flock-kandang',
+      'Project Flock Kandang wajib diisi!',
       (value) => value !== undefined && value !== null && value > 0
     )
-    .required('Flock wajib diisi!'),
-  location: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  location_id: Yup.number()
-    .default(0)
-    .typeError('Lokasi wajib diisi!')
-    .test(
-      'is-valid-location',
-      'Lokasi wajib diisi!',
-      (value) => value !== undefined && value !== null && value > 0
-    )
-    .required('Lokasi wajib diisi!'),
-  coop: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  coop_id: Yup.number()
-    .default(0)
-    .typeError('Kandang wajib diisi!')
-    .test(
-      'is-valid-coop',
-      'Kandang wajib diisi!',
-      (value) => value !== undefined && value !== null && value > 0
-    )
-    .required('Kandang wajib diisi!'),
-  recording_date: Yup.date()
-    .required('Tanggal recording wajib diisi')
-    .typeError('Format tanggal tidak valid'),
-  feed_data: Yup.array()
+    .required('Project Flock Kandang wajib diisi!'),
+  record_datetime: Yup.date()
+    .required('Tanggal dan waktu recording wajib diisi')
+    .typeError('Format tanggal dan waktu tidak valid'),
+  status: Yup.number()
+    .optional()
+    .oneOf([0, 1, 2, 3], 'Status tidak valid')
+    .typeError('Status harus berupa angka!'),
+  ontime: Yup.boolean().optional(),
+  body_weights: Yup.array()
     .of(
       Yup.object({
-        feed_id: Yup.string().required('Nama pakan wajib diisi!'),
-        feed_qty: Yup.mixed<number | ''>().notRequired(),
-        feed_stock: Yup.number()
-          .required('Jumlah pakan yang digunakan wajib diisi!')
-          .min(1, 'Jumlah pakan minimal 1!')
-          .typeError('Jumlah pakan yang digunakan harus berupa angka!')
-          .test(
-            'is-not-exceed-qty',
-            'Jumlah pakan yang digunakan tidak boleh melebihi stok tersedia!',
-            function (value) {
-              const { feed_qty } = this.parent;
-              if (value === undefined) return true;
-              if (
-                feed_qty === undefined ||
-                feed_qty === '' ||
-                typeof feed_qty !== 'number'
-              )
-                return true;
-              return value <= feed_qty;
-            }
-          ),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 data pakan!')
-    .required('Data pakan wajib diisi!'),
-  body_weight: Yup.array()
-    .of(
-      Yup.object({
-        chicken_weight: Yup.number()
+        weight: Yup.number()
           .required('Berat ayam wajib diisi!')
           .min(1, 'Berat ayam minimal 1 gram!')
           .typeError('Berat ayam harus berupa angka!'),
-        chicken_count: Yup.number()
+        qty: Yup.number()
           .required('Jumlah ayam wajib diisi!')
           .min(1, 'Jumlah ayam minimal 1 ekor!')
-          .typeError('Jumlah ayam harus berupa angka!'),
-        average_chicken_weight: Yup.number()
-          .required('Rata-rata berat ayam wajib diisi!')
-          .min(1, 'Rata-rata berat ayam minimal 1 gram!')
-          .typeError('Rata-rata berat ayam harus berupa angka!'),
+          .typeError('Jumlah ayam harus berupa angka!')
+          .default(1),
+        notes: Yup.string().optional(),
       })
     )
     .min(1, 'Minimal harus ada 1 data bobot badan!')
     .required('Data bobot badan wajib diisi!'),
-  vaccination: Yup.array()
+  stocks: Yup.array()
     .of(
       Yup.object({
-        vaccine_id: Yup.string().required('Nama vaksin wajib diisi!'),
-        total_stock: Yup.mixed<number | ''>().notRequired(),
-        used_stock: Yup.number()
-          .required('Jumlah vaksin yang digunakan wajib diisi!')
-          .min(1, 'Jumlah vaksin minimal 1!')
-          .typeError('Jumlah vaksin yang digunakan harus berupa angka!')
-          .test(
-            'is-not-exceed-total',
-            'Jumlah vaksin yang digunakan tidak boleh melebihi stok tersedia!',
-            function (value) {
-              const { total_stock } = this.parent;
-              if (value === undefined) return true;
-              if (
-                total_stock === undefined ||
-                total_stock === '' ||
-                typeof total_stock !== 'number'
-              )
-                return true;
-              return value <= total_stock;
-            }
-          ),
+        product_warehouse_id: Yup.number()
+          .required('Produk wajib diisi!')
+          .min(1, 'Produk wajib diisi!')
+          .typeError('Produk harus berupa angka!'),
+        increase: Yup.number()
+          .optional()
+          .min(0, 'Penambahan tidak boleh negatif!')
+          .typeError('Penambahan harus berupa angka!'),
+        decrease: Yup.number()
+          .optional()
+          .min(0, 'Pengurangan tidak boleh negatif!')
+          .typeError('Pengurangan harus berupa angka!'),
+        usage_amount: Yup.number()
+          .optional()
+          .min(0, 'Jumlah penggunaan tidak boleh negatif!')
+          .typeError('Jumlah penggunaan harus berupa angka!'),
+        notes: Yup.string().optional(),
       })
     )
-    .min(1, 'Minimal harus ada 1 data vaksinasi!')
-    .required('Data vaksinasi wajib diisi!'),
-  mortality: Yup.array()
+    .min(1, 'Minimal harus ada 1 data stok!')
+    .required('Data stok wajib diisi!'),
+  depletions: Yup.array()
     .of(
       Yup.object({
-        condition: Yup.mixed<string>()
+        product_warehouse_id: Yup.number()
+          .required('Produk wajib diisi!')
+          .min(1, 'Produk wajib diisi!')
+          .typeError('Produk harus berupa angka!'),
+        condition: Yup.string()
+          .required('Kondisi depletions wajib diisi!')
           .oneOf(
-            RECORDING_FLAG_OPTIONS.map((opt) => opt.value),
-            'Kondisi tidak valid!'
+            RECORDING_FLAG_OPTIONS.map((option) => option.value),
+            'Kondisi depletions tidak valid!'
           )
-          .required('Kondisi wajib diisi!'),
-        count: Yup.number()
-          .required('Jumlah mortalitas wajib diisi!')
-          .min(1, 'Jumlah mortalitas minimal 1 ekor!')
-          .typeError('Jumlah mortalitas harus berupa angka!'),
+          .typeError('Kondisi depletions harus berupa teks!')
+          .min(1, 'Kondisi depletions wajib diisi!'),
+        total: Yup.number()
+          .required('Jumlah depletions wajib diisi!')
+          .min(1, 'Jumlah depletions minimal 1!')
+          .typeError('Jumlah depletions harus berupa angka!'),
+        notes: Yup.string().optional(),
       })
     )
-    .min(1, 'Minimal harus ada 1 data mortalitas!')
-    .required('Data mortalitas wajib diisi!'),
+    .min(1, 'Minimal harus ada 1 data depletions!')
+    .required('Data depletions wajib diisi!'),
 });
 
 export const UpdateRecordingFormSchema = RecordingFormSchema;
 
 export type RecordingFormValues = Yup.InferType<typeof RecordingFormSchema>;
 
+type RecordingFormData = Partial<Recording> & {
+  body_weights?: CreateRecordingPayload['body_weights'];
+  stocks?: CreateRecordingPayload['stocks'];
+  depletions?: CreateRecordingPayload['depletions'];
+};
+
 export const getRecordingFormInitialValues = (
-  initialValues?: Recording
+  initialValues?: RecordingFormData
 ): RecordingFormValues => ({
-  flock: initialValues?.flock
+  project_flock_kandang: initialValues?.project_flock_kandang_id
     ? {
-        value: initialValues.flock.id,
-        label: initialValues.flock.name,
+        value: initialValues.project_flock_kandang_id,
+        label: `Project Flock Kandang #${initialValues.project_flock_kandang_id}`,
       }
     : null,
-  flock_id: initialValues?.flock?.id ?? 0,
-  location: initialValues?.location
-    ? {
-        value: initialValues.location.id,
-        label: initialValues.location.name,
-      }
-    : null,
-  location_id: initialValues?.location?.id ?? 0,
-  coop: initialValues?.coop
-    ? {
-        value: initialValues.coop.id,
-        label: initialValues.coop.name,
-      }
-    : null,
-  coop_id: initialValues?.coop?.id ?? 0,
-  recording_date: initialValues?.recording_date
-    ? new Date(initialValues.recording_date)
+  project_flock_kandang_id: initialValues?.project_flock_kandang_id ?? 0,
+  record_datetime: initialValues?.record_datetime
+    ? new Date(initialValues.record_datetime)
     : new Date(),
-  feed_data: initialValues?.feed_data
-    ? initialValues.feed_data.map((feed) => ({
-        feed_id: feed.feed_name,
-        feed_qty: feed.feed_qty,
-        feed_stock: feed.feed_stock,
-      }))
-    : [
-        {
-          feed_id: '',
-          feed_qty: '',
-          feed_stock: 0,
-        },
-      ],
-  body_weight: initialValues?.body_weight ?? [
+  status: initialValues?.status ?? 1,
+  ontime: initialValues?.ontime ?? true,
+  body_weights: initialValues?.body_weights?.map(
+    (bw: NonNullable<CreateRecordingPayload['body_weights']>[0]) => ({
+      weight: bw.weight,
+      qty: bw.qty,
+      notes: bw.notes || '',
+    })
+  ) ?? [
     {
-      chicken_weight: 0,
-      chicken_count: 0,
-      average_chicken_weight: 0,
+      weight: 0,
+      qty: 1,
+      notes: '',
     },
   ],
-  vaccination: initialValues?.vaccination
-    ? initialValues.vaccination.map((vaccine) => ({
-        vaccine_id: vaccine.vaccine_name,
-        total_stock: vaccine.total_stock,
-        used_stock: vaccine.used_stock,
-      }))
-    : [
-        {
-          vaccine_id: '',
-          total_stock: '',
-          used_stock: 0,
-        },
-      ],
-  mortality: initialValues?.mortality ?? [
+  stocks: initialValues?.stocks?.map(
+    (stock: NonNullable<CreateRecordingPayload['stocks']>[0]) => ({
+      product_warehouse_id: stock.product_warehouse_id,
+      increase: stock.increase,
+      decrease: stock.decrease,
+      usage_amount: stock.usage_amount,
+      notes: stock.notes,
+    })
+  ) ?? [
     {
+      product_warehouse_id: 0,
+      increase: 0,
+      decrease: 0,
+      usage_amount: 0,
+      notes: '',
+    },
+  ],
+  depletions: initialValues?.depletions?.map(
+    (depletion: NonNullable<CreateRecordingPayload['depletions']>[0]) => ({
+      product_warehouse_id: depletion.product_warehouse_id,
+      condition: depletion.condition,
+      total: depletion.total,
+      notes: depletion.notes,
+    })
+  ) ?? [
+    {
+      product_warehouse_id: 0,
       condition: '',
-      count: 0,
+      total: 0,
+      notes: '',
     },
   ],
 });
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 8c166700..41d9401e 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1,13 +1,11 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
+
 import TextInput from '@/components/input/TextInput';
-import NumberInput from '@/components/input/NumberInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import { FormActions } from '@/components/helper/form/FormActions';
@@ -22,15 +20,7 @@ import {
   UpdateRecordingFormSchema,
 } from './RecordingForm.schema';
 import { useRecordingFormHandlers } from './useRecordingFormHandlers';
-import { ProjectFlockApi } from '@/services/api/production';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
-import useSWR from 'swr';
-import { ProductWarehouseApi } from '@/services/api/inventory';
-import { ProjectFlock } from '@/types/api/production/project-flock';
-import { Warehouse } from '@/types/api/master-data/warehouse';
-import { LocationApi } from '@/services/api/master-data';
-import FieldMessage from '@/components/helper/FieldMessage';
+
 import Card from '@/components/Card';
 
 interface RecordingFormProps {
@@ -39,15 +29,9 @@ interface RecordingFormProps {
 }
 
 const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
-  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
-  const [flockSelectInputValue, setFlockSelectInputValue] = useState('');
-  const [selectedProjectFlock, setSelectedProjectFlock] =
-    useState<ProjectFlock | null>(null);
-  const [selectedFeed, setSelectedFeed] = useState<number[]>([]);
-  const [selectedWeight, setSelectedWeight] = useState<number[]>([]);
-  const [selectedVaccine, setSelectedVaccine] = useState<number[]>([]);
-  const [selectedMortality, setSelectedMortality] = useState<number[]>([]);
-  const [, setRecordingFormErrorMessage] = useState('');
+  const [selectedBodyWeights, setSelectedBodyWeights] = useState<number[]>([]);
+  const [selectedStocks, setSelectedStocks] = useState<number[]>([]);
+  const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]);
 
   const {
     deleteModal,
@@ -71,57 +55,49 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     validateOnChange: true,
     validateOnBlur: true,
     onSubmit: async (values) => {
-      setRecordingFormErrorMessage('');
       const payload: CreateRecordingPayload = {
-        flock_id: values.flock_id,
-        location_id: values.location_id,
-        coop_id: values.coop_id,
-        recording_date:
-          values.recording_date instanceof Date
-            ? values.recording_date.toISOString()
+        project_flock_kandang_id: values.project_flock_kandang_id,
+        record_datetime:
+          values.record_datetime instanceof Date
+            ? values.record_datetime.toISOString()
             : '',
-        feed_data: (values.feed_data ?? []).map((p) => ({
-          feed_id: p.feed_id,
-          feed_qty:
-            typeof p.feed_qty === 'number'
-              ? p.feed_qty
-              : parseFloat(String(p.feed_qty)) || 0,
-          feed_stock:
-            typeof p.feed_stock === 'number'
-              ? p.feed_stock
-              : parseFloat(String(p.feed_stock)) || 0,
+        status: values.status,
+        ontime: values.ontime,
+        body_weights: (values.body_weights ?? []).map((bw) => ({
+          weight:
+            typeof bw.weight === 'number'
+              ? bw.weight
+              : parseFloat(String(bw.weight)) || 0,
+          qty:
+            typeof bw.qty === 'number'
+              ? bw.qty
+              : parseFloat(String(bw.qty)) || 0,
+          notes: bw.notes,
         })),
-        body_weight: (values.body_weight ?? []).map((b) => ({
-          chicken_weight:
-            typeof b.chicken_weight === 'number'
-              ? b.chicken_weight
-              : parseFloat(String(b.chicken_weight)) || 0,
-          chicken_count:
-            typeof b.chicken_count === 'number'
-              ? b.chicken_count
-              : parseFloat(String(b.chicken_count)) || 0,
-          average_chicken_weight:
-            typeof b.average_chicken_weight === 'number'
-              ? b.average_chicken_weight
-              : parseFloat(String(b.average_chicken_weight)) || 0,
+        stocks: (values.stocks ?? []).map((stock) => ({
+          product_warehouse_id: stock.product_warehouse_id,
+          increase:
+            typeof stock.increase === 'number'
+              ? stock.increase
+              : parseFloat(String(stock.increase)) || 0,
+          decrease:
+            typeof stock.decrease === 'number'
+              ? stock.decrease
+              : parseFloat(String(stock.decrease)) || 0,
+          usage_amount:
+            typeof stock.usage_amount === 'number'
+              ? stock.usage_amount
+              : parseFloat(String(stock.usage_amount)) || 0,
+          notes: stock.notes,
         })),
-        vaccination: (values.vaccination ?? []).map((v) => ({
-          vaccine_id: v.vaccine_id,
-          total_stock:
-            typeof v.total_stock === 'number'
-              ? v.total_stock
-              : parseFloat(String(v.total_stock)) || 0,
-          used_stock:
-            typeof v.used_stock === 'number'
-              ? v.used_stock
-              : parseFloat(String(v.used_stock)) || 0,
-        })),
-        mortality: (values.mortality ?? []).map((m) => ({
-          condition: m.condition,
-          count:
-            typeof m.count === 'number'
-              ? m.count
-              : parseFloat(String(m.count)) || 0,
+        depletions: (values.depletions ?? []).map((depletion) => ({
+          product_warehouse_id: depletion.product_warehouse_id,
+          condition: depletion.condition,
+          total:
+            typeof depletion.total === 'number'
+              ? depletion.total
+              : parseFloat(String(depletion.total)) || 0,
+          notes: depletion.notes,
         })),
       };
 
@@ -136,465 +112,109 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     },
   });
 
-  // Locations
-  const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({ search: locationSelectInputValue }).toString()}`;
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationsUrl,
-    LocationApi.getAllFetcher
-  );
-
-  // Project Flocks
-  const projectFlocksUrl = useMemo(() => {
-    if (!formik.values.location_id) return null;
-    const params = new URLSearchParams({
-      search: flockSelectInputValue,
-      location_id: formik.values.location_id.toString(),
-    });
-    return `${ProjectFlockApi.basePath}?${params.toString()}`;
-  }, [formik.values.location_id, flockSelectInputValue]);
-
-  const { data: projectFlocks, isLoading: isLoadingFlocks } = useSWR(
-    projectFlocksUrl,
-    ProjectFlockApi.getAllFetcher
-  );
-
-  // Pakan Products
-  const pakanUrl = useMemo(() => {
-    if (!formik.values.location_id) return null;
-    const params = new URLSearchParams({
-      flag: 'PAKAN',
-      search: '',
-      location_id: formik.values.location_id.toString(),
-    });
-    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
-  }, [formik.values.location_id]);
-
-  const { data: pakanProducts, isLoading: isLoadingPakan } = useSWR(
-    pakanUrl,
-    ProductWarehouseApi.getAllFetcher
-  );
-
-  // OVK Products
-  const ovkUrl = useMemo(() => {
-    if (!formik.values.location_id) return null;
-    const params = new URLSearchParams({
-      flag: 'OVK',
-      search: '',
-      location_id: formik.values.location_id.toString(),
-    });
-    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
-  }, [formik.values.location_id]);
-
-  const { data: ovkProducts, isLoading: isLoadingOvk } = useSWR(
-    ovkUrl,
-    ProductWarehouseApi.getAllFetcher
-  );
-
-  // COMPUTED VALUES
-  const buildWarehouseLabel = useCallback((warehouse: Warehouse) => {
-    const parts: string[] = [warehouse.name];
-
-    if ('kandang' in warehouse && warehouse.kandang) {
-      parts.push(warehouse.kandang.name);
-    }
-
-    if ('location' in warehouse && warehouse.location) {
-      parts.push(warehouse.location.name);
-    }
-
-    if (warehouse.area) {
-      parts.push(warehouse.area.name);
-    }
-
-    return parts.join(' - ');
-  }, []);
-
-  const locationOptions = isResponseSuccess(locations)
-    ? locations.data.map((loc) => ({ value: loc.id, label: loc.name }))
-    : [];
-
-  const flockOptions = isResponseSuccess(projectFlocks)
-    ? projectFlocks.data.map((flock) => ({
-        value: flock.id,
-        label: flock.flock.name,
-      }))
-    : [];
-
-  const coopOptions = useMemo(() => {
-    if (!selectedProjectFlock || !selectedProjectFlock.kandangs) return [];
-    return selectedProjectFlock.kandangs.map((kandang) => ({
-      value: kandang.id,
-      label: kandang.name,
-    }));
-  }, [selectedProjectFlock]);
-
-  const filteredPakanProducts = useMemo(() => {
-    if (!isResponseSuccess(pakanProducts) || !formik.values.location_id)
-      return [];
-
-    return pakanProducts.data.filter((product) => {
-      const warehouse = product.warehouse;
-
-      const hasLocationMatch =
-        'location' in warehouse && warehouse.location
-          ? warehouse.location.id === formik.values.location_id
-          : false;
-
-      const hasPakanFlag = product.product.flags?.includes('PAKAN');
-
-      return hasLocationMatch && hasPakanFlag;
-    });
-  }, [pakanProducts, formik.values.location_id]);
-
-  const pakanOptions = useMemo(
-    () =>
-      filteredPakanProducts.map((product) => ({
-        value: product.id,
-        label: `${product.product.name} - ${buildWarehouseLabel(product.warehouse)} (Stock: ${product.quantity.toLocaleString('id-ID')})`,
-      })),
-    [filteredPakanProducts, buildWarehouseLabel]
-  );
-
-  const pakanStockMap = useMemo(() => {
-    const map = new Map<number, number | ''>();
-    filteredPakanProducts.forEach((product) => {
-      map.set(product.id, product.quantity);
-    });
-    return map;
-  }, [filteredPakanProducts]);
-
-  const filteredOvkProducts = useMemo(() => {
-    if (!isResponseSuccess(ovkProducts) || !formik.values.location_id)
-      return [];
-
-    return ovkProducts.data.filter((product) => {
-      const warehouse = product.warehouse;
-
-      // Validate location match
-      const hasLocationMatch =
-        'location' in warehouse && warehouse.location
-          ? warehouse.location.id === formik.values.location_id
-          : false;
-
-      // Validate product has OVK flag
-      const hasOvkFlag = product.product.flags?.includes('OVK');
-
-      return hasLocationMatch && hasOvkFlag;
-    });
-  }, [ovkProducts, formik.values.location_id]);
-
-  const ovkOptions = useMemo(
-    () =>
-      filteredOvkProducts.map((product) => ({
-        value: product.id,
-        label: `${product.product.name} - ${buildWarehouseLabel(product.warehouse)} (Stock: ${product.quantity.toLocaleString('id-ID')})`,
-      })),
-    [filteredOvkProducts, buildWarehouseLabel]
-  );
-
-  const ovkStockMap = useMemo(() => {
-    const map = new Map<number, number | ''>();
-    filteredOvkProducts.forEach((product) => {
-      map.set(product.id, product.quantity);
-    });
-    return map;
-  }, [filteredOvkProducts]);
-
-  // EFFECTS
-  useEffect(() => {
-    if (initialValues?.flock && isResponseSuccess(projectFlocks)) {
-      const flock = projectFlocks.data.find(
-        (f) => f.id === initialValues.flock.id
-      );
-      if (flock) {
-        setSelectedProjectFlock(flock);
-      }
-    }
-  }, [initialValues, projectFlocks]);
-
-  // Auto-calculate average weight when chicken weight or count changes
-  useEffect(() => {
-    if (formik.values.body_weight) {
-      const updatedBodyWeight = formik.values.body_weight.map((weight) => ({
-        ...weight,
-        average_chicken_weight:
-          weight.chicken_count > 0
-            ? Math.round(weight.chicken_weight / weight.chicken_count)
-            : 0,
-      }));
-
-      // Only update if values are different to avoid infinite loops
-      const hasChanges = updatedBodyWeight.some(
-        (updated, idx) =>
-          updated.average_chicken_weight !==
-          formik.values.body_weight[idx]?.average_chicken_weight
-      );
-
-      if (hasChanges) {
-        formik.setFieldValue('body_weight', updatedBodyWeight);
-      }
-    }
-  }, [
-    formik.values.body_weight?.map((w) => w.chicken_weight),
-    formik.values.body_weight?.map((w) => w.chicken_count),
-  ]);
-
   // EVENT HANDLERS - Select Inputs
-  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const locationValue = (val as OptionType)?.value;
-
-    formik.setFieldValue('location', val, false);
-    formik.setFieldValue('location_id', locationValue || 0, false);
-
-    formik.setFieldValue('flock', null, false);
-    formik.setFieldValue('flock_id', 0, false);
-    formik.setFieldValue('coop', null, false);
-    formik.setFieldValue('coop_id', 0, false);
-    setSelectedProjectFlock(null);
-    setFlockSelectInputValue('');
+  const projectFlockChangeHandler = (value: string) => {
+    const projectFlockId = parseInt(value) || 0;
+    formik.setFieldValue('project_flock_kandang_id', projectFlockId, false);
   };
 
-  const flockChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const flockValue = (val as OptionType)?.value;
-
-    const selected = isResponseSuccess(projectFlocks)
-      ? projectFlocks.data.find((flock) => flock.id === flockValue)
-      : null;
-
-    setSelectedProjectFlock(selected || null);
-
-    formik.setFieldValue('flock', val, false);
-    formik.setFieldValue('flock_id', flockValue || 0, false);
-
-    formik.setFieldValue('coop', null, false);
-    formik.setFieldValue('coop_id', 0, false);
-  };
-
-  const coopChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const coopValue = (val as OptionType)?.value;
-
-    formik.setFieldValue('coop', val, false);
-    formik.setFieldValue('coop_id', coopValue || 0, false);
-  };
-
-  // EVENT HANDLERS - Feed Data
-  const addFeedData = () => {
-    const newFeedData = [
-      ...(formik.values.feed_data || []),
-      {
-        feed: null,
-        feed_id: '',
-        feed_qty: '',
-        feed_stock: 0,
-      },
-    ];
-    formik.setFieldValue('feed_data', newFeedData);
-  };
-
-  const removeFeedData = (idx: number) => {
-    const updatedFeedData = formik.values.feed_data?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('feed_data', updatedFeedData);
-  };
-
-  const removeSelectedFeedData = () => {
-    const updatedFeedData = formik.values.feed_data?.filter(
-      (_, idx) => !selectedFeed.includes(idx)
-    );
-    formik.setFieldValue('feed_data', updatedFeedData);
-    setSelectedFeed([]);
-  };
-
-  // EVENT HANDLERS - Body Weight
+  // EVENT HANDLERS - Body Weights
   const addBodyWeight = () => {
-    const newBodyWeight = [
-      ...(formik.values.body_weight || []),
+    const newBodyWeights = [
+      ...(formik.values.body_weights || []),
       {
-        chicken_weight: 0,
-        chicken_count: 0,
-        average_chicken_weight: 0,
+        weight: 0,
+        qty: 1,
+        notes: '',
       },
     ];
-    formik.setFieldValue('body_weight', newBodyWeight);
+    formik.setFieldValue('body_weights', newBodyWeights);
   };
 
-  // Handle calculation when chicken_weight changes
-  const handleChickenWeightChange = useCallback(
-    (idx: number, value: number) => {
-      formik.setFieldValue(`body_weight.${idx}.chicken_weight`, value);
-
-      const currentWeight = formik.values.body_weight?.[idx];
-      if (currentWeight) {
-        const chickenCount = currentWeight.chicken_count;
-        if (chickenCount > 0 && value > 0) {
-          const averageWeight = Math.round(value / chickenCount);
-          formik.setFieldValue(
-            `body_weight.${idx}.average_chicken_weight`,
-            averageWeight
-          );
-        } else {
-          formik.setFieldValue(`body_weight.${idx}.average_chicken_weight`, '');
-        }
-      }
-    },
-    [formik]
-  );
-
-  // Handle calculation when chicken_count changes
-  const handleChickenCountChange = useCallback(
-    (idx: number, value: number) => {
-      formik.setFieldValue(`body_weight.${idx}.chicken_count`, value);
-
-      const currentWeight = formik.values.body_weight?.[idx];
-      if (currentWeight) {
-        const chickenWeight = currentWeight.chicken_weight;
-        if (chickenWeight > 0 && value > 0) {
-          const averageWeight = Math.round(chickenWeight / value);
-          formik.setFieldValue(
-            `body_weight.${idx}.average_chicken_weight`,
-            averageWeight
-          );
-        } else {
-          formik.setFieldValue(`body_weight.${idx}.average_chicken_weight`, '');
-        }
-      }
-    },
-    [formik]
-  );
-
-  // Handle calculation when average_weight changes
-  const handleAverageWeightChange = useCallback(
-    (idx: number, value: number) => {
-      formik.setFieldValue(`body_weight.${idx}.average_chicken_weight`, value);
-
-      const currentWeight = formik.values.body_weight?.[idx];
-      if (currentWeight) {
-        const chickenCount = currentWeight.chicken_count;
-        if (chickenCount > 0 && value > 0) {
-          const totalWeight = value * chickenCount;
-          formik.setFieldValue(
-            `body_weight.${idx}.chicken_weight`,
-            totalWeight
-          );
-        } else if (value === 0) {
-          formik.setFieldValue(`body_weight.${idx}.chicken_weight`, '');
-        }
-      }
-    },
-    [formik]
-  );
-
-  // Create wrapper handlers that match NumberInput's onChange signature
-  const handleChickenWeightChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value) || 0;
-      handleChickenWeightChange(idx, value);
-    },
-    [handleChickenWeightChange]
-  );
-
-  const handleChickenCountChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value) || 0;
-      handleChickenCountChange(idx, value);
-    },
-    [handleChickenCountChange]
-  );
-
-  const handleAverageWeightChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value) || 0;
-      handleAverageWeightChange(idx, value);
-    },
-    [handleAverageWeightChange]
-  );
-
   const removeBodyWeight = (idx: number) => {
-    const updatedBodyWeight = formik.values.body_weight?.filter(
+    const updatedBodyWeights = formik.values.body_weights?.filter(
       (_, i) => i !== idx
     );
-    formik.setFieldValue('body_weight', updatedBodyWeight);
+    formik.setFieldValue('body_weights', updatedBodyWeights);
   };
 
-  const removeSelectedBodyWeight = () => {
-    const updatedBodyWeight = formik.values.body_weight?.filter(
-      (_, idx) => !selectedWeight.includes(idx)
+  const removeSelectedBodyWeights = () => {
+    const updatedBodyWeights = formik.values.body_weights?.filter(
+      (_, idx) => !selectedBodyWeights.includes(idx)
     );
-    formik.setFieldValue('body_weight', updatedBodyWeight);
-    setSelectedWeight([]);
+    formik.setFieldValue('body_weights', updatedBodyWeights);
+    setSelectedBodyWeights([]);
   };
 
-  // EVENT HANDLERS - Vaccination
-  const addVaccination = () => {
-    const newVaccination = [
-      ...(formik.values.vaccination || []),
+  // EVENT HANDLERS - Stocks
+  const addStock = () => {
+    const newStocks = [
+      ...(formik.values.stocks || []),
       {
-        vaccine: null,
-        vaccine_id: '',
-        total_stock: '',
-        used_stock: 0,
+        product_warehouse_id: 0,
+        increase: 0,
+        decrease: 0,
+        usage_amount: 0,
+        notes: '',
       },
     ];
-    formik.setFieldValue('vaccination', newVaccination);
+    formik.setFieldValue('stocks', newStocks);
   };
 
-  const removeVaccination = (idx: number) => {
-    const updatedVaccination = formik.values.vaccination?.filter(
-      (_, i) => i !== idx
+  const removeStock = (idx: number) => {
+    const updatedStocks = formik.values.stocks?.filter((_, i) => i !== idx);
+    formik.setFieldValue('stocks', updatedStocks);
+  };
+
+  const removeSelectedStocks = () => {
+    const updatedStocks = formik.values.stocks?.filter(
+      (_, idx) => !selectedStocks.includes(idx)
     );
-    formik.setFieldValue('vaccination', updatedVaccination);
+    formik.setFieldValue('stocks', updatedStocks);
+    setSelectedStocks([]);
   };
 
-  const removeSelectedVaccination = () => {
-    const updatedVaccination = formik.values.vaccination?.filter(
-      (_, idx) => !selectedVaccine.includes(idx)
-    );
-    formik.setFieldValue('vaccination', updatedVaccination);
-    setSelectedVaccine([]);
-  };
-
-  // EVENT HANDLERS - Mortality
-  const addMortality = () => {
-    const newMortality = [
-      ...(formik.values.mortality || []),
+  // EVENT HANDLERS - Depletions
+  const addDepletion = () => {
+    const newDepletions = [
+      ...(formik.values.depletions || []),
       {
-        condition: RECORDING_FLAG_OPTIONS[0].value,
-        count: 0,
+        product_warehouse_id: 0,
+        condition: '',
+        total: 0,
+        notes: '',
       },
     ];
-    formik.setFieldValue('mortality', newMortality);
+    formik.setFieldValue('depletions', newDepletions);
   };
 
-  const removeMortality = (idx: number) => {
-    const updatedMortality = formik.values.mortality?.filter(
+  const removeDepletion = (idx: number) => {
+    const updatedDepletions = formik.values.depletions?.filter(
       (_, i) => i !== idx
     );
-    formik.setFieldValue('mortality', updatedMortality);
+    formik.setFieldValue('depletions', updatedDepletions);
   };
 
-  const removeSelectedMortality = () => {
-    const updatedMortality = formik.values.mortality?.filter(
-      (_, idx) => !selectedMortality.includes(idx)
+  const removeSelectedDepletions = () => {
+    const updatedDepletions = formik.values.depletions?.filter(
+      (_, idx) => !selectedDepletions.includes(idx)
     );
-    formik.setFieldValue('mortality', updatedMortality);
-    setSelectedMortality([]);
+    formik.setFieldValue('depletions', updatedDepletions);
+    setSelectedDepletions([]);
   };
 
   // HELPER FUNCTIONS
   const isRepeaterInputError = <
-    T extends 'feed_data' | 'body_weight' | 'vaccination' | 'mortality',
+    T extends 'body_weights' | 'stocks' | 'depletions',
   >(
     arrayName: T,
-    column: T extends 'feed_data'
-      ? keyof RecordingFormValues['feed_data'][0]
-      : T extends 'body_weight'
-        ? keyof RecordingFormValues['body_weight'][0]
-        : T extends 'vaccination'
-          ? keyof RecordingFormValues['vaccination'][0]
-          : T extends 'mortality'
-            ? keyof RecordingFormValues['mortality'][0]
-            : never,
+    column: T extends 'body_weights'
+      ? keyof RecordingFormValues['body_weights'][0]
+      : T extends 'stocks'
+        ? keyof RecordingFormValues['stocks'][0]
+        : T extends 'depletions'
+          ? keyof RecordingFormValues['depletions'][0]
+          : never,
     idx: number
   ) => {
     if (
@@ -642,114 +262,88 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               body: 'flex flex-col gap-6',
             }}
           >
-            <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
-              <SelectInput
+            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6'>
+              <TextInput
                 required
-                label='Lokasi'
-                value={formik.values.location ?? undefined}
-                onChange={(val) => {
-                  locationChangeHandler(val);
-                  setTimeout(() => {
-                    formik.setFieldTouched('location', true);
-                    formik.setFieldTouched('location_id', true);
-                  }, 0);
+                label='Project Flock Kandang ID'
+                type='number'
+                name='project_flock_kandang_id'
+                value={formik.values.project_flock_kandang_id?.toString() || ''}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  formik.setFieldValue(
+                    'project_flock_kandang_id',
+                    parseInt(value) || 0
+                  );
+                  projectFlockChangeHandler(value);
                 }}
-                options={locationOptions}
-                onInputChange={setLocationSelectInputValue}
-                isLoading={isLoadingLocations}
+                onBlur={formik.handleBlur}
                 isError={
-                  formik.touched.location_id &&
-                  Boolean(formik.errors.location_id)
+                  formik.touched.project_flock_kandang_id &&
+                  Boolean(formik.errors.project_flock_kandang_id)
                 }
-                errorMessage={formik.errors.location_id as string}
-                isDisabled={type === 'detail'}
-                isClearable
-                placeholder='Pilih lokasi terlebih dahulu'
+                errorMessage={formik.errors.project_flock_kandang_id as string}
+                readOnly={type === 'detail'}
+                placeholder='Masukkan project flock kandang ID'
               />
 
               <TextInput
                 required
-                label='Tanggal Recording'
-                type='date'
-                name='recording_date'
+                label='Tanggal & Waktu Recording'
+                type='datetime-local'
+                name='record_datetime'
                 value={
-                  formik.values.recording_date instanceof Date
-                    ? formik.values.recording_date
+                  formik.values.record_datetime instanceof Date
+                    ? formik.values.record_datetime
                         .toISOString()
-                        .substring(0, 10)
+                        .substring(0, 16)
                     : ''
                 }
                 onChange={(e) => {
-                  const date = e.target.value ? new Date(e.target.value) : null;
-                  formik.setFieldValue('recording_date', date);
+                  const datetime = e.target.value
+                    ? new Date(e.target.value)
+                    : null;
+                  formik.setFieldValue('record_datetime', datetime);
                 }}
                 onBlur={formik.handleBlur}
                 isError={
-                  formik.touched.recording_date &&
-                  Boolean(formik.errors.recording_date)
+                  formik.touched.record_datetime &&
+                  Boolean(formik.errors.record_datetime)
                 }
-                errorMessage={formik.errors.recording_date as string}
+                errorMessage={formik.errors.record_datetime as string}
                 readOnly={type === 'detail'}
               />
 
-              <SelectInput
-                required
-                label='Flock'
-                value={formik.values.flock ?? undefined}
-                onChange={(val) => {
-                  flockChangeHandler(val);
-                  setTimeout(() => {
-                    formik.setFieldTouched('flock', true);
-                    formik.setFieldTouched('flock_id', true);
-                  }, 0);
+              <TextInput
+                label='Status'
+                type='number'
+                name='status'
+                value={formik.values.status?.toString() || ''}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  formik.setFieldValue('status', parseInt(value) || 0);
                 }}
-                options={flockOptions}
-                onInputChange={setFlockSelectInputValue}
-                isLoading={isLoadingFlocks}
-                isError={
-                  formik.touched.flock_id && Boolean(formik.errors.flock_id)
-                }
-                errorMessage={formik.errors.flock_id as string}
-                isDisabled={type === 'detail' || !formik.values.location_id}
-                isClearable
-                placeholder={
-                  !formik.values.location_id
-                    ? 'Pilih lokasi terlebih dahulu'
-                    : 'Pilih Flock'
-                }
+                onBlur={formik.handleBlur}
+                isError={formik.touched.status && Boolean(formik.errors.status)}
+                errorMessage={formik.errors.status as string}
+                readOnly={type === 'detail'}
+                placeholder='Masukkan status (0-3)'
               />
 
-              <SelectInput
-                key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
-                required
-                label='Kandang'
-                value={formik.values.coop ?? undefined}
-                onChange={(val) => {
-                  coopChangeHandler(val);
-                  setTimeout(() => {
-                    formik.setFieldTouched('coop', true);
-                    formik.setFieldTouched('coop_id', true);
-                  }, 0);
+              <CheckboxInput
+                label='On Time'
+                name='ontime'
+                checked={formik.values.ontime || false}
+                onChange={(e) => {
+                  formik.setFieldValue('ontime', e.target.checked);
                 }}
-                options={coopOptions}
-                isError={
-                  formik.touched.coop_id && Boolean(formik.errors.coop_id)
-                }
-                errorMessage={formik.errors.coop_id as string}
-                isDisabled={type === 'detail' || !selectedProjectFlock}
-                isClearable
-                placeholder={
-                  !selectedProjectFlock
-                    ? 'Pilih flock terlebih dahulu'
-                    : 'Pilih Kandang'
-                }
+                disabled={type === 'detail'}
               />
             </div>
           </Card>
-
-          {/* Feed Data Table */}
+          {/* Body Weights Table */}
           <Card
-            title='Data Pakan'
+            title='Data Bobot Badan'
             className={{
               wrapper: 'w-full mb-4 shadow',
               title: 'mb-4',
@@ -763,21 +357,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <th>
                         <div className='flex justify-center'>
                           <CheckboxInput
-                            name='select-all-feed'
+                            name='select-all-body-weights'
                             checked={
-                              formik.values.feed_data?.length ===
-                                selectedFeed.length &&
-                              formik.values.feed_data?.length > 0
+                              formik.values.body_weights?.length ===
+                                selectedBodyWeights.length &&
+                              formik.values.body_weights?.length > 0
                             }
                             onChange={(e) => {
                               if (e.target.checked) {
-                                setSelectedFeed(
-                                  formik.values.feed_data?.map(
+                                setSelectedBodyWeights(
+                                  formik.values.body_weights?.map(
                                     (_, idx) => idx
                                   ) ?? []
                                 );
                               } else {
-                                setSelectedFeed([]);
+                                setSelectedBodyWeights([]);
                               }
                             }}
                             naked={true}
@@ -787,248 +381,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       </th>
                     )}
                     <th>
-                      Nama Pakan
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    <th>Total Stock pada saat ini</th>
-                    <th>
-                      Jumlah Stock yang digunakan
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    {type !== 'detail' && <th>Action</th>}
-                  </tr>
-                </thead>
-                <tbody>
-                  {formik.values.feed_data?.map((feed, idx) => (
-                    <tr key={`feed-${idx}`}>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex flex-col items-center gap-2'>
-                            <CheckboxInput
-                              name={`feed-${idx}`}
-                              checked={selectedFeed.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedFeed([...selectedFeed, idx]);
-                                } else {
-                                  setSelectedFeed(
-                                    selectedFeed.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                              naked={true}
-                              size='sm'
-                            />
-                            <FieldMessage message={null} isVisible={false} />
-                          </div>
-                        </td>
-                      )}
-                      <td>
-                        <SelectInput
-                          required
-                          value={
-                            pakanOptions.find(
-                              (opt: OptionType) =>
-                                Number(opt.value) === Number(feed.feed_id)
-                            ) ?? null
-                          }
-                          onChange={(val) => {
-                            const productWarehouseId =
-                              (val as OptionType)?.value ?? 0;
-                            const stock = productWarehouseId
-                              ? (pakanStockMap.get(
-                                  productWarehouseId as number
-                                ) ?? '')
-                              : '';
-
-                            formik.setFieldValue(`feed_data.${idx}.feed`, val);
-                            formik.setFieldValue(
-                              `feed_data.${idx}.feed_id`,
-                              productWarehouseId || ''
-                            );
-                            formik.setFieldValue(
-                              `feed_data.${idx}.feed_qty`,
-                              stock
-                            );
-                            formik.setFieldValue(
-                              `feed_data.${idx}.feed_stock`,
-                              0
-                            );
-                            setTimeout(() => {
-                              formik.setFieldTouched(
-                                `feed_data.${idx}.feed`,
-                                true
-                              );
-                              formik.setFieldTouched(
-                                `feed_data.${idx}.feed_id`,
-                                true
-                              );
-                            }, 0);
-                          }}
-                          options={pakanOptions}
-                          isLoading={isLoadingPakan}
-                          isError={
-                            isRepeaterInputError('feed_data', 'feed_id', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('feed_data', 'feed_id', idx)
-                              .errorMessage
-                          }
-                          isDisabled={type === 'detail'}
-                          isClearable
-                          className={{
-                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          type='text'
-                          name={`feed_data.${idx}.feed_qty`}
-                          value={
-                            feed.feed_qty === '' || feed.feed_qty === undefined
-                              ? ''
-                              : String(feed.feed_qty)
-                          }
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          readOnly={true}
-                          placeholder='Pilih pakan terlebih dahulu'
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <NumberInput
-                          required
-                          name={`feed_data.${idx}.feed_stock`}
-                          value={feed.feed_stock}
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          maskType='number'
-                          decimals={0}
-                          min={0}
-                          isError={
-                            isRepeaterInputError('feed_data', 'feed_stock', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('feed_data', 'feed_stock', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
-                      </td>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex flex-col items-start gap-2'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeFeedData(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
-                            <FieldMessage message={null} isVisible={false} />
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            {type !== 'detail' && (
-              <div className='flex justify-center items-center mt-4 gap-4'>
-                {selectedFeed.length > 0 && (
-                  <Button
-                    type='button'
-                    color='error'
-                    onClick={removeSelectedFeedData}
-                    disabled={selectedFeed.length === 0}
-                    className='w-fit'
-                  >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                    />
-                    Delete Selected Feed Data ({selectedFeed.length})
-                  </Button>
-                )}
-                <Button
-                  type='button'
-                  color='success'
-                  onClick={addFeedData}
-                  className='w-fit'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Add Feed Data
-                </Button>
-              </div>
-            )}
-          </Card>
-
-          {/* Body Weight Table */}
-          <Card
-            title='Berat Ayam'
-            className={{
-              wrapper: 'w-full mb-4 shadow',
-              title: 'mb-4',
-            }}
-          >
-            <div className='overflow-x-auto'>
-              <table className='table'>
-                <thead>
-                  <tr>
-                    {type !== 'detail' && (
-                      <th>
-                        <div className='flex justify-center'>
-                          <CheckboxInput
-                            name='select-all-weight'
-                            checked={
-                              formik.values.body_weight?.length ===
-                                selectedWeight.length &&
-                              formik.values.body_weight?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedWeight(
-                                  formik.values.body_weight?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedWeight([]);
-                              }
-                            }}
-                            naked={true}
-                            size='sm'
-                          />
-                        </div>
-                      </th>
-                    )}
-                    <th>
-                      Berat (Gram)
+                      Berat Ayam (gram)
                       <span
                         className='tooltip tooltip-error tooltip-bottom z-[9999]'
                         data-tip='required'
@@ -1045,411 +398,113 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <span className='text-error'>*</span>
                       </span>
                     </th>
-                    <th>
-                      Rata-rata berat Ayam
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
+                    <th>Catatan</th>
                     {type !== 'detail' && <th>Action</th>}
                   </tr>
                 </thead>
                 <tbody>
-                  {formik.values.body_weight?.map((weight, idx) => (
-                    <tr key={`weight-${idx}`}>
+                  {formik.values.body_weights?.map((bw, idx) => (
+                    <tr key={`body-weight-${idx}`}>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-center gap-2'>
+                          <div className='flex justify-center'>
                             <CheckboxInput
-                              name={`weight-${idx}`}
-                              checked={selectedWeight.includes(idx)}
+                              name={`body-weight-${idx}`}
+                              checked={selectedBodyWeights.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedWeight([...selectedWeight, idx]);
+                                  setSelectedBodyWeights([
+                                    ...selectedBodyWeights,
+                                    idx,
+                                  ]);
                                 } else {
-                                  setSelectedWeight(
-                                    selectedWeight.filter((i) => i !== idx)
+                                  setSelectedBodyWeights(
+                                    selectedBodyWeights.filter((i) => i !== idx)
                                   );
                                 }
                               }}
                               naked={true}
                               size='sm'
                             />
-                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
                       )}
                       <td>
-                        <NumberInput
-                          required
-                          name={`body_weight.${idx}.chicken_weight`}
-                          value={weight.chicken_weight}
-                          onChange={handleChickenWeightChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          maskType='weight'
-                          weightUnit='gram'
-                          decimals={0}
-                          min={0}
-                          isError={
-                            isRepeaterInputError(
-                              'body_weight',
-                              'chicken_weight',
-                              idx
-                            ).isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError(
-                              'body_weight',
-                              'chicken_weight',
-                              idx
-                            ).errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <NumberInput
-                          required
-                          name={`body_weight.${idx}.chicken_count`}
-                          value={weight.chicken_count}
-                          onChange={handleChickenCountChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          maskType='number'
-                          decimals={0}
-                          min={0}
-                          isError={
-                            isRepeaterInputError(
-                              'body_weight',
-                              'chicken_count',
-                              idx
-                            ).isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError(
-                              'body_weight',
-                              'chicken_count',
-                              idx
-                            ).errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <div className='relative'>
-                          <NumberInput
-                            required
-                            name={`body_weight.${idx}.average_chicken_weight`}
-                            value={weight.average_chicken_weight || ''}
-                            onChange={handleAverageWeightChangeWrapper(idx)}
-                            onBlur={formik.handleBlur}
-                            maskType='weight'
-                            weightUnit='gram'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'average_chicken_weight',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'average_chicken_weight',
-                                idx
-                              ).errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                            placeholder=''
-                          />
-                        </div>
-                      </td>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex flex-col items-start gap-2'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeBodyWeight(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
-                            <FieldMessage message={null} isVisible={false} />
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            {type !== 'detail' && (
-              <div className='flex justify-center items-center mt-4 gap-4'>
-                {selectedWeight.length > 0 && (
-                  <Button
-                    type='button'
-                    color='error'
-                    onClick={removeSelectedBodyWeight}
-                    disabled={selectedWeight.length === 0}
-                    className='w-fit'
-                  >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                    />
-                    Delete Selected Body Weight ({selectedWeight.length})
-                  </Button>
-                )}
-                <Button
-                  type='button'
-                  color='success'
-                  onClick={addBodyWeight}
-                  className='w-fit'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Add Body Weight Data
-                </Button>
-              </div>
-            )}
-          </Card>
-
-          {/* Vaccination Table */}
-          <Card
-            title='Vaccination'
-            className={{
-              wrapper: 'w-full mb-4 shadow',
-              title: 'mb-4',
-            }}
-          >
-            <div className='overflow-x-auto'>
-              <table className='table'>
-                <thead>
-                  <tr>
-                    {type !== 'detail' && (
-                      <th>
-                        <div className='flex justify-center'>
-                          <CheckboxInput
-                            name='select-all-vaccine'
-                            checked={
-                              formik.values.vaccination?.length ===
-                                selectedVaccine.length &&
-                              formik.values.vaccination?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedVaccine(
-                                  formik.values.vaccination?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedVaccine([]);
-                              }
-                            }}
-                            naked={true}
-                            size='sm'
-                          />
-                        </div>
-                      </th>
-                    )}
-                    <th>
-                      Name Vaksin
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    <th>Total Stock pada saat ini</th>
-                    <th>
-                      Jumlah Stock yang digunakan
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    {type !== 'detail' && <th>Action</th>}
-                  </tr>
-                </thead>
-                <tbody>
-                  {formik.values.vaccination?.map((vaccine, idx) => (
-                    <tr key={`vaccine-${idx}`}>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex flex-col items-center gap-2'>
-                            <CheckboxInput
-                              name={`vaccine-${idx}`}
-                              checked={selectedVaccine.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedVaccine([...selectedVaccine, idx]);
-                                } else {
-                                  setSelectedVaccine(
-                                    selectedVaccine.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                              naked={true}
-                              size='sm'
-                            />
-                            <FieldMessage message={null} isVisible={false} />
-                          </div>
-                        </td>
-                      )}
-                      <td>
-                        <SelectInput
+                        <TextInput
                           required
+                          name={`body_weights.${idx}.weight`}
+                          type='number'
                           value={
-                            ovkOptions.find(
-                              (opt: OptionType) =>
-                                Number(opt.value) === Number(vaccine.vaccine_id)
-                            ) ?? null
+                            typeof bw.weight === 'number'
+                              ? bw.weight.toString()
+                              : bw.weight
                           }
-                          onChange={(val) => {
-                            const productWarehouseId =
-                              (val as OptionType)?.value ?? 0;
-                            const stock = productWarehouseId
-                              ? (ovkStockMap.get(
-                                  productWarehouseId as number
-                                ) ?? '')
-                              : '';
-                            formik.setFieldValue(
-                              `vaccination.${idx}.vaccine`,
-                              val
-                            );
-                            formik.setFieldValue(
-                              `vaccination.${idx}.vaccine_id`,
-                              productWarehouseId || ''
-                            );
-                            formik.setFieldValue(
-                              `vaccination.${idx}.total_stock`,
-                              stock
-                            );
-                            formik.setFieldValue(
-                              `vaccination.${idx}.used_stock`,
-                              0
-                            );
-                            // Set touched after setting values to trigger validation
-                            setTimeout(() => {
-                              formik.setFieldTouched(
-                                `vaccination.${idx}.vaccine`,
-                                true
-                              );
-                              formik.setFieldTouched(
-                                `vaccination.${idx}.vaccine_id`,
-                                true
-                              );
-                            }, 0);
-                          }}
-                          options={ovkOptions}
-                          isLoading={isLoadingOvk}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
                           isError={
-                            isRepeaterInputError(
-                              'vaccination',
-                              'vaccine_id',
-                              idx
-                            ).isError
+                            isRepeaterInputError('body_weights', 'weight', idx)
+                              .isError
                           }
                           errorMessage={
-                            isRepeaterInputError(
-                              'vaccination',
-                              'vaccine_id',
-                              idx
-                            ).errorMessage
+                            isRepeaterInputError('body_weights', 'weight', idx)
+                              .errorMessage
                           }
-                          isDisabled={type === 'detail'}
-                          isClearable
+                          readOnly={type === 'detail'}
                           className={{
-                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            wrapper: 'w-full min-w-32',
                           }}
+                          placeholder='Berat ayam (gram)'
                         />
                       </td>
                       <td>
                         <TextInput
-                          type='text'
-                          name={`vaccination.${idx}.total_stock`}
+                          required
+                          name={`body_weights.${idx}.qty`}
+                          type='number'
                           value={
-                            vaccine.total_stock === '' ||
-                            vaccine.total_stock === undefined
-                              ? ''
-                              : String(vaccine.total_stock)
+                            typeof bw.qty === 'number'
+                              ? bw.qty.toString()
+                              : bw.qty
                           }
                           onChange={formik.handleChange}
                           onBlur={formik.handleBlur}
-                          readOnly={true}
-                          placeholder='Pilih vaksin terlebih dahulu'
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <NumberInput
-                          required
-                          name={`vaccination.${idx}.used_stock`}
-                          value={vaccine.used_stock}
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          maskType='number'
-                          decimals={0}
-                          min={0}
                           isError={
-                            isRepeaterInputError(
-                              'vaccination',
-                              'used_stock',
-                              idx
-                            ).isError
+                            isRepeaterInputError('body_weights', 'qty', idx)
+                              .isError
                           }
                           errorMessage={
-                            isRepeaterInputError(
-                              'vaccination',
-                              'used_stock',
-                              idx
-                            ).errorMessage
+                            isRepeaterInputError('body_weights', 'qty', idx)
+                              .errorMessage
                           }
                           readOnly={type === 'detail'}
                           className={{
                             wrapper: 'w-full min-w-24',
                           }}
+                          placeholder='Jumlah ayam'
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`body_weights.${idx}.notes`}
+                          value={bw.notes || ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          placeholder='Catatan...'
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
+                          }}
                         />
                       </td>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-start gap-2'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeVaccination(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
-                            <FieldMessage message={null} isVisible={false} />
-                          </div>
+                          <button
+                            type='button'
+                            onClick={() => removeBodyWeight(idx)}
+                            className='btn btn-error btn-sm'
+                          >
+                            <Icon icon='mdi:trash-can' className='h-4 w-4' />
+                          </button>
                         </td>
                       )}
                     </tr>
@@ -1458,39 +513,32 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </table>
             </div>
             {type !== 'detail' && (
-              <div className='flex justify-center items-center mt-4 gap-4'>
-                {selectedVaccine.length > 0 && (
-                  <Button
+              <div className='flex justify-end mt-4 gap-2'>
+                {selectedBodyWeights.length > 0 && (
+                  <button
                     type='button'
-                    color='error'
-                    onClick={removeSelectedVaccination}
-                    disabled={selectedVaccine.length === 0}
-                    className='w-fit'
+                    onClick={removeSelectedBodyWeights}
+                    className='btn btn-error btn-sm'
                   >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                    />
-                    Delete Selected Vaccination ({selectedVaccine.length})
-                  </Button>
+                    <Icon icon='mdi:trash-can' className='h-4 w-4' />
+                    Hapus Terpilih ({selectedBodyWeights.length})
+                  </button>
                 )}
-                <Button
+                <button
                   type='button'
-                  color='success'
-                  onClick={addVaccination}
-                  className='w-fit'
+                  onClick={addBodyWeight}
+                  className='btn btn-success btn-sm'
                 >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Add Vaccination Data
-                </Button>
+                  <Icon icon='ic:round-plus' className='h-4 w-4' />
+                  Tambah Bobot Badan
+                </button>
               </div>
             )}
           </Card>
 
-          {/* Mortality Table */}
+          {/* Stocks Table */}
           <Card
-            title='Mortalitas'
+            title='Data Stok Pakan'
             className={{
               wrapper: 'w-full mb-4 shadow',
               title: 'mb-4',
@@ -1504,21 +552,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <th>
                         <div className='flex justify-center'>
                           <CheckboxInput
-                            name='select-all-mortality'
+                            name='select-all-stocks'
                             checked={
-                              formik.values.mortality?.length ===
-                                selectedMortality.length &&
-                              formik.values.mortality?.length > 0
+                              formik.values.stocks?.length ===
+                                selectedStocks.length &&
+                              formik.values.stocks?.length > 0
                             }
                             onChange={(e) => {
                               if (e.target.checked) {
-                                setSelectedMortality(
-                                  formik.values.mortality?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
+                                setSelectedStocks(
+                                  formik.values.stocks?.map((_, idx) => idx) ??
+                                    []
                                 );
                               } else {
-                                setSelectedMortality([]);
+                                setSelectedStocks([]);
                               }
                             }}
                             naked={true}
@@ -1528,16 +575,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       </th>
                     )}
                     <th>
-                      Kondisi/Alasan Mortalitas
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    <th>
-                      Jumlah
+                      Product Warehouse ID
                       <span
                         className='tooltip tooltip-error tooltip-bottom z-[9999]'
                         data-tip='required'
@@ -1545,109 +583,166 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <span className='text-error'>*</span>
                       </span>
                     </th>
+                    <th>Penambahan</th>
+                    <th>Pengurangan</th>
+                    <th>Jumlah Pakai</th>
+                    <th>Catatan</th>
                     {type !== 'detail' && <th>Action</th>}
                   </tr>
                 </thead>
                 <tbody>
-                  {formik.values.mortality?.map((mortality, idx) => (
-                    <tr key={`mortality-${idx}`}>
+                  {formik.values.stocks?.map((stock, idx) => (
+                    <tr key={`stock-${idx}`}>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-center gap-2'>
+                          <div className='flex justify-center'>
                             <CheckboxInput
-                              name={`mortality-${idx}`}
-                              checked={selectedMortality.includes(idx)}
+                              name={`stock-${idx}`}
+                              checked={selectedStocks.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedMortality([
-                                    ...selectedMortality,
-                                    idx,
-                                  ]);
+                                  setSelectedStocks([...selectedStocks, idx]);
                                 } else {
-                                  setSelectedMortality(
-                                    selectedMortality.filter((i) => i !== idx)
+                                  setSelectedStocks(
+                                    selectedStocks.filter((i) => i !== idx)
                                   );
                                 }
                               }}
                               naked={true}
                               size='sm'
                             />
-                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
                       )}
                       <td>
-                        <SelectInput
+                        <TextInput
                           required
-                          value={RECORDING_FLAG_OPTIONS.find(
-                            (opt) => opt.value === mortality.condition
-                          )}
-                          onChange={(val) => {
-                            formik.setFieldTouched(
-                              `mortality.${idx}.condition`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `mortality.${idx}.condition`,
-                              (val as OptionType)?.value
-                            );
-                          }}
+                          name={`stocks.${idx}.product_warehouse_id`}
+                          type='number'
+                          value={stock.product_warehouse_id?.toString() || ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
                           isError={
-                            isRepeaterInputError('mortality', 'condition', idx)
-                              .isError
+                            isRepeaterInputError(
+                              'stocks',
+                              'product_warehouse_id',
+                              idx
+                            ).isError
                           }
                           errorMessage={
-                            isRepeaterInputError('mortality', 'condition', idx)
-                              .errorMessage
+                            isRepeaterInputError(
+                              'stocks',
+                              'product_warehouse_id',
+                              idx
+                            ).errorMessage
                           }
-                          options={RECORDING_FLAG_OPTIONS}
-                          isDisabled={type === 'detail'}
-                          isClearable
+                          readOnly={type === 'detail'}
                           className={{
-                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            wrapper: 'w-full min-w-32',
                           }}
+                          placeholder='Product Warehouse ID'
                         />
                       </td>
                       <td>
-                        <NumberInput
-                          required
-                          name={`mortality.${idx}.count`}
-                          value={mortality.count}
+                        <TextInput
+                          name={`stocks.${idx}.increase`}
+                          type='number'
+                          value={
+                            typeof stock.increase === 'number'
+                              ? stock.increase.toString()
+                              : stock.increase
+                          }
                           onChange={formik.handleChange}
                           onBlur={formik.handleBlur}
-                          maskType='number'
-                          decimals={0}
-                          min={0}
                           isError={
-                            isRepeaterInputError('mortality', 'count', idx)
+                            isRepeaterInputError('stocks', 'increase', idx)
                               .isError
                           }
                           errorMessage={
-                            isRepeaterInputError('mortality', 'count', idx)
+                            isRepeaterInputError('stocks', 'increase', idx)
                               .errorMessage
                           }
                           readOnly={type === 'detail'}
                           className={{
                             wrapper: 'w-full min-w-24',
                           }}
+                          placeholder='Penambahan'
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`stocks.${idx}.decrease`}
+                          type='number'
+                          value={
+                            typeof stock.decrease === 'number'
+                              ? stock.decrease.toString()
+                              : stock.decrease
+                          }
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          isError={
+                            isRepeaterInputError('stocks', 'decrease', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('stocks', 'decrease', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                          placeholder='Pengurangan'
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`stocks.${idx}.usage_amount`}
+                          type='number'
+                          value={
+                            typeof stock.usage_amount === 'number'
+                              ? stock.usage_amount.toString()
+                              : stock.usage_amount
+                          }
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          isError={
+                            isRepeaterInputError('stocks', 'usage_amount', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('stocks', 'usage_amount', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                          placeholder='Jumlah Pakai'
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`stocks.${idx}.notes`}
+                          value={stock.notes || ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          placeholder='Catatan...'
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
+                          }}
                         />
                       </td>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-start gap-2'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeMortality(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
-                            <FieldMessage message={null} isVisible={false} />
-                          </div>
+                          <button
+                            type='button'
+                            onClick={() => removeStock(idx)}
+                            className='btn btn-error btn-sm'
+                          >
+                            <Icon icon='mdi:trash-can' className='h-4 w-4' />
+                          </button>
                         </td>
                       )}
                     </tr>
@@ -1656,32 +751,255 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </table>
             </div>
             {type !== 'detail' && (
-              <div className='flex justify-center items-center mt-4 gap-4'>
-                {selectedMortality.length > 0 && (
-                  <Button
+              <div className='flex justify-end mt-4 gap-2'>
+                {selectedStocks.length > 0 && (
+                  <button
                     type='button'
-                    color='error'
-                    onClick={removeSelectedMortality}
-                    disabled={selectedMortality.length === 0}
-                    className='w-fit'
+                    onClick={removeSelectedStocks}
+                    className='btn btn-error btn-sm'
                   >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                    />
-                    Delete Selected Mortality ({selectedMortality.length})
-                  </Button>
+                    <Icon icon='mdi:trash-can' className='h-4 w-4' />
+                    Hapus Terpilih ({selectedStocks.length})
+                  </button>
                 )}
-                <Button
+                <button
                   type='button'
-                  color='success'
-                  onClick={addMortality}
-                  className='w-fit'
+                  onClick={addStock}
+                  className='btn btn-success btn-sm'
                 >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Add Mortality Data
-                </Button>
+                  <Icon icon='ic:round-plus' className='h-4 w-4' />
+                  Tambah Stok
+                </button>
+              </div>
+            )}
+          </Card>
+
+          {/* Depletions Table */}
+          <Card
+            title='Data Depletions (Hilang/Mati)'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <div className='flex justify-center'>
+                          <CheckboxInput
+                            name='select-all-depletions'
+                            checked={
+                              formik.values.depletions?.length ===
+                                selectedDepletions.length &&
+                              formik.values.depletions?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedDepletions(
+                                  formik.values.depletions?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedDepletions([]);
+                              }
+                            }}
+                            naked={true}
+                            size='sm'
+                          />
+                        </div>
+                      </th>
+                    )}
+                    <th>
+                      Product Warehouse ID
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Kondisi
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Total
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>Catatan</th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.depletions?.map((depletion, idx) => (
+                    <tr key={`depletion-${idx}`}>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name={`depletion-${idx}`}
+                              checked={selectedDepletions.includes(idx)}
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedDepletions([
+                                    ...selectedDepletions,
+                                    idx,
+                                  ]);
+                                } else {
+                                  setSelectedDepletions(
+                                    selectedDepletions.filter((i) => i !== idx)
+                                  );
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
+                        </td>
+                      )}
+                      <td>
+                        <TextInput
+                          required
+                          name={`depletions.${idx}.product_warehouse_id`}
+                          type='number'
+                          value={
+                            depletion.product_warehouse_id?.toString() || ''
+                          }
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          isError={
+                            isRepeaterInputError(
+                              'depletions',
+                              'product_warehouse_id',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'depletions',
+                              'product_warehouse_id',
+                              idx
+                            ).errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
+                          }}
+                          placeholder='Product Warehouse ID'
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`depletions.${idx}.condition`}
+                          value={depletion.condition || ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          isError={
+                            isRepeaterInputError('depletions', 'condition', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('depletions', 'condition', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
+                          }}
+                          placeholder='Kondisi (MATI/SAKIT/HILANG)'
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`depletions.${idx}.total`}
+                          type='number'
+                          value={
+                            typeof depletion.total === 'number'
+                              ? depletion.total.toString()
+                              : depletion.total
+                          }
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          isError={
+                            isRepeaterInputError('depletions', 'total', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('depletions', 'total', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                          placeholder='Total'
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`depletions.${idx}.notes`}
+                          value={depletion.notes || ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          placeholder='Catatan...'
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <button
+                            type='button'
+                            onClick={() => removeDepletion(idx)}
+                            className='btn btn-error btn-sm'
+                          >
+                            <Icon icon='mdi:trash-can' className='h-4 w-4' />
+                          </button>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-end mt-4 gap-2'>
+                {selectedDepletions.length > 0 && (
+                  <button
+                    type='button'
+                    onClick={removeSelectedDepletions}
+                    className='btn btn-error btn-sm'
+                  >
+                    <Icon icon='mdi:trash-can' className='h-4 w-4' />
+                    Hapus Terpilih ({selectedDepletions.length})
+                  </button>
+                )}
+                <button
+                  type='button'
+                  onClick={addDepletion}
+                  className='btn btn-success btn-sm'
+                >
+                  <Icon icon='ic:round-plus' className='h-4 w-4' />
+                  Tambah Depletion
+                </button>
               </div>
             )}
           </Card>
@@ -1697,7 +1015,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             }
             onDelete={deleteRecordingClickHandler}
           />
-
           {recordingFormErrorMessage && (
             <div role='alert' className='alert alert-error'>
               <Icon
diff --git a/src/types/api/production/recording.d.ts b/src/types/api/production/recording.d.ts
index 6fac0bc8..f276562a 100644
--- a/src/types/api/production/recording.d.ts
+++ b/src/types/api/production/recording.d.ts
@@ -1,60 +1,52 @@
-import { BaseMetadata } from '@/types/api/api-general';
-import { Location } from '@/types/api/master-data/location';
-import { Kandang } from '@/types/api/master-data/kandang';
-import { Flock } from '@/types/api/master-data/flock';
+import { BaseMetadata, User } from '@/types/api/api-general';
+
+export type ProductionMetrics = {
+  total_depletion: number;
+  cum_depletion_rate: number;
+  daily_gain: number;
+  avg_daily_gain: number;
+  cum_intake: number;
+  fcr_value: number;
+  total_chick: number;
+  daily_depletion_rate: number;
+  cum_depletion: number;
+};
 
 export type BaseRecording = {
   id: number;
-  flock: Flock;
-  recording_date: string;
-  location: Location;
-  coop: Kandang;
-  feed_data: {
-    feed_name: string;
-    feed_qty: number;
-    feed_stock: number;
-  }[];
-  body_weight: {
-    chicken_weight: number;
-    chicken_count: number;
-    average_chicken_weight: number;
-  }[];
-  vaccination: {
-    vaccine_name: string;
-    total_stock: number;
-    used_stock: number;
-  }[];
-  mortality: {
-    condition: string;
-    count: number;
-  }[];
-};
+  project_flock_kandang_id: number;
+  record_datetime: string;
+  record_date: string;
+  status: number;
+  ontime: boolean;
+  day: number;
+  created_user: User;
+} & ProductionMetrics;
 
 export type Recording = BaseMetadata & BaseRecording;
 
 export type CreateRecordingPayload = {
-  flock_id: number;
-  recording_date: string;
-  location_id: number;
-  coop_id: number;
-  feed_data: {
-    feed_id: string;
-    feed_qty: number;
-    feed_stock: number;
+  project_flock_kandang_id: number;
+  record_datetime: string;
+  status?: number;
+  ontime?: boolean;
+  body_weights?: {
+    weight: number;
+    qty: number;
+    notes?: string;
   }[];
-  body_weight: {
-    chicken_weight: number;
-    chicken_count: number;
-    average_chicken_weight: number;
+  stocks?: {
+    product_warehouse_id: number;
+    increase?: number;
+    decrease?: number;
+    usage_amount?: number;
+    notes?: string;
   }[];
-  vaccination: {
-    vaccine_id: string;
-    total_stock: number;
-    used_stock: number;
-  }[];
-  mortality: {
+  depletions?: {
+    product_warehouse_id: number;
     condition: string;
-    count: number;
+    total: number;
+    notes?: string;
   }[];
 };
 

From 1e2ea79a6a2d4e583a819921950f797c09dc4f69 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:51:20 +0700
Subject: [PATCH 23/92] chore(FE-147): add close button for MainDrawer

---
 src/components/MainDrawer.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/MainDrawer.tsx b/src/components/MainDrawer.tsx
index be87f069..4a3b44b0 100644
--- a/src/components/MainDrawer.tsx
+++ b/src/components/MainDrawer.tsx
@@ -10,6 +10,7 @@ import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Navbar from '@/components/Navbar';
 import Collapse from '@/components/Collapse';
+import Button from '@/components/Button';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
@@ -155,9 +156,15 @@ const MainDrawerMenu = () => {
 };
 
 const MainDrawerContent = () => {
+  const { setMainDrawerOpen } = useUiStore();
+
+  const closeMainDrawerHandler = () => {
+    setMainDrawerOpen(false);
+  };
+
   return (
     <div className='w-full p-4 flex flex-col gap-4'>
-      <div className='flex items-center gap-4'>
+      <div className='flex flex-row items-center gap-4'>
         <Image
           src='/assets/img/lti-logo.png'
           alt='MBU Logo'
@@ -167,6 +174,21 @@ const MainDrawerContent = () => {
         />
 
         <h1 className='text-xl font-bold'>LTI ERP</h1>
+
+        <div className='grow flex flex-row justify-end sm:hidden'>
+          <Button
+            variant='soft'
+            color='error'
+            onClick={closeMainDrawerHandler}
+            className='rounded-full'
+          >
+            <Icon
+              icon='material-symbols:close-rounded'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
       </div>
 
       <MainDrawerMenu />

From 204369e0feb41e820fe712858d3b775690ba9e35 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:51:39 +0700
Subject: [PATCH 24/92] feat(FE-147): add CheckboxInput component

---
 src/components/input/CheckboxInput.tsx | 89 ++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 src/components/input/CheckboxInput.tsx

diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
new file mode 100644
index 00000000..fb0c95c7
--- /dev/null
+++ b/src/components/input/CheckboxInput.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { HTMLProps, useEffect, useRef } from 'react';
+import { cn } from '@/lib/helper';
+
+interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
+  name: string;
+  label?: string;
+  indeterminate?: boolean;
+  classNames?: {
+    wrapper?: string;
+    inputWrapper?: string;
+    checkbox?: string;
+    label?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+}
+
+const CheckboxInput = ({
+  indeterminate,
+  name,
+  label,
+  className,
+  classNames,
+  isValid,
+  isError,
+  errorMessage,
+  ...rest
+}: CheckboxInputProps) => {
+  const ref = useRef<HTMLInputElement>(null!);
+
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
+
+  return (
+    <div
+      className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
+    >
+      <div
+        className={cn(
+          'flex flex-row justify-center items-center gap-2',
+          classNames?.inputWrapper
+        )}
+      >
+        <input
+          type='checkbox'
+          ref={ref}
+          id={name}
+          name={name}
+          className={cn(
+            'checkbox cursor-pointer',
+            {
+              'border-error': isError,
+              'border-success': isValid,
+            },
+            className,
+            classNames?.checkbox
+          )}
+          {...rest}
+        />
+
+        {label && (
+          <label
+            htmlFor={name}
+            className={cn(
+              'text-inherit',
+              {
+                'text-error': isError,
+                'text-success': isValid,
+              },
+              classNames?.label
+            )}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+
+      {errorMessage && <span className='text-error'>{errorMessage}</span>}
+    </div>
+  );
+};
+
+export default CheckboxInput;

From 3c8bdfbdac062e2754c3521d79e0340d896a1950 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:52:29 +0700
Subject: [PATCH 25/92] chore(FE-147): set generic when using getByPath
 function

---
 src/components/input/SelectInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index b491077f..6aaedc17 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -252,8 +252,8 @@ const useSelect = <T,>(
   const options = isResponseSuccess(data)
     ? data.data.map((item) => {
         return {
-          value: getByPath(item, valueKey as string),
-          label: getByPath(item, labelKey as string),
+          value: getByPath<T, number>(item, valueKey as string),
+          label: getByPath<T, string>(item, labelKey as string),
         };
       })
     : [];

From 5e710a792f473055e9d4b0223ef0e55b97e297d8 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:52:51 +0700
Subject: [PATCH 26/92] chore(FE-147): set moment locale to 'id' globally

---
 src/lib/helper.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index 0f827e8a..fe5811fd 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -1,7 +1,11 @@
 import moment from 'moment';
+import 'moment/locale/id';
 import { twMerge } from 'tailwind-merge';
 import clsx, { ClassValue } from 'clsx';
 
+// set locale globally
+moment.locale('id');
+
 export const sleep = (ms: number = 1000) =>
   new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -42,9 +46,9 @@ export function getByPath<T, D = undefined>(
   obj: T,
   path: string,
   defaultValue?: D
-): unknown | D {
+): D {
   if (obj == null) return defaultValue as D;
-  if (!path) return obj as unknown;
+  if (!path) return obj as D;
 
   const segments = path.split('.').filter(Boolean);
   let cur: { [key: string]: unknown } = obj;
@@ -59,5 +63,5 @@ export function getByPath<T, D = undefined>(
     cur = cur[key] as { [key: string]: unknown };
   }
 
-  return cur as unknown;
+  return cur as D;
 }

From d2f24723fce85c9b05285dd47e49d6169afe2aad Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:53:41 +0700
Subject: [PATCH 27/92] chore(FE-141): set dummy data for Transfer to Laying
 detail page

---
 .../transfer-to-laying/detail/page.tsx         | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/app/production/transfer-to-laying/detail/page.tsx b/src/app/production/transfer-to-laying/detail/page.tsx
index 4d603098..de5426c8 100644
--- a/src/app/production/transfer-to-laying/detail/page.tsx
+++ b/src/app/production/transfer-to-laying/detail/page.tsx
@@ -13,7 +13,7 @@ import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
 // TODO: delete dummy data
 const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
   id: 1,
-  transfer_date: '14-10-2025',
+  transfer_date: '2025-10-14',
   flock_source: {
     id: 1,
     name: 'Flock asal test',
@@ -114,9 +114,11 @@ const TransferToLayingDetail = () => {
     );
   }
 
+  // TODO: remove dummy data and integrate with real API
   if (
     !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_DETAIL))
   ) {
     router.replace('/404');
     return;
@@ -127,12 +129,18 @@ const TransferToLayingDetail = () => {
       {isLoadingTransferToLaying && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+      {/* {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
         <TransferToLayingForm
           type='detail'
-          initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
+          initialValues={transferToLaying.data}
         />
-      )}
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='detail'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
+      />
     </div>
   );
 };

From ab9fbc903273a18a48a5f9f2711c9c0c651d57ad Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:54:02 +0700
Subject: [PATCH 28/92] feat(FE-147): create TransferToLayingsTable component

---
 .../TransferToLayingsTable.tsx                | 633 ++++++++++++++++++
 1 file changed, 633 insertions(+)
 create mode 100644 src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
new file mode 100644
index 00000000..52d21016
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
@@ -0,0 +1,633 @@
+'use client';
+
+import { ChangeEventHandler, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import TextInput from '@/components/input/TextInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { cn, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { Flock } from '@/types/api/master-data/flock';
+import { FlockApi } from '@/services/api/master-data';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  approveClickHandler,
+  rejectClickHandler,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<TransferToLaying, unknown>;
+  approveClickHandler: () => void;
+  rejectClickHandler: () => void;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type === 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <Button
+        href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+
+      <Button
+        href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+
+      <Button
+        variant='ghost'
+        color='success'
+        onClick={approveClickHandler}
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:check' width={24} height={24} />
+        Approve
+      </Button>
+
+      <Button
+        variant='ghost'
+        color='error'
+        onClick={rejectClickHandler}
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:close' width={24} height={24} />
+        Reject
+      </Button>
+
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const TransferToLayingsTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      transferDate: '',
+      flockSource: '',
+      flockDestination: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      transferDate: 'transfer_date',
+      flockSource: 'flock_source',
+      flockDestination: 'flock_destination',
+    },
+  });
+
+  const {
+    data: transferToLayings,
+    isLoading,
+    mutate: refreshTransferToLayings,
+  } = useSWR(
+    `${TransferToLayingApi.basePath}${getTableFilterQueryString()}`,
+    TransferToLayingApi.getAllFetcher
+  );
+
+  // Modal hooks
+  const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  // Flocks data
+  const {
+    setInputValue: setFlockSourceInputValue,
+    options: flockSourceOptions,
+    isLoadingOptions: isLoadingFlockSourceOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setFlockDestinationInputValue,
+    options: flockDestinationOptions,
+    isLoadingOptions: isLoadingFlockDestinationOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  // Flocks value
+  const [selectedFlockSource, setSelectedFlockSource] =
+    useState<OptionType | null>(null);
+  const [selectedFlockDestination, setSelectedFlockDestination] =
+    useState<OptionType | null>(null);
+
+  const [selectedTransferToLaying, setSelectedTransferToLaying] = useState<
+    TransferToLaying | undefined
+  >(undefined);
+
+  // Modal loading state
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const transferToLayingsColumns: ColumnDef<TransferToLaying>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <div className='w-full flex flex-row justify-center'>
+          <CheckboxInput
+            name='allRow'
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => (
+        <div>
+          <CheckboxInput
+            name='row'
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            indeterminate={row.getIsSomeSelected()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        </div>
+      ),
+    },
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'transfer_date',
+      header: 'Tanggal Transfer',
+      cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'flock_source',
+      header: 'Flock Asal',
+      cell: (props) => props.row.original.flock_source.name,
+    },
+    {
+      accessorKey: 'flock_destination',
+      header: 'Flock Tujuan',
+      cell: (props) => props.row.original.flock_destination.name,
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Kuantitas',
+    },
+    {
+      accessorKey: 'reason',
+      header: 'Alasan Transfer',
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const approveClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          approveModal.openModal();
+        };
+
+        const rejectClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          rejectModal.openModal();
+        };
+
+        const deleteClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const bulkApproveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const bulkRejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await TransferToLayingApi.delete(selectedTransferToLaying?.id as number);
+    refreshTransferToLayings();
+
+    deleteModal.closeModal();
+    toast.success('Berhasil menghapus data transfer ke laying!');
+    setIsDeleteLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+
+    const bulkApproveResponse = await TransferToLayingApi.bulkApprove(
+      selectedRowIds
+    );
+
+    if (isResponseSuccess(bulkApproveResponse)) {
+      refreshTransferToLayings();
+      approveModal.closeModal();
+
+      // TODO: remove console.log
+      console.log('Approved data:', selectedRowIds);
+
+      toast.success(
+        `Berhasil approve ${selectedRowIds.length} data transfer ke laying!`
+      );
+
+      setRowSelection({});
+    } else {
+      approveModal.closeModal();
+
+      toast.error(
+        `Gagal approve ${selectedRowIds.length} data transfer ke laying!`
+      );
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async () => {
+    setIsRejectLoading(true);
+
+    const bulkRejectResponse = await TransferToLayingApi.bulkReject(
+      selectedRowIds
+    );
+
+    if (isResponseSuccess(bulkRejectResponse)) {
+      refreshTransferToLayings();
+      rejectModal.closeModal();
+
+      // TODO: remove console.log
+      console.log('Rejected data:', selectedRowIds);
+
+      toast.success(
+        `Berhasil reject ${selectedRowIds.length} data transfer ke laying!`
+      );
+      setRowSelection({});
+    } else {
+      rejectModal.closeModal();
+
+      toast.error(
+        `Gagal reject ${selectedRowIds.length} data transfer ke laying!`
+      );
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  const transferDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('transferDate', e.target.value);
+  };
+
+  const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedFlockSource(val as OptionType);
+    updateFilter(
+      'flockSource',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const flockDestinationChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedFlockDestination(val as OptionType);
+    updateFilter(
+      'flockDestination',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  // track sorting
+  //   useEffect(() => {
+  //     const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+  //     if (!isNameSorted) {
+  //       updateFilter('nameSort', '');
+  //     } else {
+  //       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+  //     }
+  //   }, [sorting, updateFilter]);
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
+            <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+              <Button
+                href='/production/transfer-to-laying/add'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Transfer ke Laying
+              </Button>
+
+              {selectedRowIds.length > 0 && (
+                <>
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={bulkApproveClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
+
+                  <Button
+                    variant='outline'
+                    color='error'
+                    onClick={bulkRejectClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </>
+              )}
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari TransferToLaying'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='grid grid-cols-12 justify-end gap-4'>
+            <TextInput
+              required
+              type='date'
+              label='Tanggal Transfer'
+              name='transfer_date'
+              placeholder='Masukkan tanggal transfer'
+              value={tableFilterState.transferDate}
+              onChange={transferDateChangeHandler}
+              className={{ wrapper: 'col-span-12 sm:col-span-3' }}
+            />
+
+            <SelectInput
+              label='Flock Asal'
+              options={flockSourceOptions}
+              isLoading={isLoadingFlockSourceOptions}
+              value={selectedFlockSource}
+              onChange={flockSourceChangeHandler}
+              onInputChange={setFlockSourceInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Flock Tujuan'
+              options={flockDestinationOptions}
+              isLoading={isLoadingFlockDestinationOptions}
+              value={selectedFlockDestination}
+              onChange={flockDestinationChangeHandler}
+              onInputChange={setFlockDestinationInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-3 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<TransferToLaying>
+          data={
+            isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
+          }
+          columns={transferToLayingsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(transferToLayings) &&
+                transferToLayings?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data transfer ke laying ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={approveModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isApproveLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={rejectModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isRejectLoading,
+          onClick: confirmationModalRejectClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default TransferToLayingsTable;

From 9a51b2876f78ce2b2aa5aeed4d3be37735b51ffb Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:54:46 +0700
Subject: [PATCH 29/92] chore(FE-113,140,141): adjust back button link

---
 .../transfer-to-laying/form/TransferToLayingForm.tsx      | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
index c4428a72..b026b47f 100644
--- a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
@@ -288,7 +288,7 @@ const TransferToLayingForm = ({
       <section className='w-full max-w-3xl'>
         <header className='flex flex-col gap-4'>
           <Button
-            href='/master-data/nonstock'
+            href='/production/transfer-to-laying'
             variant='link'
             className='w-fit p-0 text-primary'
           >
@@ -418,6 +418,9 @@ const TransferToLayingForm = ({
                               value={kandang.kandang}
                               options={[]}
                               isDisabled
+                              className={{
+                                wrapper: 'min-w-52',
+                              }}
                             />
                           </td>
 
@@ -441,6 +444,9 @@ const TransferToLayingForm = ({
                                 idx
                               )}
                               readOnly={type === 'detail'}
+                              className={{
+                                wrapper: 'min-w-52',
+                              }}
                             />
                           </td>
                         </tr>

From 3226b22dfbcf012b613b4dd94d022f5b7172493f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:55:12 +0700
Subject: [PATCH 30/92] chore(FE-147): use dummy data

---
 .../api/production/transfer-to-laying.ts      | 661 +++++++++++++++++-
 1 file changed, 651 insertions(+), 10 deletions(-)

diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
index 69b4db73..00bf8080 100644
--- a/src/services/api/production/transfer-to-laying.ts
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -2,8 +2,594 @@ import { sleep } from '@/lib/helper';
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 
+import {
+  CreateTransferToLayingPayload,
+  TransferToLaying,
+  UpdateTransferToLayingPayload,
+} from '@/types/api/production/transfer-to-laying';
 import { FlockWithKandangs } from '@/types/api/master-data/flock';
 
+// TODO: delete this dummy data
+const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
+  TransferToLaying[]
+> = {
+  code: 200,
+  status: 'success',
+  message: 'Successfully get all transfer to laying data!',
+  meta: {
+    page: 1,
+    limit: 10,
+    total_pages: 1,
+    total_results: 8,
+  },
+  data: [
+    {
+      id: 201,
+      transfer_date: '2025-10-10',
+      flock_source: { id: 1, name: 'Flock A' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 1200,
+      kandangs: [
+        {
+          kandang: {
+            id: 11,
+            name: 'KDG-11',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 501,
+              id_user: 501,
+              email: 'rina@farm.co',
+              name: 'Rina Setiawan',
+            },
+            created_user: {
+              id: 9001,
+              id_user: 9001,
+              email: 'admin@farm.co',
+              name: 'System Admin',
+            },
+            created_at: '2025-09-01T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 600,
+        },
+        {
+          kandang: {
+            id: 12,
+            name: 'KDG-12',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 502,
+              id_user: 502,
+              email: 'budi@farm.co',
+              name: 'Budi Hartono',
+            },
+            created_user: {
+              id: 9002,
+              id_user: 9002,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-08-25T08:00:00Z',
+            updated_at: '2025-09-20T08:00:00Z',
+          },
+          quantity: 600,
+        },
+      ],
+      reason: 'Start laying cycle',
+      created_user: {
+        id: 9100,
+        id_user: 9100,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-10T06:00:00Z',
+      updated_at: '2025-10-10T06:00:00Z',
+    },
+    {
+      id: 202,
+      transfer_date: '2025-10-11',
+      flock_source: { id: 2, name: 'Flock B' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 950,
+      kandangs: [
+        {
+          kandang: {
+            id: 13,
+            name: 'KDG-13',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 503,
+              id_user: 503,
+              email: 'sari@farm.co',
+              name: 'Sari Wulandari',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-09-05T08:00:00Z',
+            updated_at: '2025-10-02T08:00:00Z',
+          },
+          quantity: 500,
+        },
+        {
+          kandang: {
+            id: 14,
+            name: 'KDG-14',
+            status: 'MAINTENANCE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 504,
+              id_user: 504,
+              email: 'agus@farm.co',
+              name: 'Agus Pratama',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-07-15T08:00:00Z',
+            updated_at: '2025-09-15T08:00:00Z',
+          },
+          quantity: 450,
+        },
+      ],
+      reason: 'Capacity balancing',
+      created_user: {
+        id: 9101,
+        id_user: 9101,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-11T06:00:00Z',
+      updated_at: '2025-10-11T06:00:00Z',
+    },
+    {
+      id: 203,
+      transfer_date: '2025-10-12',
+      flock_source: { id: 3, name: 'Flock C' },
+      flock_destination: { id: 11, name: 'Laying House 2' },
+      quantity: 1100,
+      kandangs: [
+        {
+          kandang: {
+            id: 21,
+            name: 'KDG-21',
+            status: 'ACTIVE',
+            location: {
+              id: 103,
+              name: 'Farm Gamma',
+              address: 'Dusun Gamma',
+              area: { id: 1003, name: 'Area Timur' },
+            },
+            pic: {
+              id: 505,
+              id_user: 505,
+              email: 'dewi@farm.co',
+              name: 'Dewi Lestari',
+            },
+            created_user: {
+              id: 9004,
+              id_user: 9004,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-10T08:00:00Z',
+            updated_at: '2025-10-05T08:00:00Z',
+          },
+          quantity: 700,
+        },
+        {
+          kandang: {
+            id: 22,
+            name: 'KDG-22',
+            status: 'ACTIVE',
+            location: {
+              id: 103,
+              name: 'Farm Gamma',
+              address: 'Dusun Gamma',
+              area: { id: 1003, name: 'Area Timur' },
+            },
+            pic: {
+              id: 506,
+              id_user: 506,
+              email: 'hadi@farm.co',
+              name: 'Hadi Santoso',
+            },
+            created_user: {
+              id: 9004,
+              id_user: 9004,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-12T08:00:00Z',
+            updated_at: '2025-10-06T08:00:00Z',
+          },
+          quantity: 400,
+        },
+      ],
+      reason: 'Align age group',
+      created_user: {
+        id: 9102,
+        id_user: 9102,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-12T06:00:00Z',
+      updated_at: '2025-10-12T06:00:00Z',
+    },
+    {
+      id: 204,
+      transfer_date: '2025-10-13',
+      flock_source: { id: 1, name: 'Flock A' },
+      flock_destination: { id: 12, name: 'Laying House 3' },
+      quantity: 800,
+      kandangs: [
+        {
+          kandang: {
+            id: 15,
+            name: 'KDG-15',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 507,
+              id_user: 507,
+              email: 'nadia@farm.co',
+              name: 'Nadia Putri',
+            },
+            created_user: {
+              id: 9001,
+              id_user: 9001,
+              email: 'admin@farm.co',
+              name: 'System Admin',
+            },
+            created_at: '2025-08-01T08:00:00Z',
+            updated_at: '2025-09-28T08:00:00Z',
+          },
+          quantity: 800,
+        },
+      ],
+      reason: 'Open capacity in LH3',
+      created_user: {
+        id: 9103,
+        id_user: 9103,
+        email: 'opslead@farm.co',
+        name: 'Ops Lead',
+      },
+      created_at: '2025-10-13T06:00:00Z',
+      updated_at: '2025-10-13T06:00:00Z',
+    },
+    {
+      id: 205,
+      transfer_date: '2025-10-14',
+      flock_source: { id: 4, name: 'Flock D' },
+      flock_destination: { id: 11, name: 'Laying House 2' },
+      quantity: 650,
+      kandangs: [
+        {
+          kandang: {
+            id: 23,
+            name: 'KDG-23',
+            status: 'ACTIVE',
+            location: {
+              id: 104,
+              name: 'Farm Delta',
+              address: 'Jl. Delta 4',
+              area: { id: 1004, name: 'Area Barat' },
+            },
+            pic: {
+              id: 508,
+              id_user: 508,
+              email: 'yoga@farm.co',
+              name: 'Yoga Prabowo',
+            },
+            created_user: {
+              id: 9005,
+              id_user: 9005,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-20T08:00:00Z',
+            updated_at: '2025-10-10T08:00:00Z',
+          },
+          quantity: 350,
+        },
+        {
+          kandang: {
+            id: 24,
+            name: 'KDG-24',
+            status: 'ACTIVE',
+            location: {
+              id: 104,
+              name: 'Farm Delta',
+              address: 'Jl. Delta 4',
+              area: { id: 1004, name: 'Area Barat' },
+            },
+            pic: {
+              id: 509,
+              id_user: 509,
+              email: 'mega@farm.co',
+              name: 'Mega Anggraini',
+            },
+            created_user: {
+              id: 9005,
+              id_user: 9005,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-21T08:00:00Z',
+            updated_at: '2025-10-10T08:00:00Z',
+          },
+          quantity: 300,
+        },
+      ],
+      reason: 'Fill remaining LH2 slots',
+      created_user: {
+        id: 9104,
+        id_user: 9104,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-14T06:00:00Z',
+      updated_at: '2025-10-14T06:00:00Z',
+    },
+    {
+      id: 206,
+      transfer_date: '2025-10-15',
+      flock_source: { id: 2, name: 'Flock B' },
+      flock_destination: { id: 12, name: 'Laying House 3' },
+      quantity: 720,
+      kandangs: [
+        {
+          kandang: {
+            id: 16,
+            name: 'KDG-16',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 510,
+              id_user: 510,
+              email: 'rizky@farm.co',
+              name: 'Rizky Maulana',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-08-12T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 420,
+        },
+        {
+          kandang: {
+            id: 17,
+            name: 'KDG-17',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 511,
+              id_user: 511,
+              email: 'tia@farm.co',
+              name: 'Tia Safitri',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-08-18T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 300,
+        },
+      ],
+      reason: 'Stage-by-stage transfer',
+      created_user: {
+        id: 9105,
+        id_user: 9105,
+        email: 'opslead@farm.co',
+        name: 'Ops Lead',
+      },
+      created_at: '2025-10-15T06:00:00Z',
+      updated_at: '2025-10-15T06:00:00Z',
+    },
+    {
+      id: 207,
+      transfer_date: '2025-10-16',
+      flock_source: { id: 5, name: 'Flock E' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 500,
+      kandangs: [
+        {
+          kandang: {
+            id: 18,
+            name: 'KDG-18',
+            status: 'ACTIVE',
+            location: {
+              id: 105,
+              name: 'Farm Epsilon',
+              address: 'Kp. Epsilon',
+              area: { id: 1005, name: 'Area Tengah' },
+            },
+            pic: {
+              id: 512,
+              id_user: 512,
+              email: 'lukas@farm.co',
+              name: 'Lukas Aditya',
+            },
+            created_user: {
+              id: 9006,
+              id_user: 9006,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-01T08:00:00Z',
+            updated_at: '2025-10-12T08:00:00Z',
+          },
+          quantity: 250,
+        },
+        {
+          kandang: {
+            id: 19,
+            name: 'KDG-19',
+            status: 'ACTIVE',
+            location: {
+              id: 105,
+              name: 'Farm Epsilon',
+              address: 'Kp. Epsilon',
+              area: { id: 1005, name: 'Area Tengah' },
+            },
+            pic: {
+              id: 513,
+              id_user: 513,
+              email: 'maya@farm.co',
+              name: 'Maya Kartika',
+            },
+            created_user: {
+              id: 9006,
+              id_user: 9006,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-03T08:00:00Z',
+            updated_at: '2025-10-12T08:00:00Z',
+          },
+          quantity: 250,
+        },
+      ],
+      reason: 'Trial batch',
+      created_user: {
+        id: 9106,
+        id_user: 9106,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-16T06:00:00Z',
+      updated_at: '2025-10-16T06:00:00Z',
+    },
+    {
+      id: 208,
+      transfer_date: '2025-10-17',
+      flock_source: { id: 6, name: 'Flock F' },
+      flock_destination: { id: 13, name: 'Laying House 4' },
+      quantity: 1300,
+      kandangs: [
+        {
+          kandang: {
+            id: 25,
+            name: 'KDG-25',
+            status: 'ACTIVE',
+            location: {
+              id: 106,
+              name: 'Farm Zeta',
+              address: 'Jl. Zeta 6',
+              area: { id: 1006, name: 'Area Tenggara' },
+            },
+            pic: {
+              id: 514,
+              id_user: 514,
+              email: 'rara@farm.co',
+              name: 'Rara Pertiwi',
+            },
+            created_user: {
+              id: 9007,
+              id_user: 9007,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-07T08:00:00Z',
+            updated_at: '2025-10-13T08:00:00Z',
+          },
+          quantity: 700,
+        },
+        {
+          kandang: {
+            id: 26,
+            name: 'KDG-26',
+            status: 'ACTIVE',
+            location: {
+              id: 106,
+              name: 'Farm Zeta',
+              address: 'Jl. Zeta 6',
+              area: { id: 1006, name: 'Area Tenggara' },
+            },
+            pic: {
+              id: 515,
+              id_user: 515,
+              email: 'doni@farm.co',
+              name: 'Doni Firmansyah',
+            },
+            created_user: {
+              id: 9007,
+              id_user: 9007,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-09T08:00:00Z',
+            updated_at: '2025-10-13T08:00:00Z',
+          },
+          quantity: 600,
+        },
+      ],
+      reason: 'Open new house',
+      created_user: {
+        id: 9107,
+        id_user: 9107,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-17T06:00:00Z',
+      updated_at: '2025-10-17T06:00:00Z',
+    },
+  ],
+};
+
 // TODO: delete this dummy data
 const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
   code: 200,
@@ -149,15 +735,26 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
   ],
 };
 
-export class TransferToLayingService<
-  T,
-  CreatePayloadGeneric,
-  UpdatePayloadGeneric
-> extends BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
+export class TransferToLayingService extends BaseApiService<
+  TransferToLaying,
+  CreateTransferToLayingPayload,
+  UpdateTransferToLayingPayload
+> {
   constructor(basePath: string = '') {
     super(basePath);
   }
 
+  // TODO: remove dummy data and integrate to real API
+  override async getAllFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<TransferToLaying[]>> {
+    // return await httpClientFetcher<BaseApiResponse<T[]>>(endpoint);
+
+    await sleep(750);
+
+    return GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA;
+  }
+
   // TODO: remove dummy data and integrate to real API
   async getFlockSource(): Promise<
     BaseApiResponse<FlockWithKandangs[]> | undefined
@@ -178,10 +775,54 @@ export class TransferToLayingService<
       return undefined;
     }
   }
+
+  // TODO: remove dummy data and integrate to real API
+  async bulkApprove(
+    ids: number[]
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil approve data transfer ke laying!',
+        data: {
+          message: 'Berhasil approve data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  async bulkReject(
+    ids: number[]
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil reject data transfer ke laying!',
+        data: {
+          message: 'Berhasil reject data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
 }
 
-export const TransferToLayingApi = new TransferToLayingService<
-  unknown,
-  unknown,
-  unknown
->('');
+export const TransferToLayingApi = new TransferToLayingService('');

From f998d32b0af3cb67130e50d5dc41a073022fd868 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:55:31 +0700
Subject: [PATCH 31/92] chore(FE-147): add ApproveAction type

---
 src/types/api/api-general.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index c118b5a4..3a9f9bc9 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -104,3 +104,5 @@ export type ApprovalsLine = {
   role?: string;
   status: 'approved' | 'rejected' | 'waiting';
 }[];
+
+export type ApproveAction = 'APPROVED' | 'REJECTED';

From 7e44226a6def1e298f24b39690791a537025d224 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 17:34:14 +0700
Subject: [PATCH 32/92] feat(FE-141): add approve and reject functionality in
 Transfer to Laying Detail Page

---
 .../form/TransferToLayingForm.tsx             | 128 +++++++++++++++++-
 1 file changed, 124 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
index b026b47f..def2cde8 100644
--- a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
@@ -42,10 +42,18 @@ const TransferToLayingForm = ({
   initialValues,
 }: TransferToLayingFormProps) => {
   const router = useRouter();
+
+  // Modal hooks
   const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
 
   const [formErrorMessage, setFormErrorMessage] = useState('');
+
+  // Modal loading state
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
 
   const createTransferToLayingHandler = useCallback(
     async (payload: CreateTransferToLayingPayload) => {
@@ -152,15 +160,65 @@ const TransferToLayingForm = ({
     deleteModal.openModal();
   };
 
+  const approveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
+    // TODO: delete data and integrate to real API
     deleteModal.closeModal();
-    toast.success('Successfully delete TransferToLaying!');
+    toast.success('Berhasil menghapus data transfer ke laying!');
 
     setIsDeleteLoading(false);
   };
 
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+
+    const approveResponse = await TransferToLayingApi.approve(
+      initialValues?.id as number
+    );
+
+    if (isResponseSuccess(approveResponse)) {
+      approveModal.closeModal();
+
+      toast.success('Berhasil approve data transfer ke laying!');
+    } else {
+      approveModal.closeModal();
+
+      toast.error('Gagal approve data transfer ke laying!');
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async () => {
+    setIsRejectLoading(true);
+
+    const rejectResponse = await TransferToLayingApi.reject(
+      initialValues?.id as number
+    );
+
+    if (isResponseSuccess(rejectResponse)) {
+      rejectModal.closeModal();
+
+      toast.success('Berhasil reject data transfer ke laying!');
+    } else {
+      rejectModal.closeModal();
+
+      toast.error('Gagal reject data transfer ke laying!');
+    }
+
+    setIsRejectLoading(false);
+  };
+
   const isRepeaterInputError = (
     column: keyof TransferToLayingFormValues['kandangs'][0],
     idx: number
@@ -303,10 +361,38 @@ const TransferToLayingForm = ({
           </h1>
         </header>
 
+        <div className='w-full my-4 flex flex-row justify-end gap-2'>
+          {type === 'detail' && (
+            <>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={approveClickHandler}
+                // disabled={selectedRowIds.length === 0}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+
+              <Button
+                variant='outline'
+                color='error'
+                onClick={rejectClickHandler}
+                // disabled={selectedRowIds.length === 0}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
+            </>
+          )}
+        </div>
+
         <form
           onSubmit={formik.handleSubmit}
           onReset={formik.handleReset}
-          className='w-full mt-8 flex flex-col gap-6'
+          className='w-full flex flex-col gap-6'
         >
           <div className='flex flex-col gap-4'>
             <TextInput
@@ -494,7 +580,7 @@ const TransferToLayingForm = ({
                   <Button
                     type='button'
                     color='warning'
-                    href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                    href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
                     className='px-4'
                   >
                     <Icon
@@ -549,7 +635,7 @@ const TransferToLayingForm = ({
         <ConfirmationModal
           ref={deleteModal.ref}
           type='error'
-          text='Apakah anda yakin ingin menghapus data TransferToLaying?'
+          text='Apakah anda yakin ingin menghapus data transfer ke laying ini?'
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -561,6 +647,40 @@ const TransferToLayingForm = ({
           }}
         />
       )}
+
+      {type === 'detail' && (
+        <>
+          <ConfirmationModal
+            ref={approveModal.ref}
+            type='success'
+            text='Apakah anda yakin ingin approve data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'success',
+              isLoading: isApproveLoading,
+              onClick: confirmationModalApproveClickHandler,
+            }}
+          />
+
+          <ConfirmationModal
+            ref={rejectModal.ref}
+            type='error'
+            text='Apakah anda yakin ingin reject data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'error',
+              isLoading: isRejectLoading,
+              onClick: confirmationModalRejectClickHandler,
+            }}
+          />
+        </>
+      )}
     </>
   );
 };

From 3110b96305e2d26a63b520f89a096dd8a0dbd775 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 17:34:52 +0700
Subject: [PATCH 33/92] feat(FE-141): add approve and reject method

---
 .../api/production/transfer-to-laying.ts      | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
index 00bf8080..6f808a8c 100644
--- a/src/services/api/production/transfer-to-laying.ts
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -776,6 +776,30 @@ export class TransferToLayingService extends BaseApiService<
     }
   }
 
+  // TODO: remove dummy data and integrate to real API
+  async approve(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil approve data transfer ke laying!',
+        data: {
+          message: 'Berhasil approve data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
   // TODO: remove dummy data and integrate to real API
   async bulkApprove(
     ids: number[]
@@ -800,6 +824,30 @@ export class TransferToLayingService extends BaseApiService<
     }
   }
 
+  // TODO: remove dummy data and integrate to real API
+  async reject(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil reject data transfer ke laying!',
+        data: {
+          message: 'Berhasil reject data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
   // TODO: remove dummy data and integrate to real API
   async bulkReject(
     ids: number[]

From d1d152ef5a5384472e4260e32ecd6180eedb609f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 17:50:18 +0700
Subject: [PATCH 34/92] feat(FE-140): create Edit Transfer to Laying page

---
 .../transfer-to-laying/detail/edit/page.tsx   | 148 ++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 src/app/production/transfer-to-laying/detail/edit/page.tsx

diff --git a/src/app/production/transfer-to-laying/detail/edit/page.tsx b/src/app/production/transfer-to-laying/detail/edit/page.tsx
new file mode 100644
index 00000000..9003dbba
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/edit/page.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_EDIT: TransferToLaying = {
+  id: 1,
+  transfer_date: '2025-10-14',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
+const TransferToLayingEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const transferToLayingId = searchParams.get('transferToLayingId');
+
+  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
+    useSWR(transferToLayingId, (id: number) =>
+      TransferToLayingApi.getSingle(id)
+    );
+
+  if (!transferToLayingId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  // TODO: remove dummy data and integrate with real API
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_EDIT))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingTransferToLaying && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {/* {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+        <TransferToLayingForm
+          type='detail'
+          initialValues={transferToLaying.data}
+        />
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='edit'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_EDIT}
+      />
+    </div>
+  );
+};
+
+export default TransferToLayingEdit;

From 6e5875a7b75870b95ff02473ada46e5fb76217b2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 19:52:21 +0700
Subject: [PATCH 35/92] refactor(FE-Storyless): add flock_id, area_id, fcr_id,
 location_id, and kandang_ids to project-flock type definition

---
 src/types/api/production/project-flock.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index 7561e9ca..ce4043c4 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -10,11 +10,16 @@ export type BaseProjectFlock = {
   name: string;
   status: string;
   flock: Flock;
+  flock_id: number;
   area: Area;
+  area_id: number;
   category: string;
   fcr: Fcr;
+  fcr_id: number;
   location: Location;
+  location_id: number;
   period: number;
+  kandang_ids: number[];
   kandangs: Kandang[];
 };
 

From cebe738beb72879797955ab8bcbd21f1f019b2ed Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 19:52:38 +0700
Subject: [PATCH 36/92] refactor(FE-114): enhance type safety and improve
 checkbox input handling

---
 .../production/recording/RecordingTable.tsx   | 154 ++++++------------
 .../recording/form/RecordingForm.tsx          |  26 +--
 2 files changed, 56 insertions(+), 124 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 85ec092f..b0f95460 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -16,95 +16,31 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
+import { type ProjectFlock } from '@/types/api/production/project-flock';
 
-const dummyRecordings: Recording[] = [
+// Extended type that includes related data
+type RecordingWithRelations = Recording & {
+  project_flock?: ProjectFlock;
+};
+
+const dummyRecordings: RecordingWithRelations[] = [
   {
     id: 1,
-    flock: {
-      id: 1,
-      name: 'Flock Recording 1',
-      created_at: '2024-01-01',
-      updated_at: '2024-01-01',
-      created_user: {
-        id: 1,
-        id_user: 1,
-        email: 'admin@example.com',
-        name: 'Admin',
-      },
-    },
-    recording_date: '2024-01-01',
-    location: {
-      id: 1,
-      name: 'Location 1',
-      address: 'Jl. Contoh No. 1',
-      area: {
-        id: 1,
-        name: 'Area 1',
-      },
-      created_at: '2024-01-01',
-      updated_at: '2024-01-01',
-      created_user: {
-        id: 1,
-        id_user: 1,
-        email: 'admin@example.com',
-        name: 'Admin',
-      },
-    },
-    coop: {
-      id: 1,
-      name: 'Coop 1',
-      status: 'ACTIVE',
-      location: {
-        id: 1,
-        name: 'Location 1',
-        address: 'Jl. Contoh No. 1',
-        area: {
-          id: 1,
-          name: 'Area 1',
-        },
-      },
-      pic: {
-        id: 1,
-        id_user: 1,
-        email: 'pic@example.com',
-        name: 'PIC User',
-      },
-      created_at: '2024-01-01',
-      updated_at: '2024-01-01',
-      created_user: {
-        id: 1,
-        id_user: 1,
-        email: 'admin@example.com',
-        name: 'Admin',
-      },
-    },
-    feed_data: [
-      {
-        feed_name: 'Feed 1',
-        feed_qty: 100,
-        feed_stock: 500,
-      },
-    ],
-    body_weight: [
-      {
-        chicken_weight: 2.5,
-        chicken_count: 1000,
-        average_chicken_weight: 2.5,
-      },
-    ],
-    vaccination: [
-      {
-        vaccine_name: 'Vaccine 1',
-        total_stock: 200,
-        used_stock: 150,
-      },
-    ],
-    mortality: [
-      {
-        condition: 'NORMAL',
-        count: 5,
-      },
-    ],
+    project_flock_kandang_id: 1,
+    record_date: '2024-01-01',
+    ontime: true,
+    day: 10,
+    status: 1,
+    total_depletion: 10,
+    cum_depletion_rate: 1.0,
+    daily_gain: 50,
+    avg_daily_gain: 5.0,
+    cum_intake: 200,
+    fcr_value: 1.5,
+    total_chick: 1000,
+    daily_depletion_rate: 0.5,
+    cum_depletion: 20,
+    record_datetime: '2024-01-01T08:00:00Z',
     created_at: '2024-01-01',
     updated_at: '2024-01-01',
     created_user: {
@@ -112,6 +48,10 @@ const dummyRecordings: Recording[] = [
       id_user: 1,
       email: 'admin@example.com',
       name: 'Admin',
+      image: null,
+      npk: '0001',
+      created_at: '2024-01-01',
+      updated_at: '2024-01-01',
     },
   },
 ];
@@ -122,7 +62,7 @@ const RowOptionsMenu = ({
   deleteClickHandler,
 }: {
   type: 'dropdown' | 'collapse';
-  props: CellContext<Recording, unknown>;
+  props: CellContext<RecordingWithRelations, unknown>;
   deleteClickHandler: () => void;
 }) => {
   return (
@@ -178,7 +118,7 @@ const RecordingTable = () => {
   const [pageSize, setPageSize] = useState(10);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [selectedRecordings, setSelectedRecordings] = useState<number[]>([]);
-  const [, setSelectedRecording] = useState<Recording | undefined>(undefined);
+  const [, setSelectedRecording] = useState<RecordingWithRelations | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
   const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
@@ -206,10 +146,15 @@ const RecordingTable = () => {
 
   const paginatedData = useMemo(() => {
     const filteredData = dummyRecordings.filter(
-      (recording) =>
-        recording.flock.name.toLowerCase().includes(search.toLowerCase()) ||
-        recording.location.name.toLowerCase().includes(search.toLowerCase()) ||
-        recording.coop.name.toLowerCase().includes(search.toLowerCase())
+      (recording: RecordingWithRelations) => {
+        const projectName = recording.project_flock?.name || '';
+        const locationName = recording.project_flock?.location?.name || '';
+        const coopName = recording.project_flock?.kandangs?.[0]?.name || '';
+
+        return projectName.toLowerCase().includes(search.toLowerCase()) ||
+               locationName.toLowerCase().includes(search.toLowerCase()) ||
+               coopName.toLowerCase().includes(search.toLowerCase());
+      }
     );
     const start = (page - 1) * pageSize;
     return filteredData.slice(start, start + pageSize);
@@ -383,35 +328,34 @@ const RecordingTable = () => {
             cell: (props) => pageSize * (page - 1) + props.row.index + 1,
           },
           {
-            accessorKey: 'flock.name',
             header: 'Flock',
+            cell: (props) => props.row.original.project_flock?.name || '-',
           },
           {
-            accessorKey: 'recording_date',
+            accessorKey: 'record_date',
             header: 'Tanggal Recording',
             cell: (props) =>
-              new Date(props.row.original.recording_date).toLocaleDateString(),
+              new Date(props.row.original.record_date).toLocaleDateString(),
           },
           {
-            accessorKey: 'location.name',
             header: 'Lokasi',
+            cell: (props) => props.row.original.project_flock?.location?.name || '-',
           },
           {
-            accessorKey: 'coop.name',
             header: 'Kandang',
+            cell: (props) => {
+              const coopName = props.row.original.project_flock?.kandangs?.[0]?.name;
+              return coopName || '-';
+            },
           },
           {
-            accessorKey: 'mortality',
-            header: 'Total Mortality',
-            cell: (props) =>
-              props.row.original.mortality.reduce(
-                (acc, curr) => acc + curr.count,
-                0
-              ),
+            accessorKey: 'total_depletion',
+            header: 'Total Depletion',
+            cell: (props) => props.row.original.total_depletion,
           },
           {
             header: 'Aksi',
-            cell: (props: CellContext<Recording, unknown>) => {
+            cell: (props: CellContext<RecordingWithRelations, unknown>) => {
               const currentPageSize =
                 props.table.getPaginationRowModel().rows.length;
               const currentPageRows =
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 41d9401e..f6b037a2 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -334,7 +334,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 label='On Time'
                 name='ontime'
                 checked={formik.values.ontime || false}
-                onChange={(e) => {
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   formik.setFieldValue('ontime', e.target.checked);
                 }}
                 disabled={type === 'detail'}
@@ -363,7 +363,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 selectedBodyWeights.length &&
                               formik.values.body_weights?.length > 0
                             }
-                            onChange={(e) => {
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                               if (e.target.checked) {
                                 setSelectedBodyWeights(
                                   formik.values.body_weights?.map(
@@ -374,8 +374,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedBodyWeights([]);
                               }
                             }}
-                            naked={true}
-                            size='sm'
                           />
                         </div>
                       </th>
@@ -411,7 +409,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <CheckboxInput
                               name={`body-weight-${idx}`}
                               checked={selectedBodyWeights.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                 if (e.target.checked) {
                                   setSelectedBodyWeights([
                                     ...selectedBodyWeights,
@@ -423,8 +421,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
                             />
                           </div>
                         </td>
@@ -558,7 +554,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 selectedStocks.length &&
                               formik.values.stocks?.length > 0
                             }
-                            onChange={(e) => {
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                               if (e.target.checked) {
                                 setSelectedStocks(
                                   formik.values.stocks?.map((_, idx) => idx) ??
@@ -568,8 +564,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedStocks([]);
                               }
                             }}
-                            naked={true}
-                            size='sm'
                           />
                         </div>
                       </th>
@@ -599,7 +593,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <CheckboxInput
                               name={`stock-${idx}`}
                               checked={selectedStocks.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                 if (e.target.checked) {
                                   setSelectedStocks([...selectedStocks, idx]);
                                 } else {
@@ -608,8 +602,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
                             />
                           </div>
                         </td>
@@ -796,7 +788,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 selectedDepletions.length &&
                               formik.values.depletions?.length > 0
                             }
-                            onChange={(e) => {
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                               if (e.target.checked) {
                                 setSelectedDepletions(
                                   formik.values.depletions?.map(
@@ -807,8 +799,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedDepletions([]);
                               }
                             }}
-                            naked={true}
-                            size='sm'
                           />
                         </div>
                       </th>
@@ -853,7 +843,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <CheckboxInput
                               name={`depletion-${idx}`}
                               checked={selectedDepletions.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                 if (e.target.checked) {
                                   setSelectedDepletions([
                                     ...selectedDepletions,
@@ -865,8 +855,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
                             />
                           </div>
                         </td>

From 392e211181f04b4d0b1ee5334761f2c4af15eec6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 19:54:17 +0700
Subject: [PATCH 37/92] refactor(FE-Storyless): replace img with Image
 component for optimized loading

---
 src/components/Card.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index ba573dfb..82f90ef5 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -6,6 +6,7 @@ import {
 } from 'react';
 
 import { cn } from '@/lib/helper';
+import Image from 'next/image';
 
 export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
   title?: string;
@@ -108,7 +109,7 @@ const Card = ({
     return (
       <div className={getCardClasses()} {...props}>
         <figure>
-          <img
+          <Image
             src={image}
             alt={imageAlt || title || 'Card image'}
             className={getImageClasses()}
@@ -129,7 +130,7 @@ const Card = ({
     <div className={getCardClasses()} {...props}>
       {image && (
         <figure>
-          <img
+          <Image
             src={image}
             alt={imageAlt || title || 'Card image'}
             className={getImageClasses()}

From 51bce1a2c70b45696487e6f1ce77f8aab6ae9bdd Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 23 Oct 2025 20:23:25 +0700
Subject: [PATCH 38/92] feat(FE-86-88): Adding reject button and integrate with
 approval api

---
 .../production/project-flock/detail/page.tsx  |   8 +-
 src/components/input/DateInput.tsx            |   2 +-
 src/components/input/FileInput.tsx            |   2 +-
 src/components/input/SelectInput.tsx          |   8 +-
 src/components/input/TextArea.tsx             |   2 +-
 src/components/input/TextInput.tsx            |   2 +-
 .../pages/production/chickin/ChickinTable.tsx |   7 -
 .../project-flock/ProjectFlockTable.tsx       | 353 +++++++++---------
 .../project-flock/form/ProjectFlockForm.tsx   |  95 +++--
 src/types/api/api-general.d.ts                |   9 +
 src/types/api/production/project-flock.d.ts   |  29 +-
 11 files changed, 298 insertions(+), 219 deletions(-)

diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index 5efe83d8..bf0da188 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -13,7 +13,7 @@ const ProjectFlockDetail = () => {
 
   const projectFlockId = searchParams.get("projectFlockId");
 
-  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
+  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
     projectFlockId,
     (id: number) => ProjectFlockApi.getSingle(id)
   );
@@ -28,15 +28,15 @@ const ProjectFlockDetail = () => {
     );
   }
 
-  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">
-      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
-      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
+      {isLoadingProjectFlock && <span className="loading loading-spinner loading-xl" />}
+      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
         <ProjectFlockForm formType="detail" initialValues={projectFlock.data} />
       )}
     </div>
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index 0ef80fee..be485b75 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -88,7 +88,7 @@ const DateInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 flex items-center',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/input/FileInput.tsx b/src/components/input/FileInput.tsx
index 6218970c..86100e40 100644
--- a/src/components/input/FileInput.tsx
+++ b/src/components/input/FileInput.tsx
@@ -70,7 +70,7 @@ const FileInput = ({
         onBlur={onBlur}
         disabled={disabled}
         className={cn(
-          'grow file-input w-full h-12 rounded-lg!',
+          'grow file-input w-full h-12 rounded',
           className?.input
         )}
         readOnly={readOnly}
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index b35ad7dd..cbb0c9db 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -160,7 +160,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           control: ({ isFocused, isDisabled }) =>
             cn(
-              'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+              'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
               {
                 'border-red-500! ring-2 ring-red-200': isError,
                 'border-indigo-500 ring-2 ring-indigo-200': isFocused,
@@ -176,7 +176,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           input: () => cn('text-gray-900'),
           indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1 rounded-md hover:bg-gray-100', {
+            cn('p-1 rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
@@ -185,7 +185,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
+            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
@@ -193,7 +193,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           multiValue: ({ getValue, index }) => {
             const selectedValues = getValue() as T[];
             return cn(
-              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
+              'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
               selectedValues[index]?.className
             );
           },
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index e9517277..d8d58929 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -87,7 +87,7 @@ const TextArea = ({
 
         <textarea
           className={cn(
-            'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
+            'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all',
             {
               'border-error': isError,
               'border-success!': isValid,
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index eec312c1..4ee1f558 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -87,7 +87,7 @@ const TextInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index e2b527d3..e3d908fd 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -57,13 +57,6 @@ const ChickinTable = () => {
     `${ChickinApi.basePath}${getTableFilterQueryString()}`,
     ChickinApi.getAllFetcher
   );
-  const {
-    data: projectFlocks,
-    isLoading: isLoadingProjectFlocks,
-  } = useSWR(
-    `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
-    ProjectFlockApi.getAllFetcher
-  );
 
   const searchChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     updateFilter('search', event.target.value);
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 412c47ed..95361278 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -16,13 +16,12 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { ProjectFlock } from '@/types/api/production/project-flock';
-import { Icon } from '@iconify/react';
 import {
-  CellContext,
-  ColumnDef,
-  SortingState,
-} from '@tanstack/react-table';
+  ProjectFlockApprovalPayload,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
+import { Icon } from '@iconify/react';
+import { CellContext, SortingState } from '@tanstack/react-table';
 import { ChangeEventHandler, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
@@ -56,24 +55,28 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
-      <Button
-        href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
-        variant='ghost'
-        color='success'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:home-import-outline' width={16} height={16} />
-        Chickin
-      </Button>
-      {/* <Button
-        href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:pencil-outline' width={16} height={16} />
-        Edit
-      </Button> */}
+      {props.row.original.approval.step_name === 'Aktif' && (
+        <Button
+          href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
+          variant='ghost'
+          color='success'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:home-import-outline' width={16} height={16} />
+          Chickin
+        </Button>
+      )}
+      {props.row.original.approval.step_name === 'Pengajuan' && (
+        <Button
+          href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          Edit
+        </Button>
+      )}
       <Button
         onClick={deleteClickHandler}
         variant='ghost'
@@ -144,20 +147,20 @@ const ProjectFlockTable = () => {
     search: areaSelectInputValue,
     limit: '100',
   }).toString()}`;
-  const {
-    data: areas,
-    isLoading: isLoadingAreas,
-  } = useSWR(areaUrl, AreaApi.getAllFetcher);
+  const { data: areas, isLoading: isLoadingAreas } = useSWR(
+    areaUrl,
+    AreaApi.getAllFetcher
+  );
 
   const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
     search: locationSelectInputValue,
     area_id: selectedArea != null ? selectedArea.value.toString() : '',
     limit: '100',
   }).toString()}`;
-  const {
-    data: locations,
-    isLoading: isLoadingLocations,
-  } = useSWR(locationUrl, LocationApi.getAllFetcher);
+  const { data: locations, isLoading: isLoadingLocations } = useSWR(
+    locationUrl,
+    LocationApi.getAllFetcher
+  );
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: kandangSelectInputValue,
@@ -165,10 +168,10 @@ const ProjectFlockTable = () => {
       selectedLocation != null ? selectedLocation.value.toString() : '',
     limit: '100',
   }).toString()}`;
-  const {
-    data: kandangs,
-    isLoading: isLoadingKandang,
-  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
+  const { data: kandangs, isLoading: isLoadingKandang } = useSWR(
+    kandangUrl,
+    KandangApi.getAllFetcher
+  );
 
   // Data to Options Mapping
   const optionsArea = isResponseSuccess(areas)
@@ -200,129 +203,6 @@ const ProjectFlockTable = () => {
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
   const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
-
-  // Columns
-  const projectFlocksColumns: ColumnDef<ProjectFlock>[] = [
-    {
-      id: 'select',
-      header: () => {
-        const allSelected =
-          isResponseSuccess(projectFlocks) &&
-          projectFlocks.data.length > 0 &&
-          selectedIds.length === projectFlocks.data.length;
-
-        return (
-          <input
-            type='checkbox'
-            className='checkbox checkbox-sm'
-            checked={allSelected}
-            onChange={(e) => handleSelectAll(e.target.checked)}
-          />
-        );
-      },
-      cell: (props) => {
-        const id = props.row.original.id;
-        const isChecked = selectedIds.includes(id);
-
-        return (
-          <input
-            type='checkbox'
-            className='checkbox checkbox-sm'
-            checked={isChecked}
-            onChange={(e) => handleSelectRow(id, e.target.checked)}
-          />
-        );
-      },
-    },
-
-    {
-      accessorKey: 'flock.name',
-      header: 'Flock',
-    },
-    {
-      accessorKey: 'area.name',
-      header: 'Area',
-    },
-    {
-      accessorKey: 'location.name',
-      header: 'Lokasi',
-    },
-    {
-      accessorKey: 'fcr.name',
-      header: 'FCR',
-    },
-    {
-      accessorKey: 'category',
-      header: 'Kategori',
-    },
-    {
-      header: 'Kandang',
-      cell: (props) => {
-        const kandang = props.row.original.kandangs;
-        if (kandang) {
-          const kandangNames = kandang.map((k: Kandang) => k.name);
-          return (
-            <div>
-              {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
-            </div>
-          );
-        } else {
-          return '-';
-        }
-      },
-    },
-    {
-      accessorKey: 'period',
-      header: 'Periode',
-    },
-    {
-      accessorKey: 'created_at',
-      header: 'Dibuat pada',
-      cell: (props) =>
-        new Date(props.row.original.created_at).toLocaleDateString(),
-    },
-    {
-      header: 'Aksi',
-      cell: (props) => {
-        const currentPageSize = props.table.getPaginationRowModel().rows.length;
-        const currentPageRows = props.table.getPaginationRowModel().flatRows;
-        const currentRowRelativeIndex =
-          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
-
-        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-
-        const deleteClickHandler = () => {
-          setSelectedProjectFlock(props.row.original);
-          deleteModal.openModal();
-        };
-
-        return (
-          <>
-            {currentPageSize > 2 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowDropdownOptions>
-            )}
-
-            {currentPageSize <= 2 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowCollapseOptions>
-            )}
-          </>
-        );
-      },
-    },
-  ];
-
   // Handler
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
@@ -343,9 +223,15 @@ const ProjectFlockTable = () => {
   };
   const handleSelectAll = (checked: boolean) => {
     if (checked && isResponseSuccess(projectFlocks)) {
-      const allIds = projectFlocks.data.map((item) => item.id);
+      const allIds = projectFlocks.data
+        .filter((item) => item.approval.step_name === 'Pengajuan')
+        .map((item) => item.id);
       setSelectedIds(allIds);
-      setSelectedFlocks(projectFlocks.data);
+      setSelectedFlocks(
+        projectFlocks.data.filter(
+          (item) => item.approval.step_name === 'Pengajuan'
+        )
+      );
     } else {
       setSelectedIds([]);
       setSelectedFlocks([]);
@@ -374,12 +260,12 @@ const ProjectFlockTable = () => {
     setIsApproveLoading(true);
     const approveProjectFlockRes = await ProjectFlockApi.customRequest<
       BaseApiResponse<ProjectFlock>,
-      'POST'
-    >(`/approve`, {
+      ProjectFlockApprovalPayload
+    >(`/approvals`, {
       method: 'POST',
-      payload: 'POST',
-      params: {
-        ids: selectedFlocks.map((flock) => flock.id).join(','),
+      payload: {
+        action: 'APPROVED',
+        approvable_ids: selectedFlocks.map((flock) => flock.id),
       },
     });
 
@@ -391,6 +277,9 @@ const ProjectFlockTable = () => {
       toast.error(approveProjectFlockRes?.message as string);
       confirmModal.closeModal();
     }
+    setSelectedIds([]);
+    setSelectedFlocks([]);
+    refreshProjectFlocks();
     setIsApproveLoading(false);
   };
 
@@ -508,7 +397,137 @@ const ProjectFlockTable = () => {
 
           <Table<ProjectFlock>
             data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
-            columns={projectFlocksColumns}
+            columns={[
+              {
+                id: 'select',
+                header: () => {
+                  const allSelected =
+                    isResponseSuccess(projectFlocks) &&
+                    projectFlocks.data.length > 0 &&
+                    selectedIds.length === projectFlocks.data.length;
+                  return (
+                    <input
+                      type='checkbox'
+                      className='checkbox checkbox-sm'
+                      checked={allSelected}
+                      onChange={(e) => handleSelectAll(e.target.checked)}
+                    />
+                  );
+                },
+                cell: (props) => {
+                  const id = props.row.original.id;
+                  const isChecked = selectedIds.includes(id);
+
+                  return (
+                    <input
+                      disabled={
+                        props.row.original.approval.step_name != 'Pengajuan'
+                      }
+                      type='checkbox'
+                      className='checkbox checkbox-sm'
+                      checked={isChecked}
+                      onChange={(e) => handleSelectRow(id, e.target.checked)}
+                    />
+                  );
+                },
+              },
+
+              {
+                accessorKey: 'flock.name',
+                header: 'Flock',
+              },
+              {
+                accessorKey: 'area.name',
+                header: 'Area',
+              },
+              {
+                accessorKey: 'location.name',
+                header: 'Lokasi',
+              },
+              {
+                accessorKey: 'fcr.name',
+                header: 'FCR',
+              },
+              {
+                accessorKey: 'category',
+                header: 'Kategori',
+              },
+              {
+                accessorKey: 'approval.step_name',
+                header: 'Status',
+              },
+              {
+                header: 'Kandang',
+                cell: (props) => {
+                  const kandang = props.row.original.kandangs;
+                  if (kandang) {
+                    const kandangNames = kandang.map((k: Kandang) => k.name);
+                    return (
+                      <div>
+                        {kandangNames.length > 0
+                          ? kandangNames.join(', ')
+                          : 'Tidak ada'}
+                      </div>
+                    );
+                  } else {
+                    return '-';
+                  }
+                },
+              },
+              {
+                accessorKey: 'period',
+                header: 'Periode',
+              },
+              {
+                accessorKey: 'created_at',
+                header: 'Dibuat pada',
+                cell: (props) =>
+                  new Date(props.row.original.created_at).toLocaleDateString(),
+              },
+              {
+                header: 'Aksi',
+                cell: (props) => {
+                  const currentPageSize =
+                    props.table.getPaginationRowModel().rows.length;
+                  const currentPageRows =
+                    props.table.getPaginationRowModel().flatRows;
+                  const currentRowRelativeIndex =
+                    currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+                  const isLast2Rows =
+                    currentRowRelativeIndex > currentPageSize - 2;
+
+                  const deleteClickHandler = () => {
+                    setSelectedProjectFlock(props.row.original);
+                    deleteModal.openModal();
+                  };
+
+                  return (
+                    <>
+                      {currentPageSize > 2 && (
+                        <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                          <RowOptionsMenu
+                            type='dropdown'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowDropdownOptions>
+                      )}
+
+                      {currentPageSize <= 2 && (
+                        <RowCollapseOptions>
+                          <RowOptionsMenu
+                            type='dropdown'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowCollapseOptions>
+                      )}
+                    </>
+                  );
+                },
+              },
+            ]}
             pageSize={tableFilterState.pageSize}
             page={
               isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index ccc3fadc..d098aba3 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -21,6 +21,7 @@ import {
   UpdateProjectFlockFormSchema,
 } from '@/components/pages/production/project-flock/form/ProjectFlockForm.schema';
 import {
+  ProjectFlockApprovalPayload,
   CreateProjectFlockPayload,
   PeriodFlock,
   ProjectFlock,
@@ -70,6 +71,18 @@ const ProjectFlockForm = ({
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(initialValues?.approval.step_name == 'Pengajuan' ? false : true);
+  const [isRejectedDisabled, setIsRejectedDisabled] = useState(!isApprovedDisabled);
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(!isApprovedDisabled ? 'APPROVED' : 'REJECTED');
+
+  useEffect(() => {
+  if (initialValues?.approval?.step_name) {
+    const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
+    setIsApprovedDisabled(approvedDisabled);
+    setIsRejectedDisabled(!approvedDisabled);
+    setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
+  }
+}, [initialValues]);
 
   // Fetch Data
   const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
@@ -375,7 +388,7 @@ const ProjectFlockForm = ({
       formik.setFieldValue('period', initialValues?.period);
     }
   }, [initialValues, setSelectedArea, formType]);
-  
+
   useEffect(() => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
@@ -400,7 +413,7 @@ const ProjectFlockForm = ({
   }, [formik.values]);
 
   useEffect(() => {
-    if(isResponseSuccess(periodFlocks)){
+    if (isResponseSuccess(periodFlocks)) {
       formik.setFieldValue('period', periodFlocks.data.next_period);
     }
   }, [periodFlocks]);
@@ -422,23 +435,39 @@ const ProjectFlockForm = ({
     setIsDeleteLoading(false);
   };
 
-  const confirmationModalApproveClickHandler = async () => {
+  const confirmationModalClickHandler = async ({
+    action = 'APPROVED',
+  }: {
+    action: 'APPROVED' | 'REJECTED';
+  }) => {
+    if (initialValues?.id === undefined) return;
     setIsApproveLoading(true);
     const approveProjectFlockRes = await ProjectFlockApi.customRequest<
       BaseApiResponse<ProjectFlock>,
-      'POST'
-    >(`/${initialValues?.id}/approve`, {
+      ProjectFlockApprovalPayload
+    >(`/approvals`, {
       method: 'POST',
+      payload: {
+        action: action,
+        approvable_ids: [initialValues.id],
+      },
     });
 
     if (isResponseSuccess(approveProjectFlockRes)) {
-      toast.success('Project Flock berhasil di-approve!');
-      confirmModal.closeModal();
+      if(action == 'APPROVED'){
+        setIsApprovedDisabled(true);
+        setIsRejectedDisabled(false);
+      }
+      if(action == 'REJECTED'){
+        setIsRejectedDisabled(true);
+        setIsApprovedDisabled(false);
+      }
+      toast.success(approveProjectFlockRes.message as string);
     }
     if (isResponseError(approveProjectFlockRes)) {
       toast.error(approveProjectFlockRes?.message as string);
-      confirmModal.closeModal();
     }
+    confirmModal.closeModal();
     setIsApproveLoading(false);
   };
 
@@ -481,21 +510,43 @@ const ProjectFlockForm = ({
           </div>
         )}
         {formType == 'detail' && (
-          <div className='w-full py-4'>
+          <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
             <Button
               variant='outline'
               color='success'
               onClick={() => {
                 if (initialValues?.id) {
+                  setApprovalAction('APPROVED');
                   confirmModal.openModal();
                 }
               }}
-              disabled={!initialValues?.id}
+              disabled={
+                !initialValues?.id ||
+                isApprovedDisabled
+              }
               className='w-full sm:w-fit'
             >
               <Icon icon='material-symbols:check' width={24} height={24} />
               Approve
             </Button>
+            <Button
+              variant='outline'
+              color='error'
+              onClick={() => {
+                if (initialValues?.id) {
+                  setApprovalAction('REJECTED');
+                  confirmModal.openModal();
+                }
+              }}
+              disabled={
+                !initialValues?.id ||
+                isRejectedDisabled
+              }
+              className='w-full sm:w-fit'
+            >
+              <Icon icon='mdi:times' width={24} height={24} />
+              Reject
+            </Button>
           </div>
         )}
         <form
@@ -505,9 +556,7 @@ const ProjectFlockForm = ({
         >
           <div className='card bg-base-100 shadow w-full mb-6'>
             <div className='card-body'>
-              <div className='card-title mb-4'>
-                Informasi Umum
-              </div>
+              <div className='card-title mb-4'>Informasi Umum</div>
 
               <div className='grid sm:grid-cols-2 gap-4'>
                 <SelectInput
@@ -614,7 +663,7 @@ const ProjectFlockForm = ({
                       variant='link'
                       className={`text-primary rotate-${
                         openSelectKandangs ? '180' : '0'
-                      } transition-transform hover:text-inherit`}
+                      } transition-transform hover:text-inherit me-3`}
                     >
                       <Icon
                         icon='material-symbols:keyboard-arrow-down'
@@ -631,7 +680,7 @@ const ProjectFlockForm = ({
               >
                 <div className='overflow-x-auto'>
                   {isLoadingKandang && (
-                    <span className="loading loading-dots loading-xl"></span>
+                    <span className='loading loading-dots loading-xl'></span>
                   )}
                   <table className='table'>
                     {/* head */}
@@ -673,7 +722,7 @@ const ProjectFlockForm = ({
                           </label>
                         </th>
                         <th>Kandang</th>
-                        <th>Status</th>
+                        {/* <th>Status</th> */}
                         <th>Penanggung Jawab</th>
                       </tr>
                     </thead>
@@ -704,7 +753,7 @@ const ProjectFlockForm = ({
                               </label>
                             </th>
                             <td>{kandang.name}</td>
-                            <td>{kandang.status}</td>
+                            {/* <td>{kandang.status}</td> */}
                             <td>{kandang.pic?.name}</td>
                           </tr>
                         ))}
@@ -795,16 +844,20 @@ const ProjectFlockForm = ({
 
       <ConfirmationModal
         ref={confirmModal.ref}
-        type='success'
-        text={`Apakah anda yakin ingin approve Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
         secondaryButton={{
           text: 'Tidak',
         }}
         primaryButton={{
           text: 'Ya',
-          color: 'success',
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
           isLoading: isApproveLoading,
-          onClick: confirmationModalApproveClickHandler,
+          onClick: () => {
+            confirmationModalClickHandler({
+              action: approvalAction,
+            });
+          },
         }}
       />
     </>
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index c118b5a4..2a720018 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -104,3 +104,12 @@ export type ApprovalsLine = {
   role?: string;
   status: 'approved' | 'rejected' | 'waiting';
 }[];
+
+export type BaseApproval = {
+  step_number: number;
+  step_name: string;
+  action: string;
+  notes: string | null;
+  action_by: CreatedUser;
+  action_at: string;
+};
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index 306c32f1..be14302d 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -1,9 +1,9 @@
-import { Area } from "@/types/api/master-data/area";
-import { Fcr } from "@/types/api/master-data/fcr";
-import { Flock } from "@/types/api/master-data/flock";
-import { Kandang } from "@/types/api/master-data/kandang";
-import { Location } from "@/types/api/master-data/location";
-import { BaseMetadata } from "@/types/api/api-general";
+import { Area } from '@/types/api/master-data/area';
+import { Fcr } from '@/types/api/master-data/fcr';
+import { Flock } from '@/types/api/master-data/flock';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Location } from '@/types/api/master-data/location';
+import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
 
 export type BaseProjectFlock = {
   id: number;
@@ -21,15 +21,15 @@ export type BaseProjectFlock = {
   period: number;
   kandang_ids: number[];
   kandangs: Kandang[];
-}
+  approval: BaseApproval;
+};
 
 export type PeriodFlock = {
   flock: Flock;
   next_period: number;
-}
+};
 
-
-export type ProjectFlock = BaseMetadata & BaseProjectFlock 
+export type ProjectFlock = BaseMetadata & BaseProjectFlock;
 
 export type CreateProjectFlockPayload = {
   flock_id: number;
@@ -39,6 +39,11 @@ export type CreateProjectFlockPayload = {
   location_id: number;
   period: number;
   kandang_ids: number[];
-}
+};
 
-export type UpdateProjectFlockPayload = CreateProjectFlockPayload;
\ No newline at end of file
+export type UpdateProjectFlockPayload = CreateProjectFlockPayload;
+
+export type ProjectFlockApprovalPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  approvable_ids: number[];
+};

From b653cc1dab3f062e8ef3360daec5ad7f4fd1b29a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 20:44:59 +0700
Subject: [PATCH 39/92] refactor(FE-114): replace button elements with Button
 component for consistency and improved styling

---
 src/components/helper/FieldMessage.tsx        |  65 -----
 .../recording/form/RecordingForm.tsx          | 252 ++++++++++--------
 2 files changed, 140 insertions(+), 177 deletions(-)
 delete mode 100644 src/components/helper/FieldMessage.tsx

diff --git a/src/components/helper/FieldMessage.tsx b/src/components/helper/FieldMessage.tsx
deleted file mode 100644
index e43d0a63..00000000
--- a/src/components/helper/FieldMessage.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import { ReactNode } from 'react';
-
-import { cn } from '@/lib/helper';
-
-type FieldMessageTone = 'error' | 'info' | 'success';
-
-export interface FieldMessageProps {
-  message?: ReactNode;
-  tone?: FieldMessageTone;
-  isVisible?: boolean;
-  persistent?: boolean;
-  className?: string;
-  ariaLive?: 'off' | 'polite' | 'assertive';
-}
-
-const toneClassName: Record<FieldMessageTone, string> = {
-  error: 'text-error',
-  info: 'text-base-content/60',
-  success: 'text-success',
-};
-
-/**
- * Shared helper to render bottom field feedback without causing layout shift.
- * Keeps a minimal slot height, but expands when the content wraps onto multiple lines.
- */
-export const FieldMessage = ({
-  message,
-  tone = 'info',
-  isVisible,
-  persistent = true,
-  className,
-  ariaLive,
-}: FieldMessageProps) => {
-  const hasMessage = Boolean(message);
-  const visible = isVisible ?? hasMessage;
-  const liveRegion = ariaLive ?? (tone === 'error' ? 'assertive' : 'polite');
-
-  return (
-    <div
-      aria-live={liveRegion}
-      aria-hidden={!visible && !hasMessage}
-      className={cn(
-        'relative w-full text-sm leading-5 transition-[opacity,transform] duration-150 ease-out',
-        persistent && 'min-h-[1.25rem]',
-        className
-      )}
-    >
-      <span
-        className={cn(
-          'block whitespace-pre-line',
-          toneClassName[tone],
-          visible
-            ? 'opacity-100 translate-y-0'
-            : 'opacity-0 -translate-y-1 pointer-events-none'
-        )}
-      >
-        {visible || persistent ? (message ?? '\u00A0') : message}
-      </span>
-    </div>
-  );
-};
-
-export default FieldMessage;
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index f6b037a2..a6b9f23c 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -3,6 +3,7 @@
 import { useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
 
 import TextInput from '@/components/input/TextInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
@@ -262,7 +263,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               body: 'flex flex-col gap-6',
             }}
           >
-            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6'>
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
               <TextInput
                 required
                 label='Project Flock Kandang ID'
@@ -355,7 +356,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
                           <CheckboxInput
                             name='select-all-body-weights'
                             checked={
@@ -374,8 +374,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedBodyWeights([]);
                               }
                             }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
-                        </div>
                       </th>
                     )}
                     <th>
@@ -404,29 +407,31 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.body_weights?.map((bw, idx) => (
                     <tr key={`body-weight-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name={`body-weight-${idx}`}
-                              checked={selectedBodyWeights.includes(idx)}
-                              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                                if (e.target.checked) {
-                                  setSelectedBodyWeights([
-                                    ...selectedBodyWeights,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedBodyWeights(
-                                    selectedBodyWeights.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
-                          </div>
+                        <td className="!align-middle">
+                          <CheckboxInput
+                            name={`body-weight-${idx}`}
+                            checked={selectedBodyWeights.includes(idx)}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                              if (e.target.checked) {
+                                setSelectedBodyWeights([
+                                  ...selectedBodyWeights,
+                                  idx,
+                                ]);
+                              } else {
+                                setSelectedBodyWeights(
+                                  selectedBodyWeights.filter((i) => i !== idx),
+                                );
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
                         </td>
                       )}
                       <td>
-                        <TextInput
+                      <TextInput
                           required
                           name={`body_weights.${idx}.weight`}
                           type='number'
@@ -494,13 +499,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       </td>
                       {type !== 'detail' && (
                         <td>
-                          <button
-                            type='button'
-                            onClick={() => removeBodyWeight(idx)}
-                            className='btn btn-error btn-sm'
-                          >
-                            <Icon icon='mdi:trash-can' className='h-4 w-4' />
-                          </button>
+                          <div className='flex justify-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeBodyWeight(idx)}
+                            >
+                              <Icon icon='mdi:trash-can' width={24} height={24} />
+                            </Button>
+                          </div>
                         </td>
                       )}
                     </tr>
@@ -509,25 +516,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </table>
             </div>
             {type !== 'detail' && (
-              <div className='flex justify-end mt-4 gap-2'>
+              <div className='flex justify-center items-center mt-4 gap-4'>
                 {selectedBodyWeights.length > 0 && (
-                  <button
+                  <Button
                     type='button'
+                    color='error'
                     onClick={removeSelectedBodyWeights}
-                    className='btn btn-error btn-sm'
+                    disabled={selectedBodyWeights.length === 0}
+                    className='w-fit'
                   >
-                    <Icon icon='mdi:trash-can' className='h-4 w-4' />
+                    <Icon icon='mdi:trash-can' width={24} height={24} />
                     Hapus Terpilih ({selectedBodyWeights.length})
-                  </button>
+                  </Button>
                 )}
-                <button
+                <Button
                   type='button'
+                  color='success'
                   onClick={addBodyWeight}
-                  className='btn btn-success btn-sm'
+                  className='w-fit'
                 >
-                  <Icon icon='ic:round-plus' className='h-4 w-4' />
+                  <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah Bobot Badan
-                </button>
+                </Button>
               </div>
             )}
           </Card>
@@ -546,7 +556,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
                           <CheckboxInput
                             name='select-all-stocks'
                             checked={
@@ -564,8 +573,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedStocks([]);
                               }
                             }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
-                        </div>
                       </th>
                     )}
                     <th>
@@ -588,26 +600,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.stocks?.map((stock, idx) => (
                     <tr key={`stock-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name={`stock-${idx}`}
-                              checked={selectedStocks.includes(idx)}
-                              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                                if (e.target.checked) {
-                                  setSelectedStocks([...selectedStocks, idx]);
-                                } else {
-                                  setSelectedStocks(
-                                    selectedStocks.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
-                          </div>
+                        <td className="!align-middle">
+                          <CheckboxInput
+                            name={`stock-${idx}`}
+                            checked={selectedStocks.includes(idx)}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                              if (e.target.checked) {
+                                setSelectedStocks([...selectedStocks, idx]);
+                              } else {
+                                setSelectedStocks(
+                                  selectedStocks.filter((i) => i !== idx),
+                                );
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
                         </td>
                       )}
                       <td>
-                        <TextInput
+                      <TextInput
                           required
                           name={`stocks.${idx}.product_warehouse_id`}
                           type='number'
@@ -728,13 +742,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       </td>
                       {type !== 'detail' && (
                         <td>
-                          <button
-                            type='button'
-                            onClick={() => removeStock(idx)}
-                            className='btn btn-error btn-sm'
-                          >
-                            <Icon icon='mdi:trash-can' className='h-4 w-4' />
-                          </button>
+                          <div className='flex justify-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeStock(idx)}
+                            >
+                              <Icon icon='mdi:trash-can' width={24} height={24} />
+                            </Button>
+                          </div>
                         </td>
                       )}
                     </tr>
@@ -743,25 +759,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </table>
             </div>
             {type !== 'detail' && (
-              <div className='flex justify-end mt-4 gap-2'>
+              <div className='flex justify-center items-center mt-4 gap-4'>
                 {selectedStocks.length > 0 && (
-                  <button
+                  <Button
                     type='button'
+                    color='error'
                     onClick={removeSelectedStocks}
-                    className='btn btn-error btn-sm'
+                    disabled={selectedStocks.length === 0}
+                    className='w-fit'
                   >
-                    <Icon icon='mdi:trash-can' className='h-4 w-4' />
+                    <Icon icon='mdi:trash-can' width={24} height={24} />
                     Hapus Terpilih ({selectedStocks.length})
-                  </button>
+                  </Button>
                 )}
-                <button
+                <Button
                   type='button'
+                  color='success'
                   onClick={addStock}
-                  className='btn btn-success btn-sm'
+                  className='w-fit'
                 >
-                  <Icon icon='ic:round-plus' className='h-4 w-4' />
+                  <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah Stok
-                </button>
+                </Button>
               </div>
             )}
           </Card>
@@ -780,7 +799,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
                           <CheckboxInput
                             name='select-all-depletions'
                             checked={
@@ -799,8 +817,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedDepletions([]);
                               }
                             }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
-                        </div>
                       </th>
                     )}
                     <th>
@@ -838,29 +859,31 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.depletions?.map((depletion, idx) => (
                     <tr key={`depletion-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name={`depletion-${idx}`}
-                              checked={selectedDepletions.includes(idx)}
-                              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                                if (e.target.checked) {
-                                  setSelectedDepletions([
-                                    ...selectedDepletions,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedDepletions(
-                                    selectedDepletions.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
-                          </div>
+                        <td className="!align-middle">
+                          <CheckboxInput
+                            name={`depletion-${idx}`}
+                            checked={selectedDepletions.includes(idx)}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                              if (e.target.checked) {
+                                setSelectedDepletions([
+                                  ...selectedDepletions,
+                                  idx,
+                                ]);
+                              } else {
+                                setSelectedDepletions(
+                                  selectedDepletions.filter((i) => i !== idx),
+                                );
+                              }
+                            }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
+                          />
                         </td>
                       )}
                       <td>
-                        <TextInput
+                      <TextInput
                           required
                           name={`depletions.${idx}.product_warehouse_id`}
                           type='number'
@@ -954,13 +977,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       </td>
                       {type !== 'detail' && (
                         <td>
-                          <button
-                            type='button'
-                            onClick={() => removeDepletion(idx)}
-                            className='btn btn-error btn-sm'
-                          >
-                            <Icon icon='mdi:trash-can' className='h-4 w-4' />
-                          </button>
+                          <div className='flex justify-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeDepletion(idx)}
+                            >
+                              <Icon icon='mdi:trash-can' width={24} height={24} />
+                            </Button>
+                          </div>
                         </td>
                       )}
                     </tr>
@@ -969,25 +994,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </table>
             </div>
             {type !== 'detail' && (
-              <div className='flex justify-end mt-4 gap-2'>
+              <div className='flex justify-center items-center mt-4 gap-4'>
                 {selectedDepletions.length > 0 && (
-                  <button
+                  <Button
                     type='button'
+                    color='error'
                     onClick={removeSelectedDepletions}
-                    className='btn btn-error btn-sm'
+                    disabled={selectedDepletions.length === 0}
+                    className='w-fit'
                   >
-                    <Icon icon='mdi:trash-can' className='h-4 w-4' />
+                    <Icon icon='mdi:trash-can' width={24} height={24} />
                     Hapus Terpilih ({selectedDepletions.length})
-                  </button>
+                  </Button>
                 )}
-                <button
+                <Button
                   type='button'
+                  color='success'
                   onClick={addDepletion}
-                  className='btn btn-success btn-sm'
+                  className='w-fit'
                 >
-                  <Icon icon='ic:round-plus' className='h-4 w-4' />
+                  <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah Depletion
-                </button>
+                </Button>
               </div>
             )}
           </Card>

From d61c0ab84458515942151f849b36676d0f8b8e3e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 20:59:20 +0700
Subject: [PATCH 40/92] feat(FE-114): integrate date time handling in
 RecordingForm for on-time status

---
 .../recording/form/RecordingForm.tsx          | 47 +++++++++++++++++--
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index a6b9f23c..26879c91 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
@@ -119,6 +119,45 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('project_flock_kandang_id', projectFlockId, false);
   };
 
+  // EVENT HANDLERS - Date Time
+  const recordDateTimeChangeHandler = (datetime: Date | null) => {
+    formik.setFieldValue('record_datetime', datetime, false);
+
+    // Auto-set ontime based on date difference
+    if (datetime) {
+      const today = new Date();
+      const recordDate = new Date(datetime);
+
+      // Reset time to compare only dates
+      const todayDateOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      const recordDateOnly = new Date(recordDate.getFullYear(), recordDate.getMonth(), recordDate.getDate());
+
+      // Set ontime to true if recording date is today, false otherwise
+      const isOnTime = todayDateOnly.getTime() === recordDateOnly.getTime();
+      formik.setFieldValue('ontime', isOnTime, false);
+    }
+  };
+
+  // Set initial ontime value when form loads or record_datetime changes
+  useEffect(() => {
+    if (formik.values.record_datetime) {
+      const today = new Date();
+      const recordDate = new Date(formik.values.record_datetime);
+
+      // Reset time to compare only dates
+      const todayDateOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      const recordDateOnly = new Date(recordDate.getFullYear(), recordDate.getMonth(), recordDate.getDate());
+
+      // Set ontime to true if recording date is today, false otherwise
+      const isOnTime = todayDateOnly.getTime() === recordDateOnly.getTime();
+
+      // Only update if ontime is not set or different from calculated value
+      if (formik.values.ontime !== isOnTime) {
+        formik.setFieldValue('ontime', isOnTime, false);
+      }
+    }
+  }, [formik.values.record_datetime]);
+
   // EVENT HANDLERS - Body Weights
   const addBodyWeight = () => {
     const newBodyWeights = [
@@ -304,7 +343,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   const datetime = e.target.value
                     ? new Date(e.target.value)
                     : null;
-                  formik.setFieldValue('record_datetime', datetime);
+                  recordDateTimeChangeHandler(datetime);
                 }}
                 onBlur={formik.handleBlur}
                 isError={
@@ -332,13 +371,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               />
 
               <CheckboxInput
-                label='On Time'
+                hidden={true}
                 name='ontime'
                 checked={formik.values.ontime || false}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   formik.setFieldValue('ontime', e.target.checked);
                 }}
-                disabled={type === 'detail'}
+                disabled={type !== 'detail'}
               />
             </div>
           </Card>

From 71df86c8df4998984b5904cfce135b9568624c46 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 21:34:40 +0700
Subject: [PATCH 41/92] feat(FE-114): integrate location and project flock
 selection in RecordingForm

---
 .../recording/form/RecordingForm.tsx          | 142 ++++++++++++++----
 1 file changed, 109 insertions(+), 33 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 26879c91..944b979a 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -2,10 +2,12 @@
 
 import { useMemo, useState, useEffect } from 'react';
 import { useFormik } from 'formik';
+import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 
 import TextInput from '@/components/input/TextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
@@ -21,6 +23,9 @@ import {
   UpdateRecordingFormSchema,
 } from './RecordingForm.schema';
 import { useRecordingFormHandlers } from './useRecordingFormHandlers';
+import { ProjectFlockApi } from '@/services/api/production';
+import { LocationApi } from '@/services/api/master-data';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 import Card from '@/components/Card';
 
@@ -34,6 +39,62 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const [selectedStocks, setSelectedStocks] = useState<number[]>([]);
   const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]);
 
+  // State for Location search and selection
+  const [locationSearchValue, setLocationSearchValue] = useState('');
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(null);
+
+  // State for Project Flock search
+  const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
+
+  // Fetch Locations data
+  const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({
+    search: locationSearchValue || '',
+  }).toString()}`;
+
+  const { data: locations, isLoading: isLoadingLocations } = useSWR(
+    locationsUrl,
+    LocationApi.getAllFetcher
+  );
+
+  // Fetch Project Flocks data with location filter
+  const projectFlocksUrl = `${ProjectFlockApi.basePath}?${new URLSearchParams({
+    search: projectFlockSearchValue || '',
+    ...(selectedLocation ? { location_id: selectedLocation.value.toString() } : {}),
+  }).toString()}`;
+
+  const { data: projectFlocks, isLoading: isLoadingProjectFlocks } = useSWR(
+    projectFlocksUrl,
+    ProjectFlockApi.getAllFetcher
+  );
+
+  // Extract location options from locations data
+  const locationOptions = useMemo(() => {
+    if (!isResponseSuccess(locations)) return [];
+
+    return locations?.data.map((location) => ({
+      value: location.id,
+      label: location.name,
+    })) || [];
+  }, [locations]);
+
+  // Extract kandang options from project_flocks data
+  const projectFlockKandangOptions = useMemo(() => {
+    if (!isResponseSuccess(projectFlocks)) return [];
+
+    const options: OptionType[] = [];
+
+    projectFlocks?.data.forEach((projectFlock) => {
+      projectFlock.kandangs.forEach((kandang) => {
+        options.push({
+          value: kandang.id,
+          label: `${projectFlock.flock.name} - ${projectFlock.area.name} - ${kandang.name}`,
+        });
+      });
+    });
+
+    return options;
+  }, [projectFlocks]);
+
   const {
     deleteModal,
     recordingFormErrorMessage,
@@ -114,9 +175,19 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   });
 
   // EVENT HANDLERS - Select Inputs
-  const projectFlockChangeHandler = (value: string) => {
-    const projectFlockId = parseInt(value) || 0;
-    formik.setFieldValue('project_flock_kandang_id', projectFlockId, false);
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+
+    // Reset project flock selection when location changes
+    formik.setFieldValue('project_flock_kandang', null);
+    formik.setFieldValue('project_flock_kandang_id', 0);
+  };
+
+  const projectFlockKandangChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('project_flock_kandang', true);
+    formik.setFieldValue('project_flock_kandang', val);
+    formik.setFieldTouched('project_flock_kandang_id', true);
+    formik.setFieldValue('project_flock_kandang_id', (val as OptionType)?.value || 0);
   };
 
   // EVENT HANDLERS - Date Time
@@ -303,28 +374,41 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             }}
           >
             <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
-              <TextInput
+              <SelectInput
                 required
-                label='Project Flock Kandang ID'
-                type='number'
-                name='project_flock_kandang_id'
-                value={formik.values.project_flock_kandang_id?.toString() || ''}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  formik.setFieldValue(
-                    'project_flock_kandang_id',
-                    parseInt(value) || 0
-                  );
-                  projectFlockChangeHandler(value);
-                }}
-                onBlur={formik.handleBlur}
+                label='Lokasi'
+                value={selectedLocation}
+                onChange={locationChangeHandler}
+                options={locationOptions}
+                onInputChange={setLocationSearchValue}
+                isLoading={isLoadingLocations}
+                isDisabled={type === 'detail'}
+                placeholder='Pilih Lokasi'
+                isClearable
+                isSearchable
+              />
+
+              <SelectInput
+                required
+                label='Project Flock'
+                value={formik.values.project_flock_kandang ?? undefined}
+                onChange={projectFlockKandangChangeHandler}
+                options={projectFlockKandangOptions}
+                onInputChange={setProjectFlockSearchValue}
+                isLoading={isLoadingProjectFlocks}
                 isError={
                   formik.touched.project_flock_kandang_id &&
                   Boolean(formik.errors.project_flock_kandang_id)
                 }
                 errorMessage={formik.errors.project_flock_kandang_id as string}
-                readOnly={type === 'detail'}
-                placeholder='Masukkan project flock kandang ID'
+                isDisabled={type === 'detail' || !selectedLocation}
+                placeholder={
+                  selectedLocation
+                    ? 'Pilih Project Flock - Kandang'
+                    : 'Pilih Lokasi terlebih dahulu'
+                }
+                isClearable
+                isSearchable
               />
 
               <TextInput
@@ -369,21 +453,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 readOnly={type === 'detail'}
                 placeholder='Masukkan status (0-3)'
               />
-
-              <CheckboxInput
-                hidden={true}
-                name='ontime'
-                checked={formik.values.ontime || false}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  formik.setFieldValue('ontime', e.target.checked);
-                }}
-                disabled={type !== 'detail'}
-              />
             </div>
           </Card>
+
+
           {/* Body Weights Table */}
           <Card
-            title='Data Bobot Badan'
+            title='Bobot Badan'
             className={{
               wrapper: 'w-full mb-4 shadow',
               title: 'mb-4',
@@ -583,7 +659,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           {/* Stocks Table */}
           <Card
-            title='Data Stok Pakan'
+            title='Stok Persediaan'
             className={{
               wrapper: 'w-full mb-4 shadow',
               title: 'mb-4',
@@ -620,7 +696,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       </th>
                     )}
                     <th>
-                      Product Warehouse ID
+                      Persediaan
                       <span
                         className='tooltip tooltip-error tooltip-bottom z-[9999]'
                         data-tip='required'
@@ -826,7 +902,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           {/* Depletions Table */}
           <Card
-            title='Data Depletions (Hilang/Mati)'
+            title='Deplesi'
             className={{
               wrapper: 'w-full mb-4 shadow',
               title: 'mb-4',

From ef249fee12bc2e9f11f47414af167c3784330e2a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 21:54:06 +0700
Subject: [PATCH 42/92] feat(FE-114): add average weight calculation and input
 handling in RecordingForm

---
 .../recording/form/RecordingForm.schema.ts    |   7 +
 .../recording/form/RecordingForm.tsx          | 165 ++++++++++++++++--
 2 files changed, 154 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
index beffa26a..b1113ae2 100644
--- a/src/components/pages/production/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/production/recording/form/RecordingForm.schema.ts
@@ -39,6 +39,11 @@ export const RecordingFormSchema = Yup.object({
           .min(1, 'Jumlah ayam minimal 1 ekor!')
           .typeError('Jumlah ayam harus berupa angka!')
           .default(1),
+        average_weight: Yup.number()
+          .optional()
+          .min(0, 'Rata-rata berat tidak boleh negatif!')
+          .typeError('Rata-rata berat harus berupa angka!')
+          .default(0),
         notes: Yup.string().optional(),
       })
     )
@@ -123,12 +128,14 @@ export const getRecordingFormInitialValues = (
     (bw: NonNullable<CreateRecordingPayload['body_weights']>[0]) => ({
       weight: bw.weight,
       qty: bw.qty,
+      average_weight: bw.qty > 0 ? Math.round(bw.weight / bw.qty) : 0,
       notes: bw.notes || '',
     })
   ) ?? [
     {
       weight: 0,
       qty: 1,
+      average_weight: 0,
       notes: '',
     },
   ],
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 944b979a..f387d45e 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -7,6 +7,7 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 
 import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -135,6 +136,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               ? bw.qty
               : parseFloat(String(bw.qty)) || 0,
           notes: bw.notes,
+          // average_weight is not included in payload as it's calculated field only
         })),
         stocks: (values.stocks ?? []).map((stock) => ({
           product_warehouse_id: stock.product_warehouse_id,
@@ -229,6 +231,33 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
   }, [formik.values.record_datetime]);
 
+  // Auto-calculate average weight when weight or qty changes
+  useEffect(() => {
+    if (formik.values.body_weights) {
+      const updatedBodyWeights = formik.values.body_weights.map((weight) => ({
+        ...weight,
+        average_weight:
+          weight.qty > 0 && weight.weight > 0
+            ? Math.round(weight.weight / weight.qty)
+            : 0,
+      }));
+
+      // Only update if values are different to avoid infinite loops
+      const hasChanges = updatedBodyWeights.some(
+        (updated, idx) =>
+          updated.average_weight !==
+          (formik.values.body_weights[idx]?.average_weight || 0)
+      );
+
+      if (hasChanges) {
+        formik.setFieldValue('body_weights', updatedBodyWeights, false);
+      }
+    }
+  }, [
+    formik.values.body_weights?.map((w) => w.weight),
+    formik.values.body_weights?.map((w) => w.qty),
+  ]);
+
   // EVENT HANDLERS - Body Weights
   const addBodyWeight = () => {
     const newBodyWeights = [
@@ -237,11 +266,76 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         weight: 0,
         qty: 1,
         notes: '',
+        average_weight: 0,
       },
     ];
     formik.setFieldValue('body_weights', newBodyWeights);
   };
 
+  // Handle calculation when weight changes
+  const handleWeightChange = (idx: number, value: number) => {
+    formik.setFieldValue(`body_weights.${idx}.weight`, value);
+
+    const currentWeight = formik.values.body_weights?.[idx];
+    if (currentWeight) {
+      const qty = currentWeight.qty;
+      if (qty > 0 && value > 0) {
+        const averageWeight = Math.round(value / qty);
+        formik.setFieldValue(`body_weights.${idx}.average_weight`, averageWeight);
+      } else {
+        formik.setFieldValue(`body_weights.${idx}.average_weight`, 0);
+      }
+    }
+  };
+
+  // Handle calculation when qty changes
+  const handleQtyChange = (idx: number, value: number) => {
+    formik.setFieldValue(`body_weights.${idx}.qty`, value);
+
+    const currentWeight = formik.values.body_weights?.[idx];
+    if (currentWeight) {
+      const weight = currentWeight.weight;
+      if (value > 0 && weight > 0) {
+        const averageWeight = Math.round(weight / value);
+        formik.setFieldValue(`body_weights.${idx}.average_weight`, averageWeight);
+      } else {
+        formik.setFieldValue(`body_weights.${idx}.average_weight`, 0);
+      }
+    }
+  };
+
+  // Handle calculation when average_weight changes
+  const handleAverageWeightChange = (idx: number, value: number) => {
+    formik.setFieldValue(`body_weights.${idx}.average_weight`, value);
+
+    const currentWeight = formik.values.body_weights?.[idx];
+    if (currentWeight) {
+      const qty = currentWeight.qty;
+      if (qty > 0 && value > 0) {
+        const totalWeight = value * qty;
+        formik.setFieldValue(`body_weights.${idx}.weight`, totalWeight);
+      } else {
+        formik.setFieldValue(`body_weights.${idx}.weight`, 0);
+      }
+    }
+  };
+
+  // Create wrapper handlers that match NumberInput's onChange signature
+  const handleWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+    handleWeightChange(idx, value);
+  };
+
+  const handleQtyChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+    handleQtyChange(idx, value);
+  };
+
+  const handleAverageWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+    handleAverageWeightChange(idx, value);
+  };
+
   const removeBodyWeight = (idx: number) => {
     const updatedBodyWeights = formik.values.body_weights?.filter(
       (_, i) => i !== idx
@@ -353,6 +447,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     };
   };
 
+  
   return (
     <>
       <section className='w-full'>
@@ -514,6 +609,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <span className='text-error'>*</span>
                       </span>
                     </th>
+                    <th>
+                      Rata-rata Berat Ayam (gram)
+                      <span
+                        className='tooltip tooltip-info tooltip-bottom z-[9999]'
+                        data-tip='Otomatis dihitung: Total Berat ÷ Jumlah Ayam'
+                      >
+                        <Icon icon="material-symbols:info-outline" width={16} height={16} />
+                      </span>
+                    </th>
                     <th>Catatan</th>
                     {type !== 'detail' && <th>Action</th>}
                   </tr>
@@ -546,17 +650,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                       )}
                       <td>
-                      <TextInput
+                      <NumberInput
                           required
                           name={`body_weights.${idx}.weight`}
-                          type='number'
-                          value={
-                            typeof bw.weight === 'number'
-                              ? bw.weight.toString()
-                              : bw.weight
-                          }
-                          onChange={formik.handleChange}
+                          value={bw.weight}
+                          onChange={handleWeightChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
+                          maskType='weight'
+                          weightUnit='gram'
+                          decimals={2}
+                          min={0}
+                          thousandSeparator=','
+                          decimalSeparator='.'
                           isError={
                             isRepeaterInputError('body_weights', 'weight', idx)
                               .isError
@@ -569,21 +674,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           className={{
                             wrapper: 'w-full min-w-32',
                           }}
-                          placeholder='Berat ayam (gram)'
                         />
                       </td>
                       <td>
-                        <TextInput
+                        <NumberInput
                           required
                           name={`body_weights.${idx}.qty`}
-                          type='number'
-                          value={
-                            typeof bw.qty === 'number'
-                              ? bw.qty.toString()
-                              : bw.qty
-                          }
-                          onChange={formik.handleChange}
+                          value={bw.qty}
+                          onChange={handleQtyChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
+                          maskType='number'
+                          decimals={0}
+                          min={0}
+                          thousandSeparator=','
+                          decimalSeparator='.'
                           isError={
                             isRepeaterInputError('body_weights', 'qty', idx)
                               .isError
@@ -596,7 +700,32 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           className={{
                             wrapper: 'w-full min-w-24',
                           }}
-                          placeholder='Jumlah ayam'
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          name={`body_weights.${idx}.average_weight`}
+                          value={bw.average_weight || 0}
+                          onChange={handleAverageWeightChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          maskType='weight'
+                          weightUnit='gram'
+                          decimals={2}
+                          min={0}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          isError={
+                            isRepeaterInputError('body_weights', 'average_weight', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('body_weights', 'average_weight', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-32',
+                          }}
                         />
                       </td>
                       <td>

From 6060ec0f7e5f36b22f0bdde41d67f9d70a0caf3d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 22:02:12 +0700
Subject: [PATCH 43/92] feat(FE-114): prevent auto-calculation override during
 manual average weight editing in RecordingForm

---
 .../recording/form/RecordingForm.tsx          | 43 ++++++++++++++-----
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index f387d45e..c8adef19 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -40,6 +40,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const [selectedStocks, setSelectedStocks] = useState<number[]>([]);
   const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]);
 
+  // Track which average weight field is being edited to prevent auto-calculation override
+  const [editingAverageIndex, setEditingAverageIndex] = useState<number | null>(null);
+
   // State for Location search and selection
   const [locationSearchValue, setLocationSearchValue] = useState('');
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(null);
@@ -231,20 +234,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
   }, [formik.values.record_datetime]);
 
-  // Auto-calculate average weight when weight or qty changes
+  // Auto-calculate average weight when weight or qty changes (but not when editing average weight manually)
   useEffect(() => {
-    if (formik.values.body_weights) {
-      const updatedBodyWeights = formik.values.body_weights.map((weight) => ({
-        ...weight,
-        average_weight:
-          weight.qty > 0 && weight.weight > 0
-            ? Math.round(weight.weight / weight.qty)
-            : 0,
-      }));
+    if (formik.values.body_weights && editingAverageIndex === null) {
+      const updatedBodyWeights = formik.values.body_weights.map((weight, idx) => {
+        // Skip auto-calculation for the field being manually edited
+        if (idx === editingAverageIndex) {
+          return weight;
+        }
+
+        return {
+          ...weight,
+          average_weight:
+            weight.qty > 0 && weight.weight > 0
+              ? Math.round(weight.weight / weight.qty)
+              : 0,
+        };
+      });
 
       // Only update if values are different to avoid infinite loops
       const hasChanges = updatedBodyWeights.some(
         (updated, idx) =>
+          idx !== editingAverageIndex && // Skip the field being edited
           updated.average_weight !==
           (formik.values.body_weights[idx]?.average_weight || 0)
       );
@@ -256,6 +267,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   }, [
     formik.values.body_weights?.map((w) => w.weight),
     formik.values.body_weights?.map((w) => w.qty),
+    editingAverageIndex, // Include editing index in dependencies
   ]);
 
   // EVENT HANDLERS - Body Weights
@@ -332,10 +344,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   };
 
   const handleAverageWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Set focus state to prevent auto-calculation override
+    setEditingAverageIndex(idx);
+
     const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
     handleAverageWeightChange(idx, value);
   };
 
+  const handleAverageWeightBlur = () => {
+    // Clear focus state when user leaves the field to re-enable auto-calculation
+    setEditingAverageIndex(null);
+  };
+
   const removeBodyWeight = (idx: number) => {
     const updatedBodyWeights = formik.values.body_weights?.filter(
       (_, i) => i !== idx
@@ -707,7 +727,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           name={`body_weights.${idx}.average_weight`}
                           value={bw.average_weight || 0}
                           onChange={handleAverageWeightChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
+                          onBlur={(e) => {
+                            handleAverageWeightBlur();
+                            formik.handleBlur(e);
+                          }}
                           maskType='weight'
                           weightUnit='gram'
                           decimals={2}

From 7f5ae947065fd6a653d854cd90106ae0ec04f46c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 22:59:41 +0700
Subject: [PATCH 44/92] feat(FE-114): integrate product stock fetching and
 selection in RecordingForm

---
 .../recording/form/RecordingForm.tsx          | 1210 +++++++++--------
 1 file changed, 646 insertions(+), 564 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index c8adef19..382d609a 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useEffect, useCallback } from 'react';
 import { useFormik } from 'formik';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
@@ -26,6 +26,7 @@ import {
 import { useRecordingFormHandlers } from './useRecordingFormHandlers';
 import { ProjectFlockApi } from '@/services/api/production';
 import { LocationApi } from '@/services/api/master-data';
+import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess } from '@/lib/api-helper';
 
 import Card from '@/components/Card';
@@ -71,6 +72,22 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     ProjectFlockApi.getAllFetcher
   );
 
+  // Fetch Products with location filter (both PAKAN and OVK) - using selectedLocation for now
+  const stockProductsUrl = useMemo(() => {
+    if (!selectedLocation) return null;
+    const params = new URLSearchParams({
+      flags: 'PAKAN,OVK', // Fetch both flags in one request
+      search: '',
+      location_id: selectedLocation.value.toString(),
+    });
+    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
+  }, [selectedLocation]);
+
+  const { data: stockProducts, isLoading: isLoadingStockProducts } = useSWR(
+    stockProductsUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+
   // Extract location options from locations data
   const locationOptions = useMemo(() => {
     if (!isResponseSuccess(locations)) return [];
@@ -99,6 +116,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     return options;
   }, [projectFlocks]);
 
+
   const {
     deleteModal,
     recordingFormErrorMessage,
@@ -179,6 +197,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     },
   });
 
+  // Get location from selected project flock for stock filtering
+  const getProjectFlockLocation = useCallback((): OptionType | null => {
+    if (!formik.values.project_flock_kandang || !isResponseSuccess(projectFlocks)) {
+      return selectedLocation; // Fallback to manual location selection
+    }
+
+    const kandangId = formik.values.project_flock_kandang.value;
+    for (const projectFlock of projectFlocks.data) {
+      const kandang = projectFlock.kandangs.find(k => k.id === kandangId);
+      if (kandang && projectFlock.location) {
+        return {
+          value: projectFlock.location.id,
+          label: projectFlock.location.name
+        };
+      }
+    }
+
+    return selectedLocation; // Fallback to manual location selection
+  }, [formik.values.project_flock_kandang, projectFlocks, selectedLocation]);
+
   // EVENT HANDLERS - Select Inputs
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
     setSelectedLocation(val as OptionType);
@@ -386,6 +424,40 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('stocks', newStocks);
   };
 
+  // Memoized unified products for stock selection
+  const unifiedStockProducts = useMemo(() => {
+    if (!isResponseSuccess(stockProducts)) return [];
+    const options: OptionType[] = [];
+
+    stockProducts.data.forEach((product) => {
+      const warehouse = product.warehouse;
+      const stockText = product.quantity.toLocaleString('id-ID');
+
+      // Check if product has any of the flags
+      const hasPakanFlag = product.product.flags?.includes('PAKAN');
+      const hasOvkFlag = product.product.flags?.includes('OVK');
+
+      // Add products with warehouse and location grouping in label (similar to projectFlockKandangOptions pattern)
+      if (hasPakanFlag) {
+        options.push({
+          value: product.id,
+          label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
+        });
+      }
+
+      if (hasOvkFlag) {
+        options.push({
+          value: product.id,
+          label: `[OVK] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
+        });
+      }
+    });
+
+    return options;
+  }, [stockProducts, getProjectFlockLocation()]);
+
+
+  // Unified Stock remove handlers
   const removeStock = (idx: number) => {
     const updatedStocks = formik.values.stocks?.filter((_, i) => i !== idx);
     formik.setFieldValue('stocks', updatedStocks);
@@ -467,7 +539,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     };
   };
 
-  
+
   return (
     <>
       <section className='w-full'>
@@ -534,8 +606,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 value={
                   formik.values.record_datetime instanceof Date
                     ? formik.values.record_datetime
-                        .toISOString()
-                        .substring(0, 16)
+                      .toISOString()
+                      .substring(0, 16)
                     : ''
                 }
                 onChange={(e) => {
@@ -583,202 +655,202 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                  <tr>
-                    {type !== 'detail' && (
-                      <th>
-                          <CheckboxInput
-                            name='select-all-body-weights'
-                            checked={
-                              formik.values.body_weights?.length ===
-                                selectedBodyWeights.length &&
-                              formik.values.body_weights?.length > 0
-                            }
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                              if (e.target.checked) {
-                                setSelectedBodyWeights(
-                                  formik.values.body_weights?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedBodyWeights([]);
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                      </th>
-                    )}
+                <tr>
+                  {type !== 'detail' && (
                     <th>
-                      Berat Ayam (gram)
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                      <CheckboxInput
+                        name='select-all-body-weights'
+                        checked={
+                          formik.values.body_weights?.length ===
+                          selectedBodyWeights.length &&
+                          formik.values.body_weights?.length > 0
+                        }
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          if (e.target.checked) {
+                            setSelectedBodyWeights(
+                              formik.values.body_weights?.map(
+                                (_, idx) => idx
+                              ) ?? []
+                            );
+                          } else {
+                            setSelectedBodyWeights([]);
+                          }
+                        }}
+                        classNames={{
+                          wrapper: 'flex justify-center',
+                          checkbox: 'checkbox checkbox-sm',
+                        }}
+                      />
+                    </th>
+                  )}
+                  <th>
+                    Berat Ayam (gram)
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    <th>
-                      Jumlah Ayam
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                  </th>
+                  <th>
+                    Jumlah Ayam
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    <th>
-                      Rata-rata Berat Ayam (gram)
-                      <span
-                        className='tooltip tooltip-info tooltip-bottom z-[9999]'
-                        data-tip='Otomatis dihitung: Total Berat ÷ Jumlah Ayam'
-                      >
+                  </th>
+                  <th>
+                    Rata-rata Berat Ayam (gram)
+                    <span
+                      className='tooltip tooltip-info tooltip-bottom z-[9999]'
+                      data-tip='Otomatis dihitung: Total Berat ÷ Jumlah Ayam'
+                    >
                         <Icon icon="material-symbols:info-outline" width={16} height={16} />
                       </span>
-                    </th>
-                    <th>Catatan</th>
-                    {type !== 'detail' && <th>Action</th>}
-                  </tr>
+                  </th>
+                  <th>Catatan</th>
+                  {type !== 'detail' && <th>Action</th>}
+                </tr>
                 </thead>
                 <tbody>
-                  {formik.values.body_weights?.map((bw, idx) => (
-                    <tr key={`body-weight-${idx}`}>
-                      {type !== 'detail' && (
-                        <td className="!align-middle">
-                          <CheckboxInput
-                            name={`body-weight-${idx}`}
-                            checked={selectedBodyWeights.includes(idx)}
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                              if (e.target.checked) {
-                                setSelectedBodyWeights([
-                                  ...selectedBodyWeights,
-                                  idx,
-                                ]);
-                              } else {
-                                setSelectedBodyWeights(
-                                  selectedBodyWeights.filter((i) => i !== idx),
-                                );
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                        </td>
-                      )}
-                      <td>
+                {formik.values.body_weights?.map((bw, idx) => (
+                  <tr key={`body-weight-${idx}`}>
+                    {type !== 'detail' && (
+                      <td className="!align-middle">
+                        <CheckboxInput
+                          name={`body-weight-${idx}`}
+                          checked={selectedBodyWeights.includes(idx)}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                            if (e.target.checked) {
+                              setSelectedBodyWeights([
+                                ...selectedBodyWeights,
+                                idx,
+                              ]);
+                            } else {
+                              setSelectedBodyWeights(
+                                selectedBodyWeights.filter((i) => i !== idx),
+                              );
+                            }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </td>
+                    )}
+                    <td>
                       <NumberInput
-                          required
-                          name={`body_weights.${idx}.weight`}
-                          value={bw.weight}
-                          onChange={handleWeightChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          maskType='weight'
-                          weightUnit='gram'
-                          decimals={2}
-                          min={0}
-                          thousandSeparator=','
-                          decimalSeparator='.'
-                          isError={
-                            isRepeaterInputError('body_weights', 'weight', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('body_weights', 'weight', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-32',
-                          }}
-                        />
-                      </td>
+                        required
+                        name={`body_weights.${idx}.weight`}
+                        value={bw.weight}
+                        onChange={handleWeightChangeWrapper(idx)}
+                        onBlur={formik.handleBlur}
+                        maskType='weight'
+                        weightUnit='gram'
+                        decimals={2}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        isError={
+                          isRepeaterInputError('body_weights', 'weight', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('body_weights', 'weight', idx)
+                            .errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-32',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`body_weights.${idx}.qty`}
+                        value={bw.qty}
+                        onChange={handleQtyChangeWrapper(idx)}
+                        onBlur={formik.handleBlur}
+                        maskType='number'
+                        decimals={0}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        isError={
+                          isRepeaterInputError('body_weights', 'qty', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('body_weights', 'qty', idx)
+                            .errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        name={`body_weights.${idx}.average_weight`}
+                        value={bw.average_weight || 0}
+                        onChange={handleAverageWeightChangeWrapper(idx)}
+                        onBlur={(e) => {
+                          handleAverageWeightBlur();
+                          formik.handleBlur(e);
+                        }}
+                        maskType='weight'
+                        weightUnit='gram'
+                        decimals={2}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        isError={
+                          isRepeaterInputError('body_weights', 'average_weight', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('body_weights', 'average_weight', idx)
+                            .errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-32',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`body_weights.${idx}.notes`}
+                        value={bw.notes || ''}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        placeholder='Catatan...'
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-32',
+                        }}
+                      />
+                    </td>
+                    {type !== 'detail' && (
                       <td>
-                        <NumberInput
-                          required
-                          name={`body_weights.${idx}.qty`}
-                          value={bw.qty}
-                          onChange={handleQtyChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          maskType='number'
-                          decimals={0}
-                          min={0}
-                          thousandSeparator=','
-                          decimalSeparator='.'
-                          isError={
-                            isRepeaterInputError('body_weights', 'qty', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('body_weights', 'qty', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
+                        <div className='flex justify-center'>
+                          <Button
+                            type='button'
+                            color='error'
+                            onClick={() => removeBodyWeight(idx)}
+                          >
+                            <Icon icon='mdi:trash-can' width={24} height={24} />
+                          </Button>
+                        </div>
                       </td>
-                      <td>
-                        <NumberInput
-                          name={`body_weights.${idx}.average_weight`}
-                          value={bw.average_weight || 0}
-                          onChange={handleAverageWeightChangeWrapper(idx)}
-                          onBlur={(e) => {
-                            handleAverageWeightBlur();
-                            formik.handleBlur(e);
-                          }}
-                          maskType='weight'
-                          weightUnit='gram'
-                          decimals={2}
-                          min={0}
-                          thousandSeparator=','
-                          decimalSeparator='.'
-                          isError={
-                            isRepeaterInputError('body_weights', 'average_weight', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('body_weights', 'average_weight', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-32',
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          name={`body_weights.${idx}.notes`}
-                          value={bw.notes || ''}
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          placeholder='Catatan...'
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-32',
-                          }}
-                        />
-                      </td>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeBodyWeight(idx)}
-                            >
-                              <Icon icon='mdi:trash-can' width={24} height={24} />
-                            </Button>
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
+                    )}
+                  </tr>
+                ))}
                 </tbody>
               </table>
             </div>
@@ -820,208 +892,218 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                  <tr>
-                    {type !== 'detail' && (
-                      <th>
-                          <CheckboxInput
-                            name='select-all-stocks'
-                            checked={
-                              formik.values.stocks?.length ===
-                                selectedStocks.length &&
-                              formik.values.stocks?.length > 0
-                            }
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                              if (e.target.checked) {
-                                setSelectedStocks(
-                                  formik.values.stocks?.map((_, idx) => idx) ??
-                                    []
-                                );
-                              } else {
-                                setSelectedStocks([]);
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                      </th>
-                    )}
+                <tr>
+                  {type !== 'detail' && (
                     <th>
-                      Persediaan
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                      <CheckboxInput
+                        name='select-all-stocks'
+                        checked={
+                          formik.values.stocks?.length ===
+                          selectedStocks.length &&
+                          formik.values.stocks?.length > 0
+                        }
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          if (e.target.checked) {
+                            setSelectedStocks(
+                              formik.values.stocks?.map((_, idx) => idx) ??
+                              []
+                            );
+                          } else {
+                            setSelectedStocks([]);
+                          }
+                        }}
+                        classNames={{
+                          wrapper: 'flex justify-center',
+                          checkbox: 'checkbox checkbox-sm',
+                        }}
+                      />
+                    </th>
+                  )}
+                  <th>
+                    Persediaan
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    <th>Penambahan</th>
-                    <th>Pengurangan</th>
-                    <th>Jumlah Pakai</th>
-                    <th>Catatan</th>
-                    {type !== 'detail' && <th>Action</th>}
-                  </tr>
+                  </th>
+                  <th>Penambahan</th>
+                  <th>Pengurangan</th>
+                  <th>Jumlah Pakai</th>
+                  <th>Catatan</th>
+                  {type !== 'detail' && <th>Action</th>}
+                </tr>
                 </thead>
                 <tbody>
-                  {formik.values.stocks?.map((stock, idx) => (
-                    <tr key={`stock-${idx}`}>
-                      {type !== 'detail' && (
-                        <td className="!align-middle">
-                          <CheckboxInput
-                            name={`stock-${idx}`}
-                            checked={selectedStocks.includes(idx)}
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                              if (e.target.checked) {
-                                setSelectedStocks([...selectedStocks, idx]);
-                              } else {
-                                setSelectedStocks(
-                                  selectedStocks.filter((i) => i !== idx),
-                                );
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                        </td>
-                      )}
-                      <td>
+                {formik.values.stocks?.map((stock, idx) => (
+                  <tr key={`stock-${idx}`}>
+                    {type !== 'detail' && (
+                      <td className="!align-middle">
+                        <CheckboxInput
+                          name={`stock-${idx}`}
+                          checked={selectedStocks.includes(idx)}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                            if (e.target.checked) {
+                              setSelectedStocks([...selectedStocks, idx]);
+                            } else {
+                              setSelectedStocks(
+                                selectedStocks.filter((i) => i !== idx),
+                              );
+                            }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </td>
+                    )}
+                    <td>
+                      <SelectInput
+                        required
+                        value={
+                          unifiedStockProducts.find(
+                            (product) =>
+                              product.value === stock.product_warehouse_id
+                          ) || null
+                        }
+                        onChange={(selectedOption) => {
+                          const option = selectedOption as OptionType | null;
+                          formik.setFieldValue(
+                            `stocks.${idx}.product_warehouse_id`,
+                            option?.value || 0
+                          );
+                        }}
+                        options={unifiedStockProducts}
+                        placeholder='Pilih Produk'
+                        isLoading={isLoadingStockProducts}
+                        isError={
+                          isRepeaterInputError(
+                            'stocks',
+                            'product_warehouse_id',
+                            idx
+                          ).isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(
+                            'stocks',
+                            'product_warehouse_id',
+                            idx
+                          ).errorMessage
+                        }
+                        className={{
+                          wrapper: 'w-full min-w-48',
+                        }}
+                        isSearchable
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        name={`stocks.${idx}.increase`}
+                        value={stock.increase || 0}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        maskType='number'
+                        decimals={0}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        isError={
+                          isRepeaterInputError('stocks', 'increase', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('stocks', 'increase', idx)
+                            .errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                        placeholder='Penambahan'
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        name={`stocks.${idx}.decrease`}
+                        value={stock.decrease || 0}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        maskType='number'
+                        decimals={0}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        isError={
+                          isRepeaterInputError('stocks', 'decrease', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('stocks', 'decrease', idx)
+                            .errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                        placeholder='Pengurangan'
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        name={`stocks.${idx}.usage_amount`}
+                        value={stock.usage_amount || 0}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        maskType='number'
+                        decimals={0}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        isError={
+                          isRepeaterInputError('stocks', 'usage_amount', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('stocks', 'usage_amount', idx)
+                            .errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                        placeholder='Jumlah Pakai'
+                      />
+                    </td>
+                    <td>
                       <TextInput
-                          required
-                          name={`stocks.${idx}.product_warehouse_id`}
-                          type='number'
-                          value={stock.product_warehouse_id?.toString() || ''}
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          isError={
-                            isRepeaterInputError(
-                              'stocks',
-                              'product_warehouse_id',
-                              idx
-                            ).isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError(
-                              'stocks',
-                              'product_warehouse_id',
-                              idx
-                            ).errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-32',
-                          }}
-                          placeholder='Product Warehouse ID'
-                        />
-                      </td>
+                        name={`stocks.${idx}.notes`}
+                        value={stock.notes || ''}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        placeholder='Catatan...'
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-32',
+                        }}
+                      />
+                    </td>
+                    {type !== 'detail' && (
                       <td>
-                        <TextInput
-                          name={`stocks.${idx}.increase`}
-                          type='number'
-                          value={
-                            typeof stock.increase === 'number'
-                              ? stock.increase.toString()
-                              : stock.increase
-                          }
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          isError={
-                            isRepeaterInputError('stocks', 'increase', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('stocks', 'increase', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                          placeholder='Penambahan'
-                        />
+                        <div className='flex justify-center'>
+                          <Button
+                            type='button'
+                            color='error'
+                            onClick={() => removeStock(idx)}
+                          >
+                            <Icon icon='mdi:trash-can' width={24} height={24} />
+                          </Button>
+                        </div>
                       </td>
-                      <td>
-                        <TextInput
-                          name={`stocks.${idx}.decrease`}
-                          type='number'
-                          value={
-                            typeof stock.decrease === 'number'
-                              ? stock.decrease.toString()
-                              : stock.decrease
-                          }
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          isError={
-                            isRepeaterInputError('stocks', 'decrease', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('stocks', 'decrease', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                          placeholder='Pengurangan'
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          name={`stocks.${idx}.usage_amount`}
-                          type='number'
-                          value={
-                            typeof stock.usage_amount === 'number'
-                              ? stock.usage_amount.toString()
-                              : stock.usage_amount
-                          }
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          isError={
-                            isRepeaterInputError('stocks', 'usage_amount', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('stocks', 'usage_amount', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                          placeholder='Jumlah Pakai'
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          name={`stocks.${idx}.notes`}
-                          value={stock.notes || ''}
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          placeholder='Catatan...'
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-32',
-                          }}
-                        />
-                      </td>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeStock(idx)}
-                            >
-                              <Icon icon='mdi:trash-can' width={24} height={24} />
-                            </Button>
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
+                    )}
+                  </tr>
+                ))}
                 </tbody>
               </table>
             </div>
@@ -1063,200 +1145,200 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                  <tr>
-                    {type !== 'detail' && (
-                      <th>
-                          <CheckboxInput
-                            name='select-all-depletions'
-                            checked={
-                              formik.values.depletions?.length ===
-                                selectedDepletions.length &&
-                              formik.values.depletions?.length > 0
-                            }
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                              if (e.target.checked) {
-                                setSelectedDepletions(
-                                  formik.values.depletions?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedDepletions([]);
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                      </th>
-                    )}
+                <tr>
+                  {type !== 'detail' && (
                     <th>
-                      Product Warehouse ID
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                      <CheckboxInput
+                        name='select-all-depletions'
+                        checked={
+                          formik.values.depletions?.length ===
+                          selectedDepletions.length &&
+                          formik.values.depletions?.length > 0
+                        }
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          if (e.target.checked) {
+                            setSelectedDepletions(
+                              formik.values.depletions?.map(
+                                (_, idx) => idx
+                              ) ?? []
+                            );
+                          } else {
+                            setSelectedDepletions([]);
+                          }
+                        }}
+                        classNames={{
+                          wrapper: 'flex justify-center',
+                          checkbox: 'checkbox checkbox-sm',
+                        }}
+                      />
+                    </th>
+                  )}
+                  <th>
+                    Product Warehouse ID
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    <th>
-                      Kondisi
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                  </th>
+                  <th>
+                    Kondisi
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    <th>
-                      Total
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                  </th>
+                  <th>
+                    Total
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    <th>Catatan</th>
-                    {type !== 'detail' && <th>Action</th>}
-                  </tr>
+                  </th>
+                  <th>Catatan</th>
+                  {type !== 'detail' && <th>Action</th>}
+                </tr>
                 </thead>
                 <tbody>
-                  {formik.values.depletions?.map((depletion, idx) => (
-                    <tr key={`depletion-${idx}`}>
-                      {type !== 'detail' && (
-                        <td className="!align-middle">
-                          <CheckboxInput
-                            name={`depletion-${idx}`}
-                            checked={selectedDepletions.includes(idx)}
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                              if (e.target.checked) {
-                                setSelectedDepletions([
-                                  ...selectedDepletions,
-                                  idx,
-                                ]);
-                              } else {
-                                setSelectedDepletions(
-                                  selectedDepletions.filter((i) => i !== idx),
-                                );
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                        </td>
-                      )}
-                      <td>
+                {formik.values.depletions?.map((depletion, idx) => (
+                  <tr key={`depletion-${idx}`}>
+                    {type !== 'detail' && (
+                      <td className="!align-middle">
+                        <CheckboxInput
+                          name={`depletion-${idx}`}
+                          checked={selectedDepletions.includes(idx)}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                            if (e.target.checked) {
+                              setSelectedDepletions([
+                                ...selectedDepletions,
+                                idx,
+                              ]);
+                            } else {
+                              setSelectedDepletions(
+                                selectedDepletions.filter((i) => i !== idx),
+                              );
+                            }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </td>
+                    )}
+                    <td>
                       <TextInput
-                          required
-                          name={`depletions.${idx}.product_warehouse_id`}
-                          type='number'
-                          value={
-                            depletion.product_warehouse_id?.toString() || ''
-                          }
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          isError={
-                            isRepeaterInputError(
-                              'depletions',
-                              'product_warehouse_id',
-                              idx
-                            ).isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError(
-                              'depletions',
-                              'product_warehouse_id',
-                              idx
-                            ).errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-32',
-                          }}
-                          placeholder='Product Warehouse ID'
-                        />
-                      </td>
+                        required
+                        name={`depletions.${idx}.product_warehouse_id`}
+                        type='number'
+                        value={
+                          depletion.product_warehouse_id?.toString() || ''
+                        }
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        isError={
+                          isRepeaterInputError(
+                            'depletions',
+                            'product_warehouse_id',
+                            idx
+                          ).isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(
+                            'depletions',
+                            'product_warehouse_id',
+                            idx
+                          ).errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-32',
+                        }}
+                        placeholder='Product Warehouse ID'
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`depletions.${idx}.condition`}
+                        value={depletion.condition || ''}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        isError={
+                          isRepeaterInputError('depletions', 'condition', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('depletions', 'condition', idx)
+                            .errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-32',
+                        }}
+                        placeholder='Kondisi (MATI/SAKIT/HILANG)'
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`depletions.${idx}.total`}
+                        type='number'
+                        value={
+                          typeof depletion.total === 'number'
+                            ? depletion.total.toString()
+                            : depletion.total
+                        }
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        isError={
+                          isRepeaterInputError('depletions', 'total', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('depletions', 'total', idx)
+                            .errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                        placeholder='Total'
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`depletions.${idx}.notes`}
+                        value={depletion.notes || ''}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        placeholder='Catatan...'
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-32',
+                        }}
+                      />
+                    </td>
+                    {type !== 'detail' && (
                       <td>
-                        <TextInput
-                          required
-                          name={`depletions.${idx}.condition`}
-                          value={depletion.condition || ''}
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          isError={
-                            isRepeaterInputError('depletions', 'condition', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('depletions', 'condition', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-32',
-                          }}
-                          placeholder='Kondisi (MATI/SAKIT/HILANG)'
-                        />
+                        <div className='flex justify-center'>
+                          <Button
+                            type='button'
+                            color='error'
+                            onClick={() => removeDepletion(idx)}
+                          >
+                            <Icon icon='mdi:trash-can' width={24} height={24} />
+                          </Button>
+                        </div>
                       </td>
-                      <td>
-                        <TextInput
-                          required
-                          name={`depletions.${idx}.total`}
-                          type='number'
-                          value={
-                            typeof depletion.total === 'number'
-                              ? depletion.total.toString()
-                              : depletion.total
-                          }
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          isError={
-                            isRepeaterInputError('depletions', 'total', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('depletions', 'total', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                          placeholder='Total'
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          name={`depletions.${idx}.notes`}
-                          value={depletion.notes || ''}
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          placeholder='Catatan...'
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-32',
-                          }}
-                        />
-                      </td>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeDepletion(idx)}
-                            >
-                              <Icon icon='mdi:trash-can' width={24} height={24} />
-                            </Button>
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
+                    )}
+                  </tr>
+                ))}
                 </tbody>
               </table>
             </div>

From c30fcd81b2e4b9459a87ffe433fc563a28765031 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 08:53:41 +0700
Subject: [PATCH 45/92] refactor(FE-114): simplify CreateRecordingPayload
 structure and update validation in RecordingForm

---
 .../recording/form/RecordingForm.schema.ts    |  43 +--
 .../recording/form/RecordingForm.tsx          | 260 ++----------------
 src/types/api/production/recording.d.ts       |  17 +-
 3 files changed, 31 insertions(+), 289 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
index b1113ae2..597a24e1 100644
--- a/src/components/pages/production/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/production/recording/form/RecordingForm.schema.ts
@@ -19,14 +19,6 @@ export const RecordingFormSchema = Yup.object({
       (value) => value !== undefined && value !== null && value > 0
     )
     .required('Project Flock Kandang wajib diisi!'),
-  record_datetime: Yup.date()
-    .required('Tanggal dan waktu recording wajib diisi')
-    .typeError('Format tanggal dan waktu tidak valid'),
-  status: Yup.number()
-    .optional()
-    .oneOf([0, 1, 2, 3], 'Status tidak valid')
-    .typeError('Status harus berupa angka!'),
-  ontime: Yup.boolean().optional(),
   body_weights: Yup.array()
     .of(
       Yup.object({
@@ -44,7 +36,6 @@ export const RecordingFormSchema = Yup.object({
           .min(0, 'Rata-rata berat tidak boleh negatif!')
           .typeError('Rata-rata berat harus berupa angka!')
           .default(0),
-        notes: Yup.string().optional(),
       })
     )
     .min(1, 'Minimal harus ada 1 data bobot badan!')
@@ -56,14 +47,6 @@ export const RecordingFormSchema = Yup.object({
           .required('Produk wajib diisi!')
           .min(1, 'Produk wajib diisi!')
           .typeError('Produk harus berupa angka!'),
-        increase: Yup.number()
-          .optional()
-          .min(0, 'Penambahan tidak boleh negatif!')
-          .typeError('Penambahan harus berupa angka!'),
-        decrease: Yup.number()
-          .optional()
-          .min(0, 'Pengurangan tidak boleh negatif!')
-          .typeError('Pengurangan harus berupa angka!'),
         usage_amount: Yup.number()
           .optional()
           .min(0, 'Jumlah penggunaan tidak boleh negatif!')
@@ -77,10 +60,14 @@ export const RecordingFormSchema = Yup.object({
     .of(
       Yup.object({
         product_warehouse_id: Yup.number()
-          .required('Produk wajib diisi!')
+          .optional()
           .min(1, 'Produk wajib diisi!')
           .typeError('Produk harus berupa angka!'),
-        condition: Yup.string()
+        total: Yup.number()
+          .required('Jumlah depletions wajib diisi!')
+          .min(1, 'Jumlah depletions minimal 1!')
+          .typeError('Jumlah depletions harus berupa angka!'),
+        notes: Yup.string()
           .required('Kondisi depletions wajib diisi!')
           .oneOf(
             RECORDING_FLAG_OPTIONS.map((option) => option.value),
@@ -88,11 +75,6 @@ export const RecordingFormSchema = Yup.object({
           )
           .typeError('Kondisi depletions harus berupa teks!')
           .min(1, 'Kondisi depletions wajib diisi!'),
-        total: Yup.number()
-          .required('Jumlah depletions wajib diisi!')
-          .min(1, 'Jumlah depletions minimal 1!')
-          .typeError('Jumlah depletions harus berupa angka!'),
-        notes: Yup.string().optional(),
       })
     )
     .min(1, 'Minimal harus ada 1 data depletions!')
@@ -119,39 +101,28 @@ export const getRecordingFormInitialValues = (
       }
     : null,
   project_flock_kandang_id: initialValues?.project_flock_kandang_id ?? 0,
-  record_datetime: initialValues?.record_datetime
-    ? new Date(initialValues.record_datetime)
-    : new Date(),
-  status: initialValues?.status ?? 1,
-  ontime: initialValues?.ontime ?? true,
   body_weights: initialValues?.body_weights?.map(
     (bw: NonNullable<CreateRecordingPayload['body_weights']>[0]) => ({
       weight: bw.weight,
       qty: bw.qty,
       average_weight: bw.qty > 0 ? Math.round(bw.weight / bw.qty) : 0,
-      notes: bw.notes || '',
     })
   ) ?? [
     {
       weight: 0,
       qty: 1,
       average_weight: 0,
-      notes: '',
     },
   ],
   stocks: initialValues?.stocks?.map(
     (stock: NonNullable<CreateRecordingPayload['stocks']>[0]) => ({
       product_warehouse_id: stock.product_warehouse_id,
-      increase: stock.increase,
-      decrease: stock.decrease,
       usage_amount: stock.usage_amount,
       notes: stock.notes,
     })
   ) ?? [
     {
       product_warehouse_id: 0,
-      increase: 0,
-      decrease: 0,
       usage_amount: 0,
       notes: '',
     },
@@ -159,14 +130,12 @@ export const getRecordingFormInitialValues = (
   depletions: initialValues?.depletions?.map(
     (depletion: NonNullable<CreateRecordingPayload['depletions']>[0]) => ({
       product_warehouse_id: depletion.product_warehouse_id,
-      condition: depletion.condition,
       total: depletion.total,
       notes: depletion.notes,
     })
   ) ?? [
     {
       product_warehouse_id: 0,
-      condition: '',
       total: 0,
       notes: '',
     },
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 382d609a..3b98ae3a 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -28,6 +28,7 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { LocationApi } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess } from '@/lib/api-helper';
+import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
 
 import Card from '@/components/Card';
 
@@ -141,12 +142,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     onSubmit: async (values) => {
       const payload: CreateRecordingPayload = {
         project_flock_kandang_id: values.project_flock_kandang_id,
-        record_datetime:
-          values.record_datetime instanceof Date
-            ? values.record_datetime.toISOString()
-            : '',
-        status: values.status,
-        ontime: values.ontime,
         body_weights: (values.body_weights ?? []).map((bw) => ({
           weight:
             typeof bw.weight === 'number'
@@ -156,28 +151,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             typeof bw.qty === 'number'
               ? bw.qty
               : parseFloat(String(bw.qty)) || 0,
-          notes: bw.notes,
-          // average_weight is not included in payload as it's calculated field only
         })),
         stocks: (values.stocks ?? []).map((stock) => ({
           product_warehouse_id: stock.product_warehouse_id,
-          increase:
-            typeof stock.increase === 'number'
-              ? stock.increase
-              : parseFloat(String(stock.increase)) || 0,
-          decrease:
-            typeof stock.decrease === 'number'
-              ? stock.decrease
-              : parseFloat(String(stock.decrease)) || 0,
           usage_amount:
             typeof stock.usage_amount === 'number'
               ? stock.usage_amount
               : parseFloat(String(stock.usage_amount)) || 0,
-          notes: stock.notes,
+          notes: stock.notes || '',
         })),
         depletions: (values.depletions ?? []).map((depletion) => ({
-          product_warehouse_id: depletion.product_warehouse_id,
-          condition: depletion.condition,
           total:
             typeof depletion.total === 'number'
               ? depletion.total
@@ -236,42 +219,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   // EVENT HANDLERS - Date Time
   const recordDateTimeChangeHandler = (datetime: Date | null) => {
     formik.setFieldValue('record_datetime', datetime, false);
-
-    // Auto-set ontime based on date difference
-    if (datetime) {
-      const today = new Date();
-      const recordDate = new Date(datetime);
-
-      // Reset time to compare only dates
-      const todayDateOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-      const recordDateOnly = new Date(recordDate.getFullYear(), recordDate.getMonth(), recordDate.getDate());
-
-      // Set ontime to true if recording date is today, false otherwise
-      const isOnTime = todayDateOnly.getTime() === recordDateOnly.getTime();
-      formik.setFieldValue('ontime', isOnTime, false);
-    }
   };
 
-  // Set initial ontime value when form loads or record_datetime changes
-  useEffect(() => {
-    if (formik.values.record_datetime) {
-      const today = new Date();
-      const recordDate = new Date(formik.values.record_datetime);
-
-      // Reset time to compare only dates
-      const todayDateOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-      const recordDateOnly = new Date(recordDate.getFullYear(), recordDate.getMonth(), recordDate.getDate());
-
-      // Set ontime to true if recording date is today, false otherwise
-      const isOnTime = todayDateOnly.getTime() === recordDateOnly.getTime();
-
-      // Only update if ontime is not set or different from calculated value
-      if (formik.values.ontime !== isOnTime) {
-        formik.setFieldValue('ontime', isOnTime, false);
-      }
-    }
-  }, [formik.values.record_datetime]);
-
   // Auto-calculate average weight when weight or qty changes (but not when editing average weight manually)
   useEffect(() => {
     if (formik.values.body_weights && editingAverageIndex === null) {
@@ -315,7 +264,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       {
         weight: 0,
         qty: 1,
-        notes: '',
         average_weight: 0,
       },
     ];
@@ -415,8 +363,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       ...(formik.values.stocks || []),
       {
         product_warehouse_id: 0,
-        increase: 0,
-        decrease: 0,
         usage_amount: 0,
         notes: '',
       },
@@ -476,8 +422,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     const newDepletions = [
       ...(formik.values.depletions || []),
       {
-        product_warehouse_id: 0,
-        condition: '',
         total: 0,
         notes: '',
       },
@@ -597,49 +541,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 isClearable
                 isSearchable
               />
-
-              <TextInput
-                required
-                label='Tanggal & Waktu Recording'
-                type='datetime-local'
-                name='record_datetime'
-                value={
-                  formik.values.record_datetime instanceof Date
-                    ? formik.values.record_datetime
-                      .toISOString()
-                      .substring(0, 16)
-                    : ''
-                }
-                onChange={(e) => {
-                  const datetime = e.target.value
-                    ? new Date(e.target.value)
-                    : null;
-                  recordDateTimeChangeHandler(datetime);
-                }}
-                onBlur={formik.handleBlur}
-                isError={
-                  formik.touched.record_datetime &&
-                  Boolean(formik.errors.record_datetime)
-                }
-                errorMessage={formik.errors.record_datetime as string}
-                readOnly={type === 'detail'}
-              />
-
-              <TextInput
-                label='Status'
-                type='number'
-                name='status'
-                value={formik.values.status?.toString() || ''}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  formik.setFieldValue('status', parseInt(value) || 0);
-                }}
-                onBlur={formik.handleBlur}
-                isError={formik.touched.status && Boolean(formik.errors.status)}
-                errorMessage={formik.errors.status as string}
-                readOnly={type === 'detail'}
-                placeholder='Masukkan status (0-3)'
-              />
             </div>
           </Card>
 
@@ -710,7 +611,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <Icon icon="material-symbols:info-outline" width={16} height={16} />
                       </span>
                   </th>
-                  <th>Catatan</th>
                   {type !== 'detail' && <th>Action</th>}
                 </tr>
                 </thead>
@@ -823,19 +723,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         }}
                       />
                     </td>
-                    <td>
-                      <TextInput
-                        name={`body_weights.${idx}.notes`}
-                        value={bw.notes || ''}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        placeholder='Catatan...'
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-32',
-                        }}
-                      />
-                    </td>
                     {type !== 'detail' && (
                       <td>
                         <div className='flex justify-center'>
@@ -928,8 +815,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <span className='text-error'>*</span>
                       </span>
                   </th>
-                  <th>Penambahan</th>
-                  <th>Pengurangan</th>
                   <th>Jumlah Pakai</th>
                   <th>Catatan</th>
                   {type !== 'detail' && <th>Action</th>}
@@ -998,59 +883,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         isSearchable
                       />
                     </td>
-                    <td>
-                      <NumberInput
-                        name={`stocks.${idx}.increase`}
-                        value={stock.increase || 0}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        isError={
-                          isRepeaterInputError('stocks', 'increase', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('stocks', 'increase', idx)
-                            .errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                        placeholder='Penambahan'
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        name={`stocks.${idx}.decrease`}
-                        value={stock.decrease || 0}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        isError={
-                          isRepeaterInputError('stocks', 'decrease', idx)
-                            .isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError('stocks', 'decrease', idx)
-                            .errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                        placeholder='Pengurangan'
-                      />
-                    </td>
-                    <td>
+                      <td>
                       <NumberInput
                         name={`stocks.${idx}.usage_amount`}
                         value={stock.usage_amount || 0}
@@ -1173,23 +1006,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       />
                     </th>
                   )}
-                  <th>
-                    Product Warehouse ID
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
-                  </th>
                   <th>
                     Kondisi
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
-                        <span className='text-error'>*</span>
-                      </span>
                   </th>
                   <th>
                     Total
@@ -1198,9 +1016,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       data-tip='required'
                     >
                         <span className='text-error'>*</span>
-                      </span>
+                    </span>
                   </th>
-                  <th>Catatan</th>
                   {type !== 'detail' && <th>Action</th>}
                 </tr>
                 </thead>
@@ -1232,56 +1049,32 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       </td>
                     )}
                     <td>
-                      <TextInput
-                        required
-                        name={`depletions.${idx}.product_warehouse_id`}
-                        type='number'
-                        value={
-                          depletion.product_warehouse_id?.toString() || ''
-                        }
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        isError={
-                          isRepeaterInputError(
-                            'depletions',
-                            'product_warehouse_id',
-                            idx
-                          ).isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError(
-                            'depletions',
-                            'product_warehouse_id',
-                            idx
-                          ).errorMessage
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-32',
+                      <SelectInput
+                        value={RECORDING_FLAG_OPTIONS.find(
+                          (option) => option.value === depletion.notes
+                        ) || null}
+                        onChange={(selectedOption) => {
+                          const option = selectedOption as OptionType | null;
+                          formik.setFieldValue(
+                            `depletions.${idx}.notes`,
+                            option?.value || ''
+                          );
                         }}
-                        placeholder='Product Warehouse ID'
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        required
-                        name={`depletions.${idx}.condition`}
-                        value={depletion.condition || ''}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
+                        options={RECORDING_FLAG_OPTIONS}
+                        placeholder='Pilih Kondisi'
                         isError={
-                          isRepeaterInputError('depletions', 'condition', idx)
+                          isRepeaterInputError('depletions', 'notes', idx)
                             .isError
                         }
                         errorMessage={
-                          isRepeaterInputError('depletions', 'condition', idx)
+                          isRepeaterInputError('depletions', 'notes', idx)
                             .errorMessage
                         }
-                        readOnly={type === 'detail'}
+                        isDisabled={type === 'detail'}
                         className={{
                           wrapper: 'w-full min-w-32',
                         }}
-                        placeholder='Kondisi (MATI/SAKIT/HILANG)'
+                        isSearchable={false}
                       />
                     </td>
                     <td>
@@ -1311,19 +1104,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         placeholder='Total'
                       />
                     </td>
-                    <td>
-                      <TextInput
-                        name={`depletions.${idx}.notes`}
-                        value={depletion.notes || ''}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        placeholder='Catatan...'
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-32',
-                        }}
-                      />
-                    </td>
                     {type !== 'detail' && (
                       <td>
                         <div className='flex justify-center'>
diff --git a/src/types/api/production/recording.d.ts b/src/types/api/production/recording.d.ts
index f276562a..dcbbeed6 100644
--- a/src/types/api/production/recording.d.ts
+++ b/src/types/api/production/recording.d.ts
@@ -27,26 +27,19 @@ export type Recording = BaseMetadata & BaseRecording;
 
 export type CreateRecordingPayload = {
   project_flock_kandang_id: number;
-  record_datetime: string;
-  status?: number;
-  ontime?: boolean;
-  body_weights?: {
+  body_weights: {
     weight: number;
     qty: number;
-    notes?: string;
   }[];
   stocks?: {
     product_warehouse_id: number;
-    increase?: number;
-    decrease?: number;
-    usage_amount?: number;
-    notes?: string;
+    usage_amount: number;
+    notes: string;
   }[];
   depletions?: {
-    product_warehouse_id: number;
-    condition: string;
+    product_warehouse_id?: number;
     total: number;
-    notes?: string;
+    notes: string;
   }[];
 };
 

From a9f0696b38cd4013f1fb6aa8cb6a86e2e9145c75 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 09:50:12 +0700
Subject: [PATCH 46/92] refactor(FE-114): auto-populate notes with product name
 and enhance tooltip visibility in RecordingForm

---
 .../recording/form/RecordingForm.tsx          | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 3b98ae3a..15f7fcdf 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -815,8 +815,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <span className='text-error'>*</span>
                       </span>
                   </th>
-                  <th>Jumlah Pakai</th>
-                  <th>Catatan</th>
+                  <th>Jumlah Pakai
+                    <span
+                      className="tooltip tooltip-error tooltip-bottom z-[9999]"
+                      data-tip="required"
+                    >
+                        <span className="text-error">*</span>
+                      </span>
+                  </th>
                   {type !== 'detail' && <th>Action</th>}
                 </tr>
                 </thead>
@@ -859,6 +865,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             `stocks.${idx}.product_warehouse_id`,
                             option?.value || 0
                           );
+                          // Auto-populate notes with product name by finding it in stockProducts data
+                          if (option?.value && isResponseSuccess(stockProducts)) {
+                            const selectedProduct = stockProducts.data.find(
+                              (product) => product.id === option.value
+                            );
+                            if (selectedProduct) {
+                              formik.setFieldValue(
+                                `stocks.${idx}.notes`,
+                                selectedProduct.product.name
+                              );
+                            }
+                          }
                         }}
                         options={unifiedStockProducts}
                         placeholder='Pilih Produk'
@@ -909,20 +927,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         placeholder='Jumlah Pakai'
                       />
                     </td>
-                    <td>
-                      <TextInput
-                        name={`stocks.${idx}.notes`}
-                        value={stock.notes || ''}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        placeholder='Catatan...'
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-32',
-                        }}
-                      />
-                    </td>
-                    {type !== 'detail' && (
+                      {type !== 'detail' && (
                       <td>
                         <div className='flex justify-center'>
                           <Button
@@ -1008,12 +1013,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   )}
                   <th>
                     Kondisi
+                    <span
+                      className="tooltip tooltip-error tooltip-bottom z-[9999]"
+                      data-tip="required"
+                    >
+                        <span className="text-error">*</span>
+                      </span>
                   </th>
                   <th>
                     Total
                     <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
+                      className="tooltip tooltip-error tooltip-bottom z-[9999]"
+                      data-tip="required"
                     >
                         <span className='text-error'>*</span>
                     </span>

From ca5b2365654fd6d9c93722c4e0a035b65b6a989d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 10:00:35 +0700
Subject: [PATCH 47/92] refactor(FE-114): enforce required usage amount in
 RecordingForm validation

---
 .../pages/production/recording/form/RecordingForm.schema.ts     | 2 +-
 .../pages/production/recording/form/RecordingForm.tsx           | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
index 597a24e1..b00e9363 100644
--- a/src/components/pages/production/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/production/recording/form/RecordingForm.schema.ts
@@ -48,7 +48,7 @@ export const RecordingFormSchema = Yup.object({
           .min(1, 'Produk wajib diisi!')
           .typeError('Produk harus berupa angka!'),
         usage_amount: Yup.number()
-          .optional()
+          .required('Jumlah penggunaan wajib diisi!')
           .min(0, 'Jumlah penggunaan tidak boleh negatif!')
           .typeError('Jumlah penggunaan harus berupa angka!'),
         notes: Yup.string().optional(),
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 15f7fcdf..e5a2531c 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -903,6 +903,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     </td>
                       <td>
                       <NumberInput
+                        required
                         name={`stocks.${idx}.usage_amount`}
                         value={stock.usage_amount || 0}
                         onChange={formik.handleChange}

From 41e6848d7522c5e590e80b501840185fe6203d68 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 10:08:38 +0700
Subject: [PATCH 48/92] refactor(FE-114): remove optional product_warehouse_id
 validation from RecordingForm schema

---
 .../pages/production/recording/form/RecordingForm.schema.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
index b00e9363..59afbd61 100644
--- a/src/components/pages/production/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/production/recording/form/RecordingForm.schema.ts
@@ -59,10 +59,6 @@ export const RecordingFormSchema = Yup.object({
   depletions: Yup.array()
     .of(
       Yup.object({
-        product_warehouse_id: Yup.number()
-          .optional()
-          .min(1, 'Produk wajib diisi!')
-          .typeError('Produk harus berupa angka!'),
         total: Yup.number()
           .required('Jumlah depletions wajib diisi!')
           .min(1, 'Jumlah depletions minimal 1!')
@@ -110,7 +106,7 @@ export const getRecordingFormInitialValues = (
   ) ?? [
     {
       weight: 0,
-      qty: 1,
+      qty: 0,
       average_weight: 0,
     },
   ],

From 9cbc703a636b0d3e5a9b353d1c974b33323a8669 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 10:18:56 +0700
Subject: [PATCH 49/92] feat(FE-114): integrate row selection functionality in
 RecordingTable and Table components

---
 src/components/Table.tsx                      | 185 ++++++++++--------
 .../production/recording/RecordingTable.tsx   |  82 +++-----
 2 files changed, 131 insertions(+), 136 deletions(-)

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index cfd77df6..9f1ef6e5 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -48,6 +48,8 @@ export interface TableProps<TData extends object> {
   sorting?: SortingState;
   setSorting?: OnChangeFn<SortingState>;
   manualSorting?: boolean;
+  rowSelection?: Record<string, boolean>;
+  setRowSelection?: OnChangeFn<Record<string, boolean>>;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -61,32 +63,34 @@ const emptyContentDefaultValue = (
 );
 
 const Table = <TData extends object>({
-  data = [],
-  columns = [],
-  pageSize = 10,
-  totalItems,
-  page,
-  onPageChange,
-  isLoading = false,
-  fuzzySearchValue,
-  onFuzzySearchValueChange,
-  className = {
-    containerClassName: '',
-    tableWrapperClassName: '',
-    tableClassName: '',
-    tableHeaderClassName: '',
-    headerRowClassName: '',
-    headerColumnClassName: '',
-    tableBodyClassName: '',
-    bodyRowClassName: '',
-    bodyColumnClassName: '',
-    paginationClassName: '',
-  },
-  emptyContent = emptyContentDefaultValue,
-  sorting,
-  setSorting,
-  manualSorting = false,
-}: TableProps<TData>) => {
+                                       data = [],
+                                       columns = [],
+                                       pageSize = 10,
+                                       totalItems,
+                                       page,
+                                       onPageChange,
+                                       isLoading = false,
+                                       fuzzySearchValue,
+                                       onFuzzySearchValueChange,
+                                       className = {
+                                         containerClassName: '',
+                                         tableWrapperClassName: '',
+                                         tableClassName: '',
+                                         tableHeaderClassName: '',
+                                         headerRowClassName: '',
+                                         headerColumnClassName: '',
+                                         tableBodyClassName: '',
+                                         bodyRowClassName: '',
+                                         bodyColumnClassName: '',
+                                         paginationClassName: '',
+                                       },
+                                       emptyContent = emptyContentDefaultValue,
+                                       sorting,
+                                       setSorting,
+                                       manualSorting = false,
+                                       rowSelection,
+                                       setRowSelection,
+                                     }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
     page !== undefined &&
@@ -137,6 +141,15 @@ const Table = <TData extends object>({
     };
   }
 
+  if (rowSelection && setRowSelection) {
+    tableOptions.onRowSelectionChange = setRowSelection;
+    tableOptions.state = {
+      ...tableOptions.state,
+      rowSelection,
+    };
+    tableOptions.getRowId = (row) => (row as { id: string }).id;
+  }
+
   const table = useReactTable(tableOptions);
   const { setPageSize } = table;
 
@@ -175,72 +188,72 @@ const Table = <TData extends object>({
       <div className={className.tableWrapperClassName}>
         <table className={className.tableClassName}>
           <thead className={className.tableHeaderClassName}>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className={className.headerRowClassName}>
-                {headerGroup.headers.map((header) => (
-                  <th
-                    key={header.id}
-                    colSpan={header.colSpan}
-                    onClick={header.column.getToggleSortingHandler()}
-                    className={cn(
-                      header.column.getCanSort()
-                        ? 'cursor-pointer select-none'
-                        : '',
-                      className.headerColumnClassName
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id} className={className.headerRowClassName}>
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  onClick={header.column.getToggleSortingHandler()}
+                  className={cn(
+                    header.column.getCanSort()
+                      ? 'cursor-pointer select-none'
+                      : '',
+                    className.headerColumnClassName
+                  )}
+                >
+                  <div className='flex items-center gap-1'>
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
                     )}
-                  >
-                    <div className='flex items-center gap-1'>
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
 
-                      {header.column.getCanSort() && (
-                        <div className='flex items-center'>
-                          <Icon
-                            icon='lucide:arrow-up'
-                            width={12}
-                            height={12}
-                            className={cn(
-                              'transition-all ease-in-out duration-200',
-                              header.column.getIsSorted() === 'asc'
-                                ? 'text-black'
-                                : 'text-black/30'
-                            )}
-                          />
-                          <Icon
-                            icon='lucide:arrow-down'
-                            width={12}
-                            height={12}
-                            className={cn(
-                              'transition-all ease-in-out duration-200',
-                              header.column.getIsSorted() === 'desc'
-                                ? 'text-black'
-                                : 'text-black/30'
-                            )}
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </th>
-                ))}
-              </tr>
-            ))}
+                    {header.column.getCanSort() && (
+                      <div className='flex items-center'>
+                        <Icon
+                          icon='lucide:arrow-up'
+                          width={12}
+                          height={12}
+                          className={cn(
+                            'transition-all ease-in-out duration-200',
+                            header.column.getIsSorted() === 'asc'
+                              ? 'text-black'
+                              : 'text-black/30'
+                          )}
+                        />
+                        <Icon
+                          icon='lucide:arrow-down'
+                          width={12}
+                          height={12}
+                          className={cn(
+                            'transition-all ease-in-out duration-200',
+                            header.column.getIsSorted() === 'desc'
+                              ? 'text-black'
+                              : 'text-black/30'
+                          )}
+                        />
+                      </div>
+                    )}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
           </thead>
 
           <tbody className={className.tableBodyClassName}>
-            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id} className={className.bodyRowClassName}>
-                {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id} className={className.bodyColumnClassName}>
-                    {!isLoading &&
-                      flexRender(cell.column.columnDef.cell, cell.getContext())}
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id} className={className.bodyRowClassName}>
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id} className={className.bodyColumnClassName}>
+                  {!isLoading &&
+                    flexRender(cell.column.columnDef.cell, cell.getContext())}
 
-                    {isLoading && <div className='skeleton w-full h-4' />}
-                  </td>
-                ))}
-              </tr>
-            ))}
+                  {isLoading && <div className='skeleton w-full h-4' />}
+                </td>
+              ))}
+            </tr>
+          ))}
           </tbody>
         </table>
       </div>
diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index b0f95460..744ee6d8 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -9,6 +9,7 @@ import Button from '@/components/Button';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { OptionType } from '@/components/input/SelectInput';
 import { ROWS_OPTIONS } from '@/config/constant';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import Table from '@/components/Table';
@@ -117,7 +118,7 @@ const RecordingTable = () => {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedRecordings, setSelectedRecordings] = useState<number[]>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const [, setSelectedRecording] = useState<RecordingWithRelations | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
@@ -160,28 +161,24 @@ const RecordingTable = () => {
     return filteredData.slice(start, start + pageSize);
   }, [page, pageSize, search]);
 
+  const selectedRowIds = Object.keys(rowSelection).map((item) => parseInt(item));
+
   const bulkApproveHandler = async () => {
     setIsBulkApproveLoading(true);
-    console.log(
-      'Approved recordings:',
-      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
-    );
+    console.log('Approved recordings:', selectedRowIds);
     setTimeout(() => {
       setIsBulkApproveLoading(false);
-      setSelectedRecordings([]);
+      setRowSelection({});
       bulkApproveModal.closeModal();
     }, 1000);
   };
 
   const bulkRejectHandler = async () => {
     setIsBulkRejectLoading(true);
-    console.log(
-      'Rejected recordings:',
-      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
-    );
+    console.log('Rejected recordings:', selectedRowIds);
     setTimeout(() => {
       setIsBulkRejectLoading(false);
-      setSelectedRecordings([]);
+      setRowSelection({});
       bulkRejectModal.closeModal();
     }, 1000);
   };
@@ -217,7 +214,7 @@ const RecordingTable = () => {
 
       {/* Bulk action buttons */}
       <div className={'flex justify-end items-center'}>
-        {selectedRecordings.length > 0 && (
+        {selectedRowIds.length > 0 && (
           <div className='flex gap-2 mb-4'>
             <Button
               type='button'
@@ -230,7 +227,7 @@ const RecordingTable = () => {
                 width={20}
                 height={20}
               />
-              Approve ({selectedRecordings.length})
+              Approve ({selectedRowIds.length})
             </Button>
             <Button
               type='button'
@@ -243,7 +240,7 @@ const RecordingTable = () => {
                 width={20}
                 height={20}
               />
-              Reject ({selectedRecordings.length})
+              Reject ({selectedRowIds.length})
             </Button>
           </div>
         )}
@@ -251,7 +248,7 @@ const RecordingTable = () => {
         <ConfirmationModal
           ref={bulkApproveModal.ref}
           type='success'
-          text={`Apakah anda yakin ingin menyetujui ${selectedRecordings.length} data Recording yang dipilih?`}
+          text={`Apakah anda yakin ingin menyetujui ${selectedRowIds.length} data Recording yang dipilih?`}
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -266,7 +263,7 @@ const RecordingTable = () => {
         <ConfirmationModal
           ref={bulkRejectModal.ref}
           type='error'
-          text={`Apakah anda yakin ingin menolak ${selectedRecordings.length} data Recording yang dipilih?`}
+          text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Recording yang dipilih?`}
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -284,43 +281,26 @@ const RecordingTable = () => {
         columns={[
           {
             id: 'select',
-            accessorKey: 'id',
             header: ({ table }) => (
-              <input
-                type='checkbox'
-                className='checkbox'
-                checked={
-                  table.getRowModel().rows.length > 0 &&
-                  table
-                    .getRowModel()
-                    .rows.every((row) => selectedRecordings.includes(row.index))
-                }
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSelectedRecordings(
-                      table.getRowModel().rows.map((row) => row.index)
-                    );
-                  } else {
-                    setSelectedRecordings([]);
-                  }
-                }}
-              />
+              <div className='w-full flex flex-row justify-center'>
+                <CheckboxInput
+                  name='allRow'
+                  checked={table.getIsAllRowsSelected()}
+                  indeterminate={table.getIsSomeRowsSelected()}
+                  onChange={table.getToggleAllRowsSelectedHandler()}
+                />
+              </div>
             ),
             cell: ({ row }) => (
-              <input
-                type='checkbox'
-                className='checkbox'
-                checked={selectedRecordings.includes(row.index)}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSelectedRecordings([...selectedRecordings, row.index]);
-                  } else {
-                    setSelectedRecordings(
-                      selectedRecordings.filter((i) => i !== row.index)
-                    );
-                  }
-                }}
-              />
+              <div>
+                <CheckboxInput
+                  name='row'
+                  checked={row.getIsSelected()}
+                  disabled={!row.getCanSelect()}
+                  indeterminate={row.getIsSomeSelected()}
+                  onChange={row.getToggleSelectedHandler()}
+                />
+              </div>
             ),
           },
           {
@@ -403,6 +383,8 @@ const RecordingTable = () => {
         isLoading={false}
         sorting={sorting}
         setSorting={setSorting}
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
         className={{
           containerClassName: cn({
             'mb-20': paginatedData.length === 0,

From adc995dbe7dd19cdc4dcda9af19de3c30d063285 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 11:00:14 +0700
Subject: [PATCH 50/92] feat(US-114): enhance auto-calculation logic in
 RecordingForm to handle manual edits

---
 .../recording/form/RecordingForm.tsx          | 56 +++++++++++++++----
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index e5a2531c..10d3aa30 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -45,6 +45,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   // Track which average weight field is being edited to prevent auto-calculation override
   const [editingAverageIndex, setEditingAverageIndex] = useState<number | null>(null);
 
+  // Track which rows have been manually edited to prevent auto-calculation override
+  const [manuallyEditedRows, setManuallyEditedRows] = useState<Set<number>>(new Set());
+
   // State for Location search and selection
   const [locationSearchValue, setLocationSearchValue] = useState('');
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(null);
@@ -223,10 +226,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   // Auto-calculate average weight when weight or qty changes (but not when editing average weight manually)
   useEffect(() => {
+    // Only run auto-calculation if no field is being edited
     if (formik.values.body_weights && editingAverageIndex === null) {
       const updatedBodyWeights = formik.values.body_weights.map((weight, idx) => {
-        // Skip auto-calculation for the field being manually edited
-        if (idx === editingAverageIndex) {
+        // Skip the field that's being edited or has been manually edited
+        if (idx === editingAverageIndex || manuallyEditedRows.has(idx)) {
           return weight;
         }
 
@@ -234,7 +238,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           ...weight,
           average_weight:
             weight.qty > 0 && weight.weight > 0
-              ? Math.round(weight.weight / weight.qty)
+              ? parseFloat((weight.weight / weight.qty).toFixed(2))
               : 0,
         };
       });
@@ -243,11 +247,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       const hasChanges = updatedBodyWeights.some(
         (updated, idx) =>
           idx !== editingAverageIndex && // Skip the field being edited
+          !manuallyEditedRows.has(idx) && // Skip manually edited rows
           updated.average_weight !==
           (formik.values.body_weights[idx]?.average_weight || 0)
       );
 
       if (hasChanges) {
+        // Use false to prevent triggering validation and other side effects
         formik.setFieldValue('body_weights', updatedBodyWeights, false);
       }
     }
@@ -255,6 +261,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.values.body_weights?.map((w) => w.weight),
     formik.values.body_weights?.map((w) => w.qty),
     editingAverageIndex, // Include editing index in dependencies
+    manuallyEditedRows, // Include manually edited rows in dependencies
   ]);
 
   // EVENT HANDLERS - Body Weights
@@ -274,11 +281,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const handleWeightChange = (idx: number, value: number) => {
     formik.setFieldValue(`body_weights.${idx}.weight`, value);
 
+    // Reset manual edit flag when weight changes (user wants auto-calculation)
+    setManuallyEditedRows(prev => {
+      const newSet = new Set(prev);
+      newSet.delete(idx);
+      return newSet;
+    });
+
     const currentWeight = formik.values.body_weights?.[idx];
     if (currentWeight) {
       const qty = currentWeight.qty;
       if (qty > 0 && value > 0) {
-        const averageWeight = Math.round(value / qty);
+        const averageWeight = parseFloat((value / qty).toFixed(2));
         formik.setFieldValue(`body_weights.${idx}.average_weight`, averageWeight);
       } else {
         formik.setFieldValue(`body_weights.${idx}.average_weight`, 0);
@@ -290,11 +304,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const handleQtyChange = (idx: number, value: number) => {
     formik.setFieldValue(`body_weights.${idx}.qty`, value);
 
+    // Reset manual edit flag when qty changes (user wants auto-calculation)
+    setManuallyEditedRows(prev => {
+      const newSet = new Set(prev);
+      newSet.delete(idx);
+      return newSet;
+    });
+
     const currentWeight = formik.values.body_weights?.[idx];
     if (currentWeight) {
       const weight = currentWeight.weight;
       if (value > 0 && weight > 0) {
-        const averageWeight = Math.round(weight / value);
+        const averageWeight = parseFloat((weight / value).toFixed(2));
         formik.setFieldValue(`body_weights.${idx}.average_weight`, averageWeight);
       } else {
         formik.setFieldValue(`body_weights.${idx}.average_weight`, 0);
@@ -320,12 +341,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   // Create wrapper handlers that match NumberInput's onChange signature
   const handleWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+    // Parse the value more carefully to handle decimal numbers properly
+    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
+    // Convert comma thousand separator to nothing, but keep decimal point
+    const normalizedValue = rawValue.replace(/,/g, '');
+    const value = parseFloat(normalizedValue) || 0;
     handleWeightChange(idx, value);
   };
 
   const handleQtyChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+    // Parse the value more carefully to handle decimal numbers properly
+    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
+    // Convert comma thousand separator to nothing, but keep decimal point
+    const normalizedValue = rawValue.replace(/,/g, '');
+    const value = parseFloat(normalizedValue) || 0;
     handleQtyChange(idx, value);
   };
 
@@ -333,11 +362,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     // Set focus state to prevent auto-calculation override
     setEditingAverageIndex(idx);
 
-    const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+    // Mark this row as manually edited
+    setManuallyEditedRows(prev => new Set(prev).add(idx));
+
+    // Parse the value more carefully to handle decimal numbers properly
+    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
+    // Convert comma thousand separator to nothing, but keep decimal point
+    const normalizedValue = rawValue.replace(/,/g, '');
+    const value = parseFloat(normalizedValue) || 0;
     handleAverageWeightChange(idx, value);
   };
 
-  const handleAverageWeightBlur = () => {
+  const handleAverageWeightBlur = (idx: number) => {
     // Clear focus state when user leaves the field to re-enable auto-calculation
     setEditingAverageIndex(null);
   };
@@ -700,7 +736,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={bw.average_weight || 0}
                         onChange={handleAverageWeightChangeWrapper(idx)}
                         onBlur={(e) => {
-                          handleAverageWeightBlur();
+                          handleAverageWeightBlur(idx);
                           formik.handleBlur(e);
                         }}
                         maskType='weight'

From b148a09e843b0d8a585975ad896e88f881ef6d92 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 11:27:32 +0700
Subject: [PATCH 51/92] feat(US-137): update API endpoints and default values
 in RecordingForm for production environment

---
 .../pages/production/recording/form/RecordingForm.tsx       | 1 +
 .../production/recording/form/useRecordingFormHandlers.ts   | 6 +++---
 src/services/api/production.ts                              | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 10d3aa30..e9dfb39f 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -164,6 +164,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           notes: stock.notes || '',
         })),
         depletions: (values.depletions ?? []).map((depletion) => ({
+          product_warehouse_id: 1,
           total:
             typeof depletion.total === 'number'
               ? depletion.total
diff --git a/src/components/pages/production/recording/form/useRecordingFormHandlers.ts b/src/components/pages/production/recording/form/useRecordingFormHandlers.ts
index 334b791d..58893ce1 100644
--- a/src/components/pages/production/recording/form/useRecordingFormHandlers.ts
+++ b/src/components/pages/production/recording/form/useRecordingFormHandlers.ts
@@ -24,7 +24,7 @@ export const useRecordingFormHandlers = (initialValuesId?: number) => {
         return;
       }
       toast.success(res?.message as string);
-      router.push('/flock/recording');
+      router.push('/production/recording');
     },
     [router]
   );
@@ -38,7 +38,7 @@ export const useRecordingFormHandlers = (initialValuesId?: number) => {
       }
       toast.success(res?.message as string);
       router.refresh();
-      router.push('/flock/recording');
+      router.push('/production/recording');
     },
     [router]
   );
@@ -55,7 +55,7 @@ export const useRecordingFormHandlers = (initialValuesId?: number) => {
     deleteModal.closeModal();
     toast.success('Successfully delete Recording!');
     setIsDeleteLoading(false);
-    router.push('/flock/recording');
+    router.push('/production/recording');
   }, [deleteModal, initialValuesId, router]);
 
   return {
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index 6d33af07..5c2754c8 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -24,7 +24,7 @@ export const RecordingApi = new BaseApiService<
   Recording,
   CreateRecordingPayload,
   UpdateRecordingPayload
->('/flock/recordings');
+>('/production/recordings');
 export const ChickinApi = new BaseApiService<
   Chickin,
   CreateChickinPayload,

From 12a69b7c6cf0e9293c3983424be7ffcf839e0df4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 11:35:11 +0700
Subject: [PATCH 52/92] feat(FE-137): integrate SWR for fetching recordings and
 update table to display API data

---
 .../production/recording/RecordingTable.tsx   | 97 ++++++++-----------
 1 file changed, 38 insertions(+), 59 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 744ee6d8..4828cdd8 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useMemo, useState } from 'react';
+import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { SortingState } from '@tanstack/react-table';
 import { cn } from '@/lib/helper';
@@ -18,52 +19,21 @@ import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
 import { type ProjectFlock } from '@/types/api/production/project-flock';
+import { RecordingApi } from '@/services/api/production';
+import { type BaseApiResponse } from '@/types/api/api-general';
 
 // Extended type that includes related data
 type RecordingWithRelations = Recording & {
   project_flock?: ProjectFlock;
 };
 
-const dummyRecordings: RecordingWithRelations[] = [
-  {
-    id: 1,
-    project_flock_kandang_id: 1,
-    record_date: '2024-01-01',
-    ontime: true,
-    day: 10,
-    status: 1,
-    total_depletion: 10,
-    cum_depletion_rate: 1.0,
-    daily_gain: 50,
-    avg_daily_gain: 5.0,
-    cum_intake: 200,
-    fcr_value: 1.5,
-    total_chick: 1000,
-    daily_depletion_rate: 0.5,
-    cum_depletion: 20,
-    record_datetime: '2024-01-01T08:00:00Z',
-    created_at: '2024-01-01',
-    updated_at: '2024-01-01',
-    created_user: {
-      id: 1,
-      id_user: 1,
-      email: 'admin@example.com',
-      name: 'Admin',
-      image: null,
-      npk: '0001',
-      created_at: '2024-01-01',
-      updated_at: '2024-01-01',
-    },
-  },
-];
-
 const RowOptionsMenu = ({
   type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
   type: 'dropdown' | 'collapse';
-  props: CellContext<RecordingWithRelations, unknown>;
+  props: CellContext<Recording, unknown>;
   deleteClickHandler: () => void;
 }) => {
   return (
@@ -119,7 +89,7 @@ const RecordingTable = () => {
   const [pageSize, setPageSize] = useState(10);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
-  const [, setSelectedRecording] = useState<RecordingWithRelations | undefined>(undefined);
+  const [, setSelectedRecording] = useState<Recording | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
   const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
@@ -128,6 +98,16 @@ const RecordingTable = () => {
   const bulkApproveModal = useModal();
   const bulkRejectModal = useModal();
 
+  // Fetch recordings using SWR
+  const {
+    data: recordings,
+    isLoading,
+    mutate: refreshRecordings,
+  } = useSWR(
+    `${RecordingApi.basePath}?page=${page}&limit=${pageSize}`,
+    RecordingApi.getAllFetcher
+  );
+
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setSearch(e.target.value);
@@ -146,20 +126,18 @@ const RecordingTable = () => {
   );
 
   const paginatedData = useMemo(() => {
-    const filteredData = dummyRecordings.filter(
-      (recording: RecordingWithRelations) => {
-        const projectName = recording.project_flock?.name || '';
-        const locationName = recording.project_flock?.location?.name || '';
-        const coopName = recording.project_flock?.kandangs?.[0]?.name || '';
+    if (!recordings || recordings.status !== 'success') return [];
 
-        return projectName.toLowerCase().includes(search.toLowerCase()) ||
-               locationName.toLowerCase().includes(search.toLowerCase()) ||
-               coopName.toLowerCase().includes(search.toLowerCase());
+    return recordings.data.filter(
+      (recording: Recording) => {
+        // For now, we don't have project_flock relation data in the API response
+        // So we'll filter by basic recording data
+        return recording.project_flock_kandang_id.toString().includes(search.toLowerCase()) ||
+          recording.record_date.includes(search.toLowerCase()) ||
+          recording.created_user.name.toLowerCase().includes(search.toLowerCase());
       }
     );
-    const start = (page - 1) * pageSize;
-    return filteredData.slice(start, start + pageSize);
-  }, [page, pageSize, search]);
+  }, [recordings, search]);
 
   const selectedRowIds = Object.keys(rowSelection).map((item) => parseInt(item));
 
@@ -308,8 +286,8 @@ const RecordingTable = () => {
             cell: (props) => pageSize * (page - 1) + props.row.index + 1,
           },
           {
-            header: 'Flock',
-            cell: (props) => props.row.original.project_flock?.name || '-',
+            header: 'Flock Kandang ID',
+            cell: (props) => props.row.original.project_flock_kandang_id,
           },
           {
             accessorKey: 'record_date',
@@ -318,24 +296,25 @@ const RecordingTable = () => {
               new Date(props.row.original.record_date).toLocaleDateString(),
           },
           {
-            header: 'Lokasi',
-            cell: (props) => props.row.original.project_flock?.location?.name || '-',
+            header: 'Day',
+            cell: (props) => props.row.original.day,
           },
           {
-            header: 'Kandang',
-            cell: (props) => {
-              const coopName = props.row.original.project_flock?.kandangs?.[0]?.name;
-              return coopName || '-';
-            },
+            header: 'Status',
+            cell: (props) => props.row.original.status,
           },
           {
             accessorKey: 'total_depletion',
             header: 'Total Depletion',
             cell: (props) => props.row.original.total_depletion,
           },
+          {
+            header: 'Created By',
+            cell: (props) => props.row.original.created_user.name,
+          },
           {
             header: 'Aksi',
-            cell: (props: CellContext<RecordingWithRelations, unknown>) => {
+            cell: (props: CellContext<Recording, unknown>) => {
               const currentPageSize =
                 props.table.getPaginationRowModel().rows.length;
               const currentPageRows =
@@ -377,10 +356,10 @@ const RecordingTable = () => {
           },
         ]}
         pageSize={pageSize}
-        page={page}
-        totalItems={dummyRecordings.length}
+        page={recordings?.status === 'success' ? recordings.meta?.page : page}
+        totalItems={recordings?.status === 'success' ? recordings.meta?.total_results : 0}
         onPageChange={setPage}
-        isLoading={false}
+        isLoading={isLoading}
         sorting={sorting}
         setSorting={setSorting}
         rowSelection={rowSelection}

From 258324f092845935fc840276e3f04e73217cca3d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 11:36:14 +0700
Subject: [PATCH 53/92] feat(US-137): update RecordingTable to enhance data
 display and add new columns for project details

---
 .../production/recording/RecordingTable.tsx   | 88 ++++++++++++++++---
 1 file changed, 78 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 4828cdd8..d0b3bce9 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -286,31 +286,99 @@ const RecordingTable = () => {
             cell: (props) => pageSize * (page - 1) + props.row.index + 1,
           },
           {
-            header: 'Flock Kandang ID',
-            cell: (props) => props.row.original.project_flock_kandang_id,
+            header: 'ID',
+            cell: (props) => props.row.original.id,
+          },
+          {
+            header: 'Nama Project',
+            cell: (props) => `Project ${props.row.original.project_flock_kandang_id}`,
+          },
+          {
+            header: 'Periode',
+            cell: (props) => props.row.original.day,
+          },
+          {
+            header: 'Umur (hari)',
+            cell: (props) => props.row.original.day,
           },
           {
             accessorKey: 'record_date',
-            header: 'Tanggal Recording',
+            header: 'Waktu Recording',
             cell: (props) =>
               new Date(props.row.original.record_date).toLocaleDateString(),
           },
           {
-            header: 'Day',
-            cell: (props) => props.row.original.day,
+            header: 'Populasi Awal',
+            cell: (props) => props.row.original.total_chick?.toLocaleString() || '-',
           },
           {
-            header: 'Status',
-            cell: (props) => props.row.original.status,
+            header: 'Ekor Panen',
+            cell: (props) => '-',
+          },
+          {
+            header: 'KG Panen',
+            cell: (props) => '-',
+          },
+          {
+            header: 'BW',
+            cell: (props) => props.row.original.avg_daily_gain?.toFixed(2) || '-',
+          },
+          {
+            header: 'Pakan',
+            cell: (props) => props.row.original.cum_intake?.toLocaleString() || '-',
+          },
+          {
+            header: 'FCR',
+            cell: (props) => props.row.original.fcr_value?.toFixed(2) || '-',
+          },
+          {
+            header: 'Deplesi Culling',
+            cell: (props) => '-',
+          },
+          {
+            header: 'Deplesi Mati',
+            cell: (props) => '-',
+          },
+          {
+            header: 'Deplesi Afkir',
+            cell: (props) => '-',
           },
           {
             accessorKey: 'total_depletion',
-            header: 'Total Depletion',
+            header: 'Total Deplesi',
             cell: (props) => props.row.original.total_depletion,
           },
           {
-            header: 'Created By',
-            cell: (props) => props.row.original.created_user.name,
+            header: 'Deplesi (%)',
+            cell: (props) => props.row.original.daily_depletion_rate?.toFixed(2) || '-',
+          },
+          {
+            header: 'Populasi Akhir',
+            cell: (props) => (props.row.original.total_chick - props.row.original.total_depletion)?.toLocaleString() || '-',
+          },
+          {
+            header: 'IP',
+            cell: (props) => '-',
+          },
+          {
+            header: 'Status Recording',
+            cell: (props) => {
+              const status = props.row.original.status;
+              return status === 1 ? 'Menunggu Persetujuan' : 'Disetujui';
+            },
+          },
+          {
+            header: 'Ketepatan Waktu',
+            cell: (props) => props.row.original.ontime ? 'Tepat Waktu' : 'Terlambat',
+          },
+          {
+            header: 'Status Perubahan',
+            cell: (props) => 'Tidak ada perubahan',
+          },
+          {
+            header: 'Tanggal Submit',
+            cell: (props) =>
+              new Date(props.row.original.created_at).toLocaleString(),
           },
           {
             header: 'Aksi',

From c546bd6b3c34d714942c663099c8824fc571a558 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 11:37:25 +0700
Subject: [PATCH 54/92] feat(FE-137): refactor RecordingTable to remove unused
 types and streamline data fetching

---
 .../pages/production/recording/RecordingTable.tsx        | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index d0b3bce9..833f8500 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -18,14 +18,7 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
-import { type ProjectFlock } from '@/types/api/production/project-flock';
 import { RecordingApi } from '@/services/api/production';
-import { type BaseApiResponse } from '@/types/api/api-general';
-
-// Extended type that includes related data
-type RecordingWithRelations = Recording & {
-  project_flock?: ProjectFlock;
-};
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -98,11 +91,9 @@ const RecordingTable = () => {
   const bulkApproveModal = useModal();
   const bulkRejectModal = useModal();
 
-  // Fetch recordings using SWR
   const {
     data: recordings,
     isLoading,
-    mutate: refreshRecordings,
   } = useSWR(
     `${RecordingApi.basePath}?page=${page}&limit=${pageSize}`,
     RecordingApi.getAllFetcher

From 00de4782e765c622c6cbcd3cb3a2adcd108c49a9 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 12:14:47 +0700
Subject: [PATCH 55/92] feat(FE-137): simplify RecordingTable by removing
 unused columns and enhancing data clarity

---
 .../production/recording/RecordingTable.tsx   | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 833f8500..832cdbcd 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -302,14 +302,6 @@ const RecordingTable = () => {
             header: 'Populasi Awal',
             cell: (props) => props.row.original.total_chick?.toLocaleString() || '-',
           },
-          {
-            header: 'Ekor Panen',
-            cell: (props) => '-',
-          },
-          {
-            header: 'KG Panen',
-            cell: (props) => '-',
-          },
           {
             header: 'BW',
             cell: (props) => props.row.original.avg_daily_gain?.toFixed(2) || '-',
@@ -322,18 +314,6 @@ const RecordingTable = () => {
             header: 'FCR',
             cell: (props) => props.row.original.fcr_value?.toFixed(2) || '-',
           },
-          {
-            header: 'Deplesi Culling',
-            cell: (props) => '-',
-          },
-          {
-            header: 'Deplesi Mati',
-            cell: (props) => '-',
-          },
-          {
-            header: 'Deplesi Afkir',
-            cell: (props) => '-',
-          },
           {
             accessorKey: 'total_depletion',
             header: 'Total Deplesi',
@@ -347,10 +327,6 @@ const RecordingTable = () => {
             header: 'Populasi Akhir',
             cell: (props) => (props.row.original.total_chick - props.row.original.total_depletion)?.toLocaleString() || '-',
           },
-          {
-            header: 'IP',
-            cell: (props) => '-',
-          },
           {
             header: 'Status Recording',
             cell: (props) => {

From 0c4997803342718702be5891006410a5cb36f8b4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 12:26:33 +0700
Subject: [PATCH 56/92] feat(FE-114,137): enhance RecordingForm to handle stock
 usage and depletion total changes with improved input handling

---
 .../recording/form/RecordingForm.tsx          | 40 ++++++++++++++-----
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index e9dfb39f..766cfe1d 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -440,6 +440,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   }, [stockProducts, getProjectFlockLocation()]);
 
 
+  // Handle stock usage amount change
+  const handleStockUsageAmountChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
+      formik.setFieldValue(`stocks.${idx}.usage_amount`, value);
+    },
+    [formik]
+  );
+
   // Unified Stock remove handlers
   const removeStock = (idx: number) => {
     const updatedStocks = formik.values.stocks?.filter((_, i) => i !== idx);
@@ -466,6 +475,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('depletions', newDepletions);
   };
 
+  // Handle depletion total change
+  const handleDepletionTotalChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
+      formik.setFieldValue(`depletions.${idx}.total`, value);
+    },
+    [formik]
+  );
+
   const removeDepletion = (idx: number) => {
     const updatedDepletions = formik.values.depletions?.filter(
       (_, i) => i !== idx
@@ -942,14 +960,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <NumberInput
                         required
                         name={`stocks.${idx}.usage_amount`}
-                        value={stock.usage_amount || 0}
-                        onChange={formik.handleChange}
+                        value={stock.usage_amount}
+                        onChange={handleStockUsageAmountChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
                         maskType='number'
                         decimals={0}
                         min={0}
                         thousandSeparator=','
-                        decimalSeparator='.'
+                        decimalSeparator=''
                         isError={
                           isRepeaterInputError('stocks', 'usage_amount', idx)
                             .isError
@@ -1127,17 +1145,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       />
                     </td>
                     <td>
-                      <TextInput
+                      <NumberInput
                         required
                         name={`depletions.${idx}.total`}
-                        type='number'
-                        value={
-                          typeof depletion.total === 'number'
-                            ? depletion.total.toString()
-                            : depletion.total
-                        }
-                        onChange={formik.handleChange}
+                        value={depletion.total}
+                        onChange={handleDepletionTotalChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
+                        maskType='number'
+                        decimals={0}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator=''
                         isError={
                           isRepeaterInputError('depletions', 'total', idx)
                             .isError

From d2c485fdf0304194796b44694ad6bd0d5c144c66 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 12:45:07 +0700
Subject: [PATCH 57/92] feat(FE-114,137): implement stock validation in
 RecordingForm to manage usage limits and enhance user feedback

---
 .../recording/form/RecordingForm.tsx          | 89 +++++++++++++++++--
 1 file changed, 84 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 766cfe1d..f974bdcd 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -6,7 +6,6 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 
-import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
@@ -265,6 +264,79 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     manuallyEditedRows, // Include manually edited rows in dependencies
   ]);
 
+  // Stock validation functions - Following MovementForm pattern
+  const getAvailableStock = useCallback(
+    (productWarehouseId: number) => {
+      if (type === 'detail') return 0;
+
+      if (!isResponseSuccess(stockProducts)) return 0;
+
+      const productWarehouse = stockProducts.data.find(
+        (pw) => pw.id === productWarehouseId
+      );
+
+      return productWarehouse?.quantity ?? 0;
+    },
+    [stockProducts, type]
+  );
+
+  const getStockUsageError = useCallback(
+    (stockIdx: number) => {
+      if (type === 'detail') return null;
+
+      const stock = formik.values.stocks?.[stockIdx];
+      if (!stock || !stock.product_warehouse_id) return null;
+
+      const availableStock = getAvailableStock(stock.product_warehouse_id);
+      const requestedUsage = Number(stock.usage_amount) || 0;
+
+      if (requestedUsage > availableStock) {
+        return `Jumlah pakai melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('id-ID')}`;
+      }
+
+      return null;
+    },
+    [formik.values.stocks, getAvailableStock, type]
+  );
+
+  const getStockUsageAdornment = useCallback(
+    (stockIdx: number) => {
+      if (type === 'detail') return null;
+
+      const stock = formik.values.stocks?.[stockIdx];
+      if (!stock || !stock.product_warehouse_id) return null;
+
+      const availableStock = getAvailableStock(stock.product_warehouse_id);
+      const requestedUsage = Number(stock.usage_amount) || 0;
+      const remainingStock = availableStock - requestedUsage;
+
+      if (requestedUsage > 0) {
+        return (
+          <span className='text-sm text-gray-600 whitespace-nowrap'>
+            (sisa: {remainingStock.toLocaleString('id-ID')})
+          </span>
+        );
+      }
+
+      return (
+        <span className='text-sm text-gray-600 whitespace-nowrap'>
+          (tersedia: {availableStock.toLocaleString('id-ID')})
+        </span>
+      );
+    },
+    [formik.values.stocks, getAvailableStock, type]
+  );
+
+  const hasExceededStock = useMemo(() => {
+    if (type === 'detail') return false;
+
+    return (
+      formik.values.stocks?.some((stock, idx) => {
+        return getStockUsageError(idx) !== null;
+      }) ?? false
+    );
+  }, [formik.values.stocks, getStockUsageError, type]);
+
   // EVENT HANDLERS - Body Weights
   const addBodyWeight = () => {
     const newBodyWeights = [
@@ -440,7 +512,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   }, [stockProducts, getProjectFlockLocation()]);
 
 
-  // Handle stock usage amount change
+  // Handle stock usage amount change - simplified following MovementForm pattern
   const handleStockUsageAmountChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
       const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
@@ -920,6 +992,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             `stocks.${idx}.product_warehouse_id`,
                             option?.value || 0
                           );
+
                           // Auto-populate notes with product name by finding it in stockProducts data
                           if (option?.value && isResponseSuccess(stockProducts)) {
                             const selectedProduct = stockProducts.data.find(
@@ -957,6 +1030,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       />
                     </td>
                       <td>
+                      <div className="flex flex-col gap-1">
                       <NumberInput
                         required
                         name={`stocks.${idx}.usage_amount`}
@@ -970,18 +1044,22 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         decimalSeparator=''
                         isError={
                           isRepeaterInputError('stocks', 'usage_amount', idx)
-                            .isError
+                            .isError || Boolean(getStockUsageError(idx))
                         }
                         errorMessage={
                           isRepeaterInputError('stocks', 'usage_amount', idx)
-                            .errorMessage
+                            .errorMessage ||
+                          getStockUsageError(idx) ||
+                          undefined
                         }
                         readOnly={type === 'detail'}
                         className={{
                           wrapper: 'w-full min-w-24',
                         }}
-                        placeholder='Jumlah Pakai'
+                        placeholder="Jumlah Pakai"
                       />
+                      {type !== 'detail' && getStockUsageAdornment(idx)}
+                    </div>
                     </td>
                       {type !== 'detail' && (
                       <td>
@@ -1226,6 +1304,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 : undefined
             }
             onDelete={deleteRecordingClickHandler}
+            disableSubmit={hasExceededStock}
           />
           {recordingFormErrorMessage && (
             <div role='alert' className='alert alert-error'>

From 7a6a35568f486d1aa7bb04e8894ce2b45bfb75a8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 13:32:46 +0700
Subject: [PATCH 58/92] feat(FE-137): enhance RecordingTable to support
 recording deletion with user feedback and refresh functionality

---
 .../production/recording/RecordingTable.tsx   | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 832cdbcd..2c5ecdc6 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -19,6 +19,7 @@ import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
 import { RecordingApi } from '@/services/api/production';
+import toast from 'react-hot-toast';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -82,7 +83,7 @@ const RecordingTable = () => {
   const [pageSize, setPageSize] = useState(10);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
-  const [, setSelectedRecording] = useState<Recording | undefined>(undefined);
+  const [selectedRecording, setSelectedRecording] = useState<Recording | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
   const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
@@ -94,6 +95,7 @@ const RecordingTable = () => {
   const {
     data: recordings,
     isLoading,
+    mutate: refreshRecordings,
   } = useSWR(
     `${RecordingApi.basePath}?page=${page}&limit=${pageSize}`,
     RecordingApi.getAllFetcher
@@ -154,10 +156,13 @@ const RecordingTable = () => {
 
   const singleDeleteHandler = async () => {
     setIsDeleteLoading(true);
-    setTimeout(() => {
-      setIsDeleteLoading(false);
-      singleDeleteModal.closeModal();
-    }, 1000);
+
+    await RecordingApi.delete(selectedRecording?.id as number);
+    refreshRecordings();
+
+    singleDeleteModal.closeModal();
+    toast.success('Successfully delete Recording!');
+    setIsDeleteLoading(false);
   };
 
   return (
@@ -338,10 +343,6 @@ const RecordingTable = () => {
             header: 'Ketepatan Waktu',
             cell: (props) => props.row.original.ontime ? 'Tepat Waktu' : 'Terlambat',
           },
-          {
-            header: 'Status Perubahan',
-            cell: (props) => 'Tidak ada perubahan',
-          },
           {
             header: 'Tanggal Submit',
             cell: (props) =>
@@ -417,7 +418,7 @@ const RecordingTable = () => {
       <ConfirmationModal
         ref={singleDeleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Recording ini?`}
+        text={`Apakah anda yakin ingin menghapus data Recording ini (ID: ${selectedRecording?.id})?`}
         secondaryButton={{
           text: 'Tidak',
         }}

From 537fc617ff5cb0f935b7ad0adf0c89e25b466acf Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 13:40:27 +0700
Subject: [PATCH 59/92] feat(FE-137): implement bulk approval and rejection
 functionality in RecordingTable with user feedback

---
 .../production/recording/RecordingTable.tsx   | 52 ++++++++++++++++---
 1 file changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 2c5ecdc6..15c891bb 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -18,7 +18,9 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
+import { type BaseApiResponse } from '@/types/api/api-general';
 import { RecordingApi } from '@/services/api/production';
+import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import toast from 'react-hot-toast';
 
 const RowOptionsMenu = ({
@@ -136,22 +138,56 @@ const RecordingTable = () => {
 
   const bulkApproveHandler = async () => {
     setIsBulkApproveLoading(true);
-    console.log('Approved recordings:', selectedRowIds);
-    setTimeout(() => {
-      setIsBulkApproveLoading(false);
+
+    const approveResponse = await RecordingApi.customRequest<
+      BaseApiResponse<Recording[]>
+    >('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'APPROVED',
+        approvable_ids: selectedRowIds,
+        notes: 'Bulk Approved',
+      },
+    });
+
+    if (isResponseSuccess(approveResponse)) {
+      await refreshRecordings();
       setRowSelection({});
       bulkApproveModal.closeModal();
-    }, 1000);
+      toast.success(`Successfully approved ${selectedRowIds.length} recordings!`);
+    }
+    if (isResponseError(approveResponse)) {
+      toast.error(approveResponse?.message as string);
+      bulkApproveModal.closeModal();
+    }
+    setIsBulkApproveLoading(false);
   };
 
   const bulkRejectHandler = async () => {
     setIsBulkRejectLoading(true);
-    console.log('Rejected recordings:', selectedRowIds);
-    setTimeout(() => {
-      setIsBulkRejectLoading(false);
+
+    const rejectResponse = await RecordingApi.customRequest<
+      BaseApiResponse<Recording[]>
+    >('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'REJECTED',
+        approvable_ids: selectedRowIds,
+        notes: 'Bulk Rejected',
+      },
+    });
+
+    if (isResponseSuccess(rejectResponse)) {
+      refreshRecordings();
       setRowSelection({});
       bulkRejectModal.closeModal();
-    }, 1000);
+      toast.success(`Successfully rejected ${selectedRowIds.length} recordings!`);
+    }
+    if (isResponseError(rejectResponse)) {
+      toast.error(rejectResponse?.message as string);
+      bulkRejectModal.closeModal();
+    }
+    setIsBulkRejectLoading(false);
   };
 
   const singleDeleteHandler = async () => {

From d14fa2ed2b11f756e3241f68744bf3b2638c4208 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 13:53:20 +0700
Subject: [PATCH 60/92] feat(FE-137): integrate advanced filtering options in
 RecordingTable with dropdowns for area, location, and kandang

---
 .../production/recording/RecordingTable.tsx   | 291 ++++++++++++++++--
 1 file changed, 269 insertions(+), 22 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 15c891bb..f7cc451c 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -9,6 +9,7 @@ import { useModal } from '@/components/Modal';
 import Button from '@/components/Button';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { OptionType } from '@/components/input/SelectInput';
+import SelectInput from '@/components/input/SelectInput';
 import { ROWS_OPTIONS } from '@/config/constant';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import { TableToolbar } from '@/components/table/TableToolbar';
@@ -20,7 +21,11 @@ import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
 import { type BaseApiResponse } from '@/types/api/api-general';
 import { RecordingApi } from '@/services/api/production';
+import { AreaApi } from '@/services/api/master-data';
+import { LocationApi } from '@/services/api/master-data';
+import { KandangApi } from '@/services/api/master-data';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
 import toast from 'react-hot-toast';
 
 const RowOptionsMenu = ({
@@ -80,9 +85,31 @@ const RowOptionsMenu = ({
 };
 
 const RecordingTable = () => {
-  const [search, setSearch] = useState('');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      areaFilter: '',
+      locationFilter: '',
+      kandangFilter: '',
+      periodFilter: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      search: 'search',
+      areaFilter: 'area_id',
+      locationFilter: 'location_id',
+      kandangFilter: 'kandang_id',
+      periodFilter: 'period',
+    },
+  });
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const [selectedRecording, setSelectedRecording] = useState<Recording | undefined>(undefined);
@@ -94,21 +121,81 @@ const RecordingTable = () => {
   const bulkApproveModal = useModal();
   const bulkRejectModal = useModal();
 
+  // State for dropdown search
+  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
+  const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
+  const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
+
+  const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(null);
+  const [selectedKandang, setSelectedKandang] = useState<OptionType | null>(null);
+
   const {
     data: recordings,
     isLoading,
     mutate: refreshRecordings,
   } = useSWR(
-    `${RecordingApi.basePath}?page=${page}&limit=${pageSize}`,
+    `${RecordingApi.basePath}${getTableFilterQueryString()}`,
     RecordingApi.getAllFetcher
   );
 
+  // Fetch data for dropdowns
+  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
+    search: areaSelectInputValue,
+    limit: '100',
+  }).toString()}`;
+  const {
+    data: areas,
+    isLoading: isLoadingAreas,
+  } = useSWR(areaUrl, AreaApi.getAllFetcher);
+
+  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
+    search: locationSelectInputValue,
+    area_id: selectedArea != null ? selectedArea.value.toString() : '',
+    limit: '100',
+  }).toString()}`;
+  const {
+    data: locations,
+    isLoading: isLoadingLocations,
+  } = useSWR(locationUrl, LocationApi.getAllFetcher);
+
+  const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
+    search: kandangSelectInputValue,
+    location_id:
+      selectedLocation != null ? selectedLocation.value.toString() : '',
+    limit: '100',
+  }).toString()}`;
+  const {
+    data: kandangs,
+    isLoading: isLoadingKandang,
+  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
+
+  // Data to Options Mapping
+  const optionsArea = isResponseSuccess(areas)
+    ? areas?.data.map((area) => ({
+        value: area.id,
+        label: area.name,
+      }))
+    : [];
+  const optionsLocation = isResponseSuccess(locations)
+    ? locations?.data.map((location) => ({
+        value: location.id,
+        label: location.name,
+      }))
+    : [];
+  const optionsKandang = isResponseSuccess(kandangs)
+    ? kandangs?.data.map((kandang) => ({
+        value: kandang.id,
+        label: kandang.name,
+      }))
+    : [];
+
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      setSearch(e.target.value);
+      updateFilter('search', e.target.value);
       setPage(1);
     },
-    []
+    [updateFilter, setPage]
   );
 
   const pageSizeChangeHandler = useCallback(
@@ -117,22 +204,14 @@ const RecordingTable = () => {
       setPageSize(newVal.value as number);
       setPage(1);
     },
-    []
+    [setPageSize, setPage]
   );
 
   const paginatedData = useMemo(() => {
     if (!recordings || recordings.status !== 'success') return [];
 
-    return recordings.data.filter(
-      (recording: Recording) => {
-        // For now, we don't have project_flock relation data in the API response
-        // So we'll filter by basic recording data
-        return recording.project_flock_kandang_id.toString().includes(search.toLowerCase()) ||
-          recording.record_date.includes(search.toLowerCase()) ||
-          recording.created_user.name.toLowerCase().includes(search.toLowerCase());
-      }
-    );
-  }, [recordings, search]);
+    return recordings.data;
+  }, [recordings]);
 
   const selectedRowIds = Object.keys(rowSelection).map((item) => parseInt(item));
 
@@ -210,16 +289,184 @@ const RecordingTable = () => {
             label: 'Tambah Recording',
           }}
           search={{
-            value: search,
+            value: tableFilterState.search,
             onChange: searchChangeHandler,
             placeholder: 'Cari Recording',
           }}
         />
         <TableRowSizeSelector
-          value={pageSize}
+          value={tableFilterState.pageSize}
           onChange={pageSizeChangeHandler}
           options={ROWS_OPTIONS}
         />
+
+        {/* Filter Dropdowns - Desktop */}
+        <div className='hidden sm:grid sm:grid-cols-4 gap-4 mt-4'>
+          <SelectInput
+            label='Area'
+            placeholder='Pilih Area'
+            options={optionsArea}
+            value={selectedArea}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedArea(selectedValue);
+              setSelectedLocation(null);
+              setSelectedKandang(null);
+              updateFilter('areaFilter', selectedValue ? selectedValue.value.toString() : '');
+              updateFilter('locationFilter', '');
+              updateFilter('kandangFilter', '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setAreaSelectInputValue(value)}
+            isLoading={isLoadingAreas}
+            isClearable
+          />
+
+          <SelectInput
+            label='Lokasi'
+            placeholder='Pilih Lokasi'
+            options={optionsLocation}
+            value={selectedLocation}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedLocation(selectedValue);
+              setSelectedKandang(null);
+              updateFilter('locationFilter', selectedValue ? selectedValue.value.toString() : '');
+              updateFilter('kandangFilter', '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setLocationSelectInputValue(value)}
+            isLoading={isLoadingLocations}
+            isClearable
+            isDisabled={!selectedArea}
+          />
+
+          <SelectInput
+            label='Kandang'
+            placeholder='Pilih Kandang'
+            options={optionsKandang}
+            value={selectedKandang}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedKandang(selectedValue);
+              updateFilter('kandangFilter', selectedValue ? selectedValue.value.toString() : '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setKandangSelectInputValue(value)}
+            isLoading={isLoadingKandang}
+            isClearable
+            isDisabled={!selectedLocation}
+          />
+
+          <SelectInput
+            label='Periode'
+            placeholder='Pilih Periode'
+            options={[
+              { value: '1', label: 'Periode 1' },
+              { value: '2', label: 'Periode 2' },
+              { value: '3', label: 'Periode 3' },
+            ]}
+            value={
+              tableFilterState.periodFilter
+                ? { value: tableFilterState.periodFilter, label: `Periode ${tableFilterState.periodFilter}` }
+                : null
+            }
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              updateFilter('periodFilter', selectedValue ? selectedValue.value.toString() : '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            isClearable
+          />
+        </div>
+
+        {/* Filter Dropdowns - Mobile */}
+        <div className='sm:hidden flex flex-col gap-3 mt-4'>
+          <SelectInput
+            label='Area'
+            placeholder='Pilih Area'
+            options={optionsArea}
+            value={selectedArea}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedArea(selectedValue);
+              setSelectedLocation(null);
+              setSelectedKandang(null);
+              updateFilter('areaFilter', selectedValue ? selectedValue.value.toString() : '');
+              updateFilter('locationFilter', '');
+              updateFilter('kandangFilter', '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setAreaSelectInputValue(value)}
+            isLoading={isLoadingAreas}
+            isClearable
+          />
+
+          <SelectInput
+            label='Lokasi'
+            placeholder='Pilih Lokasi'
+            options={optionsLocation}
+            value={selectedLocation}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedLocation(selectedValue);
+              setSelectedKandang(null);
+              updateFilter('locationFilter', selectedValue ? selectedValue.value.toString() : '');
+              updateFilter('kandangFilter', '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setLocationSelectInputValue(value)}
+            isLoading={isLoadingLocations}
+            isClearable
+            isDisabled={!selectedArea}
+          />
+
+          <SelectInput
+            label='Kandang'
+            placeholder='Pilih Kandang'
+            options={optionsKandang}
+            value={selectedKandang}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedKandang(selectedValue);
+              updateFilter('kandangFilter', selectedValue ? selectedValue.value.toString() : '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setKandangSelectInputValue(value)}
+            isLoading={isLoadingKandang}
+            isClearable
+            isDisabled={!selectedLocation}
+          />
+
+          <SelectInput
+            label='Periode'
+            placeholder='Pilih Periode'
+            options={[
+              { value: '1', label: 'Periode 1' },
+              { value: '2', label: 'Periode 2' },
+              { value: '3', label: 'Periode 3' },
+            ]}
+            value={
+              tableFilterState.periodFilter
+                ? { value: tableFilterState.periodFilter, label: `Periode ${tableFilterState.periodFilter}` }
+                : null
+            }
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              updateFilter('periodFilter', selectedValue ? selectedValue.value.toString() : '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            isClearable
+          />
+        </div>
       </div>
 
       {/* Bulk action buttons */}
@@ -315,7 +562,7 @@ const RecordingTable = () => {
           },
           {
             header: '#',
-            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
+            cell: (props) => tableFilterState.pageSize * (tableFilterState.page - 1) + props.row.index + 1,
           },
           {
             header: 'ID',
@@ -427,8 +674,8 @@ const RecordingTable = () => {
             },
           },
         ]}
-        pageSize={pageSize}
-        page={recordings?.status === 'success' ? recordings.meta?.page : page}
+        pageSize={tableFilterState.pageSize}
+        page={recordings?.status === 'success' ? recordings.meta?.page : tableFilterState.page}
         totalItems={recordings?.status === 'success' ? recordings.meta?.total_results : 0}
         onPageChange={setPage}
         isLoading={isLoading}

From 6114d706ad05d2148edd307ceb5a247a0da5f5e1 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 14:13:21 +0700
Subject: [PATCH 61/92] feat(FE-137): disable input field in RecordingForm when
 type is 'detail'

---
 src/components/pages/production/recording/form/RecordingForm.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index f974bdcd..e8853545 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1027,6 +1027,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           wrapper: 'w-full min-w-48',
                         }}
                         isSearchable
+                        isDisabled={type === 'detail'}
                       />
                     </td>
                       <td>

From 17e6eef0c5e86a2c4bbacb4b3d8e5ae26f848d49 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 18:02:41 +0700
Subject: [PATCH 62/92] feat(FE-137): add approve and reject functionality in
 RecordingForm with confirmation modals

---
 src/components/helper/form/FormActions.tsx    |  80 ++++++++--
 .../recording/form/RecordingForm.tsx          | 142 ++++++++++++++++--
 2 files changed, 193 insertions(+), 29 deletions(-)

diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx
index 92c2a92c..111b052f 100644
--- a/src/components/helper/form/FormActions.tsx
+++ b/src/components/helper/form/FormActions.tsx
@@ -9,6 +9,11 @@ interface FormActionsProps<T> {
   editUrl?: string;
   onDelete?: () => void;
   disableSubmit?: boolean;
+  onApprove?: () => void;
+  onReject?: () => void;
+  isApproveLoading?: boolean;
+  isRejectLoading?: boolean;
+  showApproveReject?: boolean;
 }
 
 export const FormActions = <T,>({
@@ -17,25 +22,32 @@ export const FormActions = <T,>({
   editUrl,
   onDelete,
   disableSubmit = false,
+  onApprove,
+  onReject,
+  isApproveLoading = false,
+  isRejectLoading = false,
+  showApproveReject = false,
 }: FormActionsProps<T>) => {
   return (
     <div className='flex flex-row justify-between gap-2 flex-wrap'>
-      {type !== 'add' && onDelete && (
+      {type !== 'add' && (
         <div className='flex flex-row justify-start gap-2'>
-          <Button
-            type='button'
-            color='error'
-            onClick={onDelete}
-            className='px-4'
-          >
-            <Icon
-              icon='material-symbols:delete-outline-rounded'
-              width={24}
-              height={24}
-              className='justify-start text-sm'
-            />
-            Delete
-          </Button>
+          {onDelete && (
+            <Button
+              type='button'
+              color='error'
+              onClick={onDelete}
+              className='px-4'
+            >
+              <Icon
+                icon='material-symbols:delete-outline-rounded'
+                width={24}
+                height={24}
+                className='justify-start text-sm'
+              />
+              Delete
+            </Button>
+          )}
           {type !== 'edit' && editUrl && (
             <Button
               type='button'
@@ -52,6 +64,44 @@ export const FormActions = <T,>({
               Edit
             </Button>
           )}
+          {type === 'detail' && showApproveReject && (onApprove || onReject) && (
+            <>
+              {onApprove && (
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={onApprove}
+                  className='px-4'
+                  isLoading={isApproveLoading}
+                >
+                  <Icon
+                    icon='material-symbols:check-circle-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Approve
+                </Button>
+              )}
+              {onReject && (
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={onReject}
+                  className='px-4'
+                  isLoading={isRejectLoading}
+                >
+                  <Icon
+                    icon='material-symbols:cancel-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Reject
+                </Button>
+              )}
+            </>
+          )}
         </div>
       )}
       {type !== 'detail' && (
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index e8853545..f63d6298 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -12,10 +12,12 @@ import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import { FormActions } from '@/components/helper/form/FormActions';
+import { RecordingApi } from '@/services/api/production';
 import {
   CreateRecordingPayload,
   Recording,
 } from '@/types/api/production/recording';
+import { type BaseApiResponse } from '@/types/api/api-general';
 import {
   RecordingFormSchema,
   RecordingFormValues,
@@ -28,6 +30,8 @@ import { LocationApi } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
+import { useModal } from '@/components/Modal';
+import toast from 'react-hot-toast';
 
 import Card from '@/components/Card';
 
@@ -130,6 +134,73 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     confirmationModalDeleteClickHandler,
   } = useRecordingFormHandlers(initialValues?.id);
 
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  // Modals for approve/reject actions
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  // Approve handler
+  const approveHandler = async () => {
+    setIsApproveLoading(true);
+
+    const approveResponse = await RecordingApi.customRequest<
+      BaseApiResponse<Recording[]>
+    >('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'APPROVED',
+        approvable_ids: [initialValues?.id as number],
+        notes: 'Approved via Form',
+      },
+    });
+
+    if (isResponseSuccess(approveResponse)) {
+      toast.success('Recording berhasil disetujui!');
+      approveModal.closeModal();
+      // Optional: redirect or refresh data
+      if (typeof window !== 'undefined') {
+        window.location.href = '/production/recording';
+      }
+    } else {
+      toast.error(approveResponse?.message as string || 'Gagal menyetujui recording');
+      approveModal.closeModal();
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  // Reject handler
+  const rejectHandler = async () => {
+    setIsRejectLoading(true);
+
+    const rejectResponse = await RecordingApi.customRequest<
+      BaseApiResponse<Recording[]>
+    >('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'REJECTED',
+        approvable_ids: [initialValues?.id as number],
+        notes: 'Rejected via Form',
+      },
+    });
+
+    if (isResponseSuccess(rejectResponse)) {
+      toast.success('Recording berhasil ditolak!');
+      rejectModal.closeModal();
+      // Optional: redirect or refresh data
+      if (typeof window !== 'undefined') {
+        window.location.href = '/production/recording';
+      }
+    } else {
+      toast.error(rejectResponse?.message as string || 'Gagal menolak recording');
+      rejectModal.closeModal();
+    }
+
+    setIsRejectLoading(false);
+  };
+
   const formikInitialValues = useMemo<RecordingFormValues>(
     () => getRecordingFormInitialValues(initialValues),
     [initialValues]
@@ -1305,6 +1376,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 : undefined
             }
             onDelete={deleteRecordingClickHandler}
+            onApprove={() => approveModal.openModal()}
+            onReject={() => rejectModal.openModal()}
+            isApproveLoading={isApproveLoading}
+            isRejectLoading={isRejectLoading}
+            showApproveReject={type === 'detail'}
             disableSubmit={hasExceededStock}
           />
           {recordingFormErrorMessage && (
@@ -1321,20 +1397,58 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       </section>
 
       {type !== 'add' && (
-        <ConfirmationModal
-          ref={deleteModal.ref}
-          type='error'
-          text='Apakah anda yakin ingin menghapus data Recording ini?'
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'error',
-            isLoading: isDeleteLoading,
-            onClick: confirmationModalDeleteClickHandler,
-          }}
-        />
+        <>
+          <ConfirmationModal
+            ref={deleteModal.ref}
+            type='error'
+            text='Apakah anda yakin ingin menghapus data Recording ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'error',
+              isLoading: isDeleteLoading,
+              onClick: confirmationModalDeleteClickHandler,
+            }}
+          />
+
+          {/* Approve Confirmation Modal */}
+          {type === 'detail' && (
+            <ConfirmationModal
+              ref={approveModal.ref}
+              type='success'
+              text='Apakah anda yakin ingin menyetujui data Recording ini?'
+              secondaryButton={{
+                text: 'Tidak',
+              }}
+              primaryButton={{
+                text: 'Ya',
+                color: 'success',
+                isLoading: isApproveLoading,
+                onClick: approveHandler,
+              }}
+            />
+          )}
+
+          {/* Reject Confirmation Modal */}
+          {type === 'detail' && (
+            <ConfirmationModal
+              ref={rejectModal.ref}
+              type='error'
+              text='Apakah anda yakin ingin menolak data Recording ini?'
+              secondaryButton={{
+                text: 'Tidak',
+              }}
+              primaryButton={{
+                text: 'Ya',
+                color: 'error',
+                isLoading: isRejectLoading,
+                onClick: rejectHandler,
+              }}
+            />
+          )}
+        </>
       )}
     </>
   );

From e322e0d078a3f61505de24144c8e5c4e8a424a51 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 20:29:33 +0700
Subject: [PATCH 63/92] feat(FE-137): update RECORDING_FLAG_OPTIONS values for
 consistency in constant.ts

---
 src/config/constant.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index 2b87c4d7..8e706f73 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -216,7 +216,7 @@ export const SUPPLIER_FLAG_OPTIONS = [
 ];
 
 export const RECORDING_FLAG_OPTIONS = [
-  { label: 'Ayam Afkir', value: 'Ayam Afkir' },
-  { label: 'Ayam Culling', value: 'Ayam Culling' },
-  { label: 'Ayam Mati', value: 'Ayam Mati' },
+  { label: 'Ayam Afkir', value: 'Afkir' },
+  { label: 'Ayam Culling', value: 'Culling' },
+  { label: 'Ayam Mati', value: 'Mati' },
 ];

From 81003eac63a2bd8008f50b1986f98c7055bdbd5b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 20:37:11 +0700
Subject: [PATCH 64/92] feat(FE-137): enhance stock product selection in
 RecordingForm with initial values support

---
 .../recording/form/RecordingForm.tsx          | 76 +++++++++++++------
 1 file changed, 54 insertions(+), 22 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index f63d6298..2e1a5952 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -552,35 +552,67 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   // Memoized unified products for stock selection
   const unifiedStockProducts = useMemo(() => {
-    if (!isResponseSuccess(stockProducts)) return [];
     const options: OptionType[] = [];
 
-    stockProducts.data.forEach((product) => {
-      const warehouse = product.warehouse;
-      const stockText = product.quantity.toLocaleString('id-ID');
+    // Add products from API stockProducts
+    if (isResponseSuccess(stockProducts)) {
+      stockProducts.data.forEach((product) => {
+        const warehouse = product.warehouse;
+        const stockText = product.quantity.toLocaleString('id-ID');
 
-      // Check if product has any of the flags
-      const hasPakanFlag = product.product.flags?.includes('PAKAN');
-      const hasOvkFlag = product.product.flags?.includes('OVK');
+        // Check if product has any of the flags
+        const hasPakanFlag = product.product.flags?.includes('PAKAN');
+        const hasOvkFlag = product.product.flags?.includes('OVK');
 
-      // Add products with warehouse and location grouping in label (similar to projectFlockKandangOptions pattern)
-      if (hasPakanFlag) {
-        options.push({
-          value: product.id,
-          label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
-        });
-      }
+        // Add products with warehouse and location grouping in label (similar to projectFlockKandangOptions pattern)
+        if (hasPakanFlag) {
+          options.push({
+            value: product.id,
+            label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
+          });
+        }
 
-      if (hasOvkFlag) {
-        options.push({
-          value: product.id,
-          label: `[OVK] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
-        });
-      }
-    });
+        if (hasOvkFlag) {
+          options.push({
+            value: product.id,
+            label: `[OVK] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
+          });
+        }
+      });
+    }
+
+    // Add existing stock products from initialValues (for detail/edit mode)
+    if (initialValues && 'stocks' in initialValues && initialValues.stocks && type !== 'add') {
+      const initialValuesWithStocks = initialValues as Recording & {
+        stocks?: Array<{
+          product_warehouse_id: number;
+          usage_amount: number;
+          notes: string;
+          product_warehouse?: {
+            id: number;
+            product_id: number;
+            product_name: string;
+            warehouse_id: number;
+            warehouse_name: string;
+          };
+        }>;
+      };
+
+      initialValuesWithStocks.stocks?.forEach((stock) => {
+        if (stock.product_warehouse && stock.product_warehouse.product_name) {
+          const existingOption = options.find(opt => opt.value === stock.product_warehouse_id);
+          if (!existingOption) {
+            options.push({
+              value: stock.product_warehouse_id,
+              label: `${stock.product_warehouse.product_name} - ${stock.product_warehouse.warehouse_name}`
+            });
+          }
+        }
+      });
+    }
 
     return options;
-  }, [stockProducts, getProjectFlockLocation()]);
+  }, [stockProducts, getProjectFlockLocation(), initialValues, type]);
 
 
   // Handle stock usage amount change - simplified following MovementForm pattern

From 9c5dc0dbb53229bc85e9b3e6bee85c5903932f78 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 20:44:15 +0700
Subject: [PATCH 65/92] refactor(FE-137): integrate approve and reject
 functionality in RecordingForm with loading states and modal confirmations

---
 .../recording/form/RecordingForm.tsx          | 792 ++++++++----------
 1 file changed, 357 insertions(+), 435 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 2e1a5952..ca4a696d 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -45,45 +45,41 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const [selectedStocks, setSelectedStocks] = useState<number[]>([]);
   const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]);
 
-  // Track which average weight field is being edited to prevent auto-calculation override
   const [editingAverageIndex, setEditingAverageIndex] = useState<number | null>(null);
-
-  // Track which rows have been manually edited to prevent auto-calculation override
   const [manuallyEditedRows, setManuallyEditedRows] = useState<Set<number>>(new Set());
 
-  // State for Location search and selection
   const [locationSearchValue, setLocationSearchValue] = useState('');
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(null);
-
-  // State for Project Flock search
   const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
 
-  // Fetch Locations data
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  // ===== API DATA FETCHING =====
   const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({
     search: locationSearchValue || '',
   }).toString()}`;
-
   const { data: locations, isLoading: isLoadingLocations } = useSWR(
     locationsUrl,
     LocationApi.getAllFetcher
   );
 
-  // Fetch Project Flocks data with location filter
   const projectFlocksUrl = `${ProjectFlockApi.basePath}?${new URLSearchParams({
     search: projectFlockSearchValue || '',
     ...(selectedLocation ? { location_id: selectedLocation.value.toString() } : {}),
   }).toString()}`;
-
   const { data: projectFlocks, isLoading: isLoadingProjectFlocks } = useSWR(
     projectFlocksUrl,
     ProjectFlockApi.getAllFetcher
   );
 
-  // Fetch Products with location filter (both PAKAN and OVK) - using selectedLocation for now
   const stockProductsUrl = useMemo(() => {
     if (!selectedLocation) return null;
     const params = new URLSearchParams({
-      flags: 'PAKAN,OVK', // Fetch both flags in one request
+      flags: 'PAKAN,OVK',
       search: '',
       location_id: selectedLocation.value.toString(),
     });
@@ -95,22 +91,19 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     ProductWarehouseApi.getAllFetcher
   );
 
-  // Extract location options from locations data
+  // ===== DATA PROCESSING =====
   const locationOptions = useMemo(() => {
     if (!isResponseSuccess(locations)) return [];
-
     return locations?.data.map((location) => ({
       value: location.id,
       label: location.name,
     })) || [];
   }, [locations]);
 
-  // Extract kandang options from project_flocks data
   const projectFlockKandangOptions = useMemo(() => {
     if (!isResponseSuccess(projectFlocks)) return [];
 
     const options: OptionType[] = [];
-
     projectFlocks?.data.forEach((projectFlock) => {
       projectFlock.kandangs.forEach((kandang) => {
         options.push({
@@ -119,11 +112,68 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         });
       });
     });
-
     return options;
   }, [projectFlocks]);
 
+  const unifiedStockProducts = useMemo(() => {
+    const options: OptionType[] = [];
+    if (isResponseSuccess(stockProducts)) {
+      stockProducts.data.forEach((product) => {
+        const warehouse = product.warehouse;
+        const stockText = product.quantity.toLocaleString('id-ID');
 
+        const hasPakanFlag = product.product.flags?.includes('PAKAN');
+        const hasOvkFlag = product.product.flags?.includes('OVK');
+
+        if (hasPakanFlag) {
+          options.push({
+            value: product.id,
+            label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
+          });
+        }
+
+        if (hasOvkFlag) {
+          options.push({
+            value: product.id,
+            label: `[OVK] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
+          });
+        }
+      });
+    }
+
+    if (initialValues && 'stocks' in initialValues && initialValues.stocks && type !== 'add') {
+      const initialValuesWithStocks = initialValues as Recording & {
+        stocks?: Array<{
+          product_warehouse_id: number;
+          usage_amount: number;
+          notes: string;
+          product_warehouse?: {
+            id: number;
+            product_id: number;
+            product_name: string;
+            warehouse_id: number;
+            warehouse_name: string;
+          };
+        }>;
+      };
+
+      initialValuesWithStocks.stocks?.forEach((stock) => {
+        if (stock.product_warehouse && stock.product_warehouse.product_name) {
+          const existingOption = options.find(opt => opt.value === stock.product_warehouse_id);
+          if (!existingOption) {
+            options.push({
+              value: stock.product_warehouse_id,
+              label: `${stock.product_warehouse.product_name} - ${stock.product_warehouse.warehouse_name}`
+            });
+          }
+        }
+      });
+    }
+
+    return options;
+  }, [stockProducts, initialValues, type]);
+
+  // ===== FORM HANDLERS =====
   const {
     deleteModal,
     recordingFormErrorMessage,
@@ -134,73 +184,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     confirmationModalDeleteClickHandler,
   } = useRecordingFormHandlers(initialValues?.id);
 
-  const [isApproveLoading, setIsApproveLoading] = useState(false);
-  const [isRejectLoading, setIsRejectLoading] = useState(false);
-
-  // Modals for approve/reject actions
-  const approveModal = useModal();
-  const rejectModal = useModal();
-
-  // Approve handler
-  const approveHandler = async () => {
-    setIsApproveLoading(true);
-
-    const approveResponse = await RecordingApi.customRequest<
-      BaseApiResponse<Recording[]>
-    >('approvals', {
-      method: 'POST',
-      payload: {
-        action: 'APPROVED',
-        approvable_ids: [initialValues?.id as number],
-        notes: 'Approved via Form',
-      },
-    });
-
-    if (isResponseSuccess(approveResponse)) {
-      toast.success('Recording berhasil disetujui!');
-      approveModal.closeModal();
-      // Optional: redirect or refresh data
-      if (typeof window !== 'undefined') {
-        window.location.href = '/production/recording';
-      }
-    } else {
-      toast.error(approveResponse?.message as string || 'Gagal menyetujui recording');
-      approveModal.closeModal();
-    }
-
-    setIsApproveLoading(false);
-  };
-
-  // Reject handler
-  const rejectHandler = async () => {
-    setIsRejectLoading(true);
-
-    const rejectResponse = await RecordingApi.customRequest<
-      BaseApiResponse<Recording[]>
-    >('approvals', {
-      method: 'POST',
-      payload: {
-        action: 'REJECTED',
-        approvable_ids: [initialValues?.id as number],
-        notes: 'Rejected via Form',
-      },
-    });
-
-    if (isResponseSuccess(rejectResponse)) {
-      toast.success('Recording berhasil ditolak!');
-      rejectModal.closeModal();
-      // Optional: redirect or refresh data
-      if (typeof window !== 'undefined') {
-        window.location.href = '/production/recording';
-      }
-    } else {
-      toast.error(rejectResponse?.message as string || 'Gagal menolak recording');
-      rejectModal.closeModal();
-    }
-
-    setIsRejectLoading(false);
-  };
-
   const formikInitialValues = useMemo<RecordingFormValues>(
     () => getRecordingFormInitialValues(initialValues),
     [initialValues]
@@ -254,12 +237,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     },
   });
 
-  // Get location from selected project flock for stock filtering
-  const getProjectFlockLocation = useCallback((): OptionType | null => {
+  // ===== HELPER FUNCTIONS =====
+  useCallback((): OptionType | null => {
     if (!formik.values.project_flock_kandang || !isResponseSuccess(projectFlocks)) {
-      return selectedLocation; // Fallback to manual location selection
+      return selectedLocation;
     }
-
     const kandangId = formik.values.project_flock_kandang.value;
     for (const projectFlock of projectFlocks.data) {
       const kandang = projectFlock.kandangs.find(k => k.id === kandangId);
@@ -270,82 +252,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         };
       }
     }
-
-    return selectedLocation; // Fallback to manual location selection
+    return selectedLocation;
   }, [formik.values.project_flock_kandang, projectFlocks, selectedLocation]);
 
-  // EVENT HANDLERS - Select Inputs
-  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedLocation(val as OptionType);
-
-    // Reset project flock selection when location changes
-    formik.setFieldValue('project_flock_kandang', null);
-    formik.setFieldValue('project_flock_kandang_id', 0);
-  };
-
-  const projectFlockKandangChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldTouched('project_flock_kandang', true);
-    formik.setFieldValue('project_flock_kandang', val);
-    formik.setFieldTouched('project_flock_kandang_id', true);
-    formik.setFieldValue('project_flock_kandang_id', (val as OptionType)?.value || 0);
-  };
-
-  // EVENT HANDLERS - Date Time
-  const recordDateTimeChangeHandler = (datetime: Date | null) => {
-    formik.setFieldValue('record_datetime', datetime, false);
-  };
-
-  // Auto-calculate average weight when weight or qty changes (but not when editing average weight manually)
-  useEffect(() => {
-    // Only run auto-calculation if no field is being edited
-    if (formik.values.body_weights && editingAverageIndex === null) {
-      const updatedBodyWeights = formik.values.body_weights.map((weight, idx) => {
-        // Skip the field that's being edited or has been manually edited
-        if (idx === editingAverageIndex || manuallyEditedRows.has(idx)) {
-          return weight;
-        }
-
-        return {
-          ...weight,
-          average_weight:
-            weight.qty > 0 && weight.weight > 0
-              ? parseFloat((weight.weight / weight.qty).toFixed(2))
-              : 0,
-        };
-      });
-
-      // Only update if values are different to avoid infinite loops
-      const hasChanges = updatedBodyWeights.some(
-        (updated, idx) =>
-          idx !== editingAverageIndex && // Skip the field being edited
-          !manuallyEditedRows.has(idx) && // Skip manually edited rows
-          updated.average_weight !==
-          (formik.values.body_weights[idx]?.average_weight || 0)
-      );
-
-      if (hasChanges) {
-        // Use false to prevent triggering validation and other side effects
-        formik.setFieldValue('body_weights', updatedBodyWeights, false);
-      }
-    }
-  }, [
-    formik.values.body_weights?.map((w) => w.weight),
-    formik.values.body_weights?.map((w) => w.qty),
-    editingAverageIndex, // Include editing index in dependencies
-    manuallyEditedRows, // Include manually edited rows in dependencies
-  ]);
-
-  // Stock validation functions - Following MovementForm pattern
   const getAvailableStock = useCallback(
     (productWarehouseId: number) => {
       if (type === 'detail') return 0;
-
       if (!isResponseSuccess(stockProducts)) return 0;
-
       const productWarehouse = stockProducts.data.find(
         (pw) => pw.id === productWarehouseId
       );
-
       return productWarehouse?.quantity ?? 0;
     },
     [stockProducts, type]
@@ -354,17 +270,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const getStockUsageError = useCallback(
     (stockIdx: number) => {
       if (type === 'detail') return null;
-
       const stock = formik.values.stocks?.[stockIdx];
       if (!stock || !stock.product_warehouse_id) return null;
-
       const availableStock = getAvailableStock(stock.product_warehouse_id);
       const requestedUsage = Number(stock.usage_amount) || 0;
-
       if (requestedUsage > availableStock) {
         return `Jumlah pakai melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('id-ID')}`;
       }
-
       return null;
     },
     [formik.values.stocks, getAvailableStock, type]
@@ -373,14 +285,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const getStockUsageAdornment = useCallback(
     (stockIdx: number) => {
       if (type === 'detail') return null;
-
       const stock = formik.values.stocks?.[stockIdx];
       if (!stock || !stock.product_warehouse_id) return null;
-
       const availableStock = getAvailableStock(stock.product_warehouse_id);
       const requestedUsage = Number(stock.usage_amount) || 0;
       const remainingStock = availableStock - requestedUsage;
-
       if (requestedUsage > 0) {
         return (
           <span className='text-sm text-gray-600 whitespace-nowrap'>
@@ -388,7 +297,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           </span>
         );
       }
-
       return (
         <span className='text-sm text-gray-600 whitespace-nowrap'>
           (tersedia: {availableStock.toLocaleString('id-ID')})
@@ -400,7 +308,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const hasExceededStock = useMemo(() => {
     if (type === 'detail') return false;
-
     return (
       formik.values.stocks?.some((stock, idx) => {
         return getStockUsageError(idx) !== null;
@@ -408,273 +315,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     );
   }, [formik.values.stocks, getStockUsageError, type]);
 
-  // EVENT HANDLERS - Body Weights
-  const addBodyWeight = () => {
-    const newBodyWeights = [
-      ...(formik.values.body_weights || []),
-      {
-        weight: 0,
-        qty: 1,
-        average_weight: 0,
-      },
-    ];
-    formik.setFieldValue('body_weights', newBodyWeights);
-  };
-
-  // Handle calculation when weight changes
-  const handleWeightChange = (idx: number, value: number) => {
-    formik.setFieldValue(`body_weights.${idx}.weight`, value);
-
-    // Reset manual edit flag when weight changes (user wants auto-calculation)
-    setManuallyEditedRows(prev => {
-      const newSet = new Set(prev);
-      newSet.delete(idx);
-      return newSet;
-    });
-
-    const currentWeight = formik.values.body_weights?.[idx];
-    if (currentWeight) {
-      const qty = currentWeight.qty;
-      if (qty > 0 && value > 0) {
-        const averageWeight = parseFloat((value / qty).toFixed(2));
-        formik.setFieldValue(`body_weights.${idx}.average_weight`, averageWeight);
-      } else {
-        formik.setFieldValue(`body_weights.${idx}.average_weight`, 0);
-      }
-    }
-  };
-
-  // Handle calculation when qty changes
-  const handleQtyChange = (idx: number, value: number) => {
-    formik.setFieldValue(`body_weights.${idx}.qty`, value);
-
-    // Reset manual edit flag when qty changes (user wants auto-calculation)
-    setManuallyEditedRows(prev => {
-      const newSet = new Set(prev);
-      newSet.delete(idx);
-      return newSet;
-    });
-
-    const currentWeight = formik.values.body_weights?.[idx];
-    if (currentWeight) {
-      const weight = currentWeight.weight;
-      if (value > 0 && weight > 0) {
-        const averageWeight = parseFloat((weight / value).toFixed(2));
-        formik.setFieldValue(`body_weights.${idx}.average_weight`, averageWeight);
-      } else {
-        formik.setFieldValue(`body_weights.${idx}.average_weight`, 0);
-      }
-    }
-  };
-
-  // Handle calculation when average_weight changes
-  const handleAverageWeightChange = (idx: number, value: number) => {
-    formik.setFieldValue(`body_weights.${idx}.average_weight`, value);
-
-    const currentWeight = formik.values.body_weights?.[idx];
-    if (currentWeight) {
-      const qty = currentWeight.qty;
-      if (qty > 0 && value > 0) {
-        const totalWeight = value * qty;
-        formik.setFieldValue(`body_weights.${idx}.weight`, totalWeight);
-      } else {
-        formik.setFieldValue(`body_weights.${idx}.weight`, 0);
-      }
-    }
-  };
-
-  // Create wrapper handlers that match NumberInput's onChange signature
-  const handleWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Parse the value more carefully to handle decimal numbers properly
-    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
-    // Convert comma thousand separator to nothing, but keep decimal point
-    const normalizedValue = rawValue.replace(/,/g, '');
-    const value = parseFloat(normalizedValue) || 0;
-    handleWeightChange(idx, value);
-  };
-
-  const handleQtyChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Parse the value more carefully to handle decimal numbers properly
-    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
-    // Convert comma thousand separator to nothing, but keep decimal point
-    const normalizedValue = rawValue.replace(/,/g, '');
-    const value = parseFloat(normalizedValue) || 0;
-    handleQtyChange(idx, value);
-  };
-
-  const handleAverageWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Set focus state to prevent auto-calculation override
-    setEditingAverageIndex(idx);
-
-    // Mark this row as manually edited
-    setManuallyEditedRows(prev => new Set(prev).add(idx));
-
-    // Parse the value more carefully to handle decimal numbers properly
-    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
-    // Convert comma thousand separator to nothing, but keep decimal point
-    const normalizedValue = rawValue.replace(/,/g, '');
-    const value = parseFloat(normalizedValue) || 0;
-    handleAverageWeightChange(idx, value);
-  };
-
-  const handleAverageWeightBlur = (idx: number) => {
-    // Clear focus state when user leaves the field to re-enable auto-calculation
-    setEditingAverageIndex(null);
-  };
-
-  const removeBodyWeight = (idx: number) => {
-    const updatedBodyWeights = formik.values.body_weights?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('body_weights', updatedBodyWeights);
-  };
-
-  const removeSelectedBodyWeights = () => {
-    const updatedBodyWeights = formik.values.body_weights?.filter(
-      (_, idx) => !selectedBodyWeights.includes(idx)
-    );
-    formik.setFieldValue('body_weights', updatedBodyWeights);
-    setSelectedBodyWeights([]);
-  };
-
-  // EVENT HANDLERS - Stocks
-  const addStock = () => {
-    const newStocks = [
-      ...(formik.values.stocks || []),
-      {
-        product_warehouse_id: 0,
-        usage_amount: 0,
-        notes: '',
-      },
-    ];
-    formik.setFieldValue('stocks', newStocks);
-  };
-
-  // Memoized unified products for stock selection
-  const unifiedStockProducts = useMemo(() => {
-    const options: OptionType[] = [];
-
-    // Add products from API stockProducts
-    if (isResponseSuccess(stockProducts)) {
-      stockProducts.data.forEach((product) => {
-        const warehouse = product.warehouse;
-        const stockText = product.quantity.toLocaleString('id-ID');
-
-        // Check if product has any of the flags
-        const hasPakanFlag = product.product.flags?.includes('PAKAN');
-        const hasOvkFlag = product.product.flags?.includes('OVK');
-
-        // Add products with warehouse and location grouping in label (similar to projectFlockKandangOptions pattern)
-        if (hasPakanFlag) {
-          options.push({
-            value: product.id,
-            label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
-          });
-        }
-
-        if (hasOvkFlag) {
-          options.push({
-            value: product.id,
-            label: `[OVK] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
-          });
-        }
-      });
-    }
-
-    // Add existing stock products from initialValues (for detail/edit mode)
-    if (initialValues && 'stocks' in initialValues && initialValues.stocks && type !== 'add') {
-      const initialValuesWithStocks = initialValues as Recording & {
-        stocks?: Array<{
-          product_warehouse_id: number;
-          usage_amount: number;
-          notes: string;
-          product_warehouse?: {
-            id: number;
-            product_id: number;
-            product_name: string;
-            warehouse_id: number;
-            warehouse_name: string;
-          };
-        }>;
-      };
-
-      initialValuesWithStocks.stocks?.forEach((stock) => {
-        if (stock.product_warehouse && stock.product_warehouse.product_name) {
-          const existingOption = options.find(opt => opt.value === stock.product_warehouse_id);
-          if (!existingOption) {
-            options.push({
-              value: stock.product_warehouse_id,
-              label: `${stock.product_warehouse.product_name} - ${stock.product_warehouse.warehouse_name}`
-            });
-          }
-        }
-      });
-    }
-
-    return options;
-  }, [stockProducts, getProjectFlockLocation(), initialValues, type]);
-
-
-  // Handle stock usage amount change - simplified following MovementForm pattern
-  const handleStockUsageAmountChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
-      formik.setFieldValue(`stocks.${idx}.usage_amount`, value);
-    },
-    [formik]
-  );
-
-  // Unified Stock remove handlers
-  const removeStock = (idx: number) => {
-    const updatedStocks = formik.values.stocks?.filter((_, i) => i !== idx);
-    formik.setFieldValue('stocks', updatedStocks);
-  };
-
-  const removeSelectedStocks = () => {
-    const updatedStocks = formik.values.stocks?.filter(
-      (_, idx) => !selectedStocks.includes(idx)
-    );
-    formik.setFieldValue('stocks', updatedStocks);
-    setSelectedStocks([]);
-  };
-
-  // EVENT HANDLERS - Depletions
-  const addDepletion = () => {
-    const newDepletions = [
-      ...(formik.values.depletions || []),
-      {
-        total: 0,
-        notes: '',
-      },
-    ];
-    formik.setFieldValue('depletions', newDepletions);
-  };
-
-  // Handle depletion total change
-  const handleDepletionTotalChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
-      formik.setFieldValue(`depletions.${idx}.total`, value);
-    },
-    [formik]
-  );
-
-  const removeDepletion = (idx: number) => {
-    const updatedDepletions = formik.values.depletions?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('depletions', updatedDepletions);
-  };
-
-  const removeSelectedDepletions = () => {
-    const updatedDepletions = formik.values.depletions?.filter(
-      (_, idx) => !selectedDepletions.includes(idx)
-    );
-    formik.setFieldValue('depletions', updatedDepletions);
-    setSelectedDepletions([]);
-  };
-
-  // HELPER FUNCTIONS
   const isRepeaterInputError = <
     T extends 'body_weights' | 'stocks' | 'depletions',
   >(
@@ -713,6 +353,290 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     };
   };
 
+  // ===== EVENT HANDLERS =====
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+    formik.setFieldValue('project_flock_kandang', null);
+    formik.setFieldValue('project_flock_kandang_id', 0);
+  };
+
+  const projectFlockKandangChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('project_flock_kandang', true);
+    formik.setFieldValue('project_flock_kandang', val);
+    formik.setFieldTouched('project_flock_kandang_id', true);
+    formik.setFieldValue('project_flock_kandang_id', (val as OptionType)?.value || 0);
+  };
+
+  const approveHandler = async () => {
+    setIsApproveLoading(true);
+
+    const approveResponse = await RecordingApi.customRequest<
+      BaseApiResponse<Recording[]>
+    >('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'APPROVED',
+        approvable_ids: [initialValues?.id as number],
+        notes: 'Approved via Form',
+      },
+    });
+
+    if (isResponseSuccess(approveResponse)) {
+      toast.success('Recording berhasil disetujui!');
+      approveModal.closeModal();
+      if (typeof window !== 'undefined') {
+        window.location.href = '/production/recording';
+      }
+    } else {
+      toast.error(approveResponse?.message as string || 'Gagal menyetujui recording');
+      approveModal.closeModal();
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const rejectHandler = async () => {
+    setIsRejectLoading(true);
+
+    const rejectResponse = await RecordingApi.customRequest<
+      BaseApiResponse<Recording[]>
+    >('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'REJECTED',
+        approvable_ids: [initialValues?.id as number],
+        notes: 'Rejected via Form',
+      },
+    });
+
+    if (isResponseSuccess(rejectResponse)) {
+      toast.success('Recording berhasil ditolak!');
+      rejectModal.closeModal();
+      if (typeof window !== 'undefined') {
+        window.location.href = '/production/recording';
+      }
+    } else {
+      toast.error(rejectResponse?.message as string || 'Gagal menolak recording');
+      rejectModal.closeModal();
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  // Body Weights Handlers
+  const addBodyWeight = () => {
+    const newBodyWeights = [
+      ...(formik.values.body_weights || []),
+      {
+        weight: 0,
+        qty: 1,
+        average_weight: 0,
+      },
+    ];
+    formik.setFieldValue('body_weights', newBodyWeights);
+  };
+
+  const handleWeightChange = (idx: number, value: number) => {
+    formik.setFieldValue(`body_weights.${idx}.weight`, value);
+
+    setManuallyEditedRows(prev => {
+      const newSet = new Set(prev);
+      newSet.delete(idx);
+      return newSet;
+    });
+
+    const currentWeight = formik.values.body_weights?.[idx];
+    if (currentWeight) {
+      const qty = currentWeight.qty;
+      if (qty > 0 && value > 0) {
+        const averageWeight = parseFloat((value / qty).toFixed(2));
+        formik.setFieldValue(`body_weights.${idx}.average_weight`, averageWeight);
+      } else {
+        formik.setFieldValue(`body_weights.${idx}.average_weight`, 0);
+      }
+    }
+  };
+
+  const handleQtyChange = (idx: number, value: number) => {
+    formik.setFieldValue(`body_weights.${idx}.qty`, value);
+
+    setManuallyEditedRows(prev => {
+      const newSet = new Set(prev);
+      newSet.delete(idx);
+      return newSet;
+    });
+
+    const currentWeight = formik.values.body_weights?.[idx];
+    if (currentWeight) {
+      const weight = currentWeight.weight;
+      if (value > 0 && weight > 0) {
+        const averageWeight = parseFloat((weight / value).toFixed(2));
+        formik.setFieldValue(`body_weights.${idx}.average_weight`, averageWeight);
+      } else {
+        formik.setFieldValue(`body_weights.${idx}.average_weight`, 0);
+      }
+    }
+  };
+
+  const handleAverageWeightChange = (idx: number, value: number) => {
+    formik.setFieldValue(`body_weights.${idx}.average_weight`, value);
+
+    const currentWeight = formik.values.body_weights?.[idx];
+    if (currentWeight) {
+      const qty = currentWeight.qty;
+      if (qty > 0 && value > 0) {
+        const totalWeight = value * qty;
+        formik.setFieldValue(`body_weights.${idx}.weight`, totalWeight);
+      } else {
+        formik.setFieldValue(`body_weights.${idx}.weight`, 0);
+      }
+    }
+  };
+
+  const handleWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
+    const normalizedValue = rawValue.replace(/,/g, '');
+    const value = parseFloat(normalizedValue) || 0;
+    handleWeightChange(idx, value);
+  };
+
+  const handleQtyChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
+    const normalizedValue = rawValue.replace(/,/g, '');
+    const value = parseFloat(normalizedValue) || 0;
+    handleQtyChange(idx, value);
+  };
+
+  const handleAverageWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditingAverageIndex(idx);
+    setManuallyEditedRows(prev => new Set(prev).add(idx));
+
+    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
+    const normalizedValue = rawValue.replace(/,/g, '');
+    const value = parseFloat(normalizedValue) || 0;
+    handleAverageWeightChange(idx, value);
+  };
+
+  const handleAverageWeightBlur = (idx: number) => {
+    setEditingAverageIndex(null);
+  };
+
+  const removeBodyWeight = (idx: number) => {
+    const updatedBodyWeights = formik.values.body_weights?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('body_weights', updatedBodyWeights);
+  };
+
+  const removeSelectedBodyWeights = () => {
+    const updatedBodyWeights = formik.values.body_weights?.filter(
+      (_, idx) => !selectedBodyWeights.includes(idx)
+    );
+    formik.setFieldValue('body_weights', updatedBodyWeights);
+    setSelectedBodyWeights([]);
+  };
+
+  // Stocks Handlers
+  const addStock = () => {
+    const newStocks = [
+      ...(formik.values.stocks || []),
+      {
+        product_warehouse_id: 0,
+        usage_amount: 0,
+        notes: '',
+      },
+    ];
+    formik.setFieldValue('stocks', newStocks);
+  };
+
+  const handleStockUsageAmountChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
+      formik.setFieldValue(`stocks.${idx}.usage_amount`, value);
+    },
+    [formik]
+  );
+
+  const removeStock = (idx: number) => {
+    const updatedStocks = formik.values.stocks?.filter((_, i) => i !== idx);
+    formik.setFieldValue('stocks', updatedStocks);
+  };
+
+  const removeSelectedStocks = () => {
+    const updatedStocks = formik.values.stocks?.filter(
+      (_, idx) => !selectedStocks.includes(idx)
+    );
+    formik.setFieldValue('stocks', updatedStocks);
+    setSelectedStocks([]);
+  };
+
+  // Depletions Handlers
+  const addDepletion = () => {
+    const newDepletions = [
+      ...(formik.values.depletions || []),
+      {
+        total: 0,
+        notes: '',
+      },
+    ];
+    formik.setFieldValue('depletions', newDepletions);
+  };
+
+  const handleDepletionTotalChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
+      formik.setFieldValue(`depletions.${idx}.total`, value);
+    },
+    [formik]
+  );
+
+  const removeDepletion = (idx: number) => {
+    const updatedDepletions = formik.values.depletions?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('depletions', updatedDepletions);
+  };
+
+  const removeSelectedDepletions = () => {
+    const updatedDepletions = formik.values.depletions?.filter(
+      (_, idx) => !selectedDepletions.includes(idx)
+    );
+    formik.setFieldValue('depletions', updatedDepletions);
+    setSelectedDepletions([]);
+  };
+
+  // ===== EFFECTS =====
+  useEffect(() => {
+    if (formik.values.body_weights && editingAverageIndex === null) {
+      const updatedBodyWeights = formik.values.body_weights.map((weight, idx) => {
+        if (idx === editingAverageIndex || manuallyEditedRows.has(idx)) {
+          return weight;
+        }
+        return {
+          ...weight,
+          average_weight:
+            weight.qty > 0 && weight.weight > 0
+              ? parseFloat((weight.weight / weight.qty).toFixed(2))
+              : 0,
+        };
+      });
+      const hasChanges = updatedBodyWeights.some(
+        (updated, idx) =>
+          idx !== editingAverageIndex &&
+          !manuallyEditedRows.has(idx) &&
+          updated.average_weight !==
+          (formik.values.body_weights[idx]?.average_weight || 0)
+      );
+      if (hasChanges) {
+        formik.setFieldValue('body_weights', updatedBodyWeights, false);
+      }
+    }
+  }, [
+    formik.values.body_weights?.map((w) => w.weight),
+    formik.values.body_weights?.map((w) => w.qty),
+    editingAverageIndex,
+    manuallyEditedRows,
+  ]);
 
   return (
     <>
@@ -774,7 +698,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             </div>
           </Card>
 
-
           {/* Body Weights Table */}
           <Card
             title='Bobot Badan'
@@ -839,7 +762,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       data-tip='Otomatis dihitung: Total Berat ÷ Jumlah Ayam'
                     >
                         <Icon icon="material-symbols:info-outline" width={16} height={16} />
-                      </span>
+                    </span>
                   </th>
                   {type !== 'detail' && <th>Action</th>}
                 </tr>
@@ -1096,7 +1019,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             option?.value || 0
                           );
 
-                          // Auto-populate notes with product name by finding it in stockProducts data
                           if (option?.value && isResponseSuccess(stockProducts)) {
                             const selectedProduct = stockProducts.data.find(
                               (product) => product.id === option.value
@@ -1486,4 +1408,4 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   );
 };
 
-export default RecordingForm;
+export default RecordingForm;
\ No newline at end of file

From 896a0c6de274d78426f13521cabe560960808ddb Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 21:10:03 +0700
Subject: [PATCH 66/92] refactor(FE-64): integrate product and supplier
 selection with API data fetching in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 639 +++++++++---------
 1 file changed, 323 insertions(+), 316 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index d2c91168..6d6317da 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -37,24 +37,102 @@ interface MovementFormProps {
 }
 
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
+  // ===== STATE MANAGEMENT =====
   const [, setMovementFormErrorMessage] = useState('');
-  const [
-    productWarehouseSelectInputValue,
-    setProductWarehouseSelectInputValue,
-  ] = useState('');
+  const [productWarehouseSelectInputValue, setProductWarehouseSelectInputValue] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
+  const [warehouseSelectInputValue, setWarehouseSelectInputValue] = useState('');
+  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
 
+  // ===== FORM HANDLERS =====
   const {
-    deleteModal,
     movementFormErrorMessage,
-    isDeleteLoading,
     createMovementHandler,
     updateMovementHandler,
-    deleteMovementClickHandler,
-    confirmationModalDeleteClickHandler,
   } = useMovementFormHandlers(initialValues?.id);
 
+  // ===== INTERFACES =====
+  interface WarehouseOptionType extends OptionType {
+    area?: string;
+    location?: string;
+  }
+
+  interface ProductWarehouseOptionType extends OptionType {
+    product_id: number;
+    warehouse_id: number;
+    warehouse_name: string;
+    quantity: number;
+  }
+
+  // ===== API DATA FETCHING =====
+  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
+  const { data: allProductWarehouses } = useSWR(
+    allProductWarehousesUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+
+  const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
+  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
+    warehousesUrl,
+    WarehouseApi.getAllFetcher
+  );
+
+  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue }).toString()}`;
+  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
+    suppliersUrl,
+    SupplierApi.getAllFetcher
+  );
+
+  // ===== DATA PROCESSING =====
+  const warehouseStockMap = useMemo(() => {
+    if (!isResponseSuccess(allProductWarehouses)) return new Map();
+
+    const stockMap = new Map<
+      number,
+      { totalQty: number; productCount: number }
+    >();
+
+    allProductWarehouses.data.forEach((pw) => {
+      const warehouseId = pw.warehouse.id;
+      const existing = stockMap.get(warehouseId) || {
+        totalQty: 0,
+        productCount: 0,
+      };
+
+      stockMap.set(warehouseId, {
+        totalQty: existing.totalQty + pw.quantity,
+        productCount: existing.productCount + 1,
+      });
+    });
+
+    return stockMap;
+  }, [allProductWarehouses]);
+
+  const warehouseOptions = isResponseSuccess(warehouses)
+    ? warehouses?.data.map((w) => {
+        const stockInfo = warehouseStockMap.get(w.id);
+        const stockLabel = stockInfo
+          ? ` (Stock: ${stockInfo.totalQty.toLocaleString('id-ID')} items, ${stockInfo.productCount} produk)`
+          : ' (Kosong)';
+
+        return {
+          value: w.id,
+          label: `${w.name}${stockLabel}`,
+          area: w.area?.name,
+          location:
+            'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
+              ? w.location?.name
+              : undefined,
+        };
+      })
+    : [];
+
+  const supplierOptions = isResponseSuccess(suppliers)
+    ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
+    : [];
+
+  // ===== FORM INITIALIZATION =====
   const formikInitialValues = useMemo<MovementFormValues>(
     () => getMovementFormInitialValues(initialValues),
     [initialValues]
@@ -77,7 +155,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         if (d.document && d.document instanceof File) {
           documents.push(d.document);
           documentIndex = documents.length - 1;
-        } else {
         }
 
         return {
@@ -122,91 +199,39 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     },
   });
 
-  const addProduct = () => {
-    const newProducts = [
-      ...(formik.values.products || []),
-      {
-        product: null,
-        product_id: 0,
-        product_qty: 0,
-      },
-    ];
-    formik.setFieldValue('products', newProducts);
-  };
+  // ===== PRODUCT WAREHOUSE FETCHING (after form initialization) =====
+  const getProductWarehousesUrl = useCallback(() => {
+    const productWarehouseParams = new URLSearchParams({
+      search: productWarehouseSelectInputValue,
+    });
+    if (formik.values.source_warehouse_id) {
+      productWarehouseParams.append(
+        'warehouse_id',
+        formik.values.source_warehouse_id.toString()
+      );
+    }
+    return `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
+  }, [formik.values.source_warehouse_id, productWarehouseSelectInputValue]);
 
-  const removeProduct = useCallback(
-    (i: number) => {
-      const updatedProducts =
-        formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
-          if (index !== i) {
-            acc.push(item);
-          }
-          return acc;
-        }, []) ?? [];
+  const productWarehousesUrl = getProductWarehousesUrl();
+  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
+    useSWR(
+      formik.values.source_warehouse_id ? productWarehousesUrl : null,
+      ProductWarehouseApi.getAllFetcher
+    );
 
-      formik.setFieldValue('products', updatedProducts);
-    },
-    [formik]
-  );
-
-  const bulkRemoveProduct = useCallback(() => {
-    const updatedProducts =
-      formik.values.products?.filter(
-        (_, idx) => !selectedProducts.includes(idx)
-      ) ?? [];
-    formik.setFieldValue('products', updatedProducts);
-    setSelectedProducts([]);
-  }, [formik, selectedProducts]);
-
-  const addDelivery = () => {
-    formik.setFieldValue('deliveries', [
-      ...(formik.values.deliveries || []),
-      {
-        delivery_cost: undefined,
-        delivery_cost_per_item: undefined,
-        document: null,
-        driver_name: '',
-        vehicle_plate: '',
-        supplier: null,
-        supplier_id: 0,
-        products: [
-          {
-            product: null,
-            product_id: 0,
-            product_qty: 0,
-          },
-        ],
-      },
-    ]);
-  };
-
-  const removeDelivery = useCallback(
-    (i: number) => {
-      const updatedDeliveries =
-        formik.values.deliveries?.reduce(
-          (acc: DeliverySchema[], item, index) => {
-            if (index !== i) {
-              acc.push(item);
-            }
-            return acc;
-          },
-          []
-        ) ?? [];
-
-      formik.setFieldValue('deliveries', updatedDeliveries);
-    },
-    [formik]
-  );
-
-  const bulkRemoveDelivery = useCallback(() => {
-    const updatedDeliveries =
-      formik.values.deliveries?.filter(
-        (_, idx) => !selectedDeliveries.includes(idx)
-      ) ?? [];
-    formik.setFieldValue('deliveries', updatedDeliveries);
-    setSelectedDeliveries([]);
-  }, [formik, selectedDeliveries]);
+  const productWarehouseOptions = isResponseSuccess(productWarehouses)
+    ? productWarehouses?.data.map((pw) => ({
+        value: pw.product.id,
+        label: `${pw.product.name} - ${pw.warehouse.name} (Stock: ${pw.quantity.toLocaleString('id-ID')})`,
+        product_id: pw.product.id,
+        warehouse_id: pw.warehouse.id,
+        warehouse_name: pw.warehouse.name,
+        quantity: pw.quantity,
+      }))
+    : [];
 
+  // ===== HELPER FUNCTIONS =====
   const isRepeaterInputError = <T extends 'products' | 'deliveries'>(
     arrayName: T,
     column: T extends 'products' ? keyof ProductSchema : keyof DeliverySchema,
@@ -263,118 +288,98 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     };
   };
 
-  interface WarehouseOptionType extends OptionType {
-    area?: string;
-    location?: string;
-  }
+  // ===== EVENT HANDLERS =====
+  // Product Handlers
+  const addProduct = () => {
+    const newProducts = [
+      ...(formik.values.products || []),
+      {
+        product: null,
+        product_id: 0,
+        product_qty: 0,
+      },
+    ];
+    formik.setFieldValue('products', newProducts);
+  };
 
-  interface ProductWarehouseOptionType extends OptionType {
-    product_id: number;
-    warehouse_id: number;
-    warehouse_name: string;
-    quantity: number;
-  }
+  const removeProduct = useCallback(
+    (i: number) => {
+      const updatedProducts =
+        formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
+          if (index !== i) {
+            acc.push(item);
+          }
+          return acc;
+        }, []) ?? [];
 
-  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
-  const { data: allProductWarehouses } = useSWR(
-    allProductWarehousesUrl,
-    ProductWarehouseApi.getAllFetcher
+      formik.setFieldValue('products', updatedProducts);
+    },
+    [formik]
   );
 
-  const warehouseStockMap = useMemo(() => {
-    if (!isResponseSuccess(allProductWarehouses)) return new Map();
+  const bulkRemoveProduct = useCallback(() => {
+    const updatedProducts =
+      formik.values.products?.filter(
+        (_, idx) => !selectedProducts.includes(idx)
+      ) ?? [];
+    formik.setFieldValue('products', updatedProducts);
+    setSelectedProducts([]);
+  }, [formik, selectedProducts]);
 
-    const stockMap = new Map<
-      number,
-      { totalQty: number; productCount: number }
-    >();
+  // Delivery Handlers
+  const addDelivery = () => {
+    formik.setFieldValue('deliveries', [
+      ...(formik.values.deliveries || []),
+      {
+        delivery_cost: undefined,
+        delivery_cost_per_item: undefined,
+        document: null,
+        driver_name: '',
+        vehicle_plate: '',
+        supplier: null,
+        supplier_id: 0,
+        products: [
+          {
+            product: null,
+            product_id: 0,
+            product_qty: 0,
+          },
+        ],
+      },
+    ]);
+  };
 
-    allProductWarehouses.data.forEach((pw) => {
-      const warehouseId = pw.warehouse.id;
-      const existing = stockMap.get(warehouseId) || {
-        totalQty: 0,
-        productCount: 0,
-      };
+  const removeDelivery = useCallback(
+    (i: number) => {
+      const updatedDeliveries =
+        formik.values.deliveries?.reduce(
+          (acc: DeliverySchema[], item, index) => {
+            if (index !== i) {
+              acc.push(item);
+            }
+            return acc;
+          },
+          []
+        ) ?? [];
 
-      stockMap.set(warehouseId, {
-        totalQty: existing.totalQty + pw.quantity,
-        productCount: existing.productCount + 1,
-      });
-    });
-
-    return stockMap;
-  }, [allProductWarehouses]);
-
-  // Warehouse selection
-  const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
-    useState('');
-  const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
-  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
-    warehousesUrl,
-    WarehouseApi.getAllFetcher
+      formik.setFieldValue('deliveries', updatedDeliveries);
+    },
+    [formik]
   );
-  const warehouseOptions = isResponseSuccess(warehouses)
-    ? warehouses?.data.map((w) => {
-        const stockInfo = warehouseStockMap.get(w.id);
-        const stockLabel = stockInfo
-          ? ` (Stock: ${stockInfo.totalQty.toLocaleString('id-ID')} items, ${stockInfo.productCount} produk)`
-          : ' (Kosong)';
 
-        return {
-          value: w.id,
-          label: `${w.name}${stockLabel}`,
-          area: w.area?.name,
-          location:
-            'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
-              ? w.location?.name
-              : undefined,
-        };
-      })
-    : [];
+  const bulkRemoveDelivery = useCallback(() => {
+    const updatedDeliveries =
+      formik.values.deliveries?.filter(
+        (_, idx) => !selectedDeliveries.includes(idx)
+      ) ?? [];
+    formik.setFieldValue('deliveries', updatedDeliveries);
+    setSelectedDeliveries([]);
+  }, [formik, selectedDeliveries]);
 
-  // Product Warehouse selection - Filter by source warehouse
-  const productWarehouseParams = new URLSearchParams({
-    search: productWarehouseSelectInputValue,
-  });
-  if (formik.values.source_warehouse_id) {
-    productWarehouseParams.append(
-      'warehouse_id',
-      formik.values.source_warehouse_id.toString()
-    );
-  }
-  const productWarehousesUrl = `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
-  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
-    useSWR(
-      formik.values.source_warehouse_id ? productWarehousesUrl : null,
-      ProductWarehouseApi.getAllFetcher
-    );
-  const productWarehouseOptions = isResponseSuccess(productWarehouses)
-    ? productWarehouses?.data.map((pw) => ({
-        value: pw.product.id,
-        label: `${pw.product.name} - ${pw.warehouse.name} (Stock: ${pw.quantity.toLocaleString('id-ID')})`,
-        product_id: pw.product.id,
-        warehouse_id: pw.warehouse.id,
-        warehouse_name: pw.warehouse.name,
-        quantity: pw.quantity,
-      }))
-    : [];
-
-  // Supplier selection
-  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
-  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue }).toString()}`;
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
-    suppliersUrl,
-    SupplierApi.getAllFetcher
-  );
-  const supplierOptions = isResponseSuccess(suppliers)
-    ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
-    : [];
-
-  // Handle cost calculation when delivery_cost changes
+  // Cost Calculation Handlers
   const handleDeliveryCostChange = useCallback(
-    (idx: number, value: string) => {
-      const numValue = parseFloat(value) || 0;
-      formik.setFieldValue(`deliveries.${idx}.delivery_cost`, numValue);
+    (idx: number, value: number) => {
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost`, value);
 
       const delivery = formik.values.deliveries?.[idx];
       if (delivery) {
@@ -382,13 +387,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           (sum, p) => sum + p.product_qty,
           0
         );
-        if (productQty > 0 && numValue > 0) {
-          const perItem = numValue / productQty;
+        if (productQty > 0 && value > 0) {
+          const perItem = value / productQty;
           formik.setFieldValue(
             `deliveries.${idx}.delivery_cost_per_item`,
             perItem
           );
-        } else if (numValue === 0) {
+        } else if (value === 0) {
           formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, 0);
         }
       }
@@ -396,13 +401,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik]
   );
 
-  // Handle cost calculation when delivery_cost_per_item changes
   const handleDeliveryCostPerItemChange = useCallback(
-    (idx: number, value: string) => {
-      const numValue = parseFloat(value) || 0;
+    (idx: number, value: number) => {
       formik.setFieldValue(
         `deliveries.${idx}.delivery_cost_per_item`,
-        numValue
+        value
       );
 
       const delivery = formik.values.deliveries?.[idx];
@@ -411,10 +414,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           (sum, p) => sum + p.product_qty,
           0
         );
-        if (productQty > 0 && numValue > 0) {
-          const totalCost = numValue * productQty;
+        if (productQty > 0 && value > 0) {
+          const totalCost = value * productQty;
           formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
-        } else if (numValue === 0) {
+        } else if (value === 0) {
           formik.setFieldValue(`deliveries.${idx}.delivery_cost`, 0);
         }
       }
@@ -422,57 +425,27 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik]
   );
 
-  // Auto-recalculate when product quantity changes
-  useEffect(() => {
-    formik.values.deliveries?.forEach((delivery, idx) => {
-      const productQty = delivery.products.reduce(
-        (sum, p) => sum + p.product_qty,
-        0
-      );
+  const handleDeliveryCostChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
+      const normalizedValue = rawValue.replace(/,/g, '');
+      const value = parseFloat(normalizedValue) || 0;
+      handleDeliveryCostChange(idx, value);
+    },
+    [handleDeliveryCostChange]
+  );
 
-      // If delivery_cost is set, recalculate delivery_cost_per_item
-      if (
-        delivery.delivery_cost &&
-        delivery.delivery_cost > 0 &&
-        productQty > 0
-      ) {
-        const perItem = delivery.delivery_cost / productQty;
-        if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) {
-          formik.setFieldValue(
-            `deliveries.${idx}.delivery_cost_per_item`,
-            perItem
-          );
-        }
-      }
-      // If delivery_cost_per_item is set, recalculate delivery_cost
-      else if (
-        delivery.delivery_cost_per_item &&
-        delivery.delivery_cost_per_item > 0 &&
-        productQty > 0
-      ) {
-        const totalCost = delivery.delivery_cost_per_item * productQty;
-        if (Math.abs((delivery.delivery_cost || 0) - totalCost) > 0.01) {
-          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
-        }
-      }
-    });
-  }, [
-    formik.values.deliveries
-      ?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0))
-      .join(','),
-  ]);
-
-  useEffect(() => {
-    if (
-      formik.values.source_warehouse_id &&
-      type !== 'edit' &&
-      type !== 'detail'
-    ) {
-      formik.setFieldValue('products', []);
-      formik.setFieldValue('deliveries', []);
-    }
-  }, [formik.values.source_warehouse_id]);
+  const handleDeliveryCostPerItemChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
+      const normalizedValue = rawValue.replace(/,/g, '');
+      const value = parseFloat(normalizedValue) || 0;
+      handleDeliveryCostPerItemChange(idx, value);
+    },
+    [handleDeliveryCostPerItemChange]
+  );
 
+  // UTILITY FUNCTIONS
   const getFilteredProductWarehouseOptions = useCallback(() => {
     return (
       formik.values.products
@@ -618,6 +591,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik.values.deliveries, formik.values.products, type]
   );
 
+  // ===== COMPUTED VALUES =====
   const invalidQtyRows = useMemo(
     () =>
       type === 'detail'
@@ -650,6 +624,54 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     );
   }, [formik.values.products, getProductQtyError, type]);
 
+  // ===== EFFECTS =====
+  useEffect(() => {
+    formik.values.deliveries?.forEach((delivery, idx) => {
+      const productQty = delivery.products.reduce(
+        (sum, p) => sum + p.product_qty,
+        0
+      );
+
+      if (
+        delivery.delivery_cost &&
+        delivery.delivery_cost > 0 &&
+        productQty > 0
+      ) {
+        const perItem = delivery.delivery_cost / productQty;
+        if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) {
+          formik.setFieldValue(
+            `deliveries.${idx}.delivery_cost_per_item`,
+            perItem
+          );
+        }
+      } else if (
+        delivery.delivery_cost_per_item &&
+        delivery.delivery_cost_per_item > 0 &&
+        productQty > 0
+      ) {
+        const totalCost = delivery.delivery_cost_per_item * productQty;
+        if (Math.abs((delivery.delivery_cost || 0) - totalCost) > 0.01) {
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
+        }
+      }
+    });
+  }, [
+    formik.values.deliveries
+      ?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0))
+      .join(','),
+  ]);
+
+  useEffect(() => {
+    if (
+      formik.values.source_warehouse_id &&
+      type !== 'edit' &&
+      type !== 'detail'
+    ) {
+      formik.setFieldValue('products', []);
+      formik.setFieldValue('deliveries', []);
+    }
+  }, [formik.values.source_warehouse_id]);
+
   return (
     <>
       <section className='w-full'>
@@ -839,7 +861,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <div className='flex justify-center'>
                             <CheckboxInput
                               name='select-all-products'
                               checked={
@@ -865,7 +886,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                          </div>
                         </th>
                       )}
                       <th>
@@ -893,31 +913,29 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     {formik.values.products?.map((product, idx) => (
                       <tr key={`product-row-${idx}-${product.product_id}`}>
                         {type !== 'detail' && (
-                          <td>
-                            <div className='flex justify-center'>
-                              <CheckboxInput
-                                name={`product-${idx}`}
-                                checked={selectedProducts.includes(idx)}
-                                onChange={(
-                                  e: React.ChangeEvent<HTMLInputElement>
-                                ) => {
-                                  if (e.target.checked) {
-                                    setSelectedProducts([
-                                      ...selectedProducts,
-                                      idx,
-                                    ]);
-                                  } else {
-                                    setSelectedProducts(
-                                      selectedProducts.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                classNames={{
-                                  wrapper: 'flex justify-center',
-                                  checkbox: 'checkbox checkbox-sm',
-                                }}
-                              />
-                            </div>
+                          <td className="!align-middle">
+                            <CheckboxInput
+                              name={`product-${idx}`}
+                              checked={selectedProducts.includes(idx)}
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>,
+                              ) => {
+                                if (e.target.checked) {
+                                  setSelectedProducts([
+                                    ...selectedProducts,
+                                    idx,
+                                  ]);
+                                } else {
+                                  setSelectedProducts(
+                                    selectedProducts.filter((i) => i !== idx),
+                                  );
+                                }
+                              }}
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
+                            />
                           </td>
                         )}
                         <td>
@@ -1061,7 +1079,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <div className='flex justify-center'>
                             <CheckboxInput
                               name='select-all-deliveries'
                               checked={
@@ -1087,7 +1104,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                          </div>
                         </th>
                       )}
                       <th>
@@ -1161,33 +1177,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     {formik.values.deliveries?.map((delivery, idx) => (
                       <tr key={`delivery-row-${idx}`}>
                         {type !== 'detail' && (
-                          <td>
-                            <div className='flex justify-center'>
-                              <CheckboxInput
-                                name={`delivery-${idx}`}
-                                checked={selectedDeliveries.includes(idx)}
-                                onChange={(
-                                  e: React.ChangeEvent<HTMLInputElement>
-                                ) => {
-                                  if (e.target.checked) {
-                                    setSelectedDeliveries([
-                                      ...selectedDeliveries,
-                                      idx,
-                                    ]);
-                                  } else {
-                                    setSelectedDeliveries(
-                                      selectedDeliveries.filter(
-                                        (i) => i !== idx
-                                      )
-                                    );
-                                  }
-                                }}
-                                classNames={{
-                                  wrapper: 'flex justify-center',
-                                  checkbox: 'checkbox checkbox-sm',
-                                }}
-                              />
-                            </div>
+                          <td className="!align-middle">
+                            <CheckboxInput
+                              name={`delivery-${idx}`}
+                              checked={selectedDeliveries.includes(idx)}
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>,
+                              ) => {
+                                if (e.target.checked) {
+                                  setSelectedDeliveries([
+                                    ...selectedDeliveries,
+                                    idx,
+                                  ]);
+                                } else {
+                                  setSelectedDeliveries(
+                                    selectedDeliveries.filter(
+                                      (i) => i !== idx,
+                                    ),
+                                  );
+                                }
+                              }}
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
+                            />
                           </td>
                         )}
                         <td>
@@ -1373,9 +1387,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             required
                             name={`deliveries.${idx}.delivery_cost`}
                             value={delivery.delivery_cost || ''}
-                            onChange={(e) =>
-                              handleDeliveryCostChange(idx, e.target.value)
-                            }
+                            onChange={handleDeliveryCostChangeWrapper(idx)}
                             onBlur={formik.handleBlur}
                             maskType='currency'
                             decimals={0}
@@ -1397,12 +1409,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             required
                             name={`deliveries.${idx}.delivery_cost_per_item`}
                             value={delivery.delivery_cost_per_item || ''}
-                            onChange={(e) =>
-                              handleDeliveryCostPerItemChange(
-                                idx,
-                                e.target.value
-                              )
-                            }
+                            onChange={handleDeliveryCostPerItemChangeWrapper(idx)}
                             onBlur={formik.handleBlur}
                             maskType='currency'
                             decimals={0}

From a13a51a16fe4d6ba5cabee9071e8c0c01e2caa53 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Sat, 25 Oct 2025 06:15:29 +0700
Subject: [PATCH 67/92] fix(FE-92-93-105): adding input note and quantity for
 create/edit chickin

---
 src/app/production/chickin/add/page.tsx       | 89 ++++++++++++-------
 src/app/production/chickin/detail/layout.tsx  | 11 +++
 src/app/production/chickin/detail/page.tsx    | 74 +++++++++++++++
 .../pages/production/chickin/ChickinTable.tsx |  6 +-
 .../production/chickin/form/ChickinForm.tsx   | 23 +++--
 src/types/api/production/chickin.d.ts         |  2 +
 .../api/production/project-flock-kandang.d.ts |  8 +-
 7 files changed, 169 insertions(+), 44 deletions(-)
 create mode 100644 src/app/production/chickin/detail/layout.tsx
 create mode 100644 src/app/production/chickin/detail/page.tsx

diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index e7fa4c24..feb1d3d2 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -3,6 +3,7 @@
 import Button from '@/components/Button';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
 import Table from '@/components/Table';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
@@ -14,7 +15,7 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { use, useEffect, useState } from 'react';
 
 import useSWR from 'swr';
 
@@ -33,6 +34,11 @@ const AddChickin = () => {
   const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
     undefined
   );
+  const [projectFlockKandang, setProjectFlockKandang] = useState<
+    BaseApiResponse<ProjectFlockKandang>
+  >();
+  const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
+    useState(false);
   const [searchProjectFlock, setSearchProjectFlock] = useState('');
 
   // Fetch Data
@@ -41,44 +47,26 @@ const AddChickin = () => {
     (id: number) => ProjectFlockApi.getSingle(id)
   );
   const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(`${ProjectFlockApi.basePath}?${new URLSearchParams({
-      search: searchProjectFlock,
-    }).toString()}`, ProjectFlockApi.getAllFetcher);
+    useSWR(
+      `${ProjectFlockApi.basePath}?${new URLSearchParams({
+        search: searchProjectFlock,
+      }).toString()}`,
+      ProjectFlockApi.getAllFetcher
+    );
 
   const getProjectFlockKandangUrl = `/kandangs/lookup`;
-  const {
-    data: projectFlockKandang,
-    isLoading: isLoadingProjectFlockKandang,
-    mutate: refreshProjectFlockKandang,
-  } = useSWR(getProjectFlockKandangUrl, () =>
-    ProjectFlockApi.customRequest<BaseApiResponse<ProjectFlockKandang>, 'GET'>(
-      getProjectFlockKandangUrl,
-      {
-        method: 'GET',
-        params: {
-          project_flock_id: projectFlockId ?? 0,
-          kandang_id: selectedKandang?.id,
-        },
-      }
-    )
-  );
-
   // Mapping Options
   const options = isResponseSuccess(listProjectFlock)
     ? listProjectFlock?.data.map((projectFlock) => {
         return {
           value: projectFlock.id,
-          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}` ,
+          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
         };
       })
     : [];
 
   const chickinModal = useModal();
-
-  // Use Effect
-  useEffect(() => {
-    refreshProjectFlockKandang();
-  }, [selectedKandang, refreshProjectFlockKandang]);
+  const alertModal = useModal();
 
   if (!projectFlockId) {
     router.back();
@@ -99,13 +87,35 @@ const AddChickin = () => {
   }
 
   // Handle Function
-  const handleChickinClick = (kandang: Kandang) => {
+  const handleChickinClick = async (kandang: Kandang) =>  {
+    setIsLoadingProjectFlockKandang(true);
     setSelectedKandang(kandang);
-    refreshProjectFlockKandang();
-    chickinModal.openModal();
+    const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
+      BaseApiResponse<ProjectFlockKandang>,
+      'GET'
+    >(getProjectFlockKandangUrl, {
+      method: 'GET',
+      params: {
+        project_flock_id: projectFlockId ?? 0,
+        kandang_id: kandang.id,
+      },
+    });
+    if (
+      isResponseSuccess(ProjectFlockKandangRes)
+    ) {
+      setProjectFlockKandang(ProjectFlockKandangRes);
+      setIsLoadingProjectFlockKandang(false);
+      if (
+        ProjectFlockKandangRes.data.available_quantity &&
+        ProjectFlockKandangRes.data.available_quantity > 0
+      ) {
+        chickinModal.openModal();
+      }else{
+        alertModal.openModal();
+      }
+    }
   };
   const handleAfterSubmit = () => {
-    refreshProjectFlockKandang();
     chickinModal.closeModal();
     router.push('/production/chickin');
   };
@@ -126,7 +136,7 @@ const AddChickin = () => {
               </Button>
 
               <div className='flex flex-col gap-4 w-full my-4'>
-                <div className='max-w-1/4'>
+                <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
                   <SelectInput
                     required
                     isSearchable
@@ -173,10 +183,10 @@ const AddChickin = () => {
                         <Button
                           color='success'
                           variant='outline'
-                          isLoading={isLoadingProjectFlockKandang}
                           onClick={() => {
                             handleChickinClick(props.row.original);
                           }}
+                          disabled={isLoadingProjectFlockKandang}
                         >
                           <Icon
                             icon='mdi:home-import-outline'
@@ -240,6 +250,19 @@ const AddChickin = () => {
                 />
               )}
           </Modal>
+          <ConfirmationModal
+            ref={alertModal.ref}
+            type='info'
+            text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
+            secondaryButton={undefined}
+            primaryButton={{
+              text: 'Ya',
+              color: 'info',
+              onClick: () => {
+                alertModal.closeModal();
+              },
+            }}
+          />
         </>
       )}
     </>
diff --git a/src/app/production/chickin/detail/layout.tsx b/src/app/production/chickin/detail/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/production/chickin/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>
+}
+
+export default Layout;
\ No newline at end of file
diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/chickin/detail/page.tsx
new file mode 100644
index 00000000..42aa5bf8
--- /dev/null
+++ b/src/app/production/chickin/detail/page.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { ChickinApi } from "@/services/api/production";
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+
+const DetailChickin = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const chickinId = searchParams.get('chickinId');
+
+  const {
+    data: chickin,
+    isLoading,
+    mutate: refreshChickin,
+  } = useSWR(
+    chickinId,
+    (id: number) => ChickinApi.getSingle(id)
+  );
+
+  if(!chickinId){
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (
+    !isLoading &&
+    (!chickin || isResponseError(chickin))
+  ) { 
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <>
+      <div className="w-full p-4 flex flex-col justify-center gap-4">
+        {isLoading && <span className='loading loading-spinner loading-xl' />}
+        {!isLoading && isResponseSuccess(chickin) && (
+          <>
+            <div className="card shadow">
+              <div className="card-body">
+                <div className="card-title">
+                  Informasi Project Flock
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <div className="font-semibold">Flock</div>
+                    <div >{chickin.data.project_flock_kandang?.project_flock.flock.name}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="card shadow">
+              <div className="card-body">
+                <div className="card-title">
+                  Informasi Chickin
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default DetailChickin;
\ No newline at end of file
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index e3d908fd..2b3fdc07 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -279,15 +279,15 @@ const RowOptionsMenu = ({
         'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
       )}
     >
-      <Button
-        href={`/production/chickin/detail?projectFlockId=${props.row.original.id}`}
+      {/* <Button
+        href={`/production/chickin/detail?chickinId=${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> */}
       <Button
         variant='ghost'
         color='warning'
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index c6674df4..71e64c35 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -11,7 +11,7 @@ import {
   ChickinFormValues,
   UpdateChickinFormSchema,
 } from '@/components/pages/production/chickin/form/ChickinForm.schema';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { use, useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import { ChickinApi } from '@/services/api/production';
 import DateInput from '@/components/input/DateInput';
@@ -45,8 +45,8 @@ const ChickinForm = ({
   const formikInitialValue = useMemo<ChickinFormValues>(() => {
     return {
       chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
-      note: initialValues?.note ?? `Catatan Chickin ${initialValues?.project_flock_kandang?.project_flock.flock.name}`,
-      quantity: initialValues?.quantity ?? 1,
+      note: initialValues?.note ?? '',
+      quantity: initialValues?.quantity ?? initialValues?.project_flock_kandang?.available_quantity ?? 0,
     };
   }, [initialValues]);
 
@@ -103,6 +103,8 @@ const ChickinForm = ({
       const payload = {
         chick_in_date: values.chick_in_date,
         project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
+        note: values.note,
+        quantity: values.quantity,
       };
 
       // cek type form yang disubmit
@@ -151,21 +153,28 @@ const ChickinForm = ({
           name='quantity'
           label='Jumlah Chickin'
           required
-          isError={formik.touched.quantity && Boolean(formik.errors.quantity)}
-          errorMessage={formik.errors.quantity}
+          isError={
+            (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
+            formik.values.quantity == 0
+          }
+          errorMessage={
+            formik.values.quantity == 0
+              ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
+              : formik.errors.quantity
+          }
           type='number'
-          disabled
+          readOnly
         />
         <TextArea
           required
           label='Catatan'
           name='note'
+          placeholder='Masukan catatan chickin'
           value={formik.values.note}
           onChange={formik.handleChange}
           onBlur={formik.handleBlur}
           isError={formik.touched.note && Boolean(formik.errors.note)}
           errorMessage={formik.errors.note}
-
         />
         {initialValues?.project_flock_kandang?.id == undefined && (
           <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
diff --git a/src/types/api/production/chickin.d.ts b/src/types/api/production/chickin.d.ts
index b4d5cd7a..ad8822b5 100644
--- a/src/types/api/production/chickin.d.ts
+++ b/src/types/api/production/chickin.d.ts
@@ -14,6 +14,8 @@ export type Chickin = BaseMetadata & BaseChickin;
 export type CreateChickinPayload = {
   project_flock_kandang_id: number;
   chick_in_date: string;
+  note: string;
+  quantity?: number;
 }
 
 export type UpdateChickinPayload = CreateChickinPayload;
diff --git a/src/types/api/production/project-flock-kandang.d.ts b/src/types/api/production/project-flock-kandang.d.ts
index d75c403e..83a1c18f 100644
--- a/src/types/api/production/project-flock-kandang.d.ts
+++ b/src/types/api/production/project-flock-kandang.d.ts
@@ -7,6 +7,12 @@ export type BaseProjectFlockKandang = {
   kandang_id: number;
   kandang: Kandang;
   project_flock: ProjectFlock;
+  available_quantity?: number;
 }
 
-export type ProjectFlockKandang = BaseProjectFlockKandang;
\ No newline at end of file
+export type ProjectFlockKandang = BaseProjectFlockKandang;
+
+export type LookupProjectFlockKandangPayload = {
+  project_flock_id: number;
+  kandang_id: number;
+}
\ No newline at end of file

From 6290199074bc8f56db602554850987afd49a3a41 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 25 Oct 2025 10:49:07 +0700
Subject: [PATCH 68/92] feat(FE-Storyless): integrate NumberInput and
 PatternInput components with react-number-format for enhanced input handling

---
 package-lock.json                     |  11 +
 package.json                          |   1 +
 src/components/input/NumberInput.tsx  | 426 ++------------------------
 src/components/input/PatternInput.tsx |  60 ++++
 4 files changed, 104 insertions(+), 394 deletions(-)
 create mode 100644 src/components/input/PatternInput.tsx

diff --git a/package-lock.json b/package-lock.json
index 4a583dbd..6f255a99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-hot-toast": "^2.6.0",
+        "react-number-format": "^5.4.4",
         "react-select": "^5.10.2",
         "swr": "^2.3.6",
         "tailwind-merge": "^3.3.1",
@@ -5834,6 +5835,16 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-number-format": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.4.tgz",
+      "integrity": "sha512-wOmoNZoOpvMminhifQYiYSTCLUDOiUbBunrMrMjA+dV52sY+vck1S4UhR6PkgnoCquvvMSeJjErXZ4qSaWCliA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-select": {
       "version": "5.10.2",
       "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.10.2.tgz",
diff --git a/package.json b/package.json
index 70e5737f..b371e4e7 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
+    "react-number-format": "^5.4.4",
     "react-select": "^5.10.2",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 5b2188ee..8efef51d 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -1,415 +1,53 @@
 'use client';
 
-import {
-  ChangeEvent,
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { ChangeEvent } from 'react';
+import { NumericFormat, OnValueChange } from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
 
-import { cn } from '@/lib/helper';
-import Inputmask from 'inputmask';
-
-const createInputMask = (
-  maskType: MaskType,
-  decimals: number,
-  thousandSeparator: string,
-  decimalSeparator: string,
-  allowNegative: boolean,
-  oncomplete?: () => void,
-  onincomplete?: () => void,
-  oncleared?: () => void
-): Inputmask.Instance => {
-  const options: Inputmask.Options = {
-    alias: 'numeric',
-    groupSeparator: thousandSeparator,
-    radixPoint: decimalSeparator,
-    digits: decimals,
-    allowMinus: allowNegative,
-    rightAlign: false,
-    insertMode: true,
-    autoUnmask: false,
-    clearMaskOnLostFocus: false,
-    digitsOptional: decimals > 0,
-    placeholder: '0',
-    numericInput: false,
-    positionCaretOnClick: 'radixFocus',
-    greedy: true,
-    oncomplete,
-    onincomplete,
-    oncleared
-  };
-
-  return new Inputmask(options);
-};
-
-export type MaskType = 'currency' | 'weight' | 'decimal' | 'number' | 'text';
-
-export interface NumberInputProps {
-  label?: string;
-  bottomLabel?: string;
-  name: string;
-  value?: number | string;
-  placeholder?: string;
-
-  className?: {
-    wrapper?: string;
-    label?: string;
-    inputWrapper?: string;
-    input?: string;
-  };
-
-  isError?: boolean;
-  isValid?: boolean;
-  errorMessage?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  isLoading?: boolean;
-
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-
-  maskType?: MaskType;
-  decimals?: number;
+interface NumberInputProps extends Omit<TextInputProps, 'type'> {
   thousandSeparator?: string;
   decimalSeparator?: string;
-  currencyPrefix?: string;
-  weightUnit?: string;
-
-  min?: number;
-  max?: number;
+  decimalScale?: number;
   allowNegative?: boolean;
-
-  oncomplete?: () => void;
-  onincomplete?: () => void;
-  oncleared?: () => void;
+  prefix?: string;
+  suffix?: string;
+  fixedDecimalScale?: boolean;
 }
 
 const NumberInput = ({
-                       label,
-                       bottomLabel,
-                       name,
-                       value,
-                       placeholder,
-                       className,
-                       isError,
-                       isValid,
-                       errorMessage,
-                       startAdornment,
-                       endAdornment,
-                       disabled = false,
-                       required = false,
-                       onChange,
-                       onBlur,
-                       onFocus,
-                       readOnly = false,
-                       isLoading = false,
-                       maskType = 'number',
-                       decimals = 0,
                        thousandSeparator = ',',
                        decimalSeparator = '.',
-                       currencyPrefix = 'Rp ',
-                       weightUnit = 'kg',
-                       allowNegative = false,
-                       oncomplete,
-                       onincomplete,
-                       oncleared,
+                       decimalScale = 5,
+                       allowNegative = true,
+                       onChange,
+                       ...restProps
                      }: NumberInputProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputmaskRef = useRef<Inputmask.Instance | null>(null);
-  const [maskComplete, setMaskComplete] = useState<boolean>(false);
-  const [maskIncomplete, setMaskIncomplete] = useState<boolean>(false);
-  const [maskCleared, setMaskCleared] = useState<boolean>(false);
+  const valueChangeHandler: OnValueChange = (
+    numberFormatValues,
+    sourceInfo
+  ) => {
+    const newChangeEvent = sourceInfo.event as
+      | ChangeEvent<HTMLInputElement>
+      | undefined;
 
-  const getInputPrefix = (): string => {
-    switch (maskType) {
-      case 'currency':
-        return currencyPrefix;
-      default:
-        return '';
+    if (newChangeEvent) {
+      newChangeEvent.target.value = numberFormatValues.value;
+
+      onChange?.(newChangeEvent);
     }
   };
 
-  const getInputSuffix = (): string => {
-    switch (maskType) {
-      case 'weight':
-        return weightUnit;
-      default:
-        return '';
-    }
-  };
-
-  useEffect(() => {
-    if (inputRef.current && !readOnly && !disabled) {
-      if (inputmaskRef.current) {
-        try {
-          inputmaskRef.current.remove();
-        } catch (error) {
-          console.warn('Error removing Inputmask:', error);
-        }
-      }
-
-      const handleComplete = () => {
-        setMaskComplete(true);
-        setMaskIncomplete(false);
-        setMaskCleared(false);
-        if (oncomplete) oncomplete();
-      };
-
-      const handleIncomplete = () => {
-        setMaskIncomplete(true);
-        setMaskComplete(false);
-        setMaskCleared(false);
-        if (onincomplete) onincomplete();
-      };
-
-      const handleCleared = () => {
-        setMaskCleared(true);
-        setMaskComplete(false);
-        setMaskIncomplete(false);
-        if (oncleared) oncleared();
-      };
-
-          const im = createInputMask(
-        maskType,
-        decimals,
-        ',',
-        '.',
-        allowNegative,
-        handleComplete,
-        handleIncomplete,
-        handleCleared
-      );
-
-      try {
-        im.mask(inputRef.current);
-        inputmaskRef.current = im;
-      } catch (error) {
-        console.warn('Error applying Inputmask:', error);
-        inputmaskRef.current = null;
-      }
-    }
-
-    return () => {
-      if (inputmaskRef.current) {
-        try {
-          inputmaskRef.current.remove();
-        } catch (error) {
-          console.warn('Error removing Inputmask on cleanup:', error);
-        }
-      }
-    };
-  }, [maskType, decimals, thousandSeparator, decimalSeparator, allowNegative, readOnly, disabled, oncomplete, onincomplete, oncleared]);
-
-  useEffect(() => {
-    if (inputRef.current && value !== undefined) {
-      if (value === null || value === '') {
-        inputRef.current.value = '';
-      } else {
-        inputRef.current.value = String(value);
-      }
-    }
-  }, [value]);
-
-  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const currentValue = (e.currentTarget as HTMLInputElement).value;
-    console.log('✅ After format:', currentValue);
-
-    if (onChange) {
-      const syntheticEvent = {
-        target: {
-          name,
-          value: currentValue,
-        },
-      } as ChangeEvent<HTMLInputElement>;
-      onChange(syntheticEvent);
-    }
-  };
-
-  const inputPrefix = getInputPrefix();
-  const inputSuffix = getInputSuffix();
-
   return (
-    <div
-      className={cn(
-        'w-full flex flex-col gap-2 text-start',
-        className?.wrapper
-      )}
-    >
-      {label && (
-        <label
-          htmlFor={name}
-          className={cn(
-            'w-full text-sm font-normal leading-5',
-            {
-              'text-error': isError,
-            },
-            className?.label
-          )}
-        >
-          {label}
-          {required && (
-            <>
-              {' '}
-              <span className='tooltip tooltip-error' data-tip='required'>
-                <span className='text-error'> *</span>
-              </span>
-            </>
-          )}
-        </label>
-      )}
-
-      <div className='relative flex'>
-        {inputPrefix && (
-          <div
-            className={cn(
-              'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
-              {
-                'bg-gray-100 border-gray-300': !disabled,
-                'bg-gray-50 border-gray-200': disabled,
-              }
-            )}
-          >
-            <span
-              className={cn(
-                'text-sm font-medium select-none whitespace-nowrap',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputPrefix}
-            </span>
-          </div>
-        )}
-
-        <div
-          className={cn(
-            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
-            {
-              'border-error': isError,
-              'border-success!': isValid,
-              'rounded-l-none!': inputPrefix,
-              'rounded-r-none!': inputSuffix,
-              'input-disabled': disabled,
-              'cursor-not-allowed': disabled,
-              'bg-gray-50': disabled,
-            },
-            className?.inputWrapper
-          )}
-        >
-          {startAdornment && startAdornment}
-
-          <input
-            type='text'
-            id={name}
-            name={name}
-            ref={inputRef}
-            placeholder={placeholder || '0'}
-            onKeyUp={handleKeyUp}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            disabled={disabled}
-            className={cn(
-              'grow bg-transparent outline-none',
-              {
-                'cursor-not-allowed': disabled,
-                'text-gray-500': disabled,
-              },
-              className?.input
-            )}
-            readOnly={readOnly}
-            inputMode='text'
-            autoComplete='off'
-            spellCheck={false}
-          />
-
-          {(isLoading || endAdornment) && (
-            <div className='flex flex-row gap-2'>
-              {isLoading && <span className='loading loading-spinner' />}
-              {endAdornment && endAdornment}
-            </div>
-          )}
-        </div>
-
-        {inputSuffix && (
-          <div
-            className={cn(
-              'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
-              {
-                'bg-gray-100 border-gray-300': !disabled,
-                'bg-gray-50 border-gray-200': disabled,
-              }
-            )}
-          >
-            <span
-              className={cn(
-                'text-sm font-medium select-none whitespace-nowrap',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputSuffix}
-            </span>
-          </div>
-        )}
-      </div>
-
-      {(maskType === 'text' || (oncomplete || onincomplete || oncleared)) && (
-        <div className='flex gap-2 text-xs'>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskComplete
-                ? 'bg-green-100 text-green-700 border border-green-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Complete
-          </span>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskIncomplete
-                ? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Incomplete
-          </span>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskCleared
-                ? 'bg-blue-100 text-blue-700 border border-blue-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Cleared
-          </span>
-        </div>
-      )}
-
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
-      )}
-    </div>
+    <NumericFormat
+      thousandSeparator={thousandSeparator}
+      decimalSeparator={decimalSeparator}
+      customInput={TextInput}
+      onValueChange={valueChangeHandler}
+      decimalScale={decimalScale}
+      allowNegative={allowNegative}
+      {...restProps}
+    />
   );
 };
 
 export default NumberInput;
-
diff --git a/src/components/input/PatternInput.tsx b/src/components/input/PatternInput.tsx
new file mode 100644
index 00000000..1905d2e3
--- /dev/null
+++ b/src/components/input/PatternInput.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { ChangeEvent } from 'react';
+import { PatternFormat, OnValueChange } from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+
+interface PatternInputProps extends Omit<TextInputProps, 'type'> {
+  type?: 'password' | 'tel' | 'text' | undefined;
+
+  /** Format pattern, e.g. "##/##/####", "(###) ###-####", "####-####-####" */
+  format: string;
+
+  /** Mask character for empty slots, e.g. "_" */
+  mask?: string;
+
+  /** Allow showing mask even when value is empty */
+  allowEmptyFormatting?: boolean;
+
+  patternChar?: string;
+}
+
+const PatternInput = ({
+                        type = 'text',
+                        format,
+                        mask = '_',
+                        allowEmptyFormatting = false,
+                        patternChar = '#',
+                        onChange,
+                        ...restProps
+                      }: PatternInputProps) => {
+  const valueChangeHandler: OnValueChange = (
+    patternFormatValues,
+    sourceInfo
+  ) => {
+    const newChangeEvent = sourceInfo.event as
+      | ChangeEvent<HTMLInputElement>
+      | undefined;
+
+    if (newChangeEvent) {
+      newChangeEvent.target.value = patternFormatValues.value;
+
+      onChange?.(newChangeEvent);
+    }
+  };
+
+  return (
+    <PatternFormat
+      type={type}
+      format={format}
+      mask={mask}
+      allowEmptyFormatting={allowEmptyFormatting}
+      patternChar={patternChar}
+      customInput={TextInput}
+      onValueChange={valueChangeHandler}
+      {...restProps}
+    />
+  );
+};
+
+export default PatternInput;

From d7ce8c667a0ea5b02cab44785052c74735de41b7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 25 Oct 2025 11:26:38 +0700
Subject: [PATCH 69/92] refactor(FE-114): simplify input handling in
 MovementForm and RecordingForm by removing unnecessary value normalization

---
 .../inventory/movement/form/MovementForm.tsx  | 22 ++++-----
 .../recording/form/RecordingForm.tsx          | 47 +++++++------------
 2 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 6d6317da..7cd5bb50 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -427,9 +427,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const handleDeliveryCostChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
-      const normalizedValue = rawValue.replace(/,/g, '');
-      const value = parseFloat(normalizedValue) || 0;
+      const value = parseFloat(e.target.value) || 0;
       handleDeliveryCostChange(idx, value);
     },
     [handleDeliveryCostChange]
@@ -437,9 +435,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const handleDeliveryCostPerItemChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
-      const normalizedValue = rawValue.replace(/,/g, '');
-      const value = parseFloat(normalizedValue) || 0;
+      const value = parseFloat(e.target.value) || 0;
       handleDeliveryCostPerItemChange(idx, value);
     },
     [handleDeliveryCostPerItemChange]
@@ -1389,9 +1385,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={delivery.delivery_cost || ''}
                             onChange={handleDeliveryCostChangeWrapper(idx)}
                             onBlur={formik.handleBlur}
-                            maskType='currency'
-                            decimals={0}
-                            min={0}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=','
+                            decimalSeparator='.'
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost',
@@ -1411,9 +1408,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={delivery.delivery_cost_per_item || ''}
                             onChange={handleDeliveryCostPerItemChangeWrapper(idx)}
                             onBlur={formik.handleBlur}
-                            maskType='currency'
-                            decimals={0}
-                            min={0}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=','
+                            decimalSeparator='.'
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost_per_item',
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index ca4a696d..deaffc9a 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -494,16 +494,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   };
 
   const handleWeightChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
-    const normalizedValue = rawValue.replace(/,/g, '');
-    const value = parseFloat(normalizedValue) || 0;
+    const value = parseFloat(e.target.value) || 0;
     handleWeightChange(idx, value);
   };
 
   const handleQtyChangeWrapper = (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
-    const normalizedValue = rawValue.replace(/,/g, '');
-    const value = parseFloat(normalizedValue) || 0;
+    const value = parseFloat(e.target.value) || 0;
     handleQtyChange(idx, value);
   };
 
@@ -511,9 +507,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     setEditingAverageIndex(idx);
     setManuallyEditedRows(prev => new Set(prev).add(idx));
 
-    const rawValue = e.target.value.replace(/[^\d,.-]/g, '');
-    const normalizedValue = rawValue.replace(/,/g, '');
-    const value = parseFloat(normalizedValue) || 0;
+    const value = parseFloat(e.target.value) || 0;
     handleAverageWeightChange(idx, value);
   };
 
@@ -551,7 +545,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const handleStockUsageAmountChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
+      const value = parseFloat(e.target.value) || 0;
       formik.setFieldValue(`stocks.${idx}.usage_amount`, value);
     },
     [formik]
@@ -584,7 +578,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const handleDepletionTotalChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
+      const value = parseFloat(e.target.value) || 0;
       formik.setFieldValue(`depletions.${idx}.total`, value);
     },
     [formik]
@@ -801,10 +795,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={bw.weight}
                         onChange={handleWeightChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='weight'
-                        weightUnit='gram'
-                        decimals={2}
-                        min={0}
+                        decimalScale={2}
+                        allowNegative={false}
                         thousandSeparator=','
                         decimalSeparator='.'
                         isError={
@@ -828,9 +820,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={bw.qty}
                         onChange={handleQtyChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
+                        decimalScale={0}
+                        allowNegative={false}
                         thousandSeparator=','
                         decimalSeparator='.'
                         isError={
@@ -856,10 +847,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           handleAverageWeightBlur(idx);
                           formik.handleBlur(e);
                         }}
-                        maskType='weight'
-                        weightUnit='gram'
-                        decimals={2}
-                        min={0}
+                        decimalScale={2}
+                        allowNegative={false}
                         thousandSeparator=','
                         decimalSeparator='.'
                         isError={
@@ -1063,11 +1052,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={stock.usage_amount}
                         onChange={handleStockUsageAmountChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
+                        decimalScale={0}
+                        allowNegative={false}
                         thousandSeparator=','
-                        decimalSeparator=''
+                        decimalSeparator='.'
                         isError={
                           isRepeaterInputError('stocks', 'usage_amount', idx)
                             .isError || Boolean(getStockUsageError(idx))
@@ -1255,11 +1243,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={depletion.total}
                         onChange={handleDepletionTotalChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
+                        decimalScale={0}
+                        allowNegative={false}
                         thousandSeparator=','
-                        decimalSeparator=''
+                        decimalSeparator='.'
                         isError={
                           isRepeaterInputError('depletions', 'total', idx)
                             .isError

From a0556ea1f471c51ffd9cea2a2f25564b1d89df7e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 25 Oct 2025 13:53:53 +0700
Subject: [PATCH 70/92] refactor(FE-114): add currency prefix and unit suffix
 to delivery cost and body weight inputs

---
 src/components/pages/inventory/movement/form/MovementForm.tsx   | 2 ++
 .../pages/production/recording/form/RecordingForm.tsx           | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 7cd5bb50..2f8c762f 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1389,6 +1389,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             allowNegative={false}
                             thousandSeparator=','
                             decimalSeparator='.'
+                            prefix="Rp "
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost',
@@ -1412,6 +1413,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             allowNegative={false}
                             thousandSeparator=','
                             decimalSeparator='.'
+                            prefix="Rp "
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost_per_item',
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index deaffc9a..1e7b053f 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -799,6 +799,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         allowNegative={false}
                         thousandSeparator=','
                         decimalSeparator='.'
+                        suffix=" gram"
                         isError={
                           isRepeaterInputError('body_weights', 'weight', idx)
                             .isError
@@ -851,6 +852,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         allowNegative={false}
                         thousandSeparator=','
                         decimalSeparator='.'
+                        suffix=" gram"
                         isError={
                           isRepeaterInputError('body_weights', 'average_weight', idx)
                             .isError

From f0f6ec53cb300b20716de2d3027d6d9e8da3a30f Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Sat, 25 Oct 2025 13:58:46 +0700
Subject: [PATCH 71/92] refactor(FE-84-87) refactor checkbox using reuseable
 component checkboxinput

---
 src/app/production/chickin/add/page.tsx       |  15 +-
 src/app/production/chickin/detail/page.tsx    |   1 -
 .../production/project-flock/detail/page.tsx  |  51 ++--
 src/app/production/project-flock/page.tsx     |   1 -
 src/components/PillBadge.tsx                  |  31 +++
 src/components/Table.tsx                      |  13 +
 src/components/input/CheckboxInput.tsx        |  89 +++++++
 .../project-flock/ProjectFlockTable.tsx       | 169 ++++++-------
 .../project-flock/form/ProjectFlockForm.tsx   | 235 ++++++------------
 .../form/ProjectFlockKandangTable.tsx         | 146 +++++++++++
 10 files changed, 476 insertions(+), 275 deletions(-)
 create mode 100644 src/components/PillBadge.tsx
 create mode 100644 src/components/input/CheckboxInput.tsx
 create mode 100644 src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx

diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index feb1d3d2..1823b41a 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -15,7 +15,7 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { use, useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import useSWR from 'swr';
 
@@ -34,9 +34,8 @@ const AddChickin = () => {
   const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
     undefined
   );
-  const [projectFlockKandang, setProjectFlockKandang] = useState<
-    BaseApiResponse<ProjectFlockKandang>
-  >();
+  const [projectFlockKandang, setProjectFlockKandang] =
+    useState<BaseApiResponse<ProjectFlockKandang>>();
   const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
     useState(false);
   const [searchProjectFlock, setSearchProjectFlock] = useState('');
@@ -87,7 +86,7 @@ const AddChickin = () => {
   }
 
   // Handle Function
-  const handleChickinClick = async (kandang: Kandang) =>  {
+  const handleChickinClick = async (kandang: Kandang) => {
     setIsLoadingProjectFlockKandang(true);
     setSelectedKandang(kandang);
     const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
@@ -100,9 +99,7 @@ const AddChickin = () => {
         kandang_id: kandang.id,
       },
     });
-    if (
-      isResponseSuccess(ProjectFlockKandangRes)
-    ) {
+    if (isResponseSuccess(ProjectFlockKandangRes)) {
       setProjectFlockKandang(ProjectFlockKandangRes);
       setIsLoadingProjectFlockKandang(false);
       if (
@@ -110,7 +107,7 @@ const AddChickin = () => {
         ProjectFlockKandangRes.data.available_quantity > 0
       ) {
         chickinModal.openModal();
-      }else{
+      } else {
         alertModal.openModal();
       }
     }
diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/chickin/detail/page.tsx
index 42aa5bf8..d62c92bf 100644
--- a/src/app/production/chickin/detail/page.tsx
+++ b/src/app/production/chickin/detail/page.tsx
@@ -13,7 +13,6 @@ const DetailChickin = () => {
   const {
     data: chickin,
     isLoading,
-    mutate: refreshChickin,
   } = useSWR(
     chickinId,
     (id: number) => ChickinApi.getSingle(id)
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index bf0da188..bea96b84 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -1,46 +1,51 @@
-'use client'
+'use client';
 
-
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { ProjectFlockApi } from "@/services/api/production";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const ProjectFlockDetail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const projectFlockId = searchParams.get("projectFlockId");
+  const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
-  );
+  const {
+    data: projectFlock,
+    isLoading: isLoadingProjectFlock,
+    mutate: refreshProjectFlock,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
-  if(!projectFlockId){
+  if (!projectFlockId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingProjectFlock && (!projectFlock || isResponseError(projectFlock))){
-    router.replace("/404");
+  if (
+    !isLoadingProjectFlock &&
+    (!projectFlock || isResponseError(projectFlock))
+  ) {
+    router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
-      {isLoadingProjectFlock && <span className="loading loading-spinner loading-xl" />}
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingProjectFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm formType="detail" initialValues={projectFlock.data} />
+        <ProjectFlockForm formType='detail' initialValues={projectFlock.data} refreshProjectFlocks={refreshProjectFlock} />
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ProjectFlockDetail;
\ No newline at end of file
+export default ProjectFlockDetail;
diff --git a/src/app/production/project-flock/page.tsx b/src/app/production/project-flock/page.tsx
index fdb8775d..d264d9e4 100644
--- a/src/app/production/project-flock/page.tsx
+++ b/src/app/production/project-flock/page.tsx
@@ -1,4 +1,3 @@
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"
 import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
 
 const ProjectFlock = () => {
diff --git a/src/components/PillBadge.tsx b/src/components/PillBadge.tsx
new file mode 100644
index 00000000..827177a9
--- /dev/null
+++ b/src/components/PillBadge.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+interface PillBadgeProps {
+  content: ReactNode;
+  color?: 'yellow' | 'blue' | 'green' | 'red' | 'purple' | 'gray';
+  className?: string;
+}
+
+const PillBadge = ({ content, color = 'gray', className }: PillBadgeProps) => {
+  return (
+    <div
+      className={cn(
+        'w-fit min-w-max px-2 py-0.5 flex justify-center items-center gap-1 rounded-full border border-gray-200 bg-gray-50 text-gray-500 drop-shadow-xs capitalize',
+        {
+          'border-yellow-200 bg-yellow-50 text-yellow-500': color === 'yellow',
+          'border-blue-200 bg-blue-50 text-blue-500': color === 'blue',
+          'border-green-200 bg-green-50 text-green-500': color === 'green',
+          'border-red-200 bg-red-50 text-red-500': color === 'red',
+          'border-purple-200 bg-purple-50 text-purple-500': color === 'purple',
+          'border-neutral-200 bg-neutral-50 text-neutral-500': color === 'gray',
+        },
+        className
+      )}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default PillBadge;
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index cfd77df6..d3498e33 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -48,6 +48,8 @@ export interface TableProps<TData extends object> {
   sorting?: SortingState;
   setSorting?: OnChangeFn<SortingState>;
   manualSorting?: boolean;
+  rowSelection?: Record<string, boolean>;
+  setRowSelection?: OnChangeFn<Record<string, boolean>>;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -86,6 +88,8 @@ const Table = <TData extends object>({
   sorting,
   setSorting,
   manualSorting = false,
+  rowSelection,
+  setRowSelection,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -137,6 +141,15 @@ const Table = <TData extends object>({
     };
   }
 
+  if (rowSelection && setRowSelection) {
+    tableOptions.onRowSelectionChange = setRowSelection;
+    tableOptions.state = {
+      ...tableOptions.state,
+      rowSelection,
+    };
+    tableOptions.getRowId = (row) => (row as { id: string }).id;
+  }
+
   const table = useReactTable(tableOptions);
   const { setPageSize } = table;
 
diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
new file mode 100644
index 00000000..fb0c95c7
--- /dev/null
+++ b/src/components/input/CheckboxInput.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { HTMLProps, useEffect, useRef } from 'react';
+import { cn } from '@/lib/helper';
+
+interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
+  name: string;
+  label?: string;
+  indeterminate?: boolean;
+  classNames?: {
+    wrapper?: string;
+    inputWrapper?: string;
+    checkbox?: string;
+    label?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+}
+
+const CheckboxInput = ({
+  indeterminate,
+  name,
+  label,
+  className,
+  classNames,
+  isValid,
+  isError,
+  errorMessage,
+  ...rest
+}: CheckboxInputProps) => {
+  const ref = useRef<HTMLInputElement>(null!);
+
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
+
+  return (
+    <div
+      className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
+    >
+      <div
+        className={cn(
+          'flex flex-row justify-center items-center gap-2',
+          classNames?.inputWrapper
+        )}
+      >
+        <input
+          type='checkbox'
+          ref={ref}
+          id={name}
+          name={name}
+          className={cn(
+            'checkbox cursor-pointer',
+            {
+              'border-error': isError,
+              'border-success': isValid,
+            },
+            className,
+            classNames?.checkbox
+          )}
+          {...rest}
+        />
+
+        {label && (
+          <label
+            htmlFor={name}
+            className={cn(
+              'text-inherit',
+              {
+                'text-error': isError,
+                'text-success': isValid,
+              },
+              classNames?.label
+            )}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+
+      {errorMessage && <span className='text-error'>{errorMessage}</span>}
+    </div>
+  );
+};
+
+export default CheckboxInput;
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 95361278..3f4afc47 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Button from '@/components/Button';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
@@ -120,10 +121,15 @@ const ProjectFlockTable = () => {
       periodFilter: 'period',
     },
   });
+
+  // State
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection)
+    .filter((id) => rowSelection[id])
+    .map((id) => parseInt(id));
   const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
   const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
   const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
-
   const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
     null
@@ -132,6 +138,14 @@ const ProjectFlockTable = () => {
     null
   );
   const [periodInputValue, setPeriodInputValue] = useState<number | null>(null);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<ProjectFlock>();
+  const deleteModal = useModal();
+  const confirmModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
 
   // Fetch Data
   const {
@@ -193,16 +207,6 @@ const ProjectFlockTable = () => {
       }))
     : [];
 
-  // State
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedProjectFlock, setSelectedProjectFlock] =
-    useState<ProjectFlock>();
-  const deleteModal = useModal();
-  const confirmModal = useModal();
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<number[]>([]);
-  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
-  const [isApproveLoading, setIsApproveLoading] = useState(false);
   // Handler
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
@@ -221,40 +225,6 @@ const ProjectFlockTable = () => {
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
-  const handleSelectAll = (checked: boolean) => {
-    if (checked && isResponseSuccess(projectFlocks)) {
-      const allIds = projectFlocks.data
-        .filter((item) => item.approval.step_name === 'Pengajuan')
-        .map((item) => item.id);
-      setSelectedIds(allIds);
-      setSelectedFlocks(
-        projectFlocks.data.filter(
-          (item) => item.approval.step_name === 'Pengajuan'
-        )
-      );
-    } else {
-      setSelectedIds([]);
-      setSelectedFlocks([]);
-    }
-  };
-
-  const handleSelectRow = (id: number, checked: boolean) => {
-    if (!isResponseSuccess(projectFlocks)) return;
-
-    const targetFlock = projectFlocks.data.find((item) => item.id === id);
-
-    if (!targetFlock) return;
-
-    if (checked) {
-      setSelectedIds((prev) => [...prev, id]);
-      setSelectedFlocks((prev) => [...(prev || []), targetFlock]);
-    } else {
-      setSelectedIds((prev) => prev.filter((val) => val !== id));
-      setSelectedFlocks((prev) =>
-        (prev || []).filter((flock) => flock.id !== id)
-      );
-    }
-  };
 
   const confirmationModalApproveClickHandler = async () => {
     setIsApproveLoading(true);
@@ -265,7 +235,7 @@ const ProjectFlockTable = () => {
       method: 'POST',
       payload: {
         action: 'APPROVED',
-        approvable_ids: selectedFlocks.map((flock) => flock.id),
+        approvable_ids: selectedRowIds.map((id) => id),
       },
     });
 
@@ -277,8 +247,7 @@ const ProjectFlockTable = () => {
       toast.error(approveProjectFlockRes?.message as string);
       confirmModal.closeModal();
     }
-    setSelectedIds([]);
-    setSelectedFlocks([]);
+    setRowSelection({});
     refreshProjectFlocks();
     setIsApproveLoading(false);
   };
@@ -301,11 +270,9 @@ const ProjectFlockTable = () => {
                 variant='outline'
                 color='success'
                 onClick={() => {
-                  if (selectedIds.length > 0) {
-                    confirmModal.openModal();
-                  }
+                  confirmModal.openModal();
                 }}
-                disabled={!(selectedIds.length > 0)}
+                disabled={selectedRowIds.length === 0}
                 className='w-full sm:w-fit'
               >
                 <Icon icon='material-symbols:check' width={24} height={24} />
@@ -400,33 +367,58 @@ const ProjectFlockTable = () => {
             columns={[
               {
                 id: 'select',
-                header: () => {
-                  const allSelected =
-                    isResponseSuccess(projectFlocks) &&
-                    projectFlocks.data.length > 0 &&
-                    selectedIds.length === projectFlocks.data.length;
-                  return (
-                    <input
-                      type='checkbox'
-                      className='checkbox checkbox-sm'
-                      checked={allSelected}
-                      onChange={(e) => handleSelectAll(e.target.checked)}
-                    />
+                header: ({ table }) => {
+                  const allRows = table.getRowModel().rows;
+                  const selectableRows = allRows.filter(
+                    (row) => row.original?.approval?.step_number == 1
                   );
-                },
-                cell: (props) => {
-                  const id = props.row.original.id;
-                  const isChecked = selectedIds.includes(id);
+                  
+                  const allSelected = selectableRows.every((row) =>
+                    row.getIsSelected()
+                  ) && selectableRows.length != 0;
+
+                  const someSelected =
+                    selectableRows.some((row) => row.getIsSelected()) &&
+                    !allSelected;
+
+                  const toggleSelectableRows = () => {
+                    const shouldSelect = !allSelected;
+                    selectableRows.forEach((row) =>
+                      row.toggleSelected(shouldSelect)
+                    );
+                  };
 
                   return (
-                    <input
-                      disabled={
-                        props.row.original.approval.step_name != 'Pengajuan'
+                    <div className='w-full flex flex-row justify-center'>
+                      <CheckboxInput
+                        name='allRow'
+                        checked={allSelected}
+                        indeterminate={someSelected}
+                        onChange={toggleSelectableRows}
+                        disabled={
+                          isResponseSuccess(projectFlocks) &&
+                          projectFlocks?.data?.filter(
+                            (flock) => flock.approval.step_number == 1
+                          ).length == 0
+                        }
+                      />
+                    </div>
+                  );
+                },
+                cell: ({ row }) => {
+                  return (
+                    <CheckboxInput
+                      name='row'
+                      checked={
+                        row.getIsSelected() &&
+                        row.original.approval.step_number == 1
                       }
-                      type='checkbox'
-                      className='checkbox checkbox-sm'
-                      checked={isChecked}
-                      onChange={(e) => handleSelectRow(id, e.target.checked)}
+                      disabled={
+                        !row.getCanSelect() ||
+                        row.original.approval.step_number != 1
+                      }
+                      indeterminate={row.getIsSomeSelected()}
+                      onChange={row.getToggleSelectedHandler()}
                     />
                   );
                 },
@@ -541,6 +533,8 @@ const ProjectFlockTable = () => {
             isLoading={isLoading}
             sorting={sorting}
             setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
             className={{
               containerClassName: cn({
                 'mb-20':
@@ -578,18 +572,19 @@ const ProjectFlockTable = () => {
       <ConfirmationModal
         ref={confirmModal.ref}
         type='success'
-        text={
-          selectedFlocks.length > 0
-            ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
-                .map(
-                  (flock) =>
-                    `${flock.flock?.name ?? '(Tanpa nama)'} - ${
-                      flock.area?.name ?? '-'
-                    }`
-                )
-                .join(', ')})`
-            : 'Tidak ada Project Flock yang dipilih.'
-        }
+        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        // text={
+        //   selectedFlocks.length > 0
+        //     ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
+        //         .map(
+        //           (flock) =>
+        //             `${flock.flock?.name ?? '(Tanpa nama)'} - ${
+        //               flock.area?.name ?? '-'
+        //             }`
+        //         )
+        //         .join(', ')})`
+        //     : 'Tidak ada Project Flock yang dipilih.'
+        // }
         secondaryButton={{
           text: 'Tidak',
         }}
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index d098aba3..14eee9b7 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -14,7 +14,7 @@ import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import useSWR from 'swr';
+import useSWR, { KeyedMutator } from 'swr';
 import {
   ProjectFlockFormSchema,
   ProjectFlockFormValues,
@@ -35,15 +35,20 @@ import { BaseApiResponse } from '@/types/api/api-general';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ProjectFlockKandangTable from './ProjectFlockKandangTable';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
   initialValues?: ProjectFlock;
+  refreshProjectFlocks?: KeyedMutator<
+    BaseApiResponse<ProjectFlock> | undefined
+  >;
 }
 
 const ProjectFlockForm = ({
   formType = 'add',
   initialValues,
+  refreshProjectFlocks,
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
@@ -71,18 +76,34 @@ const ProjectFlockForm = ({
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
-  const [isApprovedDisabled, setIsApprovedDisabled] = useState(initialValues?.approval.step_name == 'Pengajuan' ? false : true);
-  const [isRejectedDisabled, setIsRejectedDisabled] = useState(!isApprovedDisabled);
-  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(!isApprovedDisabled ? 'APPROVED' : 'REJECTED');
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
+    initialValues?.approval.step_name == 'Pengajuan' ? false : true
+  );
+  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
+    !isApprovedDisabled
+  );
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
+  );
+
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
+    () =>
+      Object.fromEntries(
+        (initialValues?.kandangs ?? []).map((k: Kandang) => [
+          k.id.toString(),
+          true,
+        ])
+      )
+  );
 
   useEffect(() => {
-  if (initialValues?.approval?.step_name) {
-    const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
-    setIsApprovedDisabled(approvedDisabled);
-    setIsRejectedDisabled(!approvedDisabled);
-    setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
-  }
-}, [initialValues]);
+    if (initialValues?.approval?.step_name) {
+      const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
+      setIsApprovedDisabled(approvedDisabled);
+      setIsRejectedDisabled(!approvedDisabled);
+      setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
+    }
+  }, [initialValues]);
 
   // Fetch Data
   const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
@@ -122,7 +143,7 @@ const ProjectFlockForm = ({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
   }).toString()}`;
-  const { data: kandang, isLoading: isLoadingKandang } = useSWR(
+  const { data: kandang, isLoading: isLoadingKandang, mutate: refreshKandang} = useSWR(
     kandangUrl,
     KandangApi.getAllFetcher
   );
@@ -180,6 +201,20 @@ const ProjectFlockForm = ({
       }
     }
   }, [kandang]);
+  useEffect(() => {
+    if (initialValues?.kandangs) {
+      refreshKandang();
+      setOpenSelectKandangs(true);
+
+      const newRowSelection = Object.fromEntries(
+        initialValues.kandangs.map((k: Kandang) => [
+          k.id.toString(),
+          true,
+        ])
+      );
+      setRowSelection(newRowSelection);
+    }
+  }, [initialValues, refreshKandang]);
 
   // Options Handler
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -224,38 +259,6 @@ const ProjectFlockForm = ({
     formik.setFieldTouched('category', true);
   };
 
-  const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value, checked } = event.target;
-    if (checked) {
-      formik.setFieldValue(
-        'kandang_ids',
-        formik.values.kandang_ids.concat(parseInt(value))
-      );
-    } else {
-      formik.setFieldValue(
-        'kandang_ids',
-        formik.values.kandang_ids.filter((id) => id !== parseInt(value))
-      );
-    }
-  };
-  const kandangCheckAll = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
-    if (checked) {
-      formik.setFieldValue(
-        'kandang_ids',
-        optionsKandang
-          .filter(
-            (kandang) =>
-              kandang.status === 'NON_ACTIVE' ||
-              formik.values.kandang_ids.includes(kandang.id)
-          )
-          .map((kandang) => kandang.id)
-      );
-    } else {
-      formik.setFieldValue('kandang_ids', []);
-    }
-  };
-
   // Submit Handler
   const createProjectFlockHandler = async (
     payload: CreateProjectFlockPayload
@@ -418,6 +421,16 @@ const ProjectFlockForm = ({
     }
   }, [periodFlocks]);
 
+  useEffect(() => {
+    const selectedRowIds = Object.keys(rowSelection)
+      .filter((id) => rowSelection[id])
+      .map((id) => parseInt(id));
+    formikSetValues({
+      ...formik.values,
+      kandang_ids: selectedRowIds,
+    });
+  }, [rowSelection, formikSetValues]);
+
   // Actions handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -454,14 +467,17 @@ const ProjectFlockForm = ({
     });
 
     if (isResponseSuccess(approveProjectFlockRes)) {
-      if(action == 'APPROVED'){
-        setIsApprovedDisabled(true);
-        setIsRejectedDisabled(false);
-      }
-      if(action == 'REJECTED'){
-        setIsRejectedDisabled(true);
-        setIsApprovedDisabled(false);
+      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)) {
@@ -520,10 +536,7 @@ const ProjectFlockForm = ({
                   confirmModal.openModal();
                 }
               }}
-              disabled={
-                !initialValues?.id ||
-                isApprovedDisabled
-              }
+              disabled={!initialValues?.id || isApprovedDisabled}
               className='w-full sm:w-fit'
             >
               <Icon icon='material-symbols:check' width={24} height={24} />
@@ -538,10 +551,7 @@ const ProjectFlockForm = ({
                   confirmModal.openModal();
                 }
               }}
-              disabled={
-                !initialValues?.id ||
-                isRejectedDisabled
-              }
+              disabled={!initialValues?.id || isRejectedDisabled}
               className='w-full sm:w-fit'
             >
               <Icon icon='mdi:times' width={24} height={24} />
@@ -682,100 +692,13 @@ const ProjectFlockForm = ({
                   {isLoadingKandang && (
                     <span className='loading loading-dots loading-xl'></span>
                   )}
-                  <table className='table'>
-                    {/* head */}
-                    <thead>
-                      <tr>
-                        <th>
-                          <label>
-                            <input
-                              type='checkbox'
-                              checked={
-                                optionsKandang
-                                  .filter(
-                                    (k) =>
-                                      k.status === 'NON_ACTIVE' ||
-                                      formik.values.kandang_ids.includes(k.id)
-                                  )
-                                  .every((k) =>
-                                    formik.values.kandang_ids.includes(k.id)
-                                  ) &&
-                                optionsKandang.filter(
-                                  (k) =>
-                                    k.status === 'NON_ACTIVE' ||
-                                    formik.values.kandang_ids.includes(k.id)
-                                ).length > 0
-                              }
-                              className='checkbox transition-none'
-                              disabled={
-                                formType === 'detail' ||
-                                optionsKandang.filter(
-                                  (k) => k.status === 'NON_ACTIVE'
-                                ).length == 0
-                              }
-                              onChange={
-                                formType === 'detail'
-                                  ? () => {}
-                                  : kandangCheckAll
-                              }
-                            />
-                          </label>
-                        </th>
-                        <th>Kandang</th>
-                        {/* <th>Status</th> */}
-                        <th>Penanggung Jawab</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {/* rows */}
-                      {selectedLocation != '' &&
-                        optionsKandang.map((kandang) => (
-                          <tr key={kandang.id}>
-                            <th>
-                              <label>
-                                <input
-                                  value={kandang.id}
-                                  type='checkbox'
-                                  className='checkbox transition-none'
-                                  checked={formik.values.kandang_ids.includes(
-                                    kandang.id
-                                  )}
-                                  onChange={
-                                    formType === 'detail'
-                                      ? () => {}
-                                      : kandangChangeHandler
-                                  }
-                                  disabled={
-                                    formType === 'detail' ||
-                                    kandang.status != 'NON_ACTIVE'
-                                  }
-                                />
-                              </label>
-                            </th>
-                            <td>{kandang.name}</td>
-                            {/* <td>{kandang.status}</td> */}
-                            <td>{kandang.pic?.name}</td>
-                          </tr>
-                        ))}
-                      {selectedLocation == '' && (
-                        <tr>
-                          <td colSpan={3} className='text-center text-muted'>
-                            Data tidak tersedia
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                    {/* foot */}
-                    {selectedLocation != '' && (
-                      <tfoot>
-                        <tr>
-                          <th></th>
-                          <th>Kandang</th>
-                          <th>Penanggung Jawab</th>
-                        </tr>
-                      </tfoot>
-                    )}
-                  </table>
+                  <ProjectFlockKandangTable
+                    listKandang={optionsKandang}
+                    rowSelection={rowSelection}
+                    setRowSelection={setRowSelection}
+                    selectedIds={formik.values.kandang_ids}
+                    formType={formType}
+                  />
                 </div>
               </Collapse>
             </div>
@@ -845,7 +768,11 @@ const ProjectFlockForm = ({
       <ConfirmationModal
         ref={confirmModal.ref}
         type={approvalAction == 'APPROVED' ? 'success' : 'error'}
-        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        text={`Apakah anda yakin ingin ${
+          approvalAction == 'APPROVED' ? 'approve' : 'reject'
+        } Project Flock berikut? (${initialValues?.flock?.name} - ${
+          initialValues?.area?.name
+        })?`}
         secondaryButton={{
           text: 'Tidak',
         }}
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
new file mode 100644
index 00000000..bf930eec
--- /dev/null
+++ b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
@@ -0,0 +1,146 @@
+'use client';
+
+import CheckboxInput from '@/components/input/CheckboxInput';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { cn } from '@/lib/helper';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { OnChangeFn } from '@tanstack/react-table';
+
+const ProjectFlockKandangTable = ({
+  listKandang,
+  rowSelection,
+  setRowSelection,
+  selectedIds,
+  formType = 'add',
+}: {
+  listKandang: Kandang[];
+  rowSelection: Record<string, boolean>;
+  setRowSelection: OnChangeFn<Record<string, boolean>>;
+  selectedIds: (number | undefined)[];
+  formType: 'add' | 'edit' | 'detail';
+}) => {
+  console.log('selectedIds');
+  console.log(selectedIds);
+  return (
+    <Table<Kandang>
+      data={listKandang}
+      columns={[
+        {
+          id: 'select',
+          header: ({ table }) => {
+            const allRows = table.getRowModel().rows;
+            const selectableRows = allRows.filter(
+              (row) =>
+                row.original.status == 'NON_ACTIVE' ||
+                row.original.status == 'PENGAJUAN'
+            );
+
+            const allSelected =
+              selectableRows.every((row) => row.getIsSelected()) &&
+              selectableRows.length != 0 && formType != 'detail';
+
+            const someSelected =
+              selectableRows.some((row) => row.getIsSelected()) && !allSelected && formType != 'detail';
+
+            const toggleSelectableRows = () => {
+              const shouldSelect = !allSelected;
+              selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
+            };
+
+            return (
+              <div className='w-full flex flex-row justify-center'>
+                <CheckboxInput
+                  name='allRow'
+                  checked={allSelected}
+                  indeterminate={someSelected}
+                  onChange={toggleSelectableRows}
+                  disabled={
+                    listKandang.filter(
+                      (kandang) =>
+                        kandang.status == 'NON_ACTIVE' ||
+                        kandang.status == 'PENGAJUAN'
+                    ).length == 0 || formType == 'detail'
+                  }
+                />
+              </div>
+            );
+          },
+          cell: ({ row }) => {
+            return (
+              <CheckboxInput
+                name='row'
+                checked={
+                  (row.getIsSelected() &&
+                    (row.original.status == 'NON_ACTIVE' ||
+                      row.original.status == 'PENGAJUAN')) ||
+                  selectedIds.includes(row.original.id)
+                }
+                disabled={
+                  !row.getCanSelect() ||
+                  (row.original.status != 'NON_ACTIVE' &&
+                    row.original.status != 'PENGAJUAN') ||
+                  formType == 'detail'
+                }
+                indeterminate={row.getIsSomeSelected()}
+                onChange={row.getToggleSelectedHandler()}
+              />
+            );
+          },
+        },
+        {
+          accessorFn: (row) => row.name,
+          header: 'Kandang',
+        },
+        {
+          accessorFn: (row) => row.status,
+          header: 'Status',
+          cell: (props) => {
+            return (
+              <PillBadge
+                color={(() => {
+                  switch (props.row.original.status) {
+                    case 'ACTIVE':
+                      return 'red';
+                    case 'PENGAJUAN':
+                      return 'green';
+                    case 'NON_ACTIVE':
+                      return 'blue';
+                    default:
+                      return 'gray';
+                  }
+                })()}
+                content={props.row.original.status
+                  .toLowerCase()
+                  .replace(/_/g, ' ')
+                  .replace(/\b\w/g, (char) => char.toUpperCase())}
+              />
+            );
+          },
+        },
+        {
+          accessorFn: (row) => row.pic?.name,
+          header: 'Penanggung Jawab',
+        },
+      ]}
+      className={{
+        containerClassName: cn({
+          'mb-20': listKandang?.length === 0,
+        }),
+        tableWrapperClassName: 'overflow-x-auto min-h-full!',
+        tableClassName: 'font-inter w-full table-auto min-h-full!',
+        headerRowClassName: 'border-b border-b-gray-200',
+        headerColumnClassName:
+          'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+        bodyRowClassName: 'border-b border-b-gray-200',
+        bodyColumnClassName:
+          'px-6 py-3 last:flex last:flex-row last:justify-end',
+        paginationClassName: 'hidden',
+      }}
+      rowSelection={rowSelection}
+      setRowSelection={setRowSelection}
+    />
+  );
+};
+
+export default ProjectFlockKandangTable;

From 189c15274535861c3529728b83b3af4a20f9078d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 25 Oct 2025 14:24:23 +0700
Subject: [PATCH 72/92] feat(FE-114): add inputPrefix and inputSuffix props for
 enhanced input customization

---
 src/components/input/NumberInput.tsx |   8 +-
 src/components/input/TextInput.tsx   | 136 +++++++++++++++++++++------
 2 files changed, 114 insertions(+), 30 deletions(-)

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 8efef51d..d4d8045d 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 import { NumericFormat, OnValueChange } from 'react-number-format';
 import TextInput, { TextInputProps } from '@/components/input/TextInput';
 
@@ -12,6 +12,8 @@ interface NumberInputProps extends Omit<TextInputProps, 'type'> {
   prefix?: string;
   suffix?: string;
   fixedDecimalScale?: boolean;
+  inputPrefix?: ReactNode;
+  inputSuffix?: ReactNode;
 }
 
 const NumberInput = ({
@@ -20,6 +22,8 @@ const NumberInput = ({
                        decimalScale = 5,
                        allowNegative = true,
                        onChange,
+                       inputPrefix,
+                       inputSuffix,
                        ...restProps
                      }: NumberInputProps) => {
   const valueChangeHandler: OnValueChange = (
@@ -45,6 +49,8 @@ const NumberInput = ({
       onValueChange={valueChangeHandler}
       decimalScale={decimalScale}
       allowNegative={allowNegative}
+      inputPrefix={inputPrefix}
+      inputSuffix={inputSuffix}
       {...restProps}
     />
   );
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 43797637..7d791d2f 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -31,6 +31,8 @@ export interface TextInputProps {
   errorMessage?: string;
   startAdornment?: ReactNode;
   endAdornment?: ReactNode;
+  inputPrefix?: ReactNode;
+  inputSuffix?: ReactNode;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
 }
@@ -48,6 +50,8 @@ const TextInput = ({
   errorMessage,
   startAdornment,
   endAdornment,
+  inputPrefix,
+  inputSuffix,
   disabled = false,
   required = false,
   onChange,
@@ -85,39 +89,113 @@ const TextInput = ({
         </label>
       )}
 
-      <div
-        className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
-          {
-            'border-error': isError,
-            'border-success!': isValid,
-          },
-          className?.inputWrapper
-        )}
-      >
-        {startAdornment && startAdornment}
+      {inputPrefix || inputSuffix ? (
+        <div className='relative flex'>
+          {inputPrefix && (
+            <div
+              className={cn(
+                'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
+                {
+                  'bg-gray-100 border-gray-300': !disabled,
+                  'bg-gray-50 border-gray-200': disabled,
+                }
+              )}
+            >
+              {inputPrefix}
+            </div>
+          )}
 
-        <input
-          type={type}
-          id={name}
-          name={name}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onBlur={onBlur}
-          disabled={disabled}
-          className={cn('grow', className?.input)}
-          readOnly={readOnly}
-        />
+          <div
+            className={cn(
+              'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
+              {
+                'border-error': isError,
+                'border-success!': isValid,
+                'rounded-l-none!': inputPrefix,
+                'rounded-r-none!': inputSuffix,
+                'input-disabled': disabled,
+                'cursor-not-allowed': disabled,
+                'bg-gray-50': disabled,
+              },
+              className?.inputWrapper
+            )}
+          >
+            {startAdornment && startAdornment}
 
-        {(isLoading || endAdornment) && (
-          <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
+            <input
+              type={type}
+              id={name}
+              name={name}
+              placeholder={placeholder}
+              value={value}
+              onChange={onChange}
+              onBlur={onBlur}
+              disabled={disabled}
+              className={cn('grow bg-transparent outline-none', {
+                'cursor-not-allowed': disabled,
+                'text-gray-500': disabled,
+              }, className?.input)}
+              readOnly={readOnly}
+            />
 
-            {endAdornment && endAdornment}
+            {(isLoading || endAdornment) && (
+              <div className='flex flex-row gap-2'>
+                {isLoading && <span className='loading loading-spinner' />}
+
+                {endAdornment && endAdornment}
+              </div>
+            )}
           </div>
-        )}
-      </div>
+
+          {inputSuffix && (
+            <div
+              className={cn(
+                'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
+                {
+                  'bg-gray-100 border-gray-300': !disabled,
+                  'bg-gray-50 border-gray-200': disabled,
+                }
+              )}
+            >
+              {inputSuffix}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div
+          className={cn(
+            'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
+            {
+              'border-error': isError,
+              'border-success!': isValid,
+            },
+            className?.inputWrapper
+          )}
+        >
+          {startAdornment && startAdornment}
+
+          <input
+            type={type}
+            id={name}
+            name={name}
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            disabled={disabled}
+            className={cn('grow', className?.input)}
+            readOnly={readOnly}
+          />
+
+          {(isLoading || endAdornment) && (
+            <div className='flex flex-row gap-2'>
+              {isLoading && <span className='loading loading-spinner' />}
+
+              {endAdornment && endAdornment}
+            </div>
+          )}
+        </div>
+      )}
 
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>

From 135fc2d5d39a44e4f3f9649bfd3c658552e9c31e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 25 Oct 2025 14:24:51 +0700
Subject: [PATCH 73/92] feat(FE-114): update MovementForm and RecordingForm to
 use inputPrefix and inputSuffix for improved input handling

---
 src/components/pages/inventory/movement/form/MovementForm.tsx | 4 ++--
 .../pages/production/recording/form/RecordingForm.tsx         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 2f8c762f..9a2b3b97 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1389,7 +1389,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             allowNegative={false}
                             thousandSeparator=','
                             decimalSeparator='.'
-                            prefix="Rp "
+                            inputPrefix="Rp"
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost',
@@ -1413,7 +1413,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             allowNegative={false}
                             thousandSeparator=','
                             decimalSeparator='.'
-                            prefix="Rp "
+                            inputPrefix="Rp"
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost_per_item',
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 1e7b053f..0a117f3a 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -799,7 +799,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         allowNegative={false}
                         thousandSeparator=','
                         decimalSeparator='.'
-                        suffix=" gram"
+                        inputSuffix="gram"
                         isError={
                           isRepeaterInputError('body_weights', 'weight', idx)
                             .isError
@@ -852,7 +852,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         allowNegative={false}
                         thousandSeparator=','
                         decimalSeparator='.'
-                        suffix=" gram"
+                        inputSuffix="gram"
                         isError={
                           isRepeaterInputError('body_weights', 'average_weight', idx)
                             .isError

From 1e9d02b4b79fa6647ae08252406dd6d604f2a110 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Sat, 25 Oct 2025 16:27:15 +0700
Subject: [PATCH 74/92] feat(FE-92-94): Slicing UI detail chickin & refactor
 number input chickin form

---
 package-lock.json                             |  11 +
 package.json                                  |   1 +
 src/app/production/chickin/add/page.tsx       |   3 +-
 src/app/production/chickin/detail/page.tsx    | 332 ++++++++++++++++--
 src/components/Card.tsx                       | 178 ++++++++++
 src/components/input/NumberInput.tsx          |  53 +++
 .../pages/production/chickin/ChickinTable.tsx |  17 +-
 .../production/chickin/form/ChickinForm.tsx   |  23 +-
 .../project-flock/ProjectFlockTable.tsx       |   1 -
 src/lib/helper.ts                             |  13 +
 src/types/api/production/chickin.d.ts         |  11 +-
 11 files changed, 595 insertions(+), 48 deletions(-)
 create mode 100644 src/components/Card.tsx
 create mode 100644 src/components/input/NumberInput.tsx

diff --git a/package-lock.json b/package-lock.json
index a39060ef..72580442 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-hot-toast": "^2.6.0",
+        "react-number-format": "^5.4.4",
         "react-select": "^5.10.2",
         "swr": "^2.3.6",
         "tailwind-merge": "^3.3.1",
@@ -5811,6 +5812,16 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-number-format": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.4.tgz",
+      "integrity": "sha512-wOmoNZoOpvMminhifQYiYSTCLUDOiUbBunrMrMjA+dV52sY+vck1S4UhR6PkgnoCquvvMSeJjErXZ4qSaWCliA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-select": {
       "version": "5.10.2",
       "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.10.2.tgz",
diff --git a/package.json b/package.json
index e970499c..2e806ddd 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
+    "react-number-format": "^5.4.4",
     "react-select": "^5.10.2",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index 1823b41a..af834b37 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -59,7 +59,7 @@ const AddChickin = () => {
     ? listProjectFlock?.data.map((projectFlock) => {
         return {
           value: projectFlock.id,
-          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
+          label: `${projectFlock?.flock?.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
         };
       })
     : [];
@@ -242,6 +242,7 @@ const AddChickin = () => {
                     created_user: projectFlock.data.created_user,
                     created_at: projectFlock.data.created_at,
                     updated_at: projectFlock.data.updated_at,
+                    approval: projectFlock.data.approval,
                   }}
                   afterSubmit={handleAfterSubmit}
                 />
diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/chickin/detail/page.tsx
index d62c92bf..aef7c4b7 100644
--- a/src/app/production/chickin/detail/page.tsx
+++ b/src/app/production/chickin/detail/page.tsx
@@ -1,24 +1,51 @@
-'use client'
+'use client';
 
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { ChickinApi } from "@/services/api/production";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ChickinApi } from '@/services/api/production';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  Chickin,
+  ChickinApprovalPayload,
+} from '@/types/api/production/chickin';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
 
 const DetailChickin = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const chickinId = searchParams.get('chickinId');
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  const confirmModal = useModal();
+  const deleteModal = useModal();
+  const chickinModal = useModal();
   const {
     data: chickin,
     isLoading,
-  } = useSWR(
-    chickinId,
-    (id: number) => ChickinApi.getSingle(id)
+    mutate: refreshChickin,
+  } = useSWR(chickinId, (id: number) => ChickinApi.getSingle(id));
+
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
+    // chickin.data?.approval.step_number == 1 ? false : true
+    true
+  );
+  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
+    !isApprovedDisabled
+  );
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
   );
 
-  if(!chickinId){
+  if (!chickinId) {
     router.back();
 
     return (
@@ -28,46 +55,291 @@ const DetailChickin = () => {
     );
   }
 
-  if (
-    !isLoading &&
-    (!chickin || isResponseError(chickin))
-  ) { 
+  if (!isLoading && (!chickin || isResponseError(chickin))) {
     router.replace('/404');
     return;
   }
 
+  if (!isResponseSuccess(chickin)) {
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  const confirmationModalClickHandler = async ({
+    action = 'APPROVED',
+  }: {
+    action: 'APPROVED' | 'REJECTED';
+  }) => {
+    if (chickin?.data.id === undefined) return;
+    setIsApproveLoading(true);
+    const approveChickinRes = await ChickinApi.customRequest<
+      BaseApiResponse<Chickin>,
+      ChickinApprovalPayload
+    >(`/approvals`, {
+      method: 'POST',
+      payload: {
+        action: action,
+        approvable_ids: [chickin.data.id],
+      },
+    });
+
+    if (isResponseSuccess(approveChickinRes)) {
+      if (refreshChickin) {
+        await refreshChickin();
+      }
+      toast.success(approveChickinRes.message as string);
+    }
+    if (isResponseError(approveChickinRes)) {
+      toast.error(approveChickinRes?.message as string);
+    }
+    confirmModal.closeModal();
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ChickinApi.delete(
+      chickin.data?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/chickin');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    setIsDeleteLoading(false);
+  };
+
   return (
     <>
-      <div className="w-full p-4 flex flex-col justify-center gap-4">
+      <div className='w-full p-4 flex flex-col justify-center gap-4'>
         {isLoading && <span className='loading loading-spinner loading-xl' />}
         {!isLoading && isResponseSuccess(chickin) && (
           <>
-            <div className="card shadow">
-              <div className="card-body">
-                <div className="card-title">
-                  Informasi Project Flock
+            {/* <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={(() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('APPROVED');
+                    confirmModal.openModal();
+                  }
+                })}
+                disabled={!chickin?.data.id || isApprovedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                variant='outline'
+                color='error'
+                onClick={() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('REJECTED');
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!chickin?.data.id || isRejectedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Reject
+              </Button>
+            </div> */}
+            <Card
+              title='Informasi Umum'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }
+                  </div>
                 </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <div className="font-semibold">Flock</div>
-                    <div >{chickin.data.project_flock_kandang?.project_flock.flock.name}</div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Area</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.area
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kategori</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.category}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Lokasi</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.location
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Periode</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.period}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kandang</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.kandang.name}
                   </div>
                 </div>
               </div>
-            </div>
-            <div className="card shadow">
-              <div className="card-body">
-                <div className="card-title">
-                  Informasi Chickin
+            </Card>
+            <Card
+              title='Detail Chickin'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock Kandang</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }{' '}
+                    - {chickin.data.project_flock_kandang?.kandang.name}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Tanggal Chickin</div>
+                  <div className='text-sm'>
+                    {chickin.data.chick_in_date
+                      ? new Date(chickin.data.chick_in_date).toLocaleDateString(
+                          'id-ID'
+                        )
+                      : '-'}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Jumlah (Ekor)</div>
+                  <div className='text-sm'>
+                    {chickin.data.quantity?.toLocaleString('id-ID')}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Catatan</div>
+                  <div className='text-sm'>{chickin.data.note}</div>
                 </div>
               </div>
+            </Card>
+            <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                color='error'
+                onClick={() => {
+                  deleteModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Delete
+              </Button>
+              <Button color='warning'
+                onClick={() => {
+                  chickinModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:pencil-outline' width={24} height={24} />
+                Edit
+              </Button>
             </div>
           </>
         )}
       </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data.project_flock_kandang?.project_flock.flock.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <Modal ref={chickinModal.ref}>
+        <div className='flex flex-row justify-between items-center'>
+          <h1 className='text-xl font-semibold text-center mb-6'>
+            Chickin Kandang -{' '}
+            {chickin?.data?.project_flock_kandang &&
+              chickin?.data?.project_flock_kandang.kandang?.name}
+          </h1>
+          <Button
+            color='error'
+            variant='link'
+            onClick={chickinModal.closeModal}
+          >
+            <Icon
+              className='text-black'
+              icon='uil:times'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
+        <ChickinForm
+          initialValues={chickin?.data}
+          formType='edit'
+          afterSubmit={() => {
+            refreshChickin();
+            chickinModal.closeModal();
+          }}
+        />
+      </Modal>
+
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${
+          approvalAction == 'APPROVED' ? 'approve' : 'reject'
+        } chickin berikut? (${
+          chickin?.data.project_flock_kandang?.project_flock.flock.name
+        } - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
+          isLoading: isApproveLoading,
+          onClick: () => {
+            confirmationModalClickHandler({
+              action: approvalAction,
+            });
+          },
+        }}
+      />
     </>
   );
-}
+};
 
-export default DetailChickin;
\ No newline at end of file
+export default DetailChickin;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 00000000..1895c2c5
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/helper";
+import Image from "next/image";
+
+export interface CardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
+  title?: string;
+  subtitle?: string;
+  image?: string;
+  imageAlt?: string;
+  imageWidth?: number;
+  imageHeight?: number;
+  actions?: ReactNode;
+  footer?: ReactNode;
+  className?: {
+    wrapper?: string;
+    image?: string;
+    body?: string;
+    title?: string;
+    subtitle?: string;
+    actions?: string;
+    footer?: string;
+  };
+  variant?: "default" | "compact" | "bordered" | "shadow" | "image-full";
+  size?: "sm" | "md" | "lg";
+}
+
+const Card = ({
+  title,
+  subtitle,
+  image,
+  imageAlt,
+  imageWidth,
+  imageHeight,
+  actions,
+  footer,
+  className,
+  variant = "default",
+  size = "md",
+  children,
+  ...props
+}: CardProps) => {
+  const getCardClasses = () => {
+    const baseClasses = "card bg-base-100";
+
+    const variantClasses = {
+      default: "",
+      compact: "card-compact",
+      bordered: "border border-base-300",
+      shadow: "shadow-xl",
+      "image-full": "card-side card-compact shadow-xl",
+    };
+
+    const sizeClasses = {
+      sm: "w-64",
+      md: "w-96",
+      lg: "w-[28rem]",
+    };
+
+    return cn(
+      baseClasses,
+      variantClasses[variant],
+      variant !== "image-full" ? sizeClasses[size] : "",
+      className?.wrapper,
+    );
+  };
+
+  const getImageDimensions = () => {
+    if (variant === "image-full") {
+      return {
+        width: imageWidth || 128,
+        height: imageHeight || 128,
+      };
+    }
+
+    const cardWidths = {
+      sm: 256, // w-64
+      md: 384, // w-96
+      lg: 448, // w-[28rem]
+    };
+
+    return {
+      width: imageWidth || cardWidths[size],
+      height: imageHeight || 192,
+    };
+  };
+
+  const getImageClasses = () => {
+    if (variant === "image-full") {
+      return cn("object-cover", className?.image);
+    }
+    return cn("w-full object-cover", className?.image);
+  };
+
+  const getBodyClasses = () => {
+    const baseClasses = "card-body";
+
+    if (variant === "compact" || variant === "image-full") {
+      return cn(baseClasses, "p-4", className?.body);
+    }
+
+    return cn(baseClasses, "p-6", className?.body);
+  };
+
+  const getTitleClasses = () => {
+    const sizeClasses = {
+      sm: "text-lg",
+      md: "text-xl",
+      lg: "text-2xl",
+    };
+
+    return cn("card-title font-bold", sizeClasses[size], className?.title);
+  };
+
+  const getSubtitleClasses = () => {
+    return cn("text-base-content/70 text-sm mt-1", className?.subtitle);
+  };
+
+  const getActionsClasses = () => {
+    return cn("card-actions justify-end mt-4", className?.actions);
+  };
+
+  const getFooterClasses = () => {
+    return cn("border-t border-base-300 mt-4 pt-4", className?.footer);
+  };
+
+  if (variant === "image-full" && image) {
+    const imageDimensions = getImageDimensions();
+    return (
+      <div className={getCardClasses()} {...props}>
+        <figure>
+          <Image
+            src={image}
+            alt={imageAlt || title || "Card image"}
+            width={imageDimensions.width}
+            height={imageDimensions.height}
+            className={getImageClasses()}
+          />
+        </figure>
+        <div className={getBodyClasses()}>
+          {title && <h2 className={getTitleClasses()}>{title}</h2>}
+          {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
+          {children}
+          {actions && <div className={getActionsClasses()}>{actions}</div>}
+        </div>
+        {footer && <div className={getFooterClasses()}>{footer}</div>}
+      </div>
+    );
+  }
+
+  return (
+    <div className={getCardClasses()} {...props}>
+      {image && (
+        <figure>
+          <Image
+            src={image}
+            alt={imageAlt || title || "Card image"}
+            width={getImageDimensions().width}
+            height={getImageDimensions().height}
+            className={getImageClasses()}
+          />
+        </figure>
+      )}
+      <div className={getBodyClasses()}>
+        {title && <h2 className={getTitleClasses()}>{title}</h2>}
+        {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
+        {children}
+        {actions && <div className={getActionsClasses()}>{actions}</div>}
+      </div>
+      {footer && <div className={getFooterClasses()}>{footer}</div>}
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
new file mode 100644
index 00000000..4375ca20
--- /dev/null
+++ b/src/components/input/NumberInput.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { ChangeEvent } from 'react';
+import { NumericFormat, OnValueChange } from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+
+interface NumberInputProps extends Omit<TextInputProps, 'type'> {
+  thousandSeparator?: string;
+  decimalSeparator?: string;
+  decimalScale?: number;
+  allowNegative?: boolean;
+  prefix?: string;
+  suffix?: string;
+  fixedDecimalScale?: boolean;
+}
+
+const NumberInput = ({
+  thousandSeparator = ',',
+  decimalSeparator = '.',
+  decimalScale = 5,
+  allowNegative = true,
+  onChange,
+  ...restProps
+}: NumberInputProps) => {
+  const valueChangeHandler: OnValueChange = (
+    numberFormatValues,
+    sourceInfo
+  ) => {
+    const newChangeEvent = sourceInfo.event as
+      | ChangeEvent<HTMLInputElement>
+      | undefined;
+
+    if (newChangeEvent) {
+      newChangeEvent.target.value = numberFormatValues.value;
+
+      onChange?.(newChangeEvent);
+    }
+  };
+
+  return (
+    <NumericFormat
+      thousandSeparator={thousandSeparator}
+      decimalSeparator={decimalSeparator}
+      customInput={TextInput}
+      onValueChange={valueChangeHandler}
+      decimalScale={decimalScale}
+      allowNegative={allowNegative}
+      {...restProps}
+    />
+  );
+};
+
+export default NumberInput;
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index 2b3fdc07..65ab3c16 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -11,8 +11,8 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
-import { ChickinApi, ProjectFlockApi } from '@/services/api/production';
+import { cn, formatNumber } from '@/lib/helper';
+import { ChickinApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Chickin } from '@/types/api/production/chickin';
 import { Icon } from '@iconify/react';
@@ -124,6 +124,13 @@ const ChickinTable = () => {
           {
             accessorFn: (row) => row.quantity,
             header: 'Jumlah Chickin',
+            cell: (props) => {
+              if (props.row.original.quantity) {
+                return formatNumber(props.row.original.quantity);
+              } else {
+                return '-';
+              }
+            }
           },
           {
             accessorFn: (row) => row.chick_in_date,
@@ -159,7 +166,7 @@ const ChickinTable = () => {
                 deleteModal.openModal();
               };
 
-              const editClickHandler = () => {
+              const editClickHandler = () =>  {
                 setSelectedChickin(props.row.original);
                 chickinModal.openModal();
               };
@@ -279,7 +286,7 @@ const RowOptionsMenu = ({
         'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
       )}
     >
-      {/* <Button
+      <Button
         href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
@@ -287,7 +294,7 @@ const RowOptionsMenu = ({
       >
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
-      </Button> */}
+      </Button>
       <Button
         variant='ghost'
         color='warning'
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index 71e64c35..8ac6b6ee 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -20,6 +20,7 @@ import toast from 'react-hot-toast';
 import { Icon } from '@iconify/react';
 import TextArea from '@/components/input/TextArea';
 import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
 
 interface ChickinFormProps {
   formType?: 'add' | 'detail' | 'edit';
@@ -46,7 +47,10 @@ const ChickinForm = ({
     return {
       chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
       note: initialValues?.note ?? '',
-      quantity: initialValues?.quantity ?? initialValues?.project_flock_kandang?.available_quantity ?? 0,
+      quantity:
+        initialValues?.quantity ??
+        initialValues?.project_flock_kandang?.available_quantity ??
+        0,
     };
   }, [initialValues]);
 
@@ -71,10 +75,7 @@ const ChickinForm = ({
       payload: UpdateChickinPayload,
       afterSubmit: (() => void) | undefined
     ) => {
-      const res = await ChickinApi.update(
-        payload.project_flock_kandang_id as number,
-        payload
-      );
+      const res = await ChickinApi.update(payload.id, payload);
       if (isResponseError(res)) {
         setChickinFormErrorMessage(res.message);
         return;
@@ -95,7 +96,10 @@ const ChickinForm = ({
       // reset error message
       setChickinFormErrorMessage('');
 
-      if (initialValues?.project_flock_kandang?.id == undefined) {
+      if (
+        initialValues?.project_flock_kandang?.id == undefined ||
+        (formType == 'edit' && initialValues?.id == undefined)
+      ) {
         return;
       }
 
@@ -105,9 +109,11 @@ const ChickinForm = ({
         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);
@@ -146,12 +152,12 @@ const ChickinForm = ({
           }
           errorMessage={formik.errors.chick_in_date}
         />
-        <TextInput
+        <NumberInput
           value={formik.values.quantity}
           onChange={formik.handleChange}
           onBlur={formik.handleBlur}
           name='quantity'
-          label='Jumlah Chickin'
+          label='Jumlah (Ekor)'
           required
           isError={
             (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
@@ -162,7 +168,6 @@ const ChickinForm = ({
               ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
               : formik.errors.quantity
           }
-          type='number'
           readOnly
         />
         <TextArea
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 3f4afc47..99f26721 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -144,7 +144,6 @@ const ProjectFlockTable = () => {
   const deleteModal = useModal();
   const confirmModal = useModal();
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
 
   // Fetch Data
diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index d85b7b16..2ec60598 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -13,6 +13,19 @@ export const cn = (...inputs: ClassValue[]) => {
   return twMerge(clsx(inputs));
 };
 
+export const formatNumber = (
+  value: number | bigint | Intl.StringNumericLiteral,
+  locale = 'en-US',
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 2
+) => {
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits,
+    maximumFractionDigits,
+  }).format(value);
+};
+
+
 export const formatCurrency = (
   value: number | bigint | Intl.StringNumericLiteral,
   currency = 'USD',
diff --git a/src/types/api/production/chickin.d.ts b/src/types/api/production/chickin.d.ts
index ad8822b5..99d24922 100644
--- a/src/types/api/production/chickin.d.ts
+++ b/src/types/api/production/chickin.d.ts
@@ -1,4 +1,4 @@
-import { BaseMetadata } from "@/types/api/api-general";
+import { BaseApproval, BaseMetadata } from "@/types/api/api-general";
 import { ProjectFlockKandang } from "@/types/api/production/project-flock-kandang";
 
 export type BaseChickin = {
@@ -7,6 +7,7 @@ export type BaseChickin = {
   quantity?: number;
   note?: string;
   project_flock_kandang?: ProjectFlockKandang;
+  approval: BaseApproval;
 }
 
 export type Chickin = BaseMetadata & BaseChickin;
@@ -18,5 +19,11 @@ export type CreateChickinPayload = {
   quantity?: number;
 }
 
-export type UpdateChickinPayload = CreateChickinPayload;
+export type UpdateChickinPayload = CreateChickinPayload & {
+  id: number;
+};
 
+export type ChickinApprovalPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  approvable_ids: number[];
+};
\ No newline at end of file

From a65d00edc8ba4ed72ab9cd62eaf1a7d83fdbbf31 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Sat, 25 Oct 2025 17:01:02 +0700
Subject: [PATCH 75/92] fix(FE): fixing pipeline run error

---
 package-lock.json | 982 +++++++++++++++++++++-------------------------
 1 file changed, 445 insertions(+), 537 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 72580442..6b7c09e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,13 +69,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
-      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.3",
-        "@babel/types": "^7.28.2",
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -116,21 +116,21 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
-      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
-      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.4"
+        "@babel/types": "^7.28.5"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -163,17 +163,17 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz",
-      "integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.3",
+        "@babel/generator": "^7.28.5",
         "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.4",
+        "@babel/parser": "^7.28.5",
         "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.4",
+        "@babel/types": "^7.28.5",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -181,22 +181,22 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
-      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1"
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
-      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -206,9 +206,9 @@
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
-      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.6.0.tgz",
+      "integrity": "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -373,9 +373,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -383,13 +383,13 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
-      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/object-schema": "^2.1.6",
+        "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
         "minimatch": "^3.1.2"
       },
@@ -398,19 +398,22 @@
       }
     },
     "node_modules/@eslint/config-helpers": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
-      "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.1.tgz",
+      "integrity": "sha512-csZAzkNhsgwb0I/UAV6/RGFTbiakPCf0ZrGmrIxQpYvGZ00PhTkSnyKNolphgIvmnJeGw6rcGVEXfTzUnFuEvw==",
       "dev": true,
       "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.16.0"
+      },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
-      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.16.0.tgz",
+      "integrity": "sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -445,9 +448,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.35.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.35.0.tgz",
-      "integrity": "sha512-30iXE9whjlILfWobBkNerJo+TXYsgVM5ERQwMcMKCHckHflCmf7wXDAHlARoWnh0s1U72WqlbeyE7iAcCzuCPw==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.38.0.tgz",
+      "integrity": "sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -458,9 +461,9 @@
       }
     },
     "node_modules/@eslint/object-schema": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
-      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -468,13 +471,13 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
-      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.0.tgz",
+      "integrity": "sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.15.2",
+        "@eslint/core": "^0.16.0",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -581,10 +584,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.3.tgz",
-      "integrity": "sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.4.tgz",
+      "integrity": "sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==",
       "cpu": [
         "arm64"
       ],
@@ -600,13 +613,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.2.0"
+        "@img/sharp-libvips-darwin-arm64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.3.tgz",
-      "integrity": "sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.4.tgz",
+      "integrity": "sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==",
       "cpu": [
         "x64"
       ],
@@ -622,13 +635,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.2.0"
+        "@img/sharp-libvips-darwin-x64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.0.tgz",
-      "integrity": "sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==",
       "cpu": [
         "arm64"
       ],
@@ -642,9 +655,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.0.tgz",
-      "integrity": "sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==",
       "cpu": [
         "x64"
       ],
@@ -658,9 +671,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.0.tgz",
-      "integrity": "sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.3.tgz",
+      "integrity": "sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==",
       "cpu": [
         "arm"
       ],
@@ -674,9 +687,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.0.tgz",
-      "integrity": "sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.3.tgz",
+      "integrity": "sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==",
       "cpu": [
         "arm64"
       ],
@@ -690,9 +703,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.0.tgz",
-      "integrity": "sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.3.tgz",
+      "integrity": "sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==",
       "cpu": [
         "ppc64"
       ],
@@ -706,9 +719,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.0.tgz",
-      "integrity": "sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.3.tgz",
+      "integrity": "sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==",
       "cpu": [
         "s390x"
       ],
@@ -722,9 +735,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.0.tgz",
-      "integrity": "sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.3.tgz",
+      "integrity": "sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==",
       "cpu": [
         "x64"
       ],
@@ -738,9 +751,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.0.tgz",
-      "integrity": "sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.3.tgz",
+      "integrity": "sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==",
       "cpu": [
         "arm64"
       ],
@@ -754,9 +767,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.0.tgz",
-      "integrity": "sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.3.tgz",
+      "integrity": "sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==",
       "cpu": [
         "x64"
       ],
@@ -770,9 +783,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.3.tgz",
-      "integrity": "sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.4.tgz",
+      "integrity": "sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==",
       "cpu": [
         "arm"
       ],
@@ -788,13 +801,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.2.0"
+        "@img/sharp-libvips-linux-arm": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.3.tgz",
-      "integrity": "sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.4.tgz",
+      "integrity": "sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==",
       "cpu": [
         "arm64"
       ],
@@ -810,13 +823,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.2.0"
+        "@img/sharp-libvips-linux-arm64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.3.tgz",
-      "integrity": "sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.4.tgz",
+      "integrity": "sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==",
       "cpu": [
         "ppc64"
       ],
@@ -832,13 +845,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.2.0"
+        "@img/sharp-libvips-linux-ppc64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.3.tgz",
-      "integrity": "sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.4.tgz",
+      "integrity": "sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==",
       "cpu": [
         "s390x"
       ],
@@ -854,13 +867,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.2.0"
+        "@img/sharp-libvips-linux-s390x": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.3.tgz",
-      "integrity": "sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.4.tgz",
+      "integrity": "sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==",
       "cpu": [
         "x64"
       ],
@@ -876,13 +889,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.0"
+        "@img/sharp-libvips-linux-x64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.3.tgz",
-      "integrity": "sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.4.tgz",
+      "integrity": "sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==",
       "cpu": [
         "arm64"
       ],
@@ -898,13 +911,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.3.tgz",
-      "integrity": "sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.4.tgz",
+      "integrity": "sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==",
       "cpu": [
         "x64"
       ],
@@ -920,20 +933,20 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.0"
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.3.tgz",
-      "integrity": "sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.4.tgz",
+      "integrity": "sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==",
       "cpu": [
         "wasm32"
       ],
       "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.4.4"
+        "@emnapi/runtime": "^1.5.0"
       },
       "engines": {
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -943,9 +956,9 @@
       }
     },
     "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.3.tgz",
-      "integrity": "sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.4.tgz",
+      "integrity": "sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==",
       "cpu": [
         "arm64"
       ],
@@ -962,9 +975,9 @@
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.3.tgz",
-      "integrity": "sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.4.tgz",
+      "integrity": "sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==",
       "cpu": [
         "ia32"
       ],
@@ -981,9 +994,9 @@
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.3.tgz",
-      "integrity": "sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.4.tgz",
+      "integrity": "sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==",
       "cpu": [
         "x64"
       ],
@@ -999,19 +1012,6 @@
         "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@isaacs/fs-minipass": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
-      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.4"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1271,9 +1271,9 @@
       "license": "MIT"
     },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
-      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.14.1.tgz",
+      "integrity": "sha512-jGTk8UD/RdjsNZW8qq10r0RBvxL8OWtoT+kImlzPDFilmozzM+9QmIJsmze9UiSBrFU45ZxhTYBypn9q9z/VfQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -1287,54 +1287,49 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
-      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
+      "integrity": "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.5.1",
-        "lightningcss": "1.30.1",
-        "magic-string": "^0.30.18",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.19",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.13"
+        "tailwindcss": "4.1.16"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
-      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
+      "integrity": "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg==",
       "dev": true,
-      "hasInstallScript": true,
       "license": "MIT",
-      "dependencies": {
-        "detect-libc": "^2.0.4",
-        "tar": "^7.4.3"
-      },
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.13",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.13",
-        "@tailwindcss/oxide-darwin-x64": "4.1.13",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.13",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.13",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.13",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
+        "@tailwindcss/oxide-android-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-x64": "4.1.16",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.16",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.16",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.16",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.16"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
-      "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.16.tgz",
+      "integrity": "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA==",
       "cpu": [
         "arm64"
       ],
@@ -1349,9 +1344,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
-      "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.16.tgz",
+      "integrity": "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA==",
       "cpu": [
         "arm64"
       ],
@@ -1366,9 +1361,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
-      "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.16.tgz",
+      "integrity": "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg==",
       "cpu": [
         "x64"
       ],
@@ -1383,9 +1378,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
-      "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.16.tgz",
+      "integrity": "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg==",
       "cpu": [
         "x64"
       ],
@@ -1400,9 +1395,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
-      "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.16.tgz",
+      "integrity": "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw==",
       "cpu": [
         "arm"
       ],
@@ -1417,9 +1412,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
-      "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.16.tgz",
+      "integrity": "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w==",
       "cpu": [
         "arm64"
       ],
@@ -1434,9 +1429,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
-      "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.16.tgz",
+      "integrity": "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ==",
       "cpu": [
         "arm64"
       ],
@@ -1451,9 +1446,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
-      "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.16.tgz",
+      "integrity": "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew==",
       "cpu": [
         "x64"
       ],
@@ -1468,9 +1463,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
-      "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.16.tgz",
+      "integrity": "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw==",
       "cpu": [
         "x64"
       ],
@@ -1485,9 +1480,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
-      "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.16.tgz",
+      "integrity": "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -1503,21 +1498,21 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.5",
-        "@emnapi/runtime": "^1.4.5",
-        "@emnapi/wasi-threads": "^1.0.4",
-        "@napi-rs/wasm-runtime": "^0.2.12",
-        "@tybys/wasm-util": "^0.10.0",
-        "tslib": "^2.8.0"
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
-      "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.16.tgz",
+      "integrity": "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A==",
       "cpu": [
         "arm64"
       ],
@@ -1532,9 +1527,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
-      "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.16.tgz",
+      "integrity": "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg==",
       "cpu": [
         "x64"
       ],
@@ -1549,17 +1544,17 @@
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
-      "integrity": "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.16.tgz",
+      "integrity": "sha512-Qn3SFGPXYQMKR/UtqS+dqvPrzEeBZHrFA92maT4zijCVggdsXnDBMsPFJo1eArX3J+O+Gi+8pV4PkqjLCNBk3A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.13",
-        "@tailwindcss/oxide": "4.1.13",
+        "@tailwindcss/node": "4.1.16",
+        "@tailwindcss/oxide": "4.1.16",
         "postcss": "^8.4.41",
-        "tailwindcss": "4.1.13"
+        "tailwindcss": "4.1.16"
       }
     },
     "node_modules/@tanstack/match-sorter-utils": {
@@ -1656,9 +1651,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.19.14",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.14.tgz",
-      "integrity": "sha512-gqiKWld3YIkmtrrg9zDvg9jfksZCcPywXVN7IauUGhilwGV/yOyeUsvpR796m/Jye0zUzMXPKe8Ct1B79A7N5Q==",
+      "version": "20.19.23",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.23.tgz",
+      "integrity": "sha512-yIdlVVVHXpmqRhtyovZAcSy0MiPcYWGkoO4CGe/+jpP0hmNuihm4XhHbADpK++MsiLHP5MVlv+bcgdF99kSiFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1672,22 +1667,22 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.1.13",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.13.tgz",
-      "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.1.9",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
-      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
+      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "@types/react": "^19.0.0"
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/@types/react-transition-group": {
@@ -1700,17 +1695,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.43.0.tgz",
-      "integrity": "sha512-8tg+gt7ENL7KewsKMKDHXR1vm8tt9eMxjJBYINf6swonlWgkYn5NwyIgXpbbDxTNU5DgpDFfj95prcTq2clIQQ==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.2.tgz",
+      "integrity": "sha512-ZGBMToy857/NIPaaCucIUQgqueOiq7HeAKkhlvqVV4lm089zUFW6ikRySx2v+cAhKeUCPuWVHeimyk6Dw1iY3w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/type-utils": "8.43.0",
-        "@typescript-eslint/utils": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/scope-manager": "8.46.2",
+        "@typescript-eslint/type-utils": "8.46.2",
+        "@typescript-eslint/utils": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2",
         "graphemer": "^1.4.0",
         "ignore": "^7.0.0",
         "natural-compare": "^1.4.0",
@@ -1724,7 +1719,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.43.0",
+        "@typescript-eslint/parser": "^8.46.2",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
@@ -1740,16 +1735,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.43.0.tgz",
-      "integrity": "sha512-B7RIQiTsCBBmY+yW4+ILd6mF5h1FUwJsVvpqkrgpszYifetQ2Ke+Z4u6aZh0CblkUGIdR59iYVyXqqZGkZ3aBw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.2.tgz",
+      "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/scope-manager": "8.46.2",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/typescript-estree": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1765,14 +1760,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.43.0.tgz",
-      "integrity": "sha512-htB/+D/BIGoNTQYffZw4uM4NzzuolCoaA/BusuSIcC8YjmBYQioew5VUZAYdAETPjeed0hqCaW7EHg+Robq8uw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.2.tgz",
+      "integrity": "sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.43.0",
-        "@typescript-eslint/types": "^8.43.0",
+        "@typescript-eslint/tsconfig-utils": "^8.46.2",
+        "@typescript-eslint/types": "^8.46.2",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1787,14 +1782,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.43.0.tgz",
-      "integrity": "sha512-daSWlQ87ZhsjrbMLvpuuMAt3y4ba57AuvadcR7f3nl8eS3BjRc8L9VLxFLk92RL5xdXOg6IQ+qKjjqNEimGuAg==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.2.tgz",
+      "integrity": "sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0"
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1805,9 +1800,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.43.0.tgz",
-      "integrity": "sha512-ALC2prjZcj2YqqL5X/bwWQmHA2em6/94GcbB/KKu5SX3EBDOsqztmmX1kMkvAJHzxk7TazKzJfFiEIagNV3qEA==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.2.tgz",
+      "integrity": "sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1822,15 +1817,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.43.0.tgz",
-      "integrity": "sha512-qaH1uLBpBuBBuRf8c1mLJ6swOfzCXryhKND04Igr4pckzSEW9JX5Aw9AgW00kwfjWJF0kk0ps9ExKTfvXfw4Qg==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.46.2.tgz",
+      "integrity": "sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0",
-        "@typescript-eslint/utils": "8.43.0",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/typescript-estree": "8.46.2",
+        "@typescript-eslint/utils": "8.46.2",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.1.0"
       },
@@ -1847,9 +1842,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.43.0.tgz",
-      "integrity": "sha512-vQ2FZaxJpydjSZJKiSW/LJsabFFvV7KgLC5DiLhkBcykhQj8iK9BOaDmQt74nnKdLvceM5xmhaTF+pLekrxEkw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.2.tgz",
+      "integrity": "sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1861,16 +1856,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.43.0.tgz",
-      "integrity": "sha512-7Vv6zlAhPb+cvEpP06WXXy/ZByph9iL6BQRBDj4kmBsW98AqEeQHlj/13X+sZOrKSo9/rNKH4Ul4f6EICREFdw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.2.tgz",
+      "integrity": "sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.43.0",
-        "@typescript-eslint/tsconfig-utils": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/project-service": "8.46.2",
+        "@typescript-eslint/tsconfig-utils": "8.46.2",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -1946,16 +1941,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.43.0.tgz",
-      "integrity": "sha512-S1/tEmkUeeswxd0GGcnwuVQPFWo8NzZTOMxCvw8BX7OMxnNae+i8Tm7REQen/SwUIPoPqfKn7EaZ+YLpiB3k9g==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.2.tgz",
+      "integrity": "sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0"
+        "@typescript-eslint/scope-manager": "8.46.2",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/typescript-estree": "8.46.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1970,13 +1965,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.43.0.tgz",
-      "integrity": "sha512-T+S1KqRD4sg/bHfLwrpF/K3gQLBM1n7Rp7OjjikjTEssI2YJzQpi5WXoynOaQ93ERIuq3O8RBTOUYDKszUCEHw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.2.tgz",
+      "integrity": "sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
+        "@typescript-eslint/types": "8.46.2",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -2529,9 +2524,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.10.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
-      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz",
+      "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==",
       "dev": true,
       "license": "MPL-2.0",
       "engines": {
@@ -2664,9 +2659,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001741",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz",
-      "integrity": "sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==",
+      "version": "1.0.30001751",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001751.tgz",
+      "integrity": "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==",
       "funding": [
         {
           "type": "opencollective",
@@ -2700,16 +2695,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chownr": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
-      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2725,25 +2710,11 @@
         "node": ">=6"
       }
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -2756,20 +2727,9 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2833,9 +2793,9 @@
       "license": "MIT"
     },
     "node_modules/daisyui": {
-      "version": "5.1.12",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.1.12.tgz",
-      "integrity": "sha512-wPk6TfH6cPjYFcJIj1Zn2IYjrXLHtKbHD7GesfTDpH86d6Mgy1GTgl8mhKUqpbnVnTUNgkV7L2diPsvOGSpBIw==",
+      "version": "5.3.9",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.3.9.tgz",
+      "integrity": "sha512-741x1pGGSGHcrBYtdE7iKbqW1OoiijYdAZ8oJPZR9MhSKLcMBlHjKfN3YlM2/K7t5jd7O0sg4SqkVNPylalRFw==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2991,9 +2951,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz",
-      "integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
@@ -3067,12 +3027,6 @@
         "is-arrayish": "^0.2.1"
       }
     },
-    "node_modules/error-ex/node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "license": "MIT"
-    },
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -3259,25 +3213,24 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.35.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.35.0.tgz",
-      "integrity": "sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.38.0.tgz",
+      "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.21.0",
-        "@eslint/config-helpers": "^0.3.1",
-        "@eslint/core": "^0.15.2",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.1",
+        "@eslint/core": "^0.16.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.35.0",
-        "@eslint/plugin-kit": "^0.3.5",
+        "@eslint/js": "9.38.0",
+        "@eslint/plugin-kit": "^0.4.0",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
         "@types/estree": "^1.0.6",
-        "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.6",
@@ -3932,6 +3885,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -3988,9 +3951,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
-      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4264,11 +4227,10 @@
       }
     },
     "node_modules/is-arrayish": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
-      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
-      "license": "MIT",
-      "optional": true
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
     },
     "node_modules/is-async-function": {
       "version": "2.1.1",
@@ -4423,14 +4385,15 @@
       }
     },
     "node_modules/is-generator-function": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
-      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.0",
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
         "has-tostringtag": "^1.0.2",
         "safe-regex-test": "^1.1.0"
       },
@@ -4685,9 +4648,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
-      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -4826,9 +4789,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
-      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
       "dev": true,
       "license": "MPL-2.0",
       "dependencies": {
@@ -4842,22 +4805,44 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.30.1",
-        "lightningcss-darwin-x64": "1.30.1",
-        "lightningcss-freebsd-x64": "1.30.1",
-        "lightningcss-linux-arm-gnueabihf": "1.30.1",
-        "lightningcss-linux-arm64-gnu": "1.30.1",
-        "lightningcss-linux-arm64-musl": "1.30.1",
-        "lightningcss-linux-x64-gnu": "1.30.1",
-        "lightningcss-linux-x64-musl": "1.30.1",
-        "lightningcss-win32-arm64-msvc": "1.30.1",
-        "lightningcss-win32-x64-msvc": "1.30.1"
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
-      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
       "cpu": [
         "arm64"
       ],
@@ -4876,9 +4861,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
-      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
       "cpu": [
         "x64"
       ],
@@ -4897,9 +4882,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
-      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
       "cpu": [
         "x64"
       ],
@@ -4918,9 +4903,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
-      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
       "cpu": [
         "arm"
       ],
@@ -4939,9 +4924,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
-      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
       "cpu": [
         "arm64"
       ],
@@ -4960,9 +4945,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
-      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
       "cpu": [
         "arm64"
       ],
@@ -4981,9 +4966,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
-      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
       "cpu": [
         "x64"
       ],
@@ -5002,9 +4987,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
-      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
       "cpu": [
         "x64"
       ],
@@ -5023,9 +5008,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
-      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
       "cpu": [
         "arm64"
       ],
@@ -5044,9 +5029,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
-      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
       "cpu": [
         "x64"
       ],
@@ -5118,9 +5103,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.19",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
-      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5210,45 +5195,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/minizlib": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/moment": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
@@ -5283,9 +5229,9 @@
       }
     },
     "node_modules/napi-postinstall": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.3.tgz",
-      "integrity": "sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -5910,12 +5856,12 @@
       "license": "MIT"
     },
     "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
       "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.16.0",
+        "is-core-module": "^2.16.1",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -6045,9 +5991,9 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
@@ -6107,15 +6053,15 @@
       }
     },
     "node_modules/sharp": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.3.tgz",
-      "integrity": "sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.4.tgz",
+      "integrity": "sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "color": "^4.2.3",
-        "detect-libc": "^2.0.4",
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.0",
         "semver": "^7.7.2"
       },
       "engines": {
@@ -6125,28 +6071,28 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.3",
-        "@img/sharp-darwin-x64": "0.34.3",
-        "@img/sharp-libvips-darwin-arm64": "1.2.0",
-        "@img/sharp-libvips-darwin-x64": "1.2.0",
-        "@img/sharp-libvips-linux-arm": "1.2.0",
-        "@img/sharp-libvips-linux-arm64": "1.2.0",
-        "@img/sharp-libvips-linux-ppc64": "1.2.0",
-        "@img/sharp-libvips-linux-s390x": "1.2.0",
-        "@img/sharp-libvips-linux-x64": "1.2.0",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0",
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.0",
-        "@img/sharp-linux-arm": "0.34.3",
-        "@img/sharp-linux-arm64": "0.34.3",
-        "@img/sharp-linux-ppc64": "0.34.3",
-        "@img/sharp-linux-s390x": "0.34.3",
-        "@img/sharp-linux-x64": "0.34.3",
-        "@img/sharp-linuxmusl-arm64": "0.34.3",
-        "@img/sharp-linuxmusl-x64": "0.34.3",
-        "@img/sharp-wasm32": "0.34.3",
-        "@img/sharp-win32-arm64": "0.34.3",
-        "@img/sharp-win32-ia32": "0.34.3",
-        "@img/sharp-win32-x64": "0.34.3"
+        "@img/sharp-darwin-arm64": "0.34.4",
+        "@img/sharp-darwin-x64": "0.34.4",
+        "@img/sharp-libvips-darwin-arm64": "1.2.3",
+        "@img/sharp-libvips-darwin-x64": "1.2.3",
+        "@img/sharp-libvips-linux-arm": "1.2.3",
+        "@img/sharp-libvips-linux-arm64": "1.2.3",
+        "@img/sharp-libvips-linux-ppc64": "1.2.3",
+        "@img/sharp-libvips-linux-s390x": "1.2.3",
+        "@img/sharp-libvips-linux-x64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3",
+        "@img/sharp-linux-arm": "0.34.4",
+        "@img/sharp-linux-arm64": "0.34.4",
+        "@img/sharp-linux-ppc64": "0.34.4",
+        "@img/sharp-linux-s390x": "0.34.4",
+        "@img/sharp-linux-x64": "0.34.4",
+        "@img/sharp-linuxmusl-arm64": "0.34.4",
+        "@img/sharp-linuxmusl-x64": "0.34.4",
+        "@img/sharp-wasm32": "0.34.4",
+        "@img/sharp-win32-arm64": "0.34.4",
+        "@img/sharp-win32-ia32": "0.34.4",
+        "@img/sharp-win32-x64": "0.34.4"
       }
     },
     "node_modules/shebang-command": {
@@ -6248,16 +6194,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
-      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -6511,16 +6447,16 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
-      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
+      "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/tapable": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
-      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6531,24 +6467,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/tar": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
-        "yallist": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -6764,9 +6682,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
-      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -6875,9 +6793,9 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -6998,16 +6916,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/yallist": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
-      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
@@ -7031,9 +6939,9 @@
       }
     },
     "node_modules/yup": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.0.tgz",
-      "integrity": "sha512-VJce62dBd+JQvoc+fCVq+KZfPHr+hXaxCcVgotfwWvlR0Ja3ffYKaJBT8rptPOSKOGJDCUnW2C2JWpud7aRP6Q==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
+      "integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
       "license": "MIT",
       "dependencies": {
         "property-expr": "^2.0.5",

From c8f596ad2af436f37ccd47eb41e3d2b28e5232fc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 05:54:14 +0700
Subject: [PATCH 76/92] refactor(FE-137): update RecordingForm to improve
 project flock handling and label formatting

---
 .../recording/form/RecordingForm.schema.ts     |  2 +-
 .../recording/form/RecordingForm.tsx           | 18 ++++++++----------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
index 59afbd61..4abee337 100644
--- a/src/components/pages/production/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/production/recording/form/RecordingForm.schema.ts
@@ -93,7 +93,7 @@ export const getRecordingFormInitialValues = (
   project_flock_kandang: initialValues?.project_flock_kandang_id
     ? {
         value: initialValues.project_flock_kandang_id,
-        label: `Project Flock Kandang #${initialValues.project_flock_kandang_id}`,
+        label: `Project Flock #${initialValues.project_flock_kandang_id}`,
       }
     : null,
   project_flock_kandang_id: initialValues?.project_flock_kandang_id ?? 0,
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 0a117f3a..ffee70ae 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -107,7 +107,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     projectFlocks?.data.forEach((projectFlock) => {
       projectFlock.kandangs.forEach((kandang) => {
         options.push({
-          value: kandang.id,
+          value: projectFlock.id,
           label: `${projectFlock.flock.name} - ${projectFlock.area.name} - ${kandang.name}`,
         });
       });
@@ -242,15 +242,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     if (!formik.values.project_flock_kandang || !isResponseSuccess(projectFlocks)) {
       return selectedLocation;
     }
-    const kandangId = formik.values.project_flock_kandang.value;
-    for (const projectFlock of projectFlocks.data) {
-      const kandang = projectFlock.kandangs.find(k => k.id === kandangId);
-      if (kandang && projectFlock.location) {
-        return {
-          value: projectFlock.location.id,
-          label: projectFlock.location.name
-        };
-      }
+    const projectFlockId = formik.values.project_flock_kandang.value;
+    const projectFlock = projectFlocks.data.find(pf => pf.id === projectFlockId);
+    if (projectFlock && projectFlock.location) {
+      return {
+        value: projectFlock.location.id,
+        label: projectFlock.location.name
+      };
     }
     return selectedLocation;
   }, [formik.values.project_flock_kandang, projectFlocks, selectedLocation]);

From 4b9d0d20645e1e9a2556cf8fee63da4cf43214e3 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 06:18:27 +0700
Subject: [PATCH 77/92] refactor(FE-137): enhance RecordingForm validation to
 prevent duplicate project flock entries

---
 .../recording/form/RecordingForm.schema.ts    |  87 ++++++++++-
 .../recording/form/RecordingForm.tsx          | 135 +++++++++++-------
 2 files changed, 166 insertions(+), 56 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
index 4abee337..ccb4ddd5 100644
--- a/src/components/pages/production/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/production/recording/form/RecordingForm.schema.ts
@@ -6,6 +6,91 @@ import {
 } from '@/types/api/production/recording';
 
 export const RecordingFormSchema = Yup.object({
+  project_flock_kandang: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  project_flock_kandang_id: Yup.number()
+    .default(0)
+    .typeError('Project Flock Kandang wajib diisi!')
+    .test(
+      'is-valid-project-flock-kandang',
+      'Project Flock Kandang wajib diisi!',
+      (value) => value !== undefined && value !== null && value > 0
+    )
+    .required('Project Flock Kandang wajib diisi!')
+    .test(
+      'not-already-recorded',
+      'Project Flock ini sudah direcord hari ini!',
+      function(value) {
+        const recordedProjectFlockIds = this.options.context?.recordedProjectFlockIds as Set<number>;
+        const formType = this.options.context?.type as 'add' | 'edit' | 'detail';
+        if (formType !== 'add') return true;
+        if (value && recordedProjectFlockIds?.has(value)) {
+          return false;
+        }
+        return true;
+      }
+    ),
+  body_weights: Yup.array()
+    .of(
+      Yup.object({
+        weight: Yup.number()
+          .required('Berat ayam wajib diisi!')
+          .min(1, 'Berat ayam minimal 1 gram!')
+          .typeError('Berat ayam harus berupa angka!'),
+        qty: Yup.number()
+          .required('Jumlah ayam wajib diisi!')
+          .min(1, 'Jumlah ayam minimal 1 ekor!')
+          .typeError('Jumlah ayam harus berupa angka!')
+          .default(1),
+        average_weight: Yup.number()
+          .optional()
+          .min(0, 'Rata-rata berat tidak boleh negatif!')
+          .typeError('Rata-rata berat harus berupa angka!')
+          .default(0),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data bobot badan!')
+    .required('Data bobot badan wajib diisi!'),
+  stocks: Yup.array()
+    .of(
+      Yup.object({
+        product_warehouse_id: Yup.number()
+          .required('Produk wajib diisi!')
+          .min(1, 'Produk wajib diisi!')
+          .typeError('Produk harus berupa angka!'),
+        usage_amount: Yup.number()
+          .required('Jumlah penggunaan wajib diisi!')
+          .min(0, 'Jumlah penggunaan tidak boleh negatif!')
+          .typeError('Jumlah penggunaan harus berupa angka!'),
+        notes: Yup.string().optional(),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data stok!')
+    .required('Data stok wajib diisi!'),
+  depletions: Yup.array()
+    .of(
+      Yup.object({
+        total: Yup.number()
+          .required('Jumlah depletions wajib diisi!')
+          .min(1, 'Jumlah depletions minimal 1!')
+          .typeError('Jumlah depletions harus berupa angka!'),
+        notes: Yup.string()
+          .required('Kondisi depletions wajib diisi!')
+          .oneOf(
+            RECORDING_FLAG_OPTIONS.map((option) => option.value),
+            'Kondisi depletions tidak valid!'
+          )
+          .typeError('Kondisi depletions harus berupa teks!')
+          .min(1, 'Kondisi depletions wajib diisi!'),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data depletions!')
+    .required('Data depletions wajib diisi!'),
+});
+
+export const UpdateRecordingFormSchema = Yup.object({
   project_flock_kandang: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
@@ -77,8 +162,6 @@ export const RecordingFormSchema = Yup.object({
     .required('Data depletions wajib diisi!'),
 });
 
-export const UpdateRecordingFormSchema = RecordingFormSchema;
-
 export type RecordingFormValues = Yup.InferType<typeof RecordingFormSchema>;
 
 type RecordingFormData = Partial<Recording> & {
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index ffee70ae..ada0f019 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -86,6 +86,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     return `${ProductWarehouseApi.basePath}?${params.toString()}`;
   }, [selectedLocation]);
 
+  const today = new Date().toISOString().split('T')[0];
+  const existingRecordingsUrl = useMemo(() => {
+    return `${RecordingApi.basePath}?record_date=${today}`;
+  }, []);
+
+  const { data: existingRecordings } = useSWR(
+    existingRecordingsUrl,
+    RecordingApi.getAllFetcher
+  );
+
+  const recordedProjectFlockIds = useMemo(() => {
+    if (!isResponseSuccess(existingRecordings)) return new Set<number>();
+    return new Set(existingRecordings?.data.map(rec => rec.project_flock_kandang_id) || []);
+  }, [existingRecordings]);
+
   const { data: stockProducts, isLoading: isLoadingStockProducts } = useSWR(
     stockProductsUrl,
     ProductWarehouseApi.getAllFetcher
@@ -106,14 +121,19 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     const options: OptionType[] = [];
     projectFlocks?.data.forEach((projectFlock) => {
       projectFlock.kandangs.forEach((kandang) => {
+        const isAlreadyRecorded = recordedProjectFlockIds.has(projectFlock.id);
+        const label = isAlreadyRecorded
+          ? `${projectFlock.flock.name} - ${projectFlock.area.name} - ${kandang.name} (Sudah Direcord)`
+          : `${projectFlock.flock.name} - ${projectFlock.area.name} - ${kandang.name}`;
+
         options.push({
           value: projectFlock.id,
-          label: `${projectFlock.flock.name} - ${projectFlock.area.name} - ${kandang.name}`,
+          label: label,
         });
       });
     });
     return options;
-  }, [projectFlocks]);
+  }, [projectFlocks, recordedProjectFlockIds, type]);
 
   const unifiedStockProducts = useMemo(() => {
     const options: OptionType[] = [];
@@ -359,6 +379,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   };
 
   const projectFlockKandangChangeHandler = (val: OptionType | OptionType[] | null) => {
+    if (type === 'add' && val && recordedProjectFlockIds.has((val as OptionType).value as number)) {
+      toast.error('Project Flock ini sudah direcord hari ini!');
+      return;
+    }
+
     formik.setFieldTouched('project_flock_kandang', true);
     formik.setFieldValue('project_flock_kandang', val);
     formik.setFieldTouched('project_flock_kandang_id', true);
@@ -665,28 +690,30 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 isSearchable
               />
 
-              <SelectInput
-                required
-                label='Project Flock'
-                value={formik.values.project_flock_kandang ?? undefined}
-                onChange={projectFlockKandangChangeHandler}
-                options={projectFlockKandangOptions}
-                onInputChange={setProjectFlockSearchValue}
-                isLoading={isLoadingProjectFlocks}
-                isError={
-                  formik.touched.project_flock_kandang_id &&
-                  Boolean(formik.errors.project_flock_kandang_id)
-                }
-                errorMessage={formik.errors.project_flock_kandang_id as string}
-                isDisabled={type === 'detail' || !selectedLocation}
-                placeholder={
-                  selectedLocation
-                    ? 'Pilih Project Flock - Kandang'
-                    : 'Pilih Lokasi terlebih dahulu'
-                }
-                isClearable
-                isSearchable
-              />
+              <div>
+                <SelectInput
+                  required
+                  label='Project Flock'
+                  value={formik.values.project_flock_kandang ?? undefined}
+                  onChange={projectFlockKandangChangeHandler}
+                  options={projectFlockKandangOptions}
+                  onInputChange={setProjectFlockSearchValue}
+                  isLoading={isLoadingProjectFlocks}
+                  isError={
+                    formik.touched.project_flock_kandang_id &&
+                    Boolean(formik.errors.project_flock_kandang_id)
+                  }
+                  errorMessage={formik.errors.project_flock_kandang_id as string}
+                  isDisabled={type === 'detail' || !selectedLocation}
+                  placeholder={
+                    selectedLocation
+                      ? 'Pilih Project Flock - Kandang'
+                      : 'Pilih Lokasi terlebih dahulu'
+                  }
+                  isClearable
+                  isSearchable
+                />
+              </div>
             </div>
           </Card>
 
@@ -1044,38 +1071,38 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         isDisabled={type === 'detail'}
                       />
                     </td>
-                      <td>
+                    <td>
                       <div className="flex flex-col gap-1">
-                      <NumberInput
-                        required
-                        name={`stocks.${idx}.usage_amount`}
-                        value={stock.usage_amount}
-                        onChange={handleStockUsageAmountChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        decimalScale={0}
-                        allowNegative={false}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        isError={
-                          isRepeaterInputError('stocks', 'usage_amount', idx)
-                            .isError || Boolean(getStockUsageError(idx))
-                        }
-                        errorMessage={
-                          isRepeaterInputError('stocks', 'usage_amount', idx)
-                            .errorMessage ||
-                          getStockUsageError(idx) ||
-                          undefined
-                        }
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-24',
-                        }}
-                        placeholder="Jumlah Pakai"
-                      />
-                      {type !== 'detail' && getStockUsageAdornment(idx)}
-                    </div>
+                        <NumberInput
+                          required
+                          name={`stocks.${idx}.usage_amount`}
+                          value={stock.usage_amount}
+                          onChange={handleStockUsageAmountChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          isError={
+                            isRepeaterInputError('stocks', 'usage_amount', idx)
+                              .isError || Boolean(getStockUsageError(idx))
+                          }
+                          errorMessage={
+                            isRepeaterInputError('stocks', 'usage_amount', idx)
+                              .errorMessage ||
+                            getStockUsageError(idx) ||
+                            undefined
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                          placeholder="Jumlah Pakai"
+                        />
+                        {type !== 'detail' && getStockUsageAdornment(idx)}
+                      </div>
                     </td>
-                      {type !== 'detail' && (
+                    {type !== 'detail' && (
                       <td>
                         <div className='flex justify-center'>
                           <Button

From 9143248e1dd322259558599ec2d54ce6cc087d39 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 06:28:51 +0700
Subject: [PATCH 78/92] refactor(FE-137): remove redundant status column from
 RecordingTable

---
 .../pages/production/recording/RecordingTable.tsx          | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 4c727185..75de6020 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -611,13 +611,6 @@ const RecordingTable = () => {
             header: 'Populasi Akhir',
             cell: (props) => (props.row.original.total_chick - props.row.original.total_depletion)?.toLocaleString() || '-',
           },
-          {
-            header: 'Status Recording',
-            cell: (props) => {
-              const status = props.row.original.status;
-              return status === 1 ? 'Menunggu Persetujuan' : 'Disetujui';
-            },
-          },
           {
             header: 'Ketepatan Waktu',
             cell: (props) => props.row.original.ontime ? 'Tepat Waktu' : 'Terlambat',

From 943c0e05b9f51b8dd3476116d5f05aebd49a92df Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 06:50:48 +0700
Subject: [PATCH 79/92] refactor(FE-137): conditionally render location
 SelectInput in RecordingForm based on type

---
 .../recording/form/RecordingForm.tsx          | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index ada0f019..17af9515 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -675,20 +675,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               body: 'flex flex-col gap-6',
             }}
           >
-            <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
-              <SelectInput
-                required
-                label='Lokasi'
-                value={selectedLocation}
-                onChange={locationChangeHandler}
-                options={locationOptions}
-                onInputChange={setLocationSearchValue}
-                isLoading={isLoadingLocations}
-                isDisabled={type === 'detail'}
-                placeholder='Pilih Lokasi'
-                isClearable
-                isSearchable
-              />
+            <div className={type === 'detail' ? 'flex flex-col gap-6' : 'grid grid-cols-1 md:grid-cols-2 gap-6'}>
+              {type === 'detail' ? null : (
+                <SelectInput
+                  required
+                  label='Lokasi'
+                  value={selectedLocation}
+                  onChange={locationChangeHandler}
+                  options={locationOptions}
+                  onInputChange={setLocationSearchValue}
+                  isLoading={isLoadingLocations}
+                  placeholder='Pilih Lokasi'
+                  isClearable
+                  isSearchable
+                />
+              )}
 
               <div>
                 <SelectInput

From cbb4f7421ec9ffcc904778c4eeaf2f37ffe6412a Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Mon, 27 Oct 2025 10:58:49 +0700
Subject: [PATCH 80/92] fix(FE-86): fixing error null value

---
 src/app/production/chickin/add/page.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index af834b37..3ef73396 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -141,8 +141,8 @@ const AddChickin = () => {
                     options={options}
                     isLoading={isLoadingListProjectFlock}
                     value={{
-                      label: `${projectFlock.data.flock.name} - ${projectFlock.data.category} - Periode ${projectFlock.data.period}`,
-                      value: projectFlock.data.id,
+                      label: `${projectFlock.data?.flock?.name} - ${projectFlock.data?.category} - Periode ${projectFlock.data?.period}`,
+                      value: projectFlock.data?.id,
                     }}
                     onChange={(val) =>
                       router.push(
@@ -159,7 +159,7 @@ const AddChickin = () => {
               </div>
             </header>
             <Table<Kandang>
-              data={projectFlock.data.kandangs}
+              data={projectFlock.data?.kandangs}
               columns={[
                 {
                   header: '#',
@@ -202,7 +202,7 @@ const AddChickin = () => {
                 containerClassName: cn({
                   'mb-20':
                     isResponseSuccess(projectFlock) &&
-                    projectFlock.data.kandangs?.length === 0,
+                    projectFlock.data?.kandangs?.length === 0,
                 }),
                 tableWrapperClassName: 'overflow-x-auto min-h-full!',
                 tableClassName: 'font-inter w-full table-auto min-h-full!',
@@ -239,10 +239,10 @@ const AddChickin = () => {
                 <ChickinForm
                   initialValues={{
                     project_flock_kandang: projectFlockKandang.data,
-                    created_user: projectFlock.data.created_user,
-                    created_at: projectFlock.data.created_at,
-                    updated_at: projectFlock.data.updated_at,
-                    approval: projectFlock.data.approval,
+                    created_user: projectFlock.data?.created_user,
+                    created_at: projectFlock.data?.created_at,
+                    updated_at: projectFlock.data?.updated_at,
+                    approval: projectFlock.data?.approval,
                   }}
                   afterSubmit={handleAfterSubmit}
                 />

From 58369b8ffa9c56162ec58072152ba508e69e3770 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 11:05:06 +0700
Subject: [PATCH 81/92] refactor(FE-137): simplify stock display in
 MovementForm and RecordingForm, enhance input handling in SelectInput

---
 src/components/input/SelectInput.tsx          |  24 ++++
 .../inventory/movement/form/MovementForm.tsx  | 105 ++++++++++++++----
 .../recording/form/RecordingForm.tsx          |  17 ++-
 3 files changed, 114 insertions(+), 32 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 28eb9786..912d4622 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -48,6 +48,7 @@ interface SelectInputBaseProps<T = OptionType> {
   openMenu?: boolean;
   delay?: number;
   onInputChange?: (search: string) => void;
+  startAdornment?: ReactNode;
 }
 
 interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -82,6 +83,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     delay = 300,
     createables = false,
     onInputChange,
+    startAdornment,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -205,6 +207,28 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         components={{
           ...components,
           ...(optionComponent ? { Option: optionComponent } : {}),
+          ...(startAdornment ? {
+            Control: ({ children, innerRef, innerProps, menuIsOpen, isFocused, isDisabled }) => (
+              <div
+                ref={innerRef}
+                {...innerProps}
+                className={cn(
+                  'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer! flex items-center',
+                  {
+                    'border-red-500! ring-2 ring-red-200': isError,
+                    'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                    'border-gray-300': !isError && !isFocused,
+                    'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+                  }
+                )}
+              >
+                <div className='flex-1 px-4! py-2! gap-1 flex items-center'>
+                  {startAdornment}
+                  {children}
+                </div>
+              </div>
+            ),
+          } : {}),
         }}
         menuPortalTarget={
           typeof document !== 'undefined' ? document.body : undefined
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 9a2b3b97..deb304df 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -111,14 +111,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const warehouseOptions = isResponseSuccess(warehouses)
     ? warehouses?.data.map((w) => {
-        const stockInfo = warehouseStockMap.get(w.id);
-        const stockLabel = stockInfo
-          ? ` (Stock: ${stockInfo.totalQty.toLocaleString('id-ID')} items, ${stockInfo.productCount} produk)`
-          : ' (Kosong)';
-
-        return {
-          value: w.id,
-          label: `${w.name}${stockLabel}`,
+      warehouseStockMap.get(w.id);
+      return {
+        value: w.id,
+          label: w.name,
           area: w.area?.name,
           location:
             'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
@@ -223,7 +219,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const productWarehouseOptions = isResponseSuccess(productWarehouses)
     ? productWarehouses?.data.map((pw) => ({
         value: pw.product.id,
-        label: `${pw.product.name} - ${pw.warehouse.name} (Stock: ${pw.quantity.toLocaleString('id-ID')})`,
+        label: pw.product.name,
         product_id: pw.product.id,
         warehouse_id: pw.warehouse.id,
         warehouse_name: pw.warehouse.name,
@@ -464,31 +460,77 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [productWarehouseOptions, type]
   );
 
-  const getProductQtyAdornment = useCallback(
+  const getProductQtyBottomLabel = useCallback(
     (productIdx: number) => {
-      if (type === 'detail') return null;
+      if (type === 'detail') return undefined;
       const product = formik.values.products?.[productIdx];
-      if (!product || !product.product_id) return null;
+      if (!product || !product.product_id) return undefined;
 
       const availableStock = getAvailableStock(product.product_id);
       const requestedQty = Number(product.product_qty) || 0;
       const remainingStock = availableStock - requestedQty;
 
       if (requestedQty > 0) {
+        return `Sisa: ${remainingStock.toLocaleString('en-US')}`;
+      }
+
+      return `Tersedia: ${availableStock.toLocaleString('en-US')}`;
+    },
+    [formik.values.products, getAvailableStock, type]
+  );
+
+  const getDeliveryProductQtyBottomLabel = useCallback(
+    (deliveryIdx: number, productIdx: number) => {
+      if (type === 'detail') return undefined;
+      const delivery = formik.values.deliveries?.[deliveryIdx];
+      if (!delivery) return undefined;
+
+      const deliveryProduct = delivery.products[productIdx];
+      if (!deliveryProduct || !deliveryProduct.product_id) return undefined;
+
+      const relatedProduct = formik.values.products?.find(
+        (p) => p.product_id === deliveryProduct.product_id
+      );
+      if (!relatedProduct) return undefined;
+
+      const totalQtyUsed =
+        formik.values.deliveries?.reduce((total, d, dIdx) => {
+          const productQty = d.products.reduce((sum, p, pIdx) => {
+            if (
+              p.product_id === deliveryProduct.product_id &&
+              !(dIdx === deliveryIdx && pIdx === productIdx)
+            ) {
+              return sum + (Number(p.product_qty) || 0);
+            }
+            return sum;
+          }, 0);
+          return total + productQty;
+        }, 0) || 0;
+
+      const availableQty = Number(relatedProduct.product_qty) - totalQtyUsed;
+      return `Tersedia: ${availableQty.toLocaleString('en-US')}`;
+    },
+    [formik.values.deliveries, formik.values.products, type]
+  );
+
+  const getWarehouseStockAdornment = useCallback(
+    (warehouseId: number) => {
+      const stockInfo = warehouseStockMap.get(warehouseId);
+      if (!stockInfo) {
         return (
-          <span className='text-sm text-gray-600 whitespace-nowrap'>
-            (sisa: {remainingStock.toLocaleString('id-ID')})
+          <span className='text-sm text-gray-500 whitespace-nowrap'>
+            (Kosong)
           </span>
         );
       }
 
       return (
-        <span className='text-sm text-gray-600 whitespace-nowrap'>
-          (tersedia: {availableStock.toLocaleString('id-ID')})
+        <span className='text-sm text-gray-500 whitespace-nowrap'>
+          (Tersedia {stockInfo.productCount} produk)
         </span>
       );
     },
-    [formik.values.products, getAvailableStock, type]
+    [warehouseStockMap]
   );
 
   const getProductQtyError = useCallback(
@@ -501,7 +543,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       const requestedQty = Number(product.product_qty) || 0;
 
       if (requestedQty > availableStock) {
-        return `Qty melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('id-ID')}`;
+        return `Qty melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('en-US')}`;
       }
 
       return null;
@@ -746,6 +788,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   errorMessage={formik.errors.source_warehouse_id as string}
                   isDisabled={type === 'detail'}
                   isClearable
+                  startAdornment={
+                    formik.values.source_warehouse_id
+                      ? getWarehouseStockAdornment(formik.values.source_warehouse_id)
+                      : undefined
+                  }
                 />
 
                 {/* Area and Location Info */}
@@ -808,6 +855,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   }
                   isDisabled={type === 'detail'}
                   isClearable
+                  startAdornment={
+                    formik.values.destination_warehouse_id
+                      ? getWarehouseStockAdornment(formik.values.destination_warehouse_id)
+                      : undefined
+                  }
                 />
 
                 {/* Area and Location Info */}
@@ -981,14 +1033,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`products.${idx}.product_qty`}
                             value={product.product_qty ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            endAdornment={getProductQtyAdornment(idx)}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=","
+                            decimalSeparator="."
+                            bottomLabel={getProductQtyBottomLabel(idx)}
                             isError={
                               isRepeaterInputError(
                                 'products',
@@ -1240,13 +1295,16 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`deliveries.${idx}.products.0.product_qty`}
                             value={delivery.products[0]?.product_qty ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=","
+                            decimalSeparator="."
                             isError={
                               isDeliveryProductInputError(idx, 0, 'product_qty')
                                 .isError || Boolean(getDeliveryQtyError(idx, 0))
@@ -1257,6 +1315,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               getDeliveryQtyError(idx, 0) ||
                               undefined
                             }
+                            bottomLabel={getDeliveryProductQtyBottomLabel(idx, 0)}
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-48',
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 17af9515..031303e2 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -123,8 +123,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       projectFlock.kandangs.forEach((kandang) => {
         const isAlreadyRecorded = recordedProjectFlockIds.has(projectFlock.id);
         const label = isAlreadyRecorded
-          ? `${projectFlock.flock.name} - ${projectFlock.area.name} - ${kandang.name} (Sudah Direcord)`
-          : `${projectFlock.flock.name} - ${projectFlock.area.name} - ${kandang.name}`;
+          ? `${projectFlock.flock.name} -  ${kandang.name} (Sudah Direcord)`
+          : `${projectFlock.flock.name} -  ${kandang.name}`;
 
         options.push({
           value: projectFlock.id,
@@ -140,22 +140,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     if (isResponseSuccess(stockProducts)) {
       stockProducts.data.forEach((product) => {
         const warehouse = product.warehouse;
-        const stockText = product.quantity.toLocaleString('id-ID');
-
+        product.quantity.toLocaleString('en-US');
         const hasPakanFlag = product.product.flags?.includes('PAKAN');
         const hasOvkFlag = product.product.flags?.includes('OVK');
 
         if (hasPakanFlag) {
           options.push({
             value: product.id,
-            label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
+            label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''}`
           });
         }
 
         if (hasOvkFlag) {
           options.push({
             value: product.id,
-            label: `[OVK] ${product.product.name} - ${warehouse?.name || ''} (${stockText})`
+            label: `[OVK] ${product.product.name} - ${warehouse?.name || ''}`
           });
         }
       });
@@ -293,7 +292,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       const availableStock = getAvailableStock(stock.product_warehouse_id);
       const requestedUsage = Number(stock.usage_amount) || 0;
       if (requestedUsage > availableStock) {
-        return `Jumlah pakai melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('id-ID')}`;
+        return `Jumlah pakai melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('en-US')}`;
       }
       return null;
     },
@@ -311,13 +310,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       if (requestedUsage > 0) {
         return (
           <span className='text-sm text-gray-600 whitespace-nowrap'>
-            (sisa: {remainingStock.toLocaleString('id-ID')})
+            (sisa: {remainingStock.toLocaleString('en-US')})
           </span>
         );
       }
       return (
         <span className='text-sm text-gray-600 whitespace-nowrap'>
-          (tersedia: {availableStock.toLocaleString('id-ID')})
+          (tersedia: {availableStock.toLocaleString('en-US')})
         </span>
       );
     },

From 0b0ecd3bc49213a7f037a1067f91771640c9038f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 11:25:15 +0700
Subject: [PATCH 82/92] refactor(FE-137): replace stock availability text with
 Badge component in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index deb304df..76d7ae30 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -30,6 +30,7 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
 import FileInput from '@/components/input/FileInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
+import Badge from '@/components/Badge';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -518,16 +519,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       const stockInfo = warehouseStockMap.get(warehouseId);
       if (!stockInfo) {
         return (
-          <span className='text-sm text-gray-500 whitespace-nowrap'>
-            (Kosong)
-          </span>
+          <Badge
+            variant="ghost"
+            color="neutral"
+            size="sm"
+            className={{ badge: 'whitespace-nowrap font-semibold' }}
+          >
+            Kosong
+          </Badge>
         );
       }
 
+      const { productCount } = stockInfo;
+      let color: 'neutral' | 'success' | 'warning' = 'neutral';
+      if (productCount === 0) color = 'warning';
+      else if (productCount > 0) color = 'success';
+
       return (
-        <span className='text-sm text-gray-500 whitespace-nowrap'>
-          (Tersedia {stockInfo.productCount} produk)
-        </span>
+        <Badge
+          variant="soft"
+          color={color}
+          size="sm"
+          className={{ badge: 'whitespace-nowrap font-semibold' }}
+        >
+          Tersedia {productCount} produk
+        </Badge>
       );
     },
     [warehouseStockMap]

From 304d14a6fee9fecbaf84ee81e27f30e86e2c1a19 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 11:57:46 +0700
Subject: [PATCH 83/92] refactor(FE-137): remove 'Periode' column from
 RecordingTable for cleaner display

---
 src/components/pages/production/recording/RecordingTable.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 75de6020..413408ab 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -568,10 +568,6 @@ const RecordingTable = () => {
             header: 'Nama Project',
             cell: (props) => `Project ${props.row.original.project_flock_kandang_id}`,
           },
-          {
-            header: 'Periode',
-            cell: (props) => props.row.original.day,
-          },
           {
             header: 'Umur (hari)',
             cell: (props) => props.row.original.day,

From 5d376f87839f1e6350ee7aeda51ade6a5fbbd71f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 12:56:38 +0700
Subject: [PATCH 84/92] refactor(FE-137): remove unnecessary padding from
 SelectInput for improved layout

---
 src/components/input/SelectInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 912d4622..d7b13529 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -222,7 +222,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
                   }
                 )}
               >
-                <div className='flex-1 px-4! py-2! gap-1 flex items-center'>
+                <div className='flex-1 px-4! gap-1 flex items-center'>
                   {startAdornment}
                   {children}
                 </div>

From 6dd3593f70879a48c5d646f721290719780c4e91 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 12:57:00 +0700
Subject: [PATCH 85/92] feat(FE-137): integrate Badge component to display
 project flock period in RecordingForm

---
 .../recording/form/RecordingForm.tsx          | 40 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 031303e2..c9a4e6fe 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -34,6 +34,7 @@ import { useModal } from '@/components/Modal';
 import toast from 'react-hot-toast';
 
 import Card from '@/components/Card';
+import Badge from '@/components/Badge';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -123,8 +124,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       projectFlock.kandangs.forEach((kandang) => {
         const isAlreadyRecorded = recordedProjectFlockIds.has(projectFlock.id);
         const label = isAlreadyRecorded
-          ? `${projectFlock.flock.name} -  ${kandang.name} (Sudah Direcord)`
-          : `${projectFlock.flock.name} -  ${kandang.name}`;
+          ? `${projectFlock.flock.name} - ${kandang.name} (Sudah Direcord)`
+          : `${projectFlock.flock.name} - ${kandang.name}`;
 
         options.push({
           value: projectFlock.id,
@@ -323,6 +324,36 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     [formik.values.stocks, getAvailableStock, type]
   );
 
+  const getProjectFlockBadgeAdornment = useCallback(
+    (projectFlockId: number) => {
+      if (!isResponseSuccess(projectFlocks)) return null;
+
+      const projectFlock = projectFlocks.data.find(pf => pf.id === projectFlockId);
+      if (!projectFlock) return null;
+
+      const isAlreadyRecorded = recordedProjectFlockIds.has(projectFlockId);
+      let color: 'neutral' | 'success' | 'warning' | 'error' = 'neutral';
+
+      if (isAlreadyRecorded) {
+        color = 'warning';
+      } else {
+        color = 'success';
+      }
+
+      return (
+        <Badge
+          variant="soft"
+          color={color}
+          size="sm"
+          className={{ badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5' }}
+        >
+          Periode {projectFlock.period}
+        </Badge>
+      );
+    },
+    [projectFlocks, recordedProjectFlockIds]
+  );
+
   const hasExceededStock = useMemo(() => {
     if (type === 'detail') return false;
     return (
@@ -712,6 +743,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   }
                   isClearable
                   isSearchable
+                  startAdornment={
+                    formik.values.project_flock_kandang_id
+                      ? getProjectFlockBadgeAdornment(formik.values.project_flock_kandang_id)
+                      : undefined
+                  }
                 />
               </div>
             </div>

From 15e6372c30ad0a05c83105cb6537b84f386918a9 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 13:03:37 +0700
Subject: [PATCH 86/92] feat(FE-137): add product flag badges to RecordingForm
 for enhanced visibility

---
 .../recording/form/RecordingForm.tsx          | 50 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index c9a4e6fe..5afeb021 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -148,14 +148,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         if (hasPakanFlag) {
           options.push({
             value: product.id,
-            label: `[PAKAN] ${product.product.name} - ${warehouse?.name || ''}`
+            label: `${product.product.name} - ${warehouse?.name || ''}`
           });
         }
 
         if (hasOvkFlag) {
           options.push({
             value: product.id,
-            label: `[OVK] ${product.product.name} - ${warehouse?.name || ''}`
+            label: `${product.product.name} - ${warehouse?.name || ''}`
           });
         }
       });
@@ -354,6 +354,47 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     [projectFlocks, recordedProjectFlockIds]
   );
 
+  const getProductFlagBadgeAdornment = useCallback(
+    (productWarehouseId: number) => {
+      if (!isResponseSuccess(stockProducts)) return null;
+
+      const productWarehouse = stockProducts.data.find(pw => pw.id === productWarehouseId);
+      if (!productWarehouse) return null;
+
+      const hasPakanFlag = productWarehouse.product.flags?.includes('PAKAN');
+      const hasOvkFlag = productWarehouse.product.flags?.includes('OVK');
+
+      if (hasPakanFlag) {
+        return (
+          <Badge
+            variant="soft"
+            color="info"
+            size="sm"
+            className={{ badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5' }}
+          >
+            PAKAN
+          </Badge>
+        );
+      }
+
+      if (hasOvkFlag) {
+        return (
+          <Badge
+            variant="soft"
+            color="secondary"
+            size="sm"
+            className={{ badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5' }}
+          >
+            OVK
+          </Badge>
+        );
+      }
+
+      return null;
+    },
+    [stockProducts]
+  );
+
   const hasExceededStock = useMemo(() => {
     if (type === 'detail') return false;
     return (
@@ -1105,6 +1146,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         }}
                         isSearchable
                         isDisabled={type === 'detail'}
+                        startAdornment={
+                          stock.product_warehouse_id
+                            ? getProductFlagBadgeAdornment(stock.product_warehouse_id)
+                            : undefined
+                        }
                       />
                     </td>
                     <td>

From 6706f361d84b03bfda01473c172f49d97d657585 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Mon, 27 Oct 2025 13:03:38 +0700
Subject: [PATCH 87/92] refactor(FE): change number input to reuseablecomponent
 from ui-component

---
 src/components/input/NumberInput.tsx          | 439 ++----------------
 .../inventory/movement/form/MovementForm.tsx  |   6 -
 .../recording/form/RecordingForm.tsx          |  20 -
 3 files changed, 42 insertions(+), 423 deletions(-)

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 132688d7..89b02845 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -1,413 +1,58 @@
-'use client';
+"use client";
 
-import {
-  ChangeEvent,
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { ChangeEvent, ReactNode } from "react";
+import { NumericFormat, OnValueChange } from "react-number-format";
+import TextInput, { TextInputProps } from "@/components/input/TextInput";
 
-import { cn } from '@/lib/helper';
-import Inputmask from 'inputmask';
-
-const createInputMask = (
-  maskType: MaskType,
-  decimals: number,
-  thousandSeparator: string,
-  decimalSeparator: string,
-  allowNegative: boolean,
-  oncomplete?: () => void,
-  onincomplete?: () => void,
-  oncleared?: () => void
-): Inputmask.Instance => {
-  const options: Inputmask.Options = {
-    alias: 'numeric',
-    groupSeparator: thousandSeparator,
-    radixPoint: decimalSeparator,
-    digits: decimals,
-    allowMinus: allowNegative,
-    rightAlign: false,
-    insertMode: true,
-    autoUnmask: false,
-    clearMaskOnLostFocus: false,
-    digitsOptional: decimals > 0,
-    placeholder: '0',
-    numericInput: false,
-    positionCaretOnClick: 'radixFocus',
-    greedy: true,
-    oncomplete,
-    onincomplete,
-    oncleared
-  };
-
-  return new Inputmask(options);
-};
-
-export type MaskType = 'currency' | 'weight' | 'decimal' | 'number' | 'text';
-
-export interface NumberInputProps {
-  label?: string;
-  bottomLabel?: string;
-  name: string;
-  value?: number | string;
-  placeholder?: string;
-
-  className?: {
-    wrapper?: string;
-    label?: string;
-    inputWrapper?: string;
-    input?: string;
-  };
-
-  isError?: boolean;
-  isValid?: boolean;
-  errorMessage?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  isLoading?: boolean;
-
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-
-  maskType?: MaskType;
-  decimals?: number;
+interface NumberInputProps extends Omit<TextInputProps, "type"> {
   thousandSeparator?: string;
   decimalSeparator?: string;
-  currencyPrefix?: string;
-  weightUnit?: string;
-
-  min?: number;
-  max?: number;
+  decimalScale?: number;
   allowNegative?: boolean;
-
-  oncomplete?: () => void;
-  onincomplete?: () => void;
-  oncleared?: () => void;
+  prefix?: string;
+  suffix?: string;
+  fixedDecimalScale?: boolean;
+  inputPrefix?: ReactNode;
+  inputSuffix?: ReactNode;
 }
 
 const NumberInput = ({
-                       label,
-                       bottomLabel,
-                       name,
-                       value,
-                       placeholder,
-                       className,
-                       isError,
-                       isValid,
-                       errorMessage,
-                       startAdornment,
-                       endAdornment,
-                       disabled = false,
-                       required = false,
-                       onChange,
-                       onBlur,
-                       onFocus,
-                       readOnly = false,
-                       isLoading = false,
-                       maskType = 'number',
-                       decimals = 0,
-                       thousandSeparator = ',',
-                       decimalSeparator = '.',
-                       currencyPrefix = 'Rp ',
-                       weightUnit = 'kg',
-                       allowNegative = false,
-                       oncomplete,
-                       onincomplete,
-                       oncleared,
-                     }: NumberInputProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputmaskRef = useRef<Inputmask.Instance | null>(null);
-  const [maskComplete, setMaskComplete] = useState<boolean>(false);
-  const [maskIncomplete, setMaskIncomplete] = useState<boolean>(false);
-  const [maskCleared, setMaskCleared] = useState<boolean>(false);
+  thousandSeparator = ",",
+  decimalSeparator = ".",
+  decimalScale = 5,
+  allowNegative = true,
+  onChange,
+  inputPrefix,
+  inputSuffix,
+  ...restProps
+}: NumberInputProps) => {
+  const valueChangeHandler: OnValueChange = (
+    numberFormatValues,
+    sourceInfo,
+  ) => {
+    const newChangeEvent = sourceInfo.event as
+      | ChangeEvent<HTMLInputElement>
+      | undefined;
 
-  const getInputPrefix = (): string => {
-    switch (maskType) {
-      case 'currency':
-        return currencyPrefix;
-      default:
-        return '';
+    if (newChangeEvent) {
+      newChangeEvent.target.value = numberFormatValues.value;
+
+      onChange?.(newChangeEvent);
     }
   };
 
-  const getInputSuffix = (): string => {
-    switch (maskType) {
-      case 'weight':
-        return weightUnit;
-      default:
-        return '';
-    }
-  };
-
-  useEffect(() => {
-    if (inputRef.current && !readOnly && !disabled) {
-      if (inputmaskRef.current) {
-        try {
-          inputmaskRef.current.remove();
-        } catch (error) {
-          console.warn('Error removing Inputmask:', error);
-        }
-      }
-
-      const handleComplete = () => {
-        setMaskComplete(true);
-        setMaskIncomplete(false);
-        setMaskCleared(false);
-        if (oncomplete) oncomplete();
-      };
-
-      const handleIncomplete = () => {
-        setMaskIncomplete(true);
-        setMaskComplete(false);
-        setMaskCleared(false);
-        if (onincomplete) onincomplete();
-      };
-
-      const handleCleared = () => {
-        setMaskCleared(true);
-        setMaskComplete(false);
-        setMaskIncomplete(false);
-        if (oncleared) oncleared();
-      };
-
-          const im = createInputMask(
-        maskType,
-        decimals,
-        ',',
-        '.',
-        allowNegative,
-        handleComplete,
-        handleIncomplete,
-        handleCleared
-      );
-
-      try {
-        im.mask(inputRef.current);
-        inputmaskRef.current = im;
-      } catch (error) {
-        console.warn('Error applying Inputmask:', error);
-        inputmaskRef.current = null;
-      }
-    }
-
-    return () => {
-      if (inputmaskRef.current) {
-        try {
-          inputmaskRef.current.remove();
-        } catch (error) {
-          console.warn('Error removing Inputmask on cleanup:', error);
-        }
-      }
-    };
-  }, [maskType, decimals, thousandSeparator, decimalSeparator, allowNegative, readOnly, disabled, oncomplete, onincomplete, oncleared]);
-
-  useEffect(() => {
-    if (inputRef.current && value !== undefined) {
-      if (value === null || value === '') {
-        inputRef.current.value = '';
-      } else {
-        inputRef.current.value = String(value);
-      }
-    }
-  }, [value]);
-
-  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const currentValue = (e.currentTarget as HTMLInputElement).value;
-    console.log('✅ After format:', currentValue);
-
-    if (onChange) {
-      const syntheticEvent = {
-        target: {
-          name,
-          value: currentValue,
-        },
-      } as ChangeEvent<HTMLInputElement>;
-      onChange(syntheticEvent);
-    }
-  };
-
-  const inputPrefix = getInputPrefix();
-  const inputSuffix = getInputSuffix();
-
   return (
-    <div
-      className={cn(
-        'w-full flex flex-col gap-2 text-start',
-        className?.wrapper
-      )}
-    >
-      {label && (
-        <label
-          htmlFor={name}
-          className={cn(
-            'w-full text-sm font-normal leading-5',
-            {
-              'text-error': isError,
-            },
-            className?.label
-          )}
-        >
-          {label}
-          {required && (
-            <>
-              {' '}
-              <span className='tooltip tooltip-error' data-tip='required'>
-                <span className='text-error'> *</span>
-              </span>
-            </>
-          )}
-        </label>
-      )}
-
-      <div className='relative flex'>
-        {inputPrefix && (
-          <div
-            className={cn(
-              'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
-              {
-                'bg-gray-100 border-gray-300': !disabled,
-                'bg-gray-50 border-gray-200': disabled,
-              }
-            )}
-          >
-            <span
-              className={cn(
-                'text-sm font-medium select-none whitespace-nowrap',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputPrefix}
-            </span>
-          </div>
-        )}
-
-        <div
-          className={cn(
-            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
-            {
-              'border-error': isError,
-              'border-success!': isValid,
-              'rounded-l-none!': inputPrefix,
-              'rounded-r-none!': inputSuffix,
-              'input-disabled': disabled,
-              'cursor-not-allowed': disabled,
-              'bg-gray-50': disabled,
-            },
-            className?.inputWrapper
-          )}
-        >
-          {startAdornment && startAdornment}
-
-          <input
-            type='text'
-            id={name}
-            name={name}
-            ref={inputRef}
-            placeholder={placeholder || '0'}
-            onKeyUp={handleKeyUp}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            disabled={disabled}
-            className={cn(
-              'grow bg-transparent outline-none',
-              {
-                'cursor-not-allowed': disabled,
-                'text-gray-500': disabled,
-              },
-              className?.input
-            )}
-            readOnly={readOnly}
-            inputMode='text'
-            autoComplete='off'
-            spellCheck={false}
-          />
-
-          {(isLoading || endAdornment) && (
-            <div className='flex flex-row gap-2'>
-              {isLoading && <span className='loading loading-spinner' />}
-              {endAdornment && endAdornment}
-            </div>
-          )}
-        </div>
-
-        {inputSuffix && (
-          <div
-            className={cn(
-              'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
-              {
-                'bg-gray-100 border-gray-300': !disabled,
-                'bg-gray-50 border-gray-200': disabled,
-              }
-            )}
-          >
-            <span
-              className={cn(
-                'text-sm font-medium select-none whitespace-nowrap',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputSuffix}
-            </span>
-          </div>
-        )}
-      </div>
-
-      {(maskType === 'text' || (oncomplete || onincomplete || oncleared)) && (
-        <div className='flex gap-2 text-xs'>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskComplete
-                ? 'bg-green-100 text-green-700 border border-green-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Complete
-          </span>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskIncomplete
-                ? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Incomplete
-          </span>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskCleared
-                ? 'bg-blue-100 text-blue-700 border border-blue-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Cleared
-          </span>
-        </div>
-      )}
-
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
-      )}
-    </div>
+    <NumericFormat
+      thousandSeparator={thousandSeparator}
+      decimalSeparator={decimalSeparator}
+      customInput={TextInput}
+      onValueChange={valueChangeHandler}
+      decimalScale={decimalScale}
+      allowNegative={allowNegative}
+      startAdornment={inputPrefix}
+      endAdornment={inputSuffix}
+      {...restProps}
+    />
   );
 };
 
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index d2c91168..d8239d14 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1377,9 +1377,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               handleDeliveryCostChange(idx, e.target.value)
                             }
                             onBlur={formik.handleBlur}
-                            maskType='currency'
-                            decimals={0}
-                            min={0}
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost',
@@ -1404,9 +1401,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               )
                             }
                             onBlur={formik.handleBlur}
-                            maskType='currency'
-                            decimals={0}
-                            min={0}
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost_per_item',
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 4d8ef9ca..6018ae84 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -942,9 +942,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={feed.feed_stock}
                         onChange={handleFeedStockChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
                         thousandSeparator=','
                         decimalSeparator=''
                         isError={
@@ -1120,10 +1117,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={weight.chicken_weight}
                         onChange={handleChickenWeightChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='weight'
-                        weightUnit='gram'
-                        decimals={2}
-                        min={0}
                         thousandSeparator=','
                         decimalSeparator='.'
                         isError={
@@ -1153,9 +1146,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={weight.chicken_count}
                         onChange={handleChickenCountChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
                         isError={
                           isRepeaterInputError(
                             'body_weight',
@@ -1184,10 +1174,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           value={weight.average_chicken_weight || ''}
                           onChange={handleAverageWeightChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
-                          maskType='weight'
-                          weightUnit='gram'
-                          decimals={2}
-                          min={0}
                           thousandSeparator=','
                           decimalSeparator='.'
                           isError={
@@ -1450,9 +1436,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={vaccine.used_stock}
                         onChange={handleVaccinationStockChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
                         thousandSeparator=','
                         decimalSeparator=''
                         isError={
@@ -1660,9 +1643,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={mortality.count}
                         onChange={handleMortalityCountChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
                         thousandSeparator=','
                         decimalSeparator=''
                         isError={

From c74ed18a16cafaed2938cb78233606d02d55d4c6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 27 Oct 2025 14:15:48 +0700
Subject: [PATCH 88/92] refactor(FE-137): enable clearable option for select
 inputs in RecordingForm

---
 .../pages/production/recording/form/RecordingForm.tsx           | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 5afeb021..f3b9e7c0 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1146,6 +1146,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         }}
                         isSearchable
                         isDisabled={type === 'detail'}
+                        isClearable={type !== 'detail'}
                         startAdornment={
                           stock.product_warehouse_id
                             ? getProductFlagBadgeAdornment(stock.product_warehouse_id)
@@ -1343,6 +1344,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           wrapper: 'w-full min-w-32',
                         }}
                         isSearchable={false}
+                        isClearable={type !== 'detail'}
                       />
                     </td>
                     <td>

From 7da95b80b06f54d05fe586c65eedc869500a5cba Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 28 Oct 2025 08:58:01 +0700
Subject: [PATCH 89/92] refactor(FE-Storyless): conditionally handle onChange
 prop in SelectInput for better flexibility

---
 src/components/input/SelectInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index d7b13529..32d26866 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -146,7 +146,7 @@ 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}

From c37950a230f06f2f1bd76fa69c004333db4aaa90 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 28 Oct 2025 10:44:08 +0700
Subject: [PATCH 90/92] refactor(FE-137): optimize recordedProjectFlockIds
 calculation to filter today's recordings

---
 .../production/recording/form/RecordingForm.tsx   | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index f3b9e7c0..a9284b1c 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -99,8 +99,19 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const recordedProjectFlockIds = useMemo(() => {
     if (!isResponseSuccess(existingRecordings)) return new Set<number>();
-    return new Set(existingRecordings?.data.map(rec => rec.project_flock_kandang_id) || []);
-  }, [existingRecordings]);
+
+    const todayRecordings = existingRecordings?.data || [];
+    const recordedIds = new Set<number>();
+
+    todayRecordings.forEach(recording => {
+      const recordingDate = recording.record_date?.split('T')[0];
+      if (recordingDate === today) {
+        recordedIds.add(recording.project_flock_kandang_id);
+      }
+    });
+
+    return recordedIds;
+  }, [existingRecordings, today]);
 
   const { data: stockProducts, isLoading: isLoadingStockProducts } = useSWR(
     stockProductsUrl,

From c7b04c5bc648ffce9622f04bf2666794d3f9f338 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 28 Oct 2025 10:58:37 +0700
Subject: [PATCH 91/92] feat(FE-137): integrate flock periods data fetching in
 RecordingForm for accurate recording validation

---
 .../recording/form/RecordingForm.tsx          | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index a9284b1c..4abd74d3 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -30,6 +30,7 @@ import { LocationApi } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
+import { PeriodFlock } from '@/types/api/production/project-flock';
 import { useModal } from '@/components/Modal';
 import toast from 'react-hot-toast';
 
@@ -97,6 +98,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     RecordingApi.getAllFetcher
   );
 
+  const flockPeriodsUrls = useMemo(() => {
+    if (!isResponseSuccess(projectFlocks)) return [];
+    return projectFlocks?.data.map(pf => `${ProjectFlockApi.basePath}/flocks/${pf.flock.id}/periods`) || [];
+  }, [projectFlocks]);
+
+  const { data: flockPeriodsData } = useSWR<BaseApiResponse<PeriodFlock>[]>(
+    flockPeriodsUrls.length > 0 ? flockPeriodsUrls : null,
+    (urls: string[]) => Promise.all(urls.map(url => fetch(url).then(res => res.json()))),
+    {
+      revalidateOnFocus: false,
+      dedupingInterval: 60000,
+    }
+  );
+
   const recordedProjectFlockIds = useMemo(() => {
     if (!isResponseSuccess(existingRecordings)) return new Set<number>();
 
@@ -105,13 +120,30 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
     todayRecordings.forEach(recording => {
       const recordingDate = recording.record_date?.split('T')[0];
-      if (recordingDate === today) {
+
+      const isRecordedToday = recordingDate === today;
+
+      let isCorrectPeriod = false;
+      if (isRecordedToday && flockPeriodsData && isResponseSuccess(projectFlocks)) {
+        const flockIndex = projectFlocks.data.findIndex(pf => pf.id === recording.project_flock_kandang_id);
+        if (flockIndex !== undefined && flockIndex >= 0 && flockPeriodsData[flockIndex]) {
+          const flockPeriod = flockPeriodsData[flockIndex];
+          const currentProjectFlock = projectFlocks.data[flockIndex];
+
+          if (currentProjectFlock && isResponseSuccess(flockPeriod) && flockPeriod.data?.next_period) {
+            const expectedDay = flockPeriod.data.next_period - 1;
+            isCorrectPeriod = recording.day === expectedDay;
+          }
+        }
+      }
+
+      if (isRecordedToday && (isCorrectPeriod || !flockPeriodsData)) {
         recordedIds.add(recording.project_flock_kandang_id);
       }
     });
 
     return recordedIds;
-  }, [existingRecordings, today]);
+  }, [existingRecordings, today, flockPeriodsData, projectFlocks]);
 
   const { data: stockProducts, isLoading: isLoadingStockProducts } = useSWR(
     stockProductsUrl,

From eda3f0f1be8ce04f33b8501cb85c6e7ee9b8cd79 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 29 Oct 2025 15:52:34 +0700
Subject: [PATCH 92/92] chore(FE-Storyless): update Prettier to version 3.6.2
 and remove .prettierrc from .gitignore

---
 .gitignore        |  3 ---
 package-lock.json | 17 +++++++++++++++++
 package.json      |  1 +
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 82965e2d..d86875dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,8 +40,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# prettier
-.prettierrc
-
 # idea
 .idea
diff --git a/package-lock.json b/package-lock.json
index 6f255a99..45371cbc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "eslint": "^9",
         "eslint-config-next": "15.5.3",
         "husky": "^9.1.7",
+        "prettier": "3.6.2",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -5729,6 +5730,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/package.json b/package.json
index b371e4e7..16d6c90c 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
     "husky": "^9.1.7",
+    "prettier": "3.6.2",
     "tailwindcss": "^4",
     "typescript": "^5"
   }