Merge branch 'staging'

Author: izadoesdev

apps/api/src/query/builders/geo.ts

@@ -1,7 +1,7 @@
 import type { SimpleQueryConfig } from "../types";
 import { Analytics } from "../../types/tables";
 
-export const GeoBuilders: Record<string, SimpleQueryConfig<typeof Analytics.events>> = {
+export const GeoBuilders: Record<string, SimpleQueryConfig> = {
     country: {
         table: Analytics.events,
         fields: [

apps/better-admin

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertCircle, Globe, HelpCircle, MapPin } from "lucide-react";
+import { GlobeIcon, MapPinIcon, QuestionIcon } from "@phosphor-icons/react";
 import dynamic from "next/dynamic";
 import { useParams } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -11,6 +11,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useMapLocationData } from "@/hooks/use-dynamic-query";
 import { cn } from "@/lib/utils";
 import { WebsitePageHeader } from "../_components/website-page-header";
+import { CountryFlag } from "@/components/analytics/icons/CountryFlag";
 
 interface CountryData {
   country: string;
@@ -50,24 +51,24 @@ function WebsiteMapPage() {
   const { id } = useParams<{ id: string }>();
   const [mode, setMode] = useState<"total" | "perCapita">("total");
 
-  if (!id) {
-    return <div>No website ID</div>;
-  }
-
-  const { results, isLoading, getDataForQuery } = useMapLocationData(id, {
+  const { isLoading, getDataForQuery } = useMapLocationData(id, {
     start_date: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
     end_date: new Date().toISOString().split('T')[0],
     granularity: 'daily'
   });
 
+  if (!id) {
+    return <div>No website ID</div>;
+  }
+
   const locationData: LocationData = {
-    countries: (getDataForQuery("map-countries", "countries") || []).map((item: { name: string; visitors: number; pageviews: number; country_code?: string; country_name?: string }) => ({
+    countries: (getDataForQuery("map-countries", "country") || []).map((item: { name: string; visitors: number; pageviews: number; country_code?: string; country_name?: string }) => ({
       country: item.country_name || item.name,
       country_code: item.country_code || item.name,
       visitors: item.visitors,
       pageviews: item.pageviews,
     })),
-    regions: (getDataForQuery("map-regions", "regions") || []).map((item: { name: string; visitors: number; pageviews: number }) => ({
+    regions: (getDataForQuery("map-regions", "region") || []).map((item: { name: string; visitors: number; pageviews: number }) => ({
       country: item.name,
       visitors: item.visitors,
       pageviews: item.pageviews,
@@ -86,7 +87,7 @@ function WebsiteMapPage() {
       <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
         <WebsitePageHeader
           title="Geographic Data"
-          icon={<Globe className="h-5 w-5 text-primary" />}
+          icon={<GlobeIcon className="h-5 w-5 text-primary" weight="duotone" aria-label="Globe" />}
           websiteId={id}
           variant="minimal"
           subtitle={!isLoading && totalVisitors > 0 ? `${totalVisitors.toLocaleString()} visitors across ${topCountries.length} countries` : undefined}
@@ -124,7 +125,7 @@ function WebsiteMapPage() {
           <CardHeader className="flex-shrink-0 pb-3">
             <CardTitle className="flex items-center justify-between">
               <span className="flex items-center gap-2">
-                <MapPin className="h-4 w-4" />
+                <MapPinIcon className="h-4 w-4" weight="duotone" aria-label="World Map" />
                 World Map
               </span>
               <Badge className="text-xs" variant="secondary">
@@ -145,7 +146,7 @@ function WebsiteMapPage() {
         <Card className="flex min-h-0 flex-1 flex-col overflow-hidden rounded md:w-72 md:flex-none">
           <CardHeader className="flex-shrink-0 pb-3">
             <CardTitle className="flex items-center gap-2">
-              <Globe className="h-4 w-4" />
+              <GlobeIcon className="h-4 w-4" weight="duotone" aria-label="Top Countries" />
               Top Countries
             </CardTitle>
           </CardHeader>
@@ -220,7 +221,7 @@ function WebsiteMapPage() {
                     <div className="flex items-center justify-between p-3">
                       <div className="flex min-w-0 flex-1 items-center gap-3">
                         <div className="flex h-4 w-6 flex-shrink-0 items-center justify-center rounded bg-muted">
-                          <HelpCircle className="h-3 w-3 text-muted-foreground" />
+                          <QuestionIcon className="h-3 w-3 text-muted-foreground" weight="duotone" aria-label="Unknown" />
                         </div>
                         <div className="min-w-0 flex-1">
                           <div className="font-medium text-sm">Unknown</div>
@@ -244,7 +245,7 @@ function WebsiteMapPage() {
                   <div className="flex flex-col items-center justify-center py-16 text-center">
                     <div className="mb-4">
                       <div className="mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/20">
-                        <Globe className="h-7 w-7 text-muted-foreground/50" />
+                        <GlobeIcon className="h-7 w-7 text-muted-foreground/50" weight="duotone" aria-label="No Data" />
                       </div>
                     </div>
                     <h4 className="mb-2 font-medium text-base text-foreground">

apps/dashboard/app/(main)/websites/[id]/map/page.tsx

@@ -16,9 +16,8 @@ import {
   Search,
   X,
 } from "lucide-react";
-import React, { Fragment, useCallback, useMemo, useRef, useState, useEffect } from "react";
+import React, { Fragment, useCallback, useRef, useState, useEffect } from "react";
 import ReactDOM from "react-dom";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import {

apps/dashboard/components/analytics/data-table.tsx

@@ -7,7 +7,7 @@ import "leaflet/dist/leaflet.css";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { GeoJSON, MapContainer } from "react-leaflet";
 import { getCountryPopulation } from "@/lib/data";
-import { useCountries, useSubdivisions } from "@/lib/geo";
+import { useCountries } from "@/lib/geo";
 import { CountryFlag } from "./icons/CountryFlag";
 
 interface TooltipContent {
@@ -58,39 +58,13 @@ export function MapComponent({
     };
   }, [locationsData?.countries]);
 
-  const subdivisionData = useMemo(() => {
-    if (!locationsData?.cities) return null;
-
-    const regions: Record<string, { visitors: number; pageviews: number }> = {};
-
-    for (const city of locationsData.cities) {
-      const regionKey = `${city.country}-${city.region}`;
-      if (!regions[regionKey]) {
-        regions[regionKey] = { visitors: 0, pageviews: 0 };
-      }
-      regions[regionKey].visitors += city.visitors;
-      regions[regionKey].pageviews += city.pageviews;
-    }
-
-    return {
-      data: Object.entries(regions).map(([key, data]) => ({
-        value: key,
-        count: data.visitors,
-        percentage:
-          (data.visitors /
-            (locationsData.cities.reduce((sum: number, c: any) => sum + c.visitors, 0) || 1)) *
-          100,
-      })),
-    };
-  }, [locationsData?.cities]);
-
   const [dataVersion, setDataVersion] = useState<number>(0);
 
   useEffect(() => {
-    if (countryData || subdivisionData) {
+    if (countryData) {
       setDataVersion((prev) => prev + 1);
     }
-  }, [countryData, subdivisionData]);
+  }, [countryData]);
 
   const [tooltipContent, setTooltipContent] = useState<TooltipContent | null>(null);
   const [tooltipPosition, setTooltipPosition] = useState<TooltipPosition>({
@@ -144,7 +118,6 @@ export function MapComponent({
     };
   }, [processedCountryData, mode]);
 
-  const { data: subdivisionsGeoData } = useSubdivisions();
   const { data: countriesGeoData } = useCountries();
 
   const handleStyle = (feature: Feature<any>) => {
@@ -252,7 +225,7 @@ export function MapComponent({
         </div>
       )}
 
-      {(countriesGeoData || subdivisionsGeoData) && (
+      {(countriesGeoData) && (
         <MapContainer
           attributionControl={false}
           center={[40, 3]}

apps/dashboard/components/analytics/map-component.tsx

@@ -608,12 +608,12 @@ export function useMapLocationData(
   const queries: DynamicQueryRequest[] = [
     {
       id: "map-countries",
-      parameters: ["countries"],
+      parameters: ["country"],
       limit: 100,
     },
     {
       id: "map-regions",
-      parameters: ["regions"],
+      parameters: ["region"],
       limit: 100,
     },
   ];