Add money date prompts UI

app/api/households/[id]/money-date-prompts/route.ts

@@ -0,0 +1,9 @@
+import { NextRequest } from "next/server";
+import { proxyRequest } from "@/lib/backend";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  return proxyRequest(req, `households/${params.id}/money-date-prompts`);
+}

app/settings/households/page.tsx

@@ -155,6 +155,22 @@ type FairSplitResult = {
   rationale: string;
 };
 
+type MoneyDatePrompt = {
+  id: string;
+  topic: string;
+  question: string;
+  why: string;
+  actionLabel: string;
+  priority: "high" | "medium" | "low";
+};
+
+type MoneyDatePromptResponse = {
+  householdId: string;
+  generatedAt: string;
+  cadenceSuggestion: "weekly" | "monthly" | string;
+  prompts: MoneyDatePrompt[];
+};
+
 const money = new Intl.NumberFormat("en-US", {
   style: "currency",
   currency: "USD",
@@ -213,6 +229,8 @@ export default function HouseholdSettingsPage() {
   const [fairSplitResult, setFairSplitResult] = useState<FairSplitResult | null>(null);
   const [fairSplitStatus, setFairSplitStatus] = useState("");
   const [privacyStatus, setPrivacyStatus] = useState("");
+  const [moneyDatePrompts, setMoneyDatePrompts] = useState<MoneyDatePromptResponse | null>(null);
+  const [moneyDateStatus, setMoneyDateStatus] = useState("");
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [status, setStatus] = useState("");
@@ -231,11 +249,13 @@ export default function HouseholdSettingsPage() {
       setDashboard(null);
       setGoals([]);
       setInvites([]);
+      setMoneyDatePrompts(null);
       return;
     }
     loadDashboard(selectedId);
     loadGoals(selectedId);
     loadInvites(selectedId);
+    loadMoneyDatePrompts(selectedId);
   }, [selectedId]);
 
   const loadHouseholds = async () => {
@@ -282,6 +302,18 @@ export default function HouseholdSettingsPage() {
     setInvites(res.data ?? []);
   };
 
+  const loadMoneyDatePrompts = async (id: string) => {
+    setMoneyDateStatus("Loading prompts...");
+    const res = await apiFetch<MoneyDatePromptResponse>(`/api/households/${id}/money-date-prompts`);
+    if (res.error) {
+      setMoneyDatePrompts(null);
+      setMoneyDateStatus(res.error.message ?? "Unable to load money date prompts.");
+      return;
+    }
+    setMoneyDatePrompts(res.data ?? null);
+    setMoneyDateStatus("");
+  };
+
   const createHousehold = async (event: FormEvent) => {
     event.preventDefault();
     const name = newName.trim();
@@ -451,6 +483,7 @@ export default function HouseholdSettingsPage() {
     }
     setPrivacyStatus(enabled ? "Privacy mode enabled." : "Privacy mode disabled.");
     await loadDashboard(selectedId);
+    await loadMoneyDatePrompts(selectedId);
   };
 
   const maxCashflow = Math.max(
@@ -479,7 +512,11 @@ export default function HouseholdSettingsPage() {
                 </select>
                 <button
                   type="button"
-                  onClick={() => selectedId && loadDashboard(selectedId)}
+                  onClick={() => {
+                    if (!selectedId) return;
+                    loadDashboard(selectedId);
+                    loadMoneyDatePrompts(selectedId);
+                  }}
                   disabled={!selectedId}
                   className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary disabled:opacity-50"
                 >
@@ -589,6 +626,52 @@ export default function HouseholdSettingsPage() {
               </div>
             </div>
 
+            <div className="glass-panel rounded-2xl p-6 shadow-sm">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Money date prompts</p>
+                  <h2 className="mt-2 text-xl font-bold text-foreground">Next household conversation</h2>
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    {moneyDatePrompts
+                      ? `${moneyDatePrompts.cadenceSuggestion} cadence based on cashflow, goals, sync health, and privacy settings.`
+                      : "Prompts are generated from the shared dashboard."}
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => selectedId && loadMoneyDatePrompts(selectedId)}
+                  className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary"
+                >
+                  Refresh prompts
+                </button>
+              </div>
+              {moneyDateStatus ? <p className="mt-4 text-sm text-muted-foreground">{moneyDateStatus}</p> : null}
+              <div className="mt-5 grid gap-3 lg:grid-cols-3">
+                {(moneyDatePrompts?.prompts ?? []).map((prompt) => (
+                  <div key={prompt.id} className="rounded-xl border border-border bg-background/40 p-4">
+                    <div className="flex items-center justify-between gap-3">
+                      <p className="text-sm font-semibold text-foreground">{prompt.topic}</p>
+                      <span className={`rounded-full px-2 py-1 text-[11px] font-bold uppercase ${
+                        prompt.priority === "high"
+                          ? "bg-red-500/10 text-red-500"
+                          : prompt.priority === "medium"
+                            ? "bg-amber-500/10 text-amber-500"
+                            : "bg-secondary text-muted-foreground"
+                      }`}>
+                        {prompt.priority}
+                      </span>
+                    </div>
+                    <p className="mt-3 text-sm font-semibold leading-6 text-foreground">{prompt.question}</p>
+                    <p className="mt-2 text-xs leading-5 text-muted-foreground">{prompt.why}</p>
+                    <p className="mt-3 text-xs font-bold uppercase tracking-wider text-primary">{prompt.actionLabel}</p>
+                  </div>
+                ))}
+                {!moneyDateStatus && !moneyDatePrompts?.prompts.length ? (
+                  <p className="text-sm text-muted-foreground">No prompts generated yet.</p>
+                ) : null}
+              </div>
+            </div>
+
             <div className="glass-panel rounded-2xl p-6 shadow-sm">
               <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                 <div>