Merge branch 'main' into dependabot/npm_and_yarn/npm-dependencies-3c4bcd6eae

Author: rajbos

.github/CODEOWNERS

@@ -0,0 +1,14 @@
+# CODEOWNERS file for github-copilot-premium-reqs-usage
+#
+# This file defines code ownership for the repository.
+# Code owners are automatically requested for review when someone opens a pull request that modifies code that they own.
+#
+# More info: https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
+
+# Global rule - all files are owned by the main contributors
+* @rajbos
+
+# Specific rules can be added below for different paths if needed
+# Example:
+# /src/ @rajbos
+# /docs/ @rajbos

.github/workflows/ci.yml

@@ -0,0 +1,79 @@
+name: CI Build
+
+on:
+  # Trigger on all pull requests to validate builds
+  pull_request:
+    branches: [ main ]
+    paths-ignore:
+      - '**.md'
+      - 'LICENSE'
+      - 'SECURITY.md'
+  
+  # Trigger on pushes to branches (but not main, which is handled by deploy workflow)
+  push:
+    branches-ignore: [ main ]
+    paths-ignore:
+      - '**.md'
+      - 'LICENSE'
+      - 'SECURITY.md'
+
+# Allow only one concurrent CI run per branch/PR
+concurrency:
+  group: "ci-${{ github.head_ref || github.ref }}"
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  # Build validation job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: 'npm'
+      
+      - name: Install dependencies
+        run: npm install
+      
+      - name: Lint code
+        run: npm run lint
+      
+      - name: Run tests
+        run: npm run test:run
+      
+      - name: Build application
+        run: npm run build
+      
+      - name: Build for GitHub Pages
+        run: npm run build:pages
+        
+      - name: Validate build outputs
+        run: |
+          echo "Validating standard build..."
+          if [ ! -f "dist/index.html" ]; then
+            echo "❌ Standard build failed: dist/index.html not found"
+            exit 1
+          fi
+          echo "✅ Standard build output validated"
+          
+          echo "Validating GitHub Pages build..."
+          if [ ! -f "dist/index.html" ]; then
+            echo "❌ GitHub Pages build failed: dist/index.html not found"
+            exit 1
+          fi
+          echo "✅ GitHub Pages build output validated"
+      
+      - name: Report build success
+        run: |
+          echo "🎉 CI Build completed successfully!"
+          echo "✅ Linting passed (with warnings allowed)"
+          echo "✅ All $( npm run test:run 2>&1 | grep -o '[0-9]\+ passed' | head -1 ) tests passed"
+          echo "✅ Standard build completed"
+          echo "✅ GitHub Pages build completed"

eslint.config.js

@@ -0,0 +1,31 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      // Make ESLint more lenient for existing codebase
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+)

package-lock.json

@@ -24,6 +24,7 @@ import {
   PowerUserDailyBreakdown,
   ExceededRequestDetail,
   ProjectedUserData,
+  MonthOption,
   aggregateDataByDay, 
   parseCSV,
   getModelUsageSummary,
@@ -40,12 +41,18 @@ import {
   getTotalRequestsForUsersExceedingQuota,
   getProjectedUsersExceedingQuota,
   getProjectedUsersExceedingQuotaDetails,
+  getAvailableMonths,
+  filterDataByMonth,
   EXCESS_REQUEST_COST
 } from "@/lib/utils";
+import { MonthSelector } from "@/components/MonthSelector";
 
 function App() {
   const [showPrivacyBanner, setShowPrivacyBanner] = useState(true);
   const [data, setData] = useState<CopilotUsageData[] | null>(null);
+  const [rawData, setRawData] = useState<CopilotUsageData[] | null>(null); // Store original unfiltered data
+  const [availableMonths, setAvailableMonths] = useState<MonthOption[]>([]);
+  const [selectedMonth, setSelectedMonth] = useState<string>('');
   const [aggregatedData, setAggregatedData] = useState<AggregatedData[]>([]);
   const [uniqueModels, setUniqueModels] = useState<string[]>([]);
   const [modelSummary, setModelSummary] = useState<ModelUsageSummary[]>([]);
@@ -81,6 +88,67 @@ function App() {
       setProjectedUsersData(projectedDetails);
     }
   }, [selectedPlan, data]);
