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("_", " ")}