fix(upload): address CodeRabbit findings — NaN guard, API status counts, XLSX key trim

- Guard parseInt against NaN for page/pageSize query params
- Add statusCounts aggregate query to history API and return in response
- Replace page-level statusCounts reduce with API-sourced state
- Add res.ok check in fetchHistory before parsing JSON
- Remove .xls from drop-zone accept attribute
- Switch column-mapper to index-based identification in handleRemap
- Catch JSON.parse error in commit route and return 400
- Trim XLSX row keys to match trimmed headers
- Use rowCount ?? 0 for accurate insert count (avoid inflating on conflict)

Author: William-Hill

codebenders-dashboard/app/admin/upload/history/page.tsx

@@ -45,6 +45,7 @@ export default function UploadHistoryPage() {
   const [total, setTotal] = useState(0)
   const [page, setPage] = useState(1)
   const [loading, setLoading] = useState(true)
+  const [statusCounts, setStatusCounts] = useState<Record<string, number>>({})
   const pageSize = 20
 
   const fetchHistory = useCallback(async (p: number) => {
@@ -53,11 +54,14 @@ export default function UploadHistoryPage() {
       const res = await fetch(
         `/api/admin/upload/history?page=${p}&pageSize=${pageSize}`
       )
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
       const data = await res.json()
       setEntries(data.data ?? [])
       setTotal(data.total ?? 0)
+      setStatusCounts(data.statusCounts ?? {})
     } catch {
       setEntries([])
+      setTotal(0)
     } finally {
       setLoading(false)
     }
@@ -69,14 +73,6 @@ export default function UploadHistoryPage() {
 
   const pageCount = Math.ceil(total / pageSize)
 
-  const statusCounts = entries.reduce(
-    (acc, e) => {
-      acc[e.status] = (acc[e.status] ?? 0) + 1
-      return acc
-    },
-    {} as Record<string, number>
-  )
-
   return (
     <div className="container mx-auto px-4 py-6 max-w-5xl">
       <div className="flex items-center justify-between mb-6">

codebenders-dashboard/app/api/admin/upload/commit/route.ts

@@ -31,7 +31,12 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: `Unknown schema: ${schemaId}` }, { status: 400 })
     }
 
-    const columnMapping: ColumnMapping[] = JSON.parse(mappingJson)
+    let columnMapping: ColumnMapping[]
+    try {
+      columnMapping = JSON.parse(mappingJson)
+    } catch {
+      return NextResponse.json({ error: "Invalid column mapping JSON" }, { status: 400 })
+    }
 
     const fileType = getFileType(file.name)
     if (!fileType) {
@@ -170,7 +175,7 @@ async function upsertRows(
            ON CONFLICT (${conflictClause}) DO NOTHING`
 
       const result = await pool.query(batchSql, batchParams)
-      inserted += result.rowCount ?? batchValues.length
+      inserted += result.rowCount ?? 0
     } catch (err) {
       // If batch fails, fall back to per-row to identify the bad row(s)
       for (let j = 0; j < batch.length; j++) {

codebenders-dashboard/app/api/admin/upload/history/route.ts

@@ -4,13 +4,13 @@ import { getPool } from "@/lib/db"
 export async function GET(request: NextRequest) {
   try {
     const { searchParams } = new URL(request.url)
-    const page = Math.max(1, parseInt(searchParams.get("page") ?? "1"))
-    const pageSize = Math.min(50, Math.max(1, parseInt(searchParams.get("pageSize") ?? "20")))
+    const page = Math.max(1, parseInt(searchParams.get("page") ?? "1") || 1)
+    const pageSize = Math.min(50, Math.max(1, parseInt(searchParams.get("pageSize") ?? "20") || 20))
     const offset = (page - 1) * pageSize
 
     const pool = getPool()
 
-    const [dataResult, countResult] = await Promise.all([
+    const [dataResult, countResult, statusResult] = await Promise.all([
       pool.query(
         `SELECT id, user_email, filename, file_type, rows_inserted, rows_skipped,
                 error_count, status, uploaded_at
@@ -20,9 +20,16 @@ export async function GET(request: NextRequest) {
         [pageSize, offset]
       ),
       pool.query(`SELECT COUNT(*)::int AS total FROM upload_history`),
+      pool.query(
+        `SELECT status, COUNT(*)::int AS count FROM upload_history GROUP BY status`
+      ),
     ])
 
     const total = countResult.rows[0].total
+    const statusCounts: Record<string, number> = {}
+    for (const row of statusResult.rows) {
+      statusCounts[row.status] = row.count
+    }
 
     return NextResponse.json({
       data: dataResult.rows.map((row) => ({
@@ -39,6 +46,7 @@ export async function GET(request: NextRequest) {
       total,
       page,
       pageSize,
+      statusCounts,
     })
   } catch (err) {
     console.error("Upload history error:", err)

codebenders-dashboard/components/upload/column-mapper.tsx

@@ -12,18 +12,18 @@ interface ColumnMapperProps {
 export function ColumnMapper({ columns, schema, onMappingChange }: ColumnMapperProps) {
   const [showAll, setShowAll] = useState(false)
 
-  const matched = columns.filter((c) => c.status === "matched")
-  const unmapped = columns.filter((c) => c.status === "unmapped")
+  const matchedCount = columns.filter((c) => c.status === "matched").length
+  const unmappedCount = columns.filter((c) => c.status === "unmapped").length
 
   const availableTargets = schema
     ? schema.columns
         .map((c) => c.name)
         .filter((name) => !columns.some((col) => col.mappedTo === name))
     : []
 
-  function handleRemap(header: string, newTarget: string | null) {
-    const updated = columns.map((col) =>
-      col.header === header
+  function handleRemap(index: number, newTarget: string | null) {
+    const updated = columns.map((col, i) =>
+      i === index
         ? { ...col, mappedTo: newTarget, status: (newTarget ? "matched" : "unmapped") as "matched" | "unmapped" }
         : col
     )
@@ -39,58 +39,62 @@ export function ColumnMapper({ columns, schema, onMappingChange }: ColumnMapperP
         <span>Status</span>
       </div>
 
-      {unmapped.map((col) => (
-        <div
-          key={col.header}
-          className="grid grid-cols-[1fr_24px_1fr_80px] gap-2 px-4 py-2 border-b bg-amber-50/50 items-center"
-        >
-          <code className="text-xs bg-muted px-1.5 py-0.5 rounded truncate">
-            {col.header}
-          </code>
-          <span className="text-muted-foreground">→</span>
-          <select
-            className="text-xs border border-amber-400 rounded px-2 py-1 bg-white"
-            value={col.mappedTo ?? ""}
-            onChange={(e) => handleRemap(col.header, e.target.value || null)}
+      {columns.map((col, idx) =>
+        col.status === "unmapped" ? (
+          <div
+            key={idx}
+            className="grid grid-cols-[1fr_24px_1fr_80px] gap-2 px-4 py-2 border-b bg-amber-50/50 items-center"
           >
-            <option value="">— select or skip —</option>
-            {availableTargets.map((t) => (
-              <option key={t} value={t}>{t}</option>
-            ))}
-          </select>
-          <span className="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded text-center">
-            unmapped
-          </span>
-        </div>
-      ))}
+            <code className="text-xs bg-muted px-1.5 py-0.5 rounded truncate">
+              {col.header}
+            </code>
+            <span className="text-muted-foreground">→</span>
+            <select
+              className="text-xs border border-amber-400 rounded px-2 py-1 bg-white"
+              value={col.mappedTo ?? ""}
+              onChange={(e) => handleRemap(idx, e.target.value || null)}
+            >
+              <option value="">— select or skip —</option>
+              {availableTargets.map((t) => (
+                <option key={t} value={t}>{t}</option>
+              ))}
+            </select>
+            <span className="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded text-center">
+              unmapped
+            </span>
+          </div>
+        ) : null
+      )}
 
-      {matched.length > 0 && !showAll && (
+      {matchedCount > 0 && !showAll && (
         <button
           className="w-full px-4 py-2 text-xs text-muted-foreground hover:bg-muted/50 text-center"
           onClick={() => setShowAll(true)}
         >
-          + {matched.length} matched columns (click to expand)
+          + {matchedCount} matched columns (click to expand)
         </button>
       )}
 
       {showAll &&
-        matched.map((col) => (
-          <div
-            key={col.header}
-            className="grid grid-cols-[1fr_24px_1fr_80px] gap-2 px-4 py-2 border-b items-center"
-          >
-            <code className="text-xs bg-muted px-1.5 py-0.5 rounded truncate">
-              {col.header}
-            </code>
-            <span className="text-muted-foreground">→</span>
-            <span className="text-xs text-green-700">{col.mappedTo}</span>
-            <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded text-center">
-              matched
-            </span>
-          </div>
-        ))}
+        columns.map((col, idx) =>
+          col.status === "matched" ? (
+            <div
+              key={idx}
+              className="grid grid-cols-[1fr_24px_1fr_80px] gap-2 px-4 py-2 border-b items-center"
+            >
+              <code className="text-xs bg-muted px-1.5 py-0.5 rounded truncate">
+                {col.header}
+              </code>
+              <span className="text-muted-foreground">→</span>
+              <span className="text-xs text-green-700">{col.mappedTo}</span>
+              <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded text-center">
+                matched
+              </span>
+            </div>
+          ) : null
+        )}
 
-      {showAll && matched.length > 0 && (
+      {showAll && matchedCount > 0 && (
         <button
           className="w-full px-4 py-2 text-xs text-muted-foreground hover:bg-muted/50 text-center"
           onClick={() => setShowAll(false)}

codebenders-dashboard/components/upload/drop-zone.tsx

@@ -72,7 +72,7 @@ export function DropZone({ onFile, disabled }: DropZoneProps) {
       <input
         ref={inputRef}
         type="file"
-        accept=".csv,.xlsx,.xls"
+        accept=".csv,.xlsx"
         className="hidden"
         onChange={handleInputChange}
       />

codebenders-dashboard/lib/upload-parser.ts

@@ -76,7 +76,14 @@ function parseXlsx(buffer: Buffer, maxRows?: number): Promise<ParseResult> {
       }
 
       const headers = Object.keys(jsonData[0]).map((h) => h.trim())
-      const rows = maxRows ? jsonData.slice(0, maxRows) : jsonData
+      const trimmedRows = jsonData.map((row) => {
+        const trimmed: Record<string, string> = {}
+        for (const [key, value] of Object.entries(row)) {
+          trimmed[key.trim()] = String(value)
+        }
+        return trimmed
+      })
+      const rows = maxRows ? trimmedRows.slice(0, maxRows) : trimmedRows
 
       resolve({ headers, rows, totalRows: jsonData.length })
     } catch (err) {