360-partners rendu cliquable comme les autres domaines

This commit is contained in:
2026-08-24 12:50:18 +00:00
parent c7109893b2
commit 447528ae40
+24 -33
View File
@@ -15,33 +15,7 @@ export default function Dashboard({ token, user }) {
const count = (d) => [d.has_cloud, d.has_website, d.has_emails, d.has_team].filter(Boolean).length
const color = (n) => n === 0 ? 'bg-slate-600' : n < 3 ? 'bg-amber-500' : 'bg-emerald-500'
return (
<div>
<div className="mb-8">
<h2 className="text-xl font-bold text-white mb-1">Domaines & Services</h2>
<p className="text-slate-400 text-sm">
{user.role === 'admin' ? 'Gerez les besoins de Charles pour chaque societe.' : 'Renseignez vos besoins pour chaque domaine.'}
</p>
</div>
{domains.parent && (
<div className="mb-6 p-5 bg-slate-800/30 rounded-2xl border border-slate-700/30">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-blue-600/20 flex items-center justify-center">
<svg className="w-5 h-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
<div>
<h3 className="text-white font-semibold">{domains.parent.company_name}</h3>
<p className="text-slate-400 text-xs">{domains.parent.name} — Entreprise maitre</p>
</div>
</div>
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{domains.children.map(d => {
const DomainCard = ({ d, badge }) => {
const n = count(d)
const tags = []
if (d.has_cloud) tags.push(<span key="c" className="px-2 py-0.5 bg-sky-500/10 text-sky-400 text-xs rounded-md">Cloud</span>)
@@ -51,13 +25,16 @@ export default function Dashboard({ token, user }) {
if (n === 0) tags.push(<span key="x" className="text-slate-500 text-xs italic">Aucun besoin renseigne</span>)
return (
<Link key={d.id} to={'/domain/' + d.id}
<Link to={'/domain/' + d.id}
className="group p-5 bg-slate-800/40 hover:bg-slate-800/60 rounded-2xl border border-slate-700/30 hover:border-slate-600/50 transition-all duration-200 hover:shadow-lg hover:shadow-black/20">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-2">
{badge && <span className="px-2 py-0.5 bg-blue-500/10 text-blue-400 text-[10px] font-medium rounded-md uppercase tracking-wider">Maitre</span>}
<div>
<h3 className="text-white font-semibold group-hover:text-blue-400 transition-colors">{d.company_name}</h3>
<p className="text-slate-400 text-xs mt-0.5">{d.name}</p>
</div>
</div>
<div className={'w-2.5 h-2.5 rounded-full mt-1 ' + color(n)} />
</div>
<div className="flex flex-wrap gap-1.5">{tags}</div>
@@ -68,17 +45,31 @@ export default function Dashboard({ token, user }) {
)}
</Link>
)
})}
}
return (
<div>
<div className="mb-8">
<h2 className="text-xl font-bold text-white mb-1">Domaines & Services</h2>
<p className="text-slate-400 text-sm">
{user.role === 'admin' ? 'Gerez les besoins de Charles pour chaque societe.' : 'Renseignez vos besoins pour chaque domaine.'}
</p>
</div>
{domains.parent && <DomainCard d={domains.parent} badge={true} />}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
{domains.children.map(d => <DomainCard key={d.id} d={d} />)}
</div>
{user.role === 'admin' && (
<div className="mt-8 p-5 bg-slate-800/30 rounded-2xl border border-slate-700/30">
<h3 className="text-white font-semibold mb-3">Resume</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div><p className="text-2xl font-bold text-white">{domains.children.length}</p><p className="text-slate-400 text-xs">Domaines</p></div>
<div><p className="text-2xl font-bold text-sky-400">{domains.children.filter(d => d.has_cloud).length}</p><p className="text-slate-400 text-xs">Cloud</p></div>
<div><p className="text-2xl font-bold text-violet-400">{domains.children.filter(d => d.has_website).length}</p><p className="text-slate-400 text-xs">Sites web</p></div>
<div><p className="text-2xl font-bold text-emerald-400">{domains.children.filter(d => d.has_emails).length}</p><p className="text-slate-400 text-xs">Avec mails</p></div>
<div><p className="text-2xl font-bold text-white">{domains.children.length + 1}</p><p className="text-slate-400 text-xs">Domaines</p></div>
<div><p className="text-2xl font-bold text-sky-400">{[domains.parent, ...domains.children].filter(d => d.has_cloud).length}</p><p className="text-slate-400 text-xs">Cloud</p></div>
<div><p className="text-2xl font-bold text-violet-400">{[domains.parent, ...domains.children].filter(d => d.has_website).length}</p><p className="text-slate-400 text-xs">Sites web</p></div>
<div><p className="text-2xl font-bold text-emerald-400">{[domains.parent, ...domains.children].filter(d => d.has_emails).length}</p><p className="text-slate-400 text-xs">Avec mails</p></div>
</div>
</div>
)}