Merge pull request #39 from github/asizikov/add-cost-management-view

Add cost management budgets view

Author: asizikov

src/App.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from 'react'
 import type { ChangeEvent, DragEvent, KeyboardEvent, MouseEvent } from 'react'
-import { MarkGithubIcon, GraphIcon, PeopleIcon, CopilotIcon, TableIcon, OrganizationIcon, DatabaseIcon, InfoIcon, QuestionIcon } from '@primer/octicons-react'
+import { MarkGithubIcon, GraphIcon, PeopleIcon, CopilotIcon, TableIcon, OrganizationIcon, DatabaseIcon, InfoIcon, QuestionIcon, CreditCardIcon } from '@primer/octicons-react'
 
 import { UploadPage } from './components'
 import { UsersView } from './views/UsersView'
@@ -13,6 +13,7 @@ import { ReportGuideView } from './views/ReportGuideView'
 import { FaqView } from './views/FaqView'
 import { ProductsView } from './views/ProductsView'
 import { OverviewView } from './views/OverviewView'
+import { CostManagementView, type BudgetField, type BudgetValues } from './views/CostManagementView'
 import { QuickStatsAggregator, type QuickStatsResult } from './pipeline/aggregators/quickStatsAggregator'
 import { ReportContextAggregator, type ReportContextResult } from './pipeline/aggregators/reportContextAggregator'
 import { DailyUsageAggregator, type DailyUsageData } from './pipeline/aggregators/dailyUsageAggregator'
@@ -22,10 +23,21 @@ import { CostCenterAggregator, type CostCenterResult } from './pipeline/aggregat
 import { OrganizationAggregator, type OrganizationResult } from './pipeline/aggregators/organizationAggregator'
 import { UserUsageAggregator, type UserUsageResult } from './pipeline/aggregators/userUsageAggregator'
 import { calculateLicenseSummary, inferReportPlanScope, type AicEntitlementOverrides } from './pipeline/aicEntitlements'
+import { PRODUCT_BUDGET_COPILOT, PRODUCT_BUDGET_COPILOT_CODE_REVIEW, PRODUCT_BUDGET_SPARK } from './pipeline/productClassification'
 import { runPipeline } from './pipeline/runPipeline'
+import { runBudgetSimulation, type BudgetSimulationResult } from './utils/enterpriseBudgetSimulation'
 import { calculateCostOptimizationOpportunity } from './utils/costOptimization'
 
 type Status = 'idle' | 'processing' | 'done'
