list foods

src/pages/food/List.tsx

@@ -1,10 +1,31 @@
-
 import { type FC } from 'react'
 import Table from '@/components/Table'
-import { Add, Eye } from 'iconsax-react'
+import Filters from '@/components/Filters'
+import { Add } from 'iconsax-react'
 import Button from '@/components/Button'
+import { useGetFoods } from './hooks/useFoodData'
+import { useFoodFilters } from './hooks/useFoodFilters'
+import { getFoodTableColumns } from './components/FoodTableColumns'
+import { useFoodFiltersFields } from './components/FoodFiltersFields'
 
 const FoodsList: FC = () => {
+    const {
+        filters,
+        currentPage,
+        apiParams,
+        handleFiltersChange,
+        handlePageChange,
+        limit,
+    } = useFoodFilters()
+
+    const { data: foodsData, isLoading } = useGetFoods(apiParams)
+
+    const foods = foodsData?.data || []
+    const columns = getFoodTableColumns()
+    const filterFields = useFoodFiltersFields()
+
+    const totalPages = Math.ceil(foods.length / limit) || 1
+
     return (
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
@@ -18,89 +39,24 @@ const FoodsList: FC = () => {
             </div>
 
             <div className='mt-8'>
-                <Table
-                    columns={[
-                        {
-                            key: 'image',
-                            title: 'تصویر',
-                            render: (item) => {
-                                return (
-                                    <div className='w-10 h-10 rounded-full overflow-hidden'>
-                                        <img src={item.image} alt={item.name} className='w-full h-full object-cover' />
-                                    </div>
-                                )
-                            }
-                        },
-                        {
-                            key: 'name',
-                            title: 'نام غذا',
-                        },
-                        {
-                            key: 'category',
-                            title: 'دسته بندی',
-                        },
-                        {
-                            key: 'price',
-                            title: 'قیمت ',
-                        },
-                        {
-                            key: 'preparationTime',
-                            title: 'زمان آماده سازی',
-                        },
-                        {
-                            key: 'status',
-                            title: 'وضعیت',
-                            render: (item) => {
-                                return (
-                                    <div className='h-6 w-fit flex items-center bg-[#FFEDCA] text-[#FF7B00] rounded-full px-2.5 text-xs'>
-                                        {item.status}
-                                    </div>
-                                )
-                            }
-                        },
-                        {
-                            key: 'view',
-                            title: '',
-                            render: () => {
-                                return (
-                                    <div className='flex gap-2 items-center'>
-                                        <Eye size={20} color='#8C90A3' />
-                                    </div>
-                                )
-                            }
-                        },
-                    ]}
-                    data={[
-                        {
-                            id: 1,
-                            image: 'https://picsum.photos/seed/food1/200',
-                            name: 'کباب کوبیده',
-                            category: 'غذای ایرانی',
-                            price: '۱۵۰,۰۰۰ تومان',
-                            preparationTime: '۳۰ دقیقه',
-                            status: 'موجود',
-                        },
-                        {
-                            id: 2,
-                            image: 'https://picsum.photos/seed/food2/200',
-                            name: 'پیتزا پپرونی',
-                            category: 'فست فود',
-                            price: '۲۰۰,۰۰۰ تومان',
-                            preparationTime: '۴۵ دقیقه',
-                            status: 'موجود',
-                        },
-                        {
-                            id: 3,
-                            image: 'https://picsum.photos/seed/food3/200',
-                            name: 'سالاد سزار',
-                            category: 'پیش غذا',
-                            price: '۸۰,۰۰۰ تومان',
-                            preparationTime: '۱۵ دقیقه',
-                            status: 'ناموجود',
-                        }
-                    ]}
+                <Filters
+                    fields={filterFields}
+                    onChange={handleFiltersChange}
+                    initialValues={filters}
+                    searchField="search"
                 />
             </div>
+
+            <Table
+                columns={columns}
+                data={foods}
+                isLoading={isLoading}
+                pagination={{
+                    currentPage,
+                    totalPages,
+                    onPageChange: handlePageChange,
+                }}
+            />
         </div>
     )
 }