@wealthx/shadcn 1.4.0 → 1.5.0

package/src/components/ui/income-summary-component.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+/**
+ * Displays a read-only list of income entries with edit/delete actions and an
+ * "Add income" CTA. Extracted from the loan application income tab.
+ * Consumers pre-calculate per-year totals before passing them in.
+ */
+
+export type IncomeSummaryItem = {
+  /** Primary label — e.g. "Developer at Acme Corp" or "Rental Income" */
+  title: string;
+  /** Annualised income in whole dollars */
+  amountPerYear: number;
+  /** Optional duration string — "Employed for 3.5 yrs" */
+  employmentDuration?: string;
+  /** Small tag chips — employment status, basis, type */
+  statusTags?: string[];
+  /** Non-PAYG income source label */
+  source?: string;
+};
+
+export type IncomeSummaryComponentProps = {
+  incomes: IncomeSummaryItem[];
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  className?: string;
+};
+
+export function IncomeSummaryComponent({
+  incomes,
+  onAdd,
+  onEdit,
+  onDelete,
+  className,
+}: IncomeSummaryComponentProps) {
+  if (!incomes.length) {
+    return (
+      <div className={cn("flex flex-col gap-4", className)}>
+        <p className="text-sm text-muted-foreground">No incomes added yet.</p>
+        <Button type="button" variant="outline" onClick={onAdd}>
+          + Add an income
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      <div className="flex flex-col gap-3">
+        {incomes.map((income, index) => (
+          <div
+            key={index}
+            className="flex flex-col gap-2 border border-border p-4"
+          >
+            {/* Title row + actions */}
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-base font-semibold">{income.title}</span>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onEdit(index)}
+                >
+                  Edit
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onDelete(index)}
+                  className="border-destructive text-destructive hover:bg-destructive/10"
+                >
+                  Delete
+                </Button>
+              </div>
+            </div>
+
+            {/* Amount + duration */}
+            <div className="flex items-center justify-between text-sm">
+              <span>{formatCurrency(income.amountPerYear)} Per Year</span>
+              {income.employmentDuration && (
+                <span className="text-muted-foreground">
+                  {income.employmentDuration}
+                </span>
+              )}
+            </div>
+
+            {/* Status tags */}
+            {income.statusTags && income.statusTags.length > 0 && (
+              <div className="flex flex-wrap gap-2">
+                {income.statusTags.map((tag) => (
+                  <Badge key={tag} variant="secondary">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            {/* Non-PAYG source */}
+            {income.source && (
+              <span className="text-sm text-muted-foreground">
+                Source: {income.source}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <Button type="button" variant="outline" onClick={onAdd}>
+        + Add an income
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,429 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { LoanOptionGroup } from "@/components/ui/loan-option-group";
+import {
+  CurrencyInputWithSlider,
+  AddressAutocomplete,
+} from "@/components/ui/form-primitives";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/ui/accordion";
+import { IncomeBarChart } from "@/components/ui/income-bar-chart";
+import type { IncomeBarChartData } from "@/components/ui/income-bar-chart";
+import { formatCurrency } from "@/lib/format-currency";
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const EMPLOYMENT_TYPE_OPTIONS = [
+  { value: "payg", label: "PAYG" },
+  { value: "self-employed", label: "Self Employed" },
+  { value: "unemployed", label: "Unemployed" },
+  { value: "retired", label: "Retired" },
+];
+
+const EMPLOYMENT_STATUS_OPTIONS = [
+  { value: "primary", label: "Primary" },
+  { value: "secondary", label: "Secondary" },
+];
+
+const EMPLOYMENT_BASIS_OPTIONS = [
+  { value: "contract", label: "Contract" },
+  { value: "temporary", label: "Temporary" },
+  { value: "casual", label: "Casual" },
+];
+
+const INCOME_FREQUENCY_OPTIONS = [
+  { value: "monthly", label: "Monthly" },
+  { value: "weekly", label: "Weekly" },
+];
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type IncomeEmploymentType =
+  | "payg"
+  | "self-employed"
+  | "unemployed"
+  | "retired";
+
+export type IncomeEmploymentStatus = "primary" | "secondary";
+
+export type IncomeEmploymentBasis =
+  | "contract"
+  | "temporary"
+  | "casual"
+  | "full-time"
+  | "part-time";
+
+export type IncomeFrequency = "monthly" | "weekly";
+
+export type IncomeCompanyType = "public" | "private";
+
+export type IncomeWorkSource = {
+  id: string;
+  /** Accordion header label — defaults to "Main Income Source" */
+  label?: string;
+  employmentType?: IncomeEmploymentType;
+  employmentStatus?: IncomeEmploymentStatus;
+  employmentBasis?: IncomeEmploymentBasis;
+  jobTitle?: string;
+  startDate?: string;
+  /** Whether still in this position — when false, endDate is required */
+  stillInPosition?: boolean;
+  endDate?: string;
+  companyName?: string;
+  companyAddress?: string;
+  incomeAmount?: number;
+  incomeFrequency?: IncomeFrequency;
+  companyType?: IncomeCompanyType;
+};
+
+export type IncomeWorkDetailsProps = {
+  /** Rendered as "{applicantName} Income" in the heading */
+  applicantName: string;
+  /** Total from Open Banking — shown in summary card above the chart */
+  totalIncome?: number;
+  /** Monthly income data for the IncomeBarChart */
+  incomeData?: IncomeBarChartData | null;
+  /** Work Details accordion sources */
+  sources: IncomeWorkSource[];
+  onSourceChange?: (id: string, updates: Partial<IncomeWorkSource>) => void;
+  onAddSource?: () => void;
+  /** "Add More Account +" button in the summary card */
+  onConnectMore?: () => void;
+  className?: string;
+};
+
+// ─── Income source form ───────────────────────────────────────────────────────
+
+function IncomeSourceForm({
+  source,
+  onChange,
+}: {
+  source: IncomeWorkSource;
+  onChange: (updates: Partial<IncomeWorkSource>) => void;
+}) {
+  return (
+    <div className="flex flex-col gap-4 pt-2">
+      {/* Employment type */}
+      <LoanOptionGroup
+        options={EMPLOYMENT_TYPE_OPTIONS}
+        value={source.employmentType ?? ""}
+        onChange={(v) => {
+          if (typeof v === "string")
+            onChange({ employmentType: v as IncomeEmploymentType });
+        }}
+      />
+
+      {/* Employment Status */}
+      <LoanOptionGroup
+        title="Employment Status"
+        options={EMPLOYMENT_STATUS_OPTIONS}
+        value={source.employmentStatus ?? ""}
+        onChange={(v) => {
+          if (typeof v === "string")
+            onChange({ employmentStatus: v as IncomeEmploymentStatus });
+        }}
+      />
+
+      {/* Employment Type (basis) */}
+      <LoanOptionGroup
+        title="Employment Type"
+        options={EMPLOYMENT_BASIS_OPTIONS}
+        value={source.employmentBasis ?? ""}
+        onChange={(v) => {
+          if (typeof v === "string")
+            onChange({ employmentBasis: v as IncomeEmploymentBasis });
+        }}
+      />
+
+      {/* Job Title */}
+      <div className="flex flex-col gap-1.5">
+        <label className="text-label-small text-muted-foreground">
+          Job Title
+        </label>
+        <Input
+          value={source.jobTitle ?? ""}
+          onChange={(e) => onChange({ jobTitle: e.target.value })}
+          placeholder="e.g. Software Engineer"
+        />
+      </div>
+
+      {/* Start Date + optional End Date (shown side-by-side when not still in position) */}
+      <div
+        className={
+          source.stillInPosition === false
+            ? "grid grid-cols-2 gap-3"
+            : undefined
+        }
+      >
+        <div className="flex flex-col gap-1.5">
+          <label className="text-label-small text-muted-foreground">
+            Start Date
+          </label>
+          <Input
+            type="date"
+            value={source.startDate ?? ""}
+            onChange={(e) => onChange({ startDate: e.target.value })}
+          />
+        </div>
+        {source.stillInPosition === false && (
+          <div className="flex flex-col gap-1.5">
+            <label className="text-label-small text-muted-foreground">
+              End Date
+            </label>
+            <Input
+              type="date"
+              value={source.endDate ?? ""}
+              onChange={(e) => onChange({ endDate: e.target.value })}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Still in position checkbox */}
+      <div className="flex items-center gap-2">
+        <Checkbox
+          id={`${source.id}-still-in-position`}
+          checked={source.stillInPosition ?? true}
+          onCheckedChange={(checked) =>
+            onChange({ stillInPosition: checked === true })
+          }
+        />
+        <label
+          htmlFor={`${source.id}-still-in-position`}
+          className="text-body-small cursor-pointer"
+        >
+          Still in position
+        </label>
+      </div>
+
+      {/* Company Name */}
+      <div className="flex flex-col gap-1.5">
+        <label className="text-label-small text-muted-foreground">
+          Company Name
+        </label>
+        <Input
+          value={source.companyName ?? ""}
+          onChange={(e) => onChange({ companyName: e.target.value })}
+          placeholder="e.g. Acme Corporation"
+        />
+      </div>
+
+      {/* Company Address — autocomplete */}
+      <div className="flex flex-col gap-1.5">
+        <label className="text-label-small text-muted-foreground">
+          Company Address
+        </label>
+        <AddressAutocomplete
+          value={source.companyAddress ?? ""}
+          onValueChange={(v) => onChange({ companyAddress: v })}
+        />
+      </div>
+
+      {/* Income Amount + Frequency — input/slider left, toggle right */}
+      <div className="flex flex-col gap-1.5">
+        <label className="text-label-small text-muted-foreground">
+          Income Amount
+        </label>
+        <div className="flex items-start gap-3">
+          <CurrencyInputWithSlider
+            className="flex-1"
+            value={source.incomeAmount ?? 0}
+            min={0}
+            max={50000}
+            step={100}
+            onValueChange={(v) => onChange({ incomeAmount: v })}
+          />
+          <LoanOptionGroup
+            className="shrink-0"
+            options={INCOME_FREQUENCY_OPTIONS}
+            value={source.incomeFrequency ?? ""}
+            onChange={(v) => {
+              if (typeof v === "string")
+                onChange({ incomeFrequency: v as IncomeFrequency });
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Type of Company */}
+      <div className="flex flex-col gap-2">
+        <span className="text-label-small text-muted-foreground">
+          Type of Company
+        </span>
+        <RadioGroup
+          value={source.companyType}
+          onValueChange={(v) =>
+            onChange({ companyType: v as IncomeCompanyType })
+          }
+          className="flex flex-row gap-4"
+        >
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="public" id={`${source.id}-public`} />
+            <label
+              htmlFor={`${source.id}-public`}
+              className="text-body-small cursor-pointer"
+            >
+              Public
+            </label>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="private" id={`${source.id}-private`} />
+            <label
+              htmlFor={`${source.id}-private`}
+              className="text-body-small cursor-pointer"
+            >
+              Private
+            </label>
+          </div>
+        </RadioGroup>
+      </div>
+    </div>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * IncomeWorkDetails — Income section of the loan application wizard.
+ *
+ * Shows:
+ * 1. "{applicantName} Income" heading
+ * 2. Open Banking summary card — total, mini bar chart, "Add More Account +"
+ * 3. Income Sources — "Total Income" indicator bar
+ * 4. Work Details — accordion of employment source forms
+ *
+ * Figma: WealthX-Backoffice---Mobile-App — node 19308:53126
+ */
+export function IncomeWorkDetails({
+  applicantName,
+  totalIncome,
+  incomeData,
+  sources,
+  onSourceChange,
+  onAddSource,
+  onConnectMore,
+  className,
+}: IncomeWorkDetailsProps) {
+  const [openItems, setOpenItems] = React.useState<string[]>(
+    sources.length > 0 ? [sources[0].id] : [],
+  );
+
+  // Auto-open any source that was added after initial render
+  React.useEffect(() => {
+    setOpenItems((current) => {
+      const currentSet = new Set(current);
+      const newIds = sources
+        .map((s) => s.id)
+        .filter((id) => !currentSet.has(id));
+      return newIds.length > 0 ? [...current, ...newIds] : current;
+    });
+  }, [sources]);
+
+  return (
+    <div className={cn("flex flex-col gap-6 font-sans", className)}>
+      {/* Heading */}
+      <h2 className="text-h1 text-foreground">{applicantName}&apos;s Income</h2>
+
+      {/* Open Banking summary — left card + right chart */}
+      {totalIncome !== undefined && (
+        <div className="flex items-center gap-4">
+          {/* Left: bordered card — amount + button */}
+          <Card className="shrink-0 w-[202px]">
+            <CardContent className="flex flex-col gap-3 p-4">
+              <div className="flex flex-col gap-1 flex-1">
+                <span className="text-h2 text-foreground">
+                  {formatCurrency(totalIncome)}
+                </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>
+
+          {/* Right: bare bar chart with Y-axis + X-axis */}
+          {incomeData && (
+            <IncomeBarChart
+              incomeData={incomeData}
+              bare
+              showLegend={false}
+              showYAxis
+              showXAxis
+              defaultPeriod={12}
+              height={160}
+              className="flex-1"
+            />
+          )}
+        </div>
+      )}
+
+      {/* Income Sources */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-h3 text-foreground">Income Sources</h3>
+        <div className="flex flex-col gap-1.5">
+          <span className="text-label-small text-muted-foreground">
+            Total Income
+          </span>
+          {/* Full-width indicator bar — green when totalIncome > 0, muted otherwise */}
+          <div
+            className={cn(
+              "h-5 w-full",
+              totalIncome ? "bg-primary" : "bg-muted",
+            )}
+          />
+        </div>
+      </div>
+
+      {/* Work Details */}
+      <div className="flex flex-col gap-3">
+        <h3 className="text-h3 text-foreground">Work Details</h3>
+        <Accordion
+          type="multiple"
+          value={openItems}
+          onValueChange={setOpenItems}
+          className="border-t border-border"
+        >
+          {sources.map((source) => (
+            <AccordionItem key={source.id} value={source.id}>
+              <AccordionTrigger>
+                {source.label ?? "Main Income Source"}
+              </AccordionTrigger>
+              <AccordionContent className="text-foreground">
+                <IncomeSourceForm
+                  source={source}
+                  onChange={(updates) => onSourceChange?.(source.id, updates)}
+                />
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-fit"
+          onClick={onAddSource}
+        >
+          Add More +
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/incoming-outgoings-card.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import {
+  TrendingUp,
+  Home,
+  ShoppingBag,
+  CreditCard,
+  PiggyBank,
+  TrendingDown,
+} from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export type IncomingOutgoingsLabel =
+  | "Total Income"
+  | "Living Expenses"
+  | "Lifestyle Expenses"
+  | "Debt Repayments"
+  | "Surplus Income & Savings"
+  | "Over Spending";
+
+export interface IncomingOutgoingsItem {
+  label: IncomingOutgoingsLabel;
+  /** Dollar value */
+  value: number;
+  /** CSS color string for the bar fill and icon */
+  color: string;
+  /** CSS color string for the bar track background */
+  bgColor: string;
+  /** Bar fill width as a percentage 0–100 */
+  pct: number;
+}
+
+export interface IncomingOutgoingsCardProps {
+  items: IncomingOutgoingsItem[];
+  title?: string;
+  className?: string;
+}
+
+// ─── Icon map ─────────────────────────────────────────────────────────────────
+
+const ICON_MAP: Record<
+  IncomingOutgoingsLabel,
+  React.ComponentType<{ size?: number; className?: string }>
+> = {
+  "Total Income": TrendingUp,
+  "Living Expenses": Home,
+  "Lifestyle Expenses": ShoppingBag,
+  "Debt Repayments": CreditCard,
+  "Surplus Income & Savings": PiggyBank,
+  "Over Spending": TrendingDown,
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function IncomingOutgoingsCard({
+  items,
+  title = "Incoming and outgoings",
+  className,
+}: IncomingOutgoingsCardProps) {
+  if (!items?.length) return null;
+
+  return (
+    <Card className={cn("h-full", className)}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-5">
+        {items.map((item) => {
+          const Icon = ICON_MAP[item.label];
+          return (
+            <div key={item.label} className="flex flex-col gap-1">
+              <div className="flex items-center justify-between gap-2">
+                <span className="flex items-center gap-1.5 text-sm text-foreground">
+                  {Icon && (
+                    <Icon
+                      size={16}
+                      className="shrink-0"
+                      style={{ color: item.color }}
+                    />
+                  )}
+                  {item.label}
+                </span>
+                <span className="shrink-0 text-sm font-medium text-foreground">
+                  {formatCurrency(item.value)}
+                </span>
+              </div>
+              <div
+                className="h-1.5 w-full overflow-hidden"
+                style={{ background: item.bgColor }}
+                aria-hidden="true"
+              >
+                <div
+                  className="h-full transition-all"
+                  style={{
+                    background: item.color,
+                    width: `${Math.min(100, Math.max(0, item.pct))}%`,
+                  }}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}