Topcoder Admin App - Billing Account Management

src/apps/admin/src/admin-app.routes.tsx

@@ -8,6 +8,7 @@ import {
 } from '~/libs/core'
 
 import {
+    billingAccountRouteId,
     manageChallengeRouteId,
     manageReviewRouteId,
     permissionManagementRouteId,
@@ -43,6 +44,37 @@ const ManageReviewerPage: LazyLoadedComponent = lazyLoad(
     () => import('./review-management/ManageReviewerPage'),
     'ManageReviewerPage',
 )
+const BillingAccount: LazyLoadedComponent = lazyLoad(
+    () => import('./billing-account/BillingAccount'),
+)
+const BillingAccountsPage: LazyLoadedComponent = lazyLoad(
+    () => import('./billing-account/BillingAccountsPage'),
+    'BillingAccountsPage',
+)
+const BillingAccountNewPage: LazyLoadedComponent = lazyLoad(
+    () => import('./billing-account/BillingAccountNewPage'),
+    'BillingAccountNewPage',
+)
+const BillingAccountDetailsPage: LazyLoadedComponent = lazyLoad(
+    () => import('./billing-account/BillingAccountDetailsPage'),
+    'BillingAccountDetailsPage',
+)
+const BillingAccountResourcesPage: LazyLoadedComponent = lazyLoad(
+    () => import('./billing-account/BillingAccountResourcesPage'),
+    'BillingAccountResourcesPage',
+)
+const BillingAccountResourceNewPage: LazyLoadedComponent = lazyLoad(
+    () => import('./billing-account/BillingAccountResourceNewPage'),
+    'BillingAccountResourceNewPage',
+)
+const ClientsPage: LazyLoadedComponent = lazyLoad(
+    () => import('./billing-account/ClientsPage'),
+    'ClientsPage',
+)
+const ClientEditPage: LazyLoadedComponent = lazyLoad(
+    () => import('./billing-account/ClientEditPage'),
+    'ClientEditPage',
+)
 const PermissionManagement: LazyLoadedComponent = lazyLoad(
     () => import('./permission-management/PermissionManagement'),
 )
@@ -124,6 +156,59 @@ export const adminRoutes: ReadonlyArray<PlatformRoute> = [
                 id: manageReviewRouteId,
                 route: manageReviewRouteId,
             },
+            // Billing Account Module
+            {
+                children: [
+                    {
+                        element: <BillingAccountsPage />,
+                        id: 'billing-accounts-page',
+                        route: 'billing-accounts',
+                    },
+                    {
+                        element: <BillingAccountNewPage />,
+                        id: 'billing-account-new-page',
+                        route: 'billing-accounts/new',
+                    },
+                    {
+                        element: <BillingAccountDetailsPage />,
+                        id: 'billing-account-details-page',
+                        route: 'billing-accounts/:accountId/details',
+                    },
+                    {
+                        element: <BillingAccountResourcesPage />,
+                        id: 'billing-account-resources-page',
+                        route: 'billing-accounts/:accountId/resources',
+                    },
+                    {
+                        element: <BillingAccountNewPage />,
+                        id: 'billing-account-resources-page',
+                        route: 'billing-accounts/:accountId/edit',
+                    },
+                    {
+                        element: <BillingAccountResourceNewPage />,
+                        id: 'billing-account-resource-new-page',
+                        route: 'billing-accounts/:accountId/resources/new',
+                    },
+                    {
+                        element: <ClientsPage />,
+                        id: 'billing-account-clients-page',
+                        route: 'clients',
+                    },
+                    {
+                        element: <ClientEditPage />,
+                        id: 'billing-account-client-edit-page',
+                        route: 'clients/:clientId/edit',
+                    },
+                    {
+                        element: <ClientEditPage />,
+                        id: 'billing-account-client-edit-page',
+                        route: 'clients/new',
+                    },
+                ],
+                element: <BillingAccount />,
+                id: billingAccountRouteId,
+                route: billingAccountRouteId,
+            },
             // Permission Management Module
             {
                 children: [

src/apps/admin/src/billing-account/BillingAccount.tsx

@@ -0,0 +1,46 @@
+import { FC, PropsWithChildren, useContext, useMemo } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { Layout } from '../lib/components'
+import { adminRoutes } from '../admin-app.routes'
+import { billingAccountRouteId } from '../config/routes.config'
+
+/**
+ * The router outlet with layout.
+ */
+export const BillingAccount: FC & {
+    Layout: FC<PropsWithChildren>
+} = () => {
+    const childRoutes = useChildRoutes()
+
+    return (
+        <>
+            <Outlet />
+            <Routes>{childRoutes}</Routes>
+        </>
+    )
+}
+
+function useChildRoutes(): Array<JSX.Element> | undefined {
+    const { getRouteElement }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(
+        () => adminRoutes[0].children
+            ?.find(r => r.id === billingAccountRouteId)
+            ?.children?.map(getRouteElement),
+        [], // eslint-disable-line react-hooks/exhaustive-deps -- missing dependency: getRouteElement
+    )
+    return childRoutes
+}
+
+/**
+ * The outlet layout.
+ */
+BillingAccount.Layout = function BillingAccountLayout(
+    props: PropsWithChildren,
+) {
+    return <Layout>{props.children}</Layout>
+}
+
+export default BillingAccount

src/apps/admin/src/billing-account/BillingAccountDetailsPage/BillingAccountDetailsPage.module.scss

@@ -0,0 +1,30 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.loadingSpinnerContainer {
+    position: relative;
+    height: 100px;
+
+    .spinner {
+        background: none;
+    }
+}
+
+.blockBottom {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 30px;
+    margin-left: auto;
+    margin-top: $sp-2;
+
+    @include ltemd {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+}

src/apps/admin/src/billing-account/BillingAccountDetailsPage/BillingAccountDetailsPage.tsx

@@ -0,0 +1,201 @@
+/**
+ * Billing account details page.
+ */
+import { FC, useMemo } from 'react'
+import { useParams } from 'react-router-dom'
+import classNames from 'classnames'
+
+import { LinkButton, LoadingSpinner, PageTitle } from '~/libs/ui'
+
+import { DetailsTableColumn } from '../../lib/models/DetailsTableColumn.model'
+import { useManageBillingAccountDetail, useManageBillingAccountDetailProps } from '../../lib/hooks'
+import { PageContent, PageHeader } from '../../lib'
+import { BillingAccount } from '../../lib/models'
+import { TableRowDetails } from '../../lib/components/common/TableRowDetails'
+
+import styles from './BillingAccountDetailsPage.module.scss'
+
+interface Props {
+    className?: string
+}
+
+const pageTitle = 'Details - Billing Account'
+
+export const BillingAccountDetailsPage: FC<Props> = (props: Props) => {
+    const { accountId = '' }: { accountId?: string } = useParams<{
+        accountId: string
+    }>()
+    const { isLoading, billingAccount }: useManageBillingAccountDetailProps
+        = useManageBillingAccountDetail(accountId)
+
+    const columns = useMemo<DetailsTableColumn<BillingAccount>[][]>(
+        () => [
+            [
+                {
+                    detailType: 'label',
+                    label: 'Name label',
+                    propertyName: 'name',
+                    renderer: () => <div>Name</div>,
+                    type: 'element',
+                },
+                {
+                    label: 'Name',
+                    propertyName: 'name',
+                    type: 'text',
+                },
+            ],
+            [
+                {
+                    detailType: 'label',
+                    label: 'Customer Number label',
+                    propertyName: 'companyId',
+                    renderer: () => <div>Customer Number</div>,
+                    type: 'element',
+                },
+                {
+                    label: 'Customer Number',
+                    propertyName: 'companyId',
+                    type: 'text',
+                },
+            ],
+            [
+                {
+                    detailType: 'label',
+                    label: 'Start Date label',
+                    propertyName: 'startDateString',
+                    renderer: () => <div>Start Date</div>,
+                    type: 'element',
+                },
+                {
+                    label: 'Start Date',
+                    propertyName: 'startDateString',
+                    type: 'text',
+                },
+            ],
+            [
+                {
+                    detailType: 'label',
+                    label: 'End Date label',
+                    propertyName: 'endDateString',
+                    renderer: () => <div>End Date</div>,
+                    type: 'element',
+                },
+                {
+                    label: 'End Date',
+                    propertyName: 'endDateString',
+                    type: 'text',
+                },
+            ],
+            [
+                {
+                    detailType: 'label',
+                    label: 'Status label',
+                    propertyName: 'status',
+                    renderer: () => <div>Status</div>,
+                    type: 'element',
+                },
+                {
+                    label: 'Status',
+                    propertyName: 'status',
+                    type: 'text',
+                },
+            ],
+            [
+                {
+                    detailType: 'label',
+                    label: 'Amount label',
+                    propertyName: 'budgetAmount',
+                    renderer: () => <div>Amount</div>,
+                    type: 'element',
+                },
+                {
+                    label: 'Amount',
+                    propertyName: 'budgetAmount',
+                    type: 'text',
+                },
+            ],
+            [
+                {
+                    detailType: 'label',
+                    label: 'PO Number label',
+                    propertyName: 'poNumber',
+                    renderer: () => <div>PO Number</div>,
+                    type: 'element',
+                },
+                {
+                    label: 'PO Number',
+                    propertyName: 'poNumber',
+                    type: 'text',
+                },
+            ],
+            [
+                {
+                    detailType: 'label',
+                    label: 'Subscription Number label',
+                    propertyName: 'subscriptionNumber',
+                    renderer: () => <div>Subscription Number</div>,
+                    type: 'element',
+                },
+                {
+                    label: 'Subscription Number',
+                    propertyName: 'subscriptionNumber',
+                    type: 'text',
+                },
+            ],
+            [
+                {
+                    detailType: 'label',
+                    label: 'Description label',
+                    propertyName: 'description',
+                    renderer: () => <div>Description</div>,
+                    type: 'element',
+                },
+                {
+                    label: 'Description',
+                    propertyName: 'description',
+                    type: 'text',
+                },
+            ],
+            [
+                {
+                    detailType: 'label',
+                    label: 'Payment Terms label',
+                    propertyName: 'paymentTerms',
+                    renderer: () => <div>Payment Terms</div>,
+                    type: 'element',
+                },
+                {
+                    label: 'Payment Terms',
+                    propertyName: 'paymentTerms',
+                    type: 'text',
+                },
+            ],
+        ],
+        [],
+    )
+    return (
+        <div className={classNames(styles.container, props.className)}>
+            <PageTitle>{pageTitle}</PageTitle>
+            <PageHeader>
+                <h3>{pageTitle}</h3>
+            </PageHeader>
+
+            <PageContent>
+                {isLoading || !billingAccount ? (
+                    <div className={styles.loadingSpinnerContainer}>
+                        <LoadingSpinner className={styles.spinner} />
+                    </div>
+                ) : (
+                    <TableRowDetails data={billingAccount} columns={columns} />
+                )}
+            </PageContent>
+            <div className={styles.blockBottom}>
+                <LinkButton primary light to='./../..' size='lg'>
+                    Cancel
+                </LinkButton>
+            </div>
+        </div>
+    )
+}
+
+export default BillingAccountDetailsPage

src/apps/admin/src/billing-account/BillingAccountDetailsPage/index.ts

@@ -0,0 +1 @@
+export { default as BillingAccountDetailsPage } from './BillingAccountDetailsPage'