refactor(FE-177-166-167): separate table repeater component and adjust data types with new API Payload

2026-05-20 21:41:57 +00:00 · 2025-11-16 23:19:28 +07:00
parent 3fdb10ec7f
commit d3c4706d87
16 changed files with 593 additions and 496 deletions
@@ -12,16 +12,10 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import {
-  cn,
-  formatCurrency,
-  formatDate,
-  formatVechicleNumber,
-} from '@/lib/helper';
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
 import { MarketingApi } from '@/services/api/marketing/marketing';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
-import { Customer } from '@/types/api/master-data/customer';
+import { BaseSalesOrder, Marketing } from '@/types/api/marketing/marketing';
 import { Icon } from '@iconify/react';
 import { CellContext } from '@tanstack/react-table';
 import { useCallback, useState } from 'react';
@@ -241,13 +235,13 @@ const SalesOrderTable = () => {
            },
            {
              accessorFn: (row) =>
-                row.marketing_products
+                row.sales_order
                  ?.map((product) => product.total_price)
                  .reduce((a, b) => a + b, 0) ?? 0,
              header: 'Grand Total',
              cell: (props) => {
                return formatCurrency(
-                  props.row.original?.marketing_products
+                  props.row.original?.sales_order
                    ?.map((product) => product.total_price)
                    .reduce((a, b) => a + b, 0) ?? 0
                );
@@ -257,8 +251,8 @@ const SalesOrderTable = () => {
              accessorKey: 'marketing_products.length',
              header: 'Product Details',
              cell: (props) => {
-                if (props?.row?.original?.marketing_products?.length) {
-                  if (props?.row?.original?.marketing_products?.length > 1) {
+                if (props?.row?.original?.sales_order?.length) {
+                  if (props?.row?.original?.sales_order?.length > 1) {
                    return (
                      <Button
                        variant='link'
@@ -268,12 +262,11 @@ const SalesOrderTable = () => {
                          productsClickHandler(props?.row?.original);
                        }}
                      >
-                        Lihat {props?.row?.original?.marketing_products?.length}{' '}
-                        Produk
+                        Lihat {props?.row?.original?.sales_order?.length} Produk
                      </Button>
                    );
                  } else {
-                    const product = props?.row?.original?.marketing_products[0];
+                    const product = props?.row?.original?.sales_order[0];
                    return <>{product?.product_warehouse?.product?.name}</>;
                  }
                }
@@ -379,10 +372,10 @@ const SalesOrderTable = () => {
            <Icon icon='mdi:close' width={16} height={16} />
          </Button>
        </div>
-        <Table<MarketingProduct>
+        <Table<BaseSalesOrder>
          data={
            isResponseSuccess(marketing) && selectedItem
-              ? (selectedItem?.marketing_products ?? [])
+              ? (selectedItem?.sales_order ?? [])
              : []
          }
          columns={[
@@ -10,15 +10,9 @@ import ApprovalSteps, {
 } from '@/components/pages/ApprovalSteps';
 import Table from '@/components/Table';
 import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
-import {
-  cn,
-  formatCurrency,
-  formatDate,
-  formatNumber,
-  formatVechicleNumber,
-} from '@/lib/helper';
+import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 import { MarketingApi } from '@/services/api/marketing/marketing';
-import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
+import { BaseSalesOrder, Marketing } from '@/types/api/marketing/marketing';
 import { Icon } from '@iconify/react';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
@@ -34,7 +28,7 @@ const SalesOrderDetail = ({
    'APPROVED'
  );
  const [grandTotal, setGrandTotal] = useState(
-    initialValues?.marketing_products
+    initialValues?.sales_order
      ?.map((item) => item.total_price)
      .reduce((a, b) => a + b, 0)
  );
@@ -48,7 +42,7 @@ const SalesOrderDetail = ({
    isLoading: isLoadingApproval,
    refresh: refreshApproval,
  } = useApprovalSteps({
-    latestApproval: initialValues?.approval,
+    latestApproval: initialValues?.latest_approval,
    approvalLines: MARKETING_APPROVAL_LINE,
    moduleName: 'MARKETINGS',
    moduleId: initialValues?.id as number as unknown as string,
@@ -114,12 +108,12 @@ const SalesOrderDetail = ({
          <ApprovalSteps approvals={approvals} />
        )}
        <div className='flex-row flex gap-3'>
-          {initialValues?.approval?.step_number != 3 && (
+          {initialValues?.latest_approval?.step_number != 3 && (
            <>
              <Button
                color='success'
                onClick={approveClickHandler}
-                disabled={initialValues?.approval?.step_number != 1}
+                disabled={initialValues?.latest_approval?.step_number != 1}
              >
                <Icon icon='mdi:check' width={24} height={24} />
                Approve
@@ -127,14 +121,14 @@ const SalesOrderDetail = ({
              <Button
                color='error'
                onClick={rejectClickHandler}
-                disabled={initialValues?.approval?.step_number != 2}
+                disabled={initialValues?.latest_approval?.step_number != 2}
              >
                <Icon icon='mdi:close' width={24} height={24} />
                Reject
              </Button>
            </>
          )}
-          {initialValues?.approval?.step_number == 2 && (
+          {initialValues?.latest_approval?.step_number == 2 && (
            <Button color='success' onClick={deliveryClickHandler}>
              <Icon icon='mdi:check' width={24} height={24} />
              Delivery Order
@@ -166,7 +160,7 @@ const SalesOrderDetail = ({
                <tr>
                  <td className='font-semibold'>Status</td>
                  <td>:</td>
-                  <td>{initialValues?.approval?.step_name}</td>
+                  <td>{initialValues?.latest_approval?.step_name}</td>
                </tr>
                <tr>
                  <td className='font-semibold'>Tanggal Penjualan</td>
@@ -187,24 +181,16 @@ const SalesOrderDetail = ({
            </table>
          </div>
        </Card>
-        {initialValues?.marketing_products && (
+        {initialValues?.sales_order && (
          <Card
            title='Daftar Produk'
            className={{
              wrapper: 'w-full bg-white',
            }}
          >
-            <Table<MarketingProduct>
-              data={initialValues?.marketing_products}
+            <Table<BaseSalesOrder>
+              data={initialValues?.sales_order}
              columns={[
-                {
-                  header: 'No. Polisi',
-                  accessorFn(row) {
-                    return formatVechicleNumber(
-                      row.delivery_product?.vehicle_number as string
-                    );
-                  },
-                },
                {
                  header: 'Kandang',
                  accessorFn(row) {
@@ -251,8 +237,8 @@ const SalesOrderDetail = ({
              className={{
                containerClassName: cn({
                  'mb-20':
-                    initialValues?.marketing_products &&
-                    initialValues?.marketing_products?.length === 0,
+                    initialValues?.sales_order &&
+                    initialValues?.sales_order?.length === 0,
                }),
                tableWrapperClassName: 'overflow-x-auto min-h-full!',
                tableClassName: 'font-inter w-full table-auto min-h-full!',
@@ -1,9 +1,8 @@
 import * as Yup from 'yup';
-import { MarketingProduct } from '@/types/api/marketing/marketing';
 import {
  SalesOrderProductFormValues,
  SalesOrderProductSchema,
-} from './repeater/MarketingProduct.schema';
+} from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';

 type MarketingSchemaType = {
  customer_id: number | undefined;
@@ -20,7 +19,7 @@ type MarketingSchemaType = {
 };

 type SalesOrderSchemaType = MarketingSchemaType & {
-  marketing_products: SalesOrderProductFormValues[];
+  sales_order: SalesOrderProductFormValues[];
 };

 export const SalesOrderSchema: Yup.ObjectSchema<SalesOrderSchemaType> =
@@ -33,7 +32,7 @@ export const SalesOrderSchema: Yup.ObjectSchema<SalesOrderSchemaType> =
    }).nullable(),
    so_date: Yup.string().required('Tanggal wajib diisi!'),
    notes: Yup.string().required('Catatan wajib diisi!'),
-    marketing_products: Yup.array()
+    sales_order: Yup.array()
      .of(SalesOrderProductSchema)
      .min(1, 'Produk wajib diisi!')
      .required('Produk wajib diisi!'),
@@ -10,36 +10,56 @@ import SelectInput, {
 } from '@/components/input/SelectInput';
 import TextArea from '@/components/input/TextArea';
 import Modal, { useModal } from '@/components/Modal';
-import * as TanStack from '@tanstack/react-table';
-import Table from '@/components/Table'; // Keep this import
-import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import { formatCurrency, formatDate } from '@/lib/helper';
 import {
+  BaseSalesOrder,
  CreateSalesOrderPayload,
  CreateSalesOrderProductPayload,
  Marketing,
-  MarketingProduct,
 } from '@/types/api/marketing/marketing';
 import { Icon } from '@iconify/react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import MarketingProductForm from './repeater/MarketingProductForm';
-import CheckboxInput from '@/components/input/CheckboxInput';
 import { Customer } from '@/types/api/master-data/customer';
 import { CustomerApi } from '@/services/api/master-data';
 import { useFormik } from 'formik';
-import { SalesOrderFormValues, SalesOrderSchema } from './SalesForm.schema';
+import { SalesOrderFormValues, SalesOrderSchema } from './MarketingForm.schema';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { MarketingApi } from '@/services/api/marketing/marketing';
-import { SalesOrderProductFormValues } from './repeater/MarketingProduct.schema';
+import { SalesOrderProductFormValues } from './repeater/sales-order/SalesOrderProduct.schema';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
 import { useRouter } from 'next/navigation';
+import SalesOrderProductTable from './table-view/SalesOrderProductTable';
+import SalesOrderProductForm from './repeater/sales-order/SalesOrderProductForm';
+
+const MarketingProductToFieldValues = (
+  product: BaseSalesOrder
+): SalesOrderProductFormValues => {
+  return {
+    kandang_id: product.product_warehouse.warehouse.id,
+    kandang: {
+      value: product.product_warehouse.warehouse.id,
+      label: product.product_warehouse.warehouse.name,
+    },
+    product_warehouse: {
+      value: product.product_warehouse.id,
+      label: product.product_warehouse.product.name,
+    },
+    product_warehouse_id: product.product_warehouse.id,
+    unit_price: product.unit_price,
+    total_weight: product.total_weight,
+    qty: product.qty,
+    avg_weight: product.avg_weight,
+    total_price: product.total_price,
+  };
+};

 const SalesForm = ({
  formType = 'add',
  initialValues,
  afterSubmit,
 }: {
-  formType?: 'add' | 'edit';
+  formType?: 'add' | 'edit' | 'deliver';
  initialValues?: Marketing;
  afterSubmit?: () => void;
 }) => {
@@ -49,10 +69,14 @@ const SalesForm = ({

  const [isLoading, setIsLoading] = useState(false);
  const [selectedMarketingProduct, setSelectedMarketingProduct] =
-    useState<MarketingProduct | null>(null);
+    useState<SalesOrderProductFormValues | null>(null);
  const [rawMarketingProducts, setRawMarketingProducts] = useState<
-    MarketingProduct[]
-  >(initialValues?.marketing_products || []);
+    SalesOrderProductFormValues[]
+  >(
+    initialValues?.sales_order.map((item) =>
+      MarketingProductToFieldValues(item)
+    ) || []
+  );
  const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
    initialValues?.customer
      ? { value: initialValues.customer.id, label: initialValues.customer.name }
@@ -63,63 +87,54 @@ const SalesForm = ({
    parseInt(item)
  );
  const [grandTotal, setGrandTotal] = useState<number>(
-    initialValues?.marketing_products
+    initialValues?.sales_order
      ?.map((item) => item.total_price)
      .reduce((a, b) => a + b, 0) ?? 0
  );

  const {
    options: customerOptions,
-    rawData: customerRawData,
    isLoadingOptions: isLoadingCustomerOptions,
  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');

-  const handleAddProduct = useCallback(() => {
-    addProductModal.openModal();
-  }, [addProductModal]);
-  const handleDeleteProduct = useCallback((id: number) => {
-    setRawMarketingProducts((prev) => prev.filter((p) => p.id !== id));
-  }, []);
+  const handleDeleteProduct = useCallback(
+    (product_warehouse_id: number, kandang_id: number) => {
+      setRawMarketingProducts((prev) =>
+        prev.filter(
+          (p) =>
+            p.product_warehouse_id !== product_warehouse_id &&
+            p.kandang_id !== kandang_id
+        )
+      );
+    },
+    []
+  );
  const handleBulkDeleteProduct = () => {
    setRawMarketingProducts((prev) =>
-      prev.filter((product) => !selectedRowIds.includes(product.id))
+      prev.filter(
+        (product) =>
+          !selectedRowIds.includes(
+            parseInt(`${product.product_warehouse_id}${product.kandang_id}`)
+          )
+      )
    );
  };
  const handleDelete = () => {
    deleteModal.openModal();
  };

+  const handleAddProductClick = useCallback(() => {
+    setSelectedMarketingProduct(null); // Pastikan form tambah
+    addProductModal.openModal();
+  }, [addProductModal]);
  const handleAddSubmitProduct = useCallback(
-    async (
-      tableValue: CreateSalesOrderProductPayload,
-      fieldValues: SalesOrderProductFormValues
-    ) => {
-      const newMarketingProduct: MarketingProduct = {
-        id: rawMarketingProducts.length + 1,
-        product_warehouse: tableValue.product_warehouse!,
-        unit_price: tableValue.unit_price as number,
-        total_weight: tableValue.total_weight as number,
-        qty: tableValue.qty as number,
-        avg_weight: tableValue.avg_weight as number,
-        total_price: tableValue.total_price as number,
-        delivery_product: {
-          id: rawMarketingProducts.length + 1,
-          vehicle_number: tableValue.vehicle_number as string,
-          delivery_date: '' as string,
-          unit_price: tableValue.unit_price as number,
-          total_weight: tableValue.total_weight as number,
-          qty: tableValue.qty as number,
-          avg_weight: tableValue.avg_weight as number,
-          total_price: tableValue.total_price as number,
-        },
-      };
-
-      setRawMarketingProducts((prev) => [...prev, newMarketingProduct]);
+    async (values: SalesOrderProductFormValues) => {
+      setRawMarketingProducts((prev) => [...prev, values]);
      formik.setValues({
        ...formik.values,
-        marketing_products: [...formik.values.marketing_products, fieldValues],
+        sales_order: [...formik.values.sales_order, values],
      });
-      setGrandTotal((prev) => prev + (tableValue.total_price as number));
+      setGrandTotal((prev) => prev + (values.total_price as number));
      addProductModal.closeModal();
    },
    [rawMarketingProducts.length, addProductModal]
@@ -176,41 +191,18 @@ const SalesForm = ({
    router.push('/marketing/sales-orders');
  };

-  const MarketingProductToFieldValues = (
-    product: MarketingProduct
-  ): SalesOrderProductFormValues => {
-    return {
-      vehicle_number: product.delivery_product?.vehicle_number,
-      kandang_id: product.product_warehouse.warehouse.id,
-      kandang: {
-        value: product.product_warehouse.warehouse.id,
-        label: product.product_warehouse.warehouse.name,
-      },
-      product_warehouse: {
-        value: product.product_warehouse.product.id,
-        label: product.product_warehouse.product.name,
-      },
-      product_warehouse_id: product.product_warehouse.product.id,
-      unit_price: product.unit_price,
-      total_weight: product.total_weight,
-      qty: product.qty,
-      avg_weight: product.avg_weight,
-      total_price: product.total_price,
-    };
-  };
-
  const formikInitialValues = useMemo(() => {
    return {
      so_date: initialValues?.so_date || undefined,
      notes: initialValues?.notes || undefined,
      customer_id: initialValues?.customer?.id || undefined,
-      sales_person_id: initialValues?.sales_person_id || 1,
+      sales_person_id: initialValues?.sales_person?.id || 1,
      customer: {
        value: initialValues?.customer?.id as number,
        label: initialValues?.customer?.name as string,
      },
-      marketing_products:
-        initialValues?.marketing_products?.map((product) =>
+      sales_order:
+        initialValues?.sales_order?.map((product) =>
          MarketingProductToFieldValues(product)
        ) ?? [],
    };
@@ -227,9 +219,9 @@ const SalesForm = ({
        sales_person_id: values.sales_person_id as number,
        date: formatDate(values.so_date as string, 'yyyy-MM-DD'),
        notes: values.notes as string,
-        marketing_products: values.marketing_products.map((product) => {
+        marketing_products: values.sales_order.map((product) => {
          return {
-            vehicle_number: product.vehicle_number as string,
+            vehicle_number: 'D 1234 XXXX',
            kandang_id: product.kandang_id as number,
            product_warehouse_id: product.product_warehouse_id as number,
            unit_price: parseFloat(product.unit_price as string),
@@ -261,23 +253,14 @@ const SalesForm = ({
  }, [formikSetValues, formik.initialValues]);

  useEffect(() => {
-    // Konversi array MarketingProduct ke format SalesOrderProductFormValues
-    const newMarketingProductValues = rawMarketingProducts.map((product) =>
-      MarketingProductToFieldValues(product)
-    );
-
    // Hitung Grand Total baru
    const newGrandTotal = rawMarketingProducts.reduce(
-      (total, product) => total + product.total_price,
+      (total, product) => total + parseFloat(product.total_price as string),
      0
    );

    // Perbarui nilai formik.values.marketing_products
-    formik.setFieldValue(
-      'marketing_products',
-      newMarketingProductValues,
-      false
-    );
+    formik.setFieldValue('marketing_products', rawMarketingProducts, false);
    // Parameter ketiga (false) untuk menghindari validasi secara langsung

    // Perbarui state grandTotal
@@ -287,85 +270,6 @@ const SalesForm = ({
    setRowSelection({});
  }, [rawMarketingProducts]);

-  const columns = useMemo(
-    () => [
-      {
-        id: 'select',
-        header: ({ table }: { table: TanStack.Table<MarketingProduct> }) => (
-          <div className='w-full flex flex-row justify-center'>
-            <CheckboxInput
-              name='allRow'
-              checked={table.getIsAllRowsSelected()}
-              indeterminate={table.getIsSomeRowsSelected()}
-              onChange={table.getToggleAllRowsSelectedHandler()}
-            />
-          </div>
-        ),
-        cell: ({ row }: { row: TanStack.Row<MarketingProduct> }) => (
-          <div>
-            <CheckboxInput
-              name='row'
-              checked={row.getIsSelected()}
-              disabled={!row.getCanSelect()}
-              indeterminate={row.getIsSomeSelected()}
-              onChange={row.getToggleSelectedHandler()}
-            />
-          </div>
-        ),
-      },
-      {
-        accessorFn: (row: MarketingProduct) =>
-          row.delivery_product?.vehicle_number,
-        header: 'No. Polisi',
-      },
-      {
-        accessorFn: (row: MarketingProduct) =>
-          row.product_warehouse.warehouse.name,
-        header: 'Kandang',
-      },
-      {
-        accessorFn: (row: MarketingProduct) =>
-          row.product_warehouse.product.name,
-        header: 'Produk',
-      },
-      {
-        accessorFn: (row: MarketingProduct) => formatCurrency(row.unit_price),
-        header: 'Harga Satuan (Rp)',
-      },
-      {
-        accessorFn: (row: MarketingProduct) => formatNumber(row.total_weight),
-        header: 'Total Bobot (Kg)',
-      },
-      {
-        accessorFn: (row: MarketingProduct) => formatNumber(row.qty),
-        header: 'Kuantitas',
-      },
-      {
-        accessorFn: (row: MarketingProduct) => formatNumber(row.avg_weight),
-        header: 'Avg. Bobot (Kg)',
-      },
-      {
-        accessorFn: (row: MarketingProduct) => formatCurrency(row.total_price),
-        header: 'Total Penjualan (Rp)',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: TanStack.CellContext<MarketingProduct, unknown>) => (
-          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
-            <Button
-              color='error'
-              className='p-1'
-              onClick={() => handleDeleteProduct(props.row.original.id)}
-            >
-              <Icon icon='mdi:trash' width={16} height={16} />
-            </Button>
-          </div>
-        ),
-      },
-    ],
-    [handleDeleteProduct, initialValues, rawMarketingProducts] // dependensi tunggal
-  );
-
  return (
    <>
      <form
@@ -414,64 +318,17 @@ const SalesForm = ({
            wrapper: 'bg-white w-full',
          }}
        >
-          {JSON.stringify(formik.values.marketing_products)}
+          {JSON.stringify(formik.values.sales_order)}
          <div className='text-green-500'>
-            {JSON.stringify(formik.values.marketing_products)}
+            {JSON.stringify(formik.values.sales_order)}
          </div>
          <span className='text-red-500'>{JSON.stringify(formik.errors)}</span>
-          <Table<MarketingProduct>
-            rowSelection={rowSelection}
-            setRowSelection={setRowSelection}
+          <SalesOrderProductTable
            data={rawMarketingProducts}
-            columns={columns}
-            className={{
-              tableWrapperClassName: 'overflow-x-auto min-h-full!',
-              tableClassName: 'font-inter w-full table-auto  min-h-full!',
-              headerRowClassName: 'border-b border-b-gray-200',
-              headerColumnClassName:
-                'px-2 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-end',
-              bodyRowClassName: 'border-b border-b-gray-200',
-              bodyColumnClassName:
-                'px-2 py-2 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
-              paginationClassName: 'hidden',
-            }}
-            emptyContent={
-              <div
-                className={cn(
-                  'w-full h-16 flex flex-col justify-center items-center gap-2'
-                )}
-              >
-                <span className='text-gray-500'>Belum ada data penjualan</span>
-              </div>
-            }
+            onDelete={handleDeleteProduct}
+            onBulkDelete={handleBulkDeleteProduct}
+            onAddProductClick={handleAddProductClick}
          />
-          <div className='flex flex-row gap-3 mt-3'>
-            <Button
-              type='button'
-              variant='outline'
-              className='justify-start w-fit py-1 text-sm'
-              onClick={handleAddProduct}
-            >
-              <Icon icon='mdi:plus' width={16} height={16} />
-              Tambah Produk
-            </Button>
-            {selectedRowIds.length > 0 && (
-              <Button
-                type='button'
-                variant='outline'
-                color='error'
-                className='justify-start w-fit py-1 text-sm'
-                onClick={handleBulkDeleteProduct}
-              >
-                <Icon icon='mdi:trash' width={16} height={16} />
-                Hapus
-                {selectedRowIds.length > 0
-                  ? ` (${selectedRowIds.length})`
-                  : ''}{' '}
-                Produk
-              </Button>
-            )}
-          </div>
        </Card>
        <div className='grid grid-cols-2 gap-3'>
          <TextArea
@@ -532,10 +389,9 @@ const SalesForm = ({
            </Button>
          </div>
          <div>
-            <MarketingProductForm
+            <SalesOrderProductForm
              onSubmitForm={handleAddSubmitProduct}
              modalRef={addProductModal.ref}
-              data={rawMarketingProducts}
              initialValues={selectedMarketingProduct ?? undefined}
            />
          </div>
@@ -1,7 +1,6 @@
 import * as Yup from 'yup';

-type MarketingProductSchemaType = {
-  vehicle_number: string | undefined;
+type SalesOrderProductSchemaType = {
  kandang_id?: number;
  kandang?: {
    value: number;
@@ -19,11 +18,8 @@ type MarketingProductSchemaType = {
  total_price: string | number | undefined;
 };

-type SalesOrderProductSchemaType = MarketingProductSchemaType;
-
-const MarketingProductSchema: Yup.ObjectSchema<MarketingProductSchemaType> =
+export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaType> =
  Yup.object({
-    vehicle_number: Yup.string().required('No. Polisi wajib diisi!'),
    kandang: Yup.object({
      value: Yup.number().min(1).required(),
      label: Yup.string().required(),
@@ -48,16 +44,13 @@ const MarketingProductSchema: Yup.ObjectSchema<MarketingProductSchemaType> =
      .min(1, 'Kuantitas wajib diisi!')
      .required('Kuantitas wajib diisi!'),
    avg_weight: Yup.number()
-      .min(1, 'Avg. Bobot wajib diisi!')
+      .min(0, 'Avg. Bobot wajib diisi!')
      .required('Avg. Bobot wajib diisi!'),
    total_price: Yup.number()
      .min(1, 'Total Penjualan wajib diisi!')
      .required('Total Penjualan wajib diisi!'),
  });

-export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaType> =
-  MarketingProductSchema;
-
 export type SalesOrderProductFormValues = Yup.InferType<
  typeof SalesOrderProductSchema
 >;
@@ -1,14 +1,10 @@
 'use client';

-import {
-  CreateSalesOrderProductPayload,
-  MarketingProduct,
-} from '@/types/api/marketing/marketing';
 import { useFormik } from 'formik';
 import {
  SalesOrderProductFormValues,
  SalesOrderProductSchema,
-} from './MarketingProduct.schema';
+} from './SalesOrderProduct.schema';
 import { RefObject, useEffect, useState } from 'react';
 import SelectInput, {
  OptionType,
@@ -21,22 +17,15 @@ 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 = ({
+const SalesOrderProductForm = ({
  initialValues,
-  data,
  modalRef,
  onSubmitForm,
 }: {
-  initialValues?: MarketingProduct;
-  data: MarketingProduct[];
+  initialValues?: SalesOrderProductFormValues;
  modalRef?: RefObject<HTMLDialogElement | null>;
-  onSubmitForm?: (
-    tableValues: CreateSalesOrderProductPayload,
-    fieldValues: SalesOrderProductFormValues
-  ) => Promise<void>;
+  onSubmitForm?: (value: SalesOrderProductFormValues) => Promise<void>;
 }) => {
  // State
  const [selectedOptionsKandang, setSelectedOptionsKandang] =
@@ -97,19 +86,10 @@ const MarketingProductForm = ({
  const formik = useFormik<SalesOrderProductFormValues>({
    enableReinitialize: true,
    initialValues: {
-      vehicle_number:
-        initialValues?.delivery_product?.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,
+      kandang_id: initialValues?.kandang_id || undefined,
+      kandang: initialValues?.kandang || undefined,
+      product_warehouse: initialValues?.product_warehouse || undefined,
+      product_warehouse_id: initialValues?.product_warehouse_id || undefined,
      unit_price: initialValues?.unit_price || undefined,
      total_weight: initialValues?.total_weight || undefined,
      qty: initialValues?.qty || undefined,
@@ -130,21 +110,7 @@ const MarketingProductForm = ({
          (item: Kandang) => item.id === values.kandang_id
        );

-        const marketingProduct: CreateSalesOrderProductPayload = {
-          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,
-          avg_weight: values.avg_weight as number,
-          total_price: values.total_price as number,
-        };
-
-        onSubmitForm?.(marketingProduct, values);
+        onSubmitForm?.(values);
        handleResetForm();
      }
    },
@@ -161,7 +127,6 @@ const MarketingProductForm = ({
    setFormErrorMessage('');
    formik.resetForm({
      values: {
-        vehicle_number: '',
        kandang_id: undefined,
        kandang: null,
        product_warehouse: null,
@@ -216,7 +181,7 @@ const MarketingProductForm = ({
        onReset={handleResetForm}
      >
        <div className='grid grid-cols-2 gap-4 z-200'>
-          <PatternInput
+          {/* <PatternInput
            name='vehicle_number'
            label='No. Polisi'
            format='AA #### AAA'
@@ -233,7 +198,7 @@ const MarketingProductForm = ({
              Boolean(formik.errors.vehicle_number)
            }
            errorMessage={formik.errors.vehicle_number}
-          />
+          /> */}
          <SelectInput
            required
            label='Kandang'
@@ -347,4 +312,4 @@ const MarketingProductForm = ({
  );
 };

-export default MarketingProductForm;
+export default SalesOrderProductForm;
@@ -0,0 +1,200 @@
+'use client';
+
+import Button from '@/components/Button';
+import Table from '@/components/Table';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import { cn, formatCurrency, formatNumber } from '@/lib/helper';
+import { Icon } from '@iconify/react';
+import { useMemo, useState } from 'react';
+import * as TanStack from '@tanstack/react-table';
+import CheckboxInput from '@/components/input/CheckboxInput';
+
+// Hapus import Modal, useModal, dan MarketingProductForm
+
+// Tentukan Tipe Props baru yang diterima dari SalesForm
+type SalesOrderProductTableProps = {
+  data: SalesOrderProductFormValues[];
+  onDelete: (product_warehouse_id: number, kandang_id: number) => void;
+  onBulkDelete: (selectedIds: number[]) => void;
+  onAddProductClick: () => void; // Prop baru untuk memanggil modal di parent
+};
+
+const SalesOrderProductTable = ({
+  data,
+  onDelete,
+  onBulkDelete,
+  onAddProductClick,
+}: SalesOrderProductTableProps) => {
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const handleBulkDeleteClick = () => {
+    onBulkDelete(selectedRowIds);
+    setRowSelection({});
+  };
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: ({
+          table,
+        }: {
+          table: TanStack.Table<SalesOrderProductFormValues>;
+        }) => (
+          <div className='w-full flex flex-row justify-center'>
+            <CheckboxInput
+              name='allRow'
+              checked={table.getIsAllRowsSelected()}
+              indeterminate={table.getIsSomeRowsSelected()}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          </div>
+        ),
+        cell: ({ row }: { row: TanStack.Row<SalesOrderProductFormValues> }) => (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+              value={`${row.original.product_warehouse_id}${row.original.kandang_id}`}
+            />
+          </div>
+        ),
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) => row.kandang?.label,
+        header: 'Kandang',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          row.product_warehouse?.label,
+        header: 'Produk',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatCurrency(parseFloat(row.unit_price as string)),
+        header: 'Harga Satuan (Rp)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.total_weight as string)),
+        header: 'Total Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.qty as string)),
+        header: 'Kuantitas',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatNumber(parseFloat(row.avg_weight as string)),
+        header: 'Avg. Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: SalesOrderProductFormValues) =>
+          formatCurrency(parseFloat(row.total_price as string)),
+        header: 'Total Penjualan (Rp)',
+      },
+      {
+        header: 'Aksi',
+        cell: (
+          props: TanStack.CellContext<SalesOrderProductFormValues, unknown>
+        ) => (
+          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <Button
+              color='error'
+              className='p-1'
+              disabled={
+                !props.row.original.product_warehouse_id ||
+                !props.row.original.kandang_id
+              }
+              onClick={() => {
+                // PANGGIL CALLBACK PARENT (onDelete)
+                if (
+                  props.row.original.product_warehouse_id &&
+                  props.row.original.kandang_id
+                ) {
+                  onDelete(
+                    props.row.original.product_warehouse_id,
+                    props.row.original.kandang_id
+                  );
+                }
+              }}
+            >
+              <Icon icon='mdi:trash' width={16} height={16} />
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [onDelete]
+  );
+
+  return (
+    <>
+      <Table<SalesOrderProductFormValues>
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+        data={data}
+        columns={columns}
+        className={{
+          tableWrapperClassName: 'overflow-x-auto min-h-full!',
+          tableClassName: 'font-inter w-full table-auto min-h-full!',
+          headerRowClassName: 'border-b border-b-gray-200',
+          headerColumnClassName:
+            'px-2 py-2 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+          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={onAddProductClick}
+        >
+          <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={handleBulkDeleteClick}
+          >
+            <Icon icon='mdi:trash' width={16} height={16} />
+            Hapus
+            {selectedRowIds.length > 0
+              ? ` (${selectedRowIds.length})`
+              : ''}{' '}
+            Produk
+          </Button>
+        )}
+      </div>
+
+      {/* Modal dan Form dihapus dari sini */}
+    </>
+  );
+};
+
+export default SalesOrderProductTable;