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 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 | 8x 8x 8x 8x 8x 8x 8x 14x 8x 8x 8x 1x 7x 1x 11x 11x 11x 11x | import { Search, Plus, Settings, ChevronLeft, ChevronRight, HelpCircle } from 'lucide-react'
import { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { useCanAccessBackoffice, getGuideHref } from '../utils/navigationMapping'
import { useOrganizationStore } from '../store/organizationStore'
export default function EntitySidebar({
items = [],
selectedId,
getItemHref,
searchPlaceholder = 'Rechercher...',
emptyMessage = 'Aucun élément',
filterFn,
renderItem,
title = null,
icon: Icon = null,
iconClass = '',
backofficeTo = null,
backofficeManageLabel = 'Gérer',
backofficeCreateLabel = 'Créer',
createOnly = false,
loading = false,
collapsed = false,
onCollapsedChange = null,
titleActions = null,
header = null,
filter = null,
showList = true,
className = '',
dark = false,
guideHref = null,
}) {
const [search, setSearch] = useState('')
const hasItems = items.length > 0
const canBackoffice = useCanAccessBackoffice()
// La sidebar calcule elle-même le lien d'aide de la fonctionnalité courante.
const location = useLocation()
const { currentOrganization } = useOrganizationStore()
const resolvedGuideHref = guideHref || (currentOrganization?.id ? getGuideHref(location.pathname, currentOrganization.id) : null)
const filtered = filterFn
? items.filter((item) => filterFn(item).toLowerCase().includes(search.toLowerCase()))
: items
const c = dark
? {
bg: 'bg-slate-900',
border: 'border-slate-800',
title: 'text-slate-100',
titleBtn: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800',
backofficeBtn: 'text-slate-200 border-slate-700 hover:bg-slate-800',
searchBar: 'bg-slate-900 border-slate-800',
input: 'bg-slate-800 border-slate-600 text-slate-100 placeholder-slate-400',
emptyText: 'text-slate-500',
itemSelected: 'bg-slate-700 border-slate-600',
itemHover: 'hover:bg-slate-800 hover:border-slate-700',
iconMuted: 'text-slate-500',
}
: {
bg: 'bg-white',
border: 'border-gray-200',
title: 'text-gray-900',
titleBtn: 'text-gray-400 hover:text-gray-600 hover:bg-gray-100',
backofficeBtn: 'text-gray-700 border-gray-300 hover:bg-gray-50',
searchBar: 'bg-white border-b border-gray-200',
input: 'bg-white border-gray-300 text-gray-900 placeholder-gray-400',
emptyText: 'text-gray-500',
itemSelected: 'bg-gray-100 border-gray-300',
itemHover: 'hover:bg-gray-50 hover:border-gray-200',
iconMuted: 'text-gray-400',
}
// En mode sombre, les couleurs d'icônes claires (text-*-600) sont peu
// lisibles : on les éclaircit en text-*-400.
const resolvedIconClass = dark ? iconClass.replace(/text-(\w+)-600/g, 'text-$1-400') : iconClass
if (collapsed) {
return (
<aside className={`w-full h-full flex flex-col items-center py-3 gap-3 ${c.bg} ${c.border} border-r ${className}`}>
{Icon && (
<span className="relative group flex flex-col items-center">
<Icon className={'w-5 h-5 flex-shrink-0 ' + resolvedIconClass} />
{title && (
<span className={'pointer-events-none absolute left-full ml-2 top-1/2 -translate-y-1/2 whitespace-nowrap px-2 py-1 text-xs font-medium rounded-md opacity-0 group-hover:opacity-100 transition-opacity z-50 shadow-md ' + (dark ? 'bg-white text-slate-900' : 'bg-slate-900 text-white')}>
{title}
</span>
)}
</span>
)}
{onCollapsedChange && (
<button
onClick={onCollapsedChange}
title="Ouvrir la sélection"
className={`p-2 rounded-lg ${c.titleBtn}`}
>
<ChevronRight className="w-5 h-5" />
</button>
)}
</aside>
)
}
return (
<aside className={`w-full h-full border-r ${c.bg} ${c.border} flex flex-col flex-shrink-0 ${className}`}>
{title && (
<div className="px-3 pt-3 pb-2 flex-shrink-0">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center min-w-0 flex-1">
{Icon && <Icon className={`w-4 h-4 mr-2 flex-shrink-0 ${resolvedIconClass}`} />}
<h2 className={`text-sm font-semibold truncate ${c.title}`}>{title}</h2>
</div>
<div className="flex items-center gap-1 flex-shrink-0">
{titleActions}
{resolvedGuideHref && (
<a
href={resolvedGuideHref}
target="_blank"
rel="noopener noreferrer"
title="Aide"
className={`p-1 rounded-md flex-shrink-0 ${c.titleBtn}`}
>
<HelpCircle className="w-4 h-4" />
</a>
)}
{onCollapsedChange && (
<button
onClick={onCollapsedChange}
title="Réduire la sélection"
className={`p-1 rounded-md flex-shrink-0 ${c.titleBtn}`}
>
<ChevronLeft className="w-5 h-5" />
</button>
)}
</div>
</div>
</div>
)}
{header && <div className="px-3 pb-2 flex-shrink-0">{header}</div>}
{canBackoffice && backofficeTo && (
<div className="px-3 pb-2 flex-shrink-0">
{loading ? (
<div className="w-full h-[34px]" />
) : (
<Link
to={backofficeTo}
className={`w-full flex items-center justify-center px-3 py-1.5 text-sm font-medium border rounded-lg transition-colors ${c.backofficeBtn}`}
>
{createOnly || !hasItems ? <Plus className="w-4 h-4 mr-1.5" /> : <Settings className="w-4 h-4 mr-1.5" />}
{createOnly || !hasItems ? backofficeCreateLabel : backofficeManageLabel}
</Link>
)}
</div>
)}
{showList && (
<div className={`p-3 border-b ${c.searchBar} flex-shrink-0`}>
<div className="relative">
<Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 ${c.iconMuted}`} />
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={searchPlaceholder}
className={`w-full pl-9 pr-3 py-2 text-sm border rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none ${c.input}`}
/>
</div>
</div>
)}
{showList && filter && (
<div className={`px-3 py-2 border-b ${c.border} flex-shrink-0`}>{filter}</div>
)}
<div className="flex-1 overflow-y-auto p-2 space-y-1">
{!showList ? (
<div className={`text-sm text-center py-8 px-2 ${c.emptyText}`}>{emptyMessage}</div>
) : filtered.length === 0 ? (
<div className={`text-sm text-center py-8 px-2 ${c.emptyText}`}>{emptyMessage}</div>
) : (
filtered.map((item) => {
const id = item.id || item._id
const isSelected = selectedId === id
const itemHref = getItemHref ? getItemHref(item) : null
return (
<div
key={id}
className={`w-full flex items-center rounded-lg border transition-all ${
isSelected
? `${c.itemSelected} shadow-sm`
: `border-transparent ${c.itemHover}`
}`}
>
{itemHref && (
<Link
to={itemHref}
title={item.name}
className="flex-1 min-w-0 p-2.5 text-left rounded-lg"
>
{renderItem(item, isSelected)}
</Link>
)}
</div>
)
})
)}
</div>
</aside>
)
} |