[V0_FILE]typescriptreact:file="app/invoices/layout.tsx" isMerged="true" import type React from "react" export default function InvoicesLayout({ children, }: { children: React.ReactNode }) { return children } [V0_FILE]typescriptreact:file="app/invoices/components/invoice-preview.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Alert, AlertDescription } from "@/components/ui/alert" import { AlertTriangle, Printer } from "lucide-react" interface InvoicePreviewProps { invoice: any } export function InvoicePreview({ invoice }: InvoicePreviewProps) { return (

{/* Header */}

Invoice {invoice.id}

{/* Warning Alert */} {invoice.warning && ( {invoice.warning.title}

{invoice.warning.description}

)} {/* Status */}

Status

{invoice.status}

{/* From/To Section */}

From

{invoice.from.name}

{invoice.from.address}

{invoice.from.city}

{invoice.from.zip}

{invoice.from.country}

{invoice.to.name}

{invoice.to.address}

{invoice.to.city}

{invoice.to.zip}

{invoice.to.country}

{/* Invoice Details */}

Invoice ID

{invoice.invoiceId}

Sent On

{invoice.sentOn}

Paid On

{invoice.paidOn}

{/* Services Table */}

Services

{invoice.services.map((service: any, idx: number) => ( ))}

Service	Qty / Hours	Cash rate	Line total
{service.name}	{service.qty}	{service.rate}	{service.total}

{/* Total */}

Total {invoice.total}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/invoices/components/invoice-list.tsx" isEdit="true" isMerged="true" "use client" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Filter } from "lucide-react" interface Invoice { id: string contractor: string role: string amount: string sentOn: string status: string } interface InvoiceListProps { invoices: Invoice[] selectedId: string onSelectId: (id: string) => void } export function InvoiceList({ invoices, selectedId, onSelectId }: InvoiceListProps) { return (

{/* Header */}

Invoices

{/* Invoice Table */}

{invoices.map((invoice) => ( onSelectId(invoice.id)} className={`border-b border-border cursor-pointer hover:bg-muted/50 transition-colors ${ selectedId === invoice.id ? "bg-muted" : "" }`} > ))}

