874 lines
30 KiB
TypeScript
874 lines
30 KiB
TypeScript
|
// components/ResolutionWizard.tsx
|
|||
|
|
// Phase 3 — Combined Resolution of Directors wizard.
|
|||
|
|
//
|
|||
|
|
// Multi-step modal for creating a new resolution. Triggered from
|
|||
|
|
// ResolutionExplorer's "+ New resolution" button.
|
|||
|
|
//
|
|||
|
|
// Steps:
|
|||
|
|
// 0 — Pick a company
|
|||
|
|
// 1 — Choose path (Letters already received / Letter to be generated)
|
|||
|
|
// 2 — Pick resigned directors (each with effective date)
|
|||
|
|
// 3 — Pick appointed directors (each with effective date)
|
|||
|
|
// 4 — Meeting date + notes
|
|||
|
|
// 5 — Review & Create (auto-populated attendees table + submit)
|
|||
|
|
//
|
|||
|
|
// After successful create, the modal closes and the parent re-renders the
|
|||
|
|
// table (router.refresh()) so the new draft row appears immediately.
|
|||
|
|
//
|
|||
|
|
// On dismiss/close: emits nothing, state resets.
|
|||
|
|
|
|||
|
|
"use client";
|
|||
|
|
|
|||
|
|
import { useEffect, useMemo, useState, useCallback } from "react";
|
|||
|
|
import { useRouter } from "next/navigation";
|
|||
|
|
|
|||
|
|
// ─── Types ────────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
type PathChoice = "letters_received" | "letter_generated";
|
|||
|
|
|
|||
|
|
interface Company {
|
|||
|
|
id: string;
|
|||
|
|
enterprise_name: string;
|
|||
|
|
enterprise_no?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Director {
|
|||
|
|
id: string;
|
|||
|
|
first_names: string;
|
|||
|
|
surname: string;
|
|||
|
|
email: string | null;
|
|||
|
|
cell: string | null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface DirectorPick {
|
|||
|
|
director_id: string;
|
|||
|
|
effective_date: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface WizardState {
|
|||
|
|
step: number;
|
|||
|
|
company: Company | null;
|
|||
|
|
path: PathChoice | null;
|
|||
|
|
resigned: DirectorPick[];
|
|||
|
|
appointed: DirectorPick[];
|
|||
|
|
meeting_date: string;
|
|||
|
|
notes: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface AttendeePreview {
|
|||
|
|
director_id: string;
|
|||
|
|
name: string;
|
|||
|
|
surname: string;
|
|||
|
|
email: string | null;
|
|||
|
|
role: "existing" | "resigned" | "appointed";
|
|||
|
|
must_sign: boolean;
|
|||
|
|
attended: boolean;
|
|||
|
|
effective_date: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Helpers ──────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
const STEPS = [
|
|||
|
|
"Pick company",
|
|||
|
|
"Choose path",
|
|||
|
|
"Resigning directors (optional)",
|
|||
|
|
"Appointing directors (optional)",
|
|||
|
|
"Meeting date",
|
|||
|
|
"Review",
|
|||
|
|
] as const;
|
|||
|
|
|
|||
|
|
function todayISO(): string {
|
|||
|
|
return new Date().toISOString().split("T")[0];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fullName(d: { first_names?: string; surname?: string }): string {
|
|||
|
|
return [d.first_names, d.surname].filter(Boolean).join(" ").trim() || "—";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function classNames(...parts: Array<string | false | null>): string {
|
|||
|
|
return parts.filter(Boolean).join(" ");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Component ────────────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
open: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ResolutionWizard({ open, onClose }: Props) {
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
const [state, setState] = useState<WizardState>({
|
|||
|
|
step: 0,
|
|||
|
|
company: null,
|
|||
|
|
path: null,
|
|||
|
|
resigned: [],
|
|||
|
|
appointed: [],
|
|||
|
|
meeting_date: todayISO(),
|
|||
|
|
notes: "",
|
|||
|
|
});
|
|||
|
|
const [submitting, setSubmitting] = useState(false);
|
|||
|
|
const [submitError, setSubmitError] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
// Reset on open/close
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!open) return;
|
|||
|
|
setState({
|
|||
|
|
step: 0,
|
|||
|
|
company: null,
|
|||
|
|
path: null,
|
|||
|
|
resigned: [],
|
|||
|
|
appointed: [],
|
|||
|
|
meeting_date: todayISO(),
|
|||
|
|
notes: "",
|
|||
|
|
});
|
|||
|
|
setSubmitError(null);
|
|||
|
|
setSubmitting(false);
|
|||
|
|
}, [open]);
|
|||
|
|
|
|||
|
|
// Close on Escape
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!open) return;
|
|||
|
|
const onKey = (e: KeyboardEvent) => {
|
|||
|
|
if (e.key === "Escape" && !submitting) onClose();
|
|||
|
|
};
|
|||
|
|
document.addEventListener("keydown", onKey);
|
|||
|
|
return () => document.removeEventListener("keydown", onKey);
|
|||
|
|
}, [open, submitting, onClose]);
|
|||
|
|
|
|||
|
|
const canAdvance = useMemo(() => {
|
|||
|
|
switch (state.step) {
|
|||
|
|
case 0: return !!state.company;
|
|||
|
|
case 1: return !!state.path;
|
|||
|
|
// Steps 2 (resigning) and 3 (appointing) are independently optional:
|
|||
|
|
// you can pass a meeting with no resignations (only appointments),
|
|||
|
|
// only resignations, or neither (just existing directors).
|
|||
|
|
case 2: return true;
|
|||
|
|
case 3: return true;
|
|||
|
|
case 4: return !!state.meeting_date && /\d{4}-\d{2}-\d{2}/.test(state.meeting_date);
|
|||
|
|
case 5: return true;
|
|||
|
|
default: return false;
|
|||
|
|
}
|
|||
|
|
}, [state]);
|
|||
|
|
|
|||
|
|
const goNext = () => {
|
|||
|
|
if (!canAdvance) return;
|
|||
|
|
setState((s) => ({ ...s, step: Math.min(s.step + 1, STEPS.length - 1) }));
|
|||
|
|
};
|
|||
|
|
const goBack = () => {
|
|||
|
|
setState((s) => ({ ...s, step: Math.max(s.step - 1, 0) }));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const submit = useCallback(async () => {
|
|||
|
|
if (!state.company || !state.path) {
|
|||
|
|
setSubmitError("Company and path are required.");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSubmitting(true);
|
|||
|
|
setSubmitError(null);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/resolutions/create", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
company_id: state.company.id,
|
|||
|
|
path: state.path,
|
|||
|
|
meeting_date: state.meeting_date,
|
|||
|
|
resigned: state.resigned,
|
|||
|
|
appointed: state.appointed,
|
|||
|
|
notes: state.notes || undefined,
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
const json = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) throw new Error(json.error || `HTTP ${res.status}`);
|
|||
|
|
// success — close + refresh
|
|||
|
|
onClose();
|
|||
|
|
router.refresh();
|
|||
|
|
} catch (err) {
|
|||
|
|
setSubmitError(err instanceof Error ? err.message : "Failed to create resolution");
|
|||
|
|
} finally {
|
|||
|
|
setSubmitting(false);
|
|||
|
|
}
|
|||
|
|
}, [state, onClose, router]);
|
|||
|
|
|
|||
|
|
if (!open) return null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 z-50 flex items-start justify-center bg-black/60 backdrop-blur-sm py-8">
|
|||
|
|
<div className="bg-surface border border-border rounded-xl shadow-2xl w-full max-w-3xl mx-4 overflow-hidden flex flex-col max-h-[90vh]">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="border-b border-border bg-surface-warm px-6 py-4 flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-fg font-bold text-lg">
|
|||
|
|
New Resolution of Directors
|
|||
|
|
</h2>
|
|||
|
|
<p className="text-muted text-sm mt-0.5">
|
|||
|
|
Step {state.step + 1} of {STEPS.length} — {STEPS[state.step]}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
disabled={submitting}
|
|||
|
|
aria-label="Close"
|
|||
|
|
className="w-9 h-9 rounded-md text-muted hover:text-fg hover:bg-surface transition-colors text-xl disabled:opacity-40"
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Progress bar */}
|
|||
|
|
<div className="px-6 py-3 border-b border-border bg-surface">
|
|||
|
|
<div className="flex items-center gap-1.5">
|
|||
|
|
{STEPS.map((label, i) => (
|
|||
|
|
<div
|
|||
|
|
key={label}
|
|||
|
|
className={classNames(
|
|||
|
|
"h-1.5 flex-1 rounded-full transition-colors",
|
|||
|
|
i <= state.step ? "bg-accent" : "bg-surface-warm border border-border-soft"
|
|||
|
|
)}
|
|||
|
|
title={label}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Body */}
|
|||
|
|
<div className="flex-1 overflow-y-auto px-6 py-6">
|
|||
|
|
{state.step === 0 && (
|
|||
|
|
<CompanyStep
|
|||
|
|
selected={state.company}
|
|||
|
|
onPick={(c) => setState((s) => ({ ...s, company: c }))}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{state.step === 1 && (
|
|||
|
|
<PathStep
|
|||
|
|
value={state.path}
|
|||
|
|
onChange={(p) => setState((s) => ({ ...s, path: p }))}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{state.step === 2 && state.company && (
|
|||
|
|
<DirectorsStep
|
|||
|
|
companyId={state.company.id}
|
|||
|
|
role="resigned"
|
|||
|
|
picked={state.resigned}
|
|||
|
|
defaultDate={state.meeting_date}
|
|||
|
|
onChange={(list) => setState((s) => ({ ...s, resigned: list }))}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{state.step === 3 && state.company && (
|
|||
|
|
<DirectorsStep
|
|||
|
|
companyId={state.company.id}
|
|||
|
|
role="appointed"
|
|||
|
|
picked={state.appointed}
|
|||
|
|
defaultDate={state.meeting_date}
|
|||
|
|
excludeIds={state.resigned.map((r) => r.director_id)}
|
|||
|
|
onChange={(list) => setState((s) => ({ ...s, appointed: list }))}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{state.step === 4 && (
|
|||
|
|
<MeetingDateStep
|
|||
|
|
meetingDate={state.meeting_date}
|
|||
|
|
notes={state.notes}
|
|||
|
|
onChange={(d, n) =>
|
|||
|
|
setState((s) => ({ ...s, meeting_date: d, notes: n }))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{state.step === 5 && state.company && (
|
|||
|
|
<ReviewStep
|
|||
|
|
state={state}
|
|||
|
|
companyId={state.company.id}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{submitError && (
|
|||
|
|
<div className="mt-4 border border-danger/40 bg-danger/5 rounded-lg p-4">
|
|||
|
|
<p className="text-danger text-sm font-semibold">Failed to create resolution</p>
|
|||
|
|
<p className="text-muted text-sm mt-1">{submitError}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Footer */}
|
|||
|
|
<div className="border-t border-border px-6 py-4 flex items-center justify-between bg-surface-warm">
|
|||
|
|
<button
|
|||
|
|
onClick={goBack}
|
|||
|
|
disabled={state.step === 0 || submitting}
|
|||
|
|
className="px-4 py-2 text-sm font-semibold text-muted hover:text-fg transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
|||
|
|
>
|
|||
|
|
← Back
|
|||
|
|
</button>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
disabled={submitting}
|
|||
|
|
className="px-4 py-2 text-sm font-semibold text-muted hover:text-fg transition-colors disabled:opacity-40"
|
|||
|
|
>
|
|||
|
|
Cancel
|
|||
|
|
</button>
|
|||
|
|
{state.step < STEPS.length - 1 ? (
|
|||
|
|
<button
|
|||
|
|
onClick={goNext}
|
|||
|
|
disabled={!canAdvance}
|
|||
|
|
className="px-5 py-2 bg-accent text-accent-on rounded font-semibold text-sm disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-90 transition-opacity"
|
|||
|
|
>
|
|||
|
|
Next →
|
|||
|
|
</button>
|
|||
|
|
) : (
|
|||
|
|
<button
|
|||
|
|
onClick={submit}
|
|||
|
|
disabled={submitting || !canAdvance}
|
|||
|
|
className="px-5 py-2 bg-accent text-accent-on rounded font-semibold text-sm disabled:opacity-30 disabled:cursor-not-allowed hover:opacity-90 transition-opacity"
|
|||
|
|
>
|
|||
|
|
{submitting ? "Creating…" : "Create resolution"}
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Step 0: Company picker ───────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
interface CompanyStepProps {
|
|||
|
|
selected: Company | null;
|
|||
|
|
onPick: (c: Company) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function CompanyStep({ selected, onPick }: CompanyStepProps) {
|
|||
|
|
const [search, setSearch] = useState("");
|
|||
|
|
const [companies, setCompanies] = useState<Company[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
let cancelled = false;
|
|||
|
|
setLoading(true);
|
|||
|
|
fetch("/api/companies/list")
|
|||
|
|
.then((r) => r.json())
|
|||
|
|
.then((d) => { if (!cancelled) setCompanies(d.items || []); })
|
|||
|
|
.catch(() => { if (!cancelled) setCompanies([]); })
|
|||
|
|
.finally(() => { if (!cancelled) setLoading(false); });
|
|||
|
|
return () => { cancelled = true; };
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const filtered = useMemo(() => {
|
|||
|
|
if (!search.trim()) return companies;
|
|||
|
|
const q = search.toLowerCase();
|
|||
|
|
return companies.filter(
|
|||
|
|
(c) =>
|
|||
|
|
c.enterprise_name?.toLowerCase().includes(q) ||
|
|||
|
|
c.enterprise_no?.toLowerCase().includes(q)
|
|||
|
|
);
|
|||
|
|
}, [companies, search]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<p className="text-sm text-muted">
|
|||
|
|
Choose the company this resolution applies to.
|
|||
|
|
</p>
|
|||
|
|
<input
|
|||
|
|
autoFocus
|
|||
|
|
placeholder="Search by name or enterprise number…"
|
|||
|
|
value={search}
|
|||
|
|
onChange={(e) => setSearch(e.target.value)}
|
|||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2.5 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent"
|
|||
|
|
/>
|
|||
|
|
<div className="border border-border rounded-lg overflow-hidden max-h-72 overflow-y-auto">
|
|||
|
|
{loading ? (
|
|||
|
|
<p className="p-4 text-sm text-muted">Loading companies…</p>
|
|||
|
|
) : filtered.length === 0 ? (
|
|||
|
|
<p className="p-4 text-sm text-muted italic">
|
|||
|
|
{search.trim() ? "No companies match." : "No companies on file."}
|
|||
|
|
</p>
|
|||
|
|
) : (
|
|||
|
|
filtered.map((c) => {
|
|||
|
|
const isSelected = selected?.id === c.id;
|
|||
|
|
return (
|
|||
|
|
<button
|
|||
|
|
key={c.id}
|
|||
|
|
onClick={() => onPick(c)}
|
|||
|
|
className={classNames(
|
|||
|
|
"w-full text-left px-4 py-2.5 text-sm transition-colors border-b border-border last:border-b-0",
|
|||
|
|
isSelected
|
|||
|
|
? "bg-accent/10 text-accent font-semibold"
|
|||
|
|
: "hover:bg-surface-warm text-fg"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<span className="font-semibold">{c.enterprise_name}</span>
|
|||
|
|
{c.enterprise_no && (
|
|||
|
|
<span className="text-xs text-muted ml-2 font-mono">{c.enterprise_no}</span>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{selected && (
|
|||
|
|
<div className="flex items-center gap-2 px-3 py-2 bg-accent/5 border border-accent/30 rounded-md text-sm">
|
|||
|
|
<span className="text-muted">Selected:</span>
|
|||
|
|
<span className="font-semibold text-fg">{selected.enterprise_name}</span>
|
|||
|
|
{selected.enterprise_no && (
|
|||
|
|
<span className="text-xs text-muted font-mono">({selected.enterprise_no})</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Step 1: Path picker ──────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
interface PathStepProps {
|
|||
|
|
value: PathChoice | null;
|
|||
|
|
onChange: (p: PathChoice) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function PathStep({ value, onChange }: PathStepProps) {
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<p className="text-sm text-muted">
|
|||
|
|
How will the resolution letter be sourced?
|
|||
|
|
</p>
|
|||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|||
|
|
<PathCard
|
|||
|
|
active={value === "letters_received"}
|
|||
|
|
onClick={() => onChange("letters_received")}
|
|||
|
|
title="Letters already received"
|
|||
|
|
description="Resignation / appointment letters are already on file as PDFs. The minute of meeting will reference them."
|
|||
|
|
/>
|
|||
|
|
<PathCard
|
|||
|
|
active={value === "letter_generated"}
|
|||
|
|
onClick={() => onChange("letter_generated")}
|
|||
|
|
title="Letter to be generated"
|
|||
|
|
description="Render the combined minute from your master .docx template. Path B — Phase 6 will plug the generator in."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface PathCardProps {
|
|||
|
|
active: boolean;
|
|||
|
|
onClick: () => void;
|
|||
|
|
title: string;
|
|||
|
|
description: string;
|
|||
|
|
}
|
|||
|
|
function PathCard({ active, onClick, title, description }: PathCardProps) {
|
|||
|
|
return (
|
|||
|
|
<button
|
|||
|
|
onClick={onClick}
|
|||
|
|
className={classNames(
|
|||
|
|
"text-left p-4 rounded-lg border-2 transition-all",
|
|||
|
|
active
|
|||
|
|
? "border-accent bg-accent/10"
|
|||
|
|
: "border-border bg-surface hover:border-accent/50"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<p className={classNames("font-semibold", active ? "text-accent" : "text-fg")}>{title}</p>
|
|||
|
|
<p className="text-xs text-muted mt-1.5 leading-relaxed">{description}</p>
|
|||
|
|
</button>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Steps 2/3: Director pickers (resigned / appointed) ───────────────────
|
|||
|
|
|
|||
|
|
interface DirectorsStepProps {
|
|||
|
|
companyId: string;
|
|||
|
|
role: "resigned" | "appointed";
|
|||
|
|
picked: DirectorPick[];
|
|||
|
|
defaultDate: string;
|
|||
|
|
excludeIds?: string[];
|
|||
|
|
onChange: (list: DirectorPick[]) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function DirectorsStep({
|
|||
|
|
companyId,
|
|||
|
|
role,
|
|||
|
|
picked,
|
|||
|
|
defaultDate,
|
|||
|
|
excludeIds = [],
|
|||
|
|
onChange,
|
|||
|
|
}: DirectorsStepProps) {
|
|||
|
|
const [directors, setDirectors] = useState<Director[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [search, setSearch] = useState("");
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
let cancelled = false;
|
|||
|
|
setLoading(true);
|
|||
|
|
fetch(`/api/resolutions/company-directors/${companyId}`)
|
|||
|
|
.then((r) => r.json())
|
|||
|
|
.then((d) => { if (!cancelled) setDirectors(d.items || []); })
|
|||
|
|
.catch(() => { if (!cancelled) setDirectors([]); })
|
|||
|
|
.finally(() => { if (!cancelled) setLoading(false); });
|
|||
|
|
return () => { cancelled = true; };
|
|||
|
|
}, [companyId]);
|
|||
|
|
|
|||
|
|
const pickedIds = new Set(picked.map((p) => p.director_id));
|
|||
|
|
const available = useMemo(() => {
|
|||
|
|
const lower = search.toLowerCase();
|
|||
|
|
return directors
|
|||
|
|
.filter((d) => !excludeIds.includes(d.id))
|
|||
|
|
.filter((d) => {
|
|||
|
|
if (!search.trim()) return true;
|
|||
|
|
return (
|
|||
|
|
d.first_names?.toLowerCase().includes(lower) ||
|
|||
|
|
d.surname?.toLowerCase().includes(lower) ||
|
|||
|
|
(d.email ?? "").toLowerCase().includes(lower)
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
}, [directors, search, excludeIds]);
|
|||
|
|
|
|||
|
|
const toggle = (d: Director) => {
|
|||
|
|
if (pickedIds.has(d.id)) {
|
|||
|
|
onChange(picked.filter((p) => p.director_id !== d.id));
|
|||
|
|
} else {
|
|||
|
|
onChange([...picked, { director_id: d.id, effective_date: defaultDate }]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const setEffectiveDate = (directorId: string, date: string) => {
|
|||
|
|
onChange(picked.map((p) => (p.director_id === directorId ? { ...p, effective_date: date } : p)));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const isResigned = role === "resigned";
|
|||
|
|
const accentRing = isResigned ? "border-danger/30 bg-danger/5" : "border-success/30 bg-success/5";
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="flex items-baseline justify-between gap-3">
|
|||
|
|
<p className="text-sm text-muted">
|
|||
|
|
{isResigned
|
|||
|
|
? "Pick any directors resigning on this resolution. Each gets an independent effective date."
|
|||
|
|
: "Pick any directors being appointed on this resolution. Each gets an independent effective date."}
|
|||
|
|
</p>
|
|||
|
|
<span className="text-[10px] font-semibold uppercase tracking-wider text-muted bg-surface-warm border border-border rounded px-2 py-0.5">
|
|||
|
|
Optional — leave empty to skip
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Skip-this-step affordance */}
|
|||
|
|
{picked.length === 0 && (
|
|||
|
|
<div className="text-xs text-muted border border-dashed border-border rounded-md px-3 py-2 bg-surface-warm">
|
|||
|
|
No {isResigned ? "resigning" : "appointing"} directors selected. You can
|
|||
|
|
advance to the next step — this is fine if there are simply no
|
|||
|
|
{" "}{isResigned ? "resignations" : "appointments"} on this meeting.
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Picked chips */}
|
|||
|
|
{picked.length > 0 && (
|
|||
|
|
<div className={classNames("border rounded-lg p-3 space-y-2", accentRing)}>
|
|||
|
|
{picked.map((p) => {
|
|||
|
|
const d = directors.find((x) => x.id === p.director_id);
|
|||
|
|
return (
|
|||
|
|
<div key={p.director_id} className="flex items-center gap-3">
|
|||
|
|
<span className="flex-1 text-sm font-semibold text-fg">
|
|||
|
|
{d ? fullName(d) : p.director_id}
|
|||
|
|
</span>
|
|||
|
|
<label className="text-xs text-muted">Effective date</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={p.effective_date}
|
|||
|
|
onChange={(e) => setEffectiveDate(p.director_id, e.target.value)}
|
|||
|
|
className="bg-surface border border-border rounded px-2 py-1.5 text-xs font-mono text-fg focus:outline-none focus:border-accent"
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
onClick={() => toggle(d!)}
|
|||
|
|
className="px-2 py-1 text-xs text-danger hover:bg-danger/10 rounded transition-colors"
|
|||
|
|
title="Remove"
|
|||
|
|
>
|
|||
|
|
Remove
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Director search + list */}
|
|||
|
|
<input
|
|||
|
|
placeholder="Search directors by name or email…"
|
|||
|
|
value={search}
|
|||
|
|
onChange={(e) => setSearch(e.target.value)}
|
|||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent"
|
|||
|
|
/>
|
|||
|
|
<div className="border border-border rounded-lg overflow-hidden max-h-72 overflow-y-auto">
|
|||
|
|
{loading ? (
|
|||
|
|
<p className="p-4 text-sm text-muted">Loading directors…</p>
|
|||
|
|
) : available.length === 0 ? (
|
|||
|
|
<p className="p-4 text-sm text-muted italic">
|
|||
|
|
{search.trim() ? "No matching directors." : "No more directors available."}
|
|||
|
|
</p>
|
|||
|
|
) : (
|
|||
|
|
available.map((d) => {
|
|||
|
|
const isPicked = pickedIds.has(d.id);
|
|||
|
|
return (
|
|||
|
|
<button
|
|||
|
|
key={d.id}
|
|||
|
|
onClick={() => toggle(d)}
|
|||
|
|
className={classNames(
|
|||
|
|
"w-full text-left px-4 py-2.5 text-sm transition-colors border-b border-border last:border-b-0",
|
|||
|
|
isPicked
|
|||
|
|
? "bg-accent/10 text-accent font-semibold"
|
|||
|
|
: "hover:bg-surface-warm text-fg"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center justify-between gap-3">
|
|||
|
|
<span>{fullName(d)}</span>
|
|||
|
|
<span className="text-xs text-muted font-mono">
|
|||
|
|
{d.email || "no email"}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</button>
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p className="text-xs text-muted italic">
|
|||
|
|
{picked.length} director{picked.length === 1 ? "" : "s"} selected.
|
|||
|
|
{!isResigned && " Directors in the resigned list are hidden from this list."}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Step 4: Meeting date + notes ─────────────────────────────────────────
|
|||
|
|
|
|||
|
|
interface MeetingDateStepProps {
|
|||
|
|
meetingDate: string;
|
|||
|
|
notes: string;
|
|||
|
|
onChange: (d: string, n: string) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function MeetingDateStep({ meetingDate, notes, onChange }: MeetingDateStepProps) {
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<p className="text-sm text-muted">
|
|||
|
|
When did (or will) the meeting take place? This date appears on the
|
|||
|
|
resolution minute.
|
|||
|
|
</p>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-semibold text-muted uppercase mb-1.5">
|
|||
|
|
Meeting date <span className="text-danger">*</span>
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={meetingDate}
|
|||
|
|
onChange={(e) => onChange(e.target.value, notes)}
|
|||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2.5 text-sm text-fg font-mono focus:outline-none focus:border-accent"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-semibold text-muted uppercase mb-1.5">
|
|||
|
|
Internal notes (optional)
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
rows={3}
|
|||
|
|
value={notes}
|
|||
|
|
onChange={(e) => onChange(meetingDate, e.target.value)}
|
|||
|
|
placeholder="Anything SJ wants remembered about this resolution…"
|
|||
|
|
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent resize-y"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Step 5: Review ───────────────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
interface ReviewStepProps {
|
|||
|
|
state: WizardState;
|
|||
|
|
companyId: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function ReviewStep({ state }: ReviewStepProps) {
|
|||
|
|
const [existingDirectors, setActiveDirectors] = useState<Director[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
let cancelled = false;
|
|||
|
|
setLoading(true);
|
|||
|
|
fetch(`/api/resolutions/company-directors/${state.company?.id}`)
|
|||
|
|
.then((r) => r.json())
|
|||
|
|
.then((d) => { if (!cancelled) setActiveDirectors(d.items || []); })
|
|||
|
|
.catch(() => { if (!cancelled) setActiveDirectors([]); })
|
|||
|
|
.finally(() => { if (!cancelled) setLoading(false); });
|
|||
|
|
return () => { cancelled = true; };
|
|||
|
|
}, [state.company?.id]);
|
|||
|
|
|
|||
|
|
// Build attendee preview list (same order the create endpoint will use):
|
|||
|
|
// resigned → appointed → existing
|
|||
|
|
const resignedMap = new Map(state.resigned.map((p) => [p.director_id, p]));
|
|||
|
|
const appointedMap = new Map(state.appointed.map((p) => [p.director_id, p]));
|
|||
|
|
|
|||
|
|
const pickedIds = new Set([
|
|||
|
|
...resignedMap.keys(),
|
|||
|
|
...appointedMap.keys(),
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const existingAttendance: AttendeePreview[] = existingDirectors
|
|||
|
|
.filter((d) => !pickedIds.has(d.id))
|
|||
|
|
.map((d) => ({
|
|||
|
|
director_id: d.id,
|
|||
|
|
name: d.first_names,
|
|||
|
|
surname: d.surname,
|
|||
|
|
email: d.email,
|
|||
|
|
role: "existing",
|
|||
|
|
must_sign: true,
|
|||
|
|
attended: true,
|
|||
|
|
effective_date: state.meeting_date,
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
const attendees: AttendeePreview[] = [
|
|||
|
|
...[...resignedMap.values()].map((p) => {
|
|||
|
|
const d = existingDirectors.find((x) => x.id === p.director_id);
|
|||
|
|
return {
|
|||
|
|
director_id: p.director_id,
|
|||
|
|
name: d?.first_names ?? "",
|
|||
|
|
surname: d?.surname ?? "",
|
|||
|
|
email: d?.email ?? null,
|
|||
|
|
role: "resigned" as const,
|
|||
|
|
must_sign: true,
|
|||
|
|
attended: true,
|
|||
|
|
effective_date: p.effective_date,
|
|||
|
|
};
|
|||
|
|
}),
|
|||
|
|
...[...appointedMap.values()].map((p) => {
|
|||
|
|
const d = existingDirectors.find((x) => x.id === p.director_id);
|
|||
|
|
return {
|
|||
|
|
director_id: p.director_id,
|
|||
|
|
name: d?.first_names ?? "",
|
|||
|
|
surname: d?.surname ?? "",
|
|||
|
|
email: d?.email ?? null,
|
|||
|
|
role: "appointed" as const,
|
|||
|
|
must_sign: true,
|
|||
|
|
attended: true,
|
|||
|
|
effective_date: p.effective_date,
|
|||
|
|
};
|
|||
|
|
}),
|
|||
|
|
...existingAttendance,
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-5">
|
|||
|
|
<p className="text-sm text-muted">
|
|||
|
|
Final check. The auto-populated attendees table below will be created
|
|||
|
|
when you press <strong>Create resolution</strong>.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
{/* Summary cards */}
|
|||
|
|
<div className="grid grid-cols-2 gap-3">
|
|||
|
|
<SummaryRow label="Company" value={state.company?.enterprise_name ?? "—"} />
|
|||
|
|
<SummaryRow label="Path" value={state.path === "letters_received" ? "Letters received" : state.path === "letter_generated" ? "Letter generated" : "—"} />
|
|||
|
|
<SummaryRow label="Meeting date" value={state.meeting_date} mono />
|
|||
|
|
<SummaryRow label="Resigned" value={String(state.resigned.length)} />
|
|||
|
|
<SummaryRow label="Appointed" value={String(state.appointed.length)} />
|
|||
|
|
<SummaryRow
|
|||
|
|
label="Total attendees"
|
|||
|
|
value={String(attendees.length)}
|
|||
|
|
accent
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{state.notes && (
|
|||
|
|
<div className="border border-border rounded-lg p-3 bg-surface-warm">
|
|||
|
|
<p className="text-xs font-semibold text-muted uppercase mb-1">Notes</p>
|
|||
|
|
<p className="text-sm text-fg whitespace-pre-wrap">{state.notes}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Attendees table */}
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs font-semibold text-muted uppercase mb-2">
|
|||
|
|
Attendees (auto-populated, editable later)
|
|||
|
|
</p>
|
|||
|
|
{loading ? (
|
|||
|
|
<p className="text-sm text-muted italic p-3">Loading attendees…</p>
|
|||
|
|
) : attendees.length === 0 ? (
|
|||
|
|
<p className="text-sm text-muted italic p-3">No attendees yet.</p>
|
|||
|
|
) : (
|
|||
|
|
<div className="border border-border rounded-lg overflow-hidden">
|
|||
|
|
<table className="w-full text-sm">
|
|||
|
|
<thead className="bg-surface-warm border-b border-border">
|
|||
|
|
<tr>
|
|||
|
|
<th className="text-left px-3 py-2 text-xs font-semibold text-muted uppercase">Role</th>
|
|||
|
|
<th className="text-left px-3 py-2 text-xs font-semibold text-muted uppercase">Name</th>
|
|||
|
|
<th className="text-left px-3 py-2 text-xs font-semibold text-muted uppercase hidden sm:table-cell">Email</th>
|
|||
|
|
<th className="text-left px-3 py-2 text-xs font-semibold text-muted uppercase hidden md:table-cell">Effective</th>
|
|||
|
|
<th className="text-left px-3 py-2 text-xs font-semibold text-muted uppercase hidden md:table-cell">Sign?</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody className="divide-y divide-border-soft">
|
|||
|
|
{attendees.map((a) => (
|
|||
|
|
<tr key={a.director_id}>
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<RolePill role={a.role} />
|
|||
|
|
</td>
|
|||
|
|
<td className="px-3 py-2 font-semibold text-fg">
|
|||
|
|
{fullName(a)}
|
|||
|
|
</td>
|
|||
|
|
<td className="px-3 py-2 hidden sm:table-cell text-xs text-muted font-mono">
|
|||
|
|
{a.email || "—"}
|
|||
|
|
</td>
|
|||
|
|
<td className="px-3 py-2 hidden md:table-cell text-xs font-mono text-muted">
|
|||
|
|
{a.effective_date}
|
|||
|
|
</td>
|
|||
|
|
<td className="px-3 py-2 hidden md:table-cell text-xs">
|
|||
|
|
{a.must_sign ? "Yes" : "No"}
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function SummaryRow({
|
|||
|
|
label,
|
|||
|
|
value,
|
|||
|
|
mono,
|
|||
|
|
accent,
|
|||
|
|
}: {
|
|||
|
|
label: string;
|
|||
|
|
value: string;
|
|||
|
|
mono?: boolean;
|
|||
|
|
accent?: boolean;
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<div className="border border-border rounded-lg px-4 py-3 bg-surface">
|
|||
|
|
<p className="text-xs text-muted uppercase tracking-wide">{label}</p>
|
|||
|
|
<p
|
|||
|
|
className={classNames(
|
|||
|
|
"mt-1",
|
|||
|
|
accent ? "text-accent font-bold" : "text-fg font-semibold",
|
|||
|
|
Boolean(mono) && "font-mono text-sm"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{value}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function RolePill({ role }: { role: "existing" | "resigned" | "appointed" }) {
|
|||
|
|
const style =
|
|||
|
|
role === "resigned"
|
|||
|
|
? "bg-danger/10 text-danger"
|
|||
|
|
: role === "appointed"
|
|||
|
|
? "bg-success/10 text-success"
|
|||
|
|
: "bg-surface-warm text-muted border border-border";
|
|||
|
|
const label = role === "existing" ? "Existing" : role === "resigned" ? "Resigned" : "Appointed";
|
|||
|
|
return (
|
|||
|
|
<span className={classNames("inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold", style)}>
|
|||
|
|
{label}
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
}
|