@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/interest-rate-input.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+/**
+ * Numeric input for interest rates with a "%" suffix.
+ * Accepts 0–max with one decimal place. Strips the slider from the app's
+ * InterestRateInput — use this wherever just the rate field is needed.
+ *
+ * Consumers should wrap in <Field> + <FieldLabel> / <FieldError> for label/error display.
+ */
+
+export type InterestRateInputProps = {
+  /** Current rate value (e.g. 5.5 for 5.5%) */
+  value: number;
+  /** Called on blur with the parsed, validated value */
+  onChange: (value: number) => void;
+  /** HTML id forwarded to the inner <input> */
+  id?: string;
+  /** Minimum allowed value (default: 0) */
+  min?: number;
+  /** Maximum allowed value (default: 10) */
+  max?: number;
+  disabled?: boolean;
+  /** When true, renders the InputGroup in its error visual state */
+  error?: boolean;
+  className?: string;
+};
+
+/** Allow one decimal place: 0–max (e.g. "5", "5.", "5.5", "10.0") */
+function buildValidationRegex(max: number): RegExp {
+  const intMax = Math.floor(max);
+  // Matches: integer part 0–max, optional single decimal digit
+  return new RegExp(`^(${intMax}(\\.\\d?)?|[0-9](\\.[0-9]?)?)$`);
+}
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, n));
+}
+
+export function InterestRateInput({
+  value,
+  onChange,
+  id,
+  min = 0,
+  max = 10,
+  disabled = false,
+  error = false,
+  className,
+}: InterestRateInputProps) {
+  const [displayValue, setDisplayValue] = useState(() =>
+    value > 0 ? String(value) : "",
+  );
+  const [focused, setFocused] = useState(false);
+
+  const validationRegex = buildValidationRegex(max);
+
+  // Sync when value changes externally
+  useEffect(() => {
+    if (!focused) {
+      setDisplayValue(value > 0 ? String(value) : "");
+    }
+  }, [value, focused]);
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const raw = e.target.value;
+    // Allow empty string or values matching the pattern
+    if (raw === "" || validationRegex.test(raw)) {
+      setDisplayValue(raw);
+    }
+  }
+
+  function handleFocus() {
+    setFocused(true);
+  }
+
+  function handleBlur() {
+    setFocused(false);
+    // Strip trailing decimal point, then parse + clamp
+    const cleaned = displayValue.replace(/\.$/, "");
+    const parsed = parseFloat(cleaned);
+    const final = isNaN(parsed) ? min : clamp(parsed, min, max);
+    onChange(final);
+    setDisplayValue(final > 0 ? String(final) : "");
+  }
+
+  return (
+    <InputGroup
+      className={cn(className)}
+      data-disabled={disabled ? "true" : undefined}
+    >
+      <InputGroupInput
+        id={id}
+        type="text"
+        inputMode="decimal"
+        value={displayValue}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        placeholder="0"
+        disabled={disabled}
+        aria-invalid={error ? "true" : undefined}
+      />
+      <InputGroupAddon align="inline-end">%</InputGroupAddon>
+    </InputGroup>
+  );
+}

