import { useCallback, useMemo, useState, useEffect } from 'react';
import Head from 'next/head';
import ArrowDownOnSquareIcon from '@heroicons/react/24/solid/ArrowDownOnSquareIcon';
import ArrowUpOnSquareIcon from '@heroicons/react/24/solid/ArrowUpOnSquareIcon';
import PlusIcon from '@heroicons/react/24/solid/PlusIcon';
import { Box, Button, Container, Stack, SvgIcon, Typography } from '@mui/material';
import { useSelection } from 'src/hooks/use-selection';
import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
import { applyPagination } from 'src/utils/apply-pagination';
import { Modal, Backdrop, Fade, TextField } from '@mui/material';
import AddProductModal from 'src/components/AddProductModal';
import AddItemsModal from 'src/components/AddItemModal';
import { useDispatch, useSelector } from 'react-redux';
import { getAllProducts } from 'src/redux/productSlice';
import AddCategoryModal from 'src/components/AddCategoryModal';
import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
import { getAllCategories } from 'src/redux/categorySlice';
import { formatDistanceToNow } from 'date-fns';
import { parseISO } from 'date-fns';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
const useCategories = () => {
const categoriesState = useSelector((state) => state.category.categories);
const { user } = useSelector((state) => state.auth);
return useMemo(() => {
if (user.isVendor) {
const filteredCategories = categoriesState.filter((category) =>
category.item._id === user.vendorDetails.item
);
return filteredCategories;
}
return categoriesState;
}, [categoriesState, user, user]);
};
const useCategoryIds = (categories) => {
return useMemo(() => {
if (categories) {
return categories.map((category) => category._id);
}
return [];
}, [categories]);
};
const renderDetailPanel = ({ row }) => {
const products = row.original.products;
if (!products || products.length === 0) {
return null;
}
return (
<TableContainer component={Paper}>
<Table size="small" aria-label="a dense table">
<TableHead>
<TableRow>
<TableCell>Product Name</TableCell>
<TableCell align="right">Location</TableCell>
<TableCell align="right">Price</TableCell>
<TableCell align="right">Dimension</TableCell>
<TableCell align="right">Unit</TableCell>
<TableCell align="right">Created At</TableCell>
</TableRow>
</TableHead>
<TableBody>
{products.map((product) => (
<TableRow key={product._id}>
<TableCell component="th" scope="row">
{product.name}
</TableCell>
<TableCell align="right">{product.location}</TableCell>
<TableCell align="right">{product.price}</TableCell>
<TableCell align="right">{product.dimension}</TableCell>
<TableCell align="right">{product.unit}</TableCell>
<TableCell align="right">
{formatDistanceToNow(parseISO(product.createdAt), { addSuffix: true })}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
const ProductsPage = () => {
const dispatch = useDispatch();
const { user } = useSelector((state) => state.auth);
const { categoryStatus } = useSelection((state) => state.category)
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);
const categories = useCategories(page, rowsPerPage);
const categoryIds = useCategoryIds(categories);
const categoriesSelection = useSelection(categoryIds);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isAddProductModalOpen, setIsAddProductModalOpen] = useState(false);
const [isAddItemsModalOpen, setIsAddItemsModalOpen] = useState(false);
const [isAddCategoryModalOpen, setIsAddCategoryModalOpen] = useState(false);
useEffect(() => {
dispatch(getAllCategories());
}, [dispatch, isModalOpen]);
const handlePageChange = useCallback(
(event, value) => {
setPage(value);
},
[]
);
const handleRowsPerPageChange = useCallback(
(event) => {
setRowsPerPage(event.target.value);
},
[]
);
const handleOpenModal = () => {
setIsModalOpen(true);
};
const handleCloseModal = () => {
setIsModalOpen(false);
};
const handleOpenAddProductModal = () => {
setIsAddProductModalOpen(true);
};
const handleCloseAddProductModal = () => {
setIsAddProductModalOpen(false);
};
const handleOpenAddItemsModal = () => {
setIsAddItemsModalOpen(true);
};
const handleCloseAddItemsModal = () => {
setIsAddItemsModalOpen(false);
};
const handleOpenAddCategoryModal = () => {
setIsAddCategoryModalOpen(true);
};
const handleCloseAddCategoryModal = () => {
setIsAddCategoryModalOpen(false);
};
const columns = useMemo(
() => [
{
accessorKey: 'item.img',
header: 'Image',
Cell: ({ row }) => (
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: '1rem',
}}
>
<img
alt="avatar"
height={50}
src={row.original.item.img}
loading="lazy"
style={{ borderRadius: '50%' }}
/>
{/* using renderedCellValue instead of cell.getValue() preserves filter match highlighting */}
</Box>
),
},
{
accessorKey: 'item.name',
header: 'Category Item',
size: 200,
},
{
accessorKey: 'name',
header: 'Category Name',
size: 200,
},
{
accessorKey: 'unit',
header: 'Unit',
size: 150,
},
{
accessorKey: 'createdAt',
header: 'Created At',
size: 150,
Cell: ({ row }) => {
const formattedDate = formatDistanceToNow(parseISO(row.original.createdAt), { addSuffix: true });
return <span>{formattedDate}</span>;
},
},
],
[],
);
const table = useMaterialReactTable({
columns,
data: categories,
renderDetailPanel,
});
return (
<>
<Head>
<title>Categories | Your App Name</title>
</Head>
<Box
component="main"
sx={{
flexGrow: 1,
py: 8,
}}
>
<Container maxWidth="xl">
<Stack spacing={3}>
<Stack
direction="row"
justifyContent="space-between"
spacing={4}
>
<Stack spacing={1} direction="row">
<Typography variant="h4">Product/Categories</Typography>
<Stack
alignItems="center"
direction="row"
spacing={1}
>
</Stack>
</Stack>
<Stack spacing={1} direction="row">
<Button
startIcon={(
<SvgIcon fontSize="small">
<PlusIcon />
</SvgIcon>
)}
variant="contained"
onClick={handleOpenAddProductModal}
>
Add Product
</Button>
<AddProductModal isOpen={isAddProductModalOpen} onClose={handleCloseAddProductModal} />
{!user.isVendor && (<Button
startIcon={(
<SvgIcon fontSize="small">
<PlusIcon />
</SvgIcon>
)}
variant="contained"
onClick={handleOpenAddItemsModal}
>
Add Items
</Button>)}
<AddItemsModal isOpen={isAddItemsModalOpen} onClose={handleCloseAddItemsModal} />
{!user.isVendor && (<Button
startIcon={(
<SvgIcon fontSize="small">
<PlusIcon />
</SvgIcon>
)}
variant="contained"
onClick={handleOpenAddCategoryModal}
>
Add Categories
</Button>)}
<AddCategoryModal isOpen={isAddCategoryModalOpen} onClose={handleCloseAddCategoryModal} />
</Stack>
</Stack>
{categories && Array.isArray(categories) && categories.length > 0 && <MaterialReactTable table={table} />}
</Stack>
</Container>
</Box>
</>
);
};
ProductsPage.getLayout = (page) => (
<DashboardLayout>
{page}
</DashboardLayout>
);
export default ProductsPage;
this is above my products page in next js ,and there are other pages too like orders,
the issue is all pages routing are working fine but when i go to product page and then i click to another page from sidenav link after coming to product page,the page doesnt change no error in console rest all pages are working productis also working fine only page are not getting routed after going to product page