'use client'; import { useMemo, useState } from 'react'; import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table'; import { Building2, CheckCircle, Clock, Copy, DollarSign, Edit, Eye, Filter, MoreHorizontal, Package, Search, Settings2, Target, Trash2, User, X, XCircle, } from 'lucide-react'; import { toast } from 'sonner'; import { toAbsoluteUrl } from '@/lib/helpers'; import { Alert, AlertIcon, AlertTitle } from '@/components/ui/alert'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; 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 { DataGridColumnVisibility } from '@/components/ui/data-grid-column-visibility'; import { DataGridPagination } from '@/components/ui/data-grid-pagination'; import { DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll, } from '@/components/ui/data-grid-table'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, 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'; const mockDeals = [ { id: '1', dealNumber: 'DEAL-2024-001', contact: { name: 'Alex Johnson', email: 'alex.johnson@techcorp.com', avatar: '300-1.png', company: 'TechCorp Inc', }, dealDetails: [ { name: 'Software License', description: 'Enterprise software package', value: 25000, }, { name: 'Implementation', description: 'Setup and training services', value: 15000, }, ], total: 40000, status: 'closed_won', paymentStatus: 'paid', company: 'TechCorp Inc', dealDate: new Date('2024-01-15'), expectedClose: new Date('2024-01-20'), priority: 'high', }, { id: '2', dealNumber: 'DEAL-2024-002', contact: { name: 'Sarah Wilson', email: 'sarah.wilson@innovate.com', avatar: '300-2.png', company: 'Innovate Solutions', }, dealDetails: [ { name: 'Consulting Services', description: 'Business process optimization', value: 45000, }, ], total: 45000, status: 'negotiation', paymentStatus: 'pending', company: 'Innovate Solutions', dealDate: new Date('2024-01-16'), expectedClose: new Date('2024-01-25'), priority: 'medium', }, { id: '3', dealNumber: 'DEAL-2024-003', contact: { name: 'Mike Chen', email: 'mike.chen@startup.io', avatar: '300-3.png', company: 'Startup.io', }, dealDetails: [ { name: 'Cloud Infrastructure', description: 'AWS migration and setup', value: 35000, }, { name: 'Security Audit', description: 'Compliance and security review', value: 25000, }, ], total: 60000, status: 'proposal', paymentStatus: 'pending', company: 'Startup.io', dealDate: new Date('2024-01-17'), expectedClose: new Date('2024-01-30'), priority: 'high', }, { id: '4', dealNumber: 'DEAL-2024-004', contact: { name: 'Emma Davis', email: 'emma.davis@globaltech.com', avatar: '300-4.png', company: 'GlobalTech', }, dealDetails: [ { name: 'Data Analytics Platform', description: 'Custom BI solution', value: 75000, }, ], total: 75000, status: 'closed_lost', paymentStatus: 'failed', company: 'GlobalTech', dealDate: new Date('2024-01-18'), expectedClose: new Date('2024-01-26'), priority: 'medium', }, { id: '5', dealNumber: 'DEAL-2024-005', contact: { name: 'David Brown', email: 'david.brown@fintech.com', avatar: '300-5.png', company: 'FinTech Solutions', }, dealDetails: [ { name: 'Payment Gateway', description: 'Custom payment processing', value: 55000, }, { name: 'API Integration', description: 'Third-party service integration', value: 25000, }, ], total: 80000, status: 'qualification', paymentStatus: 'pending', company: 'FinTech Solutions', dealDate: new Date('2024-01-19'), expectedClose: new Date('2024-02-05'), priority: 'low', }, { id: '6', dealNumber: 'DEAL-2024-006', contact: { name: 'Lisa Anderson', email: 'lisa.anderson@healthcare.com', avatar: '300-6.png', company: 'Healthcare Systems', }, dealDetails: [ { name: 'Patient Management System', description: 'Healthcare software platform', value: 120000, }, { name: 'Training Program', description: 'Staff training and certification', value: 30000, }, ], total: 150000, status: 'closed_won', paymentStatus: 'paid', company: 'Healthcare Systems', dealDate: new Date('2024-01-20'), expectedClose: new Date('2024-01-25'), priority: 'high', }, { id: '7', dealNumber: 'DEAL-2024-007', contact: { name: 'James Wilson', email: 'james.wilson@retail.com', avatar: '300-7.png', company: 'Retail Innovations', }, dealDetails: [ { name: 'E-commerce Platform', description: 'Online retail solution', value: 85000, }, { name: 'Mobile App', description: 'iOS and Android applications', value: 45000, }, ], total: 130000, status: 'negotiation', paymentStatus: 'pending', company: 'Retail Innovations', dealDate: new Date('2024-01-21'), expectedClose: new Date('2024-02-10'), priority: 'high', }, { id: '8', dealNumber: 'DEAL-2024-008', contact: { name: 'Maria Garcia', email: 'maria.garcia@education.com', avatar: '300-8.png', company: 'Education First', }, dealDetails: [ { name: 'Learning Management System', description: 'Online education platform', value: 65000, }, ], total: 65000, status: 'proposal', paymentStatus: 'pending', company: 'Education First', dealDate: new Date('2024-01-22'), expectedClose: new Date('2024-02-15'), priority: 'medium', }, { id: '9', dealNumber: 'DEAL-2024-009', contact: { name: 'Robert Taylor', email: 'robert.taylor@manufacturing.com', avatar: '300-9.png', company: 'Manufacturing Plus', }, dealDetails: [ { name: 'ERP System', description: 'Enterprise resource planning', value: 200000, }, { name: 'Custom Modules', description: 'Industry-specific features', value: 50000, }, ], total: 250000, status: 'closed_lost', paymentStatus: 'failed', company: 'Manufacturing Plus', dealDate: new Date('2024-01-23'), expectedClose: new Date('2024-02-20'), priority: 'medium', }, { id: '10', dealNumber: 'DEAL-2024-010', contact: { name: 'Jennifer Lee', email: 'jennifer.lee@consulting.com', avatar: '300-10.png', company: 'Strategic Consulting', }, dealDetails: [ { name: 'Business Intelligence', description: 'Data analytics and reporting', value: 40000, }, { name: 'Dashboard Creation', description: 'Custom KPI dashboards', value: 25000, }, ], total: 65000, status: 'closed_won', paymentStatus: 'paid', company: 'Strategic Consulting', dealDate: new Date('2024-01-24'), expectedClose: new Date('2024-01-29'), priority: 'low', }, ]; const dealStatuses = [ { id: 'prospecting', name: 'Prospecting', variant: 'secondary', icon: Target, }, { id: 'qualification', name: 'Qualification', variant: 'info', icon: User }, { id: 'proposal', name: 'Proposal', variant: 'warning', icon: Package }, { id: 'negotiation', name: 'Negotiation', variant: 'warning', icon: Clock }, { id: 'closed_won', name: 'Closed Won', variant: 'success', icon: CheckCircle, }, { id: 'closed_lost', name: 'Closed Lost', variant: 'destructive', icon: XCircle, }, ]; const paymentStatuses = [ { id: 'paid', name: 'Paid', variant: 'success' }, { id: 'pending', name: 'Pending', variant: 'warning' }, { id: 'failed', name: 'Failed', variant: 'destructive' }, ]; const priorities = [ { id: 'low', name: 'Low', variant: 'secondary' }, { id: 'medium', name: 'Medium', variant: 'info' }, { id: 'high', name: 'High', variant: 'destructive' }, ]; export function RecentDeals() { const [selectedStatuses, setSelectedStatuses] = useState([]); const [selectedPaymentStatuses, setSelectedPaymentStatuses] = useState([]); const [selectedPriorities, setSelectedPriorities] = useState([]); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5, }); const [sorting, setSorting] = useState([{ id: 'dealDate', desc: true }]); const [searchQuery, setSearchQuery] = useState(''); const getStatusIcon = (status) => { const statusData = dealStatuses.find((s) => s.id === status); return statusData ? statusData.icon : Target; }; const getStatusVariant = (status) => { const statusData = dealStatuses.find((s) => s.id === status); return statusData?.variant || 'secondary'; }; const getPaymentStatusVariant = (status) => { const statusData = paymentStatuses.find((s) => s.id === status); return statusData?.variant || 'secondary'; }; const getPriorityVariant = (priority) => { const priorityData = priorities.find((p) => p.id === priority); return priorityData?.variant || 'secondary'; }; const columns = useMemo( () => [ { accessorKey: 'id', id: 'id', header: () => , cell: ({ row }) => , enableSorting: false, size: 30, meta: { headerClassName: '', cellClassName: '', }, enableHiding: false, enableResizing: false, }, { accessorKey: 'dealNumber', id: 'dealNumber', header: ({ column }) => ( ), cell: ({ row }) => { return (
{row.original.dealNumber}
); }, size: 150, enableSorting: true, enableHiding: false, enableResizing: true, }, { accessorKey: 'contact', id: 'contact', header: ({ column }) => ( ), cell: ({ row }) => { const contact = row.original.contact; return (
{contact.name[0]}
{contact.name} {contact.email}
); }, size: 200, enableSorting: true, enableHiding: true, enableResizing: true, }, { accessorKey: 'company', id: 'company', header: ({ column }) => ( ), cell: ({ row }) => { return (
{row.original.company}
); }, size: 140, enableSorting: true, enableHiding: true, enableResizing: true, }, { accessorKey: 'dealDetails', id: 'dealDetails', header: ({ column }) => ( ), cell: ({ row }) => { const dealDetails = row.original.dealDetails; return (
{dealDetails.map((detail, index) => (
{detail.name} ${detail.value.toLocaleString()}
))}
); }, size: 180, enableSorting: false, enableHiding: true, enableResizing: true, hidden: true, }, { accessorKey: 'total', id: 'total', header: ({ column }) => ( ), cell: ({ row }) => { return (
{row.original.total.toLocaleString()}
); }, size: 120, enableSorting: true, enableHiding: true, enableResizing: true, }, { accessorKey: 'status', id: 'status', header: ({ column }) => ( ), cell: ({ row }) => { const status = row.original.status; const StatusIcon = getStatusIcon(status); return ( {dealStatuses.find((s) => s.id === status)?.name} ); }, size: 140, enableSorting: true, enableHiding: true, enableResizing: true, }, { accessorKey: 'paymentStatus', id: 'paymentStatus', header: ({ column }) => ( ), cell: ({ row }) => { const paymentStatus = row.original.paymentStatus; return ( {paymentStatuses.find((s) => s.id === paymentStatus)?.name} ); }, size: 100, enableSorting: true, enableHiding: true, enableResizing: true, meta: { headerTitle: 'Payment Status', }, }, { accessorKey: 'dealDate', id: 'dealDate', header: ({ column }) => ( ), cell: ({ row }) => { return row.original.dealDate.toLocaleDateString(); }, size: 120, enableSorting: true, enableHiding: true, enableResizing: true, meta: { headerTitle: 'Deal Date', }, }, { accessorKey: 'expectedClose', id: 'expectedClose', header: ({ column }) => ( ), cell: ({ row }) => { return row.original.expectedClose.toLocaleDateString(); }, size: 130, enableSorting: true, enableHiding: true, enableResizing: true, meta: { headerTitle: 'Expected Close Date', }, }, { accessorKey: 'priority', id: 'priority', header: ({ column }) => ( ), cell: ({ row }) => { const priority = row.original.priority; return ( {priorities.find((p) => p.id === priority)?.name} ); }, size: 100, enableSorting: true, enableHiding: true, enableResizing: true, }, { accessorKey: 'actions', id: 'actions', header: () => Actions, cell: ({ row }) => { const deal = row.original; const handleViewDeal = () => { console.log('View deal:', deal.dealNumber); }; const handleEditDeal = () => { console.log('Edit deal:', deal.dealNumber); }; const handleCopyDealNumber = () => { navigator.clipboard.writeText(deal.dealNumber); toast.custom( (t) => ( toast.dismiss(t)} > Deal number copied to clipboard! ), { duration: 3000, position: 'top-center' }, ); }; const handleRemoveDeal = () => { console.log('Remove deal:', deal.dealNumber); // Add confirmation dialog here if needed }; return ( View Details Edit Deal Copy Deal # Remove Deal ); }, size: 50, enableSorting: false, enableHiding: false, enableResizing: false, }, ], [], ); const [columnOrder, setColumnOrder] = useState( columns.map((column) => column.id), ); const filteredData = useMemo(() => { return mockDeals.filter((item) => { // Filter by status const matchesStatus = !selectedStatuses?.length || selectedStatuses.includes(item.status); // Filter by payment status const matchesPaymentStatus = !selectedPaymentStatuses?.length || selectedPaymentStatuses.includes(item.paymentStatus); // Filter by priority const matchesPriority = !selectedPriorities?.length || selectedPriorities.includes(item.priority); // Filter by search query (case-insensitive) const searchLower = searchQuery.toLowerCase(); const matchesSearch = !searchQuery || item.dealNumber.toLowerCase().includes(searchLower) || item.contact.name.toLowerCase().includes(searchLower) || item.contact.email.toLowerCase().includes(searchLower) || item.company.toLowerCase().includes(searchLower); return ( matchesStatus && matchesPaymentStatus && matchesPriority && matchesSearch ); }); }, [ searchQuery, selectedStatuses, selectedPaymentStatuses, selectedPriorities, ]); const handleStatusChange = (checked, status) => { if (checked) { setSelectedStatuses((prev) => [...prev, status]); } else { setSelectedStatuses((prev) => prev.filter((s) => s !== status)); } }; const handlePaymentStatusChange = (checked, status) => { if (checked) { setSelectedPaymentStatuses((prev) => [...prev, status]); } else { setSelectedPaymentStatuses((prev) => prev.filter((s) => s !== status)); } }; const handlePriorityChange = (checked, priority) => { if (checked) { setSelectedPriorities((prev) => [...prev, priority]); } else { setSelectedPriorities((prev) => prev.filter((p) => p !== priority)); } }; const table = useReactTable({ columns, data: filteredData, pageCount: Math.ceil((filteredData?.length || 0) / pagination.pageSize), getRowId: (row) => row.id, state: { pagination, sorting, columnOrder, }, columnResizeMode: 'onChange', onColumnOrderChange: setColumnOrder, onPaginationChange: setPagination, onSortingChange: setSorting, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), initialState: { columnVisibility: { dealDetails: false, paymentStatus: false, }, }, }); return (
{/* Search */} setSearchQuery(e.target.value)} /> {searchQuery.length > 0 && ( )} {/* Status Filter */} No status found. {dealStatuses.map((status) => ( handleStatusChange(checked === true, status.id) } /> ))} {/* Payment Status Filter */} No payment status found. {paymentStatuses.map((status) => ( handlePaymentStatusChange( checked === true, status.id, ) } /> ))} {/* Priority Filter */} No priority found. {priorities.map((priority) => ( handlePriorityChange( checked === true, priority.id, ) } /> ))}
View Settings } /> ); }