Merge pull request #2568 from topcoder-platform/sales-dashboard-followups-dev

Update sales fiscal-year titles, date defaults and customer totals

Author: jmgasper

src/apps/sales/README.md

@@ -96,6 +96,12 @@ Multiple values use repeated query parameters. Deploy the PM-6639 Reports API
 change before this UI. Tests cover OR selection/removal, strict numeric bounds,
 combined filters, pagination resets, clearing, refresh and request serialization.
 
+The pipeline title shows **Sales - FY '27** for April 2026–March 2027, using
+the fiscal year's ending year. Applied date bounds update the title; a range
+spanning fiscal years shows both (for example, **Sales - FY '26–'27**). With no
+date bounds, it shows the current UTC fiscal year. Monthly dashboards show the
+same fiscal-year suffix using their displayed months.
+
 ## Dashboard layout (PM-6392)
 
 The page reads as an executive dashboard rather than one long column:
@@ -173,8 +179,9 @@ The date range panel, now the right half of the two-column row, filters the
 report by **Created Date** for pipeline generation, or by **Close Date** for
 revenue projection.
 The Filter type dropdown lists the report's own `date`/`datetime` columns rather
-than hard-coded Salesforce field IDs, and opens on the Created Date column when
-the report has one. From date and To date are inclusive and either may be left
+than hard-coded Salesforce field IDs, and opens on Close Date (or Closed Date)
+when the report has one, falling back to its first date field. Clear restores this
+default. From date and To date are inclusive and either may be left
 empty for an open-ended range.
 
 Like the search and column filters, the range applies automatically (debounced)
@@ -365,7 +372,8 @@ The bottom **Customer** section replaces the Member payments by customer chart
 with two always-visible tables: **Revenue Customer-Wise**, from the optional API
 `customerRevenue` dataset, and **Goods Sold Customer-Wise**, from `customerPayments`.
 Each shows all customer names as rows and fiscal-year months as columns, with an
-Annual column, monthly totals and a grand total. No top-five/Other grouping is
+Annual column and a **Total** row directly below the Customer/month header,
+containing monthly totals and a grand total. No top-five/Other grouping is
 applied. Zero and unknown values remain distinct. Tables support keyboard
 scrolling, keep customer names visible while scrolling and show explicit empty
 states. Missing datasets and source notices are displayed beside the affected

src/apps/sales/src/SalesCustomerTable.tsx