+type ActiveView = 'overview' | 'users' | 'userDetails' | 'costCenters' | 'orgs' | 'models' | 'products' | 'costManagement' | 'guide' | 'faq'
+
+const EMPTY_BUDGET_VALUES: BudgetValues = {
+  user: '',
+  enterprise: '',
+  productCodeReview: '',
+  productSpark: '',
+  productCopilot: '',
+}
 
 function App() {
   const [status, setStatus] = useState<Status>('idle')
@@ -35,7 +47,7 @@ function App() {
   const [fileName, setFileName] = useState<string | null>(null)
   const [dragActive, setDragActive] = useState(false)
   const [dailyUsageData, setDailyUsageData] = useState<DailyUsageData[]>([])
-  const [activeView, setActiveView] = useState<'overview' | 'users' | 'userDetails' | 'costCenters' | 'orgs' | 'models' | 'products' | 'guide' | 'faq'>('overview')
+  const [activeView, setActiveView] = useState<ActiveView>('overview')
   const [userUsage, setUserUsage] = useState<UserUsageResult | null>(null)
   const [modelUsage, setModelUsage] = useState<ModelUsageResult | null>(null)
   const [productUsage, setProductUsage] = useState<ProductUsageResult | null>(null)
@@ -45,9 +57,14 @@ function App() {
   const [progress, setProgress] = useState(0)
   const [rowsProcessed, setRowsProcessed] = useState(0)
   const [seatOverrides, setSeatOverrides] = useState<SeatOverrides>({})
+  const [budgetValues, setBudgetValues] = useState<BudgetValues>(EMPTY_BUDGET_VALUES)
+  const [budgetSimulation, setBudgetSimulation] = useState<BudgetSimulationResult | null>(null)
+  const [budgetSimulationError, setBudgetSimulationError] = useState<string | null>(null)
+  const [isApplyingBudgetSimulation, setIsApplyingBudgetSimulation] = useState(false)
   const fileInputRef = useRef<HTMLInputElement | null>(null)
   const currentFileRef = useRef<File | null>(null)
   const latestRunIdRef = useRef(0)
+  const latestSimulationIdRef = useRef(0)
 
   const applyProcessedData = useCallback(({
     quickStats,
@@ -144,6 +161,7 @@ function App() {
   const handleProcess = useCallback(async (file: File) => {
     currentFileRef.current = file
     const runId = ++latestRunIdRef.current
+    latestSimulationIdRef.current += 1
     setStatus('processing')
     setError(null)
     setQuickStats(null)
@@ -160,6 +178,10 @@ function App() {
     setProgress(0)
     setRowsProcessed(0)
     setSeatOverrides({})
+    setBudgetValues(EMPTY_BUDGET_VALUES)
+    setBudgetSimulation(null)
+    setBudgetSimulationError(null)
+    setIsApplyingBudgetSimulation(false)
 
     try {
       const nextData = await buildReportData(file, {}, (progressInfo) => {
@@ -218,13 +240,28 @@ function App() {
     return compactOverrides
   }, [getDefaultSeatCounts])
 
+  const handleBudgetValueChange = useCallback((field: BudgetField, value: string) => {
+    latestSimulationIdRef.current += 1
+    setBudgetValues((current) => ({
+      ...current,
+      [field]: value,
+    }))
+    setBudgetSimulation(null)
+    setBudgetSimulationError(null)
+    setIsApplyingBudgetSimulation(false)
+  }, [])
+
   const handleSeatOverridesChange = useCallback(async (overrides: SeatOverrides) => {
     const file = currentFileRef.current
     if (!file) return
 
     const runId = ++latestRunIdRef.current
+    latestSimulationIdRef.current += 1
     const resolvedOverrides = resolveEntitlementOverrides(overrides)
     setError(null)
+    setBudgetSimulation(null)
+    setBudgetSimulationError(null)
+    setIsApplyingBudgetSimulation(false)
 
     try {
       const nextData = await buildReportData(file, resolvedOverrides)
@@ -238,6 +275,80 @@ function App() {
     }
   }, [applyProcessedData, buildReportData, compactSeatOverrides, resolveEntitlementOverrides])
 
+  const handleApplyBudgetSimulation = useCallback(async () => {
+    const file = currentFileRef.current
+    if (!file) return
+
+    const parsedEnterpriseBudget = budgetValues.enterprise.trim() === '' ? undefined : Number(budgetValues.enterprise)
+    const parsedUserBudget = budgetValues.user.trim() === '' ? undefined : Number(budgetValues.user)
+    const parsedProductCodeReviewBudget = budgetValues.productCodeReview.trim() === '' ? undefined : Number(budgetValues.productCodeReview)
+    const parsedProductSparkBudget = budgetValues.productSpark.trim() === '' ? undefined : Number(budgetValues.productSpark)
+    const parsedProductCopilotBudget = budgetValues.productCopilot.trim() === '' ? undefined : Number(budgetValues.productCopilot)
+
+    if (
+      parsedEnterpriseBudget === undefined
+      && parsedUserBudget === undefined
+      && parsedProductCodeReviewBudget === undefined
+      && parsedProductSparkBudget === undefined
+      && parsedProductCopilotBudget === undefined
+    ) {
+      setBudgetSimulation(null)
+      setBudgetSimulationError('Enter a user-level, account-level, or product-level budget in USD before running the simulation.')
+      return
+    }
+
+    if (
+      (parsedEnterpriseBudget !== undefined && !Number.isFinite(parsedEnterpriseBudget))
+      || (parsedUserBudget !== undefined && !Number.isFinite(parsedUserBudget))
+      || (parsedProductCodeReviewBudget !== undefined && !Number.isFinite(parsedProductCodeReviewBudget))
+      || (parsedProductSparkBudget !== undefined && !Number.isFinite(parsedProductSparkBudget))
+      || (parsedProductCopilotBudget !== undefined && !Number.isFinite(parsedProductCopilotBudget))
+    ) {
+      setBudgetSimulation(null)
+      setBudgetSimulationError('Enter valid USD budget values before running the simulation.')
+      return
+    }
+
+    const simulationId = ++latestSimulationIdRef.current
+    setBudgetSimulationError(null)
+    setIsApplyingBudgetSimulation(true)
+
+    try {
+      const result = await runBudgetSimulation(
+        file,
+        {
+          enterpriseBudgetUsd: parsedEnterpriseBudget,
+          userBudgetUsd: parsedUserBudget,
+          productBudgetsUsd: {
+            [PRODUCT_BUDGET_COPILOT_CODE_REVIEW]: parsedProductCodeReviewBudget,
+            [PRODUCT_BUDGET_SPARK]: parsedProductSparkBudget,
+            [PRODUCT_BUDGET_COPILOT]: parsedProductCopilotBudget,
+          },
+        },
+        resolveEntitlementOverrides(seatOverrides),
+      )
+
+      if (simulationId !== latestSimulationIdRef.current) return
+      setBudgetSimulation(result)
+    } catch (err) {
+      if (simulationId !== latestSimulationIdRef.current) return
+      setBudgetSimulation(null)
+      setBudgetSimulationError(err instanceof Error ? err.message : 'Failed to run the budget simulation.')
+    } finally {
+      if (simulationId === latestSimulationIdRef.current) {
+        setIsApplyingBudgetSimulation(false)
+      }
+    }
+  }, [
+    budgetValues.enterprise,
+    budgetValues.productCodeReview,
+    budgetValues.productCopilot,
+    budgetValues.productSpark,
+    budgetValues.user,
+    resolveEntitlementOverrides,
+    seatOverrides,
+  ])
+
   const preventDefault = (event: DragEvent<HTMLDivElement>) => {
     event.preventDefault()
     event.stopPropagation()
@@ -306,7 +417,22 @@ function App() {
     setActiveView('users')
   }
 
-  const overviewAicNetAmount = dailyUsageData.reduce((sum, day) => sum + day.aicNetAmount, 0)
+  const overviewTotals = dailyUsageData.reduce(
+    (totals, day) => {
+      totals.requests += day.requests
+      totals.grossAmount += day.grossAmount
+      totals.discountAmount += day.discountAmount
+      totals.netAmount += day.netAmount
+      totals.aicQuantity += day.aicQuantity
+      totals.aicGrossAmount += day.aicGrossAmount
+      totals.aicNetAmount += day.aicNetAmount
+      return totals
+    },
+    { requests: 0, grossAmount: 0, discountAmount: 0, netAmount: 0, aicQuantity: 0, aicGrossAmount: 0, aicNetAmount: 0 },
+  )
+  const overviewPruNetAmount = overviewTotals.netAmount
+  const overviewAicNetAmount = overviewTotals.aicNetAmount
+  const overviewAicDiscountAmount = Math.max(overviewTotals.aicGrossAmount - overviewAicNetAmount, 0)
   const resolvedSeatOverrides = resolveEntitlementOverrides(seatOverrides)
   const costOptimizationOpportunity = calculateCostOptimizationOpportunity({
     aicNetAmount: overviewAicNetAmount,
@@ -434,6 +560,15 @@ function App() {
                   </button>
                 )}
 
+                <button
+                  type="button"
+                  className={`${sidebarItemBase} ${activeView === 'costManagement' ? sidebarActive : sidebarInactive}`}
+                  onClick={() => setActiveView('costManagement')}
+                >
+                  <CreditCardIcon size={18} className="shrink-0" aria-hidden />
+                  <span className="whitespace-nowrap overflow-hidden text-ellipsis max-sm:sr-only">Cost Management</span>
+                </button>
+
                 <hr className="border-0 border-t border-border-default my-[6px]" />
 
                 <button
@@ -506,13 +641,33 @@ function App() {
               <div className={viewContentClasses}>
                 <CostCentersView data={costCenters ?? { costCenters: [] }} rangeStart={rangeStart} />
               </div>
-            ) : activeView === 'products' ? (
-              <div className={viewContentClasses}>
-                <ProductsView data={productUsage ?? { products: [] }} />
-              </div>
-            ) : activeView === 'guide' ? (
-              <div className={viewContentClasses}>
-                <ReportGuideView />
+             ) : activeView === 'products' ? (
+               <div className={viewContentClasses}>
+                 <ProductsView data={productUsage ?? { products: [] }} />
+               </div>
+             ) : activeView === 'costManagement' ? (
+               <div className={viewContentClasses}>
+                  <CostManagementView
+                    budgetValues={budgetValues}
+                    currentPruBill={overviewPruNetAmount}
+                    currentPruGrossAmount={overviewTotals.grossAmount}
+                    currentPruDiscountAmount={overviewTotals.discountAmount}
+                    currentPruQuantity={overviewTotals.requests}
+                    currentAicBill={overviewAicNetAmount}
+                    currentAicGrossAmount={overviewTotals.aicGrossAmount}
+                    currentAicDiscountAmount={overviewAicDiscountAmount}
+                    currentAicQuantity={overviewTotals.aicQuantity}
+                    dailyUsageData={dailyUsageData}
+                    budgetSimulation={budgetSimulation}
+                    budgetSimulationError={budgetSimulationError}
+                    isApplyingBudgetSimulation={isApplyingBudgetSimulation}
+                    onBudgetValueChange={handleBudgetValueChange}
+                    onApplyBudgetSimulation={handleApplyBudgetSimulation}
+                  />
+                </div>
+             ) : activeView === 'guide' ? (
+               <div className={viewContentClasses}>
+                 <ReportGuideView />
               </div>
             ) : activeView === 'faq' ? (
               <div className={viewContentClasses}>

src/components/ui/BillingTotalsCards.tsx

@@ -0,0 +1,70 @@
+import { formatAic, formatUsd } from '../../utils/format'
+
+export type BillingTotalsCardsProps = {
+  pruNetAmount: number
+  pruGrossAmount: number
+  pruDiscountAmount: number
+  pruQuantity: number
+  aicNetAmount: number
+  aicGrossAmount: number
+  aicDiscountAmount: number
+  aicQuantity: number
+  className?: string
+}
+
+export function BillingTotalsCards({
+  pruNetAmount,
+  pruGrossAmount,
+  pruDiscountAmount,
+  pruQuantity,
+  aicNetAmount,
+  aicGrossAmount,
+  aicDiscountAmount,
+  aicQuantity,
+  className = '',
+}: BillingTotalsCardsProps) {
+  return (
+    <div className={`grid grid-cols-1 sm:grid-cols-2 gap-4 ${className}`.trim()}>
+      <div className="bg-bg-default border border-border-default rounded-md px-5 py-[28px] text-center">
+        <div className="text-[13px] font-medium text-fg-muted uppercase tracking-[0.5px] mb-3">Current billing (PRUs)</div>
+        <div className="text-4xl font-bold leading-[1.2] text-fg-default">{formatUsd(pruNetAmount)}</div>
+        <div className="text-sm text-fg-default mt-[6px]">{pruQuantity.toLocaleString()} PRUs</div>
+        <div className="text-xs text-fg-muted mt-1">1 PRU = $0.04</div>
+        <div className="mt-4 pt-3 border-t border-border-default w-full flex flex-col gap-[6px] text-left">
+          <div className="flex justify-between items-center text-[13px] text-fg-default tabular-nums">
+            <span>Gross cost</span>
+            <span>{formatUsd(pruGrossAmount)}</span>
+          </div>
+          <div className="flex justify-between items-center text-[13px] text-fg-muted tabular-nums">
+            <span>Discounts</span>
+            <span>−{formatUsd(pruDiscountAmount)}</span>
+          </div>
+          <div className="flex justify-between items-center text-[13px] text-fg-default tabular-nums pt-[6px] border-t border-border-default font-semibold">
+            <span>Net cost</span>
+            <span>{formatUsd(pruNetAmount)}</span>
+          </div>
+        </div>
+      </div>
+      <div className="bg-bg-default border border-border-default rounded-md px-5 py-[28px] text-center">
+        <div className="text-[13px] font-medium text-fg-muted uppercase tracking-[0.5px] mb-3">AI Credits-based billing (AICs)</div>
+        <div className="text-4xl font-bold leading-[1.2] text-app-savings-fg">{formatUsd(aicNetAmount)}</div>
+        <div className="text-sm text-fg-default mt-[6px]">{formatAic(aicQuantity)} AICs</div>
+        <div className="text-xs text-fg-muted mt-1">1 AIC = $0.01</div>
+        <div className="mt-4 pt-3 border-t border-border-default w-full flex flex-col gap-[6px] text-left">
+          <div className="flex justify-between items-center text-[13px] text-fg-default tabular-nums">
+            <span>Gross cost</span>
+            <span>{formatUsd(aicGrossAmount)}</span>
+          </div>
+          <div className="flex justify-between items-center text-[13px] text-fg-muted tabular-nums">
+            <span>Included credits discount</span>
+            <span>−{formatUsd(aicDiscountAmount)}</span>
+          </div>
+          <div className="flex justify-between items-center text-[13px] text-fg-default tabular-nums pt-[6px] border-t border-border-default font-semibold">
+            <span>Net cost</span>
+            <span>{formatUsd(aicNetAmount)}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/ui/index.ts

@@ -4,3 +4,5 @@ export { CostBreakdownCard } from './CostBreakdownCard'
 export type { CostBreakdownCardProps, CostBreakdownItem } from './CostBreakdownCard'
 export { BillingComparisonCard } from './BillingComparisonCard'
 export type { BillingComparisonCardProps } from './BillingComparisonCard'
+export { BillingTotalsCards } from './BillingTotalsCards'
+export type { BillingTotalsCardsProps } from './BillingTotalsCards'

src/pipeline/aicEntitlements.ts

@@ -42,7 +42,7 @@ type ReportScopeUser = {
   costCenters?: string[]
 }
 
-type AicEntitlementContext = {
+export type AicEntitlementContext = {
   reportPlanScope: ReportPlanScope
   organizationEntitlementPool: number
   individualWeeklyEntitlements: number
@@ -166,7 +166,7 @@ export function calculateLicenseSummary(
   }
 }
 
-async function calculateAicEntitlementContext(
+export async function calculateAicEntitlementContext(
   file: File,
   overrides: AicEntitlementOverrides = {},
 ): Promise<AicEntitlementContext> {
@@ -319,7 +319,7 @@ export async function createAicEntitlementAllocator(
   return new PooledAicEntitlementAllocator(entitlementContext.organizationEntitlementPool)
 }
 
-function getIsoWeekStart(value: string): string | null {
+export function getIsoWeekStart(value: string): string | null {
   const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
   if (!match) return null