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

app/dashboard/company/page.tsx

@@ -1,20 +1,23 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { Database, Save, Settings, ShieldX } from "lucide-react";
 import { useSession } from "next-auth/react";
-import { Company } from "../../../lib/types";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useEffect, useId, useState } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { ShieldX, Settings, Save, Database } from "lucide-react";
+import type { Company } from "../../../lib/types";
 
 export default function CompanySettingsPage() {
+  const csvUrlId = useId();
+  const csvUsernameId = useId();
+  const csvPasswordId = useId();
   const { data: session, status } = useSession();
   // We store the full company object for future use and updates after save operations
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const [company, setCompany] = useState<Company | null>(null);
+  const [_company, setCompany] = useState<Company | null>(null);
   const [csvUrl, setCsvUrl] = useState<string>("");
   const [csvUsername, setCsvUsername] = useState<string>("");
   const [csvPassword, setCsvPassword] = useState<string>("");
@@ -156,9 +159,9 @@ export default function CompanySettingsPage() {
               </CardHeader>
               <CardContent className="space-y-4">
                 <div className="space-y-2">
-                  <Label htmlFor="csvUrl">CSV Data Source URL</Label>
+                  <Label htmlFor={csvUrlId}>CSV Data Source URL</Label>
                   <Input
-                    id="csvUrl"
+                    id={csvUrlId}
                     type="text"
                     value={csvUrl}
                     onChange={(e) => setCsvUrl(e.target.value)}
@@ -168,9 +171,9 @@ export default function CompanySettingsPage() {
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="csvUsername">CSV Username</Label>
+                  <Label htmlFor={csvUsernameId}>CSV Username</Label>
                   <Input
-                    id="csvUsername"
+                    id={csvUsernameId}
                     type="text"
                     value={csvUsername}
                     onChange={(e) => setCsvUsername(e.target.value)}
@@ -180,9 +183,9 @@ export default function CompanySettingsPage() {
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="csvPassword">CSV Password</Label>
+                  <Label htmlFor={csvPasswordId}>CSV Password</Label>
                   <Input
-                    id="csvPassword"
+                    id={csvPasswordId}
                     type="password"
                     value={csvPassword}
                     onChange={(e) => setCsvPassword(e.target.value)}

app/dashboard/layout.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { ReactNode, useState, useEffect, useCallback } from "react";
-import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { type ReactNode, useCallback, useEffect, useId, useState } from "react";
 import Sidebar from "../../components/Sidebar";
 
 export default function DashboardLayout({ children }: { children: ReactNode }) {
+  const mainContentId = useId();
   const { status } = useSession();
   const router = useRouter();
 
@@ -66,7 +67,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
       />
 
       <main
-        id="main-content"
+        id={mainContentId}
         className={`flex-1 overflow-auto transition-all duration-300 py-4 pr-4
           ${
             isSidebarExpanded

app/dashboard/overview/page.tsx

@@ -1,42 +1,42 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { signOut, useSession } from "next-auth/react";
+import {
+  CheckCircle,
+  Clock,
+  Euro,
+  Globe,
+  LogOut,
+  MessageCircle,
+  MessageSquare,
+  MoreVertical,
+  RefreshCw,
+  TrendingUp,
+  Users,
+  Zap,
+} from "lucide-react";
 import { useRouter } from "next/navigation";
-import { Company, MetricsResult, WordCloudWord } from "../../../lib/types";
-import { formatEnumValue } from "@/lib/format-enums";
-import MetricCard from "../../../components/ui/metric-card";
-import ModernLineChart from "../../../components/charts/line-chart";
-import ModernBarChart from "../../../components/charts/bar-chart";
-import ModernDonutChart from "../../../components/charts/donut-chart";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
+import { signOut, useSession } from "next-auth/react";
+import { useCallback, useEffect, useId, useState } from "react";
 import { Badge } from "@/components/ui/badge";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import {
-  MessageSquare,
-  Users,
-  Clock,
-  Zap,
-  Euro,
-  TrendingUp,
-  CheckCircle,
-  RefreshCw,
-  LogOut,
-  MoreVertical,
-  Globe,
-  MessageCircle,
-} from "lucide-react";
-import WordCloud from "../../../components/WordCloud";
+import { Skeleton } from "@/components/ui/skeleton";
+import { formatEnumValue } from "@/lib/format-enums";
+import ModernBarChart from "../../../components/charts/bar-chart";
+import ModernDonutChart from "../../../components/charts/donut-chart";
+import ModernLineChart from "../../../components/charts/line-chart";
 import GeographicMap from "../../../components/GeographicMap";
 import ResponseTimeDistribution from "../../../components/ResponseTimeDistribution";
 import TopQuestionsChart from "../../../components/TopQuestionsChart";
+import MetricCard from "../../../components/ui/metric-card";
+import WordCloud from "../../../components/WordCloud";
+import type { Company, MetricsResult, WordCloudWord } from "../../../lib/types";
 
 // Safely wrapped component with useSession
 function DashboardContent() {
@@ -48,10 +48,11 @@ function DashboardContent() {
   const [refreshing, setRefreshing] = useState<boolean>(false);
   const [isInitialLoad, setIsInitialLoad] = useState<boolean>(true);
 
+  const refreshStatusId = useId();
   const isAuditor = session?.user?.role === "AUDITOR";
 
   // Function to fetch metrics with optional date range
-  const fetchMetrics = async (
+  const fetchMetrics = useCallback(async (
     startDate?: string,
     endDate?: string,
     isInitial = false
@@ -78,7 +79,7 @@ function DashboardContent() {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     // Redirect if not authenticated
@@ -91,7 +92,7 @@ function DashboardContent() {
     if (status === "authenticated" && isInitialLoad) {
       fetchMetrics(undefined, undefined, true);
     }
-  }, [status, router, isInitialLoad]);
+  }, [status, router, isInitialLoad, fetchMetrics]);
 
   async function handleRefresh() {
     if (isAuditor) return;
@@ -243,7 +244,7 @@ function DashboardContent() {
       return {
         name:
           formattedName.length > 15
-            ? formattedName.substring(0, 15) + "..."
+            ? `${formattedName.substring(0, 15)}...`
             : formattedName,
         value: value as number,
       };
@@ -323,7 +324,7 @@ function DashboardContent() {
                     ? "Refreshing dashboard data"
                     : "Refresh dashboard data"
                 }
-                aria-describedby={refreshing ? "refresh-status" : undefined}
+                aria-describedby={refreshing ? refreshStatusId : undefined}
               >
                 <RefreshCw
                   className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`}
@@ -332,7 +333,7 @@ function DashboardContent() {
                 {refreshing ? "Refreshing..." : "Refresh"}
               </Button>
               {refreshing && (
-                <div id="refresh-status" className="sr-only" aria-live="polite">
+                <div id={refreshStatusId} className="sr-only" aria-live="polite">
                   Dashboard data is being refreshed
                 </div>
               )}

app/dashboard/page.tsx

@@ -1,22 +1,21 @@
 "use client";
 
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { FC } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import {
+  ArrowRight,
   BarChart3,
   MessageSquare,
   Settings,
-  Users,
-  ArrowRight,
-  TrendingUp,
   Shield,
+  TrendingUp,
+  Users,
   Zap,
 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { type FC, useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 const DashboardPage: FC = () => {
   const { data: session, status } = useSession();
@@ -158,9 +157,9 @@ const DashboardPage: FC = () => {
 
       {/* Navigation Cards */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {navigationCards.map((card, index) => (
+        {navigationCards.map((card) => (
           <Card
-            key={index}
+            key={card.href}
             className={`relative overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 cursor-pointer group ${getCardClasses(
               card.variant
             )}`}
@@ -203,9 +202,9 @@ const DashboardPage: FC = () => {
             <CardContent className="relative space-y-4">
               {/* Features List */}
               <div className="space-y-2">
-                {card.features.map((feature, featureIndex) => (
+                {card.features.map((feature) => (
                   <div
-                    key={featureIndex}
+                    key={feature}
                     className="flex items-center gap-2 text-sm"
                   >
                     <Zap className="h-3 w-3 text-primary/60" />

app/dashboard/sessions/[id]/page.tsx

@@ -1,27 +1,27 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import {
+  Activity,
+  AlertCircle,
+  ArrowLeft,
+  Clock,
+  ExternalLink,
+  FileText,
+  Globe,
+  MessageSquare,
+  User,
+} from "lucide-react";
+import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
-import SessionDetails from "../../../../components/SessionDetails";
-import MessageViewer from "../../../../components/MessageViewer";
-import { ChatSession } from "../../../../lib/types";
-import { formatCategory } from "@/lib/format-enums";
-import Link from "next/link";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
-import {
-  ArrowLeft,
-  MessageSquare,
-  Clock,
-  Globe,
-  ExternalLink,
-  User,
-  AlertCircle,
-  FileText,
-  Activity,
-} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatCategory } from "@/lib/format-enums";
+import MessageViewer from "../../../../components/MessageViewer";
+import SessionDetails from "../../../../components/SessionDetails";
+import type { ChatSession } from "../../../../lib/types";
 
 export default function SessionViewPage() {
   const params = useParams();

app/dashboard/sessions/page.tsx

@@ -1,26 +1,26 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
-import { ChatSession } from "../../../lib/types";
-import Link from "next/link";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
-import { formatCategory } from "@/lib/format-enums";
 import {
-  MessageSquare,
-  Search,
-  Filter,
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
-  Clock,
-  Globe,
-  Eye,
-  ChevronDown,
   ChevronUp,
+  Clock,
+  Eye,
+  Filter,
+  Globe,
+  MessageSquare,
+  Search,
 } from "lucide-react";
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { formatCategory } from "@/lib/format-enums";
+import type { ChatSession } from "../../../lib/types";
 
 // Placeholder for a SessionListItem component to be created later
 // For now, we'll display some basic info directly.
@@ -59,7 +59,7 @@ export default function SessionsPage() {
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const [pageSize, setPageSize] = useState(10); // Or make this configurable
+  const [pageSize, _setPageSize] = useState(10); // Or make this configurable
 
   // UI states
   const [filtersExpanded, setFiltersExpanded] = useState(false);
@@ -404,7 +404,7 @@ export default function SessionsPage() {
 
         {/* Sessions List */}
         {!loading && !error && sessions.length > 0 && (
-          <ul role="list" aria-label="Chat sessions" className="grid gap-4">
+          <ul aria-label="Chat sessions" className="grid gap-4">
             {sessions.map((session) => (
               <li key={session.id}>
                 <Card className="hover:shadow-md transition-shadow">

app/dashboard/settings.tsx

@@ -1,7 +1,7 @@
 "use client";
+import type { Session } from "next-auth";
 import { useState } from "react";
-import { Company } from "../../lib/types";
-import { Session } from "next-auth";
+import type { Company } from "../../lib/types";
 
 interface DashboardSettingsProps {
   company: Company;

app/dashboard/users.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { useState, useEffect } from "react";
-import { UserSession } from "../../lib/types";
+import { useEffect, useState } from "react";
+import type { UserSession } from "../../lib/types";
 
 interface UserItem {
   id: string;
@@ -56,6 +56,7 @@ export default function UserManagement({ session }: UserManagementProps) {
           <option value="AUDITOR">Auditor</option>
         </select>
         <button
+          type="button"
           className="bg-blue-600 text-white rounded px-4 py-2 sm:py-0 w-full sm:w-auto"
           onClick={inviteUser}
         >

app/dashboard/users/page.tsx

@@ -1,13 +1,21 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { AlertCircle, Eye, Shield, UserPlus, Users } from "lucide-react";
 import { useSession } from "next-auth/react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useCallback, useEffect, useId, useState } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
-import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   Table,
   TableBody,
@@ -16,14 +24,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Users, UserPlus, Shield, Eye, AlertCircle } from "lucide-react";
 
 interface UserItem {
   id: string;
@@ -38,20 +38,9 @@ export default function UserManagementPage() {
   const [role, setRole] = useState<string>("USER");
   const [message, setMessage] = useState<string>("");
   const [loading, setLoading] = useState(true);
+  const emailId = useId();
 
-  useEffect(() => {
-    if (status === "authenticated") {
-      if (session?.user?.role === "ADMIN") {
-        fetchUsers();
-      } else {
-        setLoading(false); // Stop loading for non-admin users
-      }
-    } else if (status === "unauthenticated") {
-      setLoading(false);
-    }
-  }, [status, session?.user?.role]);
-
-  const fetchUsers = async () => {
+  const fetchUsers = useCallback(async () => {
     setLoading(true);
     try {
       const res = await fetch("/api/dashboard/users");
@@ -63,7 +52,19 @@ export default function UserManagementPage() {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    if (status === "authenticated") {
+      if (session?.user?.role === "ADMIN") {
+        fetchUsers();
+      } else {
+        setLoading(false); // Stop loading for non-admin users
+      }
+    } else if (status === "unauthenticated") {
+      setLoading(false);
+    }
+  }, [status, session?.user?.role, fetchUsers]);
 
   async function inviteUser() {
     setMessage("");
@@ -163,12 +164,11 @@ export default function UserManagementPage() {
             }}
             autoComplete="off"
             data-testid="invite-form"
-            role="form"
           >
             <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
+              <Label htmlFor={emailId}>Email</Label>
               <Input
-                id="email"
+                id={emailId}
                 type="email"
                 placeholder="user@example.com"
                 value={email}