@wealthx/shadcn 1.5.12 → 1.5.14

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

@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/dialog";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { PaginationNavButtons } from "@/components/ui/pagination";
 import {
   Select,
   SelectContent,
@@ -41,7 +42,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
  *   - 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)
+ *   - Selected bank account IDs (Table with Checkboxes, paginated at 5/page)
  *
  * Data handed in via props (consumer owns fetching):
  *   - `bankAccounts` — pre-filtered for the current `applicantType`
@@ -119,6 +120,8 @@ const APPLICANT_TYPE_LABELS: Record<"primary" | "secondary", string> = {
   secondary: "Co-applicant",
 };
 
+const ACCOUNTS_PAGE_SIZE = 5;
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -161,18 +164,20 @@ export function BankStatementGenerateDialog({
     "primary" | "secondary" | ""
   >("");
   const [selectedAccountIds, setSelectedAccountIds] = useState<string[]>([]);
+  const [accountPage, setAccountPage] = useState(1);
 
   // Reset form whenever the dialog opens.
   useEffect(() => {
     if (!open) return;
     const timer = setTimeout(() => {
-      setStatementName("Bank Statement 1");
-      setApplicantType("");
-      setSelectedAccountIds([]);
       const { from, to } = presetToDateRange(90);
+      setStatementName("Bank Statement 1");
       setRangePreset(90);
       setFromDate(from);
       setToDate(to);
+      setApplicantType("");
+      setSelectedAccountIds([]);
+      setAccountPage(1);
     }, 0);
     return () => clearTimeout(timer);
   }, [open]);
@@ -182,12 +187,17 @@ export function BankStatementGenerateDialog({
   const handleApplicantTypeChange = (type: "primary" | "secondary") => {
     setApplicantType(type);
     setSelectedAccountIds([]);
+    setAccountPage(1);
     onApplicantTypeChange?.(type);
   };
 
   // ── Date range preset ────────────────────────────────────────────────────
 
-  const applyPreset = (preset: BankStatementRangePreset) => {
+  const handlePresetChange = (val: string[]) => {
+    if (val.length === 0) return;
+    const raw = val[0];
+    const preset: BankStatementRangePreset =
+      raw === "custom" ? "custom" : (Number(raw) as 90 | 180 | 365);
     setRangePreset(preset);
     if (preset !== "custom") {
       const { from, to } = presetToDateRange(preset);
@@ -196,12 +206,6 @@ 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 =
@@ -216,13 +220,17 @@ export function BankStatementGenerateDialog({
   };
 
   const handleToggleAll = () => {
-    if (areAllSelected) {
-      setSelectedAccountIds([]);
-    } else {
-      setSelectedAccountIds(bankAccounts.map((a) => a.id));
-    }
+    setSelectedAccountIds(areAllSelected ? [] : bankAccounts.map((a) => a.id));
   };
 
+  // ── Accounts pagination ──────────────────────────────────────────────────
+
+  const accountPageCount = Math.ceil(bankAccounts.length / ACCOUNTS_PAGE_SIZE);
+  const pagedAccounts = bankAccounts.slice(
+    (accountPage - 1) * ACCOUNTS_PAGE_SIZE,
+    accountPage * ACCOUNTS_PAGE_SIZE,
+  );
+
   // ── Period label for the accounts table ─────────────────────────────────
 
   const periodLabel = useMemo(() => {
@@ -347,94 +355,114 @@ export function BankStatementGenerateDialog({
           {/* Bank accounts table */}
           {applicantType && (
             <div className="mt-1">
-              {isLoadingAccounts && (
+              {isLoadingAccounts ? (
                 <div className="flex items-center justify-center p-6">
                   <Spinner size="lg" />
                 </div>
-              )}
-
-              {!isLoadingAccounts && bankAccounts.length === 0 && (
+              ) : 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) => {
-                      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 || "—"}
+              ) : (
+                <>
+                  <Table className="table-fixed">
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-10">
+                          <Checkbox
+                            checked={areAllSelected}
+                            indeterminate={isSomeSelected}
+                            onCheckedChange={handleToggleAll}
+                            aria-label="Select all accounts"
+                          />
+                        </TableHead>
+                        <TableHead>Account Name</TableHead>
+                        <TableHead className="w-40">Account Number</TableHead>
+                        <TableHead className="w-52">Period</TableHead>
+                        <TableHead className="w-28">Last Updated</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {pagedAccounts.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 min-w-0 items-center gap-2">
+                                {account.institutionLogo && (
+                                  <img
+                                    src={account.institutionLogo}
+                                    alt={account.institutionName ?? ""}
+                                    className="size-8 shrink-0 object-cover"
+                                  />
+                                )}
+                                <span className="truncate text-body-medium font-semibold">
+                                  {account.name ||
+                                    account.institutionName ||
+                                    "—"}
+                                </span>
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              <span className="truncate text-body-medium">
+                                {account.accountNo ?? "—"}
+                              </span>
+                            </TableCell>
+                            <TableCell>
+                              <span className="truncate text-body-medium">
+                                {periodLabel}
+                              </span>
+                            </TableCell>
+                            <TableCell>
+                              <span className="truncate 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>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
+                            </TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                  {accountPageCount > 1 && (
+                    <div className="flex items-center justify-between pt-2">
+                      <span className="text-body-small text-muted-foreground">
+                        {(accountPage - 1) * ACCOUNTS_PAGE_SIZE + 1}–
+                        {Math.min(
+                          accountPage * ACCOUNTS_PAGE_SIZE,
+                          bankAccounts.length,
+                        )}{" "}
+                        of {bankAccounts.length} accounts
+                      </span>
+                      <PaginationNavButtons
+                        hasPrev={accountPage > 1}
+                        hasNext={accountPage < accountPageCount}
+                        onFirst={() => setAccountPage(1)}
+                        onPrev={() => setAccountPage((p) => p - 1)}
+                        onNext={() => setAccountPage((p) => p + 1)}
+                        onLast={() => setAccountPage(accountPageCount)}
+                      />
+                    </div>
+                  )}
+                </>
               )}
             </div>
           )}

package/src/components/ui/bank-statement-pdf-viewer.tsx

@@ -143,8 +143,8 @@ export function BankStatementPDFViewer({
         data-slot="bank-statement-pdf-viewer"
       >
         {/* Navigation bar */}
-        <div className="flex shrink-0 items-center justify-between border-b border-border px-3 py-2">
-          <div className="flex items-center gap-2">
+        <div className="flex min-w-0 shrink-0 items-center justify-between border-b border-border px-3 py-2">
+          <div className="flex min-w-0 items-center gap-2">
             <Button
               variant="ghost"
               size="icon-sm"
@@ -155,7 +155,7 @@ export function BankStatementPDFViewer({
               <ChevronLeft className="size-4" />
             </Button>
 
-            <span className="text-body-medium tabular-nums">
+            <span className="shrink-0 text-body-medium tabular-nums">
               Account {currentAccountIndex + 1} of {accounts.length}
             </span>
 
@@ -169,7 +169,7 @@ export function BankStatementPDFViewer({
               <ChevronRight className="size-4" />
             </Button>
 
-            <span className="ml-2 text-body-medium text-muted-foreground">
+            <span className="ml-2 min-w-0 truncate text-body-medium text-muted-foreground">
               {accountLabel}
             </span>
           </div>

package/src/components/ui/resource-center/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * Resource Center — WealthX Backoffice
+ *
+ * Full-page resource hub with video cards, email template cards, document cards,
+ * a hero header, and a generic carousel container.
+ *
+ * Component hierarchy:
+ *   Molecule → ResourceVideoCard, ResourceEmailTemplateCard, ResourceDocumentCard
+ *   Organism → ResourceModal, ResourceEmailEditorDialog, ResourceCarousel, ResourceCenterHeader
+ *   Template → (composed by consumers)
+ */
+
+export type {
+  ResourceCarouselProps,
+  ResourceCenterHeaderProps,
+  ResourceDocumentCardProps,
+  ResourceDocumentItem,
+  ResourceEmailEditorDialogProps,
+  ResourceEmailTemplateCardProps,
+  ResourceEmailTemplateItem,
+  ResourceModalAttachment,
+  ResourceModalProps,
+  ResourceVideoCardProps,
+  ResourceVideoItem,
+} from "./types";
+
+export { ResourceCarousel } from "./resource-carousel";
+export { ResourceCenterHeader } from "./resource-center-header";
+export {
+  ResourceDocumentCard,
+  ResourceEmailTemplateCard,
+  ResourceVideoCard,
+} from "./resource-cards";
+export { ResourceEmailEditorDialog } from "./resource-email-editor-dialog";
+export { ResourceModal } from "./resource-modal";

package/src/components/ui/resource-center/resource-cards.tsx

@@ -0,0 +1,218 @@
+import React, { useState } from "react";
+import { Download, Play } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ResourceModal } from "./resource-modal";
+import type {
+  ResourceVideoCardProps,
+  ResourceEmailTemplateCardProps,
+  ResourceDocumentCardProps,
+} from "./types";
+
+export function ResourceVideoCard({ video }: ResourceVideoCardProps) {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setModalOpen(true)}
+        className="group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {/* Thumbnail */}
+        <div className="relative w-full overflow-hidden bg-muted aspect-video">
+          {video.thumbnailUrl ? (
+            <img
+              src={video.thumbnailUrl}
+              alt={video.title}
+              className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
+            />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <Play className="size-10 text-muted-foreground opacity-40" />
+            </div>
+          )}
+
+          {/* Play overlay on hover */}
+          <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+            <div className="flex size-12 items-center justify-center bg-background/90">
+              <Play className="size-5 text-foreground" />
+            </div>
+          </div>
+
+          {/* Duration badge */}
+          {video.duration && (
+            <span className="absolute bottom-2 right-2 bg-black/70 px-1.5 py-0.5 text-caption text-white">
+              {video.duration}
+            </span>
+          )}
+        </div>
+
+        {/* Title */}
+        <p className="text-body-medium font-semibold text-foreground leading-snug line-clamp-2">
+          {video.title}
+        </p>
+      </button>
+
+      <ResourceModal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title={video.title}
+        videoUrl={video.videoUrl}
+        tags={video.tags}
+        attachments={video.attachments}
+      />
+    </>
+  );
+}
+
+export function ResourceEmailTemplateCard({
+  template,
+  onClick,
+}: ResourceEmailTemplateCardProps) {
+  if (template.isAddTemplate) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(
+          "flex w-full flex-col items-center justify-center gap-3",
+          "border-2 border-dashed border-border bg-muted/40",
+          "aspect-video hover:border-primary hover:bg-muted/70 transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        )}
+      >
+        <div className="flex size-10 items-center justify-center border-2 border-dashed border-muted-foreground/40">
+          <span className="text-2xl text-muted-foreground/60">+</span>
+        </div>
+        <p className="text-body-small font-medium text-muted-foreground">
+          Add Template
+        </p>
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {/* Preview area */}
+      <div className="relative w-full overflow-hidden border border-border bg-background aspect-video">
+        {template.htmlContent ? (
+          <iframe
+            srcDoc={template.htmlContent}
+            title={template.title}
+            className="h-full w-full pointer-events-none"
+            style={{
+              transform: "scale(0.5)",
+              transformOrigin: "top left",
+              width: "200%",
+              height: "200%",
+            }}
+            sandbox="allow-same-origin"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-muted">
+            <p className="text-caption text-muted-foreground">
+              No preview available
+            </p>
+          </div>
+        )}
+
+        {/* Hover overlay */}
+        <div className="absolute inset-0 flex items-center justify-center bg-foreground/60 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+          <span className="text-body-small font-medium text-white">
+            Use Template
+          </span>
+        </div>
+      </div>
+
+      {/* Meta */}
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-body-small font-medium text-foreground leading-snug line-clamp-1">
+          {template.title}
+        </p>
+        {template.type && (
+          <Badge variant="secondary" className="shrink-0">
+            {template.type === "system" ? "System" : "Company"}
+          </Badge>
+        )}
+      </div>
+    </button>
+  );
+}
+
+export function ResourceDocumentCard({
+  document,
+  onClick,
+}: ResourceDocumentCardProps) {
+  return (
+    <div className="flex w-full flex-col gap-2">
+      {/* PDF preview */}
+      <button
+        type="button"
+        onClick={onClick}
+        className="group relative w-full overflow-hidden border border-border bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aspect-video"
+      >
+        {document.pdfUrl ? (
+          <iframe
+            src={document.pdfUrl}
+            title={document.title}
+            className="h-full w-full pointer-events-none"
+          />
+        ) : document.thumbnailUrl ? (
+          <img
+            src={document.thumbnailUrl}
+            alt={document.title}
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <div className="flex h-full w-full flex-col items-center justify-center gap-2">
+            <div className="flex items-center justify-center bg-muted-foreground/10 p-4">
+              <Download className="size-8 text-muted-foreground opacity-50" />
+            </div>
+            <span className="text-caption text-muted-foreground">
+              {document.title}
+            </span>
+          </div>
+        )}
+
+        <div className="absolute inset-0 bg-foreground/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+      </button>
+
+      {/* Footer: tags + download */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex flex-col gap-1 min-w-0">
+          <p className="text-body-small font-medium text-foreground leading-snug line-clamp-1">
+            {document.title}
+          </p>
+          {document.tags && document.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1">
+              {document.tags.map((tag) => (
+                <Badge key={tag} variant="secondary">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+        {document.downloadUrl && (
+          <a
+            href={document.downloadUrl}
+            download
+            onClick={(e) => e.stopPropagation()}
+            className="shrink-0"
+            aria-label={`Download ${document.title}`}
+          >
+            <Button variant="outline" size="icon" className="size-8">
+              <Download className="size-4" />
+            </Button>
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}