UI overhaul: dashboard + projects layout

frontend/src/app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import styles from "@/app/_components/Shell.module.css";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -34,92 +35,81 @@ export default function Home() {
   });
 
   return (
-    <main className="mx-auto max-w-6xl p-6">
-      <div className="flex items-start justify-between gap-4">
+    <main>
+      <div className={styles.topbar}>
         <div>
-          <h1 className="text-3xl font-semibold tracking-tight">Company Mission Control</h1>
-          <p className="mt-2 text-sm text-muted-foreground">
-            Dashboard overview + quick create. No-auth v1.
-          </p>
+          <h1 className={styles.h1}>Company Mission Control</h1>
+          <p className={styles.p}>Command center for projects, people, and operations. No‑auth v1.</p>
         </div>
         <Button variant="outline" onClick={() => { projects.refetch(); departments.refetch(); employees.refetch(); activities.refetch(); }}>
           Refresh
         </Button>
       </div>
 
-      <div className="mt-6 grid gap-4 lg:grid-cols-3">
-        <Card>
-          <CardHeader>
-            <CardTitle>Quick create project</CardTitle>
-            <CardDescription>Projects drive all tasks</CardDescription>
-          </CardHeader>
-          <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>
+      <div className={styles.grid2}>
+        <div className={styles.card}>
+          <div className={styles.cardTitle}>Quick create</div>
+          <div className={styles.list}>
+            <div className={styles.item}>
+              <div style={{ marginBottom: 8, fontWeight: 600 }}>Project</div>
+              <div style={{ display: "grid", gap: 8 }}>
+                <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>
+              </div>
+            </div>
+            <div className={styles.item}>
+              <div style={{ marginBottom: 8, fontWeight: 600 }}>Department</div>
+              <div style={{ display: "grid", gap: 8 }}>
+                <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>
+              </div>
+            </div>
+            <div className={styles.item}>
+              <div style={{ marginBottom: 8, fontWeight: 600 }}>Person</div>
+              <div style={{ display: "grid", gap: 8 }}>
+                <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>
+              </div>
+            </div>
+          </div>
+        </div>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Quick create department</CardTitle>
-            <CardDescription>Organization structure</CardDescription>
-          </CardHeader>
-          <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 className={styles.card}>
+          <div className={styles.cardTitle}>Live activity</div>
+          <div className={styles.list}>
+            {(activities.data ?? []).map((a) => (
+              <div key={String(a.id)} className={styles.item}>
+                <div style={{ fontWeight: 600 }}>{a.entity_type} · {a.verb}</div>
+                <div className={styles.mono}>id {a.entity_id ?? "—"}</div>
+              </div>
+            ))}
+            {(activities.data ?? []).length === 0 ? (
+              <div className={styles.mono}>No activity yet.</div>
+            ) : null}
+          </div>
+        </div>
       </div>
 
-      <div className="mt-6 grid gap-4 lg:grid-cols-3">
+      <div style={{ marginTop: 18, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 16 }}>
         <Card>
           <CardHeader>
             <CardTitle>Projects</CardTitle>
             <CardDescription>{(projects.data ?? []).length} total</CardDescription>
           </CardHeader>
           <CardContent>
-            <ul className="space-y-2">
+            <div className={styles.list}>
               {(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>
+                <div key={p.id ?? p.name} className={styles.item}>
+                  <div style={{ fontWeight: 600 }}>{p.name}</div>
+                  <div className={styles.mono}>{p.status}</div>
+                </div>
               ))}
-              {(projects.data ?? []).length === 0 ? (
-                <li className="text-sm text-muted-foreground">No projects yet.</li>
-              ) : null}
-            </ul>
+              {(projects.data ?? []).length === 0 ? <div className={styles.mono}>No projects yet.</div> : null}
+            </div>
           </CardContent>
         </Card>
 
