From 013788d56651ddd72d119e821b2a52589d0a13dd Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Tue, 28 Apr 2026 14:01:07 +0330
Subject: [PATCH] feat(map): enhance map component with ref for container and
 cleanup logic

---
 .../(home)/_components/region-labels/map.tsx  | 25 ++++++++++++++++---
 src/components/Charts/used-devices/index.tsx  |  6 ++---
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/app/(home)/_components/region-labels/map.tsx b/src/app/(home)/_components/region-labels/map.tsx
index e370b69..1e81f11 100644
--- a/src/app/(home)/_components/region-labels/map.tsx
+++ b/src/app/(home)/_components/region-labels/map.tsx
@@ -1,13 +1,23 @@
 "use client";
 
 import jsVectorMap from "jsvectormap";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 import "@/js/us-aea-en";
 
 export default function Map() {
+  const mapContainerRef = useRef<HTMLDivElement | null>(null);
+
   useEffect(() => {
-    new jsVectorMap({
+    let map: InstanceType<typeof jsVectorMap> | null = null;
+    const container = mapContainerRef.current;
+
+    if (!container) return;
+
+    // Dev Strict Mode can run effects twice; clear old markup before re-init.
+    container.innerHTML = "";
+
+    map = new jsVectorMap({
       selector: "#mapOne",
       map: "us_aea_en",
       zoomButtons: true,
@@ -37,11 +47,20 @@ export default function Map() {
         },
       },
     });
+
+    return () => {
+      try {
+        map?.destroy?.();
+      } catch {
+        // jsVectorMap can throw during React Strict Mode cleanup in dev.
+      }
+      container.innerHTML = "";
+    };
   }, []);
 
   return (
     <div className="h-[422px]">
-      <div id="mapOne" className="mapOne map-btn" />
+      <div ref={mapContainerRef} id="mapOne" className="mapOne map-btn" />
     </div>
   );
 }
diff --git a/src/components/Charts/used-devices/index.tsx b/src/components/Charts/used-devices/index.tsx
index aa4f0cc..8162b13 100644
--- a/src/components/Charts/used-devices/index.tsx
+++ b/src/components/Charts/used-devices/index.tsx
@@ -17,11 +17,11 @@ export async function UsedDevices({
   return (
     <div
       className={cn(
-        "grid grid-cols-1 grid-rows-[auto_1fr] gap-9 rounded-[10px] bg-white p-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card",
+        "grid grid-cols-1 grid-rows-[auto_1fr] gap-9 rounded-[10px] bg-white shadow-1 dark:bg-gray-dark dark:shadow-card",
         className,
       )}
     >
-      <div className="flex flex-wrap items-center justify-between gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-4 p-7.5">
         <h2 className="text-body-2xlg font-bold text-dark dark:text-white">
           Used Devices
         </h2>
@@ -29,7 +29,7 @@ export async function UsedDevices({
         <PeriodPicker defaultValue={timeFrame} sectionKey="used_devices" />
       </div>
 
-      <div className="grid place-items-center">
+      <div className="grid place-items-center pb-7.5">
         <DonutChart data={data} />
       </div>
     </div>