[V0_FILE]typescriptreact:file="app/dashboard/data.json" [ { "id": 1, "header": "Cover page", "type": "Cover page", "status": "In Process", "target": "18", "limit": "5", "reviewer": "Eddie Lake" }, { "id": 2, "header": "Table of contents", "type": "Table of contents", "status": "Done", "target": "29", "limit": "24", "reviewer": "Eddie Lake" }, { "id": 3, "header": "Executive summary", "type": "Narrative", "status": "Done", "target": "10", "limit": "13", "reviewer": "Eddie Lake" }, { "id": 4, "header": "Technical approach", "type": "Narrative", "status": "Done", "target": "27", "limit": "23", "reviewer": "Jamik Tashpulatov" }, { "id": 5, "header": "Design", "type": "Narrative", "status": "In Process", "target": "2", "limit": "16", "reviewer": "Jamik Tashpulatov" }, { "id": 6, "header": "Capabilities", "type": "Narrative", "status": "In Process", "target": "20", "limit": "8", "reviewer": "Jamik Tashpulatov" }, { "id": 7, "header": "Integration with existing systems", "type": "Narrative", "status": "In Process", "target": "19", "limit": "21", "reviewer": "Jamik Tashpulatov" }, { "id": 8, "header": "Innovation and Advantages", "type": "Narrative", "status": "Done", "target": "25", "limit": "26", "reviewer": "Assign reviewer" }, { "id": 9, "header": "Overview of EMR's Innovative Solutions", "type": "Technical content", "status": "Done", "target": "7", "limit": "23", "reviewer": "Assign reviewer" }, { "id": 10, "header": "Advanced Algorithms and Machine Learning", "type": "Narrative", "status": "Done", "target": "30", "limit": "28", "reviewer": "Assign reviewer" }, { "id": 11, "header": "Adaptive Communication Protocols", "type": "Narrative", "status": "Done", "target": "9", "limit": "31", "reviewer": "Assign reviewer" }, { "id": 12, "header": "Advantages Over Current Technologies", "type": "Narrative", "status": "Done", "target": "12", "limit": "0", "reviewer": "Assign reviewer" }, { "id": 13, "header": "Past Performance", "type": "Narrative", "status": "Done", "target": "22", "limit": "33", "reviewer": "Assign reviewer" }, { "id": 14, "header": "Customer Feedback and Satisfaction Levels", "type": "Narrative", "status": "Done", "target": "15", "limit": "34", "reviewer": "Assign reviewer" }, { "id": 15, "header": "Implementation Challenges and Solutions", "type": "Narrative", "status": "Done", "target": "3", "limit": "35", "reviewer": "Assign reviewer" }, { "id": 16, "header": "Security Measures and Data Protection Policies", "type": "Narrative", "status": "In Process", "target": "6", "limit": "36", "reviewer": "Assign reviewer" }, { "id": 17, "header": "Scalability and Future Proofing", "type": "Narrative", "status": "Done", "target": "4", "limit": "37", "reviewer": "Assign reviewer" }, { "id": 18, "header": "Cost-Benefit Analysis", "type": "Plain language", "status": "Done", "target": "14", "limit": "38", "reviewer": "Assign reviewer" }, { "id": 19, "header": "User Training and Onboarding Experience", "type": "Narrative", "status": "Done", "target": "17", "limit": "39", "reviewer": "Assign reviewer" }, { "id": 20, "header": "Future Development Roadmap", "type": "Narrative", "status": "Done", "target": "11", "limit": "40", "reviewer": "Assign reviewer" }, { "id": 21, "header": "System Architecture Overview", "type": "Technical content", "status": "In Process", "target": "24", "limit": "18", "reviewer": "Maya Johnson" }, { "id": 22, "header": "Risk Management Plan", "type": "Narrative", "status": "Done", "target": "15", "limit": "22", "reviewer": "Carlos Rodriguez" }, { "id": 23, "header": "Compliance Documentation", "type": "Legal", "status": "In Process", "target": "31", "limit": "27", "reviewer": "Sarah Chen" }, { "id": 24, "header": "API Documentation", "type": "Technical content", "status": "Done", "target": "8", "limit": "12", "reviewer": "Raj Patel" }, { "id": 25, "header": "User Interface Mockups", "type": "Visual", "status": "In Process", "target": "19", "limit": "25", "reviewer": "Leila Ahmadi" }, { "id": 26, "header": "Database Schema", "type": "Technical content", "status": "Done", "target": "22", "limit": "20", "reviewer": "Thomas Wilson" }, { "id": 27, "header": "Testing Methodology", "type": "Technical content", "status": "In Process", "target": "17", "limit": "14", "reviewer": "Assign reviewer" }, { "id": 28, "header": "Deployment Strategy", "type": "Narrative", "status": "Done", "target": "26", "limit": "30", "reviewer": "Eddie Lake" }, { "id": 29, "header": "Budget Breakdown", "type": "Financial", "status": "In Process", "target": "13", "limit": "16", "reviewer": "Jamik Tashpulatov" }, { "id": 30, "header": "Market Analysis", "type": "Research", "status": "Done", "target": "29", "limit": "32", "reviewer": "Sophia Martinez" }, { "id": 31, "header": "Competitor Comparison", "type": "Research", "status": "In Process", "target": "21", "limit": "19", "reviewer": "Assign reviewer" }, { "id": 32, "header": "Maintenance Plan", "type": "Technical content", "status": "Done", "target": "16", "limit": "23", "reviewer": "Alex Thompson" }, { "id": 33, "header": "User Personas", "type": "Research", "status": "In Process", "target": "27", "limit": "24", "reviewer": "Nina Patel" }, { "id": 34, "header": "Accessibility Compliance", "type": "Legal", "status": "Done", "target": "18", "limit": "21", "reviewer": "Assign reviewer" }, { "id": 35, "header": "Performance Metrics", "type": "Technical content", "status": "In Process", "target": "23", "limit": "26", "reviewer": "David Kim" }, { "id": 36, "header": "Disaster Recovery Plan", "type": "Technical content", "status": "Done", "target": "14", "limit": "17", "reviewer": "Jamik Tashpulatov" }, { "id": 37, "header": "Third-party Integrations", "type": "Technical content", "status": "In Process", "target": "25", "limit": "28", "reviewer": "Eddie Lake" }, { "id": 38, "header": "User Feedback Summary", "type": "Research", "status": "Done", "target": "20", "limit": "15", "reviewer": "Assign reviewer" }, { "id": 39, "header": "Localization Strategy", "type": "Narrative", "status": "In Process", "target": "12", "limit": "19", "reviewer": "Maria Garcia" }, { "id": 40, "header": "Mobile Compatibility", "type": "Technical content", "status": "Done", "target": "28", "limit": "31", "reviewer": "James Wilson" }, { "id": 41, "header": "Data Migration Plan", "type": "Technical content", "status": "In Process", "target": "19", "limit": "22", "reviewer": "Assign reviewer" }, { "id": 42, "header": "Quality Assurance Protocols", "type": "Technical content", "status": "Done", "target": "30", "limit": "33", "reviewer": "Priya Singh" }, { "id": 43, "header": "Stakeholder Analysis", "type": "Research", "status": "In Process", "target": "11", "limit": "14", "reviewer": "Eddie Lake" }, { "id": 44, "header": "Environmental Impact Assessment", "type": "Research", "status": "Done", "target": "24", "limit": "27", "reviewer": "Assign reviewer" }, { "id": 45, "header": "Intellectual Property Rights", "type": "Legal", "status": "In Process", "target": "17", "limit": "20", "reviewer": "Sarah Johnson" }, { "id": 46, "header": "Customer Support Framework", "type": "Narrative", "status": "Done", "target": "22", "limit": "25", "reviewer": "Jamik Tashpulatov" }, { "id": 47, "header": "Version Control Strategy", "type": "Technical content", "status": "In Process", "target": "15", "limit": "18", "reviewer": "Assign reviewer" }, { "id": 48, "header": "Continuous Integration Pipeline", "type": "Technical content", "status": "Done", "target": "26", "limit": "29", "reviewer": "Michael Chen" }, { "id": 49, "header": "Regulatory Compliance", "type": "Legal", "status": "In Process", "target": "13", "limit": "16", "reviewer": "Assign reviewer" }, { "id": 50, "header": "User Authentication System", "type": "Technical content", "status": "Done", "target": "28", "limit": "31", "reviewer": "Eddie Lake" }, { "id": 51, "header": "Data Analytics Framework", "type": "Technical content", "status": "In Process", "target": "21", "limit": "24", "reviewer": "Jamik Tashpulatov" }, { "id": 52, "header": "Cloud Infrastructure", "type": "Technical content", "status": "Done", "target": "16", "limit": "19", "reviewer": "Assign reviewer" }, { "id": 53, "header": "Network Security Measures", "type": "Technical content", "status": "In Process", "target": "29", "limit": "32", "reviewer": "Lisa Wong" }, { "id": 54, "header": "Project Timeline", "type": "Planning", "status": "Done", "target": "14", "limit": "17", "reviewer": "Eddie Lake" }, { "id": 55, "header": "Resource Allocation", "type": "Planning", "status": "In Process", "target": "27", "limit": "30", "reviewer": "Assign reviewer" }, { "id": 56, "header": "Team Structure and Roles", "type": "Planning", "status": "Done", "target": "20", "limit": "23", "reviewer": "Jamik Tashpulatov" }, { "id": 57, "header": "Communication Protocols", "type": "Planning", "status": "In Process", "target": "15", "limit": "18", "reviewer": "Assign reviewer" }, { "id": 58, "header": "Success Metrics", "type": "Planning", "status": "Done", "target": "30", "limit": "33", "reviewer": "Eddie Lake" }, { "id": 59, "header": "Internationalization Support", "type": "Technical content", "status": "In Process", "target": "23", "limit": "26", "reviewer": "Jamik Tashpulatov" }, { "id": 60, "header": "Backup and Recovery Procedures", "type": "Technical content", "status": "Done", "target": "18", "limit": "21", "reviewer": "Assign reviewer" }, { "id": 61, "header": "Monitoring and Alerting System", "type": "Technical content", "status": "In Process", "target": "25", "limit": "28", "reviewer": "Daniel Park" }, { "id": 62, "header": "Code Review Guidelines", "type": "Technical content", "status": "Done", "target": "12", "limit": "15", "reviewer": "Eddie Lake" }, { "id": 63, "header": "Documentation Standards", "type": "Technical content", "status": "In Process", "target": "27", "limit": "30", "reviewer": "Jamik Tashpulatov" }, { "id": 64, "header": "Release Management Process", "type": "Planning", "status": "Done", "target": "22", "limit": "25", "reviewer": "Assign reviewer" }, { "id": 65, "header": "Feature Prioritization Matrix", "type": "Planning", "status": "In Process", "target": "19", "limit": "22", "reviewer": "Emma Davis" }, { "id": 66, "header": "Technical Debt Assessment", "type": "Technical content", "status": "Done", "target": "24", "limit": "27", "reviewer": "Eddie Lake" }, { "id": 67, "header": "Capacity Planning", "type": "Planning", "status": "In Process", "target": "21", "limit": "24", "reviewer": "Jamik Tashpulatov" }, { "id": 68, "header": "Service Level Agreements", "type": "Legal", "status": "Done", "target": "26", "limit": "29", "reviewer": "Assign reviewer" } ] [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" "use client" import * as React from "react" import { ArrowUpCircleIcon, BarChartIcon, CameraIcon, ClipboardListIcon, DatabaseIcon, FileCodeIcon, FileIcon, FileTextIcon, FolderIcon, HelpCircleIcon, LayoutDashboardIcon, ListIcon, SearchIcon, SettingsIcon, UsersIcon, } from "lucide-react" import { NavDocuments } from '@/components/nav-documents' import { NavMain } from '@/components/nav-main' import { NavSecondary } from '@/components/nav-secondary' import { NavUser } from '@/components/nav-user' import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from '@/components/ui/sidebar' const data = { user: { name: "shadcn", email: "m@example.com", avatar: "/avatars/shadcn.jpg", }, navMain: [ { title: "Dashboard", url: "#", icon: LayoutDashboardIcon, }, { title: "Lifecycle", url: "#", icon: ListIcon, }, { title: "Analytics", url: "#", icon: BarChartIcon, }, { title: "Projects", url: "#", icon: FolderIcon, }, { title: "Team", url: "#", icon: UsersIcon, }, ], navClouds: [ { title: "Capture", icon: CameraIcon, isActive: true, url: "#", items: [ { title: "Active Proposals", url: "#", }, { title: "Archived", url: "#", }, ], }, { title: "Proposal", icon: FileTextIcon, url: "#", items: [ { title: "Active Proposals", url: "#", }, { title: "Archived", url: "#", }, ], }, { title: "Prompts", icon: FileCodeIcon, url: "#", items: [ { title: "Active Proposals", url: "#", }, { title: "Archived", url: "#", }, ], }, ], navSecondary: [ { title: "Settings", url: "#", icon: SettingsIcon, }, { title: "Get Help", url: "#", icon: HelpCircleIcon, }, { title: "Search", url: "#", icon: SearchIcon, }, ], documents: [ { name: "Data Library", url: "#", icon: DatabaseIcon, }, { name: "Reports", url: "#", icon: ClipboardListIcon, }, { name: "Word Assistant", url: "#", icon: FileIcon, }, ], } export function AppSidebar({ ...props }: React.ComponentProps) { return ( Acme Inc. ) } [V0_FILE]typescriptreact:file="components/chart-area-interactive.tsx" "use client" import * as React from "react" import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" import { useIsMobile } from '@/hooks/use-mobile' import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card' import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from '@/components/ui/chart' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select' import { ToggleGroup, ToggleGroupItem, } from '@/components/ui/toggle-group' const chartData = [ { date: "2024-04-01", desktop: 222, mobile: 150 }, { date: "2024-04-02", desktop: 97, mobile: 180 }, { date: "2024-04-03", desktop: 167, mobile: 120 }, { date: "2024-04-04", desktop: 242, mobile: 260 }, { date: "2024-04-05", desktop: 373, mobile: 290 }, { date: "2024-04-06", desktop: 301, mobile: 340 }, { date: "2024-04-07", desktop: 245, mobile: 180 }, { date: "2024-04-08", desktop: 409, mobile: 320 }, { date: "2024-04-09", desktop: 59, mobile: 110 }, { date: "2024-04-10", desktop: 261, mobile: 190 }, { date: "2024-04-11", desktop: 327, mobile: 350 }, { date: "2024-04-12", desktop: 292, mobile: 210 }, { date: "2024-04-13", desktop: 342, mobile: 380 }, { date: "2024-04-14", desktop: 137, mobile: 220 }, { date: "2024-04-15", desktop: 120, mobile: 170 }, { date: "2024-04-16", desktop: 138, mobile: 190 }, { date: "2024-04-17", desktop: 446, mobile: 360 }, { date: "2024-04-18", desktop: 364, mobile: 410 }, { date: "2024-04-19", desktop: 243, mobile: 180 }, { date: "2024-04-20", desktop: 89, mobile: 150 }, { date: "2024-04-21", desktop: 137, mobile: 200 }, { date: "2024-04-22", desktop: 224, mobile: 170 }, { date: "2024-04-23", desktop: 138, mobile: 230 }, { date: "2024-04-24", desktop: 387, mobile: 290 }, { date: "2024-04-25", desktop: 215, mobile: 250 }, { date: "2024-04-26", desktop: 75, mobile: 130 }, { date: "2024-04-27", desktop: 383, mobile: 420 }, { date: "2024-04-28", desktop: 122, mobile: 180 }, { date: "2024-04-29", desktop: 315, mobile: 240 }, { date: "2024-04-30", desktop: 454, mobile: 380 }, { date: "2024-05-01", desktop: 165, mobile: 220 }, { date: "2024-05-02", desktop: 293, mobile: 310 }, { date: "2024-05-03", desktop: 247, mobile: 190 }, { date: "2024-05-04", desktop: 385, mobile: 420 }, { date: "2024-05-05", desktop: 481, mobile: 390 }, { date: "2024-05-06", desktop: 498, mobile: 520 }, { date: "2024-05-07", desktop: 388, mobile: 300 }, { date: "2024-05-08", desktop: 149, mobile: 210 }, { date: "2024-05-09", desktop: 227, mobile: 180 }, { date: "2024-05-10", desktop: 293, mobile: 330 }, { date: "2024-05-11", desktop: 335, mobile: 270 }, { date: "2024-05-12", desktop: 197, mobile: 240 }, { date: "2024-05-13", desktop: 197, mobile: 160 }, { date: "2024-05-14", desktop: 448, mobile: 490 }, { date: "2024-05-15", desktop: 473, mobile: 380 }, { date: "2024-05-16", desktop: 338, mobile: 400 }, { date: "2024-05-17", desktop: 499, mobile: 420 }, { date: "2024-05-18", desktop: 315, mobile: 350 }, { date: "2024-05-19", desktop: 235, mobile: 180 }, { date: "2024-05-20", desktop: 177, mobile: 230 }, { date: "2024-05-21", desktop: 82, mobile: 140 }, { date: "2024-05-22", desktop: 81, mobile: 120 }, { date: "2024-05-23", desktop: 252, mobile: 290 }, { date: "2024-05-24", desktop: 294, mobile: 220 }, { date: "2024-05-25", desktop: 201, mobile: 250 }, { date: "2024-05-26", desktop: 213, mobile: 170 }, { date: "2024-05-27", desktop: 420, mobile: 460 }, { date: "2024-05-28", desktop: 233, mobile: 190 }, { date: "2024-05-29", desktop: 78, mobile: 130 }, { date: "2024-05-30", desktop: 340, mobile: 280 }, { date: "2024-05-31", desktop: 178, mobile: 230 }, { date: "2024-06-01", desktop: 178, mobile: 200 }, { date: "2024-06-02", desktop: 470, mobile: 410 }, { date: "2024-06-03", desktop: 103, mobile: 160 }, { date: "2024-06-04", desktop: 439, mobile: 380 }, { date: "2024-06-05", desktop: 88, mobile: 140 }, { date: "2024-06-06", desktop: 294, mobile: 250 }, { date: "2024-06-07", desktop: 323, mobile: 370 }, { date: "2024-06-08", desktop: 385, mobile: 320 }, { date: "2024-06-09", desktop: 438, mobile: 480 }, { date: "2024-06-10", desktop: 155, mobile: 200 }, { date: "2024-06-11", desktop: 92, mobile: 150 }, { date: "2024-06-12", desktop: 492, mobile: 420 }, { date: "2024-06-13", desktop: 81, mobile: 130 }, { date: "2024-06-14", desktop: 426, mobile: 380 }, { date: "2024-06-15", desktop: 307, mobile: 350 }, { date: "2024-06-16", desktop: 371, mobile: 310 }, { date: "2024-06-17", desktop: 475, mobile: 520 }, { date: "2024-06-18", desktop: 107, mobile: 170 }, { date: "2024-06-19", desktop: 341, mobile: 290 }, { date: "2024-06-20", desktop: 408, mobile: 450 }, { date: "2024-06-21", desktop: 169, mobile: 210 }, { date: "2024-06-22", desktop: 317, mobile: 270 }, { date: "2024-06-23", desktop: 480, mobile: 530 }, { date: "2024-06-24", desktop: 132, mobile: 180 }, { date: "2024-06-25", desktop: 141, mobile: 190 }, { date: "2024-06-26", desktop: 434, mobile: 380 }, { date: "2024-06-27", desktop: 448, mobile: 490 }, { date: "2024-06-28", desktop: 149, mobile: 200 }, { date: "2024-06-29", desktop: 103, mobile: 160 }, { date: "2024-06-30", desktop: 446, mobile: 400 }, ] const chartConfig = { visitors: { label: "Visitors", }, desktop: { label: "Desktop", color: "hsl(var(--chart-1))", }, mobile: { label: "Mobile", color: "hsl(var(--chart-2))", }, } satisfies ChartConfig export function ChartAreaInteractive() { const isMobile = useIsMobile() const [timeRange, setTimeRange] = React.useState("30d") React.useEffect(() => { if (isMobile) { setTimeRange("7d") } }, [isMobile]) const filteredData = chartData.filter((item) => { const date = new Date(item.date) const referenceDate = new Date("2024-06-30") let daysToSubtract = 90 if (timeRange === "30d") { daysToSubtract = 30 } else if (timeRange === "7d") { daysToSubtract = 7 } const startDate = new Date(referenceDate) startDate.setDate(startDate.getDate() - daysToSubtract) return date >= startDate }) return ( Total Visitors Total for the last 3 months Last 3 months

Last 3 months Last 30 days Last 7 days

{ const date = new Date(value) return date.toLocaleDateString("en-US", { month: "short", day: "numeric", }) }} /> { return new Date(value).toLocaleDateString("en-US", { month: "short", day: "numeric", }) }} indicator="dot" /> } /> ) } [V0_FILE]typescriptreact:file="components/data-table.tsx" "use client" import * as React from "react" import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors, type DragEndEvent, type UniqueIdentifier, } from "@dnd-kit/core" import { restrictToVerticalAxis } from "@dnd-kit/modifiers" import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { ColumnDef, ColumnFiltersState, Row, SortingState, VisibilityState, flexRender, getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table" import { CheckCircle2Icon, CheckCircleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, ColumnsIcon, GripVerticalIcon, LoaderIcon, MoreVerticalIcon, PlusIcon, TrendingUpIcon, } from "lucide-react" import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" import { toast } from "sonner" import { z } from "zod" import { useIsMobile } from '@/hooks/use-mobile' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from '@/components/ui/chart' import { Checkbox } from '@/components/ui/checkbox' import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select' import { Separator } from '@/components/ui/separator' import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from '@/components/ui/sheet' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table' import { Tabs, TabsContent, TabsList, TabsTrigger, } from '@/components/ui/tabs' export const schema = z.object({ id: z.number(), header: z.string(), type: z.string(), status: z.string(), target: z.string(), limit: z.string(), reviewer: z.string(), }) // Create a separate component for the drag handle function DragHandle({ id }: { id: number }) { const { attributes, listeners } = useSortable({ id, }) return ( ) } const columns: ColumnDef>[] = [ { id: "drag", header: () => null, cell: ({ row }) => , }, { id: "select", header: ({ table }) => (

table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" />

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

row.toggleSelected(!!value)} aria-label="Select row" />

), enableSorting: false, enableHiding: false, }, { accessorKey: "header", header: "Header", cell: ({ row }) => { return }, enableHiding: false, }, { accessorKey: "type", header: "Section Type", cell: ({ row }) => (

{row.original.type}

), }, { accessorKey: "status", header: "Status", cell: ({ row }) => ( {row.original.status === "Done" ? ( ) : ( )} {row.original.status} ), }, { accessorKey: "target", header: () =>

Target

, cell: ({ row }) => ( ), }, { accessorKey: "limit", header: () =>

Limit

, cell: ({ row }) => ( ), }, { accessorKey: "reviewer", header: "Reviewer", cell: ({ row }) => { const isAssigned = row.original.reviewer !== "Assign reviewer" if (isAssigned) { return row.original.reviewer } return ( <> Reviewer ) }, }, { id: "actions", cell: () => ( Edit Make a copy Favorite Delete ), }, ] function DraggableRow({ row }: { row: Row> }) { const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.original.id, }) return ( {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} ) } export function DataTable({ data: initialData, }: { data: z.infer[] }) { const [data, setData] = React.useState(() => initialData) const [rowSelection, setRowSelection] = React.useState({}) const [columnVisibility, setColumnVisibility] = React.useState({}) const [columnFilters, setColumnFilters] = React.useState( [] ) const [sorting, setSorting] = React.useState([]) const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10, }) const sortableId = React.useId() const sensors = useSensors( useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}) ) const dataIds = React.useMemo( () => data?.map(({ id }) => id) || [], [data] ) const table = useReactTable({ data, columns, state: { sorting, columnVisibility, rowSelection, columnFilters, pagination, }, getRowId: (row) => row.id.toString(), enableRowSelection: true, onRowSelectionChange: setRowSelection, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, onColumnVisibilityChange: setColumnVisibility, onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), }) function handleDragEnd(event: DragEndEvent) { const { active, over } = event if (active && over && active.id !== over.id) { setData((data) => { const oldIndex = dataIds.indexOf(active.id) const newIndex = dataIds.indexOf(over.id) return arrayMove(data, oldIndex, newIndex) }) } } return (

View Outline Past Performance{" "} 3 Key Personnel{" "} 2 Focus Documents

{table .getAllColumns() .filter( (column) => typeof column.accessorFn !== "undefined" && column.getCanHide() ) .map((column) => { return ( column.toggleVisibility(!!value) } > {column.id} ) })}

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} ) })} ))} {table.getRowModel().rows?.length ? ( {table.getRowModel().rows.map((row) => ( ))} ) : ( No results. )}

