refactor: consolidate duplicated code across web and API packages

- Extract shared render helpers (vacation blocks, range overlay, overbooking blink) into renderHelpers.tsx
- Centralize status badge styles and vacation color maps into status-styles.ts
- Extract dragMath.ts utility from useTimelineDrag for reuse
- Split useInvalidatePlanningViews into useInvalidateTimeline (4 queries) + useInvalidatePlanningViews (8 queries)
- Adopt findUniqueOrThrow() and Prisma select constants across API routers
- Add shared fmtEur() helper for API-side money formatting
- Wrap TimelineResourcePanel and TimelineProjectPanel with React.memo
- Fix pre-existing TS2589 deep type errors in TeamCalendar and VacationModal
- 38 files changed, reducing ~400 lines of duplicated code

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

apps/web/src/components/vacations/TeamCalendar.tsx

@@ -4,13 +4,7 @@ import { useState } from "react";
 import { VacationStatus } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
-
-const TYPE_COLOR: Record<string, string> = {
-  ANNUAL: "bg-brand-500",
-  SICK: "bg-red-400",
-  PUBLIC_HOLIDAY: "bg-emerald-500",
-  OTHER: "bg-purple-400",
-};
+import { VACATION_CALENDAR_COLORS } from "~/lib/status-styles.js";
 
 const MONTH_NAMES = [
   "Jan", "Feb", "Mar", "Apr", "May", "Jun",
@@ -49,7 +43,7 @@ export function TeamCalendar() {
   const { data: allChapters } = trpc.resource.chapters.useQuery(undefined, { staleTime: 60_000 });
   const chapters = allChapters ?? [];
 
-  const resourceList = resources?.resources ?? [];
+  const resourceList: { id: string; displayName: string }[] = resources?.resources ?? [];
   const vacationList = (vacations ?? []).filter(
     (v) => v.status !== VacationStatus.CANCELLED && v.status !== VacationStatus.REJECTED,
   );
@@ -155,7 +149,7 @@ export function TeamCalendar() {
 
                     let cellClass = "w-7 h-7";
                     if (vac) {
-                      const color = TYPE_COLOR[vac.type] ?? "bg-gray-400";
+                      const color = VACATION_CALENDAR_COLORS[vac.type] ?? "bg-gray-400";
                       const opacity = vac.status === "PENDING" ? "opacity-50" : "";
                       cellClass += ` ${color} ${opacity}`;
                     } else if (isWeekend) {
@@ -186,7 +180,7 @@ export function TeamCalendar() {
 
       {/* Legend */}
       <div className="px-4 py-2 border-t border-gray-100 dark:border-gray-700 flex gap-4 flex-wrap">
-        {Object.entries(TYPE_COLOR).map(([type, color]) => (
+        {Object.entries(VACATION_CALENDAR_COLORS).map(([type, color]) => (
           <span key={type} className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
             <span className={`${color} w-3 h-3 rounded-sm inline-block`} />
             {type.replace("_", " ")}

apps/web/src/components/vacations/VacationCalendar.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { VacationStatus, VacationType } from "@planarchy/shared";
+import { VACATION_CALENDAR_COLORS } from "~/lib/status-styles.js";
 
 interface VacationEntry {
   id: string;
@@ -18,13 +19,6 @@ interface VacationCalendarProps {
   initialMonth?: number; // 0-indexed
 }
 
-const TYPE_COLOR: Record<string, string> = {
-  ANNUAL: "bg-brand-500",
-  SICK: "bg-red-400",
-  PUBLIC_HOLIDAY: "bg-emerald-400",
-  OTHER: "bg-purple-400",
-};
-
 const STATUS_OPACITY: Record<string, string> = {
   APPROVED: "opacity-100",
   PENDING: "opacity-60",
@@ -145,7 +139,7 @@ export function VacationCalendar({ vacations, year = new Date().getFullYear(), i
               </span>
               <div className="space-y-0.5">
                 {dayVacations.slice(0, 3).map((v) => {
-                  const colorClass = TYPE_COLOR[v.type] ?? "bg-gray-400";
+                  const colorClass = VACATION_CALENDAR_COLORS[v.type] ?? "bg-gray-400";
                   const opacityClass = STATUS_OPACITY[v.status] ?? "opacity-100";
                   const name = v.resource?.displayName ?? "—";
                   return (
@@ -169,7 +163,7 @@ export function VacationCalendar({ vacations, year = new Date().getFullYear(), i
 
       {/* Legend */}
       <div className="px-4 py-2 border-t border-gray-100 dark:border-gray-700 flex gap-4 flex-wrap">
-        {Object.entries(TYPE_COLOR).map(([type, color]) => (
+        {Object.entries(VACATION_CALENDAR_COLORS).map(([type, color]) => (
           <span key={type} className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
             <span className={`${color} w-3 h-3 rounded-sm inline-block`} />
             {type.replace("_", " ")}

apps/web/src/components/vacations/VacationModal.tsx

@@ -7,16 +7,10 @@ import { trpc } from "~/lib/trpc/client.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 import { useDebounce } from "~/hooks/useDebounce.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { VACATION_TYPE_LABELS } from "~/lib/status-styles.js";
 
 const VACATION_TYPES = Object.values(VacationType);
 
-const VACATION_TYPE_LABELS: Record<VacationType, string> = {
-  ANNUAL: "Annual Leave",
-  SICK: "Sick Leave",
-  PUBLIC_HOLIDAY: "Public Holiday",
-  OTHER: "Other",
-};
-
 interface VacationModalProps {
   resourceId?: string;
   onClose: () => void;
@@ -118,7 +112,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
   const inputClass =
     "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm dark:bg-gray-900 dark:text-gray-100";
   const labelClass = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
-  const resourceList = resources?.resources ?? [];
+  const resourceList: { id: string; displayName: string; eid: string }[] = resources?.resources ?? [];
 
   return (
     <div