11e:"ExplicitChatIdProvider" 11f:I[903690,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$81","$94","$84","$83","$8e","$88","$95","$96","$86","$90","$92","$87","$89","$97","$8c","$98","$8b","$99","$8a","$9a","$9b","$8f","$91","$9c","$9d","$9e","$9f","$a0","$8d","$a1"],"$11e"] 120:I[838238,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$81","$94","$84","$83","$8e","$88","$95","$96","$86","$90","$92","$87","$89","$97","$8c","$98","$8b","$99","$8a","$9a","$9b","$8f","$91","$9c","$9d","$9e","$9f","$a0","$8d","$a1"],"SWRDataProvider"] 122:[] 123:[["b_Z8bIbG0KP6f",null],["b_vo1v6aYK5jC",null]] 124:[["b_Z8bIbG0KP6f",{"templateVersionId":null,"templateCanonId":null}],["b_vo1v6aYK5jC",{"templateVersionId":null,"templateCanonId":null}]] 125:[["b_Iued5gjP94F","$D2025-06-14T14:36:25.855Z"],["b_wnafA5ueFOt","$D2025-06-14T14:36:49.433Z"],["b_4LftJm5FFtn","$D2025-06-14T14:43:24.189Z"],["b_Qc1Xx4Ehzw8","$D2025-06-14T14:48:12.984Z"],["b_fxisSxcMWua","$D2025-06-14T14:53:05.745Z"],["b_Ki9Q4uweoq7","$D2025-06-14T15:57:05.204Z"],["b_t7Uhi1WARCA","$D2025-06-14T15:57:12.435Z"],["b_Umy1WB8Bn1m","$D2025-06-14T16:02:17.384Z"],["b_mShlu6Rnv9b","$D2025-06-14T16:04:17.463Z"],["b_ed6FXiD66hk","$D2025-06-14T16:07:02.817Z"],["b_LINO0TMBS8B","$D2025-06-14T16:08:07.831Z"],["b_WctdufrHRou","$D2025-06-14T16:14:15.680Z"],["b_5oUHzTeEbFO","$D2025-06-14T16:22:06.382Z"],["b_fEkqsbPlANL","$D2025-06-14T16:24:05.043Z"],["b_94DwgfIZAui","$D2025-06-14T16:26:21.597Z"],["b_Pdq7Wu6MD1G","$D2025-06-14T16:27:47.954Z"],["b_Ymtamvj6Flc","$D2025-06-14T16:28:01.616Z"],["b_fHgmbxHNX1m","$D2025-06-14T16:44:45.143Z"],["b_zXGAF9hCNhJ","$D2025-06-14T16:46:18.315Z"],["b_uIUAaO2F085","$D2025-06-14T16:49:15.541Z"],["b_DlH2zO2HqR1","$D2025-06-14T16:55:38.272Z"],["b_z1cWEo5xQoB","$D2025-06-14T17:01:10.826Z"],["b_QQB5cGxQGg9","$D2025-06-14T17:02:42.315Z"],["b_M3mjuLA5yeU","$D2025-06-14T17:15:45.398Z"],["b_CnyAmIBiLLF","$D2025-06-14T17:20:15.253Z"],["b_k1cvvz67xx7","$D2025-06-14T17:24:26.543Z"],["b_CrIR4y4pZYo","$D2025-06-14T17:26:39.106Z"],["b_MKkpZDhGrs3","$D2025-06-14T17:29:09.197Z"],["b_cz0rAEn6NdC","$D2025-06-14T17:34:21.662Z"],["b_yGcGbZNLktY","$D2025-06-14T17:40:01.735Z"],["b_dRAWXwaMRKh","$D2025-06-14T17:42:17.531Z"],["b_49fJwWF4vCP","$D2025-06-14T17:44:27.274Z"],["b_923xIE4ZL2Q","$D2025-06-14T17:44:55.253Z"],["b_bXDzro2y9DC","$D2025-06-14T17:51:25.482Z"],["b_uP5aPrvMeSo","$D2025-06-14T17:53:03.353Z"],["b_vvtIzFadP72","$D2025-06-14T17:56:44.254Z"],["b_Gcf7yVCGu8F","$D2025-06-14T18:02:40.492Z"],["b_hbQir1M6IZL","$D2025-06-14T18:02:55.523Z"],["b_xn5k2gmtwwt","$D2025-06-14T18:10:53.326Z"],["b_jQxhRD64wKn","$D2025-06-14T18:14:54.304Z"],["b_TQc9si4f11k","$D2025-06-14T18:18:34.565Z"],["b_CF5SJmzeXOq","$D2025-06-14T18:22:09.319Z"],["b_ignePGK85La","$D2025-07-21T11:36:19.220Z"],["b_UXBtqXH82f0","$D2025-07-21T11:43:45.736Z"],["b_8hO6nVsHfCb","$D2025-07-21T11:44:36.931Z"],["b_x0Y4sj9TDd5","$D2025-07-21T11:45:29.695Z"],["b_tBYsjQyZfd9","$D2025-07-21T14:42:58.764Z"],["b_HAgrYajNMtF","$D2025-07-21T14:43:59.955Z"],["b_FWbKyD8rLZD","$D2025-07-21T15:38:18.535Z"],["b_byThtsh3vAM","$D2025-07-21T15:38:59.405Z"],["b_nglsSF8mugS","$D2025-07-21T15:40:16.827Z"],["b_PccbfZfPPpH","$D2025-07-21T15:41:05.459Z"],["b_KdTVO16YW6F","$D2025-07-22T08:56:20.111Z"],["b_SKKYlceeSev","$D2025-07-22T08:57:12.349Z"],["b_XFOqW2Q0qFV","$D2025-07-22T08:59:19.530Z"],["b_DKdbpMgyPro","$D2025-07-22T09:01:38.017Z"],["b_ZUjbADJsUf5","$D2025-07-22T09:06:36.166Z"],["b_JD4LBMQIiKv","$D2025-07-22T09:10:02.947Z"],["b_IejlblFKfSs","$D2025-07-22T09:14:08.822Z"],["b_PcG5RWyhN7r","$D2025-07-22T09:15:34.622Z"],["b_T3UFIHQO1RP","$D2025-07-22T09:18:14.501Z"],["b_XBQ3LUxuElJ","$D2025-07-22T09:19:25.026Z"],["b_x6JiEnI9jUW","$D2025-07-22T09:21:02.134Z"],["b_ViV9OR8u1aO","$D2025-07-22T09:23:38.301Z"],["b_kIATgLekKOx","$D2025-07-22T09:26:13.053Z"],["b_TrFqOc7uPPo","$D2025-07-22T09:27:24.300Z"],["b_Z2oV7B6f1Tc","$D2025-07-22T09:28:03.049Z"],["b_BhCyYIX4fTv","$D2025-07-22T09:28:27.955Z"],["b_8hUka1CPCUL","$D2025-07-22T09:29:04.825Z"],["b_weTcpAfCKZc","$D2025-07-22T09:30:21.442Z"],["b_foQzMI93U5e","$D2025-07-22T09:32:28.973Z"],["b_4woN4i2yh0I","$D2025-07-22T09:38:59.863Z"],["b_bMlJPOYSypM","$D2025-07-22T10:11:42.302Z"],["b_OkD0dJEicMZ","$D2025-07-22T10:14:13.839Z"],["b_IYO0JQGtQq7","$D2025-07-22T10:23:29.846Z"],["b_Z0RLpHVPwG3","$D2025-07-22T10:27:04.773Z"],["b_FlSYW1amHiE","$D2025-07-22T10:31:19.215Z"],["b_Dp6Wn1wWWWk","$D2025-07-22T10:34:23.303Z"],["b_7uLtIuny2Hq","$D2025-07-22T10:57:23.042Z"],["b_Q5t5l603ucv","$D2025-07-22T11:04:27.771Z"],["b_rlbMdS2FRfK","$D2025-07-22T11:06:33.734Z"],["b_u9Ig9Gio4pA","$D2025-07-22T11:08:41.093Z"],["b_RKgOWXrFy2G","$D2025-07-22T12:27:34.760Z"],["b_TV9njJPjvgP","$D2025-07-22T12:33:01.813Z"],["b_lqboqpVGucz","$D2025-07-22T12:35:49.629Z"],["b_FwNxvhaHqNN","$D2025-07-22T15:54:52.370Z"],["b_n8wi40irnkn","$D2025-07-22T15:57:26.304Z"],["b_P1Rl3J8knE1","$D2025-07-22T16:01:45.050Z"],["b_8nC7mZ7wgsH","$D2025-07-22T16:02:13.447Z"],["b_ILMgzQccG2p","$D2025-07-22T16:05:48.473Z"],["b_zQtYrQTSJbw","$D2025-07-22T16:09:14.004Z"],["b_TCgscb7i1Jv","$D2025-07-22T16:15:07.807Z"],["b_hgKzhTDgiGN","$D2025-07-22T16:19:05.544Z"],["b_UIrj9K0W2eu","$D2025-07-22T16:20:57.989Z"],["b_z0FYXHUA8I9","$D2025-07-22T16:21:27.590Z"],["b_x4NwfJNPOGa","$D2025-07-22T16:21:56.323Z"],["b_yZVh1iWCjC6","$D2025-07-22T16:24:57.953Z"],["b_WbM7CCqCj2o","$D2025-07-22T16:26:54.386Z"],["b_gY2ZzbAwUSm","$D2025-07-22T16:30:06.607Z"],["b_Puk8y1tpUzP","$D2025-07-22T18:34:57.339Z"],["b_FAiMBZynxIQ","$D2025-07-22T18:56:30.431Z"],["b_qBX6lT2XeP1","$D2025-07-22T19:00:40.638Z"],["b_v7h4VWMxfjY","$D2025-07-22T19:11:27.714Z"],["b_VyYE95cR0Kr","$D2025-07-22T19:17:48.907Z"],["b_WGzUVW69mV5","$D2025-07-22T19:24:04.734Z"],["b_Z0vwqzrXcgo","$D2025-07-22T19:34:28.044Z"],["b_WGNvL1vNr1g","$D2025-07-22T19:36:58.023Z"],["b_nyFgVX6VJT0","$D2025-07-23T09:46:42.019Z"],["b_DsQxmgQnYXX","$D2025-07-23T09:49:53.545Z"],["b_mvjBcPL2rxw","$D2025-07-23T10:03:56.739Z"],["b_t22ZxFBkQK8","$D2025-07-23T10:06:34.588Z"],["b_4cxOBsEqlMH","$D2025-07-23T10:09:55.516Z"],["b_frGNuVuiozl","$D2025-07-23T10:47:16.810Z"],["b_athEu6fOkD6","$D2025-07-23T10:49:29.236Z"],["b_RHVVcMeGGBd","$D2025-07-23T10:53:31.543Z"],["b_xtYutg4V7fF","$D2025-07-23T11:08:38.703Z"],["b_c89cP6I07os","$D2025-07-23T11:13:23.172Z"],["b_QNRq4ifJGb6","$D2025-07-23T12:27:41.900Z"],["b_dOdVAhiTZUR","$D2025-07-23T12:35:04.835Z"],["b_shYsybqiNGu","$D2025-07-23T12:51:21.314Z"],["b_24qs12YxO6r","$D2025-07-23T12:51:24.606Z"],["b_T8eN4VDxFOv","$D2025-07-23T12:56:51.063Z"],["b_h2H4nNa93r3","$D2025-07-23T13:00:51.405Z"],["b_7ntIPCoVgXX","$D2025-07-23T14:14:32.562Z"],["b_A9hP8VjswcT","$D2025-07-23T14:23:34.680Z"],["b_bxNvZ5AHszi","$D2025-07-23T14:26:48.108Z"],["b_6fEBnq2JMIj","$D2025-07-23T14:28:43.084Z"],["b_9bumawJCYtZ","$D2025-07-23T14:31:58.915Z"],["b_SHtpMmOaT80","$D2025-07-23T14:35:32.284Z"],["b_fWs8Pywk7CL","$D2025-07-23T14:40:00.685Z"],["b_bXTqQXMY4Jz","$D2025-07-23T14:45:49.984Z"],["b_4hkrqEp03bt","$D2025-07-23T14:50:58.178Z"],["b_3pBsj1ybH76","$D2025-07-23T15:01:29.314Z"],["b_i3XdAiNboiv","$D2025-07-23T15:04:14.493Z"],["b_TQLSAeNgqEn","$D2025-07-23T15:14:20.793Z"],["b_gcZZi3BufMV","$D2025-07-23T15:16:54.736Z"],["b_hxDE5rcBggB","$D2025-07-23T15:19:01.073Z"],["b_m467eXPqcW5","$D2025-07-23T15:21:25.387Z"],["b_us3bkZOjAf6","$D2025-07-23T16:10:16.466Z"],["b_RMhPZohwSSc","$D2025-07-23T16:53:34.766Z"],["b_EXSU4fjMNRF","$D2025-07-24T10:06:37.107Z"],["b_3UVrbzc1Rp0","$D2025-07-24T10:09:26.575Z"],["b_FhExsPCe0cH","$D2025-07-24T10:09:53.775Z"],["b_1jtYhqKTaWE","$D2025-07-24T11:24:17.926Z"],["b_qwDaDK7drdB","$D2025-07-24T11:28:20.059Z"],["b_pXFaXN24Ox4","$D2025-07-24T11:32:16.875Z"],["b_fsOF52JekUj","$D2025-07-24T11:37:28.505Z"],["b_fhtPesEyI6C","$D2025-07-24T11:41:40.922Z"],["b_Yf2vWXJAdSR","$D2025-07-24T15:54:28.996Z"],["b_3yiEEc6tMCI","$D2025-07-24T16:08:55.320Z"],["b_zJCg0YESP8z","$D2025-07-24T16:18:56.150Z"],["b_NekcGk6u5AC","$D2025-07-24T16:25:36.284Z"],["b_MFQV9YjDbSN","$D2025-07-25T08:22:20.929Z"],["b_ZD2V6EtkexG","$D2025-07-25T08:23:09.871Z"],["b_1TZjDUSVaZ9","$D2025-07-25T10:07:04.830Z"],["b_PikdQQGsr5H","$D2025-07-25T10:09:36.914Z"],["b_Q8CMYJw5oYD","$D2025-07-25T10:12:00.639Z"],["b_mCnMK84ds3Y","$D2025-07-30T20:40:44.410Z"],["b_5SdBUdun2hU","$D2025-07-30T20:41:26.906Z"],["b_ywP9m09UWTv","$D2025-07-30T20:41:48.686Z"],["b_Z99GWEVIufI","$D2025-07-30T20:46:03.217Z"],["b_xpXw86BX6Af","$D2025-07-30T20:54:37.708Z"],["b_XiMdqclPazj","$D2025-07-30T20:59:50.924Z"],["b_QMeUWRSeYK3","$D2025-07-30T21:01:50.499Z"],["b_19TCcbYoX6b","$D2025-07-30T21:04:01.723Z"],["b_pTmfIxw1mDt","$D2025-07-30T21:08:26.220Z"],["b_GooMAOsCdgN","$D2025-07-30T21:11:28.155Z"],["b_lMEbBqiMPDW","$D2025-07-30T21:14:54.835Z"],["b_s5h6EanjbqR","$D2025-07-30T21:17:02.944Z"],["b_w3FeEId8urc","$D2025-07-30T21:19:10.713Z"],["b_BQrbGyfl0YL","$D2025-07-30T21:42:52.444Z"],["b_33iUIJKOl7B","$D2025-07-31T08:50:06.276Z"],["b_GBWGx98uhNd","$D2025-07-31T08:55:24.514Z"],["b_Wq2Y7Xsdozi","$D2025-07-31T08:58:35.234Z"],["b_KMnHL6EuTmO","$D2025-08-08T09:12:07.602Z"],["b_CSG9KEbwPLA","$D2025-08-08T09:36:07.703Z"],["b_Ytx6xcPIEHy","$D2025-10-02T10:34:34.864Z"],["b_CSd6bXZidJN","$D2025-10-02T10:35:15.980Z"],["b_VbP1VDgX6fM","$D2025-10-02T10:40:28.392Z"],["b_yjS6h9U221e","$D2025-10-02T10:49:04.423Z"],["b_hSxyT6ZzkZR","$D2025-10-02T10:50:30.218Z"],["b_9e6s04P1nYI","$D2025-10-02T10:51:41.744Z"],["b_OATO5XcCScB","$D2025-10-02T10:53:15.066Z"],["b_jFIMZlRuYHv","$D2025-10-02T12:09:36.750Z"],["b_Rp33H8L5SvU","$D2025-10-02T12:11:52.753Z"],["b_u9zGE2VDaaO","$D2025-10-02T12:14:12.278Z"],["b_Y42oMrkEnnG","$D2025-10-02T13:55:50.773Z"],["b_Px7R7fA1Oqq","$D2025-10-02T14:02:03.933Z"],["b_tgAct9qsJb1","$D2025-10-02T14:20:50.091Z"],["b_Nasdd7TAG0F","$D2025-10-02T14:24:09.064Z"],["b_JMszMbIL4xA","$D2025-10-02T14:39:07.361Z"],["b_bWK45nSh1rf","$D2025-10-02T14:47:17.763Z"],["b_dl2wZmNJ8pt","$D2025-10-02T14:50:58.846Z"],["b_UVrivW4qoBo","$D2025-10-02T15:00:57.581Z"],["b_NjdAm1dkCH5","$D2025-10-06T07:03:52.788Z"],["b_Z8bIbG0KP6f","$D2025-10-17T11:50:24.725Z"],["b_vo1v6aYK5jC","$D2025-10-17T11:55:07.225Z"]] 126:[["b_Z8bIbG0KP6f",false],["b_vo1v6aYK5jC",false]] 127:[["b_Z8bIbG0KP6f","$undefined"],["b_vo1v6aYK5jC","$undefined"]] 128:[["b_Z8bIbG0KP6f",null],["b_vo1v6aYK5jC",null]] 129:[["b_Z8bIbG0KP6f",true],["b_vo1v6aYK5jC",true]] 12a:[["b_Z8bIbG0KP6f",true],["b_vo1v6aYK5jC",true]] 12b:[] 12c:Tc327f,[V0_FILE]typescriptreact:file="app/invoice/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/payments/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/invoice/[id]/pay/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Badge } from "@/components/ui/badge" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" import { CreditCard, Building, Smartphone, Shield, Lock, ArrowLeft } from "lucide-react" import Link from "next/link" import { useParams } from "next/navigation" import { toast } from "@/hooks/use-toast" // Mock invoice data - in a real app, this would come from your database const getInvoiceData = (id: string) => { const invoices = { "INV-001": { id: "INV-001", client: "Acme Corp", amount: 1250.0, status: "pending", dueDate: "2024-01-15", createdDate: "2024-01-01", items: [ { description: "Web Development Services", quantity: 1, rate: 1000.0, amount: 1000.0 }, { description: "Domain Setup", quantity: 1, rate: 250.0, amount: 250.0 }, ], subtotal: 1250.0, tax: 0.0, total: 1250.0, notes: "Payment due within 30 days", businessName: "InvoiceApp Solutions", businessEmail: "billing@invoiceapp.com", }, "INV-002": { id: "INV-002", client: "TechStart Inc", amount: 850.0, status: "pending", dueDate: "2024-01-20", createdDate: "2024-01-05", items: [ { description: "Logo Design", quantity: 1, rate: 500.0, amount: 500.0 }, { description: "Brand Guidelines", quantity: 1, rate: 350.0, amount: 350.0 }, ], subtotal: 850.0, tax: 0.0, total: 850.0, notes: "Thank you for your business!", businessName: "InvoiceApp Solutions", businessEmail: "billing@invoiceapp.com", }, "INV-003": { id: "INV-003", client: "Design Studio", amount: 2100.0, status: "overdue", dueDate: "2024-01-10", createdDate: "2023-12-28", items: [ { description: "Website Redesign", quantity: 1, rate: 1800.0, amount: 1800.0 }, { description: "SEO Optimization", quantity: 1, rate: 300.0, amount: 300.0 }, ], subtotal: 2100.0, tax: 0.0, total: 2100.0, notes: "This invoice is past due. Please pay immediately.", businessName: "InvoiceApp Solutions", businessEmail: "billing@invoiceapp.com", }, } return invoices[id as keyof typeof invoices] } export default function PayInvoicePage() { const params = useParams() const invoiceId = params.id as string const invoice = getInvoiceData(invoiceId) const [paymentMethod, setPaymentMethod] = useState("credit-card") const [cardNumber, setCardNumber] = useState("") const [expiryDate, setExpiryDate] = useState("") const [cvv, setCvv] = useState("") const [cardName, setCardName] = useState("") const [billingEmail, setBillingEmail] = useState("") const [saveCard, setSaveCard] = useState(false) const [processing, setProcessing] = useState(false) if (!invoice) { return (

