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>