50 lines
2.6 KiB
TypeScript
50 lines
2.6 KiB
TypeScript
import { AppShell } from "@/components/AppShell";
|
|
import { mockNotes, mockWorkspaces } from "@/lib/mock-data";
|
|
|
|
export default function DashboardPage() {
|
|
const recentNotes = mockNotes.slice(0, 3);
|
|
|
|
return (
|
|
<AppShell
|
|
title="Dashboard"
|
|
description="Operational entry point for recent notes, active workspaces, and agent-relevant follow-ups."
|
|
actions={<div className="badge">Scaffold milestone</div>}
|
|
>
|
|
<section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--ml-space-4)" }}>
|
|
<div className="surface-card" style={{ padding: "var(--ml-space-5)" }}>
|
|
<div style={{ color: "var(--ml-text-secondary)" }}>Active workspaces</div>
|
|
<div style={{ fontSize: "var(--ml-fs-3xl)", fontWeight: 700, marginTop: "var(--ml-space-2)" }}>{mockWorkspaces.length}</div>
|
|
</div>
|
|
<div className="surface-card" style={{ padding: "var(--ml-space-5)" }}>
|
|
<div style={{ color: "var(--ml-text-secondary)" }}>Tracked notes</div>
|
|
<div style={{ fontSize: "var(--ml-fs-3xl)", fontWeight: 700, marginTop: "var(--ml-space-2)" }}>{mockNotes.length}</div>
|
|
</div>
|
|
<div className="surface-card" style={{ padding: "var(--ml-space-5)" }}>
|
|
<div style={{ color: "var(--ml-text-secondary)" }}>Pending review surfaces</div>
|
|
<div style={{ fontSize: "var(--ml-fs-3xl)", fontWeight: 700, marginTop: "var(--ml-space-2)" }}>2</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}>
|
|
<div style={{ fontSize: "var(--ml-fs-xl)", fontWeight: 700 }}>Recent note activity</div>
|
|
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
|
|
{recentNotes.map((note) => (
|
|
<article key={note.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
|
|
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
|
|
<strong>{note.title}</strong>
|
|
<span style={{ color: "var(--ml-text-secondary)" }}>{note.updatedBy}</span>
|
|
</div>
|
|
<div style={{ color: "var(--ml-text-secondary)" }}>{note.excerpt}</div>
|
|
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
|
|
{note.tags.map((tag) => (
|
|
<span key={tag} className="badge">#{tag}</span>
|
|
))}
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</AppShell>
|
|
);
|
|
}
|