@wealthx/shadcn 1.0.2 → 1.2.0

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

@@ -0,0 +1,268 @@
+import * as React from "react";
+import { RefreshCw, Search, X } from "lucide-react";
+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 { OpportunityCardProps } from "@/components/ui/opportunity-card";
+
+/**
+ * PipelineBoard — WealthX DS (L5 Board)
+ *
+ * Full Pipeline / Loan CRM kanban board.
+ * Renders a horizontal list of KanbanColumns with a toolbar (search + column filters).
+ *
+ * **Does NOT include:**
+ * - Drag-and-drop (react-dnd) — handled by the app's DndProvider + KanbanColumn wiring.
+ * - Data fetching — the app supplies `columns` with pre-loaded opportunities.
+ * - Modals (edit column, delete, change priority, put on hold) — opened by the app.
+ *
+ * ### Layer: L5 Board
+ * ```
+ * PipelineBoard (L5)
+ *   └── KanbanColumn (L4)  ×N
+ *         └── OpportunityCard (L3)  ×N
+ *               └── TaskCheckItem (L2)  ×N
+ * ```
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PipelineBoardColumn {
+  /** Unique column key (used as React key — may differ from stage.id). */
+  key: string;
+  stage: KanbanColumnStage;
+  opportunities: OpportunityCardProps[];
+  /**
+   * When set, each card in this column shows a "Send Loan Application Request"
+   * button. Intended for the Leads stage only — cards there have no tasks yet.
+   */
+  onSendLoanApplication?: (opportunityId: string) => void;
+  /** DnD index (-1 for High Priority fixed column). */
+  columnIndex?: number;
+  /** Whether this column is being dragged (controlled by app DnD). */
+  isDragging?: boolean;
+  /** Whether a card is hovering over this column (controlled by app DnD). */
+  isDropTarget?: boolean;
+  /** Whether this is a fixed/system column (no Delete in menu). */
+  isDefault?: boolean;
+  isLoading?: boolean;
+  isLoadingMore?: boolean;
+  hasMore?: boolean;
+  loaderRef?: React.Ref<HTMLDivElement>;
+}
+
+export interface PipelineBoardProps {
+  // ── Data ─────────────────────────────────────────────────────
+  columns: PipelineBoardColumn[];
+
+  // ── Toolbar ──────────────────────────────────────────────────
+  /** Current keyword search value (controlled). */
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  /**
+   * Column filter chips. Each item is a label shown as a chip.
+   * Pass `"View All"` as a special value to show/select all columns.
+   */
+  filterOptions?: string[];
+  activeFilters?: string[];
+  onFilterChange?: (filter: string) => void;
+
+  // ── Column callbacks ─────────────────────────────────────────
+  onEditColumn?: (stageId: string) => void;
+  onDeleteColumn?: (stageId: string) => void;
+
+  // ── Toolbar ──────────────────────────────────────────────────
+  onRefresh?: () => void;
+
+  // ── Card callbacks ───────────────────────────────────────────
+  onTaskToggle?: (opportunityId: string, taskId: string) => void;
+  onMarkAsDone?: (opportunityId: string) => void;
+  onMoveToNextStage?: (opportunityId: string) => void;
+  onViewDetails?: (opportunityId: string) => void;
+  onChangePriority?: (opportunityId: string) => void;
+  onLaunchAssistant?: (opportunityId: string) => void;
+  onPutOnHold?: (opportunityId: string) => void;
+  onDeleteOpportunity?: (opportunityId: string) => void;
+  submittingOpportunityId?: string | null;
+
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Toolbar
+// ---------------------------------------------------------------------------
+
+interface ToolbarProps {
+  searchValue: string;
+  onSearchChange: (v: string) => void;
+  filterOptions: string[];
+  activeFilters: string[];
+  onFilterChange: (f: string) => void;
+  onRefresh?: () => void;
+}
+
+function Toolbar({
+  searchValue,
+  onSearchChange,
+  filterOptions,
+  activeFilters,
+  onFilterChange,
+  onRefresh,
+}: ToolbarProps) {
+  return (
+    <div className="flex flex-wrap items-center gap-3 border-b border-border bg-background px-4 py-3">
+      {/* Search */}
+      <div className="relative w-56 shrink-0">
+        <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder="Search opportunities…"
+          value={searchValue}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="h-8 pl-8 text-sm"
+        />
+        {searchValue && (
+          <button
+            onClick={() => onSearchChange("")}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            aria-label="Clear search"
+          >
+            <X className="size-3.5" />
+          </button>
+        )}
+      </div>
+
+      {/* Column filter toggle group */}
+      {filterOptions.length > 0 && (
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          spacing={1.5}
+          value={activeFilters}
+          onValueChange={(newValues) => {
+            const toggled =
+              newValues.find((v) => !activeFilters.includes(v)) ??
+              activeFilters.find((v) => !newValues.includes(v));
+            if (toggled) onFilterChange(toggled);
+          }}
+        >
+          {filterOptions.map((option) => (
+            <ToggleGroupItem key={option} value={option}>
+              {option}
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+      )}
+
+      {/* Refresh */}
+      {onRefresh && (
+        <button
+          onClick={onRefresh}
+          className="ml-auto text-muted-foreground hover:text-foreground"
+          aria-label="Refresh board"
+        >
+          <RefreshCw className="size-4" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PipelineBoard
+// ---------------------------------------------------------------------------
+
+export function PipelineBoard({
+  columns,
+  searchValue = "",
+  onSearchChange,
+  filterOptions = [],
+  activeFilters = [],
+  onFilterChange,
+  onRefresh,
+  onEditColumn,
+  onDeleteColumn,
+  onTaskToggle,
+  onMarkAsDone,
+  onMoveToNextStage,
+  onViewDetails,
+  onChangePriority,
+  onLaunchAssistant,
+  onPutOnHold,
+  onDeleteOpportunity,
+  submittingOpportunityId,
+  className,
+}: PipelineBoardProps) {
+  const hasToolbar =
+    onSearchChange || (filterOptions.length > 0 && onFilterChange);
+
+  return (
+    <div
+      className={cn("flex h-full flex-col bg-muted/20", className)}
+      data-slot="pipeline-board"
+    >
+      {/* ── Toolbar ── */}
+      {hasToolbar && (
+        <Toolbar
+          searchValue={searchValue}
+          onSearchChange={onSearchChange ?? (() => {})}
+          filterOptions={filterOptions}
+          activeFilters={activeFilters}
+          onFilterChange={onFilterChange ?? (() => {})}
+          onRefresh={onRefresh}
+        />
+      )}
+
+      {/* ── 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
+            }
+            onTaskToggle={onTaskToggle}
+            onMarkAsDone={onMarkAsDone}
+            onMoveToNextStage={onMoveToNextStage}
+            onSendLoanApplication={col.onSendLoanApplication}
+            onViewDetails={onViewDetails}
+            onChangePriority={onChangePriority}
+            onLaunchAssistant={onLaunchAssistant}
+            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>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,173 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { useThemeVars } from "@/lib/theme-provider";
+
+/**
+ * PipelineChart — WealthX DS (L4 Section)
+ *
+ * Horizontal stacked bar chart showing loan pipeline value by stage.
+ * Each segment is proportional to the stage's total loan value.
+ * Hover a segment to see the stage name and formatted value.
+ *
+ * Colors: each stage supplies its own `color` (e.g. `accentColor` from
+ * `KanbanColumnStage`). Falls back to the design system's primary token.
+ *
+ * Data source: `listColumns()` → `Stage[]` in `loan-crm.ts`
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PipelineChartStage {
+  id: string;
+  name: string;
+  /** Total loan value for this stage in dollars. */
+  value: number;
+  /** CSS color string — use the stage's `accentColor`. Falls back to primary. */
+  color?: string;
+}
+
+export interface PipelineChartProps {
+  stages: PipelineChartStage[];
+  /** Height of the stacked bar in pixels. Default 32. */
+  barHeight?: number;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatValue(v: number): string {
+  return new Intl.NumberFormat("en-AU", {
+    style: "currency",
+    currency: "AUD",
+    notation: "compact",
+    maximumFractionDigits: 1,
+  }).format(v);
+}
+
+// Fallback palette (used when stage.color is not set) — uses stage vars so
+// colors stay tenant-adaptive even when no explicit color is passed.
+const FALLBACK_COLORS = [
+  "var(--color-stage-1)",
+  "var(--color-stage-2)",
+  "var(--color-stage-3)",
+  "var(--color-stage-4)",
+  "var(--color-stage-5)",
+];
+
+// ---------------------------------------------------------------------------
+// PipelineChart
+// ---------------------------------------------------------------------------
+
+export function PipelineChart({
+  stages,
+  barHeight = 32,
+  className,
+}: PipelineChartProps) {
+  const themeVars = useThemeVars();
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+  const [tooltipX, setTooltipX] = React.useState(0);
+  const barRef = React.useRef<HTMLDivElement>(null);
+
+  const nonEmpty = stages.filter((s) => s.value > 0);
+  const total = nonEmpty.reduce((sum, s) => sum + s.value, 0);
+
+  if (total === 0 || stages.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center text-xs text-muted-foreground",
+          className,
+        )}
+        style={{ height: barHeight }}
+        data-slot="pipeline-chart"
+      >
+        No pipeline data.
+      </div>
+    );
+  }
+
+  const activeStage = activeId ? stages.find((s) => s.id === activeId) : null;
+
+  return (
+    <div
+      className={cn("flex flex-col gap-3", className)}
+      data-slot="pipeline-chart"
+      style={themeVars as React.CSSProperties}
+    >
+      {/* Stacked bar */}
+      <div
+        ref={barRef}
+        className="relative flex w-full overflow-hidden"
+        style={{ height: barHeight }}
+      >
+        {nonEmpty.map((stage, i) => {
+          const pct = (stage.value / total) * 100;
+          const color =
+            stage.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length];
+          const isActive = activeId === stage.id;
+
+          return (
+            <div
+              key={stage.id}
+              role="img"
+              className="relative h-full cursor-pointer transition-opacity"
+              style={{
+                width: `${pct}%`,
+                backgroundColor: color,
+                opacity: activeId && !isActive ? 0.5 : 1,
+                minWidth: 2,
+              }}
+              onMouseEnter={(e) => {
+                setActiveId(stage.id);
+                const bar = barRef.current;
+                if (!bar) return;
+                const rect = e.currentTarget.getBoundingClientRect();
+                const barRect = bar.getBoundingClientRect();
+                setTooltipX(rect.left + rect.width / 2 - barRect.left);
+              }}
+              onMouseLeave={() => setActiveId(null)}
+              aria-label={`${stage.name}: ${formatValue(stage.value)}`}
+            />
+          );
+        })}
+
+        {/* Tooltip */}
+        {activeStage && (
+          <div
+            className="pointer-events-none absolute -top-8 z-10 whitespace-nowrap border border-border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-sm"
+            style={{ left: tooltipX, transform: "translateX(-50%)" }}
+          >
+            <span className="font-medium">{activeStage.name}</span>
+            {" — "}
+            {formatValue(activeStage.value)}
+          </div>
+        )}
+      </div>
+
+      {/* Legend */}
+      <div className="flex flex-wrap gap-x-4 gap-y-1.5">
+        {nonEmpty.map((stage, i) => {
+          const color =
+            stage.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length];
+          return (
+            <div
+              key={stage.id}
+              className="flex items-center gap-1.5 text-xs text-muted-foreground"
+            >
+              <span
+                className="inline-block size-2 shrink-0 rounded-full"
+                style={{ backgroundColor: color }}
+                aria-hidden="true"
+              />
+              {stage.name}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}