@wealthx/shadcn 1.4.0 → 1.5.0

package/src/components/ui/applicant-expenses-section.tsx

@@ -0,0 +1,260 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { formatCurrency } from "@/lib/format-currency";
+
+export type ExpenseCategoryData = {
+  label: string;
+  color: string;
+  monthlyAmounts: number[];
+};
+
+export type ApplicantExpensesSectionProps = {
+  applicantName: string;
+  /** Three states: loading, access granted, access not granted. */
+  state: "loading" | "connected" | "pending-access";
+  /** Last 12 month labels (e.g. "Jan", "Feb" …). Required when state = "connected". */
+  monthLabels?: string[];
+  /** Per-category breakdown. Required when state = "connected". */
+  categories?: ExpenseCategoryData[];
+  /** Total spend over the loaded period. */
+  totalAmount?: number;
+  onConnectMore?: () => void;
+  onAddManually?: () => void;
+  onSendRequest?: () => void;
+  className?: string;
+};
+
+export function ApplicantExpensesSection({
+  applicantName,
+  state,
+  monthLabels = [],
+  categories = [],
+  totalAmount = 0,
+  onConnectMore,
+  onAddManually,
+  onSendRequest,
+  className,
+}: ApplicantExpensesSectionProps) {
+  return (
+    <div className={cn("flex flex-col gap-4 font-sans", className)}>
+      <h3 className="text-sm font-semibold text-foreground">
+        {applicantName}&apos;s Expenses
+      </h3>
+
+      {state === "loading" && <LoadingState />}
+
+      {state === "connected" && (
+        <ConnectedState
+          monthLabels={monthLabels}
+          categories={categories}
+          totalAmount={totalAmount}
+          onConnectMore={onConnectMore}
+          onAddManually={onAddManually}
+        />
+      )}
+
+      {state === "pending-access" && (
+        <PendingAccessState
+          applicantName={applicantName}
+          onSendRequest={onSendRequest}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Sub-states ───────────────────────────────────────────────────────────────
+
+function LoadingState() {
+  return (
+    <div className="flex h-48 items-center justify-center border border-border bg-muted/30">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <SpinnerIcon className="size-4 animate-spin" />
+        Loading banking data…
+      </div>
+    </div>
+  );
+}
+
+function ConnectedState({
+  monthLabels,
+  categories,
+  totalAmount,
+  onConnectMore,
+  onAddManually,
+}: {
+  monthLabels: string[];
+  categories: ExpenseCategoryData[];
+  totalAmount: number;
+  onConnectMore?: () => void;
+  onAddManually?: () => void;
+}) {
+  const maxValue = Math.max(
+    ...monthLabels.map((_, mi) =>
+      categories.reduce((sum, cat) => sum + (cat.monthlyAmounts[mi] ?? 0), 0),
+    ),
+    1,
+  );
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="flex flex-col gap-0.5">
+          <span className="text-title-medium font-semibold text-foreground">
+            {formatCurrency(totalAmount)}
+          </span>
+          <span className="text-xs text-muted-foreground">
+            Total latest 12 months
+          </span>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Button size="sm" onClick={onConnectMore}>
+            Connect More Accounts
+          </Button>
+          {onAddManually && (
+            <Button size="sm" variant="outline" onClick={onAddManually}>
+              Add Manually
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Mini stacked bar chart */}
+      {monthLabels.length > 0 && categories.length > 0 && (
+        <div className="overflow-x-auto">
+          <div className="flex min-w-0 items-end gap-1">
+            {monthLabels.map((month, mi) => {
+              const colTotal = categories.reduce(
+                (sum, cat) => sum + (cat.monthlyAmounts[mi] ?? 0),
+                0,
+              );
+              const heightPct = (colTotal / maxValue) * 100;
+              return (
+                <div
+                  key={month}
+                  className="flex flex-1 flex-col items-center gap-1"
+                >
+                  <div
+                    className="flex w-full flex-col-reverse overflow-hidden"
+                    style={{ height: 80 }}
+                    title={`${month}: ${formatCurrency(colTotal)}`}
+                  >
+                    <div
+                      className="flex w-full flex-col-reverse"
+                      style={{ height: `${heightPct}%` }}
+                    >
+                      {categories.map((cat) => {
+                        const segPct =
+                          colTotal > 0
+                            ? ((cat.monthlyAmounts[mi] ?? 0) / colTotal) * 100
+                            : 0;
+                        return (
+                          <div
+                            key={cat.label}
+                            style={{
+                              height: `${segPct}%`,
+                              backgroundColor: cat.color,
+                            }}
+                          />
+                        );
+                      })}
+                    </div>
+                  </div>
+                  <span className="text-[10px] text-muted-foreground">
+                    {month}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Legend */}
+      {categories.length > 0 && (
+        <div className="flex flex-wrap gap-3">
+          {categories.map((cat) => (
+            <div key={cat.label} className="flex items-center gap-1.5">
+              <div
+                className="size-2.5 shrink-0"
+                style={{ backgroundColor: cat.color }}
+              />
+              <span className="text-xs text-muted-foreground">{cat.label}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PendingAccessState({
+  applicantName,
+  onSendRequest,
+}: {
+  applicantName: string;
+  onSendRequest?: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-4 border border-border py-10 text-center">
+      <LockIcon className="size-8 text-muted-foreground" />
+      <div className="flex flex-col gap-1">
+        <p className="text-sm font-medium text-foreground">
+          Requires access to banking data
+        </p>
+        <p className="text-xs text-muted-foreground">
+          Send {applicantName} an invitation to connect their bank accounts.
+        </p>
+      </div>
+      <Button onClick={onSendRequest}>Send request to {applicantName}</Button>
+    </div>
+  );
+}
+
+// ─── Icons ────────────────────────────────────────────────────────────────────
+
+function SpinnerIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      className={className}
+      aria-hidden="true"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+  );
+}
+
+function LockIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <rect x="3" y="11" width="18" height="11" rx="0" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </svg>
+  );
+}

package/src/components/ui/applicant-navigation-bar.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+export type ApplicantNavigationBarApplicant = {
+  name: string;
+};
+
+export type ApplicantNavigationBarProps = {
+  applicants: ApplicantNavigationBarApplicant[];
+  currentIndex: number;
+  /** Ordered list of applicant indices to navigate between. */
+  displayOrder?: number[];
+  onPrev?: () => void;
+  onNext?: () => void;
+  /** Called when there is no next applicant (last in order). */
+  onSaveAndNext?: () => void;
+  saveLabel?: string;
+  className?: string;
+};
+
+export function ApplicantNavigationBar({
+  applicants,
+  currentIndex,
+  displayOrder,
+  onPrev,
+  onNext,
+  onSaveAndNext,
+  saveLabel = "Save & Next",
+  className,
+}: ApplicantNavigationBarProps) {
+  const order = displayOrder ?? applicants.map((_, i) => i);
+  const position = order.indexOf(currentIndex);
+  const pos = position >= 0 ? position : 0;
+  const isFirst = pos === 0;
+  const isLast = pos === order.length - 1;
+  const hasMultiple = applicants.length > 1;
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between pt-6 font-sans",
+        className,
+      )}
+    >
+      {hasMultiple && !isFirst ? (
+        <Button variant="outline" onClick={onPrev}>
+          <ChevronLeftIcon className="mr-1 size-4" />
+          Previous
+        </Button>
+      ) : (
+        <span />
+      )}
+
+      {hasMultiple && !isLast ? (
+        <Button variant="outline" onClick={onNext}>
+          Next
+          <ChevronRightIcon className="ml-1 size-4" />
+        </Button>
+      ) : (
+        <Button onClick={onSaveAndNext}>
+          {saveLabel}
+          <ChevronRightIcon className="ml-1 size-4" />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function ChevronLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}

package/src/components/ui/applicant-switcher.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+/**
+ * Segmented toggle bar for switching between the main applicant and
+ * co-applicant(s) in the loan wizard. Returns null when fewer than 2
+ * applicants are present.
+ */
+
+export type ApplicantSwitcherApplicant = {
+  name: string;
+};
+
+export type ApplicantSwitcherProps = {
+  applicants: ApplicantSwitcherApplicant[];
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+  className?: string;
+};
+
+export function ApplicantSwitcher({
+  applicants,
+  selectedIndex,
+  onSelect,
+  className,
+}: ApplicantSwitcherProps) {
+  if (!applicants || applicants.length <= 1) return null;
+
+  return (
+    <div
+      className={cn("flex w-fit items-center", className)}
+      role="group"
+      aria-label="Select applicant"
+    >
+      {applicants.map((applicant, index) => (
+        <Button
+          key={index}
+          type="button"
+          variant={selectedIndex === index ? "default" : "outline"}
+          onClick={() => onSelect(index)}
+          aria-pressed={selectedIndex === index}
+          className={cn(
+            "rounded-none",
+            // Remove left border on non-first items to create a joined look
+            index > 0 && "-ml-px",
+          )}
+        >
+          {applicant.name}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/application-mobile-layout.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Outer responsive shell for multi-step application flows (e.g. Loan Application).
+ *
+ * - Mobile (< md): full-screen, no extra padding — content fills the viewport.
+ * - Desktop (≥ md): wraps content in a centered max-width card so the flow
+ *   doesn't stretch across a wide screen.
+ *
+ * Compose inside this wrapper, then place OnboardingLayout (or similar) as the child.
+ */
+export interface ApplicationMobileLayoutProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function ApplicationMobileLayout({
+  children,
+  className,
+}: ApplicationMobileLayoutProps) {
+  return (
+    <div
+      className={cn(
+        "min-h-screen bg-background font-sans",
+        // On desktop, center and cap the width so it doesn't span the full screen
+        "md:flex md:items-start md:justify-center md:py-8",
+        className,
+      )}
+    >
+      <div className="w-full md:max-w-2xl">{children}</div>
+    </div>
+  );
+}

package/src/components/ui/appointment-availability-settings.tsx

@@ -44,6 +44,11 @@ export interface AppointmentAvailabilityPrefs {
   maxSlotsPerDay: string;
   /** IANA timezone identifier — e.g. "Australia/Sydney" */
   timezone: string;
+  /**
+   * Online meeting platform brokers require clients to use.
+   * "any" means the client can choose between Google Meet and Microsoft Teams.
+   */
+  defaultMeetingPlatform?: "google-meet" | "microsoft-teams" | "any";
 }
 
 export interface AppointmentBlockedDate {
@@ -117,6 +122,44 @@ export const TIMEZONE_OPTIONS: { value: string; label: string }[] = [
   { value: "UTC", label: "UTC" },
 ];
 
+export const MEETING_PLATFORM_OPTIONS: {
+  value: "google-meet" | "microsoft-teams" | "any";
+  label: string;
+}[] = [
+  { value: "google-meet", label: "Google Meet" },
+  { value: "microsoft-teams", label: "Microsoft Teams" },
+  { value: "any", label: "Let client choose" },
+];
+
+const MEETING_DURATION_OPTIONS: { value: string; label: string }[] = [
+  { value: "15", label: "15 minutes" },
+  { value: "30", label: "30 minutes" },
+  { value: "45", label: "45 minutes" },
+  { value: "60", label: "60 minutes" },
+  { value: "90", label: "90 minutes" },
+];
+
+const SCHEDULING_BUFFER_OPTIONS: { value: string; label: string }[] = [
+  { value: "0", label: "No buffer" },
+  { value: "5", label: "5 minutes" },
+  { value: "10", label: "10 minutes" },
+  { value: "15", label: "15 minutes" },
+  { value: "30", label: "30 minutes" },
+];
+
+const MAX_SLOTS_OPTIONS: { value: string; label: string }[] = [
+  { value: "2", label: "2 per day" },
+  { value: "4", label: "4 per day" },
+  { value: "6", label: "6 per day" },
+  { value: "8", label: "8 per day" },
+  { value: "10", label: "10 per day" },
+  { value: "unlimited", label: "Unlimited" },
+];
+
+/** Map a Base UI SelectValue `v` to its display label from an options array. */
+const selectLabel = (opts: { value: string; label: string }[], v: unknown) =>
+  opts.find((o) => o.value === String(v))?.label ?? String(v ?? "");
+
 // 30-min increments from 06:00 to 21:30
 const TIME_OPTIONS: { value: string; label: string }[] = (() => {
   const opts: { value: string; label: string }[] = [];
@@ -249,7 +292,7 @@ function AddTimeOffDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent size="auto" minWidth="26rem" align="top">
+      <DialogContent size="auto" minWidth="26rem">
         <DialogHeader>
           <DialogTitle>Add time off</DialogTitle>
           <DialogDescription>
@@ -349,6 +392,9 @@ export function AppointmentAvailabilitySettings({
   const [timezone, setTimezone] = React.useState(
     prefsProp?.timezone ?? "Australia/Sydney",
   );
+  const [defaultMeetingPlatform, setDefaultMeetingPlatform] = React.useState<
+    "google-meet" | "microsoft-teams" | "any"
+  >(prefsProp?.defaultMeetingPlatform ?? "any");
 
   const [timeOffEntries, setTimeOffEntries] = React.useState<TimeOffEntry[]>(
     () => {
@@ -384,8 +430,20 @@ export function AppointmentAvailabilitySettings({
   // ---------------------------------------------------------------------------
 
   const currentPrefs = React.useMemo(
-    () => ({ meetingDuration, schedulingBuffer, maxSlotsPerDay, timezone }),
-    [meetingDuration, schedulingBuffer, maxSlotsPerDay, timezone],
+    () => ({
+      meetingDuration,
+      schedulingBuffer,
+      maxSlotsPerDay,
+      timezone,
+      defaultMeetingPlatform,
+    }),
+    [
+      meetingDuration,
+      schedulingBuffer,
+      maxSlotsPerDay,
+      timezone,
+      defaultMeetingPlatform,
+    ],
   );
 
   const saveGuard = React.useRef(false);
@@ -535,14 +593,16 @@ export function AppointmentAvailabilitySettings({
                 onValueChange={(v) => setMeetingDuration(v as string)}
               >
                 <SelectTrigger className="w-40">
-                  <SelectValue />
+                  <SelectValue>
+                    {(v) => selectLabel(MEETING_DURATION_OPTIONS, v)}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="15">15 minutes</SelectItem>
-                  <SelectItem value="30">30 minutes</SelectItem>
-                  <SelectItem value="45">45 minutes</SelectItem>
-                  <SelectItem value="60">60 minutes</SelectItem>
-                  <SelectItem value="90">90 minutes</SelectItem>
+                  {MEETING_DURATION_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </PrefRow>
@@ -556,14 +616,16 @@ export function AppointmentAvailabilitySettings({
                 onValueChange={(v) => setSchedulingBuffer(v as string)}
               >
                 <SelectTrigger className="w-40">
-                  <SelectValue />
+                  <SelectValue>
+                    {(v) => selectLabel(SCHEDULING_BUFFER_OPTIONS, v)}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="0">No buffer</SelectItem>
-                  <SelectItem value="5">5 minutes</SelectItem>
-                  <SelectItem value="10">10 minutes</SelectItem>
-                  <SelectItem value="15">15 minutes</SelectItem>
-                  <SelectItem value="30">30 minutes</SelectItem>
+                  {SCHEDULING_BUFFER_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </PrefRow>
@@ -577,15 +639,16 @@ export function AppointmentAvailabilitySettings({
                 onValueChange={(v) => setMaxSlotsPerDay(v as string)}
               >
                 <SelectTrigger className="w-40">
-                  <SelectValue />
+                  <SelectValue>
+                    {(v) => selectLabel(MAX_SLOTS_OPTIONS, v)}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="2">2 per day</SelectItem>
-                  <SelectItem value="4">4 per day</SelectItem>
-                  <SelectItem value="6">6 per day</SelectItem>
-                  <SelectItem value="8">8 per day</SelectItem>
-                  <SelectItem value="10">10 per day</SelectItem>
-                  <SelectItem value="unlimited">Unlimited</SelectItem>
+                  {MAX_SLOTS_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </PrefRow>
@@ -599,7 +662,9 @@ export function AppointmentAvailabilitySettings({
                 onValueChange={(v) => setTimezone(v as string)}
               >
                 <SelectTrigger className="w-56">
-                  <SelectValue />
+                  <SelectValue>
+                    {(v) => selectLabel(TIMEZONE_OPTIONS, v)}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   {TIMEZONE_OPTIONS.map((opt) => (
@@ -610,6 +675,33 @@ export function AppointmentAvailabilitySettings({
                 </SelectContent>
               </Select>
             </PrefRow>
+
+            <PrefRow
+              label="Default Meeting Platform"
+              description="Online meeting platform clients must use when booking"
+            >
+              <Select
+                value={defaultMeetingPlatform}
+                onValueChange={(v) =>
+                  setDefaultMeetingPlatform(
+                    v as "google-meet" | "microsoft-teams" | "any",
+                  )
+                }
+              >
+                <SelectTrigger className="w-48">
+                  <SelectValue>
+                    {(v) => selectLabel(MEETING_PLATFORM_OPTIONS, v)}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {MEETING_PLATFORM_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </PrefRow>
           </div>
         </TabsContent>