Enhances dashboard with new metrics and charts

Improves the dashboard with additional metrics and visualizations
to provide a more comprehensive overview of application usage and performance.

Adds new charts, including:
- Word cloud for category analysis
- Geographic map for user distribution (simulated data)
- Response time distribution chart

Refactors existing components for improved clarity and reusability,
including the introduction of a generic `MetricCard` component.

Improves error handling and user feedback during data refresh and
session loading.

Adds recommended VSCode extensions for ESLint and Prettier.

components/Map.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { MapContainer, TileLayer, CircleMarker, Tooltip } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import { getLocalizedCountryName } from "../lib/localization";
+
+interface CountryData {
+  code: string;
+  count: number;
+  coordinates: [number, number];
+}
+
+interface MapProps {
+  countryData: CountryData[];
+  maxCount: number;
+}
+
+const Map = ({ countryData, maxCount }: MapProps) => {
+  return (
+    <MapContainer
+      center={[30, 0]}
+      zoom={2}
+      zoomControl={true}
+      scrollWheelZoom={false}
+      style={{ height: "100%", width: "100%", borderRadius: "0.5rem" }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      {countryData.map((country) => (
+        <CircleMarker
+          key={country.code}
+          center={country.coordinates}
+          radius={5 + (country.count / maxCount) * 20}
+          pathOptions={{
+            fillColor: "#3B82F6",
+            color: "#1E40AF",
+            weight: 1,
+            opacity: 0.8,
+            fillOpacity: 0.6,
+          }}
+        >
+          <Tooltip>
+            <div className="p-1">
+              <div className="font-medium">
+                {getLocalizedCountryName(country.code)}
+              </div>
+              <div className="text-sm">Sessions: {country.count}</div>
+            </div>
+          </Tooltip>
+        </CircleMarker>
+      ))}
+    </MapContainer>
+  );
+};
+
+export default Map;