@wealthx/shadcn 1.2.1 → 1.3.0

package/src/components/ui/appointment-detail-sheet.tsx

@@ -0,0 +1,415 @@
+import React from "react";
+import { Avatar, AvatarFallback } from "./avatar";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Separator } from "./separator";
+import { Sheet, SheetContent } from "./sheet";
+import {
+  AppointmentConfirmAction,
+  AppointmentConfirmDialog,
+  AppointmentRescheduleDialog,
+} from "./appointment-action-dialogs";
+import type {
+  AppointmentMeetingFormat,
+  AppointmentStatus,
+  AppointmentTimeSlot,
+} from "./appointment-time-slot-picker";
+import {
+  AlertCircle,
+  Calendar,
+  CalendarClock,
+  Check,
+  CircleUser,
+  Clock,
+  FileText,
+  Mail,
+  MapPin,
+  Phone,
+  RefreshCw,
+  Users,
+  Video,
+  X,
+} from "lucide-react";
+
+// Re-export so consumers who import these types from this module still work
+export type {
+  AppointmentStatus,
+  AppointmentMeetingFormat,
+} from "./appointment-time-slot-picker";
+
+export interface AppointmentDetailItem {
+  id: string;
+  status: AppointmentStatus;
+  clientName: string;
+  clientAvatarInitials: string;
+  /** Client ID — used to pre-select client when rebooking after cancellation */
+  clientId?: string;
+  date: string;
+  timeStart: string;
+  timeEnd: string;
+  notes?: string;
+  /** Reason provided when the appointment was cancelled */
+  cancelReason?: string;
+  /** How the meeting is conducted */
+  meetingFormat?: AppointmentMeetingFormat;
+  /** Formatted location string — shown for offline meetings */
+  meetingLocation?: string;
+}
+
+export type LoanApplicationStatus =
+  | "finished"
+  | "in-progress"
+  | "sent-request"
+  | "not-start";
+
+/** Extra client profile fields not stored on the appointment itself */
+export interface AppointmentClientProfile {
+  phone?: string;
+  email?: string;
+  accountType?: "Individual" | "Joint";
+  loanApplicationStatus?: LoanApplicationStatus;
+}
+
+export interface AppointmentDetailSheetProps {
+  appointment: AppointmentDetailItem | undefined;
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  clientProfile?: AppointmentClientProfile;
+  amSlots: AppointmentTimeSlot[];
+  pmSlots: AppointmentTimeSlot[];
+  onAccept?: (id: string) => void;
+  onDecline?: (id: string) => void;
+  onReschedule?: (
+    id: string,
+    date: Date,
+    slot: AppointmentTimeSlot,
+    note: string,
+  ) => void;
+  /** Called when "Book a New Appointment" is clicked on a cancelled appointment */
+  onBookNew?: (clientId?: string) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Status config
+// ---------------------------------------------------------------------------
+
+const STATUS_CONFIG: Record<
+  AppointmentStatus,
+  {
+    variant: "warning" | "success" | "destructive" | "info";
+    label: string;
+    icon: React.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} />,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AppointmentDetailSheet({
+  appointment,
+  open,
+  onOpenChange,
+  clientProfile,
+  amSlots,
+  pmSlots,
+  onAccept,
+  onDecline,
+  onReschedule,
+  onBookNew,
+}: AppointmentDetailSheetProps) {
+  const [confirmAction, setConfirmAction] =
+    React.useState<AppointmentConfirmAction | null>(null);
+  const [rescheduleOpen, setRescheduleOpen] = React.useState(false);
+
+  if (!appointment) return null;
+
+  const { variant, label, icon } = STATUS_CONFIG[appointment.status];
+  const isCancelled = appointment.status === "cancelled";
+  const isConfirmed = appointment.status === "confirmed";
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent
+          side="right"
+          className="flex w-[440px] flex-col gap-0 overflow-y-auto p-0"
+        >
+          {/* ── Header: avatar + name/badge + action buttons ── */}
+          <div className="border-b border-border px-6 py-5">
+            <div className="flex items-start gap-4">
+              <Avatar className="h-12 w-12 shrink-0">
+                <AvatarFallback className="text-base">
+                  {appointment.clientAvatarInitials}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex min-w-0 flex-1 flex-col gap-1">
+                <p className="text-lg font-semibold leading-tight">
+                  {appointment.clientName}
+                </p>
+                <Badge variant={variant} className="w-fit">
+                  {icon}
+                  {label}
+                </Badge>
+              </div>
+            </div>
+
+            {/* Action buttons */}
+            <div className="mt-4 flex gap-2">
+              {isCancelled ? (
+                <Button
+                  size="sm"
+                  className="w-full"
+                  onClick={() => onBookNew?.(appointment.clientId)}
+                >
+                  Book a New Appointment
+                </Button>
+              ) : (
+                <>
+                  <Button
+                    size="sm"
+                    disabled={isConfirmed}
+                    onClick={() => setConfirmAction("accept")}
+                    className="flex-1 gap-1.5"
+                  >
+                    <Check className="h-3.5 w-3.5" />
+                    Accept
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => setConfirmAction("decline")}
+                    className="flex-1 gap-1.5 text-destructive hover:text-destructive"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                    Decline
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => setRescheduleOpen(true)}
+                    className="flex-1 gap-1.5"
+                  >
+                    <RefreshCw className="h-3.5 w-3.5" />
+                    Reschedule
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* ── Appointment details ── */}
+          <div className="flex flex-col gap-4 px-6 py-5">
+            <div className="flex items-center gap-3 text-sm">
+              <Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />
+              <span className="font-medium">{appointment.date}</span>
+            </div>
+            <div className="flex items-center gap-3 text-sm">
+              <Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
+              <span className="font-medium">
+                {appointment.timeStart} – {appointment.timeEnd}
+              </span>
+            </div>
+
+            {/* Meeting format — for offline, location is shown inline to avoid a second MapPin */}
+            {appointment.meetingFormat && (
+              <div className="flex items-start gap-3 text-sm">
+                {appointment.meetingFormat === "call" && (
+                  <Phone className="h-4 w-4 shrink-0 text-muted-foreground" />
+                )}
+                {appointment.meetingFormat === "google-meet" && (
+                  <Video className="h-4 w-4 shrink-0 text-muted-foreground" />
+                )}
+                {appointment.meetingFormat === "offline" && (
+                  <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+                )}
+                <div className="flex flex-col gap-0.5">
+                  <span className="font-medium">
+                    {appointment.meetingFormat === "call" && "Phone Call"}
+                    {appointment.meetingFormat === "google-meet" &&
+                      "Google Meet"}
+                    {appointment.meetingFormat === "offline" && "In Person"}
+                  </span>
+                  {/* Location shown below format label — only for offline, avoids duplicate MapPin */}
+                  {appointment.meetingFormat === "offline" &&
+                    appointment.meetingLocation && (
+                      <span className="text-muted-foreground">
+                        {appointment.meetingLocation}
+                      </span>
+                    )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* ── Client profile ── */}
+          {clientProfile &&
+            (clientProfile.phone !== undefined ||
+              clientProfile.email !== undefined ||
+              clientProfile.accountType !== undefined ||
+              clientProfile.loanApplicationStatus !== undefined) && (
+              <>
+                <Separator />
+                <div className="flex flex-col gap-3 px-6 py-5">
+                  <p className="text-sm font-semibold">Client Profile</p>
+                  <div className="flex flex-col gap-2">
+                    {clientProfile.phone && (
+                      <div className="flex items-center gap-3 text-sm">
+                        <Phone className="h-4 w-4 shrink-0 text-muted-foreground" />
+                        <span className="text-muted-foreground">
+                          {clientProfile.phone}
+                        </span>
+                      </div>
+                    )}
+                    {clientProfile.email && (
+                      <div className="flex items-center gap-3 text-sm">
+                        <Mail className="h-4 w-4 shrink-0 text-muted-foreground" />
+                        <span className="text-muted-foreground">
+                          {clientProfile.email}
+                        </span>
+                      </div>
+                    )}
+                    {clientProfile.accountType !== undefined && (
+                      <div className="flex items-center justify-between text-sm">
+                        <span className="text-muted-foreground">
+                          Account type
+                        </span>
+                        <div className="flex items-center gap-1.5">
+                          {clientProfile.accountType === "Joint" ? (
+                            <Users className="h-3.5 w-3.5 text-muted-foreground" />
+                          ) : (
+                            <CircleUser className="h-3.5 w-3.5 text-muted-foreground" />
+                          )}
+                          <span className="font-medium">
+                            {clientProfile.accountType}
+                          </span>
+                        </div>
+                      </div>
+                    )}
+                    {clientProfile.loanApplicationStatus !== undefined && (
+                      <div className="flex items-center justify-between text-sm">
+                        <span className="text-muted-foreground">
+                          Loan application
+                        </span>
+                        <div className="flex items-center gap-1.5">
+                          <FileText className="h-3.5 w-3.5 text-muted-foreground" />
+                          {clientProfile.loanApplicationStatus ===
+                            "finished" && (
+                            <Badge variant="success" className="text-[10px]">
+                              Finished
+                            </Badge>
+                          )}
+                          {clientProfile.loanApplicationStatus ===
+                            "in-progress" && (
+                            <Badge variant="warning" className="text-[10px]">
+                              In Progress
+                            </Badge>
+                          )}
+                          {clientProfile.loanApplicationStatus ===
+                            "sent-request" && (
+                            <Badge variant="info" className="text-[10px]">
+                              Sent Request
+                            </Badge>
+                          )}
+                          {clientProfile.loanApplicationStatus ===
+                            "not-start" && (
+                            <Badge variant="secondary" className="text-[10px]">
+                              Not Started
+                            </Badge>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </>
+            )}
+
+          {/* ── Notes ── */}
+          {appointment.notes && (
+            <>
+              <Separator />
+              <div className="flex flex-col gap-2 px-6 py-5">
+                <div className="flex items-center gap-2">
+                  <FileText className="h-4 w-4 text-muted-foreground" />
+                  <p className="text-sm font-semibold">Notes</p>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {appointment.notes}
+                </p>
+              </div>
+            </>
+          )}
+
+          {/* ── Cancellation Reason ── */}
+          {appointment.cancelReason && (
+            <>
+              <Separator />
+              <div className="flex flex-col gap-2 px-6 py-5">
+                <div className="flex items-center gap-2">
+                  <AlertCircle className="h-4 w-4 text-destructive" />
+                  <p className="text-sm font-semibold">Cancellation Reason</p>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {appointment.cancelReason}
+                </p>
+              </div>
+            </>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      {/* Dialogs rendered outside Sheet to avoid z-index issues */}
+      <AppointmentConfirmDialog
+        open={confirmAction !== null}
+        onOpenChange={(v) => !v && setConfirmAction(null)}
+        action={confirmAction ?? "accept"}
+        clientName={appointment.clientName}
+        onConfirm={() => {
+          if (confirmAction === "accept") {
+            onAccept?.(appointment.id);
+          } else {
+            onDecline?.(appointment.id);
+          }
+          setConfirmAction(null);
+          onOpenChange(false);
+        }}
+      />
+
+      <AppointmentRescheduleDialog
+        open={rescheduleOpen}
+        onOpenChange={setRescheduleOpen}
+        amSlots={amSlots}
+        pmSlots={pmSlots}
+        currentDate={appointment.date}
+        currentTimeStart={appointment.timeStart}
+        currentTimeEnd={appointment.timeEnd}
+        onReschedule={(date, slot, note) => {
+          onReschedule?.(appointment.id, date, slot, note);
+          setRescheduleOpen(false);
+        }}
+      />
+    </>
+  );
+}

package/src/components/ui/appointment-gmail-connect.tsx

@@ -0,0 +1,188 @@
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import { Spinner } from "./spinner";
+import { Check, Copy, Link2, Mail, ShieldCheck, Unlink } from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type GmailConnectionState = "disconnected" | "connecting" | "connected";
+
+export interface GmailConnection {
+  connected: boolean;
+  email?: string;
+  /** ISO date string — "2026-03-15" */
+  connectedAt?: string;
+}
+
+export interface AppointmentGmailConnectProps {
+  connection: GmailConnection;
+  state?: GmailConnectionState;
+  onConnect?: () => void;
+  onDisconnect?: () => void;
+  /** Booking link to display in the calendar link section (connected state only) */
+  calendarLink?: string;
+  /** Called when the user clicks the copy button next to the calendar link */
+  onCopyLink?: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const PERMISSIONS = [
+  "Read your calendar availability",
+  "Send appointment confirmation emails",
+  "Create calendar events on your behalf",
+];
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AppointmentGmailConnect({
+  connection,
+  state = "disconnected",
+  onConnect,
+  onDisconnect,
+  calendarLink,
+  onCopyLink,
+}: AppointmentGmailConnectProps) {
+  if (state === "connecting") {
+    return (
+      <div className="flex flex-col items-center gap-4 border border-border bg-card px-6 py-8 text-center">
+        <Spinner className="h-6 w-6 text-primary" />
+        <div className="flex flex-col gap-1">
+          <p className="text-sm font-medium">Connecting to Gmail…</p>
+          <p className="text-xs text-muted-foreground">
+            Complete the sign-in in the popup window.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (connection.connected) {
+    return (
+      <div className="flex flex-col border border-border bg-card">
+        {/* Header — mail icon + title/email + badge + connected-since + disconnect */}
+        <div className="flex items-center gap-3 px-5 py-4">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center bg-primary/10">
+            <Mail className="h-5 w-5 text-primary" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-base font-semibold">Gmail Connected</p>
+            <p className="truncate text-sm text-muted-foreground">
+              {connection.email}
+            </p>
+          </div>
+          <Badge variant="success">
+            <Check size={10} />
+            Active
+          </Badge>
+          {connection.connectedAt && (
+            <p className="shrink-0 text-sm text-muted-foreground">
+              Connected since {connection.connectedAt}
+            </p>
+          )}
+          <Button
+            size="sm"
+            variant="ghost"
+            className="shrink-0 gap-1.5 text-destructive hover:text-destructive"
+            onClick={onDisconnect}
+          >
+            <Unlink className="h-3.5 w-3.5" />
+            Disconnect
+          </Button>
+        </div>
+
+        <Separator />
+
+        {/* Permissions granted */}
+        <div className="flex flex-col gap-2 px-5 py-4">
+          <p className="text-sm font-medium text-muted-foreground">
+            Permissions granted
+          </p>
+          {PERMISSIONS.map((perm) => (
+            <div key={perm} className="flex items-center gap-2">
+              <ShieldCheck className="h-4 w-4 shrink-0 text-success" />
+              <span className="text-sm text-muted-foreground">{perm}</span>
+            </div>
+          ))}
+        </div>
+
+        {/* Calendar appointment link — only rendered when a link is available */}
+        {calendarLink && (
+          <>
+            <Separator />
+            <div className="flex flex-col gap-2.5 px-5 py-4">
+              <div className="flex items-center gap-2">
+                <Link2 className="h-4 w-4 text-muted-foreground" />
+                <p className="text-sm font-semibold">
+                  Calendar Appointment Link
+                </p>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                Share with clients so they can self-book.
+              </p>
+              <div className="relative">
+                <Input
+                  id="calendar-link"
+                  readOnly
+                  value={calendarLink}
+                  className="cursor-default select-all pr-10 text-muted-foreground"
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={onCopyLink}
+                  className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2"
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // Disconnected state
+  return (
+    <div className="flex flex-col items-center gap-4 border border-border bg-card px-6 py-8 text-center">
+      <div className="flex h-12 w-12 items-center justify-center bg-muted">
+        <Mail className="h-6 w-6 text-muted-foreground" />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="text-base font-semibold">Connect your Gmail account</p>
+        <p className="max-w-xs text-sm text-muted-foreground">
+          Link your Gmail to let clients book appointments and receive
+          confirmation emails automatically.
+        </p>
+      </div>
+
+      <div className="flex w-full max-w-xs flex-col gap-2 text-left">
+        <p className="text-sm font-medium text-muted-foreground">
+          This will allow WealthX to:
+        </p>
+        {PERMISSIONS.map((perm) => (
+          <div key={perm} className="flex items-center gap-2">
+            <Check className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">{perm}</span>
+          </div>
+        ))}
+      </div>
+
+      <Button onClick={onConnect} className="gap-2">
+        <Mail className="h-4 w-4" />
+        Connect Gmail
+      </Button>
+    </div>
+  );
+}