feat(FE-166-169): Slicing UI Penjualan Form dan Client side validation

src/app/globals.css

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

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

@@ -1,7 +1,9 @@
+import SalesForm from '@/components/pages/marketing/sales-orders/form/SalesForm';
+
 const AddSalesOrder = () => {
   return (
-    <div>
+    <div className='size-full p-4'>
-      <p>Tambah Sales Order</p>
+      <SalesForm />
     </div>
   );
 };

src/components/Modal.tsx

@@ -48,6 +48,7 @@ export const useModal = () => {
 
 interface ModalProps {
   ref: RefObject<HTMLDialogElement | null>;
+  id?: string;
   children?: ReactNode;
   closeOnBackdrop?: boolean;
   className?: {
@@ -56,7 +57,13 @@ interface ModalProps {
   };
 }
 
-const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
+const Modal = ({
+  ref,
+  id,
+  children,
+  closeOnBackdrop,
+  className,
+}: ModalProps) => {
   const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (closeOnBackdrop && e.target === ref.current) {
       ref.current?.close();
@@ -66,6 +73,7 @@ const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
   return (
     <dialog
       ref={ref}
+      id={id}
       className={cn('modal', className?.modal)}
       onClick={handleBackdropClick}
     >

src/components/input/PatternInput.tsx

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

src/components/input/SelectInput.tsx

@@ -55,6 +55,7 @@ interface SelectInputBaseProps<T = OptionType> {
   delay?: number;
   onInputChange?: (search: string) => void;
   startAdornment?: ReactNode;
+  menuPortalTarget?: HTMLElement | null;
 }
 
 interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -68,7 +69,7 @@ const animatedComponents = makeAnimated();
 const CustomControl = <
   Option,
   IsMulti extends boolean,
-  Group extends GroupBase<Option>
+  Group extends GroupBase<Option>,
 >(
   props: ControlProps<Option, IsMulti, Group>
 ) => {
@@ -117,6 +118,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     createables = false,
     onInputChange,
     startAdornment,
+    menuPortalTarget,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -186,7 +188,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
       <SelectComponent<T, boolean, GroupBase<T>>
         instanceId='select'
-        value={value ?? (isMulti ? [] : undefined)}
+        value={value ?? (isMulti ? [] : null)}
         onChange={onChange ? handleChange : undefined}
         options={options}
         menuIsOpen={openMenu}
@@ -257,7 +259,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           startAdornment,
         })}
         menuPortalTarget={
-          typeof document !== 'undefined' ? document.body : undefined
+          typeof document !== 'undefined'
+            ? (menuPortalTarget ?? document.body)
+            : undefined
         }
         styles={{
           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -274,8 +278,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
 const useSelect = <T,>(
   basePath: string,
-  valueKey: keyof T,
+  valueKey: keyof T | string,
-  labelKey: keyof T,
+  labelKey: keyof T | string,
   searchKey: string = 'search',
   params?: { [key: string]: string }
 ) => {
@@ -286,7 +290,7 @@ const useSelect = <T,>(
       [searchKey]: inputValue ?? '',
       ...params,
     }).toString();
-  }, [inputValue, searchKey]);
+  }, [inputValue, searchKey, params]);
 
   const optionsUrl = `${basePath}?${optionsUrlParams}`;
 

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

@@ -1,13 +1,19 @@
 'use client';
 
 import Button from '@/components/Button';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { cn } from '@/lib/helper';
-import { Marketing, MarketingProducts } from '@/types/api/marketing/marketing';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
 import { Customer } from '@/types/api/master-data/customer';
 import { Icon } from '@iconify/react';
 import { CellContext } from '@tanstack/react-table';
@@ -35,7 +41,7 @@ const RowsOptionsMenu = ({
     >
       <div className='flex flex-col gap-1'>
         <Button
-          href={`recording/detail/?recordingId=${props.row.original.id}`}
+          href={`/marketing/sales-orders/detail/?salesOrderId=${props.row.original.id}`}
           variant='ghost'
           color='primary'
           className='justify-start text-sm'
@@ -44,7 +50,7 @@ const RowsOptionsMenu = ({
           Detail
         </Button>
         <Button
-          href={`recording/detail/edit/?recordingId=${props.row.original.id}`}
+          href={`/marketing/sales-orders/detail/edit/?salesOrderId=${props.row.original.id}`}
           variant='ghost'
           color='warning'
           className='justify-start text-sm'
@@ -56,25 +62,32 @@ const RowsOptionsMenu = ({
           onClick={deleteClickHandler}
           variant='ghost'
           color='error'
-          className='text-error hover:text-inherit'
+          className='text-error hover:text-inherit justify-start text-sm'
         >
-          <Icon
+          <Icon icon='mdi:delete-outline' width={16} height={16} />
-            icon='mdi:delete-outline'
-            width={16}
-            height={16}
-            className='justify-start text-sm'
-          />
           Delete
         </Button>
       </div>
     </div>
   );
 };
+
 const SalesOrderTable = () => {
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
 
+  const [approveAction, setApproveAction] = useState<
+    'approve' | 'reject' | null
+  >(null);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).filter(
+    (id) => rowSelection[id]
+  );
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setSearch(e.target.value);
@@ -91,139 +104,267 @@ const SalesOrderTable = () => {
     []
   );
 
+  const approveClickHandler = () => {
+    setApproveAction('approve');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApproveAction('reject');
+    confirmationModal.openModal();
+  };
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    toQueryString: getTableFilterToQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
   return (
-    <div className='flex flex-col gap-4'>
+    <>
-      <div className='flex flex-col gap-2 mb-4'>
+      <div className='flex flex-col gap-4'>
-        <TableToolbar
+        <div className='flex flex-col gap-2 mb-4'>
-          addButton={{
+          <TableToolbar
-            href: 'recording/add',
+            addButton={{
-            label: 'Tambah Sales Order',
+              href: '/marketing/sales-orders/add',
+              label: 'Tambah Sales Order',
+            }}
+            search={{
+              value: search,
+              onChange: searchChangeHandler,
+              placeholder: 'Cari Sales Order',
+            }}
+          />
+          <TableRowSizeSelector
+            value={pageSize}
+            onChange={pageSizeChangeHandler}
+            options={ROWS_OPTIONS}
+          />
+          <div className='flex flex-row gap-2'>
+            <Button
+              color='success'
+              onClick={approveClickHandler}
+              className='justify-start text-sm'
+            >
+              <Icon icon='material-symbols:check' width={24} height={24} />
+              Approve
+            </Button>
+
+            <Button
+              color='error'
+              onClick={rejectClickHandler}
+              className='justify-start text-sm'
+            >
+              <Icon icon='material-symbols:close' width={24} height={24} />
+              Reject
+            </Button>
+          </div>
+        </div>
+        <Table
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          data={[
+            {
+              id: 1,
+              so_number: 'SO-001',
+              so_date: '2024-01-01',
+              so_docs: 'Dokumen SO 1.pdf',
+              customer: {
+                id: 1,
+                name: 'Customer A',
+              } as Customer,
+              sales_person: {
+                id: 1,
+                name: 'Sales Person A',
+              },
+              notes: 'Catatan untuk SO 1',
+              grand_total: 1000000,
+              approval: {
+                step_name: 'Approved',
+              },
+              marketing_products: [
+                {
+                  id: 1,
+                  qty: 10,
+                  unit_price: 100000,
+                  avg_weight: 1.5,
+                  total_weight: 15,
+                  total_price: 1000000,
+                  product_warehouse: {
+                    id: 1,
+                    product: {
+                      id: 1,
+                      name: 'Product A',
+                    },
+                  },
+                } as MarketingProduct,
+                {
+                  id: 2,
+                  qty: 5,
+                  unit_price: 200000,
+                  avg_weight: 2.0,
+                  total_weight: 10,
+                  total_price: 1000000,
+                  product_warehouse: {
+                    id: 2,
+                    product: {
+                      id: 2,
+                      name: 'Product B',
+                    },
+                  },
+                } as MarketingProduct,
+              ],
+            } as Marketing,
+          ]}
+          columns={[
+            {
+              id: 'select',
+              header: ({ table }) => (
+                <div className='w-full flex flex-row justify-center'>
+                  <CheckboxInput
+                    name='allRow'
+                    checked={table.getIsAllRowsSelected()}
+                    indeterminate={table.getIsSomeRowsSelected()}
+                    onChange={table.getToggleAllRowsSelectedHandler()}
+                  />
+                </div>
+              ),
+              cell: ({ row }) => (
+                <div>
+                  <CheckboxInput
+                    name='row'
+                    checked={row.getIsSelected()}
+                    disabled={!row.getCanSelect()}
+                    indeterminate={row.getIsSomeSelected()}
+                    onChange={row.getToggleSelectedHandler()}
+                  />
+                </div>
+              ),
+            },
+            {
+              accessorKey: 'so_number',
+              header: 'No. Order',
+            },
+            {
+              accessorKey: 'so_date',
+              header: 'Tanggal',
+            },
+            {
+              accessorKey: 'approval.step_name',
+              header: 'Status',
+            },
+            {
+              accessorKey: 'customer.name',
+              header: 'Customer',
+            },
+            {
+              accessorKey: 'grand_total',
+              header: 'Grand Total',
+            },
+            {
+              accessorKey: 'marketing_products.length',
+              header: 'Product Details',
+              cell: (props) => (
+                <ul className='list-disc list-inside'>
+                  {props.row.original.marketing_products?.map((product) => (
+                    <li key={product.id}>
+                      {product.product_warehouse.product.name} - Qty:{' '}
+                      {product.qty}
+                    </li>
+                  ))}
+                </ul>
+              ),
+            },
+            {
+              header: 'Aksi',
+              cell: (props) => {
+                const currentPageSize =
+                  props.table.getPaginationRowModel().rows.length;
+                const currentPageRows =
+                  props.table.getPaginationRowModel().flatRows;
+                const currentRowRelativeIndex =
+                  currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+                const isLast2Rows =
+                  currentRowRelativeIndex > currentPageSize - 2;
+
+                const deleteClickHandler = () => {};
+
+                return (
+                  <>
+                    {currentPageSize > 2 && (
+                      <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                        <RowsOptionsMenu
+                          type='dropdown'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                        />
+                      </RowDropdownOptions>
+                    )}
+
+                    {currentPageSize <= 2 && (
+                      <RowCollapseOptions>
+                        <RowsOptionsMenu
+                          type='collapse'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                        />
+                      </RowCollapseOptions>
+                    )}
+                  </>
+                );
+              },
+            },
+          ]}
+          pageSize={pageSize}
+          page={page}
+          onPageChange={setPage}
+          className={{
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
           }}
-          search={{
-            value: search,
-            onChange: searchChangeHandler,
-            placeholder: 'Cari Sales Order',
-          }}
-        />
-        <TableRowSizeSelector
-          value={pageSize}
-          onChange={pageSizeChangeHandler}
-          options={ROWS_OPTIONS}
         />
       </div>
-      <Table
+      <ConfirmationModal
-        data={[
+        ref={deleteModal.ref}
-          {
+        type='error'
-            id: 1,
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini?`}
-            so_number: 'SO-001',
+        secondaryButton={{
-            so_date: '2024-01-01',
+          text: 'Tidak',
-            so_docs: 'Dokumen SO 1.pdf',
+        }}
-            customer: {
+        primaryButton={{
-              id: 1,
+          text: 'Ya',
-              name: 'Customer A',
+          color: 'error',
-            } as Customer,
-            sales_person: {
-              id: 1,
-              name: 'Sales Person A',
-            },
-            notes: 'Catatan untuk SO 1',
-            grand_total: 1000000,
-            approval: {
-              step_name: 'Approved',
-            },
-            marketing_products: [
-              {
-                id: 1,
-                qty: 10,
-                unit_price: 100000,
-                avg_weigth: 1.5,
-                total_weight: 15,
-                total_price: 1000000,
-                product_warehouse: {
-                  id: 1,
-                  product: {
-                    id: 1,
-                    name: 'Product A',
-                  },
-                },
-              } as MarketingProducts,
-              {
-                id: 2,
-                qty: 5,
-                unit_price: 200000,
-                avg_weigth: 2.0,
-                total_weight: 10,
-                total_price: 1000000,
-                product_warehouse: {
-                  id: 2,
-                  product: {
-                    id: 2,
-                    name: 'Product B',
-                  },
-                },
-              } as MarketingProducts,
-            ],
-          } as Marketing,
-        ]}
-        columns={[
-          {
-            header: '#',
-            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
-          },
-          {
-            accessorKey: 'so_number',
-            header: 'No. Order',
-          },
-          {
-            accessorKey: 'so_date',
-            header: 'Tanggal',
-          },
-          {
-            accessorKey: 'approval.step_name',
-            header: 'Status',
-          },
-          {
-            accessorKey: 'customer.name',
-            header: 'Customer',
-          },
-          {
-            accessorKey: 'grand_total',
-            header: 'Grand Total',
-          },
-          {
-            accessorKey: 'marketing_products.length',
-            header: 'Product Details',
-            cell: (props) => (
-              <ul className='list-disc list-inside'>
-                {props.row.original.marketing_products?.map((product) => (
-                  <li key={product.id}>
-                    {product.product_warehouse.product.name} - Qty:{' '}
-                    {product.qty}
-                  </li>
-                ))}
-              </ul>
-            ),
-          },
-          {
-            header: 'Aksi',
-            cell: (props) => {},
-          },
-        ]}
-        pageSize={pageSize}
-        page={page}
-        onPageChange={setPage}
-        className={{
-          tableWrapperClassName: 'overflow-x-auto min-h-full!',
-          tableClassName: 'font-inter w-full table-auto min-h-full!',
-          headerRowClassName: 'border-b border-b-gray-200',
-          headerColumnClassName:
-            'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-          bodyRowClassName: 'border-b border-b-gray-200',
-          bodyColumnClassName:
-            'px-6 py-3 last:flex last:flex-row last:justify-end',
         }}
       />
-    </div>
+
+      <ConfirmationModal
+        ref={confirmationModal.ref}
+        type={approveAction === 'approve' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approveAction} data penjualan (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approveAction === 'approve' ? 'success' : 'error',
+        }}
+      />
+    </>
   );
 };
 export default SalesOrderTable;

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

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

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

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

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

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

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

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

src/lib/helper.ts

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

src/services/api/marketing.ts

@@ -0,0 +1,6 @@
+import { Marketing } from '@/types/api/marketing/marketing';
+import { BaseApiService } from './base';
+
+export const MarketingApi = new BaseApiService<Marketing, unknown, unknown>(
+  '/marketing/sales-orders'
+);

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

@@ -4,7 +4,8 @@ import {
   BaseMetadata,
   CreatedUser,
 } from '@/types/api/api-general';
-import { ProductWarehouse } from '../inventory/product-warehouse';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Kandang } from '@/types/api/master-data/kandang';
 
 export type BaseMarketing = {
   id: number;
@@ -17,14 +18,14 @@ export type BaseMarketing = {
   notes: string;
   grand_total: number;
   approval: BaseApproval;
-  marketing_products?: MarketingProducts[];
+  marketing_products?: MarketingProduct[];
 };
 
-export type MarketingProducts = {
+export type MarketingProduct = {
   id: number;
   qty: number;
   unit_price: number;
-  avg_weigth: number;
+  avg_weight: number;
   total_weight: number;
   total_price: number;
   product_warehouse: ProductWarehouse;
@@ -35,7 +36,7 @@ export type MarketingDeliveryProducts = {
   id: number;
   qty: number;
   unit_price: number;
-  avg_weigth: number;
+  avg_weight: number;
   total_weight: number;
   total_price: number;
   delivery_date: string;
@@ -48,6 +49,23 @@ export type CreateMarketingPayload = {
   customer_id: number;
   date: string;
   notes: string;
+  marketing_products: CreateMarketingProductPayload[];
 };
-
 export type UpdateMarketingPayload = CreateMarketingPayload;
+
+export type CreateMarketingProductPayload = {
+  id?: number;
+  vehicle_number: string;
+  kandang_id: string | number | undefined;
+  kandang: Kandang | undefined;
+  product_warehouse_id: string | number | undefined;
+  product_warehouse: ProductWarehouse | undefined;
+  unit_price: string | number | undefined;
+  total_weight: string | number | undefined;
+  qty: string | number | undefined;
+  uom: string | undefined;
+  avg_weight: string | number | undefined;
+  total_price: string | number | undefined;
+  delivery_date?: string | null;
+};
+export type UpdateMarketingProductPayload = CreateMarketingProductPayload;