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

Task #727: flush attendees table + rose external pill + darker card text

Browse Source 
- AttendeesTable got optional `flush` prop: flush mode drops
  rounded-xl/border/shadow, uses only border-t so the table attaches
  full-width inside the expanded booking details card. Dialog usage
  unchanged (non-flush card style).
- Attendee side "خارج الهيئة" pill changed violet → rose
  (bg-rose-100 text-rose-700), matching the external booking badge.
- Darker text in expanded card: title text-slate-900; grid values
  text-slate-800 font-semibold; removed max-w-2xl width cap.
- UI-only; tsc --noEmit clean; architect PASS.
This commit is contained in:
Replit Agent
2026-07-09 08:25:45 +00:00
parent b27539a9ba
commit b9b9b37636
1 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/pages/protocol.tsx
+23 -10
View File
@@ -1225,7 +1225,7 @@ export default function ProtocolPage() {
<span className="text-[11px] text-slate-400"> <span className="text-[11px] text-slate-400">
{t("protocol.bookings.table.title")} {t("protocol.bookings.table.title")}
</span> </span>
<div className="text-sm font-bold text-slate-800"> <div className="text-sm font-bold text-slate-900">
{b.title} {b.title}
</div> </div>
</div> </div>
@@ -1272,22 +1272,26 @@ export default function ProtocolPage() {
<div className="text-[11px] text-slate-400"> <div className="text-[11px] text-slate-400">
{label} {label}
</div> </div>
<div className="text-xs font-medium text-slate-700 break-words"> <div className="text-xs font-semibold text-slate-800 break-words">
{value != null && value !== "" ? value : "—"} {value != null && value !== "" ? value : "—"}
</div> </div>
</div> </div>
))} ))}
</div> </div>
<div className="px-4 py-2.5"> <div>
<div className="mb-1.5 text-[11px] font-semibold text-slate-400"> <div className="px-4 pt-2.5 pb-1.5 text-[11px] font-semibold text-slate-400">
{t("protocol.bookings.keyAttendees")} {t("protocol.bookings.keyAttendees")}
</div> </div>
{b.keyAttendees && b.keyAttendees.length > 0 ? ( {b.keyAttendees && b.keyAttendees.length > 0 ? (
<div className="max-w-2xl"> <AttendeesTable
<AttendeesTable attendees={b.keyAttendees} t={t} /> attendees={b.keyAttendees}
</div> t={t}
flush
/>
) : ( ) : (
<span className="text-xs text-slate-600">—</span> <span className="block px-4 pb-2.5 text-xs text-slate-600">
—
</span>
)} )}
</div> </div>
{b.status === "rejected" && b.rejectionReason && ( {b.status === "rejected" && b.rejectionReason && (
@@ -2473,12 +2477,21 @@ export default function ProtocolPage() {
function AttendeesTable({ function AttendeesTable({
attendees, attendees,
t, t,
flush = false,
}: { }: {
attendees: KeyAttendee[]; attendees: KeyAttendee[];
t: (key: string) => string; t: (key: string) => string;
flush?: boolean;
}) { }) {
return ( return (
<div className="overflow-x-auto rounded-xl border border-slate-200 shadow-sm"> <div
className={cn(
"overflow-x-auto",
flush
? "border-t border-slate-200"
: "rounded-xl border border-slate-200 shadow-sm",
)}
>
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-b border-slate-200 bg-slate-100/80 hover:bg-slate-100/80"> <TableRow className="border-b border-slate-200 bg-slate-100/80 hover:bg-slate-100/80">
@@ -2509,7 +2522,7 @@ function AttendeesTable({
className={cn( className={cn(
"inline-block whitespace-nowrap rounded-full px-2.5 py-0.5 text-[11px] font-medium", "inline-block whitespace-nowrap rounded-full px-2.5 py-0.5 text-[11px] font-medium",
a.side === "external" a.side === "external"
? "bg-violet-100 text-violet-700" ? "bg-rose-100 text-rose-700"
: "bg-sky-100 text-sky-700", : "bg-sky-100 text-sky-700",
)} )}
> >