yunxiafei/openclaw-mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI overhaul: dashboard + projects layout

Browse Source
This commit is contained in:
Abhimanyu Saharan
2026-02-02 00:37:32 +05:30
parent 7cfb3586ae
commit 829001e0da
2 changed files with 102 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
frontend/src/app/page.tsx
View File

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

56
frontend/src/app/projects/page.tsx
View File

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