@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/property-asset-card.tsx

@@ -0,0 +1,221 @@
+import { Building2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { formatCurrency } from "@/lib/format-currency";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type PropertyMortgage = {
+  id: string;
+  /** Display label e.g. "Mortgage" */
+  label: string;
+  /** Loan type shown as a badge e.g. "Home Loan", "Investment Loan" */
+  type: string;
+  /** Monthly repayment shown in the accordion header */
+  monthlyRepayment: number;
+  /** Outstanding loan balance */
+  loanAmount: number;
+  /** Monthly repayment shown in Loan Details */
+  repaymentAmount: number;
+  /** Annual interest rate (%) */
+  interestRate: number;
+};
+
+export type PropertyAssetCardProps = {
+  /** Full property address */
+  address: string;
+  /** Asset category label shown below the address */
+  assetType?: string;
+  /** URL for the lending institution's logo — falls back to a building icon */
+  institutionLogoUrl?: string;
+  /** Current estimated market value */
+  estimatedValue: number;
+  /** Loan-to-value ratio (0–100) */
+  lvr?: number;
+  /** Net equity in dollars (estimatedValue − totalOwing) */
+  netEquity?: number;
+  /** Linked mortgage records */
+  mortgages?: PropertyMortgage[];
+  className?: string;
+};
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const EMPTY_MORTGAGES: PropertyMortgage[] = [];
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * PropertyAssetCard — summary card for a single property asset in the loan
+ * wizard Assets tab.
+ *
+ * Shows: institution logo, address, estimated value, interest rate + LVR stats,
+ * net equity highlight, and an expandable mortgage accordion with Loan Details
+ * and Property Statistics sub-sections.
+ *
+ * Figma: WealthX-Backoffice---Mobile-App — node 17418:41358
+ */
+export function PropertyAssetCard({
+  address,
+  assetType = "Property",
+  institutionLogoUrl,
+  estimatedValue,
+  lvr,
+  netEquity,
+  mortgages = EMPTY_MORTGAGES,
+  className,
+}: PropertyAssetCardProps) {
+  const primaryRate = mortgages[0]?.interestRate;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-4 border border-border p-4 font-sans",
+        className,
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex size-14 shrink-0 items-center justify-center bg-muted">
+          {institutionLogoUrl ? (
+            <img
+              src={institutionLogoUrl}
+              alt=""
+              className="size-full object-contain"
+            />
+          ) : (
+            <Building2
+              className="size-6 text-muted-foreground"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+
+        <div className="flex min-w-0 flex-1 items-start justify-between gap-2">
+          <div className="flex min-w-0 flex-col gap-0.5">
+            <span className="text-body-small font-semibold text-foreground">
+              {address}
+            </span>
+            <span className="text-body-small text-muted-foreground">
+              {assetType}
+            </span>
+          </div>
+          <span className="shrink-0 text-body-small font-semibold text-foreground">
+            {formatCurrency(estimatedValue)}
+          </span>
+        </div>
+      </div>
+
+      {(primaryRate != null || lvr != null) && (
+        <div className="flex gap-6 text-xs">
+          {primaryRate != null && (
+            <span className="text-muted-foreground">
+              Interest Rate:{" "}
+              <span className="font-semibold text-foreground">
+                {primaryRate}%
+              </span>
+            </span>
+          )}
+          {lvr != null && (
+            <span className="text-muted-foreground">
+              LVR <span className="font-semibold text-foreground">{lvr}%</span>
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className="border-t border-border" />
+
+      {netEquity != null && (
+        <div className="flex items-center justify-between border border-primary/40 bg-primary/10 px-4 py-3">
+          <span className="text-body-small font-semibold text-foreground">
+            Net Equity
+          </span>
+          <span className="text-body-small font-semibold text-foreground">
+            {formatCurrency(netEquity)}
+          </span>
+        </div>
+      )}
+
+      {mortgages.length > 0 && (
+        <Accordion type="multiple">
+          {mortgages.map((mortgage) => (
+            <AccordionItem key={mortgage.id} value={mortgage.id}>
+              <AccordionTrigger>
+                <div className="flex flex-1 items-center justify-between pr-2">
+                  <div className="flex flex-col gap-1.5 items-start">
+                    <span className="text-body-small font-semibold text-foreground">
+                      {mortgage.label}
+                    </span>
+                    <Badge variant="secondary">{mortgage.type}</Badge>
+                  </div>
+                  <span className="text-body-small font-semibold text-foreground">
+                    {formatCurrency(mortgage.monthlyRepayment)}
+                  </span>
+                </div>
+              </AccordionTrigger>
+
+              <AccordionContent>
+                <div className="flex flex-col gap-2 pt-1">
+                  <div className="flex flex-col gap-2 bg-muted/50 p-4">
+                    <span className="text-body-small font-semibold text-foreground">
+                      Loan Details
+                    </span>
+                    <DetailRow
+                      label="Loan Amount"
+                      value={formatCurrency(mortgage.loanAmount)}
+                    />
+                    <DetailRow
+                      label="Repayment Amount"
+                      value={formatCurrency(mortgage.repaymentAmount)}
+                    />
+                    <DetailRow
+                      label="Interest Rate"
+                      value={`${mortgage.interestRate}%`}
+                    />
+                  </div>
+
+                  <div className="flex flex-col gap-2 border border-primary/40 bg-primary/10 p-4">
+                    <span className="text-body-small font-semibold text-foreground">
+                      Property Statistics
+                    </span>
+                    <DetailRow
+                      label="Property Estimate"
+                      value={formatCurrency(estimatedValue)}
+                    />
+                    {lvr != null && <DetailRow label="LVR" value={`${lvr}%`} />}
+                    {netEquity != null && (
+                      <>
+                        <div className="border-t border-primary/40" />
+                        <DetailRow
+                          label="Equity Available"
+                          value={formatCurrency(netEquity)}
+                        />
+                      </>
+                    )}
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      )}
+    </div>
+  );
+}
+
+// ─── Internal helpers ─────────────────────────────────────────────────────────
+
+function DetailRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className="text-xs font-semibold text-foreground">{value}</span>
+    </div>
+  );
+}

package/src/components/ui/property-list-carousel.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { Button } from "./button";
+import { Plus } from "lucide-react";
+
+export type PropertyCarouselType = "homeLoan" | "property";
+
+export interface PropertyCarouselItem {
+  id: string;
+  address: string;
+  /** Estimated value or equity */
+  value: number;
+  /** Linked loan balance, if any */
+  loanBalance?: number;
+}
+
+export interface PropertyListCarouselProps {
+  properties: PropertyCarouselItem[];
+  type: PropertyCarouselType;
+  /** When provided, shows an "Add Property" button at the end (property type only) */
+  onAddProperty?: () => void;
+  className?: string;
+}
+
+function PropertyCard({ item }: { item: PropertyCarouselItem }) {
+  return (
+    <div className="flex shrink-0 flex-col gap-1.5 border border-border p-3 w-44">
+      <p className="text-xs text-muted-foreground truncate">{item.address}</p>
+      <p className="text-sm font-semibold tabular-nums text-foreground">
+        {formatCurrency(item.value)}
+      </p>
+      {item.loanBalance !== undefined && (
+        <p className="text-xs text-muted-foreground tabular-nums">
+          Loan: {formatCurrency(item.loanBalance)}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function PropertyListCarousel({
+  properties,
+  type,
+  onAddProperty,
+  className,
+}: PropertyListCarouselProps) {
+  const showAddButton = type === "property" && onAddProperty;
+
+  return (
+    <div
+      className={cn(
+        "flex gap-2 overflow-x-auto pb-1 scrollbar-none",
+        className,
+      )}
+    >
+      {properties.map((property) => (
+        <PropertyCard key={property.id} item={property} />
+      ))}
+
+      {showAddButton && (
+        <Button
+          variant="outline"
+          onClick={onAddProperty}
+          className="shrink-0 h-auto w-44 flex-col gap-1.5 border-dashed p-3 text-muted-foreground"
+        >
+          <Plus className="h-4 w-4" />
+          <span className="text-xs">Add Property</span>
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/ui/property-report-dialog.tsx

@@ -0,0 +1,355 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Trash2, Plus } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Field, FieldLabel } from "@/components/ui/field";
+import {
+  AddressAutocomplete,
+  type AddressOption,
+} from "@/components/ui/form-primitives";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+/**
+ * PropertyReportDialog — WealthX DS (L4 Template)
+ *
+ * Dialog for generating a property valuation report from the scenario's
+ * linked properties. Opened from the Bank Statement tab of
+ * `OpportunityDetailsDrawer` when the user selects "Property Report" and
+ * clicks "Generate".
+ *
+ * Internal state:
+ *   - Report name (Input)
+ *   - Manually added properties (via AddressAutocomplete + Add button)
+ *   - Selected property IDs (Table with Checkboxes)
+ *
+ * Data handed in via props (consumer owns fetching):
+ *   - `properties` — pre-loaded properties from the scenario (API list)
+ *   - `isLoadingProperties` — spinner while fetching
+ *   - `searchResults` — address search results driven by `onSearchQueryChange`
+ *
+ * Layer: L4 Template
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PropertyItem {
+  id: string;
+  address?: string;
+  propertyType?: string;
+  /** Estimated value in dollars. */
+  estimateValue?: number;
+}
+
+export interface PropertySearchResult {
+  /** Unique property identifier returned by the address search service. */
+  id: string;
+  /** Full address string shown in the dropdown. */
+  address: string;
+}
+
+export interface PropertyReportPayload {
+  reportName: string;
+  selectedPropertyIds: string[];
+}
+
+export interface PropertyReportDialogProps {
+  open: boolean;
+  onClose: () => void;
+  /**
+   * Called when the user clicks Generate (only when form is valid).
+   * Consumer is responsible for the actual API call.
+   */
+  onSubmit: (payload: PropertyReportPayload) => void;
+  /** Pre-loaded properties from the scenario's loan data. */
+  properties: PropertyItem[];
+  /** Provide `true` while the consumer is fetching the scenario's properties. */
+  isLoadingProperties?: boolean;
+  /**
+   * Address search results for the autocomplete dropdown.
+   * Consumer debounces and fetches when `onSearchQueryChange` fires.
+   */
+  searchResults?: PropertySearchResult[];
+  /**
+   * Called when the user types in the address search input (debounce externally).
+   * Pass an empty string when the query is cleared.
+   */
+  onSearchQueryChange?: (query: string) => void;
+  /** Show a loading indicator on the Generate button while the API call is in flight. */
+  isLoading?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// PropertyReportDialog
+// ---------------------------------------------------------------------------
+
+export function PropertyReportDialog({
+  open,
+  onClose,
+  onSubmit,
+  properties,
+  isLoadingProperties = false,
+  searchResults = [],
+  onSearchQueryChange,
+  isLoading = false,
+  className,
+}: PropertyReportDialogProps) {
+  const [reportName, setReportName] = useState("Property Report 1");
+  const [selectedPropertyIds, setSelectedPropertyIds] = useState<string[]>([]);
+
+  // Properties added manually via the address search (not in the API list)
+  const [manualProperties, setManualProperties] = useState<PropertyItem[]>([]);
+
+  // Address autocomplete state
+  const [addressInputValue, setAddressInputValue] = useState("");
+  const [selectedSuggestion, setSelectedSuggestion] =
+    useState<PropertySearchResult | null>(null);
+
+  // Convert searchResults → AddressOption[] for AddressAutocomplete
+  const addressOptions = useMemo<AddressOption[]>(
+    () => searchResults.map((r) => ({ id: r.id, label: r.address })),
+    [searchResults],
+  );
+
+  // Reset form whenever the dialog opens
+  useEffect(() => {
+    if (!open) return;
+    setReportName("Property Report 1");
+    setSelectedPropertyIds([]);
+    setManualProperties([]);
+    setAddressInputValue("");
+    setSelectedSuggestion(null);
+    onSearchQueryChange?.("");
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Combined list shown in the table
+  const allProperties = useMemo<PropertyItem[]>(
+    () => [...properties, ...manualProperties],
+    [properties, manualProperties],
+  );
+
+  // ── Property selection ───────────────────────────────────────────────────
+
+  const areAllSelected =
+    allProperties.length > 0 &&
+    selectedPropertyIds.length === allProperties.length;
+  const isSomeSelected = selectedPropertyIds.length > 0 && !areAllSelected;
+
+  const handleToggleProperty = (id: string) => {
+    setSelectedPropertyIds((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    );
+  };
+
+  const handleToggleAll = () => {
+    if (areAllSelected) {
+      setSelectedPropertyIds([]);
+    } else {
+      setSelectedPropertyIds(allProperties.map((p) => p.id));
+    }
+  };
+
+  // ── Address search & manual add ──────────────────────────────────────────
+
+  const handleAddProperty = useCallback(() => {
+    if (!selectedSuggestion) return;
+    const { id, address } = selectedSuggestion;
+
+    const alreadyExists = allProperties.some((p) => p.id === id);
+    if (alreadyExists) return; // silently skip (button is disabled when already added)
+
+    setManualProperties((prev) => [...prev, { id, address }]);
+    setSelectedSuggestion(null);
+    setAddressInputValue("");
+    onSearchQueryChange?.("");
+  }, [selectedSuggestion, allProperties, onSearchQueryChange]);
+
+  const handleRemoveManual = useCallback((id: string) => {
+    setManualProperties((prev) => prev.filter((p) => p.id !== id));
+    setSelectedPropertyIds((prev) => prev.filter((x) => x !== id));
+  }, []);
+
+  const isManual = (id: string) => manualProperties.some((p) => p.id === id);
+
+  const isAddDisabled =
+    !selectedSuggestion ||
+    allProperties.some((p) => p.id === selectedSuggestion.id);
+
+  // ── Submit guard ─────────────────────────────────────────────────────────
+
+  const isSubmitDisabled =
+    !reportName.trim() || selectedPropertyIds.length === 0;
+
+  const handleSubmit = () => {
+    if (isSubmitDisabled) return;
+    onSubmit({ reportName, selectedPropertyIds });
+  };
+
+  // ── Render ───────────────────────────────────────────────────────────────
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent
+        size="auto"
+        className={cn(className)}
+        data-slot="property-report-dialog"
+      >
+        <DialogHeader>
+          <DialogTitle>Property Report</DialogTitle>
+        </DialogHeader>
+
+        <Separator />
+
+        <div className="flex flex-col gap-4 pt-1">
+          {/* Report name */}
+          <Field>
+            <FieldLabel>Name</FieldLabel>
+            <Input
+              value={reportName}
+              onChange={(e) => setReportName(e.target.value)}
+              placeholder="Property Report 1"
+            />
+          </Field>
+
+          {/* Address search + Add button */}
+          <div className="flex items-end gap-2">
+            <Field className="flex-1">
+              <FieldLabel>Search property</FieldLabel>
+              <AddressAutocomplete
+                value={addressInputValue}
+                suggestions={addressOptions}
+                placeholder="Start typing an address…"
+                onValueChange={(v) => {
+                  setAddressInputValue(v);
+                  setSelectedSuggestion(null);
+                  onSearchQueryChange?.(v);
+                }}
+                onSelect={(opt) => {
+                  setSelectedSuggestion({ id: opt.id, address: opt.label });
+                }}
+              />
+            </Field>
+            <Button
+              variant="outline"
+              onClick={handleAddProperty}
+              disabled={isAddDisabled}
+            >
+              <Plus className="size-4" />
+              Add
+            </Button>
+          </div>
+
+          {/* Properties table */}
+          <div>
+            {isLoadingProperties ? (
+              <div className="flex items-center justify-center p-6">
+                <Spinner size="lg" />
+              </div>
+            ) : allProperties.length === 0 ? (
+              <p className="py-4 text-center text-body-medium text-muted-foreground">
+                No properties found. Use the search above to add properties.
+              </p>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={areAllSelected}
+                        indeterminate={isSomeSelected}
+                        onCheckedChange={handleToggleAll}
+                        aria-label="Select all properties"
+                      />
+                    </TableHead>
+                    <TableHead>Address</TableHead>
+                    <TableHead>Property Type</TableHead>
+                    <TableHead>Estimate</TableHead>
+                    <TableHead className="w-10" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {allProperties.map((property) => (
+                    <TableRow key={property.id}>
+                      <TableCell>
+                        <Checkbox
+                          checked={selectedPropertyIds.includes(property.id)}
+                          onCheckedChange={() =>
+                            handleToggleProperty(property.id)
+                          }
+                          aria-label={`Select ${property.address ?? property.id}`}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-body-medium font-semibold">
+                          {property.address ?? "—"}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-body-medium">
+                          {property.propertyType ?? "—"}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-body-medium">
+                          {property.estimateValue
+                            ? formatCurrency(property.estimateValue)
+                            : "—"}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        {isManual(property.id) && (
+                          <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            aria-label="Remove property"
+                            onClick={() => handleRemoveManual(property.id)}
+                          >
+                            <Trash2 className="size-4" />
+                          </Button>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={isSubmitDisabled}
+            loading={isLoading}
+          >
+            Generate
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}