@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/bank-statement-document-table.tsx

@@ -0,0 +1,222 @@
+import { Download, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+/**
+ * BankStatementDocumentTable — WealthX DS (L3 Organism)
+ *
+ * A table for managing bank statement documents inside the Bank Statement tab
+ * of `OpportunityDetailsDrawer`. Renders two instances per opportunity:
+ * one for the main applicant and one for the co-applicant.
+ *
+ * Features:
+ *   - Select-all / individual row checkboxes
+ *   - "Download All" bulk action (disabled when nothing selected)
+ *   - Per-row view (click name), download, and delete actions
+ *   - Loading and empty states
+ *
+ * Layer: L3 Organism
+ *
+ * Data source: bank statement documents fetched via `DocumentTypeFilter.GENERATED`
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface BankStatementDocument {
+  id: string;
+  /** Display filename shown in the Name column. */
+  name: string;
+  /** Document type label, e.g. "Bank Statement" or "Property Report". */
+  type: string;
+  /** ISO date string or pre-formatted date label. */
+  updatedDate: string;
+  /** When true, download / delete action buttons are shown for this row. */
+  hasDownload: boolean;
+  /**
+   * Whether the underlying PDF data is ready to view/download.
+   * `false` or `undefined` → action buttons are shown but disabled.
+   * `true` → clicking the name triggers `onView`; action buttons are enabled.
+   */
+  statementReady?: boolean;
+}
+
+export interface BankStatementDocumentTableProps {
+  /** Section heading rendered above the table (e.g. "Main Applicant"). */
+  title: string;
+  documents: BankStatementDocument[];
+  /** IDs of currently selected rows. */
+  selectedIds: string[];
+  /** Toggle a single row's selection. */
+  onToggle: (id: string) => void;
+  /** Toggle all rows (select all / deselect all). */
+  onToggleAll: () => void;
+  /** Bulk download — only enabled when `selectedIds.length > 0`. */
+  onDownloadAll: () => void;
+  /** Open the PDF viewer for this document (requires `statementReady`). */
+  onView: (doc: BankStatementDocument) => void;
+  /** Download a single document (requires `statementReady`). */
+  onDownload: (doc: BankStatementDocument) => void;
+  /** Open the delete confirmation for a document (requires `statementReady`). */
+  onDelete: (doc: BankStatementDocument) => void;
+  /** Show a loading row instead of documents. */
+  isLoading?: boolean;
+  /** Disable delete buttons while a deletion is in flight. */
+  isDeleting?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// BankStatementDocumentTable
+// ---------------------------------------------------------------------------
+
+export function BankStatementDocumentTable({
+  title,
+  documents,
+  selectedIds,
+  onToggle,
+  onToggleAll,
+  onDownloadAll,
+  onView,
+  onDownload,
+  onDelete,
+  isLoading = false,
+  isDeleting = false,
+  className,
+}: BankStatementDocumentTableProps) {
+  const areAllSelected =
+    documents.length > 0 && selectedIds.length === documents.length;
+  const isIndeterminate = selectedIds.length > 0 && !areAllSelected;
+
+  return (
+    <div
+      className={cn("flex flex-col gap-2", className)}
+      data-slot="bank-statement-document-table"
+    >
+      {/* ── Header ── */}
+      <div className="flex items-center justify-between">
+        <p className="text-body-large font-semibold">{title}</p>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onDownloadAll}
+          disabled={selectedIds.length === 0}
+        >
+          Download All
+        </Button>
+      </div>
+
+      {/* ── Table ── */}
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-10">
+              <Checkbox
+                checked={areAllSelected}
+                indeterminate={isIndeterminate}
+                onCheckedChange={onToggleAll}
+                aria-label="Select all"
+                disabled={isLoading || documents.length === 0}
+              />
+            </TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead>Type</TableHead>
+            <TableHead>Date</TableHead>
+            <TableHead className="w-20">Action</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={5} className="py-8 text-center">
+                <p className="text-body-medium text-muted-foreground">
+                  Loading documents…
+                </p>
+              </TableCell>
+            </TableRow>
+          ) : documents.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={5} className="py-8 text-center">
+                <p className="text-body-medium text-muted-foreground">
+                  No documents found
+                </p>
+              </TableCell>
+            </TableRow>
+          ) : (
+            documents.map((doc) => (
+              <TableRow key={doc.id}>
+                <TableCell>
+                  <Checkbox
+                    checked={selectedIds.includes(doc.id)}
+                    onCheckedChange={() => onToggle(doc.id)}
+                    aria-label={`Select ${doc.name}`}
+                  />
+                </TableCell>
+
+                {/* Name — clickable when download is ready */}
+                <TableCell>
+                  <p
+                    className={cn(
+                      "text-body-medium max-w-[360px] overflow-hidden text-ellipsis whitespace-nowrap font-semibold align-bottom inline-block",
+                      doc.hasDownload && doc.statementReady
+                        ? "cursor-pointer text-primary hover:underline"
+                        : "cursor-default",
+                    )}
+                    onClick={() => {
+                      if (doc.hasDownload && doc.statementReady) {
+                        onView(doc);
+                      }
+                    }}
+                  >
+                    {doc.name}
+                  </p>
+                </TableCell>
+
+                <TableCell>{doc.type}</TableCell>
+                <TableCell>{doc.updatedDate}</TableCell>
+
+                {/* Actions */}
+                <TableCell>
+                  <div className="flex gap-1">
+                    {doc.hasDownload && (
+                      <>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label="Download"
+                          onClick={() => onDownload(doc)}
+                          disabled={!doc.statementReady}
+                        >
+                          <Download className="size-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label="Delete"
+                          onClick={() => onDelete(doc)}
+                          disabled={!doc.statementReady || isDeleting}
+                        >
+                          <Trash2 className="size-4" />
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/components/ui/bank-statement-generate-dialog.tsx

@@ -0,0 +1,435 @@
+import { useEffect, useMemo, useState } from "react";
+import { format, parseISO, subDays } from "date-fns";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { DatePicker } from "@/components/ui/date-picker";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+/**
+ * BankStatementGenerateDialog — WealthX DS (L4 Template)
+ *
+ * Dialog for generating a new bank statement PDF from connected bank accounts.
+ * Shown when the user clicks "Generate" in the Bank Statement tab of
+ * `OpportunityDetailsDrawer`.
+ *
+ * Internal state:
+ *   - Statement name (Input)
+ *   - Range preset: 90 / 180 / 365 days or Custom (ToggleGroup + DatePickers)
+ *   - Applicant type: primary / secondary (Select)
+ *   - Selected bank account IDs (Table with Checkboxes)
+ *
+ * Data handed in via props (consumer owns fetching):
+ *   - `bankAccounts` — pre-filtered for the current `applicantType`
+ *   - `isLoadingAccounts` — spinner while the consumer re-fetches after type change
+ *
+ * Layer: L4 Template
+ *
+ * Data source: `useAggregatedBankAccounts` in backoffice (not included here)
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type BankStatementRangePreset = 90 | 180 | 365 | "custom";
+
+export interface BankStatementAccount {
+  id: string;
+  /** Display name for the account (e.g. "Everyday Savings"). */
+  name: string;
+  /** BSB / account number string. */
+  accountNo?: string;
+  /** Bank / institution name. */
+  institutionName?: string;
+  /** URL to institution logo image. */
+  institutionLogo?: string;
+  /** ISO date string of when the account was last synced. */
+  lastUpdated?: string;
+}
+
+export interface BankStatementGeneratePayload {
+  statementName: string;
+  rangePreset: BankStatementRangePreset;
+  /** ISO date string (YYYY-MM-DD). Set for all presets as well as custom. */
+  fromDate: string;
+  /** ISO date string (YYYY-MM-DD). Set for all presets as well as custom. */
+  toDate: string;
+  applicantType: "primary" | "secondary";
+  selectedAccountIds: string[];
+}
+
+export interface BankStatementGenerateDialogProps {
+  open: boolean;
+  onClose: () => void;
+  /**
+   * Called when the user clicks Generate (only if form is valid).
+   * Consumer is responsible for the actual API call.
+   */
+  onSubmit: (payload: BankStatementGeneratePayload) => void;
+  /**
+   * Called when the user changes the applicant type so the consumer can
+   * re-fetch / re-filter bank accounts for the new type.
+   */
+  onApplicantTypeChange?: (type: "primary" | "secondary") => void;
+  /**
+   * Bank accounts pre-filtered for the currently selected applicant type.
+   * Pass an empty array while loading.
+   */
+  bankAccounts: BankStatementAccount[];
+  /** Show "Co-Applicant" option in the applicant type Select. */
+  hasCoApplicant?: boolean;
+  /** Show a loading spinner in the accounts table while the consumer re-fetches. */
+  isLoadingAccounts?: boolean;
+  /** Show a loading indicator on the Generate button while the API call is in flight. */
+  isLoading?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function toIsoDate(date: Date): string {
+  return date.toISOString().slice(0, 10);
+}
+
+function presetToDateRange(preset: number): { from: string; to: string } {
+  const today = new Date();
+  return {
+    from: toIsoDate(subDays(today, preset - 1)),
+    to: toIsoDate(today),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// BankStatementGenerateDialog
+// ---------------------------------------------------------------------------
+
+export function BankStatementGenerateDialog({
+  open,
+  onClose,
+  onSubmit,
+  onApplicantTypeChange,
+  bankAccounts,
+  hasCoApplicant = false,
+  isLoadingAccounts = false,
+  isLoading = false,
+  className,
+}: BankStatementGenerateDialogProps) {
+  const [statementName, setStatementName] = useState("Bank Statement 1");
+  const [rangePreset, setRangePreset] = useState<BankStatementRangePreset>(90);
+  const [fromDate, setFromDate] = useState<string>("");
+  const [toDate, setToDate] = useState<string>("");
+  const [applicantType, setApplicantType] = useState<
+    "primary" | "secondary" | ""
+  >("");
+  const [selectedAccountIds, setSelectedAccountIds] = useState<string[]>([]);
+
+  // Reset form whenever the dialog opens.
+  useEffect(() => {
+    if (!open) return;
+    const timer = setTimeout(() => {
+      setStatementName("Bank Statement 1");
+      setApplicantType("");
+      setSelectedAccountIds([]);
+      const { from, to } = presetToDateRange(90);
+      setRangePreset(90);
+      setFromDate(from);
+      setToDate(to);
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [open]);
+
+  // ── Applicant type ───────────────────────────────────────────────────────
+
+  const handleApplicantTypeChange = (type: "primary" | "secondary") => {
+    setApplicantType(type);
+    setSelectedAccountIds([]);
+    onApplicantTypeChange?.(type);
+  };
+
+  // ── Date range preset ────────────────────────────────────────────────────
+
+  const applyPreset = (preset: BankStatementRangePreset) => {
+    setRangePreset(preset);
+    if (preset !== "custom") {
+      const { from, to } = presetToDateRange(preset);
+      setFromDate(from);
+      setToDate(to);
+    }
+  };
+
+  // ── Account selection ────────────────────────────────────────────────────
+
+  const areAllSelected =
+    bankAccounts.length > 0 &&
+    selectedAccountIds.length === bankAccounts.length;
+  const isSomeSelected = selectedAccountIds.length > 0 && !areAllSelected;
+
+  const handleToggleAccount = (id: string) => {
+    setSelectedAccountIds((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    );
+  };
+
+  const handleToggleAll = () => {
+    if (areAllSelected) {
+      setSelectedAccountIds([]);
+    } else {
+      setSelectedAccountIds(bankAccounts.map((a) => a.id));
+    }
+  };
+
+  // ── Period label for the accounts table ─────────────────────────────────
+
+  const periodLabel = useMemo(() => {
+    if (fromDate && toDate) {
+      return `${format(parseISO(fromDate), "dd MMM yyyy")} – ${format(parseISO(toDate), "dd MMM yyyy")}`;
+    }
+    return "—";
+  }, [fromDate, toDate]);
+
+  // ── Submit guard ─────────────────────────────────────────────────────────
+
+  const isSubmitDisabled =
+    !statementName.trim() ||
+    !applicantType ||
+    (rangePreset === "custom" && (!fromDate || !toDate)) ||
+    selectedAccountIds.length === 0;
+
+  const handleSubmit = () => {
+    if (isSubmitDisabled || !applicantType) return;
+    onSubmit({
+      statementName,
+      rangePreset,
+      fromDate,
+      toDate,
+      applicantType,
+      selectedAccountIds,
+    });
+  };
+
+  // ── Render ───────────────────────────────────────────────────────────────
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent
+        className={cn("max-w-[700px]", className)}
+        data-slot="bank-statement-generate-dialog"
+      >
+        <DialogHeader>
+          <DialogTitle>Generate Bank Statement</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          {/* Statement name */}
+          <Field>
+            <FieldLabel>Name</FieldLabel>
+            <Input
+              value={statementName}
+              onChange={(e) => setStatementName(e.target.value)}
+              placeholder="Bank Statement 1"
+            />
+          </Field>
+
+          {/* Date range preset */}
+          <div className="flex flex-col gap-2">
+            <span className="text-body-small text-muted-foreground">
+              Statement period
+            </span>
+            <ToggleGroup
+              type="single"
+              variant="outline"
+              value={[String(rangePreset)]}
+              onValueChange={(val) => {
+                if (val.length === 0) return;
+                const raw = val[0];
+                if (raw === "custom") {
+                  applyPreset("custom");
+                } else {
+                  applyPreset(Number(raw) as 90 | 180 | 365);
+                }
+              }}
+              className="w-full"
+            >
+              <ToggleGroupItem value="90" className="flex-1">
+                3 Months
+              </ToggleGroupItem>
+              <ToggleGroupItem value="180" className="flex-1">
+                6 Months
+              </ToggleGroupItem>
+              <ToggleGroupItem value="365" className="flex-1">
+                12 Months
+              </ToggleGroupItem>
+              <ToggleGroupItem value="custom" className="flex-1">
+                Custom
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+
+          {/* Custom date pickers */}
+          {rangePreset === "custom" && (
+            <div className="flex gap-3">
+              <DatePicker
+                value={fromDate ? parseISO(fromDate) : undefined}
+                onChange={(date) => setFromDate(date ? toIsoDate(date) : "")}
+                placeholder="From Date"
+                className="flex-1"
+              />
+              <DatePicker
+                value={toDate ? parseISO(toDate) : undefined}
+                onChange={(date) => setToDate(date ? toIsoDate(date) : "")}
+                placeholder="To Date"
+                className="flex-1"
+              />
+            </div>
+          )}
+
+          {/* Applicant type */}
+          <Select
+            value={applicantType}
+            onValueChange={(v) =>
+              handleApplicantTypeChange(v as "primary" | "secondary")
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Applicant Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="primary">Main applicant</SelectItem>
+              {hasCoApplicant && (
+                <SelectItem value="secondary">Co-applicant</SelectItem>
+              )}
+            </SelectContent>
+          </Select>
+
+          {/* Bank accounts table */}
+          {applicantType && (
+            <div className="mt-1">
+              {isLoadingAccounts && (
+                <div className="flex items-center justify-center p-6">
+                  <Spinner size="lg" />
+                </div>
+              )}
+
+              {!isLoadingAccounts && bankAccounts.length === 0 && (
+                <p className="py-4 text-center text-body-medium text-muted-foreground">
+                  No bank accounts found for the selected applicant
+                </p>
+              )}
+
+              {!isLoadingAccounts && bankAccounts.length > 0 && (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-10">
+                        <Checkbox
+                          checked={areAllSelected}
+                          indeterminate={isSomeSelected}
+                          onCheckedChange={handleToggleAll}
+                          aria-label="Select all accounts"
+                        />
+                      </TableHead>
+                      <TableHead>Account Name</TableHead>
+                      <TableHead>Account Number</TableHead>
+                      <TableHead>Period</TableHead>
+                      <TableHead>Last Updated</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {bankAccounts.map((account) => (
+                      <TableRow key={account.id}>
+                        <TableCell>
+                          <Checkbox
+                            checked={selectedAccountIds.includes(account.id)}
+                            onCheckedChange={() =>
+                              handleToggleAccount(account.id)
+                            }
+                            aria-label={`Select ${account.name}`}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            {account.institutionLogo && (
+                              <img
+                                src={account.institutionLogo}
+                                alt={account.institutionName ?? ""}
+                                className="size-8 rounded object-cover"
+                              />
+                            )}
+                            <span className="text-body-medium font-semibold">
+                              {account.name || account.institutionName || "—"}
+                            </span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-body-medium">
+                            {account.accountNo ?? "—"}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-body-medium">
+                            {periodLabel}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-body-medium">
+                            {account.lastUpdated
+                              ? format(
+                                  parseISO(account.lastUpdated),
+                                  "dd MMM yyyy",
+                                )
+                              : "—"}
+                          </span>
+                        </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>
+  );
+}