@@ -129,37 +119,33 @@ export default function Home() {
             <CardDescription>{(departments.data ?? []).length} total</CardDescription>
           </CardHeader>
           <CardContent>
-            <ul className="space-y-2">
+            <div className={styles.list}>
               {(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>
+                <div key={d.id ?? d.name} className={styles.item}>
+                  <div style={{ fontWeight: 600 }}>{d.name}</div>
+                  <div className={styles.mono}>id {d.id}</div>
+                </div>
               ))}
-              {(departments.data ?? []).length === 0 ? (
-                <li className="text-sm text-muted-foreground">No departments yet.</li>
-              ) : null}
-            </ul>
+              {(departments.data ?? []).length === 0 ? <div className={styles.mono}>No departments yet.</div> : null}
+            </div>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader>
-            <CardTitle>Activity</CardTitle>
-            <CardDescription>Latest actions</CardDescription>
+            <CardTitle>People</CardTitle>
+            <CardDescription>{(employees.data ?? []).length} total</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>
+            <div className={styles.list}>
+              {(employees.data ?? []).slice(0, 8).map((e) => (
+                <div key={e.id ?? e.name} className={styles.item}>
+                  <div style={{ fontWeight: 600 }}>{e.name}</div>
+                  <div className={styles.mono}>{e.employee_type}</div>
+                </div>
               ))}
-              {(activities.data ?? []).length === 0 ? (
-                <li className="text-sm text-muted-foreground">No activity yet.</li>
-              ) : null}
-            </ul>
+              {(employees.data ?? []).length === 0 ? <div className={styles.mono}>No people yet.</div> : null}
+            </div>
           </CardContent>
         </Card>
       </div>

frontend/src/app/projects/page.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useMemo, useState } from "react";
+import Link from "next/link";
+import styles from "@/app/_components/Shell.module.css";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -29,24 +31,21 @@ export default function ProjectsPage() {
   }, [projects.data]);
 
   return (
-    <main className="mx-auto max-w-5xl p-6">
-      <div className="flex items-start justify-between gap-4">
+    <main>
+      <div className={styles.topbar}>
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Projects</h1>
-          <p className="mt-1 text-sm text-muted-foreground">Create and manage projects.</p>
+          <h1 className={styles.h1}>Projects</h1>
+          <p className={styles.p}>Create, view, and drill into projects.</p>
         </div>
         <Button variant="outline" onClick={() => projects.refetch()} disabled={projects.isFetching}>
           Refresh
         </Button>
       </div>
 
-      <div className="mt-6 grid gap-4 sm:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle>Create project</CardTitle>
-            <CardDescription>Minimal fields for v1</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-3">
+      <div className={styles.grid2}>
+        <div className={styles.card}>
+          <div className={styles.cardTitle}>Create project</div>
+          <div className={styles.list}>
             <Input
               placeholder="Project name"
               value={name}
@@ -59,10 +58,10 @@ export default function ProjectsPage() {
               Create
             </Button>
             {createProject.error ? (
-              <div className="text-sm text-destructive">{(createProject.error as Error).message}</div>
+              <div className={styles.mono}>{(createProject.error as Error).message}</div>
             ) : null}
-          </CardContent>
-        </Card>
+          </div>
+        </div>
 
         <Card>
           <CardHeader>
@@ -70,21 +69,20 @@ export default function ProjectsPage() {
             <CardDescription>{sorted.length} total</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">
-                {sorted.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>
-                ))}
-                {sorted.length === 0 ? <li className="text-sm text-muted-foreground">No projects yet.</li> : null}
-              </ul>
-            ) : null}
+            <div className={styles.list}>
+              {sorted.map((p) => (
+                <div key={p.id ?? p.name} className={styles.item}>
+                  <div style={{ fontWeight: 600 }}>{p.name}</div>
+                  <div className={styles.mono} style={{ display: "flex", gap: 10, alignItems: "center" }}>
+                    <span>{p.status}</span>
+                    {p.id ? (
+                      <Link href={`/projects/${p.id}`} className={styles.badge}>Open</Link>
+                    ) : null}
+                  </div>
+                </div>
+              ))}
+              {sorted.length === 0 ? <div className={styles.mono}>No projects yet.</div> : null}
+            </div>
           </CardContent>
         </Card>
       </div>