diff --git a/src/pages/products/products-list/ProductsListPage.tsx b/src/pages/products/products-list/ProductsListPage.tsx index a9518a6..c69a565 100644 --- a/src/pages/products/products-list/ProductsListPage.tsx +++ b/src/pages/products/products-list/ProductsListPage.tsx @@ -8,6 +8,7 @@ import { Button } from "@/components/ui/Button"; import { Trash2, Edit3, Plus, Package, Eye, Image } from "lucide-react"; import { Modal } from "@/components/ui/Modal"; import { persianToEnglish } from '../../../utils/numberUtils'; +import { Pagination } from "@/components/ui/Pagination"; const ProductsTableSkeleton = () => (
@@ -71,14 +72,16 @@ const ProductsListPage = () => { category_id: '', status: '', min_price: '', - max_price: '' + max_price: '', + page: 1, + limit: 100, }); const { data: productsData, isLoading, error } = useProducts({ ...filters, category_id: filters.category_id ? Number(filters.category_id) : undefined, min_price: filters.min_price ? Number(filters.min_price) : undefined, - max_price: filters.max_price ? Number(filters.max_price) : undefined + max_price: filters.max_price ? Number(filters.max_price) : undefined, }); const { data: categories } = useCategories(); const { mutate: deleteProduct, isPending: isDeleting } = useDeleteProduct(); @@ -108,15 +111,15 @@ const ProductsListPage = () => { }; const handleSearchChange = (e: React.ChangeEvent) => { - setFilters(prev => ({ ...prev, search: e.target.value })); + setFilters(prev => ({ ...prev, search: e.target.value, page: 1 })); }; const handleCategoryChange = (e: React.ChangeEvent) => { - setFilters(prev => ({ ...prev, category_id: e.target.value })); + setFilters(prev => ({ ...prev, category_id: e.target.value, page: 1 })); }; const handleStatusChange = (e: React.ChangeEvent) => { - setFilters(prev => ({ ...prev, status: e.target.value })); + setFilters(prev => ({ ...prev, status: e.target.value, page: 1 })); }; const formatPrice = (price: number) => { @@ -142,6 +145,11 @@ const ProductsListPage = () => { } }; + const total = productsData?.total || 0; + const currentPage = productsData?.page || filters.page; + const perPage = productsData?.per_page || filters.limit; + const totalPages = Math.max(1, Math.ceil((total || 0) / (perPage || 20))); + if (error) { return (
@@ -233,7 +241,7 @@ const ProductsListPage = () => { value={filters.min_price} onChange={(e) => { const converted = persianToEnglish(e.target.value); - setFilters(prev => ({ ...prev, min_price: converted })); + setFilters(prev => ({ ...prev, min_price: converted, page: 1 })); }} className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100" /> @@ -244,7 +252,7 @@ const ProductsListPage = () => { value={filters.max_price} onChange={(e) => { const converted = persianToEnglish(e.target.value); - setFilters(prev => ({ ...prev, max_price: converted })); + setFilters(prev => ({ ...prev, max_price: converted, page: 1 })); }} className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100" /> @@ -435,6 +443,15 @@ const ProductsListPage = () => {
)} + {/* Pagination */} + setFilters(prev => ({ ...prev, page }))} + /> + {/* Delete Confirmation Modal */}