From a4bf222dc44518cfef8129edf08c7fb9ecaa4747 Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 9 Jul 2026 08:19:42 +0000
Subject: [PATCH] Task #725: red "external" badge + structured expanded booking
 details table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- protocol.tsx bookings table: external meeting-type badge changed from
  violet to rose (bg-rose-100 text-rose-700); internal unchanged.
- Expanded row rebuilt as a professional card-table: header row with
  meeting title (label above value, full width), grid of labeled cells
  (requester, department, phone, entity for external only, meeting type,
  attendee count, booking reference, purpose) with light dividers,
  keyAttendees AttendeesTable section below, rejection reason as a red
  banner row.
- Added i18n key protocol.bookings.table.title (ar: "اسم الاجتماع",
  en: "Meeting name").
- UI-only; tsc --noEmit clean; HMR applied; architect review PASS.
---
 artifacts/tx-os/src/locales/ar.json    |  1 +
 artifacts/tx-os/src/locales/en.json    |  1 +
 artifacts/tx-os/src/pages/protocol.tsx | 67 +++++++++++++++-----------
 3 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/artifacts/tx-os/src/locales/ar.json b/artifacts/tx-os/src/locales/ar.json
index 7996a583..b1146b4d 100644
--- a/artifacts/tx-os/src/locales/ar.json
+++ b/artifacts/tx-os/src/locales/ar.json
@@ -1811,6 +1811,7 @@
       "linkCopied": "تم نسخ الرابط",
       "linkCopyFailed": "تعذّر نسخ الرابط",
       "table": {
+        "title": "اسم الاجتماع",
         "number": "رقم الحجز",
         "requester": "مقدم الطلب",
         "date": "تاريخ الحجز",
diff --git a/artifacts/tx-os/src/locales/en.json b/artifacts/tx-os/src/locales/en.json
index 5096ff45..96442bb7 100644
--- a/artifacts/tx-os/src/locales/en.json
+++ b/artifacts/tx-os/src/locales/en.json
@@ -1664,6 +1664,7 @@
       "linkCopied": "Link copied",
       "linkCopyFailed": "Could not copy the link",
       "table": {
+        "title": "Meeting name",
         "number": "Booking No.",
         "requester": "Requester",
         "date": "Booking date",
diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index efc72a6c..0bc476c7 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -1104,7 +1104,7 @@ export default function ProtocolPage() {
               className={cn(
                 "text-xs px-2 py-0.5 rounded-full",
                 b.meetingType === "external"
-                  ? "bg-violet-100 text-violet-700"
+                  ? "bg-rose-100 text-rose-700"
                   : "bg-slate-100 text-slate-600",
               )}
             >
@@ -1219,19 +1219,26 @@ export default function ProtocolPage() {
         </TableRow>
         {expanded && (
           <TableRow key={`${b.id}-details`} className="bg-slate-50/80">
-            <TableCell colSpan={detailColSpan} className="py-3">
-              <div className="space-y-1">
-                <div className="text-sm text-slate-700 font-semibold">
-                  {b.title}
+            <TableCell colSpan={detailColSpan} className="p-3">
+              <div className="overflow-hidden rounded-lg border border-slate-200 bg-white">
+                <div className="border-b border-slate-200 bg-slate-50 px-4 py-2.5">
+                  <span className="text-[11px] text-slate-400">
+                    {t("protocol.bookings.table.title")}
+                  </span>
+                  <div className="text-sm font-bold text-slate-800">
+                    {b.title}
+                  </div>
                 </div>
-                <div className="grid gap-x-6 gap-y-1 sm:grid-cols-2 lg:grid-cols-3 text-xs">
+                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 divide-x divide-x-reverse divide-slate-100 border-b border-slate-200">
                   {(
                     [
                       [t("protocol.bookings.requester"), b.requesterName],
                       [t("protocol.bookings.department"), b.department],
                       [
-                        t("protocol.bookings.meetingType"),
-                        t(`protocol.bookings.meetingTypes.${b.meetingType}`),
+                        t("protocol.bookings.phone"),
+                        b.requesterPhone ? (
+                          <span dir="ltr">{b.requesterPhone}</span>
+                        ) : null,
                       ],
                       ...(b.meetingType === "external"
                         ? [
@@ -1242,49 +1249,55 @@ export default function ProtocolPage() {
                           ]
                         : []),
                       [
-                        t("protocol.bookings.phone"),
-                        b.requesterPhone ? (
-                          <span dir="ltr">{b.requesterPhone}</span>
-                        ) : null,
+                        t("protocol.bookings.meetingType"),
+                        t(`protocol.bookings.meetingTypes.${b.meetingType}`),
                       ],
                       [
                         t("protocol.bookings.attendeeCount"),
                         b.attendeeCount != null ? b.attendeeCount : null,
                       ],
-                      [t("protocol.bookings.purpose"), b.purpose],
                       [
                         t("protocol.bookings.reference"),
                         b.bookingReference ? (
                           <span dir="ltr">{b.bookingReference}</span>
                         ) : null,
                       ],
+                      [t("protocol.bookings.purpose"), b.purpose],
                     ] as Array<[string, React.ReactNode]>
                   ).map(([label, value], i) => (
-                    <div key={i} className="flex gap-1">
-                      <span className="text-slate-400 shrink-0">
-                        {label}:
-                      </span>
-                      <span className="text-slate-600 min-w-0 break-words">
+                    <div
+                      key={i}
+                      className="border-b border-slate-100 px-4 py-2"
+                    >
+                      <div className="text-[11px] text-slate-400">
+                        {label}
+                      </div>
+                      <div className="text-xs font-medium text-slate-700 break-words">
                         {value != null && value !== "" ? value : "—"}
-                      </span>
+                      </div>
                     </div>
                   ))}
                 </div>
-                <div className="text-xs">
-                  <span className="text-slate-400 font-medium">
-                    {t("protocol.bookings.keyAttendees")}:
-                  </span>
+                <div className="px-4 py-2.5">
+                  <div className="mb-1.5 text-[11px] font-semibold text-slate-400">
+                    {t("protocol.bookings.keyAttendees")}
+                  </div>
                   {b.keyAttendees && b.keyAttendees.length > 0 ? (
-                    <div className="mt-1.5 max-w-2xl">
+                    <div className="max-w-2xl">
                       <AttendeesTable attendees={b.keyAttendees} t={t} />
                     </div>
                   ) : (
-                    <span className="ms-1 text-slate-600">—</span>
+                    <span className="text-xs text-slate-600">—</span>
                   )}
                 </div>
                 {b.status === "rejected" && b.rejectionReason && (
-                  <div className="text-xs text-rose-500">
-                    {b.rejectionReason}
+                  <div className="border-t border-rose-200 bg-rose-50 px-4 py-2">
+                    <div className="text-[11px] font-semibold text-rose-600">
+                      {t("protocol.bookings.details.rejectionReason")}
+                    </div>
+                    <div className="text-xs text-rose-700 break-words">
+                      {b.rejectionReason}
+                    </div>
                   </div>
                 )}
               </div>