neo-cmp-cli 1.13.16 → 1.13.18

package/template/neo-pipeline-cmps/src/components/stageSwitch__c/index.tsx

@@ -0,0 +1,513 @@
+/**
+ * @file Stage Switch Card Component
+ * @description Toggle between different sales stage data; opportunities from xObject.query, stages from stage API
+ */
+import * as React from 'react';
+import { Spin } from 'antd';
+// @ts-ignore
+import { request, xObject } from 'neo-open-api';
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+// @ts-ignore
+import { BaseCmp, NeoEvent } from 'neo-ui-common';
+
+import queryByCustomSQL from '../../utils/queryByCustomSQL';
+import {
+  closeRangeFromFilter,
+  entityTypeIdForWhere,
+  extractStageKeyFromStageName,
+  formatAmountDisplay,
+  normalizeOwnerIdsForWhere,
+  parseNumberOrZero,
+  getDefaultFilterByProps,
+} from '../../utils/common';
+import { rowMoney, rowOpportunityStage } from '../../utils/stageSwitch';
+
+import './style.scss';
+
+const STAGE_LIST_URL =
+  '/rest/data/v2.0/xobjects/stage/actions/getStageListByEntityTypeApiKey';
+
+interface StageTab {
+  key: string;
+  name: string;
+  amount: string;
+  count: number;
+  /** Can be empty object when no period-over-period data, not rendered */
+  changes?: Record<string, unknown>;
+}
+
+interface StageSwitchProps {
+  stages?: StageTab[];
+  activeStage?: string;
+  data?: {
+    __NeoCurrentUser?: { id?: string | number };
+  };
+  onStageChange?: (stage: StageTab) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface StageSwitchState {
+  activeStage: string;
+  opportunityList: Record<string, unknown>[];
+  /** Display stages generated from API + getOpportunityList */
+  stages: StageTab[];
+  loading: boolean;
+  error: string | null;
+  /** Consistent with FilterBar event payload (closeDateCustomRange / opportunityOwner / businessType, etc.); falls back to defaultFilter when empty object */
+  filter: any;
+  defaultEntityTypeApiKey: string;
+}
+
+class StageSwitch extends BaseCmp<StageSwitchProps, StageSwitchState> {
+  constructor(props: StageSwitchProps) {
+    super(props);
+
+    const defaultFilter = getDefaultFilterByProps(props);
+
+    this.state = {
+      activeStage: props.activeStage || '',
+      opportunityList: [],
+      stages: props.stages?.length ? props.stages : [],
+      loading: false,
+      error: null,
+      filter: defaultFilter,
+      defaultEntityTypeApiKey:
+        defaultFilter.businessTypeApiKey ?? 'defaultBusiType',
+    };
+
+    this.getOpportunityQueryFilter = this.getOpportunityQueryFilter.bind(this);
+    this.fetchOpportunityList = this.fetchOpportunityList.bind(this);
+    this.getOpportunityStats = this.getOpportunityStats.bind(this);
+    this.fetchStageRows = this.fetchStageRows.bind(this);
+    this.buildStagesFromApi = this.buildStagesFromApi.bind(this);
+    this.fetchAllData = this.fetchAllData.bind(this);
+    this.handleStageClick = this.handleStageClick.bind(this);
+    this.refreshData = this.refreshData.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+    this.updateActiveStage = this.updateActiveStage.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchAllData();
+
+    /*
+    // Listen to a broadcast event
+    NeoEvent.listen('updateFilterData', (filterData: any) => {
+      console.log('StageSwitch received a broadcast event updateFilterData: ', filterData);
+      this.setFilter(filterData);
+    });
+
+    // Broadcast event: update the currently active sales stage
+    NeoEvent.listen('updateActiveStage', (activeStage: string) => {
+      console.log('SimpleTable received a broadcast event updateActiveStage: ', activeStage);
+      this.updateActiveStage(activeStage);
+    });
+    */
+  }
+
+  componentDidUpdate(prevProps: StageSwitchProps) {
+    if (
+      this.props.activeStage != null &&
+      this.props.activeStage !== '' &&
+      this.props.activeStage !== prevProps.activeStage
+    ) {
+      this.setState({ activeStage: this.props.activeStage });
+    }
+  }
+
+  /** Convert FilterBar structured filter to xObject.query where string array (SDK concatenates with AND in order) */
+  getOpportunityQueryFilter(): string[] {
+    const defaultFilter = getDefaultFilterByProps(this.props);
+    const raw = this.state.filter;
+    const curFilter: Record<string, unknown> =
+      raw && typeof raw === 'object' && !Array.isArray(raw)
+        ? Object.keys(raw as object).length > 0
+          ? (raw as Record<string, unknown>)
+          : defaultFilter
+        : defaultFilter;
+
+    const where: string[] = [];
+
+    const range = closeRangeFromFilter(curFilter.closeDateCustomRange);
+    if (range) {
+      where.push(`closeDate >= ${range.start} and closeDate <= ${range.end}`);
+    }
+
+    const ownerIds = normalizeOwnerIdsForWhere(curFilter.opportunityOwner);
+    if (ownerIds.length === 1) {
+      where.push(`ownerId = ${ownerIds[0]}`);
+    } else if (ownerIds.length > 1) {
+      where.push(`ownerId in (${ownerIds.join(', ')})`);
+    }
+
+    const entityTypeId = entityTypeIdForWhere(curFilter.businessType);
+    if (entityTypeId != null) {
+      where.push(`entityType = ${entityTypeId}`);
+    }
+
+    return where;
+  }
+
+  /** Generate query conditions for fetching historical opportunity list data */
+  getHistoryOpportunityQueryFilter(): string[] {
+    const defaultFilter = getDefaultFilterByProps(this.props);
+    const raw = this.state.filter;
+    const curFilter: Record<string, unknown> =
+      raw && typeof raw === 'object' && !Array.isArray(raw)
+        ? Object.keys(raw as object).length > 0
+          ? (raw as Record<string, unknown>)
+          : defaultFilter
+        : defaultFilter;
+
+    const where: string[] = [];
+
+    const range = closeRangeFromFilter(curFilter.closeDateCustomRange);
+    if (range) {
+      where.push(
+        `opportunity_1_closeDate >= ${range.start} and opportunity_1_closeDate <= ${range.end}`,
+      );
+    }
+
+    const ownerIds = normalizeOwnerIdsForWhere(curFilter.opportunityOwner);
+    if (ownerIds.length === 1) {
+      where.push(`opportunity_1_ownerId = ${ownerIds[0]}`);
+    } else if (ownerIds.length > 1) {
+      where.push(`opportunity_1_ownerId in (${ownerIds.join(', ')})`);
+    }
+
+    const entityTypeId = entityTypeIdForWhere(curFilter.businessType);
+    if (entityTypeId != null) {
+      where.push(`opportunity_1_entityType = ${entityTypeId}`);
+    }
+
+    if (curFilter.changesSinceCustomTime) {
+      where.push(`version = ${curFilter.changesSinceCustomTime}`);
+    }
+
+    return where;
+  }
+
+  /** Query up to 1000 opportunities per request */
+  async fetchOpportunityList(): Promise<Record<string, unknown>[]> {
+    const result = await xObject.query({
+      xObjectApiKey: 'opportunity',
+      fields: ['id', 'money', 'customItem248__c'],
+      page: 1,
+      pageSize: 1000,
+      where: this.getOpportunityQueryFilter(),
+    });
+
+    return result?.status
+      ? ((result.data ?? []) as Record<string, unknown>[])
+      : [];
+  }
+
+  /** Query historical opportunity list data */
+  async fetchHistoryOpportunityList(): Promise<unknown[]> {
+    const result = await queryByCustomSQL({
+      xObjectApiKey: 'biCustomModel_397169_20260401104916618',
+      fields: [
+        'opportunity_1_opportunityName',
+        'opportunity_1_saleStageId',
+        'opportunity_1_money',
+      ],
+      page: 1,
+      pageSize: 1000,
+      where: this.getHistoryOpportunityQueryFilter(),
+    });
+
+    return result?.status ? result.data ?? [] : [];
+  }
+
+  /**
+   * Filter opportunities by stageName: extract the segment after the first `.` in stageName as the stage key, and compare with the stage text on the opportunity row using the same rule.
+   * @returns count — number of records; amount — sum of money (or amount field if money is absent)
+   */
+  getOpportunityStats(
+    stageName: string,
+    list: Record<string, unknown>[], // opportunity list
+  ): { amount: number; count: number } {
+    const key = extractStageKeyFromStageName(stageName);
+    let amount = 0; // total opportunity amount
+    let count = 0; // total opportunity count
+
+    for (const row of list) {
+      if (!row || typeof row !== 'object') continue;
+      const rec = row as Record<string, unknown>;
+      const rowKey = extractStageKeyFromStageName(rowOpportunityStage(rec));
+      if (key !== rowKey) continue;
+      count += 1;
+      amount += rowMoney(rec);
+    }
+
+    return { amount, count };
+  }
+
+  /**
+   * Historical opportunity list is a 2D array returned by custom SQL:
+   * `[opportunityName, saleStageId, money, ...]` — column 2 is the stage ID (corresponds to stage `key`), column 3 is the sales amount.
+   * @returns count — number of records; amount — sum of sales amount
+   */
+  getHistoryOpportunityStats(
+    stageKey: string,
+    list: unknown[],
+  ): { amount: number; count: number } {
+    let amount = 0;
+    let count = 0;
+    const targetId = String(stageKey);
+
+    for (const row of list) {
+      if (!Array.isArray(row) || row.length < 3) continue;
+      if (String(row[1]) !== targetId) continue;
+      count += 1;
+      amount += parseNumberOrZero(row[2]);
+    }
+
+    return { amount, count };
+  }
+
+  async fetchStageRows(): Promise<Record<string, unknown>[]> {
+    const defaultEntityTypeApiKey =
+      this.state.defaultEntityTypeApiKey ?? 'defaultBusiType';
+
+    const res = await request({
+      url: STAGE_LIST_URL,
+      method: 'POST',
+      data: {
+        data: {
+          entityTypeApiKey: defaultEntityTypeApiKey,
+        },
+      },
+    });
+
+    return res.data || [];
+  }
+
+  buildStagesFromApi(
+    rows: any[], // stage list
+    opportunityList: Record<string, unknown>[], // opportunity list
+    historyOpportunityList: unknown[], // historical opportunities: SQL 2D array rows
+  ): StageTab[] {
+    console.log(
+      '[StageSwitch__c] buildStagesFromApi:',
+      rows,
+      opportunityList,
+      historyOpportunityList,
+    );
+    return rows.map((row, index) => {
+      const stageName = row.stageName;
+      const { amount, count } = this.getOpportunityStats(
+        stageName,
+        opportunityList,
+      );
+      const key = String(
+        row.id ?? row.apiKey ?? (stageName || `stage-${index}`),
+      );
+
+      // Find the corresponding opportunity from the historical opportunity list by opportunity ID
+      const { amount: historyAmount, count: historyCount } =
+        this.getHistoryOpportunityStats(key, historyOpportunityList);
+
+      const tab: StageTab = {
+        key,
+        name: stageName,
+        amount: formatAmountDisplay(amount),
+        count: count,
+        changes: {
+          amount: formatAmountDisplay(historyAmount),
+          count: historyCount,
+          amountDirection:
+            historyAmount < amount
+              ? 'up'
+              : historyAmount == amount
+              ? 'same'
+              : 'down',
+          countDirection:
+            historyCount < count
+              ? 'up'
+              : historyCount == count
+              ? 'same'
+              : 'down',
+        },
+      };
+      return tab;
+    });
+  }
+
+  async fetchAllData() {
+    this.setState({ loading: true, error: null });
+
+    try {
+      const [opportunityList, stageRows, historyOpportunityList] =
+        await Promise.all([
+          this.fetchOpportunityList(),
+          this.fetchStageRows(),
+          this.fetchHistoryOpportunityList(),
+        ]);
+
+      const stages = this.buildStagesFromApi(
+        stageRows,
+        opportunityList,
+        historyOpportunityList,
+      );
+
+      this.setState({
+        opportunityList,
+        stages,
+        loading: false,
+      });
+    } catch (e: unknown) {
+      console.error('StageSwitch failed to load:', e);
+      const msg = e instanceof Error ? e.message : 'Failed to load';
+      this.setState({
+        loading: false,
+        error: msg,
+        opportunityList: [],
+        stages: [],
+      });
+    }
+  }
+
+  // When a stage is clicked, update the currently active sales stage
+  handleStageClick(stage: StageTab) {
+    const { onStageChange } = this.props;
+    if (onStageChange) {
+      onStageChange(stage);
+    }
+    // Broadcast event: update the currently active sales stage
+    const activeStage = extractStageKeyFromStageName(stage.name);
+    this.setState({ activeStage: activeStage });
+
+    this.onActiveStageChange({
+      activeStage,
+    });
+
+    // Trigger a broadcast event
+    // NeoEvent.broadcast('updateActiveStage', activeStage);
+  }
+
+  @NeoEvent.function
+  async refreshData() {
+    await this.fetchAllData();
+  }
+
+  /**
+   * Consistent with pipelineFunnel: pass in { relation, filter }, will re-fetch opportunities and merge stage statistics.
+   */
+  @NeoEvent.function
+  setFilter(filter?: any) {
+    if (isEqual(filter, this.state.filter)) {
+      return;
+    }
+    let defaultEntityTypeApiKey = this.state.defaultEntityTypeApiKey;
+    if (filter.businessTypeApiKey) {
+      defaultEntityTypeApiKey = filter.businessTypeApiKey;
+    }
+    console.log('[StageSwitch__c] setFilter:', filter);
+    this.setState(
+      { filter: filter, defaultEntityTypeApiKey: defaultEntityTypeApiKey },
+      () => {
+        this.fetchAllData();
+      },
+    );
+  }
+
+  /**
+   * Update the currently active sales stage
+   */
+  @NeoEvent.function
+  updateActiveStage(activeStage?: string) {
+    if (isEqual(activeStage, this.state.activeStage)) {
+      return;
+    }
+    console.log('[StageSwitch__c] updateActiveStage:', activeStage);
+    this.setState({ activeStage: activeStage || '' });
+  }
+
+  @NeoEvent.dispatch
+  onActiveStageChange(eventData?: any) {}
+
+  render() {
+    const { className, style } = this.props;
+    const { activeStage, stages, loading, error } = this.state;
+
+    return (
+      <div
+        className={`stageSwitch__c ${className || ''}`}
+        style={style}
+        data-time="2026.4.17 01"
+      >
+        <Spin spinning={loading}>
+          {error ? (
+            <div
+              className="stageSwitch__c-error"
+              style={{ color: '#cf1322', fontSize: 12, marginBottom: 8 }}
+            >
+              {error}
+            </div>
+          ) : null}
+          <div className="stage-tabs">
+            {stages.map((stage) => (
+              <div
+                key={stage.key}
+                className={`stage-tab ${
+                  activeStage === extractStageKeyFromStageName(stage.name)
+                    ? 'active'
+                    : ''
+                }`}
+                onClick={() => this.handleStageClick(stage)}
+              >
+                <div className="stage-name">{stage.name}</div>
+                <div className="stage-amount-row">
+                  <span className="stage-amount">{stage.amount}</span>
+                  <span className="stage-count">({stage.count})</span>
+                </div>
+                {stage.changes && Object.keys(stage.changes).length > 0 && (
+                  <div className="stage-sub">
+                    <span
+                      className={`change-amount ${
+                        stage.changes.amountDirection === 'up'
+                          ? 'positive'
+                          : stage.changes.amountDirection === 'down'
+                          ? 'negative'
+                          : ''
+                      }`}
+                    >
+                      {stage.changes.amountDirection === 'up'
+                        ? '↑'
+                        : stage.changes.amountDirection === 'same'
+                        ? ''
+                        : '↓'}{' '}
+                      {stage.changes.amount}
+                    </span>
+                    <span> &nbsp; </span>
+                    <span
+                      className={`change-count ${
+                        stage.changes.countDirection === 'up'
+                          ? 'positive'
+                          : stage.changes.amountDirection === 'down'
+                          ? 'negative'
+                          : ''
+                      }`}
+                    >
+                      {stage.changes.countDirection === 'up'
+                        ? '↑'
+                        : stage.changes.countDirection === 'same'
+                        ? ''
+                        : '↓'}{' '}
+                      {stage.changes.count}
+                    </span>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Spin>
+      </div>
+    );
+  }
+}
+
+export default StageSwitch;

package/template/neo-pipeline-cmps/src/components/stageSwitch__c/model.ts

@@ -0,0 +1,71 @@
+export class StageSwitchModel {
+  label: string = 'Stage Switch Card';
+  description: string =
+    'Toggle between different sales stage data, including amount, count and change trends';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/card.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    /** defaultEntityTypeApiKey passed when requesting the stage list API */
+    // defaultEntityTypeApiKey: 'defaultBusiType',
+    stages: [] as unknown[],
+    activeStage: 'Prospecting',
+  };
+
+  events = [
+    {
+      apiKey: 'onActiveStageChange',
+      label: 'After active stage changes',
+      helpText:
+        'Triggered after the active stage changes; event params include activeStage (current active stage)',
+      eventParams:
+        '[{"apiKey":"eventParam","children":[{"apiKey":"activeStage","label":"Current active stage","type":"String"}],"label":"Event parameters","type":"Object"}]',
+    },
+  ];
+
+  functions = [
+    {
+      apiKey: 'updateActiveStage',
+      label: 'Update active stage',
+      helpTextKey: 'Set the current active sales stage',
+      funcInParams: [
+        {
+          apiKey: 'activeStage',
+          label: 'Current active stage',
+          type: 'String',
+          required: false,
+        },
+      ],
+    },
+    {
+      apiKey: 'setFilter',
+      label: 'Set filter conditions',
+      helpTextKey:
+        'Set the filter consistent with the chart (closeDate / ownerId / entityType) and re-fetch opportunities',
+      funcInParams: [
+        {
+          apiKey: 'filter',
+          label: 'Filter conditions (relation + filter array)',
+          type: 'Object',
+          required: false,
+        },
+      ],
+    },
+    {
+      apiKey: 'refreshData',
+      label: 'Refresh data',
+      helpTextKey: 'Re-fetch opportunity list and stage list',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'panelInput',
+      name: 'defaultEntityTypeApiKey',
+      label: 'Business type ApiKey (stage list API)',
+    },
+  ];
+}
+
+export default StageSwitchModel;

package/template/{neo-bi-cmps → neo-pipeline-cmps}/src/components/stageSwitch__c/style.scss

@@ -1,8 +1,10 @@
-.stage-switch__c {
+.stageSwitch__c {
+  margin-top: 12px;
+
   .stage-tabs {
     display: flex;
     gap: 0;
-    margin-bottom: 20px;
+    margin-bottom: 12px;
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

package/template/neo-pipeline-cmps/src/components/stageTimeChart__c/README.md

@@ -0,0 +1,37 @@
+# StageTimeChart Component
+
+Stage time component that displays the average time spent in each sales stage.
+
+## Usage
+
+```tsx
+import StageTimeChart from './components/stageTimeChart__c';
+
+<StageTimeChart
+  title="Avg. Time in Stage"
+  items={[
+    { stageName: 'Prospecting', actualTime: '8d 6h', actualPercent: 28, actualColor: '#22c55e', targetPercent: 33, limitPercent: 50 },
+  ]}
+  onStageClick={(name) => console.log('Clicked:', name)}
+/>
+```
+
+## Props
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| title | Title | string | 'Avg. Time in Stage' |
+| items | Stage data | StageTimeItem[] | [] |
+| showAiButton | Show AI button | boolean | true |
+| onStageClick | Stage click callback | (stageName: string) => void | - |
+
+## StageTimeItem
+
+| Property | Description | Type |
+|----------|-------------|------|
+| stageName | Stage name | string |
+| actualTime | Actual time | string |
+| actualPercent | Actual percentage | number |
+| actualColor | Actual color | string |
+| targetPercent | Target percentage | number |
+| limitPercent | Limit percentage | number |