Invoice Not Found

The invoice you're looking for doesn't exist.

) } const handlePayment = async () => { setProcessing(true) // Simulate payment processing await new Promise((resolve) => setTimeout(resolve, 2000)) toast({ title: "Payment Successful!", description: `Payment of $${invoice.total.toFixed(2)} has been processed successfully.`, }) setProcessing(false) } const getStatusColor = (status: string) => { switch (status) { case "paid": return "bg-green-100 text-green-800" case "pending": return "bg-yellow-100 text-yellow-800" case "overdue": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } return (

{/* Header */}

Pay Invoice

Complete your payment securely

Secure Payment

{/* Invoice Details */}

Invoice Details {invoice.status}

Invoice #{invoice.id}

From:

{invoice.businessName}

{invoice.businessEmail}

To:

{invoice.client}

Invoice Date:

{invoice.createdDate}

Due Date:

{invoice.dueDate}

Items

{invoice.items.map((item, index) => (

{item.description}

{item.quantity} × ${item.rate.toFixed(2)}

${item.amount.toFixed(2)}

))}

Subtotal: ${invoice.subtotal.toFixed(2)}

{invoice.tax > 0 && (

Tax: ${invoice.tax.toFixed(2)}

)}

Total: ${invoice.total.toFixed(2)}

{invoice.notes && ( <>

Notes:

{invoice.notes}

)} {/* Payment Form */} Payment Information Choose your payment method and complete the transaction {/* Payment Methods */}

Payment Method

Credit or Debit Card

Bank Transfer

Digital Wallet (PayPal, Apple Pay)

{/* Credit Card Form */} {paymentMethod === "credit-card" && (

Email Address setBillingEmail(e.target.value)} />

Card Number setCardNumber(e.target.value)} />

Expiry Date setExpiryDate(e.target.value)} />

