Skip to content
The AI Space

💰 Cost Management Made Simple

Right now, you have content moderation, safety implementation, and performance optimization working in your application, delivering fast and secure AI experiences. But what if you could intelligently manage and control costs while maintaining optimal performance?

Cost management transforms business sustainability. Instead of unexpected bills and budget overruns, you’ll have intelligent monitoring, automated controls, and predictive cost management that keeps your AI application profitable and sustainable.

You’re about to learn exactly how to implement production-grade cost management in your existing application.

🧠 Step 1: Understanding Cost Management

Section titled “🧠 Step 1: Understanding Cost Management”

Before we write any code, let’s understand what comprehensive cost management actually means and why it’s different from basic usage tracking.

What Cost Management Actually Means

Section titled “What Cost Management Actually Means”

Cost management is like building a financial intelligence system for your AI application. It goes beyond tracking expenses to create predictive budgeting, automated controls, and intelligent optimization that prevents cost surprises and maximizes ROI.

Real-world analogy: Basic usage tracking is like checking your bank balance occasionally. Cost management is like having a financial advisor that monitors spending in real-time, predicts future costs, sets automatic limits, and suggests optimizations to save money.

Why Cost Management vs. Basic Tracking

Section titled “Why Cost Management vs. Basic Tracking”

You already have performance optimization working, but cost management is different:

📊 Basic Tracking - Recording what you spent after the fact (reactive) 💰 Cost Management - Predicting, controlling, and optimizing costs proactively (proactive)
🎯 Budget Intelligence - Automated controls and optimization suggestions (intelligent)

The key difference: Cost management prevents budget overruns rather than just reporting them.

Real-World Cost Impact

Section titled “Real-World Cost Impact”

Think about how cost management affects your business:

  • Budget predictability - Know exactly what you’ll spend before you spend it
  • Cost optimization - Automatically reduce expenses without sacrificing quality
  • Usage insights - Understand which features and users drive costs
  • Growth planning - Scale confidently with predictable cost models
  • ROI maximization - Optimize the relationship between features and expenses

Without cost management:

  1. Unexpected bills create budget surprises (financial risk)
  2. No visibility into cost drivers (blind spending)
  3. Manual cost tracking is time-consuming (operational overhead)
  4. No automated controls to prevent overruns (budget vulnerability)

With cost management, you have intelligent, predictive cost control that protects your budget while maximizing value.

Cost Management Components

Section titled “Cost Management Components”

Your cost management system will include multiple integrated components:

📊 Usage Monitoring - The Cost Tracker

  • Best for: Real-time tracking of API usage and associated costs
  • Strengths: Detailed breakdowns, trend analysis, cost attribution
  • Use cases: Daily monitoring, feature cost analysis, user cost tracking

🎯 Budget Controls - The Safety Net

  • Best for: Preventing budget overruns with automated limits
  • Strengths: Real-time enforcement, graduated responses, emergency stops
  • Use cases: Monthly budgets, feature limits, user quotas

📈 Cost Analytics - The Intelligence Engine

  • Best for: Understanding cost patterns and optimization opportunities
  • Strengths: Predictive modeling, trend analysis, optimization recommendations
  • Use cases: Budget planning, cost forecasting, ROI analysis

⚡ Automated Optimization - The Efficiency Maximizer

  • Best for: Reducing costs automatically without manual intervention
  • Strengths: Model selection, request batching, intelligent caching
  • Use cases: Cost reduction, performance optimization, resource efficiency

🔧 Step 2: Building Cost Management Backend

Section titled “🔧 Step 2: Building Cost Management Backend”

Let’s build a comprehensive cost management system on top of your existing backend. We’ll add usage tracking, budget controls, and cost optimization.

Building on your foundation: You already have performance optimization and safety systems. We’re extending it to create intelligent cost management with predictive budgeting and automated controls.

Step 2A: Understanding Cost Management Architecture

Section titled “Step 2A: Understanding Cost Management Architecture”

Before writing code, let’s understand how a cost-aware architecture works:

// 💰 COST MANAGEMENT ARCHITECTURE:
// 1. Usage Tracking - Monitor API calls, tokens, and associated costs
// 2. Budget Enforcement - Real-time budget checks and automated controls
// 3. Cost Analytics - Pattern analysis and cost optimization insights
// 4. Predictive Modeling - Forecast future costs based on usage trends
// 5. Automated Optimization - Dynamic cost reduction strategies
// 6. Reporting Dashboard - Comprehensive cost visibility and management

Key cost management concepts:

  • Real-time Cost Tracking: Monitor expenses as they occur
  • Predictive Budgeting: Forecast costs based on usage patterns
  • Automated Controls: Prevent overruns without manual intervention
  • Cost Attribution: Understand which features and users drive costs

Step 2B: Installing Cost Management Dependencies

Section titled “Step 2B: Installing Cost Management Dependencies”

Add cost management dependencies to your backend. In your backend folder, run:

Terminal window
npm install moment lodash mathjs

What these packages do:

  • moment: Date/time manipulation for cost tracking periods
  • lodash: Utility functions for data analysis and aggregation
  • mathjs: Mathematical operations for cost calculations and forecasting

Step 2C: Adding Cost Management System

Section titled “Step 2C: Adding Cost Management System”

Add these cost management components to your existing index.js file, right after your performance optimization:

import moment from 'moment';
import _ from 'lodash';
import { evaluate } from 'mathjs';


// 💰 COST CONFIGURATION: System-wide cost management settings
const COST_CONFIG = {
  // OpenAI API pricing (as of 2024 - update with current rates)
  pricing: {
    'gpt-4': {
      input_per_1k_tokens: 0.03,
      output_per_1k_tokens: 0.06
    },
    'gpt-4-turbo': {
      input_per_1k_tokens: 0.01,
      output_per_1k_tokens: 0.03
    },
    'gpt-3.5-turbo': {
      input_per_1k_tokens: 0.0015,
      output_per_1k_tokens: 0.002
    },
    'dall-e-3': {
      per_image: 0.040, // Standard 1024x1024
      hd_per_image: 0.080 // HD 1024x1024
    },
    'dall-e-2': {
      per_image: 0.020 // 1024x1024
    },
    'whisper-1': {
      per_minute: 0.006
    },
    'tts-1': {
      per_1k_characters: 0.015
    },
    'tts-1-hd': {
      per_1k_characters: 0.030
    }
  },


  // Budget settings
  budgets: {
    default_monthly_budget: 100.00,    // $100 default monthly budget
    warning_threshold: 0.80,           // Warn at 80% of budget
    critical_threshold: 0.95,          // Critical alert at 95%
    auto_cutoff_threshold: 1.00,       // Auto-disable at 100%
    budget_reset_day: 1                // Reset on 1st of each month
  },


  // Cost tracking
  tracking: {
    track_by_user: true,               // Track costs per user
    track_by_feature: true,            // Track costs per feature
    track_by_model: true,              // Track costs per model
    retention_months: 12,              // Keep cost data for 12 months
    alert_frequency: 'daily'           // How often to send budget alerts
  },


  // Optimization settings
  optimization: {
    auto_model_selection: true,        // Automatically choose cost-effective models
    batch_optimization: true,          // Batch requests for cost savings
    cache_optimization: true,          // Use caching to reduce API calls
    cost_threshold_optimization: 0.10  // Optimize if potential savings > 10%
  }
};


