@wealthx/shadcn 1.3.2 → 1.3.4

package/src/components/ui/opportunity-summary-tab.tsx

@@ -1,7 +1,24 @@
 import * as React from "react";
 import { useState } from "react";
-import { ChevronDown, ChevronUp, Mail, Pencil, Phone } from "lucide-react";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Download,
+  FileText,
+  Mail,
+  Pencil,
+  Phone,
+} from "lucide-react";
+import { Badge } from "./badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
 import { Button } from "./button";
+import { Checkbox } from "./checkbox";
 import { cn } from "@/lib/utils";
 import { formatCurrency } from "@/lib/format-currency";
 import { PROPERTY_ASSET_TYPES } from "@/lib/opportunity-constants";
@@ -56,6 +73,20 @@ import type {
 // Types
 // ---------------------------------------------------------------------------
 
+export interface DocumentItem {
+  id: string;
+  name: string;
+  documentType: string;
+  /** Which applicant uploaded this document. */
+  uploadedBy: "main" | "co";
+  uploadedAt: string;
+  status: "verified" | "pending" | "rejected";
+  /** PDF URL — opens in browser when title is clicked. */
+  url?: string;
+  /** Document checklist category this satisfies (e.g. "Income Verification"). */
+  checklistItem?: string;
+}
+
 export interface OpportunitySummaryTabProps {
   /** Whether this is a joint application (shows Co-Applicant tab). */
   isJoint?: boolean;
@@ -85,6 +116,16 @@ export interface OpportunitySummaryTabProps {
   onCoIncomeChange?: (data: IncomeFormData) => void;
   coExpenses?: ExpensesFormData;
   onCoExpensesChange?: (data: ExpensesFormData) => void;
+
+  // ── Documents ─────────────────────────────────────────────────────────────
+  documents?: DocumentItem[];
+  /** Called with the selected documents when advisor clicks Download. */
+  onDocumentsDownload?: (docs: DocumentItem[]) => void;
+  /** Called when advisor changes a document's verification status. */
+  onDocumentStatusChange?: (
+    docId: string,
+    status: DocumentItem["status"],
+  ) => void;
 }
 
 // ---------------------------------------------------------------------------
@@ -128,25 +169,15 @@ function lvrColorClass(pct: number): string {
   return "text-destructive";
 }
 
-/** Serviceability label + badge class based on net monthly surplus. */
+/** Serviceability label + badge variant based on net monthly surplus. */
 function serviceabilityInfo(surplus: number): {
   label: string;
-  badgeClass: string;
+  variant: "success" | "warning" | "destructive";
 } {
   if (surplus > 1500)
-    return {
-      label: "Likely Serviceable",
-      badgeClass: "bg-emerald-50 text-emerald-700 border border-emerald-200",
-    };
-  if (surplus > 0)
-    return {
-      label: "Borderline",
-      badgeClass: "bg-amber-50 text-amber-700 border border-amber-200",
-    };
-  return {
-    label: "At Risk",
-    badgeClass: "bg-red-50 text-destructive border border-red-200",
-  };
+    return { label: "Likely Serviceable", variant: "success" };
+  if (surplus > 0) return { label: "Borderline", variant: "warning" };
+  return { label: "At Risk", variant: "destructive" };
 }
 
 /**
@@ -303,9 +334,7 @@ function HeroBand({
             {surplusDisplay}
           </span>
         </div>
-        <div className={cn("px-2.5 py-1 text-xs font-medium", svc.badgeClass)}>
-          {svc.label}
-        </div>
+        <Badge variant={svc.variant}>{svc.label}</Badge>
       </div>
     </div>
   );
@@ -313,9 +342,6 @@ function HeroBand({
 
 // ---------------------------------------------------------------------------
 // ApplicantCardTab (internal)
-// Replaces ApplicantAccordionTab — uses bordered card pattern for consistency.
-// AboutCard / IncomeCard / ExpensesCard each carry their own border so we float
-// the section label + edit button ABOVE each card (no outer bordered wrapper).
 // ---------------------------------------------------------------------------
 
 interface ApplicantCardTabProps {
@@ -351,69 +377,226 @@ function ApplicantCardTab({
   return (
     <div className="flex flex-col gap-4 py-4">
       {/* ── About ── */}
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center justify-between">
+      <div className="border border-border">
+        <div className="flex items-center justify-between px-4 py-2.5">
           <FinancialSectionLabel>About</FinancialSectionLabel>
           <SectionEditButton onClick={onEditAbout} title="Edit About" />
         </div>
-        <AboutCard
-          title={about.title}
-          firstName={about.firstName}
-          lastName={about.lastName}
-          phone={about.phone}
-          email={about.email}
-          dob={about.dob}
-          gender={about.gender}
-          maritalStatus={about.maritalStatus}
-          numDependants={about.numDependants}
-          citizenStatus={about.citizenStatus}
-          residentialAddress={about.residentialAddress}
-          residentialStatus={about.residentialStatus}
-          timeAtAddressYears={about.timeAtAddressYears}
-          timeAtAddressMonths={about.timeAtAddressMonths}
-          driversLicence={about.driversLicence}
-          passport={about.passport}
-          propertyInTrust={about.propertyInTrust}
-          companyOwnership={about.companyOwnership}
-        />
+        <div className="border-t border-border">
+          <AboutCard
+            borderless
+            title={about.title}
+            firstName={about.firstName}
+            lastName={about.lastName}
+            phone={about.phone}
+            email={about.email}
+            dob={about.dob}
+            gender={about.gender}
+            maritalStatus={about.maritalStatus}
+            numDependants={about.numDependants}
+            dependants={about.dependants}
+            citizenStatus={about.citizenStatus}
+            residentialAddress={about.residentialAddress}
+            residentialStatus={about.residentialStatus}
+            timeAtAddressYears={about.timeAtAddressYears}
+            timeAtAddressMonths={about.timeAtAddressMonths}
+            driversLicence={about.driversLicence}
+            passport={about.passport}
+            propertyInTrust={about.propertyInTrust}
+            companyOwnership={about.companyOwnership}
+          />
+        </div>
       </div>
 
       {/* ── Income ── */}
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center justify-between">
+      <div className="border border-border">
+        <div className="flex items-center justify-between px-4 py-2.5">
           <FinancialSectionLabel>Income</FinancialSectionLabel>
           <SectionEditButton onClick={onEditIncome} title="Edit Income" />
         </div>
-        <IncomeCard
-          items={income.items.map((i) => ({
-            incomeType: i.incomeType,
-            jobTitle: i.jobTitle,
-            companyName: i.companyName,
-            companyAddress: i.companyAddress,
-            startDate: i.startDate,
-            stillInPosition: i.stillInPosition,
-            endDate: i.endDate,
-            companyType: i.companyType,
-            amountLabel: `${formatCurrency(i.incomeAmount)} / ${i.frequency}`,
-          }))}
-          totalMonthly={totalMonthlyIncome}
-        />
+        <div className="border-t border-border">
+          <IncomeCard
+            borderless
+            items={income.items.map((i) => ({
+              incomeType: i.incomeType,
+              jobTitle: i.jobTitle,
+              companyName: i.companyName,
+              companyAddress: i.companyAddress,
+              startDate: i.startDate,
+              stillInPosition: i.stillInPosition,
+              endDate: i.endDate,
+              companyType: i.companyType,
+              amountLabel: `${formatCurrency(i.incomeAmount)} / ${i.frequency}`,
+            }))}
+            totalMonthly={totalMonthlyIncome}
+          />
+        </div>
       </div>
 
       {/* ── Expenses ── */}
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center justify-between">
+      <div className="border border-border">
+        <div className="flex items-center justify-between px-4 py-2.5">
           <FinancialSectionLabel>Expenses</FinancialSectionLabel>
           <SectionEditButton onClick={onEditExpenses} title="Edit Expenses" />
         </div>
-        <ExpensesCard
-          items={expenses.items.map((e) => ({
-            expenseType: e.expenseType,
-            amountLabel: `${formatCurrency(e.amount)} / ${e.frequency}`,
-          }))}
-          totalMonthly={totalMonthlyExpenses}
-        />
+        <div className="border-t border-border">
+          <ExpensesCard
+            borderless
+            items={expenses.items.map((e) => ({
+              expenseType: e.expenseType,
+              amountLabel: `${formatCurrency(e.amount)} / ${e.frequency}`,
+            }))}
+            totalMonthly={totalMonthlyExpenses}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DocRow — single document row (flat list or grouped)
+// ---------------------------------------------------------------------------
+
+const STATUS_OPTIONS = ["verified", "pending", "rejected"] as const;
+
+const STATUS_CONFIG: Record<
+  DocumentItem["status"],
+  {
+    Icon: React.ComponentType<{ className?: string }>;
+    label: string;
+    iconCls: string;
+    triggerCls: string;
+  }
+> = {
+  verified: {
+    Icon: CheckCircle2,
+    label: "Verified",
+    iconCls: "text-success",
+    triggerCls: "border-success text-success",
+  },
+  pending: {
+    Icon: AlertCircle,
+    label: "Pending",
+    iconCls: "text-warning",
+    triggerCls: "border-warning text-warning",
+  },
+  rejected: {
+    Icon: AlertCircle,
+    label: "Rejected",
+    iconCls: "text-destructive",
+    triggerCls: "border-destructive text-destructive",
+  },
+};
+
+interface DocRowProps {
+  doc: DocumentItem;
+  status: DocumentItem["status"];
+  isSelected: boolean;
+  uploaderName: string;
+  onRowClick: () => void;
+  onStatusChange: (status: DocumentItem["status"]) => void;
+}
+
+function DocRow({
+  doc,
+  status,
+  isSelected,
+  uploaderName,
+  onRowClick,
+  onStatusChange,
+}: DocRowProps) {
+  const {
+    Icon: StatusIcon,
+    label: statusLabel,
+    iconCls,
+    triggerCls,
+  } = STATUS_CONFIG[status];
+
+  return (
+    <div
+      onClick={onRowClick}
+      className={cn(
+        "flex min-h-[44px] cursor-pointer items-center gap-3 px-4 transition-colors",
+        isSelected ? "bg-primary/5" : "hover:bg-muted/40",
+      )}
+    >
+      <span className="shrink-0" onClick={(e) => e.stopPropagation()}>
+        <Checkbox checked={isSelected} onCheckedChange={() => onRowClick()} />
+      </span>
+      <FileText className="size-4 shrink-0 text-muted-foreground" />
+
+      {/* Name + subtitle */}
+      <div className="flex min-w-0 flex-1 flex-col">
+        {doc.url ? (
+          <a
+            href={doc.url}
+            target="_blank"
+            rel="noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            className="w-fit text-label-medium text-foreground underline-offset-2 hover:underline"
+          >
+            {doc.name}
+          </a>
+        ) : (
+          <span className="text-label-medium text-foreground">{doc.name}</span>
+        )}
+        <span className="text-xs text-muted-foreground">
+          {doc.documentType}
+          {doc.checklistItem ? ` · ${doc.checklistItem}` : ""}
+        </span>
       </div>
+
+      {/* Uploader */}
+      <Badge variant="secondary" className="shrink-0">
+        {uploaderName}
+      </Badge>
+
+      {/* Status — select */}
+      <span className="shrink-0" onClick={(e) => e.stopPropagation()}>
+        <Select
+          value={status}
+          onValueChange={(v) => onStatusChange(v as DocumentItem["status"])}
+        >
+          <SelectTrigger
+            size="sm"
+            className={cn("h-7 w-[116px] gap-1.5 text-xs", triggerCls)}
+          >
+            <StatusIcon className={cn("size-3.5", iconCls)} />
+            {statusLabel}
+          </SelectTrigger>
+          <SelectContent>
+            {STATUS_OPTIONS.map((v) => {
+              const { Icon, label, iconCls } = STATUS_CONFIG[v];
+              return (
+                <SelectItem key={v} value={v}>
+                  <span className="flex items-center gap-1.5">
+                    <Icon className={cn("size-3.5", iconCls)} />
+                    {label}
+                  </span>
+                </SelectItem>
+              );
+            })}
+          </SelectContent>
+        </Select>
+      </span>
+
+      {/* Upload date */}
+      <span className="shrink-0 text-xs text-muted-foreground">
+        {doc.uploadedAt}
+      </span>
+
+      {/* Per-row download */}
+      {doc.url && (
+        <a
+          href={doc.url}
+          download
+          onClick={(e) => e.stopPropagation()}
+          className="shrink-0 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <Download className="size-4" />
+        </a>
+      )}
     </div>
   );
 }
@@ -442,6 +625,9 @@ export function OpportunitySummaryTab({
   onCoIncomeChange,
   coExpenses,
   onCoExpensesChange,
+  documents = [],
+  onDocumentsDownload,
+  onDocumentStatusChange,
 }: OpportunitySummaryTabProps) {
   // ── Portal container — scopes edit modal overlays inside the drawer ────────
   const [portalEl, setPortalEl] = useState<HTMLDivElement | null>(null);
@@ -451,8 +637,69 @@ export function OpportunitySummaryTab({
     "joint",
   );
 
-  // ── Loan Scenario collapse ─────────────────────────────────────────────────
-  const [loanScenarioExpanded, setLoanScenarioExpanded] = useState(true);
+  // ── Document selection for download ──────────────────────────────────────
+  const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>(new Set());
+
+  function toggleDocSelection(id: string) {
+    setSelectedDocIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  // ── Document status overrides (local optimistic state) ────────────────────
+  const [docStatusOverrides, setDocStatusOverrides] = useState<
+    Record<string, DocumentItem["status"]>
+  >({});
+
+  function handleDocStatusChange(
+    docId: string,
+    status: DocumentItem["status"],
+  ) {
+    setDocStatusOverrides((prev) => ({ ...prev, [docId]: status }));
+    onDocumentStatusChange?.(docId, status);
+  }
+
+  function effectiveStatus(doc: DocumentItem): DocumentItem["status"] {
+    return docStatusOverrides[doc.id] ?? doc.status;
+  }
+
+  // ── Checklist progress — derived from docs grouped by checklistItem ────────
+  const checklistProgress = React.useMemo(() => {
+    const map = new Map<
+      string,
+      { count: number; hasVerified: boolean; hasPending: boolean }
+    >();
+    for (const doc of documents) {
+      if (!doc.checklistItem) continue;
+      const st = docStatusOverrides[doc.id] ?? doc.status;
+      const entry = map.get(doc.checklistItem) ?? {
+        count: 0,
+        hasVerified: false,
+        hasPending: false,
+      };
+      entry.count += 1;
+      if (st === "verified") entry.hasVerified = true;
+      if (st === "pending") entry.hasPending = true;
+      map.set(doc.checklistItem, entry);
+    }
+    return Array.from(map.entries()).map(([name, data]) => ({ name, ...data }));
+  }, [documents, docStatusOverrides]);
+
+  // ── Group docs by checklistItem; null when flat list is preferred ────────
+  const groupedDocs = React.useMemo(() => {
+    if (documents.length <= 5 || !documents.some((d) => d.checklistItem))
+      return null;
+    const groups: Record<string, DocumentItem[]> = {};
+    for (const doc of documents) {
+      const key = doc.checklistItem ?? "Other";
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(doc);
+    }
+    return groups;
+  }, [documents]);
 
   // ── Modal open state (internal) ───────────────────────────────────────────
   const [editLoanOpen, setEditLoanOpen] = useState(false);
@@ -520,76 +767,58 @@ export function OpportunitySummaryTab({
         netSurplus={netSurplus}
       />
 
-      {/* ── Loan Scenario — collapsible bordered card ── */}
+      {/* ── Loan Scenario ── */}
       <div className="mb-4 border border-border">
         <div className="flex items-center justify-between px-4 py-2.5">
-          {/* Left: toggle area (label + chevron) */}
-          <Button
-            type="button"
-            variant="ghost"
-            className="h-auto flex-1 justify-start gap-2 px-0 text-left"
-            onClick={() => setLoanScenarioExpanded((v) => !v)}
-            aria-expanded={loanScenarioExpanded}
-          >
-            <FinancialSectionLabel>Loan Scenario</FinancialSectionLabel>
-            {loanScenarioExpanded ? (
-              <ChevronUp className="size-3.5 text-muted-foreground" />
-            ) : (
-              <ChevronDown className="size-3.5 text-muted-foreground" />
-            )}
-          </Button>
-          {/* Right: edit button */}
+          <FinancialSectionLabel>Loan Scenario</FinancialSectionLabel>
           <SectionEditButton
             onClick={() => setEditLoanOpen(true)}
             title="Edit Loan Scenario"
           />
         </div>
-
-        {loanScenarioExpanded && (
-          <div className="grid grid-cols-4 gap-x-6 gap-y-4 border-t border-border p-4">
-            <FinancialDetailField label="Lending Type" value="Home Loan" />
-            <FinancialDetailField
-              label="Purpose of Loan"
-              value={loanScenario.loanPurpose}
-            />
-            <FinancialDetailField
-              label="Loan Amount"
-              value={formatCurrency(loanScenario.loanAmount)}
-            />
-            <FinancialDetailField
-              label="Property Estimate"
-              value={formatCurrency(loanScenario.propertyEstimate)}
-            />
-            <FinancialDetailField
-              label="Cash / Deposit"
-              value={formatCurrency(loanScenario.cashEquity)}
-            />
-            <FinancialDetailField label="Property Address" value="—" />
-            <FinancialDetailField
-              label="Duration"
-              value={`${loanScenario.loanDuration} years`}
-            />
-            <FinancialDetailField
-              label="Important Features"
-              value={
-                [
-                  loanScenario.featureVariableRate && "Variable Rate",
-                  loanScenario.featureFixedRate && "Fixed Rate",
-                  loanScenario.featureRedrawFacility && "Redraw Facility",
-                  loanScenario.feature100Offset && "100% Offset",
-                  loanScenario.featureSplitLoan && "Split Loan",
-                  loanScenario.featureInterestOnly && "Interest Only",
-                ]
-                  .filter(Boolean)
-                  .join(", ") || "—"
-              }
-            />
-            <FinancialDetailField
-              label="Top Priorities"
-              value={loanScenario.priorities.join(", ") || "—"}
-            />
-          </div>
-        )}
+        <div className="grid grid-cols-4 gap-x-6 gap-y-4 border-t border-border p-4">
+          <FinancialDetailField label="Lending Type" value="Home Loan" />
+          <FinancialDetailField
+            label="Purpose of Loan"
+            value={loanScenario.loanPurpose}
+          />
+          <FinancialDetailField
+            label="Loan Amount"
+            value={formatCurrency(loanScenario.loanAmount)}
+          />
+          <FinancialDetailField
+            label="Property Estimate"
+            value={formatCurrency(loanScenario.propertyEstimate)}
+          />
+          <FinancialDetailField
+            label="Cash / Deposit"
+            value={formatCurrency(loanScenario.cashEquity)}
+          />
+          <FinancialDetailField label="Property Address" value="—" />
+          <FinancialDetailField
+            label="Duration"
+            value={`${loanScenario.loanDuration} years`}
+          />
+          <FinancialDetailField
+            label="Important Features"
+            value={
+              [
+                loanScenario.featureVariableRate && "Variable Rate",
+                loanScenario.featureFixedRate && "Fixed Rate",
+                loanScenario.featureRedrawFacility && "Redraw Facility",
+                loanScenario.feature100Offset && "100% Offset",
+                loanScenario.featureSplitLoan && "Split Loan",
+                loanScenario.featureInterestOnly && "Interest Only",
+              ]
+                .filter(Boolean)
+                .join(", ") || "—"
+            }
+          />
+          <FinancialDetailField
+            label="Top Priorities"
+            value={loanScenario.priorities.join(", ") || "—"}
+          />
+        </div>
       </div>
 
       {/* ── Applicant sub-tabs — filled variant, full width ── */}
@@ -671,16 +900,114 @@ export function OpportunitySummaryTab({
             </div>
           </div>
 
-          {/* Documents — placed early so brokers can immediately check
-              what's been uploaded vs what's still missing */}
+          {/* Documents */}
           <div className="border border-border">
-            <div className="px-4 py-2.5">
+            {/* Section header */}
+            <div className="flex min-h-[40px] items-center justify-between px-4">
               <FinancialSectionLabel>Documents</FinancialSectionLabel>
+              <div className="flex items-center gap-3">
+                {selectedDocIds.size > 0 && (
+                  <Button
+                    size="sm"
+                    variant="outline-secondary"
+                    className="h-7 gap-1.5 text-xs"
+                    onClick={() => {
+                      const selected = documents.filter((d) =>
+                        selectedDocIds.has(d.id),
+                      );
+                      onDocumentsDownload?.(selected);
+                    }}
+                  >
+                    <Download className="size-3.5" />
+                    Download ({selectedDocIds.size})
+                  </Button>
+                )}
+                {documents.length > 0 && (
+                  <span className="text-xs text-muted-foreground">
+                    {documents.length} file
+                    {documents.length !== 1 ? "s" : ""}
+                  </span>
+                )}
+              </div>
             </div>
-            <div className="p-4">
-              <p className="text-body-small text-muted-foreground">
-                No documents uploaded yet.
-              </p>
+
+            {/* Checklist progress — derived from docs grouped by checklistItem */}
+            {checklistProgress.length > 0 && (
+              <div className="flex flex-wrap gap-x-4 gap-y-1.5 border-t border-border px-4 py-3">
+                {checklistProgress.map((cat) => (
+                  <span
+                    key={cat.name}
+                    className={cn(
+                      "flex items-center gap-1 text-xs",
+                      cat.hasVerified ? "text-success" : "text-warning",
+                    )}
+                  >
+                    {cat.hasVerified ? (
+                      <CheckCircle2 className="size-3.5 shrink-0" />
+                    ) : (
+                      <AlertCircle className="size-3.5 shrink-0" />
+                    )}
+                    {cat.name}
+                    <span className="text-muted-foreground">({cat.count})</span>
+                  </span>
+                ))}
+              </div>
+            )}
+
+            {/* Document list */}
+            <div className="border-t border-border">
+              {documents.length === 0 ? (
+                <p className="px-4 py-4 text-body-small text-muted-foreground">
+                  No documents uploaded yet.
+                </p>
+              ) : groupedDocs ? (
+                // Grouped by checklistItem
+                Object.entries(groupedDocs).map(([category, docs]) => (
+                  <div key={category}>
+                    <div className="bg-muted/30 px-4 py-1.5 text-xs font-medium text-muted-foreground">
+                      {category}
+                    </div>
+                    <div className="flex flex-col divide-y divide-border">
+                      {docs.map((doc) => (
+                        <DocRow
+                          key={doc.id}
+                          doc={doc}
+                          status={effectiveStatus(doc)}
+                          isSelected={selectedDocIds.has(doc.id)}
+                          uploaderName={
+                            doc.uploadedBy === "main"
+                              ? mainAbout.firstName || "Main"
+                              : coAbout?.firstName || "Co"
+                          }
+                          onRowClick={() => toggleDocSelection(doc.id)}
+                          onStatusChange={(s) =>
+                            handleDocStatusChange(doc.id, s)
+                          }
+                        />
+                      ))}
+                    </div>
+                  </div>
+                ))
+              ) : (
+                // Flat list
+                <div className="flex flex-col divide-y divide-border">
+                  {documents.map((doc) => (
+                    <DocRow
+                      key={doc.id}
+                      doc={doc}
+                      status={effectiveStatus(doc)}
+                      isSelected={selectedDocIds.has(doc.id)}
+                      uploaderName={
+                        doc.uploadedBy === "main"
+                          ? mainAbout.firstName || "Main"
+                          : coAbout?.firstName || "Co"
+                      }
+                      onRowClick={() => toggleDocSelection(doc.id)}
+                      onStatusChange={(s) => handleDocStatusChange(doc.id, s)}
+                    />
+                  ))}
+                </div>
+              )}
             </div>
           </div>
 
@@ -725,7 +1052,7 @@ export function OpportunitySummaryTab({
                   title="Edit Debts"
                 />
               </div>
-              <div className="grid grid-cols-2 gap-3 p-4">
+              <div className="grid grid-cols-2 gap-3 border-t border-border p-4">
                 {debts.map((debt) => (
                   <DebtCard key={debt.id} {...debtToCard(debt)} />
                 ))}