Refactor components to use Next.js Image for better performance and r…

…emove unused imports

frontend/src/app/about/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+import Image from "next/image";
 
 export const metadata: Metadata = {
   title:
@@ -36,10 +37,10 @@ export default function About() {
         id="right-col"
         className="flex h-full flex-col items-center justify-center rounded-2xl md:col-span-6"
       >
-        <img
+        <Image
           src="/images/logo/woman-holding-grlobe.svg"
           alt="RATTM CO2 Calculator"
-          width={634} // These just describe the resolution
+          width={634}
           height={538}
           className="w-full"
         />

frontend/src/app/components/AboutYourScore.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import dynamic from "next/dynamic";
 
 const AboutYourScore: React.FC = () => {
   return (

frontend/src/app/components/Navbar.tsx

@@ -1,5 +1,4 @@
 // src/app/components/Navbar.tsx
-
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
 import Link from "next/link";

frontend/src/app/components/TransactionMap.tsx

@@ -1,9 +1,7 @@
 "use client";
-// import jsVectorMap from "jsvectormap";
-// import "jsvectormap/dist/jsvectormap.css";
+
 import mapboxgl from "mapbox-gl";
 import React, { useEffect, useRef } from "react";
-// import "../../js/us-aea-en";
 
 mapboxgl.accessToken =
   "pk.eyJ1IjoiZ2FicmllbGV6cmF0aG9tcHNvbiIsImEiOiJjbTJ6OWpwcTQwOTh2MmxvZ3BpaW5wajhkIn0.BFA_fvxSDOBkZkAdXjnxiQ";
@@ -14,13 +12,13 @@ const TransactionMap: React.FC = () => {
   useEffect(() => {
     // Initialize the Mapbox map
     const map = new mapboxgl.Map({
-      container: mapContainer.current,
-      style: "mapbox://styles/mapbox/streets-v11", // Map style
-      center: [-74.5, 40], // Initial position [lng, lat]
-      zoom: 9, // Initial zoom level
+      container: mapContainer.current || "",
+      style: "mapbox://styles/mapbox/streets-v11", 
+      center: [-74.5, 40], 
+      zoom: 9, 
     });
 
-    return () => map.remove(); // Clean up on unmount
+    return () => map.remove(); 
   }, []);
 
   return (
@@ -33,8 +31,8 @@ const TransactionMap: React.FC = () => {
         height: "69vh",
         minHeight: "400px",
         maxHeight: "100%",
-        borderRadius: "20px", // Added rounded corners
-        overflow: "hidden", // Ensures the map content does not overflow the rounded edges
+        borderRadius: "20px", 
+        overflow: "hidden",
       }}
     />
   );

frontend/src/app/components/charts/CompaniesPieChart.tsx

@@ -108,7 +108,7 @@ const CompaniesPieChart: React.FC = () => {
 
       <div className="-mx-8 flex flex-wrap items-center justify-center gap-y-3">
         {(options.colors || []).map((color, index) => (
-          <div className="w-full px-8 sm:w-1/2">
+          <div key={index} className="w-full px-8 sm:w-1/2">
             <div className="flex w-full items-center">
               <span
                 className={`mr-2 block h-3 w-full max-w-3 rounded-full bg-[${color}]`}

frontend/src/app/components/charts/FootprintLineGraph.tsx

@@ -147,7 +147,7 @@ const FootprintLineGraph: React.FC = () => {
       <br />
       <div className="flex flex-wrap items-start justify-between gap-3 sm:flex-nowrap">
         <div className="flex w-full flex-wrap gap-3 sm:gap-5">
-          {series.map(({ name, data, color }) => (
+          {series.map(({ name, color }) => (
             <div className="flex min-w-47.5" key={name}>
               <span
                 className="mr-2 mt-1 flex h-4 w-full max-w-4 items-center justify-center rounded-full border"

frontend/src/app/dashboard/page.tsx

@@ -19,32 +19,21 @@ const CompaniesPieChart = dynamic(
 );
 
 const Dashboard: React.FC = () => {
-  const [displayName, setDisplayName] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const router = useRouter();
 
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
       if (user) {
-        setDisplayName(user.displayName || "User");
         setLoading(false);
       } else {
-        router.replace("/main-site/auth/SignInWithGoogle"); // Use replace instead of push
+        router.replace("/main-site/auth/SignInWithGoogle");
       }
     });
 
     return () => unsubscribe();
   }, [router]);
 
-  const handleSignOut = async () => {
-    try {
-      await auth.signOut();
-      router.replace("/"); // Use replace instead of push
-    } catch (error) {
-      console.error("Sign out error:", error);
-    }
-  };
-
   if (loading) {
     return (
       <div className="flex items-center justify-center h-screen">

frontend/src/app/layout.tsx

@@ -3,16 +3,14 @@ import "jsvectormap/dist/jsvectormap.css";
 import "flatpickr/dist/flatpickr.min.css";
 import "@/css/satoshi.css";
 import "@/css/style.css";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import Navbar from "@/app/components/Navbar";
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
   return (
     <html lang="en">
       <body suppressHydrationWarning={true}>

frontend/src/app/page.tsx

@@ -3,15 +3,11 @@ import Image from "next/image";
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { auth } from "@/app/firebase/firebaseConfig";
-import { useRouter } from "next/navigation";
 import { User } from "firebase/auth";
-import { Metadata } from "next";
 
 export default function Home() {
-  const [menuOpen, setMenuOpen] = useState(false);
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
-  const router = useRouter();
 
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((currentUser) => {
@@ -27,7 +23,7 @@ export default function Home() {
   return (
     <div className="ml-20 mr-20 mt-4 grid grid-cols-1 gap-4 md:mt-6 md:grid-cols-12 md:gap-6 2xl:mt-7.5 2xl:gap-7.5">
       <div id="left-col" className="rounded-2xl md:col-span-6">
-        <img
+        <Image
           src="/images/logo/rootpage-logo.png"
           alt="RATTM CO2 Calculator"
           width={872}

frontend/src/app/transactions/page.tsx

@@ -12,7 +12,7 @@ export default function Transactions() {
       <h1 className="mb-5 mt-5 text-center text-3xl font-extrabold text-black dark:text-white">
         All recent transactions
       </h1>
-      <p className="text-center">I'll put stuff here later</p>
+      <p className="text-center">I&apos;ll put stuff here later</p>
     </div>
   );
 }