From a00d52216ef87e2a331c67dd0035372fa1698fa0 Mon Sep 17 00:00:00 2001
From: Chandler Copeland <ccopeland@motivhealth.com>
Date: Fri, 3 Apr 2026 17:41:51 -0600
Subject: [PATCH] feat(clients): show contacts on client cards, auto-persist
 seeded signers to DB

---
 .../app/portal/(protected)/clients/page.tsx   |  3 +-
 .../_components/DocumentPageClient.tsx        | 14 ++++-
 .../src/app/portal/_components/ClientCard.tsx | 60 +++++++++++--------
 .../portal/_components/ClientsPageClient.tsx  | 32 +++++-----
 4 files changed, 67 insertions(+), 42 deletions(-)

diff --git a/teressa-copeland-homes/src/app/portal/(protected)/clients/page.tsx b/teressa-copeland-homes/src/app/portal/(protected)/clients/page.tsx
index b738470..e070c59 100644
--- a/teressa-copeland-homes/src/app/portal/(protected)/clients/page.tsx
+++ b/teressa-copeland-homes/src/app/portal/(protected)/clients/page.tsx
@@ -9,13 +9,14 @@ export default async function ClientsPage() {
       id: clients.id,
       name: clients.name,
       email: clients.email,
+      contacts: clients.contacts,
       createdAt: clients.createdAt,
       docCount: sql<number>`count(${documents.id})::int`,
       lastActivity: sql<Date | null>`max(${documents.sentAt})`,
     })
     .from(clients)
     .leftJoin(documents, eq(documents.clientId, clients.id))
-    .groupBy(clients.id, clients.name, clients.email, clients.createdAt)
+    .groupBy(clients.id, clients.name, clients.email, clients.contacts, clients.createdAt)
     .orderBy(desc(clients.createdAt));
 
   return <ClientsPageClient clients={clientRows} />;
diff --git a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/DocumentPageClient.tsx b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/DocumentPageClient.tsx
index b1c44cd..6966aa8 100644
--- a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/DocumentPageClient.tsx
+++ b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/DocumentPageClient.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { PdfViewerWrapper } from './PdfViewerWrapper';
 import { PreparePanel } from './PreparePanel';
 import type { DocumentSigner } from '@/lib/db/schema';
