vibecarbon 0.1.0

package/carbon/src/client/components/AppSidebar.tsx

@@ -0,0 +1,760 @@
+import {
+  ArrowLeft,
+  BarChart2,
+  Bell,
+  Building2,
+  ChevronsUpDown,
+  Clock,
+  CreditCard,
+  ExternalLink,
+  FileText,
+  LayoutDashboard,
+  LogOut,
+  Mail,
+  MessageSquare,
+  Moon,
+  Palette,
+  Plus,
+  Settings,
+  Shield,
+  Sun,
+  TextCursorInput,
+  User,
+  Users,
+} from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar';
+import { useOrganizations } from '@/hooks/useOrganizations';
+import { useEnabledServices } from '@/hooks/useRunningServices';
+import { getServiceUrl } from '@/lib/admin-services';
+import { cn, getUserInitials } from '@/lib/utils';
+import { useAuth } from './auth/AuthProvider';
+import { Wordmark } from './Logo';
+
+const prefetchMap: Record<string, () => Promise<unknown>> = {
+  '/dashboard': () => import('@/pages/Dashboard'),
+  '/ui-components': () => import('@/pages/UIComponents'),
+  '/charts': () => import('@/pages/Charts'),
+  '/settings/profile': () => import('@/pages/settings/Profile'),
+  '/settings/billing': () => import('@/pages/settings/Billing'),
+  '/settings/security': () => import('@/pages/settings/Security'),
+  '/admin/dashboard': () => import('@/pages/admin/Dashboard'),
+  '/admin/organizations': () => import('@/pages/admin/Organizations'),
+  '/admin/users': () => import('@/pages/admin/Users'),
+  '/admin/notifications': () => import('@/pages/admin/Notifications'),
+  '/admin/logs': () => import('@/pages/admin/Logs'),
+  '/admin/theme': () => import('@/pages/admin/Theme'),
+  '/admin/settings': () => import('@/pages/admin/Settings'),
+  '/admin/infrastructure': () => import('@/pages/admin/Infrastructure'),
+  '/admin/jobs': () => import('@/pages/admin/Jobs'),
+  '/admin/contact': () => import('@/pages/admin/ContactSubmissions'),
+  '/admin/newsletter': () => import('@/pages/admin/Newsletter'),
+};
+
+function prefetch(path: string) {
+  prefetchMap[path]?.();
+}
+
+const menuItems = [
+  {
+    titleKey: 'sidebar.dashboard',
+    icon: LayoutDashboard,
+    path: '/dashboard',
+  },
+  {
+    titleKey: 'sidebar.uiComponents',
+    icon: TextCursorInput,
+    path: '/ui-components',
+  },
+  {
+    titleKey: 'sidebar.charts',
+    icon: BarChart2,
+    path: '/charts',
+  },
+];
+
+// Fixed-width icon container matching collapsed SidebarMenuButton size (40px)
+function IconSlot({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return (
+    <span className={`flex size-10 shrink-0 items-center justify-center rounded-md ${className}`}>
+      {children}
+    </span>
+  );
+}
+
+export function AppSidebar() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user, isSuperAdmin, signOut } = useAuth();
+  const { resolvedTheme, setTheme } = useTheme();
+  const { state, toggleSidebar } = useSidebar();
+  const { organizations, selectedOrganization, selectOrganization, createOrganization } =
+    useOrganizations();
+  const [isCreateOrgOpen, setIsCreateOrgOpen] = useState(false);
+  const [newOrgName, setNewOrgName] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+
+  // Derive sidebar mode from current path
+  const sidebarMode = location.pathname.startsWith('/admin')
+    ? 'admin'
+    : location.pathname.startsWith('/settings')
+      ? 'settings'
+      : location.pathname.startsWith('/organizations/')
+        ? 'org-settings'
+        : 'user';
+
+  // Extract orgId from path for org-settings mode
+  const orgIdMatch = location.pathname.match(/^\/organizations\/([^/]+)/);
+  const currentOrgId = orgIdMatch?.[1];
+  const currentOrg = organizations.find((org) => org.id === currentOrgId);
+
+  const { services: enabledServices } = useEnabledServices();
+  const isCollapsed = state === 'collapsed';
+
+  const handleSignOut = async () => {
+    await signOut();
+    navigate('/');
+  };
+
+  const handleExternalLink = (url: string) => {
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  };
+
+  const handleCreateOrganization = async () => {
+    if (!newOrgName.trim()) return;
+
+    setIsCreating(true);
+    setCreateError(null);
+
+    try {
+      await createOrganization(newOrgName.trim());
+      setNewOrgName('');
+      setIsCreateOrgOpen(false);
+    } catch (err) {
+      setCreateError(err instanceof Error ? err.message : 'Failed to create organization');
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const displayName = user?.user_metadata?.full_name || 'User';
+
+  return (
+    <>
+      <Sidebar collapsible="icon">
+        <SidebarHeader>
+          <button
+            type="button"
+            onClick={toggleSidebar}
+            className="flex h-full w-full cursor-pointer items-center"
+          >
+            <Wordmark textClassName="group-data-[collapsible=icon]:hidden" />
+          </button>
+        </SidebarHeader>
+
+        <SidebarContent>
+          {sidebarMode === 'user' && (
+            <>
+              {/* Organization Switcher */}
+              <SidebarGroup>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger className="flex w-full items-center gap-2 rounded-md border border-border text-left text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-10 transition-colors cursor-pointer group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0">
+                        <IconSlot>
+                          <Building2 className="size-4" />
+                        </IconSlot>
+                        <span className="flex-1 truncate font-medium group-data-[collapsible=icon]:hidden">
+                          {selectedOrganization?.name || t('sidebar.selectOrganization')}
+                        </span>
+                        <ChevronsUpDown className="mr-2 size-4 opacity-50 group-data-[collapsible=icon]:hidden" />
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" side={isCollapsed ? 'right' : 'bottom'}>
+                        {organizations.map((org) => {
+                          const isSelected = selectedOrganization?.id === org.id;
+                          return (
+                            <DropdownMenuItem
+                              key={org.id}
+                              onClick={() => selectOrganization(org)}
+                              className={`flex items-center justify-between ${isSelected ? 'bg-accent' : ''}`}
+                            >
+                              <span className="flex items-center gap-2">
+                                <Building2 className="size-4" />
+                                {org.name}
+                              </span>
+                              <button
+                                type="button"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  navigate(`/organizations/${org.id}/details`);
+                                }}
+                                className="p-1.5 -mr-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent-foreground/10 transition-colors"
+                              >
+                                <Settings className="size-3.5" />
+                              </button>
+                            </DropdownMenuItem>
+                          );
+                        })}
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          className="flex items-center gap-2"
+                          onClick={() => setIsCreateOrgOpen(true)}
+                        >
+                          <Plus className="size-4" />
+                          {t('sidebar.createOrganization')}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroup>
+
+              {/* Menu */}
+              <SidebarGroup>
+                <SidebarGroupLabel>{t('sidebar.menu')}</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {menuItems.map((item) => (
+                      <SidebarMenuItem key={item.titleKey}>
+                        <SidebarMenuButton
+                          isActive={location.pathname === item.path}
+                          onClick={() => navigate(item.path)}
+                          onMouseEnter={() => prefetch(item.path)}
+                          onFocus={() => prefetch(item.path)}
+                          tooltip={t(item.titleKey)}
+                          className="p-0"
+                        >
+                          <IconSlot>
+                            <item.icon className="size-4" />
+                          </IconSlot>
+                          <span className="group-data-[collapsible=icon]:hidden">
+                            {t(item.titleKey)}
+                          </span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </>
+          )}
+
+          {sidebarMode === 'settings' && (
+            <>
+              {/* Back to App */}
+              <SidebarGroup>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton
+                      onClick={() => navigate('/dashboard')}
+                      tooltip={t('common.back')}
+                      className="p-0"
+                    >
+                      <IconSlot>
+                        <ArrowLeft className="size-4" />
+                      </IconSlot>
+                      <span className="group-data-[collapsible=icon]:hidden">
+                        {t('common.back')}
+                      </span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroup>
+
+              {/* Settings Menu */}
+              <SidebarGroup>
+                <SidebarGroupLabel>{t('sidebar.userSettings')}</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/settings/profile'}
+                        onClick={() => navigate('/settings/profile')}
+                        onMouseEnter={() => prefetch('/settings/profile')}
+                        onFocus={() => prefetch('/settings/profile')}
+                        tooltip={t('sidebar.profile')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <User className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.profile')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/settings/billing'}
+                        onClick={() => navigate('/settings/billing')}
+                        onMouseEnter={() => prefetch('/settings/billing')}
+                        onFocus={() => prefetch('/settings/billing')}
+                        tooltip={t('sidebar.billing')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <CreditCard className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.billing')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/settings/security'}
+                        onClick={() => navigate('/settings/security')}
+                        onMouseEnter={() => prefetch('/settings/security')}
+                        onFocus={() => prefetch('/settings/security')}
+                        tooltip={t('sidebar.security')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <Shield className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.security')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </>
+          )}
+
+          {sidebarMode === 'org-settings' && currentOrg && (
+            <>
+              {/* Back to App */}
+              <SidebarGroup>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton
+                      onClick={() => navigate('/dashboard')}
+                      tooltip={t('common.back')}
+                      className="p-0"
+                    >
+                      <IconSlot>
+                        <ArrowLeft className="size-4" />
+                      </IconSlot>
+                      <span className="group-data-[collapsible=icon]:hidden">
+                        {t('common.back')}
+                      </span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroup>
+
+              {/* Org Settings Menu */}
+              <SidebarGroup>
+                <SidebarGroupLabel className="truncate">{currentOrg.name}</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === `/organizations/${currentOrgId}/details`}
+                        onClick={() => navigate(`/organizations/${currentOrgId}/details`)}
+                        tooltip={t('sidebar.orgDetails')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <Building2 className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.orgDetails')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === `/organizations/${currentOrgId}/members`}
+                        onClick={() => navigate(`/organizations/${currentOrgId}/members`)}
+                        tooltip={t('sidebar.members')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <Users className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.members')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </>
+          )}
+
+          {sidebarMode === 'admin' && (
+            <>
+              {/* Back to App */}
+              <SidebarGroup>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton
+                      onClick={() => navigate('/dashboard')}
+                      tooltip={t('common.back')}
+                      className="p-0"
+                    >
+                      <IconSlot>
+                        <ArrowLeft className="size-4" />
+                      </IconSlot>
+                      <span className="group-data-[collapsible=icon]:hidden">
+                        {t('common.back')}
+                      </span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroup>
+
+              {/* Admin Menu */}
+              <SidebarGroup>
+                <SidebarGroupLabel>{t('sidebar.superAdmin')}</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/admin/dashboard'}
+                        onClick={() => navigate('/admin/dashboard')}
+                        onMouseEnter={() => prefetch('/admin/dashboard')}
+                        onFocus={() => prefetch('/admin/dashboard')}
+                        tooltip={t('sidebar.overview')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <LayoutDashboard className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.overview')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/admin/organizations'}
+                        onClick={() => navigate('/admin/organizations')}
+                        onMouseEnter={() => prefetch('/admin/organizations')}
+                        onFocus={() => prefetch('/admin/organizations')}
+                        tooltip={t('sidebar.organizations')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <Building2 className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.organizations')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/admin/users'}
+                        onClick={() => navigate('/admin/users')}
+                        onMouseEnter={() => prefetch('/admin/users')}
+                        onFocus={() => prefetch('/admin/users')}
+                        tooltip={t('sidebar.users')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <Users className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.users')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/admin/notifications'}
+                        onClick={() => navigate('/admin/notifications')}
+                        onMouseEnter={() => prefetch('/admin/notifications')}
+                        onFocus={() => prefetch('/admin/notifications')}
+                        tooltip={t('sidebar.notifications')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <Bell className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.notifications')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/admin/logs'}
+                        onClick={() => navigate('/admin/logs')}
+                        onMouseEnter={() => prefetch('/admin/logs')}
+                        onFocus={() => prefetch('/admin/logs')}
+                        tooltip={t('sidebar.logs')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <FileText className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.logs')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/admin/theme'}
+                        onClick={() => navigate('/admin/theme')}
+                        onMouseEnter={() => prefetch('/admin/theme')}
+                        onFocus={() => prefetch('/admin/theme')}
+                        tooltip={t('sidebar.theme')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <Palette className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.theme')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/admin/jobs'}
+                        onClick={() => navigate('/admin/jobs')}
+                        onMouseEnter={() => prefetch('/admin/jobs')}
+                        onFocus={() => prefetch('/admin/jobs')}
+                        tooltip="Background Jobs"
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <Clock className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">Jobs</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/admin/contact'}
+                        onClick={() => navigate('/admin/contact')}
+                        onMouseEnter={() => prefetch('/admin/contact')}
+                        onFocus={() => prefetch('/admin/contact')}
+                        tooltip="Contact Submissions"
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <MessageSquare className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">Contact</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/admin/newsletter'}
+                        onClick={() => navigate('/admin/newsletter')}
+                        onMouseEnter={() => prefetch('/admin/newsletter')}
+                        onFocus={() => prefetch('/admin/newsletter')}
+                        tooltip="Newsletter"
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <Mail className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">Newsletter</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={location.pathname === '/admin/settings'}
+                        onClick={() => navigate('/admin/settings')}
+                        onMouseEnter={() => prefetch('/admin/settings')}
+                        onFocus={() => prefetch('/admin/settings')}
+                        tooltip={t('sidebar.settings')}
+                        className="p-0"
+                      >
+                        <IconSlot>
+                          <Settings className="size-4" />
+                        </IconSlot>
+                        <span className="group-data-[collapsible=icon]:hidden">
+                          {t('sidebar.settings')}
+                        </span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                    {enabledServices.map((service) => {
+                      const url = getServiceUrl(service);
+                      return (
+                        <SidebarMenuItem key={service.id}>
+                          <SidebarMenuButton
+                            onClick={url ? () => handleExternalLink(url) : undefined}
+                            tooltip={
+                              url
+                                ? service.description
+                                : 'Internal only — kubectl port-forward svc/traefik-dashboard 8080:8080 -n vibecarbon'
+                            }
+                            className={cn('p-0', !url && 'cursor-default opacity-50')}
+                          >
+                            <IconSlot>
+                              <service.icon className="size-4" />
+                            </IconSlot>
+                            <span className="flex-1 group-data-[collapsible=icon]:hidden">
+                              {service.name}
+                            </span>
+                            {url && (
+                              <ExternalLink className="mr-2 size-3 opacity-50 group-data-[collapsible=icon]:hidden" />
+                            )}
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      );
+                    })}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </>
+          )}
+        </SidebarContent>
+
+        <SidebarFooter>
+          {/* User Menu */}
+          <DropdownMenu>
+            <DropdownMenuTrigger className="group/user flex w-full items-center gap-2 rounded-md text-left text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-12 transition-colors group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0">
+              <IconSlot>
+                <Avatar size="sm">
+                  <AvatarFallback>{getUserInitials(user)}</AvatarFallback>
+                </Avatar>
+              </IconSlot>
+              <div className="flex flex-1 flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
+                <span className="truncate font-medium text-sidebar-foreground group-hover/user:text-sidebar-accent-foreground transition-colors">
+                  {displayName}
+                </span>
+                <span className="truncate text-xs text-sidebar-foreground/70 group-hover/user:text-sidebar-accent-foreground transition-colors">
+                  {user?.email}
+                </span>
+              </div>
+              <ChevronsUpDown className="mr-2 size-4 shrink-0 opacity-50 group-data-[collapsible=icon]:hidden" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="start"
+              side={isCollapsed ? 'right' : 'top'}
+              className="w-56"
+            >
+              <div className="flex items-start justify-between px-3 py-2">
+                <div>
+                  <p className="text-sm font-medium">{displayName}</p>
+                  <p className="text-xs text-muted-foreground truncate">{user?.email}</p>
+                </div>
+                <button
+                  type="button"
+                  onClick={toggleTheme}
+                  className="relative size-9 flex items-center justify-center rounded-md hover:bg-accent transition-colors"
+                >
+                  <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 absolute" />
+                  <Moon className="size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 absolute" />
+                  <span className="sr-only">{t('common.toggleTheme')}</span>
+                </button>
+              </div>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => navigate('/settings/profile')}>
+                <Settings className="size-4 mr-2" />
+                {t('common.settings')}
+              </DropdownMenuItem>
+              {isSuperAdmin && (
+                <DropdownMenuItem onClick={() => navigate('/admin/dashboard')}>
+                  <Shield className="size-4 mr-2" />
+                  {t('sidebar.superAdmin')}
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleSignOut}>
+                <LogOut className="size-4 mr-2" />
+                {t('common.signOut')}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarFooter>
+      </Sidebar>
+
+      <Dialog open={isCreateOrgOpen} onOpenChange={setIsCreateOrgOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('createOrg.title')}</DialogTitle>
+            <DialogDescription>{t('createOrg.description')}</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-2">
+            <div className="grid gap-2">
+              <Label htmlFor="org-name">{t('createOrg.nameLabel')}</Label>
+              <Input
+                id="org-name"
+                placeholder={t('createOrg.namePlaceholder')}
+                value={newOrgName}
+                onChange={(e) => {
+                  setNewOrgName(e.target.value);
+                  setCreateError(null);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !isCreating) {
+                    handleCreateOrganization();
+                  }
+                }}
+                disabled={isCreating}
+              />
+              {createError && <p className="text-sm text-destructive">{createError}</p>}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsCreateOrgOpen(false);
+                setCreateError(null);
+                setNewOrgName('');
+              }}
+              disabled={isCreating}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={handleCreateOrganization} disabled={!newOrgName.trim() || isCreating}>
+              {isCreating ? t('common.creating') : t('common.create')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}