feat: refacotor ui

src/views/apps/ecommerce/customers/list/CustomerListTable.tsx

@@ -181,10 +181,6 @@ const CustomerListTable = () => {
         header: 'Phone',
         cell: ({ row }) => <Typography>{row.original.phone || '-'}</Typography>
       }),
-      columnHelper.accessor('address', {
-        header: 'Address',
-        cell: ({ row }) => <Typography>{row.original.address || '-'}</Typography>
-      }),
       columnHelper.accessor('is_active', {
         header: 'Status',
         cell: ({ row }) => (
@@ -196,6 +192,10 @@ const CustomerListTable = () => {
           />
         )
       }),
+      columnHelper.accessor('address', {
+        header: 'Address',
+        cell: ({ row }) => <Typography>{row.original.address || '-'}</Typography>
+      }),
       columnHelper.accessor('actions', {
         header: 'Actions',
         cell: ({ row }) => (

src/views/apps/ecommerce/products/ingredient/ProductIngredientTable.tsx

@@ -31,9 +31,9 @@ import { Box, Chip, CircularProgress } from '@mui/material'
 import ConfirmDeleteDialog from '../../../../../components/dialogs/confirm-delete'
 import Loading from '../../../../../components/layout/shared/Loading'
 import { useUnitsMutation } from '../../../../../services/mutations/units'
-import { useUnits } from '../../../../../services/queries/units'
-import { Unit } from '../../../../../types/services/unit'
-import { formatDate } from '../../../../../utils/transform'
+import { useIngredients } from '../../../../../services/queries/ingredients'
+import { IngredientItem } from '../../../../../types/services/ingredient'
+import { formatCurrency } from '../../../../../utils/transform'
 
 declare module '@tanstack/table-core' {
   interface FilterFns {
@@ -44,7 +44,7 @@ declare module '@tanstack/table-core' {
   }
 }
 
-type UnitWithActionsType = Unit & {
+type IngredientWithActionsType = IngredientItem & {
   actions?: string
 }
 
@@ -91,7 +91,7 @@ const DebouncedInput = ({
 }
 
 // Column Definitions
-const columnHelper = createColumnHelper<UnitWithActionsType>()
+const columnHelper = createColumnHelper<IngredientWithActionsType>()
 
 const ProductIngredientTable = () => {
   // States
@@ -102,17 +102,18 @@ const ProductIngredientTable = () => {
   const [pageSize, setPageSize] = useState(10)
   const [unitId, setUnitId] = useState('')
   const [openConfirm, setOpenConfirm] = useState(false)
-  const [currentUnit, setCurrentUnit] = useState<Unit>()
+  const [search, setSearch] = useState('')
 
   // Fetch products with pagination and search
-  const { data, isLoading, error, isFetching } = useUnits({
+  const { data, isLoading, error, isFetching } = useIngredients({
     page: currentPage,
-    limit: pageSize
+    limit: pageSize,
+    search
   })
 
   const { mutate: deleteUnit, isPending: isDeleting } = useUnitsMutation().deleteUnit
 
-  const units = data?.data ?? []
+  const ingredients = data?.data ?? []
   const totalCount = data?.pagination.total_count ?? 0
 
   const handlePageChange = useCallback((event: unknown, newPage: number) => {
@@ -132,7 +133,7 @@ const ProductIngredientTable = () => {
     })
   }
 
-  const columns = useMemo<ColumnDef<UnitWithActionsType, any>[]>(
+  const columns = useMemo<ColumnDef<IngredientWithActionsType, any>[]>(
     () => [
       {
         id: 'select',
@@ -169,9 +170,17 @@ const ProductIngredientTable = () => {
           </div>
         )
       }),
-      columnHelper.accessor('abbreviation', {
-        header: 'Abbreviation',
-        cell: ({ row }) => <Typography>{row.original.abbreviation || '-'}</Typography>
+      columnHelper.accessor('cost', {
+        header: 'Cost',
+        cell: ({ row }) => <Typography>{formatCurrency(row.original.cost) || '-'}</Typography>
+      }),
+      columnHelper.accessor('stock', {
+        header: 'Stock',
+        cell: ({ row }) => <Typography>{row.original.stock}</Typography>
+      }),
+      columnHelper.accessor('unit', {
+        header: 'Unit',
+        cell: ({ row }) => <Typography>{row.original.unit.name}</Typography>
       }),
       columnHelper.accessor('is_active', {
         header: 'Status',
@@ -184,9 +193,16 @@ const ProductIngredientTable = () => {
           />
         )
       }),
-      columnHelper.accessor('created_at', {
-        header: 'Created Date',
-        cell: ({ row }) => <Typography>{formatDate(row.original.created_at)}</Typography>
+      columnHelper.accessor('is_semi_finished', {
+        header: 'Semi Finished',
+        cell: ({ row }) => (
+          <Chip
+            label={row.original.is_semi_finished ? 'Active' : 'Inactive'}
+            variant='tonal'
+            color={row.original.is_semi_finished ? 'success' : 'error'}
+            size='small'
+          />
+        )
       }),
       columnHelper.accessor('actions', {
         header: 'Actions',
@@ -194,7 +210,6 @@ const ProductIngredientTable = () => {
           <div className='flex items-center'>
             <IconButton
               onClick={() => {
-                setCurrentUnit(row.original)
                 setEditUnitOpen(!editUnitOpen)
               }}
             >
@@ -228,7 +243,7 @@ const ProductIngredientTable = () => {
   )
 
   const table = useReactTable({
-    data: units as Unit[],
+    data: ingredients as IngredientItem[],
     columns,
     filterFns: {
       fuzzy: fuzzyFilter
@@ -253,16 +268,16 @@ const ProductIngredientTable = () => {
       <Card>
         <div className='flex flex-wrap justify-between gap-4 p-6'>
           <DebouncedInput
-            value={'search'}
-            onChange={value => console.log(value)}
+            value={search}
+            onChange={value => setSearch(value as string)}
             placeholder='Search Product'
             className='max-sm:is-full'
           />
           <div className='flex max-sm:flex-col items-start sm:items-center gap-4 max-sm:is-full'>
             <CustomTextField
               select
-              value={table.getState().pagination.pageSize}
-              onChange={e => table.setPageSize(Number(e.target.value))}
+              value={pageSize}
+              onChange={handlePageSizeChange}
               className='flex-auto max-sm:is-full sm:is-[70px]'
             >
               <MenuItem value='10'>10</MenuItem>

src/views/apps/ecommerce/stock/list/StockListTable.tsx

@@ -8,7 +8,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 // MUI Imports
 import Button from '@mui/material/Button'
 import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
 import Checkbox from '@mui/material/Checkbox'
 import Chip from '@mui/material/Chip'
 import Divider from '@mui/material/Divider'
@@ -36,12 +35,12 @@ import OptionMenu from '@core/components/option-menu'
 // Style Imports
 import tableStyles from '@core/styles/table.module.css'
 import { Box, CircularProgress } from '@mui/material'
-import AddStockDrawer from './AddStockDrawer'
 import ConfirmDeleteDialog from '../../../../../components/dialogs/confirm-delete'
 import Loading from '../../../../../components/layout/shared/Loading'
 import { useInventoriesMutation } from '../../../../../services/mutations/inventories'
 import { useInventories } from '../../../../../services/queries/inventories'
 import { Inventory } from '../../../../../types/services/inventory'
+import AddStockDrawer from './AddStockDrawer'
 
 declare module '@tanstack/table-core' {
   interface FilterFns {
@@ -165,14 +164,6 @@ const StockListTable = () => {
         header: 'Product',
         cell: ({ row }) => <Typography>{row.original.product_id}</Typography>
       }),
-      columnHelper.accessor('quantity', {
-        header: 'Quantity',
-        cell: ({ row }) => <Typography>{row.original.quantity}</Typography>
-      }),
-      columnHelper.accessor('reorder_level', {
-        header: 'Reorder Level',
-        cell: ({ row }) => <Typography>{row.original.reorder_level}</Typography>
-      }),
       columnHelper.accessor('is_low_stock', {
         header: 'Status',
         cell: ({ row }) => (
@@ -184,6 +175,14 @@ const StockListTable = () => {
           />
         )
       }),
+      columnHelper.accessor('quantity', {
+        header: 'Quantity',
+        cell: ({ row }) => <Typography>{row.original.quantity}</Typography>
+      }),
+      columnHelper.accessor('reorder_level', {
+        header: 'Reorder Level',
+        cell: ({ row }) => <Typography>{row.original.reorder_level}</Typography>
+      }),
       columnHelper.accessor('actions', {
         header: 'Actions',
         cell: ({ row }) => (
@@ -239,8 +238,6 @@ const StockListTable = () => {
   return (
     <>
       <Card>
-        <CardHeader title='Filters' />
-        {/* <TableFilters setData={() => {}} productData={[]} /> */}
         <Divider />
         <div className='flex flex-wrap justify-between gap-4 p-6'>
           <DebouncedInput