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>
|