"use client" /** * @name Table View 04 * @description Orders table with bulk selection and actions. * Select multiple rows for bulk export, edit, or delete operations. * * @slots table-view, table-view-container, table-view-card, table-view-header, * table-view-header-content, table-view-title, table-view-description, * table-view-bulk-actions, table-view-bulk-btn, table-view-table-wrapper, * table-view-table, table-view-thead, table-view-th, table-view-tbody, * table-view-row, table-view-cell, table-view-checkbox, table-view-customer-name, * table-view-customer-email, table-view-status-badge, table-view-action-btn * @variant bulk-select * * @dependencies lucide-react * @registryDependencies card button checkbox badge */ import * as React from "react" import { Trash2, Pencil, Download, MoreHorizontal } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/registry/ui/card" import { Button } from "@/registry/ui/button" import { Checkbox } from "@/registry/ui/checkbox" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type OrderStatus = "pending" | "processing" | "shipped" | "delivered" interface Order { id: string customer: string email: string total: number status: OrderStatus date: string } interface TableView04Props { orders?: Order[] onBulkExport?: (ids: string[]) => void onBulkEdit?: (ids: string[]) => void onBulkDelete?: (ids: string[]) => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultOrders: Order[] = [ { id: "ORD-001", customer: "John Doe", email: "john@example.com", total: 299.99, status: "shipped", date: "2024-01-15" }, { id: "ORD-002", customer: "Jane Smith", email: "jane@example.com", total: 149.50, status: "pending", date: "2024-01-14" }, { id: "ORD-003", customer: "Bob Wilson", email: "bob@example.com", total: 599.00, status: "delivered", date: "2024-01-13" }, { id: "ORD-004", customer: "Alice Brown", email: "alice@example.com", total: 89.99, status: "processing", date: "2024-01-12" }, { id: "ORD-005", customer: "Chris Lee", email: "chris@example.com", total: 449.99, status: "pending", date: "2024-01-11" }, ] const statusStyles: Record = { pending: "bg-muted text-muted-foreground", processing: "bg-primary/80 text-primary-foreground", shipped: "bg-muted text-foreground", delivered: "bg-muted text-foreground font-semibold", } // ============================================================================ // COMPONENT // ============================================================================ function TableView04({ orders = defaultOrders, onBulkExport, onBulkEdit, onBulkDelete, className, idBase = "table-view-04", }: TableView04Props) { const titleId = `${idBase}-title` const [selectedIds, setSelectedIds] = React.useState>(new Set()) const allSelected = selectedIds.size === orders.length const someSelected = selectedIds.size > 0 && selectedIds.size < orders.length const toggleAll = () => { if (allSelected) { setSelectedIds(new Set()) } else { setSelectedIds(new Set(orders.map(o => o.id))) } } const toggleOne = (id: string) => { const newSet = new Set(selectedIds) if (newSet.has(id)) { newSet.delete(id) } else { newSet.add(id) } setSelectedIds(newSet) } const selectedArray = Array.from(selectedIds) return (

Orders {selectedIds.size > 0 ? `${selectedIds.size} of ${orders.length} selected` : `${orders.length} orders total` }

{selectedIds.size > 0 && (

)}

{orders.map((order) => ( ))}

{ if (el) { (el as HTMLButtonElement & { indeterminate?: boolean }).indeterminate = someSelected } }} onCheckedChange={toggleAll} aria-label="Select all" />	Order	Customer	Total	Status	Date
toggleOne(order.id)} aria-label={`Select order ${order.id}`} />	{order.id}	{order.customer} {order.email}	${order.total.toFixed(2)}	{order.status}	{order.date}

) } export default TableView04 export { TableView04, type TableView04Props }