feat(admin): colapsar/expandir submissions + eliminar columna Tipo

app/admin/responses/page.tsx

@@ -1,4 +1,5 @@
 import { createClient } from '@supabase/supabase-js'
+import { ResponsesTable, type DisplayRow } from './responses-table'
 
 // Server Component sin auth — herramienta interna de diagnóstico (Etapa 3V-B).
 // Usa SUPABASE_SERVICE_ROLE_KEY: vive solo acá, server-side, nunca al cliente.
@@ -28,19 +29,6 @@ interface ResponseRow {
   answers: AnswerRow[]
 }
 
-interface FlatRow {
-  key: string
-  submissionNum: number
-  isFirstInGroup: boolean
-  submitted_at: string
-  qi_zone: string | null
-  qi_sector: string | null
-  code: string
-  prompt: string
-  type: string
-  value: unknown
-}
-
 function getSupabaseAdmin() {
   const url = process.env.NEXT_PUBLIC_SUPABASE_URL || 'https://placeholder.supabase.co'
   const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY || 'placeholder'
@@ -147,7 +135,7 @@ export default async function AdminResponsesPage() {
       : { count: 0 }
 
   // 4. Aplanar: una fila por answer, ordenadas por position dentro de cada submission
-  const rows: FlatRow[] = []
+  const rows: DisplayRow[] = []
   responses.forEach((response, idx) => {
     const answers = response.answers
       .filter((a) => questionMap.has(a.question_id))
@@ -158,17 +146,17 @@ export default async function AdminResponsesPage() {
 
     answers.forEach((a, ai) => {
       const q = questionMap.get(a.question_id)!
+      const isFirstInGroup = ai === 0
       rows.push({
         key: `${response.id}-${a.question_id}`,
         submissionNum: idx + 1,
-        isFirstInGroup: ai === 0,
-        submitted_at: response.submitted_at,
-        qi_zone: response.qi_zone,
-        qi_sector: response.qi_sector,
+        isFirstInGroup,
+        date: isFirstInGroup ? formatDate(response.submitted_at) : '',
         code: q.code,
-        prompt: q.prompt,
-        type: q.type,
-        value: a.value,
+        prompt: truncate(q.prompt),
+        rendered: renderValue(a.value, q.type),
+        zone: isFirstInGroup ? (response.qi_zone ?? '—') : '',
+        sector: isFirstInGroup ? (response.qi_sector ?? '—') : '',
       })
     })
   })
@@ -187,46 +175,7 @@ export default async function AdminResponsesPage() {
       </header>
 
       <div className="admin-table-wrapper">
-        <table className="admin-table">
-          <thead>
-            <tr>
-              <th>#</th>
-              <th>Fecha</th>
-              <th>Código</th>
-              <th>Pregunta</th>
-              <th>Tipo</th>
-              <th>Valor</th>
-              <th className="admin-col-optional">Departamento</th>
-              <th className="admin-col-optional">Sector</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((row) => {
-              const groupClass =
-                row.submissionNum % 2 === 0 ? 'admin-group-even' : 'admin-group-odd'
-              const trClass = row.isFirstInGroup ? `${groupClass} admin-group-start` : groupClass
-              const rendered = renderValue(row.value, row.type)
-              return (
-                <tr key={row.key} className={trClass}>
-                  <td>{row.submissionNum}</td>
-                  <td>{row.isFirstInGroup ? formatDate(row.submitted_at) : ''}</td>
-                  <td>{row.code}</td>
-                  <td className="admin-prompt">{truncate(row.prompt)}</td>
-                  <td><span className="admin-type-badge">{row.type}</span></td>
-                  <td>
-                    {rendered === null ? <span className="admin-nodata">sin dato</span> : rendered}
-                  </td>
-                  <td className="admin-col-optional">
-                    {row.isFirstInGroup ? (row.qi_zone ?? '—') : ''}
-                  </td>
-                  <td className="admin-col-optional">
-                    {row.isFirstInGroup ? (row.qi_sector ?? '—') : ''}
-                  </td>
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
+        <ResponsesTable rows={rows} />
         {rows.length === 0 && (
           <p className="admin-empty">Sin respuestas registradas todavía.</p>
         )}