PM-4961 View Billing Account details

src/apps/reports/src/config/routes.config.ts

@@ -10,3 +10,4 @@ export const rootRoute: string
 
 export const reportsPageRouteId = 'reports'
 export const bulkMemberLookupRouteId = 'bulk-member-lookup'
+export const billingAccountsPageRouteId = 'billing-accounts'

src/apps/reports/src/lib/components/NavTabs/NavTabs.tsx

@@ -15,7 +15,11 @@ import classNames from 'classnames'
 import { useClickOutside } from '~/libs/shared/lib/hooks'
 import { TabsNavItem } from '~/libs/ui'
 
-import { bulkMemberLookupRouteId, reportsPageRouteId } from '../../../config/routes.config'
+import {
+    billingAccountsPageRouteId,
+    bulkMemberLookupRouteId,
+    reportsPageRouteId,
+} from '../../../config/routes.config'
 
 import styles from './NavTabs.module.scss'
 
@@ -34,6 +38,10 @@ const NavTabs: FC = () => {
             id: bulkMemberLookupRouteId,
             title: 'Bulk Member Lookup',
         },
+        {
+            id: billingAccountsPageRouteId,
+            title: 'Billing Accounts',
+        },
     ], [])
 
     const activeTabPathName: string = useMemo<string>(() => {

src/apps/reports/src/lib/services/index.ts

@@ -2,6 +2,7 @@ export {
     downloadBlobFile,
     downloadReportAsCsv,
     downloadReportAsJson,
+    fetchReportJson,
     fetchReportsIndex,
     postReportAsCsv,
     postReportAsJson,
@@ -10,8 +11,12 @@ export {
 } from './reports.service'
 
 export type {
+    BillingAccountDetail,
+    BillingAccountProfileResponse,
+    BillingAccountsViewData,
     ReportDefinition,
     ReportGroup,
     ReportParameter,
     ReportsIndexResponse,
+    SfdcBillingAccountPaymentRow,
 } from './reports.service'

src/apps/reports/src/lib/services/reports.service.ts

@@ -28,6 +28,46 @@ export type ReportGroup = {
 
 export type ReportsIndexResponse = Record<string, ReportGroup>
 
+export type BillingAccountDetail = {
+    name: string
+    description: string | null
+    subcontractingEndCustomer: string | null
+    status: string
+    startDate: string | null
+    endDate: string | null
+    budget: string | number
+    markup: string | number
+}
+
+export type SfdcBillingAccountPaymentRow = {
+    paymentId: string
+    paymentDate: string
+    billingAccountId: string
+    paymentStatus: string
+    challengeFee: string | number
+    paymentAmount: string | number
+    challengeId: string
+    category: string
+    isTask: boolean
+    challengeName: string | null
+    challengeStatus: string | null
+    winnerHandle: string
+    winnerId: string
+    winnerFirstName: string
+    winnerLastName: string
+}
+
+/** Response from GET /sfdc/billing-accounts */
+export type BillingAccountProfileResponse = {
+    billingAccount?: BillingAccountDetail
+}
+
+/** Billing Accounts in-app view: profile + rows from GET /sfdc/payments */
+export type BillingAccountsViewData = {
+    billingAccount?: BillingAccountDetail
+    payments: SfdcBillingAccountPaymentRow[]
+}
+
 const reportsDownloadClient: AxiosInstance = xhrCreateInstance()
 
 const buildReportUrl = (path: string): string => {
@@ -137,6 +177,16 @@ export const downloadReportAsJson = (path: string): Promise<Blob> => (
     downloadReportBlob(path, 'application/json')
 )
 
+export const fetchReportJson = async <T>(path: string): Promise<T> => {
+    if (!path) {
+        throw new Error('Report path is required')
+    }
+
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`
+    const url = `${EnvironmentConfig.API.V6}/reports${normalizedPath}`
+    return xhrGetAsync<T>(url, reportsDownloadClient)
+}
+
 export const downloadReportAsCsv = (path: string): Promise<Blob> => (
     downloadReportBlob(path, 'text/csv')
 )

src/apps/reports/src/pages/reports/BillingAccountsPage.tsx

@@ -0,0 +1,3 @@
+import { BillingAccountsPage } from './ReportsPage'
+
+export default BillingAccountsPage

src/apps/reports/src/pages/reports/ReportsPage.module.scss

@@ -26,26 +26,97 @@
     gap: 4px;
 }
 
+.filtersPanel {
+    margin-top: 12px;
+    padding: 16px;
+    border: 1px solid #e4e6e9;
+    border-radius: 8px;
+    background: #fcfcfd;
+}
+
 .params {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 16px;
-    margin-top: 12px;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 30px 50px;
+    margin-top: 0;
+    align-items: start;
+}
+
+@media (max-width: 1200px) {
+    .params {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 760px) {
+    .params {
+        grid-template-columns: 1fr;
+    }
+}
+
+.paramCard {
+    display: grid;
+    grid-template-rows: auto 40px auto;
+    row-gap: 8px;
+    align-content: start;
+}
+
+.paramHeader {
+    min-height: 28px;
+}
+
+.paramTitleRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.paramHeaderActions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
 .paramLabel {
     font-weight: 600;
+    color: #2f3338;
 }
 
-.paramMeta {
-    color: #6b6f75;
-    font-size: 12px;
+.paramTypePill {
+    font-size: 11px;
+    color: #5e6369;
+    background: #f3f4f6;
+    border-radius: 999px;
+    padding: 2px 8px;
+    white-space: nowrap;
 }
 
-.paramHint {
+.actionsBar {
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 18px;
+    padding-top: 14px;
+    border-top: 1px solid #eceef1;
+}
+
+.paramInfoButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: 0;
+    padding: 0;
+    border-radius: 50%;
+    background: transparent;
     color: #6b6f75;
-    font-size: 12px;
-    font-style: italic;
+    cursor: pointer;
+
+    svg {
+        width: 16px;
+        height: 16px;
+    }
 }
 
 .reportTitle {
@@ -94,3 +165,95 @@
     font-style: italic;
     color: #6b6f75;
 }
+
+.billingSummary {
+    margin-top: 8px;
+    padding: 16px;
+    border: 1px solid #e4e6e9;
+    border-radius: 6px;
+    background: #fafbfc;
+}
+
+.billingSummaryTitle {
+    font-weight: 600;
+    margin-bottom: 12px;
+}
+
+.billingDetailGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 12px 24px;
+}
+
+.billingDetailItem {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.billingDetailLabel {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #6b6f75;
+}
+
+.billingDetailValue {
+    font-size: 14px;
+    color: #1a1d21;
+    word-break: break-word;
+}
+
+.billingMissingNotice {
+    margin-top: 8px;
+    padding: 12px;
+    border-radius: 4px;
+    background: #f3f4f6;
+    color: #494f55;
+    font-size: 14px;
+}
+
+.paymentsSection {
+    margin-top: 24px;
+}
+
+.paymentsSectionTitle {
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.tableWrap {
+    overflow-x: auto;
+    border: 1px solid #e4e6e9;
+    border-radius: 6px;
+}
+
+.paymentsTable {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+.paymentsTable th,
+.paymentsTable td {
+    padding: 8px 10px;
+    text-align: left;
+    border-bottom: 1px solid #e4e6e9;
+    vertical-align: top;
+}
+
+.paymentsTable th {
+    background: #f3f4f6;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.paymentsTable tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.paymentsEmpty {
+    margin-top: 8px;
+    color: #6b6f75;
+    font-style: italic;
+}