refactor(FE-106-91-339-238): Slicing UI Chickin DOC Refactored

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

@@ -7,7 +7,8 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { cn } from '@/lib/helper';
-import { SalesOrder } from '@/types/api/marketing/marketing';
+import { Marketing, MarketingProducts } 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';
@@ -18,7 +19,7 @@ const RowsOptionsMenu = ({
   deleteClickHandler,
 }: {
   type: 'dropdown' | 'collapse';
-  props: CellContext<SalesOrder, unknown>;
+  props: CellContext<Marketing, unknown>;
   deleteClickHandler: () => void;
 }) => {
   return (
@@ -111,7 +112,59 @@ const SalesOrderTable = () => {
         />
       </div>
       <Table
-        data={[]}
+        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_weigth: 1.5,
+                total_weight: 15,
+                total_price: 1000000,
+                product_warehouse: {
+                  id: 1,
+                  product: {
+                    id: 1,
+                    name: 'Product A',
+                  },
+                },
+              } as MarketingProducts,
+              {
+                id: 2,
+                qty: 5,
+                unit_price: 200000,
+                avg_weigth: 2.0,
+                total_weight: 10,
+                total_price: 1000000,
+                product_warehouse: {
+                  id: 2,
+                  product: {
+                    id: 2,
+                    name: 'Product B',
+                  },
+                },
+              } as MarketingProducts,
+            ],
+          } as Marketing,
+        ]}
         columns={[
           {
             header: '#',
@@ -122,7 +175,7 @@ const SalesOrderTable = () => {
             header: 'No. Order',
           },
           {
-            accessorKey: 'tanggal',
+            accessorKey: 'so_date',
             header: 'Tanggal',
           },
           {
@@ -130,7 +183,7 @@ const SalesOrderTable = () => {
             header: 'Status',
           },
           {
-            accessorKey: 'customer',
+            accessorKey: 'customer.name',
             header: 'Customer',
           },
           {
@@ -138,8 +191,18 @@ const SalesOrderTable = () => {
             header: 'Grand Total',
           },
           {
-            accessorKey: 'product_details',
+            accessorKey: 'marketing_products.length',
             header: 'Product Details',
+            cell: (props) => (
+              <ul className='list-disc list-inside'>
+                {props.row.original.marketing_products?.map((product) => (
+                  <li key={product.id}>
+                    {product.product_warehouse.product.name} - Qty:{' '}
+                    {product.qty}
+                  </li>
+                ))}
+              </ul>
+            ),
           },
           {
             header: 'Aksi',