diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..250df482
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,15 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "endOfLine": "lf",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 386e7620..79af241b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @plugin "daisyui";
+@import '../styles/daisyui.css';
 
 :root {
   --color-primary: #1f74bf;
diff --git a/src/app/inventory/adjustment/add/page.tsx b/src/app/inventory/adjustment/add/page.tsx
new file mode 100644
index 00000000..3bd64573
--- /dev/null
+++ b/src/app/inventory/adjustment/add/page.tsx
@@ -0,0 +1,11 @@
+import InventoryAdjustmentForm from "@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm";
+
+const CreateInventoryAdjustment = () => {
+  return (
+    <section className="w-full p-4 flex flex-row justify-center">
+      <InventoryAdjustmentForm/>
+    </section>
+  );
+}
+
+export default CreateInventoryAdjustment;
\ No newline at end of file
diff --git a/src/app/inventory/adjustment/detail/page.tsx b/src/app/inventory/adjustment/detail/page.tsx
new file mode 100644
index 00000000..5e96c86a
--- /dev/null
+++ b/src/app/inventory/adjustment/detail/page.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm';
+import type { InventoryAdjustment } from '@/types/api/inventory/adjustment';
+
+const DetailInventoryAdjustment = () => {
+  const router = useRouter();
+  const [inventoryAdjustment, setInventoryAdjustment] = useState<InventoryAdjustment | null>(null);
+
+  // Ambil data dari router state
+  useEffect(() => {
+    console.log("Router State");
+    console.log(window.history.state);
+    const state = window.history.state?.usr as
+      | { inventoryAdjustment?: InventoryAdjustment }
+      | undefined;
+
+    if (state?.inventoryAdjustment) {
+      // jika object dikirim via router.push(state)
+      setInventoryAdjustment(state.inventoryAdjustment);
+    }
+  }, [router]);
+
+  const finalData = inventoryAdjustment;
+  
+  console.log("Final Data");
+  console.log(finalData);
+
+  if (!finalData) {
+    return (
+      <div className="w-full flex flex-row justify-center items-center p-4">
+        <span className="loading loading-spinner loading-xl" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="w-full p-4 flex flex-row justify-center">
+      <InventoryAdjustmentForm initialValues={finalData} />
+    </section>
+  );
+};
+
+export default DetailInventoryAdjustment;
diff --git a/src/app/inventory/adjustment/page.tsx b/src/app/inventory/adjustment/page.tsx
new file mode 100644
index 00000000..518fd0bf
--- /dev/null
+++ b/src/app/inventory/adjustment/page.tsx
@@ -0,0 +1,11 @@
+import InventoryAdjustmentTable from '@/components/pages/inventory/adjustment/InventoryAdjustmentTable';
+
+const InventoryAdjustment = () => {
+  return (
+    <section className='w-full p-4'>
+      <InventoryAdjustmentTable />
+    </section>
+  );
+};
+
+export default InventoryAdjustment;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c67a29c2..e901b765 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,7 +1,5 @@
 import react from 'react';
-
 import Link from 'next/link';
-
 import { cn } from '@/lib/helper';
 import { Color } from '@/types/theme';
 
@@ -10,6 +8,8 @@ interface ButtonProps extends react.ComponentProps<'button'> {
   color?: Color;
   href?: string;
   isLoading?: boolean;
+  target?: string;
+  rel?: string;
 }
 
 const Button = ({
@@ -22,6 +22,8 @@ const Button = ({
   className,
   disabled,
   onClick,
+  target,
+  rel,
   ...props
 }: ButtonProps) => {
   const btnBaseClassName = cn(
@@ -68,6 +70,8 @@ const Button = ({
       {href && (
         <Link
           href={disabled ? '#' : href}
+          target={target}
+          rel={rel}
           aria-disabled={disabled}
           className={cn(
             btnBaseClassName,
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
new file mode 100644
index 00000000..02f86dca
--- /dev/null
+++ b/src/components/Tooltip.tsx
@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface TooltipProps {
+  children?: ReactNode;
+  content?: ReactNode;
+  className?: {
+    wrapper?: string;
+    content?: string;
+  };
+  open?: boolean;
+  color?: Color;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const Tooltip = ({
+  children,
+  content,
+  className,
+  open,
+  color,
+  position,
+}: TooltipProps) => {
+  const tooltipBaseClassName = cn('tooltip', {
+    'tooltip-open': typeof open === 'boolean' && open,
+
+    'tooltip-top': position === 'top',
+    'tooltip-bottom': position === 'bottom',
+    'tooltip-left': position === 'left',
+    'tooltip-right': position === 'right',
+
+    'tooltip-primary': color === 'primary',
+    'tooltip-secondary': color === 'secondary',
+    'tooltip-accent': color === 'accent',
+    'tooltip-neutral': color === 'neutral',
+    'tooltip-info': color === 'info',
+    'tooltip-success': color === 'success',
+    'tooltip-warning': color === 'warning',
+    'tooltip-error': color === 'error',
+  });
+  return (
+    <div className={cn(tooltipBaseClassName, className?.wrapper)}>
+      <div
+        className={cn(
+          'tooltip-content',
+          'max-w-60 sm:max-w-xs',
+          className?.content
+        )}
+      >
+        {content}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default Tooltip;
diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx
index 25b586c3..92c2a92c 100644
--- a/src/components/helper/form/FormActions.tsx
+++ b/src/components/helper/form/FormActions.tsx
@@ -8,6 +8,7 @@ interface FormActionsProps<T> {
   formik: FormikContextType<T>;
   editUrl?: string;
   onDelete?: () => void;
+  disableSubmit?: boolean;
 }
 
 export const FormActions = <T,>({
@@ -15,6 +16,7 @@ export const FormActions = <T,>({
   formik,
   editUrl,
   onDelete,
+  disableSubmit = false,
 }: FormActionsProps<T>) => {
   return (
     <div className='flex flex-row justify-between gap-2 flex-wrap'>
@@ -62,7 +64,10 @@ export const FormActions = <T,>({
             type='reset'
             color='warning'
             className='px-4'
-            onClick={formik.handleReset}
+            onClick={() => {
+              formik.handleReset();
+              formik.validateForm();
+            }}
           >
             Reset
           </Button>
@@ -71,7 +76,7 @@ export const FormActions = <T,>({
             color='primary'
             className='px-4'
             isLoading={formik.isSubmitting}
-            disabled={!formik.isValid || formik.isSubmitting}
+            disabled={disableSubmit || !formik.isValid || formik.isSubmitting}
           >
             Submit
           </Button>
diff --git a/src/components/input/RadioInput.tsx b/src/components/input/RadioInput.tsx
new file mode 100644
index 00000000..71a731aa
--- /dev/null
+++ b/src/components/input/RadioInput.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import { ChangeEventHandler, ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+export interface RadioOption {
+  label: string;
+  value: string;
+}
+
+export interface RadioInputProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string;
+  options: RadioOption[];
+  variant?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    radioWrapper?: string;
+    radio?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+  required?: boolean;
+  disabled?: boolean;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+const RadioInput = ({
+  label,
+  bottomLabel,
+  name,
+  value,
+  options,
+  variant = 'radio-primary',
+  className,
+  isError,
+  errorMessage,
+  required = false,
+  disabled = false,
+  onChange,
+  onBlur,
+}: RadioInputProps) => {
+  return (
+    <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
+      {/* Label atas */}
+      {label && (
+        <label
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            { 'text-error': isError },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <span className='text-error ml-1' title='required'>
+              *
+            </span>
+          )}
+        </label>
+      )}
+
+      {/* Daftar opsi radio */}
+      <div
+        className={cn(
+          'flex flex-row flex-wrap gap-4 items-center',
+          className?.radioWrapper
+        )}
+      >
+        {options.map((option) => (
+          <label
+            key={option.value}
+            className={cn(
+              'flex flex-row items-center gap-2 cursor-pointer',
+              disabled && 'opacity-60 cursor-not-allowed'
+            )}
+          >
+            <input
+              type='radio'
+              name={name}
+              value={option.value}
+              checked={value === option.value}
+              onChange={onChange}
+              onBlur={onBlur}
+              disabled={disabled}
+              className={cn('radio', variant, className?.radio)}
+            />
+            <span className='text-sm'>{option.label}</span>
+          </label>
+        ))}
+      </div>
+
+      {/* Label bawah */}
+      {!isError && bottomLabel && (
+        <p className='text-sm opacity-60'>{bottomLabel}</p>
+      )}
+
+      {/* Pesan error */}
+      {isError && errorMessage && (
+        <p className='text-sm text-error'>{errorMessage}</p>
+      )}
+    </div>
+  );
+};
+
+export default RadioInput;
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 930b5ed5..43a3f622 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -1,28 +1,38 @@
 'use client';
 
-import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
-import Select, { OptionProps, GroupBase, InputActionMeta } from 'react-select';
+import {
+  ComponentType,
+  ReactNode,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import Select, {
+  OptionProps,
+  GroupBase,
+  InputActionMeta,
+  MultiValue,
+  SingleValue,
+} from 'react-select';
+import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
-
 import { cn } from '@/lib/helper';
 
 export interface OptionType {
   value: string | number;
   label: string;
-  className?: string; // for multi select
-  labelClassName?: string; // for multi select
+  className?: string;
+  labelClassName?: string;
 }
 
 export type OptionComponent<T = OptionType> = ComponentType<
   OptionProps<T, boolean, GroupBase<T>>
 >;
 
-interface SelectInputProps<T = OptionType> {
+interface SelectInputBaseProps<T = OptionType> {
   label?: ReactNode;
   bottomLabel?: ReactNode;
-  value?: T | T[];
-  onChange?: (val: T | T[] | null) => void;
   options: T[];
   optionComponent?: OptionComponent<T>;
   isDisabled?: boolean;
@@ -46,52 +56,78 @@ interface SelectInputProps<T = OptionType> {
   onInputChange?: (search: string) => void;
 }
 
+interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
+  createables?: boolean;
+  value?: T | T[] | null;
+  onChange?: (val: T | T[] | null) => void;
+}
+
 const animatedComponents = makeAnimated();
 
-const SelectInput = <T extends OptionType>({
-  label,
-  bottomLabel,
-  value,
-  onChange,
-  options,
-  optionComponent,
-  isDisabled,
-  isLoading,
-  isClearable,
-  isRtl,
-  isSearchable = true,
-  isMulti,
-  placeholder,
-  required,
-  className,
-  isError,
-  errorMessage,
-  isAnimated = true,
-  openMenu,
-  delay = 300,
-  onInputChange,
-}: SelectInputProps) => {
-  const [internalInputValue, setInternalInputValue] = useState('');
+const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
+  const {
+    label,
+    bottomLabel,
+    value,
+    onChange,
+    options,
+    optionComponent,
+    isDisabled,
+    isLoading,
+    isClearable,
+    isRtl,
+    isSearchable = true,
+    isMulti,
+    placeholder,
+    required,
+    className,
+    isError,
+    errorMessage,
+    isAnimated = true,
+    openMenu,
+    delay = 300,
+    createables = false,
+    onInputChange,
+  } = props;
 
-  const [debouncedInputValue] = useDebounce(internalInputValue, delay ?? 300);
+  const [internalInputValue, setInternalInputValue] = useState('');
+  const [debouncedInputValue] = useDebounce(internalInputValue, delay);
 
   const components = useMemo(() => {
     const base = isAnimated ? animatedComponents : {};
-
-    return {
-      ...base,
-      IndicatorSeparator: () => null,
-    };
+    return { ...base, IndicatorSeparator: () => null };
   }, [isAnimated]);
 
-  const internalInputChangeHandler = (value: string, meta: InputActionMeta) => {
-    if (meta.action === 'input-change') setInternalInputValue(value);
+  const internalInputChangeHandler = (
+    val: string,
+    meta: InputActionMeta
+  ) => {
+    if (meta.action === 'input-change') setInternalInputValue(val);
     if (meta.action === 'menu-close') setInternalInputValue('');
   };
 
   useEffect(() => {
     onInputChange?.(debouncedInputValue);
-  }, [debouncedInputValue]);
+  }, [onInputChange, debouncedInputValue]);
+
+  const SelectComponent = createables ? CreatableSelect : Select;
+
+  /** 🎯 handleChange tanpa any */
+  const handleChange = (
+    val: MultiValue<T> | SingleValue<T>
+  ): void => {
+    if (!val) {
+      onChange?.(null);
+      return;
+    }
+
+    if (isMulti) {
+      onChange?.(val as T[]);
+    } else {
+      onChange?.(val as T);
+    }
+  };
+
   return (
     <div
       className={cn(
@@ -103,28 +139,23 @@ const SelectInput = <T extends OptionType>({
         <span
           className={cn(
             'w-full text-sm font-normal leading-5',
-            {
-              'text-error': isError,
-            },
+            { 'text-error': isError },
             className?.label
           )}
         >
           {label}
           {required && (
-            <>
-              {' '}
-              <span className='tooltip tooltip-error' data-tip='required'>
-                <span className='text-error'> *</span>
-              </span>
-            </>
+            <span className="tooltip tooltip-error" data-tip="required">
+              <span className="text-error"> *</span>
+            </span>
           )}
         </span>
       )}
 
-      <Select
-        instanceId='select'
-        value={value}
-        onChange={(val) => onChange?.(val as T)}
+      <SelectComponent<T, boolean, GroupBase<T>>
+        instanceId="select"
+        value={value ?? (isMulti ? [] : null)}
+        onChange={handleChange}
         options={options}
         menuIsOpen={openMenu}
         inputValue={internalInputValue}
@@ -136,14 +167,13 @@ const SelectInput = <T extends OptionType>({
         isRtl={isRtl}
         isSearchable={isSearchable}
         placeholder={placeholder}
-        className={cn('w-full', className)}
+        className={cn('w-full', className?.select)}
         classNames={{
           control: ({ isFocused, isDisabled }) =>
             cn(
               'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
               {
-                'border-red-500! focus-within:border-red-500 focus-within:ring-2 focus-within:ring-red-200':
-                  isError,
+                '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,
@@ -156,8 +186,6 @@ const SelectInput = <T extends OptionType>({
             cn({ 'text-gray-900': !isError, 'text-error!': isError }),
           input: () => cn('text-gray-900'),
           indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
-          indicatorSeparator: () => cn('mx-1 h-4 w-px bg-gray-200'),
-          clearIndicator: () => cn('p-1 rounded-md hover:bg-gray-100'),
           dropdownIndicator: ({ isFocused }) =>
             cn('p-1 rounded-md hover:bg-gray-100', {
               'text-gray-900': isFocused,
@@ -165,55 +193,41 @@ const SelectInput = <T extends OptionType>({
               'text-error!': isError,
             }),
           menu: () =>
-            cn(
-              'border border-gray-200 rounded-lg bg-white shadow-lg rounded-lg!'
-            ),
+            cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
-          groupHeading: () =>
-            cn('ml-2 mt-2 mb-1 text-xs font-medium text-gray-500'),
-          option: ({ isFocused, isSelected, isDisabled }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer! select-none', {
-              'text-gray-300': isDisabled,
+          option: ({ isFocused, isSelected }) =>
+            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
-              'text-gray-700': !isDisabled && !isFocused,
-              'active:bg-indigo-50': !isDisabled,
               'bg-blue-500!': isSelected,
+              'text-gray-700': !isFocused && !isSelected,
             }),
-          noOptionsMessage: () => cn('px-3 py-2 text-gray-500'),
-          loadingMessage: () => cn('px-3 py-2 text-gray-500'),
           multiValue: ({ getValue, index }) => {
-            const selectedValues = getValue();
-
+            const selectedValues = getValue() as T[];
             return cn(
-              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1 rounded-md!',
+              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
               selectedValues[index]?.className
             );
           },
           multiValueLabel: ({ getValue, index }) => {
-            const selectedValues = getValue();
-
+            const selectedValues = getValue() as T[];
             return cn('text-indigo-700', selectedValues[index]?.labelClassName);
           },
-          multiValueRemove: () =>
-            cn('p-1 rounded-sm! hover:bg-indigo-100 hover:text-indigo-800'),
         }}
         components={{
           ...components,
           ...(optionComponent ? { Option: optionComponent } : {}),
         }}
-        // make the menu float above modals/etc.
         menuPortalTarget={
           typeof document !== 'undefined' ? document.body : undefined
         }
         styles={{
-          // Tailwind can't set inline z-index on a portal; use styles here:
           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
         }}
       />
 
-      {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 b4a6c9f5..e9517277 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -31,7 +31,7 @@ export interface TextAreaProps {
   endAdornment?: ReactNode;
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-  cols?: number;
+  rows?: number;
 }
 
 const TextArea = ({
@@ -52,7 +52,7 @@ const TextArea = ({
   onBlur,
   readOnly = false,
   isLoading = false,
-  cols = 3
+  rows = 3
 }: TextAreaProps) => {
   return (
     <div
@@ -87,7 +87,7 @@ const TextArea = ({
 
         <textarea
           className={cn(
-            'input h-12 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-lg! outline-none! transition-all',
             {
               'border-error': isError,
               'border-success!': isValid,
@@ -98,7 +98,7 @@ const TextArea = ({
           name={name}
           placeholder={placeholder}
           value={value}
-          cols={cols}
+          rows={rows}
           onChange={onChange}
           onBlur={onBlur}
           disabled={disabled}
diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
new file mode 100644
index 00000000..4022e254
--- /dev/null
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -0,0 +1,64 @@
+import { Icon } from '@iconify/react';
+import Steps from '@/components/steps/Steps';
+import StepItem from '@/components/steps/StepItem';
+import Tooltip from '@/components/Tooltip';
+
+import { formatDate } from '@/lib/helper';
+import { ApprovalsLine } from '@/types/api/api-general';
+
+interface ApprovalStepsProps {
+  approvals: ApprovalsLine;
+}
+
+const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
+  return (
+    <Steps direction='vertical' className='w-full md:steps-horizontal'>
+      {approvals.map((approval, idx) => {
+        const stepItemColor =
+          approval.status === 'approved'
+            ? 'success'
+            : approval.status === 'rejected'
+            ? 'error'
+            : undefined;
+
+        const stepItemIcon =
+          approval.status === 'approved'
+            ? 'material-symbols:check-rounded'
+            : approval.status === 'rejected'
+            ? 'material-symbols:close-rounded'
+            : 'bxs:hourglass';
+
+        return (
+          <StepItem
+            key={idx}
+            color={stepItemColor}
+            icon={
+              approval.status !== 'waiting' && (
+                <Tooltip
+                  color={stepItemColor}
+                  position='right'
+                  className={{
+                    wrapper: 'md:tooltip-bottom',
+                  }}
+                  content={
+                    <div className='flex flex-col text-base'>
+                      <span>{formatDate(approval.date, 'YYYY-MM-DD')}</span>
+                      <span>Oleh: {approval.action_by}</span>
+                      <span>Catatan: {approval.notes}</span>
+                    </div>
+                  }
+                >
+                  <Icon icon={stepItemIcon} width={24} height={24} />
+                </Tooltip>
+              )
+            }
+          >
+            {approval.role}
+          </StepItem>
+        );
+      })}
+    </Steps>
+  );
+};
+
+export default ApprovalSteps;
diff --git a/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx b/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
new file mode 100644
index 00000000..45cfd3f3
--- /dev/null
+++ b/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
@@ -0,0 +1,263 @@
+'use client';
+
+import Button from '@/components/Button';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Table from '@/components/Table';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { inventoryAdjustmentApi } from '@/services/api/inventory';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
+import { Icon } from '@iconify/react';
+import {
+  ColumnDef,
+  ColumnSort,
+  SortingState,
+} from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+import useSWR from 'swr';
+
+const InventoryAdjustmentTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      productCategorySort: '',
+      productSort: '',
+      warehouseSort: '',
+      stockSort: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      productCategorySort: 'sort_product_category',
+      productSort: 'sort_product',
+      warehouseSort: 'sort_warehouse',
+      stockSort: 'sort_stock',
+    },
+  });
+
+  // Fetch Data
+  const {
+    data: inventoryAdjustments,
+    isLoading,
+  } = useSWR(
+    `${inventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
+    inventoryAdjustmentApi.getAllFetcher
+  );
+
+  // State
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  // Columns
+  const inventoryAdjustmentsColumns: ColumnDef<InventoryAdjustment>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      id: 'product_name',
+      header: 'Nama Produk',
+      accessorFn: (row) => row.product_warehouse?.product?.name ?? '-',
+    },
+    {
+      id: 'warehouse_name',
+      header: 'Gudang',
+      accessorFn: (row) => row.product_warehouse?.warehouse?.name ?? '-',
+    },
+    {
+      id: 'created_at',
+      header: 'Tanggal',
+      accessorFn: (row) =>
+        new Date(row.created_at).toLocaleDateString('id-ID', {
+          day: '2-digit',
+          month: 'short',
+          year: 'numeric',
+        }),
+    },
+    {
+      id: 'before_quantity',
+      header: 'Stok Sebelum',
+      accessorFn: (row) => formatNumber(String(row.before_quantity)),
+    },
+    {
+      id: 'after_quantity',
+      header: 'Stok Sesudah',
+      accessorFn: (row) => formatNumber(String(row.after_quantity)),
+    },
+    {
+      id: 'quantity',
+      header: 'Kuantitas',
+      accessorFn: (row) => formatNumber(String(row.quantity)),
+    },
+    {
+      id: 'transaction_type',
+      header: 'Tipe Transaksi',
+      accessorFn: (row) => {
+        if (row.transaction_type === 'INCREASE') return 'Peningkatan';
+        if (row.transaction_type === 'DECREASE') return 'Penurunan';
+        return '-';
+      },
+      cell: (props) => {
+        const type = props.row.original.transaction_type;
+        const label =
+          type === 'INCREASE'
+            ? 'Peningkatan'
+            : type === 'DECREASE'
+            ? 'Penurunan'
+            : '-';
+
+        return (
+          <div
+            className={`small mx-auto badge badge-soft ${
+              type === 'INCREASE' ? 'badge-success' : 'badge-error'
+            }`}
+          >
+            {label}
+          </div>
+        );
+      },
+    },
+    {
+      id: 'created_by',
+      header: 'Oleh',
+      accessorFn: (row) => row.created_user?.name ?? '-',
+    },
+  ];
+
+  // Handler
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
+
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
+  );
+
+  // Effect
+  useEffect(() => {
+    const productCategorySortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'productCategory'
+    );
+    const productSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'product'
+    );
+    const warehouseSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'warehouse'
+    );
+    const stockSortFilter = sorting.find((sortItem) => sortItem.id === 'stock');
+
+    updateSortingFilter('productCategorySort', productCategorySortFilter);
+    updateSortingFilter('productSort', productSortFilter);
+    updateSortingFilter('warehouseSort', warehouseSortFilter);
+    updateSortingFilter('stockSort', stockSortFilter);
+  }, [sorting, updateSortingFilter]);
+
+  // Utils Function
+  const formatNumber = (value: string) => {
+    const numericValue = value.replace(/[^0-9.]/g, '');
+    const [integer, decimal] = numericValue.split('.');
+    const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+  };
+
+  // Render
+  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 sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='flex flex-row'>
+              <Button href='/inventory/adjustment/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+
+              {/* <DebouncedTextInput
+                name='search'
+                placeholder='Cari Stock Adjustment'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              /> */}
+            </div>
+
+            <div className='flex flex-row justify-end'>
+              <SelectInput
+                label='Baris'
+                options={ROWS_OPTIONS}
+                value={{
+                  label: String(tableFilterState.pageSize),
+                  value: tableFilterState.pageSize,
+                }}
+                onChange={pageSizeChangeHandler}
+                className={{ wrapper: 'max-w-28' }}
+              />
+            </div>
+          </div>
+
+          <Table<InventoryAdjustment>
+            data={
+              isResponseSuccess(inventoryAdjustments)
+                ? inventoryAdjustments?.data
+                : []
+            }
+            columns={inventoryAdjustmentsColumns}
+            pageSize={tableFilterState.pageSize}
+            page={
+              isResponseSuccess(inventoryAdjustments)
+                ? inventoryAdjustments?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(inventoryAdjustments)
+                ? inventoryAdjustments?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoading}
+            sorting={sorting}
+            setSorting={setSorting}
+            className={{
+              containerClassName: cn({
+                'mb-20':
+                  isResponseSuccess(inventoryAdjustments) &&
+                  inventoryAdjustments?.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>
+      </div>
+    </>
+  );
+};
+
+export default InventoryAdjustmentTable;
diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
new file mode 100644
index 00000000..d7a0ae0a
--- /dev/null
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
@@ -0,0 +1,43 @@
+import * as Yup from 'yup';
+
+export const InventoryAdjustmentFormSchema = Yup.object({
+  product_category: Yup.object({
+    value: Yup.number().required('ID Kategori Produk wajib diisi!'),
+    label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
+  })
+    .nullable(),
+
+  product_category_id: Yup.number().nullable(),
+
+  product: Yup.object({
+    value: Yup.number().required('ID Produk wajib diisi!'),
+    label: Yup.string().required('Nama Produk wajib diisi!'),
+  })
+    .nullable(),
+
+  product_id: Yup.number().nullable(),
+
+  warehouse: Yup.object({
+    value: Yup.number().required('ID Gudang wajib diisi!'),
+    label: Yup.string().required('Nama Gudang wajib diisi!'),
+  })
+    .nullable(),
+
+  warehouse_id: Yup.number().nullable(),
+
+  transaction_type: Yup.string()
+    .oneOf(['increase', 'decrease'], 'Tipe transaksi tidak valid')
+    .nullable()
+    .required('Tipe transaksi wajib diisi'),
+
+  quantity: Yup.number()
+    .typeError('Kuantitas harus berupa angka')
+    .min(1, 'Minimal kuantitas adalah 1')
+    .required('Kuantitas wajib diisi'),
+
+  note: Yup.string().required('Catatan wajib diisi!'),
+});
+
+export type InventoryAdjustmentFormValues = Yup.InferType<
+  typeof InventoryAdjustmentFormSchema
+>;
diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
new file mode 100644
index 00000000..1bb1692d
--- /dev/null
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
@@ -0,0 +1,447 @@
+'use client';
+
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { inventoryAdjustmentApi } from '@/services/api/inventory';
+import {
+  CreateInventoryAdjustmentPayload,
+  InventoryAdjustment,
+} from '@/types/api/inventory/adjustment';
+import { useFormik } from 'formik';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import {
+  InventoryAdjustmentFormSchema,
+  InventoryAdjustmentFormValues,
+} from './InventoryAdjustmentForm.schema';
+import useSWR from 'swr';
+import {
+  ProductApi,
+  ProductCategoryApi,
+  WarehouseApi,
+} from '@/services/api/master-data';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import TextInput from '@/components/input/TextInput';
+import RadioInput from '@/components/input/RadioInput';
+import TextArea from '@/components/input/TextArea';
+
+interface InventoryAdjustmentFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: InventoryAdjustment;
+}
+
+const InventoryAdjustmentForm = ({
+  type = 'add',
+  initialValues,
+}: InventoryAdjustmentFormProps) => {
+  // State
+  const router = useRouter();
+  const [
+    InventoryAdjustmentFormErrorMessage,
+    setInventoryAdjustmentFormErrorMessage,
+  ] = useState('');
+  const [selectedProductCategories, setSelectedProductCategories] =
+    useState('');
+  const [disabledProduct, setDisabledProduct] = useState(true);
+  const [optionsProduct, setOptionsProduct] = useState<OptionType[]>([]);
+  const [quantityLabel, setQuantityLabel] = useState('Tambah Stok');
+
+  // Submit Handler
+  const createInventoryAdjustmentHandler = useCallback(
+    async (payload: CreateInventoryAdjustmentPayload) => {
+      const createInventoryAdjustmentRes = await inventoryAdjustmentApi.create(
+        payload
+      );
+
+      if (isResponseError(createInventoryAdjustmentRes)) {
+        setInventoryAdjustmentFormErrorMessage(
+          createInventoryAdjustmentRes.message
+        );
+        return;
+      }
+
+      toast.success(createInventoryAdjustmentRes?.message as string);
+      router.push('/inventory/adjustment');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<Partial<InventoryAdjustmentFormValues>>(() => {
+    return {
+      product_category_id: initialValues?.product_category?.id ?? 0,
+      product_id: initialValues?.product?.id ?? 0,
+      warehouse_id: initialValues?.warehouse?.id ?? 0,
+      product_category: undefined,
+      product: undefined,
+      warehouse: undefined,
+      quantity: initialValues?.quantity ?? 0,
+      transaction_type: undefined,
+      note: initialValues?.note ?? '',
+    };
+  }, [initialValues]);
+
+  // Formik
+  const formik = useFormik<InventoryAdjustmentFormValues>({
+    enableReinitialize: true,
+    initialValues: formikInitialValues as InventoryAdjustmentFormValues,
+    validationSchema: InventoryAdjustmentFormSchema,
+    onSubmit: async (values) => {
+      setInventoryAdjustmentFormErrorMessage('');
+      const payload: CreateInventoryAdjustmentPayload = {
+        product_id: values.product_id as number,
+        warehouse_id: values.warehouse_id as number,
+        quantity: values.quantity as number,
+        transaction_type: values.transaction_type as string,
+        note: values.note,
+      };
+
+      switch (type) {
+        case 'add':
+          await createInventoryAdjustmentHandler(payload);
+          break;
+      }
+    },
+  });
+
+  // Fetch Data
+  const productCategoriesUrl = `${
+    ProductCategoryApi.basePath
+  }?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: productCategories, isLoading: isLoadingProductCategories } =
+    useSWR(productCategoriesUrl, ProductCategoryApi.getAllFetcher);
+
+  const productUrl = `${ProductApi.basePath}?${new URLSearchParams({
+    search: '',
+    product_category_id: selectedProductCategories,
+  }).toString()}`;
+  const { data: products, isLoading: isLoadingProducts } = useSWR(
+    productUrl,
+    ProductApi.getAllFetcher
+  );
+
+  const warehouseUrl = `${WarehouseApi.basePath}?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
+    warehouseUrl,
+    WarehouseApi.getAllFetcher
+  );
+
+  // Map Data to Options
+  const optionsProductCategory = isResponseSuccess(productCategories)
+    ? productCategories?.data.map((productCategory) => ({
+        value: productCategory.id,
+        label: productCategory.name,
+      }))
+    : [];
+  const optionsWarehouse = isResponseSuccess(warehouses)
+    ? warehouses?.data.map((warehouse) => ({
+        value: warehouse.id,
+        label: warehouse.name,
+      }))
+    : [];
+
+  // Options Handler
+  const productCategoryChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    formik.setFieldTouched('product_category_id', true);
+    formik.setFieldValue('product_category_id', (val as OptionType)?.value);
+
+    formik.setFieldValue('product_category', val);
+
+    setSelectedProductCategories((val as OptionType)?.value as string);
+    const disabled = (val as OptionType)?.value == null;
+    setDisabledProduct(disabled);
+    formik.setFieldValue('product_id', 0);
+    formik.setFieldValue('product', null);
+    formik.setFieldTouched('product', false);
+    formik.setFieldTouched('product_id', false);
+  };
+
+  const productChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('product', val);
+
+    formik.setFieldTouched('product_id', true);
+    formik.setFieldValue('product_id', (val as OptionType)?.value);
+  };
+
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('warehouse', val);
+
+    formik.setFieldTouched('warehouse_id', true);
+    formik.setFieldValue('warehouse_id', (val as OptionType)?.value);
+  };
+
+  const resetHandler = () => {
+    formik.resetForm();
+    setQuantityLabel('Tambah Stok');
+    productCategoryChangeHandler(null);
+    productChangeHandler(null);
+    warehouseChangeHandler(null);
+  };
+
+
+  const { setValues: formikSetValues } = formik;
+
+  // Effect
+  useEffect(() => {
+    if (initialValues?.product_warehouse?.product?.id) {
+      setSelectedProductCategories(
+        String(initialValues.product_warehouse.product.id)
+      );
+      setDisabledProduct(false);
+      formik.setFieldValue(
+        'product_id',
+        initialValues.product_warehouse.product.id
+      );
+      formik.setFieldValue('product', {
+        value: initialValues.product_warehouse.product.id,
+        label: initialValues.product_warehouse.product.name,
+      });
+      formik.setFieldValue(
+        'warehouse_id',
+        initialValues.product_warehouse.warehouse.id
+      );
+      formik.setFieldValue('warehouse', {
+        value: initialValues.product_warehouse.warehouse.id,
+        label: initialValues.product_warehouse.warehouse.name,
+      });
+      formik.setFieldValue(
+        'quantity',
+        initialValues.product_warehouse.quantity
+      );
+      formik.setFieldValue(
+        'transaction_type',
+        initialValues.transaction_type.toLowerCase()
+      );
+      formik.setFieldValue('note', initialValues.note);
+    }
+    if (initialValues?.transaction_type) {
+      const type = initialValues.transaction_type.toLowerCase();
+      setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
+    }
+  }, [formik, initialValues, setQuantityLabel, setDisabledProduct, setSelectedProductCategories]);
+  useEffect(() => {
+    formikSetValues(formikInitialValues as InventoryAdjustmentFormValues);
+  }, [formikSetValues, formikInitialValues]);
+  useEffect(() => {
+    if (isResponseSuccess(products)) {
+      const options = products.data.map((p) => ({
+        value: p.id,
+        label: p.name,
+      }));
+      setOptionsProduct(options);
+    }
+  }, [products]);
+
+  // Utils Function
+  const formatNumber = (value: string) => {
+    const numericValue = value.replace(/[^0-9.]/g, '');
+    const [integer, decimal] = numericValue.split('.');
+    const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+  };
+
+  // Render
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/inventory/adjustment'
+            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 Penyesuaian Persediaan'}
+            {type === 'detail' && 'Detail Penyesuaian Persediaan'}
+          </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'>
+            {/* Text Input Before Quantity */}
+            {type === 'detail' && initialValues && (
+              <>
+                <TextInput
+                  label='Stok Sebelum'
+                  name='before_quantity'
+                  type='text'
+                  value={formatNumber(String(initialValues.before_quantity))}
+                  readOnly={true}
+                />
+                <TextInput
+                  label='Stok Setelah'
+                  name='after_quantity'
+                  type='text'
+                  readOnly={true}
+                  value={formatNumber(String(initialValues.after_quantity))}
+                />
+              </>
+            )}
+
+            {/* Select Input Product Category */}
+            <SelectInput
+              required
+              label='Kategori Produk'
+              value={formik.values.product_category as OptionType}
+              onChange={productCategoryChangeHandler}
+              onInputChange={setSelectedProductCategories}
+              options={optionsProductCategory}
+              isLoading={isLoadingProductCategories}
+              isError={
+                formik.touched.product_category &&
+                Boolean(formik.errors.product_category)
+              }
+              errorMessage={formik.errors.product_category as string}
+              isDisabled={type === 'detail'}
+              isClearable
+            />
+
+            {/* Select Input Product */}
+            <SelectInput
+              required
+              label='Produk'
+              value={formik.values.product as OptionType}
+              onChange={productChangeHandler}
+              options={optionsProduct}
+              isLoading={isLoadingProducts}
+              isError={formik.touched.product && Boolean(formik.errors.product)}
+              errorMessage={formik.errors.product as string}
+              isDisabled={type === 'detail' || disabledProduct}
+              isClearable
+            />
+
+            {/* Select Input Warehouse */}
+            <SelectInput
+              required
+              label='Warehouse'
+              value={formik.values.warehouse as OptionType}
+              onChange={warehouseChangeHandler}
+              options={optionsWarehouse}
+              isLoading={isLoadingWarehouses}
+              isError={
+                formik.touched.warehouse && Boolean(formik.errors.warehouse)
+              }
+              errorMessage={formik.errors.warehouse as string}
+              isDisabled={type === 'detail'}
+              isClearable
+            />
+
+            {/* Radio Button Flag Stock */}
+            <RadioInput
+              name='transaction_type'
+              label='Tipe Transaksi'
+              options={[
+                { label: 'Tambah', value: 'increase' },
+                { label: 'Kurang', value: 'decrease' },
+              ]}
+              value={formik.values.transaction_type}
+              onChange={(e) => {
+                formik.handleChange(e);
+                setQuantityLabel(
+                  e.target.value === 'increase' ? 'Tambah Stok' : 'Kurangi Stok'
+                );
+              }}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.transaction_type &&
+                Boolean(formik.errors.transaction_type)
+              }
+              errorMessage={formik.errors.transaction_type as string}
+              variant='radio-primary'
+              required
+              bottomLabel={formik.values.transaction_type == undefined ? 'Pilih salah satu tipe transaksi' : undefined}
+              disabled={type === 'detail'}
+            />
+
+            {/* Number Input Stock */}
+            <TextInput
+             className={{
+              wrapper: `${formik.values.transaction_type != undefined ? '' : 'hidden'}`,
+             }}
+              required
+              label={quantityLabel}
+              name='quantity'
+              type='text'
+              value={formatNumber(String(formik.values.quantity))}
+              onChange={(e) => {
+                const rawValue = e.target.value.replace(/,/g, '');
+                const numericValue = parseFloat(rawValue);
+                if (!isNaN(numericValue)) {
+                  formik.setFieldValue('quantity', numericValue);
+                } else {
+                  formik.setFieldValue('quantity', 0);
+                }
+              }}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.quantity && Boolean(formik.errors.quantity)
+              }
+              errorMessage={formik.errors.quantity as string}
+              readOnly={type === 'detail'}
+            />
+
+            
+
+            {/* Text Area Input Reason */}
+            <TextArea
+              required
+              label='Alasan'
+              name='note'
+              value={formik.values.note as string}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.note && Boolean(formik.errors.note)}
+              errorMessage={formik.errors.note as string}
+              readOnly={type === 'detail'}
+            />
+          </div>
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'detail' && (
+              <div className='flex flex-row justify-end gap-2'>
+                <Button type='button' color='warning' className='px-4' onClick={resetHandler}>
+                  Reset
+                </Button>
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting || formik.values.product == undefined}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+          {InventoryAdjustmentFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{InventoryAdjustmentFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+    </>
+  );
+};
+
+export default InventoryAdjustmentForm;
diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index c863a1a9..61be40f8 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -1,498 +1,56 @@
 'use client';
 
-import { useState, useMemo } from 'react';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
-import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import useSWR from 'swr';
+import { SortingState } from '@tanstack/react-table';
+
 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 } from '@/components/input/SelectInput';
+import { Movement } from '@/types/api/inventory/movement';
+import { MovementApi } from '@/services/api/inventory';
+import { cn } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import { cn } from '@/lib/helper';
-import { ROWS_OPTIONS } from '@/config/constant';
-import { Movement } from '@/types/api/inventory/movement';
-import { BaseMetadata } from '@/types/api/api-general';
-
-// Dummy data
-const baseMetadata: BaseMetadata = {
-  created_user: {
-    id: 1,
-    id_user: 1,
-    email: 'user@example.com',
-    name: 'User',
-  },
-  created_at: '2024-06-01T00:00:00Z',
-  updated_at: '2024-06-01T00:00:00Z',
-};
-
-const dummyMovements: Movement[] = [
-  {
-    ...baseMetadata,
-    id: 1,
-    alasan_transfer: 'Restock',
-    tanggal_transfer: '2024-06-01',
-    warehouse_asal: {
-      ...baseMetadata,
-      id: 1,
-      name: 'Warehouse A',
-      type: 'AREA',
-      area: { id: 1, name: 'Area 1' },
-    },
-    warehouse_tujuan: {
-      ...baseMetadata,
-      id: 2,
-      name: 'Warehouse B',
-      type: 'AREA',
-      area: { id: 2, name: 'Area 2' },
-    },
-    product: [
-      {
-        product: {
-          ...baseMetadata,
-          id: 1,
-          name: 'Product X',
-          brand: 'Brand X',
-          sku: 'SKU-X',
-          product_price: 10000,
-          selling_price: 12000,
-          tax: 10,
-          expiry_period: 365,
-          uom: {
-            ...baseMetadata,
-            id: 1,
-            name: 'PCS',
-          },
-          product_category: {
-            ...baseMetadata,
-            id: 1,
-            code: 'CAT-1',
-            name: 'Category 1',
-          },
-          suppliers: [],
-          flags: [],
-        },
-        qty_product: 10,
-      },
-    ],
-    ekspedisi: [
-      {
-        product_id: 1,
-        qty: 10,
-        supplier: {
-          ...baseMetadata,
-          id: 1,
-          name: 'Supplier 1',
-          alias: 'S1',
-          category: 'General',
-          pic: 'PIC 1',
-          type: 'Type 1',
-          hatchery: 'Hatchery 1',
-          phone: '08123456789',
-          email: 'supplier1@example.com',
-          address: 'Address 1',
-          npwp: '1234567890123456',
-          account_number: '1234567890',
-          balance: 0,
-          due_date: 30,
-        },
-        plat_nomor: 'B 1234 CD',
-        no_surat_jalan: 'SJ-001',
-        dokumen: 'doc1.pdf',
-        biaya_ekspedisi: 50000,
-        nama_sopir: 'Andi',
-      },
-    ],
-  },
-  {
-    ...baseMetadata,
-    id: 2,
-    alasan_transfer: 'Mutasi Stok',
-    tanggal_transfer: '2024-06-02',
-    warehouse_asal: {
-      ...baseMetadata,
-      id: 2,
-      name: 'Warehouse B',
-      type: 'AREA',
-      area: { id: 2, name: 'Area 2' },
-    },
-    warehouse_tujuan: {
-      ...baseMetadata,
-      id: 3,
-      name: 'Warehouse C',
-      type: 'AREA',
-      area: { id: 3, name: 'Area 3' },
-    },
-    product: [
-      {
-        product: {
-          ...baseMetadata,
-          id: 2,
-          name: 'Product Y',
-          brand: 'Brand Y',
-          sku: 'SKU-Y',
-          product_price: 20000,
-          selling_price: 25000,
-          tax: 5,
-          expiry_period: 180,
-          uom: {
-            ...baseMetadata,
-            id: 2,
-            name: 'BOX',
-          },
-          product_category: {
-            ...baseMetadata,
-            id: 2,
-            code: 'CAT-2',
-            name: 'Category 2',
-          },
-          suppliers: [],
-          flags: [],
-        },
-        qty_product: 5,
-      },
-    ],
-    ekspedisi: [
-      {
-        product_id: 2,
-        qty: 5,
-        supplier: {
-          ...baseMetadata,
-          id: 2,
-          name: 'Supplier 2',
-          alias: 'S2',
-          category: 'Special',
-          pic: 'PIC 2',
-          type: 'Type 2',
-          hatchery: 'Hatchery 2',
-          phone: '08123456780',
-          email: 'supplier2@example.com',
-          address: 'Address 2',
-          npwp: '1234567890123457',
-          account_number: '1234567891',
-          balance: 1000,
-          due_date: 15,
-        },
-        plat_nomor: 'D 5678 EF',
-        no_surat_jalan: 'SJ-002',
-        dokumen: 'doc2.pdf',
-        biaya_ekspedisi: 60000,
-        nama_sopir: 'Budi',
-      },
-    ],
-  },
-  {
-    ...baseMetadata,
-    id: 3,
-    alasan_transfer: 'Pengembalian',
-    tanggal_transfer: '2024-06-03',
-    warehouse_asal: {
-      ...baseMetadata,
-      id: 3,
-      name: 'Warehouse C',
-      type: 'AREA',
-      area: { id: 3, name: 'Area 3' },
-    },
-    warehouse_tujuan: {
-      ...baseMetadata,
-      id: 1,
-      name: 'Warehouse A',
-      type: 'AREA',
-      area: { id: 1, name: 'Area 1' },
-    },
-    product: [
-      {
-        product: {
-          ...baseMetadata,
-          id: 3,
-          name: 'Product Z',
-          brand: 'Brand Z',
-          sku: 'SKU-Z',
-          product_price: 15000,
-          selling_price: 18000,
-          tax: 8,
-          expiry_period: 90,
-          uom: {
-            ...baseMetadata,
-            id: 3,
-            name: 'KG',
-          },
-          product_category: {
-            ...baseMetadata,
-            id: 3,
-            code: 'CAT-3',
-            name: 'Category 3',
-          },
-          suppliers: [],
-          flags: [],
-        },
-        qty_product: 8,
-      },
-    ],
-    ekspedisi: [
-      {
-        product_id: 3,
-        qty: 8,
-        supplier: {
-          ...baseMetadata,
-          id: 3,
-          name: 'Supplier 3',
-          alias: 'S3',
-          category: 'Return',
-          pic: 'PIC 3',
-          type: 'Type 3',
-          hatchery: 'Hatchery 3',
-          phone: '08123456781',
-          email: 'supplier3@example.com',
-          address: 'Address 3',
-          npwp: '1234567890123458',
-          account_number: '1234567892',
-          balance: 500,
-          due_date: 10,
-        },
-        plat_nomor: 'F 9101 GH',
-        no_surat_jalan: 'SJ-003',
-        dokumen: 'doc3.pdf',
-        biaya_ekspedisi: 40000,
-        nama_sopir: 'Cici',
-      },
-    ],
-  },
-  {
-    ...baseMetadata,
-    id: 4,
-    alasan_transfer: 'Transfer Internal',
-    tanggal_transfer: '2024-06-04',
-    warehouse_asal: {
-      ...baseMetadata,
-      id: 4,
-      name: 'Warehouse D',
-      type: 'AREA',
-      area: { id: 4, name: 'Area 4' },
-    },
-    warehouse_tujuan: {
-      ...baseMetadata,
-      id: 5,
-      name: 'Warehouse E',
-      type: 'AREA',
-      area: { id: 5, name: 'Area 5' },
-    },
-    product: [
-      {
-        product: {
-          ...baseMetadata,
-          id: 4,
-          name: 'Product A',
-          brand: 'Brand A',
-          sku: 'SKU-A',
-          product_price: 5000,
-          selling_price: 7000,
-          tax: 0,
-          expiry_period: 60,
-          uom: {
-            ...baseMetadata,
-            id: 4,
-            name: 'LITER',
-          },
-          product_category: {
-            ...baseMetadata,
-            id: 4,
-            code: 'CAT-4',
-            name: 'Category 4',
-          },
-          suppliers: [],
-          flags: [],
-        },
-        qty_product: 20,
-      },
-    ],
-    ekspedisi: [
-      {
-        product_id: 4,
-        qty: 20,
-        supplier: {
-          ...baseMetadata,
-          id: 4,
-          name: 'Supplier 4',
-          alias: 'S4',
-          category: 'Internal',
-          pic: 'PIC 4',
-          type: 'Type 4',
-          hatchery: 'Hatchery 4',
-          phone: '08123456782',
-          email: 'supplier4@example.com',
-          address: 'Address 4',
-          npwp: '1234567890123459',
-          account_number: '1234567893',
-          balance: 200,
-          due_date: 20,
-        },
-        plat_nomor: 'H 2345 IJ',
-        no_surat_jalan: 'SJ-004',
-        dokumen: 'doc4.pdf',
-        biaya_ekspedisi: 30000,
-        nama_sopir: 'Dedi',
-      },
-    ],
-  },
-];
-
-
-const RowOptionsMenu = ({
-  type = 'dropdown',
-  props,
-  deleteClickHandler,
-}: {
-  type: 'dropdown' | 'collapse';
-  props: CellContext<Movement, unknown>;
-  deleteClickHandler: () => void;
-}) => (
-  <div
-    tabIndex={type === 'dropdown' ? 0 : undefined}
-    className={cn(
-      {
-        'dropdown-content': type === 'dropdown',
-        'mt-2': type === 'collapse',
-      },
-      'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-    )}
-  >
-    <Button
-      href={`/inventory/movement/detail/?movementId=${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={`/inventory/movement/detail/edit/?movementId=${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
-      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>
-);
+import { TableRowOptions } from '@/components/table/TableRowOptions';
 
 const MovementTable = () => {
-  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: '' },
+    paramMap: { page: 'page', pageSize: 'limit' },
+  });
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [selectedMovement, setSelectedMovement] = useState<
     Movement | undefined
   >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const paginatedData = useMemo(() => {
-    const start = (page - 1) * pageSize;
-    return dummyMovements.slice(start, start + pageSize);
-  }, [page, pageSize]);
-
-  const movementsColumns: ColumnDef<Movement>[] = [
-    {
-      header: '#',
-      cell: (props) => pageSize * (page - 1) + props.row.index + 1,
-    },
-    {
-      accessorKey: 'warehouse_asal',
-      header: 'Gudang Asal',
-      cell: (props) => props.row.original.warehouse_asal.name,
-    },
-    {
-      accessorKey: 'warehouse_tujuan',
-      header: 'Gudang Tujuan',
-      cell: (props) => props.row.original.warehouse_tujuan.name,
-    },
-    {
-      accessorKey: 'product',
-      header: 'Nama Produk',
-      cell: (props) => props.row.original.product.map((p) => p.product.name),
-    },
-    {
-      accessorKey: 'alasan_transfer',
-      header: 'Catatan',
-    },
-    {
-      accessorKey: 'biaya_ekspedisi',
-      header: 'Biaya Ekspedisi',
-      cell: (props) =>
-        props.row.original.ekspedisi.map((e) => e.biaya_ekspedisi),
-    },
-    {
-      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 = () => {
-          setSelectedMovement(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>
-            )}
-          </>
-        );
-      },
-    },
-  ];
-
   const deleteModal = useModal();
-  const confirmationModalDeleteClickHandler = async () => {
-    setIsDeleteLoading(true);
-    setTimeout(() => {
-      setIsDeleteLoading(false);
-      deleteModal.closeModal();
-    }, 1000);
-  };
 
-  const searchChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (
-    e
-  ) => {
-    setSearch(e.target.value);
+  const {
+    data: movements,
+    isLoading,
+    mutate: refreshMovements,
+  } = useSWR(
+    `${MovementApi.basePath}${getTableFilterQueryString()}`,
+    MovementApi.getAllFetcher
+  );
+
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
     setPage(1);
   };
 
@@ -502,67 +60,156 @@ const MovementTable = () => {
     setPage(1);
   };
 
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    try {
+      await MovementApi.delete(selectedMovement?.id as number);
+      refreshMovements();
+      deleteModal.closeModal();
+    } finally {
+      setIsDeleteLoading(false);
+    }
+  };
+
   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 sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/inventory/movement/add' color='primary'>
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Movement
-              </Button>
-            </div>
-            <DebouncedTextInput
-              name='search'
-              placeholder='Cari Movement'
-              value={search}
-              onChange={searchChangeHandler}
-              className={{ wrapper: 'sm:max-w-3xs' }}
-            />
-          </div>
-          <div className='flex flex-row justify-end'>
-            <SelectInput
-              label='Baris'
-              options={ROWS_OPTIONS}
-              value={{
-                label: String(pageSize),
-                value: pageSize,
-              }}
-              onChange={pageSizeChangeHandler}
-              className={{ wrapper: 'max-w-28' }}
-            />
-          </div>
-        </div>
-        <Table<Movement>
-          data={paginatedData}
-          columns={movementsColumns}
-          pageSize={pageSize}
-          page={page}
-          totalItems={dummyMovements.length}
-          onPageChange={setPage}
-          isLoading={false}
-          sorting={sorting}
-          setSorting={setSorting}
-          className={{
-            containerClassName: cn({
-              'mb-20': paginatedData.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 className='flex flex-col gap-4'>
+      <div className='flex flex-col gap-2 mb-4'>
+        <TableToolbar
+          addButton={{
+            href: '/inventory/movement/add',
+            label: 'Tambah Movement',
+          }}
+          search={{
+            value: tableFilterState.search,
+            onChange: searchChangeHandler,
+            placeholder: 'Cari Movement',
           }}
         />
+        <TableRowSizeSelector
+          value={tableFilterState.pageSize}
+          onChange={pageSizeChangeHandler}
+          options={ROWS_OPTIONS}
+        />
       </div>
+
+      <Table<Movement>
+        data={isResponseSuccess(movements) ? movements?.data : []}
+        columns={[
+          {
+            header: '#',
+            cell: (props) =>
+              tableFilterState.pageSize * (tableFilterState.page - 1) +
+              props.row.index +
+              1,
+          },
+          {
+            accessorFn: (row) => row.source_warehouse?.name,
+            header: 'Gudang Asal',
+          },
+          {
+            accessorFn: (row) => row.destination_warehouse?.name,
+            header: 'Gudang Tujuan',
+          },
+          {
+            accessorKey: 'transfer_reason',
+            header: 'Catatan',
+          },
+          {
+            accessorKey: 'transfer_date',
+            header: 'Tanggal',
+            cell: (props) =>
+              new Date(props.row.original.transfer_date).toLocaleDateString(
+                'id-ID'
+              ),
+          },
+          {
+            accessorFn: (row) => {
+              const totalCost = row.deliveries?.reduce(
+                (sum, d) => sum + (d.shipping_cost_total || 0),
+                0
+              );
+              return totalCost?.toLocaleString('id-ID');
+            },
+            header: 'Biaya Pengiriman',
+          },
+          {
+            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 = () => {
+                setSelectedMovement(props.row.original);
+                deleteModal.openModal();
+              };
+
+              return (
+                <>
+                  {currentPageSize > 2 && (
+                    <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                      <TableRowOptions
+                        type='dropdown'
+                        recordId={props.row.original.id}
+                        basePath='/inventory/movement'
+                        queryParam='movementId'
+                        showEdit={false}
+                        showDelete={false}
+                      />
+                    </RowDropdownOptions>
+                  )}
+
+                  {currentPageSize <= 2 && (
+                    <RowCollapseOptions>
+                      <TableRowOptions
+                        type='collapse'
+                        recordId={props.row.original.id}
+                        basePath='/inventory/movement'
+                        queryParam='movementId'
+                        showEdit={false}
+                        showDelete={false}
+                      />
+                    </RowCollapseOptions>
+                  )}
+                </>
+              );
+            },
+          },
+        ]}
+        pageSize={tableFilterState.pageSize}
+        page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
+        totalItems={
+          isResponseSuccess(movements) ? movements?.meta?.total_results : 0
+        }
+        onPageChange={setPage}
+        isLoading={isLoading}
+        sorting={sorting}
+        setSorting={setSorting}
+        className={{
+          containerClassName: cn({
+            'mb-20':
+              isResponseSuccess(movements) && movements?.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',
+        }}
+      />
+
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Movement ini (ID: ${selectedMovement?.id})?`}
+        text={`Apakah anda yakin ingin menghapus data Movement ini?`}
         secondaryButton={{
           text: 'Tidak',
         }}
@@ -573,7 +220,7 @@ const MovementTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 0bc0397c..5df66930 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -7,27 +7,29 @@ export type ProductSchema = {
     label: string;
   } | null;
   product_id: number;
-  qty_product: number;
+  product_qty: number;
 };
 
-export type EkspedisiSchema = {
-  product: {
-    value: number;
-    label: string;
-  } | null;
-  product_id: number;
-  qty: number;
+export type DeliverySchema = {
+  delivery_cost?: number | undefined;
+  delivery_cost_per_item?: number | undefined;
+  document?: File | string | null;
+  document_path?: string | null;
+  driver_name: string;
+  vehicle_plate: string;
   supplier: {
     value: number;
     label: string;
   } | null;
   supplier_id: number;
-  plat_nomor: string;
-  no_surat_jalan: string;
-  dokumen: string | File;
-  biaya_ekspedisi: number;
-  biaya_ekspedisi_per_item?: number | undefined;
-  nama_sopir: string;
+  products: {
+    product: {
+      value: number;
+      label: string;
+    } | null;
+    product_id: number;
+    product_qty: number;
+  }[];
 };
 
 const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
@@ -36,64 +38,107 @@ const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
     label: Yup.string().required(),
   }).nullable(),
   product_id: Yup.number().required('Produk wajib diisi!'),
-  qty_product: Yup.number()
+  product_qty: Yup.number()
     .required('Qty wajib diisi!')
     .min(1, 'Qty minimal 1!')
     .typeError('Qty harus berupa angka!'),
 });
 
-const EkspedisiObjectSchema: Yup.ObjectSchema<EkspedisiSchema> = Yup.object({
+const DeliveryProductObjectSchema = Yup.object({
   product: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
   product_id: Yup.number().required('Produk wajib diisi!'),
-  qty: Yup.number()
+  product_qty: Yup.number()
     .required('Qty wajib diisi!')
     .min(1, 'Qty minimal 1!')
     .typeError('Qty harus berupa angka!'),
+});
+
+const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
+  delivery_cost: Yup.number()
+    .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
+    .min(1, 'Biaya minimal 1!')
+    .typeError('Biaya harus berupa angka!')
+    .test(
+      'one-of-cost-fields',
+      'Biaya pengiriman atau biaya per item wajib diisi!',
+      function (value) {
+        const { delivery_cost_per_item } = this.parent;
+        return (
+          (value !== undefined && value > 0) ||
+          (delivery_cost_per_item !== undefined && delivery_cost_per_item > 0)
+        );
+      }
+    ),
+  delivery_cost_per_item: Yup.number()
+    .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
+    .min(1, 'Biaya per item minimal 1!')
+    .typeError('Biaya per item harus berupa angka!')
+    .test(
+      'one-of-cost-fields',
+      'Biaya pengiriman atau biaya per item wajib diisi!',
+      function (value) {
+        const { delivery_cost } = this.parent;
+        return (
+          (value !== undefined && value > 0) ||
+          (delivery_cost !== undefined && delivery_cost > 0)
+        );
+      }
+    ),
+  document_path: Yup.string().optional(),
+  document_index: Yup.number().optional(),
+  document: Yup.mixed<File | string>()
+    .nullable()
+    .test('fileSize', 'Ukuran dokumen maksimal 2 MB', (value) => {
+      if (!value) return true;
+      if (typeof value === 'string') return true;
+      if (value instanceof File) return value.size <= 2 * 1024 * 1024;
+      return false;
+    }),
+  driver_name: Yup.string().required('Nama sopir wajib diisi!'),
+  vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'),
   supplier: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
   supplier_id: Yup.number().required('Supplier wajib diisi!'),
-  plat_nomor: Yup.string().required('Plat nomor wajib diisi!'),
-  no_surat_jalan: Yup.string().required('No surat jalan wajib diisi!'),
-  dokumen: Yup.mixed<string | File>().required('Dokumen wajib diisi!'),
-  biaya_ekspedisi: Yup.number()
-    .required('Biaya ekspedisi wajib diisi!')
-    .min(0, 'Biaya minimal 0!')
-    .typeError('Biaya harus berupa angka!'),
-  biaya_ekspedisi_per_item: Yup.number()
-    .transform((value) => (isNaN(value) ? undefined : value))
-    .min(0, 'Biaya per item minimal 0!')
-    .typeError('Biaya per item harus berupa angka!')
-    .optional()
-    .default(undefined),
-  nama_sopir: Yup.string().required('Nama sopir wajib diisi!'),
+  products: Yup.array()
+    .of(DeliveryProductObjectSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
 });
 
 export const MovementFormSchema = Yup.object({
-  alasan_transfer: Yup.string().required('Alasan transfer wajib diisi!'),
-  tanggal_transfer: Yup.string().required('Tanggal transfer wajib diisi!'),
-  warehouse_asal: Yup.object({
+  transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
+  transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
+  source_warehouse: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
+    area: Yup.string().optional(),
+    location: Yup.string().optional(),
   }).nullable(),
-  warehouse_asal_id: Yup.number()
+  source_warehouse_id: Yup.number()
     .required('Gudang asal wajib diisi!')
     .typeError('Gudang asal wajib diisi!'),
-  warehouse_tujuan: Yup.object({
+  destination_warehouse: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
+    area: Yup.string().optional(),
+    location: Yup.string().optional(),
   }).nullable(),
-  warehouse_tujuan_id: Yup.number()
+  destination_warehouse_id: Yup.number()
     .required('Gudang tujuan wajib diisi!')
     .typeError('Gudang tujuan wajib diisi!'),
-  product: Yup.array()
+  products: Yup.array()
     .of(ProductObjectSchema)
-    .min(1, 'Minimal harus ada 1 produk!'),
-  ekspedisi: Yup.array().of(EkspedisiObjectSchema).optional().default([]),
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
+  deliveries: Yup.array()
+    .of(DeliveryObjectSchema)
+    .min(1, 'Minimal harus ada 1 pengiriman!')
+    .required('Pengiriman wajib diisi!'),
 });
 
 export const UpdateMovementFormSchema = MovementFormSchema;
@@ -102,41 +147,72 @@ export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
 
 export const getMovementFormInitialValues = (
   initialValues?: Movement
-): MovementFormValues => ({
-  alasan_transfer: initialValues?.alasan_transfer ?? '',
-  tanggal_transfer: initialValues?.tanggal_transfer ?? '',
-  warehouse_asal: initialValues?.warehouse_asal
-    ? {
-        value: initialValues.warehouse_asal.id,
-        label: initialValues.warehouse_asal.name,
-      }
-    : null,
-  warehouse_asal_id: initialValues?.warehouse_asal?.id ?? 0,
-  warehouse_tujuan: initialValues?.warehouse_tujuan
-    ? {
-        value: initialValues.warehouse_tujuan.id,
-        label: initialValues.warehouse_tujuan.name,
-      }
-    : null,
-  warehouse_tujuan_id: initialValues?.warehouse_tujuan?.id ?? 0,
-  product:
-    initialValues?.product?.map((p) => ({
-      product: { value: p.product.id, label: p.product.name },
-      product_id: p.product.id,
-      qty_product: p.qty_product,
-    })) ?? [],
-  ekspedisi:
-    initialValues?.ekspedisi?.map((e) => ({
-      product: { value: e.product_id, label: '' },
-      product_id: e.product_id,
-      qty: e.qty,
-      supplier: { value: e.supplier.id, label: e.supplier.name },
-      supplier_id: e.supplier.id,
-      plat_nomor: e.plat_nomor,
-      no_surat_jalan: e.no_surat_jalan,
-      dokumen: e.dokumen,
-      biaya_ekspedisi: e.biaya_ekspedisi,
-      biaya_ekspedisi_per_item: e.biaya_ekspedisi,
-      nama_sopir: e.nama_sopir,
-    })) ?? [],
-});
+): MovementFormValues => {
+  const detailIdToProductId = new Map<number, { id: number; name: string }>();
+  initialValues?.details?.forEach((detail) => {
+    detailIdToProductId.set(detail.id, {
+      id: detail.product.id,
+      name: detail.product.name,
+    });
+  });
+
+  return {
+    transfer_reason: initialValues?.transfer_reason ?? '',
+    transfer_date: initialValues?.transfer_date ?? '',
+    source_warehouse: initialValues?.source_warehouse
+      ? {
+          value: initialValues.source_warehouse.id,
+          label: initialValues.source_warehouse.name,
+          area: initialValues.source_warehouse.area?.name ?? undefined,
+          location: initialValues.source_warehouse.location?.name ?? undefined,
+        }
+      : null,
+    source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
+    destination_warehouse: initialValues?.destination_warehouse
+      ? {
+          value: initialValues.destination_warehouse.id,
+          label: initialValues.destination_warehouse.name,
+          area: initialValues.destination_warehouse.area?.name ?? undefined,
+          location:
+            initialValues.destination_warehouse.location?.name ?? undefined,
+        }
+      : null,
+    destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
+    products:
+      initialValues?.details?.map((detail) => ({
+        product: {
+          value: detail.product.id,
+          label: detail.product.name,
+        },
+        product_id: detail.product.id,
+        product_qty: detail.quantity,
+      })) ?? [],
+    deliveries:
+      initialValues?.deliveries?.map((d) => ({
+        delivery_cost: d.shipping_cost_total ?? undefined,
+        delivery_cost_per_item: d.shipping_cost_item ?? undefined,
+        document_number: d.document_number ?? '',
+        document: d.document_path ?? null,
+        document_path: d.document_path ?? null,
+        driver_name: d.driver_name ?? '',
+        vehicle_plate: d.vehicle_plate ?? '',
+        supplier: d.supplier
+          ? { value: d.supplier.id, label: d.supplier.name }
+          : null,
+        supplier_id: d.supplier?.id ?? 0,
+        products:
+          d.items?.map((item) => {
+            const productData = detailIdToProductId.get(
+              item.stock_transfer_detail_id
+            );
+            return {
+              product: productData
+                ? { value: productData.id, label: productData.name }
+                : null,
+              product_id: productData?.id ?? 0,
+              product_qty: item.quantity,
+            };
+          }) ?? [],
+      })) ?? [],
+  };
+};
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index db432a4d..34027209 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -22,15 +22,13 @@ import {
   UpdateMovementFormSchema,
   getMovementFormInitialValues,
   ProductSchema,
-  EkspedisiSchema,
+  DeliverySchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
 import { useMovementFormHandlers } from './useMovementFormHandlers';
-import {
-  ProductApi,
-  SupplierApi,
-  WarehouseApi,
-} from '@/services/api/master-data';
+import { SupplierApi, WarehouseApi } from '@/services/api/master-data';
+import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
+import FileInput from '@/components/input/FileInput';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -39,8 +37,12 @@ interface MovementFormProps {
 
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const [, setMovementFormErrorMessage] = useState('');
+  const [
+    productWarehouseSelectInputValue,
+    setProductWarehouseSelectInputValue,
+  ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
-  const [selectedEkspedisi, setSelectedEkspedisi] = useState<number[]>([]);
+  const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
 
   const {
     deleteModal,
@@ -61,39 +63,59 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     initialValues: formikInitialValues,
     validationSchema:
       type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    validateOnMount: false,
+    enableReinitialize: true,
     onSubmit: async (values) => {
       setMovementFormErrorMessage('');
+      const documents: File[] = [];
+      const deliveriesPayload = values.deliveries.map((d, idx) => {
+        let documentIndex = 0;
+
+        if (d.document && d.document instanceof File) {
+          documents.push(d.document);
+          documentIndex = documents.length - 1;
+        } else {
+        }
+
+        return {
+          delivery_cost: d.delivery_cost ?? 0,
+          delivery_cost_per_item: d.delivery_cost_per_item ?? 0,
+          document_index: documentIndex,
+          document_path: d.document_path,
+          driver_name: d.driver_name,
+          vehicle_plate: d.vehicle_plate,
+          supplier_id: d.supplier_id,
+          products: d.products.map((p) => ({
+            product_id: p.product_id,
+            product_qty: p.product_qty,
+          })),
+        };
+      });
+
       const payload: CreateMovementPayload = {
-        alasan_transfer: values.alasan_transfer,
-        tanggal_transfer: values.tanggal_transfer,
-        warehouse_asal_id: values.warehouse_asal_id,
-        warehouse_tujuan_id: values.warehouse_tujuan_id,
-        product: (values.product ?? []).map((p) => ({
+        transfer_reason: values.transfer_reason,
+        transfer_date: values.transfer_date,
+        source_warehouse_id: values.source_warehouse_id,
+        destination_warehouse_id: values.destination_warehouse_id,
+        products: values.products.map((p) => ({
           product_id: p.product_id,
-          qty_product: p.qty_product,
-        })),
-        ekspedisi: (values.ekspedisi ?? []).map((e) => ({
-          product_id: e.product_id,
-          qty: e.qty,
-          supplier_id: e.supplier_id,
-          plat_nomor: e.plat_nomor,
-          no_surat_jalan: e.no_surat_jalan,
-          dokumen:
-            e.dokumen instanceof File ? e.dokumen : (e.dokumen as string),
-          biaya_ekspedisi: e.biaya_ekspedisi,
-          biaya_ekspedisi_per_item: e.qty
-            ? e.biaya_ekspedisi / e.qty
-            : e.biaya_ekspedisi,
-          nama_sopir: e.nama_sopir,
+          product_qty: p.product_qty,
         })),
+        deliveries: deliveriesPayload,
       };
 
       switch (type) {
         case 'add':
-          await createMovementHandler(payload);
+          await createMovementHandler(payload, documents);
           break;
         case 'edit':
-          await updateMovementHandler(initialValues?.id as number, payload);
+          await updateMovementHandler(
+            initialValues?.id as number,
+            payload,
+            documents
+          );
           break;
       }
     },
@@ -101,65 +123,67 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const addProduct = () => {
     const newProducts = [
-      ...(formik.values.product || []),
+      ...(formik.values.products || []),
       {
         product: null,
         product_id: 0,
-        qty_product: 0,
+        product_qty: 0,
       },
     ];
-    formik.setFieldValue('product', newProducts);
+    formik.setFieldValue('products', newProducts);
   };
 
   const removeProduct = useCallback(
     (i: number) => {
       const updatedProducts =
-        formik.values.product?.reduce((acc: ProductSchema[], item, index) => {
+        formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
           if (index !== i) {
             acc.push(item);
           }
           return acc;
         }, []) ?? [];
 
-      formik.setFieldValue('product', updatedProducts);
+      formik.setFieldValue('products', updatedProducts);
     },
     [formik]
   );
 
   const bulkRemoveProduct = useCallback(() => {
     const updatedProducts =
-      formik.values.product?.filter(
+      formik.values.products?.filter(
         (_, idx) => !selectedProducts.includes(idx)
       ) ?? [];
-    formik.setFieldValue('product', updatedProducts);
+    formik.setFieldValue('products', updatedProducts);
     setSelectedProducts([]);
   }, [formik, selectedProducts]);
 
-  const addEkspedisi = () => {
-    const newEkspedisi = [
-      ...(formik.values.ekspedisi || []),
+  const addDelivery = () => {
+    formik.setFieldValue('deliveries', [
+      ...(formik.values.deliveries || []),
       {
-        product: null,
-        product_id: 0,
-        qty: 0,
+        delivery_cost: undefined,
+        delivery_cost_per_item: undefined,
+        document: null,
+        driver_name: '',
+        vehicle_plate: '',
         supplier: null,
         supplier_id: 0,
-        plat_nomor: '',
-        no_surat_jalan: '',
-        dokumen: '',
-        biaya_ekspedisi: 0,
-        biaya_ekspedisi_per_item: 0,
-        nama_sopir: '',
+        products: [
+          {
+            product: null,
+            product_id: 0,
+            product_qty: 0,
+          },
+        ],
       },
-    ];
-    formik.setFieldValue('ekspedisi', newEkspedisi);
+    ]);
   };
 
-  const removeEkspedisi = useCallback(
+  const removeDelivery = useCallback(
     (i: number) => {
-      const updatedEkspedisi =
-        formik.values.ekspedisi?.reduce(
-          (acc: EkspedisiSchema[], item, index) => {
+      const updatedDeliveries =
+        formik.values.deliveries?.reduce(
+          (acc: DeliverySchema[], item, index) => {
             if (index !== i) {
               acc.push(item);
             }
@@ -168,39 +192,71 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           []
         ) ?? [];
 
-      formik.setFieldValue('ekspedisi', updatedEkspedisi);
+      formik.setFieldValue('deliveries', updatedDeliveries);
     },
     [formik]
   );
 
-  const bulkRemoveEkspedisi = useCallback(() => {
-    const updatedEkspedisi =
-      formik.values.ekspedisi?.filter(
-        (_, idx) => !selectedEkspedisi.includes(idx)
+  const bulkRemoveDelivery = useCallback(() => {
+    const updatedDeliveries =
+      formik.values.deliveries?.filter(
+        (_, idx) => !selectedDeliveries.includes(idx)
       ) ?? [];
-    formik.setFieldValue('ekspedisi', updatedEkspedisi);
-    setSelectedEkspedisi([]);
-  }, [formik, selectedEkspedisi]);
+    formik.setFieldValue('deliveries', updatedDeliveries);
+    setSelectedDeliveries([]);
+  }, [formik, selectedDeliveries]);
 
-  const isRepeaterInputError = <T extends 'product' | 'ekspedisi'>(
+  const isRepeaterInputError = <T extends 'products' | 'deliveries'>(
     arrayName: T,
-    column: T extends 'product' ? keyof ProductSchema : keyof EkspedisiSchema,
+    column: T extends 'products' ? keyof ProductSchema : keyof DeliverySchema,
     idx: number
   ) => {
     if (
       !formik.touched[arrayName] ||
       !Array.isArray(formik.touched[arrayName])
     ) {
-      return false;
+      return {
+        isError: false,
+        errorMessage: undefined,
+      };
     }
 
     const touchedField = formik.touched[arrayName]?.[idx]?.[column as string];
     const errorField = formik.errors[arrayName]?.[idx] as Record<
       string,
-      unknown
+      string
     >;
 
-    return touchedField && Boolean(errorField?.[column as string]);
+    return {
+      isError: touchedField && Boolean(errorField?.[column as string]),
+      errorMessage: touchedField ? errorField?.[column as string] : undefined,
+    };
+  };
+
+  const isDeliveryProductInputError = (
+    deliveryIdx: number,
+    productIdx: number,
+    column: keyof DeliverySchema['products'][number]
+  ) => {
+    const touchedDelivery = formik.touched.deliveries?.[deliveryIdx];
+    const errorDelivery = formik.errors.deliveries?.[deliveryIdx] as
+      | { products: Array<Record<string, string>> }
+      | undefined;
+
+    if (!touchedDelivery?.products || !errorDelivery?.products) {
+      return {
+        isError: false,
+        errorMessage: undefined,
+      };
+    }
+
+    const touchedField = touchedDelivery.products[productIdx]?.[column];
+    const errorField = errorDelivery.products[productIdx]?.[column];
+
+    return {
+      isError: Boolean(touchedField && errorField),
+      errorMessage: touchedField ? errorField : undefined,
+    };
   };
 
   interface WarehouseOptionType extends OptionType {
@@ -208,6 +264,43 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     location?: string;
   }
 
+  interface ProductWarehouseOptionType extends OptionType {
+    product_id: number;
+    warehouse_id: number;
+    warehouse_name: string;
+    quantity: number;
+  }
+
+  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
+  const { data: allProductWarehouses } = useSWR(
+    allProductWarehousesUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+
+  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]);
+
   // Warehouse selection
   const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
     useState('');
@@ -217,26 +310,49 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     WarehouseApi.getAllFetcher
   );
   const warehouseOptions = isResponseSuccess(warehouses)
-    ? warehouses?.data.map((w) => ({
-        value: w.id,
-        label: w.name,
-        area: w.area?.name,
-        location:
-          'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
-            ? w.location?.name
-            : undefined,
-      }))
+    ? 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,
+        };
+      })
     : [];
 
-  // Product selection
-  const [productSelectInputValue, setProductSelectInputValue] = useState('');
-  const productsUrl = `${ProductApi.basePath}?${new URLSearchParams({ search: productSelectInputValue }).toString()}`;
-  const { data: products, isLoading: isLoadingProducts } = useSWR(
-    productsUrl,
-    ProductApi.getAllFetcher
-  );
-  const productOptions = isResponseSuccess(products)
-    ? products?.data.map((p) => ({ value: p.id, label: p.name }))
+  // 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
@@ -250,58 +366,289 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
     : [];
 
-  const { setValues: formikSetValues } = formik;
+  // Handle cost calculation when delivery_cost changes
+  const handleDeliveryCostChange = useCallback(
+    (idx: number, value: string) => {
+      const numValue = parseFloat(value) || 0;
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost`, numValue);
 
-  useEffect(() => {
-    formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
-
-  useEffect(() => {
-    formik.values.ekspedisi?.forEach((eks, idx) => {
-      if (eks.qty && eks.biaya_ekspedisi) {
-        const perItem = eks.biaya_ekspedisi / eks.qty;
-        formik.setFieldValue(
-          `ekspedisi.${idx}.biaya_ekspedisi_per_item`,
-          perItem
+      const delivery = formik.values.deliveries?.[idx];
+      if (delivery) {
+        const productQty = delivery.products.reduce(
+          (sum, p) => sum + p.product_qty,
+          0
         );
+        if (productQty > 0 && numValue > 0) {
+          const perItem = numValue / productQty;
+          formik.setFieldValue(
+            `deliveries.${idx}.delivery_cost_per_item`,
+            perItem
+          );
+        } else if (numValue === 0) {
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, 0);
+        }
+      }
+    },
+    [formik]
+  );
+
+  // Handle cost calculation when delivery_cost_per_item changes
+  const handleDeliveryCostPerItemChange = useCallback(
+    (idx: number, value: string) => {
+      const numValue = parseFloat(value) || 0;
+      formik.setFieldValue(
+        `deliveries.${idx}.delivery_cost_per_item`,
+        numValue
+      );
+
+      const delivery = formik.values.deliveries?.[idx];
+      if (delivery) {
+        const productQty = delivery.products.reduce(
+          (sum, p) => sum + p.product_qty,
+          0
+        );
+        if (productQty > 0 && numValue > 0) {
+          const totalCost = numValue * productQty;
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
+        } else if (numValue === 0) {
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, 0);
+        }
+      }
+    },
+    [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
+      );
+
+      // 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.ekspedisi]);
+  }, [
+    formik.values.deliveries
+      ?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0))
+      .join(','),
+  ]);
 
-  const getFilteredProductOptions = useCallback(() => {
+  useEffect(() => {
+    if (
+      formik.values.source_warehouse_id &&
+      type !== 'edit' &&
+      type !== 'detail'
+    ) {
+      formik.setFieldValue('products', []);
+      formik.setFieldValue('deliveries', []);
+    }
+  }, [formik.values.source_warehouse_id]);
+
+  const getFilteredProductWarehouseOptions = useCallback(() => {
     return (
-      formik.values.product
+      formik.values.products
         ?.filter((p) => p.product)
         .map((p) => ({
           value: p.product_id,
           label: (p.product as OptionType)?.label,
         })) ?? []
     );
-  }, [formik.values.product]);
+  }, [formik.values.products]);
 
-  const validateEkspedisiQty = (ekspedisiIdx: number, qty: number) => {
-    const productId = formik.values.ekspedisi?.[ekspedisiIdx]?.product_id;
-    if (!productId) return true;
+  const getAvailableStock = useCallback(
+    (productId: number) => {
+      if (type === 'detail') return 0;
+      const productWarehouse = productWarehouseOptions.find(
+        (pw) => pw.product_id === productId
+      );
+      return productWarehouse?.quantity ?? 0;
+    },
+    [productWarehouseOptions, type]
+  );
 
-    const relatedProduct = formik.values.product?.find(
-      (p) => p.product_id === productId
+  const getProductQtyAdornment = useCallback(
+    (productIdx: number) => {
+      if (type === 'detail') return null;
+      const product = formik.values.products?.[productIdx];
+      if (!product || !product.product_id) return null;
+
+      const availableStock = getAvailableStock(product.product_id);
+      const requestedQty = Number(product.product_qty) || 0;
+      const remainingStock = availableStock - requestedQty;
+
+      if (requestedQty > 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.products, getAvailableStock, type]
+  );
+
+  const getProductQtyError = useCallback(
+    (productIdx: number) => {
+      if (type === 'detail') return null;
+      const product = formik.values.products?.[productIdx];
+      if (!product || !product.product_id) return null;
+
+      const availableStock = getAvailableStock(product.product_id);
+      const requestedQty = Number(product.product_qty) || 0;
+
+      if (requestedQty > availableStock) {
+        return `Qty melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('id-ID')}`;
+      }
+
+      return null;
+    },
+    [formik.values.products, getAvailableStock, type]
+  );
+
+  const validateDeliveryQty = useCallback(
+    (deliveryIdx: number, deliveryProductIdx: number, qty: number) => {
+      if (type === 'detail') return true;
+      const delivery = formik.values.deliveries?.[deliveryIdx];
+      if (!delivery) return true;
+
+      const deliveryProduct = delivery.products[deliveryProductIdx];
+      if (!deliveryProduct) return true;
+
+      const productId = deliveryProduct.product_id;
+      if (!productId) return true;
+
+      const relatedProduct = formik.values.products?.find(
+        (p) => p.product_id === productId
+      );
+      if (!relatedProduct) return true;
+
+      const totalQtyUsed =
+        formik.values.deliveries?.reduce((total, d, dIdx) => {
+          const productQty = d.products.reduce((sum, p, pIdx) => {
+            if (
+              p.product_id === productId &&
+              !(dIdx === deliveryIdx && pIdx === deliveryProductIdx)
+            ) {
+              return sum + (Number(p.product_qty) || 0);
+            }
+            return sum;
+          }, 0);
+          return total + productQty;
+        }, 0) || 0;
+
+      return totalQtyUsed + qty <= Number(relatedProduct.product_qty);
+    },
+    [formik.values.deliveries, formik.values.products, type]
+  );
+
+  const getDeliveryQtyError = useCallback(
+    (deliveryIdx: number, deliveryProductIdx: number) => {
+      if (type === 'detail') return null;
+      const delivery = formik.values.deliveries?.[deliveryIdx];
+      if (!delivery) return null;
+
+      const deliveryProduct = delivery.products[deliveryProductIdx];
+      if (!deliveryProduct || !deliveryProduct.product_id) return null;
+
+      const qty = Number(deliveryProduct.product_qty) || 0;
+      const productId = deliveryProduct.product_id;
+
+      const relatedProduct = formik.values.products?.find(
+        (p) => p.product_id === productId
+      );
+      if (!relatedProduct) return null;
+
+      const totalQtyUsed =
+        formik.values.deliveries?.reduce((total, d, dIdx) => {
+          const productQty = d.products.reduce((sum, p, pIdx) => {
+            if (
+              p.product_id === productId &&
+              !(dIdx === deliveryIdx && pIdx === deliveryProductIdx)
+            ) {
+              return sum + (Number(p.product_qty) || 0);
+            }
+            return sum;
+          }, 0);
+          return total + productQty;
+        }, 0) || 0;
+
+      const availableQty = Number(relatedProduct.product_qty) - totalQtyUsed;
+
+      if (totalQtyUsed + qty > Number(relatedProduct.product_qty)) {
+        return `Qty melebihi stok produk! Tersedia: ${availableQty}, Total digunakan: ${totalQtyUsed + qty}`;
+      }
+
+      return null;
+    },
+    [formik.values.deliveries, formik.values.products, type]
+  );
+
+  const invalidQtyRows = useMemo(
+    () =>
+      type === 'detail'
+        ? []
+        : (formik.values.deliveries?.flatMap((delivery, deliveryIdx) =>
+            delivery.products.map((product, productIdx) => {
+              const qty = Number(product.product_qty) || 0;
+              return !validateDeliveryQty(deliveryIdx, productIdx, qty);
+            })
+          ) ?? []),
+    [
+      formik.values.deliveries,
+      formik.values.products,
+      validateDeliveryQty,
+      type,
+    ]
+  );
+
+  const hasInvalidQty = useMemo(
+    () => (type === 'detail' ? false : invalidQtyRows.some(Boolean)),
+    [invalidQtyRows, type]
+  );
+
+  const hasExceededStock = useMemo(() => {
+    if (type === 'detail') return false;
+    return (
+      formik.values.products?.some((product, idx) => {
+        return getProductQtyError(idx) !== null;
+      }) ?? false
     );
-    if (!relatedProduct) return true;
-
-    const totalQtyUsed =
-      formik.values.ekspedisi?.reduce((total, eks, i) => {
-        if (eks.product_id === productId && i !== ekspedisiIdx) {
-          return total + (Number(eks.qty) || 0);
-        }
-        return total;
-      }, 0) || 0;
-
-    return totalQtyUsed + qty <= Number(relatedProduct.qty_product);
-  };
+  }, [formik.values.products, getProductQtyError, type]);
 
   return (
     <>
-      <section className='w-full max-w-5xl'>
+      <section className='w-full'>
         <FormHeader
           type={type}
           title='Movement'
@@ -315,34 +662,34 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           {/* Top card - Movement details */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <div className='flex gap-4'>
+              <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
                 <TextInput
                   required
                   label='Alasan Transfer'
-                  name='alasan_transfer'
-                  value={formik.values.alasan_transfer}
+                  name='transfer_reason'
+                  value={formik.values.transfer_reason}
                   onChange={formik.handleChange}
                   onBlur={formik.handleBlur}
                   isError={
-                    formik.touched.alasan_transfer &&
-                    Boolean(formik.errors.alasan_transfer)
+                    formik.touched.transfer_reason &&
+                    Boolean(formik.errors.transfer_reason)
                   }
-                  errorMessage={formik.errors.alasan_transfer}
+                  errorMessage={formik.errors.transfer_reason}
                   readOnly={type === 'detail'}
                 />
                 <TextInput
                   required
                   label='Tanggal Transfer'
                   type='date'
-                  name='tanggal_transfer'
-                  value={formik.values.tanggal_transfer}
+                  name='transfer_date'
+                  value={formik.values.transfer_date}
                   onChange={formik.handleChange}
                   onBlur={formik.handleBlur}
                   isError={
-                    formik.touched.tanggal_transfer &&
-                    Boolean(formik.errors.tanggal_transfer)
+                    formik.touched.transfer_date &&
+                    Boolean(formik.errors.transfer_date)
                   }
-                  errorMessage={formik.errors.tanggal_transfer}
+                  errorMessage={formik.errors.transfer_date}
                   readOnly={type === 'detail'}
                 />
               </div>
@@ -350,18 +697,18 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           </div>
 
           {/* Warehouse cards */}
-          <div className='grid grid-cols-2 gap-4 mb-4'>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mb-4'>
             <div className='card bg-base-100 shadow'>
               <div className='card-body space-y-4'>
                 <h3 className='card-title text-lg'>Gudang Asal</h3>
                 <SelectInput
                   required
                   label='Gudang'
-                  value={formik.values.warehouse_asal ?? undefined}
+                  value={formik.values.source_warehouse}
                   onChange={(val) => {
-                    formik.setFieldValue('warehouse_asal', val);
+                    formik.setFieldValue('source_warehouse', val);
                     formik.setFieldValue(
-                      'warehouse_asal_id',
+                      'source_warehouse_id',
                       (val as WarehouseOptionType)?.value
                     );
                   }}
@@ -369,10 +716,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   onInputChange={setWarehouseSelectInputValue}
                   isLoading={isLoadingWarehouses}
                   isError={
-                    formik.touched.warehouse_asal_id &&
-                    Boolean(formik.errors.warehouse_asal_id)
+                    formik.touched.source_warehouse_id &&
+                    Boolean(formik.errors.source_warehouse_id)
                   }
-                  errorMessage={formik.errors.warehouse_asal_id as string}
+                  errorMessage={formik.errors.source_warehouse_id as string}
                   isDisabled={type === 'detail'}
                   isClearable
                 />
@@ -381,9 +728,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <div className='space-y-4'>
                   <TextInput
                     label='Area'
-                    name='warehouse_asal_area'
+                    name='source_warehouse_area'
                     value={
-                      (formik.values.warehouse_asal as WarehouseOptionType)
+                      (formik.values.source_warehouse as WarehouseOptionType)
                         ?.area || '-'
                     }
                     readOnly
@@ -394,9 +741,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   />
                   <TextInput
                     label='Lokasi'
-                    name='warehouse_asal_location'
+                    name='source_warehouse_location'
                     value={
-                      (formik.values.warehouse_asal as WarehouseOptionType)
+                      (formik.values.source_warehouse as WarehouseOptionType)
                         ?.location || '-'
                     }
                     readOnly
@@ -415,11 +762,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <SelectInput
                   required
                   label='Gudang'
-                  value={formik.values.warehouse_tujuan ?? undefined}
+                  value={formik.values.destination_warehouse}
                   onChange={(val) => {
-                    formik.setFieldValue('warehouse_tujuan', val);
+                    formik.setFieldValue('destination_warehouse', val);
                     formik.setFieldValue(
-                      'warehouse_tujuan_id',
+                      'destination_warehouse_id',
                       (val as WarehouseOptionType)?.value
                     );
                   }}
@@ -427,10 +774,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   onInputChange={setWarehouseSelectInputValue}
                   isLoading={isLoadingWarehouses}
                   isError={
-                    formik.touched.warehouse_tujuan_id &&
-                    Boolean(formik.errors.warehouse_tujuan_id)
+                    formik.touched.destination_warehouse_id &&
+                    Boolean(formik.errors.destination_warehouse_id)
+                  }
+                  errorMessage={
+                    formik.errors.destination_warehouse_id as string
                   }
-                  errorMessage={formik.errors.warehouse_tujuan_id as string}
                   isDisabled={type === 'detail'}
                   isClearable
                 />
@@ -439,10 +788,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <div className='space-y-4'>
                   <TextInput
                     label='Area'
-                    name='warehouse_tujuan_area'
+                    name='destination_warehouse_area'
                     value={
-                      (formik.values.warehouse_tujuan as WarehouseOptionType)
-                        ?.area || '-'
+                      (
+                        formik.values
+                          .destination_warehouse as WarehouseOptionType
+                      )?.area || '-'
                     }
                     readOnly
                     disabled
@@ -452,10 +803,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   />
                   <TextInput
                     label='Lokasi'
-                    name='warehouse_tujuan_location'
+                    name='destination_warehouse_location'
                     value={
-                      (formik.values.warehouse_tujuan as WarehouseOptionType)
-                        ?.location || '-'
+                      (
+                        formik.values
+                          .destination_warehouse as WarehouseOptionType
+                      )?.location || '-'
                     }
                     readOnly
                     disabled
@@ -482,15 +835,16 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             type='checkbox'
                             className='checkbox'
                             checked={
-                              formik.values.product?.length ===
+                              formik.values.products?.length ===
                                 selectedProducts.length &&
-                              formik.values.product?.length > 0
+                              formik.values.products?.length > 0
                             }
                             onChange={(e) => {
                               if (e.target.checked) {
                                 setSelectedProducts(
-                                  formik.values.product?.map((_, idx) => idx) ??
-                                    []
+                                  formik.values.products?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
                                 );
                               } else {
                                 setSelectedProducts([]);
@@ -505,7 +859,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     </tr>
                   </thead>
                   <tbody>
-                    {formik.values.product?.map((product, idx) => (
+                    {formik.values.products?.map((product, idx) => (
                       <tr key={`product-row-${idx}-${product.product_id}`}>
                         {type !== 'detail' && (
                           <td>
@@ -534,42 +888,67 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={product.product ?? undefined}
                             onChange={(val) => {
                               formik.setFieldValue(
-                                `product.${idx}.product`,
+                                `products.${idx}.product`,
                                 val
                               );
                               formik.setFieldValue(
-                                `product.${idx}.product_id`,
-                                (val as OptionType)?.value
+                                `products.${idx}.product_id`,
+                                (val as ProductWarehouseOptionType)?.value
                               );
                             }}
-                            options={productOptions}
-                            onInputChange={setProductSelectInputValue}
-                            isLoading={isLoadingProducts}
-                            isDisabled={type === 'detail'}
+                            options={productWarehouseOptions}
+                            onInputChange={setProductWarehouseSelectInputValue}
+                            isLoading={isLoadingProductWarehouses}
+                            isDisabled={
+                              type === 'detail' ||
+                              !formik.values.source_warehouse_id
+                            }
+                            placeholder={
+                              !formik.values.source_warehouse_id
+                                ? 'Pilih gudang asal terlebih dahulu'
+                                : 'Pilih produk'
+                            }
                             isClearable
-                            isError={isRepeaterInputError(
-                              'product',
+                            {...isRepeaterInputError(
+                              'products',
                               'product',
                               idx
                             )}
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         <td>
                           <TextInput
                             required
                             type='number'
-                            name={`product.${idx}.qty_product`}
-                            value={product.qty_product ?? ''}
+                            name={`products.${idx}.product_qty`}
+                            value={product.product_qty ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'product',
-                              'qty_product',
-                              idx
-                            )}
+                            endAdornment={getProductQtyAdornment(idx)}
+                            isError={
+                              isRepeaterInputError(
+                                'products',
+                                'product_qty',
+                                idx
+                              ).isError || Boolean(getProductQtyError(idx))
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'products',
+                                'product_qty',
+                                idx
+                              ).errorMessage ||
+                              getProductQtyError(idx) ||
+                              undefined
+                            }
                             readOnly={type === 'detail'}
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
@@ -624,10 +1003,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
             </div>
           </div>
 
-          {/* Ekspedisi table */}
+          {/* Deliveries table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <h2 className='card-title mb-4'>Ekspedisi</h2>
+              <h2 className='card-title mb-4'>Pengiriman</h2>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
@@ -638,19 +1017,19 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             type='checkbox'
                             className='checkbox'
                             checked={
-                              formik.values.ekspedisi?.length ===
-                                selectedEkspedisi.length &&
-                              formik.values.ekspedisi?.length > 0
+                              formik.values.deliveries?.length ===
+                                selectedDeliveries.length &&
+                              formik.values.deliveries?.length > 0
                             }
                             onChange={(e) => {
                               if (e.target.checked) {
-                                setSelectedEkspedisi(
-                                  formik.values.ekspedisi?.map(
+                                setSelectedDeliveries(
+                                  formik.values.deliveries?.map(
                                     (_, idx) => idx
                                   ) ?? []
                                 );
                               } else {
-                                setSelectedEkspedisi([]);
+                                setSelectedDeliveries([]);
                               }
                             }}
                           />
@@ -660,34 +1039,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <th>Qty</th>
                       <th>Supplier</th>
                       <th>Plat Nomor</th>
-                      <th>No Surat Jalan</th>
                       <th>Dokumen</th>
-                      <th>Biaya Ekspedisi (Rp.)</th>
-                      <th>Biaya Ekspedisi / Item (Rp.)</th>
+                      <th>Biaya Pengiriman (Rp.)</th>
+                      <th>Biaya Per Item (Rp.)</th>
                       <th>Nama Sopir</th>
                       {type !== 'detail' && <th>Aksi</th>}
                     </tr>
                   </thead>
                   <tbody>
-                    {formik.values.ekspedisi?.map((ekspedisi, idx) => (
-                      <tr
-                        key={`ekspedisi-row-${idx}-${ekspedisi.product_id}-${ekspedisi.supplier_id}`}
-                      >
+                    {formik.values.deliveries?.map((delivery, idx) => (
+                      <tr key={`delivery-row-${idx}`}>
                         {type !== 'detail' && (
                           <td>
                             <input
                               type='checkbox'
                               className='checkbox'
-                              checked={selectedEkspedisi.includes(idx)}
+                              checked={selectedDeliveries.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedEkspedisi([
-                                    ...selectedEkspedisi,
+                                  setSelectedDeliveries([
+                                    ...selectedDeliveries,
                                     idx,
                                   ]);
                                 } else {
-                                  setSelectedEkspedisi(
-                                    selectedEkspedisi.filter((i) => i !== idx)
+                                  setSelectedDeliveries(
+                                    selectedDeliveries.filter((i) => i !== idx)
                                   );
                                 }
                               }}
@@ -697,67 +1073,61 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         <td>
                           <SelectInput
                             required
-                            value={ekspedisi.product ?? undefined}
+                            value={delivery.products[0]?.product ?? undefined}
                             onChange={(val) => {
                               formik.setFieldValue(
-                                `ekspedisi.${idx}.product`,
+                                `deliveries.${idx}.products.0.product`,
                                 val
                               );
                               formik.setFieldValue(
-                                `ekspedisi.${idx}.product_id`,
+                                `deliveries.${idx}.products.0.product_id`,
                                 (val as OptionType)?.value
                               );
-                              formik.setFieldValue(`ekspedisi.${idx}.qty`, '');
                             }}
-                            options={getFilteredProductOptions()}
+                            options={getFilteredProductWarehouseOptions()}
                             isDisabled={type === 'detail'}
                             isClearable
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'product',
-                              idx
-                            )}
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         <td>
                           <TextInput
                             required
                             type='number'
-                            name={`ekspedisi.${idx}.qty`}
-                            value={ekspedisi.qty ?? ''}
-                            onChange={(e) => {
-                              const newQty = Number(e.target.value);
-                              if (validateEkspedisiQty(idx, newQty)) {
-                                formik.handleChange(e);
-                              } else {
-                                toast.error(
-                                  'Quantity exceeds available product quantity'
-                                );
-                              }
-                            }}
+                            name={`deliveries.${idx}.products.0.product_qty`}
+                            value={delivery.products[0]?.product_qty ?? ''}
+                            onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'qty',
-                              idx
-                            )}
+                            isError={
+                              isDeliveryProductInputError(idx, 0, 'product_qty')
+                                .isError || Boolean(getDeliveryQtyError(idx, 0))
+                            }
+                            errorMessage={
+                              isDeliveryProductInputError(idx, 0, 'product_qty')
+                                .errorMessage ||
+                              getDeliveryQtyError(idx, 0) ||
+                              undefined
+                            }
                             readOnly={type === 'detail'}
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper: 'w-full min-w-48',
                             }}
                           />
                         </td>
                         <td>
                           <SelectInput
                             required
-                            value={ekspedisi.supplier ?? undefined}
+                            value={delivery.supplier}
                             onChange={(val) => {
                               formik.setFieldValue(
-                                `ekspedisi.${idx}.supplier`,
+                                `deliveries.${idx}.supplier`,
                                 val
                               );
                               formik.setFieldValue(
-                                `ekspedisi.${idx}.supplier_id`,
+                                `deliveries.${idx}.supplier_id`,
                                 (val as OptionType)?.value
                               );
                             }}
@@ -766,71 +1136,102 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             isLoading={isLoadingSuppliers}
                             isDisabled={type === 'detail'}
                             isClearable
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'supplier',
-                              idx
-                            )}
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         <td>
                           <TextInput
                             required
-                            name={`ekspedisi.${idx}.plat_nomor`}
-                            value={ekspedisi.plat_nomor ?? ''}
+                            name={`deliveries.${idx}.vehicle_plate`}
+                            value={delivery.vehicle_plate}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'plat_nomor',
+                            {...isRepeaterInputError(
+                              'deliveries',
+                              'vehicle_plate',
                               idx
                             )}
                             readOnly={type === 'detail'}
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
+                        <td>
+                          {type === 'detail' ? (
+                            <Button
+                              color='primary'
+                              className='w-full min-w-52 flex items-center justify-center gap-2'
+                              disabled={!delivery.document_path}
+                              href={delivery.document_path ?? undefined}
+                              target='_blank'
+                              rel='noopener noreferrer'
+                            >
+                              {delivery.document_path ? (
+                                <>
+                                  <Icon
+                                    icon='material-symbols:file-open-outline'
+                                    width={20}
+                                    height={20}
+                                  />
+                                  Lihat Dokumen
+                                </>
+                              ) : (
+                                '-'
+                              )}
+                            </Button>
+                          ) : (
+                            <FileInput
+                              name={`deliveries.${idx}.document`}
+                              onChange={(e) => {
+                                const file = e.target.files?.[0];
+                                if (file) {
+                                  if (file.size > 2 * 1024 * 1024) {
+                                    toast.error(
+                                      'Ukuran dokumen maksimal 2 MB!'
+                                    );
+                                    return;
+                                  }
+                                  formik.setFieldValue(
+                                    `deliveries.${idx}.document`,
+                                    file
+                                  );
+                                }
+                              }}
+                              {...isRepeaterInputError(
+                                'deliveries',
+                                'document',
+                                idx
+                              )}
+                              className={{
+                                wrapper:
+                                  'w-full min-w-72 md:w-min-80 lg:w-min-96',
+                              }}
+                            />
+                          )}
+                        </td>
                         <td>
                           <TextInput
                             required
-                            name={`ekspedisi.${idx}.no_surat_jalan`}
-                            value={ekspedisi.no_surat_jalan ?? ''}
-                            onChange={formik.handleChange}
+                            type='number'
+                            name={`deliveries.${idx}.delivery_cost`}
+                            value={delivery.delivery_cost || ''}
+                            onChange={(e) =>
+                              handleDeliveryCostChange(idx, e.target.value)
+                            }
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'no_surat_jalan',
+                            {...isRepeaterInputError(
+                              'deliveries',
+                              'delivery_cost',
                               idx
                             )}
                             readOnly={type === 'detail'}
                             className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            type='file'
-                            name={`ekspedisi.${idx}.dokumen`}
-                            onChange={(e) => {
-                              const file = e.target.files?.[0];
-                              if (file) {
-                                formik.setFieldValue(
-                                  `ekspedisi.${idx}.dokumen`,
-                                  file
-                                );
-                              }
-                            }}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'dokumen',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper: 'w-full min-w-48',
                             }}
                           />
                         </td>
@@ -838,61 +1239,42 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           <TextInput
                             required
                             type='number'
-                            name={`ekspedisi.${idx}.biaya_ekspedisi`}
-                            value={ekspedisi.biaya_ekspedisi ?? ''}
-                            onChange={formik.handleChange}
+                            name={`deliveries.${idx}.delivery_cost_per_item`}
+                            value={delivery.delivery_cost_per_item || ''}
+                            onChange={(e) =>
+                              handleDeliveryCostPerItemChange(
+                                idx,
+                                e.target.value
+                              )
+                            }
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'biaya_ekspedisi',
+                            {...isRepeaterInputError(
+                              'deliveries',
+                              'delivery_cost_per_item',
                               idx
                             )}
                             readOnly={type === 'detail'}
                             className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            disabled
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'biaya_ekspedisi_per_item',
-                              idx
-                            )}
-                            name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`}
-                            value={
-                              ekspedisi.qty && ekspedisi.biaya_ekspedisi
-                                ? (
-                                    ekspedisi.biaya_ekspedisi / ekspedisi.qty
-                                  ).toLocaleString('id-ID')
-                                : '0'
-                            }
-                            readOnly
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                              input: 'bg-base-200',
+                              wrapper: 'w-full min-w-48',
                             }}
                           />
                         </td>
                         <td>
                           <TextInput
                             required
-                            name={`ekspedisi.${idx}.nama_sopir`}
-                            value={ekspedisi.nama_sopir ?? ''}
+                            name={`deliveries.${idx}.driver_name`}
+                            value={delivery.driver_name}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'nama_sopir',
+                            {...isRepeaterInputError(
+                              'deliveries',
+                              'driver_name',
                               idx
                             )}
                             readOnly={type === 'detail'}
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
@@ -901,7 +1283,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             <Button
                               type='button'
                               color='error'
-                              onClick={() => removeEkspedisi(idx)}
+                              onClick={() => removeDelivery(idx)}
                             >
                               <Icon
                                 icon='material-symbols:delete-outline-rounded'
@@ -918,12 +1300,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
               </div>
               {type !== 'detail' && (
                 <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedEkspedisi.length > 0 && (
+                  {selectedDeliveries.length > 0 && (
                     <Button
                       type='button'
                       color='error'
-                      onClick={bulkRemoveEkspedisi}
-                      disabled={selectedEkspedisi.length === 0}
+                      onClick={bulkRemoveDelivery}
                       className='w-fit'
                     >
                       <Icon
@@ -931,17 +1312,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         width={24}
                         height={24}
                       />
-                      Hapus Ekspedisi Terpilih ({selectedEkspedisi.length})
+                      Hapus Pengiriman Terpilih ({selectedDeliveries.length})
                     </Button>
                   )}
                   <Button
                     type='button'
                     color='success'
-                    onClick={addEkspedisi}
+                    onClick={addDelivery}
                     className='w-fit'
                   >
                     <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Ekspedisi
+                    Tambah Pengiriman
                   </Button>
                 </div>
               )}
@@ -952,12 +1333,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           <FormActions<MovementFormValues>
             type={type}
             formik={formik}
-            editUrl={
-              initialValues
-                ? `/inventory/movement/detail/edit/?movementId=${initialValues.id}`
-                : undefined
-            }
-            onDelete={deleteMovementClickHandler}
+            disableSubmit={hasInvalidQty || hasExceededStock}
           />
 
           {movementFormErrorMessage && (
@@ -972,23 +1348,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           )}
         </form>
       </section>
-
-      {type !== 'add' && (
-        <ConfirmationModal
-          ref={deleteModal.ref}
-          type='error'
-          text={`Apakah anda yakin ingin menghapus data Movement ini?`}
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'error',
-            isLoading: isDeleteLoading,
-            onClick: confirmationModalDeleteClickHandler,
-          }}
-        />
-      )}
     </>
   );
 };
diff --git a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
index f6531bf4..0ad31e38 100644
--- a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
+++ b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
@@ -16,8 +16,16 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const createMovementHandler = useCallback(
-    async (payload: CreateMovementPayload) => {
-      const res = await MovementApi.create(payload);
+    async (payload: CreateMovementPayload, documents: File[] = []) => {
+      const formData = new FormData();
+      formData.append('data', JSON.stringify(payload));
+      documents.forEach((file, index) => {
+        formData.append(`documents[${index}]`, file);
+      });
+
+      const res = await MovementApi.create(
+        formData as unknown as CreateMovementPayload
+      );
       if (isResponseError(res)) {
         setMovementFormErrorMessage(res.message);
         return;
@@ -29,8 +37,26 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
   );
 
   const updateMovementHandler = useCallback(
-    async (movementId: number, payload: UpdateMovementPayload) => {
-      const res = await MovementApi.update(movementId, payload);
+    async (
+      movementId: number,
+      payload: UpdateMovementPayload,
+      documents: File[] = []
+    ) => {
+      let finalPayload: UpdateMovementPayload | FormData;
+
+      if (documents.length > 0) {
+        const formData = new FormData();
+        formData.append('data', JSON.stringify(payload));
+        documents.forEach((file, index) => {
+          formData.append(`documents[${index}]`, file);
+        });
+
+        finalPayload = formData as unknown as UpdateMovementPayload;
+      } else {
+        finalPayload = payload;
+      }
+
+      const res = await MovementApi.update(movementId, finalPayload);
       if (res?.status === 'error') {
         setMovementFormErrorMessage(res.message);
         return;
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.tsx b/src/components/pages/master-data/customer/form/CustomerForm.tsx
index ee824866..533e0c38 100644
--- a/src/components/pages/master-data/customer/form/CustomerForm.tsx
+++ b/src/components/pages/master-data/customer/form/CustomerForm.tsx
@@ -41,7 +41,6 @@ const CustomerForm = ({
   const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [picSelectInputValue, setPicSelectInputValue] = useState('');
-  const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
 
   // Fetch Data
   const picUrl = `${UserApi.basePath}?${new URLSearchParams({
@@ -252,7 +251,6 @@ const CustomerForm = ({
               }
               onChange={typeChangeHandler}
               options={typeOptions}
-              onInputChange={setTypeSelectInputValue}
               isError={formik.touched.type && Boolean(formik.errors.type)}
               errorMessage={formik.errors.type as string}
               isDisabled={formType === 'detail'}
@@ -309,7 +307,6 @@ const CustomerForm = ({
               isError={formik.touched.address && Boolean(formik.errors.address)}
               errorMessage={formik.errors.address}
               readOnly={formType === 'detail'}
-              cols={8}
             />
           </div>
 
diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts b/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
index 69f127a3..44d15478 100644
--- a/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
+++ b/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
@@ -2,7 +2,10 @@ import * as Yup from 'yup';
 
 export const SupplierFormSchema = Yup.object({
     name: Yup.string().required('Nama wajib diisi!'),
-    alias: Yup.string().required('Alias wajib diisi!'),
+    alias: Yup.string()
+    .matches(/^[A-Za-z0-9]+$/, 'Alias hanya boleh berisi huruf dan angka tanpa spasi atau simbol!')
+    .max(5, 'Alias maksimal 5 karakter!')
+    .required('Alias wajib diisi!'),
     pic: Yup.string().required('PIC wajib diisi!'),
     type: Yup.object({
         value: Yup.string().required(),
diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.tsx b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
index fb4630ae..74c4da27 100644
--- a/src/components/pages/master-data/supplier/form/SupplierForm.tsx
+++ b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
@@ -21,7 +21,6 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
-import TagInput from '@/components/input/TagInput';
 import TextArea from '@/components/input/TextArea';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -42,9 +41,7 @@ const SupplierForm = ({
   // Setup State
   const [supplierFormErrorMessage, setSupplierFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
-  const [categorySelectInputValue, setCategorySelectInputValue] = useState('');
-  const [hatcheryTagInputValue, setHatcheryTagInputValue] = useState('');
+  const [hatcheryOptionsValues, setHatcheryOptionValues] = useState<OptionType[]>([]);
 
   // -- Options data mapping
   const typeOptions = TYPE_OPTIONS;
@@ -108,8 +105,6 @@ const SupplierForm = ({
   };
 
   // Memo
-  console.log('Memo');
-  console.log(initialValues);
   const formikInitialValues = useMemo<SupplierFormValues>(() => {
     return {
       name: initialValues?.name ?? '',
@@ -125,7 +120,7 @@ const SupplierForm = ({
       account_number: initialValues?.account_number ?? '',
       due_date: initialValues?.due_date ?? 1,
     };
-  }, [initialValues]);
+  }, [initialValues, typeOptions, categoryOptions]);
 
   // Formik
   const formik = useFormik<SupplierFormValues>({
@@ -172,8 +167,22 @@ const SupplierForm = ({
   // Initialize Formik
   useEffect(() => {
     formikSetValues(formikInitialValues);
-    setHatcheryTagInputValue(formikInitialValues.hatchery);
-  }, [formikSetValues, formikInitialValues, hatcheryTagInputValue]);
+    if(formType != 'add'){
+      const hatcheryArrays = formikInitialValues.hatchery.split(',');
+      const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
+        value: item,
+        label: item,
+      }));
+      setHatcheryOptionValues(hatcheryCreatedOptions);
+    }
+  }, [formikSetValues, formikInitialValues, setHatcheryOptionValues]);
+  useEffect(() => {
+    const commaSeparatedValues = hatcheryOptionsValues.map((item) => item.value).join(',');
+    formikSetValues({
+      ...formik.values,
+      hatchery: commaSeparatedValues,
+    })
+  }, [hatcheryOptionsValues, formikSetValues]);
 
   // Option Handler
   const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -260,7 +269,6 @@ const SupplierForm = ({
               }
               onChange={typeChangeHandler}
               options={typeOptions}
-              onInputChange={setTypeSelectInputValue}
               isError={formik.touched.type && Boolean(formik.errors.type)}
               errorMessage={formik.errors.type as string}
               isDisabled={formType === 'detail'}
@@ -278,7 +286,6 @@ const SupplierForm = ({
               }
               onChange={categoryChangeHandler}
               options={categoryOptions}
-              onInputChange={setCategorySelectInputValue}
               isError={
                 formik.touched.category && Boolean(formik.errors.category)
               }
@@ -287,17 +294,25 @@ const SupplierForm = ({
               isClearable
               isSearchable={true}
             />
-            <TagInput
-              name='hatchery'
+            <SelectInput
+              isMulti
+              createables
+              required
+              placeholder='Pilih Hatchery'
               label='Hatchery'
-              value={hatcheryTagInputValue}
-              onChange={(value) => formik.setFieldValue('hatchery', value)}
-              isError={
-                formik.touched.hatchery && Boolean(formik.errors.hatchery)
-              }
-              errorMessage={formik.errors.hatchery}
-              readOnly={formType === 'detail'}
+              value={hatcheryOptionsValues}
+              onChange={(val) => {
+                console.log(val); // pastikan val = array of { value, label }
+                setHatcheryOptionValues(val as OptionType[]);
+              }}
+              isError={formik.touched.hatchery && Boolean(formik.errors.hatchery)}
+              errorMessage={formik.errors.hatchery as string}
+              isDisabled={formType === 'detail'}
+              isClearable
+              isSearchable={true}
+              options={[]}
             />
+
             <TextInput
               required
               label='Nomor Telepon'
@@ -333,7 +348,6 @@ const SupplierForm = ({
               isError={formik.touched.address && Boolean(formik.errors.address)}
               errorMessage={formik.errors.address}
               readOnly={formType === 'detail'}
-              cols={8}
             />
             <TextInput
               required
diff --git a/src/components/steps/StepItem.tsx b/src/components/steps/StepItem.tsx
new file mode 100644
index 00000000..85ec4f3e
--- /dev/null
+++ b/src/components/steps/StepItem.tsx
@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface StepItemProps {
+  children?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+  color?: Color;
+}
+
+const StepItem = ({ children, icon, className, color }: StepItemProps) => {
+  const stepItemBaseClassName = cn('step', {
+    'step-primary': color === 'primary',
+    'step-secondary': color === 'secondary',
+    'step-accent': color === 'accent',
+    'step-neutral': color === 'neutral',
+    'step-info': color === 'info',
+    'step-success': color === 'success',
+    'step-warning': color === 'warning',
+    'step-error': color === 'error',
+  });
+
+  return (
+    <li className={cn(stepItemBaseClassName, className)}>
+      <span className='step-icon'>{icon}</span>
+
+      <div>{children}</div>
+    </li>
+  );
+};
+
+export default StepItem;
diff --git a/src/components/steps/Steps.tsx b/src/components/steps/Steps.tsx
new file mode 100644
index 00000000..29d307e1
--- /dev/null
+++ b/src/components/steps/Steps.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+interface StepsProps {
+  children?: ReactNode;
+  className?: string;
+  direction?: 'horizontal' | 'vertical';
+}
+
+const Steps = ({ children, className, direction }: StepsProps) => {
+  const stepsBaseClassName = cn('steps gap-2', {
+    'steps-horizontal': direction === 'horizontal',
+    'steps-vertical': direction === 'vertical',
+  });
+
+  return (
+    <ul className={cn(stepsBaseClassName, 'overflow-visible!', className)}>
+      {children}
+    </ul>
+  );
+};
+
+export default Steps;
diff --git a/src/components/table/TableRowOptions.tsx b/src/components/table/TableRowOptions.tsx
new file mode 100644
index 00000000..4e2e2c93
--- /dev/null
+++ b/src/components/table/TableRowOptions.tsx
@@ -0,0 +1,71 @@
+import { Icon } from '@iconify/react';
+import Button from '../Button';
+import { cn } from '@/lib/helper';
+
+interface TableRowOptionsProps {
+  type?: 'dropdown' | 'collapse';
+  recordId: string | number;
+  basePath: string;
+  onDelete?: () => void;
+  queryParam?: string;
+  showEdit?: boolean;
+  showDelete?: boolean;
+}
+
+export const TableRowOptions = ({
+  type = 'dropdown',
+  recordId,
+  basePath,
+  onDelete,
+  queryParam = 'id',
+  showEdit = true,
+  showDelete = true,
+}: TableRowOptionsProps) => (
+  <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={`${basePath}/detail/?${queryParam}=${recordId}`}
+      variant='ghost'
+      color='primary'
+      className='justify-start text-sm'
+    >
+      <Icon icon='mdi:eye-outline' width={16} height={16} />
+      Detail
+    </Button>
+    {showEdit && (
+      <Button
+        href={`${basePath}/detail/edit/?${queryParam}=${recordId}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:pencil-outline' width={16} height={16} />
+        Edit
+      </Button>
+    )}
+    {showDelete && onDelete && (
+      <Button
+        onClick={onDelete}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit justify-start text-sm'
+      >
+        <Icon
+          icon='mdi:delete-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    )}
+  </div>
+);
diff --git a/src/components/table/TableRowSizeSelector.tsx b/src/components/table/TableRowSizeSelector.tsx
new file mode 100644
index 00000000..a6fd039d
--- /dev/null
+++ b/src/components/table/TableRowSizeSelector.tsx
@@ -0,0 +1,33 @@
+import SelectInput from '../input/SelectInput';
+
+export interface OptionType {
+  label: string;
+  value: string | number;
+}
+
+interface TableRowSizeSelectorProps {
+  value: number;
+  onChange: (val: OptionType | OptionType[] | null) => void;
+  options: OptionType[];
+}
+
+export const TableRowSizeSelector = ({
+  value,
+  onChange,
+  options,
+}: TableRowSizeSelectorProps) => {
+  return (
+    <div className='flex flex-row justify-end'>
+      <SelectInput
+        label='Baris'
+        options={options}
+        value={{
+          label: String(value),
+          value: value,
+        }}
+        onChange={onChange}
+        className={{ wrapper: 'max-w-28' }}
+      />
+    </div>
+  );
+};
diff --git a/src/components/table/TableToolbar.tsx b/src/components/table/TableToolbar.tsx
new file mode 100644
index 00000000..e3b385b1
--- /dev/null
+++ b/src/components/table/TableToolbar.tsx
@@ -0,0 +1,37 @@
+import { Icon } from '@iconify/react';
+import Button from '../Button';
+import DebouncedTextInput from '../input/DebouncedTextInput';
+
+interface TableToolbarProps {
+  addButton?: {
+    href: string;
+    label: string;
+  };
+  search: {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+  };
+}
+
+export const TableToolbar = ({ addButton, search }: TableToolbarProps) => {
+  return (
+    <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+      {addButton && (
+        <div className='flex flex-row'>
+          <Button href={addButton.href} color='primary'>
+            <Icon icon='ic:round-plus' width={24} height={24} />
+            {addButton.label}
+          </Button>
+        </div>
+      )}
+      <DebouncedTextInput
+        name='search'
+        placeholder={search.placeholder || 'Cari...'}
+        value={search.value}
+        onChange={search.onChange}
+        className={{ wrapper: 'sm:max-w-3xs' }}
+      />
+    </div>
+  );
+};
diff --git a/src/lib/form-data.ts b/src/lib/form-data.ts
new file mode 100644
index 00000000..d94e0724
--- /dev/null
+++ b/src/lib/form-data.ts
@@ -0,0 +1,45 @@
+export function toFormData(
+  value: unknown,
+  form = new FormData(),
+  parentKey?: string
+) {
+  if (value === undefined || value === null) {
+    if (parentKey) form.append(parentKey, '');
+    return form;
+  }
+
+  if (value instanceof File) {
+    if (!parentKey) throw new Error('File must have a key');
+    form.append(parentKey, value);
+    return form;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((v, i) => {
+      const key = parentKey ? `${parentKey}[${i}]` : `${i}`;
+      toFormData(v, form, key);
+    });
+    return form;
+  }
+
+  if (typeof value === 'object') {
+    Object.entries(value as Record<string, unknown>).forEach(([k, v]) => {
+      const key = parentKey ? `${parentKey}[${k}]` : k;
+      toFormData(v, form, key);
+    });
+    return form;
+  }
+
+  if (parentKey) form.append(parentKey, String(value));
+  return form;
+}
+
+export function containsFile(obj: unknown): boolean {
+  if (!obj) return false;
+  if (obj instanceof File) return true;
+  if (Array.isArray(obj)) return obj.some(containsFile);
+  if (typeof obj === 'object') {
+    return Object.values(obj as Record<string, unknown>).some(containsFile);
+  }
+  return false;
+}
diff --git a/src/services/api/base.ts b/src/services/api/base.ts
index d1ac4729..c4dd826e 100644
--- a/src/services/api/base.ts
+++ b/src/services/api/base.ts
@@ -4,9 +4,11 @@ import { BaseApiResponse } from '@/types/api/api-general';
 
 export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
   basePath: string;
+  header?: Record<string, string>;
 
-  constructor(basePath: string) {
+  constructor(basePath: string, header?: Record<string, string>) {
     this.basePath = basePath;
+    this.header = header;
   }
 
   async getAllFetcher(endpoint: string): Promise<BaseApiResponse<T[]>> {
@@ -23,42 +25,52 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
 
   async create(payload: CreatePayloadGeneric) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
     try {
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
       const createRes = await httpClient<BaseApiResponse<T>>(this.basePath, {
         method: 'POST',
         body: payload,
+        headers,
       });
-
       return createRes;
     } catch (error: unknown) {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
 
   async update(id: number, payload: UpdatePayloadGeneric) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
     try {
       const updatePath = `${this.basePath}/${id}`;
+
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
       const updateRes = await httpClient<BaseApiResponse<T>>(updatePath, {
         method: 'PATCH',
         body: payload,
+        headers,
       });
-
       return updateRes;
     } catch (error: unknown) {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
@@ -69,13 +81,11 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
       const deleteRes = await httpClient<BaseApiResponse>(deletePath, {
         method: 'DELETE',
       });
-
       return deleteRes;
     } catch (error) {
       if (axios.isAxiosError<BaseApiResponse>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
diff --git a/src/services/api/inventory.ts b/src/services/api/inventory.ts
index 3e3115e2..ec58f6f2 100644
--- a/src/services/api/inventory.ts
+++ b/src/services/api/inventory.ts
@@ -1,12 +1,33 @@
+import { BaseApiService } from '@/services/api/base';
 import {
-    CreateMovementPayload,
-    Movement,
-    UpdateMovementPayload,
-} from "@/types/api/inventory/movement";
-import {BaseApiService} from "@/services/api/base";
+  CreateProductWarehousePayload,
+  ProductWarehouse,
+  UpdateProductWarehousePayload,
+} from '@/types/api/inventory/product-warehouse';
+import {
+  CreateMovementPayload,
+  Movement,
+  UpdateMovementPayload,
+} from '@/types/api/inventory/movement';
+import {
+  CreateInventoryAdjustmentPayload,
+  InventoryAdjustment,
+} from '@/types/api/inventory/adjustment';
+
+export const ProductWarehouseApi = new BaseApiService<
+  ProductWarehouse,
+  CreateProductWarehousePayload,
+  UpdateProductWarehousePayload
+>('/inventory/product-warehouses');
 
 export const MovementApi = new BaseApiService<
-    Movement,
-    CreateMovementPayload,
-    UpdateMovementPayload
->('/inventory/movements');
\ No newline at end of file
+  Movement,
+  CreateMovementPayload,
+  UpdateMovementPayload
+>('/inventory/transfers');
+
+export const inventoryAdjustmentApi = new BaseApiService<
+  InventoryAdjustment,
+  CreateInventoryAdjustmentPayload,
+  unknown
+>('/inventory/adjustments');
diff --git a/src/services/hooks/useAuth.tsx b/src/services/hooks/useAuth.tsx
index 86bf43ed..79fa8981 100644
--- a/src/services/hooks/useAuth.tsx
+++ b/src/services/hooks/useAuth.tsx
@@ -6,22 +6,43 @@ type AuthStore = {
   isLoadingUser?: boolean;
   setUser: (newUserData?: UserWithRoles) => void;
   setIsLoadingUser: (isLoading?: boolean) => void;
+  permissionCheck: (permissionName: string) => boolean;
 };
 
-const useAuthStore = create<AuthStore>()((set) => ({
+const useAuthStore = create<AuthStore>()((set, get) => ({
   user: undefined,
   isLoadingUser: false,
   setUser: (newUserData) => set({ user: newUserData }),
   setIsLoadingUser: (isLoading) => set({ isLoadingUser: Boolean(isLoading) }),
+
+  permissionCheck: (name) => {
+    const { user, isLoadingUser } = get();
+
+    if (!isLoadingUser && user) {
+      const isAllowed = user.roles.some((role) => {
+        const isPermissionNameAllowed = role.permissions.some(
+          (permission) => permission.name === name
+        );
+
+        return isPermissionNameAllowed;
+      });
+
+      return isAllowed;
+    }
+
+    return false;
+  },
 }));
 
 export const useAuth = () => {
-  const { user, setUser, isLoadingUser, setIsLoadingUser } = useAuthStore();
+  const { user, setUser, isLoadingUser, setIsLoadingUser, permissionCheck } =
+    useAuthStore();
 
   return {
     user,
     setUser,
     isLoadingUser,
     setIsLoadingUser,
+    permissionCheck,
   };
 };
diff --git a/src/services/http/client.ts b/src/services/http/client.ts
index adba75e9..9dd382ca 100644
--- a/src/services/http/client.ts
+++ b/src/services/http/client.ts
@@ -14,6 +14,9 @@ export async function httpClient<T, B = unknown>(
     (!opts.auth && opts.auth !== 'none' && opts.auth !== 'bearer');
   const isBearerAuth = opts.auth === 'bearer' && !!opts.token;
 
+  const isFormData =
+    typeof FormData !== 'undefined' && opts.body instanceof FormData;
+
   const config: AxiosRequestConfig = {
     url: path,
     method: opts.method ?? 'GET',
@@ -22,7 +25,7 @@ export async function httpClient<T, B = unknown>(
     timeout: opts.timeoutMs ?? 10_000,
     withCredentials: isCookieAuth && !isBearerAuth,
     headers: {
-      'Content-Type': 'application/json',
+      ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
       ...(opts.headers ?? {}),
       ...(isBearerAuth && !isCookieAuth
         ? { Authorization: `Bearer ${opts.token}` }
diff --git a/src/styles/daisyui.css b/src/styles/daisyui.css
new file mode 100644
index 00000000..9a148fb4
--- /dev/null
+++ b/src/styles/daisyui.css
@@ -0,0 +1,11 @@
+@layer utilities {
+  .step.step-success::before {
+    --step-bg: var(--color-success);
+    --step-fg: var(--color-success-content);
+  }
+
+  .step.step-error::before {
+    --step-bg: var(--color-error);
+    --step-fg: var(--color-error-content);
+  }
+}
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index 6a3fc6be..c118b5a4 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -24,6 +24,36 @@ export type LogoutResponse = BaseApiResponse;
 
 export type GetMeResponse = BaseApiResponse<UserWithRoles>;
 
+export type Client = {
+  id: number;
+  name: stirng;
+  alias: string;
+  created_at: string;
+  updated_at: string;
+};
+
+export type Permission = {
+  id: number;
+  name: string;
+  action: string;
+  client: Omit<Client, 'created_at' | 'updated_at'>;
+  created_at: string;
+  updated_at: string;
+};
+
+export type Role = {
+  id: number;
+  key: string;
+  name: string;
+  client: Omit<Client, 'created_at' | 'updated_at'>;
+  created_at: string;
+  updated_at: string;
+};
+
+export type RoleWithPermissions = Omit<Role, 'created_at' | 'updated_at'> & {
+  permissions: Omit<Permission, 'created_at' | 'updated_at'>[];
+};
+
 export type User = {
   id: number;
   email: string;
@@ -66,3 +96,11 @@ export type flags =
   | 'STARTER'
   | 'FINISHER'
   | 'OVK';
+
+export type ApprovalsLine = {
+  action_by?: string;
+  date?: string;
+  notes?: string;
+  role?: string;
+  status: 'approved' | 'rejected' | 'waiting';
+}[];
diff --git a/src/types/api/inventory/adjustment.d.ts b/src/types/api/inventory/adjustment.d.ts
new file mode 100644
index 00000000..9d995919
--- /dev/null
+++ b/src/types/api/inventory/adjustment.d.ts
@@ -0,0 +1,30 @@
+import { Product } from '@/types/api/master-data/product';
+import { Warehouse } from '../master-data/warehouse';
+
+export type BaseInventoryAdjustment = {
+  id: number;
+  transaction_type: string;
+  quantity: number;
+  before_quantity: number;
+  after_quantity: number;
+  note: string;
+  product_warehouse_id: number;
+  product_warehouse: {
+    id: number;
+    quantity: number;
+    product_id: number;
+    warehouse_id: number;
+    product: Product;
+    warehouse: Warehouse;
+  };
+};
+
+export type InventoryAdjustment = BaseMetadata & BaseInventoryAdjustment;
+
+export type CreateInventoryAdjustmentPayload = {
+  product_id: number;
+  warehouse_id: number;
+  transaction_type: string;
+  quantity: number;
+  note: string;
+};
diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts
index d7f2776a..87a03f95 100644
--- a/src/types/api/inventory/movement.d.ts
+++ b/src/types/api/inventory/movement.d.ts
@@ -1,51 +1,74 @@
 import { BaseMetadata } from '@/types/api/api-general';
-import { Product } from '@/types/api/master-data/product';
 import { Supplier } from '@/types/api/master-data/supplier';
-import { Warehouse } from '@/types/api/master-data/warehouse';
+
+type MovementWarehouse = {
+  id: number;
+  name: string;
+  location: {
+    id: number;
+    name: string;
+  } | null;
+  area: {
+    id: number;
+    name: string;
+  };
+};
 
 export type BaseMovement = {
   id: number;
-  alasan_transfer: string;
-  tanggal_transfer: string;
-  warehouse_asal: Warehouse;
-  warehouse_tujuan: Warehouse;
-  product: {
-    product: Product;
-    qty_product: number;
+  transfer_reason: string;
+  transfer_date: string;
+  source_warehouse: MovementWarehouse;
+  destination_warehouse: MovementWarehouse;
+  details: {
+    id: number;
+    product: {
+      id: number;
+      name: string;
+    };
+    quantity: number;
+    before_quantity: number;
+    after_quantity: number;
   }[];
-  ekspedisi: {
-    product_id: number;
-    qty: number;
+  deliveries: {
+    id: number;
     supplier: Supplier;
-    plat_nomor: string;
-    no_surat_jalan: string;
-    dokumen: string;
-    biaya_ekspedisi: number;
-    nama_sopir: string;
+    vehicle_plate: string;
+    driver_name: string;
+    document_number: string;
+    document_path: string;
+    shipping_cost_item: number;
+    shipping_cost_total: number;
+    items: {
+      id: number;
+      stock_transfer_detail_id: number;
+      quantity: number;
+    }[];
   }[];
 };
 
 export type Movement = BaseMetadata & BaseMovement;
 
 export type CreateMovementPayload = {
-  alasan_transfer: string;
-  tanggal_transfer: string;
-  warehouse_asal_id: number;
-  warehouse_tujuan_id: number;
-  product: {
+  transfer_reason: string;
+  transfer_date: string;
+  source_warehouse_id: number;
+  destination_warehouse_id: number;
+  products: {
     product_id: number;
-    qty_product: number;
+    product_qty: number;
   }[];
-  ekspedisi: {
-    product_id: number;
-    qty: number;
+  deliveries: {
+    delivery_cost: number;
+    delivery_cost_per_item: number;
+    document_index?: number;
+    driver_name: string;
+    vehicle_plate: string;
     supplier_id: number;
-    plat_nomor: string;
-    no_surat_jalan: string;
-    dokumen: string | File;
-    biaya_ekspedisi: number;
-    biaya_ekspedisi_per_item?: number;
-    nama_sopir: string;
+    products: {
+      product_id: number;
+      product_qty: number;
+    }[];
   }[];
 };
 
diff --git a/src/types/api/inventory/product-warehouse.d.ts b/src/types/api/inventory/product-warehouse.d.ts
new file mode 100644
index 00000000..eda8d1b8
--- /dev/null
+++ b/src/types/api/inventory/product-warehouse.d.ts
@@ -0,0 +1,22 @@
+import { BaseMetadata } from '@/types/api/api-general';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { Product } from '@/types/api/master-data/product';
+
+export type BaseProductWarehouse = {
+  id: number;
+  product_id: number;
+  warehouse_id: number;
+  quantity: number;
+  product: Product;
+  warehouse: Warehouse;
+};
+
+export type ProductWarehouse = BaseMetadata & BaseProductWarehouse;
+
+export type CreateProductWarehousePayload = {
+  product_id: number;
+  warehouse_id: number;
+  quantity: number;
+};
+
+export type UpdateProductWarehousePayload = CreateProductWarehousePayload;