Session 2026-05-28: profile page overhaul, nav fixes, dashboard activity links

- Fix nav links not working from profile page (useEffect infinite re-render via unstable profile object ref) - Fix nav hover/active: gold icon highlight, no background change; active links non-clickable - Fix hover layout shift: add border: 1px solid transparent to all interactive elements - Header icon buttons (search, theme toggle) now highlight gold on hover - Profile page: replace calendar with activity feed (60/40 grid), add stat cards (tasks completed, active projects, revision requests, submissions) - Profile card: title field, icon rows for location/email/linkedin, member since + role bottom-right, edit button top-right - Profile portrait: remove wrapper column, fix left-gap alignment - Add profiles.title migration - Dashboard recent activity: name → /profile/{id}, task → /requests/{id} (clickable links) - Icon-only sidebar with gold active/hover state, pointer-events: none on active links - layout.md updated with profile page geometry rules Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-28 15:32:46 -04:00
parent 565d2ed4bc
commit 283511bf3a
48 changed files with 4151 additions and 1889 deletions
@@ -1,7 +1,7 @@
 import { useState, useRef } from 'react';

 const MAX_FILES = 20;
-const MAX_SIZE_MB = 50;
+const MAX_SIZE_MB = 250;
 const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;

 const formatSize = (bytes) => {
@@ -74,7 +74,7 @@ export default function FileAttachment({ files, onChange }) {
        onDrop={handleDrop}
        style={{
          border: `2px dashed ${dragging ? 'var(--accent)' : files.length > 0 ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8, padding: '18px 16px', textAlign: 'center',
+          borderRadius: 4, padding: '18px 16px', textAlign: 'center',
          background: dragging ? 'color-mix(in srgb, var(--accent) 8%, var(--bg))' : 'var(--bg)',
          transition: 'all 0.15s',
        }}
@@ -82,7 +82,7 @@ export default function FileAttachment({ files, onChange }) {
        <input type="file" multiple onChange={handleChange} style={{ display: 'none' }} id="req-file-upload" />
        <label htmlFor="req-file-upload" style={{ cursor: 'pointer' }}>
          <div style={{ fontSize: 22, marginBottom: 4 }}>{dragging ? '📂' : '📎'}</div>
-          <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)' }}>
+          <div style={{ fontWeight: 400, fontSize: 13, color: 'var(--text-primary)' }}>
            {dragging
              ? 'Drop files here'
              : files.length > 0
@@ -102,12 +102,12 @@ export default function FileAttachment({ files, onChange }) {
          {files.map((file, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-              padding: '7px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)',
+              padding: '7px 12px', background: 'var(--card-bg)', borderRadius: 4, border: '1px solid var(--border)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span>📄</span>
                <div>
-                  <div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div>
+                  <div style={{ fontSize: 13, fontWeight: 400 }}>{file.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div>
                </div>
              </div>
@@ -41,7 +41,7 @@ function FileIcon({ entry }) {
  const ext = (entry.name.includes('.') ? entry.name.split('.').pop() : '').toUpperCase().slice(0, 4) || 'FILE';
  const { bg, color } = fileIconStyle(ext);
  return (
-    <span className="file-icon" style={{ background: bg, color, border: 'none', fontSize: 9, fontWeight: 700, letterSpacing: 0.4, fontFamily: 'monospace' }}>
+    <span className="file-icon" style={{ background: bg, color, border: 'none', fontSize: 9, fontWeight: 400, letterSpacing: 0.4, fontFamily: 'monospace' }}>
      {ext}
    </span>
  );
@@ -497,7 +497,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/', showSyn
                placeholder="Folder name"
                autoFocus
                disabled={!configured || loading || Boolean(working)}
-                style={{ fontSize: 13, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', width: 160 }}
+                style={{ fontSize: 13, padding: '4px 8px', borderRadius: 4, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', width: 160 }}
              />
              <LoadingButton type="submit" className="btn btn-outline btn-sm" loading={working === 'mkdir'} disabled={!folderName.trim() || !configured || loading || Boolean(working)} loadingText="Creating...">
                Create
@@ -589,7 +589,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/', showSyn
              onDragOver={isDragTarget ? (e) => handleFolderDragOver(e, entry) : undefined}
              onDragLeave={isDragTarget ? handleFolderDragLeave : undefined}
              onDrop={isDragTarget ? (e) => handleFolderDrop(e, entry) : undefined}
-              style={isDragOver ? { outline: '2px solid var(--accent)', borderRadius: 6 } : undefined}
+              style={isDragOver ? { outline: '2px solid var(--accent)', borderRadius: 4 } : undefined}
            >
              <FileIcon entry={entry} />
              {isRenaming ? (
@@ -600,7 +600,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/', showSyn
                    onChange={(e) => setRenameValue(e.target.value)}
                    autoFocus
                    disabled={Boolean(working)}
-                    style={{ fontSize: 13, padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', flex: 1, minWidth: 0 }}
+                    style={{ fontSize: 13, padding: '2px 8px', borderRadius: 4, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', flex: 1, minWidth: 0 }}
                    onKeyDown={(e) => { if (e.key === 'Escape') setRenamingEntry(null); }}
                  />
                  <LoadingButton type="submit" className="btn btn-outline btn-sm" loading={working === `rename:${entry.path}`} disabled={!renameValue.trim() || Boolean(working)} loadingText="Renaming...">
@@ -0,0 +1,36 @@
+import { useState, useEffect, useRef } from 'react';
+
+const FilterIcon = () => (
+  <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M2 4h12M4 8h8M6 12h4"/>
+  </svg>
+);
+
+export default function FilterDropdown({ value, onChange, options }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    function handler(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+  const current = options.find(o => o.value === value);
+  return (
+    <div ref={ref} style={{ position: 'relative' }}>
+      <button className="btn btn-outline btn-sm" onClick={() => setOpen(o => !o)} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+        <FilterIcon />
+        {current?.label}
+      </button>
+      {open && (
+        <div style={{ position: 'absolute', top: 'calc(100% + 4px)', right: 0, background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 4, zIndex: 200, minWidth: 160, boxShadow: '0 4px 12px rgba(0,0,0,0.25)' }}>
+          {options.map(opt => (
+            <button key={opt.value} onClick={() => { onChange(opt.value); setOpen(false); }} style={{ display: 'block', width: '100%', padding: '7px 14px', textAlign: 'left', background: value === opt.value ? 'rgba(245,165,35,0.08)' : 'transparent', fontSize: 13, color: value === opt.value ? 'var(--accent)' : 'var(--text-primary)', border: 'none', cursor: 'pointer' }}>
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -1,24 +1,42 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { NavLink, useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';

+const ICONS = {
+  dashboard:   <svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1.5"/><rect x="9" y="1" width="6" height="6" rx="1.5"/><rect x="1" y="9" width="6" height="6" rx="1.5"/><rect x="9" y="9" width="6" height="6" rx="1.5"/></svg>,
+  requests:    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="2" y="2" width="12" height="12" rx="1.5"/><line x1="5" y1="5.5" x2="11" y2="5.5"/><line x1="5" y1="8" x2="11" y2="8"/><line x1="5" y1="10.5" x2="8" y2="10.5"/></svg>,
+  projects:    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M1.5 5.5C1.5 4.67 2.17 4 3 4h2.5l1.5 2H13c.83 0 1.5.67 1.5 1.5v5.5c0 .83-.67 1.5-1.5 1.5H3c-.83 0-1.5-.67-1.5-1.5V5.5z"/></svg>,
+  fileSharing: <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 2H4a1.5 1.5 0 00-1.5 1.5v9A1.5 1.5 0 004 14h8a1.5 1.5 0 001.5-1.5V6L9 2z"/><polyline points="9,2 9,6 13.5,6"/></svg>,
+  invoices:    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="2" y="1.5" width="12" height="13" rx="1"/><line x1="8" y1="4" x2="8" y2="12"/><path d="M10 5.5H7a1.5 1.5 0 000 3h2a1.5 1.5 0 010 3H5.5"/></svg>,
+  notes:       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="3" y="1.5" width="10" height="13" rx="1"/><line x1="5.5" y1="5" x2="10.5" y2="5"/><line x1="5.5" y1="7.5" x2="10.5" y2="7.5"/><line x1="5.5" y1="10" x2="8.5" y2="10"/></svg>,
+  survey:      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="1.5" y="9.5" width="3" height="5" rx="0.5"/><rect x="6.5" y="6" width="3" height="8.5" rx="0.5"/><rect x="11.5" y="2.5" width="3" height="12" rx="0.5"/></svg>,
+  brandBook:   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 2.5h4a2 2 0 012 2v9a2 2 0 00-2-2h-4V2.5z"/><path d="M13.5 2.5h-4a2 2 0 00-2 2v9a2 2 0 012-2h4V2.5z"/></svg>,
+  converter:   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="1.5" y="1.5" width="13" height="13" rx="1.5"/><circle cx="5.5" cy="5.5" r="1.5"/><path d="M1.5 11.5l3.5-3.5 3 3L11 7.5l3 3"/></svg>,
+  passwords:   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="7" width="10" height="7.5" rx="1"/><path d="M5 7V5.5a3 3 0 016 0V7"/><circle cx="8" cy="10.5" r="1" fill="currentColor" stroke="none"/></svg>,
+  companies:   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="1.5" y="5" width="13" height="9.5" rx="1"/><path d="M5.5 5V3a1 1 0 011-1h3a1 1 0 011 1v2"/><line x1="8" y1="5" x2="8" y2="14.5"/><line x1="1.5" y1="9" x2="14.5" y2="9"/></svg>,
+  users:       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><circle cx="6" cy="5" r="2.5"/><path d="M1 14c0-2.76 2.24-5 5-5s5 2.24 5 5"/><circle cx="12.5" cy="5.5" r="2"/><path d="M12.5 10c1.93 0 3.5 1.57 3.5 3.5"/></svg>,
+};
+
+function NI({ icon }) {
+  return <span className="nav-icon">{icon}</span>;
+}
+
 function TeamNav({ onNav }) {
  const location = useLocation();

  const primaryLinks = [
-    { to: '/dashboard', label: 'Dashboard' },
-    { to: '/projects', label: 'Projects' },
-    { to: '/requests', label: 'Requests' },
-    { to: '/file-sharing', label: 'File Sharing' },
+    { to: '/team/dashboard', label: 'Dashboard',    icon: ICONS.dashboard },
+    { to: '/requests',     label: 'Requests',     icon: ICONS.requests },
+    { to: '/projects',     label: 'Projects',     icon: ICONS.projects },
+    { to: '/invoices',     label: 'Finances',     icon: ICONS.invoices },
+    { to: '/file-sharing', label: 'File Sharing', icon: ICONS.fileSharing },
  ];

  const utilityLinks = [
-    { to: '/meeting-notes', label: 'Meeting Notes' },
-    { to: '/invoices', label: 'Invoices & Expenses' },
-    { to: '/survey-maker', label: 'Survey Maker' },
-    { to: '/brand-book', label: 'Brand Book Maker' },
-    { to: '/converters', label: 'Image Converter' },
-    { to: '/fourge-passwords', label: 'Fourge Passwords' },
+    { to: '/survey-maker',     label: 'Survey Maker',       icon: ICONS.survey },
+    { to: '/brand-book',       label: 'Brand Book Maker',   icon: ICONS.brandBook },
+    { to: '/converters',       label: 'Image Converter',    icon: ICONS.converter },
+    { to: '/fourge-passwords', label: 'Fourge Passwords',   icon: ICONS.passwords },
  ];

  const isCompaniesActive = location.pathname === '/company' && !location.search.includes('tab=users');
@@ -26,51 +44,44 @@ function TeamNav({ onNav }) {

  return (
    <div className="sidebar-section">
-      {primaryLinks.map(({ to, label }) => (
+      {primaryLinks.map(({ to, label, icon }) => (
        <NavLink key={to} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-          {label}
+          <NI icon={icon} /><span className="nav-label">{label}</span>
        </NavLink>
      ))}
-      <div style={{ height: 1, margin: '10px 12px', background: 'var(--border)' }} />
-      <div style={{ padding: '0 12px 8px', fontSize: 11, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
-        Team Tools
+      <div className="sidebar-tools-divider" style={{ height: 1, margin: '10px 12px', background: 'var(--border)' }} />
+      <div className="sidebar-tools-label" style={{ padding: '0 12px 8px', fontSize: 11, fontWeight: 400, letterSpacing: 0.8, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
+        Tools
      </div>
-      {utilityLinks.map(({ to, label }) => (
+      {utilityLinks.map(({ to, label, icon }) => (
        <NavLink key={to} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-          {label}
+          <NI icon={icon} /><span className="nav-label">{label}</span>
        </NavLink>
      ))}
      <NavLink to="/company" onClick={onNav} className={() => `sidebar-link${isCompaniesActive ? ' active' : ''}`}>
-        Companies
+        <NI icon={ICONS.companies} /><span className="nav-label">Companies</span>
      </NavLink>
      <NavLink to="/company?tab=users" onClick={onNav} className={() => `sidebar-link${isUsersActive ? ' active' : ''}`}>
-        Users
+        <NI icon={ICONS.users} /><span className="nav-label">Users</span>
      </NavLink>
    </div>
  );
 }

 function ClientNav({ onNav }) {
-  const { currentUser } = useAuth();
-  const companies = currentUser?.companies?.length
-    ? currentUser.companies
-    : currentUser?.company ? [currentUser.company] : [];
-  const companyTo = companies.length === 1 ? `/company/${companies[0].id}` : '/company';
-
  const links = [
-    { to: '/dashboard', label: 'Dashboard' },
-    { to: '/projects', label: 'Projects' },
-    { to: '/requests', label: 'Requests' },
-    { to: '/file-sharing', label: 'File Sharing' },
-    { to: '/my-invoices', label: 'Invoices' },
-    { to: companyTo, label: 'Company' },
+    { to: '/dashboard',    label: 'Dashboard',    icon: ICONS.dashboard },
+    { to: '/requests',     label: 'Requests',     icon: ICONS.requests },
+    { to: '/projects',     label: 'Projects',     icon: ICONS.projects },
+    { to: '/file-sharing', label: 'File Sharing', icon: ICONS.fileSharing },
+    { to: '/my-invoices',  label: 'Invoices',     icon: ICONS.invoices },
  ];

  return (
    <div className="sidebar-section">
-      {links.map(({ to, label }) => (
+      {links.map(({ to, label, icon }) => (
        <NavLink key={label} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-          {label}
+          <NI icon={icon} /><span className="nav-label">{label}</span>
        </NavLink>
      ))}
    </div>
@@ -79,30 +90,30 @@ function ClientNav({ onNav }) {

 function ExternalNav({ onNav }) {
  const links = [
-    { to: '/dashboard', label: 'Dashboard' },
-    { to: '/requests', label: 'Requests' },
-    { to: '/projects', label: 'Projects' },
-    { to: '/my-invoices-sub', label: 'Invoices' },
-    { to: '/file-sharing', label: 'File Sharing' },
-    { to: '/survey-maker', label: 'Survey Maker' },
-    { to: '/brand-book', label: 'Brand Book Maker' },
-    { to: '/converters', label: 'Image Converter' },
+    { to: '/dashboard',        label: 'Dashboard',        icon: ICONS.dashboard },
+    { to: '/requests',         label: 'Requests',         icon: ICONS.requests },
+    { to: '/projects',         label: 'Projects',         icon: ICONS.projects },
+    { to: '/my-invoices-sub',  label: 'Invoices',         icon: ICONS.invoices },
+    { to: '/file-sharing',     label: 'File Sharing',     icon: ICONS.fileSharing },
+    { to: '/survey-maker',     label: 'Survey Maker',     icon: ICONS.survey },
+    { to: '/brand-book',       label: 'Brand Book Maker', icon: ICONS.brandBook },
+    { to: '/converters',       label: 'Image Converter',  icon: ICONS.converter },
  ];

  return (
    <div className="sidebar-section">
-      {links.map(({ to, label }, index) => (
+      {links.map(({ to, label, icon }, index) => (
        <div key={to}>
          {index === 4 && (
            <>
-              <div style={{ height: 1, margin: '10px 12px', background: 'var(--border)' }} />
-              <div style={{ padding: '0 12px 8px', fontSize: 11, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
-                Team Tools
+              <div className="sidebar-tools-divider" style={{ height: 1, margin: '10px 12px', background: 'var(--border)' }} />
+              <div className="sidebar-tools-label" style={{ padding: '0 12px 8px', fontSize: 11, fontWeight: 400, letterSpacing: 0.8, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
+                Tools
              </div>
            </>
          )}
          <NavLink to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-            {label}
+            <NI icon={icon} /><span className="nav-label">{label}</span>
          </NavLink>
        </div>
      ))}
@@ -116,7 +127,22 @@ export default function Layout({ children }) {
  const location = useLocation();
  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'dark');
  const [menuOpen, setMenuOpen] = useState(false);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => localStorage.getItem('sidebarCollapsed') === 'true');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState({ projects: [], tasks: [] });
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchExpanded, setSearchExpanded] = useState(false);
+  const searchInputRef = useRef(null);
+  const [avatarOpen, setAvatarOpen] = useState(false);
+  const avatarRef = useRef(null);
+
+  const hour = new Date().getHours();
+  const timeOfDay = hour < 12 ? 'morning' : hour < 17 ? 'afternoon' : 'evening';
+  const firstName = currentUser?.name?.split(' ')[0] || '';
+  const isProfileRoute = location.pathname === '/profile' || location.pathname.startsWith('/profile/');
+  const headerTitle = isProfileRoute ? 'Profile' : `Good ${timeOfDay}${firstName ? `, ${firstName}` : ''}`;
+  const headerSubtitle = isProfileRoute
+    ? 'Account details and security settings.'
+    : "Here's what's happening today.";

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
@@ -124,81 +150,146 @@ export default function Layout({ children }) {
  }, [theme]);

  useEffect(() => {
-    localStorage.setItem('sidebarCollapsed', String(sidebarCollapsed));
-  }, [sidebarCollapsed]);
+    if (!searchQuery.trim()) { setSearchResults({ projects: [], tasks: [] }); return; }
+    const t = setTimeout(async () => {
+      const { supabase } = await import('../lib/supabase');
+      const [{ data: projects }, { data: tasks }] = await Promise.all([
+        supabase.from('projects').select('id, name').ilike('name', `%${searchQuery}%`).limit(6),
+        supabase.from('tasks').select('id, title').ilike('title', `%${searchQuery}%`).limit(6),
+      ]);
+      setSearchResults({ projects: projects || [], tasks: tasks || [] });
+    }, 280);
+    return () => clearTimeout(t);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    if (!avatarOpen) return;
+    function handler(e) {
+      if (avatarRef.current && !avatarRef.current.contains(e.target)) setAvatarOpen(false);
+    }
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [avatarOpen]);

-  // Close menu on route change (derived-state pattern, no effect needed)
  const [lastPathname, setLastPathname] = useState(location.pathname);
  if (lastPathname !== location.pathname) {
    setLastPathname(location.pathname);
    setMenuOpen(false);
+    setAvatarOpen(false);
  }

  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');
-  const handleLogout = async () => {
-    await logout();
-    navigate('/');
-  };
+  const handleLogout = async () => { await logout(); navigate('/'); };

-  const initials = currentUser?.name
-    ?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  const hasResults = searchResults.projects.length > 0 || searchResults.tasks.length > 0;

  return (
-    <div className={`app-layout${sidebarCollapsed ? ' sidebar-collapsed' : ''}`}>
-      {/* Overlay */}
+    <div className="app-layout">
      {menuOpen && <div className="sidebar-overlay" onClick={() => setMenuOpen(false)} />}

      <aside className={`sidebar${menuOpen ? ' sidebar-open' : ''}`}>
        <div className="sidebar-logo">
-          <img className="brand-logo brand-logo-sidebar" src="/fourge-logo.png" alt="Fourge Branding" />
-          <button
-            className="sidebar-pin-toggle"
-            onClick={() => setSidebarCollapsed(current => !current)}
-            title={sidebarCollapsed ? 'Pin sidebar open' : 'Collapse sidebar'}
-            aria-label={sidebarCollapsed ? 'Pin sidebar open' : 'Collapse sidebar'}
-          >
-            {sidebarCollapsed ? '›' : '‹'}
-          </button>
+          <img className="brand-logo brand-logo-sidebar" src="/logonowordmark.png" alt="Fourge Branding" />
        </div>

-        {!sidebarCollapsed && (
-          currentUser?.role === 'team'
-            ? <TeamNav onNav={() => setMenuOpen(false)} />
-            : currentUser?.role === 'external'
-              ? <ExternalNav onNav={() => setMenuOpen(false)} />
-              : <ClientNav onNav={() => setMenuOpen(false)} />
-        )}
+        {currentUser?.role === 'team'
+          ? <TeamNav onNav={() => setMenuOpen(false)} />
+          : currentUser?.role === 'external'
+            ? <ExternalNav onNav={() => setMenuOpen(false)} />
+            : <ClientNav onNav={() => setMenuOpen(false)} />
+        }

-        <div className="sidebar-bottom">
-          <NavLink to="/settings" onClick={() => setMenuOpen(false)} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-            <div className="sidebar-avatar" style={{ width: 28, height: 28, fontSize: 11, flexShrink: 0 }}>{initials}</div>
-            <div className="sidebar-user-info">
-              <div className="sidebar-user-name">{currentUser?.name || 'Set your name'}</div>
-              <div className="sidebar-user-role">{currentUser?.role === 'external' ? 'Team' : currentUser?.role}</div>
-            </div>
-          </NavLink>
-          <div className="sidebar-bottom-actions">
-            {!sidebarCollapsed && <button className="sidebar-link" style={{ flex: 1 }} onClick={handleLogout}>Sign Out</button>}
-            <button
-              onClick={toggleTheme}
-              className="sidebar-theme-toggle"
-              title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-            >
-              {theme === 'dark' ? '☀' : '☾'}
-            </button>
-          </div>
-        </div>
      </aside>

      <div className="main-wrapper">
-        {/* Mobile top bar inside main wrapper so it sits at the top */}
        <div className="mobile-topbar">
          <button className="hamburger" onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
            <span /><span /><span />
          </button>
          <img className="brand-logo brand-logo-mobile" src="/fourge-logo.png" alt="Fourge Branding" />
        </div>
+
        <main className="main-content">
+        <div className="site-header">
+          <div>
+            <div className="site-header-greeting">{headerTitle}</div>
+            <div className="site-header-sub">{headerSubtitle}</div>
+          </div>
+          <div className="site-header-right">
+            <div className="site-header-search-wrap">
+              {!searchExpanded ? (
+                <button
+                  className="site-header-search-btn"
+                  onClick={() => { setSearchExpanded(true); setTimeout(() => searchInputRef.current?.focus(), 50); }}
+                  aria-label="Search"
+                >
+                  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><circle cx="6.5" cy="6.5" r="4"/><line x1="10" y1="10" x2="14" y2="14"/></svg>
+                </button>
+              ) : (
+                <>
+                  <input
+                    ref={searchInputRef}
+                    className="site-header-search"
+                    type="text"
+                    placeholder="Search projects & tasks..."
+                    value={searchQuery}
+                    onChange={e => setSearchQuery(e.target.value)}
+                    onFocus={() => setSearchOpen(true)}
+                    onBlur={() => setTimeout(() => { setSearchOpen(false); setSearchExpanded(false); setSearchQuery(''); }, 150)}
+                    onKeyDown={e => { if (e.key === 'Escape') { setSearchOpen(false); setSearchExpanded(false); setSearchQuery(''); } }}
+                  />
+                </>
+              )}
+              {searchOpen && searchQuery.trim() && (
+                <div className="site-header-dropdown">
+                  {!hasResults && <div className="site-header-dropdown-empty">No results for "{searchQuery}"</div>}
+                  {searchResults.projects.length > 0 && (
+                    <>
+                      <div className="site-header-dropdown-group">Projects</div>
+                      {searchResults.projects.map(p => (
+                        <div key={p.id} className="site-header-dropdown-item" onMouseDown={() => { navigate(`/projects/${p.id}`); setSearchQuery(''); setSearchOpen(false); setSearchExpanded(false); }}>
+                          <span className="nav-icon" style={{ opacity: 0.6 }}>{ICONS.projects}</span>
+                          {p.name}
+                        </div>
+                      ))}
+                    </>
+                  )}
+                  {searchResults.tasks.length > 0 && (
+                    <>
+                      <div className="site-header-dropdown-group">Tasks</div>
+                      {searchResults.tasks.map(r => (
+                        <div key={r.id} className="site-header-dropdown-item" onMouseDown={() => { navigate(`/requests/${r.id}`); setSearchQuery(''); setSearchOpen(false); setSearchExpanded(false); }}>
+                          <span className="nav-icon" style={{ opacity: 0.6 }}>{ICONS.requests}</span>
+                          {r.title}
+                        </div>
+                      ))}
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <button onClick={toggleTheme} className="site-header-theme-toggle" title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}>
+              {theme === 'dark'
+                ? <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="8" r="3"/><line x1="8" y1="1" x2="8" y2="2.5"/><line x1="8" y1="13.5" x2="8" y2="15"/><line x1="1" y1="8" x2="2.5" y2="8"/><line x1="13.5" y1="8" x2="15" y2="8"/><line x1="3" y1="3" x2="4.1" y2="4.1"/><line x1="11.9" y1="11.9" x2="13" y2="13"/><line x1="13" y1="3" x2="11.9" y2="4.1"/><line x1="4.1" y1="11.9" x2="3" y2="13"/></svg>
+                : <svg viewBox="0 0 16 16" fill="currentColor" stroke="none"><path d="M14 8.53A6 6 0 1 1 7.47 2 4.67 4.67 0 0 0 14 8.53Z"/></svg>
+              }
+            </button>
+
+            <div className="site-header-avatar-wrap" ref={avatarRef}>
+              <button className="site-header-avatar-btn" onClick={() => setAvatarOpen(o => !o)} aria-label="Account menu">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7" fill="currentColor"/></svg>
+              </button>
+              {avatarOpen && (
+                <div className="site-header-avatar-menu">
+                  <button className="site-header-avatar-item" onClick={() => { navigate('/profile'); setAvatarOpen(false); }}>Settings</button>
+                  <div className="site-header-avatar-divider" />
+                  <button className="site-header-avatar-item" onClick={handleLogout}>Sign Out</button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
          {children}
        </main>
      </div>
@@ -1,13 +1,18 @@
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';

-export default function ProtectedRoute({ children, role }) {
+function getRoleHomePath(role) {
+  if (role === 'team') return '/team/dashboard';
+  return '/dashboard';
+}
+
+export default function ProtectedRoute({ children, role, redirectTo }) {
  const { currentUser } = useAuth();
  if (!currentUser) return <Navigate to="/" replace />;
  if (role) {
    const allowed = Array.isArray(role) ? role : [role];
    if (!allowed.includes(currentUser.role)) {
-      return <Navigate to="/dashboard" replace />;
+      return <Navigate to={redirectTo || getRoleHomePath(currentUser.role)} replace />;
    }
  }
  return children;
@@ -195,7 +195,7 @@ export default function RequestForm({

      <div className="form-group">
        <label>Request Title *</label>
-        <input type="text" placeholder="e.g. Street Name" value={form.title} onChange={set('title')} required />
+        <input type="text" placeholder="e.g. City, State or Site Name" value={form.title} onChange={set('title')} required />
      </div>

      <div className="form-group">