Prod release - July 7 2026

src/apps/platform/src/platform.routes.tsx

@@ -15,6 +15,7 @@ import { workRoutes } from '~/apps/work'
 import { calendarRoutes } from '~/apps/calendar'
 import { engagementsRoutes } from '~/apps/engagements'
 import { customerPortalRoutes } from '~/apps/customer-portal'
+import { procurementRoutes } from '~/apps/procurement'
 
 const Home: LazyLoadedComponent = lazyLoad(
     () => import('./routes/home'),
@@ -45,6 +46,7 @@ export const platformRoutes: Array<PlatformRoute> = [
     ...workRoutes,
     ...calendarRoutes,
     ...engagementsRoutes,
+    ...procurementRoutes,
     ...homeRoutes,
     ...adminRoutes,
     ...reportsRoutes,

src/apps/procurement/index.ts

@@ -0,0 +1 @@
+export * from './src'

src/apps/procurement/src/ProcurementApp.module.scss

@@ -0,0 +1,65 @@
+.outer {
+    padding-top: 24px;
+}
+
+.inner {
+    max-width: 1280px;
+}
+
+.navigation {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0 0 24px;
+    padding: 4px;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    background: #f9fafb;
+}
+
+.navigationLink {
+    display: inline-flex;
+    align-items: center;
+    min-height: 36px;
+    padding: 8px 14px;
+    border-radius: 6px;
+    color: #374151;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.2;
+    text-decoration: none;
+
+    &:hover {
+        background: #ffffff;
+        color: #0f766e;
+    }
+}
+
+.active {
+    background: #0f766e;
+    color: #ffffff;
+
+    &:hover {
+        background: #0f766e;
+        color: #ffffff;
+    }
+}
+
+.content {
+    min-width: 0;
+}
+
+@media (max-width: 720px) {
+    .outer {
+        padding-top: 16px;
+    }
+
+    .navigation {
+        gap: 4px;
+    }
+
+    .navigationLink {
+        flex: 1 1 120px;
+        justify-content: center;
+    }
+}

src/apps/procurement/src/ProcurementApp.tsx

@@ -0,0 +1,91 @@
+/* eslint-disable react/jsx-no-bind */
+/**
+ * Shell for the hidden procurement app.
+ */
+import { FC, useContext, useMemo } from 'react'
+import { NavLink, Outlet, Routes } from 'react-router-dom'
+import classNames from 'classnames'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+import { ContentLayout } from '~/libs/ui'
+
+import {
+    buildProcurementPath,
+    procurementContractsRoute,
+    procurementDashboardRoute,
+    procurementInvoicesRoute,
+    procurementRenewalsRoute,
+    procurementVendorsRoute,
+} from './config/routes.config'
+import { toolTitle } from './procurement-app.routes'
+import styles from './ProcurementApp.module.scss'
+
+interface ProcurementNavigationItem {
+    label: string
+    route: string
+    to: string
+}
+
+const navigationItems: ProcurementNavigationItem[] = [
+    {
+        label: 'Dashboard',
+        route: procurementDashboardRoute,
+        to: buildProcurementPath(procurementDashboardRoute),
+    },
+    {
+        label: 'Vendors',
+        route: procurementVendorsRoute,
+        to: buildProcurementPath(procurementVendorsRoute),
+    },
+    {
+        label: 'Contracts',
+        route: procurementContractsRoute,
+        to: buildProcurementPath(procurementContractsRoute),
+    },
+    {
+        label: 'Invoices',
+        route: procurementInvoicesRoute,
+        to: buildProcurementPath(procurementInvoicesRoute),
+    },
+    {
+        label: 'Renewals',
+        route: procurementRenewalsRoute,
+        to: buildProcurementPath(procurementRenewalsRoute),
+    },
+]
+
+const ProcurementApp: FC = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(() => getChildRoutes(toolTitle), [getChildRoutes])
+
+    return (
+        <ContentLayout
+            innerClass={styles.inner}
+            outerClass={styles.outer}
+            title='Procurement'
+        >
+            <nav aria-label='Procurement modules' className={styles.navigation}>
+                {navigationItems.map((item: ProcurementNavigationItem) => (
+                    <NavLink
+                        className={({ isActive }: { isActive: boolean }) => classNames(
+                            styles.navigationLink,
+                            { [styles.active]: isActive },
+                        )}
+                        end={item.route === procurementDashboardRoute}
+                        key={item.route || 'dashboard'}
+                        to={item.to}
+                    >
+                        {item.label}
+                    </NavLink>
+                ))}
+            </nav>
+
+            <div className={styles.content}>
+                <Outlet />
+                <Routes>{childRoutes}</Routes>
+            </div>
+        </ContentLayout>
+    )
+}
+
+export default ProcurementApp

src/apps/procurement/src/config/routes.config.ts

@@ -0,0 +1,37 @@
+/**
+ * Common config for routes in procurement app.
+ */
+import { AppSubdomain, EnvironmentConfig } from '~/config'
+
+export const rootRoute: string
+    = EnvironmentConfig.SUBDOMAIN === AppSubdomain.procurement
+        ? ''
+        : `/${AppSubdomain.procurement}`
+
+export const procurementContractsRouteId = 'procurement-contracts'
+export const procurementDashboardRouteId = 'procurement-dashboard'
+export const procurementInvoicesRouteId = 'procurement-invoices'
+export const procurementRenewalsRouteId = 'procurement-renewals'
+export const procurementVendorsRouteId = 'procurement-vendors'
+
+export const procurementDashboardRoute = ''
+export const procurementContractsRoute = 'contracts'
+export const procurementInvoicesRoute = 'invoices'
+export const procurementRenewalsRoute = 'renewals'
+export const procurementVendorsRoute = 'vendors'
+
+/**
+ * Builds an absolute procurement path from a child route segment.
+ *
+ * @param route Child route segment from the procurement route map.
+ * @returns Absolute path rooted at the configured procurement root route.
+ */
+export function buildProcurementPath(route: string = procurementDashboardRoute): string {
+    const normalizedRoute: string = route.replace(/^\/+/, '')
+
+    if (!normalizedRoute) {
+        return rootRoute || '/'
+    }
+
+    return `${rootRoute}/${normalizedRoute}`
+}

src/apps/procurement/src/index.ts

@@ -0,0 +1,2 @@
+export { procurementRoutes } from './procurement-app.routes'
+export { rootRoute as procurementRootRoute } from './config/routes.config'

src/apps/procurement/src/lib/constants/roles.constants.ts

@@ -0,0 +1,12 @@
+/**
+ * Procurement role constants accepted by the procurement app routes.
+ */
+export const ProcurementRole = {
+    admin: 'procurement-admin',
+    user: 'procurement-user',
+} as const
+
+export const PROCUREMENT_ALLOWED_ROLES: Array<string> = [
+    ProcurementRole.admin,
+    ProcurementRole.user,
+]

src/apps/procurement/src/lib/models/contract.model.ts

@@ -0,0 +1,47 @@
+import { ContractLifecycle, ContractStatus } from './procurement-common.model'
+
+/**
+ * Vendor summary embedded in contract responses.
+ */
+export interface ContractVendorSummary {
+    category?: string
+    id: string
+    name: string
+}
+
+/**
+ * Contract read model with stored status and backend-derived lifecycle.
+ */
+export interface Contract {
+    autoRenew: boolean
+    contractNumber: string
+    createdAt: string
+    description?: string
+    endDate: string
+    id: string
+    lifecycle: ContractLifecycle
+    renewalNoticeDays?: number | null
+    startDate: string
+    status: ContractStatus
+    title: string
+    updatedAt: string
+    value: number
+    vendor: ContractVendorSummary
+    vendorId: string
+}
+
+/**
+ * Editable contract fields accepted by create and update endpoints.
+ */
+export interface ContractMutationPayload {
+    autoRenew?: boolean
+    contractNumber: string
+    description?: string
+    endDate: string
+    renewalNoticeDays?: number
+    startDate: string
+    status?: ContractStatus
+    title: string
+    value: number
+    vendorId: string
+}

src/apps/procurement/src/lib/models/dashboard-summary.model.ts

@@ -0,0 +1,16 @@
+import { Contract } from './contract.model'
+
+/**
+ * Summary response returned by the procurement dashboard endpoint.
+ */
+export interface DashboardSummary {
+    activeContractCount: number
+    activeRenewalCount: number
+    expiringContractCount: number
+    expiringContracts: Contract[]
+    overdueInvoiceCount: number
+    overdueInvoiceTotal: number
+    pendingInvoiceCount: number
+    pendingInvoiceTotal: number
+    vendorCount: number
+}

src/apps/procurement/src/lib/models/index.ts

@@ -0,0 +1,6 @@
+export * from './contract.model'
+export * from './dashboard-summary.model'
+export * from './invoice.model'
+export * from './procurement-common.model'
+export * from './renewal.model'
+export * from './vendor.model'

src/apps/procurement/src/lib/models/invoice.model.ts

@@ -0,0 +1,54 @@
+import { InvoicePaymentState, InvoiceStatus } from './procurement-common.model'
+
+/**
+ * Contract summary embedded in invoice responses.
+ */
+export interface InvoiceContractSummary {
+    contractNumber: string
+    id: string
+    title: string
+}
+
+/**
+ * Vendor summary embedded in invoice responses.
+ */
+export interface InvoiceVendorSummary {
+    id: string
+    name: string
+}
+
+/**
+ * Invoice read model with stored status and backend-derived payment state.
+ */
+export interface Invoice {
+    amount: number
+    contract?: InvoiceContractSummary
+    contractId?: string
+    createdAt: string
+    description?: string
+    dueDate: string
+    id: string
+    invoiceDate: string
+    invoiceNumber: string
+    paidDate?: string
+    paymentState: InvoicePaymentState
+    status: InvoiceStatus
+    updatedAt: string
+    vendor: InvoiceVendorSummary
+    vendorId: string
+}
+
+/**
+ * Editable invoice fields accepted by create and update endpoints.
+ */
+export interface InvoiceMutationPayload {
+    amount: number
+    contractId?: string
+    description?: string
+    dueDate: string
+    invoiceDate: string
+    invoiceNumber: string
+    paidDate?: string
+    status?: InvoiceStatus
+    vendorId: string
+}

src/apps/procurement/src/lib/models/procurement-common.model.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared procurement enum-like frontend types returned by the procurement API.
+ */
+export type ContractLifecycle = 'active' | 'draft' | 'expired' | 'expiring' | 'terminated'
+
+export type ContractStatus = 'active' | 'draft' | 'expired' | 'terminated'
+
+export type InvoicePaymentState = 'cancelled' | 'draft' | 'overdue' | 'paid' | 'pending'
+
+export type InvoiceStatus = 'cancelled' | 'draft' | 'issued' | 'paid'
+
+export type RenewalStage =
+    | 'cio_approval'
+    | 'legal_review'
+    | 'order_form_signed'
+    | 'po_release'
+    | 'pr_approvals'
+    | 'pr_creation'
+    | 'quotation'
+    | 'vra'