Add frontend pages imporvements

frontend/src/components/ui/TenantSwitcher.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { useNavigate } from 'react-router-dom';
 import { useTenant } from '../../stores/tenant.store';
 import { useToast } from '../../hooks/ui/useToast';
-import { ChevronDown, Building2, Check, AlertCircle } from 'lucide-react';
+import { ChevronDown, Building2, Check, AlertCircle, Plus } from 'lucide-react';
 
 interface TenantSwitcherProps {
   className?: string;
@@ -13,6 +14,7 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
   className = '',
   showLabel = true,
 }) => {
+  const navigate = useNavigate();
   const [isOpen, setIsOpen] = useState(false);
   const [dropdownPosition, setDropdownPosition] = useState<{
     top: number;
@@ -23,7 +25,7 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
   }>({ top: 0, left: 0, width: 288, isMobile: false });
   const dropdownRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
-  
+
   const {
     currentTenant,
     availableTenants,
@@ -33,7 +35,7 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
     loadUserTenants,
     clearError,
   } = useTenant();
-  
+
   const { success: showSuccessToast, error: showErrorToast } = useToast();
 
   // Load tenants on mount
@@ -170,6 +172,12 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
     loadUserTenants();
   };
 
+  // Handle creating new tenant
+  const handleCreateNewTenant = () => {
+    setIsOpen(false);
+    navigate('/app/onboarding');
+  };
+
   // Don't render if no tenants available
   if (!availableTenants || availableTenants.length === 0) {
     return null;
@@ -229,11 +237,8 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
           {/* Header */}
           <div className={`border-b border-border-primary ${dropdownPosition.isMobile ? 'px-4 py-3' : 'px-3 py-2'}`}>
             <h3 className={`font-semibold text-text-primary ${dropdownPosition.isMobile ? 'text-base' : 'text-sm'}`}>
-              Switch Organization
+              Organizations
             </h3>
-            <p className={`text-text-secondary ${dropdownPosition.isMobile ? 'text-sm mt-1' : 'text-xs'}`}>
-              Select the organization you want to work with
-            </p>
           </div>
 
           {/* Error State */}
@@ -267,21 +272,25 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
               >
                 <div className="flex items-center justify-between">
                   <div className="flex-1 min-w-0">
-                    <div className="flex items-center space-x-2">
-                      <div className="w-8 h-8 bg-color-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
-                        <Building2 className="w-4 h-4 text-color-primary" />
+                    <div className="flex items-center space-x-3">
+                      <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
+                        tenant.id === currentTenant?.id
+                          ? 'bg-color-primary text-white'
+                          : 'bg-color-primary/10 text-color-primary'
+                      }`}>
+                        <Building2 className="w-4 h-4" />
                       </div>
                       <div className="min-w-0 flex-1">
                         <p className="text-sm font-medium text-text-primary truncate">
                           {tenant.name}
                         </p>
                         <p className="text-xs text-text-secondary truncate">
-                          {tenant.business_type} • {tenant.city}
+                          {tenant.city}
                         </p>
                       </div>
                     </div>
                   </div>
-                  
+
                   {tenant.id === currentTenant?.id && (
                     <Check className="w-4 h-4 text-color-success flex-shrink-0 ml-2" />
                   )}
@@ -294,14 +303,17 @@ export const TenantSwitcher: React.FC<TenantSwitcherProps> = ({
           <div className={`border-t border-border-primary bg-bg-secondary rounded-b-lg ${
             dropdownPosition.isMobile ? 'px-4 py-3' : 'px-3 py-2'
           }`}>
-            <p className={`text-text-secondary ${dropdownPosition.isMobile ? 'text-sm' : 'text-xs'}`}>
-              Need to add a new organization?{' '}
-              <button className={`text-color-primary hover:text-color-primary-dark underline ${
-                dropdownPosition.isMobile ? 'active:text-color-primary-dark' : ''
-              }`}>
-                Contact Support
-              </button>
-            </p>
+            <button
+              onClick={handleCreateNewTenant}
+              className={`w-full flex items-center justify-center gap-2 ${
+                dropdownPosition.isMobile ? 'px-4 py-3' : 'px-3 py-2'
+              } text-color-primary hover:text-color-primary-dark hover:bg-bg-tertiary rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-color-primary focus:ring-opacity-20`}
+            >
+              <Plus className="w-4 h-4" />
+              <span className={`font-medium ${dropdownPosition.isMobile ? 'text-sm' : 'text-xs'}`}>
+                Add New Organization
+              </span>
+            </button>
           </div>
         </div>,
         document.body