@wealthx/shadcn 1.4.0 → 1.5.0

package/src/components/ui/signup-shell.tsx

@@ -0,0 +1,180 @@
+import React from "react";
+import { Stepper, Step, StepItem } from "./stepper";
+
+const DEFAULT_VIDEO_SRC =
+  "https://d1rndq5v7rs3ry.cloudfront.net/padua-landing-video.mp4";
+
+// ---------------------------------------------------------------------------
+// SignupVideoPanel
+// ---------------------------------------------------------------------------
+
+export interface SignupVideoPanelProps {
+  /** Defaults to WealthX CDN landing video. */
+  videoSrc?: string;
+}
+
+export function SignupVideoPanel({
+  videoSrc = DEFAULT_VIDEO_SRC,
+}: SignupVideoPanelProps) {
+  return (
+    <div className="hidden @md:block relative bg-neutral-900 overflow-hidden">
+      <video
+        autoPlay
+        muted
+        loop
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+      >
+        <source src={videoSrc} type="video/mp4" />
+      </video>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// SignupShell — backoffice signup wizard layout
+// ---------------------------------------------------------------------------
+
+export interface SignupShellProps {
+  /** Ordered list of step labels used by the stepper and h2 heading. */
+  steps: string[];
+  /** 0-based active step index. When >= steps.length the success layout is shown. */
+  step: number;
+  children: React.ReactNode;
+  /** Sticky footer content (Prev/Next buttons). Hidden in success state. */
+  footer?: React.ReactNode;
+  videoSrc?: string;
+  /** Page heading above the stepper. Defaults to "Sign Up". */
+  title?: string;
+}
+
+export function SignupShell({
+  steps,
+  step,
+  children,
+  footer,
+  videoSrc,
+  title = "Sign Up",
+}: SignupShellProps) {
+  const isSuccess = step >= steps.length;
+
+  return (
+    <div className="@md:grid @md:grid-cols-2 h-screen overflow-hidden">
+      <SignupVideoPanel videoSrc={videoSrc} />
+      <div className="flex flex-col h-full overflow-hidden">
+        {isSuccess ? (
+          <div className="flex-1 overflow-y-auto min-h-0 flex items-center justify-center">
+            {children}
+          </div>
+        ) : (
+          <>
+            <div className="flex-1 overflow-y-auto min-h-0">
+              <div className="flex min-h-full justify-center px-4 py-6 @sm:px-10 @sm:py-10">
+                <div className="w-full max-w-[560px] flex flex-col gap-8">
+                  <h1 className="text-3xl font-bold text-foreground text-center">
+                    {title}
+                  </h1>
+                  <Stepper activeStep={step} className="w-full">
+                    {steps.map((label) => (
+                      <Step key={label}>
+                        <StepItem label={label} />
+                      </Step>
+                    ))}
+                  </Stepper>
+                  <h2 className="text-2xl font-bold text-foreground">
+                    {steps[step]}
+                  </h2>
+                  {children}
+                </div>
+              </div>
+            </div>
+            {footer && (
+              <div className="shrink-0 border-t border-border bg-background">
+                <div className="w-full max-w-[560px] mx-auto px-0 py-4 flex justify-between">
+                  {footer}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FrontendShell — client-facing signup wizard layout
+// ---------------------------------------------------------------------------
+
+export interface FrontendShellProps {
+  /** Step labels for the stepper. Required when stepIndex is provided. */
+  steps?: string[];
+  /** 0-based active step. When undefined the stepper is hidden. */
+  stepIndex?: number;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  /** When true renders a centered layout without stepper/title (success screen). */
+  isSuccess?: boolean;
+  videoSrc?: string;
+  /** Page heading. Defaults to "Create Account". */
+  title?: string;
+}
+
+export function FrontendShell({
+  steps,
+  stepIndex,
+  children,
+  footer,
+  isSuccess = false,
+  videoSrc,
+  title = "Create Account",
+}: FrontendShellProps) {
+  const hasStepper = stepIndex !== undefined && steps !== undefined;
+
+  return (
+    <div className="@md:grid @md:grid-cols-2 h-screen overflow-hidden">
+      <SignupVideoPanel videoSrc={videoSrc} />
+      <div className="flex flex-col h-full overflow-hidden">
+        {isSuccess ? (
+          <div className="flex-1 overflow-y-auto min-h-0 flex items-center justify-center">
+            {children}
+          </div>
+        ) : (
+          <>
+            <div className="flex-1 overflow-y-auto min-h-0">
+              <div className="flex min-h-full justify-center px-4 py-6 @sm:px-10 @sm:py-10">
+                <div className="w-full max-w-[520px] flex flex-col gap-8">
+                  <h1 className="text-3xl font-bold text-foreground text-center">
+                    {title}
+                  </h1>
+                  {hasStepper && (
+                    <Stepper activeStep={stepIndex} className="w-full">
+                      {steps!.map((label) => (
+                        <Step key={label}>
+                          <StepItem label={label} />
+                        </Step>
+                      ))}
+                    </Stepper>
+                  )}
+                  {hasStepper && (
+                    <h2 className="text-2xl font-bold text-foreground">
+                      {steps![stepIndex!]}
+                    </h2>
+                  )}
+                  {children}
+                </div>
+              </div>
+            </div>
+            {footer && (
+              <div className="shrink-0 border-t border-border bg-background">
+                <div className="w-full max-w-[520px] mx-auto px-0 py-4 flex justify-between">
+                  {footer}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/stage-timeline.tsx

@@ -32,6 +32,8 @@ export interface StageTimelineTask {
   title: string;
   completed: boolean;
   aiAgentName?: string | null;
+  /** When provided alongside `aiAgentName`, shows the auto-complete toggle switch. */
+  autoCompleteEnabled?: boolean;
 }
 
 export interface StageTimelineStage {
@@ -48,6 +50,8 @@ export interface StageTimelineProps {
   stages: StageTimelineStage[];
   /** Called when a task checkbox is toggled. */
   onTaskToggle?: (stageId: string, taskId: string) => void;
+  /** Called when the auto-complete switch on a task is toggled. */
+  onTaskAutoCompleteToggle?: (stageId: string, taskId: string) => void;
   /** Shows a loading skeleton instead of stages. */
   isLoading?: boolean;
   className?: string;
@@ -60,6 +64,7 @@ export interface StageTimelineProps {
 export function StageTimeline({
   stages,
   onTaskToggle,
+  onTaskAutoCompleteToggle,
   isLoading = false,
   className,
 }: StageTimelineProps) {
@@ -186,12 +191,18 @@ export function StageTimeline({
                       title={task.title}
                       completed={task.completed}
                       aiAgentName={task.aiAgentName}
+                      autoCompleteEnabled={task.autoCompleteEnabled}
                       size="sm"
                       onToggle={
                         onTaskToggle
                           ? () => onTaskToggle(stage.id, task.id)
                           : undefined
                       }
+                      onAutoCompleteToggle={
+                        onTaskAutoCompleteToggle
+                          ? () => onTaskAutoCompleteToggle(stage.id, task.id)
+                          : undefined
+                      }
                     />
                   ))}
                 </AccordionContent>

package/src/components/ui/submission-confirmation-card.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+/**
+ * Full-screen success card shown after a loan application is submitted.
+ * Extracted from the submitted/ page in the loan application flow.
+ */
+
+export type SubmissionConfirmationCardProps = {
+  onViewSubmission?: () => void;
+  className?: string;
+};
+
+function CircleCheckIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 80 80"
+      fill="none"
+      className={cn("size-20", className)}
+      aria-hidden="true"
+    >
+      <circle cx="40" cy="40" r="38" stroke="currentColor" strokeWidth="3" />
+      <path
+        d="M24 40l12 12 20-24"
+        stroke="currentColor"
+        strokeWidth="3.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function SubmissionConfirmationCard({
+  onViewSubmission,
+  className,
+}: SubmissionConfirmationCardProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center gap-6 px-6 py-12 text-center",
+        className,
+      )}
+    >
+      <CircleCheckIcon className="text-primary" />
+
+      <div className="flex flex-col gap-2">
+        <p className="text-2xl font-bold">Awesome!</p>
+        <p className="text-2xl font-bold">
+          You&apos;ve submitted your loan application!
+        </p>
+      </div>
+
+      <p className="max-w-sm text-sm text-muted-foreground">
+        Your broker will take a look at your loan application and get back to
+        you with the results soon!
+      </p>
+
+      {onViewSubmission && (
+        <Button type="button" variant="outline" onClick={onViewSubmission}>
+          View Your Submission
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/ui/top-three-product.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { Button } from "./button";
+import { Skeleton } from "./skeleton";
+
+/**
+ * Organism — "Top 3 Loans Available" section for the Borrowing Capacity page.
+ *
+ * Layout:
+ * - Heading row: "Top 3 Loans Available" (left) + "See All Options" link (right)
+ * - Two-column body:
+ *   - Left: up to 3 `TopThreeProductItem` rows (lender logo, rate, max loan, repayment)
+ *   - Right: Outcome panel (descriptive text + CTA buttons)
+ *
+ * All values are pre-formatted / typed — business logic stays in the app layer.
+ */
+
+// ─── Sub-types ───────────────────────────────────────────────────────────────
+
+export interface TopThreeProductItem {
+  /** Lender display name (e.g. "ANZ") */
+  lender: string;
+  /** URL for the lender logo image. Falls back to initials if omitted. */
+  lenderLogoUrl?: string;
+  /** Interest rate as a percentage (e.g. 5.5 → displayed as "5.50%") */
+  interestRate: number;
+  /** true = Variable rate, false = Fixed rate */
+  isVariable: boolean;
+  /** Maximum loan amount in AUD dollars */
+  maxLoanAmount: number;
+  /** Monthly repayment in AUD dollars */
+  monthlyRepayment: number;
+}
+
+export interface TopThreeProductProps {
+  /** Up to 3 loan products to display */
+  items?: TopThreeProductItem[];
+  /** Outcome summary text shown in the right panel */
+  outcomeText?: string;
+  /** Called when "See All Options" is clicked */
+  onSeeAllOptions?: () => void;
+  /** Called when "Talk To Your Broker" CTA is clicked */
+  onTalkToBroker?: () => void;
+  /** Called when "Start Loan Application" CTA is clicked */
+  onStartLoanApplication?: () => void;
+  /** Replace content with a skeleton loading state */
+  isLoading?: boolean;
+  className?: string;
+}
+
+// ─── Internal stat cell ──────────────────────────────────────────────────────
+
+function StatCell({ value, label }: { value: React.ReactNode; label: string }) {
+  return (
+    <div className="flex flex-col items-center gap-0.5 text-center">
+      <span className="text-base font-semibold tabular-nums text-foreground">
+        {value}
+      </span>
+      <span className="text-xs text-muted-foreground">{label}</span>
+    </div>
+  );
+}
+
+// ─── Internal product row ─────────────────────────────────────────────────────
+
+function ProductRow({ item }: { item: TopThreeProductItem }) {
+  const initials = item.lender
+    .split(" ")
+    .map((w) => w[0])
+    .slice(0, 2)
+    .join("");
+
+  return (
+    <div className="flex items-center gap-4 py-3">
+      {/* Lender logo / initials fallback */}
+      <div className="flex h-10 w-10 shrink-0 items-center justify-center border border-border bg-muted text-xs font-semibold text-muted-foreground">
+        {item.lenderLogoUrl ? (
+          <img
+            src={item.lenderLogoUrl}
+            alt={item.lender}
+            className="h-full w-full object-contain"
+          />
+        ) : (
+          initials
+        )}
+      </div>
+
+      {/* Stats — rate, max loan, repayment */}
+      <div className="flex flex-1 items-center justify-between gap-2">
+        <StatCell
+          value={`${item.interestRate.toFixed(2)}%`}
+          label={item.isVariable ? "Variable" : "Fixed"}
+        />
+        <StatCell
+          value={formatCurrency(item.maxLoanAmount)}
+          label="Max Loan Amount"
+        />
+        <StatCell
+          value={formatCurrency(item.monthlyRepayment)}
+          label="Monthly Repayments"
+        />
+      </div>
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export function TopThreeProduct({
+  items = [],
+  outcomeText,
+  onSeeAllOptions,
+  onTalkToBroker,
+  onStartLoanApplication,
+  isLoading = false,
+  className,
+}: TopThreeProductProps) {
+  const showOutcome = Boolean(
+    outcomeText || onTalkToBroker || onStartLoanApplication,
+  );
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      {/* Heading row */}
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-semibold text-foreground">
+          Top 3 Loans Available
+        </span>
+        {onSeeAllOptions && (
+          <button
+            type="button"
+            onClick={onSeeAllOptions}
+            className="flex items-center gap-1 text-sm text-primary transition-opacity hover:opacity-70"
+          >
+            See All Options
+            <ChevronRight size={14} className="shrink-0" />
+          </button>
+        )}
+      </div>
+
+      {/* Body — products + outcome */}
+      <div className="flex gap-4">
+        {/* Product list */}
+        <div className="flex flex-1 flex-col divide-y divide-border">
+          {isLoading
+            ? Array.from({ length: 3 }).map((_, i) => (
+                <div key={i} className="flex items-center gap-4 py-3">
+                  <Skeleton className="h-10 w-10 shrink-0" />
+                  <div className="flex flex-1 justify-between gap-4">
+                    <Skeleton className="h-8 w-16" />
+                    <Skeleton className="h-8 w-20" />
+                    <Skeleton className="h-8 w-20" />
+                  </div>
+                </div>
+              ))
+            : items.length > 0
+              ? items
+                  .slice(0, 3)
+                  .map((item, i) => (
+                    <ProductRow key={`${item.lender}-${i}`} item={item} />
+                  ))
+              : !isLoading && (
+                  <p className="py-6 text-center text-sm text-muted-foreground">
+                    No lender options available for this scenario.
+                  </p>
+                )}
+        </div>
+
+        {/* Outcome panel */}
+        {showOutcome && (
+          <div className="flex w-48 shrink-0 flex-col gap-3 border-l border-border pl-4">
+            <span className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+              Outcome
+            </span>
+            {outcomeText && (
+              <p className="text-sm text-foreground">{outcomeText}</p>
+            )}
+            <div className="flex flex-col gap-2">
+              {onTalkToBroker && (
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={onTalkToBroker}
+                  className="w-full"
+                >
+                  Talk To Your Broker
+                </Button>
+              )}
+              {onStartLoanApplication && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={onStartLoanApplication}
+                  className="w-full"
+                >
+                  Start Loan Application
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/transactions-summary-block.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Section header block used above each chart on the Money (Transactions) page.
+ *
+ * Matches the app design: large value at the top, category label below,
+ * optional period text and footnote beneath.
+ *
+ * Layout:
+ * ┌─────────────────────────────────────────┐
+ * │  $37,085            [optional action]    │
+ * │  Cash Balance                            │
+ * │  30 Days Total                           │
+ * │  (Based on connected bank transactions)  │
+ * └─────────────────────────────────────────┘
+ */
+
+export interface TransactionsSummaryBlockProps {
+  /** Pre-formatted total value — e.g. "$37,085" — displayed prominently at top */
+  value: string;
+  /** Section label — e.g. "Cash Balance", "Income", "Expense" */
+  label: string;
+  /** Period text — e.g. "30 Days Total" */
+  period?: string;
+  /** Small footnote — e.g. "(Based on connected bank transactions)" */
+  footnote?: string;
+  /** Optional trailing element — e.g. a Button for "Set Goal" */
+  action?: React.ReactNode;
+  className?: string;
+}
+
+export function TransactionsSummaryBlock({
+  value,
+  label,
+  period,
+  footnote,
+  action,
+  className,
+}: TransactionsSummaryBlockProps) {
+  return (
+    <div
+      className={cn("flex items-start justify-between gap-2 py-3", className)}
+    >
+      <div className="flex flex-col gap-0.5">
+        <p className="text-2xl font-bold tabular-nums text-foreground">
+          {value}
+        </p>
+        <p className="text-sm font-medium text-foreground">{label}</p>
+        {period && <p className="text-xs text-muted-foreground">{period}</p>}
+        {footnote && (
+          <p className="text-xs text-muted-foreground">{footnote}</p>
+        )}
+      </div>
+
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  );
+}

package/src/lib/colors.ts

@@ -45,6 +45,18 @@ export function getContrastText(backgroundColor: string): string {
   return luminance > 0.179 ? CONTRAST_DARK : CONTRAST_LIGHT;
 }
 
+/**
+ * Returns a CSS color-mix() string blending `color` with transparent at the given fill opacity.
+ * Used for swatch/chip backgrounds in income/expense/debt indicators.
+ *
+ * @example colorMixSwatch("#3B82F6")        // "color-mix(in srgb, #3B82F6 15%, transparent)"
+ * @example colorMixSwatch("#3B82F6", 0.3)   // "color-mix(in srgb, #3B82F6 30%, transparent)"
+ */
+export function colorMixSwatch(color: string, fillOpacity = 0.15): string {
+  const percent = Math.round(fillOpacity * 100);
+  return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
+}
+
 /** Convert hex to oklch() CSS string */
 export function hexToOklch(hex: string): string {
   const [r, g, b] = hexToRgb(hex);

package/src/lib/format-date.ts

@@ -54,11 +54,11 @@ export function formatDateWithWeekday(iso: string): string {
  * Returns raw string on parse failure.
  */
 export function formatDateLong(date: Date | string): string {
+  const d = typeof date === "string" ? safeParse(date) : date;
   try {
-    const d = typeof date === "string" ? safeParse(date) : date;
     return format(d, "EEEE, d MMMM");
   } catch {
-    return String(date);
+    return d.toLocaleDateString();
   }
 }