85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
import Image from "next/image";
|
|
import { Gift, NotebookText } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
import { Card } from "@/components/ui/card";
|
|
import { StatusPill } from "@/components/ui/status-pill";
|
|
import type { AppointmentStatus, StaffSummary } from "@/types/domain";
|
|
|
|
export interface AppointmentCardProps {
|
|
status: AppointmentStatus;
|
|
serviceName: string;
|
|
/** The other party shown on the card — the barber on a customer-facing card, the customer on a staff-facing one. Same {id, name, avatarUrl} shape either way. */
|
|
person: StaffSummary;
|
|
/** Defaults to "with" — a staff card might prefer e.g. "for". */
|
|
personLabel?: string;
|
|
/** Pre-formatted for display, e.g. "Sat, Oct 12" — omit when the surrounding page already makes the date clear (e.g. a single day's agenda). */
|
|
formattedDate?: string;
|
|
/** Pre-formatted for display, e.g. "2:00 PM". */
|
|
formattedTime: string;
|
|
/** Small notes-exist indicator — staff calendar/agenda use, customer cards leave this unset. */
|
|
hasNotes?: boolean;
|
|
/** Small loyalty-reward-available indicator — same. */
|
|
hasAvailableReward?: boolean;
|
|
/** Reschedule/Cancel/Book again buttons — left to the caller so this
|
|
* component stays agnostic of which actions apply to which status. */
|
|
actions?: ReactNode;
|
|
href?: string;
|
|
}
|
|
|
|
export function AppointmentCard({
|
|
status,
|
|
serviceName,
|
|
person,
|
|
personLabel = "with",
|
|
formattedDate,
|
|
formattedTime,
|
|
hasNotes,
|
|
hasAvailableReward,
|
|
actions,
|
|
}: AppointmentCardProps) {
|
|
return (
|
|
<Card className="p-5">
|
|
<div className="mb-4 flex items-start justify-between">
|
|
<StatusPill status={status} />
|
|
<div className="text-right">
|
|
{formattedDate && <p className="text-sm font-bold">{formattedDate}</p>}
|
|
<p className="text-muted text-xs">{formattedTime}</p>
|
|
</div>
|
|
</div>
|
|
<div className="mb-4 flex items-center gap-3">
|
|
{person.avatarUrl ? (
|
|
<Image
|
|
src={person.avatarUrl}
|
|
alt=""
|
|
width={40}
|
|
height={40}
|
|
className="h-10 w-10 rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="bg-stone text-muted flex h-10 w-10 items-center justify-center rounded-full text-xs font-bold">
|
|
{person.name.charAt(0)}
|
|
</div>
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-1.5">
|
|
<h3 className="truncate text-sm font-bold">{serviceName}</h3>
|
|
{hasNotes && (
|
|
<NotebookText className="text-muted h-3.5 w-3.5 shrink-0" aria-label="Has notes" />
|
|
)}
|
|
{hasAvailableReward && (
|
|
<Gift
|
|
className="text-accent-loyalty h-3.5 w-3.5 shrink-0"
|
|
aria-label="Reward available"
|
|
/>
|
|
)}
|
|
</div>
|
|
<p className="text-muted text-xs">
|
|
{personLabel} {person.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{actions && <div className="border-line flex gap-2 border-t pt-4">{actions}</div>}
|
|
</Card>
|
|
);
|
|
}
|