rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Task #696: Key attendees as a table in booking details dialog

Browse Source 
- artifacts/tx-os/src/pages/protocol.tsx: replaced the dash-separated
  <ul> list of keyAttendees in the booking details dialog with a shadcn
  Table (already imported) with 3 columns: Name, Position/Title, Side.
  Headers use text-start for correct RTL alignment; empty name/position
  cells render an em dash; side rendered as the existing pill using
  protocol.bookings.attendeeSides.*; table wrapped in rounded border +
  overflow-x-auto so it stays responsive inside the dialog.
- i18n: added protocol.bookings.details.attendeeCols.{name,position,side}
  to ar.json (الاسم/الصفة/الجهة) and en.json (Name/Title/Side).
- Scope limited to the details dialog; the expanded-row attendee display
  elsewhere is unchanged (per task out-of-scope).
- Verified: both locale JSONs valid, tsc --noEmit clean, architect review
  PASS.
- No follow-ups proposed: pending Task #695 already covers e2e testing of
  the details dialog contents.
This commit is contained in:
Replit Agent
2026-07-08 13:06:18 +00:00
parent a62aabf465
commit 3802f785a1
3 changed files with 52 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/pages/protocol.tsx
+42 -20
View File
@@ -2150,26 +2150,48 @@ export default function ProtocolPage() {
<div className="text-xs text-slate-400">
{t("protocol.bookings.keyAttendees")}
</div>
<ul className="mt-1 space-y-1">
{detailsBooking.keyAttendees!.map((a, i) => (
<li
key={i}
className="flex flex-wrap items-center gap-1.5 text-slate-700"
>
<span className="font-medium">{a.name}</span>
{a.position && (
<span className="text-slate-500">
— {a.position}
</span>
)}
<span className="rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-500">
{t(
`protocol.bookings.attendeeSides.${a.side}`,
)}
</span>
</li>
))}
</ul>
<div className="mt-1 overflow-x-auto rounded-lg border border-slate-200">
<Table>
<TableHeader>
<TableRow className="bg-slate-50">
<TableHead className="h-8 whitespace-nowrap px-3 text-start text-xs font-semibold text-slate-500">
{t(
"protocol.bookings.details.attendeeCols.name",
)}
</TableHead>
<TableHead className="h-8 whitespace-nowrap px-3 text-start text-xs font-semibold text-slate-500">
{t(
"protocol.bookings.details.attendeeCols.position",
)}
</TableHead>
<TableHead className="h-8 whitespace-nowrap px-3 text-start text-xs font-semibold text-slate-500">
{t(
"protocol.bookings.details.attendeeCols.side",
)}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{detailsBooking.keyAttendees!.map((a, i) => (
<TableRow key={i}>
<TableCell className="px-3 py-2 font-medium text-slate-700">
{a.name || "—"}
</TableCell>
<TableCell className="px-3 py-2 text-slate-600">
{a.position || "—"}
</TableCell>
<TableCell className="px-3 py-2">
<span className="whitespace-nowrap rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-500">
{t(
`protocol.bookings.attendeeSides.${a.side}`,
)}
</span>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
)}
</div>