diff --git a/.claude/launch.json b/.claude/launch.json index bcc045bb..2936a2fc 100644 --- a/.claude/launch.json +++ b/.claude/launch.json @@ -7,6 +7,12 @@ "runtimeArgs": ["run", "dev"], "port": 5183, "cwd": "transit_dashboard" + }, + { + "name": "siro-admin", + "runtimeExecutable": "python3", + "runtimeArgs": ["-m", "http.server", "8899", "--directory", "dashboard/siro-admin"], + "port": 8899 } ] } diff --git a/dashboard/siro-admin/css/main.css b/dashboard/siro-admin/css/main.css index b4a752d3..490b5adb 100644 --- a/dashboard/siro-admin/css/main.css +++ b/dashboard/siro-admin/css/main.css @@ -844,3 +844,257 @@ h1, h2, h3, h4, h5, h6 { 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; +} diff --git a/dashboard/siro-admin/index.html b/dashboard/siro-admin/index.html index 33174c4c..27a4acac 100644 --- a/dashboard/siro-admin/index.html +++ b/dashboard/siro-admin/index.html @@ -3,14 +3,14 @@ - Siro Admin | Enterprise Operations Dashboard - + Siro Admin | Operations Console + - + @@ -24,56 +24,46 @@ SIRO ADMIN -

Enterprise Operations & Control Portal

+

Operations & Control Console

-
- - +
+ + Secure session · device-bound token · WhatsApp OTP
- +
- +
- +
- -
-
- OR BIOMETRIC AUTH -
+
+ + This browser is registered as a trusted device: …
- -
- +
- +
-

Passengers & Customers

-

Customer accounts, trip history, and subscription status

+

Passengers

+

Most active customer accounts by trip count

@@ -387,115 +360,120 @@ - + - - + + - - - + + + - - - +
Customer IDID NameEmailTrips CountContactTrips RatingJoined DateAccount StatusActionCancellationsJoinedStatus
- +
-

Financials & Reports

-

Payout calculations, platform commissions, and exported ledgers

-
-
- +

Financials

+

Earnings, fares and distance aggregates across all recorded trips

-
$184,200
-
Gross Revenue (This Month)
+
—
+
Captain earnings (completed trips)
-
$27,630
-
Platform Net Commission (15%)
+
—
+
Average passenger fare
-
$156,570
-
Driver Payouts Processed
-
-
-
- - -
-
-
-

Support & Complaints Triage

-

Customer issues, lost & found, and ride rating disputes

+
—
+
Total distance covered
-
- -

All high-priority complaints resolved

-

0 active tickets requiring immediate escalation.

+

Trip Performance

+
+
+
+ + +
+
+
+

Pending Approvals

+

Admin and service accounts awaiting activation

+
+
+ +
+
+ + + + + + + + + + + + + +
IDNamePhoneTypeRequested roleRequested at
- -
+ +
-

System Health & Microservices

-

Server nodes, API gateways, database latency, and websocket connections

+

Complaints

+

Volume of customer complaints filed

-
-
-
Healthy
-
Location Server
-
-
-
-
Latency: 14ms
+
—
+
Filed today
-
-
-
-
Healthy
-
Ride Dispatch Engine
-
-
-
-
Latency: 22ms
+
—
+
This week
-
-
-
-
Healthy
-
Payment Server
-
-
-
-
Latency: 45ms
+
—
+
This month
+ +
+
+
+

Session & Security

+

Details of the credential currently authorising this console

+
+
+ +
+
+
+
+ @@ -503,29 +481,25 @@