Contractor	Sent on	Amount	Status
{invoice.contractor} {invoice.role}	{invoice.sentOn}	{invoice.amount}	{invoice.status}

) } [V0_FILE]typescriptreact:file="app/invoices/components/sidebar.tsx" "use client" import { Home, FileText, Users, PieChart, Settings, LogOut } from "lucide-react" interface SidebarProps { activeItem?: string } export function Sidebar({ activeItem = "invoices" }: SidebarProps) { const navItems = [ { id: "updates", label: "Updates", icon: Home }, { id: "invoices", label: "Invoices", icon: FileText }, { id: "documents", label: "Documents", icon: FileText }, { id: "people", label: "People", icon: Users }, { id: "equity", label: "Equity", icon: PieChart }, ] return (

{/* Logo/Company */}

Gumroad Demo

hi@example.com

{/* Navigation */} {/* Footer */}

) } [V0_FILE]typescriptreact:file="app/invoices/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { InvoiceList } from "./components/invoice-list" import { InvoicePreview } from "./components/invoice-preview" import { Sidebar } from "./components/sidebar" const mockInvoices = [ { id: "1", contractor: "Vendor Example", role: "Project-based engineer", amount: "$20,000", sentOn: "31 Aug 2025", status: "Awaiting approval", }, { id: "2", contractor: "Sarah Helpman", role: "Customer supporter", amount: "$4,976.54", sentOn: "31 Aug 2025", status: "Awaiting approval", }, { id: "3", contractor: "Designer Example", role: "Product designer", amount: "$7,834.21", sentOn: "31 Aug 2025", status: "Awaiting approval", }, { id: "4", contractor: "Onboarding Example", role: "Software engineer", amount: "$3,958.34", sentOn: "31 Aug 2025", status: "Awaiting approval", }, { id: "5", contractor: "Engineer Example", role: "Software engineer", amount: "$7,913.57", sentOn: "31 Jul 2025", status: "Approved", }, ] const mockInvoiceDetails: Record = { "1": { id: "1", status: "Awaiting approval", from: { name: "Vendor Example", address: "123 Broadway", city: "New York", zip: "10007, NY", country: "United States", }, to: { name: "Gumroad Demo, Inc.", address: "1 Acme", city: "Burbank", zip: "91505, CA", country: "United States", }, invoiceId: "1", sentOn: "31 Aug 2025", paidOn: "-", services: [ { name: "Consulting", qty: "40:00", rate: "$500 / hour", total: "$20,000", }, ], total: "$20,000", warning: { title: "Missing tax information.", description: "Invoice is not payable until contractor provides tax information.", }, }, "2": { id: "2", status: "Awaiting approval", from: { name: "Sarah Helpman", address: "456 Oak St", city: "Los Angeles", zip: "90001, CA", country: "United States", }, to: { name: "Gumroad Demo, Inc.", address: "1 Acme", city: "Burbank", zip: "91505, CA", country: "United States", }, invoiceId: "2", sentOn: "31 Aug 2025", paidOn: "-", services: [ { name: "Customer Support", qty: "20:00", rate: "$248.83 / hour", total: "$4,976.54", }, ], total: "$4,976.54", warning: { title: "Missing tax information.", description: "Invoice is not payable until contractor provides tax information.", }, }, "3": { id: "3", status: "Awaiting approval", from: { name: "Designer Example", address: "789 Elm St", city: "San Francisco", zip: "94102, CA", country: "United States", }, to: { name: "Gumroad Demo, Inc.", address: "1 Acme", city: "Burbank", zip: "91505, CA", country: "United States", }, invoiceId: "3", sentOn: "31 Aug 2025", paidOn: "-", services: [ { name: "Design Services", qty: "35:00", rate: "$223.83 / hour", total: "$7,834.21", }, ], total: "$7,834.21", warning: { title: "Missing tax information.", description: "Invoice is not payable until contractor provides tax information.", }, }, "4": { id: "4", status: "Awaiting approval", from: { name: "Onboarding Example", address: "321 Maple Ave", city: "Austin", zip: "78701, TX", country: "United States", }, to: { name: "Gumroad Demo, Inc.", address: "1 Acme", city: "Burbank", zip: "91505, CA", country: "United States", }, invoiceId: "4", sentOn: "31 Aug 2025", paidOn: "-", services: [ { name: "Onboarding Setup", qty: "25:00", rate: "$158.33 / hour", total: "$3,958.34", }, ], total: "$3,958.34", warning: { title: "Missing tax information.", description: "Invoice is not payable until contractor provides tax information.", }, }, "5": { id: "5", status: "Approved", from: { name: "Engineer Example", address: "555 Pine St", city: "Seattle", zip: "98101, WA", country: "United States", }, to: { name: "Gumroad Demo, Inc.", address: "1 Acme", city: "Burbank", zip: "91505, CA", country: "United States", }, invoiceId: "5", sentOn: "31 Jul 2025", paidOn: "15 Aug 2025", services: [ { name: "Engineering Work", qty: "45:00", rate: "$175.86 / hour", total: "$7,913.57", }, ], total: "$7,913.57", warning: null, }, } export default function InvoicesPage() { const [selectedId, setSelectedId] = useState("1") useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { const currentIndex = mockInvoices.findIndex((inv) => inv.id === selectedId) // Arrow Down - Next invoice if (e.key === "ArrowDown" && currentIndex < mockInvoices.length - 1) { e.preventDefault() setSelectedId(mockInvoices[currentIndex + 1].id) } // Arrow Up - Previous invoice if (e.key === "ArrowUp" && currentIndex > 0) { e.preventDefault() setSelectedId(mockInvoices[currentIndex - 1].id) } // J - Next (Gmail style) if (e.key === "j" && !isInputFocused()) { e.preventDefault() if (currentIndex < mockInvoices.length - 1) { setSelectedId(mockInvoices[currentIndex + 1].id) } } // K - Previous (Gmail style) if (e.key === "k" && !isInputFocused()) { e.preventDefault() if (currentIndex > 0) { setSelectedId(mockInvoices[currentIndex - 1].id) } } } const isInputFocused = () => { const activeElement = document.activeElement return activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [selectedId]) return (

{/* Left column - Invoice List */} {/* Right column - Invoice Preview */}

) }