|
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
:root{
|
|
--background:#F8FAFC; --surface:#FFFFFF; --surface-muted:#F1F5F9;
|
|
--border:#E2E8F0; --border-strong:#CBD5E1;
|
|
--text-primary:#0F172A; --text-secondary:#334155; --text-muted:#475569;
|
|
--primary:#047857; --on-primary:#FFFFFF;
|
|
--brand-50:#ECFDF5; --brand-700:#047857;
|
|
--success-fg:#15803D; --success-bg:#E7F6EC;
|
|
--warning-fg:#B45309; --warning-bg:#FEF3E2;
|
|
--danger-fg:#B91C1C; --danger-bg:#FCEBEB;
|
|
--status-quality-fg:#0E7490; --status-spec-fg:#6D28D9;
|
|
}
|
|
*{box-sizing:border-box;}
|
|
body{margin:0;background:var(--background);color:var(--text-primary);
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
|
|
-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45;}
|
|
.wrap{max-width:1180px;margin:0 auto;padding:24px 28px 40px;}
|
|
/* TopBar */
|
|
.topbar{display:flex;align-items:center;justify-content:space-between;
|
|
border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:22px;}
|
|
.wordmark{font-weight:600;letter-spacing:-0.01em;}
|
|
.wordmark b{color:var(--brand-700);}
|
|
.acct{display:flex;gap:10px;align-items:center;color:var(--text-muted);font-size:13px;}
|
|
.pill-admin{background:var(--brand-50);color:var(--brand-700);border-radius:999px;
|
|
padding:2px 10px;font-size:11px;font-weight:600;letter-spacing:.02em;}
|
|
.crumb{font-size:13px;color:var(--text-muted);margin-bottom:6px;}
|
|
h1{font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-0.02em;margin:0;}
|
|
.sub{font-size:14px;color:var(--text-muted);margin-top:4px;}
|
|
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;}
|
|
h2{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin:0;}
|
|
.desc{font-size:13px;color:var(--text-muted);margin-top:4px;}
|
|
/* Filter bar */
|
|
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 14px;}
|
|
.search{position:relative;flex:1;min-width:220px;}
|
|
.search input{width:100%;height:40px;border:1px solid var(--border);border-radius:8px;
|
|
padding:0 12px 0 34px;font-size:14px;color:var(--text-primary);background:var(--surface);}
|
|
.search .ic{position:absolute;left:11px;top:11px;color:var(--text-muted);}
|
|
.selwrap{position:relative;}
|
|
select{height:40px;border:1px solid var(--border);border-radius:8px;padding:0 30px 0 12px;
|
|
font-size:13px;color:var(--text-secondary);background:var(--surface);appearance:none;cursor:pointer;}
|
|
.selwrap::after{content:"▾";position:absolute;right:11px;top:11px;color:var(--text-muted);pointer-events:none;}
|
|
.count-chip{margin-left:auto;font-size:12px;color:var(--text-muted);}
|
|
/* Table */
|
|
.tbl-wrap{overflow-x:auto;}
|
|
table{width:100%;min-width:46rem;border-collapse:collapse;font-size:14px;}
|
|
thead th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
|
|
color:var(--text-muted);padding:8px 12px;border-bottom:1px solid var(--border);}
|
|
th.num,td.num{text-align:right;}
|
|
tbody tr{border-bottom:1px solid var(--border);}
|
|
tbody tr:last-child{border-bottom:0;}
|
|
tbody tr:hover{background:rgba(241,245,249,.6);}
|
|
td{padding:10px 12px;vertical-align:middle;}
|
|
.cname{font-weight:500;color:var(--text-primary);}
|
|
.cemail{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--text-muted);}
|
|
/* Tier badge (réutilise MC.5 — liseré + accent par niveau) */
|
|
.tier{display:inline-flex;align-items:center;gap:7px;}
|
|
.tier-dot{width:8px;height:8px;border-radius:999px;}
|
|
.tier select{height:32px;font-size:13px;}
|
|
.t1{color:#475569;} .t1-d{background:#475569;}
|
|
.t2{color:var(--status-quality-fg);} .t2-d{background:var(--status-quality-fg);}
|
|
.t3{color:var(--status-spec-fg);} .t3-d{background:var(--status-spec-fg);}
|
|
.t4{color:var(--brand-700);} .t4-d{background:var(--brand-700);}
|
|
/* Credit cell */
|
|
.credit{display:inline-flex;align-items:center;gap:10px;justify-content:flex-end;}
|
|
.credit-val{font-variant-numeric:tabular-nums;font-weight:600;}
|
|
.v-healthy{color:var(--success-fg);} .v-warn{color:var(--warning-fg);} .v-crit{color:var(--danger-fg);}
|
|
.stepper{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
|
|
.stepper button{width:30px;height:30px;border:0;background:var(--surface);color:var(--text-secondary);
|
|
font-size:16px;cursor:pointer;line-height:1;}
|
|
.stepper button:hover{background:var(--surface-muted);}
|
|
.stepper .mid{width:54px;border-left:1px solid var(--border);border-right:1px solid var(--border);
|
|
display:flex;align-items:center;justify-content:center;font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-primary);}
|
|
.vbadge{display:inline-flex;align-items:center;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;}
|
|
.vb-warn{background:var(--warning-bg);color:var(--warning-fg);}
|
|
.vb-crit{background:var(--danger-bg);color:var(--danger-fg);}
|
|
/* History side */
|
|
.grid{display:grid;grid-template-columns:1.45fr .95fr;gap:22px;align-items:start;margin-top:22px;}
|
|
.hist-row{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-bottom:1px solid var(--border);}
|
|
.hist-row:last-child{border-bottom:0;}
|
|
.hist-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
|
|
.hist-who{font-size:13px;font-weight:500;color:var(--text-primary);}
|
|
.hist-when{font-size:12px;color:var(--text-muted);white-space:nowrap;}
|
|
.hist-detail{font-size:13px;color:var(--text-secondary);}
|
|
.chg{display:inline-flex;align-items:center;gap:6px;font-size:12px;}
|
|
.old{color:var(--text-muted);text-decoration:line-through;}
|
|
.arr{color:var(--text-muted);}
|
|
.new-tier{font-weight:600;}
|
|
.typ{display:inline-flex;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;margin-right:8px;}
|
|
.typ-tier{background:#F3EEFE;color:var(--status-spec-fg);}
|
|
.typ-credit{background:var(--surface-muted);color:var(--text-muted);}
|
|
.delta-up{color:var(--success-fg);font-weight:600;} .delta-down{color:var(--danger-fg);font-weight:600;}
|
|
.link-all{display:inline-block;margin-top:12px;font-size:13px;color:var(--brand-700);font-weight:500;cursor:pointer;}
|
|
.sectionlabel{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="topbar">
|
|
<div class="wordmark">Pipeliner <b>· OmDev</b></div>
|
|
<div class="acct"><span class="pill-admin">ADMIN</span> admin@omdev.tech ▾</div>
|
|
</div>
|
|
|
|
<div class="crumb">Admin / Clients</div>
|
|
<h1>Gestion des clients</h1>
|
|
<p class="sub">Liste filtrable des clients, édition du tier, ajustement des crédits et historique des modifications.</p>
|
|
|
|
<div class="grid">
|
|
<!-- Colonne gauche : tableau filtrable -->
|
|
<section class="card">
|
|
<h2>Clients</h2>
|
|
<p class="desc">Modifiez le tier ou ajustez les crédits ; chaque changement est tracé.</p>
|
|
|
|
<div class="filters">
|
|
<div class="search">
|
|
<span class="ic">⌕</span>
|
|
<input type="text" placeholder="Rechercher par nom ou e-mail…" value="">
|
|
</div>
|
|
<div class="selwrap"><select><option>Tous les tiers</option><option>Démarrage</option><option>Maintenance</option><option>Évolutions</option><option>Pilotage</option></select></div>
|
|
<span class="count-chip">12 clients</span>
|
|
</div>
|
|
|
|
<div class="tbl-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Client</th>
|
|
<th scope="col">Tier</th>
|
|
<th scope="col" class="num">Crédits restants</th>
|
|
<th scope="col" class="num">Ajuster</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><div class="cname">Acme Inc.</div><div class="cemail">contact@acme.com</div></td>
|
|
<td><div class="tier"><span class="tier-dot t4-d"></span><div class="selwrap"><select class="t4"><option>Pilotage</option><option>Démarrage</option><option>Maintenance</option><option>Évolutions</option></select></div></div></td>
|
|
<td class="num"><span class="credit"><span class="credit-val v-healthy">14 200 €</span></span></td>
|
|
<td class="num"><span class="stepper"><button aria-label="Retirer des crédits">−</button><span class="mid">100</span><button aria-label="Ajouter des crédits">+</button></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="cname">Seawave SARL</div><div class="cemail">ops@seawave.fr</div></td>
|
|
<td><div class="tier"><span class="tier-dot t2-d"></span><div class="selwrap"><select class="t2"><option>Maintenance</option><option>Démarrage</option><option>Évolutions</option><option>Pilotage</option></select></div></div></td>
|
|
<td class="num"><span class="credit"><span class="vbadge vb-warn">Attention</span><span class="credit-val v-warn">1 180 €</span></span></td>
|
|
<td class="num"><span class="stepper"><button aria-label="Retirer des crédits">−</button><span class="mid">100</span><button aria-label="Ajouter des crédits">+</button></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="cname">GetYourJob</div><div class="cemail">hello@getyourjob.io</div></td>
|
|
<td><div class="tier"><span class="tier-dot t3-d"></span><div class="selwrap"><select class="t3"><option>Évolutions</option><option>Démarrage</option><option>Maintenance</option><option>Pilotage</option></select></div></div></td>
|
|
<td class="num"><span class="credit"><span class="vbadge vb-crit">Critique</span><span class="credit-val v-crit">320 €</span></span></td>
|
|
<td class="num"><span class="stepper"><button aria-label="Retirer des crédits">−</button><span class="mid">100</span><button aria-label="Ajouter des crédits">+</button></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="cname">Beta Studio</div><div class="cemail">team@beta.studio</div></td>
|
|
<td><div class="tier"><span class="tier-dot t1-d"></span><div class="selwrap"><select class="t1"><option>Démarrage</option><option>Maintenance</option><option>Évolutions</option><option>Pilotage</option></select></div></div></td>
|
|
<td class="num"><span class="credit"><span class="credit-val v-healthy">2 050 €</span></span></td>
|
|
<td class="num"><span class="stepper"><button aria-label="Retirer des crédits">−</button><span class="mid">100</span><button aria-label="Ajouter des crédits">+</button></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="cname">Northwind Co.</div><div class="cemail">it@northwind.com</div></td>
|
|
<td><div class="tier"><span class="tier-dot t2-d"></span><div class="selwrap"><select class="t2"><option>Maintenance</option><option>Démarrage</option><option>Évolutions</option><option>Pilotage</option></select></div></div></td>
|
|
<td class="num"><span class="credit"><span class="credit-val v-healthy">3 740 €</span></span></td>
|
|
<td class="num"><span class="stepper"><button aria-label="Retirer des crédits">−</button><span class="mid">100</span><button aria-label="Ajouter des crédits">+</button></span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Colonne droite : historique consultable -->
|
|
<aside class="card">
|
|
<h2>Historique des modifications</h2>
|
|
<p class="desc">Qui, quoi, ancien → nouveau, quand.</p>
|
|
<div style="margin-top:14px;">
|
|
<div class="hist-row">
|
|
<div class="hist-top">
|
|
<span class="hist-who"><span class="typ typ-tier">Tier</span>Acme Inc.</span>
|
|
<span class="hist-when">aujourd'hui · 14:21</span>
|
|
</div>
|
|
<div class="hist-detail"><span class="chg"><span class="old">Évolutions</span><span class="arr">→</span><span class="new-tier t4">Pilotage</span></span></div>
|
|
<div class="hist-when">par admin@omdev.tech · e-mail client envoyé</div>
|
|
</div>
|
|
<div class="hist-row">
|
|
<div class="hist-top">
|
|
<span class="hist-who"><span class="typ typ-credit">Crédits</span>GetYourJob</span>
|
|
<span class="hist-when">hier · 17:03</span>
|
|
</div>
|
|
<div class="hist-detail"><span class="chg">320 € <span class="arr">→</span> <span class="delta-up">+9 700 €</span> → 10 020 €</span></div>
|
|
<div class="hist-when">par admin@omdev.tech</div>
|
|
</div>
|
|
<div class="hist-row">
|
|
<div class="hist-top">
|
|
<span class="hist-who"><span class="typ typ-credit">Crédits</span>Seawave SARL</span>
|
|
<span class="hist-when">hier · 09:48</span>
|
|
</div>
|
|
<div class="hist-detail"><span class="chg">1 600 € <span class="arr">→</span> <span class="delta-down">−420 €</span> → 1 180 €</span></div>
|
|
<div class="hist-when">par admin@omdev.tech</div>
|
|
</div>
|
|
<div class="hist-row">
|
|
<div class="hist-top">
|
|
<span class="hist-who"><span class="typ typ-tier">Tier</span>Beta Studio</span>
|
|
<span class="hist-when">10 juin · 11:12</span>
|
|
</div>
|
|
<div class="hist-detail"><span class="chg"><span class="old">Maintenance</span><span class="arr">→</span><span class="new-tier t1">Démarrage</span></span></div>
|
|
<div class="hist-when">par admin@omdev.tech · e-mail client envoyé</div>
|
|
</div>
|
|
</div>
|
|
<span class="link-all">Voir tout l'historique →</span>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
