Next Admin Page

Usar cuando la página:

• Solo lee datos de Supabase (sin localStorage directo)
• No usa librerías client-only
• Agrega mounted guard para evitar hydration

Procedimiento de creación

1. Definir el nombre del archivo siguiendo el patrón kebab-case: pages/admin/nombre-pagina.js
2. Si la página tiene estilos propios, crear styles/nombre-pagina.module.css
3. Elegir el patrón A o B según si hay riesgo de hydration
4. Copiar el template correspondiente desde ./assets/
5. Reemplazar los placeholders {{NOMBRE_PAGINA}} y {{DESCRIPCION}}
6. Agregar la importación de utilidades Supabase desde ../../utils/supabase*.js
7. Añadir el link en el sidebar si corresponde → ver next-app/utils/sidebar.js

Reglas críticas

Imports más usados

// Layout y autenticación
import Layout from '../../components/Layout'
import withAdminAuth from '../../components/withAdminAuth'

// React
import { useState, useEffect, useMemo, useCallback } from 'react'

// Next.js
import dynamic from 'next/dynamic'
import Link from 'next/link'
import { useRouter } from 'next/router'

// Utilidades del proyecto
import { formatCurrency, formatDate } from '../../utils/catalogUtils'

// Acceso a datos (elegir según entidad)
import { getAllProductos, createProducto, updateProducto } from '../../utils/supabaseProducts'
import { getMovimientos } from '../../utils/supabaseFinanzas'
import { getPedidosCatalogo } from '../../utils/supabasePedidos'

Templates

• Patrón A — dynamic + ssr:false
• Patrón B — export directo con mounted guard
• CSS Module base

Checklist antes de terminar

• El archivo está en next-app/pages/admin/
• Tiene withAdminAuth en el export default
• El loadData tiene try/catch con fallback a localStorage
• El finally llama a setLoading(false)
• Si usa localStorage o librerías client-only → tiene dynamic + ssr: false
• El CSS Module (si existe) está en next-app/styles/*.module.css
• No usa new Date() fuera de useEffect