Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | import { Link, useLocation } from 'react-router-dom'
import { Menu, Crown, Settings, Play, User, HelpCircle } from 'lucide-react'
import { useAuth } from '../contexts/AuthContext'
import { useOrganizationStore } from '../store/organizationStore'
import OrgSwitcher from './OrgSwitcher'
import { frontofficeToBackoffice, backofficeToFrontoffice, getSectionGuideHref } from '../utils/navigationMapping'
/**
* Header commun toujours visible (toutes tailles d'écran).
*
* Contient : burger (ouvre la sidebar), marque "nooloom", lien Administration
* (admin), sélecteur d'organisation + bascule frontoffice/backoffice, et le user.
*
* Props :
* - onOpenSidebar : ouvre la sidebar principale (drawer)
* - mode : 'frontoffice' | 'backoffice' | 'admin' (détermine la bascule affichée)
* - dark : thème sombre (backoffice/admin) ou clair (frontoffice)
*/
export default function AppHeader({ onOpenSidebar, mode = 'frontoffice', dark = false }) {
const { user, isAuthenticated } = useAuth()
const { currentOrganization } = useOrganizationStore()
const location = useLocation()
const orgId = currentOrganization?.id
const isOwner = currentOrganization?.role === 'owner'
// Lien de bascule frontoffice ↔ backoffice, aligné sur la fonctionnalité et
// l'item en cours (ex: /:orgId/workflow/:id ↔ /:orgId/backoffice/workflows/:id).
const backofficeHref = mode === 'frontoffice'
? frontofficeToBackoffice(location.pathname, orgId) || (orgId ? `/${orgId}/backoffice` : null)
: backofficeToFrontoffice(location.pathname, orgId) || (orgId ? `/${orgId}` : null)
// Lien d'aide du header : page générale du guide (frontoffice / backoffice).
const guideHref = getSectionGuideHref(mode, orgId)
const c = dark
? {
header: 'bg-slate-900 text-white border-b border-slate-800',
burger: 'text-white hover:bg-slate-800',
logo: 'text-white',
link: 'text-slate-300 hover:bg-slate-800 hover:text-white',
}
: {
header: 'bg-white border-b border-gray-200',
burger: 'text-gray-600 hover:bg-gray-100',
logo: 'text-indigo-600',
link: 'text-gray-600 hover:bg-gray-100',
}
return (
<header className={`sticky top-0 z-40 flex items-center justify-between h-16 px-2 sm:px-4 gap-1 sm:gap-2 ${c.header}`}>
{/* Burger + marque */}
<div className="flex items-center gap-1 min-w-0 flex-shrink-0">
<button onClick={onOpenSidebar} className={`p-2 -ml-2 rounded ${c.burger}`} title="Menu">
<Menu className="w-6 h-6" />
</button>
<span className={`text-lg font-bold hidden sm:inline ${c.logo}`}>nooloom</span>
</div>
{/* Actions de droite */}
<div className="flex items-center gap-1 sm:gap-2 min-w-0">
{isAuthenticated && user?.role === 'admin' && (
<Link
to="/admin/users"
className={`flex items-center px-1.5 sm:px-2.5 py-1.5 text-sm rounded-lg transition-colors flex-shrink-0 ${c.link}`}
title="Administration"
>
<Crown className="w-4 h-4" />
<span className="hidden lg:inline ml-1.5">Administration</span>
</Link>
)}
{isAuthenticated && orgId && (
<>
<div className="bg-white rounded-lg max-w-[100px] sm:max-w-[160px] lg:max-w-[240px] flex-shrink-0">
<OrgSwitcher />
</div>
{guideHref && (
<a
href={guideHref}
target="_blank"
rel="noopener noreferrer"
className={`p-1.5 sm:p-2 rounded-lg transition-colors flex-shrink-0 ${c.link}`}
title="Aide"
>
<HelpCircle className="w-5 h-5" />
</a>
)}
{mode === 'frontoffice' && isOwner && backofficeHref && (
<Link
to={backofficeHref}
className={`p-1.5 sm:p-2 rounded-lg transition-colors flex-shrink-0 ${c.link}`}
title="Backoffice"
>
<Settings className="w-5 h-5" />
</Link>
)}
{mode === 'backoffice' && backofficeHref && (
<Link
to={backofficeHref}
className={`p-1.5 sm:p-2 rounded-lg transition-colors flex-shrink-0 ${c.link}`}
title="Retour au frontoffice"
>
<Play className="w-5 h-5" />
</Link>
)}
</>
)}
{isAuthenticated ? (
<Link
to="/profile"
className={`flex items-center px-1.5 sm:px-2 py-1.5 rounded-lg transition-colors flex-shrink-0 ${c.link}`}
title={user?.name}
>
<div className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center flex-shrink-0 ${dark ? 'bg-indigo-900' : 'bg-indigo-100'}`}>
<User className={`w-4 h-4 ${dark ? 'text-indigo-400' : 'text-indigo-600'}`} />
</div>
<span className={`ml-2 text-sm font-medium hidden md:inline max-w-[120px] truncate ${dark ? 'text-white' : 'text-gray-700'}`}>
{user?.name}
</span>
</Link>
) : (
<Link
to="/login"
className="flex items-center px-3 py-1.5 text-sm text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors flex-shrink-0"
>
Connexion
</Link>
)}
</div>
</header>
)
} |