Build fixes, email preview system

src/app/dashboard/clients/[id]/page.tsx

@@ -15,6 +15,8 @@ import {
   DollarSign,
   ArrowLeft,
 } from "lucide-react";
+import { getEffectiveInvoiceStatus } from "~/lib/invoice-status";
+import type { StoredInvoiceStatus } from "~/types/invoice";
 
 interface ClientDetailPageProps {
   params: Promise<{ id: string }>;
@@ -222,7 +224,7 @@ export default async function ClientDetailPage({
                   {client.invoices.slice(0, 3).map((invoice) => (
                     <div
                       key={invoice.id}
-                      className="card-secondary transition-colors hover:bg-gray-200/70 dark:hover:bg-gray-700/60 flex items-center justify-between rounded-lg border p-3"
+                      className="card-secondary flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-gray-200/70 dark:hover:bg-gray-700/60"
                     >
                       <div>
                         <p className="text-foreground font-medium">
@@ -238,15 +240,29 @@ export default async function ClientDetailPage({
                         </p>
                         <Badge
                           variant={
-                            invoice.status === "paid"
+                            getEffectiveInvoiceStatus(
+                              invoice.status as StoredInvoiceStatus,
+                              invoice.dueDate,
+                            ) === "paid"
                               ? "default"
-                              : invoice.status === "sent"
+                              : getEffectiveInvoiceStatus(
+                                    invoice.status as StoredInvoiceStatus,
+                                    invoice.dueDate,
+                                  ) === "sent"
                                 ? "secondary"
-                                : "outline"
+                                : getEffectiveInvoiceStatus(
+                                      invoice.status as StoredInvoiceStatus,
+                                      invoice.dueDate,
+                                    ) === "overdue"
+                                  ? "destructive"
+                                  : "outline"
                           }
                           className="text-xs"
                         >
-                          {invoice.status}
+                          {getEffectiveInvoiceStatus(
+                            invoice.status as StoredInvoiceStatus,
+                            invoice.dueDate,
+                          )}
                         </Badge>
                       </div>
                     </div>

src/app/dashboard/clients/_components/clients-data-table.tsx

@@ -96,7 +96,7 @@ export function ClientsDataTable({
             <div className="min-w-0">
               <p className="truncate font-medium">{client.name}</p>
               <p className="text-muted-foreground truncate text-sm">
-                {client.email || "—"}
+                {client.email ?? "—"}
               </p>
             </div>
           </div>
@@ -108,7 +108,7 @@ export function ClientsDataTable({
       header: ({ column }) => (
         <DataTableColumnHeader column={column} title="Phone" />
       ),
-      cell: ({ row }) => row.original.phone || "—",
+      cell: ({ row }) => row.original.phone ?? "—",
       meta: {
         headerClassName: "hidden md:table-cell",
         cellClassName: "hidden md:table-cell",
@@ -148,9 +148,9 @@ export function ClientsDataTable({
         return (
           <div className="flex items-center justify-end gap-1">
             <Link href={`/dashboard/clients/${client.id}/edit`}>
-              <Button 
-                variant="ghost" 
-                size="sm" 
+              <Button
+                variant="ghost"
+                size="sm"
                 className="h-8 w-8 p-0"
                 data-action-button="true"
               >
@@ -192,7 +192,8 @@ export function ClientsDataTable({
             <DialogTitle>Are you sure?</DialogTitle>
             <DialogDescription>
               This action cannot be undone. This will permanently delete the
-              client "{clientToDelete?.name}" and remove all associated data.
+              client &quot;{clientToDelete?.name}&quot; and remove all
+              associated data.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>

src/app/dashboard/clients/page.tsx

@@ -1,10 +1,9 @@
-import Link from "next/link";
-import { HydrateClient } from "~/trpc/server";
-import { Button } from "~/components/ui/button";
 import { Plus } from "lucide-react";
-import { ClientsTable } from "./_components/clients-table";
+import Link from "next/link";
 import { PageHeader } from "~/components/layout/page-header";
-import { PageContent, PageSection } from "~/components/layout/page-layout";
+import { Button } from "~/components/ui/button";
+import { HydrateClient } from "~/trpc/server";
+import { ClientsTable } from "./_components/clients-table";
 
 export default async function ClientsPage() {
   return (