Enhances data handling and geographic mapping

Refactors dashboard to use actual metrics for country data,
removing dummy data for improved accuracy. Integrates the
country-code-lookup package for geographic mapping, adding
comprehensive country coordinates. Increases performance and
data validation across API endpoints and adjusts WordCloud
component size for better visualization.

Enhances session handling with improved validation logic,
and updates configuration for allowed origins.

app/dashboard/page.tsx

@@ -142,24 +142,22 @@ function DashboardContent() {
     return metrics.wordCloudData;
   };
 
-  // Function to prepare country data for the map - using simulated/dummy data
+  // Function to prepare country data for the map using actual metrics
   const getCountryData = () => {
-    return {
-      US: 42,
-      GB: 25,
-      DE: 18,
-      FR: 15,
-      CA: 12,
-      AU: 10,
-      JP: 8,
-      BR: 6,
-      IN: 5,
-      ZA: 3,
-      ES: 7,
-      NL: 9,
-      IT: 6,
-      SE: 4,
-    };
+    if (!metrics || !metrics.countries) return {};
+
+    // Convert the countries object from metrics to the format expected by GeographicMap
+    const result = Object.entries(metrics.countries).reduce(
+      (acc, [code, count]) => {
+        if (code && count) {
+          acc[code] = count;
+        }
+        return acc;
+      },
+      {} as Record<string, number>
+    );
+
+    return result;
   };
 
   // Function to prepare response time distribution data
