Fix CSV header validation whitespace handling and improve error reporting

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

Author: Copilot

src/App.tsx

@@ -81,10 +81,13 @@ function App() {
 
         toast.success(`Loaded ${parsedData.length} records successfully`);
       } catch (error) {
-        console.error("Error parsing CSV:", error);
+        // Provide user-friendly error messages  
         let errorMessage = "Failed to parse CSV file. Please check the format.";
 
         if (error instanceof Error) {
+          // Log detailed error information to console for debugging
+          console.error("CSV parsing error details:", error);
+          
           // Provide more specific error messages based on the error type
           if (error.message.includes("missing required columns")) {
             errorMessage = "Invalid CSV format: " + error.message;

src/lib/utils.ts

@@ -41,13 +41,30 @@ export function parseCSV(csv: string): CopilotUsageData[] {
     m.endsWith(',') 
       ? m.slice(0, -1).replace(/^"(.*)"$/, '$1') 
       : m.replace(/^"(.*)"$/, '$1')
-  );
+  ).filter(h => h.trim() !== '').map(h => h.trim()); // Filter empty strings and trim whitespace
 
   // Check if all expected headers are present (case-insensitive exact match)
   const missingHeaders = expectedHeaders.filter(expected => 
     !headers.some(header => header.toLowerCase() === expected.toLowerCase())
   );
 
+  // Log detailed header information for debugging
+  if (missingHeaders.length > 0) {
+    console.log('CSV Header validation failed:');
+    console.log('Expected headers:', expectedHeaders);
+    console.log('Found headers:', headers);
+    console.log('Missing headers:', missingHeaders);
+    headers.forEach((header, i) => {
+      const expectedHeader = expectedHeaders[i];
+      if (expectedHeader) {
+        const matches = header.toLowerCase() === expectedHeader.toLowerCase();
+        console.log(`  Column ${i + 1}: "${header}" ${matches ? '✅' : '❌'} (expected: "${expectedHeader}")`);
+      } else {
+        console.log(`  Column ${i + 1}: "${header}" (extra column)`);
+      }
+    });
+  }
+  
   if (missingHeaders.length > 0) {
     throw new Error(`CSV is missing required columns: ${missingHeaders.join(', ')}. Expected columns: ${expectedHeaders.join(', ')}`);
   }

src/test/csv-header-validation.test.ts

@@ -68,6 +68,24 @@ user1,2024-01-01T00:00:00Z,gpt-4,100,1.5,false`
     expect(() => parseCSV(csvMixedCase)).not.toThrow()
   })
 
+  it('should handle CSV with whitespace in headers', () => {
+    const csvWithWhitespace = `" Timestamp "," User "," Model "," Requests Used "," Exceeds Monthly Quota "," Total Monthly Quota "
+2024-01-01T00:00:00Z,user1,gpt-4,1.5,false,100`
+
+    expect(() => parseCSV(csvWithWhitespace)).not.toThrow()
+    
+    const result = parseCSV(csvWithWhitespace)
+    expect(result).toHaveLength(1)
+    expect(result[0]).toEqual({
+      timestamp: new Date('2024-01-01T00:00:00Z'),
+      user: 'user1',
+      model: 'gpt-4',
+      requestsUsed: 1.5,
+      exceedsQuota: false,
+      totalMonthlyQuota: '100'
+    })
+  })
+
   it('should validate data types correctly with valid headers', () => {
     const validCsv = `"Timestamp","User","Model","Requests Used","Exceeds Monthly Quota","Total Monthly Quota"
 2024-01-01T00:00:00Z,user1,gpt-4,1.5,false,100`