Vistas Blade

El proyecto utiliza el motor de plantillas Blade de Laravel con Tailwind CSS para el diseño.

Tabla de Contenidos

1. Estructura de Directorios
2. Layouts
3. Componentes Blade
4. Vistas de Autenticación
5. Vistas del Dashboard
6. Vistas Públicas
7. Vistas de Errores

1. Estructura de Directorios

Ubicación: resources/views/

resources/views/
├── layouts/
│   ├── app.blade.php          # Layout principal autenticado
│   ├── guest.blade.php         # Layout para invitados
│   └── public.blade.php        # Layout público
├── components/
│   ├── application-logo.blade.php
│   ├── danger-button.blade.php
│   ├── dropdown.blade.php
│   ├── modal.blade.php
│   ├── poster-card.blade.php
│   └── ...
├── auth/
│   ├── login.blade.php
│   ├── register.blade.php
│   └── ...
├── dashboard/
│   ├── index.blade.php
│   ├── users/
│   ├── categories/
│   ├── sponsors/
│   ├── presentations/
│   └── posters/
├── posters/
│   ├── public.blade.php
│   └── show.blade.php
├── errors/
│   ├── 404.blade.php
│   └── ...
└── profile/
    └── edit.blade.php

2. Layouts

app.blade.php (Layout Principal)

Layout utilizado por usuarios autenticados. Incluye navegación, sidebar y contenido.

