Refactor components and enhance metrics calculations:

- Update access denied messages to use HTML entities.
- Add autoComplete attributes to forms for better user experience.
- Improve trend calculations in sessionMetrics function.
- Update MetricCard props to accept React nodes for icons.
- Integrate Next.js Image component in Sidebar for optimization.
- Adjust ESLint rules for better code quality.
- Add new properties for trends in MetricsResult interface.
- Bump version to 0.2.0 in package.json.

components/GeographicMap.tsx

@@ -44,7 +44,6 @@ const getCountryCoordinates = (): Record<string, [number, number]> => {
 
     return coordinates;
   } catch (error) {
-    // eslint-disable-next-line no-console
     console.error("Error loading country coordinates:", error);
     return coordinates;
   }
@@ -88,8 +87,6 @@ export default function GeographicMap({
         .filter(([code]) => {
           // If no coordinates found, log to help with debugging
           if (!countryCoordinates[code] && !DEFAULT_COORDINATES[code]) {
-            // eslint-disable-next-line no-console
-            console.warn(`Missing coordinates for country code: ${code}`);
             return false;
           }
           return true;
@@ -102,14 +99,12 @@ export default function GeographicMap({
         }));
 
       // Log for debugging
-      // eslint-disable-next-line no-console
       console.log(
         `Found ${data.length} countries with coordinates out of ${Object.keys(countries).length} total countries`
       );
 
       setCountryData(data);
     } catch (error) {
-      // eslint-disable-next-line no-console
       console.error("Error processing geographic data:", error);
       setCountryData([]);
     }

components/MetricCard.tsx

@@ -4,7 +4,7 @@ interface MetricCardProps {
   title: string;
   value: string | number | null | undefined;
   description?: string;
-  icon?: string;
+  icon?: React.ReactNode;
   trend?: {
     value: number;
     label?: string;

components/Sidebar.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import Image from "next/image"; // Import the Next.js Image component
 import { usePathname } from "next/navigation";
 import { signOut } from "next-auth/react";
 
@@ -190,10 +191,13 @@ export default function Sidebar() {
         <div
           className={`relative ${isExpanded ? "w-16" : "w-10"} aspect-square mb-1`}
         >
-          <img
+          <Image
             src="/favicon.svg"
             alt="LiveDash Logo"
-            className="w-full h-full transition-all duration-300"
+            fill
+            style={{ objectFit: "contain" }}
+            className="transition-all duration-300"
+            priority // Added priority prop for LCP optimization
           />
         </div>
         {isExpanded && (
@@ -213,7 +217,7 @@ export default function Sidebar() {
             <div
               className="fixed ml-6 w-auto p-2 min-w-max rounded-md shadow-md text-xs font-medium
               text-white bg-gray-800 z-50
-              invisible opacity-0 -translate-x-3 transition-all 
+              invisible opacity-0 -translate-x-3 transition-all
               group-hover:visible group-hover:opacity-100 group-hover:translate-x-0"
             >
               {isExpanded ? "Collapse sidebar" : "Expand sidebar"}
@@ -292,8 +296,8 @@ export default function Sidebar() {
           ) : (
             <div
               className="fixed ml-6 w-auto p-2 min-w-max rounded-md shadow-md text-xs font-medium
-              text-white bg-gray-800 z-50 
-              invisible opacity-0 -translate-x-3 transition-all 
+              text-white bg-gray-800 z-50
+              invisible opacity-0 -translate-x-3 transition-all
               group-hover:visible group-hover:opacity-100 group-hover:translate-x-0"
             >
               Logout