perf: lazy-load xlsx/recharts, split estimate tabs, memoize nav

- xlsx dynamically imported via cached singleton in excel.ts and
  skillMatrixParser.ts (removes ~100 kB from 4 routes)
- recharts extracted into lazy-loaded SkillDistributionChart and
  PeakTimesChart components (removes ~60 kB from 3 routes)
- EstimateWorkspaceClient: 7 tab components + 2 editors loaded via
  next/dynamic (reduces /estimates/[id] from 323 kB to 138 kB)
- ImportModal lazy-loaded in ResourcesClient (deferred until open)
- NavItem memoized with React.memo, top 5 routes get prefetch=true
- Raw <img> replaced with next/image in ProjectsClient, CoverArtSection
- tRPC QueryClient: refetchOnWindowFocus/Reconnect disabled globally

Heaviest routes reduced 39-66% First Load JS:
  /analytics/skills: 383→132 kB (-66%)
  /estimates/[id]:   323→138 kB (-57%)
  /resources/[id]:   458→210 kB (-54%)
  /estimates:        310→170 kB (-45%)
  /resources:        363→222 kB (-39%)

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

apps/web/src/components/dashboard/widgets/PeakTimesChart.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ReferenceLine,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+
+const COLORS = [
+  "#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6",
+  "#06b6d4", "#84cc16", "#f97316", "#ec4899", "#14b8a6",
+];
+
+interface PeakTimesChartProps {
+  chartData: Record<string, number | string>[];
+  groups: string[];
+}
+
+export default function PeakTimesChart({ chartData, groups }: PeakTimesChartProps) {
+  if (chartData.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-gray-400">
+        No allocation data in selected period.
+      </div>
+    );
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <BarChart data={chartData} margin={{ top: 4, right: 8, left: -10, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
+        <XAxis dataKey="period" tick={{ fontSize: 10 }} />
+        <YAxis tick={{ fontSize: 10 }} />
+        <Tooltip contentStyle={{ fontSize: 11 }} />
+        <Legend wrapperStyle={{ fontSize: 11 }} />
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <ReferenceLine
+          {...({ dataKey: "capacity" } as any)}
+          stroke="#ef4444"
+          strokeDasharray="5 5"
+          label={{ value: "Capacity", fontSize: 10, fill: "#ef4444" }}
+        />
+        {groups.map((g, i) => (
+          <Bar key={g} dataKey={g} stackId="a" fill={COLORS[i % COLORS.length]} />
+        ))}
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}

apps/web/src/components/dashboard/widgets/PeakTimesWidget.tsx

@@ -1,24 +1,14 @@
 "use client";
 
+import dynamic from "next/dynamic";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ReferenceLine,
-  ResponsiveContainer,
-  Legend,
-} from "recharts";
 
-const COLORS = [
-  "#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6",
-  "#06b6d4", "#84cc16", "#f97316", "#ec4899", "#14b8a6",
-];
+const PeakTimesChart = dynamic(
+  () => import("~/components/dashboard/widgets/PeakTimesChart.js"),
+  { ssr: false, loading: () => <div className="flex-1 shimmer-skeleton rounded-xl" /> },
+);
 
 export function PeakTimesWidget({ config, onConfigChange }: WidgetProps) {
   const granularity = (config.granularity as "week" | "month") || "month";
@@ -107,31 +97,7 @@ export function PeakTimesWidget({ config, onConfigChange }: WidgetProps) {
 
       {/* Chart */}
       <div className="flex-1 min-h-0">
-        {chartData.length === 0 ? (
-          <div className="flex items-center justify-center h-full text-sm text-gray-400">
-            No allocation data in selected period.
-          </div>
-        ) : (
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={chartData} margin={{ top: 4, right: 8, left: -10, bottom: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
-              <XAxis dataKey="period" tick={{ fontSize: 10 }} />
-              <YAxis tick={{ fontSize: 10 }} />
-              <Tooltip contentStyle={{ fontSize: 11 }} />
-              <Legend wrapperStyle={{ fontSize: 11 }} />
-              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-              <ReferenceLine
-                {...({ dataKey: "capacity" } as any)}
-                stroke="#ef4444"
-                strokeDasharray="5 5"
-                label={{ value: "Capacity", fontSize: 10, fill: "#ef4444" }}
-              />
-              {groups.map((g, i) => (
-                <Bar key={g} dataKey={g} stackId="a" fill={COLORS[i % COLORS.length]} />
-              ))}
-            </BarChart>
-          </ResponsiveContainer>
-        )}
+        <PeakTimesChart chartData={chartData} groups={groups} />
       </div>
     </div>
   );