feat(FE-166-167-168): slicing ui create, edit dan detail sales order

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

@@ -1,7 +1,41 @@
+'use client';
+
+import SalesForm from '@/components/pages/marketing/sales-orders/form/SalesForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
 const EditSalesOrder = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const soId = searchParams.get('salesOrderId');
+
+  const { data: marketing, isLoading: isLoading } = useSWR(soId, (id: number) =>
+    MarketingApi.getSingle(id)
+  );
+
+  if (!soId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!marketing || isResponseError(marketing))) {
+    router.replace('/404');
+    return;
+  }
   return (
-    <div>
-      <p>Edit Sales Order</p>
+    <div className='w-full p-4'>
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
+      {!isLoading && isResponseSuccess(marketing) && (
+        <SalesForm formType='edit' initialValues={marketing.data} />
+      )}
     </div>
   );
 };

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

@@ -1,7 +1,42 @@
+'use client';
+
+import SalesOrderDetail from '@/components/pages/marketing/sales-orders/detail/SalesOrderDetail';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
 const DetailSalesOrder = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const soId = searchParams.get('salesOrderId');
+
+  const { data: marketing, isLoading: isLoading } = useSWR(soId, (id: number) =>
+    MarketingApi.getSingle(id)
+  );
+
+  if (!soId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!marketing || isResponseError(marketing))) {
+    router.replace('/404');
+    return;
+  }
+
   return (
-    <div>
-      <p>Detail Sales Order</p>
+    <div className='w-full p-4'>
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
+      {!isLoading && isResponseSuccess(marketing) && (
+        <SalesOrderDetail initialValues={marketing.data} />
+      )}
     </div>
   );
 };

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

@@ -11,13 +11,16 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } 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 { Icon } from '@iconify/react';
 import { CellContext } from '@tanstack/react-table';
 import { useCallback, useState } from 'react';
