@wealthx/shadcn 1.4.0 → 1.5.0

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

@@ -0,0 +1,539 @@
+import React, { useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, Download, Play } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+/**
+ * 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:
+ *   Atom     → (no separate atoms — primitives inlined per co-located pattern)
+ *   Molecule → ResourceVideoCard, ResourceEmailTemplateCard, ResourceDocumentCard
+ *   Organism → ResourceModal, ResourceCarousel, ResourceCenterHeader
+ *   Template → (composed by consumers)
+ */
+
+// ---------------------------------------------------------------------------
+// ResourceModal
+// ---------------------------------------------------------------------------
+
+export interface ResourceModalAttachment {
+  name: string;
+  url: string;
+  type?: string;
+}
+
+export interface ResourceModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  videoUrl?: string;
+  tags?: string[];
+  attachments?: ResourceModalAttachment[];
+}
+
+export function ResourceModal({
+  open,
+  onClose,
+  title,
+  videoUrl,
+  tags,
+  attachments,
+}: ResourceModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent
+        size="2xl"
+        className="flex flex-col gap-4 p-0 overflow-hidden"
+      >
+        <DialogHeader className="px-6 pt-6 pb-0">
+          <DialogTitle className="text-lg font-semibold">{title}</DialogTitle>
+          {tags && tags.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 pt-1">
+              {tags.map((tag) => (
+                <Badge key={tag} variant="secondary" className="text-xs">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </DialogHeader>
+
+        {videoUrl && (
+          <div className="aspect-video w-full bg-foreground">
+            <iframe
+              src={videoUrl}
+              title={title}
+              className="h-full w-full"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            />
+          </div>
+        )}
+
+        {attachments && attachments.length > 0 && (
+          <div className="flex flex-col gap-2 px-6 pb-6">
+            <p className="text-sm font-medium text-foreground">Attachments</p>
+            <div className="flex flex-col gap-1">
+              {attachments.map((attachment, i) => (
+                <a
+                  key={i}
+                  href={attachment.url}
+                  download
+                  className="flex items-center gap-2 text-sm text-primary hover:underline"
+                >
+                  <Download className="size-3.5 shrink-0" />
+                  {attachment.name}
+                </a>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {(!attachments || attachments.length === 0) && <div className="pb-2" />}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ResourceVideoCard
+// ---------------------------------------------------------------------------
+
+export interface ResourceVideoItem {
+  id: string;
+  title: string;
+  thumbnailUrl?: string;
+  videoUrl?: string;
+  duration?: string;
+  tags?: string[];
+  attachments?: ResourceModalAttachment[];
+}
+
+export interface ResourceVideoCardProps {
+  video: ResourceVideoItem;
+}
+
+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-xs font-medium text-white">
+              {video.duration}
+            </span>
+          )}
+        </div>
+
+        {/* Title */}
+        <p className="text-sm font-medium text-foreground leading-snug line-clamp-2 group-hover:text-primary">
+          {video.title}
+        </p>
+      </button>
+
+      <ResourceModal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title={video.title}
+        videoUrl={video.videoUrl}
+        tags={video.tags}
+        attachments={video.attachments}
+      />
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ResourceEmailTemplateCard
+// ---------------------------------------------------------------------------
+
+export interface ResourceEmailTemplateItem {
+  id: string;
+  title: string;
+  htmlContent?: string;
+  type?: "system" | "company";
+  isAddTemplate?: boolean;
+}
+
+export interface ResourceEmailTemplateCardProps {
+  template: ResourceEmailTemplateItem;
+  onClick?: () => void;
+}
+
+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-[3/4] 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-sm 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-[3/4]">
+        {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-xs 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-sm font-medium text-white">Use Template</span>
+        </div>
+      </div>
+
+      {/* Meta */}
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-sm font-medium text-foreground leading-snug line-clamp-1">
+          {template.title}
+        </p>
+        {template.type && (
+          <Badge variant="secondary" className="shrink-0 text-xs">
+            {template.type === "system" ? "System" : "Company"}
+          </Badge>
+        )}
+      </div>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ResourceDocumentCard
+// ---------------------------------------------------------------------------
+
+export interface ResourceDocumentItem {
+  id: string;
+  title: string;
+  thumbnailUrl?: string;
+  tags?: string[];
+  downloadUrl?: string;
+  pdfUrl?: string;
+}
+
+export interface ResourceDocumentCardProps {
+  document: ResourceDocumentItem;
+  onClick?: () => void;
+}
+
+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-[3/4]"
+      >
+        {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-xs 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-sm 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" className="text-xs">
+                  {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>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ResourceCarousel
+// ---------------------------------------------------------------------------
+
+export interface ResourceCarouselProps {
+  title?: React.ReactNode;
+  items: React.ReactNode[];
+  headerAction?: React.ReactNode;
+  className?: string;
+}
+
+export function ResourceCarousel({
+  title,
+  items,
+  headerAction,
+  className,
+}: ResourceCarouselProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  function scrollLeft() {
+    scrollRef.current?.scrollBy({ left: -300, behavior: "smooth" });
+  }
+
+  function scrollRight() {
+    scrollRef.current?.scrollBy({ left: 300, behavior: "smooth" });
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      {/* Header row */}
+      {(title || headerAction) && (
+        <div className="flex items-center justify-between gap-4">
+          {title && (
+            <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+          )}
+          {headerAction && <div className="shrink-0">{headerAction}</div>}
+        </div>
+      )}
+
+      {/* Carousel track with hover-reveal arrows */}
+      {items.length === 0 ? (
+        <p className="py-8 text-center text-sm text-muted-foreground">
+          No items available
+        </p>
+      ) : (
+        <div className="group relative">
+          {/* Prev arrow */}
+          <button
+            type="button"
+            onClick={scrollLeft}
+            aria-label="Scroll left"
+            className={cn(
+              "absolute left-0 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
+              "flex size-9 items-center justify-center",
+              "border border-border bg-background shadow-sm",
+              "opacity-0 transition-opacity duration-200 group-hover:opacity-100",
+              "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            <ChevronLeft className="size-4 text-foreground" />
+          </button>
+
+          {/* Scroll container */}
+          <div
+            ref={scrollRef}
+            className="flex gap-4 overflow-x-auto scroll-smooth pb-2"
+            style={{ scrollbarWidth: "none" }}
+          >
+            {items.map((item, i) => (
+              <div key={i} className="w-[220px] shrink-0">
+                {item}
+              </div>
+            ))}
+          </div>
+
+          {/* Next arrow */}
+          <button
+            type="button"
+            onClick={scrollRight}
+            aria-label="Scroll right"
+            className={cn(
+              "absolute right-0 top-1/2 z-10 translate-x-1/2 -translate-y-1/2",
+              "flex size-9 items-center justify-center",
+              "border border-border bg-background shadow-sm",
+              "opacity-0 transition-opacity duration-200 group-hover:opacity-100",
+              "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            <ChevronRight className="size-4 text-foreground" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ResourceCenterHeader
+// ---------------------------------------------------------------------------
+
+export interface ResourceCenterHeaderProps {
+  title: string;
+  description: string;
+  backgroundVideoUrl?: string;
+  watchVideoUrl?: string;
+}
+
+export function ResourceCenterHeader({
+  title,
+  description,
+  backgroundVideoUrl,
+  watchVideoUrl,
+}: ResourceCenterHeaderProps) {
+  const [watchModalOpen, setWatchModalOpen] = useState(false);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "relative flex min-h-[400px] w-full items-center overflow-hidden bg-foreground",
+        )}
+      >
+        {/* Background video */}
+        {backgroundVideoUrl ? (
+          <video
+            className="absolute inset-0 h-full w-full object-cover opacity-60 z-[1]"
+            src={backgroundVideoUrl}
+            autoPlay
+            muted
+            loop
+            playsInline
+          />
+        ) : (
+          <div className="absolute inset-0 bg-foreground z-[1]" />
+        )}
+
+        {/* Overlay tint for legibility */}
+        <div className="absolute inset-0 bg-black/40 z-[1]" />
+
+        {/* Content */}
+        <div className="relative z-[2] flex flex-col gap-4 px-8 py-12 md:px-16 max-w-3xl">
+          <h1 className="text-3xl font-bold text-background md:text-4xl">
+            {title}
+          </h1>
+          <p className="text-base text-background/80 leading-relaxed">
+            {description}
+          </p>
+          {watchVideoUrl && (
+            <div className="pt-2">
+              <Button
+                variant="outline"
+                className="border-background text-background bg-transparent hover:bg-background/10 hover:text-background"
+                onClick={() => setWatchModalOpen(true)}
+              >
+                <Play className="mr-2 size-4" />
+                Watch Now
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {watchVideoUrl && (
+        <ResourceModal
+          open={watchModalOpen}
+          onClose={() => setWatchModalOpen(false)}
+          title={title}
+          videoUrl={watchVideoUrl}
+        />
+      )}
+    </>
+  );
+}

package/src/components/ui/review-alerts-dialog.tsx

@@ -0,0 +1,163 @@
+import * as React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type AlertSeverity = "NEED_ACTION" | "WATCH" | "INSIGHT";
+
+export interface ReviewableAlert {
+  id: string;
+  name: string;
+  severityCode: AlertSeverity;
+  snoozedUntil?: string;
+  dismissed?: boolean;
+}
+
+export interface ReviewAlertsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  alerts: ReviewableAlert[];
+  onSave: (
+    alertId: string,
+    action: { markDone: boolean; snooze: boolean },
+  ) => void;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Severity config
+// ---------------------------------------------------------------------------
+
+const SEVERITY_CONFIG: Record<AlertSeverity, { dot: string; text: string }> = {
+  NEED_ACTION: { dot: "bg-destructive", text: "text-destructive" },
+  WATCH: { dot: "bg-warning", text: "text-warning" },
+  INSIGHT: { dot: "bg-success", text: "text-success" },
+};
+
+// ---------------------------------------------------------------------------
+// ReviewAlertsDialog
+// ---------------------------------------------------------------------------
+
+export function ReviewAlertsDialog({
+  open,
+  onOpenChange,
+  alerts,
+  onSave,
+  className,
+}: ReviewAlertsDialogProps) {
+  const [markDone, setMarkDone] = React.useState(false);
+  const [snooze, setSnooze] = React.useState(false);
+
+  const activeAlert = alerts.find((a) => !a.dismissed && !a.snoozedUntil);
+
+  React.useEffect(() => {
+    if (open) {
+      setMarkDone(false);
+      setSnooze(false);
+    }
+  }, [open, activeAlert?.id]);
+
+  const canSave = (markDone || snooze) && !!activeAlert;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="sm" className={className}>
+        <DialogHeader>
+          <DialogTitle>Alerts</DialogTitle>
+        </DialogHeader>
+
+        {/* Alert list */}
+        <div className="flex flex-col gap-2">
+          {alerts.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              No alerts for this contact.
+            </p>
+          ) : (
+            alerts.map((alert) => {
+              const { dot, text } = SEVERITY_CONFIG[alert.severityCode];
+              return (
+                <div
+                  key={alert.id}
+                  className={cn(
+                    "flex items-center gap-2",
+                    alert.id !== activeAlert?.id && "opacity-40",
+                  )}
+                >
+                  <span
+                    aria-hidden
+                    className={cn(
+                      "inline-block size-2 shrink-0 rounded-full",
+                      dot,
+                    )}
+                  />
+                  <span className={cn("text-sm font-medium", text)}>
+                    {alert.name}
+                  </span>
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        {/* Actions */}
+        {activeAlert && (
+          <div className="flex flex-col gap-3">
+            <p className="text-sm font-medium text-foreground">Actions</p>
+
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="alert-mark-done"
+                checked={markDone}
+                onCheckedChange={(v) => setMarkDone(!!v)}
+              />
+              <Label
+                htmlFor="alert-mark-done"
+                className="cursor-pointer font-normal"
+              >
+                Mark as done (will reset in 6 months)
+              </Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="alert-snooze"
+                checked={snooze}
+                onCheckedChange={(v) => setSnooze(!!v)}
+              />
+              <Label
+                htmlFor="alert-snooze"
+                className="cursor-pointer font-normal"
+              >
+                Snooze for 30 days
+              </Label>
+            </div>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            disabled={!canSave}
+            onClick={() => onSave(activeAlert!.id, { markDone, snooze })}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}