<!-- resources/views/layouts/app.blade.php -->
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl">
            {{ __($title) }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto">
            @yield('content')
        </div>
    </div>
</x-app-layout>

guest.blade.php (Layout para Invitados)

Layout minimalista para login, registro y recuperación de contraseña.

<!-- resources/views/layouts/guest.blade.php -->
<x-guest-layout>
    <x-auth-session-status />
    
    {{ $slot }}
</x-guest-layout>

public.blade.php (Layout Público)

Layout para páginas públicas sin autenticación.

<!-- resources/views/layouts/public.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
    {{ $slot }}
</body>
</html>

3. Componentes Blade

Ubicación: resources/views/components/

Componente	Descripción	Props
`application-logo`	Logo de la aplicación	-
`auth-session-status`	Mensajes de estado de sesión	status
`danger-button`	Botón de acción peligrosa (eliminar)	type, class
`dropdown`	Menú desplegable	align
`input-error`	Mensaje de error de validación	messages
`input-label`	Etiqueta para inputs	for, value
`modal`	Diálogo modal	x-model, name
`nav-link`	Enlace de navegación activo	href, :active
`poster-card`	Tarjeta de póster	poster
`primary-button`	Botón primario	type, class
`text-input`	Input de texto	id, type, name, value

Componente: poster-card.blade.php

<!-- resources/views/components/poster-card.blade.php -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
    <div class="p-4">
        <h3 class="font-semibold text-lg mb-2">{{ $poster->title }}</h3>
        <p class="text-gray-600 text-sm mb-4">{{ Str::limit($poster->summary, 100) }}</p>
        <div class="flex justify-between items-center">
            <span class="text-xs text-gray-500">{{ $poster->user->name }}</span>
            <a href="{{ route('posters.show', $poster) }}">
                Ver más
            </a>
        </div>
    </div>
</div>

Componente: modal.blade.php

<!-- resources/views/components/modal.blade.php -->
<div x-data="{ show: @entangle($attributes->wire('model')) }">
    <div x-show="show" ...>
        <div x-on:click="show = false" ...>{{ $slot }}</div>
    </div>
</div>

4. Vistas de Autenticación

Ubicación: resources/views/auth/

login.blade.php

Formulario de inicio de sesión con email y contraseña.

POST /login

register.blade.php

Formulario de registro con nombre, email y contraseña.

POST /register

forgot-password.blade.php

Solicitud de reseteo de contraseña por email.

POST /forgot-password

reset-password.blade.php

Nueva contraseña con token de recuperación.

POST /reset-password

verify-email.blade.php

Notificación de verificación de email.

GET /verify-email

confirm-password.blade.php

Confirmación de contraseña para acciones sensibles.

GET /confirm-password

Ejemplo: login.blade.php

<!-- resources/views/auth/login.blade.php -->
<x-guest-layout>
    <form method="POST" action="{{ route('login') }}">
        @csrf
        
        <div>
            <x-input-label for="email" :value="__('Email')" />
            <x-text-input id="email" type="email" name="email" />
            <x-input-error :messages="$errors->get('email')" />
        </div>

        <div class="mt-4">
            <x-input-label for="password" :value="__('Password')" />
            <x-text-input id="password" type="password" name="password" />
            <x-input-error :messages="$errors->get('password')" />
        </div>

        <x-primary-button>
            {{ __('Log in') }}
        </x-primary-button>
    </form>
</x-guest-layout>

5. Vistas del Dashboard

Ubicación: resources/views/dashboard/

dashboard.blade.php (Principal)

Muestra estadísticas generales del sistema.

<!-- resources/views/dashboard.blade.php -->
<x-app-layout title="Dashboard">
    <div class="py-12">
        {{-- Stats Cards --}}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <h3>Total Usuarios</h3>
                <p class="text-3xl font-bold">{{ $users['total'] }}</p>
            </div>
            {{-- ... más cards --}}
        </div>
    </div>
</x-app-layout>

Módulo: Users

Vista	Descripción
`dashboard/users/index.blade.php`	Lista de usuarios con tabla
`dashboard/users/create.blade.php`	Formulario de creación
`dashboard/users/edit.blade.php`	Formulario de edición

Módulo: Categories

Vista	Descripción
`dashboard/categories/index.blade.php`	Lista de categorías
`dashboard/categories/create.blade.php`	Formulario de creación
`dashboard/categories/edit.blade.php`	Formulario de edición

Módulo: Sponsors

Vista	Descripción
`dashboard/sponsors/index.blade.php`	Lista de patrocinadores
`dashboard/sponsors/create.blade.php`	Formulario de creación
`dashboard/sponsors/edit.blade.php`	Formulario de edición

Módulo: Presentations

Vista	Descripción
`dashboard/presentations/index.blade.php`	Lista de presentaciones
`dashboard/presentations/create.blade.php`	Formulario de creación
`dashboard/presentations/edit.blade.php`	Formulario de edición

Módulo: Posters

Vista	Descripción
`dashboard/posters/index.blade.php`	Lista de pósters
`dashboard/posters/create.blade.php`	Formulario de creación
`dashboard/posters/edit.blade.php`	Formulario de edición

Módulo: Profile

Vista	Descripción
`profile/edit.blade.php`	Edición de perfil con partials
`profile/partials/update-profile-information-form.blade.php`	Formulario de datos
`profile/partials/update-password-form.blade.php`	Formulario de contraseña
`profile/partials/delete-user-form.blade.php`	Eliminación de cuenta

6. Vistas Públicas

Páginas accesibles sin autenticación.

posters/public.blade.php

Galería pública de pósters publicados.

<!-- resources/views/posters/public.blade.php -->
<x-public-layout>
    <h1>Pósters del Congreso</h1>
    
    <form action="{{ route('posters.search') }}">
        <input type="text" name="search" placeholder="Buscar...">
        <button type="submit">Buscar</button>
    </form>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @foreach($posters as $poster)
            <x-poster-card :poster="$poster" />
        @endforeach
    </div>
</x-public-layout>

posters/show.blade.php

Detalle de un póster específico.

<!-- resources/views/posters/show.blade.php -->
<x-public-layout>
    <article>
        <h1>{{ $poster->title }}</h1>
        <p>{{ $poster->summary }}</p>
        <embed src="{{ Storage::url($poster->url_file) }}">
    </article>
</x-public-layout>

7. Vistas de Errores

Ubicación: resources/views/errors/

400.blade.php

Bad Request

401.blade.php

Unauthorized

403.blade.php

Forbidden

404.blade.php

Not Found

405.blade.php

Method Not Allowed

419.blade.php

Page Expired

429.blade.php

Too Many Requests

500.blade.php

Server Error

503.blade.php

Service Unavailable

access-denied.blade.php

Acceso Denegado

Ejemplo: 403.blade.php

<!-- resources/views/errors/403.blade.php -->
<x-guest-layout>
    <div class="text-center py-12">
        <h1 class="text-6xl font-bold text-red-500">403</h1>
        <h2 class="text-2xl mt-4">Acceso Denegado</h2>
        <p class="text-gray-600 mt-2">
            No tienes permisos para acceder a este recurso.
        </p>
        <a href="{{ url('/') }}" class="btn btn-primary mt-6">
            Volver al inicio
        </a>
    </div>
</x-guest-layout>