@wealthx/shadcn 1.2.1 → 1.3.0

package/src/components/ui/appointment-calendar-view.tsx

@@ -0,0 +1,510 @@
+import type { ReactNode } from "react";
+import { Avatar, AvatarFallback } from "./avatar";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Separator } from "./separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+import {
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  RefreshCw,
+  X,
+  CalendarClock,
+} from "lucide-react";
+import type { AppointmentStatus } from "./appointment-time-slot-picker";
+
+// Re-export so consumers who import AppointmentStatus from this module still work
+export type { AppointmentStatus } from "./appointment-time-slot-picker";
+
+export interface AppointmentCalendarItem {
+  id: string;
+  status: AppointmentStatus;
+  clientName: string;
+  clientAvatarInitials: string;
+  /** ISO date string — "2026-04-22" */
+  date: string;
+  /** Display time — "10:00 AM" */
+  timeStart: string;
+  /** Display time — "10:30 AM" */
+  timeEnd: string;
+}
+
+export interface AppointmentWeekDay {
+  /** Short weekday label — "Mon" */
+  label: string;
+  /** ISO date string — "2026-04-20" */
+  date: string;
+  /** Short date number — "20" */
+  short: string;
+}
+
+export interface AppointmentCalendarViewProps {
+  appointments: AppointmentCalendarItem[];
+  /** ISO date string for the "today" highlight — "2026-04-22" */
+  today: string;
+  /** Label shown in the toolbar — "April 2026" */
+  periodLabel: string;
+  /** Days shown in week view */
+  weekDays: AppointmentWeekDay[];
+  /** Hours displayed in day/week view — defaults to [9..17] */
+  hours?: number[];
+  /** ISO date used for Day view */
+  dayViewDate?: string;
+  defaultView?: "day" | "week" | "month";
+  onPrev?: () => void;
+  onNext?: () => void;
+  onToday?: () => void;
+  onSelectAppointment?: (apt: AppointmentCalendarItem) => void;
+  /** Slot rendered in the calendar toolbar right side (e.g. pending request button + new appointment button) */
+  toolbarActions?: ReactNode;
+}
+
+// ---------------------------------------------------------------------------
+// Status styling
+// ---------------------------------------------------------------------------
+
+const STATUS_COLORS: Record<AppointmentStatus, string> = {
+  pending: "border-l-warning bg-warning/5",
+  confirmed: "border-l-success bg-success/5",
+  cancelled: "border-l-destructive bg-destructive/5",
+  rescheduled: "border-l-info bg-info/5",
+};
+
+const STATUS_CONFIG: Record<
+  AppointmentStatus,
+  {
+    variant: "warning" | "success" | "destructive" | "info";
+    label: string;
+    icon: ReactNode;
+  }
+> = {
+  pending: {
+    variant: "warning",
+    label: "Pending",
+    icon: <CalendarClock size={12} />,
+  },
+  confirmed: {
+    variant: "success",
+    label: "Confirmed",
+    icon: <Check size={12} />,
+  },
+  cancelled: {
+    variant: "destructive",
+    label: "Cancelled",
+    icon: <X size={12} />,
+  },
+  rescheduled: {
+    variant: "info",
+    label: "Rescheduled",
+    icon: <RefreshCw size={12} />,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatHour(h: number) {
+  if (h === 12) return "12 PM";
+  return h < 12 ? `${h} AM` : `${h - 12} PM`;
+}
+
+function getHourFromTime(time: string): number {
+  const match = time.match(/^(\d+):/);
+  if (!match) return 0;
+  const h = parseInt(match[1], 10);
+  return time.includes("PM") && h !== 12 ? h + 12 : h;
+}
+
+const DEFAULT_HOURS = [9, 10, 11, 12, 13, 14, 15, 16, 17];
+
+// ---------------------------------------------------------------------------
+// Day view
+// ---------------------------------------------------------------------------
+
+function DayView({
+  appointments,
+  date,
+  today,
+  hours,
+  onSelectAppointment,
+}: {
+  appointments: AppointmentCalendarItem[];
+  date: string;
+  today: string;
+  hours: number[];
+  onSelectAppointment?: (apt: AppointmentCalendarItem) => void;
+}) {
+  const d = new Date(date + "T00:00:00");
+  const dayLabel = d
+    .toLocaleDateString("en-AU", { weekday: "short" })
+    .toUpperCase();
+  const dayShort = d.getDate();
+  const isToday = date === today;
+  const dayApts = appointments.filter((a) => a.date === date);
+
+  return (
+    <div className="flex flex-col">
+      {/* Column header */}
+      <div className="grid grid-cols-[48px_1fr] border-b border-border">
+        <div className="border-r border-border" />
+        <div
+          className={`flex flex-col items-center gap-1 py-3 ${isToday ? "bg-primary/5" : ""}`}
+        >
+          <span
+            className={`text-xs font-medium tracking-wide ${isToday ? "font-semibold text-primary" : "text-muted-foreground"}`}
+          >
+            {dayLabel}
+          </span>
+          <span
+            className={`flex h-10 w-10 items-center justify-center text-xl font-semibold ${isToday ? "bg-primary text-primary-foreground" : ""}`}
+          >
+            {dayShort}
+          </span>
+        </div>
+      </div>
+
+      {/* Hourly grid */}
+      {hours.map((hour) => {
+        const aptsAtHour = dayApts.filter(
+          (a) => getHourFromTime(a.timeStart) === hour,
+        );
+        return (
+          <div
+            key={hour}
+            className="grid min-h-[60px] grid-cols-[48px_1fr] border-b border-border/40 last:border-b-0"
+          >
+            <div
+              className={`flex items-start justify-end border-r border-border pr-2 pt-1 ${isToday ? "bg-primary/5" : ""}`}
+            >
+              <span className="text-[10px] text-muted-foreground">
+                {formatHour(hour)}
+              </span>
+            </div>
+            <div
+              className={`flex flex-col gap-1.5 p-1.5 ${isToday ? "bg-primary/5" : ""}`}
+            >
+              {aptsAtHour.map((apt) => (
+                <Button
+                  key={apt.id}
+                  type="button"
+                  variant="ghost"
+                  onClick={() => onSelectAppointment?.(apt)}
+                  className={`h-auto w-full justify-start gap-3 border-l-2 px-3 py-2 text-left hover:opacity-80 ${STATUS_COLORS[apt.status]}`}
+                >
+                  <Avatar className="h-7 w-7 shrink-0">
+                    <AvatarFallback className="text-xs">
+                      {apt.clientAvatarInitials}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex min-w-0 flex-1 flex-col">
+                    <span className="text-sm font-semibold">
+                      {apt.clientName}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {apt.timeStart} – {apt.timeEnd}
+                    </span>
+                  </div>
+                  <Badge variant={STATUS_CONFIG[apt.status].variant}>
+                    {STATUS_CONFIG[apt.status].label}
+                  </Badge>
+                </Button>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Week view
+// ---------------------------------------------------------------------------
+
+function WeekView({
+  appointments,
+  weekDays,
+  today,
+  hours,
+  onSelectAppointment,
+}: {
+  appointments: AppointmentCalendarItem[];
+  weekDays: AppointmentWeekDay[];
+  today: string;
+  hours: number[];
+  onSelectAppointment?: (apt: AppointmentCalendarItem) => void;
+}) {
+  return (
+    <div className="flex flex-col overflow-x-auto">
+      {/* Day headers */}
+      <div
+        className="grid border-b border-border"
+        style={{ gridTemplateColumns: `48px repeat(${weekDays.length}, 1fr)` }}
+      >
+        <div className="border-r border-border" />
+        {weekDays.map((day) => (
+          <div
+            key={day.date}
+            className={`flex flex-col items-center border-r border-border py-2 last:border-r-0 ${day.date === today ? "bg-primary/5" : ""}`}
+          >
+            <span
+              className={`text-xs font-medium ${day.date === today ? "font-semibold text-primary" : "text-muted-foreground"}`}
+            >
+              {day.label}
+            </span>
+            <span
+              className={`text-sm font-semibold ${day.date === today ? "text-primary" : ""}`}
+            >
+              {day.short}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Time rows */}
+      {hours.map((hour) => (
+        <div
+          key={hour}
+          className="grid border-b border-border/40 last:border-b-0"
+          style={{
+            gridTemplateColumns: `48px repeat(${weekDays.length}, 1fr)`,
+          }}
+        >
+          <div className="flex items-start justify-end border-r border-border pr-2 pt-1">
+            <span className="text-[10px] text-muted-foreground">
+              {formatHour(hour)}
+            </span>
+          </div>
+          {weekDays.map((day) => {
+            const aptsAtCell = appointments.filter(
+              (a) =>
+                a.date === day.date && getHourFromTime(a.timeStart) === hour,
+            );
+            return (
+              <div
+                key={day.date}
+                className={`min-h-[44px] overflow-hidden border-r border-border/40 p-0.5 last:border-r-0 ${day.date === today ? "bg-primary/5" : ""}`}
+              >
+                {aptsAtCell.map((apt) => (
+                  <Button
+                    key={apt.id}
+                    type="button"
+                    variant="ghost"
+                    className={`h-auto w-full justify-start truncate border-l-2 px-1 py-1 text-left text-xs font-medium hover:opacity-80 ${STATUS_COLORS[apt.status]}`}
+                    onClick={() => onSelectAppointment?.(apt)}
+                  >
+                    {apt.timeStart} {apt.clientName}
+                  </Button>
+                ))}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Month view
+// ---------------------------------------------------------------------------
+
+const MONTH_DAY_HEADERS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+function generateMonthGrid(year: number, month: number): (Date | null)[][] {
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const startDow = firstDay.getDay();
+  const grid: (Date | null)[][] = [];
+  let week: (Date | null)[] = Array.from({ length: startDow }, () => null);
+
+  for (let day = 1; day <= lastDay.getDate(); day++) {
+    week.push(new Date(year, month, day));
+    if (week.length === 7) {
+      grid.push(week);
+      week = [];
+    }
+  }
+  if (week.length > 0) {
+    while (week.length < 7) week.push(null);
+    grid.push(week);
+  }
+  return grid;
+}
+
+function MonthView({
+  appointments,
+  today,
+  onSelectAppointment,
+}: {
+  appointments: AppointmentCalendarItem[];
+  today: string;
+  onSelectAppointment?: (apt: AppointmentCalendarItem) => void;
+}) {
+  // Derive year/month from today prop
+  const todayDate = new Date(today + "T00:00:00");
+  const grid = generateMonthGrid(todayDate.getFullYear(), todayDate.getMonth());
+  const toIso = (d: Date) => d.toISOString().slice(0, 10);
+
+  return (
+    <div className="flex flex-col">
+      {/* Day-of-week header row */}
+      <div className="grid grid-cols-7 border-b border-border">
+        {MONTH_DAY_HEADERS.map((d) => (
+          <div
+            key={d}
+            className="flex items-center justify-center border-r border-border/40 py-2 last:border-r-0"
+          >
+            <span className="text-xs font-medium text-muted-foreground">
+              {d}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Week rows */}
+      {grid.map((week, wi) => (
+        <div
+          key={wi}
+          className="grid grid-cols-7 border-b border-border last:border-b-0"
+        >
+          {week.map((day, di) => {
+            const iso = day ? toIso(day) : null;
+            const dayApts = iso
+              ? appointments.filter((a) => a.date === iso)
+              : [];
+            const isToday = iso === today;
+
+            return (
+              <div
+                key={di}
+                className={`min-h-[80px] border-r border-border/40 p-1 last:border-r-0 ${!day ? "bg-muted/20" : ""} ${isToday ? "bg-primary/5" : ""}`}
+              >
+                {day && (
+                  <>
+                    <div
+                      className={`mb-1 flex h-6 w-6 items-center justify-center text-xs font-semibold ${isToday ? "bg-primary text-primary-foreground" : "text-foreground"}`}
+                    >
+                      {day.getDate()}
+                    </div>
+                    <div className="flex flex-col gap-0.5">
+                      {dayApts.slice(0, 2).map((apt) => (
+                        <Button
+                          key={apt.id}
+                          type="button"
+                          variant="ghost"
+                          onClick={() => onSelectAppointment?.(apt)}
+                          className={`h-auto w-full justify-start truncate border-l-2 px-1 py-0.5 text-left text-[10px] font-medium hover:opacity-80 ${STATUS_COLORS[apt.status]}`}
+                        >
+                          {apt.timeStart} {apt.clientName}
+                        </Button>
+                      ))}
+                      {dayApts.length > 2 && (
+                        <p className="px-1 text-[10px] text-muted-foreground">
+                          +{dayApts.length - 2} more
+                        </p>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Composite calendar view
+// ---------------------------------------------------------------------------
+
+export function AppointmentCalendarView({
+  appointments,
+  today,
+  periodLabel,
+  weekDays,
+  hours = DEFAULT_HOURS,
+  dayViewDate,
+  defaultView = "week",
+  onPrev,
+  onNext,
+  onToday,
+  onSelectAppointment,
+  toolbarActions,
+}: AppointmentCalendarViewProps) {
+  const dayDate = dayViewDate ?? today;
+
+  return (
+    <div className="flex flex-col border border-border bg-card">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between gap-4 px-4 py-3">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-1"
+            onClick={onPrev}
+          >
+            <ChevronLeft className="h-3.5 w-3.5" />
+          </Button>
+          <p className="text-sm font-medium">{periodLabel}</p>
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-1"
+            onClick={onNext}
+          >
+            <ChevronRight className="h-3.5 w-3.5" />
+          </Button>
+          <Button variant="outline" size="sm" onClick={onToday}>
+            Today
+          </Button>
+        </div>
+        {toolbarActions && (
+          <div className="flex items-center gap-2">{toolbarActions}</div>
+        )}
+      </div>
+
+      <Separator />
+
+      <Tabs defaultValue={defaultView} className="flex flex-col">
+        <div className="px-4 pt-3">
+          <TabsList>
+            <TabsTrigger value="day">Day</TabsTrigger>
+            <TabsTrigger value="week">Week</TabsTrigger>
+            <TabsTrigger value="month">Month</TabsTrigger>
+          </TabsList>
+        </div>
+        <TabsContent value="day" className="mt-0">
+          <DayView
+            appointments={appointments}
+            date={dayDate}
+            today={today}
+            hours={hours}
+            onSelectAppointment={onSelectAppointment}
+          />
+        </TabsContent>
+        <TabsContent value="week" className="mt-0">
+          <WeekView
+            appointments={appointments}
+            weekDays={weekDays}
+            today={today}
+            hours={hours}
+            onSelectAppointment={onSelectAppointment}
+          />
+        </TabsContent>
+        <TabsContent value="month" className="mt-0">
+          <MonthView
+            appointments={appointments}
+            today={today}
+            onSelectAppointment={onSelectAppointment}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}