diff --git a/src/components/TablePaginationComponent.tsx b/src/components/TablePaginationComponent.tsx index 33fe4e8..967eb5d 100644 --- a/src/components/TablePaginationComponent.tsx +++ b/src/components/TablePaginationComponent.tsx @@ -1,33 +1,29 @@ -// MUI Imports -import Pagination from '@mui/material/Pagination' -import Typography from '@mui/material/Typography' +import { Typography, Pagination } from '@mui/material' -// Third Party Imports -import type { useReactTable } from '@tanstack/react-table' +const TablePaginationComponent = ({ + pageIndex, + pageSize, + totalCount, + onPageChange +}: { + pageIndex: number + pageSize: number + totalCount: number + onPageChange: (event: React.ChangeEvent, page: number) => void +}) => { + const start = pageIndex === 1 ? pageIndex : (pageIndex - 1) * pageSize + 1 + const end = Math.min((pageIndex) * pageSize, totalCount) -const TablePaginationComponent = ({ table }: { table: ReturnType }) => { return (
- - {`Showing ${ - table.getFilteredRowModel().rows.length === 0 - ? 0 - : table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1 - } - to ${Math.min( - (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize, - table.getFilteredRowModel().rows.length - )} of ${table.getFilteredRowModel().rows.length} entries`} - + {`Showing ${start} to ${end} of ${totalCount} entries`} { - table.setPageIndex(page - 1) - }} + count={Math.ceil(totalCount / pageSize)} + page={pageIndex} + onChange={onPageChange} showFirstButton showLastButton /> diff --git a/src/services/queries/categories.ts b/src/services/queries/categories.ts new file mode 100644 index 0000000..645ac46 --- /dev/null +++ b/src/services/queries/categories.ts @@ -0,0 +1,41 @@ +import { useQuery } from '@tanstack/react-query' +import { Categories } from '../../types/services/category' +import { api } from '../api' + +interface CategoriesQueryParams { + page?: number + limit?: number + search?: string +} + +export const useCategoriesQuery = { + getCategories: (params: CategoriesQueryParams = {}) => { + const { page = 1, limit = 10, search = '', ...filters } = params + + return useQuery({ + queryKey: ['categories', { page, limit, search, ...filters }], + queryFn: async () => { + const queryParams = new URLSearchParams() + + queryParams.append('page', page.toString()) + queryParams.append('limit', limit.toString()) + + if (search) { + queryParams.append('search', search) + } + + // Add other filters + Object.entries(filters).forEach(([key, value]) => { + if (value !== undefined && value !== null && value !== '') { + queryParams.append(key, value.toString()) + } + }) + + const res = await api.get(`/categories?${queryParams.toString()}`) + return res.data.data + }, + // Cache for 5 minutes + staleTime: 5 * 60 * 1000 + }) + } +} diff --git a/src/services/queries/products.ts b/src/services/queries/products.ts index d16d892..f32421d 100644 --- a/src/services/queries/products.ts +++ b/src/services/queries/products.ts @@ -1,15 +1,44 @@ import { useQuery } from '@tanstack/react-query' -import { Products } from '../../types/services/products' +import { Products } from '../../types/services/product' import { api } from '../api' +interface ProductsQueryParams { + page?: number + limit?: number + search?: string + // Add other filter parameters as needed + category_id?: string + is_active?: boolean +} + export const useProductsQuery = { - getProducts: () => { + getProducts: (params: ProductsQueryParams = {}) => { + const { page = 1, limit = 10, search = '', ...filters } = params + return useQuery({ - queryKey: ['products'], + queryKey: ['products', { page, limit, search, ...filters }], queryFn: async () => { - const res = await api.get('/products') + const queryParams = new URLSearchParams() + + queryParams.append('page', page.toString()) + queryParams.append('limit', limit.toString()) + + if (search) { + queryParams.append('search', search) + } + + // Add other filters + Object.entries(filters).forEach(([key, value]) => { + if (value !== undefined && value !== null && value !== '') { + queryParams.append(key, value.toString()) + } + }) + + const res = await api.get(`/products?${queryParams.toString()}`) return res.data.data - } + }, + // Cache for 5 minutes + staleTime: 5 * 60 * 1000 }) } } diff --git a/src/types/services/category.ts b/src/types/services/category.ts new file mode 100644 index 0000000..5978a41 --- /dev/null +++ b/src/types/services/category.ts @@ -0,0 +1,18 @@ +export interface Category { + id: string; + organization_id: string; + name: string; + description: string | null; + business_type: string; + metadata: Record; + created_at: string; + updated_at: string; +} + +export interface Categories { + categories: Category[]; + total_count: number; + page: number; + limit: number; + total_pages: number; +} diff --git a/src/types/services/products.ts b/src/types/services/product.ts similarity index 100% rename from src/types/services/products.ts rename to src/types/services/product.ts diff --git a/src/views/apps/ecommerce/products/category/ProductCategoryTable.tsx b/src/views/apps/ecommerce/products/category/ProductCategoryTable.tsx index 6386131..baa9f6e 100644 --- a/src/views/apps/ecommerce/products/category/ProductCategoryTable.tsx +++ b/src/views/apps/ecommerce/products/category/ProductCategoryTable.tsx @@ -1,7 +1,7 @@ 'use client' // React Imports -import { useEffect, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' // MUI Imports import Card from '@mui/material/Card' @@ -39,6 +39,10 @@ import TablePaginationComponent from '@components/TablePaginationComponent' // Style Imports import tableStyles from '@core/styles/table.module.css' +import { useCategoriesQuery } from '../../../../../services/queries/categories' +import { Category } from '../../../../../types/services/category' +import { Box, CircularProgress } from '@mui/material' +import Loading from '../../../../../components/layout/shared/Loading' declare module '@tanstack/table-core' { interface FilterFns { @@ -49,16 +53,7 @@ declare module '@tanstack/table-core' { } } -export type categoryType = { - id: number - categoryTitle: string - description: string - totalProduct: number - totalEarning: number - image: string -} - -type CategoryWithActionsType = categoryType & { +type CategoryWithActionsType = Category & { actions?: string } @@ -104,106 +99,6 @@ const DebouncedInput = ({ return setValue(e.target.value)} /> } -// Vars -const categoryData: categoryType[] = [ - { - id: 1, - categoryTitle: 'Smart Phone', - description: 'Choose from wide range of smartphones online at best prices.', - totalProduct: 12548, - totalEarning: 98784, - image: '/images/apps/ecommerce/product-1.png' - }, - { - id: 2, - categoryTitle: 'Clothing, Shoes, and jewellery', - description: 'Fashion for a wide selection of clothing, shoes, jewellery and watches.', - totalProduct: 4689, - totalEarning: 45627, - image: '/images/apps/ecommerce/product-9.png' - }, - { - id: 3, - categoryTitle: 'Home and Kitchen', - description: 'Browse through the wide range of Home and kitchen products.', - totalProduct: 11297, - totalEarning: 51097, - image: '/images/apps/ecommerce/product-10.png' - }, - { - id: 4, - categoryTitle: 'Beauty and Personal Care', - description: 'Explore beauty and personal care products, shop makeup and etc.', - totalProduct: 9474, - totalEarning: 74829, - image: '/images/apps/ecommerce/product-19.png' - }, - { - id: 5, - categoryTitle: 'Books', - description: 'Over 25 million titles across categories such as business and etc.', - totalProduct: 10257, - totalEarning: 63618, - image: '/images/apps/ecommerce/product-25.png' - }, - { - id: 6, - categoryTitle: 'Games', - description: 'Every month, get exclusive in-game loot, free games, a free subscription.', - totalProduct: 14501, - totalEarning: 65920, - image: '/images/apps/ecommerce/product-12.png' - }, - { - id: 7, - categoryTitle: 'Baby Products', - description: 'Buy baby products across different categories from top brands.', - totalProduct: 8624, - totalEarning: 38838, - image: '/images/apps/ecommerce/product-14.png' - }, - { - id: 8, - categoryTitle: 'Growsari', - description: 'Shop grocery Items through at best prices in India.', - totalProduct: 7389, - totalEarning: 72652, - image: '/images/apps/ecommerce/product-26.png' - }, - { - id: 9, - categoryTitle: 'Computer Accessories', - description: 'Enhance your computing experience with our range of computer accessories.', - totalProduct: 9876, - totalEarning: 65421, - image: '/images/apps/ecommerce/product-17.png' - }, - { - id: 10, - categoryTitle: 'Fitness Tracker', - description: 'Monitor your health and fitness goals with our range of advanced fitness trackers.', - totalProduct: 1987, - totalEarning: 32067, - image: '/images/apps/ecommerce/product-10.png' - }, - { - id: 11, - categoryTitle: 'Smart Home Devices', - description: 'Transform your home into a smart home with our innovative smart home devices.', - totalProduct: 2345, - totalEarning: 87654, - image: '/images/apps/ecommerce/product-11.png' - }, - { - id: 12, - categoryTitle: 'Audio Speakers', - description: 'Immerse yourself in rich audio quality with our wide range of speakers.', - totalProduct: 5678, - totalEarning: 32145, - image: '/images/apps/ecommerce/product-2.png' - } -] - // Column Definitions const columnHelper = createColumnHelper() @@ -211,8 +106,28 @@ const ProductCategoryTable = () => { // States const [addCategoryOpen, setAddCategoryOpen] = useState(false) const [rowSelection, setRowSelection] = useState({}) - const [data, setData] = useState(...[categoryData]) - const [globalFilter, setGlobalFilter] = useState('') + const [currentPage, setCurrentPage] = useState(1) + const [pageSize, setPageSize] = useState(10) + + // Fetch products with pagination and search + const { data, isLoading, error, isFetching } = useCategoriesQuery.getCategories({ + page: currentPage, + limit: pageSize + }) + + const categories = data?.categories ?? [] + const totalCount = data?.total_count ?? 0 + + const handlePageChange = useCallback((event: unknown, newPage: number) => { + setCurrentPage(newPage) + }, []) + + // Handle page size change + const handlePageSizeChange = useCallback((event: React.ChangeEvent) => { + const newPageSize = parseInt(event.target.value, 10) + setPageSize(newPageSize) + setCurrentPage(0) // Reset to first page + }, []) const columns = useMemo[]>( () => [ @@ -238,31 +153,27 @@ const ProductCategoryTable = () => { /> ) }, - columnHelper.accessor('categoryTitle', { - header: 'Categories', + columnHelper.accessor('name', { + header: 'Name', cell: ({ row }) => (
- + {/* */}
- {row.original.categoryTitle} + {row.original.name} {row.original.description}
) }), - columnHelper.accessor('totalProduct', { - header: 'Total Products', - cell: ({ row }) => {row.original.totalProduct.toLocaleString()} + columnHelper.accessor('description', { + header: 'Decription', + cell: ({ row }) => {row.original.description || '-'} }), - columnHelper.accessor('totalEarning', { - header: 'Total Earning', - cell: ({ row }) => ( - - {row.original.totalEarning.toLocaleString('en-IN', { style: 'currency', currency: 'USD' })} - - ) + columnHelper.accessor('business_type', { + header: 'Business Type', + cell: ({ row }) => {row.original.business_type} }), columnHelper.accessor('actions', { header: 'Actions', @@ -279,7 +190,7 @@ const ProductCategoryTable = () => { { text: 'Delete', icon: 'tabler-trash', - menuItemProps: { onClick: () => setData(data.filter(category => category.id !== row.original.id)) } + menuItemProps: { onClick: () => console.log('click') } }, { text: 'Duplicate', icon: 'tabler-copy' } ]} @@ -294,32 +205,24 @@ const ProductCategoryTable = () => { ) const table = useReactTable({ - data: data as categoryType[], + data: categories as Category[], columns, filterFns: { fuzzy: fuzzyFilter }, state: { rowSelection, - globalFilter - }, - initialState: { pagination: { - pageSize: 10 + pageIndex: currentPage, // <= penting! + pageSize } }, enableRowSelection: true, //enable row selection for all rows - // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row - globalFilterFn: fuzzyFilter, onRowSelectionChange: setRowSelection, getCoreRowModel: getCoreRowModel(), - onGlobalFilterChange: setGlobalFilter, - getFilteredRowModel: getFilteredRowModel(), - getSortedRowModel: getSortedRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getFacetedRowModel: getFacetedRowModel(), - getFacetedUniqueValues: getFacetedUniqueValues(), - getFacetedMinMaxValues: getFacetedMinMaxValues() + // Disable client-side pagination since we're handling it server-side + manualPagination: true, + pageCount: Math.ceil(totalCount / pageSize) }) return ( @@ -327,9 +230,9 @@ const ProductCategoryTable = () => {
setGlobalFilter(String(value))} - placeholder='Search' + value={'search'} + onChange={value => console.log(value)} + placeholder='Search Product' className='max-sm:is-full' />
@@ -354,74 +257,103 @@ const ProductCategoryTable = () => {
- - - {table.getHeaderGroups().map(headerGroup => ( - - {headerGroup.headers.map(header => ( - - ))} - - ))} - - {table.getFilteredRowModel().rows.length === 0 ? ( - - - - - - ) : ( - - {table - .getRowModel() - .rows.slice(0, table.getState().pagination.pageSize) - .map(row => { - return ( - - {row.getVisibleCells().map(cell => ( - - ))} - - ) - })} - - )} -
- {header.isPlaceholder ? null : ( - <> -
- {flexRender(header.column.columnDef.header, header.getContext())} - {{ - asc: , - desc: - }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null} -
- - )} -
- No data available -
{flexRender(cell.column.columnDef.cell, cell.getContext())}
+ {isLoading ? ( + + ) : ( + + + {table.getHeaderGroups().map(headerGroup => ( + + {headerGroup.headers.map(header => ( + + ))} + + ))} + + {table.getFilteredRowModel().rows.length === 0 ? ( + + + + + + ) : ( + + {table + .getRowModel() + .rows.slice(0, table.getState().pagination.pageSize) + .map(row => { + return ( + + {row.getVisibleCells().map(cell => ( + + ))} + + ) + })} + + )} +
+ {header.isPlaceholder ? null : ( + <> +
+ {flexRender(header.column.columnDef.header, header.getContext())} + {{ + asc: , + desc: + }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null} +
+ + )} +
+ No data available +
{flexRender(cell.column.columnDef.cell, cell.getContext())}
+ )} + + {isFetching && !isLoading && ( + + + + )}
} - count={table.getFilteredRowModel().rows.length} - rowsPerPage={table.getState().pagination.pageSize} - page={table.getState().pagination.pageIndex} - onPageChange={(_, page) => { - table.setPageIndex(page) - }} + component={() => ( + + )} + count={totalCount} + rowsPerPage={pageSize} + page={currentPage} + onPageChange={handlePageChange} + onRowsPerPageChange={handlePageSizeChange} + rowsPerPageOptions={[10, 25, 50]} + disabled={isLoading} /> {}} handleClose={() => setAddCategoryOpen(!addCategoryOpen)} /> diff --git a/src/views/apps/ecommerce/products/list/ProductListTable.tsx b/src/views/apps/ecommerce/products/list/ProductListTable.tsx index 6c38fef..6816cc6 100644 --- a/src/views/apps/ecommerce/products/list/ProductListTable.tsx +++ b/src/views/apps/ecommerce/products/list/ProductListTable.tsx @@ -1,63 +1,50 @@ 'use client' // React Imports -import { useEffect, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' // Next Imports import Link from 'next/link' import { useParams } from 'next/navigation' // MUI Imports +import Button from '@mui/material/Button' import Card from '@mui/material/Card' import CardHeader from '@mui/material/CardHeader' -import Button from '@mui/material/Button' -import Chip from '@mui/material/Chip' import Checkbox from '@mui/material/Checkbox' +import Chip from '@mui/material/Chip' import Divider from '@mui/material/Divider' import IconButton from '@mui/material/IconButton' -import Switch from '@mui/material/Switch' import MenuItem from '@mui/material/MenuItem' import TablePagination from '@mui/material/TablePagination' -import Typography from '@mui/material/Typography' import type { TextFieldProps } from '@mui/material/TextField' +import Typography from '@mui/material/Typography' // Third-party Imports -import classnames from 'classnames' -import { rankItem } from '@tanstack/match-sorter-utils' -import { - createColumnHelper, - flexRender, - getCoreRowModel, - useReactTable, - getFilteredRowModel, - getFacetedRowModel, - getFacetedUniqueValues, - getFacetedMinMaxValues, - getPaginationRowModel, - getSortedRowModel -} from '@tanstack/react-table' -import type { ColumnDef, FilterFn } from '@tanstack/react-table' import type { RankingInfo } from '@tanstack/match-sorter-utils' +import { rankItem } from '@tanstack/match-sorter-utils' +import type { ColumnDef, FilterFn } from '@tanstack/react-table' +import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table' +import classnames from 'classnames' // Type Imports -import type { ThemeColor } from '@core/types' import type { Locale } from '@configs/i18n' -import type { ProductType } from '@/types/apps/ecommerceTypes' // Component Imports -import TableFilters from './TableFilters' -import CustomAvatar from '@core/components/mui/Avatar' +import TablePaginationComponent from '@components/TablePaginationComponent' import CustomTextField from '@core/components/mui/TextField' import OptionMenu from '@core/components/option-menu' -import TablePaginationComponent from '@components/TablePaginationComponent' +import TableFilters from './TableFilters' // Util Imports import { getLocalizedUrl } from '@/utils/i18n' // Style Imports import tableStyles from '@core/styles/table.module.css' +import { Box, CircularProgress } from '@mui/material' +import Loading from '../../../../../components/layout/shared/Loading' import { useProductsQuery } from '../../../../../services/queries/products' -import { Product } from '../../../../../types/services/products' +import { Product } from '../../../../../types/services/product' declare module '@tanstack/table-core' { interface FilterFns { @@ -72,20 +59,6 @@ type ProductWithActionsType = Product & { actions?: string } -type ProductCategoryType = { - [key: string]: { - icon: string - color: ThemeColor - } -} - -type productStatusType = { - [key: string]: { - title: string - color: ThemeColor - } -} - const fuzzyFilter: FilterFn = (row, columnId, value, addMeta) => { // Rank the item const itemRank = rankItem(row.getValue(columnId), value) @@ -128,36 +101,37 @@ const DebouncedInput = ({ return setValue(e.target.value)} /> } -// Vars -const productCategoryObj: ProductCategoryType = { - Accessories: { icon: 'tabler-headphones', color: 'error' }, - 'Home Decor': { icon: 'tabler-smart-home', color: 'info' }, - Electronics: { icon: 'tabler-device-laptop', color: 'primary' }, - Shoes: { icon: 'tabler-shoe', color: 'success' }, - Office: { icon: 'tabler-briefcase', color: 'warning' }, - Games: { icon: 'tabler-device-gamepad-2', color: 'secondary' } -} - -const productStatusObj: productStatusType = { - Scheduled: { title: 'Scheduled', color: 'warning' }, - Published: { title: 'Publish', color: 'success' }, - Inactive: { title: 'Inactive', color: 'error' } -} - // Column Definitions const columnHelper = createColumnHelper() const ProductListTable = () => { - // States - const { data } = useProductsQuery.getProducts() const [rowSelection, setRowSelection] = useState({}) - const [filteredData, setFilteredData] = useState(data?.products ?? []) - const [globalFilter, setGlobalFilter] = useState('') - + const [currentPage, setCurrentPage] = useState(1) + const [pageSize, setPageSize] = useState(10) // Hooks const { lang: locale } = useParams() + // Fetch products with pagination and search + const { data, isLoading, error, isFetching } = useProductsQuery.getProducts({ + page: currentPage, + limit: pageSize + }) + + const products = data?.products ?? [] + const totalCount = data?.total_count ?? 0 + + const handlePageChange = useCallback((event: unknown, newPage: number) => { + setCurrentPage(newPage) + }, []) + + // Handle page size change + const handlePageSizeChange = useCallback((event: React.ChangeEvent) => { + const newPageSize = parseInt(event.target.value, 10) + setPageSize(newPageSize) + setCurrentPage(0) // Reset to first page + }, []) + const columns = useMemo[]>( () => [ { @@ -226,7 +200,7 @@ const ProductListTable = () => { }), columnHelper.accessor('is_active', { header: 'Status', - cell: ({row}) => ( + cell: ({ row }) => ( { }) ], // eslint-disable-next-line react-hooks/exhaustive-deps - [data, filteredData] + [] ) const table = useReactTable({ - data: filteredData as Product[], + data: products as Product[], columns, filterFns: { fuzzy: fuzzyFilter }, state: { rowSelection, - globalFilter - }, - initialState: { pagination: { - pageSize: 10 + pageIndex: currentPage, // <= penting! + pageSize } }, enableRowSelection: true, //enable row selection for all rows - // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row - globalFilterFn: fuzzyFilter, onRowSelectionChange: setRowSelection, getCoreRowModel: getCoreRowModel(), - onGlobalFilterChange: setGlobalFilter, - getFilteredRowModel: getFilteredRowModel(), - getSortedRowModel: getSortedRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getFacetedRowModel: getFacetedRowModel(), - getFacetedUniqueValues: getFacetedUniqueValues(), - getFacetedMinMaxValues: getFacetedMinMaxValues() + // Disable client-side pagination since we're handling it server-side + manualPagination: true, + pageCount: Math.ceil(totalCount / pageSize) }) return ( <> - + {}} productData={[]} />
setGlobalFilter(String(value))} + value={'search'} + onChange={value => console.log(value)} placeholder='Search Product' className='max-sm:is-full' /> @@ -337,68 +303,98 @@ const ProductListTable = () => {
- - - {table.getHeaderGroups().map(headerGroup => ( - - {headerGroup.headers.map(header => ( - - ))} - - ))} - - {table.getFilteredRowModel().rows.length === 0 ? ( - - - - - - ) : ( - - {table - .getRowModel() - .rows.slice(0, table.getState().pagination.pageSize) - .map(row => { - return ( - - {row.getVisibleCells().map(cell => ( - - ))} - - ) - })} - - )} -
- {header.isPlaceholder ? null : ( - <> -
- {flexRender(header.column.columnDef.header, header.getContext())} - {{ - asc: , - desc: - }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null} -
- - )} -
- No data available -
{flexRender(cell.column.columnDef.cell, cell.getContext())}
+ {isLoading ? ( + + ) : ( + + + {table.getHeaderGroups().map(headerGroup => ( + + {headerGroup.headers.map(header => ( + + ))} + + ))} + + {table.getFilteredRowModel().rows.length === 0 ? ( + + + + + + ) : ( + + {table + .getRowModel() + .rows.slice(0, table.getState().pagination.pageSize) + .map(row => { + return ( + + {row.getVisibleCells().map(cell => ( + + ))} + + ) + })} + + )} +
+ {header.isPlaceholder ? null : ( + <> +
+ {flexRender(header.column.columnDef.header, header.getContext())} + {{ + asc: , + desc: + }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null} +
+ + )} +
+ No data available +
{flexRender(cell.column.columnDef.cell, cell.getContext())}
+ )} + + {isFetching && !isLoading && ( + + + + )}
+ } - count={table.getFilteredRowModel().rows.length} - rowsPerPage={table.getState().pagination.pageSize} - page={table.getState().pagination.pageIndex} - onPageChange={(_, page) => { - table.setPageIndex(page) - }} + component={() => ( + + )} + count={totalCount} + rowsPerPage={pageSize} + page={currentPage} + onPageChange={handlePageChange} + onRowsPerPageChange={handlePageSizeChange} + rowsPerPageOptions={[10, 25, 50]} + disabled={isLoading} /> diff --git a/src/views/apps/ecommerce/products/list/TableFilters.tsx b/src/views/apps/ecommerce/products/list/TableFilters.tsx index 074f0ea..54d4c72 100644 --- a/src/views/apps/ecommerce/products/list/TableFilters.tsx +++ b/src/views/apps/ecommerce/products/list/TableFilters.tsx @@ -11,7 +11,7 @@ import type { ProductType } from '@/types/apps/ecommerceTypes' // Component Imports import CustomTextField from '@core/components/mui/TextField' -import { Product } from '../../../../../types/services/products' +import { Product } from '../../../../../types/services/product' type ProductStockType = { [key: string]: boolean } @@ -21,13 +21,7 @@ const productStockObj: ProductStockType = { 'Out of Stock': false } -const TableFilters = ({ - setData, - productData -}: { - setData: (data: Product[]) => void - productData?: Product[] -}) => { +const TableFilters = ({ setData, productData }: { setData: (data: Product[]) => void; productData?: Product[] }) => { // States const [category, setCategory] = useState('') const [stock, setStock] = useState('')