@wealthx/shadcn 1.2.2 → 1.3.1

package/src/components/ui/appointment-mini-card.tsx

@@ -0,0 +1,104 @@
+import { Avatar, AvatarFallback } from "./avatar";
+import { Button } from "./button";
+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";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AppointmentMiniCardItem {
+  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 AppointmentMiniCardProps {
+  appointment: AppointmentMiniCardItem;
+  onAccept?: () => void;
+  onDecline?: () => void;
+  onReschedule?: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Status styling
+// ---------------------------------------------------------------------------
+
+const STATUS_BG: Record<AppointmentStatus, string> = {
+  pending: "border-warning bg-warning/10",
+  confirmed: "border-success bg-success/10",
+  cancelled: "border-destructive bg-destructive/10 opacity-60",
+  rescheduled: "border-info bg-info/10",
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AppointmentMiniCard({
+  appointment,
+  onAccept,
+  onDecline,
+  onReschedule,
+}: AppointmentMiniCardProps) {
+  const isConfirmed = appointment.status === "confirmed";
+  const isRescheduled = appointment.status === "rescheduled";
+  const isCancelled = appointment.status === "cancelled";
+
+  return (
+    <div
+      className={`flex items-center gap-4 border px-5 py-4 ${STATUS_BG[appointment.status]}`}
+    >
+      <Avatar className="h-10 w-10 shrink-0">
+        <AvatarFallback className="text-sm">
+          {appointment.clientAvatarInitials}
+        </AvatarFallback>
+      </Avatar>
+
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <p className="truncate text-base font-semibold">
+          {appointment.clientName}
+        </p>
+        <p className="text-sm text-muted-foreground">
+          {appointment.date} · {appointment.timeStart} – {appointment.timeEnd}
+        </p>
+      </div>
+
+      {/* Always 3 buttons — enabled state varies by status */}
+      <div className="flex shrink-0 items-center gap-2">
+        <Button
+          size="sm"
+          disabled={isConfirmed || isCancelled}
+          onClick={onAccept}
+        >
+          Accept
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={isCancelled}
+          onClick={onDecline}
+        >
+          Decline
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          disabled={isCancelled || isRescheduled}
+          onClick={onReschedule}
+        >
+          Reschedule
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/appointment-time-slot-picker.tsx

@@ -0,0 +1,123 @@
+import { Badge } from "./badge";
+import { Toggle } from "./toggle";
+
+// ---------------------------------------------------------------------------
+// Shared appointment domain types
+//
+// These are the canonical definitions — all other appointment components import
+// from here instead of re-defining their own copies.
+// ---------------------------------------------------------------------------
+
+export type AppointmentStatus =
+  | "pending"
+  | "confirmed"
+  | "cancelled"
+  | "rescheduled";
+
+export type AppointmentMeetingFormat = "call" | "google-meet" | "offline";
+
+// ---------------------------------------------------------------------------
+// Time slot
+// ---------------------------------------------------------------------------
+
+export interface AppointmentTimeSlot {
+  id: string;
+  /** Display label — "9:00 AM" */
+  label: string;
+  available: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Slot section — shared sub-component used by multiple appointment dialogs
+// ---------------------------------------------------------------------------
+
+export interface AppointmentSlotSectionProps {
+  label: string;
+  slots: AppointmentTimeSlot[];
+  selectedSlotId?: string;
+  onSelect?: (slot: AppointmentTimeSlot) => void;
+}
+
+export function AppointmentSlotSection({
+  label,
+  slots,
+  selectedSlotId,
+  onSelect,
+}: AppointmentSlotSectionProps) {
+  const hasAvailable = slots.some((s) => s.available);
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          {label}
+        </p>
+        {!hasAvailable && (
+          <Badge variant="secondary" className="text-[10px]">
+            No availability
+          </Badge>
+        )}
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {slots.map((slot) => (
+          <Toggle
+            key={slot.id}
+            variant="outline"
+            pressed={selectedSlotId === slot.id}
+            onPressedChange={(pressed) => {
+              if (pressed && slot.available) onSelect?.(slot);
+            }}
+            disabled={!slot.available}
+            className="min-w-[88px]"
+          >
+            {slot.label}
+          </Toggle>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Full picker (Morning + Afternoon sections combined)
+// ---------------------------------------------------------------------------
+
+export interface AppointmentTimeSlotPickerProps {
+  amSlots: AppointmentTimeSlot[];
+  pmSlots: AppointmentTimeSlot[];
+  selectedSlotId?: string;
+  onSelect?: (slot: AppointmentTimeSlot) => void;
+}
+
+export function AppointmentTimeSlotPicker({
+  amSlots,
+  pmSlots,
+  selectedSlotId,
+  onSelect,
+}: AppointmentTimeSlotPickerProps) {
+  const totalAvailable = [...amSlots, ...pmSlots].filter(
+    (s) => s.available,
+  ).length;
+
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="flex items-center justify-between">
+        <p className="text-sm font-semibold">Select a time slot</p>
+        <span className="text-xs text-muted-foreground">
+          {totalAvailable} available
+        </span>
+      </div>
+      <AppointmentSlotSection
+        label="Morning"
+        slots={amSlots}
+        selectedSlotId={selectedSlotId}
+        onSelect={onSelect}
+      />
+      <AppointmentSlotSection
+        label="Afternoon"
+        slots={pmSlots}
+        selectedSlotId={selectedSlotId}
+        onSelect={onSelect}
+      />
+    </div>
+  );
+}