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

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

@@ -1,4 +1,4 @@
-import SalesForm from '@/components/pages/marketing/sales-orders/form/SalesForm';
+import SalesForm from '@/components/pages/marketing/form/MarketingForm';
 
 const AddSalesOrder = () => {
   return (

src/app/marketing/sales-orders/detail/edit/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import SalesForm from '@/components/pages/marketing/sales-orders/form/SalesForm';
+import SalesForm from '@/components/pages/marketing/form/MarketingForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { MarketingApi } from '@/services/api/marketing/marketing';
 import { useRouter, useSearchParams } from 'next/navigation';

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

@@ -1,6 +1,6 @@
 'use client';
 
-import SalesOrderDetail from '@/components/pages/marketing/sales-orders/detail/SalesOrderDetail';
+import SalesOrderDetail from '@/components/pages/marketing/detail/MarketingDetail';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { MarketingApi } from '@/services/api/marketing/marketing';
 import { useRouter, useSearchParams } from 'next/navigation';

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

@@ -1,4 +1,4 @@
-import SalesOrderTable from '@/components/pages/marketing/sales-orders/SalesOrderTable';
+import SalesOrderTable from '@/components/pages/marketing/MarketingTable';
 
 const SalesOrder = () => {
   return (

src/components/pages/marketing/MarketingTable.tsx

@@ -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 {
+import { cn, formatCurrency, formatDate } from '@/lib/helper';
-  cn,
-  formatCurrency,
-  formatDate,
-  formatVechicleNumber,
-} 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 { BaseSalesOrder, Marketing } from '@/types/api/marketing/marketing';
-import { Customer } from '@/types/api/master-data/customer';
 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?.sales_order?.length) {
-                  if (props?.row?.original?.marketing_products?.length > 1) {
+                  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}{' '}
+                        Lihat {props?.row?.original?.sales_order?.length} Produk
-                        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={[

src/components/pages/marketing/detail/MarketingDetail.tsx

@@ -10,15 +10,9 @@ import ApprovalSteps, {
 } from '@/components/pages/ApprovalSteps';
 import Table from '@/components/Table';
 import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
-import {
+import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
-  cn,
-  formatCurrency,
-  formatDate,
-  formatNumber,
-  formatVechicleNumber,
-} 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>
+            <Table<BaseSalesOrder>
-              data={initialValues?.marketing_products}
+              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?.sales_order &&
-                    initialValues?.marketing_products?.length === 0,
+                    initialValues?.sales_order?.length === 0,
                 }),
                 tableWrapperClassName: 'overflow-x-auto min-h-full!',
                 tableClassName: 'font-inter w-full table-auto min-h-full!',

src/components/pages/marketing/form/MarketingForm.schema.ts

@@ -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!'),

src/components/pages/marketing/form/MarketingForm.tsx

@@ -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 { formatCurrency, formatDate } from '@/lib/helper';
-import Table from '@/components/Table'; // Keep this import
-import { cn, formatCurrency, formatDate, formatNumber } 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[]
+    SalesOrderProductFormValues[]
-  >(initialValues?.marketing_products || []);
+  >(
+    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(() => {
+  const handleDeleteProduct = useCallback(
-    addProductModal.openModal();
+    (product_warehouse_id: number, kandang_id: number) => {
-  }, [addProductModal]);
+      setRawMarketingProducts((prev) =>
-  const handleDeleteProduct = useCallback((id: number) => {
+        prev.filter(
-    setRawMarketingProducts((prev) => prev.filter((p) => p.id !== id));
+          (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 (
+    async (values: SalesOrderProductFormValues) => {
-      tableValue: CreateSalesOrderProductPayload,
+      setRawMarketingProducts((prev) => [...prev, values]);
-      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]);
       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:
+      sales_order:
-        initialValues?.marketing_products?.map((product) =>
+        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(
+    formik.setFieldValue('marketing_products', rawMarketingProducts, false);
-      'marketing_products',
-      newMarketingProductValues,
-      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>
+          <SalesOrderProductTable
-            rowSelection={rowSelection}
-            setRowSelection={setRowSelection}
             data={rawMarketingProducts}
-            columns={columns}
+            onDelete={handleDeleteProduct}
-            className={{
+            onBulkDelete={handleBulkDeleteProduct}
-              tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            onAddProductClick={handleAddProductClick}
-              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>
         </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>

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts

@@ -1,7 +1,6 @@
 import * as Yup from 'yup';
 
-type MarketingProductSchemaType = {
+type SalesOrderProductSchemaType = {
-  vehicle_number: string | undefined;
   kandang_id?: number;
   kandang?: {
     value: number;
@@ -19,11 +18,8 @@ type MarketingProductSchemaType = {
   total_price: string | number | undefined;
 };
 
-type SalesOrderProductSchemaType = MarketingProductSchemaType;
+export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaType> =
-
-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(),
@@ -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
 >;

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx

@@ -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;
+  initialValues?: SalesOrderProductFormValues;
-  data: MarketingProduct[];
   modalRef?: RefObject<HTMLDialogElement | null>;
-  onSubmitForm?: (
+  onSubmitForm?: (value: SalesOrderProductFormValues) => Promise<void>;
-    tableValues: CreateSalesOrderProductPayload,
-    fieldValues: SalesOrderProductFormValues
-  ) => Promise<void>;
 }) => {
   // State
   const [selectedOptionsKandang, setSelectedOptionsKandang] =
@@ -97,19 +86,10 @@ const MarketingProductForm = ({
   const formik = useFormik<SalesOrderProductFormValues>({
     enableReinitialize: true,
     initialValues: {
-      vehicle_number:
+      kandang_id: initialValues?.kandang_id || undefined,
-        initialValues?.delivery_product?.vehicle_number || undefined,
+      kandang: initialValues?.kandang || undefined,
-      kandang_id: initialValues?.product_warehouse.warehouse.id || undefined,
+      product_warehouse: initialValues?.product_warehouse || undefined,
-      kandang: {
+      product_warehouse_id: initialValues?.product_warehouse_id || undefined,
-        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,
@@ -130,21 +110,7 @@ const MarketingProductForm = ({
           (item: Kandang) => item.id === values.kandang_id
         );
 
-        const marketingProduct: CreateSalesOrderProductPayload = {
+        onSubmitForm?.(values);
-          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);
         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;

src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx

@@ -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;

src/dummy/marketing.dummy.ts

@@ -4,12 +4,34 @@ import { Location } from '@/types/api/master-data/location';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
-import { Marketing } from '@/types/api/marketing/marketing';
+import {
-import { CreatedUser } from '@/types/api/api-general';
+  BaseMarketing,
+  Marketing,
+  BaseSalesOrder,
+  BaseDeliveryOrder,
+  BaseDelivery,
+} from '@/types/api/marketing/marketing';
+import {
+  CreatedUser,
+  BaseApproval,
+  BaseMetadata,
+} from '@/types/api/api-general';
 import { Product } from '@/types/api/master-data/product';
+import { Customer } from '@/types/api/master-data/customer';
+import { Uom } from '@/types/api/master-data/uom';
+import { ProductCategory } from '@/types/api/master-data/product-category';
+import { Supplier } from '@/types/api/master-data/supplier';
+
+// Waktu saat ini untuk created_at/updated_at
+const now = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
+const today = format(new Date(), 'yyyy-MM-dd');
+const tomorrow = format(
+  new Date().setDate(new Date().getDate() + 1),
+  'yyyy-MM-dd'
+);
 
 // ======================
-// 👤 Created User
+// 👤 Created User & Helper Data
 // ======================
 export const createdUser: CreatedUser = {
   id: 1,
@@ -18,6 +40,24 @@ export const createdUser: CreatedUser = {
   name: 'Admin Utama',
 };
 
+const dummyProductBase: Product = {
+  id: 101,
+  name: 'Pakan Ayam Premium',
+  brand: 'Brand Hebat',
+  sku: 'PAK-001',
+  product_price: 15000,
+  selling_price: 18000,
+  tax: 0.1,
+  expiry_period: 365,
+  uom: { id: 1, name: 'Sak' } as Uom,
+  product_category: { id: 1, name: 'Pakan' } as ProductCategory,
+  suppliers: [{ id: 1, name: 'Supplier A' } as Supplier],
+  flags: ['PAKAN'],
+  created_user: createdUser,
+  created_at: now,
+  updated_at: now,
+};
+
 // ======================
 // 📍 Area Dummy
 // ======================
@@ -26,15 +66,15 @@ export const dummyAreas: Area[] = [
     id: 1,
     name: 'Bandung Barat',
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
   },
   {
     id: 2,
     name: 'Cimahi Utara',
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
   },
 ];
 
@@ -48,8 +88,8 @@ export const dummyLocations: Location[] = [
     address: 'Jl. Sukajadi No. 12',
     area: dummyAreas[0],
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
   },
   {
     id: 2,
@@ -57,8 +97,8 @@ export const dummyLocations: Location[] = [
     address: 'Jl. Setiabudi No. 45',
     area: dummyAreas[1],
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
   },
 ];
 
@@ -74,8 +114,8 @@ export const dummyKandangs: Kandang[] = [
     location: dummyLocations[0],
     pic: createdUser,
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
   },
   {
     id: 2,
@@ -85,8 +125,8 @@ export const dummyKandangs: Kandang[] = [
     location: dummyLocations[1],
     pic: createdUser,
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
   },
 ];
 
@@ -100,9 +140,9 @@ export const dummyWarehouses: Warehouse[] = [
     name: 'Gudang Wilayah Bandung Barat',
     area: dummyAreas[0],
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
-  },
+  } as Warehouse,
   {
     id: 2,
     type: 'LOKASI',
@@ -110,9 +150,9 @@ export const dummyWarehouses: Warehouse[] = [
     area: dummyAreas[0],
     location: { ...dummyLocations[0], area: dummyAreas[0] },
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
-  },
+  } as Warehouse,
   {
     id: 3,
     type: 'KANDANG',
@@ -125,9 +165,9 @@ export const dummyWarehouses: Warehouse[] = [
       pic: createdUser,
     },
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
-  },
+  } as Warehouse,
 ];
 
 // ======================
@@ -139,16 +179,11 @@ export const dummyProductWarehouses: ProductWarehouse[] = [
     product_id: 101,
     warehouse_id: 1,
     quantity: 1000,
-    product: {
+    product: dummyProductBase,
-      id: 101,
-      name: 'Pakan Ayam Premium',
-      sku: 'PAK-001',
-      category: 'PAKAN',
-    } as unknown as Product,
     warehouse: dummyWarehouses[0],
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
   },
   {
     id: 2,
@@ -156,28 +191,92 @@ export const dummyProductWarehouses: ProductWarehouse[] = [
     warehouse_id: 2,
     quantity: 500,
     product: {
+      ...dummyProductBase,
       id: 102,
       name: 'Vitamin Ayam Super',
       sku: 'VIT-002',
-      category: 'VITAMIN',
+      flags: ['VITAMIN'],
-    } as unknown as Product,
+      selling_price: 25000,
+    },
     warehouse: dummyWarehouses[1],
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
   },
 ];
 
 // ======================
 // 💼 Marketing Dummy
 // ======================
-export const dummyMarketings: Marketing[] = [
+
-  // Step 1: Pengajuan Order
+// Helper untuk Sales Order (SO) Item
+const soItem1: BaseSalesOrder = {
+  id: 101,
+  marketing_id: 1,
+  product_warehouse_id: 1,
+  qty: 100,
+  unit_price: 18000, // Harga jual
+  avg_weight: 1.0,
+  total_weight: 100 * 1.0,
+  total_price: 100 * 18000,
+  product_warehouse: dummyProductWarehouses[0] as ProductWarehouse,
+};
+const soItem2: BaseSalesOrder = {
+  id: 102,
+  marketing_id: 2,
+  product_warehouse_id: 2,
+  qty: 50,
+  unit_price: 25000,
+  avg_weight: 0.5,
+  total_weight: 50 * 0.5,
+  total_price: 50 * 25000,
+  product_warehouse: dummyProductWarehouses[1] as ProductWarehouse,
+};
+
+// Helper untuk Delivery Item (DO) Detail
+const doDelivery1: BaseDelivery[] = [
+  {
+    product_warehouse: dummyProductWarehouses[0] as ProductWarehouse,
+    qty: soItem1.qty,
+    unit_price: soItem1.unit_price,
+    total_weight: soItem1.total_weight,
+    avg_weight: soItem1.avg_weight,
+    total_price: soItem1.total_price,
+    vehicle_number: 'B 1234 ABC',
+  },
+];
+
+const doDelivery2: BaseDelivery[] = [
+  {
+    product_warehouse: dummyProductWarehouses[1] as ProductWarehouse,
+    qty: soItem2.qty,
+    unit_price: soItem2.unit_price,
+    total_weight: soItem2.total_weight,
+    avg_weight: soItem2.avg_weight,
+    total_price: soItem2.total_price,
+    vehicle_number: 'D 5678 EFG',
+  },
+];
+
+// Helper untuk Delivery Order (DO) Header
+const deliveryOrder1: BaseDeliveryOrder[] = [
   {
     id: 1,
-    status: 'APPROVED',
+    marketing_id: 3,
+    do_number: 'DO-003-2025',
+    delivery_date: tomorrow,
+    warehouse: dummyWarehouses[0],
+    deliveries: doDelivery1,
+  },
+];
+
+export const dummyMarketings: Marketing[] = [
+  // 1. Pengajuan Order (Langkah Pertama/Awal)
+  {
+    id: 1,
+    status: 'DRAFT',
     name: 'SO-001-2025',
-    so_date: format(new Date(), 'yyyy-MM-dd'),
+    so_date: today,
     customer: {
       id: 1,
       name: 'PT Maju Jaya',
@@ -189,50 +288,31 @@ export const dummyMarketings: Marketing[] = [
       email: 'contact@majujaya.com',
       account_number: '1234567890',
       created_user: createdUser,
-      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      created_at: now,
-      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: now,
-    },
+    } as Customer,
-    sales_person_id: createdUser.id,
+    sales_person: createdUser,
-    notes: 'Pengiriman awal bulan.',
+    notes: 'Pengajuan Order Awal, menunggu persetujuan harga.',
-    approval: {
+    latest_approval: {
       step_number: 1,
       step_name: 'Pengajuan Order',
-      action: 'APPROVED',
+      action: 'CREATED',
       action_by: createdUser,
-      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      action_at: now,
-    },
+    } as BaseApproval,
-    marketing_products: [
+    sales_order: [soItem1],
-      {
+    delivery_order: [],
-        id: 1,
-        qty: 100,
-        unit_price: 75000,
-        avg_weight: 2.5,
-        total_weight: 250,
-        total_price: 7500000,
-        product_warehouse: dummyProductWarehouses[0],
-        delivery_product: {
-          id: 1,
-          qty: 100,
-          unit_price: 75000,
-          avg_weight: 2.5,
-          total_weight: 250,
-          total_price: 7500000,
-          delivery_date: format(new Date(), 'yyyy-MM-dd'),
-          vehicle_number: 'B 1234 XY',
-        },
-      },
-    ],
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
-  },
+  } as Marketing,
 
-  // Step 2: Sales Order
+  // 2. Sales Order (Disetujui dan Siap DO)
   {
     id: 2,
     status: 'APPROVED',
     name: 'SO-002-2025',
-    so_date: format(new Date(), 'yyyy-MM-dd'),
+    so_date: today,
     customer: {
       id: 2,
       name: 'CV Sumber Sehat',
@@ -244,50 +324,32 @@ export const dummyMarketings: Marketing[] = [
       email: 'info@sumbersehat.com',
       account_number: '9876543210',
       created_user: createdUser,
-      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      created_at: now,
-      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: now,
-    },
+    } as Customer,
-    sales_person_id: createdUser.id,
+    sales_person: createdUser,
-    notes: 'Pesanan kedua untuk stok akhir tahun.',
+    notes: 'Sales Order telah disetujui oleh Supervisor.',
-    approval: {
+    latest_approval: {
+      id: 2,
       step_number: 2,
       step_name: 'Sales Order',
       action: 'APPROVED',
       action_by: createdUser,
-      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      action_at: now,
-    },
+    } as BaseApproval,
-    marketing_products: [
+    sales_order: [soItem2],
-      {
+    delivery_order: [], // Belum ada pengiriman (DO) yang dibuat
-        id: 2,
-        qty: 50,
-        unit_price: 75000,
-        avg_weight: 2.5,
-        total_weight: 125,
-        total_price: 3750000,
-        product_warehouse: dummyProductWarehouses[1],
-        delivery_product: {
-          id: 2,
-          qty: 50,
-          unit_price: 75000,
-          avg_weight: 2.5,
-          total_weight: 125,
-          total_price: 3750000,
-          delivery_date: format(new Date(), 'yyyy-MM-dd'),
-          vehicle_number: 'B 5678 YZ',
-        },
-      },
-    ],
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
-  },
+  } as Marketing,
 
-  // Step 3: Delivery Order
+  // 3. Delivery Order (Proses Pengiriman telah dibuat)
   {
     id: 3,
-    status: 'APPROVED',
+    status: 'DELIVERED', // Asumsi status DELIVERED berarti DO sudah selesai/terbuat
     name: 'SO-003-2025',
-    so_date: format(new Date(), 'yyyy-MM-dd'),
+    so_date: today,
     customer: {
       id: 3,
       name: 'UD Ternak Sejahtera',
@@ -299,60 +361,23 @@ export const dummyMarketings: Marketing[] = [
       email: 'halo@ternaksejahtera.com',
       account_number: '1122334455',
       created_user: createdUser,
-      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      created_at: now,
-      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: now,
-    },
+    } as Customer,
-    sales_person_id: createdUser.id,
+    sales_person: createdUser,
-    notes: 'Order untuk pengiriman ke luar kota.',
+    notes: 'Pengiriman barang telah berhasil dilakukan.',
-    approval: {
+    latest_approval: {
+      id: 3,
       step_number: 3,
       step_name: 'Delivery Order',
-      action: 'APPROVED',
+      action: 'COMPLETED',
       action_by: createdUser,
-      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      action_at: now,
-    },
+    } as BaseApproval,
-    marketing_products: [
+    sales_order: [soItem1, soItem2],
-      {
+    delivery_order: deliveryOrder1, // DO sudah terbuat
-        id: 3,
-        qty: 80,
-        unit_price: 70000,
-        avg_weight: 2.4,
-        total_weight: 192,
-        total_price: 5600000,
-        product_warehouse: dummyProductWarehouses[0],
-        delivery_product: {
-          id: 3,
-          qty: 80,
-          unit_price: 70000,
-          avg_weight: 2.4,
-          total_weight: 192,
-          total_price: 5600000,
-          delivery_date: format(new Date(), 'yyyy-MM-dd'),
-          vehicle_number: 'D 9090 ZZ',
-        },
-      },
-      {
-        id: 4,
-        qty: 80,
-        unit_price: 70000,
-        avg_weight: 2.4,
-        total_weight: 192,
-        total_price: 5600000,
-        product_warehouse: dummyProductWarehouses[0],
-        delivery_product: {
-          id: 3,
-          qty: 80,
-          unit_price: 70000,
-          avg_weight: 2.4,
-          total_weight: 192,
-          total_price: 5600000,
-          delivery_date: format(new Date(), 'yyyy-MM-dd'),
-          vehicle_number: 'D 9090 ZZ',
-        },
-      },
-    ],
     created_user: createdUser,
-    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    created_at: now,
-    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: now,
-  },
+  } as Marketing,
 ];

src/services/api/marketing/marketing.ts

@@ -9,6 +9,17 @@ import {
   UpdateSalesOrderPayload,
 } from '@/types/api/marketing/marketing';
 
+/**
+ * 💡 Helper untuk membuat respons dummy
+ * @param data Data yang akan dimasukkan ke dalam body respons
+ */
+const createDummyResponse = <T>(data: T): BaseApiResponse<T> => ({
+  code: 200,
+  status: 'success',
+  message: 'Data retrieved successfully (MOCK)',
+  data: data,
+});
+
 export class MarketingService extends BaseApiService<
   Marketing,
   CreateSalesOrderPayload,
@@ -18,6 +29,41 @@ export class MarketingService extends BaseApiService<
     super(basePath);
   }
 
+  /**
+   * Override: Mengambil semua data Marketing dari dummyMarketings
+   */
+  async getAllFetcher(endpoint: string): Promise<BaseApiResponse<Marketing[]>> {
+    // Simulasi delay jaringan
+    await sleep(500);
+
+    // Filter data marketing yang valid (jika menggunakan BaseMarketing[])
+    const data = dummyMarketings as Marketing[];
+
+    return createDummyResponse<Marketing[]>(data);
+  }
+
+  /**
+   * Override: Mengambil satu data Marketing berdasarkan ID dari dummyMarketings
+   */
+  async getSingle(id: number): Promise<BaseApiResponse<Marketing> | undefined> {
+    // Simulasi delay jaringan
+    await sleep(300);
+
+    const foundData = dummyMarketings.find((m) => m.id == id);
+
+    if (foundData) {
+      // Data ditemukan, kembalikan respons sukses
+      return createDummyResponse<Marketing>(foundData as Marketing);
+    } else {
+      // Data tidak ditemukan, simulasi respons error
+      return {
+        code: 404,
+        status: 'error',
+        message: 'Marketing data not found (MOCK)',
+      };
+    }
+  }
+
   /**
    * Approve single marketing data
    */

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

@@ -6,6 +6,8 @@ import {
 } from '@/types/api/api-general';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 import { Kandang } from '@/types/api/master-data/kandang';
+import { id } from 'react-day-picker/locale';
+import { Warehouse } from '../master-data/warehouse';
 
 /**
  * Base Data Response
@@ -16,10 +18,42 @@ export type BaseMarketing = {
   name: string;
   customer: Customer;
   so_date: string;
-  sales_person_id: number;
+  sales_person: CreatedUser;
   notes: string;
-  approval: BaseApproval;
+  latest_approval: BaseApproval;
-  marketing_products?: MarketingProduct[];
+  sales_order: BaseSalesOrder[];
+  delivery_order: BaseDeliveryOrder[];
+};
+
+export type BaseSalesOrder = {
+  id: number;
+  marketing_id: number;
+  product_warehouse_id: number;
+  qty: number;
+  unit_price: number;
+  avg_weight: number;
+  total_weight: number;
+  total_price: number;
+  product_warehouse: ProductWarehouse;
+};
+
+export type BaseDeliveryOrder = {
+  id: number;
+  marketing_id: number;
+  do_number: string;
+  delivery_date: string;
+  warehouse: Warehouse;
+  deliveries: BaseDelivery[];
+};
+
+export type BaseDelivery = {
+  product_warehouse: ProductWarehouse;
+  qty: number;
+  unit_price: number;
+  total_weight: number;
+  avg_weight: number;
+  total_price: number;
+  vehicle_number: string;
 };
 
 export type MarketingProduct = {