feat: Reorganize dashboard layout and add Crisis Map with user preferences (#93)

* feat: Enhance Dashboard with new Crisis Map and filter functionalities

- Added a new Crisis Map section to the Dashboard, allowing users to view an interactive global map of crisis locations.
- Implemented tooltips for navigation items to provide contextual information.
- Introduced additional filters for country and disaster types to refine crisis data displayed on the map.
- Updated the layout and styling for better user experience and accessibility.
- Refactored existing components to accommodate new features and improve code organization.

* feat: Implement user-specific map style preferences and enhance dashboard layout

- Added functionality for users to customize their map styles for light and dark themes through a new MapStyleSettings component.
- Integrated user map preferences into the backend with new API endpoints for fetching and updating preferences.
- Updated the CrisisMap component to utilize user-defined styles, improving personalization.
- Enhanced the Dashboard layout with a TooltipProvider for better user guidance and interaction.
- Refactored existing components for improved organization and maintainability.

* Fix build errors and warnings

- Fix country variable declaration in location-onboarding.tsx (use const instead of let)
- Remove unused loading variable in dashboard/map/page.tsx
- Remove unused toggleDisasterType and availableDisasterTypes in dashboard/page.tsx
- Prefix unused setter variables with underscore to indicate intentional non-use

* fix: Update demo user email and picture in auth router

- Changed demo user email domain from bluerelief.test to bluerelief.app for consistency.
- Updated demo user picture URL to use a new avatar style for improved visual representation.

Author: geeth24

.cursorrules

@@ -31,11 +31,16 @@
 
 ### Database Migrations
 - ALWAYS use Alembic for database migrations
-- Command: `alembic revision --autogenerate -m "description"`
-- Apply migrations: `alembic upgrade head`
-- View history: `alembic history`
-- Current status: `alembic current`
-- Downgrade: `alembic downgrade <revision>`
+- **CRITICAL WORKFLOW:**
+  1. FIRST: Update the SQLAlchemy models in `server/db_utils/db.py`
+  2. SECOND: Use `./scripts/docker-dev.sh migrate-generate "description"` to auto-generate migration
+  3. THIRD: Review the generated migration file
+  4. FOURTH: Apply with `./scripts/docker-dev.sh migrate`
+- **NEVER manually create migration files** - always auto-generate them
+- Apply migrations: `./scripts/docker-dev.sh migrate`
+- View history: `./scripts/docker-dev.sh migrate-status`
+- Validate schema: `./scripts/docker-dev.sh migrate-validate`
+- Downgrade: `./scripts/docker-dev.sh migrate-downgrade <revision>`
 
 ### Development Setup
 - Use the provided `./scripts/docker-dev.sh` script for all development tasks
@@ -102,3 +107,4 @@
 - Do NOT suggest manual Docker commands instead of the script
 - Do NOT add bloated comments or placeholder TODOs
 - Do NOT create duplicates without evaluating existing code first
+- Do NOT manually create Alembic migration files - always auto-generate them using the docker-dev.sh script

.dock

@@ -0,0 +1 @@
+dev: docker-compose.yml

client/app/dashboard/analysis/page.tsx

@@ -113,15 +113,15 @@ const ComparisonIndicator = ({
   return (
     <div className={`flex items-center gap-1 text-xs ${isImprovement ? 'text-green-600' : 'text-red-600'}`}>
       {isPositive ? (
-        <Lordicon 
-          src={LORDICON_SOURCES.arrowUpRight}
+      <Lordicon 
+        src={LORDICON_SOURCES.trendingUp}
           trigger="hover" 
           size={LORDICON_SIZES.xs}
           colorize="currentColor"
         />
       ) : (
         <Lordicon 
-          src={LORDICON_SOURCES.arrowDownRight}
+          src={LORDICON_SOURCES.trendingUp}
           trigger="hover" 
           size={LORDICON_SIZES.xs}
           colorize="currentColor"

client/app/dashboard/data-feed/page.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
+import { ArrowUpRight } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
@@ -534,12 +535,7 @@ export default function DataFeedPage() {
                       >
                         <BlueskyIcon className="mr-2 text-[#1185fe]" size={16} />
                         View on Bluesky
-                        <Lordicon 
-                          src={LORDICON_SOURCES.externalLink}
-                          trigger="hover" 
-                          size={LORDICON_SIZES.xs}
-                          colorize="currentColor"
-                        />
+                        <ArrowUpRight className="h-3 w-3 ml-1" />
                       </Button>
                     )}
                   </div>

client/app/dashboard/layout.tsx

@@ -46,6 +46,7 @@ import { logout } from "@/lib/auth";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Kbd } from "@/components/ui/kbd";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { apiGet } from "@/lib/api-client";
 
 type NavigationItem = {
@@ -54,9 +55,11 @@ type NavigationItem = {
   href: string;
   showBadge?: boolean;
   lordiconSrc?: string;
+  tooltip?: string;
 };
 
 const DashboardIcon = () => <Lordicon src="https://cdn.lordicon.com/oeotfwsx.json" trigger="hover" size={18} colorize="currentColor" />;
+const MapIcon = () => <Lordicon src="https://cdn.lordicon.com/oypudwea.json" trigger="hover" size={18} colorize="currentColor" />;
 const DataFeedIcon = () => <Lordicon src="https://cdn.lordicon.com/ulcgigyi.json" trigger="hover" size={18} colorize="currentColor" />;
 const AnalysisIcon = () => <Lordicon src="https://cdn.lordicon.com/btfbysou.json" trigger="hover" size={18} colorize="currentColor" />;
 const AlertsIcon = () => <Lordicon src="https://cdn.lordicon.com/ahxaipjb.json" trigger="hover" size={18} colorize="currentColor" />;
@@ -67,11 +70,19 @@ const mainNavigation: NavigationItem[] = [
     title: "Dashboard",
     icon: DashboardIcon,
     href: "/dashboard",
+    tooltip: "View overview of all crisis data and metrics",
+  },
+  {
+    title: "Crisis Map",
+    icon: MapIcon,
+    href: "/dashboard/map",
+    tooltip: "Interactive global map of crisis locations",
   },
   {
     title: "Data Feed",
     icon: DataFeedIcon,
     href: "/dashboard/data-feed",
+    tooltip: "Real-time feed of crisis events and updates",
   },
 ];
 
@@ -80,12 +91,14 @@ const monitoringNavigation: NavigationItem[] = [
     title: "Analysis",
     icon: AnalysisIcon,
     href: "/dashboard/analysis",
+    tooltip: "Advanced analytics and crisis trends",
   },
   {
     title: "Alerts",
     icon: AlertsIcon,
     href: "/dashboard/alerts",
     showBadge: true,
+    tooltip: "Manage notifications and alert preferences",
   },
 ];
 
@@ -94,6 +107,7 @@ const systemNavigation: NavigationItem[] = [
     title: "Settings",
     icon: SettingsIcon,
     href: "/dashboard/settings",
+    tooltip: "Configure your account and preferences",
   },
 ];
 
@@ -148,7 +162,7 @@ function AppSidebar({ user }: AppSidebarProps) {
 
             return (
               <SidebarMenuItem key={item.title}>
-                <SidebarMenuButton asChild isActive={isActive} tooltip={item.title}>
+                <SidebarMenuButton asChild isActive={isActive} tooltip={item.tooltip || item.title}>
                   <Link href={item.href}>
                     <item.icon />
                     <span>{item.title}</span>
@@ -293,7 +307,7 @@ export default function DashboardLayout({
 
   useEffect(() => {
     if (!loading && !isAuthenticated) {
-      router.push("/login");
+      router.push("/");
     }
   }, [isAuthenticated, loading, router]);
 
@@ -337,6 +351,7 @@ export default function DashboardLayout({
   }
 
   return (
+    <TooltipProvider>
     <SidebarProvider>
       <AppSidebar user={user} />
       <SidebarInset>
@@ -362,5 +377,6 @@ export default function DashboardLayout({
         </div>
       </SidebarInset>
     </SidebarProvider>
+    </TooltipProvider>
   );
 }

client/app/dashboard/map/layout.tsx

@@ -0,0 +1,7 @@
+export default function MapLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}