CVV setCvv(e.target.value)} />

Cardholder Name setCardName(e.target.value)} />

Save this card for future payments

)} {/* Bank Transfer Info */} {paymentMethod === "bank-transfer" && (

Bank Transfer Details

Account Name: InvoiceApp Solutions

Account Number: 1234567890

Routing Number: 021000021

Reference: {invoice.id}

Please include the reference number in your transfer description.

)} {/* Digital Wallet Options */} {paymentMethod === "digital-wallet" && (

)} {/* Security Notice */}

Your payment information is encrypted and secure

{/* Payment Summary */}

Total Amount: ${invoice.total.toFixed(2)}

{/* Pay Button */}

By completing this payment, you agree to our terms of service and privacy policy.

) } [V0_FILE]typescriptreact:file="app/invoice/[id]/pay/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/invoice/[id]/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/payments/vendors/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/invoice/clients/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Search, Filter, Plus, MoreHorizontal, Eye, Edit, Trash2, Users, Mail, Phone, MapPin, FileText, CreditCard, } from "lucide-react" import Link from "next/link" const clients = [ { id: "CLI-001", name: "Acme Corp", email: "billing@acmecorp.com", phone: "+1 (555) 123-4567", address: "123 Business St, Suite 100\nNew York, NY 10001", industry: "Technology", status: "active", totalInvoiced: 15750.0, totalPaid: 12500.0, outstandingBalance: 3250.0, lastInvoice: "2024-01-15", paymentTerms: "Net 30", invoiceCount: 8, }, { id: "CLI-002", name: "TechStart Inc", email: "accounts@techstart.com", phone: "+1 (555) 234-5678", address: "789 Innovation Blvd\nAustin, TX 78701", industry: "Startup", status: "active", totalInvoiced: 8500.0, totalPaid: 7650.0, outstandingBalance: 850.0, lastInvoice: "2024-01-20", paymentTerms: "Net 15", invoiceCount: 5, }, { id: "CLI-003", name: "Design Studio", email: "finance@designstudio.com", phone: "+1 (555) 345-6789", address: "321 Creative Way\nLos Angeles, CA 90210", industry: "Design", status: "active", totalInvoiced: 12600.0, totalPaid: 10500.0, outstandingBalance: 2100.0, lastInvoice: "2024-01-10", paymentTerms: "Net 30", invoiceCount: 6, }, { id: "CLI-004", name: "Marketing Pro", email: "billing@marketingpro.com", phone: "+1 (555) 456-7890", address: "654 Commerce St\nChicago, IL 60601", industry: "Marketing", status: "active", totalInvoiced: 4500.0, totalPaid: 3750.0, outstandingBalance: 750.0, lastInvoice: "2024-01-25", paymentTerms: "Net 15", invoiceCount: 3, }, { id: "CLI-005", name: "Global Enterprises", email: "ap@globalenterprises.com", phone: "+1 (555) 567-8901", address: "987 Corporate Blvd\nSeattle, WA 98101", industry: "Enterprise", status: "inactive", totalInvoiced: 25000.0, totalPaid: 25000.0, outstandingBalance: 0.0, lastInvoice: "2023-12-01", paymentTerms: "Net 45", invoiceCount: 12, }, ] const getStatusColor = (status: string) => { switch (status) { case "active": return "bg-green-100 text-green-800" case "inactive": return "bg-gray-100 text-gray-800" case "pending": return "bg-yellow-100 text-yellow-800" default: return "bg-gray-100 text-gray-800" } } const getIndustryColor = (industry: string) => { switch (industry) { case "Technology": return "bg-blue-100 text-blue-800" case "Startup": return "bg-purple-100 text-purple-800" case "Design": return "bg-pink-100 text-pink-800" case "Marketing": return "bg-orange-100 text-orange-800" case "Enterprise": return "bg-indigo-100 text-indigo-800" default: return "bg-gray-100 text-gray-800" } } export default function ClientsPage() { const [searchTerm, setSearchTerm] = useState("") const [isAddClientOpen, setIsAddClientOpen] = useState(false) const filteredClients = clients.filter( (client) => client.name.toLowerCase().includes(searchTerm.toLowerCase()) || client.email.toLowerCase().includes(searchTerm.toLowerCase()) || client.industry.toLowerCase().includes(searchTerm.toLowerCase()), ) const activeClients = clients.filter((c) => c.status === "active").length const totalInvoiced = clients.reduce((sum, client) => sum + client.totalInvoiced, 0) const totalOutstanding = clients.reduce((sum, client) => sum + client.outstandingBalance, 0) return (

Clients

Manage your client relationships and billing information