Implement plan selection dropdown and simplify table display

Co-authored-by: rajbos <6085745+rajbos@users.noreply.github.com>

Author: Copilot

src/App.tsx

@@ -11,6 +11,7 @@ import { Separator } from "@/components/ui/separator";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { 
   AggregatedData, 
   CopilotUsageData, 
@@ -22,7 +23,8 @@ import {
   getModelUsageSummary,
   getDailyModelData,
   getPowerUsers,
-  getPowerUserDailyData
+  getPowerUserDailyData,
+  COPILOT_PLANS
 } from "@/lib/utils";
 
 function App() {
@@ -33,6 +35,7 @@ function App() {
   const [dailyModelData, setDailyModelData] = useState<DailyModelData[]>([]);
   const [powerUserSummary, setPowerUserSummary] = useState<PowerUserSummary | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [selectedPlan, setSelectedPlan] = useState<string>(COPILOT_PLANS.BUSINESS); // Default to Business
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const processFile = useCallback((file: File) => {
@@ -267,6 +270,27 @@ function App() {
     }, {} as Record<string, string>);
   }, [uniqueModels]);
 
+  // Helper function to get plan limit based on selected plan
+  const getPlanLimit = useCallback((item: ModelUsageSummary) => {
+    let limit: number;
+    switch (selectedPlan) {
+      case COPILOT_PLANS.INDIVIDUAL:
+        limit = item.individualPlanLimit;
+        break;
+      case COPILOT_PLANS.BUSINESS:
+        limit = item.businessPlanLimit;
+        break;
+      case COPILOT_PLANS.ENTERPRISE:
+        limit = item.enterprisePlanLimit;
+        break;
+      default:
+        limit = item.businessPlanLimit;
+    }
+    
+    // Handle infinity (unlimited) for 0x multiplier models
+    return limit === Infinity ? "Unlimited" : limit.toLocaleString();
+  }, [selectedPlan]);
+
   return (
     <div className="container max-w-7xl mx-auto py-8 px-4 min-h-screen">
       <header className="mb-8">
@@ -494,7 +518,22 @@ function App() {
             {/* Model Usage Table */}
             <div className="mb-6">
               <Card className="p-5">
-                <h3 className="text-md font-medium mb-3">Requests per Model</h3>
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-md font-medium">Requests per Model</h3>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-muted-foreground">Plan Type:</span>
+                    <Select value={selectedPlan} onValueChange={setSelectedPlan}>
+                      <SelectTrigger className="w-32">
+                        <SelectValue placeholder="Select plan" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value={COPILOT_PLANS.INDIVIDUAL}>Individual</SelectItem>
+                        <SelectItem value={COPILOT_PLANS.BUSINESS}>Business</SelectItem>
+                        <SelectItem value={COPILOT_PLANS.ENTERPRISE}>Enterprise</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
                 <div className="overflow-auto max-h-60">
                   <Table>
                     <TableHeader>
@@ -504,8 +543,7 @@ function App() {
                         <TableHead className="text-right">Compliant</TableHead>
                         <TableHead className="text-right">Exceeding</TableHead>
                         <TableHead className="text-right">Multiplier</TableHead>
-                        <TableHead className="text-right">Individual Limit</TableHead>
-                        <TableHead className="text-right">Business/Enterprise Limit</TableHead>
+                        <TableHead className="text-right">Plan Limit</TableHead>
                         <TableHead className="text-right">Excess Cost</TableHead>
                       </TableRow>
                     </TableHeader>
@@ -517,8 +555,7 @@ function App() {
                           <TableCell className="text-right">{item.compliantRequests.toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 0})}</TableCell>
                           <TableCell className="text-right">{item.exceedingRequests.toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 0})}</TableCell>
                           <TableCell className="text-right">{item.multiplier}x</TableCell>
-                          <TableCell className="text-right">{item.individualPlanLimit.toLocaleString()}</TableCell>
-                          <TableCell className="text-right">{item.businessPlanLimit.toLocaleString()}</TableCell>
+                          <TableCell className="text-right">{getPlanLimit(item)}</TableCell>
                           <TableCell className="text-right">${item.excessCost.toFixed(2)}</TableCell>
                         </TableRow>
                       ))}