From ac7cafd7b2ec26ab66d5f038ee092c5d22163e95 Mon Sep 17 00:00:00 2001
From: Kaj Kowalski <dev@kajkowalski.nl>
Date: Thu, 22 May 2025 05:05:04 +0200
Subject: [PATCH] Improves dashboard UI and user management

Enhances the dashboard's visual presentation and user management
functionality.

- Addresses a layout issue by adding overflow hidden to the word cloud container.
- Improves user management form responsiveness on smaller screens.
- Enhances language name display in the pie chart using a dedicated function and ensures correct ISO code display.
- Refines donut chart's center text styling for better readability.
- Fixes geographic map's height and removes attribution for a cleaner look.
---
 app/dashboard/page.tsx       |  2 +-
 app/dashboard/users.tsx      |  8 ++++----
 components/Charts.tsx        | 33 +++++++++++++--------------------
 components/DonutChart.tsx    | 26 ++++++++++++++------------
 components/GeographicMap.tsx | 15 +++++++--------
 next.config.js               |  2 +-
 postcss.config.mjs           |  6 +++---
 7 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index be3b26c..cc48f5b 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -384,7 +384,7 @@ function DashboardContent() {
       </div>
       {/* Word Cloud and World Map */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="bg-white p-6 rounded-xl shadow">
+        <div className="bg-white p-6 rounded-xl shadow overflow-hidden">
           <h3 className="font-bold text-lg text-gray-800 mb-4">
             Categories Word Cloud
           </h3>
diff --git a/app/dashboard/users.tsx b/app/dashboard/users.tsx
index ffb1302..bea1789 100644
--- a/app/dashboard/users.tsx
+++ b/app/dashboard/users.tsx
@@ -39,15 +39,15 @@ export default function UserManagement({ session }: UserManagementProps) {
   return (
     <div className="bg-white p-6 rounded-xl shadow mb-6">
       <h2 className="font-bold text-lg mb-4">User Management</h2>
-      <div className="flex gap-2 mb-3">
+      <div className="flex flex-col sm:flex-row gap-2 mb-3">
         <input
-          className="border px-3 py-2 rounded"
+          className="border px-3 py-2 rounded w-full sm:w-auto"
           placeholder="Email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
         />
         <select
-          className="border px-3 py-2 rounded"
+          className="border px-3 py-2 rounded w-full sm:w-auto"
           value={role}
           onChange={(e) => setRole(e.target.value)}
         >
@@ -56,7 +56,7 @@ export default function UserManagement({ session }: UserManagementProps) {
           <option value="auditor">Auditor</option>
         </select>
         <button
-          className="bg-blue-600 text-white rounded px-4"
+          className="bg-blue-600 text-white rounded px-4 py-2 sm:py-0 w-full sm:w-auto"
           onClick={inviteUser}
         >
           Invite
diff --git a/components/Charts.tsx b/components/Charts.tsx
index 402ccdb..fd959b3 100644
--- a/components/Charts.tsx
+++ b/components/Charts.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useRef } from "react";
 import Chart from "chart.js/auto";
+import { getLocalizedLanguageName } from "../lib/localization"; // Corrected import path
 
 interface SessionsData {
   [date: string]: number;
@@ -173,25 +174,16 @@ export function LanguagePieChart({ languages }: LanguagePieChartProps) {
       topLanguages.push(["Other", otherCount]);
     }
 
-    // Use Intl.DisplayNames to get localized language names from ISO codes
-    const languageDisplayNames = new Intl.DisplayNames(["en"], {
-      type: "language",
-    });
-
     // Store original ISO codes for tooltip
     const isoCodes = topLanguages.map(([lang]) => lang);
 
     const labels = topLanguages.map(([lang]) => {
-      // Check if this is a valid ISO 639-1 language code
-      if (lang && lang !== "Other" && /^[a-z]{2}$/.test(lang)) {
-        try {
-          return languageDisplayNames.of(lang);
-        } catch {
-          // Empty catch block - no need to name the error parameter
-          return lang; // Fallback to code if display name can't be resolved
-        }
+      if (lang === "Other") {
+        return "Other";
       }
-      return lang; // Return original string for "Other" or invalid codes
+      // Use getLocalizedLanguageName for robust name resolution
+      // Pass "en" to maintain consistency with previous behavior if navigator.language is different
+      return getLocalizedLanguageName(lang, "en");
     });
 
     const data = topLanguages.map(([, count]) => count);
@@ -231,15 +223,16 @@ export function LanguagePieChart({ languages }: LanguagePieChartProps) {
                 const label = context.label || "";
                 const value = context.formattedValue || "";
                 const index = context.dataIndex;
-                const isoCode = isoCodes[index];
+                const originalIsoCode = isoCodes[index]; // Get the original code
 
-                // Only show ISO code if it's not "Other" and it's a valid 2-letter code
+                // Only show ISO code if it's not "Other"
+                // and it's a valid 2-letter code (check lowercase version)
                 if (
-                  isoCode &&
-                  isoCode !== "Other" &&
-                  /^[a-z]{2}$/.test(isoCode)
+                  originalIsoCode &&
+                  originalIsoCode !== "Other" &&
+                  /^[a-z]{2}$/.test(originalIsoCode.toLowerCase())
                 ) {
-                  return `${label} (${isoCode.toUpperCase()}): ${value}`;
+                  return `${label} (${originalIsoCode.toUpperCase()}): ${value}`;
                 }
 
                 return `${label}: ${value}`;
diff --git a/components/DonutChart.tsx b/components/DonutChart.tsx
index 88b4ecb..54f1710 100644
--- a/components/DonutChart.tsx
+++ b/components/DonutChart.tsx
@@ -97,28 +97,30 @@ export default function DonutChart({ data, centerText }: DonutChartProps) {
                 const ctx = chart.ctx;
                 ctx.restore();
 
+                const centerX = width / 2;
+                const centerY = height / 2;
+
                 // Title text
                 if (centerText.title) {
-                  ctx.font = "14px Arial";
-                  ctx.fillStyle = "#6B7280"; // text-gray-500
-                  ctx.textBaseline = "middle";
+                  ctx.font = "1rem sans-serif"; // Consistent font
+                  ctx.fillStyle = "#6B7280"; // Tailwind gray-500
                   ctx.textAlign = "center";
-                  ctx.fillText(centerText.title, width / 2, height / 2 - 10);
+                  ctx.textBaseline = "middle"; // Align vertically
+                  ctx.fillText(centerText.title, centerX, centerY - 10); // Adjust Y offset
                 }
 
                 // Value text
                 if (centerText.value !== undefined) {
-                  ctx.font = "bold 20px Arial";
-                  ctx.fillStyle = "#111827"; // text-gray-900
-                  ctx.textBaseline = "middle";
+                  ctx.font = "bold 1.5rem sans-serif"; // Consistent font, larger
+                  ctx.fillStyle = "#1F2937"; // Tailwind gray-800
                   ctx.textAlign = "center";
+                  ctx.textBaseline = "middle"; // Align vertically
                   ctx.fillText(
-                    String(centerText.value),
-                    width / 2,
-                    height / 2 + 10
-                  );
+                    centerText.value.toString(),
+                    centerX,
+                    centerY + 15
+                  ); // Adjust Y offset
                 }
-
                 ctx.save();
               },
             },
diff --git a/components/GeographicMap.tsx b/components/GeographicMap.tsx
index a02954e..a0eb99e 100644
--- a/components/GeographicMap.tsx
+++ b/components/GeographicMap.tsx
@@ -99,14 +99,13 @@ export default function GeographicMap({
   }
 
   return (
-    <div className="h-full w-full" style={{ height }}>
-      {Object.keys(countries).length > 0 ? (
-        <Map countryData={countryData} maxCount={maxCount} />
-      ) : (
-        <div className="h-full w-full bg-gray-100 flex items-center justify-center">
-          No geographic data available
-        </div>
-      )}
+    <div style={{ height: `${height}px`, width: "100%" }} className="relative">
+      <Map countryData={countryData} maxCount={maxCount} />
+      <style jsx global>{`
+        .leaflet-control-attribution {
+          display: none !important;
+        }
+      `}</style>
     </div>
   );
 }
diff --git a/next.config.js b/next.config.js
index fc1a237..092b502 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,7 +2,7 @@
 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"],
 };
 
 export default nextConfig;
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 74f9c72..7059fe9 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,6 +1,6 @@
 const config = {
-    plugins: {
-        "@tailwindcss/postcss": {},
-    },
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
 };
 export default config;