@@ -9,7 +9,7 @@ import styles from './SalesDashboardsPage.module.scss'
 /**
  * Shows all customers as rows and fiscal-year months as columns in the bottom Customer section.
  * @param props Complete customer dataset, report title and source notices; no top-five/Other grouping.
- * @returns An accessible scrollable matrix with customer, month and grand totals, or an empty state.
+ * @returns An accessible scrollable matrix with totals directly below the month headers, or an empty state.
  * @throws Does not throw for empty datasets. Unknown amounts stay distinct from zero.
  */
 const SalesCustomerTable: FC<{ data: MonthlySalesChart; title: string; notices?: string[] }> = props => {
@@ -38,6 +38,13 @@ const SalesCustomerTable: FC<{ data: MonthlySalesChart; title: string; notices?:
                             </tr>
                         </thead>
                         <tbody>
+                            <tr className={styles.annual}>
+                                <th scope='row'>Total</th>
+                                {data.months.map((month, index) => (
+                                    <td key={month.month}>{salesChartValue(monthlyTotals[index], 'currency')}</td>
+                                ))}
+                                <td>{salesChartValue(salesChartTotal(monthlyTotals), 'currency')}</td>
+                            </tr>
                             {data.series.map(series => (
                                 <tr key={series.key}>
                                     <th scope='row'>{series.label}</th>
@@ -54,15 +61,6 @@ const SalesCustomerTable: FC<{ data: MonthlySalesChart; title: string; notices?:
                                 </tr>
                             ))}
                         </tbody>
-                        <tfoot>
-                            <tr>
-                                <th scope='row'>Total</th>
-                                {data.months.map((month, index) => (
-                                    <td key={month.month}>{salesChartValue(monthlyTotals[index], 'currency')}</td>
-                                ))}
-                                <td>{salesChartValue(salesChartTotal(monthlyTotals), 'currency')}</td>
-                            </tr>
-                        </tfoot>
                     </table>
                 </div>
             ) : <p>No customer data in this fiscal year.</p>}

src/apps/sales/src/SalesDashboardsPage.module.scss

@@ -103,7 +103,7 @@
 
     caption { color: #4a5577; padding: 0 0 16px; text-align: left; }
     th, td { white-space: nowrap; }
-    thead, tfoot { background: #f4f6fa; font-weight: 700; }
+    thead { background: #f4f6fa; font-weight: 700; }
     th:first-child { background: #fff; left: 0; position: sticky; }
     td:last-child { font-weight: 700; }
 }

src/apps/sales/src/SalesDashboardsPage.spec.tsx

@@ -360,28 +360,35 @@ const customerPayments: MonthlySalesChart = {
     unit: 'currency',
 }
 
-it('renders a customer-by-month matrix with accurate row, column and grand totals', () => {
-    render(<SalesCustomerTable title='Goods Sold Customer-Wise' data={customerPayments} />)
-    const table = screen.getByRole('table')
-    expect(within(table)
-        .getAllByRole('columnheader')
-        .map(cell => cell.textContent))
-        .toEqual(['Customer', 'Apr 2026', 'May 2026', 'Jun 2026', 'Annual'])
-    expect(within(table)
-        .getByRole('row', { name: /Metro/ }))
-        .toHaveTextContent('$8,500.00')
-    expect(within(table)
-        .getByRole('row', { name: /Rebel/ }))
-        .toHaveTextContent('$21,000.00')
-    expect(within(table)
-        .getByRole('row', { name: /ANZ/ }))
-        .toHaveTextContent('$15,500.00')
-    expect(within(table)
-        .getByRole('row', { name: /^Total/ }).textContent)
-        .toBe('Total$12,500.00$14,500.00$18,000.00$45,000.00')
-    expect(screen.getByRole('region'))
-        .toHaveAttribute('tabindex', '0')
-})
+it.each(['Goods Sold Customer-Wise', 'Revenue Customer-Wise'])(
+    'renders %s with totals directly below the month headers',
+    title => {
+        render(<SalesCustomerTable title={title} data={customerPayments} />)
+        const table = screen.getByRole('table')
+        expect(within(table)
+            .getAllByRole('columnheader')
+            .map(cell => cell.textContent))
+            .toEqual(['Customer', 'Apr 2026', 'May 2026', 'Jun 2026', 'Annual'])
+        expect(within(table)
+            .getByRole('row', { name: /Metro/ }))
+            .toHaveTextContent('$8,500.00')
+        expect(within(table)
+            .getByRole('row', { name: /Rebel/ }))
+            .toHaveTextContent('$21,000.00')
+        expect(within(table)
+            .getByRole('row', { name: /ANZ/ }))
+            .toHaveTextContent('$15,500.00')
+        expect(within(table)
+            .getByRole('row', { name: /^Total/ }).textContent)
+            .toBe('Total$12,500.00$14,500.00$18,000.00$45,000.00')
+        expect(within(table)
+            .getAllByRole('row')[1])
+            .toBe(within(table)
+                .getByRole('row', { name: /^Total/ }))
+        expect(screen.getByRole('region'))
+            .toHaveAttribute('tabindex', '0')
+    },
+)
 
 it('keeps unknown customer amounts distinct from zero and handles an empty dataset', () => {
     const view = render(<SalesCustomerTable
@@ -443,6 +450,8 @@ it('places both customer tables at the bottom without duplicate requests or the
     expect(screen.queryByRole('heading', { name: 'Member payments by customer' })).not.toBeInTheDocument()
     ids.forEach(id => expect(screen.getByRole('heading', { name: id }))
         .toBeInTheDocument())
+    expect(screen.getByRole('heading', { level: 1 }))
+        .toHaveTextContent("Sales - FY '27")
     expect(screen.getByRole('heading', { name: 'Revenue' }))
         .toBeInTheDocument()
     expect(screen.queryByRole('heading', { name: 'Bookings' })).not.toBeInTheDocument()

src/apps/sales/src/SalesDashboardsPage.tsx

@@ -3,6 +3,7 @@ import { FC, ReactNode, useCallback, useState } from 'react'
 import { Button, LoadingSpinner, PageTitle } from '~/libs/ui'
 
 import { SalesDashboardPortal, SalesDashboardSection } from './sales-dashboard.service'
+import { salesFiscalYearLabel } from './sales-fiscal-year'
 import { dashboardTitles, SalesDashboardSource, useSalesDashboard } from './useSalesDashboard'
 import SalesCustomerTable from './SalesCustomerTable'
 import SalesDashboardChart from './SalesDashboardChart'
@@ -91,15 +92,19 @@ const SalesDashboardsPage: FC<{ portal?: SalesDashboardPortal }> = props => {
     const talent = useSalesDashboard('talent', portal, dateBasis, refreshKey)
     const sources = { payments, pipeline, revenue, talent }
     const sections = ['pipeline', 'revenue', 'payments', 'talent'] as const
+    const months = sections.map(section => sources[section].data?.charts[0]?.months)
+        .find(value => value?.length)
+    const fiscalYear = salesFiscalYearLabel(months?.[0]?.month, months?.[months.length - 1]?.month)
+    const title = `${portal === 'sales' ? 'Sales' : 'Sales dashboards'} - ${fiscalYear}`
     const refresh = useCallback(() => setRefreshKey(value => value + 1), [])
     const chooseClose = useCallback(() => setDateBasis('close'), [])
     const chooseCreated = useCallback(() => setDateBasis('created'), [])
     return (
         <div className={styles.page}>
-            <PageTitle>Sales dashboards</PageTitle>
+            <PageTitle>{title}</PageTitle>
             <header className={styles.header}>
                 <div>
-                    <h1>Sales dashboards</h1>
+                    <h1>{title}</h1>
                     <p>Monthly business performance, from opportunity to member payments.</p>
                 </div>
                 <Button secondary onClick={refresh}>Refresh data</Button>

src/apps/sales/src/SalesPage.spec.tsx

@@ -468,17 +468,14 @@ describe('Sales page', () => {
         jest.useRealTimers()
     })
 
-    it('offers the report date fields, defaults to Created Date and applies a range as it changes', async () => {
+    it('offers the report date fields, defaults to Close Date and applies a range as it changes', async () => {
         render(<SalesPage />)
         await screen.findByText('Example opportunity')
         const field = screen.getByLabelText('Filter type') as HTMLSelectElement
         expect([...field.options].map(option => option.text))
             .toEqual(['Created Date', 'Close Date'])
-        expect(field.value)
-            .toBe('CREATED_DATE')
-        fireEvent.change(field, { target: { value: 'CLOSE_DATE' } })
-        expect(screen.getByLabelText('Filter type'))
-            .toHaveValue('CLOSE_DATE')
+        await waitFor(() => expect(field)
+            .toHaveValue('CLOSE_DATE'))
         fireEvent.change(screen.getByLabelText('From date'), { target: { value: '2026-07-01' } })
         fireEvent.change(screen.getByLabelText('To date'), { target: { value: '2026-09-30' } })
         expect(fetchReport)
@@ -488,10 +485,17 @@ describe('Sales page', () => {
             .toHaveBeenLastCalledWith(expect.objectContaining({
                 dateColumn: 'CLOSE_DATE', dateFrom: '2026-07-01', dateTo: '2026-09-30', page: 1,
             }), expect.any(AbortSignal)))
-        // The three changes within one pause are sent as a single request.
+        // The date changes within one pause are sent as a single request.
         expect(fetchReport)
             .toHaveBeenCalledTimes(2)
         await screen.findByText(/Showing records by Close Date from 2026-07-01 through 2026-09-30/)
+        expect(screen.getByRole('heading', { level: 1 }))
+            .toHaveTextContent("Sales - FY '27")
+        fireEvent.change(field, { target: { value: 'CREATED_DATE' } })
+        await waitFor(() => expect(fetchReport)
+            .toHaveBeenLastCalledWith(expect.objectContaining({ dateColumn: 'CREATED_DATE' }), expect.any(AbortSignal)))
+        expect(field)
+            .toHaveValue('CREATED_DATE')
     })
 
     it('refuses an inverted range without sending a request and clears the error on Clear', async () => {
@@ -518,7 +522,7 @@ describe('Sales page', () => {
         fireEvent.change(screen.getByLabelText('From date'), { target: { value: '2026-09-01' } })
         await waitFor(() => expect(fetchReport)
             .toHaveBeenLastCalledWith(
-                expect.objectContaining({ dateColumn: 'CREATED_DATE', dateFrom: '2026-09-01' }),
+                expect.objectContaining({ dateColumn: 'CLOSE_DATE', dateFrom: '2026-09-01' }),
                 expect.any(AbortSignal),
             ))
         fireEvent.change(screen.getByLabelText('Search sales'), { target: { value: 'Example' } })
@@ -536,7 +540,7 @@ describe('Sales page', () => {
             ))
         expect(fetchReport)
             .toHaveBeenLastCalledWith(
-                expect.objectContaining({ dateColumn: 'CREATED_DATE', dateFrom: '2026-09-01' }),
+                expect.objectContaining({ dateColumn: 'CLOSE_DATE', dateFrom: '2026-09-01' }),
                 expect.any(AbortSignal),
             )
         fireEvent.click(clearButton('Date range filter'))

src/apps/sales/src/SalesPage.tsx

@@ -28,6 +28,7 @@ import {
     withDrilldown,
     wonSowSignedTotal,
 } from './sales.utils'
+import { salesFiscalYearLabel } from './sales-fiscal-year'
 import styles from './SalesPage.module.scss'
 import './sales.scss'
 
@@ -351,18 +352,19 @@ const SalesPage: FC = () => {
     const totalAmount = summary && amountTotal(summary.amounts)
     const totalExpectedRevenue = summary && expectedRevenueTotal(summary.amounts)
     const totalWonSowSigned = wonSowSignedTotal(breakdown, totalAmount)
+    const title = `Sales - ${salesFiscalYearLabel(query.dateFrom, query.dateTo)}`
     const firstRow = report?.total ? (report.page - 1) * report.perPage + 1 : 0
     const lastRow = report ? Math.min(report.page * report.perPage, report.total) : 0
     const updatedAt = report ? new Date(report.refreshedAt)
         .toLocaleString() : ''
 
     return (
         <div className={`sales-app ${styles.page}`}>
-            <PageTitle>Sales</PageTitle>
+            <PageTitle>{title}</PageTitle>
             <header className={styles.header}>
                 <div>
                     <p className={styles.eyebrow}>WORK / SALES</p>
-                    <h1>Sales</h1>
+                    <h1>{title}</h1>
                     <p className={styles.subtitle}>Your sales pipeline, directly from Salesforce.</p>
                 </div>
                 <div className={styles.headerActions}>

src/apps/sales/src/sales-dashboard.service.ts

@@ -1,6 +1,8 @@
 import { EnvironmentConfig } from '~/config'
 import { xhrGetAsync } from '~/libs/core'
 
+import { salesFiscalYear } from './sales-fiscal-year'
+
 export type SalesDashboardSection = 'pipeline' | 'revenue' | 'payments' | 'talent' | 'gross-margin'
 export type SalesDashboardPortal = 'reports' | 'sales'
 
@@ -41,8 +43,7 @@ export function fetchSalesDashboard(
     dateBasis: 'close' | 'created',
     signal: AbortSignal,
 ): Promise<SalesDashboardResponse> {
-    const now = new Date()
-    const fiscalYear = now.getUTCFullYear() - (now.getUTCMonth() < 3 ? 1 : 0)
+    const fiscalYear = salesFiscalYear() - 1
     const params = new URLSearchParams({
         dateBasis,
         endDate: new Date(Date.UTC(fiscalYear + 1, 3, 1))

src/apps/sales/src/sales-fiscal-year.spec.ts

@@ -0,0 +1,32 @@
+import { salesFiscalYear, salesFiscalYearLabel } from './sales-fiscal-year'
+
+describe('Sales fiscal year titles', () => {
+    afterEach(() => jest.useRealTimers())
+
+    it.each([
+        ['2026-10-28T00:00:00Z', 2027],
+        ['2027-01-01T00:00:00Z', 2027],
+        ['2027-03-31T23:59:59Z', 2027],
+        ['2027-04-01T00:00:00Z', 2028],
+        ['2027-04-01T00:30:00+11:00', 2027],
+    ])('labels %s by the fiscal year ending in %s', (date, year) => {
+        jest.useFakeTimers()
+            .setSystemTime(new Date(date))
+        expect(salesFiscalYear())
+            .toBe(year)
+        expect(salesFiscalYearLabel())
+            .toBe(`FY '${String(year)
+                .slice(-2)}`)
+    })
+
+    it('uses the viewed bounds, including open-ended and multi-year ranges', () => {
+        expect(salesFiscalYearLabel('2026-04-01', '2027-03-31'))
+            .toBe("FY '27")
+        expect(salesFiscalYearLabel('2025-07-01'))
+            .toBe("FY '26")
+        expect(salesFiscalYearLabel(undefined, '2026-02-01'))
+            .toBe("FY '26")
+        expect(salesFiscalYearLabel('2026-03-01', '2026-04-30'))
+            .toBe("FY '26–'27")
+    })
+})

src/apps/sales/src/sales-fiscal-year.ts

@@ -0,0 +1,26 @@
+/**
+ * Resolves the ending year of Sales' April–March fiscal year in UTC.
+ * @param date Date within the fiscal year; defaults to today.
+ * @returns Ending calendar year, used by request bounds and report titles. Does not throw for valid dates.
+ */
+export function salesFiscalYear(date: Date = new Date()): number {
+    return date.getUTCFullYear() + (date.getUTCMonth() >= 3 ? 1 : 0)
+}
+
+/**
+ * Labels the fiscal year or years being viewed without hardcoding the current year.
+ * @param from Inclusive ISO start date, if the view has one.
+ * @param to Inclusive ISO end date, if the view has one.
+ * @returns A short FY label; a single bound selects its year and no bounds select today's year.
+ * @throws Does not throw for valid report dates.
+ */
+export function salesFiscalYearLabel(from?: string, to?: string): string {
+    const bound = from || to
+    const first = salesFiscalYear(bound ? new Date(bound) : undefined)
+    const last = to ? salesFiscalYear(new Date(to)) : first
+    const start = String(first)
+        .slice(-2)
+    const end = String(last)
+        .slice(-2)
+    return first === last ? `FY '${start}` : `FY '${start}–'${end}`
+}