chore(repo): initialize planarchy workspace
This commit is contained in:
@@ -0,0 +1,535 @@
|
||||
"use client";
|
||||
|
||||
import { clsx } from "clsx";
|
||||
import { useState } from "react";
|
||||
import { AllocationStatus, type StaffingRequirement } from "@planarchy/shared";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
|
||||
import { DateInput } from "~/components/ui/DateInput.js";
|
||||
|
||||
interface ProjectPanelProps {
|
||||
projectId: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface DemandSummary {
|
||||
id: string;
|
||||
role: string;
|
||||
hoursPerDay: number;
|
||||
requestedHeadcount: number;
|
||||
}
|
||||
|
||||
interface ProjectPanelAssignment {
|
||||
id: string;
|
||||
entityId?: string;
|
||||
sourceAllocationId?: string;
|
||||
resourceId: string;
|
||||
role: string | null;
|
||||
startDate: Date | string;
|
||||
endDate: Date | string;
|
||||
hoursPerDay: number;
|
||||
metadata: { includeSaturday?: boolean } | null;
|
||||
resource?: {
|
||||
displayName: string;
|
||||
eid: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface ProjectPanelDemand {
|
||||
id: string;
|
||||
entityId?: string;
|
||||
sourceAllocationId?: string;
|
||||
role: string | null;
|
||||
hoursPerDay: number;
|
||||
requestedHeadcount: number;
|
||||
roleEntity?: {
|
||||
name: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface ProjectPanelProject {
|
||||
name: string;
|
||||
orderType?: string;
|
||||
status?: string;
|
||||
startDate: Date | string;
|
||||
endDate: Date | string;
|
||||
budgetCents: number;
|
||||
staffingReqs?: unknown;
|
||||
}
|
||||
|
||||
interface ProjectPanelContext {
|
||||
project: ProjectPanelProject;
|
||||
assignments?: ProjectPanelAssignment[];
|
||||
demands?: ProjectPanelDemand[];
|
||||
}
|
||||
|
||||
interface ProjectPanelResource {
|
||||
id: string;
|
||||
displayName: string;
|
||||
eid: string;
|
||||
chapter?: string | null;
|
||||
}
|
||||
|
||||
const STATUS_COLORS = {
|
||||
green: "bg-green-500",
|
||||
amber: "bg-amber-400",
|
||||
red: "bg-red-500",
|
||||
};
|
||||
|
||||
function toDateInput(d: Date | string): string {
|
||||
return new Date(d).toISOString().split("T")[0] ?? "";
|
||||
}
|
||||
|
||||
function normalizeRole(value: string | null | undefined): string {
|
||||
return (value ?? "").trim().toLowerCase();
|
||||
}
|
||||
|
||||
export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
const utils = trpc.useUtils();
|
||||
|
||||
const { data: ctx, isLoading } = trpc.timeline.getProjectContext.useQuery(
|
||||
{ projectId },
|
||||
{ staleTime: 5_000 },
|
||||
);
|
||||
|
||||
const { data: budgetStatus } = trpc.timeline.getBudgetStatus.useQuery(
|
||||
{ projectId },
|
||||
{ staleTime: 5_000 },
|
||||
);
|
||||
|
||||
const updateMutation = trpc.timeline.updateAllocationInline.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.timeline.getProjectContext.invalidate();
|
||||
void utils.timeline.getBudgetStatus.invalidate();
|
||||
void utils.timeline.getEntries.invalidate();
|
||||
void utils.timeline.getEntriesView.invalidate();
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = trpc.allocation.deleteAssignment.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.timeline.getProjectContext.invalidate();
|
||||
void utils.timeline.getBudgetStatus.invalidate();
|
||||
void utils.timeline.getEntries.invalidate();
|
||||
void utils.timeline.getEntriesView.invalidate();
|
||||
},
|
||||
});
|
||||
|
||||
const createAssignmentMutation = trpc.allocation.createAssignment.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.timeline.getProjectContext.invalidate();
|
||||
void utils.timeline.getBudgetStatus.invalidate();
|
||||
void utils.timeline.getEntries.invalidate();
|
||||
void utils.timeline.getEntriesView.invalidate();
|
||||
setAddingMember(false);
|
||||
setResourceSearch("");
|
||||
},
|
||||
});
|
||||
|
||||
const [addingMember, setAddingMember] = useState(false);
|
||||
const [resourceSearch, setResourceSearch] = useState("");
|
||||
const [pendingEdits, setPendingEdits] = useState<
|
||||
Record<string, { hoursPerDay?: number; startDate?: string; endDate?: string; includeSaturday?: boolean; role?: string }>
|
||||
>({});
|
||||
const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
|
||||
|
||||
const { data: allResources } = trpc.resource.list.useQuery(
|
||||
{ search: resourceSearch },
|
||||
{ enabled: addingMember, staleTime: 10_000 },
|
||||
);
|
||||
|
||||
if (isLoading || !ctx) {
|
||||
return (
|
||||
<PanelShell onClose={onClose}>
|
||||
<div className="flex items-center justify-center h-64 text-gray-400 text-sm">Loading…</div>
|
||||
</PanelShell>
|
||||
);
|
||||
}
|
||||
|
||||
const { project, assignments = [], demands = [] } = ctx as unknown as ProjectPanelContext;
|
||||
const staffingReqs = (project.staffingReqs as unknown as StaffingRequirement[]) ?? [];
|
||||
const effectiveAssignments = assignments as unknown as ProjectPanelAssignment[];
|
||||
const projectDemands = demands as unknown as ProjectPanelDemand[];
|
||||
const effectiveDemands: DemandSummary[] = projectDemands.length > 0
|
||||
? projectDemands.map((demand) => ({
|
||||
id: demand.id,
|
||||
role: demand.roleEntity?.name ?? demand.role ?? "Unassigned",
|
||||
hoursPerDay: demand.hoursPerDay,
|
||||
requestedHeadcount: demand.requestedHeadcount,
|
||||
}))
|
||||
: staffingReqs.map((req, index) => ({
|
||||
id: `staffing-${index}`,
|
||||
role: req.role,
|
||||
hoursPerDay: req.hoursPerDay,
|
||||
requestedHeadcount: req.headcount,
|
||||
}));
|
||||
|
||||
// Demand vs supply matching
|
||||
const reqMatches = effectiveDemands.map((demand) => {
|
||||
const demandRole = normalizeRole(demand.role);
|
||||
const matched = effectiveAssignments.filter((assignment) =>
|
||||
normalizeRole(assignment.role).includes(demandRole),
|
||||
);
|
||||
const totalHeadcount = matched.length;
|
||||
const fulfilled = totalHeadcount >= demand.requestedHeadcount;
|
||||
const partial = !fulfilled && totalHeadcount > 0;
|
||||
return { demand, matched, fulfilled, partial };
|
||||
});
|
||||
|
||||
const unmatchedAssignments = effectiveAssignments.filter(
|
||||
(assignment) =>
|
||||
!effectiveDemands.some((demand) =>
|
||||
normalizeRole(assignment.role).includes(normalizeRole(demand.role)),
|
||||
),
|
||||
);
|
||||
|
||||
// Budget bar
|
||||
const budgetEUR = (project.budgetCents / 100).toFixed(0);
|
||||
const allocatedEUR = budgetStatus ? (budgetStatus.allocatedCents / 100).toFixed(0) : "—";
|
||||
const utilPct = budgetStatus?.utilizationPercent ?? 0;
|
||||
const budgetBarColor =
|
||||
utilPct >= 100 ? STATUS_COLORS.red : utilPct >= 85 ? STATUS_COLORS.amber : STATUS_COLORS.green;
|
||||
|
||||
function getEdit(id: string) {
|
||||
return pendingEdits[id] ?? {};
|
||||
}
|
||||
|
||||
function setEdit(id: string, patch: typeof pendingEdits[string]) {
|
||||
setPendingEdits((prev) => ({ ...prev, [id]: { ...(prev[id] ?? {}), ...patch } }));
|
||||
}
|
||||
|
||||
function saveEdit(allocId: string) {
|
||||
const edit = getEdit(allocId);
|
||||
const alloc = effectiveAssignments.find((a) => a.id === allocId);
|
||||
if (!alloc) return;
|
||||
updateMutation.mutate({
|
||||
allocationId: getPlanningEntryMutationId(alloc),
|
||||
hoursPerDay: edit.hoursPerDay,
|
||||
startDate: edit.startDate ? new Date(edit.startDate) : undefined,
|
||||
endDate: edit.endDate ? new Date(edit.endDate) : undefined,
|
||||
includeSaturday: edit.includeSaturday,
|
||||
role: edit.role,
|
||||
});
|
||||
setPendingEdits((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[allocId];
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function handleAddMember(resourceId: string) {
|
||||
createAssignmentMutation.mutate({
|
||||
resourceId,
|
||||
projectId,
|
||||
startDate: new Date(project.startDate),
|
||||
endDate: new Date(project.endDate),
|
||||
hoursPerDay: 8,
|
||||
percentage: 100,
|
||||
role: "Team Member",
|
||||
status: AllocationStatus.PROPOSED,
|
||||
metadata: {},
|
||||
});
|
||||
}
|
||||
|
||||
const availableResources = (allResources?.resources ?? []) as unknown as ProjectPanelResource[];
|
||||
const filteredResources = availableResources.filter(
|
||||
(r) => !effectiveAssignments.some((a) => a.resourceId === r.id),
|
||||
);
|
||||
|
||||
return (
|
||||
<PanelShell onClose={onClose}>
|
||||
{/* Header */}
|
||||
<div className="px-5 py-4 border-b border-gray-100">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-gray-900">{project.name}</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<span className={clsx(
|
||||
"px-2 py-0.5 rounded-full text-xs font-medium",
|
||||
project.orderType === "CHARGEABLE" ? "bg-emerald-100 text-emerald-700" :
|
||||
project.orderType === "BD" ? "bg-violet-100 text-violet-700" :
|
||||
project.orderType === "INTERNAL" ? "bg-blue-100 text-blue-700" :
|
||||
"bg-gray-100 text-gray-600",
|
||||
)}>
|
||||
{project.orderType}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">{project.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-1">
|
||||
{toDateInput(project.startDate)} → {toDateInput(project.endDate)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto flex-1 px-5 py-4 space-y-6">
|
||||
|
||||
{/* Budget section */}
|
||||
<section>
|
||||
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Budget</h3>
|
||||
<div className="bg-gray-50 rounded-xl p-3 space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600">Allocated</span>
|
||||
<span className="font-semibold text-gray-900">€{allocatedEUR} / €{budgetEUR}</span>
|
||||
</div>
|
||||
<div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={clsx("h-full rounded-full transition-all", budgetBarColor)}
|
||||
style={{ width: `${Math.min(utilPct, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-400">
|
||||
<span>{utilPct.toFixed(1)}% utilized</span>
|
||||
{budgetStatus && (
|
||||
<span>€{(budgetStatus.remainingCents / 100).toFixed(0)} remaining</span>
|
||||
)}
|
||||
</div>
|
||||
{budgetStatus?.warnings.map((w, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={clsx(
|
||||
"text-xs px-2 py-1 rounded-lg",
|
||||
w.level === "critical" ? "bg-red-50 text-red-700" :
|
||||
w.level === "warning" ? "bg-amber-50 text-amber-700" :
|
||||
"bg-blue-50 text-blue-700",
|
||||
)}
|
||||
>
|
||||
{w.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Demand vs Supply */}
|
||||
{effectiveDemands.length > 0 && (
|
||||
<section>
|
||||
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
|
||||
Demand vs Supply
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{reqMatches.map(({ demand, matched, fulfilled, partial }) => (
|
||||
<div key={demand.id} className="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div className={clsx(
|
||||
"flex items-center justify-between px-3 py-2",
|
||||
fulfilled ? "bg-green-50" : partial ? "bg-amber-50" : "bg-red-50",
|
||||
)}>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-800">{demand.role}</span>
|
||||
<span className="ml-2 text-xs text-gray-500">{demand.requestedHeadcount} needed · {demand.hoursPerDay}h/day</span>
|
||||
</div>
|
||||
<span className={clsx(
|
||||
"text-xs font-semibold",
|
||||
fulfilled ? "text-green-600" : partial ? "text-amber-600" : "text-red-600",
|
||||
)}>
|
||||
{fulfilled ? "✓ Filled" : partial ? `${matched.length}/${demand.requestedHeadcount}` : "Unfilled"}
|
||||
</span>
|
||||
</div>
|
||||
{matched.length > 0 && (
|
||||
<div className="px-3 py-1.5 bg-white border-t border-gray-100 space-y-0.5">
|
||||
{matched.map((a) => (
|
||||
<div key={a.id} className="flex items-center justify-between text-xs text-gray-600">
|
||||
<span>{a.resource?.displayName}</span>
|
||||
<span className="text-gray-400">{a.hoursPerDay}h/day</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{unmatchedAssignments.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<div className="text-xs text-gray-400 mb-1">Unmatched assignments</div>
|
||||
{unmatchedAssignments.map((a) => (
|
||||
<div key={a.id} className="text-xs text-gray-500 flex justify-between">
|
||||
<span>{a.resource?.displayName} — {a.role}</span>
|
||||
<span>{a.hoursPerDay}h/day</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Team */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Team</h3>
|
||||
<button
|
||||
onClick={() => setAddingMember(true)}
|
||||
className="text-xs text-brand-600 hover:text-brand-800 font-medium"
|
||||
>
|
||||
+ Add Member
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Resource search for adding */}
|
||||
{addingMember && (
|
||||
<div className="mb-3 border border-gray-200 rounded-xl p-3 bg-gray-50 space-y-2">
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
placeholder="Search by name or EID…"
|
||||
value={resourceSearch}
|
||||
onChange={(e) => setResourceSearch(e.target.value)}
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
{filteredResources.slice(0, 8).map((r) => (
|
||||
<button
|
||||
key={r.id}
|
||||
onClick={() => handleAddMember(r.id)}
|
||||
disabled={createAssignmentMutation.isPending}
|
||||
className="w-full text-left px-3 py-2 rounded-lg hover:bg-white text-sm text-gray-800 border border-transparent hover:border-gray-200 transition-colors"
|
||||
>
|
||||
<span className="font-medium">{r.displayName}</span>
|
||||
<span className="text-gray-400 ml-2 text-xs">{r.eid}</span>
|
||||
{r.chapter && <span className="text-gray-300 ml-1 text-xs">· {r.chapter}</span>}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => { setAddingMember(false); setResourceSearch(""); }}
|
||||
className="text-xs text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
{effectiveAssignments.map((alloc) => {
|
||||
const edit = getEdit(alloc.id);
|
||||
const isDirty = Object.keys(edit).length > 0;
|
||||
const meta = alloc.metadata as { includeSaturday?: boolean } | null;
|
||||
const inclSat = edit.includeSaturday ?? meta?.includeSaturday ?? false;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={alloc.id}
|
||||
className="border border-gray-100 rounded-xl p-3 space-y-2 bg-white"
|
||||
>
|
||||
{/* Resource name + delete */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-800">{alloc.resource?.displayName}</span>
|
||||
<span className="text-xs text-gray-400 ml-1.5">{alloc.resource?.eid}</span>
|
||||
</div>
|
||||
{confirmDelete === alloc.id ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-red-600">Remove?</span>
|
||||
<button
|
||||
onClick={() => { deleteMutation.mutate({ id: getPlanningEntryMutationId(alloc) }); setConfirmDelete(null); }}
|
||||
className="text-xs text-red-600 font-medium hover:text-red-800"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConfirmDelete(null)}
|
||||
className="text-xs text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setConfirmDelete(alloc.id)}
|
||||
className="text-xs text-red-400 hover:text-red-600"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Role */}
|
||||
<input
|
||||
type="text"
|
||||
value={edit.role ?? alloc.role ?? ""}
|
||||
onChange={(e) => setEdit(alloc.id, { role: e.target.value })}
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
placeholder="Role"
|
||||
/>
|
||||
|
||||
{/* Dates + hours */}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-400 mb-0.5">Start</label>
|
||||
<DateInput
|
||||
value={edit.startDate ?? toDateInput(alloc.startDate)}
|
||||
onChange={(v) => setEdit(alloc.id, { startDate: v })}
|
||||
className="w-full border border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-400 mb-0.5">End</label>
|
||||
<DateInput
|
||||
value={edit.endDate ?? toDateInput(alloc.endDate)}
|
||||
onChange={(v) => setEdit(alloc.id, { endDate: v })}
|
||||
className="w-full border border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-400 mb-0.5">h/day</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0.5}
|
||||
max={24}
|
||||
step={0.5}
|
||||
value={edit.hoursPerDay ?? alloc.hoursPerDay}
|
||||
onChange={(e) => setEdit(alloc.id, { hoursPerDay: parseFloat(e.target.value) })}
|
||||
className="w-full border border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Saturday toggle */}
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={inclSat}
|
||||
onChange={(e) => setEdit(alloc.id, { includeSaturday: e.target.checked })}
|
||||
className="rounded border-gray-300 text-brand-600 focus:ring-brand-400"
|
||||
/>
|
||||
<span className="text-xs text-gray-600">Include Saturdays</span>
|
||||
</label>
|
||||
|
||||
{/* Save button */}
|
||||
{isDirty && (
|
||||
<button
|
||||
onClick={() => saveEdit(alloc.id)}
|
||||
disabled={updateMutation.isPending}
|
||||
className="w-full py-1.5 rounded-lg text-xs font-medium bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-50"
|
||||
>
|
||||
{updateMutation.isPending ? "Saving…" : "Save changes"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{effectiveAssignments.length === 0 && (
|
||||
<div className="text-center py-8 text-sm text-gray-400">
|
||||
No team members yet. Add one above.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</PanelShell>
|
||||
);
|
||||
}
|
||||
|
||||
function PanelShell({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
|
||||
return (
|
||||
<div className="fixed inset-y-0 right-0 w-[420px] bg-white border-l border-gray-200 shadow-2xl z-40 flex flex-col">
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-gray-100">
|
||||
<span className="text-sm font-semibold text-gray-700">Project Details</span>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors text-lg leading-none"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col flex-1 min-h-0">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user