// 💳 COST TRACKING DATABASE: Cost and usage data storage
const costDatabase = {
  usage: new Map(),           // Track API usage by time period
  budgets: new Map(),         // Track budget allocations and usage
  costs: new Map(),           // Track actual costs incurred
  alerts: new Map(),          // Track budget alerts sent
  optimization: new Map(),    // Track cost optimization actions


  // Current period tracking
  currentPeriod: {
    start: moment().startOf('month'),
    end: moment().endOf('month'),
    totalCost: 0,
    totalRequests: 0,
    totalTokens: 0,
    budgetUsed: 0
  }
};


// 🔧 COST HELPER FUNCTIONS


// Calculate cost for different API operations
const calculateCost = (operation, details) => {
  const pricing = COST_CONFIG.pricing[details.model] || COST_CONFIG.pricing['gpt-3.5-turbo'];


  switch (operation) {
    case 'chat':
      const inputCost = (details.input_tokens / 1000) * pricing.input_per_1k_tokens;
      const outputCost = (details.output_tokens / 1000) * pricing.output_per_1k_tokens;
      return inputCost + outputCost;


    case 'image_generation':
      if (details.model === 'dall-e-3') {
        return details.hd ? pricing.hd_per_image : pricing.per_image;
      } else if (details.model === 'dall-e-2') {
        return pricing.per_image;
      }
      return pricing.per_image || 0.020;


    case 'audio_transcription':
      return (details.duration_minutes || 1) * pricing.per_minute;


    case 'text_to_speech':
      return (details.characters / 1000) * pricing.per_1k_characters;


    default:
      return 0;
  }
};


// Record cost and usage
const recordCost = (userId, operation, cost, details = {}) => {
  const timestamp = new Date();
  const periodKey = moment(timestamp).format('YYYY-MM');


  // Record in usage map
  if (!costDatabase.usage.has(periodKey)) {
    costDatabase.usage.set(periodKey, []);
  }


  const usageRecord = {
    id: Date.now() + Math.random(),
    timestamp,
    userId: userId || 'anonymous',
    operation,
    cost,
    details,
    period: periodKey
  };


  costDatabase.usage.get(periodKey).push(usageRecord);


  // Update current period totals
  if (moment(timestamp).isSame(costDatabase.currentPeriod.start, 'month')) {
    costDatabase.currentPeriod.totalCost += cost;
    costDatabase.currentPeriod.totalRequests += 1;
    costDatabase.currentPeriod.totalTokens += (details.input_tokens || 0) + (details.output_tokens || 0);
    costDatabase.currentPeriod.budgetUsed = costDatabase.currentPeriod.totalCost / COST_CONFIG.budgets.default_monthly_budget;
  }


  // Check budget alerts
  checkBudgetAlerts();


  console.log(`💰 Cost recorded: $${cost.toFixed(4)} for ${operation} (User: ${userId || 'anonymous'})`);
  return usageRecord;
};


// Check budget alerts and enforcement
const checkBudgetAlerts = () => {
  const currentBudgetUsage = costDatabase.currentPeriod.budgetUsed;
  const monthKey = moment().format('YYYY-MM');


  // Warning threshold
  if (currentBudgetUsage >= COST_CONFIG.budgets.warning_threshold &&
      currentBudgetUsage < COST_CONFIG.budgets.critical_threshold) {


    if (!costDatabase.alerts.has(`warning-${monthKey}`)) {
      sendBudgetAlert('warning', currentBudgetUsage);
      costDatabase.alerts.set(`warning-${monthKey}`, new Date());
    }
  }


  // Critical threshold
  if (currentBudgetUsage >= COST_CONFIG.budgets.critical_threshold &&
      currentBudgetUsage < COST_CONFIG.budgets.auto_cutoff_threshold) {


    if (!costDatabase.alerts.has(`critical-${monthKey}`)) {
      sendBudgetAlert('critical', currentBudgetUsage);
      costDatabase.alerts.set(`critical-${monthKey}`, new Date());
    }
  }


  // Auto-cutoff threshold
  if (currentBudgetUsage >= COST_CONFIG.budgets.auto_cutoff_threshold) {
    if (!costDatabase.alerts.has(`cutoff-${monthKey}`)) {
      sendBudgetAlert('cutoff', currentBudgetUsage);
      costDatabase.alerts.set(`cutoff-${monthKey}`, new Date());
      // In a real application, you might disable API access here
    }
  }
};


// Send budget alert (in production, this would send emails/notifications)
const sendBudgetAlert = (type, budgetUsage) => {
  const percentage = (budgetUsage * 100).toFixed(1);
  const cost = costDatabase.currentPeriod.totalCost.toFixed(2);
  const budget = COST_CONFIG.budgets.default_monthly_budget.toFixed(2);


  console.log(`🚨 BUDGET ALERT (${type.toUpperCase()}): ${percentage}% of budget used ($${cost}/$${budget})`);


  // In production, send actual notifications:
  // - Email alerts
  // - Slack notifications
  // - Dashboard alerts
  // - SMS for critical alerts
};


// Get cost optimization suggestions
const getCostOptimizationSuggestions = () => {
  const suggestions = [];
  const currentPeriod = costDatabase.currentPeriod;
  const monthKey = moment().format('YYYY-MM');
  const monthlyUsage = costDatabase.usage.get(monthKey) || [];


  // Analyze model usage for optimization
  const modelUsage = _.groupBy(monthlyUsage.filter(u => u.operation === 'chat'), 'details.model');


  Object.entries(modelUsage).forEach(([model, usages]) => {
    const totalCost = usages.reduce((sum, u) => sum + u.cost, 0);
    const avgTokens = _.meanBy(usages, u => (u.details.input_tokens || 0) + (u.details.output_tokens || 0));


    // Suggest model downgrade if appropriate
    if (model === 'gpt-4' && avgTokens < 1000 && totalCost > 5) {
      suggestions.push({
        type: 'model_optimization',
        priority: 'high',
        title: 'Consider GPT-3.5 Turbo for Simple Tasks',
        description: `You're using GPT-4 for tasks averaging ${Math.round(avgTokens)} tokens. GPT-3.5 Turbo could save ~75% on costs.`,
        potential_savings: totalCost * 0.75,
        action: 'Use GPT-3.5 Turbo for simple queries'
      });
    }
  });


  // Analyze caching opportunities
  const cacheHitRate = parseFloat(global.performanceMetrics?.timing?.cache_hit_rate || 0);
  if (cacheHitRate < 30 && currentPeriod.totalCost > 10) {
    suggestions.push({
      type: 'caching',
      priority: 'medium',
      title: 'Improve Caching Strategy',
      description: `Cache hit rate is ${cacheHitRate}%. Better caching could save significant API costs.`,
      potential_savings: currentPeriod.totalCost * 0.30,
      action: 'Optimize cache configuration and similarity thresholds'
    });
  }


  // Analyze request patterns for batching
  const avgRequestsPerHour = currentPeriod.totalRequests / (moment().diff(costDatabase.currentPeriod.start, 'hours') || 1);
  if (avgRequestsPerHour > 10 && currentPeriod.totalCost > 20) {
    suggestions.push({
      type: 'batching',
      priority: 'medium',
      title: 'Implement Request Batching',
      description: `With ${Math.round(avgRequestsPerHour)} requests/hour, batching could reduce overhead costs.`,
      potential_savings: currentPeriod.totalCost * 0.15,
      action: 'Group similar requests for batch processing'
    });
  }


  return suggestions.sort((a, b) => b.potential_savings - a.potential_savings);
};


