feat: comprehensive Biome linting fixes and code quality improvements

Major code quality overhaul addressing 58% of all linting issues:

• Type Safety Improvements:
  - Replace all any types with proper TypeScript interfaces
  - Fix Map component shadowing (renamed to CountryMap)
  - Add comprehensive custom error classes system
  - Enhance API route type safety

• Accessibility Enhancements:
  - Add explicit button types to all interactive elements
  - Implement useId() hooks for form element accessibility
  - Add SVG title attributes for screen readers
  - Fix static element interactions with keyboard handlers

• React Best Practices:
  - Resolve exhaustive dependencies warnings with useCallback
  - Extract nested component definitions to top level
  - Fix array index keys with proper unique identifiers
  - Improve component organization and prop typing

• Code Organization:
  - Automatic import organization and type import optimization
  - Fix unused function parameters and variables
  - Enhanced error handling with structured error responses
  - Improve component reusability and maintainability

Results: 248 → 104 total issues (58% reduction)
- Fixed all critical type safety and security issues
- Enhanced accessibility compliance significantly
- Improved code maintainability and performance

components/charts/bar-chart.tsx

@@ -1,19 +1,25 @@
 "use client";
 
 import {
-  BarChart,
   Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Cell,
 } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
+interface BarChartData {
+  name: string;
+  value: number;
+  [key: string]: string | number;
+}
+
 interface BarChartProps {
-  data: Array<{ name: string; value: number; [key: string]: any }>;
+  data: BarChartData[];
   title?: string;
   dataKey?: string;
   colors?: string[];
@@ -21,7 +27,13 @@ interface BarChartProps {
   className?: string;
 }
 
-const CustomTooltip = ({ active, payload, label }: any) => {
+interface TooltipProps {
+  active?: boolean;
+  payload?: Array<{ value: number; name?: string }>;
+  label?: string;
+}
+
+const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
   if (active && payload && payload.length) {
     return (
       <div className="rounded-lg border bg-background p-3 shadow-md">
@@ -94,7 +106,7 @@ export default function ModernBarChart({
             >
               {data.map((entry, index) => (
                 <Cell
-                  key={`cell-${index}`}
+                  key={`cell-${entry.name}-${index}`}
                   fill={colors[index % colors.length]}
                   className="hover:opacity-80"
                 />

components/charts/donut-chart.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import {
-  PieChart,
-  Pie,
   Cell,
+  Legend,
+  Pie,
+  PieChart,
   ResponsiveContainer,
   Tooltip,
-  Legend,
 } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
@@ -22,7 +22,16 @@ interface DonutChartProps {
   className?: string;
 }
 
-const CustomTooltip = ({ active, payload }: any) => {
+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 (
@@ -38,11 +47,19 @@ const CustomTooltip = ({ active, payload }: any) => {
   return null;
 };
 
-const CustomLegend = ({ payload }: any) => {
+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: any, index: number) => (
-        <div key={index} className="flex items-center gap-2">
+      {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 }}
@@ -54,7 +71,15 @@ const CustomLegend = ({ payload }: any) => {
   );
 };
 
-const CenterLabel = ({ centerText, total }: any) => {
+interface CenterLabelProps {
+  centerText?: {
+    title: string;
+    value: string | number;
+  };
+  total: number;
+}
+
+const CenterLabel = ({ centerText }: CenterLabelProps) => {
   if (!centerText) return null;
 
   return (
@@ -117,7 +142,7 @@ export default function ModernDonutChart({
               >
                 {dataWithTotal.map((entry, index) => (
                   <Cell
-                    key={`cell-${index}`}
+                    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))"

components/charts/line-chart.tsx

@@ -1,20 +1,27 @@
 "use client";
 
+import { useId } from "react";
 import {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
   Area,
   AreaChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
 } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
+interface LineChartData {
+  date: string;
+  value: number;
+  [key: string]: string | number;
+}
+
 interface LineChartProps {
-  data: Array<{ date: string; value: number; [key: string]: any }>;
+  data: LineChartData[];
   title?: string;
   dataKey?: string;
   color?: string;
@@ -23,7 +30,13 @@ interface LineChartProps {
   className?: string;
 }
 
-const CustomTooltip = ({ active, payload, label }: any) => {
+interface TooltipProps {
+  active?: boolean;
+  payload?: Array<{ value: number; name?: string }>;
+  label?: string;
+}
+
+const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
   if (active && payload && payload.length) {
     return (
       <div className="rounded-lg border bg-background p-3 shadow-md">
@@ -49,6 +62,7 @@ export default function ModernLineChart({
   height = 300,
   className,
 }: LineChartProps) {
+  const gradientId = useId();
   const ChartComponent = gradient ? AreaChart : LineChart;
 
   return (
@@ -66,7 +80,7 @@ export default function ModernLineChart({
           >
             <defs>
               {gradient && (
-                <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
+                <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>
@@ -98,7 +112,7 @@ export default function ModernLineChart({
                 dataKey={dataKey}
                 stroke={color}
                 strokeWidth={2}
-                fill="url(#colorGradient)"
+                fill={`url(#${gradientId})`}
                 dot={{ fill: color, strokeWidth: 2, r: 4 }}
                 activeDot={{ r: 6, stroke: color, strokeWidth: 2 }}
               />