+
+  // Reprocess data when month selection changes
+  useEffect(() => {
+    if (rawData && selectedMonth) {
+      processDataForMonth(rawData, selectedMonth);
+    }
+  }, [selectedMonth, rawData, selectedPlan]);
+
+  /**
+   * Process data for a specific month and update all derived state
+   * This function aggregates and processes data for the selected month only
+   */
+  const processDataForMonth = useCallback((rawData: CopilotUsageData[], month: string) => {
+    // Filter data by selected month
+    const filteredData = filterDataByMonth(rawData, month);
+    setData(filteredData);
+
+    // Get unique models from filtered data
+    const models = Array.from(new Set(filteredData.map(item => item.model)));
+    setUniqueModels(models);
+    
+    // Aggregate data by day and model for the selected month
+    const aggregated = aggregateDataByDay(filteredData);
+    setAggregatedData(aggregated);
+    
+    // Get model usage summary for the selected month
+    const summary = getModelUsageSummary(filteredData);
+    setModelSummary(summary);
+    
+    // Get daily model data for bar chart for the selected month
+    const dailyData = getDailyModelData(filteredData);
+    setDailyModelData(dailyData);
+    
+    // Get power users data for the selected month
+    const powerUsers = getPowerUsers(filteredData);
+    setPowerUserSummary(powerUsers);
+    
+    // Get power user daily breakdown for the stacked bar chart for the selected month
+    const powerUserNames = powerUsers.powerUsers.map(user => user.user);
+    const powerUserBreakdown = getPowerUserDailyBreakdown(filteredData, powerUserNames);
+    setPowerUserDailyBreakdown(powerUserBreakdown);
+    
+    // Get count of users exceeding quota for top bar display for the selected month
+    const exceedingUsersCount = getUniqueUsersExceedingQuota(filteredData, selectedPlan);
+    setUsersExceedingQuota(exceedingUsersCount);
+    
+    // Get projected count of users who will exceed quota by month-end for the selected month
+    const projectedExceedingUsersCount = getProjectedUsersExceedingQuota(filteredData, selectedPlan);
+    setProjectedUsersExceedingQuota(projectedExceedingUsersCount);
+    
+    // Get projected users details for the selected month
+    const projectedDetails = getProjectedUsersExceedingQuotaDetails(filteredData, selectedPlan);
+    setProjectedUsersData(projectedDetails);
+    
+    // Get the last date available in the filtered CSV for the selected month
+    const lastDate = getLastDateFromData(filteredData);
+    setLastDateAvailable(lastDate);
+    
+    // Reset selected power user when month changes
+    setSelectedPowerUser(null);
+  }, [selectedPlan]);
 
   const handlePowerUserSelect = useCallback((userName: string | null) => {
     setSelectedPowerUser(userName);
@@ -136,54 +204,25 @@ function App() {
         }
 
         const parsedData = parseCSV(csvContent);
-        setData(parsedData);
-        
-        // Get unique models
-        const models = Array.from(new Set(parsedData.map(item => item.model)));
-        setUniqueModels(models);
-        
-        // Aggregate data by day and model
-        const aggregated = aggregateDataByDay(parsedData);
-        setAggregatedData(aggregated);
-        
-        // Get model usage summary
-        const summary = getModelUsageSummary(parsedData);
-        setModelSummary(summary);
-        
-        // Get daily model data for bar chart
-        const dailyData = getDailyModelData(parsedData);
-        setDailyModelData(dailyData);
-        
-        // Get power users data
-        const powerUsers = getPowerUsers(parsedData);
-        setPowerUserSummary(powerUsers);
-        
-        // Get power user daily breakdown for the stacked bar chart
-        const powerUserNames = powerUsers.powerUsers.map(user => user.user);
-        const powerUserBreakdown = getPowerUserDailyBreakdown(parsedData, powerUserNames);
-        setPowerUserDailyBreakdown(powerUserBreakdown);
 
-        // Get count of users exceeding quota for top bar display
-        const exceedingUsersCount = getUniqueUsersExceedingQuota(parsedData, selectedPlan);
-        setUsersExceedingQuota(exceedingUsersCount);
+        // Store raw unfiltered data
+        setRawData(parsedData);
 
-        // Get projected count of users who will exceed quota by month-end
-        const projectedExceedingUsersCount = getProjectedUsersExceedingQuota(parsedData, selectedPlan);
-        setProjectedUsersExceedingQuota(projectedExceedingUsersCount);
+        // Extract available months (current and previous month)
+        const months = getAvailableMonths(parsedData);
+        setAvailableMonths(months);
 
-        // Get projected users details
-        const projectedDetails = getProjectedUsersExceedingQuotaDetails(parsedData, selectedPlan);
-        setProjectedUsersData(projectedDetails);
+        // Auto-select current month if available, otherwise select the first (most recent) month
+        const defaultMonth = months.find(m => m.isCurrentMonth)?.value || months[0]?.value || '';
+        setSelectedMonth(defaultMonth);
 
-        // Get the last date available in the CSV
-        const lastDate = getLastDateFromData(parsedData);
-        setLastDateAvailable(lastDate);
-        
-        // Reset selected power user when new data is loaded
-        setSelectedPowerUser(null);
+        // Process data for the default selected month
+        if (defaultMonth) {
+          processDataForMonth(parsedData, defaultMonth);
+        }
 
         setIsProcessing(false);
-        toast.success(`Loaded ${parsedData.length} records successfully`);
+        toast.success(`Loaded ${parsedData.length.toLocaleString()} records successfully`);
       } catch (error) {
         // Provide user-friendly error messages  
         let errorMessage = "Failed to parse CSV file. Please check the format.";
@@ -217,6 +256,9 @@ function App() {
         setIsProcessing(false);
         toast.error(errorMessage);
         setData(null);
+        setRawData(null);
+        setAvailableMonths([]);
+        setSelectedMonth('');
         setAggregatedData([]);
         setModelSummary([]);
         setDailyModelData([]);
@@ -229,7 +271,7 @@ function App() {
     };
 
     reader.readAsText(file);
-  }, []);
+  }, [processDataForMonth]);
 
   const handleFileUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     if (isProcessing) return;