// Predict monthly cost based on current usage
const predictMonthlyCost = () => {
  const daysInMonth = moment().daysInMonth();
  const daysPassed = moment().date();
  const currentCost = costDatabase.currentPeriod.totalCost;


  // Simple linear projection
  const dailyAverage = currentCost / daysPassed;
  const linearProjection = dailyAverage * daysInMonth;


  // Trend-based projection (if we have enough data)
  const monthKey = moment().format('YYYY-MM');
  const monthlyUsage = costDatabase.usage.get(monthKey) || [];


  if (monthlyUsage.length > 7) { // Need at least a week of data
    const recentUsage = monthlyUsage.slice(-7); // Last 7 days
    const recentDailyAverage = recentUsage.reduce((sum, u) => sum + u.cost, 0) / 7;
    const trendProjection = recentDailyAverage * daysInMonth;


    return {
      linear_projection: linearProjection,
      trend_projection: trendProjection,
      confidence: monthlyUsage.length > 14 ? 'high' : 'medium',
      days_of_data: daysPassed
    };
  }


  return {
    linear_projection: linearProjection,
    trend_projection: linearProjection,
    confidence: 'low',
    days_of_data: daysPassed
  };
};


// 💰 COST MIDDLEWARE: Track costs for all API calls


const costTrackingMiddleware = (operation, estimateTokens = null) => {
  return (req, res, next) => {
    const startTime = Date.now();


    // Intercept response to calculate actual costs
    const originalSend = res.json;
    res.json = function(data) {
      try {
        // Calculate cost based on actual response
        let cost = 0;
        const details = {
          model: req.body.model || 'gpt-3.5-turbo',
          endpoint: req.path
        };


        // Extract token usage from response if available
        if (data.usage) {
          details.input_tokens = data.usage.prompt_tokens || 0;
          details.output_tokens = data.usage.completion_tokens || 0;
          cost = calculateCost('chat', details);
        } else if (operation === 'image_generation') {
          details.hd = req.body.quality === 'hd';
          cost = calculateCost('image_generation', details);
        } else if (operation === 'audio_transcription') {
          details.duration_minutes = estimateTokens || 1; // Estimate duration
          cost = calculateCost('audio_transcription', details);
        } else if (operation === 'text_to_speech') {
          details.characters = (req.body.input || '').length;
          cost = calculateCost('text_to_speech', details);
        } else if (estimateTokens) {
          // Fallback estimation for other operations
          details.input_tokens = estimateTokens;
          details.output_tokens = estimateTokens;
          cost = calculateCost('chat', details);
        }


        // Record the cost
        if (cost > 0) {
          recordCost(req.user?.id, operation, cost, {
            ...details,
            response_time: Date.now() - startTime,
            success: res.statusCode === 200
          });
        }


        // Add cost information to response
        if (data && typeof data === 'object') {
          data.cost_info = {
            estimated_cost: cost.toFixed(6),
            operation,
            model: details.model,
            tokens: details.input_tokens + details.output_tokens
          };
        }


      } catch (error) {
        console.error('Cost tracking error:', error);
      }


      return originalSend.call(this, data);
    };


    next();
  };
};


// 💰 COST ENDPOINTS: Cost management and monitoring


// Apply cost tracking to all major endpoints
app.use('/api/chat', costTrackingMiddleware('chat', 100));
app.use('/api/images', costTrackingMiddleware('image_generation'));
app.use('/api/audio', costTrackingMiddleware('audio_transcription', 1));
app.use('/api/voice', costTrackingMiddleware('text_to_speech', 50));
app.use('/api/structured', costTrackingMiddleware('chat', 150));


// Cost dashboard endpoint
app.get("/api/costs/dashboard", (req, res) => {
  try {
    const currentPeriod = costDatabase.currentPeriod;
    const monthKey = moment().format('YYYY-MM');
    const monthlyUsage = costDatabase.usage.get(monthKey) || [];


    // Calculate key metrics
    const budgetStatus = {
      current_cost: currentPeriod.totalCost,
      monthly_budget: COST_CONFIG.budgets.default_monthly_budget,
      budget_used_percentage: (currentPeriod.budgetUsed * 100).toFixed(1),
      budget_remaining: Math.max(0, COST_CONFIG.budgets.default_monthly_budget - currentPeriod.totalCost),
      days_remaining: moment().endOf('month').diff(moment(), 'days')
    };


    // Usage breakdown by operation
    const usageByOperation = _.groupBy(monthlyUsage, 'operation');
    const operationBreakdown = Object.entries(usageByOperation).map(([operation, usages]) => ({
      operation,
      count: usages.length,
      total_cost: usages.reduce((sum, u) => sum + u.cost, 0),
      avg_cost: _.meanBy(usages, 'cost'),
      percentage: (usages.reduce((sum, u) => sum + u.cost, 0) / currentPeriod.totalCost * 100).toFixed(1)
    })).sort((a, b) => b.total_cost - a.total_cost);


    // Usage by model
    const chatUsage = monthlyUsage.filter(u => u.operation === 'chat');
    const modelBreakdown = _.chain(chatUsage)
      .groupBy('details.model')
      .map((usages, model) => ({
        model,
        count: usages.length,
        total_cost: usages.reduce((sum, u) => sum + u.cost, 0),
        avg_cost: _.meanBy(usages, 'cost'),
        total_tokens: usages.reduce((sum, u) => (u.details.input_tokens || 0) + (u.details.output_tokens || 0), 0)
      }))
      .orderBy('total_cost', 'desc')
      .value();


    // Daily usage trend
    const dailyUsage = _.chain(monthlyUsage)
      .groupBy(u => moment(u.timestamp).format('YYYY-MM-DD'))
      .map((usages, date) => ({
        date,
        cost: usages.reduce((sum, u) => sum + u.cost, 0),
        requests: usages.length
      }))
      .orderBy('date')
      .value();


    // Cost predictions
    const predictions = predictMonthlyCost();


    res.json({
      success: true,
      budget_status: budgetStatus,
      current_period: {
        ...currentPeriod,
        start: currentPeriod.start.format('YYYY-MM-DD'),
        end: currentPeriod.end.format('YYYY-MM-DD')
      },
      breakdown: {
        by_operation: operationBreakdown,
        by_model: modelBreakdown,
        daily_usage: dailyUsage
      },
      predictions,
      alerts: {
        warning_threshold: COST_CONFIG.budgets.warning_threshold,
        critical_threshold: COST_CONFIG.budgets.critical_threshold,
        auto_cutoff_threshold: COST_CONFIG.budgets.auto_cutoff_threshold
      },
      timestamp: new Date().toISOString()
    });


  } catch (error) {
    console.error('Cost dashboard error:', error);
    res.status(500).json({
      error: 'Failed to load cost dashboard',
      details: error.message,
      success: false
    });
  }
});


