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/line-chart.tsx

@@ -1,17 +1,6 @@
 "use client";
 
-import { useId } from "react";
-import {
-  Area,
-  AreaChart,
-  CartesianGrid,
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
+import dynamic from "next/dynamic";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 interface LineChartData {
@@ -30,28 +19,26 @@ interface LineChartProps {
   className?: string;
 }
 
-interface TooltipProps {
-  active?: boolean;
-  payload?: Array<{ value: number; name?: string }>;
-  label?: string;
-}
+const ChartSkeleton = ({ height = 300 }: { height?: number }) => (
+  <div className="animate-pulse" style={{ height }}>
+    <div className="h-full w-full bg-muted rounded-md relative overflow-hidden">
+      <svg className="w-full h-full" preserveAspectRatio="none">
+        <path
+          d="M0,150 Q50,100 100,120 T200,80 T300,100 T400,60 T500,90"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          className="text-muted-foreground/20"
+        />
+      </svg>
+    </div>
+  </div>
+);
 
-const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
-  if (active && payload && payload.length) {
-    return (
-      <div className="rounded-lg border bg-background p-3 shadow-md">
-        <p className="text-sm font-medium">{label}</p>
-        <p className="text-sm text-muted-foreground">
-          <span className="font-medium text-foreground">
-            {payload[0].value}
-          </span>{" "}
-          sessions
-        </p>
-      </div>
-    );
-  }
-  return null;
-};
+const LineChartInner = dynamic(() => import("./line-chart-inner"), {
+  ssr: false,
+  loading: () => <ChartSkeleton />,
+});
 
 export default function ModernLineChart({
   data,
@@ -62,9 +49,6 @@ export default function ModernLineChart({
   height = 300,
   className,
 }: LineChartProps) {
-  const gradientId = useId();
-  const ChartComponent = gradient ? AreaChart : LineChart;
-
   return (
     <Card className={className}>
       {title && (
@@ -73,61 +57,13 @@ export default function ModernLineChart({
         </CardHeader>
       )}
       <CardContent>
-        <ResponsiveContainer width="100%" height={height}>
-          <ChartComponent
-            data={data}
-            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-          >
-            <defs>
-              {gradient && (
-                <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor={color} stopOpacity={0.3} />
-                  <stop offset="95%" stopColor={color} stopOpacity={0.05} />
-                </linearGradient>
-              )}
-            </defs>
-            <CartesianGrid
-              strokeDasharray="3 3"
-              stroke="hsl(var(--border))"
-              strokeOpacity={0.3}
-            />
-            <XAxis
-              dataKey="date"
-              stroke="hsl(var(--muted-foreground))"
-              fontSize={12}
-              tickLine={false}
-              axisLine={false}
-            />
-            <YAxis
-              stroke="hsl(var(--muted-foreground))"
-              fontSize={12}
-              tickLine={false}
-              axisLine={false}
-            />
-            <Tooltip content={<CustomTooltip />} />
-
-            {gradient ? (
-              <Area
-                type="monotone"
-                dataKey={dataKey}
-                stroke={color}
-                strokeWidth={2}
-                fill={`url(#${gradientId})`}
-                dot={{ fill: color, strokeWidth: 2, r: 4 }}
-                activeDot={{ r: 6, stroke: color, strokeWidth: 2 }}
-              />
-            ) : (
-              <Line
-                type="monotone"
-                dataKey={dataKey}
-                stroke={color}
-                strokeWidth={2}
-                dot={{ fill: color, strokeWidth: 2, r: 4 }}
-                activeDot={{ r: 6, stroke: color, strokeWidth: 2 }}
-              />
-            )}
-          </ChartComponent>
-        </ResponsiveContainer>
+        <LineChartInner
+          data={data}
+          dataKey={dataKey}
+          color={color}
+          gradient={gradient}
+          height={height}
+        />
       </CardContent>
     </Card>
   );