fix: comprehensive TypeScript/build fixes and modernization

- Update tsconfig to ES2024 target and bundler moduleResolution
- Add dynamic imports for chart.js and recharts (bundle optimization)
- Consolidate 17 useState into useReducer in sessions page
- Fix 18 .js extension imports across lib files
- Add type declarations for @rapideditor/country-coder
- Fix platform user types (PlatformUserRole enum)
- Fix Calendar component prop types
- Centralize next-auth type augmentation
- Add force-dynamic to all API routes (prevent build-time prerender)
- Fix Prisma JSON null handling with Prisma.DbNull
- Fix various type mismatches (SessionMessage, ImportRecord, etc.)
- Export ButtonProps from button component
- Update next-themes import path
- Replace JSX.Element with React.ReactElement
- Remove obsolete debug scripts and pnpm lockfile
- Downgrade eslint to v8 for next compatibility

components/charts/donut-chart-inner.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import {
+  Cell,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+} from "recharts";
+
+interface DonutChartInnerProps {
+  data: Array<{ name: string; value: number; color?: string }>;
+  title?: string;
+  centerText?: {
+    title: string;
+    value: string | number;
+  };
+  colors: string[];
+  height: number;
+}
+
+interface TooltipProps {
+  active?: boolean;
+  payload?: Array<{
+    name: string;
+    value: number;
+    payload: { total: number };
+  }>;
+}
+
+const CustomTooltip = ({ active, payload }: TooltipProps) => {
+  if (active && payload && payload.length) {
+    const data = payload[0];
+    return (
+      <div className="rounded-lg border bg-background p-3 shadow-md">
+        <p className="text-sm font-medium">{data.name}</p>
+        <p className="text-sm text-muted-foreground">
+          <span className="font-medium text-foreground">{data.value}</span>{" "}
+          sessions ({((data.value / data.payload.total) * 100).toFixed(1)}%)
+        </p>
+      </div>
+    );
+  }
+  return null;
+};
+
+interface LegendProps {
+  payload?: Array<{
+    value: string;
+    color: string;
+    type?: string;
+  }>;
+}
+
+const CustomLegend = ({ payload }: LegendProps) => {
+  return (
+    <div className="flex flex-wrap justify-center gap-4 mt-4">
+      {payload?.map((entry, index) => (
+        <div
+          key={`legend-${entry.value}-${index}`}
+          className="flex items-center gap-2"
+        >
+          <div
+            className="w-3 h-3 rounded-full"
+            style={{ backgroundColor: entry.color }}
+          />
+          <span className="text-sm text-muted-foreground">{entry.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+interface CenterLabelProps {
+  centerText?: {
+    title: string;
+    value: string | number;
+  };
+}
+
+const CenterLabel = ({ centerText }: CenterLabelProps) => {
+  if (!centerText) return null;
+
+  return (
+    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+      <div className="text-center">
+        <p className="text-2xl font-bold">{centerText.value}</p>
+        <p className="text-sm text-muted-foreground">{centerText.title}</p>
+      </div>
+    </div>
+  );
+};
+
+export default function DonutChartInner({
+  data,
+  title,
+  centerText,
+  colors,
+  height,
+}: DonutChartInnerProps) {
+  const total = data.reduce((sum, item) => sum + item.value, 0);
+  const dataWithTotal = data.map((item) => ({ ...item, total }));
+
+  return (
+    <div
+      className="relative"
+      role="img"
+      aria-label={`${title || "Chart"} - ${data.length} segments`}
+    >
+      <ResponsiveContainer width="100%" height={height}>
+        <PieChart>
+          <Pie
+            data={dataWithTotal}
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={100}
+            paddingAngle={2}
+            dataKey="value"
+            className="transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+              }
+            }}
+          >
+            {dataWithTotal.map((entry, index) => (
+              <Cell
+                key={`cell-${entry.name}-${index}`}
+                fill={entry.color || colors[index % colors.length]}
+                className="hover:opacity-80 cursor-pointer focus:opacity-80"
+                stroke="hsl(var(--background))"
+                strokeWidth={2}
+              />
+            ))}
+          </Pie>
+          <Tooltip content={<CustomTooltip />} />
+          <Legend content={<CustomLegend />} />
+        </PieChart>
+      </ResponsiveContainer>
+      <CenterLabel centerText={centerText} />
+    </div>
+  );
+}