// Cost optimization suggestions endpoint
app.get("/api/costs/optimization", (req, res) => {
  try {
    const suggestions = getCostOptimizationSuggestions();
    const totalPotentialSavings = suggestions.reduce((sum, s) => sum + s.potential_savings, 0);


    res.json({
      success: true,
      suggestions,
      summary: {
        total_suggestions: suggestions.length,
        total_potential_savings: totalPotentialSavings.toFixed(2),
        monthly_savings_percentage: totalPotentialSavings > 0 ?
          (totalPotentialSavings / costDatabase.currentPeriod.totalCost * 100).toFixed(1) : 0
      },
      analysis_timestamp: new Date().toISOString()
    });


  } catch (error) {
    console.error('Cost optimization error:', error);
    res.status(500).json({
      error: 'Failed to get optimization suggestions',
      details: error.message,
      success: false
    });
  }
});


// Budget management endpoint
app.post("/api/costs/budget", (req, res) => {
  try {
    const { monthly_budget, warning_threshold, critical_threshold } = req.body;


    if (monthly_budget && monthly_budget > 0) {
      COST_CONFIG.budgets.default_monthly_budget = monthly_budget;
    }


    if (warning_threshold && warning_threshold > 0 && warning_threshold < 1) {
      COST_CONFIG.budgets.warning_threshold = warning_threshold;
    }


    if (critical_threshold && critical_threshold > 0 && critical_threshold < 1) {
      COST_CONFIG.budgets.critical_threshold = critical_threshold;
    }


    // Recalculate budget usage with new budget
    costDatabase.currentPeriod.budgetUsed =
      costDatabase.currentPeriod.totalCost / COST_CONFIG.budgets.default_monthly_budget;


    res.json({
      success: true,
      message: 'Budget settings updated successfully',
      current_budget: COST_CONFIG.budgets,
      current_usage: {
        total_cost: costDatabase.currentPeriod.totalCost,
        budget_used_percentage: (costDatabase.currentPeriod.budgetUsed * 100).toFixed(1)
      }
    });


  } catch (error) {
    console.error('Budget update error:', error);
    res.status(500).json({
      error: 'Failed to update budget settings',
      details: error.message,
      success: false
    });
  }
});


// Cost history endpoint
app.get("/api/costs/history", (req, res) => {
  try {
    const { months = 3 } = req.query;
    const monthsToShow = Math.min(parseInt(months), 12);


    const history = [];
    for (let i = 0; i < monthsToShow; i++) {
      const month = moment().subtract(i, 'months');
      const monthKey = month.format('YYYY-MM');
      const monthUsage = costDatabase.usage.get(monthKey) || [];


      const monthTotal = monthUsage.reduce((sum, u) => sum + u.cost, 0);
      const monthRequests = monthUsage.length;


      history.unshift({
        month: month.format('MMMM YYYY'),
        month_key: monthKey,
        total_cost: monthTotal,
        total_requests: monthRequests,
        avg_cost_per_request: monthRequests > 0 ? monthTotal / monthRequests : 0,
        budget_percentage: (monthTotal / COST_CONFIG.budgets.default_monthly_budget * 100).toFixed(1)
      });
    }


    res.json({
      success: true,
      history,
      summary: {
        total_months: history.length,
        total_cost: history.reduce((sum, h) => sum + h.total_cost, 0),
        total_requests: history.reduce((sum, h) => sum + h.total_requests, 0),
        avg_monthly_cost: history.length > 0 ?
          history.reduce((sum, h) => sum + h.total_cost, 0) / history.length : 0
      }
    });


  } catch (error) {
    console.error('Cost history error:', error);
    res.status(500).json({
      error: 'Failed to get cost history',
      details: error.message,
      success: false
    });
  }
});


// User cost analysis endpoint
app.get("/api/costs/users", (req, res) => {
  try {
    const monthKey = moment().format('YYYY-MM');
    const monthlyUsage = costDatabase.usage.get(monthKey) || [];


    const userCosts = _.chain(monthlyUsage)
      .groupBy('userId')
      .map((usages, userId) => ({
        user_id: userId,
        total_cost: usages.reduce((sum, u) => sum + u.cost, 0),
        total_requests: usages.length,
        avg_cost_per_request: _.meanBy(usages, 'cost'),
        operations: _.countBy(usages, 'operation'),
        cost_percentage: (usages.reduce((sum, u) => sum + u.cost, 0) / costDatabase.currentPeriod.totalCost * 100).toFixed(1)
      }))
      .orderBy('total_cost', 'desc')
      .value();


    res.json({
      success: true,
      user_costs: userCosts,
      summary: {
        total_users: userCosts.length,
        top_user_cost: userCosts.length > 0 ? userCosts[0].total_cost : 0,
        avg_cost_per_user: userCosts.length > 0 ?
          _.meanBy(userCosts, 'total_cost') : 0
      }
    });


  } catch (error) {
    console.error('User cost analysis error:', error);
    res.status(500).json({
      error: 'Failed to analyze user costs',
      details: error.message,
      success: false
    });
  }
});


// Initialize cost management system
console.log('💰 Cost management system initialized');
console.log(`📊 Monthly Budget: $${COST_CONFIG.budgets.default_monthly_budget}`);
console.log(`⚠️  Warning at: ${(COST_CONFIG.budgets.warning_threshold * 100)}%`);
console.log(`🚨 Critical at: ${(COST_CONFIG.budgets.critical_threshold * 100)}%`);


// Reset monthly tracking if needed
const resetMonthlyTracking = () => {
  const now = moment();
  if (now.isAfter(costDatabase.currentPeriod.end)) {
    console.log('📅 Resetting monthly cost tracking');
    costDatabase.currentPeriod = {
      start: now.startOf('month'),
      end: now.endOf('month'),
      totalCost: 0,
      totalRequests: 0,
      totalTokens: 0,
      budgetUsed: 0
    };
  }
};


// Check for monthly reset every hour
setInterval(resetMonthlyTracking, 60 * 60 * 1000);

Function breakdown:

  1. Real-time cost tracking - Monitor API usage and calculate costs in real-time
  2. Budget enforcement - Automated alerts and controls to prevent overruns
  3. Cost analytics - Detailed breakdowns by operation, model, and user
  4. Predictive modeling - Forecast monthly costs based on usage trends
  5. Optimization suggestions - Automated recommendations for cost reduction
  6. Historical analysis - Track cost trends and patterns over time

🔧 Step 3: Building the React Cost Management Dashboard

Section titled “🔧 Step 3: Building the React Cost Management Dashboard”

Now let’s create a comprehensive cost management interface that provides complete financial visibility and control.

Step 3A: Creating the Cost Management Component

Section titled “Step 3A: Creating the Cost Management Component”

Create a new file src/CostManagement.jsx:

import { useState, useEffect } from "react";
import { DollarSign, TrendingUp, AlertTriangle, BarChart3, Users, Calendar, Target, PieChart } from "lucide-react";


