@licklist/design 0.78.5-dev.91 → 0.78.5-dev.93

package/src/v2/shadcn/_reference/TopNavigation.tsx

@@ -0,0 +1,332 @@
+import React, { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import SidebarOpenIcon from './icons/SidebarOpenIcon';
+import SidebarCollapsedIcon from './icons/SidebarCollapsedIcon';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
+import { NotificationPanel } from './NotificationPanel';
+import { AIChatPanel } from './ai/AIChatPanel';
+import { useAIChatPanel } from '@/contexts/AIChatPanelContext';
+import { IconNew } from '../../icons';
+import { UserPanel } from './UserPanel';
+import { useSidebar } from '@/contexts/SidebarContext';
+import { useUser } from '@/contexts/UserContext';
+import { BookedLogoMark } from './logos/BookedLogoMark';
+import { BookedLogoFull } from './logos/BookedLogoFull';
+
+const TopNavigation: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { collapsed, toggleSidebar, mobileMenuOpen, toggleMobileMenu } = useSidebar();
+  const { profile, isLoading: isLoadingUser } = useUser();
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
+  const [isUserPanelOpen, setIsUserPanelOpen] = useState(false);
+  const [isNotificationPanelOpen, setIsNotificationPanelOpen] = useState(false);
+  const { isPanelOpen: isAIChatPanelOpen, setIsPanelOpen: setIsAIChatPanelOpen } = useAIChatPanel();
+  const [unreadNotificationCount, setUnreadNotificationCount] = useState(12);
+
+  const userName = profile?.fullName || "User";
+  const userInitials = profile?.initials || "-";
+  const avatarUrl = profile?.avatarUrl || null;
+  
+  const isInboxActive = location.pathname.startsWith('/inbox');
+  const isNotificationsActive = location.pathname === '/notifications';
+  const isProfilePage = location.pathname === '/profile' || location.pathname === '/profile/edit' || location.pathname === '/user-settings';
+  const isSidebarDisabled = isInboxActive || isNotificationsActive || isProfilePage;
+
+  const handleMarkAllRead = () => {
+    setUnreadNotificationCount(0);
+  };
+
+  const handleViewAllNotifications = () => {
+    navigate('/notifications');
+  };
+
+  return (
+    <TooltipProvider delayDuration={200}>
+      <header className="flex justify-between items-center bg-surface-secondary h-12 px-1 border-b border-border-primary w-full fixed top-0 left-0 right-0 z-30">
+        {/* Left Side - Sidebar Toggle & Logo */}
+        <div className="flex items-center gap-4 flex-1">
+          {/* Mobile Burger Menu */}
+          <button 
+            className={`flex sm:hidden justify-center items-center bg-surface-primary w-10 h-10 rounded-md transition-colors ${
+              isSidebarDisabled 
+                ? 'opacity-30 cursor-not-allowed' 
+                : 'hover:bg-surface-primary-hover'
+            }`}
+            onClick={isSidebarDisabled ? undefined : toggleMobileMenu}
+            aria-label="Toggle mobile menu"
+            disabled={isSidebarDisabled}
+          >
+            {mobileMenuOpen ? (
+              <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+                <rect x="9" y="22" width="18" height="2" transform="rotate(-45 9 22)" className="fill-fill-primary"/>
+                <rect x="10" y="9" width="18" height="2" transform="rotate(45 10 9)" className="fill-fill-primary"/>
+              </svg>
+            ) : (
+              <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+                <rect x="7" y="20" width="18" height="2" className="fill-fill-primary"/>
+                <rect x="7" y="15" width="18" height="2" className="fill-fill-primary"/>
+                <rect x="7" y="10" width="18" height="2" className="fill-fill-primary"/>
+              </svg>
+            )}
+          </button>
+
+          {/* Desktop Sidebar Toggle */}
+          {isSidebarDisabled ? (
+            <button 
+              className="hidden sm:flex justify-center items-center bg-surface-primary w-10 h-10 rounded-md opacity-30 cursor-not-allowed transition-colors"
+              aria-label="Toggle sidebar"
+              disabled
+            >
+              {collapsed ? <SidebarCollapsedIcon /> : <SidebarOpenIcon />}
+            </button>
+          ) : (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button 
+                  className="hidden sm:flex justify-center items-center bg-surface-primary w-10 h-10 rounded-md hover:bg-surface-primary-hover transition-colors"
+                  onClick={toggleSidebar}
+                  aria-label="Toggle sidebar"
+                >
+                  {collapsed ? <SidebarCollapsedIcon /> : <SidebarOpenIcon />}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" sideOffset={8} className="mx-2">
+                <p>{collapsed ? 'Expand ' : 'Collapse '}<span className="font-bold">{collapsed ? ']' : '['}</span></p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        
+        {/* Logo - Desktop: Full logo, Mobile: Just the mark */}
+        <BookedLogoMark className="sm:hidden" size={36} />
+        <BookedLogoFull className="hidden sm:block h-7" />
+      </div>
+
+        {/* Right Side - User Avatar, Inbox, Notifications, Help */}
+        <div className="flex justify-end items-center gap-2 py-1 px-1">
+          {/* User Avatar */}
+          <Tooltip open={isUserPanelOpen ? false : (hoveredItem === 'avatar' ? true : false)}>
+            <TooltipTrigger asChild>
+              <button 
+                className={`flex flex-col justify-center items-center p-1 rounded-lg transition-colors ${
+                  isUserPanelOpen 
+                    ? 'bg-gradient-to-tr from-gradient-stop1 via-gradient-stop2 to-gradient-stop3' 
+                    : 'bg-surface-primary hover:bg-surface-primary-hover'
+                }`}
+                onMouseEnter={() => setHoveredItem('avatar')}
+                onMouseLeave={() => setHoveredItem(null)}
+                onClick={() => setIsUserPanelOpen(!isUserPanelOpen)}
+              >
+                <div className="w-8 h-8 relative flex items-center justify-center overflow-hidden rounded-full">
+                  {avatarUrl ? (
+                    <img src={avatarUrl} alt="Profile" className="w-full h-full object-cover" />
+                  ) : (
+                    <>
+                      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="absolute">
+                        <circle cx="16" cy="16" r="15" className={isUserPanelOpen ? "fill-fill-primary-alt stroke-fill-primary-alt" : "fill-fill-secondary stroke-fill-secondary"} fillOpacity="0.2" strokeWidth="2" />
+                      </svg>
+                      <div className={`text-[10px] font-extrabold leading-[8px] relative mt-0.5 ${isUserPanelOpen ? 'text-label-primary-alt' : 'text-label-secondary'}`}>
+                        {userInitials}
+                      </div>
+                    </>
+                  )}
+                </div>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={8} className="mx-2">
+              <p>Hey {userName}</p>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Inbox */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button 
+                className={`relative flex justify-center items-center gap-0.5 rounded-lg transition-colors min-w-10 h-10 px-1 ${
+                  isInboxActive
+                    ? 'bg-gradient-to-tr from-gradient-stop1 via-gradient-stop2 to-gradient-stop3'
+                    : 'bg-surface-primary hover:bg-surface-primary-hover'
+                }`}
+                onMouseEnter={() => setHoveredItem('inbox')}
+                onMouseLeave={() => setHoveredItem(null)}
+                onClick={() => navigate('/inbox')}
+              >
+                <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
+                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+                    {hoveredItem === 'inbox' && !isInboxActive && (
+                      <path d="M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z" className="fill-fill-secondary" fillOpacity="0.3"/>
+                    )}
+                    {isInboxActive && (
+                      <path d="M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z" className="fill-fill-primary-alt" fillOpacity="0.3"/>
+                    )}
+                    <path d="M8.02381 7.78307C8.12549 7.32553 8.5313 7 9 7H23C23.4687 7 23.8745 7.32553 23.9762 7.78307L25.9762 16.7831C25.992 16.8543 26 16.927 26 17V24C26 24.5523 25.5523 25 25 25H7C6.44772 25 6 24.5523 6 24V17C6 16.927 6.00799 16.8543 6.02381 16.7831L8.02381 7.78307ZM9.80217 9L8.24662 16H13C13 17.6569 14.3431 19 16 19C17.6569 19 19 17.6569 19 16H23.7534L22.1978 9H9.80217ZM20.584 18C19.8124 19.7659 18.0503 21 16 21C13.9497 21 12.1876 19.7659 11.416 18H8V23H24V18H20.584Z" className={isInboxActive ? "fill-fill-primary-alt" : "fill-fill-secondary"}/>
+                  </svg>
+                </div>
+                {3 > 0 && (
+                  <>
+                    {/* Dot indicator for very small screens */}
+                    <div className={`xs:hidden absolute top-0.5 right-0.5 w-2.5 h-2.5 rounded-full ${
+                      isInboxActive 
+                        ? 'bg-label-primary-alt/60' 
+                        : 'bg-surface-colour-green-soft border border-colour-overlay'
+                    }`} />
+                    {/* Full count for larger screens */}
+                    <div className={`hidden xs:flex justify-center items-center px-2 py-1 rounded-full border mr-1 ${
+                      isInboxActive 
+                        ? 'bg-label-primary-alt/30 border-border-primary/30' 
+                        : 'bg-surface-colour-green-soft border-colour-overlay'
+                    }`}>
+                      <span className={`text-[10px] font-semibold leading-[13px] font-mono ${
+                        isInboxActive ? 'text-label-primary-alt' : 'text-label-primary'
+                      }`}>3</span>
+                    </div>
+                  </>
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={8} className="mx-2">
+              <p>Inbox</p>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Notifications */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button 
+                className={`relative flex justify-center items-center gap-0.5 rounded-lg transition-colors min-w-10 h-10 px-1 ${
+                  isNotificationPanelOpen || isNotificationsActive
+                    ? 'bg-gradient-to-tr from-gradient-stop1 via-gradient-stop2 to-gradient-stop3' 
+                    : 'bg-surface-primary hover:bg-surface-primary-hover'
+                }`}
+                onMouseEnter={() => setHoveredItem('notifications')}
+                onMouseLeave={() => setHoveredItem(null)}
+                onClick={() => setIsNotificationPanelOpen(!isNotificationPanelOpen)}
+              >
+                <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
+                  {isNotificationPanelOpen || isNotificationsActive ? (
+                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+                      <path d="M22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14V22H22V14ZM24 22.6667L24.4 23.2C24.5657 23.4209 24.5209 23.7343 24.3 23.9C24.2135 23.9649 24.1082 24 24 24H8C7.72386 24 7.5 23.7761 7.5 23.5C7.5 23.3918 7.53509 23.2865 7.6 23.2L8 22.6667V14C8 9.58172 11.5817 6 16 6C20.4183 6 24 9.58172 24 14V22.6667ZM13.5 25H18.5C18.5 26.3807 17.3807 27.5 16 27.5C14.6193 27.5 13.5 26.3807 13.5 25Z" className="fill-fill-primary-alt" />
+                    </svg>
+                  ) : hoveredItem === 'notifications' ? (
+                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+                      <path d="M22.4874 15.5353C23.2901 12.3202 21.3346 9.06324 18.1196 8.26054C14.9045 7.45785 11.6475 9.41342 10.8448 12.6284L8.90696 20.3902L20.5496 23.297L22.4874 15.5353ZM22.3285 24.4283L22.5874 25.0426C22.6947 25.2971 22.5753 25.5903 22.3208 25.6976C22.2212 25.7396 22.1105 25.7481 22.0055 25.7219L6.48205 21.8461C6.21413 21.7792 6.05118 21.5078 6.11806 21.2399C6.14427 21.1349 6.20382 21.0413 6.28775 20.9731L6.80502 20.5525L8.9044 12.144C9.97467 7.85727 14.3173 5.24985 18.604 6.32011C22.8907 7.39038 25.4981 11.733 24.4279 16.0197L22.3285 24.4283ZM15.4569 25.1176L20.308 26.3288C19.9735 27.6683 18.6164 28.4832 17.2768 28.1487C15.9373 27.8143 15.1224 26.4572 15.4569 25.1176Z" className="fill-fill-secondary"/>
+                    </svg>
+                  ) : (
+                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+                      <path d="M22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14V22H22V14ZM24 22.6667L24.4 23.2C24.5657 23.4209 24.5209 23.7343 24.3 23.9C24.2135 23.9649 24.1082 24 24 24H8C7.72386 24 7.5 23.7761 7.5 23.5C7.5 23.3918 7.53509 23.2865 7.6 23.2L8 22.6667V14C8 9.58172 11.5817 6 16 6C20.4183 6 24 9.58172 24 14V22.6667ZM13.5 25H18.5C18.5 26.3807 17.3807 27.5 16 27.5C14.6193 27.5 13.5 26.3807 13.5 25Z" className="fill-fill-secondary"/>
+                    </svg>
+                  )}
+                </div>
+                {unreadNotificationCount > 0 && (
+                  <>
+                    {/* Dot indicator for very small screens */}
+                    <div className={`xs:hidden absolute top-0.5 right-0.5 w-2.5 h-2.5 rounded-full ${
+                      isNotificationPanelOpen || isNotificationsActive
+                        ? 'bg-label-primary-alt/60' 
+                        : 'bg-surface-colour-orange-soft border border-colour-overlay'
+                    }`} />
+                    {/* Full count for larger screens */}
+                    <div className={`hidden xs:flex justify-center items-center px-2 py-1 rounded-full border mr-1 ${
+                      isNotificationPanelOpen || isNotificationsActive
+                        ? 'bg-label-primary-alt/30 border-border-primary/30' 
+                        : 'bg-surface-colour-orange-soft border-colour-overlay'
+                    }`}>
+                      <span className={`text-[10px] font-semibold leading-[13px] font-mono ${
+                        isNotificationPanelOpen || isNotificationsActive ? 'text-label-primary-alt' : 'text-label-primary'
+                      }`}>
+                        {unreadNotificationCount}
+                      </span>
+                    </div>
+                  </>
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={8} className="mx-2">
+              <p>Notifications</p>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* AI Assistant */}
+          <Tooltip open={isAIChatPanelOpen ? false : (hoveredItem === 'ai' ? true : false)}>
+            <TooltipTrigger asChild>
+              <button 
+                className={`flex justify-center items-center w-10 h-10 rounded-lg transition-colors ${
+                  isAIChatPanelOpen
+                    ? 'bg-gradient-to-tr from-gradient-stop1 via-gradient-stop2 to-gradient-stop3'
+                    : 'bg-surface-primary hover:bg-surface-primary-hover'
+                }`}
+                onMouseEnter={() => setHoveredItem('ai')}
+                onMouseLeave={() => setHoveredItem(null)}
+                onClick={() => setIsAIChatPanelOpen(!isAIChatPanelOpen)}
+              >
+                <div className={`w-8 h-8 flex items-center justify-center ${
+                  isAIChatPanelOpen ? 'text-fill-primary-alt' : hoveredItem === 'ai' ? 'bkit-icon-glow' : 'text-fill-secondary'
+                }`}>
+                  <IconNew size={32} />
+                </div>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={8} className="mx-2">
+              <p>Brad Bot</p>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Help */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button 
+                className="flex justify-center items-center bg-surface-primary w-10 h-10 rounded-lg hover:bg-surface-primary-hover transition-colors"
+                onMouseEnter={() => setHoveredItem('help')}
+                onMouseLeave={() => setHoveredItem(null)}
+                onClick={() => window.open('https://bookedit.zohodesk.com/portal/en/kb/bookedit', '_blank')}
+              >
+                <div className="w-8 h-8 flex items-center justify-center">
+                  {hoveredItem === 'help' ? (
+                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+                      <circle opacity="0.1" cx="16" cy="16" r="10" className="fill-fill-secondary"/>
+                      <path d="M16 5C22.0751 5 27 9.92487 27 16C27 22.0751 22.0751 27 16 27C9.92487 27 5 22.0751 5 16C5 9.92487 9.92487 5 16 5ZM16 7C11.0294 7 7 11.0294 7 16C7 20.9706 11.0294 25 16 25C20.9706 25 25 20.9706 25 16C25 11.0294 20.9706 7 16 7Z" className="fill-fill-secondary"/>
+                      <path d="M14.8184 17.6655V17.5086C14.8214 16.97 14.8691 16.5407 14.9615 16.2206C15.0569 15.9005 15.1954 15.642 15.377 15.445C15.5585 15.2481 15.777 15.0696 16.0325 14.9095C16.2233 14.7864 16.3941 14.6587 16.5449 14.5263C16.6957 14.394 16.8158 14.2478 16.905 14.0878C16.9943 13.9247 17.0389 13.7431 17.0389 13.543C17.0389 13.3307 16.9881 13.1445 16.8865 12.9844C16.785 12.8244 16.648 12.7013 16.4757 12.6151C16.3064 12.5289 16.1187 12.4859 15.9125 12.4859C15.7124 12.4859 15.5231 12.5305 15.3446 12.6197C15.1661 12.7059 15.0199 12.8352 14.9061 13.0075C14.7922 13.1768 14.7306 13.3876 14.7214 13.64H12.8379C12.8533 13.0245 13.001 12.5166 13.2811 12.1165C13.5611 11.7134 13.932 11.4133 14.3936 11.2163C14.8553 11.0163 15.3646 10.9163 15.9217 10.9163C16.5342 10.9163 17.0758 11.0178 17.5467 11.2209C18.0176 11.421 18.3869 11.7118 18.6547 12.0935C18.9224 12.4751 19.0563 12.9352 19.0563 13.4738C19.0563 13.8339 18.9963 14.1539 18.8762 14.434C18.7593 14.711 18.5946 14.9572 18.3823 15.1727C18.1699 15.385 17.9191 15.5774 17.6298 15.7497C17.3867 15.8944 17.1866 16.0452 17.0297 16.2021C16.8758 16.3591 16.7604 16.5407 16.6834 16.7469C16.6096 16.9531 16.5711 17.207 16.568 17.5086V17.6655H14.8184ZM15.7324 20.6201C15.4247 20.6201 15.1615 20.5124 14.943 20.2969C14.7276 20.0784 14.6214 19.8168 14.6245 19.5121C14.6214 19.2105 14.7276 18.952 14.943 18.7366C15.1615 18.5211 15.4247 18.4134 15.7324 18.4134C16.0248 18.4134 16.2818 18.5211 16.5034 18.7366C16.725 18.952 16.8373 19.2105 16.8404 19.5121C16.8373 19.7153 16.7834 19.9015 16.6788 20.0707C16.5772 20.2369 16.4434 20.3708 16.2772 20.4724C16.111 20.5709 15.9294 20.6201 15.7324 20.6201Z" className="fill-fill-secondary"/>
+                    </svg>
+                  ) : (
+                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+                      <path d="M16 5C22.0751 5 27 9.92487 27 16C27 22.0751 22.0751 27 16 27C9.92487 27 5 22.0751 5 16C5 9.92487 9.92487 5 16 5ZM16 7C11.0294 7 7 11.0294 7 16C7 20.9706 11.0294 25 16 25C20.9706 25 25 20.9706 25 16C25 11.0294 20.9706 7 16 7Z" className="fill-fill-secondary"/>
+                      <path d="M15.7324 18.4131C16.0246 18.4131 16.2814 18.5211 16.5029 18.7363C16.7244 18.9517 16.8367 19.2103 16.8398 19.5117C16.8368 19.7147 16.7832 19.9011 16.6787 20.0703C16.5772 20.2365 16.4435 20.3711 16.2773 20.4727C16.1112 20.5711 15.9293 20.6201 15.7324 20.6201C15.4248 20.6201 15.1618 20.5122 14.9434 20.2969C14.7279 20.0784 14.6209 19.8164 14.624 19.5117C14.621 19.2103 14.728 18.9517 14.9434 18.7363C15.1618 18.5211 15.4248 18.4131 15.7324 18.4131ZM15.9219 10.916C16.5342 10.916 17.0761 11.0176 17.5469 11.2207C18.0177 11.4207 18.3866 11.7122 18.6543 12.0938C18.922 12.4753 19.0566 12.9351 19.0566 13.4736C19.0566 13.8336 18.9959 14.1536 18.876 14.4336C18.759 14.7106 18.5942 14.9574 18.3818 15.1729C18.1695 15.3851 17.919 15.5777 17.6299 15.75C17.3867 15.8946 17.1863 16.0452 17.0293 16.2021C16.8755 16.3591 16.7605 16.5409 16.6836 16.7471C16.6098 16.9532 16.5714 17.2072 16.5684 17.5088V17.665H14.8184V17.5088C14.8214 16.9704 14.8687 16.5408 14.9609 16.2207C15.0563 15.9007 15.1954 15.6423 15.377 15.4453C15.5585 15.2483 15.7768 15.0692 16.0322 14.9092C16.223 14.7861 16.3941 14.6587 16.5449 14.5264C16.6957 14.394 16.816 14.2479 16.9053 14.0879C16.9945 13.9248 17.0391 13.743 17.0391 13.543C17.0391 13.3307 16.9882 13.1444 16.8867 12.9844C16.7852 12.8244 16.6479 12.7014 16.4756 12.6152C16.3063 12.5291 16.1183 12.4854 15.9121 12.4854C15.7121 12.4854 15.5232 12.5309 15.3447 12.6201C15.1662 12.7063 15.0201 12.8355 14.9062 13.0078C14.7925 13.177 14.7309 13.3875 14.7217 13.6396H12.8379C12.8533 13.0242 13.0012 12.5162 13.2812 12.1162C13.5613 11.7132 13.932 11.4127 14.3936 11.2158C14.8552 11.0158 15.3649 10.916 15.9219 10.916Z" className="fill-fill-secondary"/>
+                    </svg>
+                  )}
+                </div>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={8} className="mx-2">
+              <p>Help & FAQ's</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </header>
+
+
+      {/* User Panel */}
+      <UserPanel 
+        isOpen={isUserPanelOpen}
+        onClose={() => setIsUserPanelOpen(false)}
+        userName={userName}
+      />
+
+      {/* Notification Panel */}
+      <NotificationPanel 
+        isOpen={isNotificationPanelOpen} 
+        onClose={() => setIsNotificationPanelOpen(false)}
+        latestCount={Math.min(unreadNotificationCount, 12)}
+        onMarkAllRead={handleMarkAllRead}
+        onViewAll={handleViewAllNotifications}
+      />
+
+      {/* AI Chat Panel */}
+      <AIChatPanel
+        isOpen={isAIChatPanelOpen}
+        onClose={() => setIsAIChatPanelOpen(false)}
+      />
+    </TooltipProvider>
+  );
+};
+
+export default TopNavigation;

package/src/v2/shadcn/_reference/UserActivityHistory.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { supabase } from '@/integrations/supabase/client';
+import { format } from 'date-fns';
+import EmptyState from './EmptyState';
+import { useNavigate } from 'react-router-dom';
+import { TablePagination } from './ui/table-pagination';
+import LoadingSpinner from './LoadingSpinner';
+
+interface ActivityLog {
+  id: string;
+  user_id: string;
+  action_type: string;
+  action_description: string;
+  entity_type: string | null;
+  entity_id: string | null;
+  entity_friendly_id: string | null;
+  created_at: string;
+}
+
+interface UserActivityHistoryProps {
+  userId: string;
+  userCreatedAt?: string;
+}
+
+const ITEMS_PER_PAGE = 24;
+
+const UserActivityHistory: React.FC<UserActivityHistoryProps> = ({ userId, userCreatedAt }) => {
+  const navigate = useNavigate();
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const { data: activities = [], isLoading } = useQuery({
+    queryKey: ['user-activity-log', userId, userCreatedAt],
+    queryFn: async () => {
+      // Fetch actions BY the user and actions ON the user (e.g. role changes by admins)
+      const [byUser, onUser] = await Promise.all([
+        supabase
+          .from('user_activity_log')
+          .select('id, user_id, action_type, action_description, entity_type, entity_id, entity_friendly_id, created_at')
+          .eq('user_id', userId)
+          .order('created_at', { ascending: false })
+          .limit(200),
+        supabase
+          .from('user_activity_log')
+          .select('id, user_id, action_type, action_description, entity_type, entity_id, entity_friendly_id, created_at')
+          .eq('entity_type', 'user')
+          .eq('entity_id', userId)
+          .neq('user_id', userId)
+          .order('created_at', { ascending: false })
+          .limit(200),
+      ]);
+
+      if (byUser.error) throw byUser.error;
+
+      const byUserLogs = (byUser.data || []) as ActivityLog[];
+      const onUserLogs = (onUser.error ? [] : onUser.data || []) as ActivityLog[];
+
+      // Merge and deduplicate by id
+      const allMap = new Map<string, ActivityLog>();
+      for (const log of [...byUserLogs, ...onUserLogs]) {
+        allMap.set(log.id, log);
+      }
+
+      const logs = Array.from(allMap.values());
+
+      // Append a synthetic "User created" entry
+      if (userCreatedAt) {
+        logs.push({
+          id: 'user-created',
+          user_id: '',
+          action_type: 'user_created',
+          action_description: 'User account created',
+          entity_type: 'user',
+          entity_id: userId,
+          entity_friendly_id: null,
+          created_at: userCreatedAt,
+        });
+      }
+
+      // Sort by date descending
+      logs.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
+
+      return logs;
+    },
+    enabled: !!userId,
+  });
+
+  const getEntityLink = (activity: ActivityLog): string | null => {
+    if (!activity.entity_id || !activity.entity_type) return null;
+    switch (activity.entity_type) {
+      case 'customer': return `/admin/customers/${activity.entity_id}`;
+      case 'user': return `/admin/users/${activity.entity_id}`;
+      case 'order':
+      case 'booking': return null;
+      case 'product': return null;
+      default: return null;
+    }
+  };
+
+  const formatEntityId = (activity: ActivityLog): string | null => {
+    if (activity.entity_friendly_id) return activity.entity_friendly_id;
+    if (!activity.entity_id) return null;
+    return activity.entity_id.substring(0, 8).toUpperCase();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <LoadingSpinner size="sm" />
+      </div>
+    );
+  }
+
+  if (activities.length === 0) {
+    return (
+      <EmptyState
+        icon={
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mb-4">
+            <path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM12.75 7V12.1893L16.0303 15.4697L14.9697 16.5303L11.25 12.8107V7H12.75Z" fill="var(--fill-secondary)" />
+          </svg>
+        }
+        title="No activity recorded"
+        description="Key actions taken by this user will appear here."
+      />
+    );
+  }
+
+  const totalPages = Math.ceil(activities.length / ITEMS_PER_PAGE);
+  const paginatedActivities = activities.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  return (
+    <div className="flex flex-col w-full overflow-hidden">
+      {/* Table Header */}
+      <div className="flex h-12 items-center self-stretch bg-surface-secondary px-4 border-b border-border-primary gap-4">
+        <div className="w-[100px] flex-shrink-0 text-label-secondary text-[13px] font-medium leading-4">
+          Date / Time
+        </div>
+        <div className="flex-1 text-label-secondary text-[13px] font-medium leading-4">
+          Action
+        </div>
+        <div className="w-[140px] flex-shrink-0 text-label-secondary text-[13px] font-medium leading-4">
+          Reference
+        </div>
+      </div>
+
+      {/* Table Body */}
+      <div className="flex flex-col">
+        {paginatedActivities.map((activity) => {
+          const entityId = formatEntityId(activity);
+          const link = getEntityLink(activity);
+
+          return (
+            <div
+              key={activity.id}
+              className="flex items-center self-stretch px-4 py-4 border-b border-border-primary last:border-b-0 hover:bg-surface-primary-hover transition-colors gap-4"
+            >
+              <div className="w-[100px] flex-shrink-0 flex flex-col items-start">
+                <span className="text-label-secondary text-[11px] font-mono leading-4">
+                  {format(new Date(activity.created_at), 'dd/MM/yyyy')}
+                </span>
+                <span className="text-label-secondary text-[11px] font-mono leading-4">
+                  {format(new Date(activity.created_at), 'HH:mm')}
+                </span>
+              </div>
+              <div className="flex-1 text-label-primary text-[13px] leading-4">
+                {activity.action_description}
+              </div>
+              <div className="w-[140px] flex-shrink-0">
+                {entityId ? (
+                  link ? (
+                    <button
+                      onClick={() => navigate(link)}
+                      className="text-label-action text-[13px] font-mono leading-4 hover:underline"
+                    >
+                      {entityId}
+                    </button>
+                  ) : (
+                    <span className="text-label-secondary text-[13px] font-mono leading-4">
+                      {entityId}
+                    </span>
+                  )
+                ) : (
+                  <span className="text-label-secondary text-[13px] leading-4">—</span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <TablePagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalItems={activities.length}
+          itemsPerPage={ITEMS_PER_PAGE}
+          onPageChange={setCurrentPage}
+          entityName="entries"
+        />
+      )}
+    </div>
+  );
+};
+
+export default UserActivityHistory;

package/src/v2/shadcn/_reference/UserLanguageSettings.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group';
+import { Label } from './ui/label';
+import { IconGlobe } from '../../icons';
+import { AVAILABLE_LANGUAGES } from '@/i18n';
+import { useAppSettings } from '@/contexts/AppSettingsContext';
+import { supabase } from '@/integrations/supabase/client';
+import { useUser } from '@/contexts/UserContext';
+
+const UserLanguageSettings: React.FC = () => {
+  const { profile, refreshProfile } = useUser();
+  const { settings } = useAppSettings();
+  const [saving, setSaving] = useState(false);
+
+  const currentValue = profile?.languagePreference || 'default';
+
+  // Only show languages enabled globally
+  const availableLanguages = AVAILABLE_LANGUAGES.filter(
+    lang => settings.supportedLanguages.includes(lang.code)
+  );
+
+  // If translation not enabled, don't show
+  if (!settings.languageTranslationEnabled) {
+    return null;
+  }
+
+  const handleChange = async (value: string) => {
+    setSaving(true);
+    try {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) return;
+
+      await supabase
+        .from('profiles')
+        .update({ language_preference: value } as any)
+        .eq('id', user.id);
+
+      await refreshProfile();
+    } catch (error) {
+      console.error('Error updating language preference:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 p-2 self-stretch bg-surface-primary rounded-lg">
+      <h3 className="text-label-primary text-xl font-semibold px-2">Language</h3>
+      
+      <RadioGroup value={currentValue} onValueChange={handleChange} className="flex flex-col gap-2">
+        <Label 
+          htmlFor="lang-default" 
+          className="flex p-2 items-center gap-3 rounded-lg cursor-pointer hover:bg-surface-primary-hover transition-colors"
+        >
+          <div className="flex flex-col items-center justify-center gap-2 px-2 pb-2 pt-1 bg-surface-secondary rounded flex-shrink-0 w-[60px]">
+            <IconGlobe size={24} className="text-fill-secondary" />
+            <div className="flex items-center justify-center w-full">
+              <RadioGroupItem value="default" id="lang-default" />
+            </div>
+          </div>
+          <div className="flex flex-col flex-1 min-w-0">
+            <span className="text-label-primary text-base font-semibold leading-tight">Use Dashboard Default</span>
+            <p className="text-label-secondary text-sm font-normal leading-normal">
+              Use the language set by the dashboard you're viewing.
+            </p>
+          </div>
+        </Label>
+
+        {availableLanguages.map((lang) => (
+          <Label 
+            key={lang.code}
+            htmlFor={`lang-${lang.code}`} 
+            className="flex p-2 items-center gap-3 rounded-lg cursor-pointer hover:bg-surface-primary-hover transition-colors"
+          >
+            <div className="flex flex-col items-center justify-center gap-2 px-2 pb-2 pt-1 bg-surface-secondary rounded flex-shrink-0 w-[60px]">
+              <span className="text-label-secondary text-sm font-medium uppercase">{lang.code}</span>
+              <div className="flex items-center justify-center w-full">
+                <RadioGroupItem value={lang.code} id={`lang-${lang.code}`} />
+              </div>
+            </div>
+            <div className="flex flex-col flex-1 min-w-0">
+              <span className="text-label-primary text-base font-semibold leading-tight">{lang.label}</span>
+              <p className="text-label-secondary text-sm font-normal leading-normal">
+                {lang.dir === 'rtl' ? 'Right-to-left layout' : 'Left-to-right layout'}
+              </p>
+            </div>
+          </Label>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+};
+
+export default UserLanguageSettings;