{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.

Rows per page

Page {table.getState().pagination.pageIndex + 1} of{" "} {table.getPageCount()}

) } const chartData = [ { month: "January", desktop: 186, mobile: 80 }, { month: "February", desktop: 305, mobile: 200 }, { month: "March", desktop: 237, mobile: 120 }, { month: "April", desktop: 73, mobile: 190 }, { month: "May", desktop: 209, mobile: 130 }, { month: "June", desktop: 214, mobile: 140 }, ] const chartConfig = { desktop: { label: "Desktop", color: "var(--primary)", }, mobile: { label: "Mobile", color: "var(--primary)", }, } satisfies ChartConfig function TableCellViewer({ item }: { item: z.infer }) { const isMobile = useIsMobile() return ( {item.header} Showing total visitors for the last 6 months

{!isMobile && ( <> value.slice(0, 3)} hide /> } />

Trending up by 5.2% this month{" "}

Showing total visitors for the last 6 months. This is just some random text to test the layout. It spans multiple lines and should wrap around.

)}

Header

Type

Status

Target

Limit

Reviewer

) } [V0_FILE]typescriptreact:file="components/nav-documents.tsx" "use client" import { FolderIcon, MoreHorizontalIcon, ShareIcon, type LucideIcon, } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, useSidebar, } from '@/components/ui/sidebar' export function NavDocuments({ items, }: { items: { name: string url: string icon: LucideIcon }[] }) { const { isMobile } = useSidebar() return ( Documents {items.map((item) => ( {item.name} More Open Share ))} More ) } [V0_FILE]typescriptreact:file="components/nav-main.tsx" "use client" import { MailIcon, PlusCircleIcon, type LucideIcon } from "lucide-react" import { Button } from '@/components/ui/button' import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from '@/components/ui/sidebar' export function NavMain({ items, }: { items: { title: string url: string icon?: LucideIcon }[] }) { return ( Quick Create {items.map((item) => ( {item.icon && } {item.title} ))} ) } [V0_FILE]typescriptreact:file="components/nav-secondary.tsx" "use client" import * as React from "react" import { LucideIcon } from "lucide-react" import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from '@/components/ui/sidebar' export function NavSecondary({ items, ...props }: { items: { title: string url: string icon: LucideIcon }[] } & React.ComponentPropsWithoutRef) { return ( {items.map((item) => ( {item.title} ))} ) } [V0_FILE]typescriptreact:file="components/nav-user.tsx" "use client" import { BellIcon, CreditCardIcon, LogOutIcon, MoreVerticalIcon, UserCircleIcon, } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage, } from '@/components/ui/avatar' import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from '@/components/ui/sidebar' export function NavUser({ user, }: { user: { name: string email: string avatar: string } }) { const { isMobile } = useSidebar() return ( CN

{user.name} {user.email}

Account Billing Notifications Log out ) } [V0_FILE]typescriptreact:file="components/section-cards.tsx" import { TrendingDownIcon, TrendingUpIcon } from "lucide-react" import { Badge } from '@/components/ui/badge' import { Card, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card' export function SectionCards() { return (

Total Revenue $1,250.00

+12.5%

Trending up this month

Visitors for the last 6 months

New Customers 1,234

-20%

Down 20% this period

Acquisition needs attention

Active Accounts 45,678

+12.5%

Strong user retention

Engagement exceed targets

Growth Rate 4.5%

+4.5%

Steady performance

Meets growth projections

) } [V0_FILE]typescriptreact:file="components/site-header.tsx" import { Separator } from '@/components/ui/separator' import { SidebarTrigger } from '@/components/ui/sidebar' export function SiteHeader() { return (

Documents

) } [V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" import * as React from "react" const MOBILE_BREAKPOINT = 768 export function useIsMobile() { const [isMobile, setIsMobile] = React.useState(undefined) React.useEffect(() => { const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) const onChange = () => { setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) } mql.addEventListener("change", onChange) setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) return () => mql.removeEventListener("change", onChange) }, []) return !!isMobile } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" import { AppSidebar } from '@/components/app-sidebar' import { ChartAreaInteractive } from '@/components/chart-area-interactive' import { DataTable } from '@/components/data-table' import { SectionCards } from '@/components/section-cards' import { SiteHeader } from '@/components/site-header' import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar' import data from "./data.json" export default function Page() { return (

) }