npm run build

src/components/analytics/GeoMap.tsx

@@ -120,12 +120,20 @@ interface CountryStat {
   percentage: number;
 }
 
-interface GeoMapProps {
-  countryStats: CountryStat[];
-  totalScans: number;
-}
-
-const GeoMap: React.FC<GeoMapProps> = ({ countryStats, totalScans }) => {
+interface GeoMapProps {
+  countryStats: CountryStat[];
+  totalScans: number;
+}
+
+interface GeographyFeature {
+  id: string;
+  rsmKey: string;
+  properties: {
+    name: string;
+  };
+}
+
+const GeoMap: React.FC<GeoMapProps> = ({ countryStats, totalScans }) => {
   // Build a map of ISO Alpha-3 codes to scan counts
   const countryData: Record<string, number> = {};
   let maxCount = 0;
@@ -159,17 +167,17 @@ const GeoMap: React.FC<GeoMapProps> = ({ countryStats, totalScans }) => {
         projectionConfig={{
           scale: 120,
           center: [0, 30],
-        }}
-        style={{ width: '100%', height: '100%' }}
-      >
-        <ZoomableGroup center={[0, 30]} zoom={1}>
-          <Geographies geography={geoUrl}>
-            {({ geographies }) =>
-              geographies.map((geo) => {
-                // geo.id is the numeric ISO code as a string (e.g., "840" for US)
-                const geoId = geo.id;
-                const scanCount = countryData[geoId] || 0;
-                const fillColor = scanCount > 0 ? colorScale(scanCount) : '#F1F5F9';
+        }}
+        style={{ width: '100%', height: '100%' }}
+      >
+        <ZoomableGroup center={[0, 30]} zoom={1}>
+          <Geographies geography={geoUrl}>
+            {({ geographies }: { geographies: GeographyFeature[] }) =>
+              geographies.map((geo: GeographyFeature) => {
+                // geo.id is the numeric ISO code as a string (e.g., "840" for US)
+                const geoId = geo.id;
+                const scanCount = countryData[geoId] || 0;
+                const fillColor = scanCount > 0 ? colorScale(scanCount) : '#F1F5F9';
 
                 return (
                   <Geography