@wealthx/shadcn 1.5.10 → 1.5.12

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

@@ -1,6 +1,5 @@
 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";
@@ -111,6 +110,15 @@ export interface BankStatementGenerateDialogProps {
   className?: string;
 }
 
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const APPLICANT_TYPE_LABELS: Record<"primary" | "secondary", string> = {
+  primary: "Main applicant",
+  secondary: "Co-applicant",
+};
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -144,8 +152,11 @@ export function BankStatementGenerateDialog({
 }: BankStatementGenerateDialogProps) {
   const [statementName, setStatementName] = useState("Bank Statement 1");
   const [rangePreset, setRangePreset] = useState<BankStatementRangePreset>(90);
-  const [fromDate, setFromDate] = useState<string>("");
-  const [toDate, setToDate] = useState<string>("");
+  // Initialise immediately so the Period column never shows "—" on first open.
+  const [fromDate, setFromDate] = useState<string>(
+    () => presetToDateRange(90).from,
+  );
+  const [toDate, setToDate] = useState<string>(() => presetToDateRange(90).to);
   const [applicantType, setApplicantType] = useState<
     "primary" | "secondary" | ""
   >("");
@@ -185,6 +196,12 @@ export function BankStatementGenerateDialog({
     }
   };
 
+  const handlePresetChange = (val: string[]) => {
+    if (val.length === 0) return;
+    const raw = val[0];
+    applyPreset(raw === "custom" ? "custom" : (Number(raw) as 90 | 180 | 365));
+  };
+
   // ── Account selection ────────────────────────────────────────────────────
 
   const areAllSelected =
@@ -240,7 +257,8 @@ export function BankStatementGenerateDialog({
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
       <DialogContent
-        className={cn("max-w-[700px]", className)}
+        size="3xl"
+        className={className}
         data-slot="bank-statement-generate-dialog"
       >
         <DialogHeader>
@@ -267,15 +285,7 @@ export function BankStatementGenerateDialog({
               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);
-                }
-              }}
+              onValueChange={handlePresetChange}
               className="w-full"
             >
               <ToggleGroupItem value="90" className="flex-1">
@@ -317,14 +327,19 @@ export function BankStatementGenerateDialog({
             onValueChange={(v) =>
               handleApplicantTypeChange(v as "primary" | "secondary")
             }
+            items={APPLICANT_TYPE_LABELS}
           >
             <SelectTrigger className="w-full">
               <SelectValue placeholder="Applicant Type" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="primary">Main applicant</SelectItem>
+              <SelectItem value="primary">
+                {APPLICANT_TYPE_LABELS.primary}
+              </SelectItem>
               {hasCoApplicant && (
-                <SelectItem value="secondary">Co-applicant</SelectItem>
+                <SelectItem value="secondary">
+                  {APPLICANT_TYPE_LABELS.secondary}
+                </SelectItem>
               )}
             </SelectContent>
           </Select>
@@ -363,53 +378,61 @@ export function BankStatementGenerateDialog({
                     </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 || "—"}
+                    {bankAccounts.map((account) => {
+                      const isSelected = selectedAccountIds.includes(
+                        account.id,
+                      );
+                      return (
+                        <TableRow
+                          key={account.id}
+                          data-state={isSelected ? "selected" : undefined}
+                        >
+                          <TableCell>
+                            <Checkbox
+                              checked={isSelected}
+                              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 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>
-                          </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>
-                    ))}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
                   </TableBody>
                 </Table>
               )}

package/src/components/ui/contact-alert-dialog/contact-alert-dialog.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AlertCircleIcon, EyeIcon, InfoIcon } from "lucide-react";
 import {
   Query,
   Utils as QbUtils,
@@ -17,6 +18,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
 import type {
   ContactAlertDialogProps,
   ContactAlertQueryBuilderProps,
@@ -161,7 +163,23 @@ export function ContactAlertDialog({
             {(
               ["NEED_ACTION", "WATCH", "HEALTHY"] as ContactAlertSeverity[]
             ).map((s) => (
-              <ToggleGroupItem key={s} value={s}>
+              <ToggleGroupItem
+                key={s}
+                value={s}
+                className={cn(
+                  s === "NEED_ACTION" &&
+                    "data-pressed:bg-destructive/10 data-pressed:inset-ring-destructive data-pressed:text-destructive-text data-pressed:hover:bg-destructive/10",
+                  s === "WATCH" &&
+                    "data-pressed:bg-warning/10 data-pressed:inset-ring-warning data-pressed:text-warning-text data-pressed:hover:bg-warning/10",
+                  s === "HEALTHY" &&
+                    "data-pressed:bg-info/10 data-pressed:inset-ring-info data-pressed:text-info-text data-pressed:hover:bg-info/10",
+                )}
+              >
+                {s === "NEED_ACTION" && (
+                  <AlertCircleIcon className="size-3.5" />
+                )}
+                {s === "WATCH" && <EyeIcon className="size-3.5" />}
+                {s === "HEALTHY" && <InfoIcon className="size-3.5" />}
                 {SEVERITY_LABELS[s]}
               </ToggleGroupItem>
             ))}

package/src/components/ui/opportunity-card.tsx

@@ -6,6 +6,8 @@ import {
   Users,
   Calendar,
   Check,
+  Copy,
+  Link2,
   MoreVertical,
   Clock,
   ArrowRight,
@@ -782,6 +784,54 @@ export function OpportunityCard({
 // Primary action: send them the loan application link.
 // ---------------------------------------------------------------------------
 
+function normalizeUrl(url: string): string {
+  return `https://${url.replace(/^https?:\/\//, "")}`;
+}
+
+/** Shortened + copyable loan application URL row. */
+function LoanApplicationLink({ url }: { url: string }) {
+  const [copied, setCopied] = useState(false);
+  const href = normalizeUrl(url);
+
+  function handleCopy() {
+    navigator.clipboard.writeText(href).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <p className="text-caption text-muted-foreground">
+        Or the link below to fill out the loan application directly.
+      </p>
+      <div className="flex items-center gap-1.5">
+        <Link2 className="size-4 shrink-0 text-muted-foreground" />
+        <a
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+          className="min-w-0 flex-1 truncate text-body-small text-primary underline-offset-2 hover:underline"
+        >
+          {url}
+        </a>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
+          aria-label="Copy link"
+        >
+          {copied ? (
+            <Check className="size-4 text-success-text" />
+          ) : (
+            <Copy className="size-4" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 export interface LeadCardProps {
   id: string;
   customerName: string;
@@ -816,18 +866,18 @@ export function LeadCard({
       {/* ── Customer info + delete menu ── */}
       <div className="flex items-start justify-between gap-2">
         <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <span className="text-sm font-semibold text-foreground">
+          <span className="text-label-medium text-foreground">
             {customerName}
           </span>
           {customerPhone && (
-            <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <Phone className="size-3 shrink-0" aria-hidden="true" />
+            <span className="flex items-center gap-1.5 text-caption text-muted-foreground">
+              <Phone className="size-3.5 shrink-0" aria-hidden="true" />
               {customerPhone}
             </span>
           )}
           {customerEmail && (
-            <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <Mail className="size-3 shrink-0" aria-hidden="true" />
+            <span className="flex items-center gap-1.5 text-caption text-muted-foreground">
+              <Mail className="size-3.5 shrink-0" aria-hidden="true" />
               <span className="truncate">{customerEmail}</span>
             </span>
           )}
@@ -871,21 +921,7 @@ export function LeadCard({
             Send Loan Application Request
           </Button>
           {loanApplicationUrl && (
-            <p className="text-xs text-muted-foreground">
-              Or the link below to fill out the loan application directly.
-              <br />
-              <a
-                href={`https://${loanApplicationUrl.replace(
-                  /^https?:\/\//,
-                  "",
-                )}`}
-                target="_blank"
-                rel="noreferrer"
-                className="text-primary underline-offset-2 hover:underline"
-              >
-                {loanApplicationUrl}
-              </a>
-            </p>
+            <LoanApplicationLink url={loanApplicationUrl} />
           )}
         </div>
       )}

package/src/components/ui/share-details-dialog.tsx

@@ -12,6 +12,8 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Spinner } from "@/components/ui/spinner";
 import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
 
 // ---------------------------------------------------------------------------
 // Shared helper
@@ -236,3 +238,252 @@ export function EmailTemplateDialog({
     </Dialog>
   );
 }
+
+// ---------------------------------------------------------------------------
+// ShareContactDialog
+// ---------------------------------------------------------------------------
+
+export interface InternalAdvisor {
+  id: string;
+  name: string;
+  role: string;
+  practice: string;
+}
+
+export interface ShareContactDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  contactName: string;
+  internalAdvisors: InternalAdvisor[];
+  onShareInternal: (advisorId: string, notes: string) => void;
+  onShareExternal: (payload: {
+    firstName: string;
+    lastName: string;
+    email: string;
+    notes: string;
+  }) => void;
+  isSending?: boolean;
+  className?: string;
+}
+
+export function ShareContactDialog({
+  open,
+  onOpenChange,
+  contactName,
+  internalAdvisors,
+  onShareInternal,
+  onShareExternal,
+  isSending = false,
+  className,
+}: ShareContactDialogProps) {
+  const [tab, setTab] = React.useState("internal");
+  const [search, setSearch] = React.useState("");
+  const [selectedId, setSelectedId] = React.useState<string | null>(null);
+  const [internalNotes, setInternalNotes] = React.useState("");
+  const [firstName, setFirstName] = React.useState("");
+  const [lastName, setLastName] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [externalNotes, setExternalNotes] = React.useState("");
+
+  function reset() {
+    setTab("internal");
+    setSearch("");
+    setSelectedId(null);
+    setInternalNotes("");
+    setFirstName("");
+    setLastName("");
+    setEmail("");
+    setExternalNotes("");
+  }
+
+  function handleOpenChange(v: boolean) {
+    if (!v) reset();
+    onOpenChange(v);
+  }
+
+  const filtered = internalAdvisors.filter((a) => {
+    const q = search.toLowerCase();
+    return a.name.toLowerCase().includes(q) || a.role.toLowerCase().includes(q);
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={isSending ? undefined : handleOpenChange}>
+      <DialogContent size="md" className={className}>
+        <DialogHeader>
+          <DialogTitle>Share Contact's Information</DialogTitle>
+        </DialogHeader>
+
+        <p className="text-sm text-muted-foreground">
+          Share{" "}
+          <span className="font-medium text-foreground">{contactName}</span>
+          's information with an advisor.
+        </p>
+
+        <Tabs value={tab} onValueChange={setTab}>
+          <TabsList className="w-full">
+            <TabsTrigger value="internal" className="flex-1">
+              Internal Advisor
+            </TabsTrigger>
+            <TabsTrigger value="external" className="flex-1">
+              External / Referral
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="internal" className="mt-4 flex flex-col gap-4">
+            <Field label="Search Advisor">
+              <Input
+                placeholder="Search by name or role…"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </Field>
+
+            <div className="max-h-[200px] overflow-y-auto border border-border divide-y divide-border">
+              {filtered.length === 0 ? (
+                <p className="px-3 py-4 text-center text-sm text-muted-foreground">
+                  No advisors found.
+                </p>
+              ) : (
+                filtered.map((a) => {
+                  const isSelected = selectedId === a.id;
+                  return (
+                    <button
+                      key={a.id}
+                      type="button"
+                      onClick={() => setSelectedId(a.id)}
+                      className={cn(
+                        "flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-muted/40",
+                        isSelected && "bg-primary/5",
+                      )}
+                    >
+                      <div
+                        className={cn(
+                          "flex size-4 shrink-0 items-center justify-center rounded-full border-2",
+                          isSelected
+                            ? "border-primary"
+                            : "border-border bg-background",
+                        )}
+                      >
+                        {isSelected && (
+                          <div className="size-2 rounded-full bg-primary" />
+                        )}
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium">{a.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {a.role} · {a.practice}
+                        </p>
+                      </div>
+                    </button>
+                  );
+                })
+              )}
+            </div>
+
+            <Field id="sc-int-notes" label="Notes">
+              <Textarea
+                id="sc-int-notes"
+                placeholder="Optional message for the advisor…"
+                rows={3}
+                value={internalNotes}
+                onChange={(e) => setInternalNotes(e.target.value)}
+                disabled={isSending}
+              />
+            </Field>
+          </TabsContent>
+
+          <TabsContent value="external" className="mt-4 flex flex-col gap-4">
+            <div className="grid grid-cols-2 gap-4">
+              <Field id="sc-first" label="First Name">
+                <Input
+                  id="sc-first"
+                  placeholder="First name"
+                  value={firstName}
+                  onChange={(e) => setFirstName(e.target.value)}
+                  disabled={isSending}
+                />
+              </Field>
+              <Field id="sc-last" label="Last Name">
+                <Input
+                  id="sc-last"
+                  placeholder="Last name"
+                  value={lastName}
+                  onChange={(e) => setLastName(e.target.value)}
+                  disabled={isSending}
+                />
+              </Field>
+            </div>
+
+            <Field id="sc-email" label="Email" required>
+              <Input
+                id="sc-email"
+                type="email"
+                placeholder="advisor@company.com.au"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                disabled={isSending}
+              />
+            </Field>
+
+            <Field id="sc-ext-notes" label="Notes">
+              <Textarea
+                id="sc-ext-notes"
+                placeholder="Optional message…"
+                rows={3}
+                value={externalNotes}
+                onChange={(e) => setExternalNotes(e.target.value)}
+                disabled={isSending}
+              />
+            </Field>
+          </TabsContent>
+        </Tabs>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+            disabled={isSending}
+          >
+            Cancel
+          </Button>
+          {tab === "internal" ? (
+            <Button
+              onClick={() => onShareInternal(selectedId!, internalNotes)}
+              disabled={!selectedId || isSending}
+            >
+              {isSending ? (
+                <>
+                  <Spinner className="size-3.5" />
+                  Sharing…
+                </>
+              ) : (
+                "Share Contact"
+              )}
+            </Button>
+          ) : (
+            <Button
+              onClick={() =>
+                onShareExternal({
+                  firstName,
+                  lastName,
+                  email,
+                  notes: externalNotes,
+                })
+              }
+              disabled={!email || isSending}
+            >
+              {isSending ? (
+                <>
+                  <Spinner className="size-3.5" />
+                  Sending…
+                </>
+              ) : (
+                "Send Invite"
+              )}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}