'use client'; import { ChevronDown, ChevronRight } from 'lucide-react'; import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { cn } from '@/lib/utils'; interface TableRowData { id: string; name: string; category: string; value: number; date: string; children?: TableRowData[]; } const sampleData: TableRowData[] = [ { id: '001', name: 'Project Alpha', category: 'Development', value: 45_000, date: '2024-01-15', children: [ { id: '001-01', name: 'Frontend Module', category: 'Development', value: 15_000, date: '2024-01-16', }, { id: '001-02', name: 'Backend Module', category: 'Development', value: 20_000, date: '2024-01-21', }, { id: '001-03', name: 'Testing Suite', category: 'Development', value: 10_000, date: '2024-01-24', }, ], }, { id: '002', name: 'Marketing Campaign', category: 'Marketing', value: 28_500, date: '2024-01-18', children: [ { id: '002-01', name: 'Social Media', category: 'Marketing', value: 12_000, date: '2024-01-19', }, { id: '002-02', name: 'Email Marketing', category: 'Marketing', value: 8500, date: '2024-01-22', }, { id: '002-03', name: 'SEO Optimization', category: 'Marketing', value: 8000, date: '2024-01-23', }, ], }, { id: '003', name: 'Infrastructure Upgrade', category: 'Operations', value: 67_200, date: '2024-01-20', children: [ { id: '003-01', name: 'Cloud Migration', category: 'Operations', value: 35_000, date: '2024-01-21', }, { id: '003-02', name: 'Security Enhancement', category: 'Operations', value: 32_200, date: '2024-01-24', }, ], }, { id: '004', name: 'Customer Support', category: 'Service', value: 19_800, date: '2024-01-25', }, ]; interface AccordionRowProps { row: TableRowData; defaultOpen?: boolean; } function AccordionRow({ row, defaultOpen = false }: AccordionRowProps) { const [isOpen, setIsOpen] = useState(defaultOpen); const hasChildren = row.children && row.children.length > 0; return ( } > {row.id} {row.name} {row.category} ${row.value.toLocaleString()} {row.date} {hasChildren && (

ID Name Category Value Date {row.children?.map((childRow) => ( {childRow.id} {childRow.name} {childRow.category} ${childRow.value.toLocaleString()} {childRow.date} ))}

)} ); } export default function Table01() { return (

ID Name Category Value Date {sampleData.map((row, index) => ( ))}

); }