@wealthx/shadcn 1.5.11 → 1.5.13

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";
@@ -13,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,
@@ -42,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`
@@ -111,6 +111,17 @@ export interface BankStatementGenerateDialogProps {
   className?: string;
 }
 
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const APPLICANT_TYPE_LABELS: Record<"primary" | "secondary", string> = {
+  primary: "Main applicant",
+  secondary: "Co-applicant",
+};
+
+const ACCOUNTS_PAGE_SIZE = 5;
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -144,24 +155,29 @@ 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" | ""
   >("");
   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]);
@@ -171,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);
@@ -199,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(() => {
@@ -240,7 +265,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 +293,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 +335,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>
@@ -332,86 +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) => (
-                      <TableRow key={account.id}>
-                        <TableCell>
+              ) : (
+                <>
+                  <Table className="table-fixed">
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-10">
                           <Checkbox
-                            checked={selectedAccountIds.includes(account.id)}
-                            onCheckedChange={() =>
-                              handleToggleAccount(account.id)
-                            }
-                            aria-label={`Select ${account.name}`}
+                            checked={areAllSelected}
+                            indeterminate={isSomeSelected}
+                            onCheckedChange={handleToggleAll}
+                            aria-label="Select all accounts"
                           />
-                        </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>
+                        </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>
-                    ))}
-                  </TableBody>
-                </Table>
+                    </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 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>
+                            </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/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>
+  );
+}