'use client'; import * as React from 'react'; import { RiArrowDownSFill, RiArrowDownSLine, RiArrowUpSFill, RiDeleteBin6Line, RiEdit2Line, RiExpandUpDownFill, RiFilter3Fill, RiMore2Line, RiSearch2Line, RiSortDesc, } from '@remixicon/react'; import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef, type SortingState, } from '@tanstack/react-table'; import * as Avatar from './components/ui/avatar'; import * as Button from './components/ui/button'; import * as Checkbox from './components/ui/checkbox'; import * as FileFormatIcon from './components/ui/file-format-icon'; import * as Input from './components/ui/input'; import * as Kbd from './components/ui/kbd'; import * as SegmentedControl from './components/ui/segmented-control'; import * as Table from './components/ui/table'; function IconCmd(props: React.SVGProps) { return ( ); } type FileData = { id: string; fileName: string; fileType: 'pdf' | 'doc' | 'docx' | 'pptx' | 'xlsx'; fileSize: string; uploadedBy: { name: string; email: string; avatar: string; color: 'yellow' | 'blue' | 'sky' | 'purple' | 'red' | 'gray'; }; uploadDate: string; lastUpdated: string; }; const data: FileData[] = [ { id: '1', fileName: 'employee-contract.pdf', fileType: 'pdf', fileSize: '1.2 MB', uploadedBy: { name: 'James Brown', email: 'james@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/james.png', color: 'gray', }, uploadDate: 'July 15, 2023', lastUpdated: 'July 17, 2023', }, { id: '2', fileName: 'project-proposal.docx', fileType: 'docx', fileSize: '1.2 MB', uploadedBy: { name: 'Sophia Williams', email: 'sophia@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/sophia.png', color: 'yellow', }, uploadDate: 'July 17, 2023', lastUpdated: 'July 20, 2023', }, { id: '3', fileName: 'meeting-minutes.pdf', fileType: 'pdf', fileSize: '1.2 MB', uploadedBy: { name: 'Arthur Taylor', email: 'arthur@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/arthur.png', color: 'blue', }, uploadDate: 'July 19, 2023', lastUpdated: 'July 21, 2023', }, { id: '4', fileName: 'marketing-strategy.pptx', fileType: 'pptx', fileSize: '1.2 MB', uploadedBy: { name: 'Emma Wright', email: 'emma@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/emma.png', color: 'sky', }, uploadDate: 'July 21, 2023', lastUpdated: 'July 23, 2023', }, { id: '5', fileName: 'training-manual.pdf', fileType: 'pdf', fileSize: '1.2 MB', uploadedBy: { name: 'Matthew Johnson', email: 'matthew@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/matthew.png', color: 'purple', }, uploadDate: 'July 23, 2023', lastUpdated: 'July 25, 2023', }, { id: '6', fileName: 'policy-guidelines.doc', fileType: 'doc', fileSize: '1.2 MB', uploadedBy: { name: 'Laura Perez', email: 'laura@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/laura.png', color: 'red', }, uploadDate: 'July 25, 2023', lastUpdated: 'July 27, 2023', }, { id: '7', fileName: 'budget-spreadsheet.xlsx', fileType: 'xlsx', fileSize: '1.2 MB', uploadedBy: { name: 'Wei Chen', email: 'wei@alignui.com', avatar: 'https://alignui.com/images/avatar/illustration/wei.png', color: 'gray', }, uploadDate: 'July 27, 2023', lastUpdated: 'July 29, 2023', }, ]; const getFileIcon = (fileType: string) => { switch (fileType) { case 'pdf': return ; case 'doc': case 'docx': return ; case 'pptx': return ; case 'xlsx': return ; default: return null; } }; const getSortingIcon = (state: 'asc' | 'desc' | false) => { if (state === 'asc') return ; if (state === 'desc') return ; return ; }; export default function FileTable() { const [sorting, setSorting] = React.useState([]); const [filter, setFilter] = React.useState('all'); const [rowSelection, setRowSelection] = React.useState({}); const filteredData = React.useMemo(() => { if (filter === 'all') return data; if (filter === 'employee') return data.filter( (file) => file.fileName.includes('employee') || file.fileName.includes('training'), ); if (filter === 'company') return data.filter( (file) => file.fileName.includes('project') || file.fileName.includes('meeting') || file.fileName.includes('marketing') || file.fileName.includes('policy') || file.fileName.includes('budget'), ); return data; }, [filter]); const columns: ColumnDef[] = [ { id: 'select', header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label='Select all' /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label='Select row' /> ), }, { id: 'fileName', accessorKey: 'fileName', header: ({ column }) => (

File Name

), cell: ({ row }) => (

{getFileIcon(row.original.fileType)}

{row.original.fileName} {row.original.fileSize}

), }, { id: 'uploadedBy', accessorKey: 'uploadedBy.name', header: ({ column }) => (

Uploaded By

), cell: ({ row }) => (

{row.original.uploadedBy.name} {row.original.uploadedBy.email}

), }, { id: 'uploadDate', accessorKey: 'uploadDate', header: ({ column }) => (

Upload Date

), cell: ({ row }) => ( {row.original.uploadDate} ), }, { id: 'lastUpdated', accessorKey: 'lastUpdated', header: ({ column }) => (

Last Updated

), cell: ({ row }) => ( {row.original.lastUpdated} ), }, { id: 'actions', enableHiding: false, cell: ({ row }) => (

), }, ]; const table = useReactTable({ data: filteredData, columns, onSortingChange: setSorting, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), onRowSelectionChange: setRowSelection, state: { sorting, rowSelection, }, }); return (

All Employee Company

Filter Sort by

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { const customClass = header.id === 'select' ? 'pr-0' : ''; return ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext(), )} ); })} ))} {table.getRowModel().rows?.length > 0 && table.getRowModel().rows.map((row, i, arr) => ( {row.getVisibleCells().map((cell) => { const customCellClass = cell.column.id === 'select' ? 'pr-0' : ''; return ( {flexRender( cell.column.columnDef.cell, cell.getContext(), )} ); })} {i < arr.length - 1 && } ))}

); }