@wealthx/shadcn 1.5.1 → 1.5.2

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

@@ -1,13 +1,17 @@
+import { useState } from "react";
 import {
   Phone,
   Mail,
   User,
   Users,
   Calendar,
+  Check,
   MoreVertical,
   Clock,
   ArrowRight,
   Bot,
+  ChevronDown,
+  ChevronRight,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { formatCurrency } from "@/lib/format-currency";
@@ -29,6 +33,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { TaskCheckItem } from "@/components/ui/pipeline-primitives";
+import { Progress } from "@/components/ui/progress";
 import {
   Tooltip,
   TooltipContent,
@@ -127,6 +132,12 @@ export interface OpportunityCardProps {
   draggable?: boolean;
   onDragStart?: React.DragEventHandler<HTMLDivElement>;
   className?: string;
+  /**
+   * Render mode for the card:
+   * - `"deal"` (default) — full opportunity info with task accordion.
+   * - `"task"` — compact task-first layout (next task, progress, deal ref).
+   */
+  viewMode?: "deal" | "task";
 }
 
 // ---------------------------------------------------------------------------
@@ -169,11 +180,291 @@ function formatLoanType(type: string): string {
     .join(" ");
 }
 
+// ---------------------------------------------------------------------------
+// TaskViewCard — compact task-first card (viewMode === "task")
+//
+// Three states driven by task progress:
+//   A) Has next task   → shows task title + AI agent + segmented progress
+//   B) All tasks done  → shows ✓ message + full green progress bar
+//   C) No tasks        → shows fallback muted text
+// ---------------------------------------------------------------------------
+
+function TaskViewCard({
+  customerName,
+  loanType,
+  loanPurposeLabel,
+  amount,
+  priority,
+  daysSinceColumnChanged,
+  warningDays,
+  priorityDays,
+  tasks = [],
+  nextTask,
+  onCardClick,
+  onViewDetails,
+  onTaskToggle,
+  onMarkAsDone,
+  onMoveToNextStage,
+  onChangePriority,
+  onDelete,
+  onPutOnHold,
+  isSubmitting = false,
+  draggable = false,
+  onDragStart,
+  className,
+}: OpportunityCardProps): React.JSX.Element {
+  const resolvedPriority = resolvePriority(
+    daysSinceColumnChanged,
+    warningDays,
+    priorityDays,
+    priority,
+  );
+  const priorityColor = PRIORITY_COLORS[resolvedPriority];
+
+  const completedCount = tasks.filter((t) => t.completed).length;
+  const totalCount = tasks.length;
+  const hasTasks = totalCount > 0;
+  const allDone = hasTasks && completedCount === totalCount;
+
+  // Find the next pending task to surface AI agent info
+  const nextPendingTask = tasks.find((t) => !t.completed);
+  const agentName = nextPendingTask?.aiAgentName ?? null;
+
+  const [subtasksExpanded, setSubtasksExpanded] = useState(false);
+
+  const hasMenu = onViewDetails || onChangePriority || onPutOnHold || onDelete;
+  const stopProp = (e: React.MouseEvent): void => {
+    e.stopPropagation();
+  };
+
+  // Compact deal reference: "John Smith · Buy a House · $850,000"
+  const purposeLabel =
+    loanPurposeLabel ?? (loanType ? formatLoanType(loanType) : null);
+  const dealRef = [
+    customerName,
+    purposeLabel,
+    amount > 0 ? formatCurrency(amount) : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+  // Task header content (no nested ternary — avoids lint error)
+  let taskHeader: React.ReactNode;
+  if (allDone) {
+    taskHeader = (
+      <p
+        className="flex items-center gap-1.5 text-sm font-semibold"
+        style={{ color: "var(--color-success-text)" }}
+      >
+        <Check className="size-3.5 shrink-0" />
+        All tasks complete
+      </p>
+    );
+  } else if (nextTask) {
+    taskHeader = (
+      <>
+        <div className="flex items-center gap-1.5">
+          {agentName && (
+            <Bot
+              className="size-3.5 shrink-0 text-primary"
+              aria-hidden="true"
+            />
+          )}
+          <p className="truncate text-sm font-semibold leading-snug">
+            {nextTask}
+          </p>
+        </div>
+        {agentName && (
+          <p className="mt-0.5 text-xs text-muted-foreground">{agentName}</p>
+        )}
+      </>
+    );
+  } else {
+    taskHeader = (
+      <p className="text-xs text-muted-foreground">
+        No tasks defined for this stage
+      </p>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2.5 border border-border bg-background p-3 text-foreground shadow-sm",
+        onCardClick && "cursor-pointer",
+        draggable && "cursor-grab active:cursor-grabbing",
+        isSubmitting && "opacity-60",
+        className,
+      )}
+      data-slot="opportunity-card"
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onClick={onCardClick}
+    >
+      {/* ── Task header + priority dot ── */}
+      <div className="flex items-start gap-2">
+        <div className="min-w-0 flex-1">{taskHeader}</div>
+        <span
+          role="img"
+          className="mt-0.5 inline-block size-2.5 shrink-0 rounded-full"
+          style={{ backgroundColor: priorityColor }}
+          aria-label={`Priority: ${resolvedPriority}`}
+        />
+      </div>
+
+      {/* ── Progress (only when tasks exist) ── */}
+      {hasTasks && (
+        <div className="flex items-center gap-2">
+          <span className="shrink-0 tabular-nums text-xs text-muted-foreground">
+            {completedCount}/{totalCount}
+          </span>
+          <Progress
+            value={(completedCount / totalCount) * 100}
+            className={cn(
+              "h-1.5 flex-1",
+              allDone && "[&_[data-slot=progress-indicator]]:bg-success",
+            )}
+          />
+        </div>
+      )}
+
+      {/* ── Collapsible subtask list ── */}
+      {hasTasks && (
+        <div
+          className="space-y-1 border-t border-border pt-2"
+          onClick={stopProp}
+          role="presentation"
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          <button
+            type="button"
+            onClick={() => setSubtasksExpanded((v) => !v)}
+            className="flex w-full items-center justify-between text-xs text-muted-foreground hover:text-foreground"
+          >
+            <span className="flex items-center gap-1">
+              {subtasksExpanded ? (
+                <ChevronDown className="size-3" />
+              ) : (
+                <ChevronRight className="size-3" />
+              )}
+              Subtasks
+            </span>
+            <span>
+              {completedCount} / {totalCount}
+            </span>
+          </button>
+          {subtasksExpanded && (
+            <ul className="space-y-1.5 pt-1">
+              {tasks.map((task) => (
+                <TaskCheckItem
+                  key={task.id}
+                  title={task.title}
+                  completed={task.completed}
+                  aiAgentName={task.aiAgentName}
+                  onToggle={() => onTaskToggle?.(task.id)}
+                  size="xs"
+                />
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+
+      {/* ── Deal reference line ── */}
+      <p className="truncate text-xs text-muted-foreground">{dealRef}</p>
+
+      {/* ── Footer: days badge + 3-dot menu ── */}
+      <div className="flex items-center gap-1.5" onClick={stopProp}>
+        {daysSinceColumnChanged !== undefined && (
+          <Badge variant="secondary" className="px-1.5 text-[10px] font-normal">
+            {daysSinceColumnChanged}d
+          </Badge>
+        )}
+        {hasMenu && (
+          <div className="ml-auto">
+            <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>
+
+      {/* ── Action button ── */}
+      {allDone && onMoveToNextStage && (
+        <div onClick={stopProp}>
+          <Separator />
+          <div className="pt-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full text-caption"
+              onClick={onMoveToNextStage}
+              disabled={isSubmitting}
+            >
+              Move to next stage
+            </Button>
+          </div>
+        </div>
+      )}
+      {!allDone && nextTask && onMarkAsDone && (
+        <div onClick={stopProp}>
+          <Separator />
+          <div className="pt-2">
+            <Button
+              variant="default"
+              size="sm"
+              className="w-full text-caption"
+              onClick={onMarkAsDone}
+              disabled={isSubmitting}
+            >
+              Mark as done
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // OpportunityCard
 // ---------------------------------------------------------------------------
 
 export function OpportunityCard({
+  id,
   customerName,
   customerPhone,
   customerEmail,
@@ -203,7 +494,41 @@ export function OpportunityCard({
   draggable = false,
   onDragStart,
   className,
+  viewMode = "deal",
 }: OpportunityCardProps) {
+  if (viewMode === "task") {
+    return (
+      <TaskViewCard
+        customerName={customerName}
+        customerPhone={customerPhone}
+        customerEmail={customerEmail}
+        additionalContacts={additionalContacts}
+        loanType={loanType}
+        loanPurposeLabel={loanPurposeLabel}
+        amount={amount}
+        date={date}
+        priority={priority}
+        daysSinceColumnChanged={daysSinceColumnChanged}
+        warningDays={warningDays}
+        priorityDays={priorityDays}
+        tasks={tasks}
+        nextTask={nextTask}
+        onCardClick={onCardClick}
+        onViewDetails={onViewDetails}
+        onTaskToggle={onTaskToggle}
+        onMarkAsDone={onMarkAsDone}
+        onMoveToNextStage={onMoveToNextStage}
+        onChangePriority={onChangePriority}
+        onDelete={onDelete}
+        onPutOnHold={onPutOnHold}
+        isSubmitting={isSubmitting}
+        draggable={draggable}
+        onDragStart={onDragStart}
+        className={className}
+      />
+    );
+  }
+
   const resolvedPriority = resolvePriority(
     daysSinceColumnChanged,
     warningDays,
@@ -218,7 +543,9 @@ export function OpportunityCard({
   const hasActions = onMarkAsDone || onMoveToNextStage;
   const hasMenu = onViewDetails || onChangePriority || onPutOnHold || onDelete;
 
-  const stopProp = (e: React.MouseEvent) => e.stopPropagation();
+  const stopProp = (e: React.MouseEvent): void => {
+    e.stopPropagation();
+  };
 
   return (
     <div