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

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();
       }
     },