package/src/components/ui/interest-rate-section.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { cn } from "@/lib/utils";
+import { formatCurrency, formatCurrencyAbbrev } from "@/lib/format-currency";
+import { Button } from "./button";
+import { Skeleton } from "./skeleton";
+
+/**
+ * Organism — full lender comparison table for the Borrowing Capacity page.
+ *
+ * Renders an optional title, a sticky column-header row, and a paginated list
+ * of lender rows. Each row shows: Lender, Interest Rate, Comparison Rate,
+ * Monthly Repayments, Total Cost, and Max Buying Power.
+ *
+ * Values are pre-formatted / typed — business logic stays in the app layer.
+ * Pass `isLoading` to render a skeleton table in place of real rows.
+ */
+
+export interface InterestRateItem {
+  /** Lender display name (e.g. "ANZ") */
+  lender: string;
+  /** Interest rate percentage (e.g. 5.5 → displayed as "5.50%") */
+  interestRate: number;
+  /** Comparison rate percentage (e.g. 5.75 → displayed as "5.75%") */
+  comparisonRate: number;
+  /** Pre-formatted monthly repayment string (e.g. "$2,800" or "$2,800 – $3,100") */
+  monthlyRepayment: string;
+  /** Total cost in AUD cents */
+  totalCost: number;
+  /** Maximum buying power in AUD cents */
+  maxBuyingPower: number;
+}
+
+export interface InterestRateSectionProps {
+  /**
+   * Section heading shown above the table, e.g.
+   * "Lender Options for cash towards $150,000"
+   */
+  title?: string;
+  /** Lender rows to display */
+  items?: InterestRateItem[];
+  /** Number of rows shown per page (default: 5) */
+  pageSize?: number;
+  /** Replace rows with a skeleton loading state */
+  isLoading?: boolean;
+  className?: string;
+}
+
+const COLUMN_HEADERS = [
+  "Lender",
+  "Interest Rate",
+  "Comparison Rate",
+  "Monthly Repayments",
+  "Total Cost",
+  "Real Buying Power",
+] as const;
+
+export function InterestRateSection({
+  title,
+  items = [],
+  pageSize = 5,
+  isLoading = false,
+  className,
+}: InterestRateSectionProps) {
+  const [visibleCount, setVisibleCount] = useState(pageSize);
+  const visibleItems = items.slice(0, visibleCount);
+  const hasMore = visibleCount < items.length;
+
+  const handleLoadMore = () => setVisibleCount((n) => n + pageSize);
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      {title && (
+        <p className="text-sm font-semibold text-foreground">{title}</p>
+      )}
+
+      {/* Column headers */}
+      <div className="grid grid-cols-6 border-b border-border pb-2">
+        {COLUMN_HEADERS.map((col) => (
+          <span
+            key={col}
+            className="text-xs font-medium uppercase tracking-wide text-muted-foreground"
+          >
+            {col}
+          </span>
+        ))}
+      </div>
+
+      {/* Rows */}
+      <div className="flex flex-col divide-y divide-border">
+        {isLoading
+          ? Array.from({ length: pageSize }).map((_, i) => (
+              <div key={i} className="grid grid-cols-6 gap-2 py-3">
+                {Array.from({ length: 6 }).map((__, j) => (
+                  <Skeleton key={j} className="h-4 w-full" />
+                ))}
+              </div>
+            ))
+          : visibleItems.length > 0
+            ? visibleItems.map((item, i) => (
+                <div
+                  key={`${item.lender}-${i}`}
+                  className="grid grid-cols-6 items-center py-3"
+                >
+                  {/* Lender */}
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="h-2 w-2 shrink-0 rounded-full bg-primary"
+                      aria-hidden
+                    />
+                    <span className="truncate text-sm font-medium text-foreground">
+                      {item.lender}
+                    </span>
+                  </div>
+
+                  {/* Interest Rate */}
+                  <span className="text-sm tabular-nums text-foreground">
+                    {item.interestRate.toFixed(2)}%
+                  </span>
+
+                  {/* Comparison Rate */}
+                  <span className="text-sm tabular-nums text-foreground">
+                    {item.comparisonRate.toFixed(2)}%
+                  </span>
+
+                  {/* Monthly Repayments */}
+                  <span className="text-sm text-foreground">
+                    {item.monthlyRepayment}
+                  </span>
+
+                  {/* Total Cost */}
+                  <span className="text-sm tabular-nums text-foreground">
+                    {formatCurrencyAbbrev(item.totalCost)}
+                  </span>
+
+                  {/* Max Buying Power */}
+                  <span className="text-sm font-semibold tabular-nums text-foreground">
+                    {formatCurrency(item.maxBuyingPower)}
+                  </span>
+                </div>
+              ))
+            : !isLoading && (
+                <p className="py-6 text-center text-sm text-muted-foreground">
+                  No lender options available for this scenario.
+                </p>
+              )}
+      </div>
+
+      {/* Load more */}
+      {!isLoading && hasMore && (
+        <div className="flex justify-center pt-1">
+          <Button variant="outline" size="sm" onClick={handleLoadMore}>
+            Load More
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/interest-rate-used.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Slider } from "./slider";
+
+/**
+ * Right-sidebar organism for the Borrowing Capacity page.
+ *
+ * Shows the current interest rate used in the calculation along with the
+ * resulting buying power and estimated repayments. The slider lets the user
+ * explore how different rates affect their borrowing capacity.
+ *
+ * This is a **controlled** component — the consumer owns `rate` and
+ * `onRateChange`; no internal state is held.
+ */
+
+export interface InterestRateUsedProps {
+  /** Current interest rate (%) — drives the slider position */
+  rate: number;
+  /** Called when the slider is moved */
+  onRateChange: (rate: number) => void;
+  /** Pre-formatted buying power string, e.g. "$957.53K" */
+  buyingPowerFormatted: string;
+  /** Pre-formatted repayments string, e.g. "$2.66K" */
+  repaymentsFormatted: string;
+  /** Minimum rate (default: 0) */
+  minRate?: number;
+  /** Maximum rate (default: 13) */
+  maxRate?: number;
+  /** Slider step (default: 0.01) */
+  rateStep?: number;
+  className?: string;
+}
+
+export function InterestRateUsed({
+  rate,
+  onRateChange,
+  buyingPowerFormatted,
+  repaymentsFormatted,
+  minRate = 0,
+  maxRate = 13,
+  rateStep = 0.01,
+  className,
+}: InterestRateUsedProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center gap-3 border-b border-border px-4 py-4 text-center",
+        className,
+      )}
+    >
+      <p className="text-base font-bold text-foreground">Interest Rate Used</p>
+
+      <div className="flex w-full justify-around gap-4">
+        <div className="flex flex-col gap-0.5">
+          <p className="text-sm text-muted-foreground">Current Buying Power</p>
+          <p className="text-lg font-bold text-foreground">
+            {buyingPowerFormatted}
+          </p>
+        </div>
+        <div className="flex flex-col gap-0.5">
+          <p className="text-sm text-muted-foreground">Repayments</p>
+          <p className="text-lg font-bold text-foreground">
+            {repaymentsFormatted}
+          </p>
+        </div>
+      </div>
+
+      <div className="flex w-full flex-col gap-2">
+        <p className="text-sm font-semibold text-foreground">
+          {rate.toFixed(2)}%
+        </p>
+        <Slider
+          value={rate}
+          min={minRate}
+          max={maxRate}
+          step={rateStep}
+          onValueChange={onRateChange}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/ui/kanban-column.tsx

@@ -97,11 +97,15 @@ export interface KanbanColumnProps {
   onMarkAsDone?: (opportunityId: string) => void;
   onMoveToNextStage?: (opportunityId: string) => void;
   onSendLoanApplication?: (opportunityId: string) => void;
+  /** Fires when clicking the non-interactive card body. */
+  onCardClick?: (opportunityId: string) => void;
   onViewDetails?: (opportunityId: string) => void;
   onChangePriority?: (opportunityId: string) => void;
   onLaunchAssistant?: (opportunityId: string) => void;
   onPutOnHold?: (opportunityId: string) => void;
   onDeleteOpportunity?: (opportunityId: string) => void;
+  /** Fires when a card is dropped onto this column (HTML5 DnD). */
+  onCardDrop?: (cardId: string) => void;
   /** Opportunity ID currently being submitted — disables that card's actions. */
   submittingOpportunityId?: string | null;
 
@@ -143,11 +147,13 @@ export function KanbanColumn({
   onMarkAsDone,
   onMoveToNextStage,
   onSendLoanApplication,
+  onCardClick,
   onViewDetails,
   onChangePriority,
   onLaunchAssistant,
   onPutOnHold,
   onDeleteOpportunity,
+  onCardDrop,
   submittingOpportunityId,
   className,
 }: KanbanColumnProps) {
@@ -155,6 +161,31 @@ export function KanbanColumn({
   const accentColor = stage.accentColor ?? "var(--color-border)";
   const hasMenu = onEditColumn || (!isDefault && onDeleteColumn);
 
+  // ── HTML5 drag-and-drop drop-zone state ──────────────────────
+  const [isDragOver, setIsDragOver] = React.useState(false);
+
+  function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
+    if (!onCardDrop) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setIsDragOver(true);
+  }
+
+  function handleDragLeave(e: React.DragEvent<HTMLDivElement>) {
+    // Only clear when leaving the column entirely (not entering a child)
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsDragOver(false);
+    }
+  }
+
+  function handleDrop(e: React.DragEvent<HTMLDivElement>) {
+    if (!onCardDrop) return;
+    e.preventDefault();
+    setIsDragOver(false);
+    const cardId = e.dataTransfer.getData("text/plain");
+    if (cardId) onCardDrop(cardId);
+  }
+
   return (
     <div
       className={cn(
@@ -231,9 +262,17 @@ export function KanbanColumn({
       </div>
 
       {/* ── Body ── */}
-      <div className="flex flex-1 flex-col gap-2 overflow-y-auto p-2">
+      <div
+        className={cn(
+          "flex flex-1 flex-col gap-2 overflow-y-auto p-2",
+          isDragOver && "ring-2 ring-primary ring-inset bg-primary/5",
+        )}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
         {/* Drop target hint — shown at top when a card is dragged over */}
-        {isDropTarget && (
+        {(isDropTarget || isDragOver) && (
           <div className="border border-dashed border-primary/40 bg-primary/5 px-3 py-2 text-center text-xs text-primary">
             Drop here → {stage.name}
           </div>
@@ -272,6 +311,18 @@ export function KanbanColumn({
                 <OpportunityCard
                   key={opp.id}
                   {...opp}
+                  draggable={!!onCardDrop}
+                  onDragStart={
+                    onCardDrop
+                      ? (e) => {
+                          e.dataTransfer.setData("text/plain", opp.id);
+                          e.dataTransfer.effectAllowed = "move";
+                        }
+                      : undefined
+                  }
+                  onCardClick={
+                    onCardClick ? () => onCardClick(opp.id) : undefined
+                  }
                   onTaskToggle={
                     onTaskToggle
                       ? (taskId) => onTaskToggle(opp.id, taskId)

package/src/components/ui/loan-applicant-information.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Card } from "./card";
+import { Pencil } from "lucide-react";
+
+export type ApplicantStatus = "active" | "waiting";
+
+export interface LoanApplicantInformationProps {
+  name: string;
+  phone: string;
+  email: string;
+  /** "waiting" shows a badge next to the name */
+  status?: ApplicantStatus;
+  /** When provided, shows an edit button in the top-right corner */
+  onEdit?: () => void;
+  className?: string;
+}
+
+export function LoanApplicantInformation({
+  name,
+  phone,
+  email,
+  status = "active",
+  onEdit,
+  className,
+}: LoanApplicantInformationProps) {
+  return (
+    <Card className={cn("relative flex flex-col gap-3 p-4", className)}>
+      {onEdit && (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onEdit}
+          className="absolute top-2 right-2 h-7 w-7 text-muted-foreground"
+          aria-label="Edit applicant"
+        >
+          <Pencil className="h-3.5 w-3.5" />
+        </Button>
+      )}
+
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-semibold text-foreground">{name}</span>
+        {status === "waiting" && (
+          <Badge variant="warning" className="text-xs">
+            Waiting
+          </Badge>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="text-sm text-foreground">
+          <span className="font-medium">{phone}</span>{" "}
+          <span className="text-muted-foreground">contact number</span>
+        </p>
+        <p className="text-sm text-foreground">
+          <span className="font-medium">{email}</span>{" "}
+          <span className="text-muted-foreground">contact email</span>
+        </p>
+      </div>
+    </Card>
+  );
+}

package/src/components/ui/loan-applicant-invite.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "./button";
+import { Card } from "./card";
+import { Input } from "./input";
+import { SendHorizontal } from "lucide-react";
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export interface LoanApplicantInviteProps {
+  /** Called when the user submits a valid email */
+  onInvite?: (email: string) => void;
+  loading?: boolean;
+  className?: string;
+}
+
+export function LoanApplicantInvite({
+  onInvite,
+  loading = false,
+  className,
+}: LoanApplicantInviteProps) {
+  const [email, setEmail] = useState("");
+  const isValid = EMAIL_RE.test(email);
+
+  const handleSend = () => {
+    if (!isValid) return;
+    onInvite?.(email);
+    setEmail("");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") handleSend();
+  };
+
+  return (
+    <Card className={cn("flex flex-col gap-3 p-4", className)}>
+      <p className="text-sm font-medium text-foreground">
+        Create Joint Application
+      </p>
+
+      <div className="flex">
+        <Input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Co-applicant email"
+          className="flex-1 border-r-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+          aria-label="Co-applicant email"
+        />
+        <Button
+          onClick={handleSend}
+          disabled={!isValid || loading}
+          size="icon"
+          className="shrink-0"
+          aria-label="Send invite"
+        >
+          <SendHorizontal className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {email && !isValid && (
+        <p className="text-xs text-destructive">Invalid email address</p>
+      )}
+    </Card>
+  );
+}

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

@@ -0,0 +1,70 @@
+import React from "react";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { Badge } from "./badge";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** The three lifecycle states of a loan application in the contact CRM. */
+export type LoanApplicationBadgeStatus = "SENT" | "IN_PROGRESS" | "COMPLETED";
+
+export interface LoanApplicationBadgeProps {
+  /** Loan application lifecycle status. */
+  status: LoanApplicationBadgeStatus;
+  /** Optional extra class names applied to the Badge element. */
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Status config
+// ---------------------------------------------------------------------------
+
+const STATUS_CONFIG: Record<
+  LoanApplicationBadgeStatus,
+  { label: string; statusClassName: string; showCheck: boolean }
+> = {
+  SENT: {
+    label: "Sent Application",
+    statusClassName: "border-info/40 bg-info/10 text-info-text",
+    showCheck: false,
+  },
+  IN_PROGRESS: {
+    label: "Application In Progress",
+    statusClassName: "border-warning/40 bg-warning/10 text-warning-text",
+    showCheck: false,
+  },
+  COMPLETED: {
+    label: "Loan Application",
+    statusClassName: "border-success/40 bg-success/10 text-success-text",
+    showCheck: true,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Inline badge showing the lifecycle state of a loan application.
+ *
+ * Used in the Backoffice Contact CRM table `Name` cell to surface which
+ * contacts have an active loan application and where they are in the process.
+ */
+export function LoanApplicationBadge({
+  status,
+  className,
+}: LoanApplicationBadgeProps) {
+  const { label, statusClassName, showCheck } = STATUS_CONFIG[status];
+  return (
+    <Badge
+      variant="outline"
+      className={cn("w-fit text-xs gap-1", statusClassName, className)}
+    >
+      {showCheck && <CheckIcon aria-hidden="true" className="size-3" />}
+      {label}
+    </Badge>
+  );
+}