@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/index.tsx

@@ -90,6 +90,16 @@ export type {
   AiAgent,
 } from "./ui/add-column-modal";
 
+export {
+  AgentEvaluationCard,
+  showAgentEvaluationToast,
+} from "./ui/agent-evaluation-toast";
+export type {
+  AgentEvaluationData,
+  AgentEvaluationResult,
+  AgentEvaluationCardProps,
+} from "./ui/agent-evaluation-toast";
+
 export { AddLeadModal } from "./ui/add-lead-modal";
 export type { AddLeadModalProps, LeadContact } from "./ui/add-lead-modal";
 
@@ -273,6 +283,13 @@ export type {
   AlertSummaryPeriod,
 } from "./ui/backoffice-alerts-chart";
 
+export { BackofficeAlertMatchingChart } from "./ui/backoffice-alert-matching-chart";
+export type {
+  BackofficeAlertMatchingChartProps,
+  AlertMatchingDataPoint,
+  AlertMatchingPeriod,
+} from "./ui/backoffice-alert-matching-chart";
+
 export { BackofficeConnectionsChart } from "./ui/backoffice-connections-chart";
 export type {
   BackofficeConnectionsChartProps,
@@ -280,6 +297,13 @@ export type {
   ConnectionSummaryPeriod,
 } from "./ui/backoffice-connections-chart";
 
+export { BackofficeContactMatchingChart } from "./ui/backoffice-contact-matching-chart";
+export type {
+  BackofficeContactMatchingChartProps,
+  ContactMatchingDataPoint,
+  ContactMatchingPeriod,
+} from "./ui/backoffice-contact-matching-chart";
+
 export { BackofficeContactHistoryChart } from "./ui/backoffice-contact-history-chart";
 export type {
   BackofficeContactHistoryChartProps,
@@ -290,6 +314,34 @@ export type {
 export { Badge, badgeVariants } from "./ui/badge";
 export type { BadgeProps } from "./ui/badge";
 
+export { BankStatementDocumentTable } from "./ui/bank-statement-document-table";
+export type {
+  BankStatementDocumentTableProps,
+  BankStatementDocument,
+} from "./ui/bank-statement-document-table";
+
+export { BankStatementGenerateDialog } from "./ui/bank-statement-generate-dialog";
+export type {
+  BankStatementGenerateDialogProps,
+  BankStatementGeneratePayload,
+  BankStatementAccount,
+  BankStatementRangePreset,
+} from "./ui/bank-statement-generate-dialog";
+
+export { BankStatementPDFViewer } from "./ui/bank-statement-pdf-viewer";
+export type {
+  BankStatementPDFViewerProps,
+  BankStatementViewerAccount,
+} from "./ui/bank-statement-pdf-viewer";
+
+export { PropertyReportDialog } from "./ui/property-report-dialog";
+export type {
+  PropertyReportDialogProps,
+  PropertyReportPayload,
+  PropertyItem,
+  PropertySearchResult,
+} from "./ui/property-report-dialog";
+
 export { BorrowingCapacityLineChart } from "./ui/borrowing-capacity-line-chart";
 export type {
   BorrowingCapacityLineChartProps,
@@ -385,6 +437,59 @@ export type {
   ComboboxSeparatorProps,
 } from "./ui/combobox";
 
+export { CsvImportModal } from "./ui/csv-import-modal";
+export type { CsvImportModalProps } from "./ui/csv-import-modal";
+
+export { CreateContactModal } from "./ui/create-contact-modal";
+export type {
+  CreateContactModalProps,
+  CreateContactFormData,
+  StaffOption,
+} from "./ui/create-contact-modal";
+
+export { DeleteContactComponent } from "./ui/delete-contact-component";
+export type { DeleteContactComponentProps } from "./ui/delete-contact-component";
+
+export { ReviewAlertsDialog } from "./ui/review-alerts-dialog";
+export type {
+  ReviewAlertsDialogProps,
+  ReviewableAlert,
+  AlertSeverity,
+} from "./ui/review-alerts-dialog";
+
+export {
+  ContactAlertQueryBuilder,
+  ContactAlertDialog,
+  ALERT_QUERY_FIELDS,
+} from "./ui/contact-alert-dialog";
+export type {
+  AlertQueryCombinator,
+  AlertQueryOperator,
+  AlertQueryFieldType,
+  ContactAlertSeverity,
+  AlertQueryField,
+  AlertQueryRule,
+  AlertQueryGroup,
+  ContactAlertQueryBuilderProps,
+  ContactAlertDialogProps,
+} from "./ui/contact-alert-dialog";
+
+export {
+  ShareDetailsDialog,
+  EmailTemplateDialog,
+} from "./ui/share-details-dialog";
+export type {
+  ShareDetailsDialogProps,
+  EmailTemplateDialogProps,
+} from "./ui/share-details-dialog";
+
+export { FilePreviewDialog } from "./ui/file-preview-dialog";
+export type {
+  FilePreviewDialogProps,
+  FilePreviewState,
+  CsvPreviewColumn,
+} from "./ui/file-preview-dialog";
+
 export {
   DataTable,
   DataTableToolbar,
@@ -405,11 +510,18 @@ export type {
 
 export { DatePicker } from "./ui/date-picker";
 
+export { ApplicantDocumentChecklist } from "./ui/applicant-document-checklist";
+export type {
+  ApplicantDocumentChecklistProps,
+  DocumentChecklistItem,
+} from "./ui/applicant-document-checklist";
+
 export { DocumentChecklistTemplate } from "./ui/document-checklist-template";
 export type {
   DocumentChecklistTemplateProps,
   ChecklistCategory,
 } from "./ui/document-checklist-template";
+
 export type { DatePickerProps } from "./ui/date-picker";
 
 export {
@@ -940,6 +1052,66 @@ export type { AuthLogoProps } from "./ui/auth-logo";
 export { AuthPageLayout } from "./ui/auth-page-layout";
 export type { AuthPageLayoutProps } from "./ui/auth-page-layout";
 
+export {
+  SignupVideoPanel,
+  SignupShell,
+  FrontendShell,
+} from "./ui/signup-shell";
+export type {
+  SignupVideoPanelProps,
+  SignupShellProps,
+  FrontendShellProps,
+} from "./ui/signup-shell";
+
+export {
+  SectionHeading,
+  FormField,
+  PasswordField,
+  StaffRowItem,
+} from "./ui/signup-form-primitives";
+export type {
+  SectionHeadingProps,
+  FormFieldProps,
+  PasswordFieldProps,
+  StaffMember,
+  StaffRowItemProps,
+} from "./ui/signup-form-primitives";
+
+export {
+  PersonalDetailsStep,
+  CompanyInfoStep,
+  BrandingInfoStep,
+  InviteStaffView,
+  PaymentView,
+  StripeView,
+  BackofficeSuccessStep,
+} from "./ui/backoffice-signup-steps";
+export type {
+  PersonalDetailsStepProps,
+  InviteStaffViewProps,
+  PaymentViewProps,
+  StripeViewProps,
+} from "./ui/backoffice-signup-steps";
+
+export {
+  PhoneVerifyStep,
+  BrokerRequestStep,
+  ConnectBankStep,
+  RetrieveBankDataStep,
+  ConnectPropertyStep,
+  BuyingGoalStep,
+  FrontendSuccessStep,
+} from "./ui/frontend-signup-steps";
+export type {
+  PhoneVerifyStepProps,
+  BrokerFormValues,
+  BrokerRequestStepProps,
+  ConnectBankStepProps,
+  ConnectPropertyStepProps,
+  BuyingGoalStepProps,
+  FrontendSuccessStepProps,
+} from "./ui/frontend-signup-steps";
+
 export { PasswordStrengthTooltip } from "./ui/password-strength-tooltip";
 export type { PasswordStrengthTooltipProps } from "./ui/password-strength-tooltip";
 
@@ -1026,3 +1198,54 @@ export type {
   TransactionsLiabilitiesBreakdownChartProps,
   LiabilitySegment,
 } from "./ui/transactions-liabilities-breakdown-doughnut-chart";
+
+export { ApplicationMobileLayout } from "./ui/application-mobile-layout";
+export type { ApplicationMobileLayoutProps } from "./ui/application-mobile-layout";
+
+export { IncomeWorkDetails } from "./ui/income-work-details";
+export type {
+  IncomeWorkDetailsProps,
+  IncomeWorkSource,
+  IncomeEmploymentType,
+  IncomeEmploymentStatus,
+  IncomeEmploymentBasis,
+  IncomeFrequency,
+  IncomeCompanyType,
+} from "./ui/income-work-details";
+
+export { LoanApplicationBadge } from "./ui/loan-application-badge";
+export type {
+  LoanApplicationBadgeProps,
+  LoanApplicationBadgeStatus,
+} from "./ui/loan-application-badge";
+
+export { LoanEntryShell } from "./ui/loan-entry-shell";
+export type { LoanEntryShellProps } from "./ui/loan-entry-shell";
+
+export { LoanWizardShell } from "./ui/loan-wizard-shell";
+export type {
+  LoanWizardShellProps,
+  LoanWizardSection,
+  LoanWizardApplicantOption,
+} from "./ui/loan-wizard-shell";
+
+export {
+  ResourceCarousel,
+  ResourceCenterHeader,
+  ResourceDocumentCard,
+  ResourceEmailTemplateCard,
+  ResourceModal,
+  ResourceVideoCard,
+} from "./ui/resource-center";
+export type {
+  ResourceCarouselProps,
+  ResourceCenterHeaderProps,
+  ResourceDocumentCardProps,
+  ResourceDocumentItem,
+  ResourceEmailTemplateCardProps,
+  ResourceEmailTemplateItem,
+  ResourceModalAttachment,
+  ResourceModalProps,
+  ResourceVideoCardProps,
+  ResourceVideoItem,
+} from "./ui/resource-center";

package/src/components/ui/about-you-form.tsx

@@ -0,0 +1,397 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { DatePicker } from "@/components/ui/date-picker";
+import {
+  LoanOptionGroup,
+  type LoanOptionItem,
+} from "@/components/ui/loan-option-group";
+
+// ─── Option lists (mirror loan-application-constants.tsx) ─────────────────────
+
+const TITLE_OPTIONS: LoanOptionItem[] = [
+  { value: "Dr", label: "Dr" },
+  { value: "Miss", label: "Miss" },
+  { value: "Mrs", label: "Mrs" },
+  { value: "Mr", label: "Mr" },
+  { value: "Prof", label: "Prof" },
+  { value: "Rev", label: "Rev" },
+];
+
+const GENDER_OPTIONS: LoanOptionItem[] = [
+  { value: "M", label: "Male" },
+  { value: "F", label: "Female" },
+  { value: "PS", label: "Prefer Not To Say" },
+];
+
+const CITIZEN_STATUS_OPTIONS: LoanOptionItem[] = [
+  { value: "australian-citizen", label: "Australian Citizen" },
+  { value: "permanent-resident", label: "Permanent Resident" },
+  { value: "non-citizen", label: "Non Citizen" },
+];
+
+const APPLICANT_RELATIONSHIP_OPTIONS: LoanOptionItem[] = [
+  { value: "Married", label: "Married" },
+  { value: "DeFacto", label: "Defacto" },
+  { value: "Friend", label: "Friend" },
+  { value: "FamilyMember", label: "Family Member" },
+];
+
+const MARITAL_STATUS_OPTIONS: LoanOptionItem[] = [
+  { value: "Single", label: "Single" },
+  { value: "Married", label: "Married" },
+  { value: "DeFacto", label: "De Facto" },
+  { value: "Separated", label: "Separated" },
+  { value: "Divorced", label: "Divorced" },
+  { value: "Widowed", label: "Widowed" },
+];
+
+const YES_NO_OPTIONS: LoanOptionItem[] = [
+  { value: "Yes", label: "Yes" },
+  { value: "No", label: "No" },
+];
+
+const PROPERTY_OWNERSHIP_OPTIONS: LoanOptionItem[] = [
+  { value: "trust", label: "Yes — via Trust" },
+  { value: "company", label: "Yes — via Company" },
+  { value: "no", label: "No" },
+];
+
+export const MAX_DEPENDANTS = 20;
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type AboutYouFormData = {
+  title?: string;
+  gender?: string;
+  citizenStatus?: string;
+  /** Only relevant for joint applications */
+  applicantRelationship?: string;
+  maritalStatus?: string;
+  hasDependants?: "Yes" | "No";
+  dependants?: number;
+  dependantDobs?: (Date | null)[];
+  /** Only relevant for joint applications where co-applicant is married/defacto */
+  childrenShared?: "Yes" | "No";
+  propertyOwnership?: "trust" | "company" | "no";
+  trustOrCompanyName?: string;
+  tradingAs?: string;
+  dateCommenced?: string;
+  numberOfDirectors?: number | null;
+  numberOfEmployees?: number | null;
+};
+
+export type AboutYouFormProps = {
+  /** Current form values */
+  data: AboutYouFormData;
+  /** Called on every field change */
+  onChange: (data: AboutYouFormData) => void;
+  /**
+   * When provided, the Relationship field is shown with this label,
+   * e.g. "Relationship with James Harbour"
+   */
+  coApplicantName?: string;
+  /** Whether this form is for the main applicant (affects relationship field visibility) */
+  isMainApplicant?: boolean;
+  className?: string;
+};
+
+// ─── Internal helpers ─────────────────────────────────────────────────────────
+
+type FieldRowProps = {
+  label: string;
+  htmlFor?: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+function FieldRow({ label, htmlFor, children, className }: FieldRowProps) {
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <Label htmlFor={htmlFor}>{label}</Label>
+      {children}
+    </div>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * AboutYouForm — applicant personal status form in the loan wizard.
+ *
+ * Matches the frontend's `YourDetailsPersonalStatusStep`.
+ * Fields: Title · Gender · Citizen Status · (Relationship) ·
+ *         Marital Status · Dependants · Property Ownership
+ *
+ * Uses `LoanOptionGroup` for all button-group selections and
+ * `DatePicker` for dependant DOBs.
+ *
+ * Figma: WealthX-Backoffice---Mobile-App (loan wizard — About You tab)
+ */
+export function AboutYouForm({
+  data,
+  onChange,
+  coApplicantName,
+  isMainApplicant = true,
+  className,
+}: AboutYouFormProps) {
+  const hasCoApplicant = Boolean(coApplicantName);
+
+  const isRelationshipMarriedOrDefacto =
+    data.applicantRelationship === "Married" ||
+    data.applicantRelationship === "DeFacto";
+
+  const isRelationshipFriendOrFamily =
+    data.applicantRelationship === "Friend" ||
+    data.applicantRelationship === "FamilyMember";
+
+  const showMaritalStatus = !hasCoApplicant || isRelationshipFriendOrFamily;
+
+  const showDependantsSection = !(
+    !isMainApplicant &&
+    isRelationshipMarriedOrDefacto &&
+    data.childrenShared === "Yes"
+  );
+
+  const showPropertyDetails =
+    data.propertyOwnership === "trust" || data.propertyOwnership === "company";
+
+  function set<K extends keyof AboutYouFormData>(
+    key: K,
+    value: AboutYouFormData[K],
+  ) {
+    onChange({ ...data, [key]: value });
+  }
+
+  function handleHasDependantsChange(value: string) {
+    if (value === "Yes") {
+      onChange({
+        ...data,
+        hasDependants: "Yes",
+        dependants: data.dependants ?? 1,
+        dependantDobs: data.dependantDobs?.length ? data.dependantDobs : [null],
+      });
+    } else {
+      onChange({
+        ...data,
+        hasDependants: "No",
+        dependants: 0,
+        dependantDobs: [],
+        childrenShared: undefined,
+      });
+    }
+  }
+
+  function handleDependantsCountChange(count: number) {
+    const current = data.dependantDobs ?? [];
+    const dobs = Array.from({ length: count }, (_, i) => current[i] ?? null);
+    onChange({ ...data, dependants: count, dependantDobs: dobs });
+  }
+
+  function handlePropertyOwnershipChange(value: string) {
+    if (value === "no") {
+      onChange({
+        ...data,
+        propertyOwnership: "no",
+        trustOrCompanyName: "",
+        tradingAs: "",
+        dateCommenced: "",
+        numberOfDirectors: null,
+        numberOfEmployees: null,
+      });
+    } else {
+      set("propertyOwnership", value as "trust" | "company");
+    }
+  }
+
+  function handleDependantDobChange(index: number, date: Date | undefined) {
+    const dobs = [...(data.dependantDobs ?? [])];
+    dobs[index] = date ?? null;
+    set("dependantDobs", dobs);
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-8 font-sans", className)}>
+      <LoanOptionGroup
+        title="Title"
+        options={TITLE_OPTIONS}
+        value={data.title ?? ""}
+        onChange={(v) => set("title", v as string)}
+      />
+
+      <LoanOptionGroup
+        title="Gender"
+        options={GENDER_OPTIONS}
+        value={data.gender ?? ""}
+        onChange={(v) => set("gender", v as string)}
+      />
+
+      <LoanOptionGroup
+        title="Citizen Status"
+        options={CITIZEN_STATUS_OPTIONS}
+        value={data.citizenStatus ?? ""}
+        onChange={(v) => set("citizenStatus", v as string)}
+      />
+
+      {hasCoApplicant && (
+        <LoanOptionGroup
+          title={`Relationship with ${coApplicantName}`}
+          options={APPLICANT_RELATIONSHIP_OPTIONS}
+          value={data.applicantRelationship ?? ""}
+          onChange={(v) => set("applicantRelationship", v as string)}
+        />
+      )}
+
+      {showMaritalStatus && (
+        <LoanOptionGroup
+          title="Marital Status"
+          options={MARITAL_STATUS_OPTIONS}
+          value={data.maritalStatus ?? ""}
+          onChange={(v) => set("maritalStatus", v as string)}
+        />
+      )}
+
+      {showDependantsSection && (
+        <>
+          <LoanOptionGroup
+            title="Do you have any dependants?"
+            options={YES_NO_OPTIONS}
+            value={data.hasDependants ?? ""}
+            onChange={(v) => handleHasDependantsChange(v as string)}
+          />
+
+          {data.hasDependants === "Yes" && (
+            <div className="flex flex-col gap-4">
+              <FieldRow label="Number of dependants" htmlFor="dependantsCount">
+                <Input
+                  id="dependantsCount"
+                  type="number"
+                  inputMode="numeric"
+                  min={1}
+                  max={MAX_DEPENDANTS}
+                  value={data.dependants ?? 1}
+                  onChange={(e) => {
+                    const v = parseInt(e.target.value, 10);
+                    if (!isNaN(v) && v >= 1 && v <= MAX_DEPENDANTS) {
+                      handleDependantsCountChange(v);
+                    }
+                  }}
+                />
+              </FieldRow>
+
+              {/* Children shared (joint + married/defacto) */}
+              {hasCoApplicant && isRelationshipMarriedOrDefacto && (
+                <LoanOptionGroup
+                  title="Are your dependants shared with the co-applicant?"
+                  options={YES_NO_OPTIONS}
+                  value={data.childrenShared ?? ""}
+                  onChange={(v) => set("childrenShared", v as "Yes" | "No")}
+                />
+              )}
+
+              {(data.dependantDobs ?? []).map((dob, index) => (
+                <FieldRow
+                  key={index}
+                  label={`Dependant ${index + 1} — Date of Birth`}
+                  htmlFor={`dob-${index}`}
+                >
+                  <DatePicker
+                    value={dob ?? undefined}
+                    onChange={(date) => handleDependantDobChange(index, date)}
+                    placeholder="Select date"
+                  />
+                </FieldRow>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      <LoanOptionGroup
+        title="Do You Own Property in a Trust or Company?"
+        options={PROPERTY_OWNERSHIP_OPTIONS}
+        value={data.propertyOwnership ?? ""}
+        onChange={(v) => handlePropertyOwnershipChange(v as string)}
+      />
+
+      {showPropertyDetails && (
+        <div className="flex flex-col gap-4 border border-border p-4">
+          <h2 className="text-sm font-semibold text-foreground">
+            {data.propertyOwnership === "trust"
+              ? "Trust Details"
+              : "Company Details"}
+          </h2>
+
+          <div className="grid grid-cols-2 gap-3">
+            <FieldRow
+              label={
+                data.propertyOwnership === "trust"
+                  ? "Trust Name"
+                  : "Company Name"
+              }
+              htmlFor="trustOrCompanyName"
+            >
+              <Input
+                id="trustOrCompanyName"
+                value={data.trustOrCompanyName ?? ""}
+                onChange={(e) => set("trustOrCompanyName", e.target.value)}
+              />
+            </FieldRow>
+
+            <FieldRow label="Trading as" htmlFor="tradingAs">
+              <Input
+                id="tradingAs"
+                value={data.tradingAs ?? ""}
+                onChange={(e) => set("tradingAs", e.target.value)}
+              />
+            </FieldRow>
+
+            <FieldRow label="Date Commenced" htmlFor="dateCommenced">
+              <Input
+                id="dateCommenced"
+                placeholder="DD/MM/YYYY"
+                value={data.dateCommenced ?? ""}
+                onChange={(e) => set("dateCommenced", e.target.value)}
+              />
+            </FieldRow>
+
+            <FieldRow label="Number of Directors" htmlFor="numberOfDirectors">
+              <Input
+                id="numberOfDirectors"
+                type="number"
+                inputMode="numeric"
+                min={1}
+                value={data.numberOfDirectors ?? ""}
+                onChange={(e) =>
+                  set(
+                    "numberOfDirectors",
+                    e.target.value ? parseInt(e.target.value, 10) : null,
+                  )
+                }
+              />
+            </FieldRow>
+
+            {data.propertyOwnership === "company" && (
+              <FieldRow label="Number of Employees" htmlFor="numberOfEmployees">
+                <Input
+                  id="numberOfEmployees"
+                  type="number"
+                  inputMode="numeric"
+                  min={0}
+                  value={data.numberOfEmployees ?? ""}
+                  onChange={(e) =>
+                    set(
+                      "numberOfEmployees",
+                      e.target.value ? parseInt(e.target.value, 10) : null,
+                    )
+                  }
+                />
+              </FieldRow>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}