From 42efb18eb658f82026814507376d0926de19f45f Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 9 Jul 2026 07:59:34 +0000
Subject: [PATCH] Task #723: navy KPI numbers in rooms dashboard + compact
 next-booking row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- protocol.tsx RoomsDashboardView: KPI numbers changed from text-sky-600
  to navy text-[#0f1d3d], matching the main dashboard styling from #722.
- "أقرب حجز قادم" gradient banner compacted: p-4 → px-3 py-2, content now
  a single inline flex row (label + title + room/time), countdown chip
  reduced (px-2.5 py-0.5 text-sm). Empty/loading state also compact.
- No logic or data changes; tsc --noEmit clean; HMR applied; architect PASS.
---
 artifacts/tx-os/src/pages/protocol.tsx | 38 ++++++++++++++------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index ca7ab2e3..efc72a6c 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -3316,7 +3316,7 @@ function RoomsDashboardView({
             onClick={() => goTab(k.tab)}
             className="bg-white rounded-2xl border border-slate-200 p-4 text-start hover:border-sky-300 hover:shadow-sm transition"
           >
-            <div className="text-3xl font-bold text-sky-600">
+            <div className="text-3xl font-bold text-[#0f1d3d]">
               {k.value ?? "—"}
             </div>
             <div className="text-sm text-slate-500 mt-1">{k.label}</div>
@@ -3327,32 +3327,36 @@ function RoomsDashboardView({
         ))}
       </div>
 
-      <div className="bg-gradient-to-l from-sky-500 to-sky-600 rounded-2xl p-4 text-white shadow-sm">
-        <div className="flex items-center gap-2 text-sky-100 text-sm">
-          <Clock3 size={16} />
-          {t("protocol.roomsDash.nextBooking")}
-        </div>
+      <div className="bg-gradient-to-l from-sky-500 to-sky-600 rounded-2xl px-3 py-2 text-white shadow-sm">
         {d?.nextBooking ? (
-          <div className="mt-2 flex flex-wrap items-center justify-between gap-3">
-            <div className="min-w-0">
-              <div className="font-bold text-lg truncate">
+          <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
+            <div className="flex items-center gap-2 min-w-0">
+              <Clock3 size={14} className="shrink-0 text-sky-100" />
+              <span className="text-xs text-sky-100 whitespace-nowrap">
+                {t("protocol.roomsDash.nextBooking")}
+              </span>
+              <span className="font-bold text-sm truncate">
                 {d.nextBooking.title}
-              </div>
-              <div className="text-sm text-sky-100">
+              </span>
+              <span className="text-xs text-sky-100 truncate">
                 {nameOf(d.nextBooking.roomNameAr, d.nextBooking.roomNameEn)}
                 {" · "}
                 {fmtNextTime(d.nextBooking.startsAt)}
-              </div>
+              </span>
             </div>
-            <div className="rounded-xl bg-white/15 px-4 py-2 text-xl font-bold whitespace-nowrap">
+            <div className="rounded-lg bg-white/15 px-2.5 py-0.5 text-sm font-bold whitespace-nowrap">
               {countdown}
             </div>
           </div>
         ) : (
-          <div className="mt-2 text-sky-100 text-sm">
-            {stats.isLoading
-              ? t("common.loading")
-              : t("protocol.roomsDash.noUpcoming")}
+          <div className="flex items-center gap-2 text-sky-100 text-xs">
+            <Clock3 size={14} className="shrink-0" />
+            {t("protocol.roomsDash.nextBooking")}
+            <span className="text-white">
+              {stats.isLoading
+                ? t("common.loading")
+                : t("protocol.roomsDash.noUpcoming")}
+            </span>
           </div>
         )}
       </div>