From bd62b79d0cec434c5169bacd09cccef56271950f Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Tue, 7 Jul 2026 14:08:51 +0000
Subject: [PATCH] =?UTF-8?q?Collapsible=20booking=20cards=20in=20Protocol?=
 =?UTF-8?q?=20=E2=86=92=20Bookings=20list=20(Task=20#676)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Original task: make the protocol booking-requests LIST cards collapsed by
default, showing a compact summary and expanding full details only when opened;
add numbering, show the booking reference, and highlight today's bookings green.

Changes (artifacts/tx-os/src/pages/protocol.tsx):
- renderBookingCard(b, index) now renders a collapsible card. Collapsed shows
  only: sequence number (1-based over the current/filtered list), title,
  room · date-time range, booking reference, status/public pills, and a chevron.
- Summary header is a real <button type="button"> with onClick toggle and
  aria-expanded for keyboard accessibility.
- Expanded reveals the previously-shown detail fields (requester, department,
  meeting type, entity, phone, attendee count, purpose, key attendees) and the
  action buttons (approve/reject/cancel/edit/delete) — no functionality lost.
- Bookings starting today (sameYmd(startsAt, now)) get a green card
  (emerald border/bg/ring) plus an "اليوم"/"Today" badge.
- Added expandedBookings Set state + toggleBookingExpanded near booking state.
- List map updated to pass 1-based index.

i18n: added protocol.bookings.today ("اليوم" / "Today") to ar.json and en.json.

Scope: list view only; calendar view, public request form, and other tabs
unchanged. Client-only "today" derivation, no backend changes.

Verification: tsc --noEmit passes; architect code review PASSED (no critical
issues). Screenshot skipped — protocol page requires auth.
---
 artifacts/tx-os/src/locales/ar.json    |   1 +
 artifacts/tx-os/src/locales/en.json    |   1 +
 artifacts/tx-os/src/pages/protocol.tsx | 330 ++++++++++++++-----------
 3 files changed, 194 insertions(+), 138 deletions(-)

diff --git a/artifacts/tx-os/src/locales/ar.json b/artifacts/tx-os/src/locales/ar.json
index a1a29e38..6ec2f642 100644
--- a/artifacts/tx-os/src/locales/ar.json
+++ b/artifacts/tx-os/src/locales/ar.json
@@ -1718,6 +1718,7 @@
       "phone": "الهاتف",
       "attendeeCount": "العدد المتوقع للحضور",
       "publicRequest": "طلب عام",
+      "today": "اليوم",
       "reference": "رقم الحجز",
       "department": "الإدارة",
       "entity": "اسم الجهة",
diff --git a/artifacts/tx-os/src/locales/en.json b/artifacts/tx-os/src/locales/en.json
index f2f39d56..ad691998 100644
--- a/artifacts/tx-os/src/locales/en.json
+++ b/artifacts/tx-os/src/locales/en.json
@@ -1591,6 +1591,7 @@
       "phone": "Phone",
       "attendeeCount": "Expected attendees",
       "publicRequest": "Public request",
+      "today": "Today",
       "reference": "Booking ref",
       "department": "Department",
       "entity": "Entity",
diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index 1b684b3d..0dd0adb2 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -592,6 +592,16 @@ export default function ProtocolPage() {
     id: number;
   } | null>(null);
   const [bookingsView, setBookingsView] = useState<"list" | "calendar">("list");
+  const [expandedBookings, setExpandedBookings] = useState<Set<number>>(
+    () => new Set(),
+  );
+  const toggleBookingExpanded = (id: number) =>
+    setExpandedBookings((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
   const [selectedDay, setSelectedDay] = useState<Date>(() => new Date());
   const [calendarMonth, setCalendarMonth] = useState<Date>(() => new Date());
   const now = useNow(60000);
@@ -753,148 +763,192 @@ export default function ProtocolPage() {
 
   const BackIcon = isAr ? ArrowRight : ArrowLeft;
 
-  const renderBookingCard = (b: Booking) => (
-    <div
-      key={b.id}
-      className="bg-white rounded-xl border border-slate-200 p-3"
-    >
-      <div className="flex items-start justify-between gap-2">
-        <div className="min-w-0">
-          <div className="font-medium text-slate-800">{b.title}</div>
-          <div className="text-sm text-slate-500">
-            {roomName(b.roomId)} · {fmtDateTime(b.startsAt)} –{" "}
-            {fmtDateTime(b.endsAt)}
-          </div>
-          {b.bookingReference && (
-            <div className="text-xs font-medium text-sky-600">
-              {t("protocol.bookings.reference")}:{" "}
-              <span dir="ltr">{b.bookingReference}</span>
-            </div>
-          )}
-          {b.requesterName && (
-            <div className="text-xs text-slate-400">
-              {t("protocol.bookings.requester")}: {b.requesterName}
-            </div>
-          )}
-          {b.department && (
-            <div className="text-xs text-slate-400">
-              {t("protocol.bookings.department")}: {b.department}
-            </div>
-          )}
-          <div className="text-xs text-slate-400">
-            {t("protocol.bookings.meetingType")}:{" "}
-            {t(`protocol.bookings.meetingTypes.${b.meetingType}`)}
-          </div>
-          {b.meetingType === "external" && b.requesterOrg && (
-            <div className="text-xs text-slate-400">
-              {t("protocol.bookings.entity")}: {b.requesterOrg}
-            </div>
-          )}
-          {b.requesterPhone && (
-            <div className="text-xs text-slate-400">
-              {t("protocol.bookings.phone")}:{" "}
-              <span dir="ltr">{b.requesterPhone}</span>
-            </div>
-          )}
-          {b.attendeeCount != null && (
-            <div className="text-xs text-slate-400">
-              {t("protocol.bookings.attendeeCount")}: {b.attendeeCount}
-            </div>
-          )}
-          {b.purpose && (
-            <div className="text-xs text-slate-400">
-              {t("protocol.bookings.purpose")}: {b.purpose}
-            </div>
-          )}
-          {b.keyAttendees && b.keyAttendees.length > 0 && (
-            <div className="text-xs text-slate-400 mt-1">
-              <span className="font-medium">
-                {t("protocol.bookings.keyAttendees")}:
-              </span>
-              <ul className="mt-0.5 space-y-0.5">
-                {b.keyAttendees.map((a, i) => (
-                  <li key={i}>
-                    {a.name}
-                    {a.position ? ` — ${a.position}` : ""} (
-                    {t(`protocol.bookings.attendeeSides.${a.side}`)})
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col items-end gap-1 shrink-0">
-          {b.source === "public" && (
-            <span className="text-xs px-2 py-0.5 rounded-full bg-sky-100 text-sky-700">
-              {t("protocol.bookings.publicRequest")}
+  const renderBookingCard = (b: Booking, index: number) => {
+    const expanded = expandedBookings.has(b.id);
+    const bookingIsToday = sameYmd(new Date(b.startsAt), now);
+    return (
+      <div
+        key={b.id}
+        className={cn(
+          "rounded-xl border p-3",
+          bookingIsToday
+            ? "border-emerald-400 bg-emerald-50/60 ring-1 ring-emerald-200"
+            : "bg-white border-slate-200",
+        )}
+      >
+        <button
+          type="button"
+          onClick={() => toggleBookingExpanded(b.id)}
+          aria-expanded={expanded}
+          className="w-full flex items-start justify-between gap-2 text-start"
+        >
+          <div className="flex items-start gap-2 min-w-0">
+            <span className="shrink-0 mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600">
+              {index}
             </span>
-          )}
-          <span
-            className={cn(
-              "text-xs px-2 py-0.5 rounded-full",
-              STATUS_PILL[b.status],
+            <div className="min-w-0">
+              <div className="font-medium text-slate-800 flex items-center gap-2">
+                <span className="truncate">{b.title}</span>
+                {bookingIsToday && (
+                  <span className="shrink-0 text-[10px] px-1.5 py-0.5 rounded-full bg-emerald-100 text-emerald-700">
+                    {t("protocol.bookings.today")}
+                  </span>
+                )}
+              </div>
+              <div className="text-sm text-slate-500">
+                {roomName(b.roomId)} · {fmtDateTime(b.startsAt)} –{" "}
+                {fmtDateTime(b.endsAt)}
+              </div>
+              {b.bookingReference && (
+                <div className="text-xs font-medium text-sky-600">
+                  {t("protocol.bookings.reference")}:{" "}
+                  <span dir="ltr">{b.bookingReference}</span>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-col items-end gap-1 shrink-0">
+            {b.source === "public" && (
+              <span className="text-xs px-2 py-0.5 rounded-full bg-sky-100 text-sky-700">
+                {t("protocol.bookings.publicRequest")}
+              </span>
             )}
-          >
-            {t(`protocol.status.${b.status}`)}
-          </span>
-        </div>
-      </div>
-      <div className="flex flex-wrap gap-1.5 mt-2">
-        {c?.canApprove && b.status === "pending" && (
-          <>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() =>
-                bookingAction.mutate({ id: b.id, action: "approve" })
-              }
+            <span
+              className={cn(
+                "text-xs px-2 py-0.5 rounded-full",
+                STATUS_PILL[b.status],
+              )}
             >
-              <Check size={14} className="me-1" />
-              {t("protocol.actions.approve")}
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => setRejectTarget({ kind: "booking", id: b.id })}
-            >
-              <X size={14} className="me-1" />
-              {t("protocol.actions.reject")}
-            </Button>
-          </>
-        )}
-        {c?.canMutate &&
-          (b.status === "pending" || b.status === "approved") && (
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={() =>
-                bookingAction.mutate({ id: b.id, action: "cancel" })
-              }
-            >
-              {t("protocol.actions.cancel")}
-            </Button>
-          )}
-        {c?.canMutate && (
-          <>
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={() => setBookingDialog({ open: true, edit: b })}
-            >
-              <Pencil size={14} />
-            </Button>
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={() => setDeleteTarget({ kind: "booking", id: b.id })}
-            >
-              <Trash2 size={14} className="text-rose-500" />
-            </Button>
-          </>
+              {t(`protocol.status.${b.status}`)}
+            </span>
+            <ChevronDown
+              size={16}
+              className={cn(
+                "text-slate-400 transition-transform",
+                expanded && "rotate-180",
+              )}
+            />
+          </div>
+        </button>
+
+        {expanded && (
+          <div className="mt-2 border-t border-slate-100 pt-2">
+            <div className="space-y-0.5">
+              {b.requesterName && (
+                <div className="text-xs text-slate-400">
+                  {t("protocol.bookings.requester")}: {b.requesterName}
+                </div>
+              )}
+              {b.department && (
+                <div className="text-xs text-slate-400">
+                  {t("protocol.bookings.department")}: {b.department}
+                </div>
+              )}
+              <div className="text-xs text-slate-400">
+                {t("protocol.bookings.meetingType")}:{" "}
+                {t(`protocol.bookings.meetingTypes.${b.meetingType}`)}
+              </div>
+              {b.meetingType === "external" && b.requesterOrg && (
+                <div className="text-xs text-slate-400">
+                  {t("protocol.bookings.entity")}: {b.requesterOrg}
+                </div>
+              )}
+              {b.requesterPhone && (
+                <div className="text-xs text-slate-400">
+                  {t("protocol.bookings.phone")}:{" "}
+                  <span dir="ltr">{b.requesterPhone}</span>
+                </div>
+              )}
+              {b.attendeeCount != null && (
+                <div className="text-xs text-slate-400">
+                  {t("protocol.bookings.attendeeCount")}: {b.attendeeCount}
+                </div>
+              )}
+              {b.purpose && (
+                <div className="text-xs text-slate-400">
+                  {t("protocol.bookings.purpose")}: {b.purpose}
+                </div>
+              )}
+              {b.keyAttendees && b.keyAttendees.length > 0 && (
+                <div className="text-xs text-slate-400 mt-1">
+                  <span className="font-medium">
+                    {t("protocol.bookings.keyAttendees")}:
+                  </span>
+                  <ul className="mt-0.5 space-y-0.5">
+                    {b.keyAttendees.map((a, i) => (
+                      <li key={i}>
+                        {a.name}
+                        {a.position ? ` — ${a.position}` : ""} (
+                        {t(`protocol.bookings.attendeeSides.${a.side}`)})
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+            <div className="flex flex-wrap gap-1.5 mt-2">
+              {c?.canApprove && b.status === "pending" && (
+                <>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() =>
+                      bookingAction.mutate({ id: b.id, action: "approve" })
+                    }
+                  >
+                    <Check size={14} className="me-1" />
+                    {t("protocol.actions.approve")}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() =>
+                      setRejectTarget({ kind: "booking", id: b.id })
+                    }
+                  >
+                    <X size={14} className="me-1" />
+                    {t("protocol.actions.reject")}
+                  </Button>
+                </>
+              )}
+              {c?.canMutate &&
+                (b.status === "pending" || b.status === "approved") && (
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() =>
+                      bookingAction.mutate({ id: b.id, action: "cancel" })
+                    }
+                  >
+                    {t("protocol.actions.cancel")}
+                  </Button>
+                )}
+              {c?.canMutate && (
+                <>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => setBookingDialog({ open: true, edit: b })}
+                  >
+                    <Pencil size={14} />
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() =>
+                      setDeleteTarget({ kind: "booking", id: b.id })
+                    }
+                  >
+                    <Trash2 size={14} className="text-rose-500" />
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
         )}
       </div>
-    </div>
-  );
+    );
+  };
 
   return (
     <div className="min-h-screen bg-slate-50" dir={isAr ? "rtl" : "ltr"}>
@@ -1101,7 +1155,7 @@ export default function ProtocolPage() {
                 }
                 return (
                   <div className="grid gap-2">
-                    {list.map((b) => renderBookingCard(b))}
+                    {list.map((b, i) => renderBookingCard(b, i + 1))}
                   </div>
                 );
               })()