@wealthx/shadcn 1.5.15 → 1.5.17

package/src/components/ui/kanban-column.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { MoreVertical } from "lucide-react";
+import { MoreVertical, Plus } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useThemeVars } from "@/lib/theme-provider";
 import { formatCurrency } from "@/lib/format-currency";
@@ -15,6 +15,12 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { LeadCard, OpportunityCard } from "@/components/ui/opportunity-card";
 import type { OpportunityCardProps } from "@/components/ui/opportunity-card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 /**
  * KanbanColumn — WealthX DS (L4 Section)
@@ -52,6 +58,12 @@ export interface KanbanColumnStage {
    * Defaults to `"var(--color-border)"`.
    */
   accentColor?: string | null;
+  /**
+   * Optional color for the stage count number in the column header.
+   * Pass a CSS variable string: `"var(--color-destructive)"`.
+   * Defaults to `text-muted-foreground`.
+   */
+  countColor?: string | null;
 }
 
 export interface KanbanColumnProps {
@@ -91,6 +103,11 @@ export interface KanbanColumnProps {
   onEditColumn?: () => void;
   /** Only shown for non-default columns. */
   onDeleteColumn?: () => void;
+  /**
+   * When provided, renders a `+` icon button in the column header.
+   * Intended for the Leads column — opens the Add Lead flow.
+   */
+  onAddLead?: () => void;
 
   // ── Card callbacks (forwarded to each OpportunityCard) ───────
   onTaskToggle?: (opportunityId: string, taskId: string) => void;
@@ -115,10 +132,6 @@ export interface KanbanColumnProps {
 // Helpers
 // ---------------------------------------------------------------------------
 
-function formatTotalValue(value: number): string {
-  return formatCurrency(value);
-}
-
 function growthColor(growth: number): string {
   // Use darkened text tokens — full-saturation tokens (#4CAF50, #F44336) fail 4.5:1 on white bg
   return growth > 0
@@ -142,6 +155,7 @@ export function KanbanColumn({
   loaderRef,
   onEditColumn,
   onDeleteColumn,
+  onAddLead,
   onTaskToggle,
   onMarkAsDone,
   onMoveToNextStage,
@@ -203,41 +217,68 @@ export function KanbanColumn({
         {/* Title row */}
         <div className="flex items-center justify-between gap-2">
           <h2 className="text-sm font-semibold text-foreground">
-            <span className="text-muted-foreground">{stage.count}</span>{" "}
+            <span
+              className={cn(!stage.countColor && "text-muted-foreground")}
+              style={stage.countColor ? { color: stage.countColor } : undefined}
+            >
+              {stage.count}
+            </span>{" "}
             {stage.name}
           </h2>
 
-          {hasMenu && (
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                className={cn(
-                  buttonVariants({ variant: "ghost", size: "icon" }),
-                  "-mr-1 size-7 shrink-0",
-                )}
-                aria-label="Column actions"
-              >
-                <MoreVertical className="size-4" />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                {onEditColumn && (
-                  <DropdownMenuItem onClick={onEditColumn}>
-                    Edit column settings
-                  </DropdownMenuItem>
-                )}
-                {!isDefault && onDeleteColumn && (
-                  <>
-                    {onEditColumn && <DropdownMenuSeparator />}
-                    <DropdownMenuItem
-                      onClick={onDeleteColumn}
-                      className="text-destructive focus:text-destructive"
+          <div className="flex items-center gap-0.5">
+            {onAddLead && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      className={cn(
+                        buttonVariants({ variant: "ghost", size: "icon" }),
+                        "size-7 shrink-0",
+                      )}
+                      onClick={onAddLead}
+                      aria-label="Add lead"
                     >
-                      Delete column
+                      <Plus className="size-4" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Add lead</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+
+            {hasMenu && (
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  className={cn(
+                    buttonVariants({ variant: "ghost", size: "icon" }),
+                    "-mr-1 size-7 shrink-0",
+                  )}
+                  aria-label="Column actions"
+                >
+                  <MoreVertical className="size-4" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {onEditColumn && (
+                    <DropdownMenuItem onClick={onEditColumn}>
+                      Edit column settings
                     </DropdownMenuItem>
-                  </>
-                )}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
+                  )}
+                  {!isDefault && onDeleteColumn && (
+                    <>
+                      {onEditColumn && <DropdownMenuSeparator />}
+                      <DropdownMenuItem
+                        onClick={onDeleteColumn}
+                        className="text-destructive focus:text-destructive"
+                      >
+                        Delete column
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
         </div>
 
         {/* Stats row */}
@@ -253,8 +294,8 @@ export function KanbanColumn({
           ) : (
             <span />
           )}
-          <span className="text-xs font-medium tabular-nums text-muted-foreground">
-            {formatTotalValue(stage.totalValue)}
+          <span className="text-sm font-bold tabular-nums text-foreground">
+            {formatCurrency(stage.totalValue)}
           </span>
         </div>
       </div>

package/src/components/ui/pipeline-board.tsx

@@ -5,10 +5,7 @@ import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { KanbanColumn } from "@/components/ui/kanban-column";
-import type {
-  KanbanColumnProps,
-  KanbanColumnStage,
-} from "@/components/ui/kanban-column";
+import type { KanbanColumnStage } from "@/components/ui/kanban-column";
 import type { OpportunityCardProps } from "@/components/ui/opportunity-card";
 
 /**
@@ -53,10 +50,21 @@ export interface PipelineBoardColumn {
   isDropTarget?: boolean;
   /** Whether this is a fixed/system column (no Delete in menu). */
   isDefault?: boolean;
+  /**
+   * When true, this column is rendered in a fixed left section and does not
+   * scroll horizontally with the rest of the board. Use for the High Priority
+   * column, which must always be visible.
+   */
+  isPinned?: boolean;
   isLoading?: boolean;
   isLoadingMore?: boolean;
   hasMore?: boolean;
   loaderRef?: React.Ref<HTMLDivElement>;
+  /**
+   * When provided, renders a `+` icon button in the column header.
+   * Intended for the Leads column — opens the Add Lead flow.
+   */
+  onAddLead?: () => void;
 }
 
 export interface PipelineBoardProps {
@@ -78,8 +86,6 @@ export interface PipelineBoardProps {
   // ── Column callbacks ─────────────────────────────────────────
   onEditColumn?: (stageId: string) => void;
   onDeleteColumn?: (stageId: string) => void;
-
-  // ── Toolbar ──────────────────────────────────────────────────
   onRefresh?: () => void;
 
   // ── Card callbacks ───────────────────────────────────────────
@@ -217,6 +223,48 @@ export function PipelineBoard({
   const hasToolbar =
     onSearchChange || (filterOptions.length > 0 && onFilterChange);
 
+  const pinnedCols = columns.filter((c) => c.isPinned);
+  const scrollableCols = columns.filter((c) => !c.isPinned);
+
+  const renderColumn = (col: PipelineBoardColumn) => (
+    <KanbanColumn
+      key={col.key}
+      stage={col.stage}
+      opportunities={col.opportunities}
+      isDragging={col.isDragging}
+      isDropTarget={col.isDropTarget}
+      isDefault={col.isDefault}
+      isLoading={col.isLoading}
+      isLoadingMore={col.isLoadingMore}
+      hasMore={col.hasMore}
+      loaderRef={col.loaderRef}
+      onEditColumn={
+        !col.isPinned && onEditColumn
+          ? () => onEditColumn(col.stage.id)
+          : undefined
+      }
+      onDeleteColumn={
+        onDeleteColumn && !col.isDefault && !col.isPinned
+          ? () => onDeleteColumn(col.stage.id)
+          : undefined
+      }
+      onCardDrop={
+        onMoveCard ? (cardId) => onMoveCard(cardId, col.key) : undefined
+      }
+      onCardClick={onCardClick}
+      onTaskToggle={onTaskToggle}
+      onMarkAsDone={onMarkAsDone}
+      onMoveToNextStage={onMoveToNextStage}
+      onSendLoanApplication={col.onSendLoanApplication}
+      onViewDetails={onViewDetails}
+      onChangePriority={onChangePriority}
+      onPutOnHold={onPutOnHold}
+      onDeleteOpportunity={onDeleteOpportunity}
+      onAddLead={col.onAddLead}
+      submittingOpportunityId={submittingOpportunityId}
+    />
+  );
+
   return (
     <div
       className={cn("flex h-full flex-col bg-muted/20", className)}
@@ -234,51 +282,27 @@ export function PipelineBoard({
         />
       )}
 
-      {/* ── Board scroll area ── */}
-      <div className="flex flex-1 gap-3 overflow-x-auto p-4">
-        {columns.map((col) => (
-          <KanbanColumn
-            key={col.key}
-            stage={col.stage}
-            opportunities={col.opportunities}
-            isDragging={col.isDragging}
-            isDropTarget={col.isDropTarget}
-            isDefault={col.isDefault}
-            isLoading={col.isLoading}
-            isLoadingMore={col.isLoadingMore}
-            hasMore={col.hasMore}
-            loaderRef={col.loaderRef}
-            onEditColumn={
-              onEditColumn ? () => onEditColumn(col.stage.id) : undefined
-            }
-            onDeleteColumn={
-              onDeleteColumn && !col.isDefault
-                ? () => onDeleteColumn(col.stage.id)
-                : undefined
-            }
-            onCardDrop={
-              onMoveCard ? (cardId) => onMoveCard(cardId, col.key) : undefined
-            }
-            onCardClick={onCardClick}
-            onTaskToggle={onTaskToggle}
-            onMarkAsDone={onMarkAsDone}
-            onMoveToNextStage={onMoveToNextStage}
-            onSendLoanApplication={col.onSendLoanApplication}
-            onViewDetails={onViewDetails}
-            onChangePriority={onChangePriority}
-            onPutOnHold={onPutOnHold}
-            onDeleteOpportunity={onDeleteOpportunity}
-            submittingOpportunityId={submittingOpportunityId}
-          />
-        ))}
-
-        {columns.length === 0 && (
-          <div className="flex flex-1 items-center justify-center">
-            <p className="text-sm text-muted-foreground">
-              No columns to display.
-            </p>
+      {/* ── Board area ── */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Pinned columns — always visible, do not scroll */}
+        {pinnedCols.length > 0 && (
+          <div className="flex shrink-0 gap-3 border-r border-border p-4">
+            {pinnedCols.map(renderColumn)}
           </div>
         )}
+
+        {/* Scrollable columns */}
+        <div className="flex flex-1 gap-3 overflow-x-auto p-4">
+          {scrollableCols.map(renderColumn)}
+
+          {columns.length === 0 && (
+            <div className="flex flex-1 items-center justify-center">
+              <p className="text-sm text-muted-foreground">
+                No columns to display.
+              </p>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );