From 409b2c6fd51dff64168c61347c0971fe7e98721c Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 9 Jul 2026 09:58:09 +0000
Subject: [PATCH] =?UTF-8?q?Task=20#739:=20=D8=AA=D8=AD=D9=88=D9=8A=D9=84?=
 =?UTF-8?q?=20=D8=AA=D8=A8=D9=88=D9=8A=D8=A8=20=D8=A7=D9=84=D9=82=D8=A7?=
 =?UTF-8?q?=D8=B9=D8=A7=D8=AA=20=D9=85=D9=86=20=D8=A8=D8=B7=D8=A7=D9=82?=
 =?UTF-8?q?=D8=A7=D8=AA=20=D8=A5=D9=84=D9=89=20=D8=AC=D8=AF=D9=88=D9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- protocol.tsx (tab === "rooms"): replaced the 2-column card grid with a
  Table styled like the bookings table (bg-slate-100/80 header, centered
  headers/cells) with columns: # | القاعات | الحالة | الإجراء.
  - # = sequential index; name via nameOf with capacity line beneath.
  - Status badge keeps emerald-100 / slate-200 colors.
  - Actions column (edit/delete, same setRoomDialog/setDeleteTarget
    handlers) rendered only when canManageRooms.
  - EmptyState (rooms.empty), "قاعة جديدة" button, and dialogs unchanged.
- i18n: added protocol.rooms.status ("الحالة"/"Status") and
  protocol.rooms.actions ("الإجراء"/"Action") to ar.json and en.json.
- Verified: pnpm --filter @workspace/tx-os exec tsc --noEmit clean;
  architect review passed with no blocking issues.
---
 artifacts/tx-os/src/locales/ar.json    |   2 +
 artifacts/tx-os/src/locales/en.json    |   2 +
 artifacts/tx-os/src/pages/protocol.tsx | 133 +++++++++++++++----------
 3 files changed, 84 insertions(+), 53 deletions(-)

diff --git a/artifacts/tx-os/src/locales/ar.json b/artifacts/tx-os/src/locales/ar.json
index 7996a583..38aa674c 100644
--- a/artifacts/tx-os/src/locales/ar.json
+++ b/artifacts/tx-os/src/locales/ar.json
@@ -1893,6 +1893,8 @@
       "location": "الموقع",
       "active": "مفعّلة",
       "isActive": "مفعّلة",
+      "status": "الحالة",
+      "actions": "الإجراء",
       "empty": "لا توجد قاعات."
     },
     "issues": {
diff --git a/artifacts/tx-os/src/locales/en.json b/artifacts/tx-os/src/locales/en.json
index 5096ff45..5a682038 100644
--- a/artifacts/tx-os/src/locales/en.json
+++ b/artifacts/tx-os/src/locales/en.json
@@ -1738,6 +1738,8 @@
       "location": "Location",
       "active": "Active",
       "isActive": "Active",
+      "status": "Status",
+      "actions": "Action",
       "empty": "No rooms."
     },
     "issues": {
diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index 655d6cd3..c707bf9e 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -1780,60 +1780,87 @@ export default function ProtocolPage() {
                 </Button>
               )}
             </div>
-            <div className="grid gap-2 sm:grid-cols-2">
-              {(rooms.data ?? []).map((r) => (
-                <div
-                  key={r.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">
-                        {nameOf(r.nameAr, r.nameEn)}
-                      </div>
-                      <div className="text-xs text-slate-500">
-                        {r.capacity
-                          ? `${t("protocol.rooms.capacity")}: ${r.capacity}`
-                          : ""}
-                      </div>
-                    </div>
-                    <span
-                      className={cn(
-                        "text-xs px-2 py-0.5 rounded-full shrink-0",
-                        r.isActive
-                          ? "bg-emerald-100 text-emerald-700"
-                          : "bg-slate-200 text-slate-500",
+            {rooms.data?.length === 0 ? (
+              <EmptyState text={t("protocol.rooms.empty")} />
+            ) : (
+              <div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
+                <Table>
+                  <TableHeader>
+                    <TableRow className="bg-slate-100/80 hover:bg-slate-100/80">
+                      <TableHead className="w-10 text-center">#</TableHead>
+                      <TableHead className="text-center whitespace-nowrap">
+                        {t("protocol.rooms.title")}
+                      </TableHead>
+                      <TableHead className="text-center whitespace-nowrap">
+                        {t("protocol.rooms.status")}
+                      </TableHead>
+                      {c?.canManageRooms && (
+                        <TableHead className="text-center whitespace-nowrap">
+                          {t("protocol.rooms.actions")}
+                        </TableHead>
                       )}
-                    >
-                      {r.isActive
-                        ? t("protocol.rooms.active")
-                        : t("protocol.rooms.inactive")}
-                    </span>
-                  </div>
-                  {c?.canManageRooms && (
-                    <div className="flex gap-1.5 mt-2">
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => setRoomDialog({ open: true, edit: r })}
-                      >
-                        <Pencil size={14} />
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => setDeleteTarget({ kind: "room", id: r.id })}
-                      >
-                        <Trash2 size={14} className="text-rose-500" />
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              ))}
-              {rooms.data?.length === 0 && (
-                <EmptyState text={t("protocol.rooms.empty")} />
-              )}
-            </div>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {(rooms.data ?? []).map((r, i) => (
+                      <TableRow key={r.id}>
+                        <TableCell className="text-center text-slate-500">
+                          {i + 1}
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <div className="font-medium text-slate-800">
+                            {nameOf(r.nameAr, r.nameEn)}
+                          </div>
+                          {r.capacity ? (
+                            <div className="text-xs text-slate-500">
+                              {`${t("protocol.rooms.capacity")}: ${r.capacity}`}
+                            </div>
+                          ) : null}
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <span
+                            className={cn(
+                              "text-xs px-2 py-0.5 rounded-full",
+                              r.isActive
+                                ? "bg-emerald-100 text-emerald-700"
+                                : "bg-slate-200 text-slate-500",
+                            )}
+                          >
+                            {r.isActive
+                              ? t("protocol.rooms.active")
+                              : t("protocol.rooms.inactive")}
+                          </span>
+                        </TableCell>
+                        {c?.canManageRooms && (
+                          <TableCell className="text-center">
+                            <div className="flex justify-center gap-1.5">
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={() =>
+                                  setRoomDialog({ open: true, edit: r })
+                                }
+                              >
+                                <Pencil size={14} />
+                              </Button>
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={() =>
+                                  setDeleteTarget({ kind: "room", id: r.id })
+                                }
+                              >
+                                <Trash2 size={14} className="text-rose-500" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        )}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
           </section>
         )}