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

feat: introduce DashboardPageLayout component to streamline page structure and improve layout consistency

Browse Source
This commit is contained in:
Abhimanyu Saharan
2026-02-08 23:58:55 +05:30
parent a4aced9a88
commit 5ea9719c13
9 changed files with 631 additions and 704 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/app/agents/new/page.tsx
View File

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
import { useState } from "react"; import { useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
import { import {
@@ -15,10 +15,7 @@ import {
import { useCreateAgentApiV1AgentsPost } from "@/api/generated/agents/agents"; import { useCreateAgentApiV1AgentsPost } from "@/api/generated/agents/agents";
import { useOrganizationMembership } from "@/lib/use-organization-membership"; import { useOrganizationMembership } from "@/lib/use-organization-membership";
import type { BoardRead } from "@/api/generated/model"; import type { BoardRead } from "@/api/generated/model";
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import SearchableSelect, { import SearchableSelect, {
@@ -155,36 +152,21 @@ export default function NewAgentPage() {
}; };
return ( return (
<DashboardShell> <DashboardPageLayout
<SignedOut> signedOut={{
<SignedOutPanel message: "Sign in to create an agent.",
message="Sign in to create an agent." forceRedirectUrl: "/agents/new",
forceRedirectUrl="/agents/new" signUpForceRedirectUrl: "/agents/new",
signUpForceRedirectUrl="/agents/new" }}
/> title="Create agent"
</SignedOut> description="Agents start in provisioning until they check in."
<SignedIn> isAdmin={isAdmin}
<DashboardSidebar /> adminOnlyMessage="Only organization owners and admins can create agents."
<main className="flex-1 overflow-y-auto bg-slate-50"> >
<div className="border-b border-slate-200 bg-white px-8 py-6"> <form
<div> onSubmit={handleSubmit}
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight"> className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
Create agent >
</h1>
<p className="mt-1 text-sm text-slate-500">
Agents start in provisioning until they check in.
</p>
</div>
</div>
<div className="p-8">
{!isAdmin ? (
<AdminOnlyNotice message="Only organization owners and admins can create agents." />
) : (
<form
onSubmit={handleSubmit}
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
>
<div> <div>
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500"> <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
Basic configuration Basic configuration
@@ -372,11 +354,7 @@ export default function NewAgentPage() {
Back to agents Back to agents
</Button> </Button>
</div> </div>
</form> </form>
)} </DashboardPageLayout>
</div>
</main>
</SignedIn>
</DashboardShell>
); );
} }

243
frontend/src/app/agents/page.tsx
View File

@@ -6,7 +6,7 @@ import { useMemo, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { import {
type ColumnDef, type ColumnDef,
type SortingState, type SortingState,
@@ -18,8 +18,7 @@ import {
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import { StatusPill } from "@/components/atoms/StatusPill"; import { StatusPill } from "@/components/atoms/StatusPill";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button, buttonVariants } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@@ -44,8 +43,6 @@ import {
} from "@/api/generated/boards/boards"; } from "@/api/generated/boards/boards";
import { useOrganizationMembership } from "@/lib/use-organization-membership"; import { useOrganizationMembership } from "@/lib/use-organization-membership";
import type { AgentRead } from "@/api/generated/model"; import type { AgentRead } from "@/api/generated/model";
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
const parseTimestamp = (value?: string | null) => { const parseTimestamp = (value?: string | null) => {
if (!value) return null; if (!value) return null;
@@ -289,138 +286,112 @@ export default function AgentsPage() {
}); });
return ( return (
<DashboardShell> <>
<SignedOut> <DashboardPageLayout
<SignedOutPanel signedOut={{
message="Sign in to view agents." message: "Sign in to view agents.",
forceRedirectUrl="/agents" forceRedirectUrl: "/agents",
signUpForceRedirectUrl="/agents" signUpForceRedirectUrl: "/agents",
/> }}
</SignedOut> title="Agents"
<SignedIn> description={`${agents.length} agent${agents.length === 1 ? "" : "s"} total.`}
<DashboardSidebar /> headerActions={
<main className="flex-1 overflow-y-auto bg-slate-50"> agents.length > 0 ? (
<div className="sticky top-0 z-30 border-b border-slate-200 bg-white"> <Button onClick={() => router.push("/agents/new")}>New agent</Button>
<div className="px-8 py-6"> ) : null
<div className="flex items-center justify-between"> }
<div> isAdmin={isAdmin}
<h1 className="text-2xl font-semibold tracking-tight text-slate-900"> adminOnlyMessage="Only organization owners and admins can access agents."
Agents stickyHeader
</h1> >
<p className="mt-1 text-sm text-slate-500"> <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
{agents.length} agent{agents.length === 1 ? "" : "s"} total. <div className="overflow-x-auto">
</p> <table className="w-full text-left text-sm">
</div> <thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500">
{agents.length > 0 ? ( {table.getHeaderGroups().map((headerGroup) => (
<Button onClick={() => router.push("/agents/new")}> <tr key={headerGroup.id}>
New agent {headerGroup.headers.map((header) => (
</Button> <th key={header.id} className="px-6 py-3">
) : null} {header.isPlaceholder
</div> ? null
</div> : flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody className="divide-y divide-slate-100">
{agentsQuery.isLoading ? (
<tr>
<td colSpan={columns.length} className="px-6 py-8">
<span className="text-sm text-slate-500">Loading…</span>
</td>
</tr>
) : table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => (
<tr key={row.id} className="hover:bg-slate-50">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-6 py-4">
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</td>
))}
</tr>
))
) : (
<tr>
<td colSpan={columns.length} className="px-6 py-16">
<div className="flex flex-col items-center justify-center text-center">
<div className="mb-4 rounded-full bg-slate-50 p-4">
<svg
className="h-16 w-16 text-slate-300"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
</div>
<h3 className="mb-2 text-lg font-semibold text-slate-900">
No agents yet
</h3>
<p className="mb-6 max-w-md text-sm text-slate-500">
Create your first agent to start executing tasks on
this board.
</p>
<Link
href="/agents/new"
className={buttonVariants({
size: "md",
variant: "primary",
})}
>
Create your first agent
</Link>
</div>
</td>
</tr>
)}
</tbody>
</table>
</div> </div>
</div>
<div className="p-8"> {agentsQuery.error ? (
{!isAdmin ? ( <p className="mt-4 text-sm text-red-500">{agentsQuery.error.message}</p>
<AdminOnlyNotice message="Only organization owners and admins can access agents." /> ) : null}
) : ( </DashboardPageLayout>
<>
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
<div className="overflow-x-auto">
<table className="w-full text-left text-sm">
<thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} className="px-6 py-3">
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody className="divide-y divide-slate-100">
{agentsQuery.isLoading ? (
<tr>
<td colSpan={columns.length} className="px-6 py-8">
<span className="text-sm text-slate-500">
Loading…
</span>
</td>
</tr>
) : table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => (
<tr key={row.id} className="hover:bg-slate-50">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-6 py-4">
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</td>
))}
</tr>
))
) : (
<tr>
<td colSpan={columns.length} className="px-6 py-16">
<div className="flex flex-col items-center justify-center text-center">
<div className="mb-4 rounded-full bg-slate-50 p-4">
<svg
className="h-16 w-16 text-slate-300"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
</div>
<h3 className="mb-2 text-lg font-semibold text-slate-900">
No agents yet
</h3>
<p className="mb-6 max-w-md text-sm text-slate-500">
Create your first agent to start executing
tasks on this board.
</p>
<Link
href="/agents/new"
className={buttonVariants({
size: "md",
variant: "primary",
})}
>
Create your first agent
</Link>
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
{agentsQuery.error ? (
<p className="mt-4 text-sm text-red-500">
{agentsQuery.error.message}
</p>
) : null}
</>
)}
</div>
</main>
</SignedIn>
<Dialog <Dialog
open={!!deleteTarget} open={!!deleteTarget}
@@ -453,6 +424,6 @@ export default function AgentsPage() {
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</DashboardShell> </>
); );
} }

65
frontend/src/app/boards/[boardId]/edit/page.tsx
View File

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useParams, useRouter, useSearchParams } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { X } from "lucide-react"; import { X } from "lucide-react";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
@@ -29,10 +29,7 @@ import type {
BoardUpdate, BoardUpdate,
} from "@/api/generated/model"; } from "@/api/generated/model";
import { BoardOnboardingChat } from "@/components/BoardOnboardingChat"; import { BoardOnboardingChat } from "@/components/BoardOnboardingChat";
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Dialog, DialogClose, DialogContent } from "@/components/ui/dialog"; import { Dialog, DialogClose, DialogContent } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@@ -293,37 +290,23 @@ export default function EditBoardPage() {
return ( return (
<> <>
<DashboardShell> <DashboardPageLayout
<SignedOut> signedOut={{
<SignedOutPanel message: "Sign in to edit boards.",
message="Sign in to edit boards." forceRedirectUrl: `/boards/${boardId}/edit`,
forceRedirectUrl={`/boards/${boardId}/edit`} signUpForceRedirectUrl: `/boards/${boardId}/edit`,
signUpForceRedirectUrl={`/boards/${boardId}/edit`} }}
/> title="Edit board"
</SignedOut> description="Update board settings and gateway."
<SignedIn> isAdmin={isAdmin}
<DashboardSidebar /> adminOnlyMessage="Only organization owners and admins can edit board settings."
<main ref={mainRef} className="flex-1 overflow-y-auto bg-slate-50"> mainRef={mainRef}
<div className="border-b border-slate-200 bg-white px-8 py-6"> >
<div> <div className="space-y-6">
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight"> <form
Edit board onSubmit={handleSubmit}
</h1> className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
<p className="mt-1 text-sm text-slate-500"> >
Update board settings and gateway.
</p>
</div>
</div>
<div className="p-8">
{!isAdmin ? (
<AdminOnlyNotice message="Only organization owners and admins can edit board settings." />
) : (
<div className="space-y-6">
<form
onSubmit={handleSubmit}
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
>
{resolvedBoardType !== "general" && {resolvedBoardType !== "general" &&
baseBoard && baseBoard &&
!(baseBoard.goal_confirmed ?? false) ? ( !(baseBoard.goal_confirmed ?? false) ? (
@@ -496,13 +479,9 @@ export default function EditBoardPage() {
{isLoading ? "Saving…" : "Save changes"} {isLoading ? "Saving…" : "Save changes"}
</Button> </Button>
</div> </div>
</form> </form>
</div> </div>
)} </DashboardPageLayout>
</div>
</main>
</SignedIn>
</DashboardShell>
<Dialog open={isOnboardingOpen} onOpenChange={setIsOnboardingOpen}> <Dialog open={isOnboardingOpen} onOpenChange={setIsOnboardingOpen}>
<DialogContent <DialogContent
aria-label="Board onboarding" aria-label="Board onboarding"

228
frontend/src/app/boards/new/page.tsx
View File

@@ -6,7 +6,7 @@ import { useMemo, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
import { useCreateBoardApiV1BoardsPost } from "@/api/generated/boards/boards"; import { useCreateBoardApiV1BoardsPost } from "@/api/generated/boards/boards";
@@ -20,10 +20,7 @@ import {
} from "@/api/generated/gateways/gateways"; } from "@/api/generated/gateways/gateways";
import { useOrganizationMembership } from "@/lib/use-organization-membership"; import { useOrganizationMembership } from "@/lib/use-organization-membership";
import type { BoardGroupRead } from "@/api/generated/model"; import type { BoardGroupRead } from "@/api/generated/model";
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import SearchableSelect from "@/components/ui/searchable-select"; import SearchableSelect from "@/components/ui/searchable-select";
@@ -141,130 +138,109 @@ export default function NewBoardPage() {
}; };
return ( return (
<DashboardShell> <DashboardPageLayout
<SignedOut> signedOut={{
<SignedOutPanel message: "Sign in to create a board.",
message="Sign in to create a board." forceRedirectUrl: "/boards/new",
forceRedirectUrl="/boards/new" signUpForceRedirectUrl: "/boards/new",
signUpForceRedirectUrl="/boards/new" }}
/> title="Create board"
</SignedOut> description="Boards organize tasks and agents by mission context."
<SignedIn> isAdmin={isAdmin}
<DashboardSidebar /> adminOnlyMessage="Only organization owners and admins can create boards."
<main className="flex-1 overflow-y-auto bg-slate-50"> >
<div className="border-b border-slate-200 bg-white px-8 py-6"> <form
<div> onSubmit={handleSubmit}
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight"> className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
Create board >
</h1> <div className="space-y-4">
<p className="mt-1 text-sm text-slate-500"> <div className="grid gap-6 md:grid-cols-2">
Boards organize tasks and agents by mission context. <div className="space-y-2">
</p> <label className="text-sm font-medium text-slate-900">
Board name <span className="text-red-500">*</span>
</label>
<Input
value={name}
onChange={(event) => setName(event.target.value)}
placeholder="e.g. Release operations"
disabled={isLoading}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Gateway <span className="text-red-500">*</span>
</label>
<SearchableSelect
ariaLabel="Select gateway"
value={displayGatewayId}
onValueChange={setGatewayId}
options={gatewayOptions}
placeholder="Select gateway"
searchPlaceholder="Search gateways..."
emptyMessage="No gateways found."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
/>
</div> </div>
</div> </div>
<div className="p-8"> <div className="grid gap-6 md:grid-cols-2">
{!isAdmin ? ( <div className="space-y-2">
<AdminOnlyNotice message="Only organization owners and admins can create boards." /> <label className="text-sm font-medium text-slate-900">
) : ( Board group
<form </label>
onSubmit={handleSubmit} <SearchableSelect
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" ariaLabel="Select board group"
> value={boardGroupId}
<div className="space-y-4"> onValueChange={setBoardGroupId}
<div className="grid gap-6 md:grid-cols-2"> options={groupOptions}
<div className="space-y-2"> placeholder="No group"
<label className="text-sm font-medium text-slate-900"> searchPlaceholder="Search groups..."
Board name <span className="text-red-500">*</span> emptyMessage="No groups found."
</label> triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
<Input contentClassName="rounded-xl border border-slate-200 shadow-lg"
value={name} itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
onChange={(event) => setName(event.target.value)} disabled={isLoading}
placeholder="e.g. Release operations" />
disabled={isLoading} <p className="text-xs text-slate-500">
/> Optional. Groups increase cross-board visibility.
</div> </p>
<div className="space-y-2"> </div>
<label className="text-sm font-medium text-slate-900">
Gateway <span className="text-red-500">*</span>
</label>
<SearchableSelect
ariaLabel="Select gateway"
value={displayGatewayId}
onValueChange={setGatewayId}
options={gatewayOptions}
placeholder="Select gateway"
searchPlaceholder="Search gateways..."
emptyMessage="No gateways found."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
/>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Board group
</label>
<SearchableSelect
ariaLabel="Select board group"
value={boardGroupId}
onValueChange={setBoardGroupId}
options={groupOptions}
placeholder="No group"
searchPlaceholder="Search groups..."
emptyMessage="No groups found."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
disabled={isLoading}
/>
<p className="text-xs text-slate-500">
Optional. Groups increase cross-board visibility.
</p>
</div>
</div>
</div>
{gateways.length === 0 ? (
<div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
<p>
No gateways available. Create one in{" "}
<Link
href="/gateways"
className="font-medium text-blue-600 hover:text-blue-700"
>
Gateways
</Link>{" "}
to continue.
</p>
</div>
) : null}
{errorMessage ? (
<p className="text-sm text-red-500">{errorMessage}</p>
) : null}
<div className="flex justify-end gap-3">
<Button
type="button"
variant="ghost"
onClick={() => router.push("/boards")}
disabled={isLoading}
>
Cancel
</Button>
<Button type="submit" disabled={isLoading || !isFormReady}>
{isLoading ? "Creating…" : "Create board"}
</Button>
</div>
</form>
)}
</div> </div>
</main> </div>
</SignedIn>
</DashboardShell> {gateways.length === 0 ? (
<div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
<p>
No gateways available. Create one in{" "}
<Link
href="/gateways"
className="font-medium text-blue-600 hover:text-blue-700"
>
Gateways
</Link>{" "}
to continue.
</p>
</div>
) : null}
{errorMessage ? <p className="text-sm text-red-500">{errorMessage}</p> : null}
<div className="flex justify-end gap-3">
<Button
type="button"
variant="ghost"
onClick={() => router.push("/boards")}
disabled={isLoading}
>
Cancel
</Button>
<Button type="submit" disabled={isLoading || !isFormReady}>
{isLoading ? "Creating…" : "Create board"}
</Button>
</div>
</form>
</DashboardPageLayout>
); );
} }

132
frontend/src/app/gateways/[gatewayId]/edit/page.tsx
View File

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
import { useState } from "react"; import { useState } from "react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
import { import {
@@ -15,11 +15,8 @@ import {
} from "@/api/generated/gateways/gateways"; } from "@/api/generated/gateways/gateways";
import { useOrganizationMembership } from "@/lib/use-organization-membership"; import { useOrganizationMembership } from "@/lib/use-organization-membership";
import type { GatewayUpdate } from "@/api/generated/model"; import type { GatewayUpdate } from "@/api/generated/model";
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
import { GatewayForm } from "@/components/gateways/GatewayForm"; import { GatewayForm } from "@/components/gateways/GatewayForm";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { import {
DEFAULT_MAIN_SESSION_KEY, DEFAULT_MAIN_SESSION_KEY,
DEFAULT_WORKSPACE_ROOT, DEFAULT_WORKSPACE_ROOT,
@@ -164,76 +161,59 @@ export default function EditGatewayPage() {
}; };
return ( return (
<DashboardShell> <DashboardPageLayout
<SignedOut> signedOut={{
<SignedOutPanel message: "Sign in to edit a gateway.",
message="Sign in to edit a gateway." forceRedirectUrl: `/gateways/${gatewayId}/edit`,
forceRedirectUrl={`/gateways/${gatewayId}/edit`} }}
/> title={
</SignedOut> resolvedName.trim()
<SignedIn> ? `Edit gateway — ${resolvedName.trim()}`
<DashboardSidebar /> : "Edit gateway"
<main className="flex-1 overflow-y-auto bg-slate-50"> }
<div className="border-b border-slate-200 bg-white px-8 py-6"> description="Update connection settings for this OpenClaw gateway."
<div> isAdmin={isAdmin}
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight"> adminOnlyMessage="Only organization owners and admins can edit gateways."
{resolvedName.trim() >
? `Edit gateway — ${resolvedName.trim()}` <GatewayForm
: "Edit gateway"} name={resolvedName}
</h1> gatewayUrl={resolvedGatewayUrl}
<p className="mt-1 text-sm text-slate-500"> gatewayToken={resolvedGatewayToken}
Update connection settings for this OpenClaw gateway. mainSessionKey={resolvedMainSessionKey}
</p> workspaceRoot={resolvedWorkspaceRoot}
</div> gatewayUrlError={gatewayUrlError}
</div> gatewayCheckStatus={gatewayCheckStatus}
gatewayCheckMessage={gatewayCheckMessage}
<div className="p-8"> errorMessage={errorMessage}
{!isAdmin ? ( isLoading={isLoading}
<AdminOnlyNotice message="Only organization owners and admins can edit gateways." /> canSubmit={canSubmit}
) : ( mainSessionKeyPlaceholder={DEFAULT_MAIN_SESSION_KEY}
<GatewayForm workspaceRootPlaceholder={DEFAULT_WORKSPACE_ROOT}
name={resolvedName} cancelLabel="Back"
gatewayUrl={resolvedGatewayUrl} submitLabel="Save changes"
gatewayToken={resolvedGatewayToken} submitBusyLabel="Saving…"
mainSessionKey={resolvedMainSessionKey} onSubmit={handleSubmit}
workspaceRoot={resolvedWorkspaceRoot} onCancel={() => router.push("/gateways")}
gatewayUrlError={gatewayUrlError} onRunGatewayCheck={runGatewayCheck}
gatewayCheckStatus={gatewayCheckStatus} onNameChange={setName}
gatewayCheckMessage={gatewayCheckMessage} onGatewayUrlChange={(next) => {
errorMessage={errorMessage} setGatewayUrl(next);
isLoading={isLoading} setGatewayUrlError(null);
canSubmit={canSubmit} setGatewayCheckStatus("idle");
mainSessionKeyPlaceholder={DEFAULT_MAIN_SESSION_KEY} setGatewayCheckMessage(null);
workspaceRootPlaceholder={DEFAULT_WORKSPACE_ROOT} }}
cancelLabel="Back" onGatewayTokenChange={(next) => {
submitLabel="Save changes" setGatewayToken(next);
submitBusyLabel="Saving…" setGatewayCheckStatus("idle");
onSubmit={handleSubmit} setGatewayCheckMessage(null);
onCancel={() => router.push("/gateways")} }}
onRunGatewayCheck={runGatewayCheck} onMainSessionKeyChange={(next) => {
onNameChange={setName} setMainSessionKey(next);
onGatewayUrlChange={(next) => { setGatewayCheckStatus("idle");
setGatewayUrl(next); setGatewayCheckMessage(null);
setGatewayUrlError(null); }}
setGatewayCheckStatus("idle"); onWorkspaceRootChange={setWorkspaceRoot}
setGatewayCheckMessage(null); />
}} </DashboardPageLayout>
onGatewayTokenChange={(next) => {
setGatewayToken(next);
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
}}
onMainSessionKeyChange={(next) => {
setMainSessionKey(next);
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
}}
onWorkspaceRootChange={setWorkspaceRoot}
/>
)}
</div>
</main>
</SignedIn>
</DashboardShell>
); );
} }

99
frontend/src/app/gateways/[gatewayId]/page.tsx
View File

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
import { useMemo } from "react"; import { useMemo } from "react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
import { import {
@@ -19,10 +19,7 @@ import {
useListAgentsApiV1AgentsGet, useListAgentsApiV1AgentsGet,
} from "@/api/generated/agents/agents"; } from "@/api/generated/agents/agents";
import { useOrganizationMembership } from "@/lib/use-organization-membership"; import { useOrganizationMembership } from "@/lib/use-organization-membership";
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
const formatTimestamp = (value?: string | null) => { const formatTimestamp = (value?: string | null) => {
@@ -113,57 +110,38 @@ export default function GatewayDetailPage() {
); );
return ( return (
<DashboardShell> <DashboardPageLayout
<SignedOut> signedOut={{
<SignedOutPanel message: "Sign in to view a gateway.",
message="Sign in to view a gateway." forceRedirectUrl: `/gateways/${gatewayId}`,
forceRedirectUrl={`/gateways/${gatewayId}`} }}
/> title={title}
</SignedOut> description="Gateway configuration and connection details."
<SignedIn> headerActions={
<DashboardSidebar /> <div className="flex items-center gap-2">
<main className="flex-1 overflow-y-auto bg-slate-50"> <Button variant="outline" onClick={() => router.push("/gateways")}>
<div className="border-b border-slate-200 bg-white px-8 py-6"> Back to gateways
<div className="flex flex-wrap items-center justify-between gap-4"> </Button>
<div> {isAdmin && gatewayId ? (
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight"> <Button onClick={() => router.push(`/gateways/${gatewayId}/edit`)}>
{title} Edit gateway
</h1> </Button>
<p className="mt-1 text-sm text-slate-500"> ) : null}
Gateway configuration and connection details. </div>
</p> }
</div> isAdmin={isAdmin}
<div className="flex items-center gap-2"> adminOnlyMessage="Only organization owners and admins can access gateways."
<Button >
variant="outline" {gatewayQuery.isLoading ? (
onClick={() => router.push("/gateways")} <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
> Loading gateway…
Back to gateways </div>
</Button> ) : gatewayQuery.error ? (
{isAdmin && gatewayId ? ( <div className="rounded-xl border border-rose-200 bg-rose-50 p-6 text-sm text-rose-700">
<Button {gatewayQuery.error.message}
onClick={() => router.push(`/gateways/${gatewayId}/edit`)} </div>
> ) : gateway ? (
Edit gateway <div className="space-y-6">
</Button>
) : null}
</div>
</div>
</div>
<div className="p-8">
{!isAdmin ? (
<AdminOnlyNotice message="Only organization owners and admins can access gateways." />
) : gatewayQuery.isLoading ? (
<div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
Loading gateway…
</div>
) : gatewayQuery.error ? (
<div className="rounded-xl border border-rose-200 bg-rose-50 p-6 text-sm text-rose-700">
{gatewayQuery.error.message}
</div>
) : gateway ? (
<div className="space-y-6">
<div className="grid gap-6 lg:grid-cols-2"> <div className="grid gap-6 lg:grid-cols-2">
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm"> <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -312,11 +290,8 @@ export default function GatewayDetailPage() {
</table> </table>
</div> </div>
</div> </div>
</div> </div>
) : null} ) : null}
</div> </DashboardPageLayout>
</main>
</SignedIn>
</DashboardShell>
); );
} }

126
frontend/src/app/gateways/new/page.tsx
View File

@@ -5,16 +5,13 @@ export const dynamic = "force-dynamic";
import { useState } from "react"; import { useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
import { useCreateGatewayApiV1GatewaysPost } from "@/api/generated/gateways/gateways"; import { useCreateGatewayApiV1GatewaysPost } from "@/api/generated/gateways/gateways";
import { useOrganizationMembership } from "@/lib/use-organization-membership"; import { useOrganizationMembership } from "@/lib/use-organization-membership";
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
import { GatewayForm } from "@/components/gateways/GatewayForm"; import { GatewayForm } from "@/components/gateways/GatewayForm";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { import {
DEFAULT_MAIN_SESSION_KEY, DEFAULT_MAIN_SESSION_KEY,
DEFAULT_WORKSPACE_ROOT, DEFAULT_WORKSPACE_ROOT,
@@ -125,74 +122,55 @@ export default function NewGatewayPage() {
}; };
return ( return (
<DashboardShell> <DashboardPageLayout
<SignedOut> signedOut={{
<SignedOutPanel message: "Sign in to create a gateway.",
message="Sign in to create a gateway." forceRedirectUrl: "/gateways/new",
forceRedirectUrl="/gateways/new" }}
/> title="Create gateway"
</SignedOut> description="Configure an OpenClaw gateway for mission control."
<SignedIn> isAdmin={isAdmin}
<DashboardSidebar /> adminOnlyMessage="Only organization owners and admins can create gateways."
<main className="flex-1 overflow-y-auto bg-slate-50"> >
<div className="border-b border-slate-200 bg-white px-8 py-6"> <GatewayForm
<div> name={name}
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight"> gatewayUrl={gatewayUrl}
Create gateway gatewayToken={gatewayToken}
</h1> mainSessionKey={mainSessionKey}
<p className="mt-1 text-sm text-slate-500"> workspaceRoot={workspaceRoot}
Configure an OpenClaw gateway for mission control. gatewayUrlError={gatewayUrlError}
</p> gatewayCheckStatus={gatewayCheckStatus}
</div> gatewayCheckMessage={gatewayCheckMessage}
</div> errorMessage={error}
isLoading={isLoading}
<div className="p-8"> canSubmit={canSubmit}
{!isAdmin ? ( mainSessionKeyPlaceholder={DEFAULT_MAIN_SESSION_KEY}
<AdminOnlyNotice message="Only organization owners and admins can create gateways." /> workspaceRootPlaceholder={DEFAULT_WORKSPACE_ROOT}
) : ( cancelLabel="Cancel"
<GatewayForm submitLabel="Create gateway"
name={name} submitBusyLabel="Creating…"
gatewayUrl={gatewayUrl} onSubmit={handleSubmit}
gatewayToken={gatewayToken} onCancel={() => router.push("/gateways")}
mainSessionKey={mainSessionKey} onRunGatewayCheck={runGatewayCheck}
workspaceRoot={workspaceRoot} onNameChange={setName}
gatewayUrlError={gatewayUrlError} onGatewayUrlChange={(next) => {
gatewayCheckStatus={gatewayCheckStatus} setGatewayUrl(next);
gatewayCheckMessage={gatewayCheckMessage} setGatewayUrlError(null);
errorMessage={error} setGatewayCheckStatus("idle");
isLoading={isLoading} setGatewayCheckMessage(null);
canSubmit={canSubmit} }}
mainSessionKeyPlaceholder={DEFAULT_MAIN_SESSION_KEY} onGatewayTokenChange={(next) => {
workspaceRootPlaceholder={DEFAULT_WORKSPACE_ROOT} setGatewayToken(next);
cancelLabel="Cancel" setGatewayCheckStatus("idle");
submitLabel="Create gateway" setGatewayCheckMessage(null);
submitBusyLabel="Creating…" }}
onSubmit={handleSubmit} onMainSessionKeyChange={(next) => {
onCancel={() => router.push("/gateways")} setMainSessionKey(next);
onRunGatewayCheck={runGatewayCheck} setGatewayCheckStatus("idle");
onNameChange={setName} setGatewayCheckMessage(null);
onGatewayUrlChange={(next) => { }}
setGatewayUrl(next); onWorkspaceRootChange={setWorkspaceRoot}
setGatewayUrlError(null); />
setGatewayCheckStatus("idle"); </DashboardPageLayout>
setGatewayCheckMessage(null);
}}
onGatewayTokenChange={(next) => {
setGatewayToken(next);
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
}}
onMainSessionKeyChange={(next) => {
setMainSessionKey(next);
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
}}
onWorkspaceRootChange={setWorkspaceRoot}
/>
)}
</div>
</main>
</SignedIn>
</DashboardShell>
); );
} }

265
frontend/src/app/gateways/page.tsx
View File

@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { SignedIn, SignedOut, useAuth } from "@/auth/clerk"; import { useAuth } from "@/auth/clerk";
import { import {
type ColumnDef, type ColumnDef,
type SortingState, type SortingState,
@@ -16,8 +16,7 @@ import {
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button, buttonVariants } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@@ -37,8 +36,6 @@ import {
} from "@/api/generated/gateways/gateways"; } from "@/api/generated/gateways/gateways";
import { useOrganizationMembership } from "@/lib/use-organization-membership"; import { useOrganizationMembership } from "@/lib/use-organization-membership";
import type { GatewayRead } from "@/api/generated/model"; import type { GatewayRead } from "@/api/generated/model";
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
const truncate = (value?: string | null, max = 24) => { const truncate = (value?: string | null, max = 24) => {
if (!value) return "—"; if (!value) return "—";
@@ -220,148 +217,124 @@ export default function GatewaysPage() {
}); });
return ( return (
<DashboardShell> <>
<SignedOut> <DashboardPageLayout
<SignedOutPanel signedOut={{
message="Sign in to view gateways." message: "Sign in to view gateways.",
forceRedirectUrl="/gateways" forceRedirectUrl: "/gateways",
/> }}
</SignedOut> title="Gateways"
<SignedIn> description="Manage OpenClaw gateway connections used by boards"
<DashboardSidebar /> headerActions={
<main className="flex-1 overflow-y-auto bg-slate-50"> isAdmin && gateways.length > 0 ? (
<div className="sticky top-0 z-30 border-b border-slate-200 bg-white"> <Link
<div className="px-8 py-6"> href="/gateways/new"
<div className="flex items-center justify-between"> className={buttonVariants({
<div> size: "md",
<h1 className="text-2xl font-semibold tracking-tight text-slate-900"> variant: "primary",
Gateways })}
</h1> >
<p className="mt-1 text-sm text-slate-500"> Create gateway
Manage OpenClaw gateway connections used by boards </Link>
</p> ) : null
</div> }
{isAdmin && gateways.length > 0 ? ( isAdmin={isAdmin}
<Link adminOnlyMessage="Only organization owners and admins can access gateways."
href="/gateways/new" stickyHeader
className={buttonVariants({ >
size: "md", <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
variant: "primary", <div className="overflow-x-auto">
})} <table className="w-full text-left text-sm">
> <thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500">
Create gateway {table.getHeaderGroups().map((headerGroup) => (
</Link> <tr key={headerGroup.id}>
) : null} {headerGroup.headers.map((header) => (
</div> <th key={header.id} className="px-6 py-3">
</div> {header.isPlaceholder
</div> ? null
: flexRender(
<div className="p-8"> header.column.columnDef.header,
{!isAdmin ? ( header.getContext(),
<AdminOnlyNotice message="Only organization owners and admins can access gateways." /> )}
) : ( </th>
<> ))}
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm"> </tr>
<div className="overflow-x-auto"> ))}
<table className="w-full text-left text-sm"> </thead>
<thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500"> <tbody className="divide-y divide-slate-100">
{table.getHeaderGroups().map((headerGroup) => ( {gatewaysQuery.isLoading ? (
<tr key={headerGroup.id}> <tr>
{headerGroup.headers.map((header) => ( <td colSpan={columns.length} className="px-6 py-8">
<th key={header.id} className="px-6 py-3"> <span className="text-sm text-slate-500">Loading…</span>
{header.isPlaceholder </td>
? null </tr>
: flexRender( ) : table.getRowModel().rows.length ? (
header.column.columnDef.header, table.getRowModel().rows.map((row) => (
header.getContext(), <tr key={row.id} className="hover:bg-slate-50">
)} {row.getVisibleCells().map((cell) => (
</th> <td key={cell.id} className="px-6 py-4">
))} {flexRender(
</tr> cell.column.columnDef.cell,
))} cell.getContext(),
</thead>
<tbody className="divide-y divide-slate-100">
{gatewaysQuery.isLoading ? (
<tr>
<td colSpan={columns.length} className="px-6 py-8">
<span className="text-sm text-slate-500">
Loading…
</span>
</td>
</tr>
) : table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => (
<tr key={row.id} className="hover:bg-slate-50">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-6 py-4">
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</td>
))}
</tr>
))
) : (
<tr>
<td colSpan={columns.length} className="px-6 py-16">
<div className="flex flex-col items-center justify-center text-center">
<div className="mb-4 rounded-full bg-slate-50 p-4">
<svg
className="h-16 w-16 text-slate-300"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect
x="2"
y="7"
width="20"
height="14"
rx="2"
ry="2"
/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
</svg>
</div>
<h3 className="mb-2 text-lg font-semibold text-slate-900">
No gateways yet
</h3>
<p className="mb-6 max-w-md text-sm text-slate-500">
Create your first gateway to connect boards
and start managing your OpenClaw connections.
</p>
<Link
href="/gateways/new"
className={buttonVariants({
size: "md",
variant: "primary",
})}
>
Create your first gateway
</Link>
</div>
</td>
</tr>
)} )}
</tbody> </td>
</table> ))}
</div> </tr>
</div> ))
) : (
<tr>
<td colSpan={columns.length} className="px-6 py-16">
<div className="flex flex-col items-center justify-center text-center">
<div className="mb-4 rounded-full bg-slate-50 p-4">
<svg
className="h-16 w-16 text-slate-300"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect
x="2"
y="7"
width="20"
height="14"
rx="2"
ry="2"
/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
</svg>
</div>
<h3 className="mb-2 text-lg font-semibold text-slate-900">
No gateways yet
</h3>
<p className="mb-6 max-w-md text-sm text-slate-500">
Create your first gateway to connect boards and start
managing your OpenClaw connections.
</p>
<Link
href="/gateways/new"
className={buttonVariants({
size: "md",
variant: "primary",
})}
>
Create your first gateway
</Link>
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
{gatewaysQuery.error ? ( {gatewaysQuery.error ? (
<p className="mt-4 text-sm text-red-500"> <p className="mt-4 text-sm text-red-500">{gatewaysQuery.error.message}</p>
{gatewaysQuery.error.message} ) : null}
</p> </DashboardPageLayout>
) : null}
</>
)}
</div>
</main>
</SignedIn>
<Dialog <Dialog
open={Boolean(deleteTarget)} open={Boolean(deleteTarget)}
@@ -390,6 +363,6 @@ export default function GatewaysPage() {
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</DashboardShell> </>
); );
} }

117
frontend/src/components/templates/DashboardPageLayout.tsx Normal file
View File

@@ -0,0 +1,117 @@
import type { ReactNode, Ref } from "react";
import { SignedIn, SignedOut } from "@/auth/clerk";
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { cn } from "@/lib/utils";
import { DashboardShell } from "./DashboardShell";
type SignedOutConfig = {
message: string;
forceRedirectUrl: string;
signUpForceRedirectUrl?: string;
mode?: "modal" | "redirect";
buttonLabel?: string;
buttonTestId?: string;
};
type DashboardPageLayoutProps = {
signedOut: SignedOutConfig;
title: ReactNode;
description?: ReactNode;
headerActions?: ReactNode;
children: ReactNode;
isAdmin?: boolean;
adminOnlyMessage?: string;
stickyHeader?: boolean;
mainClassName?: string;
headerClassName?: string;
contentClassName?: string;
mainRef?: Ref<HTMLElement>;
};
export function DashboardPageLayout({
signedOut,
title,
description,
headerActions,
children,
isAdmin,
adminOnlyMessage,
stickyHeader = false,
mainClassName,
headerClassName,
contentClassName,
mainRef,
}: DashboardPageLayoutProps) {
const showAdminOnlyNotice =
typeof isAdmin === "boolean" && Boolean(adminOnlyMessage) && !isAdmin;
return (
<DashboardShell>
<SignedOut>
<SignedOutPanel
message={signedOut.message}
forceRedirectUrl={signedOut.forceRedirectUrl}
signUpForceRedirectUrl={signedOut.signUpForceRedirectUrl}
mode={signedOut.mode}
buttonLabel={signedOut.buttonLabel}
buttonTestId={signedOut.buttonTestId}
/>
</SignedOut>
<SignedIn>
<DashboardSidebar />
<main
ref={mainRef}
className={cn("flex-1 overflow-y-auto bg-slate-50", mainClassName)}
>
<div
className={cn(
"border-b border-slate-200 bg-white",
stickyHeader && "sticky top-0 z-30",
headerClassName,
)}
>
<div className="px-8 py-6">
{headerActions ? (
<div className="flex flex-wrap items-center justify-between gap-4">
<div>
<h1 className="font-heading text-2xl font-semibold tracking-tight text-slate-900">
{title}
</h1>
{description ? (
<p className="mt-1 text-sm text-slate-500">
{description}
</p>
) : null}
</div>
{headerActions}
</div>
) : (
<div>
<h1 className="font-heading text-2xl font-semibold tracking-tight text-slate-900">
{title}
</h1>
{description ? (
<p className="mt-1 text-sm text-slate-500">{description}</p>
) : null}
</div>
)}
</div>
</div>
<div className={cn("p-8", contentClassName)}>
{showAdminOnlyNotice ? (
<AdminOnlyNotice message={adminOnlyMessage ?? ""} />
) : (
children
)}
</div>
</main>
</SignedIn>
</DashboardShell>
);
}