@wealthx/shadcn 1.4.0 → 1.5.0

package/src/components/ui/loan-application-cards.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { formatDateShort } from "@/lib/format-date";
+import { Button } from "@/components/ui/button";
+
+/**
+ * Loan draft selector shown on the "Select application to continue" screen.
+ * Two variants (BUILD-1612):
+ *   - Multi-draft: grid of cards — consumer renders when loans.length > 1
+ *   - Single-draft: consumer can skip this screen entirely when loans.length === 1
+ *
+ * This component always renders the grid. The caller decides whether to show it.
+ */
+
+export type LoanCardApplicant = {
+  name: string;
+  isMain: boolean;
+};
+
+export type LoanCardItem = {
+  id: string;
+  /** ISO date string */
+  createdAt: string;
+  desiredLoanAmount?: number;
+  isJoint: boolean;
+  applicants: LoanCardApplicant[];
+};
+
+export type LoanApplicationCardsProps = {
+  loans: LoanCardItem[];
+  onSelect: (id: string) => void;
+  onBack: () => void;
+  companyName?: string;
+  className?: string;
+};
+
+export function LoanApplicationCards({
+  loans,
+  onSelect,
+  onBack,
+  companyName,
+  className,
+}: LoanApplicationCardsProps) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      {/* Header */}
+      <div className="flex flex-col gap-2">
+        <h2 className="text-xl font-bold">Select an application to continue</h2>
+        <p className="text-sm text-muted-foreground">
+          Tip: Get technical and broker support by visiting the support section
+          within the app
+        </p>
+      </div>
+
+      {/* Section */}
+      <div className="flex flex-col gap-4">
+        <p className="text-sm font-medium">
+          What loan application would you like to continue?
+        </p>
+
+        {/* Card grid */}
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {loans.map((loan) => (
+            <div
+              key={loan.id}
+              className="flex flex-col justify-between gap-4 border border-border p-4"
+            >
+              <div className="flex flex-col gap-3">
+                {/* Meta: date + company */}
+                <div className="flex items-center justify-between text-sm">
+                  <div className="flex items-center gap-1.5 text-muted-foreground">
+                    <CalendarIcon />
+                    <span>
+                      <strong className="text-foreground">Started</strong>{" "}
+                      {formatDateShort(loan.createdAt)}
+                    </span>
+                  </div>
+                  {companyName && (
+                    <span className="text-xs text-muted-foreground">
+                      {companyName}
+                    </span>
+                  )}
+                </div>
+
+                {/* Loan amount */}
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">Loan Amount</span>
+                  <strong>{formatCurrency(loan.desiredLoanAmount ?? 0)}</strong>
+                </div>
+
+                <hr className="border-border" />
+
+                {/* Applicant type + names */}
+                <div className="flex flex-col gap-1 text-sm">
+                  <strong>
+                    {loan.isJoint
+                      ? "Joint Application"
+                      : "Individual Application"}
+                  </strong>
+                  {loan.applicants.map((a) => (
+                    <span key={a.name} className="text-muted-foreground">
+                      {a.name}
+                      {loan.isJoint && (
+                        <span className="text-xs">
+                          {" "}
+                          ({a.isMain ? "Main Applicant" : "Co-Applicant"})
+                        </span>
+                      )}
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full"
+                onClick={() => onSelect(loan.id)}
+              >
+                Continue
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <Button type="button" variant="ghost" onClick={onBack}>
+          Back
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function CalendarIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="size-3.5 shrink-0"
+      aria-hidden="true"
+    >
+      <rect x="3" y="4" width="18" height="18" rx="2" />
+      <path d="M16 2v4M8 2v4M3 10h18" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type LoanEntryShellProps = {
+  /**
+   * Hero image URL shown on the left panel (desktop only).
+   * Falls back to a muted placeholder panel when omitted.
+   */
+  heroSrc?: string;
+  /** Alt text for the hero image. Pass "" when decorative. */
+  heroAlt?: string;
+  /** Logo node — typically <AuthLogo /> */
+  logo?: React.ReactNode;
+  /** Screen heading */
+  title: string;
+  /** Optional subtitle beneath the heading */
+  subtitle?: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Two-column entry screen shell for the loan application flow.
+ *
+ * - Desktop (md+): left 50% = hero image, right 50% = logo + content
+ * - Mobile (<md): single column, hero hidden, content full-width
+ *
+ * Figma: WealthX-Backoffice---Mobile-App
+ *   Entry screen      → node 19308:56690
+ *   App-type screen   → node 19308:56893
+ */
+export function LoanEntryShell({
+  heroSrc,
+  heroAlt = "",
+  logo,
+  title,
+  subtitle,
+  className,
+  children,
+}: LoanEntryShellProps) {
+  return (
+    <div className={cn("flex min-h-screen w-full font-sans", className)}>
+      {/* ── Left: hero panel (desktop only) ──────────────────────────────── */}
+      <div className="hidden shrink-0 md:block md:w-1/2">
+        {heroSrc ? (
+          // alt="" is sufficient for decorative images — no aria-hidden needed
+          <img
+            src={heroSrc}
+            alt={heroAlt}
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <div className="h-full w-full bg-muted" aria-hidden="true" />
+        )}
+      </div>
+
+      {/* ── Right: content panel ─────────────────────────────────────────── */}
+      <div className="flex w-full flex-col md:w-1/2">
+        {/* Logo — pinned to top-left */}
+        {logo && <div className="px-4 pt-6 sm:px-10 sm:pt-10">{logo}</div>}
+
+        {/* Vertically centred content */}
+        <div className="flex flex-1 flex-col items-center justify-center gap-6 px-4 py-6 sm:gap-10 sm:px-10 sm:py-10">
+          {/* Heading block */}
+          <div className="flex flex-col items-center gap-3 text-center">
+            <h1 className="m-0 text-[28px] font-bold leading-9 text-foreground">
+              {title}
+            </h1>
+            {subtitle && (
+              <p className="m-0 max-w-sm text-sm font-normal leading-5 text-muted-foreground">
+                {subtitle}
+              </p>
+            )}
+          </div>
+
+          {/* Option cards / content */}
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/loan-financials.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import {
+  AccountListCarousel,
+  type AccountCarouselItem,
+} from "./account-list-carousel";
+import {
+  PropertyListCarousel,
+  type PropertyCarouselItem,
+} from "./property-list-carousel";
+
+export interface LoanFinancialsProps {
+  /** Name shown in the section heading (e.g. applicant's first name) */
+  ownerName: string;
+  bankAccounts: AccountCarouselItem[];
+  creditAccounts: AccountCarouselItem[];
+  propertyLoans: AccountCarouselItem[];
+  properties: PropertyCarouselItem[];
+  onAddAccount?: () => void;
+  onAddProperty?: () => void;
+  className?: string;
+}
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return <p className="text-sm font-semibold text-foreground">{children}</p>;
+}
+
+export function LoanFinancials({
+  ownerName,
+  bankAccounts,
+  creditAccounts,
+  propertyLoans,
+  properties,
+  onAddAccount,
+  onAddProperty,
+  className,
+}: LoanFinancialsProps) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      <p className="text-sm font-bold text-foreground">
+        {ownerName}&apos;s Information
+      </p>
+
+      <div className="flex flex-col gap-2">
+        <SectionTitle>Linked Bank Accounts</SectionTitle>
+        <AccountListCarousel
+          accounts={bankAccounts}
+          type="bankAccount"
+          onAddAccount={onAddAccount}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <SectionTitle>Credit Cards &amp; Personal Loans</SectionTitle>
+        <AccountListCarousel
+          accounts={creditAccounts}
+          type="credit"
+          onAddAccount={onAddAccount}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <SectionTitle>Property Loans</SectionTitle>
+        <AccountListCarousel accounts={propertyLoans} type="propertyLoan" />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <SectionTitle>Property Assets</SectionTitle>
+        <PropertyListCarousel
+          properties={properties}
+          type="property"
+          onAddProperty={onAddProperty}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/ui/loan-option-card.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type LoanOptionCardProps = {
+  /** Card label displayed at the top */
+  title: string;
+  /** Icon rendered below the title — pass any ReactNode (SVG, img, lucide icon) */
+  icon: React.ReactNode;
+  /** Whether this card is currently selected */
+  selected?: boolean;
+  /** Click / select handler */
+  onClick?: () => void;
+  /** Disable interaction */
+  disabled?: boolean;
+  className?: string;
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Selectable option card used in loan application entry screens.
+ *
+ * Figma: WealthX-Backoffice---Mobile-App
+ *   Entry screen  → node 19308:56690
+ *   App-type screen → node 19308:56893
+ */
+export function LoanOptionCard({
+  title,
+  icon,
+  selected = false,
+  onClick,
+  disabled = false,
+  className,
+}: LoanOptionCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-pressed={selected}
+      className={cn(
+        // Base — fixed height so all cards in a row are equal regardless of title length
+        "flex h-[200px] w-[300px] flex-col items-center justify-between border-2 p-8 font-sans",
+        "outline-none transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        // States
+        selected
+          ? "border-primary bg-primary/5"
+          : "border-border hover:bg-accent",
+        disabled && "pointer-events-none opacity-40",
+        className,
+      )}
+    >
+      <span className="text-center text-lg font-bold leading-normal text-foreground">
+        {title}
+      </span>
+      {/* Icon container — 56 × 56px */}
+      <div className="flex size-14 items-center justify-center">{icon}</div>
+    </button>
+  );
+}

package/src/components/ui/loan-option-group.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+export type LoanOptionItem = {
+  value: string;
+  label: string;
+};
+
+export type LoanOptionGroupProps = {
+  title?: string;
+  options: LoanOptionItem[];
+  /** Current value for single-select. Mutually exclusive with `values`. */
+  value?: string;
+  /** Current values for multi-select. Mutually exclusive with `value`. */
+  values?: string[];
+  onChange: (next: string | string[]) => void;
+  multiple?: boolean;
+  /** When `multiple`, maximum number of options that can be selected. */
+  max?: number;
+  /** Show rank badge on multi-selected items (#1, #2, #3). */
+  showRank?: boolean;
+  /** Allow deselecting the current selection. */
+  allowUnSelect?: boolean;
+  error?: boolean;
+  helperText?: string;
+  disabled?: boolean;
+  className?: string;
+};
+
+export function LoanOptionGroup({
+  title,
+  options,
+  value,
+  values = [],
+  onChange,
+  multiple = false,
+  max,
+  showRank = false,
+  allowUnSelect = true,
+  error = false,
+  helperText,
+  disabled = false,
+  className,
+}: LoanOptionGroupProps) {
+  const controlledValue: readonly string[] = multiple
+    ? values
+    : value
+      ? [value]
+      : [];
+
+  const handleValueChange = (next: readonly string[]) => {
+    if (multiple) {
+      if (max !== undefined && next.length > max) return;
+      onChange([...next]);
+    } else {
+      if (next.length === 0 && !allowUnSelect) return;
+      onChange(next[0] ?? "");
+    }
+  };
+
+  return (
+    <div className={cn("flex flex-col gap-3 font-sans", className)}>
+      {title && (
+        <p
+          className={cn(
+            "text-sm font-medium text-foreground",
+            error && "text-destructive",
+          )}
+        >
+          {title}
+        </p>
+      )}
+      <ToggleGroup
+        value={controlledValue}
+        onValueChange={handleValueChange}
+        variant="outline"
+        type={multiple ? "multiple" : "single"}
+        spacing={2}
+        disabled={disabled}
+        className="flex-wrap justify-start"
+      >
+        {options.map((opt) => {
+          const rank = showRank && multiple ? values.indexOf(opt.value) : -1;
+          return (
+            <ToggleGroupItem
+              key={opt.value}
+              value={opt.value}
+              className="h-auto px-4 py-2 text-sm font-medium"
+            >
+              {rank >= 0 && (
+                <span className="text-xs font-bold opacity-70">
+                  #{rank + 1}
+                </span>
+              )}
+              {opt.label}
+            </ToggleGroupItem>
+          );
+        })}
+      </ToggleGroup>
+      {error && helperText && (
+        <p className="text-xs text-destructive">{helperText}</p>
+      )}
+    </div>
+  );
+}