Improve table alignment and action button presentation
Updates table cell alignment to center content, replaces "Cancel" action with a Ban icon, and adjusts header alignment for a more professional and consistent UI. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 7586707e-fb86-49e4-96d4-0802eb9f8d87 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/ychh3tH Replit-Helium-Checkpoint-Created: true
This commit is contained in:
Replit Agent
@@ -20,6 +20,7 @@ import {
|
||||
Trash2,
|
||||
Check,
|
||||
X,
|
||||
Ban,
|
||||
CalendarDays,
|
||||
List as ListIcon,
|
||||
Search as SearchIcon,
|
||||
@@ -805,36 +806,42 @@ export default function ProtocolPage() {
|
||||
)}
|
||||
data-testid={`booking-row-${b.id}`}
|
||||
>
|
||||
<TableCell className="w-10 text-slate-500">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600">
|
||||
<TableCell className="w-10 text-center align-middle">
|
||||
<span className="mx-auto flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600">
|
||||
{index}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap font-semibold text-sky-700">
|
||||
<span dir="ltr">{bookingNumber(b)}</span>
|
||||
{bookingIsToday && (
|
||||
<span className="ms-2 text-[10px] px-1.5 py-0.5 rounded-full bg-emerald-100 text-emerald-700">
|
||||
{t("protocol.bookings.today")}
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="min-w-0">
|
||||
<div className="font-medium text-slate-800 truncate max-w-[180px]">
|
||||
{b.requesterName || "—"}
|
||||
</div>
|
||||
{b.source === "public" && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded-full bg-sky-100 text-sky-700">
|
||||
{t("protocol.bookings.publicRequest")}
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap text-slate-600">
|
||||
<div>{fmtDateOnly(b.startsAt)}</div>
|
||||
<div className="text-xs text-slate-400" dir="ltr">
|
||||
{fmtTimeOnly(b.startsAt)} – {fmtTimeOnly(b.endsAt)}
|
||||
<TableCell className="whitespace-nowrap text-center align-middle font-semibold text-sky-700">
|
||||
<div className="flex flex-col items-center gap-0.5">
|
||||
<span dir="ltr">{bookingNumber(b)}</span>
|
||||
{bookingIsToday && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded-full bg-emerald-100 text-emerald-700 font-normal">
|
||||
{t("protocol.bookings.today")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap">
|
||||
<TableCell className="min-w-0 text-center align-middle">
|
||||
<div className="flex flex-col items-center gap-0.5">
|
||||
<div className="font-medium text-slate-800 truncate max-w-[180px]">
|
||||
{b.requesterName || "—"}
|
||||
</div>
|
||||
{b.source === "public" && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded-full bg-sky-100 text-sky-700">
|
||||
{t("protocol.bookings.publicRequest")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap text-center align-middle text-slate-600">
|
||||
<div className="flex flex-col items-center gap-0.5 leading-tight">
|
||||
<div>{fmtDateOnly(b.startsAt)}</div>
|
||||
<div className="text-xs text-slate-400" dir="ltr">
|
||||
{fmtTimeOnly(b.startsAt)} – {fmtTimeOnly(b.endsAt)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap text-center align-middle">
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs px-2 py-0.5 rounded-full",
|
||||
@@ -846,15 +853,18 @@ export default function ProtocolPage() {
|
||||
{t(`protocol.bookings.meetingTypesShort.${b.meetingType}`)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-slate-600">
|
||||
<div className="truncate max-w-[160px]">{roomName(b.roomId)}</div>
|
||||
{b.attendeeCount != null && (
|
||||
<div className="text-xs text-slate-400">
|
||||
{t("protocol.bookings.table.attendeesShort")}: {b.attendeeCount}
|
||||
</div>
|
||||
)}
|
||||
<TableCell className="text-center align-middle text-slate-600">
|
||||
<div className="flex flex-col items-center gap-0.5 leading-tight">
|
||||
<div className="truncate max-w-[160px]">{roomName(b.roomId)}</div>
|
||||
{b.attendeeCount != null && (
|
||||
<div className="text-xs text-slate-400">
|
||||
{t("protocol.bookings.table.attendeesShort")}:{" "}
|
||||
{b.attendeeCount}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="whitespace-nowrap">
|
||||
<TableCell className="whitespace-nowrap text-center align-middle">
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs px-2 py-0.5 rounded-full",
|
||||
@@ -865,10 +875,10 @@ export default function ProtocolPage() {
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="whitespace-nowrap"
|
||||
className="whitespace-nowrap text-center align-middle"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center gap-0.5">
|
||||
<div className="flex items-center justify-center gap-0.5">
|
||||
{c?.canApprove && b.status === "pending" && (
|
||||
<>
|
||||
<Button
|
||||
@@ -902,12 +912,14 @@ export default function ProtocolPage() {
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 px-2 text-xs text-slate-500"
|
||||
className="h-7 w-7 p-0 text-slate-500"
|
||||
title={t("protocol.actions.cancel")}
|
||||
aria-label={t("protocol.actions.cancel")}
|
||||
onClick={() =>
|
||||
bookingAction.mutate({ id: b.id, action: "cancel" })
|
||||
}
|
||||
>
|
||||
{t("protocol.actions.cancel")}
|
||||
<Ban size={14} />
|
||||
</Button>
|
||||
)}
|
||||
{c?.canMutate && (
|
||||
@@ -1036,26 +1048,26 @@ export default function ProtocolPage() {
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-slate-100/80 hover:bg-slate-100/80">
|
||||
<TableHead className="w-10 text-start">#</TableHead>
|
||||
<TableHead className="text-start whitespace-nowrap">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("protocol.bookings.table.number")}
|
||||
</TableHead>
|
||||
<TableHead className="text-start whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("protocol.bookings.table.requester")}
|
||||
</TableHead>
|
||||
<TableHead className="text-start whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("protocol.bookings.table.date")}
|
||||
</TableHead>
|
||||
<TableHead className="text-start whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("protocol.bookings.table.type")}
|
||||
</TableHead>
|
||||
<TableHead className="text-start whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("protocol.bookings.table.roomAttendees")}
|
||||
</TableHead>
|
||||
<TableHead className="text-start whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("protocol.bookings.table.status")}
|
||||
</TableHead>
|
||||
<TableHead className="text-start whitespace-nowrap">
|
||||
<TableHead className="text-center whitespace-nowrap">
|
||||
{t("protocol.bookings.table.actions")}
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
|
||||
Reference in New Issue
Block a user