4e6467ffb0
- Build complete Next.js CRM for commercial real estate - Add authentication with JWT sessions and role-based access - Add GoHighLevel API integration for contacts, conversations, opportunities - Add AI-powered Control Center with tool calling - Add Setup page with onboarding checklist (/setup) - Add sidebar navigation with Setup menu item - Fix type errors in onboarding API, GHL services, and control center tools - Add Prisma schema with SQLite for local development - Add UI components with clay morphism design system Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
686 lines
27 KiB
TypeScript
686 lines
27 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import {
|
|
LayoutDashboard,
|
|
Users,
|
|
MessageSquare,
|
|
Target,
|
|
Zap,
|
|
UserPlus,
|
|
Store,
|
|
Wrench,
|
|
BarChart3,
|
|
Settings,
|
|
Shield,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
LogOut,
|
|
Building2,
|
|
Bell,
|
|
Search,
|
|
Menu,
|
|
X,
|
|
Loader2,
|
|
Sparkles,
|
|
ListChecks,
|
|
} from 'lucide-react';
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { AuthProvider, useAuth } from '@/lib/hooks/useAuth';
|
|
import { RealtimeProvider, useRealtimeContext } from '@/components/realtime/RealtimeProvider';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const setupNavItems = [
|
|
{ href: '/setup', label: 'Setup', icon: ListChecks },
|
|
];
|
|
|
|
const navItems = [
|
|
{ href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ href: '/control-center', label: 'Control Center', icon: Sparkles },
|
|
{ href: '/contacts', label: 'Contacts', icon: Users },
|
|
{ href: '/conversations', label: 'Conversations', icon: MessageSquare },
|
|
{ href: '/opportunities', label: 'Opportunities', icon: Target },
|
|
{ href: '/automations', label: 'Automations', icon: Zap },
|
|
{ href: '/leads', label: 'Get Leads', icon: UserPlus },
|
|
{ href: '/marketplace', label: 'Marketplace', icon: Store },
|
|
{ href: '/tools', label: 'Tools', icon: Wrench },
|
|
{ href: '/reporting', label: 'Reporting', icon: BarChart3 },
|
|
];
|
|
|
|
const bottomNavItems = [
|
|
{ href: '/settings', label: 'Settings', icon: Settings },
|
|
{ href: '/admin', label: 'Admin', icon: Shield, adminOnly: true },
|
|
];
|
|
|
|
// Tooltip component for collapsed sidebar
|
|
function Tooltip({ children, content, show }: { children: React.ReactNode; content: string; show: boolean }) {
|
|
if (!show) return <>{children}</>;
|
|
|
|
return (
|
|
<div className="relative group">
|
|
{children}
|
|
<div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-2 py-1 bg-foreground text-background text-xs rounded-md whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 shadow-lg">
|
|
{content}
|
|
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-foreground" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Search Modal Component
|
|
function SearchModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (isOpen && inputRef.current) {
|
|
inputRef.current.focus();
|
|
}
|
|
}, [isOpen]);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
if (!isOpen) return;
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [isOpen, onClose]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const searchCategories = [
|
|
{ label: 'Contacts', icon: Users, shortcut: 'C' },
|
|
{ label: 'Conversations', icon: MessageSquare, shortcut: 'V' },
|
|
{ label: 'Opportunities', icon: Target, shortcut: 'O' },
|
|
{ label: 'Settings', icon: Settings, shortcut: 'S' },
|
|
];
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]">
|
|
<div
|
|
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
aria-hidden="true"
|
|
/>
|
|
<div
|
|
className="relative w-full max-w-lg mx-4 bg-background rounded-2xl shadow-[8px_8px_16px_#b8bcc5,-8px_-8px_16px_#ffffff] overflow-hidden"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Search"
|
|
>
|
|
<div className="flex items-center gap-3 p-4 border-b border-border/50">
|
|
<Search className="w-5 h-5 text-muted-foreground" />
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
placeholder="Search contacts, conversations, opportunities..."
|
|
className="flex-1 bg-transparent outline-none text-foreground placeholder:text-muted-foreground"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
aria-label="Search input"
|
|
/>
|
|
<kbd className="hidden sm:inline-flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground bg-muted rounded">
|
|
<span>Esc</span>
|
|
</kbd>
|
|
</div>
|
|
<div className="p-2">
|
|
<div className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
|
Quick Search
|
|
</div>
|
|
<nav role="menu">
|
|
{searchCategories.map(({ label, icon: Icon, shortcut }) => (
|
|
<button
|
|
key={label}
|
|
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left text-muted-foreground hover:text-foreground hover:bg-white/50 transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50"
|
|
role="menuitem"
|
|
onClick={() => {
|
|
onClose();
|
|
}}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
<span className="flex-1">{label}</span>
|
|
<kbd className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">{shortcut}</kbd>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
<div className="px-4 py-3 border-t border-border/50 text-xs text-muted-foreground">
|
|
<span className="inline-flex items-center gap-2">
|
|
<kbd className="px-1.5 py-0.5 bg-muted rounded">Tab</kbd> to navigate
|
|
<kbd className="px-1.5 py-0.5 bg-muted rounded">Enter</kbd> to select
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Helper function to get user initials
|
|
function getUserInitials(user: { firstName?: string; lastName?: string; email?: string } | null): string {
|
|
if (!user) return 'U';
|
|
|
|
const first = user.firstName?.[0]?.toUpperCase() || '';
|
|
const last = user.lastName?.[0]?.toUpperCase() || '';
|
|
|
|
if (first && last) return `${first}${last}`;
|
|
if (first) return first;
|
|
if (user.email) return user.email[0].toUpperCase();
|
|
return 'U';
|
|
}
|
|
|
|
// Helper function to get user role display
|
|
function getUserRoleDisplay(user: { role?: string; brokerage?: string } | null): string {
|
|
if (!user) return 'User';
|
|
|
|
if (user.brokerage) return user.brokerage;
|
|
|
|
switch (user.role?.toLowerCase()) {
|
|
case 'admin':
|
|
return 'Administrator';
|
|
case 'agent':
|
|
return 'Real Estate Agent';
|
|
case 'broker':
|
|
return 'Broker';
|
|
case 'manager':
|
|
return 'Team Manager';
|
|
default:
|
|
return user.role || 'User';
|
|
}
|
|
}
|
|
|
|
function NavLink({ item, collapsed, isActive }: { item: typeof navItems[0]; collapsed: boolean; isActive: boolean }) {
|
|
const Icon = item.icon;
|
|
|
|
const linkContent = (
|
|
<Link
|
|
href={item.href}
|
|
className={cn(
|
|
'group relative flex items-center gap-3.5 px-4 py-3.5 rounded-xl font-medium transition-all duration-200',
|
|
'text-muted-foreground',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
|
|
isActive
|
|
? 'bg-background text-primary shadow-[3px_3px_6px_#c5c8cf,-3px_-3px_6px_#ffffff] border-l-3 border-primary'
|
|
: 'hover:bg-white/60 hover:text-foreground hover:shadow-[2px_2px_4px_#c5c8cf,-2px_-2px_4px_#ffffff] active:shadow-[inset_2px_2px_4px_#c5c8cf,inset_-2px_-2px_4px_#ffffff]',
|
|
collapsed && 'justify-center px-3'
|
|
)}
|
|
aria-label={item.label}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
>
|
|
<Icon className={cn(
|
|
'w-5 h-5 shrink-0 transition-all duration-200',
|
|
isActive ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground group-hover:scale-110'
|
|
)} />
|
|
{!collapsed && (
|
|
<span className={cn(
|
|
'transition-colors duration-200 overflow-hidden whitespace-nowrap',
|
|
isActive ? 'text-primary font-semibold' : ''
|
|
)}>
|
|
{item.label}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
);
|
|
|
|
return (
|
|
<Tooltip content={item.label} show={collapsed}>
|
|
{linkContent}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
function SidebarContent({ collapsed, setCollapsed, onMobileClose }: {
|
|
collapsed: boolean;
|
|
setCollapsed: (v: boolean) => void;
|
|
onMobileClose?: () => void;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const { user, logout } = useAuth();
|
|
const { isConnected } = useRealtimeContext();
|
|
const [isLoggingOut, setIsLoggingOut] = useState(false);
|
|
|
|
const handleLogout = async () => {
|
|
setIsLoggingOut(true);
|
|
try {
|
|
await logout();
|
|
router.push('/login');
|
|
} finally {
|
|
setIsLoggingOut(false);
|
|
}
|
|
};
|
|
|
|
// Check if user is admin
|
|
const isAdmin = user?.role?.toLowerCase() === 'admin';
|
|
|
|
// Filter bottom nav items based on user role
|
|
const filteredBottomNavItems = bottomNavItems.filter(
|
|
(item) => !item.adminOnly || isAdmin
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-background border-r border-border/50">
|
|
{/* Logo */}
|
|
<div className={cn(
|
|
'flex items-center px-4 py-3 border-b border-border/50 transition-all duration-300',
|
|
collapsed ? 'justify-center' : 'justify-between'
|
|
)}>
|
|
<Link
|
|
href="/dashboard"
|
|
className="flex items-center gap-3 group focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-lg"
|
|
aria-label="CRESync Dashboard Home"
|
|
>
|
|
<div className="w-9 h-9 clay-avatar shadow-[4px_4px_8px_#c5c8cf,-4px_-4px_8px_#ffffff] group-hover:shadow-[5px_5px_10px_#c5c8cf,-5px_-5px_10px_#ffffff] transition-shadow shrink-0">
|
|
<Building2 className="w-5 h-5" />
|
|
</div>
|
|
<div className={cn(
|
|
'flex flex-col transition-all duration-300 overflow-hidden',
|
|
collapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'
|
|
)}>
|
|
<span className="text-lg font-bold text-foreground tracking-tight whitespace-nowrap">CRESync</span>
|
|
<span className="text-[10px] text-muted-foreground font-medium -mt-0.5 whitespace-nowrap">Real Estate CRM</span>
|
|
</div>
|
|
</Link>
|
|
<div className={cn(
|
|
'flex items-center gap-2 transition-all duration-300',
|
|
collapsed ? 'w-0 opacity-0 overflow-hidden' : 'w-auto opacity-100'
|
|
)}>
|
|
{onMobileClose && (
|
|
<button
|
|
onClick={onMobileClose}
|
|
className="lg:hidden clay-icon-btn w-8 h-8 hover:bg-white/60 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
|
aria-label="Close sidebar"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => setCollapsed(true)}
|
|
className="hidden lg:flex clay-icon-btn w-8 h-8 hover:bg-white/60 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
|
aria-label="Collapse sidebar"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Connection Status */}
|
|
<div className={cn(
|
|
'border-b border-border/50 transition-all duration-300 overflow-hidden',
|
|
collapsed ? 'max-h-0 py-0 px-0 opacity-0' : 'max-h-20 px-4 py-2 opacity-100'
|
|
)}>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
{isConnected ? (
|
|
<>
|
|
<span className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_6px_rgba(16,185,129,0.6)]" />
|
|
<span className="text-emerald-600 font-medium">Connected</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Loader2 className="w-3 h-3 text-muted-foreground animate-spin" />
|
|
<span className="text-muted-foreground">Connecting...</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Setup Section */}
|
|
<div className="px-3 pt-4 pb-2">
|
|
<div className={cn(
|
|
'px-3 mb-3 transition-all duration-300 overflow-hidden',
|
|
collapsed ? 'max-h-0 opacity-0' : 'max-h-10 opacity-100'
|
|
)}>
|
|
<span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider whitespace-nowrap">Setup</span>
|
|
</div>
|
|
<nav className="space-y-1" role="navigation" aria-label="Setup navigation">
|
|
{setupNavItems.map((item) => (
|
|
<NavLink key={item.href} item={item} collapsed={collapsed} isActive={pathname === item.href} />
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Main Navigation */}
|
|
<div className="flex-1 px-3 py-2 overflow-y-auto">
|
|
<div className={cn(
|
|
'px-3 mb-3 transition-all duration-300 overflow-hidden',
|
|
collapsed ? 'max-h-0 opacity-0' : 'max-h-10 opacity-100'
|
|
)}>
|
|
<span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider whitespace-nowrap">Main Menu</span>
|
|
</div>
|
|
<nav className="space-y-1" role="navigation" aria-label="Main navigation">
|
|
{navItems.map((item) => (
|
|
<NavLink key={item.href} item={item} collapsed={collapsed} isActive={pathname === item.href} />
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* System Section */}
|
|
<div className="px-3 pb-2">
|
|
<div className={cn(
|
|
'px-3 mb-2 transition-all duration-300 overflow-hidden',
|
|
collapsed ? 'max-h-0 opacity-0' : 'max-h-10 opacity-100'
|
|
)}>
|
|
<span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider whitespace-nowrap">System</span>
|
|
</div>
|
|
<nav role="navigation" aria-label="System navigation">
|
|
{filteredBottomNavItems.map((item) => (
|
|
<NavLink key={item.href} item={item} collapsed={collapsed} isActive={pathname === item.href} />
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* User Section */}
|
|
<div className="p-3 space-y-1 border-t border-border/50">
|
|
{/* User Menu */}
|
|
<div className={cn(
|
|
'flex items-center gap-3 p-3 rounded-xl bg-background/50 shadow-[inset_2px_2px_4px_#c5c8cf,inset_-2px_-2px_4px_#ffffff] transition-all duration-300',
|
|
collapsed && 'justify-center p-2'
|
|
)}>
|
|
<Tooltip content={user?.firstName ? `${user.firstName} ${user.lastName}` : 'User'} show={collapsed}>
|
|
<div
|
|
className="w-10 h-10 clay-avatar text-sm ring-2 ring-white/50 shadow-[3px_3px_6px_#c5c8cf,-3px_-3px_6px_#ffffff] shrink-0"
|
|
aria-label={`User avatar: ${user?.firstName || 'User'}`}
|
|
>
|
|
{getUserInitials(user)}
|
|
</div>
|
|
</Tooltip>
|
|
<div className={cn(
|
|
'flex-1 min-w-0 transition-all duration-300 overflow-hidden',
|
|
collapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'
|
|
)}>
|
|
<p className="text-sm font-semibold text-foreground truncate">
|
|
{user?.firstName} {user?.lastName}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground truncate">{user?.email}</p>
|
|
</div>
|
|
<div className={cn(
|
|
'transition-all duration-300 overflow-hidden',
|
|
collapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'
|
|
)}>
|
|
<button
|
|
onClick={handleLogout}
|
|
disabled={isLoggingOut}
|
|
className={cn(
|
|
'clay-icon-btn w-9 h-9 transition-all duration-200',
|
|
'text-muted-foreground',
|
|
'hover:text-destructive hover:bg-destructive/10 hover:shadow-[2px_2px_4px_#c5c8cf,-2px_-2px_4px_#ffffff]',
|
|
'active:shadow-[inset_2px_2px_4px_#c5c8cf,inset_-2px_-2px_4px_#ffffff]',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-destructive',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed'
|
|
)}
|
|
aria-label="Log out"
|
|
>
|
|
{isLoggingOut ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<LogOut className="w-4 h-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Logout button when collapsed */}
|
|
{collapsed && (
|
|
<div className="mt-2">
|
|
<Tooltip content="Log out" show={collapsed}>
|
|
<button
|
|
onClick={handleLogout}
|
|
disabled={isLoggingOut}
|
|
className={cn(
|
|
'w-full clay-icon-btn h-9 transition-all duration-200',
|
|
'text-muted-foreground',
|
|
'hover:text-destructive hover:bg-destructive/10',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-destructive',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed'
|
|
)}
|
|
aria-label="Log out"
|
|
>
|
|
{isLoggingOut ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<LogOut className="w-4 h-4" />
|
|
)}
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Expand Button (when collapsed) */}
|
|
{collapsed && (
|
|
<div className="p-3 border-t border-border/50">
|
|
<Tooltip content="Expand sidebar" show={collapsed}>
|
|
<button
|
|
onClick={() => setCollapsed(false)}
|
|
className="w-full clay-icon-btn h-9 hover:bg-white/60 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
|
aria-label="Expand sidebar"
|
|
>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AppLayoutContent({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
const [searchOpen, setSearchOpen] = useState(false);
|
|
const { user, loading } = useAuth();
|
|
|
|
// Placeholder notification count
|
|
const notificationCount = 3;
|
|
|
|
// Handle Cmd/Ctrl+K for search
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
setSearchOpen((prev) => !prev);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-background">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="w-12 h-12 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
|
|
<p className="text-muted-foreground">Loading...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const currentPage = [...setupNavItems, ...navItems, ...bottomNavItems].find((item) => pathname === item.href)?.label || 'CRESync';
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-background gap-0">
|
|
{/* Search Modal */}
|
|
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
|
|
|
|
{/* Desktop Sidebar */}
|
|
<aside
|
|
className={cn(
|
|
'hidden lg:flex flex-col shrink-0 h-screen sticky top-0 transition-all duration-300 ease-in-out overflow-visible',
|
|
collapsed ? 'w-[80px]' : 'w-[260px]'
|
|
)}
|
|
role="navigation"
|
|
aria-label="Main sidebar"
|
|
>
|
|
<SidebarContent collapsed={collapsed} setCollapsed={setCollapsed} />
|
|
</aside>
|
|
|
|
{/* Mobile Sidebar Overlay */}
|
|
{mobileOpen && (
|
|
<div className="lg:hidden fixed inset-0 z-50" role="dialog" aria-modal="true" aria-label="Mobile navigation">
|
|
<div
|
|
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
|
onClick={() => setMobileOpen(false)}
|
|
aria-hidden="true"
|
|
/>
|
|
<aside className="absolute left-0 top-0 h-full w-[260px] animate-fade-in-up shadow-[8px_0_24px_rgba(0,0,0,0.1)]">
|
|
<SidebarContent
|
|
collapsed={false}
|
|
setCollapsed={() => {}}
|
|
onMobileClose={() => setMobileOpen(false)}
|
|
/>
|
|
</aside>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main Content Area */}
|
|
<div className="flex-1 flex flex-col min-w-0 relative z-0 max-h-screen">
|
|
{/* Mobile Header */}
|
|
<header className="lg:hidden sticky top-0 h-16 bg-background border-b border-border/50 z-30 flex items-center justify-between px-4 shadow-[0_4px_12px_#b8bcc5]">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => setMobileOpen(true)}
|
|
className={cn(
|
|
'clay-icon-btn w-10 h-10',
|
|
'hover:bg-white/60 transition-colors',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary'
|
|
)}
|
|
aria-label="Open navigation menu"
|
|
aria-expanded={mobileOpen}
|
|
aria-controls="mobile-sidebar"
|
|
>
|
|
<Menu className="w-5 h-5" />
|
|
</button>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-9 h-9 clay-avatar shadow-[3px_3px_6px_#c5c8cf,-3px_-3px_6px_#ffffff]">
|
|
<Building2 className="w-5 h-5" />
|
|
</div>
|
|
<span className="font-bold text-lg text-foreground tracking-tight">CRESync</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setSearchOpen(true)}
|
|
className={cn(
|
|
'clay-icon-btn w-9 h-9',
|
|
'hover:bg-white/60 hover:scale-105 transition-all',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary'
|
|
)}
|
|
aria-label="Search"
|
|
>
|
|
<Search className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
className={cn(
|
|
'clay-icon-btn w-9 h-9 relative',
|
|
'hover:bg-white/60 hover:scale-105 transition-all',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary'
|
|
)}
|
|
aria-label={`Notifications${notificationCount > 0 ? `, ${notificationCount} unread` : ''}`}
|
|
>
|
|
<Bell className="w-4 h-4" />
|
|
{notificationCount > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] bg-primary text-primary-foreground text-[10px] font-bold rounded-full ring-2 ring-background flex items-center justify-center px-1">
|
|
{notificationCount > 99 ? '99+' : notificationCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 flex flex-col min-h-0" id="main-content">
|
|
{/* Top Bar (Desktop) */}
|
|
<header className="hidden lg:flex h-16 bg-background border-b border-border/50 items-center justify-between px-6 sticky top-0 z-20 shadow-[0_4px_12px_#b8bcc5]">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-1.5 h-6 bg-gradient-to-b from-primary to-primary/60 rounded-full" aria-hidden="true" />
|
|
<h1 className="text-xl font-bold text-foreground tracking-tight">{currentPage}</h1>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-2 p-1 rounded-xl bg-background/50">
|
|
<button
|
|
onClick={() => setSearchOpen(true)}
|
|
className={cn(
|
|
'clay-icon-btn w-10 h-10 transition-all duration-200',
|
|
'hover:scale-105 hover:bg-white/60 hover:shadow-[3px_3px_6px_#c5c8cf,-3px_-3px_6px_#ffffff]',
|
|
'active:scale-95 active:shadow-[inset_2px_2px_4px_#c5c8cf,inset_-2px_-2px_4px_#ffffff]',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2'
|
|
)}
|
|
aria-label="Search (Cmd+K)"
|
|
>
|
|
<Search className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
className={cn(
|
|
'clay-icon-btn w-10 h-10 relative transition-all duration-200',
|
|
'hover:scale-105 hover:bg-white/60 hover:shadow-[3px_3px_6px_#c5c8cf,-3px_-3px_6px_#ffffff]',
|
|
'active:scale-95 active:shadow-[inset_2px_2px_4px_#c5c8cf,inset_-2px_-2px_4px_#ffffff]',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2'
|
|
)}
|
|
aria-label={`Notifications${notificationCount > 0 ? `, ${notificationCount} unread` : ''}`}
|
|
>
|
|
<Bell className="w-5 h-5" />
|
|
{notificationCount > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 min-w-[20px] h-[20px] bg-primary text-primary-foreground text-[10px] font-bold rounded-full ring-2 ring-background flex items-center justify-center px-1 animate-pulse">
|
|
{notificationCount > 99 ? '99+' : notificationCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<div className="w-px h-10 bg-gradient-to-b from-transparent via-border to-transparent mx-2" aria-hidden="true" />
|
|
<button
|
|
className={cn(
|
|
'flex items-center gap-3 p-2 rounded-xl transition-all duration-200',
|
|
'hover:bg-white/50 hover:shadow-[2px_2px_4px_#c5c8cf,-2px_-2px_4px_#ffffff]',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
|
|
'cursor-pointer'
|
|
)}
|
|
aria-label={`User profile: ${user?.firstName} ${user?.lastName}`}
|
|
>
|
|
<div className="w-10 h-10 clay-avatar text-sm shadow-[3px_3px_6px_#c5c8cf,-3px_-3px_6px_#ffffff]">
|
|
{getUserInitials(user)}
|
|
</div>
|
|
<div className="hidden xl:block text-left">
|
|
<p className="text-sm font-semibold text-foreground">{user?.firstName} {user?.lastName}</p>
|
|
<p className="text-xs text-muted-foreground">{getUserRoleDisplay(user)}</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Page Content */}
|
|
<div className="flex-1 p-6 lg:p-8 min-h-0 overflow-auto">{children}</div>
|
|
</main>
|
|
</div>
|
|
|
|
{/* Skip to main content link for accessibility */}
|
|
<a
|
|
href="#main-content"
|
|
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg"
|
|
>
|
|
Skip to main content
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function AppLayout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<AuthProvider>
|
|
<RealtimeProvider>
|
|
<AppLayoutContent>{children}</AppLayoutContent>
|
|
</RealtimeProvider>
|
|
</AuthProvider>
|
|
);
|
|
}
|