@@ -557,7 +599,20 @@ function App() {
       {data && data.length > 0 && (
         <div className="space-y-8">
           <div>
-            <h2 className="text-2xl font-semibold mb-2">Usage Statistics</h2>
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h2 className="text-2xl font-semibold mb-2">Usage Statistics</h2>
+              </div>
+              <div className="flex items-center gap-4">
+                <MonthSelector
+                  availableMonths={availableMonths}
+                  selectedMonth={selectedMonth}
+                  onMonthChange={setSelectedMonth}
+                  disabled={isProcessing}
+                  data={rawData}
+                />
+              </div>
+            </div>
             <Separator className="mb-4" />
             <div className="mb-4">
               <Card>
@@ -588,37 +643,37 @@ function App() {
                       </span>
                     </div>
                     <div 
-                      className="inline-flex items-center gap-1.5 cursor-pointer hover:bg-orange-50 dark:hover:bg-orange-900/20 transition-all duration-200 rounded-md px-2 py-1 group border border-orange-200 hover:border-orange-300 hover:shadow-sm bg-orange-25 dark:bg-orange-950/10"
+                      className="xebia-action-button"
                       onClick={() => setShowProjectedUsersDialog(true)}
                       title="Click to see the users projected to exceed quota"
                     >
                       <span className="text-sm text-muted-foreground">Projected to Exceed by Month-End:</span>
-                      <span className="text-lg font-bold text-orange-600 group-hover:text-orange-700 transition-colors">
+                      <span className="value">
                         {projectedUsersExceedingQuota.toLocaleString()}
                       </span>
-                      <ChevronRight className="h-3 w-3 text-orange-600 opacity-60 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all duration-200" />
+                      <ChevronRight className="icon" />
                     </div>
                     <div 
-                      className="inline-flex items-center gap-1.5 cursor-pointer hover:bg-orange-50 dark:hover:bg-orange-900/20 transition-all duration-200 rounded-md px-2 py-1 group border border-orange-200 hover:border-orange-300 hover:shadow-sm bg-orange-25 dark:bg-orange-950/10"
+                      className="xebia-action-button"
                       onClick={() => setShowPotentialCostDetails(true)}
                       title="Click to see cost breakdown"
                     >
                       <span className="text-sm text-muted-foreground">Potential Cost:</span>
-                      <span className="text-lg font-bold text-orange-600 group-hover:text-orange-700 transition-colors">
+                      <span className="value">
                         ${(data.reduce((sum, item) => sum + item.requestsUsed, 0) * EXCESS_REQUEST_COST).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}
                       </span>
-                      <ChevronRight className="h-3 w-3 text-orange-600 opacity-60 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all duration-200" />
+                      <ChevronRight className="icon" />
                     </div>
                     {powerUserSummary && (
                       <Sheet>
                         <SheetTrigger asChild>
                           <div 
-                            className="inline-flex items-center gap-1.5 cursor-pointer hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all duration-200 rounded-md px-2 py-1 group border border-blue-200 hover:border-blue-300 hover:shadow-sm bg-blue-25 dark:bg-blue-950/10"
+                            className="xebia-action-button"
                             title="Click to view power users analysis"
                           >
                             <span className="text-sm text-muted-foreground">Power Users:</span>
-                            <span className="text-lg font-bold text-blue-600 group-hover:text-blue-700 transition-colors">{powerUserSummary.totalPowerUsers}</span>
-                            <ChevronRight className="h-3 w-3 text-blue-600 opacity-60 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all duration-200" />
+                            <span className="value">{powerUserSummary.totalPowerUsers}</span>
+                            <ChevronRight className="icon" />
                           </div>
                         </SheetTrigger>
                             <SheetContent side="bottom" className="h-[90vh] max-w-[90%] mx-auto overflow-y-auto">