update

frontend/src/pages/Deals.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Loader2, LayoutGrid, Pencil } from 'lucide-react';
+import { GitBranch, Loader2, LayoutGrid, MessageSquare, Pencil } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
 import AppShell from '@/components/layout/AppShell';
@@ -32,6 +32,16 @@ const GROUP_BAR_ROTATING = [
     'border-l-[6px] border-l-rose-500 bg-rose-50/70',
 ];
 
+/** Kanban column header backgrounds (Monday-style saturated bars). */
+const PIPELINE_HEADER_BG = {
+    new: 'bg-violet-600',
+    discovery: 'bg-cyan-500',
+    proposal: 'bg-sky-500',
+    negotiation: 'bg-teal-600',
+    won: 'bg-emerald-600',
+    lost: 'bg-red-600',
+};
+
 const STAGE_GROUP_HEADER = {
     new: 'border-l-[6px] border-l-violet-600 bg-violet-50/90',
     discovery: 'border-l-[6px] border-l-cyan-500 bg-cyan-50/70',
@@ -169,6 +179,134 @@ function GroupedDealTbody({
     );
 }
 
+/** Chevron-tab clip for pipeline column headers (points right like Monday). */
+const pipelineHeaderClip = {
+    clipPath: 'polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%)',
+};
+
+function PipelineDealCard({ deal, openDeal }) {
+    const initials = (deal.owner_initials || '?').toString().slice(0, 2).toUpperCase();
+    return (
+        <div
+            role="button"
+            tabIndex={0}
+            draggable
+            onDragStart={(e) => {
+                e.dataTransfer.setData('application/deal-id', String(deal.id));
+                e.dataTransfer.setData('text/plain', String(deal.id));
+                e.dataTransfer.effectAllowed = 'move';
+            }}
+            onClick={(ev) => {
+                if (ev.defaultPrevented) return;
+                openDeal(deal);
+            }}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    openDeal(deal);
+                }
+            }}
+            className={cn(
+                'w-full cursor-grab rounded-lg border border-slate-200 bg-white p-3 text-left shadow-sm outline-none',
+                'transition hover:border-violet-300 hover:shadow-md active:cursor-grabbing'
+            )}
+        >
+            <div className="line-clamp-2 text-sm font-semibold leading-snug text-slate-900">
+                {deal.name || 'Untitled'}
+            </div>
+            <div className="mt-2 break-words text-base font-semibold tabular-nums leading-tight text-slate-800">
+                {fmtMoney(deal.deal_value)}
+            </div>
+            <div className="mt-3 flex items-end justify-between gap-2">
+                <div className="min-w-0 flex flex-1 flex-wrap items-center gap-2">
+                    <div
+                        className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-violet-200 bg-violet-100 text-xs font-bold text-violet-800"
+                        title="Owner"
+                    >
+                        {initials}
+                    </div>
+                    {deal.contact_display ? (
+                        <span className="truncate rounded-md bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-800">
+                            {deal.contact_display}
+                        </span>
+                    ) : null}
+                </div>
+                <div className="flex shrink-0 gap-1.5 text-slate-400">
+                    <MessageSquare className="h-4 w-4" aria-hidden />
+                    <GitBranch className="h-4 w-4" aria-hidden />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function PipelineBoard({ columns, openDeal, patchDeal, createDeal, createBusy }) {
+    return (
+        <div className="flex min-h-[min(75vh,720px)] w-full min-w-0 gap-3 overflow-x-auto pb-2 pt-1 [scrollbar-gutter:stable]">
+            {columns.map((col) => {
+                const sumDeal = sumNumeric(col.deals, 'deal_value');
+                const headerBg = PIPELINE_HEADER_BG[col.value] || 'bg-slate-600';
+                return (
+                    <div
+                        key={col.value}
+                        className="flex w-[min(100%,320px)] min-w-[260px] max-w-[360px] shrink-0 flex-col rounded-xl border border-slate-200 bg-slate-100/90 shadow-sm"
+                        onDragOver={(e) => {
+                            e.preventDefault();
+                            e.dataTransfer.dropEffect = 'move';
+                        }}
+                        onDrop={(e) => {
+                            e.preventDefault();
+                            const raw =
+                                e.dataTransfer.getData('application/deal-id') ||
+                                e.dataTransfer.getData('text/plain');
+                            const id = Number(raw);
+                            if (!Number.isFinite(id)) return;
+                            patchDeal(id, { stage: col.value });
+                        }}
+                    >
+                        <div
+                            className={cn(
+                                'relative shrink-0 px-3 pb-3 pt-2.5 text-white shadow-sm',
+                                headerBg
+                            )}
+                            style={pipelineHeaderClip}
+                        >
+                            <div className="flex items-start justify-between gap-2 pr-5">
+                                <span className="text-[13px] font-bold leading-tight tracking-wide">
+                                    {col.label}
+                                </span>
+                                <span className="shrink-0 rounded-full bg-black/15 px-2 py-0.5 text-xs font-bold tabular-nums">
+                                    {col.deals.length}
+                                </span>
+                            </div>
+                            <div className="mt-2 text-xs font-semibold tabular-nums text-white/95">
+                                {fmtMoney(sumDeal)}
+                            </div>
+                        </div>
+                        <div className="flex max-h-[min(62vh,560px)] min-h-[120px] flex-1 flex-col gap-2 overflow-y-auto p-2">
+                            {col.deals.map((deal) => (
+                                <PipelineDealCard key={deal.id} deal={deal} openDeal={openDeal} />
+                            ))}
+                            <div className="mt-auto shrink-0 pt-1">
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-8 w-full justify-center text-violet-700 hover:bg-violet-50"
+                                    disabled={createBusy}
+                                    onClick={() => createDeal(col.value)}
+                                >
+                                    + Add deal
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
 function DealRow({ deal, tableEditRowId, setTableEditRowId, patchDeal, updateStage, openDeal }) {
     const meta = stageMeta(deal.stage);
     const safeStage = STAGES.some((s) => s.value === deal.stage) ? deal.stage : 'new';
@@ -498,6 +636,19 @@ export default function Deals() {
         return groups;
     }, [deals]);
 
+    /** All stages as Kanban columns (including empty). */
+    const pipelineColumns = useMemo(
+        () =>
+            STAGES.map((s) => ({
+                ...s,
+                deals: deals.filter((d) => {
+                    const st = STAGES.some((x) => x.value === d.stage) ? d.stage : 'new';
+                    return st === s.value;
+                }),
+            })),
+        [deals]
+    );
+
     const seedDemo = async () => {
         setSeedBusy(true);
         try {
@@ -620,7 +771,11 @@ export default function Deals() {
                         active: dealsView === 'byOwner',
                         onClick: () => setDealsView('byOwner'),
                     },
-                    { label: 'Pipeline', active: false, disabled: true },
+                    {
+                        label: 'Pipeline',
+                        active: dealsView === 'pipeline',
+                        onClick: () => setDealsView('pipeline'),
+                    },
                 ]}
                 primaryAction={{
                     label: 'New deal',
@@ -653,6 +808,14 @@ export default function Deals() {
                         <div className="flex justify-center py-16 text-slate-500">
                             <Loader2 className="h-8 w-8 animate-spin" />
                         </div>
+                    ) : dealsView === 'pipeline' ? (
+                        <PipelineBoard
+                            columns={pipelineColumns}
+                            openDeal={openDeal}
+                            patchDeal={patchDeal}
+                            createDeal={createDeal}
+                            createBusy={createBusy}
+                        />
                     ) : deals.length === 0 ? (
                         <div className="text-center py-16 text-slate-500 space-y-3">
                             <p>No deals yet. Convert leads from the Leads page, load demo data, or create a deal.</p>