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/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}