chore(repo): initialize planarchy workspace
This commit is contained in:
@@ -0,0 +1,502 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { FieldType } from "@planarchy/shared";
|
||||
import type { BlueprintFieldDefinition, FieldOption, StaffingRequirement } from "@planarchy/shared";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import { RolePresetsEditor } from "./RolePresetsEditor.js";
|
||||
|
||||
const FIELD_TYPES: { value: FieldType; label: string }[] = [
|
||||
{ value: FieldType.TEXT, label: "Text" },
|
||||
{ value: FieldType.TEXTAREA, label: "Textarea" },
|
||||
{ value: FieldType.NUMBER, label: "Number" },
|
||||
{ value: FieldType.BOOLEAN, label: "Boolean" },
|
||||
{ value: FieldType.DATE, label: "Date" },
|
||||
{ value: FieldType.SELECT, label: "Select" },
|
||||
{ value: FieldType.MULTI_SELECT, label: "Multi-Select" },
|
||||
{ value: FieldType.URL, label: "URL" },
|
||||
{ value: FieldType.EMAIL, label: "Email" },
|
||||
];
|
||||
|
||||
const INPUT_CLS =
|
||||
"px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm";
|
||||
|
||||
const BTN_PRIMARY =
|
||||
"px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50";
|
||||
|
||||
const BTN_SECONDARY =
|
||||
"px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium";
|
||||
|
||||
const BTN_DANGER =
|
||||
"px-2 py-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded text-sm transition-colors";
|
||||
|
||||
function makeEmptyField(order: number): BlueprintFieldDefinition {
|
||||
return {
|
||||
id: Math.random().toString(36).slice(2),
|
||||
key: "",
|
||||
label: "",
|
||||
type: FieldType.TEXT,
|
||||
required: false,
|
||||
order,
|
||||
};
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// OptionsEditor — for SELECT / MULTI_SELECT
|
||||
// ---------------------------------------------------------------------------
|
||||
interface OptionsEditorProps {
|
||||
options: FieldOption[];
|
||||
onChange: (options: FieldOption[]) => void;
|
||||
}
|
||||
|
||||
function OptionsEditor({ options, onChange }: OptionsEditorProps) {
|
||||
function addOption() {
|
||||
onChange([...options, { value: "", label: "" }]);
|
||||
}
|
||||
|
||||
function removeOption(idx: number) {
|
||||
onChange(options.filter((_, i) => i !== idx));
|
||||
}
|
||||
|
||||
function updateOption(idx: number, field: "value" | "label", val: string) {
|
||||
const next = options.map((o, i) =>
|
||||
i === idx ? { ...o, [field]: val } : o,
|
||||
);
|
||||
onChange(next);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-2 space-y-1.5">
|
||||
<p className="text-xs font-medium text-gray-600">Options</p>
|
||||
{options.map((opt, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={opt.value}
|
||||
onChange={(e) => updateOption(idx, "value", e.target.value)}
|
||||
placeholder="value"
|
||||
className={`${INPUT_CLS} flex-1`}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={opt.label}
|
||||
onChange={(e) => updateOption(idx, "label", e.target.value)}
|
||||
placeholder="label"
|
||||
className={`${INPUT_CLS} flex-1`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeOption(idx)}
|
||||
className={BTN_DANGER}
|
||||
aria-label="Remove option"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={addOption}
|
||||
className="text-xs text-brand-600 hover:text-brand-800 font-medium"
|
||||
>
|
||||
+ Add option
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FieldRow — a single field definition row
|
||||
// ---------------------------------------------------------------------------
|
||||
interface FieldRowProps {
|
||||
field: BlueprintFieldDefinition;
|
||||
onChange: (field: BlueprintFieldDefinition) => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const needsOptions =
|
||||
field.type === FieldType.SELECT || field.type === FieldType.MULTI_SELECT;
|
||||
|
||||
function update<K extends keyof BlueprintFieldDefinition>(
|
||||
key: K,
|
||||
value: BlueprintFieldDefinition[K],
|
||||
) {
|
||||
onChange({ ...field, [key]: value });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 rounded-lg p-3 bg-white">
|
||||
{/* Main row */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* Drag handle placeholder */}
|
||||
<span className="text-gray-300 cursor-grab select-none text-lg leading-none">
|
||||
☰
|
||||
</span>
|
||||
|
||||
{/* Key */}
|
||||
<input
|
||||
type="text"
|
||||
value={field.key}
|
||||
onChange={(e) => update("key", e.target.value)}
|
||||
placeholder="field_key"
|
||||
className={`${INPUT_CLS} w-36 font-mono`}
|
||||
aria-label="Field key"
|
||||
/>
|
||||
|
||||
{/* Label */}
|
||||
<input
|
||||
type="text"
|
||||
value={field.label}
|
||||
onChange={(e) => update("label", e.target.value)}
|
||||
placeholder="Label"
|
||||
className={`${INPUT_CLS} w-40`}
|
||||
aria-label="Field label"
|
||||
/>
|
||||
|
||||
{/* Type */}
|
||||
<select
|
||||
value={field.type}
|
||||
onChange={(e) => {
|
||||
const t = e.target.value as FieldType;
|
||||
// Clear options when switching away from select types
|
||||
const clearedOptions =
|
||||
t === FieldType.SELECT || t === FieldType.MULTI_SELECT
|
||||
? field.options ?? []
|
||||
: undefined;
|
||||
onChange({ ...field, type: t, options: clearedOptions } as BlueprintFieldDefinition);
|
||||
}}
|
||||
className={`${INPUT_CLS} w-36`}
|
||||
aria-label="Field type"
|
||||
>
|
||||
{FIELD_TYPES.map((ft) => (
|
||||
<option key={ft.value} value={ft.value}>
|
||||
{ft.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Required */}
|
||||
<label className="flex items-center gap-1.5 text-sm text-gray-700 cursor-pointer select-none whitespace-nowrap">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.required}
|
||||
onChange={(e) => update("required", e.target.checked)}
|
||||
className="w-4 h-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
Req.
|
||||
</label>
|
||||
|
||||
{/* Expand/Collapse optional fields */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
className="text-xs text-gray-400 hover:text-gray-600 ml-auto whitespace-nowrap"
|
||||
aria-label={expanded ? "Collapse options" : "Expand options"}
|
||||
>
|
||||
{expanded ? "▲ less" : "▼ more"}
|
||||
</button>
|
||||
|
||||
{/* Delete */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDelete}
|
||||
className={BTN_DANGER}
|
||||
aria-label="Delete field"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Expanded optional fields */}
|
||||
{expanded && (
|
||||
<div className="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs text-gray-500 font-medium">Group</label>
|
||||
<input
|
||||
type="text"
|
||||
value={field.group ?? ""}
|
||||
onChange={(e) => update("group", e.target.value || undefined)}
|
||||
placeholder="Section heading"
|
||||
className={INPUT_CLS}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs text-gray-500 font-medium">
|
||||
Placeholder
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={field.placeholder ?? ""}
|
||||
onChange={(e) =>
|
||||
update("placeholder", e.target.value || undefined)
|
||||
}
|
||||
placeholder="Placeholder text"
|
||||
className={INPUT_CLS}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs text-gray-500 font-medium">
|
||||
Description
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={field.description ?? ""}
|
||||
onChange={(e) =>
|
||||
update("description", e.target.value || undefined)
|
||||
}
|
||||
placeholder="Helper text"
|
||||
className={INPUT_CLS}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 col-span-full pt-1">
|
||||
<label className="flex items-center gap-1.5 text-sm text-gray-700 cursor-pointer select-none">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.showInList ?? false}
|
||||
onChange={(e) => update("showInList", e.target.checked)}
|
||||
className="w-4 h-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
Show in list view
|
||||
</label>
|
||||
<label className="flex items-center gap-1.5 text-sm text-gray-700 cursor-pointer select-none">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.isFilterable ?? false}
|
||||
onChange={(e) => update("isFilterable", e.target.checked)}
|
||||
className="w-4 h-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
Filterable
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{needsOptions && (
|
||||
<div className="col-span-full">
|
||||
<OptionsEditor
|
||||
options={field.options ?? []}
|
||||
onChange={(opts) => update("options", opts)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Options inline hint when collapsed */}
|
||||
{!expanded && needsOptions && (field.options?.length ?? 0) === 0 && (
|
||||
<p className="mt-1 text-xs text-amber-600">
|
||||
No options defined yet — click ▼ more to add them.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// BlueprintFieldEditor — the modal
|
||||
// ---------------------------------------------------------------------------
|
||||
interface BlueprintFieldEditorProps {
|
||||
blueprintId: string;
|
||||
blueprintName: string;
|
||||
initialFieldDefs: BlueprintFieldDefinition[];
|
||||
initialRolePresets?: StaffingRequirement[];
|
||||
initialTab?: "fields" | "presets";
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function BlueprintFieldEditor({
|
||||
blueprintId,
|
||||
blueprintName,
|
||||
initialFieldDefs,
|
||||
initialRolePresets = [],
|
||||
initialTab = "fields",
|
||||
onClose,
|
||||
}: BlueprintFieldEditorProps) {
|
||||
const utils = trpc.useUtils();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<"fields" | "presets">(initialTab);
|
||||
const [fields, setFields] = useState<BlueprintFieldDefinition[]>(
|
||||
() =>
|
||||
[...initialFieldDefs].sort((a, b) => a.order - b.order),
|
||||
);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
const [presetSaveError, setPresetSaveError] = useState<string | null>(null);
|
||||
|
||||
const updateMutation = trpc.blueprint.update.useMutation();
|
||||
|
||||
const presetMutation = trpc.blueprint.updateRolePresets.useMutation();
|
||||
|
||||
function addField() {
|
||||
setFields((prev) => [...prev, makeEmptyField(prev.length)]);
|
||||
}
|
||||
|
||||
function removeField(idx: number) {
|
||||
setFields((prev) =>
|
||||
prev
|
||||
.filter((_, i) => i !== idx)
|
||||
.map((f, i) => ({ ...f, order: i })),
|
||||
);
|
||||
}
|
||||
|
||||
function updateField(idx: number, updated: BlueprintFieldDefinition) {
|
||||
setFields((prev) =>
|
||||
prev.map((f, i) => (i === idx ? updated : f)),
|
||||
);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
setSaveError(null);
|
||||
// Reassign order by current list position
|
||||
const normalised = fields.map((f, i) => ({ ...f, order: i }));
|
||||
updateMutation.mutate(
|
||||
{
|
||||
id: blueprintId,
|
||||
data: { fieldDefs: normalised },
|
||||
},
|
||||
{
|
||||
onSuccess: async () => {
|
||||
await utils.blueprint.list.invalidate();
|
||||
onClose();
|
||||
},
|
||||
onError: (err) => {
|
||||
setSaveError(err.message);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// Close on backdrop click
|
||||
function handleBackdropClick(e: React.MouseEvent<HTMLDivElement>) {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
|
||||
onClick={handleBackdropClick}
|
||||
>
|
||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-3xl mx-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
Edit Fields:{" "}
|
||||
<span className="text-gray-600 font-normal">{blueprintName}</span>
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-200 px-6">
|
||||
{(["fields", "presets"] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
|
||||
activeTab === tab
|
||||
? "border-brand-500 text-brand-600"
|
||||
: "border-transparent text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{tab === "fields" ? "Fields" : "Role Presets"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activeTab === "fields" ? (
|
||||
<>
|
||||
{/* Field list */}
|
||||
<div className="px-6 py-4 space-y-3 max-h-[60vh] overflow-y-auto">
|
||||
{fields.length === 0 && (
|
||||
<p className="text-sm text-gray-400 text-center py-8">
|
||||
No fields yet. Click “+ Add Field” to get started.
|
||||
</p>
|
||||
)}
|
||||
{fields.map((field, idx) => (
|
||||
<FieldRow
|
||||
key={field.id}
|
||||
field={field}
|
||||
onChange={(updated) => updateField(idx, updated)}
|
||||
onDelete={() => removeField(idx)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add field button */}
|
||||
<div className="px-6 pb-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={addField}
|
||||
className="flex items-center gap-1.5 text-sm text-brand-600 hover:text-brand-800 font-medium"
|
||||
>
|
||||
<span className="text-lg leading-none">+</span> Add Field
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{saveError && (
|
||||
<div className="mx-6 mb-2 px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
|
||||
{saveError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200">
|
||||
<button type="button" onClick={onClose} className={BTN_SECONDARY}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={updateMutation.isPending}
|
||||
className={BTN_PRIMARY}
|
||||
>
|
||||
{updateMutation.isPending ? "Saving…" : "Save Fields"}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="px-6 py-4">
|
||||
<p className="text-xs text-gray-500 mb-4">
|
||||
Role presets are auto-loaded in Step 3 of the Project Creation Wizard when this blueprint is selected.
|
||||
</p>
|
||||
<RolePresetsEditor
|
||||
initialPresets={initialRolePresets}
|
||||
onSave={(presets) =>
|
||||
presetMutation.mutate(
|
||||
{ id: blueprintId, rolePresets: presets },
|
||||
{
|
||||
onSuccess: async () => {
|
||||
await utils.blueprint.list.invalidate();
|
||||
setPresetSaveError(null);
|
||||
onClose();
|
||||
},
|
||||
onError: (err) => {
|
||||
setPresetSaveError(err.message);
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
isSaving={presetMutation.isPending}
|
||||
saveError={presetSaveError}
|
||||
/>
|
||||
<div className="flex justify-start mt-4 border-t border-gray-200 pt-4">
|
||||
<button type="button" onClick={onClose} className={BTN_SECONDARY}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,510 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import type { FormEvent, MouseEvent } from "react";
|
||||
import { BlueprintTarget } from "@planarchy/shared";
|
||||
import type { BlueprintFieldDefinition } from "@planarchy/shared";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import { BlueprintFieldEditor } from "./BlueprintFieldEditor.js";
|
||||
import { useSelection } from "~/hooks/useSelection.js";
|
||||
import { BatchActionBar } from "~/components/ui/BatchActionBar.js";
|
||||
import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
|
||||
import { FilterBar } from "~/components/ui/FilterBar.js";
|
||||
import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
|
||||
import { useTableSort } from "~/hooks/useTableSort.js";
|
||||
import { useViewPrefs } from "~/hooks/useViewPrefs.js";
|
||||
|
||||
const INPUT_CLS =
|
||||
"px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm";
|
||||
|
||||
const BTN_PRIMARY =
|
||||
"px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50";
|
||||
|
||||
const BTN_SECONDARY =
|
||||
"px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium";
|
||||
|
||||
interface NewBlueprintModalProps {
|
||||
onClose: () => void;
|
||||
onCreated: () => void;
|
||||
}
|
||||
|
||||
type BlueprintTargetValue = "RESOURCE" | "PROJECT";
|
||||
type BlueprintSortField = "name" | "target" | "fieldCount" | "presetCount" | "global";
|
||||
|
||||
function NewBlueprintModal({ onClose, onCreated }: NewBlueprintModalProps) {
|
||||
const utils = trpc.useUtils();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [target, setTarget] = useState<BlueprintTargetValue>("RESOURCE");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const createMutation = trpc.blueprint.create.useMutation();
|
||||
|
||||
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
if (!name.trim()) {
|
||||
setError("Name is required.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await createMutation.mutateAsync({
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
target: target as BlueprintTarget,
|
||||
fieldDefs: [],
|
||||
defaults: {},
|
||||
validationRules: [],
|
||||
});
|
||||
await utils.blueprint.list.invalidate();
|
||||
onCreated();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to create blueprint.");
|
||||
}
|
||||
}
|
||||
|
||||
function handleBackdropClick(e: MouseEvent<HTMLDivElement>) {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8" onClick={handleBackdropClick}>
|
||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4">
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
|
||||
<h2 className="text-lg font-semibold text-gray-900">New Blueprint</h2>
|
||||
<button type="button" onClick={onClose} className="text-gray-400 hover:text-gray-600 text-2xl leading-none" aria-label="Close">×</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium text-gray-700">Name <span className="text-red-500">*</span></label>
|
||||
<input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Resource Extended Fields" className={INPUT_CLS} autoFocus />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium text-gray-700">Description</label>
|
||||
<textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Optional description" className={`${INPUT_CLS} resize-none`} rows={2} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium text-gray-700">Target</label>
|
||||
<select value={target} onChange={(e) => setTarget(e.target.value as BlueprintTargetValue)} className={INPUT_CLS}>
|
||||
<option value="RESOURCE">Resource</option>
|
||||
<option value="PROJECT">Project</option>
|
||||
</select>
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2">{error}</p>}
|
||||
<div className="flex items-center justify-end gap-3 pt-2">
|
||||
<button type="button" onClick={onClose} className={BTN_SECONDARY}>Cancel</button>
|
||||
<button type="submit" disabled={createMutation.isPending} className={BTN_PRIMARY}>
|
||||
{createMutation.isPending ? "Creating…" : "Create Blueprint"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface BlueprintRow {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
target: BlueprintTargetValue;
|
||||
fieldDefs: unknown;
|
||||
rolePresets: unknown;
|
||||
isGlobal?: boolean;
|
||||
}
|
||||
|
||||
interface BlueprintCardProps {
|
||||
blueprint: BlueprintRow;
|
||||
onEditFields: () => void;
|
||||
onEditStaffing: () => void;
|
||||
onToggleGlobal: () => void;
|
||||
onDelete: () => void;
|
||||
isSelected: boolean;
|
||||
onToggleSelect: () => void;
|
||||
}
|
||||
|
||||
function BlueprintCard({
|
||||
blueprint,
|
||||
onEditFields,
|
||||
onEditStaffing,
|
||||
onToggleGlobal,
|
||||
onDelete,
|
||||
isSelected,
|
||||
onToggleSelect,
|
||||
}: BlueprintCardProps) {
|
||||
const fieldDefs = Array.isArray(blueprint.fieldDefs) ? (blueprint.fieldDefs as BlueprintFieldDefinition[]) : [];
|
||||
const rolePresets = Array.isArray(blueprint.rolePresets) ? (blueprint.rolePresets as unknown[]) : [];
|
||||
const fieldCount = fieldDefs.length;
|
||||
const presetCount = rolePresets.length;
|
||||
const isProject = blueprint.target === "PROJECT";
|
||||
|
||||
return (
|
||||
<div className={`bg-white rounded-xl border p-5 flex flex-col gap-3 hover:shadow-sm transition-shadow ${isSelected ? "border-brand-400 bg-brand-50" : "border-gray-200"}`}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-start gap-3 flex-1 min-w-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={onToggleSelect}
|
||||
className="mt-0.5 rounded border-gray-300"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-gray-900 truncate">{blueprint.name}</h3>
|
||||
{blueprint.description && (
|
||||
<p className="text-xs text-gray-500 mt-0.5 line-clamp-2">{blueprint.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className={`shrink-0 inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700" : "bg-blue-50 text-blue-700"}`}>
|
||||
{blueprint.target}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3 text-sm text-gray-500">
|
||||
<span>{fieldCount === 0 ? "No fields" : `${fieldCount} field${fieldCount === 1 ? "" : "s"}`}</span>
|
||||
{isProject && (
|
||||
<span className={presetCount > 0 ? "text-brand-600 font-medium" : ""}>
|
||||
{presetCount === 0 ? "No staffing presets" : `${presetCount} staffing preset${presetCount === 1 ? "" : "s"}`}
|
||||
</span>
|
||||
)}
|
||||
{blueprint.isGlobal && (
|
||||
<span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 font-medium">Global</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 pt-1 border-t border-gray-100">
|
||||
<button type="button" onClick={onEditFields} className="px-3 py-1.5 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium transition-colors">
|
||||
Edit Fields
|
||||
</button>
|
||||
{isProject && (
|
||||
<button type="button" onClick={onEditStaffing} className="px-3 py-1.5 border border-brand-300 text-brand-700 rounded-lg hover:bg-brand-50 text-sm font-medium transition-colors">
|
||||
Edit Staffing Presets
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleGlobal}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 ${
|
||||
blueprint.isGlobal
|
||||
? "border border-amber-300 text-amber-700 hover:bg-amber-50"
|
||||
: "border border-gray-200 text-gray-500 hover:bg-gray-50"
|
||||
}`}
|
||||
title={blueprint.isGlobal ? "Remove from global columns" : "Make fields available as global columns"}
|
||||
>
|
||||
{blueprint.isGlobal ? "Unglobalize" : "Make Global"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (window.confirm(`Delete blueprint "${blueprint.name}"?`)) {
|
||||
onDelete();
|
||||
}
|
||||
}}
|
||||
className="px-3 py-1.5 border border-red-200 text-red-600 rounded-lg hover:bg-red-50 text-sm font-medium transition-colors disabled:opacity-50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function BlueprintsClient() {
|
||||
const [showNewModal, setShowNewModal] = useState(false);
|
||||
const [editingBlueprint, setEditingBlueprint] = useState<BlueprintRow | null>(null);
|
||||
const [editingTab, setEditingTab] = useState<"fields" | "presets">("fields");
|
||||
const [targetFilter, setTargetFilter] = useState<string>("");
|
||||
const [confirmBatchDelete, setConfirmBatchDelete] = useState<string[] | null>(null);
|
||||
|
||||
const selection = useSelection();
|
||||
const utils = trpc.useUtils();
|
||||
|
||||
const { data, isLoading, isError } = trpc.blueprint.list.useQuery({
|
||||
target: (targetFilter as BlueprintTarget) || undefined,
|
||||
});
|
||||
|
||||
const batchDeleteMutation = trpc.blueprint.batchDelete.useMutation();
|
||||
const deleteMutation = trpc.blueprint.delete.useMutation();
|
||||
const setGlobalMutation = trpc.blueprint.setGlobal.useMutation();
|
||||
|
||||
const viewPrefs = useViewPrefs("blueprints");
|
||||
|
||||
useEffect(() => {
|
||||
selection.clear();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [targetFilter]);
|
||||
|
||||
const blueprints: BlueprintRow[] = data ?? [];
|
||||
const { sorted: sortedBlueprints, sortField, sortDir, toggle } = useTableSort<BlueprintRow, BlueprintSortField>(blueprints, {
|
||||
initialField: (viewPrefs.savedSort?.field as BlueprintSortField | undefined) ?? null,
|
||||
initialDir: viewPrefs.savedSort?.dir ?? null,
|
||||
onSortChange: (field, dir) => {
|
||||
viewPrefs.setSavedSort(field && dir ? { field, dir } : null);
|
||||
},
|
||||
});
|
||||
const blueprintIds = sortedBlueprints.map((b) => b.id);
|
||||
|
||||
function handleSort(field: BlueprintSortField) {
|
||||
switch (field) {
|
||||
case "fieldCount":
|
||||
toggle(field, (row) => (Array.isArray(row.fieldDefs) ? row.fieldDefs.length : 0));
|
||||
return;
|
||||
case "presetCount":
|
||||
toggle(field, (row) => (Array.isArray(row.rolePresets) ? row.rolePresets.length : 0));
|
||||
return;
|
||||
case "global":
|
||||
toggle(field, (row) => (row.isGlobal ? 0 : 1));
|
||||
return;
|
||||
default:
|
||||
toggle(field);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSortRequest(field: string) {
|
||||
handleSort(field as BlueprintSortField);
|
||||
}
|
||||
|
||||
async function handleDelete(id: string) {
|
||||
await deleteMutation.mutateAsync({ id });
|
||||
await utils.blueprint.list.invalidate();
|
||||
if (selection.selectedIds.has(id)) {
|
||||
selection.toggle(id);
|
||||
}
|
||||
if (editingBlueprint?.id === id) {
|
||||
setEditingBlueprint(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleToggleGlobal(id: string, isGlobal: boolean | undefined) {
|
||||
await setGlobalMutation.mutateAsync({ id, isGlobal: !isGlobal });
|
||||
await utils.blueprint.list.invalidate();
|
||||
}
|
||||
|
||||
async function handleBatchDelete(ids: string[]) {
|
||||
await batchDeleteMutation.mutateAsync({ ids });
|
||||
await utils.blueprint.list.invalidate();
|
||||
selection.clear();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 pb-24">
|
||||
<div className="flex items-start justify-between mb-6 gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Blueprints</h1>
|
||||
<p className="text-gray-500 text-sm mt-1">Configure dynamic fields for resources and projects</p>
|
||||
</div>
|
||||
<button type="button" onClick={() => setShowNewModal(true)} className={BTN_PRIMARY}>
|
||||
+ New Blueprint
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<FilterBar
|
||||
hasActiveFilters={!!targetFilter}
|
||||
onClearFilters={() => setTargetFilter("")}
|
||||
>
|
||||
<select
|
||||
value={targetFilter}
|
||||
onChange={(e) => setTargetFilter(e.target.value)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm bg-white"
|
||||
>
|
||||
<option value="">All Targets</option>
|
||||
<option value="RESOURCE">Resource</option>
|
||||
<option value="PROJECT">Project</option>
|
||||
</select>
|
||||
</FilterBar>
|
||||
|
||||
{isLoading && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="bg-white rounded-xl border border-gray-200 p-5 animate-pulse h-36" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isError && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-xl p-6 text-red-700 text-sm">
|
||||
Failed to load blueprints. Please refresh the page.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && blueprints.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<p className="text-gray-400 text-sm mb-4">No blueprints yet. Create one to start defining dynamic fields.</p>
|
||||
<button type="button" onClick={() => setShowNewModal(true)} className={BTN_PRIMARY}>
|
||||
+ New Blueprint
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && sortedBlueprints.length > 0 && (
|
||||
<>
|
||||
<div className="hidden md:block bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200 bg-gray-50">
|
||||
<th className="w-12 px-3 py-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selection.isAllSelected(blueprintIds)}
|
||||
onChange={() => selection.toggleAll(blueprintIds)}
|
||||
className="rounded border-gray-300"
|
||||
aria-label="Select all blueprints"
|
||||
/>
|
||||
</th>
|
||||
<SortableColumnHeader label="Name" field="name" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} />
|
||||
<SortableColumnHeader label="Target" field="target" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} />
|
||||
<SortableColumnHeader label="Fields" field="fieldCount" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" />
|
||||
<SortableColumnHeader label="Staffing Presets" field="presetCount" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" />
|
||||
<SortableColumnHeader label="Global" field="global" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" />
|
||||
<th className="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedBlueprints.map((bp) => {
|
||||
const fieldCount = Array.isArray(bp.fieldDefs) ? bp.fieldDefs.length : 0;
|
||||
const presetCount = Array.isArray(bp.rolePresets) ? bp.rolePresets.length : 0;
|
||||
const isProject = bp.target === "PROJECT";
|
||||
|
||||
return (
|
||||
<tr key={bp.id} className="border-b border-gray-100 last:border-b-0 hover:bg-gray-50 transition-colors">
|
||||
<td className="px-3 py-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selection.selectedIds.has(bp.id)}
|
||||
onChange={() => selection.toggle(bp.id)}
|
||||
className="rounded border-gray-300"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-3">
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium text-gray-900">{bp.name}</div>
|
||||
{bp.description && <div className="text-xs text-gray-500 mt-0.5 truncate">{bp.description}</div>}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-3">
|
||||
<span className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700" : "bg-blue-50 text-blue-700"}`}>
|
||||
{bp.target}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-3 text-center text-gray-600">{fieldCount}</td>
|
||||
<td className="px-3 py-3 text-center text-gray-600">{isProject ? presetCount : "—"}</td>
|
||||
<td className="px-3 py-3 text-center">
|
||||
{bp.isGlobal ? (
|
||||
<span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 font-medium">
|
||||
Global
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-gray-300">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-3">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setEditingTab("fields"); setEditingBlueprint(bp); }}
|
||||
className="text-xs text-brand-600 hover:text-brand-800 font-medium"
|
||||
>
|
||||
Edit Fields
|
||||
</button>
|
||||
{isProject && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setEditingTab("presets"); setEditingBlueprint(bp); }}
|
||||
className="text-xs text-brand-600 hover:text-brand-800 font-medium"
|
||||
>
|
||||
Presets
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleGlobal(bp.id, bp.isGlobal)}
|
||||
disabled={setGlobalMutation.isPending}
|
||||
className="text-xs text-gray-500 hover:text-gray-700 disabled:opacity-50"
|
||||
>
|
||||
{bp.isGlobal ? "Unglobalize" : "Make Global"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (window.confirm(`Delete blueprint "${bp.name}"?`)) {
|
||||
handleDelete(bp.id);
|
||||
}
|
||||
}}
|
||||
disabled={deleteMutation.isPending}
|
||||
className="text-xs text-red-500 hover:text-red-700 disabled:opacity-50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:hidden">
|
||||
{sortedBlueprints.map((bp) => (
|
||||
<BlueprintCard
|
||||
key={bp.id}
|
||||
blueprint={bp}
|
||||
onEditFields={() => { setEditingTab("fields"); setEditingBlueprint(bp); }}
|
||||
onEditStaffing={() => { setEditingTab("presets"); setEditingBlueprint(bp); }}
|
||||
onToggleGlobal={() => handleToggleGlobal(bp.id, bp.isGlobal)}
|
||||
onDelete={() => handleDelete(bp.id)}
|
||||
isSelected={selection.selectedIds.has(bp.id)}
|
||||
onToggleSelect={() => selection.toggle(bp.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<BatchActionBar
|
||||
count={selection.count}
|
||||
onClear={selection.clear}
|
||||
actions={[
|
||||
{
|
||||
label: `Delete (${selection.count})`,
|
||||
variant: "danger",
|
||||
onClick: () => setConfirmBatchDelete(selection.selectedArray),
|
||||
disabled: batchDeleteMutation.isPending,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{confirmBatchDelete && (
|
||||
<ConfirmDialog
|
||||
title="Delete Blueprints"
|
||||
message={`Delete ${confirmBatchDelete.length} selected blueprint${confirmBatchDelete.length !== 1 ? "s" : ""}? They will be marked as inactive.`}
|
||||
confirmLabel="Delete All"
|
||||
variant="danger"
|
||||
onConfirm={() => {
|
||||
void handleBatchDelete(confirmBatchDelete);
|
||||
setConfirmBatchDelete(null);
|
||||
}}
|
||||
onCancel={() => setConfirmBatchDelete(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showNewModal && (
|
||||
<NewBlueprintModal onClose={() => setShowNewModal(false)} onCreated={() => setShowNewModal(false)} />
|
||||
)}
|
||||
|
||||
{editingBlueprint && (
|
||||
<BlueprintFieldEditor
|
||||
blueprintId={editingBlueprint.id}
|
||||
blueprintName={editingBlueprint.name}
|
||||
initialFieldDefs={Array.isArray(editingBlueprint.fieldDefs) ? (editingBlueprint.fieldDefs as BlueprintFieldDefinition[]) : []}
|
||||
initialRolePresets={Array.isArray(editingBlueprint.rolePresets) ? (editingBlueprint.rolePresets as import("@planarchy/shared").StaffingRequirement[]) : []}
|
||||
initialTab={editingTab}
|
||||
onClose={() => setEditingBlueprint(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import type { StaffingRequirement } from "@planarchy/shared";
|
||||
|
||||
const INPUT_CLS =
|
||||
"px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm";
|
||||
|
||||
const BTN_DANGER =
|
||||
"px-2 py-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded text-sm transition-colors";
|
||||
|
||||
function makeEmptyPreset(): StaffingRequirement {
|
||||
return {
|
||||
id: crypto.randomUUID(),
|
||||
role: "",
|
||||
requiredSkills: [],
|
||||
preferredSkills: [],
|
||||
hoursPerDay: 8,
|
||||
headcount: 1,
|
||||
};
|
||||
}
|
||||
|
||||
interface PresetRowProps {
|
||||
preset: StaffingRequirement;
|
||||
onChange: (preset: StaffingRequirement) => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
function PresetRow({ preset, onChange, onDelete }: PresetRowProps) {
|
||||
function update<K extends keyof StaffingRequirement>(key: K, value: StaffingRequirement[K]) {
|
||||
onChange({ ...preset, [key]: value });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border border-gray-200 rounded-lg p-3 bg-white">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* Role */}
|
||||
<input
|
||||
type="text"
|
||||
value={preset.role}
|
||||
onChange={(e) => update("role", e.target.value)}
|
||||
placeholder="Role name"
|
||||
className={`${INPUT_CLS} flex-1 min-w-32`}
|
||||
aria-label="Role name"
|
||||
/>
|
||||
|
||||
{/* Required Skills */}
|
||||
<div className="flex flex-col gap-0.5 flex-1 min-w-40">
|
||||
<label className="text-xs text-gray-400">Required skills (comma-sep)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={preset.requiredSkills.join(", ")}
|
||||
onChange={(e) =>
|
||||
update(
|
||||
"requiredSkills",
|
||||
e.target.value
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean),
|
||||
)
|
||||
}
|
||||
placeholder="e.g. 3D Modeling, Lighting"
|
||||
className={INPUT_CLS}
|
||||
aria-label="Required skills"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hours per day */}
|
||||
<div className="flex flex-col gap-0.5 w-24">
|
||||
<label className="text-xs text-gray-400">h/day</label>
|
||||
<input
|
||||
type="number"
|
||||
value={preset.hoursPerDay}
|
||||
min={0}
|
||||
max={24}
|
||||
step={0.5}
|
||||
onChange={(e) => update("hoursPerDay", parseFloat(e.target.value) || 0)}
|
||||
className={INPUT_CLS}
|
||||
aria-label="Hours per day"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Headcount */}
|
||||
<div className="flex flex-col gap-0.5 w-20">
|
||||
<label className="text-xs text-gray-400">Count</label>
|
||||
<input
|
||||
type="number"
|
||||
value={preset.headcount}
|
||||
min={1}
|
||||
max={20}
|
||||
onChange={(e) => update("headcount", parseInt(e.target.value, 10) || 1)}
|
||||
className={INPUT_CLS}
|
||||
aria-label="Headcount"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Delete */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDelete}
|
||||
className={`${BTN_DANGER} self-end mb-0.5`}
|
||||
aria-label="Remove preset"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Preferred skills (secondary row) */}
|
||||
<div className="mt-2">
|
||||
<label className="text-xs text-gray-400">Preferred skills (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={(preset.preferredSkills ?? []).join(", ")}
|
||||
onChange={(e) =>
|
||||
update(
|
||||
"preferredSkills",
|
||||
e.target.value
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean),
|
||||
)
|
||||
}
|
||||
placeholder="e.g. Compositing, Art Direction"
|
||||
className={`${INPUT_CLS} w-full mt-0.5`}
|
||||
aria-label="Preferred skills"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface RolePresetsEditorProps {
|
||||
initialPresets: StaffingRequirement[];
|
||||
/** Called with the current presets array when the user clicks Save */
|
||||
onSave: (presets: StaffingRequirement[]) => void;
|
||||
isSaving?: boolean;
|
||||
saveError?: string | null;
|
||||
}
|
||||
|
||||
export function RolePresetsEditor({
|
||||
initialPresets,
|
||||
onSave,
|
||||
isSaving = false,
|
||||
saveError = null,
|
||||
}: RolePresetsEditorProps) {
|
||||
const [presets, setPresets] = useState<StaffingRequirement[]>(initialPresets);
|
||||
|
||||
function addPreset() {
|
||||
setPresets((prev) => [...prev, makeEmptyPreset()]);
|
||||
}
|
||||
|
||||
function removePreset(idx: number) {
|
||||
setPresets((prev) => prev.filter((_, i) => i !== idx));
|
||||
}
|
||||
|
||||
function updatePreset(idx: number, updated: StaffingRequirement) {
|
||||
setPresets((prev) => prev.map((p, i) => (i === idx ? updated : p)));
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="space-y-3 max-h-[50vh] overflow-y-auto">
|
||||
{presets.length === 0 && (
|
||||
<p className="text-sm text-gray-400 text-center py-8">
|
||||
No role presets yet. Click “+ Add Role” to define default staffing.
|
||||
</p>
|
||||
)}
|
||||
{presets.map((preset, idx) => (
|
||||
<PresetRow
|
||||
key={preset.id}
|
||||
preset={preset}
|
||||
onChange={(updated) => updatePreset(idx, updated)}
|
||||
onDelete={() => removePreset(idx)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={addPreset}
|
||||
className="flex items-center gap-1.5 text-sm text-brand-600 hover:text-brand-800 font-medium"
|
||||
>
|
||||
<span className="text-lg leading-none">+</span> Add Role
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{saveError && (
|
||||
<div className="mt-2 px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
|
||||
{saveError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end mt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSave(presets)}
|
||||
disabled={isSaving}
|
||||
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? "Saving…" : "Save Presets"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user