'use client'; import { useEffect, useMemo, useRef, useState } from 'react'; import Link from 'next/link'; import { getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table'; import { addDays, format, isWithinInterval, parse } from 'date-fns'; import { ChevronDown, EllipsisVertical, Info, Pencil, Search, Settings, Trash, X, } from 'lucide-react'; import { toast } from 'sonner'; import { toAbsoluteUrl } from '@/lib/helpers'; import { Alert, AlertIcon, AlertTitle } from '@/components/ui/alert'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Calendar } from '@/components/ui/calendar'; import { Card, CardFooter, CardHeader, CardHeading, CardTable, CardToolbar, } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '@/components/ui/command'; import { DataGrid } from '@/components/ui/data-grid'; import { DataGridColumnHeader } from '@/components/ui/data-grid-column-header'; import { DataGridPagination } from '@/components/ui/data-grid-pagination'; import { DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll, } from '@/components/ui/data-grid-table'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Input, InputWrapper } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Popover, PopoverContent, PopoverTrigger, } from '@/components/ui/popover'; import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'; import { Tooltip, TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip'; import { PerProductStockSheet } from '../components/per-product-stock-sheet'; const mockData = [ { id: '1', productInfo: { image: '11.png', title: 'Air Max 270 React Eng…', label: 'WM-8421', tooltip: 'Air Max 270 React Engineered', }, stock: 92, rsvd: 2, tlvl: 1, delta: { label: '+28', variant: 'success', }, sum: '$4,283.00', lastMoved: '18 Aug, 2025', handler: 'Jordan M.', trend: { label: 'Fast Moving', variant: 'success', }, }, { id: '2', productInfo: { image: '1.png', title: 'Trail Runner Z2', label: 'UC-3990', tooltip: '', }, stock: 12, rsvd: 3, tlvl: 25, delta: { label: '-238', variant: 'destructive', }, sum: '$923.00', lastMoved: '17 Aug, 2025', handler: 'Alexa R.', trend: { label: 'Fast Moving', variant: 'success', }, }, { id: '3', productInfo: { image: '2.png', title: 'Urban Flex Knit Low…', label: 'KB-8820', tooltip: 'Urban Flex Knit Low Sneakers', }, stock: 47, rsvd: 9, tlvl: 40, delta: { label: '+7', variant: 'success', }, sum: '$1,097.50 ', lastMoved: '15 Aug, 2025', handler: 'Chris T.', trend: { label: 'Clearance', variant: 'warning', }, }, { id: '4', productInfo: { image: '15.png', title: 'Blaze Street Classic', label: 'LS-1033', tooltip: '', }, stock: 0, rsvd: 0, tlvl: 100, delta: { label: '-100', variant: 'destructive', }, sum: '$0.00', lastMoved: '14 Aug, 2025', handler: 'Dana L.', trend: { label: 'Slow Moving', variant: 'destructive', }, }, { id: '5', productInfo: { image: '13.png', title: 'Terra Trekking Max Pro…', label: 'WC-5510', tooltip: 'Terra Trekking Max Pro Hiker', }, stock: 120, rsvd: 24, tlvl: 80, delta: { label: '+40', variant: 'success', }, sum: '$6,412.75', lastMoved: '13 Aug, 2025', handler: 'Kevin J.', trend: { label: 'Seasonal', variant: 'info', }, }, { id: '6', productInfo: { image: '7.png', title: 'Lite Runner Evo', label: 'GH-7312', tooltip: '', }, stock: 33, rsvd: 20, tlvl: 30, delta: { label: '+3', variant: 'warning', }, sum: '$3,145.20 ', lastMoved: '12 Aug, 2025', handler: 'Priya S.', trend: { label: 'Fast Moving', variant: 'success', }, }, { id: '7', productInfo: { image: '10.png', title: 'Classic Street Wear 2.0…', label: 'UH-2300', tooltip: 'Classic Street Wear 2.0 Collection', }, stock: 5, rsvd: 0, tlvl: 10, delta: { label: '-5', variant: 'warning', }, sum: '$560.00 ', lastMoved: '11 Aug, 2025', handler: 'Marcus B.', trend: { label: 'Promo', variant: 'primary', }, }, { id: '8', productInfo: { image: '3.png', title: 'Enduro AllTerrain High…', label: 'MS-8702', tooltip: 'Enduro All-Terrain High Sneakers', }, stock: 64, rsvd: 90, tlvl: 50, delta: { label: '+14', variant: 'success', }, sum: '$2,199.00 ', lastMoved: '10 Aug, 2025', handler: 'Zoe K.', trend: { label: 'Clearance', variant: 'warning', }, }, { id: '9', productInfo: { image: '8.png', title: 'FlexRun Urban Core', label: 'BS-6112', tooltip: '', }, stock: 89, rsvd: 0, tlvl: 70, delta: { label: '+19', variant: 'success', }, sum: '$7,009.99', lastMoved: '9 Aug, 2025', handler: 'Lee A.', trend: { label: 'Seasonal', variant: 'info', }, }, { id: '10', productInfo: { image: '5.png', title: 'Aero Walk Lite', label: 'HC-9031', tooltip: '', }, stock: 0, rsvd: 0, tlvl: 60, delta: { label: '-60', variant: 'destructive', }, sum: '$0.00', lastMoved: '8 Aug, 2025', handler: 'Nina V.', trend: { label: 'Fast Moving', variant: 'success', }, }, { id: '11', productInfo: { image: '4.png', title: 'Pro Runner Elite', label: 'PR-2024', tooltip: '', }, stock: 78, rsvd: 15, tlvl: 45, delta: { label: '+34', variant: 'success', }, sum: '$11,310.00', lastMoved: '7 Aug, 2025', handler: 'Mike R.', trend: { label: 'Seasonal', variant: 'info', }, }, { id: '12', productInfo: { image: '6.png', title: 'Comfort Plus Max', label: 'CP-4567', tooltip: '', }, stock: 45, rsvd: 8, tlvl: 35, delta: { label: '+15', variant: 'success', }, sum: '$4,049.55', lastMoved: '6 Aug, 2025', handler: 'Sarah L.', trend: { label: 'Clearance', variant: 'warning', }, }, { id: '13', productInfo: { image: '9.png', title: 'Speed Demon X', label: 'SD-7890', tooltip: '', }, stock: 23, rsvd: 5, tlvl: 20, delta: { label: '-12', variant: 'destructive', }, sum: '$4,577.00', lastMoved: '5 Aug, 2025', handler: 'Tom H.', trend: { label: 'Promo', variant: 'info', }, }, { id: '14', productInfo: { image: '12.png', title: 'Casual Street Pro', label: 'CS-3456', tooltip: '', }, stock: 67, rsvd: 12, tlvl: 55, delta: { label: '+28', variant: 'success', }, sum: '$5,058.50', lastMoved: '4 Aug, 2025', handler: 'Emma W.', trend: { label: 'Fast Moving', variant: 'success', }, }, { id: '15', productInfo: { image: '14.png', title: 'Mountain Trek Elite', label: 'MT-9012', tooltip: '', }, stock: 34, rsvd: 6, tlvl: 25, delta: { label: '+7', variant: 'success', }, sum: '$5,610.00', lastMoved: '3 Aug, 2025', handler: 'David K.', trend: { label: 'Slow Moving', variant: 'destructive', }, }, { id: '16', productInfo: { image: '16.png', title: 'Urban Flex Pro', label: 'UF-6789', tooltip: '', }, stock: 89, rsvd: 18, tlvl: 65, delta: { label: '+42', variant: 'success', }, sum: '$8,455.00', lastMoved: '2 Aug, 2025', handler: 'Lisa M.', trend: { label: 'Seasonal', variant: 'info', }, }, { id: '17', productInfo: { image: '1.png', title: 'Lightweight Runner', label: 'LR-2345', tooltip: '', }, stock: 12, rsvd: 2, tlvl: 15, delta: { label: '-8', variant: 'destructive', }, sum: '$780.00', lastMoved: '1 Aug, 2025', handler: 'John D.', trend: { label: 'Clearance', variant: 'warning', }, }, { id: '18', productInfo: { image: '2.png', title: 'Premium Comfort Max', label: 'PC-5678', tooltip: '', }, stock: 56, rsvd: 10, tlvl: 40, delta: { label: '+23', variant: 'success', }, sum: '$7,000.00', lastMoved: '31 Jul, 2025', handler: 'Anna B.', trend: { label: 'Fast Moving', variant: 'success', }, }, { id: '19', productInfo: { image: '3.png', title: 'Sport Performance Pro', label: 'SP-8901', tooltip: '', }, stock: 78, rsvd: 16, tlvl: 50, delta: { label: '+38', variant: 'success', }, sum: '$12,090.00', lastMoved: '30 Jul, 2025', handler: 'Carl F.', trend: { label: 'Promo', variant: 'info', }, }, { id: '20', productInfo: { image: '4.png', title: 'Classic Retro Style', label: 'CR-1234', tooltip: '', }, stock: 43, rsvd: 7, tlvl: 30, delta: { label: '+19', variant: 'success', }, sum: '$3,655.00', lastMoved: '29 Jul, 2025', handler: 'Grace T.', trend: { label: 'Slow Moving', variant: 'destructive', }, }, { id: '21', productInfo: { image: '5.png', title: 'Adventure Explorer', label: 'AE-4567', tooltip: '', }, stock: 29, rsvd: 4, tlvl: 20, delta: { label: '-5', variant: 'destructive', }, sum: '$3,915.00', lastMoved: '28 Jul, 2025', handler: 'Paul S.', trend: { label: 'Seasonal', variant: 'info', }, }, { id: '22', productInfo: { image: '6.png', title: 'Modern Street Elite', label: 'MS-7890', tooltip: '', }, stock: 91, rsvd: 20, tlvl: 70, delta: { label: '+51', variant: 'success', }, sum: '$15,925.00', lastMoved: '27 Jul, 2025', handler: 'Rachel L.', trend: { label: 'Fast Moving', variant: 'success', }, }, { id: '23', productInfo: { image: '7.png', title: 'Eco Friendly Runner', label: 'EF-2345', tooltip: '', }, stock: 37, rsvd: 6, tlvl: 25, delta: { label: '+14', variant: 'success', }, sum: '$3,885.00', lastMoved: '26 Jul, 2025', handler: 'Mark W.', trend: { label: 'Clearance', variant: 'warning', }, }, { id: '24', productInfo: { image: '8.png', title: 'Luxury Comfort Pro', label: 'LC-5678', tooltip: '', }, stock: 15, rsvd: 3, tlvl: 10, delta: { label: '-3', variant: 'destructive', }, sum: '$3,375.00', lastMoved: '25 Jul, 2025', handler: 'Sophie K.', trend: { label: 'Promo', variant: 'info', }, }, { id: '25', productInfo: { image: '9.png', title: 'Tech Smart Runner', label: 'TS-8901', tooltip: '', }, stock: 68, rsvd: 14, tlvl: 45, delta: { label: '+32', variant: 'success', }, sum: '$12,580.00', lastMoved: '24 Jul, 2025', handler: 'Alex M.', trend: { label: 'Fast Moving', variant: 'success', }, }, ]; const CurrentStockTable = ({ mockData: propsMockData }) => { const data = propsMockData || mockData; const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10, }); const [rowSelection, setRowSelection] = useState({}); const [sorting, setSorting] = useState([{ id: 'lastMoved', desc: true }]); const [selectedTrends, setSelectedTrends] = useState([]); const [selectedHandlers, setSelectedHandlers] = useState([]); const [searchQuery, setSearchQuery] = useState(''); const [inputValue, setInputValue] = useState(''); const inputRef = useRef(null); // Modal state const [isModalOpen, setIsModalOpen] = useState(false); const [selectedProduct, setSelectedProduct] = useState(undefined); // Date range picker state const today = new Date(); const defaultDateRange = { from: addDays(today, -999), // Show last 30 days by default to: today, }; const [dateRange, setDateRange] = useState(defaultDateRange); const [tempDateRange, setTempDateRange] = useState(defaultDateRange); const [isDatePickerOpen, setIsDatePickerOpen] = useState(false); const isApplyingRef = useRef(false); // Unique trends and handlers with counts const uniqueTrends = useMemo(() => { const trends = new Set(); data.forEach((row) => { trends.add(row.trend.label); }); return Array.from(trends).map((id) => ({ id, name: id, variant: data.find((row) => row.trend.label === id)?.trend.variant || 'secondary', })); }, [data]); const uniqueHandlers = useMemo(() => { const handlers = new Set(); data.forEach((row) => { handlers.add(row.handler); }); return Array.from(handlers).map((name) => ({ id: name, name, })); }, [data]); const trendCounts = useMemo(() => { return data.reduce((acc, row) => { acc[row.trend.label] = (acc[row.trend.label] || 0) + 1; return acc; }, {}); }, [data]); const handlerCounts = useMemo(() => { return data.reduce((acc, row) => { acc[row.handler] = (acc[row.handler] || 0) + 1; return acc; }, {}); }, [data]); const handleTrendChange = (isChecked, trend) => { if (isChecked) { setSelectedTrends((prev) => [...prev, trend]); } else { setSelectedTrends((prev) => prev.filter((t) => t !== trend)); } // Reset pagination to first page when filters change setPagination((prev) => ({ ...prev, pageIndex: 0 })); }; const handleHandlerChange = (isChecked, handler) => { if (isChecked) { setSelectedHandlers((prev) => [...prev, handler]); } else { setSelectedHandlers((prev) => prev.filter((h) => h !== handler)); } // Reset pagination to first page when filters change setPagination((prev) => ({ ...prev, pageIndex: 0 })); }; const handleProductClick = (product) => { setSelectedProduct(product); setIsModalOpen(true); }; // Search input handlers const handleClearInput = () => { setInputValue(''); setSearchQuery(''); // Reset pagination to first page when filters change setPagination((prev) => ({ ...prev, pageIndex: 0 })); }; // Sync inputValue with searchQuery when searchQuery changes externally useEffect(() => { setInputValue(searchQuery); }, [searchQuery]); // Update search query when input changes useEffect(() => { const timer = setTimeout(() => { if (inputValue !== searchQuery) { setSearchQuery(inputValue); } }, 300); return () => clearTimeout(timer); }, [inputValue, searchQuery]); // Date range picker handlers const handleDateRangeApply = () => { isApplyingRef.current = true; if (tempDateRange) { setDateRange(tempDateRange); } setIsDatePickerOpen(false); setTimeout(() => { isApplyingRef.current = false; }, 100); }; const handleDateRangeReset = () => { isApplyingRef.current = true; setTempDateRange(defaultDateRange); setDateRange(defaultDateRange); // Reset pagination to first page when filters change setPagination((prev) => ({ ...prev, pageIndex: 0 })); setIsDatePickerOpen(false); setTimeout(() => { isApplyingRef.current = false; }, 100); }; const handleDateRangeCancel = () => { isApplyingRef.current = true; // Reset temp state to actual state when canceling setTempDateRange(dateRange); setIsDatePickerOpen(false); setTimeout(() => { isApplyingRef.current = false; }, 100); }; const handleDateRangeSelect = (selected) => { setTempDateRange({ from: selected?.from || undefined, to: selected?.to || undefined, }); }; const ColumnInputFilter = ({ column }) => { return ( column.setFilterValue(event.target.value)} variant="sm" className="w-40" /> ); }; const columns = useMemo( () => [ { accessorKey: 'id', accessorFn: (row) => row.id, header: () => , cell: ({ row }) => , enableSorting: false, enableHiding: false, enableResizing: false, size: 40, meta: { cellClassName: '', }, }, { id: 'productInfo', accessorFn: (row) => row.productInfo, header: ({ column }) => ( } column={column} /> ), cell: (info) => { const productInfo = info.row.getValue('productInfo'); return (
image
{productInfo.title.includes('…') || productInfo.title.includes('...') ? ( handleProductClick(info.row.original)} className="text-sm font-medium text-foreground hover:text-primary leading-3.5 text-left" > {productInfo.title}

{productInfo.tooltip.replace(/[….]/g, '')}

 ) : ( handleProductClick(info.row.original)} className="text-sm font-medium text-foreground hover:text-primary leading-3.5 text-left" > {productInfo.title} )}
); }, enableSorting: true, size: 260, meta: { cellClassName: '', }, }, { id: 'stock', accessorFn: (row) => row.stock, header: ({ column }) => ( ), cell: (info) => { return
{info.row.original.stock}
; }, enableSorting: true, size: 80, meta: { cellClassName: '', }, }, { id: 'rsvd', accessorFn: (row) => row.rsvd, header: ({ column }) => ( ), cell: (info) => { return
{info.row.original.rsvd}
; }, enableSorting: true, size: 80, meta: { cellClassName: '', }, }, { id: 'tlvl', accessorFn: (row) => row.tlvl, header: ({ column }) => ( ), cell: (info) => { return
{info.row.original.tlvl}
; }, enableSorting: true, size: 80, meta: { cellClassName: '', }, }, { id: 'delta', accessorFn: (row) => row.delta, header: ({ column }) => ( ), cell: (info) => { const delta = info.row.original.delta; const variant = delta.variant; return ( {delta.label} ); }, enableSorting: true, size: 80, meta: { cellClassName: 'text-center', }, }, { id: 'sum', accessorFn: (row) => row.sum, header: ({ column }) => ( ), cell: (info) => { return info.row.original.sum; }, enableSorting: true, size: 100, meta: { cellClassName: '', }, }, { id: 'lastMoved', accessorFn: (row) => row.lastMoved, header: ({ column }) => ( ), cell: (info) => { return info.row.original.lastMoved; }, enableSorting: true, size: 120, meta: { cellClassName: '', }, }, { id: 'handler', accessorFn: (row) => row.handler, header: ({ column }) => ( ), cell: (info) => { return info.row.original.handler; }, enableSorting: true, size: 100, meta: { cellClassName: '', }, }, { id: 'trend', accessorFn: (row) => row.trend, header: ({ column }) => ( ), cell: (info) => { const trend = info.row.original.trend; const variant = trend.variant; return ( {trend.label} ); }, enableSorting: true, size: 130, meta: { cellClassName: '', }, }, { id: 'actions', header: () => '', enableSorting: false, cell: (info) => ( Actions Settings handleProductClick(info.row.original)} > Edit Delete ), size: 60, }, ], [], ); const filteredData = useMemo(() => { let result = [...data]; // Apply search filter across multiple fields if (searchQuery) { const query = searchQuery.toLowerCase().trim(); if (query) { result = result.filter((item) => { // Search in multiple fields return ( item.productInfo.title.toLowerCase().includes(query) || item.productInfo.label?.toLowerCase().includes(query) || item.handler?.toLowerCase().includes(query) || item.lastMoved?.toLowerCase().includes(query) || item.trend?.label.toLowerCase().includes(query) || item.sum?.toLowerCase().includes(query) || item.id?.toLowerCase().includes(query) ); }); } } // Apply other filters result = result.filter((row) => { const matchesTrends = selectedTrends.length === 0 || selectedTrends.includes(row.trend.label); const matchesHandlers = selectedHandlers.length === 0 || selectedHandlers.includes(row.handler); // Date range filtering let matchesDateRange = true; if (dateRange && (dateRange.from || dateRange.to)) { try { // Parse the date from "DD MMM, YYYY" format const rowDate = parse(row.lastMoved, 'dd MMM, yyyy', new Date()); if (dateRange.from && dateRange.to) { matchesDateRange = isWithinInterval(rowDate, { start: dateRange.from, end: dateRange.to, }); } else if (dateRange.from) { matchesDateRange = rowDate >= dateRange.from; } else if (dateRange.to) { matchesDateRange = rowDate <= dateRange.to; } } catch { // If date parsing fails, include the row matchesDateRange = true; } } return matchesTrends && matchesHandlers && matchesDateRange; }); return result; }, [data, searchQuery, selectedTrends, selectedHandlers, dateRange]); useEffect(() => { const selectedRowIds = Object.keys(rowSelection); if (selectedRowIds.length > 0) { toast.custom( (t) => ( toast.dismiss(t)} > Selected row IDs: {selectedRowIds.join(', ')} ), { duration: 5000, }, ); } }, [rowSelection]); const table = useReactTable({ data: filteredData, columns, state: { pagination, sorting, rowSelection, }, onPaginationChange: setPagination, onSortingChange: setSorting, onRowSelectionChange: setRowSelection, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), }); return ( {/* Search */}
{ setInputValue(e.target.value); setSearchQuery(e.target.value); }} onMouseDown={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()} />
{/* Date Range Filter */} { if (open) { // Sync temp state with actual state when opening setTempDateRange(dateRange); setIsDatePickerOpen(open); } else if (!isApplyingRef.current) { // Only handle cancel if we're not in the middle of applying/resetting setTempDateRange(dateRange); setIsDatePickerOpen(open); } }} >
{/* Trends Filter */} No trends found. {uniqueTrends.map((trend) => { const count = trendCounts[trend.id] || 0; return ( {}} data-disabled="true" > handleTrendChange(checked === true, trend.id) } size="sm" /> ); })} {/* Handler Filter */} No handler found. {uniqueHandlers.map((handler) => { const count = handlerCounts[handler.id] || 0; return ( {}} data-disabled="true" > handleHandlerChange( checked === true, handler.id, ) } size="sm" /> ); })} {/* Per Product Stock Modal */} ); }; export { CurrentStockTable };