43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import type { CallBatchDto } from "../types";
|
|
import { batchTicketCount, formatDateTime, formatVisitorName } from "../lib/format";
|
|
import { StatusBadge } from "./StatusBadge";
|
|
|
|
export function BatchCard({
|
|
batch,
|
|
showContactDetails = false,
|
|
}: {
|
|
batch: CallBatchDto;
|
|
showContactDetails?: boolean;
|
|
}) {
|
|
return (
|
|
<section className="batch-card" aria-labelledby={`batch-${batch.id}`}>
|
|
<div className="batch-card__header">
|
|
<div>
|
|
<h3 id={`batch-${batch.id}`}>本次叫号</h3>
|
|
</div>
|
|
<StatusBadge status={batch.status} />
|
|
</div>
|
|
<p className="batch-card__summary">
|
|
<strong>{batchTicketCount(batch)} 个号码</strong>
|
|
<span>{formatDateTime(batch.called_at)}</span>
|
|
</p>
|
|
<ul className="batch-ticket-list">
|
|
{batch.tickets.map((ticket) => (
|
|
<li key={ticket.id} className="batch-ticket-row">
|
|
<div className="batch-ticket-identity">
|
|
<strong className="ticket-number">{ticket.ticket_number}</strong>
|
|
{showContactDetails ? (
|
|
<span className="ticket-contact-line">
|
|
<span><span className="ticket-contact-label">手机号</span> <strong className="phone-value">{ticket.phone || "未返回"}</strong></span>
|
|
<span><span className="ticket-contact-label">游客</span> {formatVisitorName(ticket)}</span>
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<StatusBadge status={ticket.status} kind="ticket" />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
);
|
|
}
|