list of shipment methods

src/pages/shipmentMethod/List.tsx

@@ -1,13 +1,36 @@
 import { type FC } from 'react'
-import { useGetRestaurantShipmentMethods } from './hooks/useShipmentMethodData'
+import Table from '@/components/Table'
+import Filters from '@/components/Filters'
+import { useGetRestaurantShipmentMethods, useDeleteRestaurantShipmentMethod } from './hooks/useShipmentMethodData'
+import { useShipmentMethodFilters } from './hooks/useShipmentMethodFilters'
+import { getShipmentMethodTableColumns } from './components/ShipmentMethodTableColumns'
+import { useShipmentMethodFiltersFields } from './components/ShipmentMethodFiltersFields'
+import { Add } from 'iconsax-react'
 import { Link } from 'react-router-dom'
 import { Pages } from '@/config/Pages'
 import Button from '@/components/Button'
-import { Add } from 'iconsax-react'
 
 const ShipmentMethodList: FC = () => {
+    const {
+        filters,
+        currentPage,
+        apiParams,
+        handleFiltersChange,
+        handlePageChange,
+        limit,
+    } = useShipmentMethodFilters()
 
-    const { data: shipmentMethodsData, isLoading } = useGetRestaurantShipmentMethods()
+    const { data: shipmentMethodsData, isLoading } = useGetRestaurantShipmentMethods(apiParams)
+    const { mutate: deleteShipmentMethod, isPending: isDeleting } = useDeleteRestaurantShipmentMethod()
+
+    const shipmentMethods = shipmentMethodsData?.data || []
+    const columns = getShipmentMethodTableColumns({
+        onDelete: (id: string) => deleteShipmentMethod(id),
+        isDeleting
+    })
+    const filterFields = useShipmentMethodFiltersFields()
+
+    const totalPages = Math.ceil(shipmentMethods.length / limit) || 1
 
     return (
         <div className='mt-5'>
@@ -22,6 +45,26 @@ const ShipmentMethodList: FC = () => {
                     </Button>
                 </Link>
             </div>
+
+            <div className='mt-8'>
+                <Filters
+                    fields={filterFields}
+                    onChange={handleFiltersChange}
+                    initialValues={filters}
+                    searchField="search"
+                />
+            </div>
+
+            <Table
+                columns={columns}
+                data={shipmentMethods}
+                isloading={isLoading}
+                pagination={{
+                    currentPage,
+                    totalPages,
+                    onPageChange: handlePageChange,
+                }}
+            />
         </div>
     )
 }