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

@@ -1,15 +1,6 @@
 "use client";
 
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
+import dynamic from "next/dynamic";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 interface BarChartData {
@@ -27,28 +18,24 @@ interface BarChartProps {
   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 flex items-end justify-around px-4 pb-8">
+      {[...Array(6)].map((_, i) => (
+        <div
+          key={i}
+          className="bg-muted-foreground/20 rounded-t"
+          style={{ width: "12%", height: `${20 + Math.random() * 60}%` }}
+        />
+      ))}
+    </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 BarChartInner = dynamic(() => import("./bar-chart-inner"), {
+  ssr: false,
+  loading: () => <ChartSkeleton />,
+});
 
 export default function ModernBarChart({
   data,
@@ -72,48 +59,12 @@ export default function ModernBarChart({
         </CardHeader>
       )}
       <CardContent>
-        <ResponsiveContainer width="100%" height={height}>
-          <BarChart
-            data={data}
-            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-          >
-            <CartesianGrid
-              strokeDasharray="3 3"
-              stroke="hsl(var(--border))"
-              strokeOpacity={0.3}
-            />
-            <XAxis
-              dataKey="name"
-              stroke="hsl(var(--muted-foreground))"
-              fontSize={12}
-              tickLine={false}
-              axisLine={false}
-              angle={-45}
-              textAnchor="end"
-              height={80}
-            />
-            <YAxis
-              stroke="hsl(var(--muted-foreground))"
-              fontSize={12}
-              tickLine={false}
-              axisLine={false}
-            />
-            <Tooltip content={<CustomTooltip />} />
-            <Bar
-              dataKey={dataKey}
-              radius={[4, 4, 0, 0]}
-              className="transition-all duration-200"
-            >
-              {data.map((entry, index) => (
-                <Cell
-                  key={`cell-${entry.name}-${index}`}
-                  fill={colors[index % colors.length]}
-                  className="hover:opacity-80"
-                />
-              ))}
-            </Bar>
-          </BarChart>
-        </ResponsiveContainer>
+        <BarChartInner
+          data={data}
+          dataKey={dataKey}
+          colors={colors}
+          height={height}
+        />
       </CardContent>
     </Card>
   );