mirror of
https://github.com/DevVoxel/VectorDNS.git
synced 2026-02-27 05:47:38 +00:00
Roadmap Added
This commit is contained in:
Aiden Smith
309
components/roadmap-flowchart.tsx
Normal file
309
components/roadmap-flowchart.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ReactFlow,
|
||||
Background,
|
||||
type Node,
|
||||
type Edge,
|
||||
type NodeProps,
|
||||
Handle,
|
||||
Position,
|
||||
MarkerType,
|
||||
} from "@xyflow/react";
|
||||
import "@xyflow/react/dist/style.css";
|
||||
import {
|
||||
CheckCircle2,
|
||||
Circle,
|
||||
Flag,
|
||||
Rocket,
|
||||
Settings,
|
||||
ShieldCheck,
|
||||
Database,
|
||||
Layout,
|
||||
Activity,
|
||||
TestTube,
|
||||
} from "lucide-react";
|
||||
|
||||
type PhaseNodeData = {
|
||||
label: string;
|
||||
status: "todo" | "doing" | "done";
|
||||
icon: React.ElementType;
|
||||
color: string;
|
||||
items: { text: string; completed: boolean }[];
|
||||
};
|
||||
|
||||
function PhaseNode({ data }: NodeProps<Node<PhaseNodeData>>) {
|
||||
const Icon = data.icon;
|
||||
return (
|
||||
<div
|
||||
className="rounded-xl border bg-card p-6 shadow-lg transition-all hover:border-primary/50"
|
||||
style={{ minWidth: 320 }}
|
||||
>
|
||||
<Handle type="target" position={Position.Top} className="opacity-0" />
|
||||
<Handle type="source" position={Position.Bottom} className="opacity-0" />
|
||||
|
||||
<div className="flex items-center gap-4 border-b pb-4 mb-4">
|
||||
<div
|
||||
className="flex size-12 items-center justify-center rounded-lg"
|
||||
style={{ backgroundColor: data.color }}
|
||||
>
|
||||
<Icon className="size-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-lg font-bold text-foreground leading-tight">
|
||||
{data.label}
|
||||
</div>
|
||||
<div
|
||||
className={`text-xs font-semibold uppercase tracking-wider mt-0.5 ${
|
||||
data.status === "done"
|
||||
? "text-green-500"
|
||||
: data.status === "doing"
|
||||
? "text-blue-500"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{data.status}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3">
|
||||
{data.items.map((item, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-start gap-3 text-sm leading-relaxed text-muted-foreground"
|
||||
>
|
||||
{item.completed ? (
|
||||
<CheckCircle2 className="mt-0.5 size-4 shrink-0 text-green-500" />
|
||||
) : (
|
||||
<Circle className="mt-0.5 size-4 shrink-0 text-muted-foreground/40" />
|
||||
)}
|
||||
<span className={item.completed ? "line-through opacity-50" : ""}>
|
||||
{item.text}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const nodeTypes = { phase: PhaseNode };
|
||||
|
||||
const nodes: Node<PhaseNodeData>[] = [
|
||||
{
|
||||
id: "p1",
|
||||
type: "phase",
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: "Phase 1 — Foundation",
|
||||
status: "todo",
|
||||
icon: Database,
|
||||
color: "#6366f1",
|
||||
items: [
|
||||
{ text: "TypeScript types", completed: false },
|
||||
{ text: "Supabase schema & migrations", completed: false },
|
||||
{ text: "Supabase client setup (@supabase/ssr)", completed: false },
|
||||
{ text: "Project config & env setup", completed: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
type: "phase",
|
||||
position: { x: 400, y: 0 },
|
||||
data: {
|
||||
label: "Phase 2 — Core Services",
|
||||
status: "todo",
|
||||
icon: Settings,
|
||||
color: "#8b5cf6",
|
||||
items: [
|
||||
{ text: "DNS service (tangerine)", completed: false },
|
||||
{ text: "WHOIS service (whoiser)", completed: false },
|
||||
{ text: "Availability service (IANA RDAP)", completed: false },
|
||||
{ text: "Public lookup APIs", completed: false },
|
||||
{ text: "Integration tests", completed: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
type: "phase",
|
||||
position: { x: 800, y: 0 },
|
||||
data: {
|
||||
label: "Phase 3 — Authentication",
|
||||
status: "todo",
|
||||
icon: ShieldCheck,
|
||||
color: "#ec4899",
|
||||
items: [
|
||||
{ text: "Supabase Auth (GitHub, Google, Email)", completed: false },
|
||||
{ text: "Auth server actions", completed: false },
|
||||
{ text: "OAuth callback route", completed: false },
|
||||
{ text: "Middleware protection", completed: false },
|
||||
{ text: "Login/signup pages", completed: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
type: "phase",
|
||||
position: { x: 0, y: 450 },
|
||||
data: {
|
||||
label: "Phase 4 — Public UI",
|
||||
status: "doing",
|
||||
icon: Layout,
|
||||
color: "#3b82f6",
|
||||
items: [
|
||||
{ text: "App shell layout", completed: false },
|
||||
{ text: "Homepage Hero & Search", completed: true },
|
||||
{ text: "DNS results page", completed: false },
|
||||
{ text: "Save to Dashboard button", completed: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
type: "phase",
|
||||
position: { x: 400, y: 450 },
|
||||
data: {
|
||||
label: "Phase 5 — Dashboard",
|
||||
status: "todo",
|
||||
icon: Rocket,
|
||||
color: "#06b6d4",
|
||||
items: [
|
||||
{ text: "Dashboard layout & stats", completed: false },
|
||||
{ text: "Saved domains CRUD", completed: false },
|
||||
{ text: "Domain detail page & history", completed: false },
|
||||
{ text: "Notes & tags (auto-save)", completed: false },
|
||||
{ text: "Manual re-check triggers", completed: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
type: "phase",
|
||||
position: { x: 800, y: 450 },
|
||||
data: {
|
||||
label: "Phase 6 — Monitoring & Alerts",
|
||||
status: "todo",
|
||||
icon: Activity,
|
||||
color: "#10b981",
|
||||
items: [
|
||||
{ text: "Change detection logic", completed: false },
|
||||
{ text: "Vercel Daily Cron job", completed: false },
|
||||
{ text: "In-app notification system", completed: false },
|
||||
{ text: "Email alerts via Resend", completed: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "p7",
|
||||
type: "phase",
|
||||
position: { x: 200, y: 900 },
|
||||
data: {
|
||||
label: "Phase 7 — Settings & Polish",
|
||||
status: "todo",
|
||||
icon: Flag,
|
||||
color: "#f59e0b",
|
||||
items: [
|
||||
{ text: "User profile & preferences", completed: false },
|
||||
{ text: "Error boundaries & 404s", completed: false },
|
||||
{ text: "Toast notifications (sonner)", completed: false },
|
||||
{ text: "SEO & OG image generation", completed: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "p8",
|
||||
type: "phase",
|
||||
position: { x: 600, y: 900 },
|
||||
data: {
|
||||
label: "Phase 8 — Testing & QA",
|
||||
status: "todo",
|
||||
icon: TestTube,
|
||||
color: "#64748b",
|
||||
items: [
|
||||
{ text: "End-to-end integration tests", completed: false },
|
||||
{ text: "Build verification (zero TS errors)", completed: false },
|
||||
{ text: "Manual QA pass (Light/Dark mode)", completed: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const edges: Edge[] = [
|
||||
{
|
||||
id: "e1-2",
|
||||
source: "p1",
|
||||
target: "p2",
|
||||
markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
|
||||
style: { stroke: "#94a3b8" },
|
||||
},
|
||||
{
|
||||
id: "e2-3",
|
||||
source: "p2",
|
||||
target: "p3",
|
||||
markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
|
||||
style: { stroke: "#94a3b8" },
|
||||
},
|
||||
{
|
||||
id: "e3-4",
|
||||
source: "p3",
|
||||
target: "p4",
|
||||
markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
|
||||
style: { stroke: "#94a3b8", strokeWidth: 2 },
|
||||
},
|
||||
{
|
||||
id: "e4-5",
|
||||
source: "p4",
|
||||
target: "p5",
|
||||
markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
|
||||
style: { stroke: "#94a3b8" },
|
||||
},
|
||||
{
|
||||
id: "e5-6",
|
||||
source: "p5",
|
||||
target: "p6",
|
||||
markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
|
||||
style: { stroke: "#94a3b8" },
|
||||
},
|
||||
{
|
||||
id: "e6-7",
|
||||
source: "p6",
|
||||
target: "p7",
|
||||
markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
|
||||
style: { stroke: "#94a3b8", strokeWidth: 2 },
|
||||
},
|
||||
{
|
||||
id: "e7-8",
|
||||
source: "p7",
|
||||
target: "p8",
|
||||
markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
|
||||
style: { stroke: "#94a3b8" },
|
||||
},
|
||||
];
|
||||
|
||||
export function RoadmapFlowchart() {
|
||||
return (
|
||||
<div className="h-275 w-full rounded-2xl border bg-muted/30 backdrop-blur-sm shadow-inner">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
nodeTypes={nodeTypes}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.1 }}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
nodesDraggable={false}
|
||||
nodesConnectable={false}
|
||||
elementsSelectable={false}
|
||||
panOnDrag={false}
|
||||
zoomOnScroll={false}
|
||||
zoomOnPinch={false}
|
||||
zoomOnDoubleClick={false}
|
||||
preventScrolling={false}
|
||||
>
|
||||
<Background gap={32} size={1} className="opacity-15" />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user