@wealthx/shadcn 1.2.2 → 1.3.1

package/dist/chunk-MIZQHHUO.mjs

@@ -0,0 +1,441 @@
+import {
+  AddressAutocomplete
+} from "./chunk-U5X52X37.mjs";
+import {
+  RadioGroup,
+  RadioGroupCard,
+  RadioGroupItem
+} from "./chunk-7XJHLGUV.mjs";
+import {
+  AppointmentSlotSection
+} from "./chunk-3OYFOX3X.mjs";
+import {
+  Toggle
+} from "./chunk-BDYZCBRT.mjs";
+import {
+  Textarea
+} from "./chunk-34NWQURD.mjs";
+import {
+  Calendar
+} from "./chunk-OODBHKG7.mjs";
+import {
+  Avatar,
+  AvatarFallback
+} from "./chunk-24FUO7TD.mjs";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-7PYJD5JI.mjs";
+import {
+  Label
+} from "./chunk-NSLMILBT.mjs";
+import {
+  Separator
+} from "./chunk-FH6QVUVZ.mjs";
+import {
+  Input
+} from "./chunk-GYMYRIZP.mjs";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-6DZEXFNB.mjs";
+import {
+  Button
+} from "./chunk-XREGSKX3.mjs";
+
+// src/components/ui/appointment-book-dialog.tsx
+import React from "react";
+import { MapPin, Phone, Video } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ClientSearch({
+  clients,
+  value,
+  onValueChange
+}) {
+  const [query, setQuery] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const selected = clients.find((c) => c.id === value);
+  const filtered = clients.filter((c) => {
+    const q = query.toLowerCase();
+    return c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q);
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: selected ? selected.name : query,
+        onChange: (e) => {
+          setQuery(e.target.value);
+          if (selected) onValueChange(void 0);
+          setOpen(e.target.value.length > 0);
+        },
+        onBlur: () => setTimeout(() => setOpen(false), 150),
+        placeholder: "Search by name or email\u2026",
+        autoComplete: "off"
+      }
+    ),
+    open && (filtered.length > 0 || query.length > 0) && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 w-full border border-border bg-popover shadow-md", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "No clients found." }) : filtered.map((c) => /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        className: "h-auto w-full flex-col items-start gap-0.5 px-3 py-2 text-left hover:bg-primary/5",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => {
+          onValueChange(c.id);
+          setQuery("");
+          setOpen(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: c.name }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: c.email })
+        ]
+      },
+      c.id
+    )) })
+  ] });
+}
+var FORMAT_OPTIONS = [
+  { value: "call", label: "Call", icon: /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4" }) },
+  {
+    value: "google-meet",
+    label: "Google Meet",
+    icon: /* @__PURE__ */ jsx(Video, { className: "h-4 w-4" })
+  },
+  {
+    value: "offline",
+    label: "Offline",
+    icon: /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4" })
+  }
+];
+function MeetingFormatSection({
+  format,
+  onFormatChange,
+  offlineLocation,
+  onOfflineLocationChange,
+  customAddress,
+  onCustomAddressChange,
+  advisorOfficeAddress,
+  clientHomeAddress,
+  isClientMode
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: FORMAT_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
+      Toggle,
+      {
+        variant: "outline",
+        pressed: format === opt.value,
+        onPressedChange: () => onFormatChange(opt.value),
+        className: "flex-1 gap-1.5",
+        children: [
+          opt.icon,
+          opt.label
+        ]
+      },
+      opt.value
+    )) }),
+    format === "offline" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border border-border p-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Location" }),
+      /* @__PURE__ */ jsxs(
+        RadioGroup,
+        {
+          value: offlineLocation,
+          onValueChange: (v) => onOfflineLocationChange(v),
+          className: "gap-2",
+          children: [
+            advisorOfficeAddress && /* @__PURE__ */ jsx(
+              RadioGroupCard,
+              {
+                value: "office",
+                label: "Advisor's Office",
+                description: advisorOfficeAddress
+              }
+            ),
+            clientHomeAddress && /* @__PURE__ */ jsx(
+              RadioGroupCard,
+              {
+                value: "home",
+                label: isClientMode ? "Home" : "Client's Home",
+                description: clientHomeAddress
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              RadioGroupCard,
+              {
+                value: "custom",
+                label: "Custom address",
+                description: "Enter a specific location"
+              }
+            )
+          ]
+        }
+      ),
+      offlineLocation === "custom" && /* @__PURE__ */ jsx(
+        AddressAutocomplete,
+        {
+          value: customAddress,
+          onValueChange: onCustomAddressChange,
+          placeholder: "e.g. 123 Collins St, Melbourne VIC 3000"
+        }
+      )
+    ] })
+  ] });
+}
+function AppointmentBookDialog({
+  open,
+  onOpenChange,
+  clients = [],
+  meetingTypes = [],
+  amSlots,
+  pmSlots,
+  schedule,
+  advisorOfficeAddress,
+  clientHomeAddress,
+  advisorInfo,
+  initialClientId,
+  onBook
+}) {
+  const isClientMode = clients.length === 0;
+  const DAY_MAP = {
+    Sun: 0,
+    Mon: 1,
+    Tue: 2,
+    Wed: 3,
+    Thu: 4,
+    Fri: 5,
+    Sat: 6
+  };
+  const disabledDayOfWeek = schedule == null ? void 0 : schedule.filter((d) => !d.enabled).map((d) => DAY_MAP[d.day]).filter((n) => n !== void 0);
+  const [clientId, setClientId] = React.useState(void 0);
+  const [meetingType, setMeetingType] = React.useState("");
+  const [meetingFormat, setMeetingFormat] = React.useState("call");
+  const [offlineLocation, setOfflineLocation] = React.useState(
+    advisorOfficeAddress ? "office" : "custom"
+  );
+  const [customAddress, setCustomAddress] = React.useState("");
+  const [date, setDate] = React.useState(/* @__PURE__ */ new Date());
+  const [selectedSlot, setSelectedSlot] = React.useState(void 0);
+  const [notes, setNotes] = React.useState("");
+  const [selectedPhone, setSelectedPhone] = React.useState(
+    void 0
+  );
+  const selectedClient = clients.find((c) => c.id === clientId);
+  React.useEffect(() => {
+    if (open && initialClientId) {
+      setClientId(initialClientId);
+    }
+  }, [open, initialClientId]);
+  React.useEffect(() => {
+    setSelectedPhone(void 0);
+  }, [clientId]);
+  React.useEffect(() => {
+    if (meetingFormat !== "call") {
+      setSelectedPhone(void 0);
+    }
+  }, [meetingFormat]);
+  const clientReady = isClientMode || !!clientId;
+  const meetingTypeReady = meetingTypes.length === 0 || !!meetingType;
+  const offlineReady = meetingFormat !== "offline" || offlineLocation !== "custom" || !!customAddress.trim();
+  const canSubmit = clientReady && meetingTypeReady && !!date && !!selectedSlot && offlineReady;
+  const handleOpenChange = (next) => {
+    if (!next) {
+      setClientId(void 0);
+      setMeetingType("");
+      setMeetingFormat("call");
+      setOfflineLocation(advisorOfficeAddress ? "office" : "custom");
+      setCustomAddress("");
+      setDate(/* @__PURE__ */ new Date());
+      setSelectedSlot(void 0);
+      setNotes("");
+      setSelectedPhone(void 0);
+    }
+    onOpenChange(next);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { size: "2xl", align: "top", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: isClientMode ? "Book an Appointment" : "New appointment" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: isClientMode ? "Request a meeting with your advisor. They will confirm once the appointment is reviewed." : "Book a meeting with a client. They will receive a confirmation email once the appointment is created." }),
+      isClientMode && advisorInfo && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-3 border border-border bg-muted/30 px-3 py-2", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8 shrink-0", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: advisorInfo.initials }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: advisorInfo.name }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: advisorInfo.role })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      !isClientMode && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: "Client" }),
+        /* @__PURE__ */ jsx(
+          ClientSearch,
+          {
+            clients,
+            value: clientId,
+            onValueChange: setClientId
+          }
+        )
+      ] }),
+      meetingTypes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "book-apt-type", children: isClientMode ? "Appointment type" : "Meeting type" }),
+        /* @__PURE__ */ jsxs(Select, { onValueChange: (v) => setMeetingType(v), children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { id: "book-apt-type", className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select meeting type\u2026" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: meetingTypes.map((t) => /* @__PURE__ */ jsx(SelectItem, { value: t, children: t }, t)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: "Meeting format" }),
+        /* @__PURE__ */ jsx(
+          MeetingFormatSection,
+          {
+            format: meetingFormat,
+            onFormatChange: setMeetingFormat,
+            offlineLocation,
+            onOfflineLocationChange: setOfflineLocation,
+            customAddress,
+            onCustomAddressChange: setCustomAddress,
+            advisorOfficeAddress,
+            clientHomeAddress,
+            isClientMode
+          }
+        )
+      ] }),
+      !isClientMode && meetingFormat === "call" && (selectedClient == null ? void 0 : selectedClient.phones) && selectedClient.phones.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { children: selectedClient.accountType === "Joint" ? "Select a contact number" : "Phone number" }),
+        /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            value: selectedPhone != null ? selectedPhone : "",
+            onValueChange: (v) => setSelectedPhone(v),
+            className: "gap-1 border border-border p-3",
+            children: selectedClient.phones.map((phone) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center gap-3 p-2 hover:bg-muted/50",
+                children: [
+                  /* @__PURE__ */ jsx(RadioGroupItem, { value: phone, id: `phone-${phone}` }),
+                  /* @__PURE__ */ jsxs(
+                    Label,
+                    {
+                      htmlFor: `phone-${phone}`,
+                      className: "flex cursor-pointer items-center gap-2 font-normal",
+                      children: [
+                        /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4 text-muted-foreground" }),
+                        phone
+                      ]
+                    }
+                  )
+                ]
+              },
+              phone
+            ))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] items-start gap-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { children: "Date" }),
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "single",
+              selected: date,
+              onSelect: (d) => {
+                setDate(d);
+                setSelectedSlot(void 0);
+              },
+              captionLayout: "label",
+              fromDate: /* @__PURE__ */ new Date(),
+              disabled: disabledDayOfWeek && disabledDayOfWeek.length > 0 ? [{ before: /* @__PURE__ */ new Date() }, { dayOfWeek: disabledDayOfWeek }] : { before: /* @__PURE__ */ new Date() },
+              className: "border border-border"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { children: "Time slot" }),
+          date ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: date.toLocaleDateString("en-AU", {
+              weekday: "long",
+              day: "numeric",
+              month: "long"
+            }) }),
+            /* @__PURE__ */ jsx(
+              AppointmentSlotSection,
+              {
+                label: "Morning",
+                slots: amSlots,
+                selectedSlotId: selectedSlot == null ? void 0 : selectedSlot.id,
+                onSelect: setSelectedSlot
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AppointmentSlotSection,
+              {
+                label: "Afternoon",
+                slots: pmSlots,
+                selectedSlotId: selectedSlot == null ? void 0 : selectedSlot.id,
+                onSelect: setSelectedSlot
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select a date to see available slots." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: "book-apt-notes", children: [
+          "Notes",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: "book-apt-notes",
+            placeholder: isClientMode ? "Let your advisor know what you'd like to discuss\u2026" : "e.g. Client wants to discuss refinancing their investment property\u2026",
+            value: notes,
+            onChange: (e) => setNotes(e.target.value),
+            className: "w-full resize-none",
+            rows: 2
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: !canSubmit,
+          onClick: () => {
+            if (canSubmit && date && selectedSlot) {
+              onBook == null ? void 0 : onBook({
+                clientId: clientId != null ? clientId : "",
+                meetingType,
+                date,
+                slot: selectedSlot,
+                notes,
+                meetingFormat,
+                offlineLocation: meetingFormat === "offline" ? offlineLocation : void 0,
+                customAddress: meetingFormat === "offline" && offlineLocation === "custom" ? customAddress : void 0,
+                callPhone: meetingFormat === "call" ? selectedPhone : void 0
+              });
+              handleOpenChange(false);
+            }
+          },
+          children: isClientMode ? "Book Appointment" : "Create appointment"
+        }
+      )
+    ] })
+  ] }) });
+}
+
+export {
+  AppointmentBookDialog
+};