540 lines
22 KiB
HTML
540 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Siro Admin | Enterprise Operations Dashboard</title>
|
|
|
|
<!-- Fonts & Icons -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<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">
|
|
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="css/main.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ================= AUTH OVERLAY ================= -->
|
|
<div class="auth-wrapper" id="authWrapper">
|
|
<div class="auth-card">
|
|
<div class="auth-header">
|
|
<div class="auth-logo">
|
|
<i class="ph-bold ph-car"></i>
|
|
<span>SIRO ADMIN</span>
|
|
</div>
|
|
<p class="auth-subtitle">Enterprise Operations & Control Portal</p>
|
|
</div>
|
|
|
|
<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;">
|
|
<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-bold ph-database"></i> Live Backend API
|
|
</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 class="form-group">
|
|
<label class="form-label" for="loginEmail">Admin Email / Phone</label>
|
|
<div class="form-input-group">
|
|
<input type="text" id="loginEmail" class="form-input" placeholder="admin@siromove.com or +962..." value="admin@siromove.com" required>
|
|
<i class="ph ph-envelope"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="loginPass">Password / Security PIN</label>
|
|
<div class="form-input-group">
|
|
<input type="password" id="loginPass" class="form-input" value="••••••••••••" required>
|
|
<i class="ph ph-lock-key"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary" style="margin-top: 1.25rem;">
|
|
<i class="ph-bold ph-sign-in"></i> Sign In to Portal
|
|
</button>
|
|
|
|
<div style="display:flex; align-items:center; margin: 1.25rem 0; color: var(--text-subtle); font-size: 0.8rem;">
|
|
<div style="flex:1; height:1px; background:var(--border-color);"></div>
|
|
<span style="padding: 0 0.75rem;">OR BIOMETRIC AUTH</span>
|
|
<div style="flex:1; height:1px; background:var(--border-color);"></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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================= APP CONTAINER ================= -->
|
|
<div class="app-container">
|
|
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<a href="#" class="brand">
|
|
<div class="brand-icon">
|
|
<i class="ph-bold ph-lightning"></i>
|
|
</div>
|
|
<span>SIRO</span>
|
|
<span class="brand-badge">ADMIN</span>
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="sidebar-menu">
|
|
<div class="menu-label">Main Menu</div>
|
|
<a class="nav-item active" data-view="dashboardView">
|
|
<i class="ph ph-squares-four"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a class="nav-item" data-view="ridesView">
|
|
<i class="ph ph-path"></i>
|
|
<span>Rides & Dispatch</span>
|
|
</a>
|
|
<a class="nav-item" data-view="driversView">
|
|
<i class="ph ph-steering-wheel"></i>
|
|
<span>Captains / Drivers</span>
|
|
</a>
|
|
<a class="nav-item" data-view="passengersView">
|
|
<i class="ph ph-users"></i>
|
|
<span>Passengers</span>
|
|
</a>
|
|
|
|
<div class="menu-label">Management</div>
|
|
<a class="nav-item" data-view="financialsView">
|
|
<i class="ph ph-currency-circle-dollar"></i>
|
|
<span>Financials & Reports</span>
|
|
</a>
|
|
<a class="nav-item" data-view="complaintsView">
|
|
<i class="ph ph-warning-circle"></i>
|
|
<span>Support & Complaints</span>
|
|
</a>
|
|
<a class="nav-item" data-view="systemView">
|
|
<i class="ph ph-cpu"></i>
|
|
<span>System Status</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="user-profile-mini">
|
|
<div class="avatar">SA</div>
|
|
<div class="user-info">
|
|
<div class="name">Super Admin</div>
|
|
<div class="role">Operations Lead</div>
|
|
</div>
|
|
</div>
|
|
<button class="btn-icon" id="logoutBtn" title="Sign Out">
|
|
<i class="ph ph-sign-out"></i>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content Body -->
|
|
<div class="main-wrapper">
|
|
|
|
<!-- Top Sticky Header -->
|
|
<header class="top-header">
|
|
<div class="header-left">
|
|
<button class="btn-icon toggle-sidebar-btn" id="toggleSidebar">
|
|
<i class="ph ph-list"></i>
|
|
</button>
|
|
<div class="search-box">
|
|
<i class="ph ph-magnifying-glass"></i>
|
|
<input type="text" id="globalSearch" placeholder="Search trips, drivers, passengers...">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<div class="live-indicator">
|
|
<span class="pulse-dot"></span> Live Fleet Network
|
|
</div>
|
|
<button class="btn-icon" title="Notifications">
|
|
<i class="ph ph-bell"></i>
|
|
</button>
|
|
<button class="btn-icon" title="Settings">
|
|
<i class="ph ph-gear"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content-body">
|
|
|
|
<!-- ================= 1. DASHBOARD OVERVIEW ================= -->
|
|
<section class="page-view active" id="dashboardView">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h1>Operations Dashboard</h1>
|
|
<p>Real-time analytics and fleet performance metrics</p>
|
|
</div>
|
|
<div class="page-actions">
|
|
<button class="btn btn-secondary"><i class="ph ph-calendar"></i> Today</button>
|
|
<button class="btn btn-primary" style="width: auto;"><i class="ph ph-download-simple"></i> Export PDF</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI Cards Grid -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div>
|
|
<div class="stat-value">$42,850</div>
|
|
<div class="stat-title">Today's Revenue</div>
|
|
</div>
|
|
<div class="stat-icon primary"><i class="ph ph-currency-dollar"></i></div>
|
|
</div>
|
|
<div class="stat-footer">
|
|
<span class="trend-badge up"><i class="ph ph-trend-up"></i> +14.2%</span>
|
|
<span class="trend-text">vs yesterday</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div>
|
|
<div class="stat-value">1,482</div>
|
|
<div class="stat-title">Active Rides</div>
|
|
</div>
|
|
<div class="stat-icon success"><i class="ph ph-car-profile"></i></div>
|
|
</div>
|
|
<div class="stat-footer">
|
|
<span class="trend-badge up"><i class="ph ph-trend-up"></i> +8.6%</span>
|
|
<span class="trend-text">fleet active</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div>
|
|
<div class="stat-value">324</div>
|
|
<div class="stat-title">Captains Online</div>
|
|
</div>
|
|
<div class="stat-icon info"><i class="ph ph-steering-wheel"></i></div>
|
|
</div>
|
|
<div class="stat-footer">
|
|
<span class="trend-badge up"><i class="ph ph-check"></i> 94% online rate</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div>
|
|
<div class="stat-value">98.4%</div>
|
|
<div class="stat-title">Dispatch Rate</div>
|
|
</div>
|
|
<div class="stat-icon warning"><i class="ph ph-lightning"></i></div>
|
|
</div>
|
|
<div class="stat-footer">
|
|
<span class="trend-badge down"><i class="ph ph-trend-down"></i> -0.4%</span>
|
|
<span class="trend-text">avg 3.2m wait</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="dashboard-grid">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Revenue & Trip Surge Analytics</h3>
|
|
<button class="btn btn-secondary btn-sm">Weekly</button>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="revenueChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Live Dispatch Feed</h3>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:1rem;">
|
|
<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(--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>
|
|
</section>
|
|
|
|
<!-- ================= 2. RIDES & DISPATCH VIEW ================= -->
|
|
<section class="page-view" id="ridesView">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h1>Rides & Dispatch Management</h1>
|
|
<p>Monitor real-time passenger trips, statuses, and fare details</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 class="filter-bar">
|
|
<div class="filter-inputs">
|
|
<select class="select-input">
|
|
<option>All Statuses</option>
|
|
<option>Completed</option>
|
|
<option>In Progress</option>
|
|
<option>Cancelled</option>
|
|
</select>
|
|
<select class="select-input">
|
|
<option>All Cities</option>
|
|
<option>Amman</option>
|
|
<option>Zarqa</option>
|
|
<option>Irbid</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="table-responsive">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Trip ID</th>
|
|
<th>Passenger</th>
|
|
<th>Driver</th>
|
|
<th>Route</th>
|
|
<th>Fare</th>
|
|
<th>Status</th>
|
|
<th>Time</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ridesTableBody">
|
|
<!-- Populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================= 3. DRIVERS VIEW ================= -->
|
|
<section class="page-view" id="driversView">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h1>Captains & Drivers</h1>
|
|
<p>Verify documents, manage online fleet, and inspect ratings</p>
|
|
</div>
|
|
<div class="page-actions">
|
|
<button class="btn btn-primary" style="width:auto;"><i class="ph ph-user-plus"></i> Add New Driver</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="table-responsive">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Driver ID</th>
|
|
<th>Name</th>
|
|
<th>Phone</th>
|
|
<th>Vehicle</th>
|
|
<th>Rating</th>
|
|
<th>Total Trips</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="driversTableBody">
|
|
<!-- Populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================= 4. PASSENGERS VIEW ================= -->
|
|
<section class="page-view" id="passengersView">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h1>Passengers & Customers</h1>
|
|
<p>Customer accounts, trip history, and subscription status</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="table-responsive">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Customer ID</th>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Trips Count</th>
|
|
<th>Rating</th>
|
|
<th>Joined Date</th>
|
|
<th>Account Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="passengersTableBody">
|
|
<!-- Populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================= 5. FINANCIALS VIEW ================= -->
|
|
<section class="page-view" id="financialsView">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h1>Financials & Reports</h1>
|
|
<p>Payout calculations, platform commissions, and exported ledgers</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 class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-value">$184,200</div>
|
|
<div class="stat-title">Gross Revenue (This Month)</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">$27,630</div>
|
|
<div class="stat-title">Platform Net Commission (15%)</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">$156,570</div>
|
|
<div class="stat-title">Driver Payouts Processed</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 class="card">
|
|
<div style="padding:1rem; text-align:center; color:var(--text-muted);">
|
|
<i class="ph ph-shield-check" style="font-size:3rem; color:var(--success); margin-bottom:0.5rem; display:block;"></i>
|
|
<h3>All high-priority complaints resolved</h3>
|
|
<p style="font-size:0.88rem; margin-top:0.25rem;">0 active tickets requiring immediate escalation.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ================= 7. SYSTEM STATUS VIEW ================= -->
|
|
<section class="page-view" id="systemView">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h1>System Health & Microservices</h1>
|
|
<p>Server nodes, API gateways, database latency, and websocket connections</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<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 class="stat-card">
|
|
<div class="stat-header">
|
|
<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 class="stat-card">
|
|
<div class="stat-header">
|
|
<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>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Details Modal -->
|
|
<div class="modal-overlay" id="detailsModal">
|
|
<div class="modal-content">
|
|
<div id="modalBodyContent">
|
|
<!-- Dynamic content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OTP Verification Modal -->
|
|
<div class="modal-overlay" id="otpModal">
|
|
<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;">
|
|
<i class="ph ph-whatsapp-logo"></i>
|
|
</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">
|
|
A 3-digit verification code was sent to your WhatsApp.
|
|
</p>
|
|
|
|
<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">
|
|
</div>
|
|
|
|
<button type="button" class="btn-primary" id="submitOtpBtn">
|
|
<i class="ph-bold ph-check"></i> Verify & Sign In
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-secondary" onclick="closeOtpModal()" style="width: 100%; margin-top: 0.75rem; justify-content: center;">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|