Fix escaped quotes in CSV sample and data loading

src/components/data/client-list.tsx

@@ -72,7 +72,7 @@ export function ClientList() {
   if (isLoading) {
     return (
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {[...Array(3)].map((_, i: number) => (
+        {Array.from({ length: 3 }, (_, i: number) => (
           <Card key={i} className="card-primary">
             <CardHeader>
               <div className="h-4 animate-pulse rounded bg-gray-200" />

src/components/data/invoice-list.tsx

@@ -26,7 +26,6 @@ import { toast } from "sonner";
 import {
   FileText,
   Calendar,
-  DollarSign,
   Edit,
   Trash2,
   Eye,
@@ -43,12 +42,12 @@ export function InvoiceList() {
   const deleteInvoice = api.invoices.delete.useMutation({
     onSuccess: () => {
       toast.success("Invoice deleted successfully");
-      refetch();
+      void refetch();
       setDeleteDialogOpen(false);
       setInvoiceToDelete(null);
     },
     onError: (error) => {
-      toast.error(error.message || "Failed to delete invoice");
+      toast.error(error.message ?? "Failed to delete invoice");
     },
   });
 
@@ -59,7 +58,7 @@ export function InvoiceList() {
           .toLowerCase()
           .includes(searchTerm.toLowerCase()) ||
         invoice.client.name.toLowerCase().includes(searchTerm.toLowerCase()),
-    ) || [];
+    ) ?? [];
 
   const handleDelete = (invoiceId: string) => {
     setInvoiceToDelete(invoiceId);
@@ -86,7 +85,7 @@ export function InvoiceList() {
   if (isLoading) {
     return (
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {[...Array(3)].map((_, i) => (
+        {Array.from({ length: 3 }, (_, i) => (
           <Card key={i}>
             <CardHeader>
               <div className="bg-muted h-4 animate-pulse rounded" />

src/components/data/invoice-view.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { api } from "~/trpc/react";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
-import { Badge } from "~/components/ui/badge";
+
 import { StatusBadge, type StatusType } from "~/components/data/status-badge";
 import { Separator } from "~/components/ui/separator";
 import {
@@ -19,15 +19,12 @@ import {
 import { toast } from "sonner";
 import { format } from "date-fns";
 import {
-  Calendar,
   FileText,
   User,
   DollarSign,
   Trash2,
-  Edit,
   Download,
   Send,
-  ArrowLeft,
   Clock,
   MapPin,
   Mail,
@@ -36,7 +33,7 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { generateInvoicePDF } from "~/lib/pdf-export";
-import { InvoiceViewSkeleton } from "~/components/ui/skeleton";
+import { Skeleton } from "~/components/ui/skeleton";
 
 interface InvoiceViewProps {
   invoiceId: string;
@@ -130,7 +127,23 @@ export function InvoiceView({ invoiceId }: InvoiceViewProps) {
     invoice.status !== "paid";
 
   if (isLoading) {
-    return <InvoiceViewSkeleton />;
+    return (
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-4 w-24" />
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
   }
 
   if (!invoice) {

src/components/data/status-badge.tsx

@@ -47,7 +47,7 @@ export function StatusBadge({
   ...props
 }: StatusBadgeProps) {
   const statusClass = statusClassMap[status];
-  const label = children || statusLabelMap[status];
+  const label = children ?? statusLabelMap[status];
 
   return (
     <Badge className={cn(statusClass, className)} {...props}>