@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/loan-wizard-shell.tsx

@@ -0,0 +1,235 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type LoanWizardSection = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type LoanWizardApplicantOption = {
+  id: string;
+  label: string;
+};
+
+export type LoanWizardShellProps = {
+  // Header
+  /** Broker logo / wordmark rendered in the top-left. */
+  logo?: React.ReactNode;
+  onSaveAndLogOut?: () => void;
+  /** Label for the primary header action. Defaults to "Login App". */
+  loginAppLabel?: string;
+  onLoginApp?: () => void;
+
+  // Hero
+  /** Application headline. Defaults to WealthX copy. */
+  heroTitle?: string;
+  heroSubtitle?: string;
+  /** Broker info block rendered on the right of the hero. */
+  brokerSlot?: React.ReactNode;
+
+  // Tab navigation
+  sections: LoanWizardSection[];
+  activeSection: string;
+  onSectionChange: (section: string) => void;
+
+  // Applicant switcher (optional — shows a Main / Co-Applicant toggle)
+  applicantOptions?: LoanWizardApplicantOption[];
+  activeApplicantId?: string;
+  onApplicantChange?: (id: string) => void;
+
+  // Content
+  children?: React.ReactNode;
+
+  // Bottom navigation
+  onPrev?: () => void;
+  onNext?: () => void;
+  nextLabel?: string;
+
+  className?: string;
+};
+
+export type { LoanWizardSection as LoanWizardSectionItem };
+export type { LoanWizardApplicantOption as LoanWizardApplicant };
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function LoanWizardShell({
+  logo,
+  onSaveAndLogOut,
+  loginAppLabel = "Login App",
+  onLoginApp,
+  heroTitle = "Quick Online Application,\nThat Get's You Answers Fast!",
+  heroSubtitle = "(This does not effect your credit score)",
+  brokerSlot,
+  sections,
+  activeSection,
+  onSectionChange,
+  applicantOptions,
+  activeApplicantId,
+  onApplicantChange,
+  children,
+  onPrev,
+  onNext,
+  nextLabel = "Next",
+  className,
+}: LoanWizardShellProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-screen flex-col bg-background font-sans",
+        className,
+      )}
+    >
+      {/* ── Header ── */}
+      <header className="flex shrink-0 items-center justify-between border-b border-border px-4 py-4 sm:px-8 sm:py-5 lg:px-[200px]">
+        <div className="flex items-center">{logo}</div>
+        <div className="flex items-center gap-3">
+          {onSaveAndLogOut && (
+            <Button variant="outline" size="sm" onClick={onSaveAndLogOut}>
+              Save &amp; Log Out
+            </Button>
+          )}
+          {onLoginApp && (
+            <Button size="sm" onClick={onLoginApp}>
+              {loginAppLabel}
+            </Button>
+          )}
+        </div>
+      </header>
+
+      {/* ── Hero ── */}
+      <div className="flex shrink-0 items-center justify-between px-4 py-8 sm:px-8 sm:py-12 lg:px-[200px]">
+        <div className="flex flex-col gap-2">
+          <h1 className="text-2xl font-bold text-foreground lg:text-[38px] lg:leading-tight">
+            {heroTitle.split("\n").map((line, i) => (
+              <React.Fragment key={i}>
+                {line}
+                {i < heroTitle.split("\n").length - 1 && <br />}
+              </React.Fragment>
+            ))}
+          </h1>
+          {heroSubtitle && (
+            <p className="text-sm text-muted-foreground">{heroSubtitle}</p>
+          )}
+          <div className="mt-2 h-[3px] w-24 bg-primary" />
+        </div>
+        {brokerSlot && <div className="hidden lg:flex">{brokerSlot}</div>}
+      </div>
+
+      {/* ── Tab navigation ── */}
+      <div className="shrink-0 px-4 sm:px-8 lg:px-[200px]">
+        <div className="flex items-end gap-0 border-b border-border">
+          {sections.map((s) => (
+            <button
+              key={s.value}
+              type="button"
+              disabled={s.disabled}
+              onClick={() => onSectionChange(s.value)}
+              className={cn(
+                "px-3 py-1 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                s.value === activeSection
+                  ? "border-b-[3px] border-primary font-semibold text-foreground"
+                  : "text-muted-foreground hover:text-foreground disabled:pointer-events-none disabled:opacity-40",
+              )}
+            >
+              {s.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* ── Content area ── */}
+      <div className="flex flex-1 flex-col gap-6 px-4 pb-10 pt-6 sm:px-8 sm:pb-16 sm:pt-10 lg:px-[200px]">
+        {/* Applicant switcher */}
+        {applicantOptions && applicantOptions.length > 1 && (
+          <Tabs
+            value={activeApplicantId}
+            onValueChange={onApplicantChange}
+            className="w-fit"
+          >
+            <TabsList>
+              {applicantOptions.map((opt) => (
+                <TabsTrigger key={opt.id} value={opt.id}>
+                  {opt.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+        )}
+
+        {/* sr-only h2 establishes heading hierarchy: h1 (hero) → h2 (section) → h3 (organisms) */}
+        <h2 className="sr-only">
+          {sections.find((s) => s.value === activeSection)?.label}
+        </h2>
+
+        {/* Section content — constrained to ~628px matching design */}
+        <div className="w-full max-w-[628px]">{children}</div>
+      </div>
+
+      {/* ── Bottom navigation ── */}
+      {(onPrev || onNext) && (
+        <div className="shrink-0 px-4 pb-6 sm:px-8 sm:pb-10 lg:px-[200px]">
+          <div className="flex max-w-[628px] items-center justify-between border-t border-border pt-6">
+            {onPrev ? (
+              <Button variant="outline" onClick={onPrev}>
+                <ChevronLeftIcon className="mr-1 size-4" />
+                Previous
+              </Button>
+            ) : (
+              <span />
+            )}
+            {onNext && (
+              <Button variant="outline" onClick={onNext}>
+                {nextLabel}
+                <ChevronRightIcon className="ml-1 size-4" />
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Icons ────────────────────────────────────────────────────────────────────
+
+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/money-input-with-slider.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { formatCurrency, formatCurrencyAbbrev } from "@/lib/format-currency";
+import { Slider } from "./slider";
+
+/**
+ * A labeled slider molecule for selecting a dollar amount within a range.
+ *
+ * Layout (top-to-bottom):
+ * - Label (left) + current value (right)
+ * - Slider track + thumb
+ * - Min label (left) + max label (right) — abbreviated currency
+ *
+ * Used in the Borrowing Capacity page for inputs like interest rate, purchase
+ * price range, or LVR settings where a slider gives better UX than a bare text
+ * input.
+ */
+
+export interface MoneyInputWithSliderProps {
+  /** Label shown above the slider (e.g. "Purchase Price") */
+  label: string;
+  /** Current value in whole dollars */
+  value: number;
+  /** Minimum selectable value in whole dollars */
+  min: number;
+  /** Maximum selectable value in whole dollars */
+  max: number;
+  /** Step size in dollars (default: 1000) */
+  step?: number;
+  /** Called on every slider change with the new dollar value */
+  onChange?: (value: number) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function MoneyInputWithSlider({
+  label,
+  value,
+  min,
+  max,
+  step = 1000,
+  onChange,
+  disabled = false,
+  className,
+}: MoneyInputWithSliderProps) {
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {/* Label row */}
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-sm text-muted-foreground">{label}</span>
+        <span className="text-sm font-semibold tabular-nums text-foreground">
+          {formatCurrency(value)}
+        </span>
+      </div>
+
+      {/* Slider */}
+      <Slider
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        onValueChange={onChange}
+      />
+
+      {/* Min / max labels */}
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-muted-foreground">
+          {formatCurrencyAbbrev(min)}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {formatCurrencyAbbrev(max)}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/money-item-with-color-indicator.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { EditableMoneyItem } from "./editable-money-item";
+
+/**
+ * A read-only variant of `EditableMoneyItem` — same swatch + label + tooltip
+ * layout, but without the pencil edit trigger.
+ *
+ * The pencil slot is still reserved (invisible) so value text stays
+ * column-aligned when mixed with editable rows in the same list.
+ */
+
+export interface MoneyItemWithColorIndicatorProps {
+  /** Row label (e.g. "Surplus Income") */
+  label: string;
+  /** Pre-formatted value string (e.g. "$2,400") */
+  value: string;
+  /** CSS color used for the swatch border and tinted fill */
+  color: string;
+  /** Fill opacity for the swatch background (default: 0.4) */
+  fillOpacity?: number;
+  /** Optional tooltip text shown on the info icon */
+  tooltip?: string;
+  className?: string;
+}
+
+export function MoneyItemWithColorIndicator(
+  props: MoneyItemWithColorIndicatorProps,
+) {
+  return <EditableMoneyItem {...props} />;
+}

package/src/components/ui/opportunity-card.tsx

@@ -29,6 +29,12 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { TaskCheckItem } from "@/components/ui/pipeline-primitives";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 /**
  * OpportunityCard — WealthX DS (L3 Card)
@@ -104,6 +110,8 @@ export interface OpportunityCardProps {
   loanApplicationUrl?: string;
 
   // ── Actions ──────────────────────────────────────────────────
+  /** Fires when clicking the non-interactive card body (e.g. to open the summary drawer). */
+  onCardClick?: () => void;
   onViewDetails?: () => void;
   onTaskToggle?: (taskId: string) => void;
   onMarkAsDone?: () => void;
@@ -115,6 +123,9 @@ export interface OpportunityCardProps {
 
   /** Shows a loading state on action buttons while an async op is in flight. */
   isSubmitting?: boolean;
+  /** Whether the card is draggable (HTML5 native DnD). */
+  draggable?: boolean;
+  onDragStart?: React.DragEventHandler<HTMLDivElement>;
   className?: string;
 }
 
@@ -151,7 +162,6 @@ function resolvePriority(
   return priority;
 }
 
-
 function formatLoanType(type: string): string {
   return type
     .split("-")
@@ -180,6 +190,7 @@ export function OpportunityCard({
   isModifyCompletedLoan,
   tasks = [],
   nextTask,
+  onCardClick,
   onViewDetails,
   onTaskToggle,
   onMarkAsDone,
@@ -189,6 +200,8 @@ export function OpportunityCard({
   onDelete,
   onPutOnHold,
   isSubmitting = false,
+  draggable = false,
+  onDragStart,
   className,
 }: OpportunityCardProps) {
   const resolvedPriority = resolvePriority(
@@ -205,14 +218,21 @@ export function OpportunityCard({
   const hasActions = onMarkAsDone || onMoveToNextStage;
   const hasMenu = onViewDetails || onChangePriority || onPutOnHold || onDelete;
 
+  const stopProp = (e: React.MouseEvent) => e.stopPropagation();
+
   return (
     <div
       className={cn(
         "flex flex-col gap-2 border border-border bg-background p-4 text-foreground shadow-sm",
+        onCardClick && "cursor-pointer",
+        draggable && "cursor-grab active:cursor-grabbing",
         isSubmitting && "opacity-60",
         className,
       )}
       data-slot="opportunity-card"
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onClick={onCardClick}
     >
       {/* ── On-hold banner ── */}
       {onHoldTo && (
@@ -248,19 +268,25 @@ export function OpportunityCard({
           </span>
         </div>
 
-        <div className="flex items-center gap-1 -mr-1 -mt-1">
+        <div className="flex items-center gap-1 -mr-1 -mt-1" onClick={stopProp}>
           {onLaunchAssistant && (
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="size-7 shrink-0"
-              onClick={onLaunchAssistant}
-              aria-label="Launch AI Assistant"
-              title="Launch AI Assistant"
-            >
-              <Bot className="size-4" />
-            </Button>
+            <TooltipProvider delay={0}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-7 shrink-0"
+                    onClick={onLaunchAssistant}
+                    aria-label="Launch AI"
+                  >
+                    <Bot className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Launch AI</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           )}
           {hasMenu && (
             <DropdownMenu>
@@ -374,7 +400,8 @@ export function OpportunityCard({
 
       {/* ── Tasks: segmented progress bar + animated accordion ── */}
       {hasTasks && (
-        <>
+        // stopPropagation: accordion expand/collapse + task checkboxes must not bubble to onCardClick
+        <div onClick={stopProp}>
           {/* Segmented bar — one segment per task, filled = completed */}
           <div
             className="flex gap-0.5"
@@ -431,15 +458,16 @@ export function OpportunityCard({
               <span className="text-muted-foreground">{nextTask}</span>
             </div>
           )}
-        </>
+        </div>
       )}
 
       {/* ── Action buttons ── */}
       {hasActions && (
-        <>
+        // stopPropagation: button clicks must not bubble to onCardClick
+        <div onClick={stopProp}>
           <Separator />
           {(onMoveToNextStage || onMarkAsDone) && (
-            <div className="flex gap-2">
+            <div className="flex gap-2 pt-2">
               {onMoveToNextStage && (
                 <Button
                   variant="outline"
@@ -464,7 +492,7 @@ export function OpportunityCard({
               )}
             </div>
           )}
-        </>
+        </div>
       )}
     </div>
   );

package/src/components/ui/pipeline-board.tsx

@@ -83,6 +83,13 @@ export interface PipelineBoardProps {
   onRefresh?: () => void;
 
   // ── Card callbacks ───────────────────────────────────────────
+  /**
+   * Fires when a card is dragged from one column and dropped into another.
+   * The app is responsible for updating `columns` accordingly.
+   */
+  onMoveCard?: (cardId: string, toColumnKey: string) => void;
+  /** Fires when clicking the non-interactive card body. */
+  onCardClick?: (opportunityId: string) => void;
   onTaskToggle?: (opportunityId: string, taskId: string) => void;
   onMarkAsDone?: (opportunityId: string) => void;
   onMoveToNextStage?: (opportunityId: string) => void;
@@ -196,6 +203,8 @@ export function PipelineBoard({
   onRefresh,
   onEditColumn,
   onDeleteColumn,
+  onMoveCard,
+  onCardClick,
   onTaskToggle,
   onMarkAsDone,
   onMoveToNextStage,
@@ -249,6 +258,10 @@ export function PipelineBoard({
                 ? () => onDeleteColumn(col.stage.id)
                 : undefined
             }
+            onCardDrop={
+              onMoveCard ? (cardId) => onMoveCard(cardId, col.key) : undefined
+            }
+            onCardClick={onCardClick}
             onTaskToggle={onTaskToggle}
             onMarkAsDone={onMarkAsDone}
             onMoveToNextStage={onMoveToNextStage}

package/src/components/ui/pipeline-primitives.tsx

@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
 
 /**
  * Pipeline domain primitives — WealthX DS
@@ -26,6 +27,14 @@ export interface TaskCheckItemProps {
   completed: boolean;
   /** Name of the AI agent assigned to this task, if any. */
   aiAgentName?: string | null;
+  /**
+   * When `aiAgentName` is set and this prop is provided (true/false),
+   * a "Allow Agent to Auto Complete" switch is shown beneath the agent badge.
+   * Omit this prop to hide the switch entirely.
+   */
+  autoCompleteEnabled?: boolean;
+  /** Called when the auto-complete switch is toggled. */
+  onAutoCompleteToggle?: () => void;
   /** Called when the checkbox is toggled. */
   onToggle?: () => void;
   /** Disables interaction (e.g. while saving). */
@@ -55,6 +64,8 @@ export function TaskCheckItem({
   title,
   completed,
   aiAgentName,
+  autoCompleteEnabled,
+  onAutoCompleteToggle,
   onToggle,
   disabled = false,
   size = "xs",
@@ -102,6 +113,23 @@ export function TaskCheckItem({
             {aiAgentName}
           </Badge>
         )}
+        {aiAgentName && autoCompleteEnabled !== undefined && (
+          <span
+            className="flex items-center gap-1.5"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Switch
+              checked={autoCompleteEnabled}
+              onCheckedChange={() => onAutoCompleteToggle?.()}
+              disabled={disabled}
+              className="scale-75 origin-left"
+              aria-label="Allow agent to auto complete"
+            />
+            <span className="text-[10px] text-muted-foreground">
+              Allow Agent to Auto Complete
+            </span>
+          </span>
+        )}
       </span>
     </div>
   );