wip

apps/website/components/dev/DevToolbar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 import { useEffectiveDriverId } from '@/lib/currentDriver';
 import { getSendNotificationUseCase } from '@/lib/di-container';
 import type { NotificationUrgency } from '@gridpilot/notifications/application';
@@ -16,6 +17,10 @@ import {
   MessageSquare,
   AlertCircle,
   BellRing,
+  User,
+  Building2,
+  LogOut,
+  LogIn,
 } from 'lucide-react';
 
 type DemoNotificationType = 'protest_filed' | 'defense_requested' | 'vote_required';
@@ -81,16 +86,81 @@ const urgencyOptions: UrgencyOption[] = [
   },
 ];
 
+type LoginMode = 'none' | 'driver' | 'sponsor';
+
 export default function DevToolbar() {
+  const router = useRouter();
   const [isExpanded, setIsExpanded] = useState(false);
   const [isMinimized, setIsMinimized] = useState(false);
   const [selectedType, setSelectedType] = useState<DemoNotificationType>('protest_filed');
   const [selectedUrgency, setSelectedUrgency] = useState<DemoUrgency>('toast');
   const [sending, setSending] = useState(false);
   const [lastSent, setLastSent] = useState<string | null>(null);
+  const [loginMode, setLoginMode] = useState<LoginMode>('none');
+  const [loggingIn, setLoggingIn] = useState(false);
   
   const currentDriverId = useEffectiveDriverId();
 
+  // Sync login mode with actual cookie state on mount
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      const cookies = document.cookie.split(';');
+      const demoModeCookie = cookies.find(c => c.trim().startsWith('gridpilot_demo_mode='));
+      if (demoModeCookie) {
+        const value = demoModeCookie.split('=')[1]?.trim();
+        if (value === 'sponsor') {
+          setLoginMode('sponsor');
+        } else if (value === 'driver') {
+          setLoginMode('driver');
+        } else {
+          setLoginMode('none');
+        }
+      } else {
+        // Default to driver mode if no cookie (for demo purposes)
+        setLoginMode('driver');
+      }
+    }
+  }, []);
+
+  const handleLoginAsDriver = async () => {
+    setLoggingIn(true);
+    try {
+      // Demo: Set cookie to indicate driver mode
+      document.cookie = 'gridpilot_demo_mode=driver; path=/; max-age=86400';
+      setLoginMode('driver');
+      // Refresh to update all components that depend on demo mode
+      window.location.reload();
+    } finally {
+      setLoggingIn(false);
+    }
+  };
+
+  const handleLoginAsSponsor = async () => {
+    setLoggingIn(true);
+    try {
+      // Demo: Set cookie to indicate sponsor mode
+      document.cookie = 'gridpilot_demo_mode=sponsor; path=/; max-age=86400';
+      setLoginMode('sponsor');
+      // Navigate to sponsor dashboard
+      window.location.href = '/sponsor/dashboard';
+    } finally {
+      setLoggingIn(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    setLoggingIn(true);
+    try {
+      // Demo: Clear demo mode cookie
+      document.cookie = 'gridpilot_demo_mode=; path=/; max-age=0';
+      setLoginMode('none');
+      // Refresh to update all components
+      window.location.href = '/';
+    } finally {
+      setLoggingIn(false);
+    }
+  };
+
   // Only show in development
   if (process.env.NODE_ENV === 'production') {
     return null;
@@ -338,13 +408,72 @@ export default function DevToolbar() {
               <strong className="text-gray-400">Modal:</strong> Blocking popup (requires action)
             </p>
           </div>
+
+          {/* Login Section */}
+          <div className="pt-4 border-t border-charcoal-outline">
+            <div className="flex items-center gap-2 mb-3">
+              <LogIn className="w-4 h-4 text-gray-400" />
+              <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+                Demo Login
+              </span>
+            </div>
+
+            <div className="space-y-2">
+              <button
+                onClick={handleLoginAsDriver}
+                disabled={loggingIn || loginMode === 'driver'}
+                className={`
+                  w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
+                  ${loginMode === 'driver'
+                    ? 'bg-primary-blue/20 border-primary-blue/50 text-primary-blue'
+                    : 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
+                  }
+                  disabled:opacity-50 disabled:cursor-not-allowed
+                `}
+              >
+                <User className="w-4 h-4" />
+                {loginMode === 'driver' ? 'Logged in as Driver' : 'Login as Driver'}
+              </button>
+
+              <button
+                onClick={handleLoginAsSponsor}
+                disabled={loggingIn || loginMode === 'sponsor'}
+                className={`
+                  w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
+                  ${loginMode === 'sponsor'
+                    ? 'bg-performance-green/20 border-performance-green/50 text-performance-green'
+                    : 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
+                  }
+                  disabled:opacity-50 disabled:cursor-not-allowed
+                `}
+              >
+                <Building2 className="w-4 h-4" />
+                {loginMode === 'sponsor' ? 'Logged in as Sponsor' : 'Login as Sponsor'}
+              </button>
+
+              {loginMode !== 'none' && (
+                <button
+                  onClick={handleLogout}
+                  disabled={loggingIn}
+                  className="w-full flex items-center gap-2 px-3 py-2 rounded-lg border border-red-500/30 bg-red-500/10 text-red-400 text-sm font-medium hover:bg-red-500/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <LogOut className="w-4 h-4" />
+                  Logout
+                </button>
+              )}
+            </div>
+
+            <p className="text-[10px] text-gray-600 mt-2">
+              Switch between driver and sponsor views for demo purposes.
+            </p>
+          </div>
         </div>
       )}
 
       {/* Collapsed state hint */}
       {!isExpanded && (
         <div className="px-4 py-2 text-xs text-gray-500">
-          Click ↑ to expand notification demo tools
+          Click ↑ to expand dev tools
         </div>
       )}
     </div>