Add dashboard activity feed and project member role editing

frontend/src/app/page.tsx

@@ -1,66 +1,165 @@
 "use client";
 
+import { useState } from "react";
+
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
 
-import { useListProjectsProjectsGet } from "@/api/generated/projects/projects";
+import { useCreateProjectProjectsPost, useListProjectsProjectsGet } from "@/api/generated/projects/projects";
+import { useCreateDepartmentDepartmentsPost, useListDepartmentsDepartmentsGet } from "@/api/generated/org/org";
+import { useCreateEmployeeEmployeesPost, useListEmployeesEmployeesGet } from "@/api/generated/org/org";
+import { useListActivitiesActivitiesGet } from "@/api/generated/activities/activities";
 
 export default function Home() {
   const projects = useListProjectsProjectsGet();
+  const departments = useListDepartmentsDepartmentsGet();
+  const employees = useListEmployeesEmployeesGet();
+  const activities = useListActivitiesActivitiesGet({ limit: 20 });
+
+  const [projectName, setProjectName] = useState("");
+  const [deptName, setDeptName] = useState("");
+  const [personName, setPersonName] = useState("");
+  const [personType, setPersonType] = useState<"human" | "agent">("human");
+
+  const createProject = useCreateProjectProjectsPost({
+    mutation: { onSuccess: () => { setProjectName(""); projects.refetch(); } },
+  });
+  const createDepartment = useCreateDepartmentDepartmentsPost({
+    mutation: { onSuccess: () => { setDeptName(""); departments.refetch(); } },
+  });
+  const createEmployee = useCreateEmployeeEmployeesPost({
+    mutation: { onSuccess: () => { setPersonName(""); employees.refetch(); } },
+  });
 
   return (
-    <main className="mx-auto max-w-5xl p-6">
+    <main className="mx-auto max-w-6xl p-6">
       <div className="flex items-start justify-between gap-4">
         <div>
           <h1 className="text-3xl font-semibold tracking-tight">Company Mission Control</h1>
           <p className="mt-2 text-sm text-muted-foreground">
-            Orval-generated client + React Query + shadcn-style components.
+            Dashboard overview + quick create. No-auth v1.
           </p>
         </div>
-        <Button variant="outline" onClick={() => projects.refetch()} disabled={projects.isFetching}>
+        <Button variant="outline" onClick={() => { projects.refetch(); departments.refetch(); employees.refetch(); activities.refetch(); }}>
           Refresh
         </Button>
       </div>
 
-      <div className="mt-6 grid gap-4 sm:grid-cols-2">
+      <div className="mt-6 grid gap-4 lg:grid-cols-3">
         <Card>
           <CardHeader>
-            <CardTitle>Projects</CardTitle>
-            <CardDescription>GET /projects</CardDescription>
+            <CardTitle>Quick create project</CardTitle>
+            <CardDescription>Projects drive all tasks</CardDescription>
           </CardHeader>
-          <CardContent>
-            {projects.isLoading ? <div className="text-sm text-muted-foreground">Loading…</div> : null}
-            {projects.error ? (
-              <div className="text-sm text-destructive">{(projects.error as Error).message}</div>
-            ) : null}
-            {!projects.isLoading && !projects.error ? (
-              <ul className="space-y-2">
-                {projects.data?.map((p) => (
-                  <li key={p.id ?? p.name} className="flex items-center justify-between rounded-md border p-3">
-                    <div className="font-medium">{p.name}</div>
-                    <div className="text-xs text-muted-foreground">{p.status}</div>
-                  </li>
-                ))}
-                {(projects.data?.length ?? 0) === 0 ? (
-                  <li className="text-sm text-muted-foreground">No projects yet.</li>
-                ) : null}
-              </ul>
-            ) : null}
+          <CardContent className="space-y-3">
+            <Input placeholder="Project name" value={projectName} onChange={(e) => setProjectName(e.target.value)} />
+            <Button
+              onClick={() => createProject.mutate({ data: { name: projectName, status: "active" } })}
+              disabled={!projectName.trim() || createProject.isPending}
+            >
+              Create
+            </Button>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader>
-            <CardTitle>API</CardTitle>
-            <CardDescription>Docs & health</CardDescription>
+            <CardTitle>Quick create department</CardTitle>
+            <CardDescription>Organization structure</CardDescription>
           </CardHeader>
-          <CardContent className="space-y-2 text-sm">
-            <div>
-              <span className="text-muted-foreground">Docs:</span> <code className="ml-2">/docs</code>
-            </div>
-            <div className="text-muted-foreground">
-              Set <code>NEXT_PUBLIC_API_URL</code> in <code>.env.local</code> (example: http://192.168.1.101:8000).
-            </div>
+          <CardContent className="space-y-3">
+            <Input placeholder="Department name" value={deptName} onChange={(e) => setDeptName(e.target.value)} />
+            <Button
+              onClick={() => createDepartment.mutate({ data: { name: deptName } })}
+              disabled={!deptName.trim() || createDepartment.isPending}
+            >
+              Create
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Quick add person</CardTitle>
+            <CardDescription>Employees & agents</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Input placeholder="Name" value={personName} onChange={(e) => setPersonName(e.target.value)} />
+            <Select value={personType} onChange={(e) => setPersonType(e.target.value === "agent" ? "agent" : "human")}
+            >
+              <option value="human">human</option>
+              <option value="agent">agent</option>
+            </Select>
+            <Button
+              onClick={() => createEmployee.mutate({ data: { name: personName, employee_type: personType, status: "active" } })}
+              disabled={!personName.trim() || createEmployee.isPending}
+            >
+              Create
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="mt-6 grid gap-4 lg:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle>Projects</CardTitle>
+            <CardDescription>{(projects.data ?? []).length} total</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-2">
+              {(projects.data ?? []).slice(0, 8).map((p) => (
+                <li key={p.id ?? p.name} className="flex items-center justify-between rounded-md border p-2 text-sm">
+                  <span>{p.name}</span>
+                  <span className="text-xs text-muted-foreground">{p.status}</span>
+                </li>
+              ))}
+              {(projects.data ?? []).length === 0 ? (
+                <li className="text-sm text-muted-foreground">No projects yet.</li>
+              ) : null}
+            </ul>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Departments</CardTitle>
+            <CardDescription>{(departments.data ?? []).length} total</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-2">
+              {(departments.data ?? []).slice(0, 8).map((d) => (
+                <li key={d.id ?? d.name} className="flex items-center justify-between rounded-md border p-2 text-sm">
+                  <span>{d.name}</span>
+                  <span className="text-xs text-muted-foreground">id {d.id}</span>
+                </li>
+              ))}
+              {(departments.data ?? []).length === 0 ? (
+                <li className="text-sm text-muted-foreground">No departments yet.</li>
+              ) : null}
+            </ul>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Activity</CardTitle>
+            <CardDescription>Latest actions</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-2">
+              {(activities.data ?? []).map((a) => (
+                <li key={String(a.id)} className="rounded-md border p-2 text-xs">
+                  <div className="font-medium">{a.entity_type} · {a.verb}</div>
+                  <div className="text-muted-foreground">id {a.entity_id ?? "—"}</div>
+                </li>
+              ))}
+              {(activities.data ?? []).length === 0 ? (
+                <li className="text-sm text-muted-foreground">No activity yet.</li>
+              ) : null}
+            </ul>
           </CardContent>
         </Card>
       </div>

frontend/src/app/projects/[id]/page.tsx

@@ -23,16 +23,10 @@ import {
   useListProjectMembersProjectsProjectIdMembersGet,
   useAddProjectMemberProjectsProjectIdMembersPost,
   useRemoveProjectMemberProjectsProjectIdMembersMemberIdDelete,
+  useUpdateProjectMemberProjectsProjectIdMembersMemberIdPatch,
 } from "@/api/generated/projects/projects";
 
-const STATUSES = [
-  "backlog",
-  "ready",
-  "in_progress",
-  "review",
-  "done",
-  "blocked",
-] as const;
+const STATUSES = ["backlog", "ready", "in_progress", "review", "done", "blocked"] as const;
 
 export default function ProjectDetailPage() {
   const params = useParams();
@@ -50,6 +44,9 @@ export default function ProjectDetailPage() {
   const removeMember = useRemoveProjectMemberProjectsProjectIdMembersMemberIdDelete({
     mutation: { onSuccess: () => members.refetch() },
   });
+  const updateMember = useUpdateProjectMemberProjectsProjectIdMembersMemberIdPatch({
+    mutation: { onSuccess: () => members.refetch() },
+  });
 
   const tasks = useListTasksTasksGet({ projectId });
   const createTask = useCreateTaskTasksPost({
@@ -161,7 +158,7 @@ export default function ProjectDetailPage() {
             <Select onChange={(e) => {
               const empId = e.target.value;
               if (!empId) return;
-              addMember.mutate({ projectId, data: { project_id: projectId, employee_id: Number(empId), role: null } });
+              addMember.mutate({ projectId, data: { project_id: projectId, employee_id: Number(empId), role: "member" } });
               e.currentTarget.value = "";
             }}>
               <option value="">Add member…</option>
@@ -171,14 +168,29 @@ export default function ProjectDetailPage() {
             </Select>
             <ul className="space-y-2">
               {projectMembers.map((m) => (
-                <li key={m.id ?? `${m.project_id}-${m.employee_id}`} className="flex items-center justify-between rounded-md border p-2 text-sm">
-                  <div>{employeeName(m.employee_id)}</div>
-                  <Button
-                    variant="outline"
-                    onClick={() => removeMember.mutate({ projectId, memberId: Number(m.id) })}
-                  >
-                    Remove
-                  </Button>
+                <li key={m.id ?? `${m.project_id}-${m.employee_id}`} className="rounded-md border p-2 text-sm">
+                  <div className="flex items-center justify-between gap-2">
+                    <div>{employeeName(m.employee_id)}</div>
+                    <Button
+                      variant="outline"
+                      onClick={() => removeMember.mutate({ projectId, memberId: Number(m.id) })}
+                    >
+                      Remove
+                    </Button>
+                  </div>
+                  <div className="mt-2">
+                    <Input
+                      placeholder="Role (e.g., PM, QA, Dev)"
+                      defaultValue={m.role ?? ""}
+                      onBlur={(e) =>
+                        updateMember.mutate({
+                          projectId,
+                          memberId: Number(m.id),
+                          data: { project_id: projectId, employee_id: m.employee_id, role: e.currentTarget.value || null },
+                        })
+                      }
+                    />
+                  </div>
                 </li>
               ))}
               {projectMembers.length === 0 ? <li className="text-sm text-muted-foreground">No members yet.</li> : null}