@aglyn/plugins-crm 1.0.0-beta.143

package/src/lib/components/deals-section.js

@@ -0,0 +1,767 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { dealStageById, filterByNextActivity, findOrgMember, isNoNextActivityClause, ORG_SCOPE_TOKEN, pluginDocsHelp } from "@aglyn/aglyn";
+import { mdiCogOutline, mdiPlus, mdiTableLarge, mdiViewColumnOutline } from "@aglyn/shared-data-mdi";
+import { CardDisplay, MdiIcon } from "@aglyn/shared-ui-jsx";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import { ListTable } from "@aglyn/shared-ui-jsx/components/list-table.component";
+import { useCrmSavedView } from "../hooks/use-crm-saved-view.js";
+import { useCrmViewGrid } from "../hooks/use-crm-view-grid.js";
+import { CRM_LIST_SLOTS, CrmColumnOrderProvider } from "./crm-column-menu.js";
+import { NoNextActivityToggle, nextActivityColumn } from "./crm-next-activity-column.js";
+import CrmViewsControl from "./crm-views-control.js";
+import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { Alert, Button, Chip, CircularProgress, MenuItem, Stack, TextField, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useContactFieldDefinitions } from "../hooks/use-contact-field-definitions.js";
+import { useCrmScope } from "../hooks/use-crm-scope.js";
+import { useDealStageApi } from "../hooks/use-deal-stage-api.js";
+import { BOARD_CLOSED_LIMIT, BOARD_OPEN_LIMIT, useDealsByStatus, usePagedDeals } from "../hooks/use-deals.js";
+import { useOrgMemberDirectory } from "../hooks/use-org-member-directory.js";
+import { usePipeline } from "../hooks/use-pipeline.js";
+import { downloadTextFile } from "../model/contacts-csv.js";
+import { crmRoutes } from "../model/crm-routes.js";
+import { dealsCsv } from "../model/deals-csv.js";
+import { boardSummary, DEAL_STATUS_LABELS, formatAmountByCurrency, formatMoney } from "../model/deal-board-model.js";
+import { customFieldColumns } from "./contact-custom-columns.js";
+import { DealBoard } from "./deal-board.js";
+import { DealEditDrawer } from "./deal-edit-drawer.js";
+import { DealImportButton } from "./deal-import-drawer.js";
+import DealsBulkBar from "./deals-bulk-bar.js";
+import { LostReasonDialog } from "./lost-reason-dialog.js";
+import { OwnerAvatar } from "./owner-avatar.js";
+import { PipelinesDialog } from "./pipelines-dialog.js";
+/** What a pipeline made at the organization level is stamped with — the org's own token. */ const ORG_PIPELINE_TOKENS = [
+    ORG_SCOPE_TOKEN
+];
+/**
+ * `/crm/deals` — the pipeline (AGL-2598).
+ *
+ * ## Two views of one pipeline
+ *
+ * The BOARD is one pipeline's open deals, one column per open stage, read
+ * in one bounded listener over `(visibleTo, pipelineId, status, updatedAt)`
+ * and sorted into columns here — a listener per column would be five
+ * subscriptions for one board. The TABLE is the same pipeline's deals,
+ * paged by the query, with a status toggle; it is where the closed history
+ * is found. The three figures above both come from the board's read, so
+ * they describe what is in play whichever view is showing.
+ *
+ * ## Which pipeline
+ *
+ * The switcher in the header (AGL-2620) picks among the ACTIVE pipelines
+ * and opens on the default; the board, the table, the figures and the New
+ * deal drawer all follow it. It is section state rather than a route: a
+ * pipeline is a lens on the section, and a saved view that names one
+ * composes with it. **Pipelines** opens the dialog that creates, renames,
+ * defaults, archives and — through it — edits the stages of each.
+ *
+ * ## Every move goes through the route
+ *
+ * A drag, a card's "Move to", "Mark won" and "Mark lost" all end in
+ * `useDealStageApi`, never a Firestore write: the stage is the fact the
+ * automations listen for, and only the server emits the event. The section
+ * marks the card pending while the request runs and lets the listener land
+ * it — see `DealBoard` for why a move is not applied optimistically.
+ *
+ * ## Creation is a button
+ *
+ * "New deal" opens a drawer; there is no form above the list. The drawer
+ * writes client-direct against the rules, stamped with this console's scope.
+ *
+ * ## The table selects and exports (AGL-2621)
+ *
+ * The table's rows are selectable, and a selection raises `DealsBulkBar`
+ * over it — whose stage moves go through the same `useDealStageApi` as a
+ * drag. Export CSV beside the status toggle writes the page through
+ * `dealsCsv()`, naming the pipeline, the stage and the owner; the bar
+ * writes the same file over the selection.
+ */ export function DealsSection(props) {
+    var _ref, _ref1, _ref2, _ref3, _ref4, _scope_orgId, _ref5;
+    const { hostId, org, basePath } = props;
+    const routes = crmRoutes(basePath != null ? basePath : '');
+    const router = useRouter();
+    const { enqueueSnackbar } = useSnackbar();
+    const scope = useCrmScope({
+        hostId,
+        org
+    });
+    const pipelineState = usePipeline(scope.orgId, {
+        hostId,
+        org: org != null ? org : null
+    });
+    const { activePipelines } = pipelineState;
+    const [pipelineId, setPipelineId] = useState(null);
+    // The chosen pipeline while it is still active; else the default. A
+    // pipeline archived from another tab falls back rather than leaving the
+    // board on a pipeline the picker no longer lists.
+    const pipeline = (_ref = pipelineId ? activePipelines.find((entry)=>entry.$id === pipelineId) : null) != null ? _ref : pipelineState.pipeline;
+    const roster = useOrgMemberDirectory(scope.orgId);
+    const api = useDealStageApi(hostId);
+    const nowMs = useMemo(()=>Date.now(), []);
+    // The org's deal fields, for the table's optional columns (AGL-2661).
+    const dealFields = useContactFieldDefinitions(scope.orgId, 'deal');
+    const [view, setView] = useState('board');
+    const [closedExpanded, setClosedExpanded] = useState(false);
+    /*
+   * The table's status filter is the saved VIEW'S (AGL-2617): a view of
+   * deals is a view of the table, and it holds the status beside the
+   * columns and the sort. Opening one shows the table, because the board
+   * has no columns to arrange and answers to the pipeline's stages alone.
+   */ const views = useCrmSavedView({
+        section: 'deals',
+        hostId,
+        org,
+        basePath: basePath != null ? basePath : ''
+    });
+    const statusFilter = useMemo(()=>{
+        var _views_state_filters_find;
+        const value = (_views_state_filters_find = views.state.filters.find((clause)=>clause.field === 'status')) == null ? void 0 : _views_state_filters_find.value;
+        return value === 'open' || value === 'won' || value === 'lost' ? value : 'all';
+    }, [
+        views.state.filters
+    ]);
+    // The status is the query's clause; the "No next activity" clause beside
+    // it (AGL-2661) narrows the loaded page and survives a status change.
+    const viewFilters = views.state.filters;
+    const setStatusFilter = useCallback((next)=>views.setFilters([
+            ...next === 'all' ? [] : [
+                {
+                    field: 'status',
+                    op: 'equals',
+                    value: next
+                }
+            ],
+            ...viewFilters.filter(isNoNextActivityClause)
+        ]), [
+        views.setFilters,
+        viewFilters
+    ]);
+    useEffect(()=>{
+        if (views.currentId) setView('table');
+    }, [
+        views.currentId
+    ]);
+    // The board's read stays on in the table view too: it is what the summary
+    // above both views is computed from, and it is already bounded.
+    const open = useDealsByStatus(scope.orgId, scope.visibleTo, (_ref1 = pipeline == null ? void 0 : pipeline.$id) != null ? _ref1 : null, 'open', BOARD_OPEN_LIMIT);
+    const closedPipelineId = view === 'board' && closedExpanded ? (_ref2 = pipeline == null ? void 0 : pipeline.$id) != null ? _ref2 : null : null;
+    const won = useDealsByStatus(scope.orgId, scope.visibleTo, closedPipelineId, 'won', BOARD_CLOSED_LIMIT);
+    const lost = useDealsByStatus(scope.orgId, scope.visibleTo, closedPipelineId, 'lost', BOARD_CLOSED_LIMIT);
+    const paged = usePagedDeals(view === 'table' ? scope.orgId : null, scope.visibleTo, statusFilter, (_ref3 = pipeline == null ? void 0 : pipeline.$id) != null ? _ref3 : null);
+    const summary = useMemo(()=>boardSummary(open.data, pipeline), [
+        open.data,
+        pipeline
+    ]);
+    /*
+   * MOVES IN FLIGHT. A card in this set is dimmed and cannot be dragged
+   * again until the route answers; the listener is what moves it.
+   */ const [moving, setMoving] = useState(()=>new Set());
+    const track = useCallback(async (deal, request, done)=>{
+        setMoving((current)=>new Set(current).add(deal.$id));
+        try {
+            await request();
+            enqueueSnackbar(done, {
+                variant: 'success',
+                persist: false
+            });
+            return true;
+        } catch (error) {
+            enqueueSnackbar(error instanceof Error ? error.message : 'The deal could not be moved.', {
+                variant: 'warning',
+                allowDuplicate: true
+            });
+            return false;
+        } finally{
+            setMoving((current)=>{
+                const next = new Set(current);
+                next.delete(deal.$id);
+                return next;
+            });
+        }
+    }, [
+        enqueueSnackbar
+    ]);
+    const handleMove = useCallback((deal, stageId)=>{
+        var _ref;
+        const stage = dealStageById(pipeline, stageId);
+        void track(deal, ()=>api.moveToStage(deal, stageId), `Moved to ${(_ref = stage == null ? void 0 : stage.name) != null ? _ref : 'stage'}`);
+    }, [
+        api,
+        pipeline,
+        track
+    ]);
+    const handleWon = useCallback((deal)=>void track(deal, ()=>api.markWon(deal), 'Deal won'), [
+        api,
+        track
+    ]);
+    const [losing, setLosing] = useState(null);
+    const handleLost = useCallback((deal)=>setLosing(deal), []);
+    const confirmLost = useCallback((reason)=>{
+        const deal = losing;
+        if (!deal) return;
+        setLosing(null);
+        void track(deal, ()=>api.markLost(deal, reason), 'Deal marked lost');
+    }, [
+        api,
+        losing,
+        track
+    ]);
+    const openDeal = useCallback((deal)=>router.push(routes.deal(deal.$id)), [
+        router,
+        routes
+    ]);
+    const [creating, setCreating] = useState(false);
+    const [managingPipelines, setManagingPipelines] = useState(false);
+    const [selectedIds, setSelectedIds] = useState([]);
+    // A page or a status is a different set of rows; a selection made on
+    // the last one would be a count over rows no longer on screen.
+    useEffect(()=>setSelectedIds([]), [
+        statusFilter,
+        paged.page
+    ]);
+    const csvOptions = useMemo(()=>({
+            pipelineName: (id)=>{
+                var _pipelineState_pipelineById;
+                return (_pipelineState_pipelineById = pipelineState.pipelineById(id)) == null ? void 0 : _pipelineState_pipelineById.name;
+            },
+            stageName: (pipelineId, stageId)=>{
+                var _dealStageById;
+                return (_dealStageById = dealStageById(pipelineState.pipelineById(pipelineId), stageId)) == null ? void 0 : _dealStageById.name;
+            },
+            ownerEmail: (uid)=>{
+                const member = findOrgMember(roster.members, uid);
+                return (member == null ? void 0 : member.email) || (member == null ? void 0 : member.label) || uid;
+            }
+        }), [
+        pipelineState,
+        roster.members
+    ]);
+    const handleExport = useCallback(()=>{
+        downloadTextFile('deals.csv', 'text/csv', dealsCsv(paged.rows, csvOptions));
+    }, [
+        paged.rows,
+        csvOptions
+    ]);
+    const columns = useMemo(()=>[
+            {
+                field: 'title',
+                headerName: 'Deal',
+                flex: 1.6,
+                minWidth: 220,
+                renderCell: ({ row })=>{
+                    const withWhom = [
+                        row.contactName,
+                        row.companyName
+                    ].filter(Boolean).join(' · ');
+                    return /*#__PURE__*/ _jsxs(Stack, {
+                        sx: {
+                            justifyContent: 'center',
+                            lineHeight: 1.25
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                sx: {
+                                    lineHeight: 1.25
+                                },
+                                children: row.title || 'Untitled deal'
+                            }),
+                            withWhom ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                noWrap: true,
+                                sx: {
+                                    lineHeight: 1.25
+                                },
+                                children: withWhom
+                            }) : null
+                        ]
+                    });
+                }
+            },
+            {
+                field: 'stageId',
+                headerName: 'Stage',
+                flex: 0.9,
+                minWidth: 140,
+                valueGetter: (_value, row)=>{
+                    var _ref;
+                    var _dealStageById;
+                    return (_ref = (_dealStageById = dealStageById(pipelineState.pipelineById(row.pipelineId), row.stageId)) == null ? void 0 : _dealStageById.name) != null ? _ref : row.stageId;
+                }
+            },
+            {
+                field: 'amountCents',
+                headerName: 'Amount',
+                flex: 0.8,
+                minWidth: 120,
+                align: 'right',
+                headerAlign: 'right',
+                valueGetter: (_value, row)=>{
+                    var _row_amountCents;
+                    return (_row_amountCents = row.amountCents) != null ? _row_amountCents : null;
+                },
+                renderCell: ({ row })=>typeof row.amountCents === 'number' ? formatMoney(row.amountCents, row.currency) : '—'
+            },
+            {
+                field: 'ownerUid',
+                headerName: 'Owner',
+                flex: 0.9,
+                minWidth: 140,
+                valueGetter: (_value, row)=>roster.nameOf(row.ownerUid),
+                renderCell: ({ row })=>{
+                    const label = roster.nameOf(row.ownerUid);
+                    return label ? /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(OwnerAvatar, {
+                                label: label,
+                                size: 22
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                noWrap: true,
+                                children: label
+                            })
+                        ]
+                    }) : /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: '—'
+                    });
+                }
+            },
+            {
+                field: 'expectedCloseAtMs',
+                headerName: 'Expected close',
+                flex: 0.8,
+                minWidth: 130,
+                type: 'date',
+                valueGetter: (_value, row)=>typeof row.expectedCloseAtMs === 'number' ? new Date(row.expectedCloseAtMs) : null,
+                renderCell: ({ row })=>typeof row.expectedCloseAtMs === 'number' ? new Date(row.expectedCloseAtMs).toLocaleDateString() : '—'
+            },
+            {
+                field: 'status',
+                headerName: 'Status',
+                flex: 0.6,
+                minWidth: 100,
+                renderCell: ({ row })=>{
+                    var _DEAL_STATUS_LABELS_row_status;
+                    return /*#__PURE__*/ _jsx(Chip, {
+                        size: "small",
+                        label: (_DEAL_STATUS_LABELS_row_status = DEAL_STATUS_LABELS[row.status]) != null ? _DEAL_STATUS_LABELS_row_status : row.status,
+                        color: row.status === 'won' ? 'success' : row.status === 'lost' ? 'default' : 'primary',
+                        variant: row.status === 'open' ? 'outlined' : 'filled'
+                    });
+                }
+            },
+            // When the earliest open task against the deal is due (AGL-2661).
+            nextActivityColumn(nowMs),
+            // The org's deal fields as optional columns (AGL-2661).
+            ...customFieldColumns(dealFields.active)
+        ], [
+        pipelineState,
+        roster,
+        dealFields.active,
+        nowMs
+    ]);
+    const tableRows = useMemo(()=>filterByNextActivity(paged.rows, viewFilters), [
+        paged.rows,
+        viewFilters
+    ]);
+    /* The table's column and sort models are the view's (AGL-2617). */ const grid = useCrmViewGrid(views, columns);
+    const noOrg = scope.ready && !scope.orgId;
+    const pipelineLoading = !noOrg && (pipelineState.status === 'loading' || pipelineState.seeding || !pipeline && pipelineState.status !== 'error');
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(CardDisplay, {
+                header: 'Deals',
+                help: pluginDocsHelp('deals', {
+                    anchor: '#the-board-and-the-table'
+                }),
+                actions: /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center'
+                    },
+                    children: [
+                        activePipelines.length > 1 ? /*#__PURE__*/ _jsx(TextField, {
+                            select: true,
+                            size: "small",
+                            label: "Pipeline",
+                            value: (_ref4 = pipeline == null ? void 0 : pipeline.$id) != null ? _ref4 : '',
+                            onChange: (event)=>setPipelineId(event.target.value),
+                            sx: {
+                                minWidth: 160
+                            },
+                            slotProps: {
+                                select: {
+                                    'aria-label': 'Pipeline'
+                                }
+                            },
+                            children: activePipelines.map((entry)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: entry.$id,
+                                    children: entry.name
+                                }, entry.$id))
+                        }) : null,
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                path: mdiCogOutline.path,
+                                size: 0.8
+                            }),
+                            disabled: !scope.orgId || pipelineState.status === 'loading',
+                            onClick: ()=>setManagingPipelines(true),
+                            children: 'Pipelines'
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            variant: "contained",
+                            startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                path: mdiPlus.path,
+                                size: 0.8
+                            }),
+                            disabled: !pipeline || !scope.orgId,
+                            onClick: ()=>setCreating(true),
+                            children: 'New deal'
+                        })
+                    ]
+                }),
+                contentGutterX: true,
+                contentGutterY: true,
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 2,
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 3,
+                            sx: {
+                                alignItems: 'flex-end',
+                                flexWrap: 'wrap',
+                                rowGap: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Figure, {
+                                    label: "Open deals",
+                                    value: summary.openCount.toLocaleString()
+                                }),
+                                /*#__PURE__*/ _jsx(Figure, {
+                                    label: "Pipeline value",
+                                    value: formatAmountByCurrency(summary.valueByCurrency)
+                                }),
+                                /*#__PURE__*/ _jsx(Figure, {
+                                    label: "Weighted value",
+                                    value: formatAmountByCurrency(summary.weightedByCurrency)
+                                }),
+                                /*#__PURE__*/ _jsx(Stack, {
+                                    sx: {
+                                        flex: 1
+                                    }
+                                }),
+                                /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                                    exclusive: true,
+                                    size: "small",
+                                    color: "primary",
+                                    value: view,
+                                    onChange: (_event, next)=>{
+                                        if (next) setView(next);
+                                    },
+                                    "aria-label": "View",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(ToggleButton, {
+                                            value: "board",
+                                            "aria-label": "Board",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(MdiIcon, {
+                                                    path: mdiViewColumnOutline.path,
+                                                    size: 0.8
+                                                }),
+                                                /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "button",
+                                                    sx: {
+                                                        ml: 0.5
+                                                    },
+                                                    children: 'Board'
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(ToggleButton, {
+                                            value: "table",
+                                            "aria-label": "Table",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(MdiIcon, {
+                                                    path: mdiTableLarge.path,
+                                                    size: 0.8
+                                                }),
+                                                /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "button",
+                                                    sx: {
+                                                        ml: 0.5
+                                                    },
+                                                    children: 'Table'
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        noOrg ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "info",
+                            children: 'This site has no organization, so it has no pipeline.'
+                        }) : pipelineState.status === 'error' ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "warning",
+                            children: 'The pipeline could not be read. Deals need the "Manage data" permission.'
+                        }) : pipelineLoading ? /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                alignItems: 'center'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(CircularProgress, {
+                                    size: 18
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: pipelineState.seeding ? 'Setting up your Sales pipeline…' : 'Loading the pipeline…'
+                                })
+                            ]
+                        }) : view === 'board' && pipeline ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                open.status === 'success' && open.data.length === 0 ? /*#__PURE__*/ _jsx(EmptyStateComponent, {
+                                    compact: true,
+                                    label: 'No open deals yet',
+                                    description: 'A deal is a sale in progress, moved across the stages below as it advances.',
+                                    action: /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        variant: "contained",
+                                        startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                            path: mdiPlus.path,
+                                            size: 0.8
+                                        }),
+                                        disabled: !pipeline || !scope.orgId,
+                                        onClick: ()=>setCreating(true),
+                                        children: 'New deal'
+                                    })
+                                }) : null,
+                                /*#__PURE__*/ _jsx(DealBoard, {
+                                    pipeline: pipeline,
+                                    deals: open.data,
+                                    won: closedExpanded && won.status !== 'loading' ? won.data : null,
+                                    lost: closedExpanded && lost.status !== 'loading' ? lost.data : null,
+                                    closedExpanded: closedExpanded,
+                                    onToggleClosed: ()=>setClosedExpanded((current)=>!current),
+                                    labelFor: roster.nameOf,
+                                    moving: moving,
+                                    onOpen: openDeal,
+                                    onMove: handleMove,
+                                    onWon: handleWon,
+                                    onLost: handleLost,
+                                    nowMs: nowMs
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 1.5,
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 2,
+                                    sx: {
+                                        alignItems: 'center',
+                                        flexWrap: 'wrap',
+                                        rowGap: 1
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CrmViewsControl, {
+                                            controller: views,
+                                            allLabel: "All deals"
+                                        }),
+                                        /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                                            exclusive: true,
+                                            size: "small",
+                                            value: statusFilter,
+                                            onChange: (_event, next)=>{
+                                                if (next) setStatusFilter(next);
+                                            },
+                                            "aria-label": "Status",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(ToggleButton, {
+                                                    value: "all",
+                                                    children: 'All'
+                                                }),
+                                                /*#__PURE__*/ _jsx(ToggleButton, {
+                                                    value: "open",
+                                                    children: 'Open'
+                                                }),
+                                                /*#__PURE__*/ _jsx(ToggleButton, {
+                                                    value: "won",
+                                                    children: 'Won'
+                                                }),
+                                                /*#__PURE__*/ _jsx(ToggleButton, {
+                                                    value: "lost",
+                                                    children: 'Lost'
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(NoNextActivityToggle, {
+                                            filters: viewFilters,
+                                            onChange: views.setFilters
+                                        }),
+                                        /*#__PURE__*/ _jsx(Stack, {
+                                            sx: {
+                                                flex: 1
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(DealImportButton, {
+                                            hostId: hostId
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            size: "small",
+                                            onClick: handleExport,
+                                            disabled: !paged.rows.length,
+                                            children: 'Export CSV'
+                                        })
+                                    ]
+                                }),
+                                paged.status === 'success' && paged.rows.length === 0 && paged.page === 0 ? /*#__PURE__*/ _jsx(EmptyStateComponent, {
+                                    label: statusFilter === 'all' ? 'No deals yet' : `No ${statusFilter} deals`,
+                                    description: statusFilter === 'all' ? 'A deal is a sale in progress, moved across the pipeline as it advances.' : undefined,
+                                    action: statusFilter === 'all' ? /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        variant: "contained",
+                                        startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                            path: mdiPlus.path,
+                                            size: 0.8
+                                        }),
+                                        disabled: !pipeline || !scope.orgId,
+                                        onClick: ()=>setCreating(true),
+                                        children: 'New deal'
+                                    }) : undefined
+                                }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(DealsBulkBar, {
+                                            hostId: hostId,
+                                            scope: scope.scope,
+                                            rows: tableRows,
+                                            selected: selectedIds,
+                                            onSelectedChange: setSelectedIds,
+                                            pipelineById: pipelineState.pipelineById,
+                                            roster: roster,
+                                            api: api,
+                                            csv: csvOptions
+                                        }),
+                                        /*#__PURE__*/ _jsx(CrmColumnOrderProvider, {
+                                            value: grid.columnOrder,
+                                            children: /*#__PURE__*/ _jsx(ListTable, {
+                                                rows: tableRows,
+                                                columns: grid.columns,
+                                                slots: CRM_LIST_SLOTS,
+                                                selectable: {
+                                                    selected: selectedIds,
+                                                    onChange: setSelectedIds
+                                                },
+                                                onOpen: (_id, row)=>openDeal(row),
+                                                // Columns and sort are the view's, controlled (AGL-2617).
+                                                columnVisibilityModel: grid.columnVisibilityModel,
+                                                onColumnVisibilityModelChange: grid.onColumnVisibilityModelChange,
+                                                sortModel: grid.sortModel,
+                                                onSortModelChange: grid.onSortModelChange,
+                                                hideFooter: true
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(ListPagination, {
+                                            page: paged.page,
+                                            pageSize: paged.pageSize,
+                                            rowCount: paged.rows.length,
+                                            hasMore: paged.hasMore,
+                                            onPageChange: paged.setPage,
+                                            onPageSizeChange: paged.setPageSize
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(DealEditDrawer, {
+                open: creating,
+                onClose: ()=>setCreating(false),
+                hostId: hostId,
+                org: org,
+                pipelines: activePipelines,
+                defaultPipeline: pipeline
+            }),
+            /*#__PURE__*/ _jsx(PipelinesDialog, {
+                open: managingPipelines,
+                onClose: ()=>setManagingPipelines(false),
+                orgId: (_scope_orgId = scope.orgId) != null ? _scope_orgId : '',
+                // A pipeline made here is stamped the way the seeded default is
+                // (`usePipeline`): the site's own tokens under a site; at the
+                // organization level the org token, with the picked site as its
+                // provenance (AGL-2630).
+                hostId: scope.createHostId,
+                pipelines: pipelineState.pipelines,
+                fromCache: pipelineState.fromCache,
+                unreadable: pipelineState.status === 'error',
+                visibleToTokens: scope.visibleTo,
+                createTokens: scope.level === 'site' ? scope.createTokens : ORG_PIPELINE_TOKENS
+            }),
+            /*#__PURE__*/ _jsx(LostReasonDialog, {
+                open: Boolean(losing),
+                dealTitle: (_ref5 = losing == null ? void 0 : losing.title) != null ? _ref5 : '',
+                onClose: ()=>setLosing(null),
+                onConfirm: confirmLost
+            })
+        ]
+    });
+}
+DealsSection.displayName = 'DealsSection';
+function Figure(props) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            lineHeight: 1.2
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: props.label
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h6",
+                component: "span",
+                children: props.value
+            })
+        ]
+    });
+}
+Figure.displayName = 'Figure';
+export default DealsSection;
+
+//# sourceMappingURL=deals-section.js.map