chore(repo): initialize planarchy workspace
This commit is contained in:
@@ -0,0 +1,420 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
|
||||
type EffortUnitMode = "per_frame" | "per_item" | "flat";
|
||||
|
||||
type EditingRule = {
|
||||
id?: string;
|
||||
scopeType: string;
|
||||
discipline: string;
|
||||
chapter: string;
|
||||
unitMode: EffortUnitMode;
|
||||
hoursPerUnit: number;
|
||||
description: string;
|
||||
sortOrder: number;
|
||||
};
|
||||
|
||||
type EditingRuleSet = {
|
||||
id?: string;
|
||||
name: string;
|
||||
description: string;
|
||||
isDefault: boolean;
|
||||
rules: EditingRule[];
|
||||
};
|
||||
|
||||
const UNIT_MODE_LABELS: Record<EffortUnitMode, string> = {
|
||||
per_frame: "Per frame",
|
||||
per_item: "Per item",
|
||||
flat: "Flat",
|
||||
};
|
||||
|
||||
const SCOPE_TYPE_PRESETS = ["SHOT", "ASSET", "ENVIRONMENT", "SEQUENCE", "OTHER"];
|
||||
const DISCIPLINE_PRESETS = [
|
||||
"3D Animation",
|
||||
"3D Lighting",
|
||||
"3D Modeling",
|
||||
"3D Rigging",
|
||||
"3D Environment",
|
||||
"Compositing",
|
||||
"Motion Graphics",
|
||||
"Art Direction",
|
||||
"Conception / R&D",
|
||||
"Project Management",
|
||||
"Production Supervisor",
|
||||
"DataPrep",
|
||||
"Audio Production",
|
||||
];
|
||||
|
||||
const emptyRule: EditingRule = {
|
||||
scopeType: "SHOT",
|
||||
discipline: "",
|
||||
chapter: "",
|
||||
unitMode: "per_frame",
|
||||
hoursPerUnit: 0,
|
||||
description: "",
|
||||
sortOrder: 0,
|
||||
};
|
||||
|
||||
const emptyRuleSet: EditingRuleSet = {
|
||||
name: "",
|
||||
description: "",
|
||||
isDefault: false,
|
||||
rules: [],
|
||||
};
|
||||
|
||||
export function EffortRulesClient() {
|
||||
const utils = trpc.useUtils();
|
||||
const { data: ruleSets, isLoading } = trpc.effortRule.list.useQuery();
|
||||
|
||||
const createMutation = trpc.effortRule.create.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.effortRule.list.invalidate();
|
||||
setEditing(null);
|
||||
},
|
||||
});
|
||||
const updateMutation = trpc.effortRule.update.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.effortRule.list.invalidate();
|
||||
setEditing(null);
|
||||
},
|
||||
});
|
||||
const deleteMutation = trpc.effortRule.delete.useMutation({
|
||||
onSuccess: () => utils.effortRule.list.invalidate(),
|
||||
});
|
||||
|
||||
const [editing, setEditing] = useState<EditingRuleSet | null>(null);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
|
||||
function handleSave() {
|
||||
if (!editing) return;
|
||||
const payload = {
|
||||
name: editing.name,
|
||||
description: editing.description || undefined,
|
||||
isDefault: editing.isDefault,
|
||||
rules: editing.rules.map((r, i) => ({
|
||||
scopeType: r.scopeType,
|
||||
discipline: r.discipline,
|
||||
...(r.chapter ? { chapter: r.chapter } : {}),
|
||||
unitMode: r.unitMode,
|
||||
hoursPerUnit: r.hoursPerUnit,
|
||||
...(r.description ? { description: r.description } : {}),
|
||||
sortOrder: i,
|
||||
})),
|
||||
};
|
||||
|
||||
if (editing.id) {
|
||||
updateMutation.mutate({ id: editing.id, ...payload });
|
||||
} else {
|
||||
createMutation.mutate(payload);
|
||||
}
|
||||
}
|
||||
|
||||
function handleEdit(ruleSet: NonNullable<typeof ruleSets>[number]) {
|
||||
setEditing({
|
||||
id: ruleSet.id,
|
||||
name: ruleSet.name,
|
||||
description: ruleSet.description ?? "",
|
||||
isDefault: ruleSet.isDefault,
|
||||
rules: ruleSet.rules.map((r) => ({
|
||||
id: r.id,
|
||||
scopeType: r.scopeType,
|
||||
discipline: r.discipline,
|
||||
chapter: r.chapter ?? "",
|
||||
unitMode: r.unitMode as EffortUnitMode,
|
||||
hoursPerUnit: r.hoursPerUnit,
|
||||
description: r.description ?? "",
|
||||
sortOrder: r.sortOrder,
|
||||
})),
|
||||
});
|
||||
}
|
||||
|
||||
function addRule() {
|
||||
if (!editing) return;
|
||||
setEditing({
|
||||
...editing,
|
||||
rules: [...editing.rules, { ...emptyRule, sortOrder: editing.rules.length }],
|
||||
});
|
||||
}
|
||||
|
||||
function removeRule(index: number) {
|
||||
if (!editing) return;
|
||||
setEditing({
|
||||
...editing,
|
||||
rules: editing.rules.filter((_, i) => i !== index),
|
||||
});
|
||||
}
|
||||
|
||||
function updateRule(index: number, updates: Partial<EditingRule>) {
|
||||
if (!editing) return;
|
||||
setEditing({
|
||||
...editing,
|
||||
rules: editing.rules.map((r, i) => (i === index ? { ...r, ...updates } : r)),
|
||||
});
|
||||
}
|
||||
|
||||
const isSaving = createMutation.isPending || updateMutation.isPending;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-5xl space-y-6 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Effort Rules</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
Define rules for auto-generating demand lines from scope items.
|
||||
</p>
|
||||
</div>
|
||||
{!editing && (
|
||||
<button
|
||||
onClick={() => setEditing({ ...emptyRuleSet })}
|
||||
className="rounded-2xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700"
|
||||
>
|
||||
New rule set
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Editor */}
|
||||
{editing && (
|
||||
<div className="rounded-3xl border border-gray-200 bg-white p-6 shadow-sm">
|
||||
<h2 className="mb-4 text-lg font-semibold text-gray-900">
|
||||
{editing.id ? "Edit rule set" : "New rule set"}
|
||||
</h2>
|
||||
|
||||
<div className="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-gray-500 uppercase">Name</label>
|
||||
<input
|
||||
value={editing.name}
|
||||
onChange={(e) => setEditing({ ...editing, name: e.target.value })}
|
||||
className="w-full rounded-xl border border-gray-300 px-3 py-2 text-sm"
|
||||
placeholder="e.g. CGI Standard Rules"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-gray-500 uppercase">Description</label>
|
||||
<input
|
||||
value={editing.description}
|
||||
onChange={(e) => setEditing({ ...editing, description: e.target.value })}
|
||||
className="w-full rounded-xl border border-gray-300 px-3 py-2 text-sm"
|
||||
placeholder="Optional description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="mb-4 flex items-center gap-2 text-sm text-gray-600">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editing.isDefault}
|
||||
onChange={(e) => setEditing({ ...editing, isDefault: e.target.checked })}
|
||||
className="rounded border-gray-300"
|
||||
/>
|
||||
Default rule set (auto-selected for new estimates)
|
||||
</label>
|
||||
|
||||
{/* Rules table */}
|
||||
<div className="mb-4">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-gray-700">Rules ({editing.rules.length})</h3>
|
||||
<button
|
||||
onClick={addRule}
|
||||
className="rounded-xl border border-gray-300 px-3 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50"
|
||||
>
|
||||
+ Add rule
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{editing.rules.length === 0 ? (
|
||||
<p className="rounded-xl bg-gray-50 p-4 text-center text-sm text-gray-400">
|
||||
No rules yet. Add rules to define how scope items expand into demand lines.
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200 text-xs uppercase tracking-wider text-gray-500">
|
||||
<th className="py-2 pr-2 font-medium">Scope type</th>
|
||||
<th className="px-2 py-2 font-medium">Discipline</th>
|
||||
<th className="px-2 py-2 font-medium">Chapter</th>
|
||||
<th className="px-2 py-2 font-medium">Unit mode</th>
|
||||
<th className="px-2 py-2 text-right font-medium">Hours/unit</th>
|
||||
<th className="pl-2 py-2 font-medium w-10"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{editing.rules.map((rule, i) => (
|
||||
<tr key={i} className="border-b border-gray-100">
|
||||
<td className="py-2 pr-2">
|
||||
<select
|
||||
value={rule.scopeType}
|
||||
onChange={(e) => updateRule(i, { scopeType: e.target.value })}
|
||||
className="w-full rounded-lg border border-gray-200 px-2 py-1 text-sm"
|
||||
>
|
||||
{SCOPE_TYPE_PRESETS.map((t) => (
|
||||
<option key={t} value={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-2 py-2">
|
||||
<input
|
||||
value={rule.discipline}
|
||||
onChange={(e) => updateRule(i, { discipline: e.target.value })}
|
||||
list="discipline-presets"
|
||||
className="w-full rounded-lg border border-gray-200 px-2 py-1 text-sm"
|
||||
placeholder="Discipline"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-2 py-2">
|
||||
<input
|
||||
value={rule.chapter}
|
||||
onChange={(e) => updateRule(i, { chapter: e.target.value })}
|
||||
className="w-full rounded-lg border border-gray-200 px-2 py-1 text-sm"
|
||||
placeholder="Chapter"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-2 py-2">
|
||||
<select
|
||||
value={rule.unitMode}
|
||||
onChange={(e) => updateRule(i, { unitMode: e.target.value as EffortUnitMode })}
|
||||
className="w-full rounded-lg border border-gray-200 px-2 py-1 text-sm"
|
||||
>
|
||||
{(Object.entries(UNIT_MODE_LABELS) as [EffortUnitMode, string][]).map(([value, label]) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-2 py-2">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={rule.hoursPerUnit}
|
||||
onChange={(e) => updateRule(i, { hoursPerUnit: parseFloat(e.target.value) || 0 })}
|
||||
className="w-20 rounded-lg border border-gray-200 px-2 py-1 text-right text-sm tabular-nums"
|
||||
/>
|
||||
</td>
|
||||
<td className="pl-2 py-2">
|
||||
<button
|
||||
onClick={() => removeRule(i)}
|
||||
className="text-red-400 hover:text-red-600"
|
||||
title="Remove"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<datalist id="discipline-presets">
|
||||
{DISCIPLINE_PRESETS.map((d) => (
|
||||
<option key={d} value={d} />
|
||||
))}
|
||||
</datalist>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving || !editing.name.trim()}
|
||||
className="rounded-2xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditing(null)}
|
||||
className="rounded-2xl border border-gray-300 px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{(createMutation.error || updateMutation.error) && (
|
||||
<p className="mt-2 text-sm text-red-600">
|
||||
{createMutation.error?.message || updateMutation.error?.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* List */}
|
||||
{isLoading && <p className="text-center text-sm text-gray-400">Loading...</p>}
|
||||
|
||||
{ruleSets && ruleSets.length === 0 && !editing && (
|
||||
<div className="rounded-3xl border border-gray-200 bg-gray-50 p-8 text-center text-sm text-gray-500">
|
||||
No effort rule sets yet. Create one to define how scope items expand into demand lines.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ruleSets?.map((rs) => (
|
||||
<div key={rs.id} className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="text-base font-semibold text-gray-900">{rs.name}</h3>
|
||||
{rs.isDefault && (
|
||||
<span className="rounded-full bg-brand-100 px-2 py-0.5 text-xs font-medium text-brand-700">Default</span>
|
||||
)}
|
||||
<span className="text-sm text-gray-500">{rs.rules.length} rules</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setExpandedId(expandedId === rs.id ? null : rs.id)}
|
||||
className="rounded-xl border border-gray-300 px-3 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50"
|
||||
>
|
||||
{expandedId === rs.id ? "Collapse" : "Expand"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleEdit(rs)}
|
||||
className="rounded-xl border border-gray-300 px-3 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm(`Delete rule set "${rs.name}"?`)) {
|
||||
deleteMutation.mutate({ id: rs.id });
|
||||
}
|
||||
}}
|
||||
className="rounded-xl border border-red-200 px-3 py-1 text-xs font-medium text-red-600 hover:bg-red-50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{rs.description && <p className="mt-1 text-sm text-gray-500">{rs.description}</p>}
|
||||
|
||||
{expandedId === rs.id && rs.rules.length > 0 && (
|
||||
<div className="mt-3 overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200 text-xs uppercase tracking-wider text-gray-500">
|
||||
<th className="py-2 pr-3 font-medium">Scope type</th>
|
||||
<th className="px-3 py-2 font-medium">Discipline</th>
|
||||
<th className="px-3 py-2 font-medium">Chapter</th>
|
||||
<th className="px-3 py-2 font-medium">Unit mode</th>
|
||||
<th className="pl-3 py-2 text-right font-medium">Hours/unit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rs.rules.map((r) => (
|
||||
<tr key={r.id} className="border-b border-gray-100">
|
||||
<td className="py-1.5 pr-3 text-gray-900">{r.scopeType}</td>
|
||||
<td className="px-3 py-1.5 text-gray-700">{r.discipline}</td>
|
||||
<td className="px-3 py-1.5 text-gray-500">{r.chapter || "\u2014"}</td>
|
||||
<td className="px-3 py-1.5 text-gray-500">{UNIT_MODE_LABELS[r.unitMode as EffortUnitMode] ?? r.unitMode}</td>
|
||||
<td className="pl-3 py-1.5 text-right tabular-nums text-gray-700">{r.hoursPerUnit}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user