function CostManagement() {
  // 🧠 STATE: Cost management data
  const [costData, setCostData] = useState(null);                // Dashboard data
  const [optimization, setOptimization] = useState(null);        // Optimization suggestions
  const [history, setHistory] = useState(null);                 // Cost history
  const [userCosts, setUserCosts] = useState(null);            // User cost breakdown
  const [isLoading, setIsLoading] = useState(true);             // Loading status
  const [error, setError] = useState(null);                     // Error messages
  const [activeTab, setActiveTab] = useState("overview");       // Active tab
  const [budgetSettings, setBudgetSettings] = useState({        // Budget configuration
    monthly_budget: 100,
    warning_threshold: 0.80,
    critical_threshold: 0.95
  });


  // 🔧 FUNCTIONS: Cost management logic


  // Load cost dashboard data
  const loadCostData = async () => {
    setIsLoading(true);
    setError(null);


    try {
      const response = await fetch("http://localhost:8000/api/costs/dashboard");
      const data = await response.json();


      if (!response.ok) {
        throw new Error(data.error || 'Failed to load cost data');
      }


      setCostData(data);
      setBudgetSettings({
        monthly_budget: data.budget_status.monthly_budget,
        warning_threshold: data.alerts.warning_threshold,
        critical_threshold: data.alerts.critical_threshold
      });


    } catch (error) {
      console.error('Failed to load cost data:', error);
      setError(error.message || 'Could not load cost dashboard');
    } finally {
      setIsLoading(false);
    }
  };


  // Load optimization suggestions
  const loadOptimization = async () => {
    try {
      const response = await fetch("http://localhost:8000/api/costs/optimization");
      const data = await response.json();


      if (response.ok) {
        setOptimization(data);
      }
    } catch (error) {
      console.error('Failed to load optimization data:', error);
    }
  };


  // Load cost history
  const loadHistory = async () => {
    try {
      const response = await fetch("http://localhost:8000/api/costs/history?months=6");
      const data = await response.json();


      if (response.ok) {
        setHistory(data);
      }
    } catch (error) {
      console.error('Failed to load cost history:', error);
    }
  };


  // Load user cost analysis
  const loadUserCosts = async () => {
    try {
      const response = await fetch("http://localhost:8000/api/costs/users");
      const data = await response.json();


      if (response.ok) {
        setUserCosts(data);
      }
    } catch (error) {
      console.error('Failed to load user costs:', error);
    }
  };


  // Update budget settings
  const updateBudget = async () => {
    try {
      const response = await fetch("http://localhost:8000/api/costs/budget", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(budgetSettings)
      });


      const data = await response.json();


      if (!response.ok) {
        throw new Error(data.error || 'Failed to update budget');
      }


      alert('Budget settings updated successfully!');
      loadCostData(); // Reload data with new budget


    } catch (error) {
      console.error('Budget update failed:', error);
      setError(error.message || 'Could not update budget settings');
    }
  };


  // Format currency for display
  const formatCurrency = (amount, decimals = 2) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals
    }).format(amount || 0);
  };


  // Get budget status color
  const getBudgetStatusColor = (percentage) => {
    if (percentage >= 95) return 'text-red-600 bg-red-100';
    if (percentage >= 80) return 'text-yellow-600 bg-yellow-100';
    return 'text-green-600 bg-green-100';
  };


  // Get priority color for suggestions
  const getPriorityColor = (priority) => {
    switch (priority) {
      case 'high': return 'bg-red-500';
      case 'medium': return 'bg-yellow-500';
      case 'low': return 'bg-green-500';
      default: return 'bg-gray-500';
    }
  };


  // Load all data on component mount
  useEffect(() => {
    loadCostData();
    loadOptimization();
    loadHistory();
    loadUserCosts();


    // Set up auto-refresh every 30 seconds
    const interval = setInterval(() => {
      loadCostData();
      loadOptimization();
    }, 30000);


    return () => clearInterval(interval);
  }, []);


  // 🎨 UI: Cost management dashboard interface
  return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-7xl flex flex-col overflow-hidden">


        {/* Header */}
        <div className="bg-gradient-to-r from-green-600 to-emerald-600 text-white p-6">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
              <DollarSign className="w-5 h-5" />
            </div>
            <div>
              <h1 className="text-xl font-bold">💰 Cost Management</h1>
              <p className="text-green-100 text-sm">Monitor, control, and optimize AI application costs with intelligent budget management!</p>
            </div>
          </div>
        </div>


        {/* Tab Navigation */}
        <div className="border-b border-gray-200">
          <nav className="flex">
            <button
              onClick={() => setActiveTab('overview')}
              className={`px-6 py-3 font-medium text-sm border-b-2 transition-colors duration-200 ${
                activeTab === 'overview'
                  ? 'border-green-500 text-green-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              <BarChart3 className="w-4 h-4 inline mr-2" />
              Overview
            </button>
            <button
              onClick={() => setActiveTab('budget')}
              className={`px-6 py-3 font-medium text-sm border-b-2 transition-colors duration-200 ${
                activeTab === 'budget'
                  ? 'border-green-500 text-green-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              <Target className="w-4 h-4 inline mr-2" />
              Budget Management
            </button>
            <button
              onClick={() => setActiveTab('optimization')}
              className={`px-6 py-3 font-medium text-sm border-b-2 transition-colors duration-200 ${
                activeTab === 'optimization'
                  ? 'border-green-500 text-green-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              <TrendingUp className="w-4 h-4 inline mr-2" />
              Optimization
            </button>
            <button
              onClick={() => setActiveTab('history')}
              className={`px-6 py-3 font-medium text-sm border-b-2 transition-colors duration-200 ${
                activeTab === 'history'
                  ? 'border-green-500 text-green-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              <Calendar className="w-4 h-4 inline mr-2" />
              History & Analytics
            </button>
            <button
              onClick={() => setActiveTab('users')}
              className={`px-6 py-3 font-medium text-sm border-b-2 transition-colors duration-200 ${
                activeTab === 'users'
                  ? 'border-green-500 text-green-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              <Users className="w-4 h-4 inline mr-2" />
              User Analysis
            </button>
          </nav>
        </div>


        {/* Error Display */}
        {error && (
          <div className="p-4 bg-red-50 border-b border-red-200">
            <p className="text-red-700 text-sm">
              <strong>Error:</strong> {error}
            </p>
          </div>
        )}


        {/* Main Content */}
        <div className="flex-1 p-6">
          {/* Overview Tab */}
          {activeTab === 'overview' && (
            <div className="space-y-6">
              {isLoading ? (
                <div className="text-center py-12">
                  <div className="animate-spin w-8 h-8 border-4 border-green-500 border-t-transparent rounded-full mx-auto mb-4"></div>
                  <p className="text-gray-600">Loading cost data...</p>
                </div>
              ) : costData ? (
                <>
                  {/* Budget Status Cards */}
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div className="bg-blue-50 rounded-lg p-4">
                      <div className="flex items-center">
                        <DollarSign className="w-8 h-8 text-blue-600" />
                        <div className="ml-3">
                          <p className="text-sm font-medium text-blue-600">Current Month Cost</p>
                          <p className="text-2xl font-bold text-blue-900">
                            {formatCurrency(costData.budget_status.current_cost)}
                          </p>
                          <p className="text-xs text-blue-700">
                            {costData.current_period.totalRequests} requests
                          </p>
                        </div>
                      </div>
                    </div>


                    <div className={`rounded-lg p-4 ${
                      parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'bg-red-50' :
                      parseFloat(costData.budget_status.budget_used_percentage) >= 80 ? 'bg-yellow-50' : 'bg-green-50'
                    }`}>
                      <div className="flex items-center">
                        <Target className={`w-8 h-8 ${
                          parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'text-red-600' :
                          parseFloat(costData.budget_status.budget_used_percentage) >= 80 ? 'text-yellow-600' : 'text-green-600'
                        }`} />
                        <div className="ml-3">
                          <p className={`text-sm font-medium ${
                            parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'text-red-600' :
                            parseFloat(costData.budget_status.budget_used_percentage) >= 80 ? 'text-yellow-600' : 'text-green-600'
                          }`}>Budget Used</p>
                          <p className={`text-2xl font-bold ${
                            parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'text-red-900' :
                            parseFloat(costData.budget_status.budget_used_percentage) >= 80 ? 'text-yellow-900' : 'text-green-900'
                          }`}>
                            {costData.budget_status.budget_used_percentage}%
                          </p>
                          <p className={`text-xs ${
                            parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'text-red-700' :
                            parseFloat(costData.budget_status.budget_used_percentage) >= 80 ? 'text-yellow-700' : 'text-green-700'
                          }`}>
                            {formatCurrency(costData.budget_status.budget_remaining)} remaining
                          </p>
                        </div>
                      </div>
                    </div>


                    <div className="bg-purple-50 rounded-lg p-4">
                      <div className="flex items-center">
                        <TrendingUp className="w-8 h-8 text-purple-600" />
                        <div className="ml-3">
                          <p className="text-sm font-medium text-purple-600">Projected Monthly</p>
                          <p className="text-2xl font-bold text-purple-900">
                            {formatCurrency(costData.predictions.linear_projection)}
                          </p>
                          <p className="text-xs text-purple-700">
                            {costData.predictions.confidence} confidence
                          </p>
                        </div>
                      </div>
                    </div>


                    <div className="bg-orange-50 rounded-lg p-4">
                      <div className="flex items-center">
                        <Calendar className="w-8 h-8 text-orange-600" />
                        <div className="ml-3">
                          <p className="text-sm font-medium text-orange-600">Days Remaining</p>
                          <p className="text-2xl font-bold text-orange-900">
                            {costData.budget_status.days_remaining}
                          </p>
                          <p className="text-xs text-orange-700">
                            in current month
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>


                  {/* Cost Breakdown */}
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {/* By Operation */}
                    <div className="bg-white border rounded-lg p-6">
                      <h3 className="font-semibold text-gray-900 mb-4 flex items-center">
                        <PieChart className="w-5 h-5 mr-2 text-green-600" />
                        Cost by Operation
                      </h3>


                      {costData.breakdown.by_operation.length === 0 ? (
                        <p className="text-gray-500 text-center py-4">No operations this month</p>
                      ) : (
                        <div className="space-y-3">
                          {costData.breakdown.by_operation.map((op, index) => (
                            <div key={index} className="flex items-center justify-between">
                              <div>
                                <p className="font-medium text-gray-900 capitalize">
                                  {op.operation.replace(/_/g, ' ')}
                                </p>
                                <p className="text-sm text-gray-600">
                                  {op.count} requests • {formatCurrency(op.avg_cost, 4)} avg
                                </p>
                              </div>
                              <div className="text-right">
                                <p className="font-semibold text-gray-900">
                                  {formatCurrency(op.total_cost)}
                                </p>
                                <p className="text-sm text-green-600">{op.percentage}%</p>
                              </div>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>


                    {/* By Model */}
                    <div className="bg-white border rounded-lg p-6">
                      <h3 className="font-semibold text-gray-900 mb-4 flex items-center">
                        <BarChart3 className="w-5 h-5 mr-2 text-green-600" />
                        Cost by Model
                      </h3>


                      {costData.breakdown.by_model.length === 0 ? (
                        <p className="text-gray-500 text-center py-4">No model usage this month</p>
                      ) : (
                        <div className="space-y-3">
                          {costData.breakdown.by_model.map((model, index) => (
                            <div key={index} className="flex items-center justify-between">
                              <div>
                                <p className="font-medium text-gray-900">{model.model}</p>
                                <p className="text-sm text-gray-600">
                                  {model.count} requests • {model.total_tokens.toLocaleString()} tokens
                                </p>
                              </div>
                              <div className="text-right">
                                <p className="font-semibold text-gray-900">
                                  {formatCurrency(model.total_cost)}
                                </p>
                                <p className="text-sm text-blue-600">
                                  {formatCurrency(model.avg_cost, 4)} avg
                                </p>
                              </div>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>


                  {/* Daily Usage Chart */}
                  {costData.breakdown.daily_usage.length > 0 && (
                    <div className="bg-white border rounded-lg p-6">
                      <h3 className="font-semibold text-gray-900 mb-4">Daily Usage Trend</h3>
                      <div className="space-y-2">
                        {costData.breakdown.daily_usage.slice(-7).map((day, index) => (
                          <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
                            <span className="text-sm text-gray-600">{day.date}</span>
                            <div className="flex items-center space-x-4">
                              <span className="text-sm font-medium">{formatCurrency(day.cost)}</span>
                              <span className="text-xs text-gray-500">{day.requests} requests</span>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </>
              ) : (
                <div className="text-center py-12">
                  <DollarSign className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-600">No cost data available</p>
                </div>
              )}
            </div>
          )}


          {/* Budget Management Tab */}
          {activeTab === 'budget' && (
            <div className="space-y-6">
              <div className="bg-white border rounded-lg p-6">
                <h3 className="font-semibold text-gray-900 mb-4">Budget Configuration</h3>


                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Monthly Budget ($)
                    </label>
                    <input
                      type="number"
                      value={budgetSettings.monthly_budget}
                      onChange={(e) => setBudgetSettings({...budgetSettings, monthly_budget: parseFloat(e.target.value)})}
                      min="0"
                      step="0.01"
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
                    />
                  </div>


                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Warning Threshold (%)
                    </label>
                    <input
                      type="number"
                      value={Math.round(budgetSettings.warning_threshold * 100)}
                      onChange={(e) => setBudgetSettings({...budgetSettings, warning_threshold: parseInt(e.target.value) / 100})}
                      min="0"
                      max="100"
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
                    />
                  </div>


                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Critical Threshold (%)
                    </label>
                    <input
                      type="number"
                      value={Math.round(budgetSettings.critical_threshold * 100)}
                      onChange={(e) => setBudgetSettings({...budgetSettings, critical_threshold: parseInt(e.target.value) / 100})}
                      min="0"
                      max="100"
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
                    />
                  </div>
                </div>


                <div className="mt-6">
                  <button
                    onClick={updateBudget}
                    className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200"
                  >
                    Update Budget Settings
                  </button>
                </div>
              </div>


              {costData && (
                <div className="bg-white border rounded-lg p-6">
                  <h3 className="font-semibold text-gray-900 mb-4">Current Budget Status</h3>


                  {/* Budget Progress Bar */}
                  <div className="mb-4">
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm font-medium text-gray-700">Budget Usage</span>
                      <span className="text-sm text-gray-600">
                        {formatCurrency(costData.budget_status.current_cost)} / {formatCurrency(costData.budget_status.monthly_budget)}
                      </span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-3">
                      <div
                        className={`h-3 rounded-full transition-all duration-300 ${
                          parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'bg-red-500' :
                          parseFloat(costData.budget_status.budget_used_percentage) >= 80 ? 'bg-yellow-500' : 'bg-green-500'
                        }`}
                        style={{ width: `${Math.min(parseFloat(costData.budget_status.budget_used_percentage), 100)}%` }}
                      ></div>
                    </div>
                    <div className="flex justify-between text-xs text-gray-500 mt-1">
                      <span>0%</span>
                      <span className="font-medium">{costData.budget_status.budget_used_percentage}%</span>
                      <span>100%</span>
                    </div>
                  </div>


                  {/* Budget Alerts */}
                  {parseFloat(costData.budget_status.budget_used_percentage) >= 80 && (
                    <div className={`p-4 rounded-lg ${
                      parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'bg-red-50 border border-red-200' :
                      'bg-yellow-50 border border-yellow-200'
                    }`}>
                      <div className="flex items-center">
                        <AlertTriangle className={`w-5 h-5 mr-2 ${
                          parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'text-red-600' : 'text-yellow-600'
                        }`} />
                        <p className={`font-medium ${
                          parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'text-red-800' : 'text-yellow-800'
                        }`}>
                          {parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'Critical Budget Alert' : 'Budget Warning'}
                        </p>
                      </div>
                      <p className={`text-sm mt-1 ${
                        parseFloat(costData.budget_status.budget_used_percentage) >= 95 ? 'text-red-700' : 'text-yellow-700'
                      }`}>
                        You've used {costData.budget_status.budget_used_percentage}% of your monthly budget with {costData.budget_status.days_remaining} days remaining.
                      </p>
                    </div>
                  )}
                </div>
              )}
            </div>
          )}


          {/* Optimization Tab */}
          {activeTab === 'optimization' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h3 className="font-semibold text-gray-900">Cost Optimization Suggestions</h3>
                <button
                  onClick={loadOptimization}
                  className="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors duration-200"
                >
                  Refresh Suggestions
                </button>
              </div>


              {optimization && optimization.suggestions.length === 0 ? (
                <div className="text-center py-12">
                  <TrendingUp className="w-16 h-16 text-green-500 mx-auto mb-4" />
                  <h4 className="text-lg font-semibold text-gray-700 mb-2">
                    Excellent Cost Efficiency! 🎉
                  </h4>
                  <p className="text-gray-600">
                    No optimization suggestions at this time. Your costs are well-managed.
                  </p>
                </div>
              ) : optimization ? (
                <>
                  {/* Optimization Summary */}
                  <div className="bg-green-50 rounded-lg p-6">
                    <h4 className="font-medium text-green-900 mb-2">Optimization Potential</h4>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div>
                        <p className="text-sm text-green-600">Total Suggestions</p>
                        <p className="text-2xl font-bold text-green-900">{optimization.summary.total_suggestions}</p>
                      </div>
                      <div>
                        <p className="text-sm text-green-600">Potential Savings</p>
                        <p className="text-2xl font-bold text-green-900">
                          {formatCurrency(optimization.summary.total_potential_savings)}
                        </p>
                      </div>
                      <div>
                        <p className="text-sm text-green-600">Monthly Savings</p>
                        <p className="text-2xl font-bold text-green-900">{optimization.summary.monthly_savings_percentage}%</p>
                      </div>
                    </div>
                  </div>


                  {/* Suggestions List */}
                  <div className="space-y-4">
                    {optimization.suggestions.map((suggestion, index) => (
                      <div key={index} className="bg-white border rounded-lg p-6">
                        <div className="flex items-start space-x-4">
                          <div className={`w-3 h-3 rounded-full mt-1 ${getPriorityColor(suggestion.priority)}`}></div>
                          <div className="flex-1">
                            <div className="flex items-center justify-between mb-2">
                              <h4 className="font-medium text-gray-900">{suggestion.title}</h4>
                              <div className="flex items-center space-x-2">
                                <span className={`px-2 py-1 rounded text-xs font-medium ${
                                  suggestion.priority === 'high' ? 'bg-red-100 text-red-700' :
                                  suggestion.priority === 'medium' ? 'bg-yellow-100 text-yellow-700' :
                                  'bg-green-100 text-green-700'
                                }`}>
                                  {suggestion.priority.toUpperCase()}
                                </span>
                                <span className="text-lg font-bold text-green-600">
                                  {formatCurrency(suggestion.potential_savings)}
                                </span>
                              </div>
                            </div>
                            <p className="text-gray-600 mb-3">{suggestion.description}</p>
                            <div className="flex items-center justify-between">
                              <span className="text-sm text-gray-500 capitalize">
                                Type: {suggestion.type.replace(/_/g, ' ')}
                              </span>
                              <span className="text-sm font-medium text-blue-600">
                                Action: {suggestion.action}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </>
              ) : (
                <div className="text-center py-12">
                  <div className="animate-spin w-8 h-8 border-4 border-green-500 border-t-transparent rounded-full mx-auto mb-4"></div>
                  <p className="text-gray-600">Loading optimization suggestions...</p>
                </div>
              )}
            </div>
          )}


          {/* History Tab */}
          {activeTab === 'history' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h3 className="font-semibold text-gray-900">Cost History & Analytics</h3>
                <button
                  onClick={loadHistory}
                  className="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors duration-200"
                >
                  Refresh History
                </button>
              </div>


              {history ? (
                <>
                  {/* History Summary */}
                  <div className="bg-gray-50 rounded-lg p-6">
                    <h4 className="font-medium text-gray-900 mb-4">Historical Summary</h4>
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                      <div>
                        <p className="text-sm text-gray-600">Total Months</p>
                        <p className="text-xl font-bold text-gray-900">{history.summary.total_months}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-600">Total Cost</p>
                        <p className="text-xl font-bold text-gray-900">
                          {formatCurrency(history.summary.total_cost)}
                        </p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-600">Total Requests</p>
                        <p className="text-xl font-bold text-gray-900">
                          {history.summary.total_requests.toLocaleString()}
                        </p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-600">Avg Monthly Cost</p>
                        <p className="text-xl font-bold text-gray-900">
                          {formatCurrency(history.summary.avg_monthly_cost)}
                        </p>
                      </div>
                    </div>
                  </div>


                  {/* Monthly Breakdown */}
                  <div className="bg-white border rounded-lg p-6">
                    <h4 className="font-medium text-gray-900 mb-4">Monthly Breakdown</h4>
                    <div className="space-y-3">
                      {history.history.map((month, index) => (
                        <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                          <div>
                            <p className="font-medium text-gray-900">{month.month}</p>
                            <p className="text-sm text-gray-600">
                              {month.total_requests.toLocaleString()} requests • {formatCurrency(month.avg_cost_per_request, 4)} avg
                            </p>
                          </div>
                          <div className="text-right">
                            <p className="font-semibold text-gray-900">
                              {formatCurrency(month.total_cost)}
                            </p>
                            <p className="text-sm text-green-600">{month.budget_percentage}% of budget</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </>
              ) : (
                <div className="text-center py-12">
                  <Calendar className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-600">No historical data available</p>
                </div>
              )}
            </div>
          )}


          {/* User Analysis Tab */}
          {activeTab === 'users' && (
            <div className="space-y-6">
              <div className="flex justify-between items-center">
                <h3 className="font-semibold text-gray-900">User Cost Analysis</h3>
                <button
                  onClick={loadUserCosts}
                  className="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors duration-200"
                >
                  Refresh Analysis
                </button>
              </div>


              {userCosts ? (
                <>
                  {/* User Summary */}
                  <div className="bg-gray-50 rounded-lg p-6">
                    <h4 className="font-medium text-gray-900 mb-4">User Summary</h4>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div>
                        <p className="text-sm text-gray-600">Total Users</p>
                        <p className="text-xl font-bold text-gray-900">{userCosts.summary.total_users}</p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-600">Top User Cost</p>
                        <p className="text-xl font-bold text-gray-900">
                          {formatCurrency(userCosts.summary.top_user_cost)}
                        </p>
                      </div>
                      <div>
                        <p className="text-sm text-gray-600">Avg Cost per User</p>
                        <p className="text-xl font-bold text-gray-900">
                          {formatCurrency(userCosts.summary.avg_cost_per_user)}
                        </p>
                      </div>
                    </div>
                  </div>


                  {/* User Breakdown */}
                  <div className="bg-white border rounded-lg p-6">
                    <h4 className="font-medium text-gray-900 mb-4">User Cost Breakdown</h4>


                    {userCosts.user_costs.length === 0 ? (
                      <p className="text-gray-500 text-center py-4">No user data this month</p>
                    ) : (
                      <div className="space-y-3 max-h-96 overflow-y-auto">
                        {userCosts.user_costs.map((user, index) => (
                          <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                              <p className="font-medium text-gray-900">
                                {user.user_id === 'anonymous' ? '👤 Anonymous User' : `👤 ${user.user_id}`}
                              </p>
                              <p className="text-sm text-gray-600">
                                {user.total_requests} requests • {formatCurrency(user.avg_cost_per_request, 4)} avg
                              </p>
                              <div className="flex space-x-2 mt-1">
                                {Object.entries(user.operations).map(([op, count]) => (
                                  <span key={op} className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">
                                    {op}: {count}
                                  </span>
                                ))}
                              </div>
                            </div>
                            <div className="text-right">
                              <p className="font-semibold text-gray-900">
                                {formatCurrency(user.total_cost)}
                              </p>
                              <p className="text-sm text-green-600">{user.cost_percentage}% of total</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </>
              ) : (
                <div className="text-center py-12">
                  <Users className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-600">No user analysis data available</p>
                </div>
              )}
            </div>
          )}
        </div>


        {/* Footer */}
        <div className="p-4 border-t border-gray-200 bg-gray-50">
          <div className="flex justify-between items-center text-sm text-gray-600">
            <span>Last updated: {costData ? new Date(costData.timestamp).toLocaleString() : 'Never'}</span>
            <button
              onClick={() => {
                loadCostData();
                loadOptimization();
                loadHistory();
                loadUserCosts();
              }}
              disabled={isLoading}
              className="px-3 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200 disabled:opacity-50 transition-colors duration-200"
            >
              {isLoading ? 'Refreshing...' : 'Refresh All Data'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}


export default CostManagement;

Step 3B: Adding Cost Management to Navigation

Section titled “Step 3B: Adding Cost Management to Navigation”

Update your src/App.jsx to include the cost management component:

// Add to your existing imports
import CostManagement from "./CostManagement";
import { DollarSign } from "lucide-react";


// Add cost management button after your performance tab:
<button
  onClick={() => setCurrentView("costs")}
  className={`px-3 py-2 rounded-lg flex items-center space-x-2 transition-all duration-200 whitespace-nowrap ${
    currentView === "costs"
      ? "bg-green-100 text-green-700 shadow-sm"
      : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
  }`}
>
  <DollarSign className="w-4 h-4" />
  <span>Costs</span>
</button>


// Add to your main content section:
{currentView === "costs" && <CostManagement />}

🧪 Testing Your Cost Management System

Section titled “🧪 Testing Your Cost Management System”

Let’s test your cost management system step by step.

Step 1: Backend Cost Test

Section titled “Step 1: Backend Cost Test”

Test cost dashboard:

Terminal window
# Test the cost dashboard endpoint
curl http://localhost:8000/api/costs/dashboard

Test budget management:

Terminal window
# Update budget settings
curl -X POST http://localhost:8000/api/costs/budget \
  -H "Content-Type: application/json" \
  -d '{"monthly_budget": 150, "warning_threshold": 0.75}'

Step 2: Cost Tracking Test

Section titled “Step 2: Cost Tracking Test”

Make API calls to generate cost data:

Terminal window
# Make some chat requests to generate costs
curl -X POST http://localhost:8000/api/chat \
  -H "Content-Type: application/json" \
  -d '{"message": "Hello", "model": "gpt-4"}'


# Check cost tracking
curl http://localhost:8000/api/costs/dashboard

Step 3: Full Application Test

Section titled “Step 3: Full Application Test”

Start both servers and test the complete cost management flow:

  1. Navigate to Costs → Click the “Costs” tab
  2. Monitor budget status → View current spending and budget usage
  3. Analyze cost breakdowns → Review costs by operation and model
  4. Update budget settings → Modify monthly budget and thresholds
  5. Review optimization suggestions → Get recommendations for cost reduction
  6. Examine cost history → Analyze spending trends over time
  7. Analyze user costs → Review per-user cost breakdowns

✅ What You Built

Section titled “✅ What You Built”

Congratulations! You’ve implemented comprehensive cost management:

  • ✅ Real-time cost tracking with detailed API usage monitoring and cost calculation
  • ✅ Budget management with automated alerts and threshold enforcement
  • ✅ Cost analytics with breakdowns by operation, model, user, and time period
  • ✅ Predictive modeling with monthly cost forecasting based on usage trends
  • ✅ Optimization suggestions with automated recommendations for cost reduction
  • ✅ Historical analysis with cost trends and pattern identification

Your Module 3 cost management includes:

  • Content moderation - Detect harmful content
  • Safety implementation - Comprehensive protection systems
  • Performance optimization - Maximize speed and efficiency
  • Cost management (new) - Monitor, control, and optimize expenses
  • Complete financial visibility with real-time cost tracking
  • Automated budget controls with graduated alerts and enforcement
  • Intelligent optimization with AI-driven cost reduction suggestions

Cost management benefits achieved:

  • Budget predictability with accurate monthly forecasting
  • Cost optimization with potential savings identification
  • Usage insights with detailed breakdowns and analytics
  • Financial protection with automated budget alerts and controls
  • ROI maximization through intelligent cost optimization

Your OpenAI application now has enterprise-grade cost management with complete financial control and optimization! 💰

<function_calls> [{“content”: “Create Cost Management guide with usage monitoring and budget controls”, “status”: “completed”, “priority”: “high”, “id”: “1”}]