mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
[27208d92] Consolidate Cockpit/Goals/Secretary/Pitches into a Business page (#184)
* [0c66b856] Frontend: Build tabbed Business page consolidating Goals/Secretary/Pitches (#183) * [c9f00d0d] feat(business): add /business tabbed page consolidating Goals, Secretary, Pitches (#182) - Create src/app/(dashboard)/business/page.tsx with URL-driven Tabs (goals|secretary|pitches), reading ?tab= via useSearchParams; defaults to 'goals' - Create src/components/business/goals-tab.tsx: key-introspected form fields for objectives items and operating_policy (no raw JSON textareas), updated_at/updated_by metadata, skeleton loading, OfflineState on error - Create src/components/business/secretary-tab.tsx: ReactMarkdown (GFM) chat bubbles, structured directive cards with labeled key-value rows, RequiredNotesDialog for reject, skeleton loading, OfflineState on error - Create src/components/business/pitches-tab.tsx: sub-header Refresh button, PitchCard skeleton loading, OfflineState on error (not empty-state text), RequiredNotesDialog for both Approve and Reject - Create src/components/ui/required-notes-dialog.tsx: Submit disabled on empty/whitespace, Cancel closes without action, state resets on each open via key pattern - Update sidebar.tsx: remove Cockpit/Company Goals/Secretary/Pitches entries, add single Business entry (Building2 icon, /business) - Replace company-goals/page.tsx, secretary/page.tsx, pitches/page.tsx with server-side redirect() to /business?tab=X - Replace cockpit/page.tsx with notFound() (404) - All tabs: shadcn Card + Skeleton, sonner toast for success/error Co-authored-by: Frontend Developer 1 <fe-dev-1@agents.roboco.dev> * [e3e5ff9b] feat(dashboard): add StrategySignalsPanel next to CeoApprovalQueue in a 2-column grid layout (#181) Co-authored-by: Frontend Developer 2 <fe-dev-2@agents.roboco.dev> --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@agents.roboco.dev> Co-authored-by: Frontend Developer 2 <fe-dev-2@agents.roboco.dev> * refactor(panel): delete the consolidated old routes instead of stubbing them cockpit/company-goals/secretary/pitches are fully consolidated into /business, so the old route pages are dead code. Remove the four page.tsx files outright rather than keep redirect/404 stubs — the clean move is to delete, not add. The sidebar already points only at /business; no internal links reference the old routes (the remaining /company-goals|/secretary|/pitches|/cockpit strings are backend API paths the API clients call, unaffected). Old bookmarks now resolve to Next's default 404, which is correct for a removed route. * perf(cockpit): light /cockpit/signals endpoint for the Dashboard panel The relocated Strategy Signals panel was calling /cockpit/summary, which runs the whole fan-out (company goals + usage/spend + task-counts + pitches + strategy assess) just to read the signals. Add CockpitService.signals() + GET /api/cockpit/signals (CockpitSignals schema, same _COCKPIT_ROLES gate) that runs only StrategyEngine.assess(), and repoint the panel (+ cockpitApi.signals() client method, CockpitSignal type). Now the Dashboard fetches only what it shows. Backend gated: ruff + full mypy + 6 cockpit tests green (live DB). --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@agents.roboco.dev> Co-authored-by: Frontend Developer 2 <fe-dev-2@agents.roboco.dev> Co-authored-by: Renn F <rennf93@users.noreply.github.com>
This commit is contained in:
Renzo F
co-authored by
Frontend Developer 1
Frontend Developer 2
Renn F
Frontend Developer 1
Frontend Developer 2
Renn F
parent
a89d3cc885
commit
1757659754
@@ -0,0 +1,374 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import { Save } from "lucide-react";
|
||||
import {
|
||||
companyGoalsApi,
|
||||
type CompanyGoals,
|
||||
type CompanyGoalsUpdate,
|
||||
} from "@/lib/api/company-goals";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { OfflineState } from "@/components/ui/offline-state";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function parseError(e: unknown): string {
|
||||
return e instanceof Error ? e.message : "Unknown error";
|
||||
}
|
||||
|
||||
/** Format an ISO timestamp nicely, or return the raw string. */
|
||||
function formatTs(ts: string | null | undefined): string {
|
||||
if (!ts) return "—";
|
||||
try {
|
||||
return new Date(ts).toLocaleString();
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Objectives field — one text field per key derived from the first item.
|
||||
// Falls back to a single "value" field when array is empty.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface ObjectivesEditorProps {
|
||||
items: Record<string, unknown>[];
|
||||
onChange: (items: Record<string, unknown>[]) => void;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
function ObjectivesEditor({ items, onChange, disabled }: ObjectivesEditorProps) {
|
||||
// Derive keys from the first item; fall back to generic keys.
|
||||
const keys =
|
||||
items.length > 0
|
||||
? Object.keys(items[0])
|
||||
: ["metric", "target", "status"];
|
||||
|
||||
const handleChange = (
|
||||
rowIdx: number,
|
||||
key: string,
|
||||
value: string
|
||||
) => {
|
||||
const next = items.map((item, i) =>
|
||||
i === rowIdx ? { ...item, [key]: value } : item
|
||||
);
|
||||
onChange(next);
|
||||
};
|
||||
|
||||
const addRow = () => {
|
||||
const empty: Record<string, unknown> = {};
|
||||
keys.forEach((k) => (empty[k] = ""));
|
||||
onChange([...items, empty]);
|
||||
};
|
||||
|
||||
const removeRow = (idx: number) => {
|
||||
onChange(items.filter((_, i) => i !== idx));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{items.map((item, rowIdx) => (
|
||||
<div key={rowIdx} className="rounded-lg border p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
Objective #{rowIdx + 1}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={disabled}
|
||||
onClick={() => removeRow(rowIdx)}
|
||||
className="h-6 px-2 text-xs text-destructive hover:text-destructive"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
{keys.map((key) => (
|
||||
<div key={key} className="space-y-1">
|
||||
<Label htmlFor={`obj-${rowIdx}-${key}`} className="text-xs capitalize">
|
||||
{key.replace(/_/g, " ")}
|
||||
</Label>
|
||||
<Input
|
||||
id={`obj-${rowIdx}-${key}`}
|
||||
value={String(item[key] ?? "")}
|
||||
disabled={disabled}
|
||||
onChange={(e) => handleChange(rowIdx, key, e.target.value)}
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={disabled}
|
||||
onClick={addRow}
|
||||
>
|
||||
+ Add objective
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Operating policy editor — one input per key
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface PolicyEditorProps {
|
||||
policy: Record<string, unknown>;
|
||||
onChange: (policy: Record<string, unknown>) => void;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
function PolicyEditor({ policy, onChange, disabled }: PolicyEditorProps) {
|
||||
const keys = Object.keys(policy);
|
||||
|
||||
const handleChange = (key: string, value: string) => {
|
||||
onChange({ ...policy, [key]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{keys.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
No policy keys yet — save with the backend to populate.
|
||||
</p>
|
||||
)}
|
||||
{keys.map((key) => (
|
||||
<div key={key} className="space-y-1">
|
||||
<Label htmlFor={`policy-${key}`} className="text-xs capitalize">
|
||||
{key.replace(/_/g, " ")}
|
||||
</Label>
|
||||
<Input
|
||||
id={`policy-${key}`}
|
||||
value={String(policy[key] ?? "")}
|
||||
disabled={disabled}
|
||||
onChange={(e) => handleChange(key, e.target.value)}
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Skeleton loading state
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function GoalsTabSkeleton() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-40 mb-1" />
|
||||
<Skeleton className="h-4 w-80" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<div className="rounded-lg border p-3 space-y-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-8 w-full" />
|
||||
<Skeleton className="h-4 w-16" />
|
||||
<Skeleton className="h-8 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-36" />
|
||||
<Skeleton className="h-8 w-full" />
|
||||
<Skeleton className="h-8 w-full" />
|
||||
</div>
|
||||
<Skeleton className="h-9 w-32" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main editable form — only rendered when data is loaded
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface GoalsFormProps {
|
||||
goals: CompanyGoals;
|
||||
refetch: () => void;
|
||||
}
|
||||
|
||||
function GoalsForm({ goals, refetch }: GoalsFormProps) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [northStar, setNorthStar] = useState<string | null>(null);
|
||||
const [constraints, setConstraints] = useState<string | null>(null);
|
||||
const [objectives, setObjectives] = useState<Record<string, unknown>[] | null>(null);
|
||||
const [policy, setPolicy] = useState<Record<string, unknown> | null>(null);
|
||||
|
||||
const northStarVal = northStar ?? goals.north_star ?? "";
|
||||
const constraintsVal = constraints ?? (goals.constraints ?? []).join("\n");
|
||||
const objectivesVal = objectives ?? (goals.objectives ?? []);
|
||||
const policyVal = policy ?? (goals.operating_policy ?? {});
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: (update: CompanyGoalsUpdate) => companyGoalsApi.update(update),
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ["company-goals"] });
|
||||
setNorthStar(null);
|
||||
setConstraints(null);
|
||||
setObjectives(null);
|
||||
setPolicy(null);
|
||||
toast.success("Company charter updated");
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Failed to save: ${parseError(error)}`);
|
||||
},
|
||||
});
|
||||
|
||||
const handleSave = () => {
|
||||
saveMutation.mutate({
|
||||
north_star: northStarVal,
|
||||
objectives: objectivesVal,
|
||||
constraints: constraintsVal
|
||||
.split("\n")
|
||||
.map((c) => c.trim())
|
||||
.filter(Boolean),
|
||||
operating_policy: policyVal,
|
||||
});
|
||||
};
|
||||
|
||||
const saving = saveMutation.isPending;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Company Charter</CardTitle>
|
||||
<CardDescription>
|
||||
CEO-owned north star, objectives, constraints, and operating policy.
|
||||
Injected into every agent's briefing so all work stays goal-aware.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5">
|
||||
{/* North star */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="north-star">North star</Label>
|
||||
<Textarea
|
||||
id="north-star"
|
||||
rows={3}
|
||||
value={northStarVal}
|
||||
disabled={saving}
|
||||
onChange={(e) => setNorthStar(e.target.value)}
|
||||
placeholder="The long-term vision in one or two sentences…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Constraints */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="constraints">Constraints (one per line)</Label>
|
||||
<Textarea
|
||||
id="constraints"
|
||||
rows={3}
|
||||
value={constraintsVal}
|
||||
disabled={saving}
|
||||
onChange={(e) => setConstraints(e.target.value)}
|
||||
placeholder={"AGPL only\nNo external data egress"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Objectives */}
|
||||
<div className="space-y-2">
|
||||
<Label>Objectives</Label>
|
||||
<ObjectivesEditor
|
||||
items={objectivesVal}
|
||||
onChange={(items) => setObjectives(items)}
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Operating policy */}
|
||||
<div className="space-y-2">
|
||||
<Label>Operating policy</Label>
|
||||
<PolicyEditor
|
||||
policy={policyVal}
|
||||
onChange={(p) => setPolicy(p)}
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Save */}
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{saving ? "Saving…" : "Save charter"}
|
||||
</Button>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="border-t pt-4 space-y-1 text-xs text-muted-foreground">
|
||||
<p>
|
||||
Last updated:{" "}
|
||||
<span className="font-medium text-foreground">
|
||||
{formatTs(goals.updated_at)}
|
||||
</span>
|
||||
</p>
|
||||
{goals.updated_by && (
|
||||
<p>
|
||||
Updated by:{" "}
|
||||
<span className="font-medium text-foreground font-mono">
|
||||
{goals.updated_by}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Hidden — just to make the refetch prop used */}
|
||||
<button type="button" className="hidden" onClick={refetch} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Public export
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function GoalsTab() {
|
||||
const { data, isLoading, isError, refetch } = useQuery({
|
||||
queryKey: ["company-goals"],
|
||||
queryFn: companyGoalsApi.get,
|
||||
});
|
||||
|
||||
if (isLoading) return <GoalsTabSkeleton />;
|
||||
|
||||
if (isError || !data) {
|
||||
return (
|
||||
<OfflineState
|
||||
title="Failed to load company goals"
|
||||
description="Could not reach the orchestrator API. Check the backend is running."
|
||||
onRetry={() => void refetch()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <GoalsForm goals={data} refetch={() => void refetch()} />;
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import { Check, RefreshCw, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { OfflineState } from "@/components/ui/offline-state";
|
||||
import { RequiredNotesDialog } from "@/components/ui/required-notes-dialog";
|
||||
import { getErrorMessage } from "@/lib/api/client";
|
||||
import { pitchesApi, type Pitch } from "@/lib/api/pitches";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Skeleton placeholder shaped like a PitchCard
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function PitchCardSkeleton() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-5 w-48" />
|
||||
<Skeleton className="h-5 w-20" />
|
||||
</div>
|
||||
<div className="flex gap-1 mt-1">
|
||||
<Skeleton className="h-5 w-16" />
|
||||
<Skeleton className="h-5 w-16" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<Skeleton className="h-3 w-12 mb-1" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4 mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Skeleton className="h-3 w-28 mb-1" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-2/3 mt-1" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-8 w-32" />
|
||||
<Skeleton className="h-8 w-20" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Individual pitch card with RequiredNotesDialog for approve/reject
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface PitchCardProps {
|
||||
pitch: Pitch;
|
||||
onApprove: (id: string, notes: string) => void;
|
||||
onReject: (id: string, notes: string) => void;
|
||||
busy: boolean;
|
||||
}
|
||||
|
||||
function PitchCard({ pitch, onApprove, onReject, busy }: PitchCardProps) {
|
||||
const [approveOpen, setApproveOpen] = useState(false);
|
||||
const [rejectOpen, setRejectOpen] = useState(false);
|
||||
const proposed = pitch.status === "proposed";
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">{pitch.title}</CardTitle>
|
||||
<Badge variant={proposed ? "default" : "secondary"}>
|
||||
{pitch.status}
|
||||
</Badge>
|
||||
</div>
|
||||
{pitch.target_cells.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{pitch.target_cells.map((c) => (
|
||||
<Badge key={c} variant="outline">
|
||||
{c}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground">Problem</p>
|
||||
<p className="text-sm whitespace-pre-wrap">{pitch.problem}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted-foreground">
|
||||
Proposed solution
|
||||
</p>
|
||||
<p className="text-sm whitespace-pre-wrap">{pitch.proposed_solution}</p>
|
||||
</div>
|
||||
{proposed ? (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={busy}
|
||||
onClick={() => setApproveOpen(true)}
|
||||
>
|
||||
<Check className="mr-1 h-4 w-4" /> Approve & provision
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={busy}
|
||||
onClick={() => setRejectOpen(true)}
|
||||
>
|
||||
<X className="mr-1 h-4 w-4" /> Reject
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
pitch.decision_notes && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Decision: {pitch.decision_notes}
|
||||
</p>
|
||||
)
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Approve dialog */}
|
||||
<RequiredNotesDialog
|
||||
open={approveOpen}
|
||||
onOpenChange={setApproveOpen}
|
||||
title="Approve pitch"
|
||||
description="Add a note to accompany your approval. This will be recorded in the decision log."
|
||||
notesLabel="Approval note"
|
||||
placeholder="Why are you approving this pitch?"
|
||||
submitLabel="Approve & provision"
|
||||
isPending={busy}
|
||||
onSubmit={(notes) => {
|
||||
setApproveOpen(false);
|
||||
onApprove(pitch.id, notes);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Reject dialog */}
|
||||
<RequiredNotesDialog
|
||||
open={rejectOpen}
|
||||
onOpenChange={setRejectOpen}
|
||||
title="Reject pitch"
|
||||
description="Please provide a reason for rejecting this pitch."
|
||||
notesLabel="Rejection reason"
|
||||
placeholder="Why are you rejecting this pitch?"
|
||||
submitLabel="Reject"
|
||||
isPending={busy}
|
||||
onSubmit={(notes) => {
|
||||
setRejectOpen(false);
|
||||
onReject(pitch.id, notes);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Public export
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function PitchesTab() {
|
||||
const qc = useQueryClient();
|
||||
|
||||
const {
|
||||
data: pitches = [],
|
||||
isLoading,
|
||||
isError,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
queryKey: ["pitches"],
|
||||
queryFn: () => pitchesApi.list(),
|
||||
refetchInterval: 30000,
|
||||
});
|
||||
|
||||
const approveMutation = useMutation({
|
||||
mutationFn: ({ id, notes }: { id: string; notes: string }) =>
|
||||
pitchesApi.approve(id, notes),
|
||||
onSuccess: () => {
|
||||
toast.success("Pitch approved — provisioning started");
|
||||
void qc.invalidateQueries({ queryKey: ["pitches"] });
|
||||
},
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
});
|
||||
|
||||
const rejectMutation = useMutation({
|
||||
mutationFn: ({ id, notes }: { id: string; notes: string }) =>
|
||||
pitchesApi.reject(id, notes),
|
||||
onSuccess: () => {
|
||||
toast.success("Pitch rejected");
|
||||
void qc.invalidateQueries({ queryKey: ["pitches"] });
|
||||
},
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
});
|
||||
|
||||
const busy = approveMutation.isPending || rejectMutation.isPending;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Pitches</CardTitle>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => void refetch()}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<RefreshCw className="mr-1 h-4 w-4" /> Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-4">
|
||||
<PitchCardSkeleton />
|
||||
<PitchCardSkeleton />
|
||||
</div>
|
||||
) : isError ? (
|
||||
<OfflineState
|
||||
title="Failed to load pitches"
|
||||
description="Could not reach the orchestrator API. Check the backend is running."
|
||||
onRetry={() => void refetch()}
|
||||
/>
|
||||
) : pitches.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No pitches yet. The Board authors them; they appear here for your
|
||||
approval.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{pitches.map((p: Pitch) => (
|
||||
<PitchCard
|
||||
key={p.id}
|
||||
pitch={p}
|
||||
busy={busy}
|
||||
onApprove={(id, notes) => approveMutation.mutate({ id, notes })}
|
||||
onReject={(id, notes) => rejectMutation.mutate({ id, notes })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import { Check, Loader2, Send, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { OfflineState } from "@/components/ui/offline-state";
|
||||
import { Markdown } from "@/components/ui/markdown";
|
||||
import { RequiredNotesDialog } from "@/components/ui/required-notes-dialog";
|
||||
import { getErrorMessage } from "@/lib/api/client";
|
||||
import { secretaryApi, type SecretaryDirective } from "@/lib/api/secretary";
|
||||
import { useSecretary } from "@/hooks/use-secretary";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Directive card — structured key-value rows, no raw JSON
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface DirectiveCardProps {
|
||||
directive: SecretaryDirective;
|
||||
onConfirm: (id: string) => void;
|
||||
onReject: (id: string, reason: string) => void;
|
||||
busy: boolean;
|
||||
}
|
||||
|
||||
function DirectiveCard({ directive, onConfirm, onReject, busy }: DirectiveCardProps) {
|
||||
const [rejectOpen, setRejectOpen] = useState(false);
|
||||
const payloadKeys = Object.keys(directive.payload);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-3 rounded-lg border p-3">
|
||||
{/* Header row */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-semibold">{directive.kind}</span>
|
||||
<span className="text-xs text-muted-foreground capitalize">
|
||||
{directive.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Structured payload — one labeled row per key */}
|
||||
{payloadKeys.length > 0 ? (
|
||||
<div className="space-y-1.5">
|
||||
{payloadKeys.map((key) => (
|
||||
<div key={key} className="flex flex-wrap gap-x-3 text-sm">
|
||||
<span className="min-w-[8rem] text-xs font-medium text-muted-foreground capitalize">
|
||||
{key.replace(/_/g, " ")}
|
||||
</span>
|
||||
<span className="text-xs break-all">
|
||||
{String(directive.payload[key] ?? "—")}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">No payload.</p>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 pt-1">
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={busy}
|
||||
onClick={() => onConfirm(directive.id)}
|
||||
>
|
||||
<Check className="mr-1 h-4 w-4" /> Confirm
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={busy}
|
||||
onClick={() => setRejectOpen(true)}
|
||||
>
|
||||
<X className="mr-1 h-4 w-4" /> Reject
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reject requires a non-empty reason */}
|
||||
<RequiredNotesDialog
|
||||
open={rejectOpen}
|
||||
onOpenChange={setRejectOpen}
|
||||
title="Reject directive"
|
||||
description="Please provide a reason for rejecting this directive."
|
||||
notesLabel="Reason"
|
||||
placeholder="Why are you rejecting this directive?"
|
||||
submitLabel="Reject"
|
||||
isPending={busy}
|
||||
onSubmit={(reason) => {
|
||||
setRejectOpen(false);
|
||||
onReject(directive.id, reason);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Directives panel skeleton
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function DirectivesSkeleton() {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{[1, 2].map((i) => (
|
||||
<div key={i} className="rounded-lg border p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-3 w-16" />
|
||||
</div>
|
||||
<Skeleton className="h-3 w-full" />
|
||||
<Skeleton className="h-3 w-3/4" />
|
||||
<div className="flex gap-2 pt-1">
|
||||
<Skeleton className="h-8 w-20" />
|
||||
<Skeleton className="h-8 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Chat messages — ReactMarkdown in styled bubbles
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function ChatMessages({
|
||||
messages,
|
||||
streaming,
|
||||
}: {
|
||||
messages: { role: "user" | "assistant"; text: string }[];
|
||||
streaming: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex-1 space-y-3 overflow-y-auto">
|
||||
{messages.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Say something to start the conversation.
|
||||
</p>
|
||||
)}
|
||||
{messages.map((m, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={
|
||||
m.role === "user"
|
||||
? "ml-auto max-w-[80%] rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground"
|
||||
: "mr-auto max-w-[80%] rounded-lg bg-muted px-3 py-2"
|
||||
}
|
||||
>
|
||||
{m.role === "user" ? (
|
||||
<span>{m.text}</span>
|
||||
) : (
|
||||
<Markdown className="text-sm">{m.text}</Markdown>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{streaming && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Loader2 className="h-3 w-3 animate-spin" /> thinking…
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Public export
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function SecretaryTab() {
|
||||
const qc = useQueryClient();
|
||||
const { sessionId, messages, streaming, start, send, stop } = useSecretary();
|
||||
const [input, setInput] = useState("");
|
||||
const [starting, setStarting] = useState(false);
|
||||
|
||||
const {
|
||||
data: pending = [],
|
||||
isLoading: directivesLoading,
|
||||
isError: directivesError,
|
||||
refetch: refetchDirectives,
|
||||
} = useQuery({
|
||||
queryKey: ["secretary", "directives", "pending"],
|
||||
queryFn: () => secretaryApi.listDirectives("pending"),
|
||||
refetchInterval: 15000,
|
||||
});
|
||||
|
||||
const confirmMutation = useMutation({
|
||||
mutationFn: (id: string) => secretaryApi.confirmDirective(id),
|
||||
onSuccess: (d) => {
|
||||
toast.success(`Directive ${d.kind}: ${d.status}`);
|
||||
void qc.invalidateQueries({ queryKey: ["secretary", "directives"] });
|
||||
},
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
});
|
||||
|
||||
const rejectMutation = useMutation({
|
||||
mutationFn: ({ id, reason }: { id: string; reason: string }) =>
|
||||
secretaryApi.rejectDirective(id, reason),
|
||||
onSuccess: () => {
|
||||
toast.success("Directive rejected");
|
||||
void qc.invalidateQueries({ queryKey: ["secretary", "directives"] });
|
||||
},
|
||||
onError: (e) => toast.error(getErrorMessage(e)),
|
||||
});
|
||||
|
||||
const busy = confirmMutation.isPending || rejectMutation.isPending;
|
||||
|
||||
const handleStart = async () => {
|
||||
setStarting(true);
|
||||
try {
|
||||
await start(input.trim() || undefined);
|
||||
setInput("");
|
||||
} catch (e) {
|
||||
toast.error(getErrorMessage(e));
|
||||
} finally {
|
||||
setStarting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSend = async () => {
|
||||
const text = input.trim();
|
||||
if (!text) return;
|
||||
setInput("");
|
||||
try {
|
||||
await send(text);
|
||||
} catch (e) {
|
||||
toast.error(getErrorMessage(e));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Chat panel */}
|
||||
<Card className="flex min-h-[60vh] flex-col lg:col-span-2">
|
||||
<CardHeader className="flex-row items-center justify-between space-y-0 pb-3">
|
||||
<CardTitle>Chat</CardTitle>
|
||||
{sessionId && (
|
||||
<Button variant="outline" size="sm" onClick={() => void stop()}>
|
||||
End session
|
||||
</Button>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-1 flex-col gap-4">
|
||||
<ChatMessages messages={messages} streaming={streaming} />
|
||||
<div className="flex gap-2">
|
||||
<Textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder={
|
||||
sessionId
|
||||
? "Message your Secretary…"
|
||||
: "Opening message (optional)…"
|
||||
}
|
||||
rows={2}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
if (sessionId) void handleSend();
|
||||
else void handleStart();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{sessionId ? (
|
||||
<Button
|
||||
onClick={() => void handleSend()}
|
||||
disabled={!input.trim()}
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={() => void handleStart()} disabled={starting}>
|
||||
{starting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
"Start"
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Pending directives panel */}
|
||||
<Card className="flex flex-col">
|
||||
<CardHeader>
|
||||
<CardTitle>Needs your confirmation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1">
|
||||
{directivesLoading ? (
|
||||
<DirectivesSkeleton />
|
||||
) : directivesError ? (
|
||||
<OfflineState
|
||||
title="Failed to load directives"
|
||||
description="Could not reach the API."
|
||||
onRetry={() => void refetchDirectives()}
|
||||
/>
|
||||
) : pending.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No directives waiting. High-impact actions the Secretary proposes
|
||||
will appear here for you to confirm or reject.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{pending.map((d: SecretaryDirective) => (
|
||||
<DirectiveCard
|
||||
key={d.id}
|
||||
directive={d}
|
||||
busy={busy}
|
||||
onConfirm={(id) => confirmMutation.mutate(id)}
|
||||
onReject={(id, reason) =>
|
||||
rejectMutation.mutate({ id, reason })
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,7 @@ import { ActiveBlockersPanel } from "./active-blockers-panel";
|
||||
import { RecentActivityFeed } from "./recent-activity-feed";
|
||||
import { QuickActionsBar } from "./quick-actions-bar";
|
||||
import { CeoApprovalQueue } from "./ceo-approval-queue";
|
||||
import { StrategySignalsPanel } from "./strategy-signals-panel";
|
||||
import type { Activity } from "./activity-item";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { UsageOverviewPanel } from "./usage-overview-panel";
|
||||
@@ -70,10 +71,11 @@ export function CommandCenter() {
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* CEO Approval Queue - Your primary action item */}
|
||||
<section>
|
||||
{/* CEO Approval Queue + Strategy Signals - side-by-side on lg+ */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<CeoApprovalQueue />
|
||||
</section>
|
||||
<StrategySignalsPanel />
|
||||
</div>
|
||||
|
||||
{/* Metrics, Alerts, and Usage Row */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 gap-6">
|
||||
|
||||
@@ -9,4 +9,5 @@ export { ActivityItem } from "./activity-item";
|
||||
export { QuickActionsBar } from "./quick-actions-bar";
|
||||
export { HealthIndicator } from "./health-indicator";
|
||||
export { CeoApprovalQueue } from "./ceo-approval-queue";
|
||||
export { StrategySignalsPanel } from "./strategy-signals-panel";
|
||||
export { UsageOverviewPanel } from "./usage-overview-panel";
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { cockpitApi } from "@/lib/api/cockpit";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { TrendingUp } from "lucide-react";
|
||||
|
||||
interface StrategySignalsPanelProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function StrategySignalsPanel({ className }: StrategySignalsPanelProps) {
|
||||
const { data: signalsData, isLoading } = useQuery({
|
||||
queryKey: ["cockpit", "signals"],
|
||||
queryFn: () => cockpitApi.signals(),
|
||||
refetchInterval: 30000,
|
||||
});
|
||||
|
||||
const signals = signalsData ?? [];
|
||||
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<TrendingUp className="h-5 w-5" />
|
||||
Strategy Signals
|
||||
</CardTitle>
|
||||
<CardDescription>Live signals from the strategy engine</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-16 w-full" />
|
||||
<Skeleton className="h-16 w-full" />
|
||||
</div>
|
||||
) : signals.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<TrendingUp className="h-12 w-12 mx-auto mb-2 opacity-50" />
|
||||
<p>No strategy signals right now</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{signals.map((signal, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 p-4 border rounded-lg hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{signal.kind}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="font-medium text-sm">{signal.summary}</p>
|
||||
{signal.detail && (
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{signal.detail}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -22,10 +22,7 @@ import {
|
||||
Database,
|
||||
Cpu,
|
||||
Sparkles,
|
||||
Target,
|
||||
Briefcase,
|
||||
Lightbulb,
|
||||
Gauge,
|
||||
Building2,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
@@ -34,19 +31,16 @@ import { useUIStore } from "@/store";
|
||||
export const navItems = [
|
||||
// Dashboard
|
||||
{ title: "Overview", href: "/overview", icon: LayoutDashboard },
|
||||
{ title: "Cockpit", href: "/cockpit", icon: Gauge },
|
||||
{ title: "Company Goals", href: "/company-goals", icon: Target },
|
||||
{ title: "Business", href: "/business", icon: Building2 },
|
||||
|
||||
// Work Management
|
||||
{ title: "Tasks", href: "/tasks", icon: ListTodo },
|
||||
{ title: "Kanban", href: "/kanban", icon: Kanban },
|
||||
{ title: "Task Assistant", href: "/prompter", icon: Sparkles },
|
||||
{ title: "Secretary", href: "/secretary", icon: Briefcase },
|
||||
|
||||
// Development
|
||||
{ title: "Projects", href: "/projects", icon: FolderGit2 },
|
||||
{ title: "Products", href: "/products", icon: Boxes },
|
||||
{ title: "Pitches", href: "/pitches", icon: Lightbulb },
|
||||
{ title: "Git", href: "/git", icon: GitBranch },
|
||||
|
||||
// Team & Reference
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
interface RequiredNotesDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
/** Title shown in the dialog header */
|
||||
title?: string;
|
||||
/** Description shown below the title */
|
||||
description?: string;
|
||||
/** Label for the notes textarea */
|
||||
notesLabel?: string;
|
||||
/** Placeholder text for the textarea */
|
||||
placeholder?: string;
|
||||
/** Called with the entered notes when the user clicks Submit */
|
||||
onSubmit: (notes: string) => void;
|
||||
/** Whether the submit action is currently pending (disables buttons) */
|
||||
isPending?: boolean;
|
||||
/** Label for the submit button */
|
||||
submitLabel?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* A dialog that requires the user to enter a non-empty reason / notes before
|
||||
* confirming a destructive or significant action. The Submit button is
|
||||
* disabled while the notes textarea is empty or whitespace-only. Cancel
|
||||
* closes the dialog without invoking `onSubmit`.
|
||||
*
|
||||
* The dialog is keyed on `open` so its internal state resets cleanly on each
|
||||
* open; this avoids a `setState-in-effect` pattern.
|
||||
*/
|
||||
function RequiredNotesDialogInner({
|
||||
open,
|
||||
onOpenChange,
|
||||
title = "Add a note",
|
||||
description = "Please provide a reason before continuing.",
|
||||
notesLabel = "Notes",
|
||||
placeholder = "Enter your reason…",
|
||||
onSubmit,
|
||||
isPending = false,
|
||||
submitLabel = "Submit",
|
||||
}: RequiredNotesDialogProps) {
|
||||
const [notes, setNotes] = useState("");
|
||||
|
||||
const isBlank = notes.trim() === "";
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (isBlank || isPending) return;
|
||||
onSubmit(notes.trim());
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
{description && (
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
)}
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="required-notes">{notesLabel}</Label>
|
||||
<Textarea
|
||||
id="required-notes"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
rows={4}
|
||||
disabled={isPending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleCancel} disabled={isPending}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={isBlank || isPending}>
|
||||
{isPending ? "Submitting…" : submitLabel}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Exported wrapper that remounts the inner component each time the dialog
|
||||
* opens, giving us a fresh empty notes field without using setState-in-effect.
|
||||
*/
|
||||
export function RequiredNotesDialog(props: RequiredNotesDialogProps) {
|
||||
// Using open as the key causes the inner component to remount (and reset its
|
||||
// local state) each time the dialog transitions from closed → open.
|
||||
return <RequiredNotesDialogInner key={String(props.open)} {...props} />;
|
||||
}
|
||||
Reference in New Issue
Block a user