feat(FE-169): Slicing UI Index Pengajuan Sales & Define Data Type for Marketing

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

@@ -0,0 +1,9 @@
+const AddSalesOrder = () => {
+  return (
+    <div>
+      <p>Tambah Sales Order</p>
+    </div>
+  );
+};
+
+export default AddSalesOrder;

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

@@ -0,0 +1,8 @@
+const EditSalesOrder = () => {
+  return (
+    <div>
+      <p>Edit Sales Order</p>
+    </div>
+  );
+};
+export default EditSalesOrder;

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

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

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

@@ -0,0 +1,9 @@
+const DetailSalesOrder = () => {
+  return (
+    <div>
+      <p>Detail Sales Order</p>
+    </div>
+  );
+};
+
+export default DetailSalesOrder;

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

@@ -0,0 +1,10 @@
+import SalesOrderTable from '@/components/pages/marketing/sales-orders/SalesOrderTable';
+
+const SalesOrder = () => {
+  return (
+    <div className='w-full p-4'>
+      <SalesOrderTable />
+    </div>
+  );
+};
+export default SalesOrder;

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

@@ -0,0 +1,166 @@
+'use client';
+
+import Button from '@/components/Button';
+import { OptionType } from '@/components/input/SelectInput';
+import Table from '@/components/Table';
+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 { Icon } from '@iconify/react';
+import { CellContext } from '@tanstack/react-table';
+import { useCallback, useState } from 'react';
+
+const RowsOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<SalesOrder, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type === 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <div className='flex flex-col gap-1'>
+        <Button
+          href={`recording/detail/?recordingId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+        <Button
+          href={`recording/detail/edit/?recordingId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          Edit
+        </Button>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='mdi:delete-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+};
+const SalesOrderTable = () => {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const searchChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value);
+      setPage(1);
+    },
+    []
+  );
+  const pageSizeChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      setPageSize(newVal.value as number);
+      setPage(1);
+    },
+    []
+  );
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <div className='flex flex-col gap-2 mb-4'>
+        <TableToolbar
+          addButton={{
+            href: 'recording/add',
+            label: 'Tambah Sales Order',
+          }}
+          search={{
+            value: search,
+            onChange: searchChangeHandler,
+            placeholder: 'Cari Sales Order',
+          }}
+        />
+        <TableRowSizeSelector
+          value={pageSize}
+          onChange={pageSizeChangeHandler}
+          options={ROWS_OPTIONS}
+        />
+      </div>
+      <Table
+        data={[]}
+        columns={[
+          {
+            header: '#',
+            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
+          },
+          {
+            accessorKey: 'so_number',
+            header: 'No. Order',
+          },
+          {
+            accessorKey: 'tanggal',
+            header: 'Tanggal',
+          },
+          {
+            accessorKey: 'approval.step_name',
+            header: 'Status',
+          },
+          {
+            accessorKey: 'customer',
+            header: 'Customer',
+          },
+          {
+            accessorKey: 'grand_total',
+            header: 'Grand Total',
+          },
+          {
+            accessorKey: 'product_details',
+            header: 'Product Details',
+          },
+          {
+            header: 'Aksi',
+            cell: (props) => {},
+          },
+        ]}
+        pageSize={pageSize}
+        page={page}
+        onPageChange={setPage}
+        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-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',
+        }}
+      />
+    </div>
+  );
+};
+export default SalesOrderTable;

src/config/constant.ts

@@ -42,7 +42,7 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
 
   {
     title: 'Penjualan',
-    link: '/sale',
+    link: '/marketing/sales-orders',
     icon: 'mdi:attach-money',
   },
 

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

@@ -0,0 +1,39 @@
+import { Customer } from '@/types/api/master-data/customer';
+import {
+  BaseApproval,
+  BaseMetadata,
+  CreatedUser,
+} from '@/types/api/api-general';
+import { ProductWarehouse } from '../inventory/product-warehouse';
+
+export type BaseMarketing = {
+  id: number;
+  status?: string;
+  so_number: string;
+  customer: Customer;
+  so_docs: string;
+  so_date: string;
+  sales_person: CreatedUser;
+  notes: string;
+};
+
+export type MarketingProducts = {
+  id: number;
+  qty: number;
+  unit_price: number;
+  avg_weigth: number;
+  total_price: number;
+  product_warehouse: ProductWarehouse;
+  delivery_date?: string;
+  vehicle_number?: string;
+};
+
+export type SalesOrder = BaseMetadata & BaseMarketing;
+
+export type CreateSalesOrderPayload = {
+  customer_id: number;
+  date: string;
+  notes: string;
+};
+
+export type UpdateSalesOrderPayload = CreateSalesOrderPayload;