Hamza/Siro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: 2026-07-25 01:02:01

Browse Source
This commit is contained in:
Hamza-Ayed
2026-07-25 01:02:02 +03:00
parent 822cb5963a
commit eda7018434
4 changed files with 1293 additions and 806 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/launch.json
+6
View File
@@ -7,6 +7,12 @@
"runtimeArgs": ["run", "dev"], "runtimeArgs": ["run", "dev"],
"port": 5183, "port": 5183,
"cwd": "transit_dashboard" "cwd": "transit_dashboard"
},
{
"name": "siro-admin",
"runtimeExecutable": "python3",
"runtimeArgs": ["-m", "http.server", "8899", "--directory", "dashboard/siro-admin"],
"port": 8899
} }
] ]
} }
dashboard/siro-admin/css/main.css
+254
View File
@@ -844,3 +844,257 @@ h1, h2, h3, h4, h5, h6 {
width: 200px; width: 200px;
} }
} }
/* ==========================================================================
Console additions — live data states, charts, toasts
========================================================================== */
/* Auth extras */
.secure-strip {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
margin-bottom: 1.5rem;
border-radius: var(--radius-md);
background: var(--success-bg);
color: var(--success);
font-size: 0.78rem;
font-weight: 500;
}
.device-note {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.25rem;
font-size: 0.74rem;
color: var(--text-subtle);
}
.device-note code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--text-muted);
}
.btn-primary[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
/* OTP modal */
.otp-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-full);
background: var(--success-bg);
color: var(--success);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 1rem;
}
.otp-input {
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.5rem;
font-weight: 700;
width: 150px;
padding-left: 1.25rem;
}
/* Header / nav */
.live-indicator[data-state="loading"] { color: var(--warning); }
.live-indicator[data-state="loading"] .pulse-dot { background: var(--warning); }
.live-indicator[data-state="error"] { color: var(--danger); }
.live-indicator[data-state="error"] .pulse-dot { background: var(--danger); animation: none; }
.nav-count {
margin-left: auto;
min-width: 20px;
padding: 0 0.4rem;
border-radius: var(--radius-full);
background: var(--danger);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
text-align: center;
line-height: 20px;
}
.stamp {
font-size: 0.76rem;
color: var(--text-subtle);
white-space: nowrap;
}
.card-sub {
font-weight: 400;
font-size: 0.75rem;
color: var(--text-subtle);
margin-left: 0.4rem;
}
/* Table states */
.table-msg {
text-align: center;
padding: 2.25rem 1rem !important;
color: var(--text-subtle);
font-size: 0.85rem;
}
.table-msg.is-error { color: var(--danger); }
.route-cell {
font-size: 0.8rem;
color: var(--text-muted);
white-space: nowrap;
}
.danger-btn:hover {
background: var(--danger-bg);
color: var(--danger);
}
/* Charts */
.donut-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.75rem;
}
.legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--text-muted);
}
.legend-item i {
width: 9px;
height: 9px;
border-radius: 3px;
display: inline-block;
}
.legend-item strong { color: var(--text-main); }
/* Key/value & distribution lists */
.mini-list {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.kv-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 0.25rem;
border-bottom: 1px solid var(--border-color);
font-size: 0.85rem;
color: var(--text-muted);
}
.kv-row:last-child { border-bottom: none; }
.kv-row strong { color: var(--text-main); font-weight: 600; text-align: right; }
.mix-row { padding: 0.55rem 0.25rem; }
.mix-head {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 0.45rem;
}
.mix-head strong { color: var(--text-main); }
.mix-pct { color: var(--text-subtle); font-weight: 400; font-size: 0.78rem; }
.mix-track {
height: 7px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.mix-fill {
height: 100%;
border-radius: var(--radius-full);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Modal head */
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.modal-head h3 { color: var(--text-main); font-family: 'Outfit', sans-serif; }
.modal-content { max-height: 85vh; overflow-y: auto; }
/* Toasts */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
display: flex;
align-items: center;
gap: 0.6rem;
max-width: 380px;
padding: 0.85rem 1.15rem;
border-radius: var(--radius-md);
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-left: 3px solid var(--primary);
color: var(--text-main);
font-size: 0.86rem;
box-shadow: var(--shadow-md);
animation: toastIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.leaving { opacity: 0; transform: translateY(8px); transition: var(--transition-smooth); }
.toast i { font-size: 1.15rem; }
.toast-success { border-left-color: var(--success); }
.toast-success i { color: var(--success); }
.toast-danger { border-left-color: var(--danger); }
.toast-danger i { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning i { color: var(--warning); }
.toast-info i { color: var(--primary); }
@keyframes toastIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
.toast { left: 16px; right: 16px; max-width: none; }
}
.chart-container canvas {
display: block;
width: 100%;
height: 100%;
}
.data-table td strong,
.data-table .badge {
white-space: nowrap;
}
dashboard/siro-admin/index.html
+192 -218
View File
@@ -3,14 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Siro Admin | Enterprise Operations Dashboard</title> <title>Siro Admin | Operations Console</title>
<!-- Fonts & Icons --> <!-- Fonts & Icons -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@phosphor-icons/web"></script> <script src="https://unpkg.com/@phosphor-icons/web"></script>
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
</head> </head>
@@ -24,56 +24,46 @@
<i class="ph-bold ph-car"></i> <i class="ph-bold ph-car"></i>
<span>SIRO ADMIN</span> <span>SIRO ADMIN</span>
</div> </div>
<p class="auth-subtitle">Enterprise Operations & Control Portal</p> <p class="auth-subtitle">Operations &amp; Control Console</p>
</div> </div>
<form id="loginForm"> <form id="loginForm">
<div style="display:flex; background:rgba(15, 23, 42, 0.6); padding:4px; border-radius:var(--radius-md); border:1px solid var(--border-color); margin-bottom:1.5rem;"> <div class="secure-strip">
<button type="button" id="modeLiveBtn" class="btn" style="flex:1; justify-center:center; padding:0.5rem; font-size:0.82rem; border-radius:var(--radius-sm); background:var(--primary); color:#fff;"> <i class="ph-fill ph-shield-check"></i>
<i class="ph-bold ph-database"></i> Live Backend API <span>Secure session &middot; device-bound token &middot; WhatsApp OTP</span>
</button>
<button type="button" id="modeDemoBtn" class="btn" style="flex:1; justify-center:center; padding:0.5rem; font-size:0.82rem; border-radius:var(--radius-sm); color:var(--text-muted); background:transparent;">
<i class="ph-bold ph-flask"></i> Interactive Demo
</button>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="loginEmail">Admin Email / Phone</label> <label class="form-label" for="loginEmail">Admin Email / Phone</label>
<div class="form-input-group"> <div class="form-input-group">
<input type="text" id="loginEmail" class="form-input" placeholder="hamzaayed@siromove.com or +962..." value="hamzaayed@siromove.com" required> <input type="text" id="loginEmail" class="form-input" placeholder="you@siromove.com or +9627..." autocomplete="username" required>
<i class="ph ph-envelope"></i> <i class="ph ph-envelope"></i>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="loginPass">Password / Security PIN</label> <label class="form-label" for="loginPass">Password</label>
<div class="form-input-group"> <div class="form-input-group">
<input type="password" id="loginPass" class="form-input" value="••••••••••••" required> <input type="password" id="loginPass" class="form-input" placeholder="Enter your password" autocomplete="current-password" required>
<i class="ph ph-lock-key"></i> <i class="ph ph-lock-key"></i>
</div> </div>
</div> </div>
<button type="submit" class="btn-primary" style="margin-top: 1.25rem;"> <button type="submit" class="btn-primary" id="loginSubmitBtn" style="margin-top: 1.25rem;">
<i class="ph-bold ph-sign-in"></i> Sign In to Portal <i class="ph-bold ph-sign-in"></i> <span>Sign In</span>
</button> </button>
<div style="display:flex; align-items:center; margin: 1.25rem 0; color: var(--text-subtle); font-size: 0.8rem;"> <div class="device-note">
<div style="flex:1; height:1px; background:var(--border-color);"></div> <i class="ph ph-fingerprint"></i>
<span style="padding: 0 0.75rem;">OR BIOMETRIC AUTH</span> <span>This browser is registered as a trusted device: <code id="fpPreview">…</code></span>
<div style="flex:1; height:1px; background:var(--border-color);"></div>
</div> </div>
<button type="button" class="btn btn-secondary" id="fingerprintLoginBtn" style="width:100%; justify-content:center; padding:0.8rem; border-color:var(--primary); color:var(--text-main);">
<i class="ph-bold ph-fingerprint" style="font-size:1.4rem; color:var(--primary);"></i>
<span>Authenticate with Fingerprint / WebAuthn</span>
</button>
</form> </form>
</div> </div>
</div> </div>
<!-- ================= APP CONTAINER ================= --> <!-- ================= APP CONTAINER ================= -->
<div class="app-container"> <div class="app-container">
<!-- Sidebar Navigation --> <!-- Sidebar Navigation -->
<aside class="sidebar" id="sidebar"> <aside class="sidebar" id="sidebar">
<div class="sidebar-header"> <div class="sidebar-header">
@@ -87,45 +77,50 @@
</div> </div>
<nav class="sidebar-menu"> <nav class="sidebar-menu">
<div class="menu-label">Main Menu</div> <div class="menu-label">Operations</div>
<a class="nav-item active" data-view="dashboardView"> <a class="nav-item active" data-view="dashboardView">
<i class="ph ph-squares-four"></i> <i class="ph ph-squares-four"></i>
<span>Dashboard</span> <span>Overview</span>
</a> </a>
<a class="nav-item" data-view="ridesView"> <a class="nav-item" data-view="ridesView">
<i class="ph ph-path"></i> <i class="ph ph-path"></i>
<span>Rides & Dispatch</span> <span>Rides</span>
</a> </a>
<a class="nav-item" data-view="driversView"> <a class="nav-item" data-view="driversView">
<i class="ph ph-steering-wheel"></i> <i class="ph ph-steering-wheel"></i>
<span>Captains / Drivers</span> <span>Captains</span>
</a> </a>
<a class="nav-item" data-view="passengersView"> <a class="nav-item" data-view="passengersView">
<i class="ph ph-users"></i> <i class="ph ph-users"></i>
<span>Passengers</span> <span>Passengers</span>
</a> </a>
<div class="menu-label">Management</div> <div class="menu-label">Business</div>
<a class="nav-item" data-view="financialsView"> <a class="nav-item" data-view="financialsView">
<i class="ph ph-currency-circle-dollar"></i> <i class="ph ph-currency-circle-dollar"></i>
<span>Financials & Reports</span> <span>Financials</span>
</a>
<a class="nav-item" data-view="approvalsView">
<i class="ph ph-user-check"></i>
<span>Approvals</span>
<span class="nav-count" id="approvalsCount" hidden>0</span>
</a> </a>
<a class="nav-item" data-view="complaintsView"> <a class="nav-item" data-view="complaintsView">
<i class="ph ph-warning-circle"></i> <i class="ph ph-warning-circle"></i>
<span>Support & Complaints</span> <span>Complaints</span>
</a> </a>
<a class="nav-item" data-view="systemView"> <a class="nav-item" data-view="systemView">
<i class="ph ph-cpu"></i> <i class="ph ph-shield-check"></i>
<span>System Status</span> <span>Session &amp; Security</span>
</a> </a>
</nav> </nav>
<div class="sidebar-footer"> <div class="sidebar-footer">
<div class="user-profile-mini"> <div class="user-profile-mini">
<div class="avatar">SA</div> <div class="avatar" id="userAvatar">SA</div>
<div class="user-info"> <div class="user-info">
<div class="name">Super Admin</div> <div class="name" id="userName">Admin</div>
<div class="role">Operations Lead</div> <div class="role" id="userRole">—</div>
</div> </div>
</div> </div>
<button class="btn-icon" id="logoutBtn" title="Sign Out"> <button class="btn-icon" id="logoutBtn" title="Sign Out">
@@ -136,7 +131,7 @@
<!-- Main Content Body --> <!-- Main Content Body -->
<div class="main-wrapper"> <div class="main-wrapper">
<!-- Top Sticky Header --> <!-- Top Sticky Header -->
<header class="top-header"> <header class="top-header">
<div class="header-left"> <div class="header-left">
@@ -145,174 +140,154 @@
</button> </button>
<div class="search-box"> <div class="search-box">
<i class="ph ph-magnifying-glass"></i> <i class="ph ph-magnifying-glass"></i>
<input type="text" id="globalSearch" placeholder="Search trips, drivers, passengers..."> <input type="text" id="globalSearch" placeholder="Filter the current table…">
</div> </div>
</div> </div>
<div class="header-right"> <div class="header-right">
<div class="live-indicator"> <div class="live-indicator" id="connectionPill">
<span class="pulse-dot"></span> Live Fleet Network <span class="pulse-dot"></span> <span id="connectionText">Connecting…</span>
</div> </div>
<button class="btn-icon" title="Notifications"> <button class="btn-icon" id="refreshBtn" title="Refresh data">
<i class="ph ph-bell"></i> <i class="ph ph-arrows-clockwise"></i>
</button>
<button class="btn-icon" title="Settings">
<i class="ph ph-gear"></i>
</button> </button>
</div> </div>
</header> </header>
<main class="content-body"> <main class="content-body">
<!-- ================= 1. DASHBOARD OVERVIEW ================= --> <!-- ================= 1. OVERVIEW ================= -->
<section class="page-view active" id="dashboardView"> <section class="page-view active" id="dashboardView">
<div class="page-header"> <div class="page-header">
<div class="page-title"> <div class="page-title">
<h1>Operations Dashboard</h1> <h1>Operations Overview</h1>
<p>Real-time analytics and fleet performance metrics</p> <p>Live figures read directly from the production database</p>
</div> </div>
<div class="page-actions"> <div class="page-actions">
<button class="btn btn-secondary"><i class="ph ph-calendar"></i> Today</button> <span class="stamp" id="lastUpdated">—</span>
<button class="btn btn-primary" style="width: auto;"><i class="ph ph-download-simple"></i> Export PDF</button>
</div> </div>
</div> </div>
<!-- KPI Cards Grid --> <!-- Primary KPIs -->
<div class="stats-grid"> <div class="stats-grid">
<div class="stat-card"> <div class="stat-card">
<div class="stat-header"> <div class="stat-header">
<div> <div>
<div class="stat-value">$42,850</div> <div class="stat-value" data-kpi="rides">—</div>
<div class="stat-title">Today's Revenue</div> <div class="stat-title">Total Rides</div>
</div> </div>
<div class="stat-icon primary"><i class="ph ph-currency-dollar"></i></div> <div class="stat-icon primary"><i class="ph ph-path"></i></div>
</div> </div>
<div class="stat-footer"> <div class="stat-footer">
<span class="trend-badge up"><i class="ph ph-trend-up"></i> +14.2%</span> <span class="trend-badge up"><i class="ph ph-plus"></i> <span data-kpi="ridesMonth">—</span></span>
<span class="trend-text">vs yesterday</span> <span class="trend-text">this month</span>
</div> </div>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-header"> <div class="stat-header">
<div> <div>
<div class="stat-value">1,482</div> <div class="stat-value" data-kpi="completed">—</div>
<div class="stat-title">Active Rides</div> <div class="stat-title">Completed Rides</div>
</div> </div>
<div class="stat-icon success"><i class="ph ph-car-profile"></i></div> <div class="stat-icon success"><i class="ph ph-check-circle"></i></div>
</div> </div>
<div class="stat-footer"> <div class="stat-footer">
<span class="trend-badge up"><i class="ph ph-trend-up"></i> +8.6%</span> <span class="trend-badge up"><i class="ph ph-percent"></i> <span data-kpi="completionRate">—</span></span>
<span class="trend-text">fleet active</span> <span class="trend-text">completion rate</span>
</div> </div>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-header"> <div class="stat-header">
<div> <div>
<div class="stat-value">324</div> <div class="stat-value" data-kpi="drivers">—</div>
<div class="stat-title">Captains Online</div> <div class="stat-title">Registered Captains</div>
</div> </div>
<div class="stat-icon info"><i class="ph ph-steering-wheel"></i></div> <div class="stat-icon info"><i class="ph ph-steering-wheel"></i></div>
</div> </div>
<div class="stat-footer"> <div class="stat-footer">
<span class="trend-badge up"><i class="ph ph-check"></i> 94% online rate</span> <span class="trend-badge up"><i class="ph ph-plus"></i> <span data-kpi="driversMonth">—</span></span>
<span class="trend-text">joined this month</span>
</div> </div>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-header"> <div class="stat-header">
<div> <div>
<div class="stat-value">98.4%</div> <div class="stat-value" data-kpi="passengers">—</div>
<div class="stat-title">Dispatch Rate</div> <div class="stat-title">Registered Passengers</div>
</div> </div>
<div class="stat-icon warning"><i class="ph ph-lightning"></i></div> <div class="stat-icon warning"><i class="ph ph-users"></i></div>
</div> </div>
<div class="stat-footer"> <div class="stat-footer">
<span class="trend-badge down"><i class="ph ph-trend-down"></i> -0.4%</span> <span class="trend-badge up"><i class="ph ph-plus"></i> <span data-kpi="passengersMonth">—</span></span>
<span class="trend-text">avg 3.2m wait</span> <span class="trend-text">joined this month</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Charts Section --> <!-- Charts -->
<div class="dashboard-grid"> <div class="dashboard-grid">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Revenue & Trip Surge Analytics</h3> <h3 class="card-title">Rides per Day <span class="card-sub">last 21 days</span></h3>
<button class="btn btn-secondary btn-sm">Weekly</button>
</div> </div>
<div class="chart-container"> <div class="chart-container">
<canvas id="revenueChart"></canvas> <canvas id="ridesTrendChart"></canvas>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Live Dispatch Feed</h3> <h3 class="card-title">Ride Outcomes</h3>
</div> </div>
<div style="display:flex; flex-direction:column; gap:1rem;"> <div class="chart-container donut-wrap">
<div style="display:flex; align-items:center; gap:0.75rem; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-md);"> <canvas id="statusDonut"></canvas>
<div style="width:36px; height:36px; border-radius:var(--radius-full); background:var(--success-bg); color:var(--success); display:flex; align-items:center; justify-content:center;">
<i class="ph ph-check-circle"></i>
</div>
<div>
<div style="font-weight:600; font-size:0.88rem;">Ride SR-9842 Completed</div>
<div style="font-size:0.75rem; color:var(--text-subtle);">Driver: Khalid H. | $14.50</div>
</div>
</div>
<div style="display:flex; align-items:center; gap:0.75rem; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-md);">
<div style="width:36px; height:36px; border-radius:var(--radius-full); background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center;">
<i class="ph ph-arrows-clockwise"></i>
</div>
<div>
<div style="font-weight:600; font-size:0.88rem;">New Dispatch SR-9846</div>
<div style="font-size:0.75rem; color:var(--text-subtle);">Driver: Bilal M. | Sweifieh</div>
</div>
</div>
<div style="display:flex; align-items:center; gap:0.75rem; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-md);">
<div style="width:36px; height:36px; border-radius:var(--radius-full); background:var(--warning-bg); color:var(--warning); display:flex; align-items:center; justify-content:center;">
<i class="ph ph-star"></i>
</div>
<div>
<div style="font-weight:600; font-size:0.88rem;">5-Star Rating Submitted</div>
<div style="font-size:0.75rem; color:var(--text-subtle);">Rider: Sarah M.</div>
</div>
</div>
</div> </div>
<div class="legend" id="statusLegend"></div>
</div>
</div>
<div class="dashboard-grid">
<div class="card">
<div class="card-header">
<h3 class="card-title">Demand by Time of Day</h3>
</div>
<div class="chart-container" style="height:200px;">
<canvas id="timeOfDayChart"></canvas>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Service Mix</h3>
</div>
<div class="mini-list" id="serviceMix"></div>
</div> </div>
</div> </div>
</section> </section>
<!-- ================= 2. RIDES & DISPATCH VIEW ================= --> <!-- ================= 2. RIDES ================= -->
<section class="page-view" id="ridesView"> <section class="page-view" id="ridesView">
<div class="page-header"> <div class="page-header">
<div class="page-title"> <div class="page-title">
<h1>Rides & Dispatch Management</h1> <h1>Rides</h1>
<p>Monitor real-time passenger trips, statuses, and fare details</p> <p>Trips, assigned captains, fares and live status</p>
</div>
<div class="page-actions">
<button class="btn btn-primary" style="width:auto;"><i class="ph ph-plus"></i> Manual Dispatch</button>
</div> </div>
</div> </div>
<div class="filter-bar"> <div class="filter-bar">
<div class="filter-inputs"> <div class="filter-inputs">
<select class="select-input"> <select class="select-input" id="rideStatusFilter">
<option>All Statuses</option> <option value="All">All statuses</option>
<option>Completed</option> <option value="Pending">Waiting for a captain</option>
<option>In Progress</option> <option value="Begin">In progress</option>
<option>Cancelled</option> <option value="Completed">Completed</option>
</select> <option value="Canceled">Cancelled</option>
<select class="select-input">
<option>All Cities</option>
<option>Amman</option>
<option>Zarqa</option>
<option>Irbid</option>
</select> </select>
</div> </div>
<span class="stamp" id="ridesMeta">—</span>
</div> </div>
<div class="card"> <div class="card">
@@ -320,33 +295,33 @@
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Trip ID</th> <th>Trip</th>
<th>Passenger</th> <th>Passenger</th>
<th>Driver</th> <th>Captain</th>
<th>Route</th> <th>Route</th>
<th>Fare</th> <th>Fare</th>
<th>Status</th> <th>Status</th>
<th>Time</th> <th>Created</th>
<th>Action</th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody id="ridesTableBody"> <tbody id="ridesTableBody"></tbody>
<!-- Populated by JS -->
</tbody>
</table> </table>
</div> </div>
</div> </div>
</section> </section>
<!-- ================= 3. DRIVERS VIEW ================= --> <!-- ================= 3. CAPTAINS ================= -->
<section class="page-view" id="driversView"> <section class="page-view" id="driversView">
<div class="page-header"> <div class="page-header">
<div class="page-title"> <div class="page-title">
<h1>Captains & Drivers</h1> <h1>Captains</h1>
<p>Verify documents, manage online fleet, and inspect ratings</p> <p>Fleet roster, ratings and trip volume</p>
</div> </div>
<div class="page-actions"> <div class="page-actions">
<button class="btn btn-primary" style="width:auto;"><i class="ph ph-user-plus"></i> Add New Driver</button> <button class="btn btn-secondary btn-sm" id="driversPrev"><i class="ph ph-caret-left"></i></button>
<span class="stamp" id="driversMeta">—</span>
<button class="btn btn-secondary btn-sm" id="driversNext"><i class="ph ph-caret-right"></i></button>
</div> </div>
</div> </div>
@@ -355,30 +330,28 @@
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Driver ID</th> <th>ID</th>
<th>Name</th> <th>Name</th>
<th>Phone</th> <th>Phone</th>
<th>Vehicle</th> <th>Email</th>
<th>Rating</th> <th>Rating</th>
<th>Total Trips</th> <th>Trips</th>
<th>Cancellations</th>
<th>Status</th> <th>Status</th>
<th>Action</th>
</tr> </tr>
</thead> </thead>
<tbody id="driversTableBody"> <tbody id="driversTableBody"></tbody>
<!-- Populated by JS -->
</tbody>
</table> </table>
</div> </div>
</div> </div>
</section> </section>
<!-- ================= 4. PASSENGERS VIEW ================= --> <!-- ================= 4. PASSENGERS ================= -->
<section class="page-view" id="passengersView"> <section class="page-view" id="passengersView">
<div class="page-header"> <div class="page-header">
<div class="page-title"> <div class="page-title">
<h1>Passengers & Customers</h1> <h1>Passengers</h1>
<p>Customer accounts, trip history, and subscription status</p> <p>Most active customer accounts by trip count</p>
</div> </div>
</div> </div>
@@ -387,115 +360,120 @@
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Customer ID</th> <th>ID</th>
<th>Name</th> <th>Name</th>
<th>Email</th> <th>Contact</th>
<th>Trips Count</th> <th>Trips</th>
<th>Rating</th> <th>Rating</th>
<th>Joined Date</th> <th>Cancellations</th>
<th>Account Status</th> <th>Joined</th>
<th>Action</th> <th>Status</th>
</tr> </tr>
</thead> </thead>
<tbody id="passengersTableBody"> <tbody id="passengersTableBody"></tbody>
<!-- Populated by JS -->
</tbody>
</table> </table>
</div> </div>
</div> </div>
</section> </section>
<!-- ================= 5. FINANCIALS VIEW ================= --> <!-- ================= 5. FINANCIALS ================= -->
<section class="page-view" id="financialsView"> <section class="page-view" id="financialsView">
<div class="page-header"> <div class="page-header">
<div class="page-title"> <div class="page-title">
<h1>Financials & Reports</h1> <h1>Financials</h1>
<p>Payout calculations, platform commissions, and exported ledgers</p> <p>Earnings, fares and distance aggregates across all recorded trips</p>
</div>
<div class="page-actions">
<button class="btn btn-primary" style="width:auto;"><i class="ph ph-file-text"></i> Generate Report</button>
</div> </div>
</div> </div>
<div class="stats-grid"> <div class="stats-grid">
<div class="stat-card"> <div class="stat-card">
<div class="stat-value">$184,200</div> <div class="stat-value" data-kpi="driverEarnings">—</div>
<div class="stat-title">Gross Revenue (This Month)</div> <div class="stat-title">Captain earnings (completed trips)</div>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-value">$27,630</div> <div class="stat-value" data-kpi="avgFare">—</div>
<div class="stat-title">Platform Net Commission (15%)</div> <div class="stat-title">Average passenger fare</div>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-value">$156,570</div> <div class="stat-value" data-kpi="totalDistance">—</div>
<div class="stat-title">Driver Payouts Processed</div> <div class="stat-title">Total distance covered</div>
</div>
</div>
</section>
<!-- ================= 6. COMPLAINTS VIEW ================= -->
<section class="page-view" id="complaintsView">
<div class="page-header">
<div class="page-title">
<h1>Support & Complaints Triage</h1>
<p>Customer issues, lost & found, and ride rating disputes</p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div style="padding:1rem; text-align:center; color:var(--text-muted);"> <div class="card-header"><h3 class="card-title">Trip Performance</h3></div>
<i class="ph ph-shield-check" style="font-size:3rem; color:var(--success); margin-bottom:0.5rem; display:block;"></i> <div class="mini-list" id="tripPerformance"></div>
<h3>All high-priority complaints resolved</h3> </div>
<p style="font-size:0.88rem; margin-top:0.25rem;">0 active tickets requiring immediate escalation.</p> </section>
<!-- ================= 6. APPROVALS ================= -->
<section class="page-view" id="approvalsView">
<div class="page-header">
<div class="page-title">
<h1>Pending Approvals</h1>
<p>Admin and service accounts awaiting activation</p>
</div>
</div>
<div class="card">
<div class="table-responsive">
<table class="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
<th>Type</th>
<th>Requested role</th>
<th>Requested at</th>
<th></th>
</tr>
</thead>
<tbody id="approvalsTableBody"></tbody>
</table>
</div> </div>
</div> </div>
</section> </section>
<!-- ================= 7. SYSTEM STATUS VIEW ================= --> <!-- ================= 7. COMPLAINTS ================= -->
<section class="page-view" id="systemView"> <section class="page-view" id="complaintsView">
<div class="page-header"> <div class="page-header">
<div class="page-title"> <div class="page-title">
<h1>System Health & Microservices</h1> <h1>Complaints</h1>
<p>Server nodes, API gateways, database latency, and websocket connections</p> <p>Volume of customer complaints filed</p>
</div> </div>
</div> </div>
<div class="stats-grid"> <div class="stats-grid">
<div class="stat-card"> <div class="stat-card">
<div class="stat-header"> <div class="stat-value" data-kpi="complaintsToday">—</div>
<div> <div class="stat-title">Filed today</div>
<div class="stat-value" style="color:var(--success);">Healthy</div>
<div class="stat-title">Location Server</div>
</div>
<div class="stat-icon success"><i class="ph ph-map-pin-line"></i></div>
</div>
<div class="stat-footer"><span class="trend-text">Latency: 14ms</span></div>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-header"> <div class="stat-value" data-kpi="complaintsWeek">—</div>
<div> <div class="stat-title">This week</div>
<div class="stat-value" style="color:var(--success);">Healthy</div>
<div class="stat-title">Ride Dispatch Engine</div>
</div>
<div class="stat-icon success"><i class="ph ph-cpu"></i></div>
</div>
<div class="stat-footer"><span class="trend-text">Latency: 22ms</span></div>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-header"> <div class="stat-value" data-kpi="complaintsMonth">—</div>
<div> <div class="stat-title">This month</div>
<div class="stat-value" style="color:var(--success);">Healthy</div>
<div class="stat-title">Payment Server</div>
</div>
<div class="stat-icon success"><i class="ph ph-credit-card"></i></div>
</div>
<div class="stat-footer"><span class="trend-text">Latency: 45ms</span></div>
</div> </div>
</div> </div>
</section> </section>
<!-- ================= 8. SESSION & SECURITY ================= -->
<section class="page-view" id="systemView">
<div class="page-header">
<div class="page-title">
<h1>Session &amp; Security</h1>
<p>Details of the credential currently authorising this console</p>
</div>
</div>
<div class="card">
<div class="mini-list" id="sessionInfo"></div>
</div>
</section>
</main> </main>
</div> </div>
</div> </div>
@@ -503,29 +481,25 @@
<!-- Details Modal --> <!-- Details Modal -->
<div class="modal-overlay" id="detailsModal"> <div class="modal-overlay" id="detailsModal">
<div class="modal-content"> <div class="modal-content">
<div id="modalBodyContent"> <div id="modalBodyContent"></div>
<!-- Dynamic content -->
</div>
</div> </div>
</div> </div>
<!-- OTP Verification Modal --> <!-- OTP Verification Modal -->
<div class="modal-overlay" id="otpModal"> <div class="modal-overlay" id="otpModal">
<div class="modal-content" style="max-width: 400px; text-align: center;"> <div class="modal-content" style="max-width: 400px; text-align: center;">
<div style="width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1rem;"> <div class="otp-icon"><i class="ph ph-whatsapp-logo"></i></div>
<i class="ph ph-whatsapp-logo"></i> <h3 style="color: #fff; margin-bottom: 0.5rem;">WhatsApp Verification</h3>
</div>
<h3 style="color: #fff; margin-bottom: 0.5rem;">WhatsApp Verification Code</h3>
<p style="color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.5rem;" id="otpPhoneText"> <p style="color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.5rem;" id="otpPhoneText">
A 3-digit verification code was sent to your WhatsApp. A 3-digit verification code was sent to your WhatsApp.
</p> </p>
<div style="display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem;"> <div style="display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem;">
<input type="text" maxlength="3" id="otpInput" class="form-input" style="text-align: center; font-size: 1.5rem; letter-spacing: 0.5rem; font-weight: 700; width: 140px;" placeholder="123"> <input type="text" maxlength="3" inputmode="numeric" id="otpInput" class="form-input otp-input" placeholder="123">
</div> </div>
<button type="button" class="btn-primary" id="submitOtpBtn"> <button type="button" class="btn-primary" id="submitOtpBtn">
<i class="ph-bold ph-check"></i> Verify & Sign In <i class="ph-bold ph-check"></i> <span>Verify &amp; Sign In</span>
</button> </button>
<button type="button" class="btn btn-secondary" onclick="closeOtpModal()" style="width: 100%; margin-top: 0.75rem; justify-content: center;"> <button type="button" class="btn btn-secondary" onclick="closeOtpModal()" style="width: 100%; margin-top: 0.75rem; justify-content: center;">
dashboard/siro-admin/js/app.js
+841 -588
View File
File diff suppressed because it is too large Load Diff