chore(repo): initialize planarchy workspace
This commit is contained in:
@@ -0,0 +1,475 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
|
||||
type EditingRule = {
|
||||
id?: string;
|
||||
chapter: string;
|
||||
location: string;
|
||||
level: string;
|
||||
costMultiplier: number;
|
||||
billMultiplier: number;
|
||||
shoringRatio: string;
|
||||
additionalEffortRatio: string;
|
||||
description: string;
|
||||
sortOrder: number;
|
||||
};
|
||||
|
||||
type EditingSet = {
|
||||
id?: string;
|
||||
name: string;
|
||||
description: string;
|
||||
isDefault: boolean;
|
||||
rules: EditingRule[];
|
||||
};
|
||||
|
||||
const CHAPTER_PRESETS = [
|
||||
"Animation",
|
||||
"Compositing",
|
||||
"3D Modeling",
|
||||
"3D Lighting",
|
||||
"3D Rigging",
|
||||
"3D Environment",
|
||||
"Motion Graphics",
|
||||
"Art Direction",
|
||||
"Project Management",
|
||||
];
|
||||
|
||||
const LOCATION_PRESETS = [
|
||||
"Germany",
|
||||
"India",
|
||||
"Poland",
|
||||
"Romania",
|
||||
"Spain",
|
||||
"UK",
|
||||
"USA",
|
||||
"Canada",
|
||||
];
|
||||
|
||||
const LEVEL_PRESETS = [
|
||||
"Junior",
|
||||
"Mid",
|
||||
"Senior",
|
||||
"Lead",
|
||||
"Principal",
|
||||
];
|
||||
|
||||
const emptyRule: EditingRule = {
|
||||
chapter: "",
|
||||
location: "",
|
||||
level: "",
|
||||
costMultiplier: 1.0,
|
||||
billMultiplier: 1.0,
|
||||
shoringRatio: "",
|
||||
additionalEffortRatio: "",
|
||||
description: "",
|
||||
sortOrder: 0,
|
||||
};
|
||||
|
||||
const emptySet: EditingSet = {
|
||||
name: "",
|
||||
description: "",
|
||||
isDefault: false,
|
||||
rules: [],
|
||||
};
|
||||
|
||||
export function ExperienceMultipliersClient() {
|
||||
const utils = trpc.useUtils();
|
||||
const { data: sets, isLoading } = trpc.experienceMultiplier.list.useQuery();
|
||||
|
||||
const createMutation = trpc.experienceMultiplier.create.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.experienceMultiplier.list.invalidate();
|
||||
setEditing(null);
|
||||
},
|
||||
});
|
||||
const updateMutation = trpc.experienceMultiplier.update.useMutation({
|
||||
onSuccess: () => {
|
||||
utils.experienceMultiplier.list.invalidate();
|
||||
setEditing(null);
|
||||
},
|
||||
});
|
||||
const deleteMutation = trpc.experienceMultiplier.delete.useMutation({
|
||||
onSuccess: () => utils.experienceMultiplier.list.invalidate(),
|
||||
});
|
||||
|
||||
const [editing, setEditing] = useState<EditingSet | 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) => ({
|
||||
...(r.chapter ? { chapter: r.chapter } : {}),
|
||||
...(r.location ? { location: r.location } : {}),
|
||||
...(r.level ? { level: r.level } : {}),
|
||||
costMultiplier: r.costMultiplier,
|
||||
billMultiplier: r.billMultiplier,
|
||||
...(r.shoringRatio !== "" ? { shoringRatio: parseFloat(r.shoringRatio) } : {}),
|
||||
...(r.additionalEffortRatio !== "" ? { additionalEffortRatio: parseFloat(r.additionalEffortRatio) } : {}),
|
||||
...(r.description ? { description: r.description } : {}),
|
||||
sortOrder: i,
|
||||
})),
|
||||
};
|
||||
|
||||
if (editing.id) {
|
||||
updateMutation.mutate({ id: editing.id, ...payload });
|
||||
} else {
|
||||
createMutation.mutate(payload);
|
||||
}
|
||||
}
|
||||
|
||||
function handleEdit(set: NonNullable<typeof sets>[number]) {
|
||||
setEditing({
|
||||
id: set.id,
|
||||
name: set.name,
|
||||
description: set.description ?? "",
|
||||
isDefault: set.isDefault,
|
||||
rules: set.rules.map((r) => ({
|
||||
id: r.id,
|
||||
chapter: r.chapter ?? "",
|
||||
location: r.location ?? "",
|
||||
level: r.level ?? "",
|
||||
costMultiplier: r.costMultiplier,
|
||||
billMultiplier: r.billMultiplier,
|
||||
shoringRatio: r.shoringRatio != null ? String(r.shoringRatio) : "",
|
||||
additionalEffortRatio: r.additionalEffortRatio != null ? String(r.additionalEffortRatio) : "",
|
||||
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-6xl space-y-6 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Experience Multipliers</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
Define rate and effort adjustments by chapter, location, and experience level.
|
||||
</p>
|
||||
</div>
|
||||
{!editing && (
|
||||
<button
|
||||
onClick={() => setEditing({ ...emptySet })}
|
||||
className="rounded-2xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700"
|
||||
>
|
||||
New multiplier 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 multiplier set" : "New multiplier 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 Multipliers"
|
||||
/>
|
||||
</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 set (auto-selected when applying multipliers)
|
||||
</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 rate and effort adjustments.
|
||||
</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">Chapter</th>
|
||||
<th className="px-2 py-2 font-medium">Location</th>
|
||||
<th className="px-2 py-2 font-medium">Level</th>
|
||||
<th className="px-2 py-2 text-right font-medium">Cost mult.</th>
|
||||
<th className="px-2 py-2 text-right font-medium">Bill mult.</th>
|
||||
<th className="px-2 py-2 text-right font-medium">Shoring %</th>
|
||||
<th className="px-2 py-2 text-right font-medium">Add. effort %</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">
|
||||
<input
|
||||
value={rule.chapter}
|
||||
onChange={(e) => updateRule(i, { chapter: e.target.value })}
|
||||
list="chapter-presets"
|
||||
className="w-full rounded-lg border border-gray-200 px-2 py-1 text-sm"
|
||||
placeholder="Any"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-2 py-2">
|
||||
<input
|
||||
value={rule.location}
|
||||
onChange={(e) => updateRule(i, { location: e.target.value })}
|
||||
list="location-presets"
|
||||
className="w-full rounded-lg border border-gray-200 px-2 py-1 text-sm"
|
||||
placeholder="Any"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-2 py-2">
|
||||
<input
|
||||
value={rule.level}
|
||||
onChange={(e) => updateRule(i, { level: e.target.value })}
|
||||
list="level-presets"
|
||||
className="w-full rounded-lg border border-gray-200 px-2 py-1 text-sm"
|
||||
placeholder="Any"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-2 py-2">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={rule.costMultiplier}
|
||||
onChange={(e) => updateRule(i, { costMultiplier: 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="px-2 py-2">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={rule.billMultiplier}
|
||||
onChange={(e) => updateRule(i, { billMultiplier: 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="px-2 py-2">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="1"
|
||||
value={rule.shoringRatio}
|
||||
onChange={(e) => updateRule(i, { shoringRatio: e.target.value })}
|
||||
className="w-20 rounded-lg border border-gray-200 px-2 py-1 text-right text-sm tabular-nums"
|
||||
placeholder="-"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-2 py-2">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={rule.additionalEffortRatio}
|
||||
onChange={(e) => updateRule(i, { additionalEffortRatio: e.target.value })}
|
||||
className="w-20 rounded-lg border border-gray-200 px-2 py-1 text-right text-sm tabular-nums"
|
||||
placeholder="-"
|
||||
/>
|
||||
</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="chapter-presets">
|
||||
{CHAPTER_PRESETS.map((d) => (
|
||||
<option key={d} value={d} />
|
||||
))}
|
||||
</datalist>
|
||||
<datalist id="location-presets">
|
||||
{LOCATION_PRESETS.map((d) => (
|
||||
<option key={d} value={d} />
|
||||
))}
|
||||
</datalist>
|
||||
<datalist id="level-presets">
|
||||
{LEVEL_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>}
|
||||
|
||||
{sets && sets.length === 0 && !editing && (
|
||||
<div className="rounded-3xl border border-gray-200 bg-gray-50 p-8 text-center text-sm text-gray-500">
|
||||
No experience multiplier sets yet. Create one to define rate and effort adjustments.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sets?.map((s) => (
|
||||
<div key={s.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">{s.name}</h3>
|
||||
{s.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">{s.rules.length} rules</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setExpandedId(expandedId === s.id ? null : s.id)}
|
||||
className="rounded-xl border border-gray-300 px-3 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50"
|
||||
>
|
||||
{expandedId === s.id ? "Collapse" : "Expand"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleEdit(s)}
|
||||
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 multiplier set "${s.name}"?`)) {
|
||||
deleteMutation.mutate({ id: s.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>
|
||||
{s.description && <p className="mt-1 text-sm text-gray-500">{s.description}</p>}
|
||||
|
||||
{expandedId === s.id && s.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">Chapter</th>
|
||||
<th className="px-3 py-2 font-medium">Location</th>
|
||||
<th className="px-3 py-2 font-medium">Level</th>
|
||||
<th className="px-3 py-2 text-right font-medium">Cost mult.</th>
|
||||
<th className="px-3 py-2 text-right font-medium">Bill mult.</th>
|
||||
<th className="px-3 py-2 text-right font-medium">Shoring</th>
|
||||
<th className="pl-3 py-2 text-right font-medium">Add. effort</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{s.rules.map((r) => (
|
||||
<tr key={r.id} className="border-b border-gray-100">
|
||||
<td className="py-1.5 pr-3 text-gray-900">{r.chapter || "\u2014"}</td>
|
||||
<td className="px-3 py-1.5 text-gray-700">{r.location || "\u2014"}</td>
|
||||
<td className="px-3 py-1.5 text-gray-500">{r.level || "\u2014"}</td>
|
||||
<td className="px-3 py-1.5 text-right tabular-nums text-gray-700">{r.costMultiplier.toFixed(2)}x</td>
|
||||
<td className="px-3 py-1.5 text-right tabular-nums text-gray-700">{r.billMultiplier.toFixed(2)}x</td>
|
||||
<td className="px-3 py-1.5 text-right tabular-nums text-gray-500">
|
||||
{r.shoringRatio != null ? `${(r.shoringRatio * 100).toFixed(0)}%` : "\u2014"}
|
||||
</td>
|
||||
<td className="pl-3 py-1.5 text-right tabular-nums text-gray-500">
|
||||
{r.additionalEffortRatio != null ? `${(r.additionalEffortRatio * 100).toFixed(0)}%` : "\u2014"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user