From bfda37d4e3cbccad1df61b104d88b3420ecbff1f Mon Sep 17 00:00:00 2001
From: MOHAN <mohan326856@gmail.com>
Date: Fri, 17 Jul 2026 23:30:41 +0530
Subject: [PATCH] Add accountant workflow UI

---
 app/accountant/page.tsx                       | 160 ++++++++++++++++++
 .../[id]/accountant-tasks/[taskId]/route.ts   |   6 +
 .../households/[id]/accountant-tasks/route.ts |  10 ++
 components/app-shell.tsx                      |   1 +
 4 files changed, 177 insertions(+)
 create mode 100644 app/accountant/page.tsx
 create mode 100644 app/api/households/[id]/accountant-tasks/[taskId]/route.ts
 create mode 100644 app/api/households/[id]/accountant-tasks/route.ts

diff --git a/app/accountant/page.tsx b/app/accountant/page.tsx
new file mode 100644
index 0000000..ee4723d
--- /dev/null
+++ b/app/accountant/page.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { FormEvent, useEffect, useMemo, useState } from "react";
+import { AppShell } from "@/components/app-shell";
+import { apiFetch } from "@/lib/api";
+
+type Household = { id: string; name: string };
+type Person = { id: string; email: string; fullName?: string | null };
+type AccountantTask = {
+  id: string;
+  title: string;
+  description?: string | null;
+  taskType: string;
+  status: string;
+  priority: string;
+  dueDate?: string | null;
+  completedAt?: string | null;
+  assignedTo?: Person | null;
+  createdBy?: Person | null;
+};
+
+export default function AccountantPage() {
+  const [households, setHouseholds] = useState<Household[]>([]);
+  const [householdId, setHouseholdId] = useState("");
+  const [tasks, setTasks] = useState<AccountantTask[]>([]);
+  const [draft, setDraft] = useState({ title: "", description: "", taskType: "review", priority: "medium", dueDate: "" });
+  const [status, setStatus] = useState("");
+  const selectedHousehold = useMemo(() => households.find((item) => item.id === householdId), [households, householdId]);
+
+  useEffect(() => {
+    void loadHouseholds();
+  }, []);
+
+  useEffect(() => {
+    if (householdId) void loadTasks(householdId);
+  }, [householdId]);
+
+  const loadHouseholds = async () => {
+    const res = await apiFetch<Household[]>("/api/households");
+    if (res.error) {
+      setStatus(res.error.message);
+      return;
+    }
+    const list = res.data ?? [];
+    setHouseholds(list);
+    setHouseholdId((current) => current || list[0]?.id || "");
+  };
+
+  const loadTasks = async (id = householdId) => {
+    const res = await apiFetch<AccountantTask[]>(`/api/households/${id}/accountant-tasks`);
+    if (res.error) {
+      setStatus(res.error.message);
+      setTasks([]);
+      return;
+    }
+    setStatus("");
+    setTasks(res.data ?? []);
+  };
+
+  const createTask = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!householdId || !draft.title.trim()) return;
+    const res = await apiFetch<AccountantTask>(`/api/households/${householdId}/accountant-tasks`, {
+      method: "POST",
+      body: JSON.stringify({
+        title: draft.title,
+        description: draft.description || undefined,
+        taskType: draft.taskType,
+        priority: draft.priority,
+        dueDate: draft.dueDate || undefined,
+      }),
+    });
+    if (res.error) {
+      setStatus(res.error.message);
+      return;
+    }
+    setDraft({ title: "", description: "", taskType: "review", priority: "medium", dueDate: "" });
+    await loadTasks();
+  };
+
+  const updateTask = async (task: AccountantTask, nextStatus: string) => {
+    if (!householdId) return;
+    const res = await apiFetch<AccountantTask>(`/api/households/${householdId}/accountant-tasks/${task.id}`, {
+      method: "PATCH",
+      body: JSON.stringify({ status: nextStatus }),
+    });
+    if (res.error) {
+      setStatus(res.error.message);
+      return;
+    }
+    await loadTasks();
+  };
+
+  return (
+    <AppShell title="Accountant Workflow" subtitle="Track household advisor requests, reviews, and follow-ups.">
+      <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
+        {status ? <div className="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">{status}</div> : null}
+
+        <section className="rounded-lg border border-slate-200 bg-white p-4">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 className="text-base font-semibold text-slate-950">Household</h2>
+              <p className="text-sm text-slate-600">{selectedHousehold?.name ?? "Choose a household to manage advisor work."}</p>
+            </div>
+            <select value={householdId} onChange={(event) => setHouseholdId(event.target.value)} className="rounded-md border border-slate-300 px-3 py-2 text-sm">
+              {households.map((household) => (
+                <option key={household.id} value={household.id}>{household.name}</option>
+              ))}
+            </select>
+          </div>
+        </section>
+
+        <form onSubmit={createTask} className="rounded-lg border border-slate-200 bg-white p-4">
+          <h2 className="text-base font-semibold text-slate-950">New Task</h2>
+          <div className="mt-4 grid gap-3 md:grid-cols-2">
+            <input value={draft.title} onChange={(event) => setDraft({ ...draft, title: event.target.value })} placeholder="Task title" className="rounded-md border border-slate-300 px-3 py-2 text-sm" />
+            <input type="date" value={draft.dueDate} onChange={(event) => setDraft({ ...draft, dueDate: event.target.value })} className="rounded-md border border-slate-300 px-3 py-2 text-sm" />
+            <select value={draft.taskType} onChange={(event) => setDraft({ ...draft, taskType: event.target.value })} className="rounded-md border border-slate-300 px-3 py-2 text-sm">
+              <option value="review">Review</option>
+              <option value="document_request">Document request</option>
+              <option value="tax_prep">Tax prep</option>
+              <option value="advice">Advice</option>
+            </select>
+            <select value={draft.priority} onChange={(event) => setDraft({ ...draft, priority: event.target.value })} className="rounded-md border border-slate-300 px-3 py-2 text-sm">
+              <option value="low">Low</option>
+              <option value="medium">Medium</option>
+              <option value="high">High</option>
+            </select>
+          </div>
+          <textarea value={draft.description} onChange={(event) => setDraft({ ...draft, description: event.target.value })} placeholder="Notes or request details" className="mt-3 min-h-24 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
+          <button className="mt-3 rounded-md bg-slate-950 px-4 py-2 text-sm font-medium text-white">Create task</button>
+        </form>
+
+        <section className="grid gap-3">
+          {tasks.length ? tasks.map((task) => (
+            <article key={task.id} className="rounded-lg border border-slate-200 bg-white p-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                <div>
+                  <h3 className="font-semibold text-slate-950">{task.title}</h3>
+                  <p className="mt-1 text-sm text-slate-600">{task.description || "No details added."}</p>
+                  <p className="mt-2 text-xs uppercase text-slate-500">
+                    {task.taskType.replace(/_/g, " ")} · {task.priority} · {task.dueDate ? new Date(task.dueDate).toLocaleDateString() : "No due date"}
+                  </p>
+                </div>
+                <div className="flex gap-2">
+                  <button onClick={() => updateTask(task, "open")} className="rounded-md border border-slate-300 px-3 py-1.5 text-xs">Open</button>
+                  <button onClick={() => updateTask(task, "in_progress")} className="rounded-md border border-blue-200 px-3 py-1.5 text-xs text-blue-700">In progress</button>
+                  <button onClick={() => updateTask(task, "completed")} className="rounded-md border border-emerald-200 px-3 py-1.5 text-xs text-emerald-700">Complete</button>
+                </div>
+              </div>
+              <div className="mt-3 text-xs text-slate-500">Status: {task.status.replace(/_/g, " ")}</div>
+            </article>
+          )) : (
+            <div className="rounded-lg border border-dashed border-slate-300 bg-white p-6 text-sm text-slate-500">No accountant tasks yet.</div>
+          )}
+        </section>
+      </div>
+    </AppShell>
+  );
+}
diff --git a/app/api/households/[id]/accountant-tasks/[taskId]/route.ts b/app/api/households/[id]/accountant-tasks/[taskId]/route.ts
new file mode 100644
index 0000000..1ef82a2
--- /dev/null
+++ b/app/api/households/[id]/accountant-tasks/[taskId]/route.ts
@@ -0,0 +1,6 @@
+import { NextRequest } from "next/server";
+import { proxyRequest } from "@/lib/backend";
+
+export async function PATCH(req: NextRequest, { params }: { params: { id: string; taskId: string } }) {
+  return proxyRequest(req, `households/${params.id}/accountant-tasks/${params.taskId}`);
+}
diff --git a/app/api/households/[id]/accountant-tasks/route.ts b/app/api/households/[id]/accountant-tasks/route.ts
new file mode 100644
index 0000000..a3d6f22
--- /dev/null
+++ b/app/api/households/[id]/accountant-tasks/route.ts
@@ -0,0 +1,10 @@
+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}/accountant-tasks`);
+}
+
+export async function POST(req: NextRequest, { params }: { params: { id: string } }) {
+  return proxyRequest(req, `households/${params.id}/accountant-tasks`);
+}
diff --git a/components/app-shell.tsx b/components/app-shell.tsx
index 75e1ecf..b0761c6 100644
--- a/components/app-shell.tsx
+++ b/components/app-shell.tsx
@@ -12,6 +12,7 @@ const navItems = [
   { href: "/transactions", label: "Transactions" },
   { href: "/planning", label: "Planning" },
   { href: "/developer", label: "Developer" },
+  { href: "/accountant", label: "Accountant" },
   { href: "/bills", label: "Bills" },
   { href: "/credit-score", label: "Credit Score" },
   { href: "/rules", label: "Rules" },