@wealthx/shadcn 1.1.0 → 1.2.0

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

@@ -0,0 +1,616 @@
+import {
+  Phone,
+  Mail,
+  User,
+  Users,
+  Calendar,
+  MoreVertical,
+  Clock,
+  ArrowRight,
+  Bot,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { TaskCheckItem } from "@/components/ui/pipeline-primitives";
+
+/**
+ * OpportunityCard — WealthX DS (L3 Card)
+ *
+ * Kanban card for a single loan opportunity in the Pipeline board.
+ * Renders customer info, loan metadata, task progress, and quick actions.
+ *
+ * This component is display-only — drag-and-drop is handled by the
+ * KanbanColumn wrapper in the app.
+ *
+ * Data source: `listLoans()` → `Opportunity` in `loan-crm.ts`
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type Priority = "HIGH" | "MEDIUM" | "LOW" | "NONE";
+
+export interface OpportunityTask {
+  id: string;
+  title: string;
+  completed: boolean;
+  aiAgentId?: string | null;
+  aiAgentName?: string | null;
+}
+
+export interface OpportunityCardProps {
+  // ── Core data ────────────────────────────────────────────────
+  id: string;
+  customerName: string;
+  customerPhone?: string;
+  customerEmail?: string;
+  /** Number of additional co-applicants beyond the primary contact. */
+  additionalContacts?: number;
+  loanType?: string;
+  loanPurposeLabel?: string;
+  /** Loan amount in dollars. */
+  amount: number;
+  /** ISO date string of the opportunity creation date. */
+  date: string;
+
+  // ── Status ───────────────────────────────────────────────────
+  priority: Priority;
+  /** Days the opportunity has been in its current stage. */
+  daysSinceColumnChanged?: number;
+  /**
+   * Stage threshold for MEDIUM (orange) warning color.
+   * Comes from `Stage.warningDays`.
+   */
+  warningDays?: number;
+  /**
+   * Stage threshold for HIGH (red) priority color.
+   * Comes from `Stage.priorityDays`.
+   */
+  priorityDays?: number;
+  /** ISO date string — if set, the card shows an "On Hold" banner. */
+  onHoldTo?: string | null;
+  /** Whether this opportunity represents a modification of a completed loan. */
+  isModifyCompletedLoan?: boolean;
+
+  // ── Tasks ────────────────────────────────────────────────────
+  tasks?: OpportunityTask[];
+  /** Title of the next pending task (shown as a hint below the task list). */
+  nextTask?: string | null;
+
+  // ── Lead data (passed through by KanbanColumn to LeadCard) ───
+  /**
+   * URL for the loan application form.
+   * Not rendered by OpportunityCard — used by KanbanColumn to forward
+   * to LeadCard when this opportunity is in the Leads stage.
+   */
+  loanApplicationUrl?: string;
+
+  // ── Actions ──────────────────────────────────────────────────
+  onViewDetails?: () => void;
+  onTaskToggle?: (taskId: string) => void;
+  onMarkAsDone?: () => void;
+  onMoveToNextStage?: () => void;
+  onLaunchAssistant?: () => void;
+  onChangePriority?: () => void;
+  onDelete?: () => void;
+  onPutOnHold?: () => void;
+
+  /** Shows a loading state on action buttons while an async op is in flight. */
+  isSubmitting?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+/** Used for the priority dot background — full-saturation token is fine on colored bg. */
+const PRIORITY_COLORS: Record<Priority, string> = {
+  HIGH: "var(--color-destructive)",
+  MEDIUM: "var(--color-warning)",
+  LOW: "var(--color-success)",
+  NONE: "var(--color-muted-foreground)",
+};
+
+/** Used for text / icons on white/light backgrounds — darkened tokens ensure 4.5:1 contrast. */
+const PRIORITY_TEXT_COLORS: Record<Priority, string> = {
+  HIGH: "var(--color-destructive-text)",
+  MEDIUM: "var(--color-warning-text)",
+  LOW: "var(--color-success-text)",
+  NONE: "var(--color-muted-foreground)",
+};
+
+function resolvePriority(
+  days: number | undefined,
+  warningDays: number | undefined,
+  priorityDays: number | undefined,
+  priority: Priority,
+): Priority {
+  if (days === undefined) return priority;
+  if (priorityDays !== undefined && days >= priorityDays) return "HIGH";
+  if (warningDays !== undefined && days >= warningDays) return "MEDIUM";
+  if (warningDays !== undefined || priorityDays !== undefined) return "LOW";
+  return priority;
+}
+
+function formatAmount(amount: number): string {
+  return new Intl.NumberFormat("en-AU", {
+    style: "currency",
+    currency: "AUD",
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+function formatDate(iso: string): string {
+  try {
+    return new Date(iso).toLocaleDateString("en-AU", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function formatHoldDate(iso: string): string {
+  try {
+    return new Date(iso).toLocaleDateString("en-AU", {
+      day: "2-digit",
+      month: "short",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function formatLoanType(type: string): string {
+  return type
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}
+
+// ---------------------------------------------------------------------------
+// OpportunityCard
+// ---------------------------------------------------------------------------
+
+export function OpportunityCard({
+  customerName,
+  customerPhone,
+  customerEmail,
+  additionalContacts,
+  loanType,
+  loanPurposeLabel,
+  amount,
+  date,
+  priority,
+  daysSinceColumnChanged,
+  warningDays,
+  priorityDays,
+  onHoldTo,
+  isModifyCompletedLoan,
+  tasks = [],
+  nextTask,
+  onViewDetails,
+  onTaskToggle,
+  onMarkAsDone,
+  onMoveToNextStage,
+  onLaunchAssistant,
+  onChangePriority,
+  onDelete,
+  onPutOnHold,
+  isSubmitting = false,
+  className,
+}: OpportunityCardProps) {
+  const resolvedPriority = resolvePriority(
+    daysSinceColumnChanged,
+    warningDays,
+    priorityDays,
+    priority,
+  );
+  const priorityColor = PRIORITY_COLORS[resolvedPriority];
+  const priorityTextColor = PRIORITY_TEXT_COLORS[resolvedPriority];
+
+  const completedCount = tasks.filter((t) => t.completed).length;
+  const hasTasks = tasks.length > 0;
+  const hasActions = onMarkAsDone || onMoveToNextStage;
+  const hasMenu = onViewDetails || onChangePriority || onPutOnHold || onDelete;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 border border-border bg-background p-4 text-foreground shadow-sm",
+        isSubmitting && "opacity-60",
+        className,
+      )}
+      data-slot="opportunity-card"
+    >
+      {/* ── On-hold banner ── */}
+      {onHoldTo && (
+        <div
+          className="flex items-center gap-1.5 rounded border border-warning/30 bg-warning/10 px-2 py-1 text-xs font-medium"
+          style={{ color: "var(--color-warning-text)" }}
+        >
+          <Clock className="size-3 shrink-0" />
+          On hold until {formatHoldDate(onHoldTo)}
+        </div>
+      )}
+
+      {/* ── Modify-completed-loan tag ── */}
+      {isModifyCompletedLoan && (
+        <div
+          className="flex items-center gap-1.5 rounded border border-info/30 bg-info/10 px-2 py-1 text-xs font-medium"
+          style={{ color: "var(--color-info-text)" }}
+        >
+          Modify completed loan
+        </div>
+      )}
+
+      {/* ── Header: loan purpose + amount + menu ── */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          {(loanPurposeLabel || loanType) && (
+            <Badge variant="outline" className="self-start">
+              {loanPurposeLabel ?? formatLoanType(loanType!)}
+            </Badge>
+          )}
+          <span className="text-base font-bold tabular-nums text-foreground">
+            {formatAmount(amount)}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1 -mr-1 -mt-1">
+          {onLaunchAssistant && (
+            <button
+              type="button"
+              className={cn(
+                buttonVariants({ variant: "ghost", size: "icon" }),
+                "size-7 shrink-0",
+              )}
+              onClick={onLaunchAssistant}
+              aria-label="Launch AI Assistant"
+              title="Launch AI Assistant"
+            >
+              <Bot className="size-4" />
+            </button>
+          )}
+          {hasMenu && (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                className={cn(
+                  buttonVariants({ variant: "ghost", size: "icon" }),
+                  "size-7 shrink-0",
+                )}
+                aria-label="Opportunity actions"
+              >
+                <MoreVertical className="size-4" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {onViewDetails && (
+                  <DropdownMenuItem onClick={onViewDetails}>
+                    View details
+                  </DropdownMenuItem>
+                )}
+                {onChangePriority && (
+                  <DropdownMenuItem onClick={onChangePriority}>
+                    Change priority
+                  </DropdownMenuItem>
+                )}
+                {onPutOnHold && (
+                  <DropdownMenuItem onClick={onPutOnHold}>
+                    Put on hold
+                  </DropdownMenuItem>
+                )}
+                {onDelete && (
+                  <>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={onDelete} variant="destructive">
+                      Delete
+                    </DropdownMenuItem>
+                  </>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* ── Customer info ── */}
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center justify-between gap-2">
+          <span className="truncate text-sm font-semibold text-foreground">
+            {customerName}
+          </span>
+          {additionalContacts && additionalContacts > 0 ? (
+            <Badge variant="secondary" className="shrink-0 gap-1">
+              <Users className="size-3" aria-hidden="true" />
+              Joint
+            </Badge>
+          ) : (
+            <Badge variant="secondary" className="shrink-0 gap-1">
+              <User className="size-3" aria-hidden="true" />
+              Individual
+            </Badge>
+          )}
+        </div>
+        {customerPhone && (
+          <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <Phone className="size-3 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="truncate">{customerEmail}</span>
+          </span>
+        )}
+      </div>
+
+      <Separator />
+
+      {/* ── Metadata: date (left) | days-since chip + priority dot (right, adjacent) ── */}
+      <div className="flex items-center justify-between">
+        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <Calendar className="size-3 shrink-0" aria-hidden="true" />
+          {formatDate(date)}
+        </span>
+
+        <span className="flex items-center gap-1.5">
+          {daysSinceColumnChanged !== undefined && (
+            <>
+              <Clock
+                className="size-3 shrink-0"
+                style={{ color: priorityTextColor }}
+                aria-hidden="true"
+              />
+              <span
+                className="text-xs font-medium tabular-nums"
+                style={{ color: priorityTextColor }}
+              >
+                {daysSinceColumnChanged}d
+              </span>
+            </>
+          )}
+          {/* Dot: full-saturation color on its own background — no contrast issue */}
+          <span
+            role="img"
+            className="inline-block size-2 shrink-0 rounded-full"
+            style={{ backgroundColor: priorityColor }}
+            aria-label={`Priority: ${resolvedPriority}`}
+          />
+        </span>
+      </div>
+
+      {/* ── Tasks: segmented progress bar + animated accordion ── */}
+      {hasTasks && (
+        <>
+          {/* Segmented bar — one segment per task, filled = completed */}
+          <div
+            className="flex gap-0.5"
+            role="progressbar"
+            aria-valuenow={completedCount}
+            aria-valuemin={0}
+            aria-valuemax={tasks.length}
+            aria-label={`${completedCount} of ${tasks.length} tasks complete`}
+          >
+            {tasks.map((t, i) => (
+              <div
+                key={t.id}
+                className={cn(
+                  "h-[7px] flex-1",
+                  i < completedCount ? "bg-primary" : "bg-muted",
+                )}
+              />
+            ))}
+          </div>
+
+          {/* Accordion — animated expand/collapse using shadcn Accordion */}
+          <Accordion type="single" collapsible className="-mx-4">
+            <AccordionItem value="tasks" className="border-0">
+              <AccordionTrigger className="px-4 py-1.5 text-xs font-normal text-muted-foreground hover:no-underline hover:text-foreground [&>svg]:size-3.5">
+                Tasks ({completedCount}/{tasks.length})
+              </AccordionTrigger>
+              <AccordionContent className="px-4">
+                <div className="flex flex-col">
+                  {tasks.map((task) => (
+                    <TaskCheckItem
+                      key={task.id}
+                      title={task.title}
+                      completed={task.completed}
+                      aiAgentName={task.aiAgentName}
+                      onToggle={
+                        onTaskToggle ? () => onTaskToggle(task.id) : undefined
+                      }
+                      disabled={isSubmitting}
+                    />
+                  ))}
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+
+          {/* Next task hint — only visible when accordion is collapsed */}
+          {nextTask && (
+            <div className="flex items-start gap-1.5 border border-primary/30 bg-primary/5 px-2 py-1.5 text-xs">
+              <ArrowRight
+                className="mt-0.5 size-3 shrink-0 text-primary"
+                aria-hidden="true"
+              />
+              <span className="font-medium">Next:</span>
+              <span className="text-muted-foreground">{nextTask}</span>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* ── Action buttons ── */}
+      {hasActions && (
+        <>
+          <Separator />
+          {(onMoveToNextStage || onMarkAsDone) && (
+            <div className="flex gap-2">
+              {onMoveToNextStage && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="flex-1 text-caption"
+                  onClick={onMoveToNextStage}
+                  disabled={isSubmitting}
+                >
+                  Move to next stage
+                </Button>
+              )}
+              {onMarkAsDone && (
+                <Button
+                  variant="default"
+                  size="sm"
+                  className="flex-1 text-caption"
+                  onClick={onMarkAsDone}
+                  disabled={isSubmitting}
+                >
+                  Mark as done
+                </Button>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// LeadCard — simplified card for the Leads stage
+//
+// Leads are new contacts who haven't started their loan application yet.
+// No loan amount, no purpose tag, no joint badge, no tasks, no date.
+// Primary action: send them the loan application link.
+// ---------------------------------------------------------------------------
+
+export interface LeadCardProps {
+  id: string;
+  customerName: string;
+  customerPhone?: string;
+  customerEmail?: string;
+  onSendLoanApplication?: () => void;
+  loanApplicationUrl?: string;
+  onDelete?: () => void;
+  isSubmitting?: boolean;
+  className?: string;
+}
+
+export function LeadCard({
+  customerName,
+  customerPhone,
+  customerEmail,
+  onSendLoanApplication,
+  loanApplicationUrl,
+  onDelete,
+  isSubmitting = false,
+  className,
+}: LeadCardProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-3 border border-border bg-background p-4 text-foreground shadow-sm",
+        isSubmitting && "opacity-60",
+        className,
+      )}
+      data-slot="lead-card"
+    >
+      {/* ── 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">
+            {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" />
+              {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="truncate">{customerEmail}</span>
+            </span>
+          )}
+        </div>
+
+        {onDelete && (
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              className={cn(
+                buttonVariants({ variant: "ghost", size: "icon" }),
+                "-mr-1 -mt-1 size-7 shrink-0",
+              )}
+              aria-label="Lead actions"
+            >
+              <MoreVertical className="size-4" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onClick={onDelete}
+                className="text-destructive focus:text-destructive"
+              >
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+
+      <Separator />
+
+      {/* ── Send loan application action ── */}
+      {onSendLoanApplication && (
+        <div className="flex flex-col gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full text-caption"
+            onClick={onSendLoanApplication}
+            disabled={isSubmitting}
+          >
+            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>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}