@@ -378,7 +376,7 @@ function DashboardContent() {
           <h3 className="font-bold text-lg text-gray-800 mb-4">
             Transcript Word Cloud
           </h3>
-          <WordCloud words={getWordCloudData()} width={500} height={300} />
+          <WordCloud words={getWordCloudData()} width={400} height={300} />
         </div>
         <div className="bg-white p-6 rounded-xl shadow">
           <h3 className="font-bold text-lg text-gray-800 mb-4">

app/dashboard/sessions/page.tsx

@@ -40,6 +40,7 @@ export default function SessionsPage() {
   // Pagination states
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [pageSize, setPageSize] = useState(10); // Or make this configurable
 
   useEffect(() => {

components/DonutChart.tsx

@@ -92,12 +92,17 @@ export default function DonutChart({ data, centerText }: DonutChartProps) {
             {
               id: "centerText",
               beforeDraw: function (chart: any) {
-                const width = chart.width;
                 const height = chart.height;
                 const ctx = chart.ctx;
                 ctx.restore();
 
-                const centerX = width / 2;
+                // Calculate the actual chart area width (excluding legend)
+                // Legend is positioned on the right, so we adjust the center X coordinate
+                const chartArea = chart.chartArea;
+                const chartWidth = chartArea.right - chartArea.left;
+
+                // Get the center of just the chart area (not including the legend)
+                const centerX = chartArea.left + chartWidth / 2;
                 const centerY = height / 2;
 
                 // Title text

components/GeographicMap.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import "leaflet/dist/leaflet.css";
+import countryLookup from "country-code-lookup";
 
 // Define types for country data
 interface CountryData {
@@ -17,25 +18,41 @@ interface GeographicMapProps {
   height?: number; // Optional height for the container
 }
 
-// Default coordinates for commonly used countries (latitude, longitude)
-const DEFAULT_COORDINATES: Record<string, [number, number]> = {
+// Get country coordinates from the country-code-lookup package
+const getCountryCoordinates = (): Record<string, [number, number]> => {
+  // Initialize with some fallback coordinates for common countries that might be missing
+  const coordinates: Record<string, [number, number]> = {
+    // These are just in case the lookup fails for common countries
     US: [37.0902, -95.7129],
     GB: [55.3781, -3.436],
-  DE: [51.1657, 10.4515],
-  FR: [46.2276, 2.2137],
-  CA: [56.1304, -106.3468],
-  AU: [-25.2744, 133.7751],
-  JP: [36.2048, 138.2529],
-  BR: [-14.235, -51.9253],
-  IN: [20.5937, 78.9629],
-  ZA: [-30.5595, 22.9375],
-  ES: [40.4637, -3.7492],
-  NL: [52.1326, 5.2913],
-  IT: [41.8719, 12.5674],
-  SE: [60.1282, 18.6435],
-  // Add more country coordinates as needed
+    BA: [43.9159, 17.6791],
   };
 
+  try {
+    // Get all countries from the package
+    const allCountries = countryLookup.countries;
+
+    // Map through all countries and extract coordinates
+    allCountries.forEach((country) => {
+      if (country.iso2 && country.latitude && country.longitude) {
+        coordinates[country.iso2] = [
+          parseFloat(country.latitude),
+          parseFloat(country.longitude),
+        ];
+      }
+    });
+
+    return coordinates;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("Error loading country coordinates:", error);
+    return coordinates;
+  }
+};
+
+// Load coordinates once when module is imported
+const DEFAULT_COORDINATES = getCountryCoordinates();
+
 // Dynamically import the Map component to avoid SSR issues
 // This ensures the component only loads on the client side
 const Map = dynamic(() => import("./Map"), {
@@ -68,9 +85,15 @@ export default function GeographicMap({
       // Generate CountryData array for the Map component
       const data: CountryData[] = Object.entries(countries)
         // Only include countries with known coordinates
-        .filter(
-          ([code]) => countryCoordinates[code] || DEFAULT_COORDINATES[code]
-        )
+        .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;
+        })
         .map(([code, count]) => ({
           code,
           count,
@@ -78,6 +101,12 @@ export default function GeographicMap({
             DEFAULT_COORDINATES[code] || [0, 0],
         }));
 
+      // 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
@@ -86,8 +115,9 @@ export default function GeographicMap({
     }
   }, [countries, countryCoordinates, isClient]);
 
-  // Find the max count for scaling circles
-  const maxCount = Math.max(...Object.values(countries), 1);
+  // Find the max count for scaling circles - handle empty countries object
+  const countryValues = Object.values(countries);
+  const maxCount = countryValues.length > 0 ? Math.max(...countryValues, 1) : 1;
 
   // Show loading state during SSR or until client-side rendering takes over
   if (!isClient) {
@@ -100,7 +130,13 @@ export default function GeographicMap({
 
   return (
     <div style={{ height: `${height}px`, width: "100%" }} className="relative">
+      {countryData.length > 0 ? (
         <Map countryData={countryData} maxCount={maxCount} />
+      ) : (
+        <div className="h-full w-full bg-gray-100 flex items-center justify-center text-gray-500">
+          No geographic data available
+        </div>
+      )}
       <style jsx global>{`
         .leaflet-control-attribution {
           display: none !important;

next.config.js

@@ -2,7 +2,12 @@
 const nextConfig = {
   reactStrictMode: true,
   // Allow cross-origin requests from specific origins in development
-  allowedDevOrigins: ["192.168.1.2", "localhost", "propc"],
+  allowedDevOrigins: [
+    "192.168.1.2",
+    "localhost",
+    "propc",
+    "test123.kjanat.com",
+  ],
 };
 
 export default nextConfig;

package-lock.json

@@ -11,11 +11,13 @@
         "@prisma/client": "^6.8.2",
         "@types/d3": "^7.4.3",
         "@types/d3-cloud": "^1.2.9",
+        "@types/geojson": "^7946.0.16",
         "@types/leaflet": "^1.9.18",
         "@types/node-fetch": "^2.6.12",
         "bcryptjs": "^3.0.2",
         "chart.js": "^4.0.0",
         "chartjs-plugin-annotation": "^3.1.0",
+        "country-code-lookup": "^0.1.3",
         "csv-parse": "^5.5.0",
         "d3": "^7.9.0",
         "d3-cloud": "^1.2.7",
@@ -3029,6 +3031,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/country-code-lookup": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/country-code-lookup/-/country-code-lookup-0.1.3.tgz",
+      "integrity": "sha512-gLu+AQKHUnkSQNTxShKgi/4tYd0vEEait3JMrLNZgYlmIZ9DJLkHUjzXE9qcs7dy3xY/kUx2/nOxZ0Z3D9JE+A==",
+      "license": "MIT"
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",

package.json

@@ -18,11 +18,13 @@
     "@prisma/client": "^6.8.2",
     "@types/d3": "^7.4.3",
     "@types/d3-cloud": "^1.2.9",
+    "@types/geojson": "^7946.0.16",
     "@types/leaflet": "^1.9.18",
     "@types/node-fetch": "^2.6.12",
     "bcryptjs": "^3.0.2",
     "chart.js": "^4.0.0",
     "chartjs-plugin-annotation": "^3.1.0",
+    "country-code-lookup": "^0.1.3",
     "csv-parse": "^5.5.0",
     "d3": "^7.9.0",
     "d3-cloud": "^1.2.7",

pages/api/dashboard/session-filter-options.ts

@@ -6,7 +6,9 @@ import { SessionFilterOptions } from "../../../lib/types";
 
 export default async function handler(
   req: NextApiRequest,
-    res: NextApiResponse<SessionFilterOptions | { error: string; details?: string; }>
+  res: NextApiResponse<
+    SessionFilterOptions | { error: string; details?: string }
+  >
 ) {
   if (req.method !== "GET") {
     return res.status(405).json({ error: "Method not allowed" });
@@ -53,8 +55,12 @@ export default async function handler(
       },
     });
 
-        const distinctCategories = categories.map((s) => s.category).filter(Boolean) as string[]; // Filter out any nulls and assert as string[]
-        const distinctLanguages = languages.map((s) => s.language).filter(Boolean) as string[]; // Filter out any nulls and assert as string[]
+    const distinctCategories = categories
+      .map((s) => s.category)
+      .filter(Boolean) as string[]; // Filter out any nulls and assert as string[]
+    const distinctLanguages = languages
+      .map((s) => s.language)
+      .filter(Boolean) as string[]; // Filter out any nulls and assert as string[]
 
     return res
       .status(200)

pages/api/dashboard/sessions.ts

@@ -2,11 +2,15 @@ import { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "../auth/[...nextauth]";
 import { prisma } from "../../../lib/prisma";
-import { ChatSession, SessionApiResponse, SessionQuery } from "../../../lib/types";
+import {
+  ChatSession,
+  SessionApiResponse,
+  SessionQuery,
+} from "../../../lib/types";
 
 export default async function handler(
   req: NextApiRequest,
-    res: NextApiResponse<SessionApiResponse | { error: string; details?: string; }>
+  res: NextApiResponse<SessionApiResponse | { error: string; details?: string }>
 ) {
   if (req.method !== "GET") {
     return res.status(405).json({ error: "Method not allowed" });
@@ -80,7 +84,7 @@ export default async function handler(
     if (sortKey && typeof sortKey === "string") {
       const order =
         sortOrder === "asc" || sortOrder === "desc" ? sortOrder : "desc";
-          const validSortKeys: { [key: string]: string; } = {
+      const validSortKeys: { [key: string]: string } = {
         startTime: "startTime",
         category: "category",
         language: "language",