Add AdminSystemMap component to visualize platform architecture and flows
cgen-50bf9ab65940456fa2708ef4ab7d9e84
This commit is contained in:
Builder.io
parent
8c30b793f0
commit
73a3da3341
1 changed files with 155 additions and 0 deletions
155
client/components/admin/AdminSystemMap.tsx
Normal file
155
client/components/admin/AdminSystemMap.tsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Database, Globe, Layers, Network, Route, ServerCog, ShieldCheck, Spline, Users, Workflow } from "lucide-react";
|
||||
|
||||
type Node = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon?: React.ComponentType<{ className?: string }>;
|
||||
subtitle?: string;
|
||||
group: "entry" | "frontend" | "services" | "backend" | "infra";
|
||||
};
|
||||
|
||||
const NODES: Node[] = [
|
||||
// Entry/realms
|
||||
{ id: "realms", label: "Realms", subtitle: "GD / Consulting / Community / Get Started", icon: Workflow, group: "entry" },
|
||||
{ id: "onboarding", label: "Onboarding", subtitle: "Profile • Interests • Path", icon: Users, group: "entry" },
|
||||
|
||||
// Frontend app
|
||||
{ id: "dashboard", label: "Dashboard", subtitle: "Realm‑aware UI", icon: Globe, group: "frontend" },
|
||||
{ id: "routes", label: "Routes", subtitle: "/feed • /status • /teams • /docs", icon: Route, group: "frontend" },
|
||||
|
||||
// Product services (frontend+api)
|
||||
{ id: "feed", label: "Social Feed", subtitle: "Posts • Likes • Comments • Tags", icon: Layers, group: "services" },
|
||||
{ id: "mentorship", label: "Mentorship", subtitle: "Requests • Mentors • Moderation", icon: Users, group: "services" },
|
||||
{ id: "status", label: "Status", subtitle: "Live health from /api/status", icon: ShieldCheck, group: "services" },
|
||||
{ id: "investors", label: "Investors", subtitle: "Interest • Client realm", icon: Network, group: "services" },
|
||||
|
||||
// Backend
|
||||
{ id: "api", label: "API", subtitle: "Node/Express server routes", icon: ServerCog, group: "backend" },
|
||||
{ id: "db", label: "Supabase", subtitle: "Auth • Profiles • Content • Migrations", icon: Database, group: "backend" },
|
||||
|
||||
// Infra
|
||||
{ id: "hosting", label: "Hosting/CDN", subtitle: "Vercel/Netlify + Edge", icon: Spline, group: "infra" },
|
||||
];
|
||||
|
||||
// Directed edges between nodes
|
||||
const EDGES: Array<[string, string, string]> = [
|
||||
["realms", "dashboard", "realm -> UI personalization"],
|
||||
["onboarding", "dashboard", "profile bootstraps"],
|
||||
["dashboard", "routes", "primary navigation"],
|
||||
|
||||
["routes", "feed", "component mounts"],
|
||||
["routes", "mentorship", "community flow"],
|
||||
["routes", "status", "observability"],
|
||||
["routes", "investors", "IR page"],
|
||||
|
||||
["feed", "api", "CRUD, reactions"],
|
||||
["mentorship", "api", "requests, listings"],
|
||||
["status", "api", "/api/status"],
|
||||
["investors", "api", "POST /api/investors/interest"],
|
||||
|
||||
["api", "db", "RLS, SQL, RPC"],
|
||||
["api", "hosting", "deploy, logs"],
|
||||
];
|
||||
|
||||
const groupStyles: Record<Node["group"], string> = {
|
||||
entry: "from-emerald-900/40 to-emerald-700/20 border-emerald-500/30",
|
||||
frontend: "from-indigo-900/40 to-indigo-700/20 border-indigo-500/30",
|
||||
services: "from-fuchsia-900/40 to-fuchsia-700/20 border-fuchsia-500/30",
|
||||
backend: "from-sky-900/40 to-sky-700/20 border-sky-500/30",
|
||||
infra: "from-amber-900/40 to-amber-700/20 border-amber-500/30",
|
||||
};
|
||||
|
||||
function NodeCard({ node }: { node: Node }) {
|
||||
const Icon = node.icon ?? Globe;
|
||||
return (
|
||||
<div className={cn(
|
||||
"rounded-xl border p-3 text-sm shadow-sm",
|
||||
"bg-gradient-to-br",
|
||||
groupStyles[node.group],
|
||||
)}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="rounded-lg bg-black/30 p-1.5">
|
||||
<Icon className="h-4 w-4 text-white/90" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-white/90">{node.label}</div>
|
||||
{node.subtitle && (
|
||||
<div className="text-[11px] text-white/60">{node.subtitle}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AdminSystemMap() {
|
||||
return (
|
||||
<Card className="bg-card/60 border-border/40 backdrop-blur">
|
||||
<CardHeader>
|
||||
<CardTitle>System map</CardTitle>
|
||||
<CardDescription>High‑level architecture and primary flows</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4">
|
||||
{/* Row: entry */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
{NODES.filter(n => n.group === "entry").map(n => (
|
||||
<NodeCard key={n.id} node={n} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Row: frontend */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{NODES.filter(n => n.group === "frontend").map(n => (
|
||||
<NodeCard key={n.id} node={n} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Row: services */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
{NODES.filter(n => n.group === "services").map(n => (
|
||||
<NodeCard key={n.id} node={n} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Row: backend + infra */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{NODES.filter(n => n.group === "backend").map(n => (
|
||||
<NodeCard key={n.id} node={n} />
|
||||
))}
|
||||
{NODES.filter(n => n.group === "infra").map(n => (
|
||||
<NodeCard key={n.id} node={n} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="mt-2 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
|
||||
<Badge variant="outline" className="border-emerald-500/30 text-emerald-200">Entry</Badge>
|
||||
<Badge variant="outline" className="border-indigo-500/30 text-indigo-200">Frontend</Badge>
|
||||
<Badge variant="outline" className="border-fuchsia-500/30 text-fuchsia-200">Services</Badge>
|
||||
<Badge variant="outline" className="border-sky-500/30 text-sky-200">Backend</Badge>
|
||||
<Badge variant="outline" className="border-amber-500/30 text-amber-200">Infra</Badge>
|
||||
</div>
|
||||
|
||||
{/* Edges list (readable relationships) */}
|
||||
<div className="mt-4 rounded-xl border border-border/40 bg-background/40 p-3">
|
||||
<div className="text-xs font-medium text-foreground mb-2">Flows</div>
|
||||
<ul className="grid gap-1 text-xs text-muted-foreground sm:grid-cols-2 lg:grid-cols-3">
|
||||
{EDGES.map(([from, to, note]) => (
|
||||
<li key={`${from}-${to}`}>
|
||||
<span className="text-foreground/80">{from}</span>
|
||||
<span className="mx-1 opacity-60">→</span>
|
||||
<span className="text-foreground/80">{to}</span>
|
||||
<span className="opacity-60"> — {note}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue