73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import * as React from "react";
|
||
|
|
import { useParams } from "next/navigation";
|
||
|
|
import { Plus, Radar } from "lucide-react";
|
||
|
|
|
||
|
|
import { ConvoyDetailPanel } from "@/components/mission-control/convoy-detail-panel";
|
||
|
|
import { ConvoyKanban, GateInbox } from "@/components/mission-control/convoy-kanban";
|
||
|
|
import { CreateConvoyDialog } from "@/components/mission-control/create-convoy-dialog";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
|
||
|
|
export default function MissionControlPage() {
|
||
|
|
const params = useParams();
|
||
|
|
const workspaceSlug = params?.workspaceSlug as string | undefined;
|
||
|
|
const [selectedId, setSelectedId] = React.useState<string | null>(null);
|
||
|
|
const [createOpen, setCreateOpen] = React.useState(false);
|
||
|
|
|
||
|
|
if (!workspaceSlug) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full min-h-0 flex-col">
|
||
|
|
<header className="flex shrink-0 items-center justify-between border-b border-border px-6 py-4">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
|
||
|
|
<Radar className="size-5 text-primary" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h1 className="text-lg font-semibold">Mission control</h1>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
Convoy kanban, human gates, and gate co-pilot
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Button type="button" onClick={() => setCreateOpen(true)}>
|
||
|
|
<Plus className="mr-2 size-4" />
|
||
|
|
New convoy
|
||
|
|
</Button>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[220px_1fr_320px]">
|
||
|
|
<aside className="min-h-0 overflow-y-auto border-r border-border bg-muted/10">
|
||
|
|
<GateInbox
|
||
|
|
workspaceSlug={workspaceSlug}
|
||
|
|
selectedId={selectedId}
|
||
|
|
onSelect={setSelectedId}
|
||
|
|
/>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<main className="flex min-h-0 flex-col overflow-hidden">
|
||
|
|
<ConvoyKanban
|
||
|
|
workspaceSlug={workspaceSlug}
|
||
|
|
selectedId={selectedId}
|
||
|
|
onSelect={setSelectedId}
|
||
|
|
/>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<aside className="min-h-0 border-l border-border bg-background">
|
||
|
|
<ConvoyDetailPanel workspaceSlug={workspaceSlug} convoyId={selectedId} />
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<CreateConvoyDialog
|
||
|
|
workspaceSlug={workspaceSlug}
|
||
|
|
open={createOpen}
|
||
|
|
onOpenChange={setCreateOpen}
|
||
|
|
onCreated={setSelectedId}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|