@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/expense-detail-item.tsx

@@ -0,0 +1,216 @@
+import * as React from "react";
+import { useState, useCallback } from "react";
+import {
+  Baby,
+  Car,
+  DollarSign,
+  Gift,
+  Home,
+  Info,
+  ShoppingCart,
+  Shield,
+  Smartphone,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Switch } from "@/components/ui/switch";
+import { Input } from "@/components/ui/input";
+import { CurrencyInputWithSlider } from "@/components/ui/form-primitives";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type ExpenseType =
+  | "housing"
+  | "transport"
+  | "groceries"
+  | "childcare"
+  | "insurance"
+  | "entertainment"
+  | "utilities"
+  | "other";
+
+export type ExpenseDetailItemProps = {
+  /** Expense category type — drives the icon */
+  type: ExpenseType | string;
+  /** Display label for the expense */
+  label: string;
+  /** Optional tooltip description (shown via ⓘ icon) */
+  description?: string;
+  /** Current monthly expense amount */
+  amount: number;
+  /** Total of all expenses — used to calculate the progress bar ratio */
+  totalExpenses?: number;
+  /** Whether there is a co-applicant — shows the shared toggle when true */
+  hasCoApplicant?: boolean;
+  /** Whether this expense is shared between applicants */
+  isShared?: boolean;
+  /** Percentage attributed to the main applicant (0–100) */
+  sharedPercent?: number;
+  onAmountChange?: (amount: number) => void;
+  onSharedChange?: (shared: boolean) => void;
+  onSharedPercentChange?: (percent: number) => void;
+  onDelete?: () => void;
+  className?: string;
+};
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const EXPENSE_ICON_MAP: Record<string, LucideIcon> = {
+  housing: Home,
+  transport: Car,
+  groceries: ShoppingCart,
+  childcare: Baby,
+  insurance: Shield,
+  entertainment: Gift,
+  utilities: Smartphone, // phone / internet / subscriptions
+  other: DollarSign,
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * ExpenseDetailItem — a single expense row in the loan wizard Expenses Details section.
+ *
+ * Left side: category icon + label + ⓘ, progress bar, optional shared toggle + percent.
+ * Right side: currency input with slider.
+ *
+ * Figma: WealthX-Backoffice---Mobile-App — node 19308:53715
+ */
+export function ExpenseDetailItem({
+  type,
+  label,
+  description,
+  amount,
+  totalExpenses,
+  hasCoApplicant = false,
+  isShared = false,
+  sharedPercent: initialPercent = 50,
+  onAmountChange,
+  onSharedChange,
+  onSharedPercentChange,
+  onDelete,
+  className,
+}: ExpenseDetailItemProps) {
+  const Icon = EXPENSE_ICON_MAP[type] ?? DollarSign;
+  const fillPct =
+    totalExpenses && totalExpenses > 0
+      ? Math.min(100, (amount / totalExpenses) * 100)
+      : 0;
+
+  const [percent, setPercent] = useState(String(initialPercent));
+
+  const handlePercentBlur = useCallback(() => {
+    const parsed = Math.max(0, Math.min(100, parseInt(percent, 10) || 0));
+    setPercent(String(parsed));
+    onSharedPercentChange?.(parsed);
+  }, [percent, onSharedPercentChange]);
+
+  return (
+    <div className={cn("flex items-start gap-6 font-sans", className)}>
+      <div className="flex flex-1 flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <div className="flex size-9 shrink-0 items-center justify-center bg-muted">
+            <Icon className="size-5 text-muted-foreground" aria-hidden="true" />
+          </div>
+          <span className="text-body-small font-medium text-foreground">
+            {label}
+          </span>
+          {description && (
+            <span
+              title={description}
+              className="cursor-help text-muted-foreground"
+            >
+              <Info className="size-3.5" aria-hidden="true" />
+            </span>
+          )}
+        </div>
+
+        {/* max-w-[274px] matches the left-column width in the Figma spec */}
+        <div className="h-2 w-full max-w-[274px] bg-muted">
+          <div
+            className="h-full bg-foreground transition-all"
+            style={{ width: `${fillPct}%` }}
+            role="progressbar"
+            aria-label={`${label} proportion of total expenses`}
+            aria-valuenow={fillPct}
+            aria-valuemin={0}
+            aria-valuemax={100}
+          />
+        </div>
+
+        {hasCoApplicant && (
+          <div className="flex items-start gap-4">
+            <div className="flex flex-col gap-1">
+              <span className="text-xs text-muted-foreground">
+                Expense shared equally
+              </span>
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-muted-foreground">No</span>
+                <Switch
+                  size="sm"
+                  checked={isShared}
+                  onCheckedChange={onSharedChange}
+                  aria-label="Expense shared equally"
+                />
+                <span className="text-xs text-muted-foreground">Yes</span>
+              </div>
+            </div>
+
+            {isShared && (
+              <div className="flex flex-col gap-1">
+                <label
+                  className="text-xs text-muted-foreground"
+                  htmlFor={`shared-percent-${label}`}
+                >
+                  Shared percent
+                </label>
+                <div className="relative w-20">
+                  <Input
+                    id={`shared-percent-${label}`}
+                    type="number"
+                    min={0}
+                    max={100}
+                    value={percent}
+                    onChange={(e) => setPercent(e.target.value)}
+                    onBlur={handlePercentBlur}
+                    className="pr-6 text-sm"
+                    aria-label={`${label} shared percent`}
+                  />
+                  <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+                    %
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="flex w-64 shrink-0 flex-col gap-1.5">
+        <CurrencyInputWithSlider
+          value={amount}
+          min={0}
+          max={20000}
+          step={50}
+          onValueChange={onAmountChange}
+        />
+        {onDelete && (
+          <button
+            type="button"
+            onClick={onDelete}
+            aria-label="Delete expense"
+            className="mt-1 self-end text-xs text-muted-foreground underline underline-offset-2 transition-colors hover:text-destructive focus-visible:outline-none"
+          >
+            Remove
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/expense-work-details.tsx

@@ -0,0 +1,229 @@
+import * as React from "react";
+import { useCallback, useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+import { Switch } from "@/components/ui/switch";
+import { formatCurrency } from "@/lib/format-currency";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { ExpenseBarChart } from "@/components/ui/expense-bar-chart";
+import type { ExpenseBarChartData } from "@/components/ui/expense-bar-chart";
+import { ExpenseDetailItem } from "@/components/ui/expense-detail-item";
+import type { ExpenseType } from "@/components/ui/expense-detail-item";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type { ExpenseType };
+
+export type ExpenseItem = {
+  id: string;
+  /** Expense category type — drives the icon in ExpenseDetailItem */
+  type: ExpenseType | string;
+  /** Display label */
+  label: string;
+  /** Optional tooltip description */
+  description?: string;
+  /** Current monthly expense amount */
+  amount: number;
+  /** Whether this expense is shared between applicants */
+  isShared?: boolean;
+  /** Percentage attributed to the main applicant (0–100) */
+  sharedPercent?: number;
+};
+
+export type ExpenseItemUpdates = Pick<
+  ExpenseItem,
+  "amount" | "isShared" | "sharedPercent"
+>;
+
+export type ExpenseWorkDetailsProps = {
+  /** Rendered as "{applicantName}'s Expenses" in the heading */
+  applicantName: string;
+  /** Total from Open Banking — shown in the summary card above the chart */
+  totalExpenses?: number;
+  /** Monthly expense data for the ExpenseBarChart */
+  expenseData?: ExpenseBarChartData | null;
+  /** Expense items shown in the Expenses Details section */
+  items: ExpenseItem[];
+  /** When true, shows "Expense shared equally" toggle on each item and in the section header */
+  hasCoApplicant?: boolean;
+  onItemChange?: (id: string, updates: Partial<ExpenseItemUpdates>) => void;
+  /** Called when the global "shared equally" toggle is changed — receives the new value */
+  onAllSharedChange?: (shared: boolean) => void;
+  /** Called when a category is chosen from the "Add More +" dropdown */
+  onAddItem?: (type: ExpenseType | string) => void;
+  /** "Add More Account +" button in the summary card */
+  onConnectMore?: () => void;
+  className?: string;
+};
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+export const EXPENSE_CATEGORIES: Array<{ type: ExpenseType; label: string }> = [
+  { type: "housing", label: "Housing" },
+  { type: "transport", label: "Transport" },
+  { type: "groceries", label: "Groceries" },
+  { type: "childcare", label: "Childcare" },
+  { type: "insurance", label: "Insurance" },
+  { type: "entertainment", label: "Recreation & Entertainment" },
+  { type: "utilities", label: "Utilities" },
+  { type: "other", label: "Other" },
+];
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * ExpenseWorkDetails — Expenses section of the loan application wizard.
+ *
+ * Shows:
+ * 1. "{applicantName}'s Expenses" heading
+ * 2. Open Banking summary card — total + "Add More Account +" + bare bar chart
+ * 3. Expenses Details — list of ExpenseDetailItems with icon, progress bar,
+ *    per-item shared toggle (when hasCoApplicant), and currency+slider input
+ * 4. "Add More +" dropdown to select a new expense category
+ *
+ * Shared controls are only shown when hasCoApplicant=true (joint application).
+ *
+ * Figma: WealthX-Backoffice---Mobile-App — node 19308:53437
+ */
+export function ExpenseWorkDetails({
+  applicantName,
+  totalExpenses,
+  expenseData,
+  items,
+  hasCoApplicant = false,
+  onItemChange,
+  onAllSharedChange,
+  onAddItem,
+  onConnectMore,
+  className,
+}: ExpenseWorkDetailsProps) {
+  const [globalShared, setGlobalShared] = useState(false);
+  const itemsTotal = useMemo(
+    () => items.reduce((sum, i) => sum + i.amount, 0),
+    [items],
+  );
+
+  const handleGlobalSharedChange = useCallback(
+    (next: boolean) => {
+      setGlobalShared(next);
+      items.forEach((item) => onItemChange?.(item.id, { isShared: next }));
+      onAllSharedChange?.(next);
+    },
+    [items, onItemChange, onAllSharedChange],
+  );
+
+  return (
+    <div className={cn("flex flex-col gap-6 font-sans", className)}>
+      <h2 className="text-h1 text-foreground">
+        {applicantName}&apos;s Expenses
+      </h2>
+
+      {totalExpenses !== undefined && (
+        <div className="flex items-center gap-4">
+          <Card className="shrink-0 w-[195px]">
+            <CardContent className="flex flex-col gap-3 p-4">
+              <div className="flex flex-col gap-1">
+                <span className="text-h2 text-foreground">
+                  {formatCurrency(totalExpenses)}
+                </span>
+                <span className="text-body-small text-muted-foreground">
+                  Total latest 12 months
+                </span>
+              </div>
+              <Button
+                variant="secondary"
+                size="sm"
+                className="w-fit"
+                onClick={onConnectMore}
+              >
+                Add More Account +
+              </Button>
+            </CardContent>
+          </Card>
+
+          {expenseData && (
+            <ExpenseBarChart
+              expenseData={expenseData}
+              bare
+              showLegend={false}
+              showYAxis
+              showXAxis
+              defaultPeriod={12}
+              height={160}
+              className="flex-1"
+            />
+          )}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-h3 text-foreground">Expenses Details</h3>
+          {hasCoApplicant && (
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <span>Expense shared equally</span>
+              <span>No</span>
+              <Switch
+                size="sm"
+                checked={globalShared}
+                onCheckedChange={handleGlobalSharedChange}
+                aria-label="Toggle all expenses shared equally"
+              />
+              <span>Yes</span>
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-6">
+          {items.map((item) => (
+            <ExpenseDetailItem
+              key={item.id}
+              type={item.type}
+              label={item.label}
+              description={item.description}
+              amount={item.amount}
+              totalExpenses={itemsTotal}
+              hasCoApplicant={hasCoApplicant}
+              isShared={item.isShared}
+              sharedPercent={item.sharedPercent}
+              onAmountChange={(amount) => onItemChange?.(item.id, { amount })}
+              onSharedChange={(isShared) =>
+                onItemChange?.(item.id, { isShared })
+              }
+              onSharedPercentChange={(sharedPercent) =>
+                onItemChange?.(item.id, { sharedPercent })
+              }
+            />
+          ))}
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant="outline"
+                size="sm"
+                className="w-fit self-start"
+              />
+            }
+          >
+            Add More +
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {EXPENSE_CATEGORIES.map(({ type, label }) => (
+              <DropdownMenuItem key={type} onSelect={() => onAddItem?.(type)}>
+                {label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}