+import useSWR from 'swr';
 
 const RowsOptionsMenu = ({
   type = 'dropdown',
@@ -85,6 +88,12 @@ const SalesOrderTable = () => {
     (id) => rowSelection[id]
   );
 
+  const {
+    data: marketing,
+    isLoading: isLoadingMarketing,
+    mutate: refreshMarketing,
+  } = useSWR(MarketingApi.basePath, MarketingApi.getAllFetcher);
+
   const deleteModal = useModal();
   const confirmationModal = useModal();
 
@@ -171,59 +180,7 @@ const SalesOrderTable = () => {
         <Table
           rowSelection={rowSelection}
           setRowSelection={setRowSelection}
-          data={[
-            {
-              id: 1,
-              so_number: 'SO-001',
-              so_date: '2024-01-01',
-              so_docs: 'Dokumen SO 1.pdf',
-              customer: {
-                id: 1,
-                name: 'Customer A',
-              } as Customer,
-              sales_person: {
-                id: 1,
-                name: 'Sales Person A',
-              },
-              notes: 'Catatan untuk SO 1',
-              grand_total: 1000000,
-              approval: {
-                step_name: 'Approved',
-              },
-              marketing_products: [
-                {
-                  id: 1,
-                  qty: 10,
-                  unit_price: 100000,
-                  avg_weight: 1.5,
-                  total_weight: 15,
-                  total_price: 1000000,
-                  product_warehouse: {
-                    id: 1,
-                    product: {
-                      id: 1,
-                      name: 'Product A',
-                    },
-                  },
-                } as MarketingProduct,
-                {
-                  id: 2,
-                  qty: 5,
-                  unit_price: 200000,
-                  avg_weight: 2.0,
-                  total_weight: 10,
-                  total_price: 1000000,
-                  product_warehouse: {
-                    id: 2,
-                    product: {
-                      id: 2,
-                      name: 'Product B',
-                    },
-                  },
-                } as MarketingProduct,
-              ],
-            } as Marketing,
-          ]}
+          data={isResponseSuccess(marketing) ? marketing.data : []}
           columns={[
             {
               id: 'select',

src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import {
+  cn,
+  formatCurrency,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const SalesOrderDetail = ({
+  initialValues,
+  refreshValues,
+}: {
+  initialValues?: Marketing;
+  refreshValues?: () => void;
+}) => {
+  const [approvalAction, setApprovalAction] = useState<'approve' | 'reject'>(
+    'approve'
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+
+  const approveClickHandler = () => {
+    setApprovalAction('approve');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApprovalAction('reject');
+    confirmationModal.openModal();
+  };
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsLoading(true);
+    // await MarketingApi.delete(initialValues?.id as number);
+    setIsLoading(false);
+    deleteModal.closeModal();
+    toast.success('Successfully deleted Sales Order!');
+    refreshValues?.();
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsLoading(true);
+    await MarketingApi.singleApproval(
+      initialValues?.id as number,
+      approvalAction
+    );
+    setIsLoading(false);
+    confirmationModal.closeModal();
+    toast.success('Successfully approved Sales Order!');
+    refreshValues?.();
+  };
+
+  return (
+    <>
+      <div className='flex flex-col w-full gap-4'>
+        <FormHeader
+          title='Detail Sales Order'
+          backUrl='/marketing/sales-orders'
+        />
+        <div className='flex-row flex gap-3'>
+          <Button color='success' onClick={approveClickHandler}>
+            <Icon icon='mdi:check' width={24} height={24} />
+            Approve
+          </Button>
+          <Button color='error' onClick={rejectClickHandler}>
+            <Icon icon='mdi:close' width={24} height={24} />
+            Reject
+          </Button>
+        </div>
+        <Card
+          title='Informasi Sales Order'
+          className={{
+            wrapper: 'w-full bg-white',
+          }}
+        >
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td width='45%' className='font-semibold'>
+                    No. Sales Order
+                  </td>
+                  <td>:</td>
+                  <td width='50%'>{initialValues?.so_number}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Nama Pelanggan</td>
+                  <td>:</td>
+                  <td>{initialValues?.customer?.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Status</td>
+                  <td>:</td>
+                  <td>{initialValues?.status}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Tanggal Penjualan</td>
+                  <td>:</td>
+                  <td>{initialValues?.so_date}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Total Penjualan</td>
+                  <td>:</td>
+                  <td>
+                    {formatCurrency(initialValues?.grand_total as number)}
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Catatan</td>
+                  <td>:</td>
+                  <td>{initialValues?.notes ?? '-'}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </Card>
+        {initialValues?.marketing_products && (
+          <Card
+            title='Daftar Produk'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            <Table<MarketingProduct>
+              data={initialValues?.marketing_products}
+              columns={[
+                {
+                  header: 'No. Polisi',
+                  accessorFn(row) {
+                    return formatVechicleNumber(
+                      row.marketing_delivery_products?.vehicle_number as string
+                    );
+                  },
+                },
+                {
+                  header: 'Kandang',
+                  accessorFn(row) {
+                    return row.product_warehouse.warehouse.name;
+                  },
+                },
+                {
+                  header: 'Produk',
+                  accessorFn(row) {
+                    return row.product_warehouse.product.name;
+                  },
+                },
+                {
+                  header: 'Harga Satuan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.unit_price);
+                  },
+                },
+                {
+                  header: 'Total Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.total_weight);
+                  },
+                },
+                {
+                  header: 'Kuantitas',
+                  accessorFn(row) {
+                    return formatNumber(row.qty);
+                  },
+                },
+                {
+                  header: 'Avg. Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.avg_weight);
+                  },
+                },
+                {
+                  header: 'Total Penjualan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.total_price);
+                  },
+                },
+              ]}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    initialValues?.marketing_products &&
+                    initialValues?.marketing_products?.length === 0,
+                }),
+                tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                tableClassName: 'font-inter w-full table-auto min-h-full!',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+                bodyRowClassName: 'border-b border-b-gray-200',
+                bodyColumnClassName:
+                  'px-6 py-3 last:flex last:flex-row last:justify-end',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </Card>
+        )}
+        <div className='flex flex-row gap-3'>
+          <Button color='warning'>
+            <Icon icon='mdi:pencil' width={24} height={24} />
+            Edit
+          </Button>
+          <Button color='error' onClick={deleteClickHandler}>
+            <Icon icon='mdi:delete' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+        }}
+      />
+      <ConfirmationModal
+        ref={confirmationModal.ref}
+        type={approvalAction === 'approve' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction} data penjualan (${initialValues?.id})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction === 'approve' ? 'success' : 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default SalesOrderDetail;

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

@@ -7,6 +7,13 @@ import {
 
 type MarketingSchema = {
   customer_id: number | undefined;
+  customer:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
   so_date: string | undefined;
   notes: string | undefined;
   marketing_products: MarketingProductFormValues[];
@@ -14,6 +21,10 @@ type MarketingSchema = {
 
 export const MarketingSchema: Yup.ObjectSchema<MarketingSchema> = Yup.object({
   customer_id: Yup.number().required('Customer wajib diisi!'),
+  customer: Yup.object({
+    value: Yup.number().required(),
+    label: Yup.string().required(),
+  }).nullable(),
   so_date: Yup.string().required('Tanggal wajib diisi!'),
   notes: Yup.string().required('Catatan wajib diisi!'),
   marketing_products: Yup.array()

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

@@ -27,7 +27,7 @@ import { CustomerApi } from '@/services/api/master-data';
 import { useFormik } from 'formik';
 import { MarketingFormValues, MarketingSchema } from './SalesForm.schema';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { MarketingApi } from '@/services/api/marketing';
+import { MarketingApi } from '@/services/api/marketing/marketing';
 import { MarketingProductFormValues } from './repeater/MarketingProduct.schema';
 
 const SalesForm = ({
@@ -45,7 +45,9 @@ const SalesForm = ({
     MarketingProduct[]
   >(initialValues?.marketing_products || []);
   const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
-    null
+    initialValues?.customer
+      ? { value: initialValues.customer.id, label: initialValues.customer.name }
+      : null
   );
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const selectedRowIds = Object.keys(rowSelection).map((item) =>
@@ -71,56 +73,35 @@ const SalesForm = ({
     );
   };
   const handleAddSubmitProduct = async (
-    values: CreateMarketingProductPayload
+    tableValue: CreateMarketingProductPayload,
+    fieldValues: MarketingProductFormValues
   ) => {
     const newMarketingProduct: MarketingProduct = {
       id: marketingProducts.length + 1,
-      product_warehouse: values.product_warehouse!,
-      unit_price: values.unit_price as number,
-      total_weight: values.total_weight as number,
-      qty: values.qty as number,
-      avg_weight: values.avg_weight as number,
-      total_price: values.total_price as number,
+      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,
       marketing_delivery_products: {
         id: marketingProducts.length + 1,
-        vehicle_number: values.vehicle_number as string,
-        delivery_date: values.delivery_date as string,
-        unit_price: values.unit_price as number,
-        total_weight: values.total_weight as number,
-        qty: values.qty as number,
-        avg_weight: values.avg_weight as number,
-        total_price: values.total_price as number,
+        vehicle_number: tableValue.vehicle_number as string,
+        delivery_date: tableValue.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,
       },
     };
-    const newMarketingProductPayload: MarketingProductFormValues = {
-      vehicle_number: values.vehicle_number as string,
-      kandang_id: values.kandang_id as number,
-      kandang: {
-        value: values.kandang_id as number,
-        label: values.kandang?.name as string,
-      },
-      product_warehouse_id: values.product_warehouse_id as number,
-      product_warehouse: {
-        value: values.product_warehouse?.id as number,
-        label: values.product_warehouse?.product.name as string,
-      },
-      unit_price: values.unit_price,
-      total_weight: values.total_weight,
-      qty: values.qty,
-      uom: values.uom as string,
-      avg_weight: values.avg_weight,
-      total_price: values.total_price,
-      delivery_date: values.delivery_date as string,
-    };
+
     setMarketingProducts((prev) => [...prev, newMarketingProduct]);
     formik.setValues({
       ...formik.values,
-      marketing_products: [
-        ...formik.values.marketing_products,
-        newMarketingProductPayload,
-      ],
+      marketing_products: [...formik.values.marketing_products, fieldValues],
     });
-    setGrandTotal((prev) => prev + (values.total_price as number));
+    setGrandTotal((prev) => prev + (tableValue.total_price as number));
     addProductModal.closeModal();
   };
   const handleChangeCustomer = (val: OptionType | OptionType[] | null) => {
@@ -155,9 +136,13 @@ const SalesForm = ({
   const formik = useFormik<MarketingFormValues>({
     enableReinitialize: true,
     initialValues: {
-      so_date: undefined,
-      notes: '',
+      so_date: initialValues?.so_date || undefined,
+      notes: initialValues?.notes || undefined,
       customer_id: initialValues?.customer?.id || undefined,
+      customer: {
+        value: initialValues?.customer?.id as number,
+        label: initialValues?.customer?.name as string,
+      },
       marketing_products: [],
     },
     validationSchema: MarketingSchema,
@@ -195,7 +180,7 @@ const SalesForm = ({
         onReset={formik.handleReset}
       >
         <FormHeader
-          title='Tambah Sales Order'
+          title={`${formType === 'add' ? 'Tambah' : 'Edit'} Sales Order`}
           backUrl='/marketing/sales-orders'
         />
         <Card
@@ -379,10 +364,10 @@ const SalesForm = ({
               </Button>
             )}
           </div>
-          {JSON.stringify(formik.errors)}
         </Card>
         <div className='grid grid-cols-2 gap-3'>
           <TextArea
+            required
             name='notes'
             label='Catatan'
             rows={3}

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

@@ -35,7 +35,10 @@ const MarketingProductForm = ({
   initialValues?: MarketingProduct;
   data: MarketingProduct[];
   modalRef?: RefObject<HTMLDialogElement | null>;
-  onSubmitForm?: (values: CreateMarketingProductPayload) => Promise<void>;
+  onSubmitForm?: (
+    tableValues: CreateMarketingProductPayload,
+    fieldValues: MarketingProductFormValues
+  ) => Promise<void>;
 }) => {
   // State
   const [selectedOptionsKandang, setSelectedOptionsKandang] =
@@ -150,7 +153,7 @@ const MarketingProductForm = ({
           delivery_date: values.delivery_date as string,
         };
 
-        onSubmitForm?.(marketingProduct);
+        onSubmitForm?.(marketingProduct, values);
         handleResetForm();
       }
     },

src/dummy/marketing.dummy.ts

@@ -0,0 +1,285 @@
+import { format } from 'date-fns';
+import { Area } from '@/types/api/master-data/area';
+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 { CreatedUser } from '@/types/api/api-general';
+import { Product } from '@/types/api/master-data/product';
+
+// ======================
+// 👤 Created User
+// ======================
+export const createdUser: CreatedUser = {
+  id: 1,
+  id_user: 1,
+  email: 'admin@example.com',
+  name: 'Admin Utama',
+};
+
+// ======================
+// 📍 Area Dummy
+// ======================
+export const dummyAreas: Area[] = [
+  {
+    id: 1,
+    name: 'Bandung Barat',
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    name: 'Cimahi Utara',
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 🏢 Location Dummy
+// ======================
+export const dummyLocations: Location[] = [
+  {
+    id: 1,
+    name: 'Gudang A',
+    address: 'Jl. Sukajadi No. 12',
+    area: dummyAreas[0],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    name: 'Gudang B',
+    address: 'Jl. Setiabudi No. 45',
+    area: dummyAreas[1],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 🐔 Kandang Dummy
+// ======================
+export const dummyKandangs: Kandang[] = [
+  {
+    id: 1,
+    name: 'Kandang Ayam Layer 1',
+    status: 'AKTIF',
+    capacity: 500,
+    location: dummyLocations[0],
+    pic: createdUser,
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    name: 'Kandang Ayam Broiler 2',
+    status: 'NONAKTIF',
+    capacity: 300,
+    location: dummyLocations[1],
+    pic: createdUser,
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 🏭 Warehouse Dummy
+// ======================
+export const dummyWarehouses: Warehouse[] = [
+  {
+    id: 1,
+    type: 'AREA',
+    name: 'Gudang Wilayah Bandung Barat',
+    area: dummyAreas[0],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    type: 'LOKASI',
+    name: 'Gudang Produksi Sukajadi',
+    area: dummyAreas[0],
+    location: { ...dummyLocations[0], area: dummyAreas[0] },
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 3,
+    type: 'KANDANG',
+    name: 'Gudang Kandang Layer 1',
+    area: dummyAreas[0],
+    location: { ...dummyLocations[0], area: dummyAreas[0] },
+    kandang: {
+      ...dummyKandangs[0],
+      location: dummyLocations[0],
+      pic: createdUser,
+    },
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 📦 Product Warehouse Dummy
+// ======================
+export const dummyProductWarehouses: ProductWarehouse[] = [
+  {
+    id: 1,
+    product_id: 101,
+    warehouse_id: 1,
+    quantity: 1000,
+    product: {
+      id: 101,
+      name: 'Pakan Ayam Premium',
+      sku: 'PAK-001',
+      category: 'PAKAN',
+    } as unknown as Product, // bisa diganti sesuai tipe Product
+    warehouse: dummyWarehouses[0],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    product_id: 102,
+    warehouse_id: 2,
+    quantity: 500,
+    product: {
+      id: 102,
+      name: 'Vitamin Ayam Super',
+      sku: 'VIT-002',
+      category: 'VITAMIN',
+    } as unknown as Product, // bisa diganti sesuai tipe Product
+    warehouse: dummyWarehouses[1],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 💼 Marketing Dummy
+// ======================
+export const dummyMarketings: Marketing[] = [
+  {
+    id: 1,
+    status: 'APPROVED',
+    so_number: 'SO-001-2025',
+    so_docs: 'https://example.com/docs/so001.pdf',
+    so_date: format(new Date(), 'yyyy-MM-dd'),
+    customer: {
+      id: 1,
+      name: 'PT Maju Jaya',
+      pic_id: 1,
+      pic: createdUser,
+      type: 'Distributor',
+      address: 'Jl. Merdeka No. 1',
+      phone: '081212121212',
+      email: 'contact@majujaya.com',
+      account_number: '1234567890',
+      created_user: createdUser,
+      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    sales_person: createdUser,
+    notes: 'Pengiriman awal bulan.',
+    grand_total: 7500000,
+    approval: {
+      step_number: 1,
+      step_name: 'Manager Approval',
+      action: 'APPROVED',
+      action_by: createdUser,
+      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    marketing_products: [
+      {
+        id: 1,
+        qty: 100,
+        unit_price: 75000,
+        avg_weight: 2.5,
+        total_weight: 250,
+        total_price: 7500000,
+        product_warehouse: dummyProductWarehouses[0],
+        marketing_delivery_products: {
+          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'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    status: 'PENDING',
+    so_number: 'SO-002-2025',
+    so_docs: 'https://example.com/docs/so002.pdf',
+    so_date: format(new Date(), 'yyyy-MM-dd'),
+    customer: {
+      id: 2,
+      name: 'CV Sumber Sehat',
+      pic_id: 2,
+      pic: createdUser,
+      type: 'Retail',
+      address: 'Jl. Cihampelas No. 5',
+      phone: '082222222222',
+      email: 'info@sumbersehat.com',
+      account_number: '9876543210',
+      created_user: createdUser,
+      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    sales_person: createdUser,
+    notes: 'Pesanan kedua untuk stok akhir tahun.',
+    grand_total: 3750000,
+    approval: {
+      step_number: 1,
+      step_name: 'Manager Approval',
+      action: 'PENDING',
+      action_by: createdUser,
+      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    marketing_products: [
+      {
+        id: 2,
+        qty: 50,
+        unit_price: 75000,
+        avg_weight: 2.5,
+        total_weight: 125,
+        total_price: 3750000,
+        product_warehouse: dummyProductWarehouses[1],
+        marketing_delivery_products: {
+          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'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];

src/services/api/marketing.ts

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

src/services/api/marketing/marketing.ts

@@ -0,0 +1,113 @@
+import { dummyMarketings } from '@/dummy/marketing.dummy';
+import { sleep } from '@/lib/helper';
+import { BaseApiService } from '@/services/api/base';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  Marketing,
+  CreateMarketingPayload,
+  UpdateMarketingPayload,
+} from '@/types/api/marketing/marketing';
+
+export class MarketingService extends BaseApiService<
+  Marketing,
+  CreateMarketingPayload,
+  UpdateMarketingPayload
+> {
+  constructor(basePath: string = '/marketing') {
+    super(basePath);
+  }
+
+  /**
+   * Override: Get all marketing data (dummy mode)
+   */
+  override async getAllFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<Marketing[]>> {
+    // simulasi loading
+    await sleep(750);
+
+    // data dummy sementara
+    const DUMMY_MARKETING_DATA: BaseApiResponse<Marketing[]> = {
+      code: 200,
+      status: 'success',
+      message: 'Berhasil mengambil data marketing (dummy)',
+      data: dummyMarketings,
+    };
+
+    return DUMMY_MARKETING_DATA;
+  }
+
+  /**
+   * Override: Get single marketing data (dummy mode)
+   */
+  override async getSingle(
+    id: number
+  ): Promise<BaseApiResponse<Marketing> | undefined> {
+    // simulasi delay
+    await new Promise((res) => setTimeout(res, 500));
+
+    // misalnya fetch dari dummy
+    return {
+      code: 200,
+      status: 'success',
+      message: 'Data marketing berhasil diambil.',
+      data: dummyMarketings[0],
+    };
+
+    // jika tidak ditemukan
+    throw {
+      code: 404,
+      status: 'error',
+      message: 'Data marketing tidak ditemukan.',
+    };
+  }
+
+  /**
+   * Approve single marketing data
+   */
+  async singleApproval(
+    id: number,
+    action: 'approve' | 'reject'
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approval_ids: [id],
+          notes: `${action} marketing ${id}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error approve marketing:', error);
+      return undefined;
+    }
+  }
+
+  /**
+   * Bulk approve
+   */
+  async bulkApprovals(
+    ids: number[],
+    action: 'approve' | 'reject'
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approval_ids: ids,
+          notes: `${action} marketing ${ids.join(', ')}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error bulk approve marketing:', error);
+      return undefined;
+    }
+  }
+}
+
+export const MarketingApi = new MarketingService('/marketing');