@@ -45,6 +45,18 @@ export function DocumentPageClient({
   const [signers, setSigners] = useState<DocumentSigner[]>(defaultSigners);
   const [unassignedFieldIds, setUnassignedFieldIds] = useState<Set<string>>(new Set());
 
+  // Persist auto-seeded signers to DB so they survive refresh
+  useEffect(() => {
+    if (initialSigners.length === 0 && defaultSigners.length > 0) {
+      fetch(`/api/documents/${docId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ signers: defaultSigners }),
+      }).catch(() => {});
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleFieldsChanged = useCallback(() => {
     setPreviewToken(null);
   }, []);
diff --git a/teressa-copeland-homes/src/app/portal/_components/ClientCard.tsx b/teressa-copeland-homes/src/app/portal/_components/ClientCard.tsx
index a8cac93..02b3394 100644
--- a/teressa-copeland-homes/src/app/portal/_components/ClientCard.tsx
+++ b/teressa-copeland-homes/src/app/portal/_components/ClientCard.tsx
@@ -1,38 +1,50 @@
 import Link from "next/link";
+import type { ClientContact } from "@/lib/db/schema";
 
 type ClientCardProps = {
   id: string;
   name: string;
   email: string;
+  contacts?: ClientContact[];
   docCount: number;
   lastActivity: Date | null;
 };
 
-export function ClientCard({
-  id,
-  name,
-  email,
-  docCount,
-  lastActivity,
-}: ClientCardProps) {
+export function ClientCard({ id, name, email, contacts = [], docCount, lastActivity }: ClientCardProps) {
   return (
-    <Link href={"/portal/clients/" + id}>
-      <div className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-shadow cursor-pointer">
-        <p className="text-[var(--navy)] font-semibold text-base">{name}</p>
-        <p className="text-gray-500 text-sm mt-1">{email}</p>
-        <p className="text-gray-400 text-xs mt-3">
-          Documents: {docCount}
-        </p>
-        <p className="text-gray-400 text-xs mt-1">
-          Last activity:{" "}
-          {lastActivity
-            ? lastActivity.toLocaleDateString("en-US", {
-                month: "short",
-                day: "numeric",
-                year: "numeric",
-              })
-            : "No activity yet"}
-        </p>
+    <Link href={"/portal/clients/" + id} style={{ textDecoration: "none" }}>
+      <div
+        style={{ backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 1px 4px rgba(0,0,0,0.07)", padding: "1.25rem", cursor: "pointer", transition: "box-shadow 0.2s" }}
+        onMouseEnter={e => (e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.12)")}
+        onMouseLeave={e => (e.currentTarget.style.boxShadow = "0 1px 4px rgba(0,0,0,0.07)")}
+      >
+        {/* Primary contact */}
+        <p style={{ color: "#1B2B4B", fontWeight: 600, fontSize: "1rem", marginBottom: "0.125rem" }}>{name}</p>
+        <p style={{ color: "#6B7280", fontSize: "0.875rem", marginBottom: contacts.length > 0 ? "0.5rem" : "0.75rem" }}>{email}</p>
+
+        {/* Additional contacts */}
+        {contacts.length > 0 && (
+          <div style={{ borderTop: "1px solid #F3F4F6", paddingTop: "0.5rem", marginBottom: "0.5rem", display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+            {contacts.map(c => (
+              <div key={c.email} style={{ display: "flex", alignItems: "baseline", gap: "0.375rem" }}>
+                <span style={{ fontSize: "0.75rem", color: "#9CA3AF", flexShrink: 0 }}>+</span>
+                <div style={{ minWidth: 0 }}>
+                  <span style={{ fontSize: "0.8125rem", color: "#374151", fontWeight: 500 }}>{c.name}</span>
+                  <span style={{ fontSize: "0.75rem", color: "#9CA3AF", marginLeft: "0.375rem" }}>{c.email}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div style={{ borderTop: "1px solid #F3F4F6", paddingTop: "0.75rem", display: "flex", justifyContent: "space-between" }}>
+          <span style={{ color: "#6B7280", fontSize: "0.75rem" }}>{docCount} document{docCount !== 1 ? "s" : ""}</span>
+          <span style={{ color: "#9CA3AF", fontSize: "0.75rem" }}>
+            {lastActivity
+              ? new Date(lastActivity).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+              : "No activity yet"}
+          </span>
+        </div>
       </div>
     </Link>
   );
diff --git a/teressa-copeland-homes/src/app/portal/_components/ClientsPageClient.tsx b/teressa-copeland-homes/src/app/portal/_components/ClientsPageClient.tsx
index b7b278d..6626467 100644
--- a/teressa-copeland-homes/src/app/portal/_components/ClientsPageClient.tsx
+++ b/teressa-copeland-homes/src/app/portal/_components/ClientsPageClient.tsx
@@ -3,41 +3,44 @@
 import { useState } from "react";
 import { ClientCard } from "./ClientCard";
 import { ClientModal } from "./ClientModal";
+import type { ClientContact } from "@/lib/db/schema";
 
 type ClientRow = {
   id: string;
   name: string;
   email: string;
+  contacts?: ClientContact[] | null;
   docCount: number;
   lastActivity: Date | null;
   createdAt: Date;
 };
 
-type ClientsPageClientProps = {
-  clients: ClientRow[];
-};
-
-export function ClientsPageClient({ clients }: ClientsPageClientProps) {
+export function ClientsPageClient({ clients }: { clients: ClientRow[] }) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-6">
-        <h1 className="text-[var(--navy)] text-2xl font-semibold">Clients</h1>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1.5rem" }}>
+        <div>
+          <h1 style={{ color: "#1B2B4B", fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.25rem" }}>Clients</h1>
+          <p style={{ color: "#6B7280", fontSize: "0.875rem" }}>{clients.length} client{clients.length !== 1 ? "s" : ""}</p>
+        </div>
         <button
           onClick={() => setIsOpen(true)}
-          className="bg-[var(--gold)] text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90"
+          className="rounded-lg px-4 py-2 text-sm font-semibold text-white transition hover:brightness-110"
+          style={{ backgroundColor: "#C9A84C" }}
         >
           + Add Client
         </button>
       </div>
 
       {clients.length === 0 ? (
-        <div className="text-center py-16">
-          <p className="text-gray-500 mb-4">No clients yet.</p>
+        <div style={{ textAlign: "center", padding: "4rem 0" }}>
+          <p style={{ color: "#6B7280", marginBottom: "1rem" }}>No clients yet.</p>
           <button
             onClick={() => setIsOpen(true)}
-            className="bg-[var(--gold)] text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90"
+            className="rounded-lg px-4 py-2 text-sm font-semibold text-white transition hover:brightness-110"
+            style={{ backgroundColor: "#C9A84C" }}
           >
             + Add your first client
           </button>
@@ -50,6 +53,7 @@ export function ClientsPageClient({ clients }: ClientsPageClientProps) {
               id={client.id}
               name={client.name}
               email={client.email}
+              contacts={client.contacts ?? []}
               docCount={client.docCount}
               lastActivity={client.lastActivity}
             />
@@ -57,11 +61,7 @@ export function ClientsPageClient({ clients }: ClientsPageClientProps) {
         </div>
       )}
 
-      <ClientModal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        mode="create"
-      />
+      <ClientModal isOpen={isOpen} onClose={() => setIsOpen(false)} mode="create" />
     </div>
   );
 }