From a1acbc8017a158a69aef09831a3c005068d44ccb Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 9 Jul 2026 09:36:45 +0000
Subject: [PATCH] =?UTF-8?q?Task=20#737:=20fix=20reversed=20=D8=B5/=D9=85?=
 =?UTF-8?q?=20(AM/PM)=20in=20Arabic=20booking=20time=20ranges?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Root cause: time-range containers forced dir="ltr" while the strings mix
  Latin digits with Arabic ص/م, so the bidi algorithm flipped the segments
  (showed "م - 1:30 م 12:30" instead of "12:30 م – 1:30 م").
- artifacts/tx-os/src/pages/protocol.tsx:
  - fmtTimeOnly now uses "ar-u-nu-latn" in Arabic (Latin digits kept) and
    is rendered in the natural RTL flow.
  - Removed dir="ltr" from: bookings list time cell, day-grid booking block
    time, and details dialog time range.
- fmtSlotRange / fmtSlotLabel callsites already use locale-aware dir (rtl
  in Arabic) — unchanged. English display unchanged.
- tsc clean; architect review passed.
---
 artifacts/tx-os/src/pages/protocol.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index 2e3f5422..655d6cd3 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -621,7 +621,7 @@ function BookingDayGrid({
                   {roomName(ev.b.roomId)}
                 </div>
                 {height >= 44 && (
-                  <div className="truncate opacity-70" dir="ltr">
+                  <div className="truncate opacity-70">
                     {timeLabel(ev.b.startsAt)} – {timeLabel(ev.b.endsAt)}
                   </div>
                 )}
@@ -1024,8 +1024,12 @@ export default function ProtocolPage() {
     new Date(iso).toLocaleDateString(isAr ? "ar" : "en", {
       dateStyle: "medium",
     });
+  // Latin digits even in Arabic (ar-u-nu-latn) so times look like "12:30 م".
+  // Rendered inside RTL containers WITHOUT dir="ltr": forcing LTR on text
+  // that mixes Latin digits with Arabic ص/م makes the bidi algorithm flip
+  // the order (e.g. "م 1:30 – م 12:30").
   const fmtTimeOnly = (iso: string) =>
-    new Date(iso).toLocaleTimeString(isAr ? "ar" : "en", {
+    new Date(iso).toLocaleTimeString(isAr ? "ar-u-nu-latn" : "en", {
       timeStyle: "short",
     });
 
@@ -1096,7 +1100,7 @@ export default function ProtocolPage() {
           <TableCell className="whitespace-nowrap text-center align-middle text-slate-600">
             <div className="flex flex-col items-center gap-0.5 leading-tight">
               <div>{fmtDateOnly(b.startsAt)}</div>
-              <div className="text-xs text-slate-400" dir="ltr">
+              <div className="text-xs text-slate-400">
                 {fmtTimeOnly(b.startsAt)} – {fmtTimeOnly(b.endsAt)}
               </div>
             </div>
@@ -2320,7 +2324,7 @@ export default function ProtocolPage() {
                     <DetailRow
                       label={t("protocol.bookings.details.time")}
                       value={
-                        <span dir="ltr">
+                        <span>
                           {fmtTimeOnly(detailsBooking.startsAt)} –{" "}
                           {fmtTimeOnly(detailsBooking.endsAt)}
                         </span>