feat: implement complete invoicing application with CSV import and PDF export

- Add comprehensive CSV import system with drag-and-drop upload and validation - Create UniversalTable component with advanced filtering, searching, and batch actions - Implement invoice management (view, edit, delete) with professional PDF export - Add client management with full CRUD operations - Set up authentication with NextAuth.js and email/password login - Configure database schema with users, clients, invoices, and invoice_items tables - Build responsive UI with shadcn/ui components and emerald branding - Add type-safe API layer with tRPC and Zod validation - Include proper error handling and user feedback with toast notifications - Set up development environment with Bun, TypeScript, and Tailwind CSS
2026-05-08 17:48:55 -04:00 · 2025-07-10 04:07:19 -04:00
commit 2d217fab47
85 changed files with 17074 additions and 0 deletions
@@ -0,0 +1,45 @@
+import { auth } from "~/server/auth";
+import { HydrateClient } from "~/trpc/server";
+import { Button } from "~/components/ui/button";
+import { ClientForm } from "~/components/client-form";
+import Link from "next/link";
+
+interface EditClientPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function EditClientPage({ params }: EditClientPageProps) {
+  const session = await auth();
+  const { id } = await params;
+
+  if (!session?.user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-teal-50">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Access Denied</h1>
+          <p className="text-muted-foreground mb-8">Please sign in to edit clients</p>
+          <Link href="/api/auth/signin">
+            <Button 
+              size="lg"
+              className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+            >
+              Sign In
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Edit Client</h1>
+        <p className="text-gray-600 mt-1 text-lg">Update client information below.</p>
+      </div>
+      <HydrateClient>
+        <ClientForm mode="edit" clientId={id} />
+      </HydrateClient>
+    </div>
+  );
+} 
@@ -0,0 +1,203 @@
+import { notFound } from "next/navigation";
+import { api } from "~/trpc/server";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Badge } from "~/components/ui/badge";
+import Link from "next/link";
+import { Edit, Mail, Phone, MapPin, Building, Calendar, DollarSign } from "lucide-react";
+
+interface ClientDetailPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function ClientDetailPage({ params }: ClientDetailPageProps) {
+  const { id } = await params;
+  
+  const client = await api.clients.getById({ id });
+  
+  if (!client) {
+    notFound();
+  }
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    }).format(date);
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(amount);
+  };
+
+  const totalInvoiced = client.invoices?.reduce((sum, invoice) => sum + invoice.totalAmount, 0) || 0;
+  const paidInvoices = client.invoices?.filter(invoice => invoice.status === "paid").length || 0;
+  const pendingInvoices = client.invoices?.filter(invoice => invoice.status === "sent").length || 0;
+
+  return (
+    <div className="p-4 md:p-6 md:ml-72 md:mr-4">
+      <div className="max-w-4xl mx-auto space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
+              {client.name}
+            </h1>
+            <p className="text-muted-foreground">Client Details</p>
+          </div>
+          <Link href={`/clients/${client.id}/edit`}>
+            <Button className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700">
+              <Edit className="mr-2 h-4 w-4" />
+              Edit Client
+            </Button>
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Client Information Card */}
+          <div className="lg:col-span-2">
+            <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="flex items-center space-x-2 text-emerald-700">
+                  <Building className="h-5 w-5" />
+                  <span>Contact Information</span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                {/* Basic Info */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {client.email && (
+                    <div className="flex items-center space-x-3">
+                      <div className="p-2 bg-emerald-100 rounded-lg">
+                        <Mail className="h-4 w-4 text-emerald-600" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-gray-500">Email</p>
+                        <p className="text-sm">{client.email}</p>
+                      </div>
+                    </div>
+                  )}
+                  
+                  {client.phone && (
+                    <div className="flex items-center space-x-3">
+                      <div className="p-2 bg-emerald-100 rounded-lg">
+                        <Phone className="h-4 w-4 text-emerald-600" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-gray-500">Phone</p>
+                        <p className="text-sm">{client.phone}</p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Address */}
+                {(client.addressLine1 ?? client.city ?? client.state) && (
+                  <div className="space-y-4">
+                    <div className="flex items-center space-x-3">
+                      <div className="p-2 bg-emerald-100 rounded-lg">
+                        <MapPin className="h-4 w-4 text-emerald-600" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-gray-500">Address</p>
+                      </div>
+                    </div>
+                    <div className="ml-11 space-y-1 text-sm">
+                      {client.addressLine1 && <p>{client.addressLine1}</p>}
+                      {client.addressLine2 && <p>{client.addressLine2}</p>}
+                      {(client.city ?? client.state ?? client.postalCode) && (
+                        <p>
+                          {[client.city, client.state, client.postalCode].filter(Boolean).join(", ")}
+                        </p>
+                      )}
+                      {client.country && <p>{client.country}</p>}
+                    </div>
+                  </div>
+                )}
+
+                {/* Client Since */}
+                <div className="flex items-center space-x-3">
+                  <div className="p-2 bg-emerald-100 rounded-lg">
+                    <Calendar className="h-4 w-4 text-emerald-600" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-gray-500">Client Since</p>
+                    <p className="text-sm">{formatDate(client.createdAt)}</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Stats Card */}
+          <div className="space-y-6">
+            <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="flex items-center space-x-2 text-emerald-700">
+                  <DollarSign className="h-5 w-5" />
+                  <span>Invoice Summary</span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="text-center">
+                  <p className="text-2xl font-bold text-emerald-600">
+                    {formatCurrency(totalInvoiced)}
+                  </p>
+                  <p className="text-sm text-gray-500">Total Invoiced</p>
+                </div>
+                
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="text-center">
+                    <p className="text-lg font-semibold text-green-600">{paidInvoices}</p>
+                    <p className="text-xs text-gray-500">Paid</p>
+                  </div>
+                  <div className="text-center">
+                    <p className="text-lg font-semibold text-orange-600">{pendingInvoices}</p>
+                    <p className="text-xs text-gray-500">Pending</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Recent Invoices */}
+            {client.invoices && client.invoices.length > 0 && (
+              <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+                <CardHeader>
+                  <CardTitle className="text-lg">Recent Invoices</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-3">
+                    {client.invoices.slice(0, 3).map((invoice) => (
+                      <div key={invoice.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                        <div>
+                          <p className="font-medium text-sm">{invoice.invoiceNumber}</p>
+                          <p className="text-xs text-gray-500">{formatDate(invoice.issueDate)}</p>
+                        </div>
+                        <div className="text-right">
+                          <p className="font-medium text-sm">{formatCurrency(invoice.totalAmount)}</p>
+                          <Badge 
+                            variant={
+                              invoice.status === "paid" ? "default" : 
+                              invoice.status === "sent" ? "secondary" : "outline"
+                            }
+                            className="text-xs"
+                          >
+                            {invoice.status}
+                          </Badge>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 
@@ -0,0 +1,40 @@
+import { auth } from "~/server/auth";
+import { HydrateClient } from "~/trpc/server";
+import { Button } from "~/components/ui/button";
+import { ClientForm } from "~/components/client-form";
+import Link from "next/link";
+
+export default async function NewClientPage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-teal-50">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Access Denied</h1>
+          <p className="text-muted-foreground mb-8">Please sign in to create clients</p>
+          <Link href="/api/auth/signin">
+            <Button 
+              size="lg"
+              className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+            >
+              Sign In
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Add Client</h1>
+        <p className="text-gray-600 mt-1 text-lg">Enter client details below to add a new client.</p>
+      </div>
+      <HydrateClient>
+        <ClientForm mode="create" />
+      </HydrateClient>
+    </div>
+  );
+} 
@@ -0,0 +1,51 @@
+import Link from "next/link";
+import { auth } from "~/server/auth";
+import { api, HydrateClient } from "~/trpc/server";
+import { Button } from "~/components/ui/button";
+import { UniversalTable } from "~/components/ui/universal-table";
+import { Plus } from "lucide-react";
+
+export default async function ClientsPage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-teal-50">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Access Denied</h1>
+          <p className="text-muted-foreground mb-8">Please sign in to view clients</p>
+          <Link href="/api/auth/signin">
+            <Button 
+              size="lg"
+              className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+            >
+              Sign In
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Prefetch clients data
+  void api.clients.getAll.prefetch();
+
+  return (
+    <div>
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
+        <div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Clients</h1>
+          <p className="text-gray-600 mt-1 text-lg">Manage your clients and their information.</p>
+        </div>
+        <Button asChild size="lg" className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl">
+          <Link href="/dashboard/clients/new">
+            <Plus className="mr-2 h-5 w-5" /> Add Client
+          </Link>
+        </Button>
+      </div>
+      <HydrateClient>
+        <UniversalTable resource="clients" />
+      </HydrateClient>
+    </div>
+  );
+} 
@@ -0,0 +1,53 @@
+import { auth } from "~/server/auth";
+import { api, HydrateClient } from "~/trpc/server";
+import { Button } from "~/components/ui/button";
+import { InvoiceForm } from "~/components/invoice-form";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+interface EditInvoicePageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function EditInvoicePage({ params }: EditInvoicePageProps) {
+  const session = await auth();
+  const { id } = await params;
+
+  if (!session?.user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-teal-50">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Access Denied</h1>
+          <p className="text-muted-foreground mb-8">Please sign in to edit invoices</p>
+          <Link href="/api/auth/signin">
+            <Button 
+              size="lg"
+              className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+            >
+              Sign In
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Prefetch invoice data
+  try {
+    await api.invoices.getById.prefetch({ id: id });
+  } catch (error) {
+    notFound();
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Edit Invoice</h1>
+        <p className="text-gray-600 mt-1 text-lg">Update the invoice details below.</p>
+      </div>
+      <HydrateClient>
+        <InvoiceForm invoiceId={id} />
+      </HydrateClient>
+    </div>
+  );
+} 
@@ -0,0 +1,63 @@
+import { auth } from "~/server/auth";
+import { api, HydrateClient } from "~/trpc/server";
+import { Button } from "~/components/ui/button";
+import { InvoiceView } from "~/components/invoice-view";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Edit } from "lucide-react";
+
+interface InvoicePageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function InvoicePage({ params }: InvoicePageProps) {
+  const session = await auth();
+  const { id } = await params;
+
+  if (!session?.user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-teal-50">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Access Denied</h1>
+          <p className="text-muted-foreground mb-8">Please sign in to view invoices</p>
+          <Link href="/api/auth/signin">
+            <Button 
+              size="lg"
+              className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+            >
+              Sign In
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Prefetch invoice data
+  try {
+    await api.invoices.getById.prefetch({ id: id });
+  } catch (error) {
+    notFound();
+  }
+
+  return (
+    <div>
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 gap-4">
+        <div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Invoice Details</h1>
+          <p className="text-gray-600 mt-1 text-lg">View and manage invoice information.</p>
+        </div>
+        <div className="flex gap-3">
+          <Button asChild variant="outline" size="lg" className="bg-white/80 border-gray-200 hover:bg-gray-50 text-gray-700 font-medium shadow-lg hover:shadow-xl">
+            <Link href={`/dashboard/invoices/${id}/edit`}>
+              <Edit className="mr-2 h-5 w-5" /> Edit Invoice
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <HydrateClient>
+        <InvoiceView invoiceId={id} />
+      </HydrateClient>
+    </div>
+  );
+} 
@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { auth } from "~/server/auth";
+import { api, HydrateClient } from "~/trpc/server";
+import { Button } from "~/components/ui/button";
+import { CSVImportPage } from "~/components/csv-import-page";
+
+export default async function ImportPage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-teal-50">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Access Denied</h1>
+          <p className="text-muted-foreground mb-8">Please sign in to import invoices</p>
+          <Link href="/api/auth/signin">
+            <Button 
+              size="lg"
+              className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+            >
+              Sign In
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Import Invoices</h1>
+        <p className="text-gray-600 mt-1 text-lg">Upload CSV files to create invoices in batch.</p>
+      </div>
+
+      <HydrateClient>
+        <CSVImportPage />
+      </HydrateClient>
+    </div>
+  );
+} 
@@ -0,0 +1,40 @@
+import { auth } from "~/server/auth";
+import { HydrateClient } from "~/trpc/server";
+import { Button } from "~/components/ui/button";
+import Link from "next/link";
+import { InvoiceForm } from "~/components/invoice-form";
+
+export default async function NewInvoicePage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-teal-50">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Access Denied</h1>
+          <p className="text-muted-foreground mb-8">Please sign in to create invoices</p>
+          <Link href="/api/auth/signin">
+            <Button 
+              size="lg"
+              className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+            >
+              Sign In
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Create Invoice</h1>
+        <p className="text-gray-600 mt-1 text-lg">Fill out the details below to create a new invoice.</p>
+      </div>
+      <HydrateClient>
+        <InvoiceForm />
+      </HydrateClient>
+    </div>
+  );
+} 
@@ -0,0 +1,58 @@
+import Link from "next/link";
+import { auth } from "~/server/auth";
+import { api, HydrateClient } from "~/trpc/server";
+import { Button } from "~/components/ui/button";
+import { UniversalTable } from "~/components/ui/universal-table";
+import { Plus, Upload } from "lucide-react";
+
+export default async function InvoicesPage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-teal-50">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Access Denied</h1>
+          <p className="text-muted-foreground mb-8">Please sign in to view invoices</p>
+          <Link href="/api/auth/signin">
+            <Button 
+              size="lg"
+              className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+            >
+              Sign In
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Prefetch invoices data
+  void api.invoices.getAll.prefetch();
+
+  return (
+    <div>
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
+        <div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Invoices</h1>
+          <p className="text-gray-600 mt-1 text-lg">Manage your invoices and payments.</p>
+        </div>
+        <div className="flex gap-3">
+          <Button asChild variant="outline" size="lg" className="bg-white/80 border-gray-200 hover:bg-gray-50 text-gray-700 font-medium shadow-lg hover:shadow-xl">
+            <Link href="/dashboard/invoices/import">
+              <Upload className="mr-2 h-5 w-5" /> Import CSV
+            </Link>
+          </Button>
+          <Button asChild size="lg" className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl">
+            <Link href="/dashboard/invoices/new">
+              <Plus className="mr-2 h-5 w-5" /> Add Invoice
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <HydrateClient>
+        <UniversalTable resource="invoices" />
+      </HydrateClient>
+    </div>
+  );
+} 
@@ -0,0 +1,18 @@
+import { Navbar } from "~/components/Navbar";
+import { Sidebar } from "~/components/Sidebar";
+import { DashboardBreadcrumbs } from "~/components/dashboard-breadcrumbs";
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      <Sidebar />
+      <main className="min-h-screen pt-24 ml-70">
+        <div className="px-8 pt-6 pb-6">
+          <DashboardBreadcrumbs />
+          {children}
+        </div>
+      </main>
+    </>
+  );
+} 
@@ -0,0 +1,191 @@
+import { redirect } from "next/navigation";
+import { auth } from "~/server/auth";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { 
+  Users, 
+  FileText, 
+  TrendingUp, 
+  Calendar,
+  Plus,
+  ArrowRight
+} from "lucide-react";
+import Link from "next/link";
+
+export default async function DashboardPage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    redirect("/auth/signin");
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-4xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
+          Welcome back, {session.user.name?.split(" ")[0] ?? "User"}!
+        </h1>
+        <p className="text-gray-600 mt-2 text-lg">
+          Here&apos;s what&apos;s happening with your invoicing business
+        </p>
+      </div>
+
+      {/* Quick Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-gray-700">Total Clients</CardTitle>
+            <div className="p-2 bg-emerald-100 rounded-lg">
+              <Users className="h-4 w-4 text-emerald-600" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-emerald-600">0</div>
+            <p className="text-xs text-gray-500">
+              +0 from last month
+            </p>
+          </CardContent>
+        </Card>
+        
+        <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-gray-700">Total Invoices</CardTitle>
+            <div className="p-2 bg-blue-100 rounded-lg">
+              <FileText className="h-4 w-4 text-blue-600" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-blue-600">0</div>
+            <p className="text-xs text-gray-500">
+              +0 from last month
+            </p>
+          </CardContent>
+        </Card>
+        
+        <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-gray-700">Revenue</CardTitle>
+            <div className="p-2 bg-teal-100 rounded-lg">
+              <TrendingUp className="h-4 w-4 text-teal-600" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-teal-600">$0</div>
+            <p className="text-xs text-gray-500">
+              +0% from last month
+            </p>
+          </CardContent>
+        </Card>
+        
+        <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-gray-700">Pending Invoices</CardTitle>
+            <div className="p-2 bg-orange-100 rounded-lg">
+              <Calendar className="h-4 w-4 text-orange-600" />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-orange-600">0</div>
+            <p className="text-xs text-gray-500">
+              Due this month
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+        <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-emerald-700">
+              <div className="p-2 bg-emerald-100 rounded-lg">
+                <Users className="h-5 w-5" />
+              </div>
+              Manage Clients
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-gray-600">
+              Add new clients and manage your existing client relationships.
+            </p>
+            <div className="flex gap-3">
+              <Button 
+                asChild
+                className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+              >
+                <Link href="/dashboard/clients/new">
+                  <Plus className="mr-2 h-4 w-4" />
+                  Add Client
+                </Link>
+              </Button>
+              <Button 
+                variant="outline" 
+                asChild
+                className="border-gray-300 text-gray-700 hover:bg-gray-50 font-medium"
+              >
+                <Link href="/dashboard/clients">
+                  View All Clients
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-emerald-700">
+              <div className="p-2 bg-emerald-100 rounded-lg">
+                <FileText className="h-5 w-5" />
+              </div>
+              Create Invoices
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-gray-600">
+              Generate professional invoices and track payments.
+            </p>
+            <div className="flex gap-3">
+              <Button 
+                asChild
+                className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
+              >
+                <Link href="/dashboard/invoices/new">
+                  <Plus className="mr-2 h-4 w-4" />
+                  New Invoice
+                </Link>
+              </Button>
+              <Button 
+                variant="outline" 
+                asChild
+                className="border-gray-300 text-gray-700 hover:bg-gray-50 font-medium"
+              >
+                <Link href="/dashboard/invoices">
+                  View All Invoices
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Recent Activity */}
+      <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+        <CardHeader>
+          <CardTitle className="text-emerald-700">Recent Activity</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-center py-12 text-gray-500">
+            <div className="p-4 bg-gray-100 rounded-full w-20 h-20 mx-auto mb-4 flex items-center justify-center">
+              <FileText className="h-8 w-8 text-gray-400" />
+            </div>
+            <p className="text-lg font-medium mb-2">No recent activity</p>
+            <p className="text-sm">Start by adding your first client or creating an invoice</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}