feat: Sprint 2 — data storytelling and visual richness

Timeline project color system:
- 16-color deterministic palette (same project = same color always)
- Resource panel: allocation blocks colored by project instead of uniform green
- Project panel: colored left border + dot on project headers
- ProjectColorLegend: floating strip showing color-to-project mapping
- Utilization intensity tint: subtle background gradient on resource rows

Table visual enhancements:
- Resources: inline 3px utilization bar below chargeability percentage
- Resources: 32px avatar circles with initials + role-derived colors
- Projects: animated budget bars, styled resource count badges
- Allocations: 3px left border colored by status (green/amber/blue/gray/red)

KPI progress rings:
- Budget utilization: ProgressRing wrapping AnimatedNumber on dashboard
- Chargeability report: ring on average chargeability summary card
- Resource detail: rings on chargeability target + actual metrics
- Vacation balance: ring showing remaining days with color thresholds
- Demand widget: mini rings on FTE fill rate per project
- Resource detail: FadeIn on SkillRadarChart

Co-Authored-By: claude-flow <ruv@ruv.net>

apps/web/src/components/allocations/AllocationsClient.tsx

@@ -22,6 +22,15 @@ import { useViewPrefs } from "~/hooks/useViewPrefs.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
 
+/** Left-border color by allocation status for instant visual scanning */
+const STATUS_LEFT_BORDER: Record<string, string> = {
+  ACTIVE: "border-l-green-500",
+  PROPOSED: "border-l-amber-500",
+  CONFIRMED: "border-l-blue-500",
+  COMPLETED: "border-l-gray-400",
+  CANCELLED: "border-l-red-500",
+};
+
 /** Fragment wrapper for grouped rows — avoids unnecessary DOM nodes */
 function GroupRows({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
@@ -363,8 +372,9 @@ export function AllocationsClient() {
 
   function renderAllocRow(alloc: AllocationWithDetails, isGrouped = false, rowIndex = 0) {
     const isSelected = selection.selectedIds.has(alloc.id);
+    const leftBorder = STATUS_LEFT_BORDER[alloc.status] ?? "border-l-gray-300";
     return (
-      <tr key={alloc.id} className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`} style={{ animationDelay: `${Math.min(rowIndex * 15, 300)}ms` }}>
+      <tr key={alloc.id} className={`border-l-[3px] transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${leftBorder} ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`} style={{ animationDelay: `${Math.min(rowIndex * 15, 300)}ms` }}>
         <td className="px-4 py-3">
           <input
             type="checkbox"