Saad Ibn-Ezzoubayr
35545c2a8f
Initial commit of the L'Ami Fiduciaire SaaS platform built on Laravel 12, Vue 3, Inertia.js 2, and Tailwind CSS 4. Story 0.1 (rename folders to declarations in database) is implemented and code-reviewed: migration, rollback, and 6 Pest tests all passing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1282 lines
68 KiB
HTML
1282 lines
68 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>L'Ami Fiduciaire — Design Directions UX</title>
|
|
<style>
|
|
/* ===== Reset & Base ===== */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--primary: #4f46e5;
|
|
--primary-light: #6366f1;
|
|
--primary-dark: #4338ca;
|
|
--primary-bg: #eef2ff;
|
|
--bg: #ffffff;
|
|
--bg-muted: #f8fafc;
|
|
--bg-subtle: #f1f5f9;
|
|
--border: #e2e8f0;
|
|
--border-light: #f1f5f9;
|
|
--text: #0f172a;
|
|
--text-secondary: #475569;
|
|
--text-muted: #94a3b8;
|
|
--red: #dc2626; --red-bg: #fef2f2; --red-border: #fecaca;
|
|
--amber: #d97706; --amber-bg: #fffbeb; --amber-border: #fde68a;
|
|
--blue: #2563eb; --blue-bg: #eff6ff; --blue-border: #bfdbfe;
|
|
--green: #16a34a; --green-bg: #f0fdf4; --green-border: #bbf7d0;
|
|
--gray: #64748b; --gray-bg: #f8fafc; --gray-border: #e2e8f0;
|
|
--radius: 8px;
|
|
--radius-sm: 6px;
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
|
|
--shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
|
|
--shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
|
|
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
--font-mono: 'SF Mono', 'Fira Code', monospace;
|
|
}
|
|
html { font-size: 14px; }
|
|
body { font-family: var(--font); color: var(--text); background: var(--bg-muted); line-height: 1.5; -webkit-font-smoothing: antialiased; }
|
|
|
|
/* ===== Tab Navigation ===== */
|
|
.dir-tabs {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
|
|
display: flex; align-items: center; gap: 2px;
|
|
background: var(--text); padding: 0 16px; height: 44px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.2);
|
|
}
|
|
.dir-tabs .logo {
|
|
color: #fff; font-weight: 700; font-size: 13px; margin-right: 20px;
|
|
letter-spacing: -.02em; white-space: nowrap; opacity: .9;
|
|
}
|
|
.dir-tabs .logo span { color: var(--primary-light); }
|
|
.dir-tab {
|
|
padding: 8px 16px; font-size: 12.5px; font-weight: 500;
|
|
color: rgba(255,255,255,.55); background: transparent; border: none;
|
|
cursor: pointer; border-radius: 6px 6px 0 0; transition: all .15s;
|
|
font-family: var(--font); white-space: nowrap;
|
|
}
|
|
.dir-tab:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); }
|
|
.dir-tab.active {
|
|
color: #fff; background: var(--primary);
|
|
}
|
|
.dir-tab .tab-num {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 18px; height: 18px; border-radius: 4px; font-size: 11px;
|
|
font-weight: 600; margin-right: 6px;
|
|
background: rgba(255,255,255,.12); color: rgba(255,255,255,.6);
|
|
}
|
|
.dir-tab.active .tab-num { background: rgba(255,255,255,.25); color: #fff; }
|
|
|
|
/* ===== Direction Panels ===== */
|
|
.direction { display: none; margin-top: 44px; min-height: calc(100vh - 44px); }
|
|
.direction.active { display: flex; }
|
|
|
|
/* ===== Shared: Sidebar ===== */
|
|
.sidebar {
|
|
background: var(--bg); border-right: 1px solid var(--border);
|
|
display: flex; flex-direction: column; flex-shrink: 0;
|
|
height: calc(100vh - 44px); position: sticky; top: 44px;
|
|
}
|
|
.sidebar-header {
|
|
padding: 16px; border-bottom: 1px solid var(--border);
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.sidebar-header .avatar {
|
|
width: 32px; height: 32px; border-radius: var(--radius);
|
|
background: var(--primary); display: flex; align-items: center;
|
|
justify-content: center; color: #fff; font-weight: 700; font-size: 13px;
|
|
}
|
|
.sidebar-header .org-name { font-weight: 600; font-size: 13px; }
|
|
.sidebar-header .org-sub { font-size: 11px; color: var(--text-muted); }
|
|
.sidebar-nav { flex: 1; padding: 8px; overflow-y: auto; }
|
|
.sidebar-item {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 8px 10px; border-radius: var(--radius-sm);
|
|
font-size: 13px; font-weight: 500; color: var(--text-secondary);
|
|
cursor: pointer; transition: all .12s; text-decoration: none;
|
|
}
|
|
.sidebar-item:hover { background: var(--bg-subtle); color: var(--text); }
|
|
.sidebar-item.active { background: var(--primary-bg); color: var(--primary); font-weight: 600; }
|
|
.sidebar-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .7; }
|
|
.sidebar-item.active svg { opacity: 1; }
|
|
.sidebar-footer {
|
|
padding: 12px 16px; border-top: 1px solid var(--border);
|
|
font-size: 11px; color: var(--text-muted);
|
|
}
|
|
|
|
/* ===== Shared: Main Content ===== */
|
|
.main { flex: 1; min-width: 0; overflow-y: auto; height: calc(100vh - 44px); background: var(--bg-muted); }
|
|
.main-padded { padding: 24px 28px; }
|
|
|
|
.breadcrumb {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font-size: 12px; color: var(--text-muted); margin-bottom: 4px;
|
|
}
|
|
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
|
|
.breadcrumb a:hover { color: var(--text-secondary); }
|
|
.breadcrumb .sep { font-size: 10px; }
|
|
|
|
.page-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
.page-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px;
|
|
font-weight: 500; border: 1px solid var(--border); background: var(--bg);
|
|
color: var(--text); cursor: pointer; transition: all .12s;
|
|
font-family: var(--font);
|
|
}
|
|
.btn:hover { background: var(--bg-subtle); }
|
|
.btn-primary {
|
|
background: var(--primary); color: #fff; border-color: var(--primary);
|
|
}
|
|
.btn-primary:hover { background: var(--primary-dark); }
|
|
.btn svg { width: 15px; height: 15px; }
|
|
|
|
/* ===== Summary Cards ===== */
|
|
.cards-row { display: grid; gap: 14px; margin-bottom: 20px; }
|
|
.cards-4 { grid-template-columns: repeat(4, 1fr); }
|
|
.stat-card {
|
|
background: var(--bg); border: 1px solid var(--border);
|
|
border-radius: var(--radius); padding: 16px 18px;
|
|
transition: box-shadow .15s;
|
|
}
|
|
.stat-card:hover { box-shadow: var(--shadow-md); }
|
|
.stat-card .label { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 6px; }
|
|
.stat-card .value { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
|
|
.stat-card .sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
|
.stat-card.card-blue .value { color: var(--blue); }
|
|
.stat-card.card-red .value { color: var(--red); }
|
|
.stat-card.card-amber .value { color: var(--amber); }
|
|
.stat-card.card-red-urgent .value { color: var(--red); }
|
|
|
|
/* ===== Filter Bar ===== */
|
|
.filter-bar {
|
|
display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
|
|
}
|
|
.filter-pill {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
padding: 5px 12px; border-radius: 100px; font-size: 12px;
|
|
font-weight: 500; border: 1px solid var(--border); background: var(--bg);
|
|
color: var(--text-secondary); cursor: pointer; transition: all .12s;
|
|
font-family: var(--font);
|
|
}
|
|
.filter-pill:hover { border-color: var(--primary); color: var(--primary); }
|
|
.filter-pill.active { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }
|
|
.filter-pill svg { width: 13px; height: 13px; }
|
|
.search-input {
|
|
padding: 6px 12px 6px 32px; border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm); font-size: 13px; background: var(--bg);
|
|
color: var(--text); width: 220px; font-family: var(--font);
|
|
transition: border-color .12s;
|
|
}
|
|
.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
|
|
.search-wrap { position: relative; }
|
|
.search-wrap svg {
|
|
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
|
|
width: 14px; height: 14px; color: var(--text-muted);
|
|
}
|
|
|
|
/* ===== Data Table ===== */
|
|
.table-wrap {
|
|
background: var(--bg); border: 1px solid var(--border);
|
|
border-radius: var(--radius); overflow: hidden;
|
|
}
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th {
|
|
text-align: left; padding: 10px 14px; font-size: 11.5px;
|
|
font-weight: 600; color: var(--text-muted); text-transform: uppercase;
|
|
letter-spacing: .04em; border-bottom: 1px solid var(--border);
|
|
background: var(--bg-muted); white-space: nowrap;
|
|
}
|
|
td {
|
|
padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--border-light);
|
|
white-space: nowrap;
|
|
}
|
|
tr:last-child td { border-bottom: none; }
|
|
tr:hover td { background: var(--bg-subtle); }
|
|
.client-name { font-weight: 600; color: var(--text); }
|
|
.client-ice { font-size: 11px; color: var(--text-muted); }
|
|
|
|
/* ===== Status Badges ===== */
|
|
.badge {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
padding: 3px 10px; border-radius: 100px; font-size: 11.5px;
|
|
font-weight: 600; white-space: nowrap;
|
|
}
|
|
.badge-dot {
|
|
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
|
|
}
|
|
.badge-red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
|
|
.badge-red .badge-dot { background: var(--red); }
|
|
.badge-blue { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
|
|
.badge-blue .badge-dot { background: var(--blue); }
|
|
.badge-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
|
|
.badge-amber .badge-dot { background: var(--amber); }
|
|
.badge-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
|
|
.badge-green .badge-dot { background: var(--green); }
|
|
.badge-gray { background: var(--gray-bg); color: var(--gray); border: 1px solid var(--gray-border); }
|
|
.badge-gray .badge-dot { background: var(--gray); }
|
|
|
|
/* ===== Three-dot action ===== */
|
|
.action-btn {
|
|
width: 30px; height: 30px; border: none; background: transparent;
|
|
border-radius: var(--radius-sm); cursor: pointer; display: inline-flex;
|
|
align-items: center; justify-content: center; color: var(--text-muted);
|
|
transition: all .12s;
|
|
}
|
|
.action-btn:hover { background: var(--bg-subtle); color: var(--text); }
|
|
.action-btn svg { width: 16px; height: 16px; }
|
|
|
|
/* ===== Direction 1 Specifics: Linear Dense ===== */
|
|
.d1 .sidebar { width: 52px; padding: 0; }
|
|
.d1 .sidebar-header { padding: 12px; justify-content: center; }
|
|
.d1 .sidebar-header .avatar { width: 28px; height: 28px; font-size: 11px; }
|
|
.d1 .sidebar-header .org-info { display: none; }
|
|
.d1 .sidebar-nav { padding: 4px; }
|
|
.d1 .sidebar-item { padding: 8px; justify-content: center; border-radius: var(--radius-sm); }
|
|
.d1 .sidebar-item span { display: none; }
|
|
.d1 .sidebar-item svg { width: 20px; height: 20px; margin: 0; }
|
|
.d1 .sidebar-footer { display: none; }
|
|
.d1 table td { padding: 5px 14px; font-size: 12.5px; }
|
|
.d1 table th { padding: 7px 14px; font-size: 11px; }
|
|
.d1 .badge { padding: 1px 8px; font-size: 11px; }
|
|
.d1 .stat-card { padding: 10px 14px; }
|
|
.d1 .stat-card .value { font-size: 18px; }
|
|
.d1 .stat-card .label { font-size: 11px; margin-bottom: 2px; }
|
|
.d1 .cards-row { gap: 8px; margin-bottom: 12px; }
|
|
.d1 .page-title { font-size: 16px; }
|
|
.d1 .main-padded { padding: 16px 20px; }
|
|
.d1 .filter-bar { margin-bottom: 8px; }
|
|
.d1 .breadcrumb { margin-bottom: 2px; }
|
|
.d1 .page-header { margin-bottom: 12px; }
|
|
|
|
/* ===== Direction 2 Specifics: Command Center ===== */
|
|
.d2 .sidebar { width: 230px; }
|
|
.d2 .stat-card { padding: 20px 22px; }
|
|
.d2 .stat-card .value { font-size: 36px; }
|
|
.d2 .stat-card .label { font-size: 13px; margin-bottom: 8px; }
|
|
.d2 .stat-card .sub { font-size: 12px; margin-top: 6px; }
|
|
.d2 .cards-row { gap: 16px; margin-bottom: 24px; }
|
|
.d2 .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
|
|
.d2 .panel {
|
|
background: var(--bg); border: 1px solid var(--border);
|
|
border-radius: var(--radius); overflow: hidden;
|
|
}
|
|
.d2 .panel-header {
|
|
padding: 14px 18px; border-bottom: 1px solid var(--border);
|
|
font-size: 13px; font-weight: 600; display: flex;
|
|
align-items: center; justify-content: space-between;
|
|
}
|
|
.d2 .panel-body { padding: 0; }
|
|
.d2 .alert-item {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 12px 18px; border-bottom: 1px solid var(--border-light);
|
|
font-size: 13px; cursor: pointer; transition: background .1s;
|
|
}
|
|
.d2 .alert-item:hover { background: var(--bg-subtle); }
|
|
.d2 .alert-item:last-child { border-bottom: none; }
|
|
.d2 .alert-icon {
|
|
width: 32px; height: 32px; border-radius: var(--radius-sm);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px; flex-shrink: 0;
|
|
}
|
|
.d2 .alert-icon.red { background: var(--red-bg); color: var(--red); }
|
|
.d2 .alert-icon.amber { background: var(--amber-bg); color: var(--amber); }
|
|
.d2 .alert-title { font-weight: 600; }
|
|
.d2 .alert-sub { font-size: 12px; color: var(--text-muted); }
|
|
.d2 .activity-item {
|
|
display: flex; gap: 12px; padding: 12px 18px;
|
|
border-bottom: 1px solid var(--border-light); font-size: 13px;
|
|
}
|
|
.d2 .activity-item:last-child { border-bottom: none; }
|
|
.d2 .activity-dot {
|
|
width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
|
|
margin-top: 5px; flex-shrink: 0;
|
|
}
|
|
.d2 .activity-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
|
|
|
|
/* ===== Direction 3 Specifics: Balanced Professional ===== */
|
|
.d3 .sidebar { width: 220px; }
|
|
.d3 .stat-card { padding: 14px 16px; }
|
|
.d3 .stat-card .value { font-size: 22px; }
|
|
.d3 table td { padding: 11px 14px; }
|
|
|
|
/* ===== Direction 4 Specifics: Split View ===== */
|
|
.d4 .sidebar { width: 200px; }
|
|
.d4 .split-layout { display: flex; flex: 1; min-width: 0; }
|
|
.d4 .split-left { flex: 0 0 60%; border-right: 1px solid var(--border); overflow-y: auto; height: calc(100vh - 44px); background: var(--bg-muted); }
|
|
.d4 .split-right { flex: 0 0 40%; overflow-y: auto; height: calc(100vh - 44px); background: var(--bg); }
|
|
.d4 .split-left table td { padding: 7px 12px; font-size: 12.5px; }
|
|
.d4 .split-left table th { padding: 8px 12px; }
|
|
.d4 .split-left .main-padded { padding: 16px 18px; }
|
|
.d4 .detail-header {
|
|
padding: 20px 24px; border-bottom: 1px solid var(--border);
|
|
}
|
|
.d4 .detail-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
|
|
.d4 .detail-sub { font-size: 12px; color: var(--text-muted); }
|
|
.d4 .detail-section {
|
|
padding: 18px 24px; border-bottom: 1px solid var(--border-light);
|
|
}
|
|
.d4 .detail-section h4 {
|
|
font-size: 11.5px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: .04em; color: var(--text-muted); margin-bottom: 12px;
|
|
}
|
|
.d4 .detail-field { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; }
|
|
.d4 .detail-field .label { color: var(--text-muted); }
|
|
.d4 .detail-field .val { font-weight: 500; }
|
|
.d4 .detail-actions { padding: 18px 24px; display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.d4 tr.selected td { background: var(--primary-bg); }
|
|
.d4 .timeline-item { display: flex; gap: 12px; margin-bottom: 14px; font-size: 13px; }
|
|
.d4 .timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); margin-top: 5px; flex-shrink: 0; }
|
|
.d4 .timeline-item.current .timeline-dot { background: var(--primary); }
|
|
.d4 .timeline-time { font-size: 11px; color: var(--text-muted); }
|
|
|
|
/* ===== Comparison Section ===== */
|
|
.comparison {
|
|
background: var(--bg); border-top: 2px solid var(--border);
|
|
padding: 48px 40px; margin-top: 0;
|
|
}
|
|
.comparison h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.02em; }
|
|
.comparison .subtitle { color: var(--text-secondary); margin-bottom: 32px; font-size: 14px; }
|
|
.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 36px; }
|
|
.comp-card {
|
|
border: 1px solid var(--border); border-radius: var(--radius);
|
|
padding: 24px; transition: box-shadow .15s;
|
|
}
|
|
.comp-card:hover { box-shadow: var(--shadow-md); }
|
|
.comp-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--primary); }
|
|
.comp-card .persona { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
|
|
.comp-card .pros, .comp-card .cons { margin-bottom: 12px; }
|
|
.comp-card .pros h4, .comp-card .cons h4 {
|
|
font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
|
|
font-weight: 600; margin-bottom: 6px;
|
|
}
|
|
.comp-card .pros h4 { color: var(--green); }
|
|
.comp-card .cons h4 { color: var(--red); }
|
|
.comp-card ul { list-style: none; padding: 0; }
|
|
.comp-card li { font-size: 13px; color: var(--text-secondary); padding: 3px 0; padding-left: 16px; position: relative; }
|
|
.comp-card .pros li::before { content: "+"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
|
|
.comp-card .cons li::before { content: "\2013"; position: absolute; left: 0; color: var(--red); font-weight: 700; }
|
|
.comp-card .density { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
|
|
.density-bar { width: 80px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
|
|
.density-fill { height: 100%; background: var(--primary); border-radius: 3px; }
|
|
|
|
.rec-box {
|
|
background: var(--primary-bg); border: 1px solid rgba(79,70,229,.2);
|
|
border-radius: var(--radius); padding: 24px; margin-top: 12px;
|
|
}
|
|
.rec-box h3 { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
|
|
.rec-box p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ===== TAB NAVIGATION ===== -->
|
|
<div class="dir-tabs">
|
|
<div class="logo">L'Ami <span>Fiduciaire</span></div>
|
|
<button class="dir-tab active" onclick="showDir(1)"><span class="tab-num">1</span>Linear Dense</button>
|
|
<button class="dir-tab" onclick="showDir(2)"><span class="tab-num">2</span>Command Center</button>
|
|
<button class="dir-tab" onclick="showDir(3)"><span class="tab-num">3</span>Balanced Pro</button>
|
|
<button class="dir-tab" onclick="showDir(4)"><span class="tab-num">4</span>Split View</button>
|
|
<button class="dir-tab" onclick="showDir(5)"><span class="tab-num">↔</span>Comparaison</button>
|
|
</div>
|
|
|
|
<!-- SVG Icon Definitions (hidden) -->
|
|
<svg style="display:none">
|
|
<symbol id="icon-dashboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></symbol>
|
|
<symbol id="icon-clients" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
|
|
<symbol id="icon-declarations" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></symbol>
|
|
<symbol id="icon-archive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></symbol>
|
|
<symbol id="icon-team" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
|
|
<symbol id="icon-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></symbol>
|
|
<symbol id="icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></symbol>
|
|
<symbol id="icon-filter" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></symbol>
|
|
<symbol id="icon-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></symbol>
|
|
<symbol id="icon-dots" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></symbol>
|
|
<symbol id="icon-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></symbol>
|
|
<symbol id="icon-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></symbol>
|
|
<symbol id="icon-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></symbol>
|
|
<symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></symbol>
|
|
<symbol id="icon-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></symbol>
|
|
<symbol id="icon-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></symbol>
|
|
</svg>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- DIRECTION 1: LINEAR-INSPIRED DENSE -->
|
|
<!-- ========================================== -->
|
|
<div class="direction d1 active" id="dir1">
|
|
<!-- Sidebar (icon-only) -->
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="avatar">AF</div>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<a class="sidebar-item" title="Dashboard"><svg><use href="#icon-dashboard"/></svg></a>
|
|
<a class="sidebar-item" title="Clients"><svg><use href="#icon-clients"/></svg></a>
|
|
<a class="sidebar-item active" title="Declarations"><svg><use href="#icon-declarations"/></svg></a>
|
|
<a class="sidebar-item" title="Archive"><svg><use href="#icon-archive"/></svg></a>
|
|
<a class="sidebar-item" title="Equipe"><svg><use href="#icon-team"/></svg></a>
|
|
<a class="sidebar-item" title="Parametres"><svg><use href="#icon-settings"/></svg></a>
|
|
</nav>
|
|
</div>
|
|
<!-- Main -->
|
|
<div class="main">
|
|
<div class="main-padded">
|
|
<div class="breadcrumb">
|
|
<a href="#">Accueil</a><span class="sep">›</span><span>Declarations</span>
|
|
</div>
|
|
<div class="page-header">
|
|
<h1 class="page-title">Declarations</h1>
|
|
<div style="display:flex;gap:6px;">
|
|
<button class="btn" style="padding:5px 10px;font-size:12px;"><svg style="width:13px;height:13px;"><use href="#icon-download"/></svg>Exporter</button>
|
|
<button class="btn btn-primary" style="padding:5px 10px;font-size:12px;"><svg style="width:13px;height:13px;"><use href="#icon-plus"/></svg>Nouvelle</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mini cards row -->
|
|
<div class="cards-row cards-4">
|
|
<div class="stat-card card-blue"><div class="label">En cours</div><div class="value">12</div></div>
|
|
<div class="stat-card card-red"><div class="label">En retard</div><div class="value">3</div></div>
|
|
<div class="stat-card card-amber"><div class="label">En attente client</div><div class="value">5</div></div>
|
|
<div class="stat-card card-red-urgent"><div class="label">Urgent</div><div class="value">2</div></div>
|
|
</div>
|
|
|
|
<!-- Filter bar -->
|
|
<div class="filter-bar">
|
|
<div class="search-wrap">
|
|
<svg><use href="#icon-search"/></svg>
|
|
<input class="search-input" placeholder="Rechercher..." style="padding:4px 10px 4px 28px;font-size:12px;width:180px;">
|
|
</div>
|
|
<button class="filter-pill active"><svg><use href="#icon-filter"/></svg>Tous (22)</button>
|
|
<button class="filter-pill">En retard</button>
|
|
<button class="filter-pill">En cours</button>
|
|
<button class="filter-pill">En attente</button>
|
|
<button class="filter-pill">Brouillon</button>
|
|
</div>
|
|
|
|
<!-- Dense Table -->
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width:24px;padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></th>
|
|
<th>Client</th>
|
|
<th>Type</th>
|
|
<th>Echeance</th>
|
|
<th>Statut</th>
|
|
<th>Responsable</th>
|
|
<th style="width:40px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td style="padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><span class="client-name">SARL Benani Import</span><br><span class="client-ice">ICE: 001234567000012</span></td>
|
|
<td>TVA mensuelle</td>
|
|
<td style="color:var(--red);font-weight:600;">20 fev 2026</td>
|
|
<td><span class="badge badge-red"><span class="badge-dot"></span>En retard</span></td>
|
|
<td>Fatima E.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><span class="client-name">Societe Tazi & Fils</span><br><span class="client-ice">ICE: 001987654000034</span></td>
|
|
<td>IS acompte</td>
|
|
<td style="color:var(--red);font-weight:600;">25 fev 2026</td>
|
|
<td><span class="badge badge-red"><span class="badge-dot"></span>En retard</span></td>
|
|
<td>Youssef M.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><span class="client-name">Atlas Consulting SARL</span><br><span class="client-ice">ICE: 002345678000056</span></td>
|
|
<td>TVA mensuelle</td>
|
|
<td>20 mars 2026</td>
|
|
<td><span class="badge badge-blue"><span class="badge-dot"></span>En cours</span></td>
|
|
<td>Fatima E.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><span class="client-name">Moulin du Rif SA</span><br><span class="client-ice">ICE: 003456789000078</span></td>
|
|
<td>IR salaries</td>
|
|
<td>31 mars 2026</td>
|
|
<td><span class="badge badge-blue"><span class="badge-dot"></span>En cours</span></td>
|
|
<td>Amina B.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><span class="client-name">Pharmacie El Mansour</span><br><span class="client-ice">ICE: 004567890000090</span></td>
|
|
<td>CNSS</td>
|
|
<td>10 mars 2026</td>
|
|
<td><span class="badge badge-amber"><span class="badge-dot"></span>En attente client</span></td>
|
|
<td>Youssef M.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><span class="client-name">Groupe Fassi Immobilier</span><br><span class="client-ice">ICE: 005678901000012</span></td>
|
|
<td>TVA trimestrielle</td>
|
|
<td>20 mars 2026</td>
|
|
<td><span class="badge badge-blue"><span class="badge-dot"></span>En cours</span></td>
|
|
<td>Fatima E.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><span class="client-name">Transport Rachidi Express</span><br><span class="client-ice">ICE: 006789012000034</span></td>
|
|
<td>IS acompte</td>
|
|
<td>31 mars 2026</td>
|
|
<td><span class="badge badge-amber"><span class="badge-dot"></span>En attente client</span></td>
|
|
<td>Amina B.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><span class="client-name">Restaurant La Sqala</span><br><span class="client-ice">ICE: 007890123000056</span></td>
|
|
<td>TVA mensuelle</td>
|
|
<td>20 mars 2026</td>
|
|
<td><span class="badge badge-green"><span class="badge-dot"></span>Termine</span></td>
|
|
<td>Fatima E.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><span class="client-name">Textile Meknes SARL</span><br><span class="client-ice">ICE: 008901234000078</span></td>
|
|
<td>CNSS</td>
|
|
<td>10 mars 2026</td>
|
|
<td><span class="badge badge-gray"><span class="badge-dot"></span>Brouillon</span></td>
|
|
<td>Youssef M.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:5px 8px;"><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><span class="client-name">Cabinet Alaoui Avocats</span><br><span class="client-ice">ICE: 009012345000090</span></td>
|
|
<td>IR salaries</td>
|
|
<td style="color:var(--red);font-weight:600;">28 fev 2026</td>
|
|
<td><span class="badge badge-red"><span class="badge-dot"></span>En retard</span></td>
|
|
<td>Amina B.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:11px;color:var(--text-muted);">
|
|
<span>10 sur 22 declarations</span>
|
|
<div style="display:flex;gap:4px;">
|
|
<button class="btn" style="padding:3px 8px;font-size:11px;">Precedent</button>
|
|
<button class="btn" style="padding:3px 8px;font-size:11px;">Suivant</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- DIRECTION 2: COMMAND CENTER DASHBOARD -->
|
|
<!-- ========================================== -->
|
|
<div class="direction d2" id="dir2">
|
|
<!-- Full sidebar -->
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="avatar">AF</div>
|
|
<div class="org-info">
|
|
<div class="org-name">Cabinet Bennani</div>
|
|
<div class="org-sub">Plan Professionnel</div>
|
|
</div>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<a class="sidebar-item"><svg><use href="#icon-dashboard"/></svg><span>Dashboard</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-clients"/></svg><span>Clients</span></a>
|
|
<a class="sidebar-item active"><svg><use href="#icon-declarations"/></svg><span>Declarations</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-archive"/></svg><span>Archive</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-team"/></svg><span>Equipe</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-settings"/></svg><span>Parametres</span></a>
|
|
</nav>
|
|
<div class="sidebar-footer">v1.0.0 · L'Ami Fiduciaire</div>
|
|
</div>
|
|
<!-- Main -->
|
|
<div class="main">
|
|
<div class="main-padded">
|
|
<div class="breadcrumb">
|
|
<a href="#">Accueil</a><span class="sep">›</span><span>Declarations</span>
|
|
</div>
|
|
<div class="page-header">
|
|
<div>
|
|
<h1 class="page-title">Declarations</h1>
|
|
<p style="font-size:13px;color:var(--text-muted);margin-top:2px;">Vue d'ensemble — Mars 2026</p>
|
|
</div>
|
|
<div style="display:flex;gap:8px;">
|
|
<button class="btn"><svg><use href="#icon-download"/></svg>Exporter</button>
|
|
<button class="btn btn-primary"><svg><use href="#icon-plus"/></svg>Nouvelle declaration</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Large Summary Cards -->
|
|
<div class="cards-row cards-4">
|
|
<div class="stat-card card-blue">
|
|
<div class="label">En cours</div>
|
|
<div class="value">12</div>
|
|
<div class="sub">+3 cette semaine</div>
|
|
</div>
|
|
<div class="stat-card card-red">
|
|
<div class="label">En retard</div>
|
|
<div class="value">3</div>
|
|
<div class="sub">Echeance depassee</div>
|
|
</div>
|
|
<div class="stat-card card-amber">
|
|
<div class="label">En attente client</div>
|
|
<div class="value">5</div>
|
|
<div class="sub">Documents manquants</div>
|
|
</div>
|
|
<div class="stat-card card-red-urgent">
|
|
<div class="label">Urgent</div>
|
|
<div class="value">2</div>
|
|
<div class="sub">Action requise</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Two column: Alerts + Activity -->
|
|
<div class="two-col">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span><svg style="width:14px;height:14px;vertical-align:-2px;margin-right:6px;color:var(--red);"><use href="#icon-alert"/></svg>Alertes prioritaires</span>
|
|
<a href="#" style="font-size:12px;color:var(--primary);text-decoration:none;">Voir tout</a>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="alert-item">
|
|
<div class="alert-icon red"><svg style="width:16px;height:16px;"><use href="#icon-alert"/></svg></div>
|
|
<div>
|
|
<div class="alert-title">SARL Benani Import — TVA mensuelle</div>
|
|
<div class="alert-sub">Echeance depassee de 19 jours · Penalites possibles</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert-item">
|
|
<div class="alert-icon red"><svg style="width:16px;height:16px;"><use href="#icon-alert"/></svg></div>
|
|
<div>
|
|
<div class="alert-title">Societe Tazi & Fils — IS acompte</div>
|
|
<div class="alert-sub">Echeance depassee de 14 jours</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert-item">
|
|
<div class="alert-icon amber"><svg style="width:16px;height:16px;"><use href="#icon-clock"/></svg></div>
|
|
<div>
|
|
<div class="alert-title">Cabinet Alaoui Avocats — IR salaries</div>
|
|
<div class="alert-sub">Echeance depassee de 11 jours</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert-item">
|
|
<div class="alert-icon amber"><svg style="width:16px;height:16px;"><use href="#icon-clock"/></svg></div>
|
|
<div>
|
|
<div class="alert-title">Pharmacie El Mansour — CNSS</div>
|
|
<div class="alert-sub">En attente des bulletins de paie</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span><svg style="width:14px;height:14px;vertical-align:-2px;margin-right:6px;color:var(--primary);"><use href="#icon-clock"/></svg>Activite recente</span>
|
|
<a href="#" style="font-size:12px;color:var(--primary);text-decoration:none;">Voir tout</a>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="activity-item">
|
|
<div class="activity-dot"></div>
|
|
<div>
|
|
<div><strong>Fatima E.</strong> a soumis la TVA pour Restaurant La Sqala</div>
|
|
<div class="activity-time">Il y a 25 min</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background:var(--green);"></div>
|
|
<div>
|
|
<div><strong>Youssef M.</strong> a marque comme termine: Boulangerie Idrissi</div>
|
|
<div class="activity-time">Il y a 1h</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background:var(--amber);"></div>
|
|
<div>
|
|
<div><strong>Amina B.</strong> attend les documents de Transport Rachidi</div>
|
|
<div class="activity-time">Il y a 2h</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background:var(--border);"></div>
|
|
<div>
|
|
<div><strong>Karim B.</strong> a cree un brouillon pour Textile Meknes</div>
|
|
<div class="activity-time">Hier, 17:30</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table below -->
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
|
|
<h2 style="font-size:15px;font-weight:600;">Toutes les declarations</h2>
|
|
<div class="filter-bar" style="margin-bottom:0;">
|
|
<div class="search-wrap">
|
|
<svg><use href="#icon-search"/></svg>
|
|
<input class="search-input" placeholder="Rechercher un client...">
|
|
</div>
|
|
<button class="filter-pill active"><svg><use href="#icon-filter"/></svg>Tous</button>
|
|
<button class="filter-pill">En retard</button>
|
|
<button class="filter-pill">En cours</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Client</th><th>Type</th><th>Echeance</th><th>Statut</th><th>Responsable</th><th style="width:40px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><span class="client-name">SARL Benani Import</span></td><td>TVA mensuelle</td><td style="color:var(--red);font-weight:600;">20 fev 2026</td><td><span class="badge badge-red"><span class="badge-dot"></span>En retard</span></td><td>Fatima E.</td><td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td></tr>
|
|
<tr><td><span class="client-name">Societe Tazi & Fils</span></td><td>IS acompte</td><td style="color:var(--red);font-weight:600;">25 fev 2026</td><td><span class="badge badge-red"><span class="badge-dot"></span>En retard</span></td><td>Youssef M.</td><td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td></tr>
|
|
<tr><td><span class="client-name">Atlas Consulting SARL</span></td><td>TVA mensuelle</td><td>20 mars 2026</td><td><span class="badge badge-blue"><span class="badge-dot"></span>En cours</span></td><td>Fatima E.</td><td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td></tr>
|
|
<tr><td><span class="client-name">Moulin du Rif SA</span></td><td>IR salaries</td><td>31 mars 2026</td><td><span class="badge badge-blue"><span class="badge-dot"></span>En cours</span></td><td>Amina B.</td><td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td></tr>
|
|
<tr><td><span class="client-name">Pharmacie El Mansour</span></td><td>CNSS</td><td>10 mars 2026</td><td><span class="badge badge-amber"><span class="badge-dot"></span>En attente client</span></td><td>Youssef M.</td><td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td></tr>
|
|
<tr><td><span class="client-name">Groupe Fassi Immobilier</span></td><td>TVA trimestrielle</td><td>20 mars 2026</td><td><span class="badge badge-blue"><span class="badge-dot"></span>En cours</span></td><td>Fatima E.</td><td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td></tr>
|
|
<tr><td><span class="client-name">Transport Rachidi Express</span></td><td>IS acompte</td><td>31 mars 2026</td><td><span class="badge badge-amber"><span class="badge-dot"></span>En attente client</span></td><td>Amina B.</td><td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td></tr>
|
|
<tr><td><span class="client-name">Restaurant La Sqala</span></td><td>TVA mensuelle</td><td>20 mars 2026</td><td><span class="badge badge-green"><span class="badge-dot"></span>Termine</span></td><td>Fatima E.</td><td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- DIRECTION 3: BALANCED PROFESSIONAL -->
|
|
<!-- ========================================== -->
|
|
<div class="direction d3" id="dir3">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="avatar">AF</div>
|
|
<div class="org-info">
|
|
<div class="org-name">Cabinet Bennani</div>
|
|
<div class="org-sub">Plan Professionnel</div>
|
|
</div>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<a class="sidebar-item"><svg><use href="#icon-dashboard"/></svg><span>Dashboard</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-clients"/></svg><span>Clients</span></a>
|
|
<a class="sidebar-item active"><svg><use href="#icon-declarations"/></svg><span>Declarations</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-archive"/></svg><span>Archive</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-team"/></svg><span>Equipe</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-settings"/></svg><span>Parametres</span></a>
|
|
</nav>
|
|
<div class="sidebar-footer">v1.0.0 · L'Ami Fiduciaire</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="main-padded">
|
|
<div class="breadcrumb">
|
|
<a href="#">Accueil</a><span class="sep">›</span><span>Declarations</span>
|
|
</div>
|
|
<div class="page-header">
|
|
<h1 class="page-title">Declarations</h1>
|
|
<div style="display:flex;gap:8px;">
|
|
<button class="btn"><svg><use href="#icon-download"/></svg>Exporter</button>
|
|
<button class="btn btn-primary"><svg><use href="#icon-plus"/></svg>Nouvelle declaration</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Compact cards -->
|
|
<div class="cards-row cards-4">
|
|
<div class="stat-card card-blue"><div class="label">En cours</div><div class="value">12</div></div>
|
|
<div class="stat-card card-red"><div class="label">En retard</div><div class="value">3</div></div>
|
|
<div class="stat-card card-amber"><div class="label">En attente client</div><div class="value">5</div></div>
|
|
<div class="stat-card card-red-urgent"><div class="label">Urgent</div><div class="value">2</div></div>
|
|
</div>
|
|
|
|
<!-- Prominent filter bar -->
|
|
<div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;">
|
|
<div class="filter-bar" style="margin-bottom:0;">
|
|
<div class="search-wrap">
|
|
<svg><use href="#icon-search"/></svg>
|
|
<input class="search-input" placeholder="Rechercher par client, type ou responsable..." style="width:300px;">
|
|
</div>
|
|
<button class="filter-pill active"><svg><use href="#icon-filter"/></svg>Tous (22)</button>
|
|
<button class="filter-pill">En retard (3)</button>
|
|
<button class="filter-pill">En cours (12)</button>
|
|
<button class="filter-pill">En attente (5)</button>
|
|
<button class="filter-pill">Termine</button>
|
|
<button class="filter-pill">Brouillon</button>
|
|
<div style="flex:1;"></div>
|
|
<button class="btn" style="font-size:12px;padding:5px 10px;">Trier par: Echeance</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Standard table -->
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width:28px;"><input type="checkbox" style="accent-color:var(--primary);"></th>
|
|
<th>Client</th><th>Type</th><th>Echeance</th><th>Statut</th><th>Responsable</th><th style="width:40px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><div class="client-name">SARL Benani Import</div><div class="client-ice">ICE: 001234567000012</div></td>
|
|
<td>TVA mensuelle</td>
|
|
<td style="color:var(--red);font-weight:600;">20 fev 2026</td>
|
|
<td><span class="badge badge-red"><span class="badge-dot"></span>En retard</span></td>
|
|
<td>Fatima E.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><div class="client-name">Societe Tazi & Fils</div><div class="client-ice">ICE: 001987654000034</div></td>
|
|
<td>IS acompte</td>
|
|
<td style="color:var(--red);font-weight:600;">25 fev 2026</td>
|
|
<td><span class="badge badge-red"><span class="badge-dot"></span>En retard</span></td>
|
|
<td>Youssef M.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><div class="client-name">Cabinet Alaoui Avocats</div><div class="client-ice">ICE: 009012345000090</div></td>
|
|
<td>IR salaries</td>
|
|
<td style="color:var(--red);font-weight:600;">28 fev 2026</td>
|
|
<td><span class="badge badge-red"><span class="badge-dot"></span>En retard</span></td>
|
|
<td>Amina B.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><div class="client-name">Pharmacie El Mansour</div><div class="client-ice">ICE: 004567890000090</div></td>
|
|
<td>CNSS</td>
|
|
<td>10 mars 2026</td>
|
|
<td><span class="badge badge-amber"><span class="badge-dot"></span>En attente client</span></td>
|
|
<td>Youssef M.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><div class="client-name">Atlas Consulting SARL</div><div class="client-ice">ICE: 002345678000056</div></td>
|
|
<td>TVA mensuelle</td>
|
|
<td>20 mars 2026</td>
|
|
<td><span class="badge badge-blue"><span class="badge-dot"></span>En cours</span></td>
|
|
<td>Fatima E.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><div class="client-name">Groupe Fassi Immobilier</div><div class="client-ice">ICE: 005678901000012</div></td>
|
|
<td>TVA trimestrielle</td>
|
|
<td>20 mars 2026</td>
|
|
<td><span class="badge badge-blue"><span class="badge-dot"></span>En cours</span></td>
|
|
<td>Fatima E.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><div class="client-name">Restaurant La Sqala</div><div class="client-ice">ICE: 007890123000056</div></td>
|
|
<td>TVA mensuelle</td>
|
|
<td>20 mars 2026</td>
|
|
<td><span class="badge badge-green"><span class="badge-dot"></span>Termine</span></td>
|
|
<td>Fatima E.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><div class="client-name">Moulin du Rif SA</div><div class="client-ice">ICE: 003456789000078</div></td>
|
|
<td>IR salaries</td>
|
|
<td>31 mars 2026</td>
|
|
<td><span class="badge badge-blue"><span class="badge-dot"></span>En cours</span></td>
|
|
<td>Amina B.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><div class="client-name">Transport Rachidi Express</div><div class="client-ice">ICE: 006789012000034</div></td>
|
|
<td>IS acompte</td>
|
|
<td>31 mars 2026</td>
|
|
<td><span class="badge badge-amber"><span class="badge-dot"></span>En attente client</span></td>
|
|
<td>Amina B.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--primary);"></td>
|
|
<td><div class="client-name">Textile Meknes SARL</div><div class="client-ice">ICE: 008901234000078</div></td>
|
|
<td>CNSS</td>
|
|
<td>10 mars 2026</td>
|
|
<td><span class="badge badge-gray"><span class="badge-dot"></span>Brouillon</span></td>
|
|
<td>Youssef M.</td>
|
|
<td><button class="action-btn"><svg><use href="#icon-dots"/></svg></button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 2px;font-size:12px;color:var(--text-muted);">
|
|
<span>Affichage 1-10 sur 22 declarations</span>
|
|
<div style="display:flex;gap:4px;">
|
|
<button class="btn" style="padding:5px 12px;font-size:12px;">Precedent</button>
|
|
<button class="btn btn-primary" style="padding:5px 12px;font-size:12px;">Suivant</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- DIRECTION 4: SPLIT-VIEW ACTION -->
|
|
<!-- ========================================== -->
|
|
<div class="direction d4" id="dir4">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="avatar">AF</div>
|
|
<div class="org-info">
|
|
<div class="org-name">Cabinet Bennani</div>
|
|
<div class="org-sub">Plan Pro</div>
|
|
</div>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<a class="sidebar-item"><svg><use href="#icon-dashboard"/></svg><span>Dashboard</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-clients"/></svg><span>Clients</span></a>
|
|
<a class="sidebar-item active"><svg><use href="#icon-declarations"/></svg><span>Declarations</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-archive"/></svg><span>Archive</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-team"/></svg><span>Equipe</span></a>
|
|
<a class="sidebar-item"><svg><use href="#icon-settings"/></svg><span>Parametres</span></a>
|
|
</nav>
|
|
<div class="sidebar-footer">v1.0.0</div>
|
|
</div>
|
|
|
|
<div class="split-layout">
|
|
<!-- Left: compact table -->
|
|
<div class="split-left">
|
|
<div class="main-padded">
|
|
<div class="breadcrumb">
|
|
<a href="#">Accueil</a><span class="sep">›</span><span>Declarations</span>
|
|
</div>
|
|
<div class="page-header" style="margin-bottom:10px;">
|
|
<h1 class="page-title" style="font-size:16px;">Declarations</h1>
|
|
<button class="btn btn-primary" style="padding:5px 10px;font-size:12px;"><svg style="width:13px;height:13px;"><use href="#icon-plus"/></svg>Nouvelle</button>
|
|
</div>
|
|
|
|
<!-- Mini cards -->
|
|
<div class="cards-row cards-4" style="gap:8px;margin-bottom:10px;">
|
|
<div class="stat-card card-blue" style="padding:8px 10px;"><div class="label" style="font-size:10px;margin-bottom:2px;">En cours</div><div class="value" style="font-size:16px;">12</div></div>
|
|
<div class="stat-card card-red" style="padding:8px 10px;"><div class="label" style="font-size:10px;margin-bottom:2px;">En retard</div><div class="value" style="font-size:16px;">3</div></div>
|
|
<div class="stat-card card-amber" style="padding:8px 10px;"><div class="label" style="font-size:10px;margin-bottom:2px;">En attente</div><div class="value" style="font-size:16px;">5</div></div>
|
|
<div class="stat-card card-red-urgent" style="padding:8px 10px;"><div class="label" style="font-size:10px;margin-bottom:2px;">Urgent</div><div class="value" style="font-size:16px;">2</div></div>
|
|
</div>
|
|
|
|
<div class="filter-bar" style="margin-bottom:8px;">
|
|
<div class="search-wrap">
|
|
<svg><use href="#icon-search"/></svg>
|
|
<input class="search-input" placeholder="Rechercher..." style="width:160px;padding:4px 10px 4px 28px;font-size:12px;">
|
|
</div>
|
|
<button class="filter-pill active" style="font-size:11px;padding:4px 10px;">Tous</button>
|
|
<button class="filter-pill" style="font-size:11px;padding:4px 10px;">En retard</button>
|
|
<button class="filter-pill" style="font-size:11px;padding:4px 10px;">En cours</button>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr><th>Client</th><th>Type</th><th>Echeance</th><th>Statut</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="selected" onclick="selectRow(this)">
|
|
<td><span class="client-name">SARL Benani Import</span></td>
|
|
<td>TVA mens.</td>
|
|
<td style="color:var(--red);font-weight:600;">20/02</td>
|
|
<td><span class="badge badge-red" style="padding:1px 8px;font-size:11px;"><span class="badge-dot"></span>En retard</span></td>
|
|
</tr>
|
|
<tr onclick="selectRow(this)">
|
|
<td><span class="client-name">Societe Tazi & Fils</span></td>
|
|
<td>IS acompte</td>
|
|
<td style="color:var(--red);font-weight:600;">25/02</td>
|
|
<td><span class="badge badge-red" style="padding:1px 8px;font-size:11px;"><span class="badge-dot"></span>En retard</span></td>
|
|
</tr>
|
|
<tr onclick="selectRow(this)">
|
|
<td><span class="client-name">Cabinet Alaoui Avocats</span></td>
|
|
<td>IR salaries</td>
|
|
<td style="color:var(--red);font-weight:600;">28/02</td>
|
|
<td><span class="badge badge-red" style="padding:1px 8px;font-size:11px;"><span class="badge-dot"></span>En retard</span></td>
|
|
</tr>
|
|
<tr onclick="selectRow(this)">
|
|
<td><span class="client-name">Pharmacie El Mansour</span></td>
|
|
<td>CNSS</td>
|
|
<td>10/03</td>
|
|
<td><span class="badge badge-amber" style="padding:1px 8px;font-size:11px;"><span class="badge-dot"></span>Attente</span></td>
|
|
</tr>
|
|
<tr onclick="selectRow(this)">
|
|
<td><span class="client-name">Atlas Consulting SARL</span></td>
|
|
<td>TVA mens.</td>
|
|
<td>20/03</td>
|
|
<td><span class="badge badge-blue" style="padding:1px 8px;font-size:11px;"><span class="badge-dot"></span>En cours</span></td>
|
|
</tr>
|
|
<tr onclick="selectRow(this)">
|
|
<td><span class="client-name">Groupe Fassi Immobilier</span></td>
|
|
<td>TVA trim.</td>
|
|
<td>20/03</td>
|
|
<td><span class="badge badge-blue" style="padding:1px 8px;font-size:11px;"><span class="badge-dot"></span>En cours</span></td>
|
|
</tr>
|
|
<tr onclick="selectRow(this)">
|
|
<td><span class="client-name">Restaurant La Sqala</span></td>
|
|
<td>TVA mens.</td>
|
|
<td>20/03</td>
|
|
<td><span class="badge badge-green" style="padding:1px 8px;font-size:11px;"><span class="badge-dot"></span>Termine</span></td>
|
|
</tr>
|
|
<tr onclick="selectRow(this)">
|
|
<td><span class="client-name">Moulin du Rif SA</span></td>
|
|
<td>IR salaries</td>
|
|
<td>31/03</td>
|
|
<td><span class="badge badge-blue" style="padding:1px 8px;font-size:11px;"><span class="badge-dot"></span>En cours</span></td>
|
|
</tr>
|
|
<tr onclick="selectRow(this)">
|
|
<td><span class="client-name">Transport Rachidi Express</span></td>
|
|
<td>IS acompte</td>
|
|
<td>31/03</td>
|
|
<td><span class="badge badge-amber" style="padding:1px 8px;font-size:11px;"><span class="badge-dot"></span>Attente</span></td>
|
|
</tr>
|
|
<tr onclick="selectRow(this)">
|
|
<td><span class="client-name">Textile Meknes SARL</span></td>
|
|
<td>CNSS</td>
|
|
<td>10/03</td>
|
|
<td><span class="badge badge-gray" style="padding:1px 8px;font-size:11px;"><span class="badge-dot"></span>Brouillon</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: detail panel -->
|
|
<div class="split-right">
|
|
<div class="detail-header">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;">
|
|
<div>
|
|
<div class="detail-title">SARL Benani Import</div>
|
|
<div class="detail-sub">TVA mensuelle · Fevrier 2026</div>
|
|
</div>
|
|
<span class="badge badge-red"><span class="badge-dot"></span>En retard</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h4>Informations</h4>
|
|
<div class="detail-field"><span class="label">ICE</span><span class="val">001234567000012</span></div>
|
|
<div class="detail-field"><span class="label">Type</span><span class="val">TVA mensuelle</span></div>
|
|
<div class="detail-field"><span class="label">Periode</span><span class="val">Fevrier 2026</span></div>
|
|
<div class="detail-field"><span class="label">Echeance</span><span class="val" style="color:var(--red);font-weight:600;">20 fevrier 2026</span></div>
|
|
<div class="detail-field"><span class="label">Responsable</span><span class="val">Fatima E.</span></div>
|
|
<div class="detail-field"><span class="label">Montant estime</span><span class="val">14 500,00 MAD</span></div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h4>Historique</h4>
|
|
<div class="timeline-item current">
|
|
<div class="timeline-dot"></div>
|
|
<div>
|
|
<div><strong>En retard</strong> — echeance depassee</div>
|
|
<div class="timeline-time">20 fev 2026</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div>
|
|
<div>Preparation commencee par Fatima E.</div>
|
|
<div class="timeline-time">15 fev 2026</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div>
|
|
<div>Declaration creee automatiquement</div>
|
|
<div class="timeline-time">1 fev 2026</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h4>Documents</h4>
|
|
<div style="display:flex;flex-direction:column;gap:6px;">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-muted);border-radius:var(--radius-sm);font-size:12px;">
|
|
<span>Grand_livre_fev_2026.pdf</span>
|
|
<button class="action-btn" style="width:24px;height:24px;"><svg style="width:13px;height:13px;"><use href="#icon-download"/></svg></button>
|
|
</div>
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-muted);border-radius:var(--radius-sm);font-size:12px;">
|
|
<span>Factures_fev_2026.zip</span>
|
|
<button class="action-btn" style="width:24px;height:24px;"><svg style="width:13px;height:13px;"><use href="#icon-download"/></svg></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-actions">
|
|
<button class="btn btn-primary"><svg><use href="#icon-send"/></svg>Soumettre</button>
|
|
<button class="btn"><svg><use href="#icon-edit"/></svg>Modifier</button>
|
|
<button class="btn"><svg><use href="#icon-download"/></svg>Telecharger</button>
|
|
<button class="btn" style="color:var(--red);border-color:var(--red-border);">Annuler</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- DIRECTION 5: COMPARISON -->
|
|
<!-- ========================================== -->
|
|
<div class="direction" id="dir5" style="display:none;margin-top:44px;min-height:calc(100vh - 44px);flex-direction:column;">
|
|
<div class="comparison">
|
|
<h2>Comparaison des directions de design</h2>
|
|
<p class="subtitle">Analyse des compromis pour la plateforme L'Ami Fiduciaire — page Declarations</p>
|
|
|
|
<div class="comp-grid">
|
|
<!-- Card 1 -->
|
|
<div class="comp-card">
|
|
<h3>1. Linear-Inspired Dense</h3>
|
|
<div class="persona">Ideal pour : Fatima (collaboratrice experte, traitement en volume)</div>
|
|
<div class="pros">
|
|
<h4>Avantages</h4>
|
|
<ul>
|
|
<li>Affichage de 50+ lignes sans defilement</li>
|
|
<li>Navigation au clavier naturelle, style Linear/VS Code</li>
|
|
<li>Sidebar reduite maximise l'espace de travail</li>
|
|
<li>Ideal pour le traitement par lots (multi-selection + actions groupees)</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cons">
|
|
<h4>Inconvenients</h4>
|
|
<ul>
|
|
<li>Intimidant pour les nouveaux utilisateurs</li>
|
|
<li>Pas de vue d'ensemble rapide (KPIs reduits)</li>
|
|
<li>Navigation sidebar moins decouvrable (icones seules)</li>
|
|
</ul>
|
|
</div>
|
|
<div class="density">
|
|
<span>Densite :</span>
|
|
<div class="density-bar"><div class="density-fill" style="width:95%;"></div></div>
|
|
<span>Tres haute</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2 -->
|
|
<div class="comp-card">
|
|
<h3>2. Command Center Dashboard</h3>
|
|
<div class="persona">Ideal pour : Karim (gerant, vue du matin, prise de decision)</div>
|
|
<div class="pros">
|
|
<h4>Avantages</h4>
|
|
<ul>
|
|
<li>Vue d'ensemble immediate des KPIs importants</li>
|
|
<li>Alertes prioritaires visibles en un coup d'oeil</li>
|
|
<li>Activite recente pour le suivi de l'equipe</li>
|
|
<li>Transition naturelle vers le tableau detaille</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cons">
|
|
<h4>Inconvenients</h4>
|
|
<ul>
|
|
<li>Necessite un defilement pour atteindre le tableau complet</li>
|
|
<li>Moins efficient pour le traitement en volume</li>
|
|
<li>Espace ecran consomme par les cartes et panneaux</li>
|
|
</ul>
|
|
</div>
|
|
<div class="density">
|
|
<span>Densite :</span>
|
|
<div class="density-bar"><div class="density-fill" style="width:40%;"></div></div>
|
|
<span>Basse</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3 -->
|
|
<div class="comp-card">
|
|
<h3>3. Balanced Professional</h3>
|
|
<div class="persona">Ideal pour : Utilisation generale, tous les roles</div>
|
|
<div class="pros">
|
|
<h4>Avantages</h4>
|
|
<ul>
|
|
<li>Equilibre entre vue d'ensemble et donnees detaillees</li>
|
|
<li>Barre de filtres prominente, intuitive</li>
|
|
<li>Facile a prendre en main pour les nouveaux collaborateurs</li>
|
|
<li>Pattern SaaS standard, familier</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cons">
|
|
<h4>Inconvenients</h4>
|
|
<ul>
|
|
<li>Moins specialise pour un profil utilisateur donne</li>
|
|
<li>Densite moyenne peut frustrer les utilisateurs avances</li>
|
|
<li>Design "generique" sans forte identite</li>
|
|
</ul>
|
|
</div>
|
|
<div class="density">
|
|
<span>Densite :</span>
|
|
<div class="density-bar"><div class="density-fill" style="width:60%;"></div></div>
|
|
<span>Moyenne</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4 -->
|
|
<div class="comp-card">
|
|
<h3>4. Split-View Action</h3>
|
|
<div class="persona">Ideal pour : Workflows de revision, traitement de declarations</div>
|
|
<div class="pros">
|
|
<h4>Avantages</h4>
|
|
<ul>
|
|
<li>Zero navigation de page pour consulter les details</li>
|
|
<li>Actions en ligne sans changer de contexte</li>
|
|
<li>Documents et historique visibles immediatement</li>
|
|
<li>Workflow naturel gauche-a-droite (scanner, agir)</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cons">
|
|
<h4>Inconvenients</h4>
|
|
<ul>
|
|
<li>Espace reduit pour le tableau (60% de largeur)</li>
|
|
<li>Moins de colonnes visibles dans la liste</li>
|
|
<li>Panneau de detail peut sembler etroit sur petits ecrans</li>
|
|
</ul>
|
|
</div>
|
|
<div class="density">
|
|
<span>Densite :</span>
|
|
<div class="density-bar"><div class="density-fill" style="width:75%;"></div></div>
|
|
<span>Haute</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rec-box">
|
|
<h3>Recommandation</h3>
|
|
<p>
|
|
Pour un MVP, la <strong>Direction 3 (Balanced Professional)</strong> offre le meilleur compromis : accessible a tous les profils, intuitive des la premiere utilisation, et suffisamment flexible pour evoluer.
|
|
En phase 2, envisager d'ajouter la <strong>Direction 4 (Split-View)</strong> comme mode alternatif pour les collaborateurs qui traitent les declarations en volume, et un <strong>dashboard Direction 2</strong> comme page d'accueil pour les gerants.
|
|
La <strong>Direction 1 (Dense)</strong> peut etre proposee en option "vue compacte" dans les parametres utilisateur, offrant ainsi une experience personnalisable selon le role et les preferences de chacun.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showDir(n) {
|
|
document.querySelectorAll('.direction').forEach(d => {
|
|
d.classList.remove('active');
|
|
d.style.display = 'none';
|
|
});
|
|
document.querySelectorAll('.dir-tab').forEach(t => t.classList.remove('active'));
|
|
const el = document.getElementById('dir' + n);
|
|
if (el) {
|
|
el.style.display = n === 5 ? 'block' : 'flex';
|
|
el.classList.add('active');
|
|
}
|
|
document.querySelectorAll('.dir-tab')[n - 1].classList.add('active');
|
|
}
|
|
|
|
function selectRow(row) {
|
|
const table = row.closest('table');
|
|
table.querySelectorAll('tr').forEach(r => r.classList.remove('selected'));
|
|
row.classList.add('selected');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|