coreui-free-react-admin-template-main — React 后台模板

SHA-256: d2d0ffc0f3d38a3abc35a56f3020622206afb182f29b67fa0fa6764efe197ed4

2026-09-30T09:03:42.805Z

# UTEQ Smart Parking — Vehículos y propietarios (CRUD)

Consola administrativa construida con **React + Vite**, la plantilla **CoreUI Free React Admin Template** y **Supabase** como backend. Permite listar, buscar, paginar, **agregar**, **editar** y **eliminar** vehículos autorizados junto con los datos de sus propietarios.

Práctica de la asignatura *Aplicaciones Telemáticas Basadas en la Web* — carrera de Telemática, UTEQ.

![Vista de la aplicación](docs/screenshot-app.png)

## Funcionalidades

- Listado de vehículos y propietarios consultando Supabase.
- Búsqueda por placa, marca, modelo, color, propietario o correo.
- Paginación (10 registros por página).
- Indicador de carga y manejo de errores en el listado.
- **Agregar vehículo**: formulario con validación de placa, cédula, año, correo institucional y campos obligatorios.
- **Editar vehículo**: precarga los datos actuales, valida y actualiza en Supabase.
- **Eliminar vehículo**: pide confirmación antes de borrar el registro.
- Mensajes de éxito/error (toasts), botones deshabilitados durante las operaciones y diseño responsivo con componentes de CoreUI.

## Tecnologías

- React 19 + Vite
- CoreUI Free React Admin Template (`@coreui/react`, `@coreui/icons-react`)
- Supabase JS (`@supabase/supabase-js`)

## Configuración

### 1. Variables de entorno

Crea `.env.local` en la raíz del proyecto (no se sube al repositorio):

```dotenv
VITE_SUPABASE_URL=https://TU_PROYECTO.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=sb_publishable_TU_CLAVE
```

### 2. Scripts SQL

Ejecuta en el **SQL Editor** de Supabase, en este orden, sobre un proyecto nuevo:

1. [`sql/supabase_parqueadero_uteq.sql`](sql/supabase_parqueadero_uteq.sql) — crea las tablas (`vehiculos`, `puestos`, `registros_estacionamiento`), carga los datos y habilita **RLS de solo lectura** sobre `vehiculos` (columnas públicas, sin exponer cédula completa ni correo de Microsoft).
2. [`sql/supabase_crud_permisos.sql`](sql/supabase_crud_permisos.sql) — habilita **INSERT / UPDATE / DELETE** sobre `vehiculos` para el rol `anon`, necesarios para el CRUD de esta práctica (la práctica no incluye autenticación; ver nota de seguridad más abajo).

### 3. Instalar y correr

```bash
npm install
npm start
```

Abre `http://localhost:3000/#/parqueadero/vehiculos`.

## Estructura del proyecto (carpetas nuevas de esta práctica)

```text
coreui-free-react-admin-template-main/
├── sql/
│   ├── supabase_parqueadero_uteq.sql
│   └── supabase_crud_permisos.sql
├── docs/
│   └── screenshot-app.png
└── src/
    ├── lib/
    │   └── supabase.js              # cliente de Supabase
    ├── hooks/
    │   ├── useVehiculos.js          # listado (select)
    │   └── useVehiculoMutaciones.js # crear / actualizar / eliminar
    ├── views/
    │   └── parqueadero/
    │       ├── ListaVehiculos.jsx        # tabla, búsqueda, paginación, acciones
    │       ├── VehiculoFormModal.jsx     # formulario Agregar / Editar
    │       └── ConfirmarEliminarModal.jsx
    ├── assets/brand/logoUteq.jsx    # logo del sidebar
    ├── _nav.jsx                     # ítem "Vehículos y propietarios"
    └── routes.js
```

## Nota de seguridad

La práctica no incluye autenticación, por lo que las policies de escritura (`INSERT`/`UPDATE`/`DELETE`) quedan abiertas para cualquier persona con la publishable key (que siempre es visible en el bundle del frontend). Es aceptable para este ejercicio académico, pero **no debe usarse así en producción** sin agregar autenticación y policies que restrinjan las operaciones al usuario dueño del registro.

## Autor

Guillén Chévez Hugo Isaac — Telemática, UTEQ.