Merge remote-tracking branch 'origin/nLucas' into giane

2026-04-04 21:00:59 -03:00
parent b4476431e4 8c22563cc1
commit b571d32609
12 changed files with 826 additions and 319 deletions
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Appointment;
+
+class AgendaController extends Controller
+{
+    public function index()
+{
+    $all_appointments = Appointment::with('client')->get();
+
+    $appointments = [];
+
+    foreach($all_appointments as $appointment){
+        $appointments[] = [
+            'id'    => $appointment->id,
+            'title' => $appointment->scheduled_at->format('H:i') . ' - ' . $appointment->client->name,
+            'start' => $appointment->scheduled_at->format('Y-m-d\TH:i:s'),
+            'extendedProps' => [
+                    'description' => $appointment->problem_description,
+                    'status'      => $appointment->status,
+                ],
+        ];
+    }
+
+    return view('agenda', compact('appointments'));
+}
+}
+
+
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+use App\Models\Appointment;
+use Illuminate\Http\Request;
+
+class AppointmentController extends Controller
+{
+    public function show(Appointment $appointment)
+{
+    return view('appointments.show', compact('appointment'));
+}
+}
@@ -7,6 +7,7 @@
        "dev": "vite"
    },
    "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
        "@tailwindcss/vite": "^4.1.18",
        "autoprefixer": "^10.4.22",
        "axios": "^1.8.2",
@@ -17,7 +18,9 @@
        "vite": "^7.0.4"
    },
    "dependencies": {
-        "@tailwindcss/postcss": "^4.1.18",
+        "@fullcalendar/core": "^6.1.20",
+        "@fullcalendar/daygrid": "^6.1.20",
+        "@fullcalendar/interaction": "^6.1.20",
        "jquery": "^3.7.1",
        "select2": "^4.1.0-rc.0"
    }
@@ -53,4 +53,28 @@

 ::-webkit-scrollbar-thumb:hover {
    background: #ccff00; /* Verde Neón */
-}
+}
+
+.fc .fc-button-primary {
+    background-color: #ccff00 !important; /* neon lime */
+    border-color: #ccff00 !important;
+    color: #000 !important;
+}
+
+.fc .fc-button-primary:hover {
+    background-color: #b3e600 !important;
+    border-color: #b3e600 !important;
+}
+
+.fc .fc-button-primary:disabled {
+    background-color: #444 !important;
+    border-color: #444 !important;
+    color: #aaa !important;
+}
+
+.fc-daygrid-event-dot {
+    display: none;
+}
+
+import '@fullcalendar/core/index.css'
+import '@fullcalendar/daygrid/index.css'
@@ -1,6 +1,6 @@
 import './bootstrap';
 // 1. Importar jQuery
-import jQuery from 'jquery';
+import jQuery, { ready } from 'jquery';

 // 2. Hacerlo global (IMPORTANTE para que funcione $(document).ready en Blade)
 window.$ = window.jQuery = jQuery;
@@ -11,3 +11,112 @@ select2(); // Inicializar el plugin

 // 4. Importar los estilos de Select2 (Opcional aquí, o en CSS)
 import 'select2/dist/css/select2.css';
+
+import { Calendar } from '@fullcalendar/core'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    const calendarEl = document.getElementById('calendar')
+
+    if (!calendarEl) return
+
+    const calendar = new Calendar(calendarEl, {
+        plugins: [dayGridPlugin, interactionPlugin],
+
+        initialView: 'dayGridMonth',
+        locale: 'es',
+
+        buttonText: {
+            today: 'Volver a Hoy'
+        },
+
+        displayEventTime: false,
+        contentHeight: 'auto',
+        eventDisplay: 'block',
+        fixedWeekCount: false,
+
+        selectable: true,
+
+        /*
+        dateClick: function(info) {
+            let fecha = info.dateStr
+            window.location.href = `/agenda/dia/${fecha}`
+        },
+        */
+
+        eventClick: function (info) {
+
+            const evento = info.event
+
+            const modal = document.getElementById("eventModal")
+            if (!modal) return
+
+            modal.classList.remove("hidden")
+
+            const statusMap = {
+                pending: 'Pendiente',
+                confirmed: 'Confirmado',
+                in_progress: 'En progreso',
+                ready: 'Listo',
+                delivered: 'Entregado'
+            }
+
+            const estado = statusMap[evento.extendedProps.status] ?? 'desconocido'
+
+            document.getElementById("modalTitle").innerText =
+                evento.extendedProps.description + " - " + estado
+
+            const fecha = evento.start
+
+            const hora = fecha.toLocaleTimeString("es-AR", {
+                hour: "2-digit",
+                minute: "2-digit",
+                hour12: false
+            })
+
+            document.getElementById("modalDate").innerText =
+                "Hora: " + hora
+
+            const url = window.appointmentShowTemplate.replace(':id', evento.id)
+
+            document.getElementById("viewEventBtn").href = url
+        },
+
+        events: window.appointments ?? [],
+
+        eventDidMount: function (info) {
+
+            const status = info.event.extendedProps.status
+
+            const colors = {
+                pending: '#ef4444',
+                in_progress: '#f59e0b',
+                completed: '#22c55e',
+                ready: '#22c55e',
+                delivered: '#22c55e'
+            }
+
+            const color = colors[status] ?? '#3b82f6'
+
+            info.event.setProp('backgroundColor', color)
+            info.event.setProp('borderColor', color)
+            info.event.setProp('textColor', '#ffffff')
+        }
+
+    })
+
+    calendar.render()
+
+    const closeBtn = document.getElementById("closeModal")
+
+    if (closeBtn) {
+        closeBtn.addEventListener("click", function () {
+            document.getElementById("eventModal").classList.add("hidden")
+            document.body.style.overflow = "auto"
+        })
+    }
+
+})
+
@@ -0,0 +1,58 @@
+<x-layout title="Agenda">
+
+    <div class="flex w-full justify-between items-end mb-6">
+
+        <div>
+            <x-section-header 
+                subtitle="Gestor de Eventos" 
+                title="Agenda" 
+                highlight="Lauck" 
+            />
+        </div>
+    
+        <a href="{{ route('taller.index') }}" 
+           class="px-5 py-2.5 bg-neutral-900 text-white hover:bg-neutral-700 dark:bg-neon-lime dark:text-neutral-900 dark:hover:bg-[#b3e600] font-bold rounded-lg uppercase tracking-wide text-xs flex items-center gap-2">
+            Volver a Taller
+        </a>
+        
+    </div>
+
+    <script>
+        window.appointments = @json($appointments);
+    </script>
+    <script>
+        window.appointmentShowTemplate = "{{ route('appointments.show', ':id') }}";
+    </script>
+    
+    <div id="calendar" class="w-full rounded-xl py-3 px-3 bg-white border border-neutral-200 shadow-sm dark:bg-neutral-900/50 dark:border-neutral-800 dark:shadow-none"></div>
+
+</x-layout>
+
+<div id="eventModal"
+     class="hidden fixed inset-0 z-50 flex items-center justify-center">
+
+    <div class="relative p-6 rounded-xl w-96 shadow-2xl border
+                bg-white border-neutral-200 text-neutral-900
+                dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
+
+        <h2 id="modalTitle" class="text-xl font-bold mb-2 text-neutral-900 dark:text-white"></h2>
+
+        <p id="modalDate" class="mb-4 text-neutral-500 dark:text-gray-300"></p>
+
+        <div class="flex justify-end gap-2">
+            <button id="closeModal"
+                class="px-4 py-2 rounded-lg
+                       bg-neutral-100 hover:bg-neutral-200 text-neutral-700
+                       dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">
+                Cerrar
+            </button>
+
+            <a id="viewEventBtn"
+               class="px-4 py-2 font-bold rounded-lg
+                      bg-neutral-900 hover:bg-neutral-700 text-white
+                      dark:bg-neon-lime dark:hover:bg-[#b3e600] dark:text-neutral-900">
+                Ver turno
+            </a>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,110 @@
+<x-layout title="Detalle del Turno">
+
+    <x-section-header subtitle="Gestor de Turnos" title="Detalle del" highlight="Turno" />
+
+    <div class="flex justify-end mb-6">
+        <a href="{{ route('agenda') }}"
+            class="px-5 py-2.5 font-bold rounded-lg uppercase tracking-wide text-xs flex items-center gap-2
+                   bg-neutral-900 text-white hover:bg-neutral-700
+                   dark:bg-neon-lime dark:text-neutral-900 dark:hover:bg-[#b3e600]">
+            ← Volver a Agenda
+        </a>
+    </div>
+
+    <div class="rounded-2xl shadow-lg p-8 space-y-6
+                bg-white border border-neutral-300
+                dark:bg-neutral-900/50 dark:border-neutral-700 dark:border-2">
+
+        @php
+            $statusMap = [
+                'pending' => 'Pendiente',
+                'confirmed' => 'Confirmado',
+                'in_progress' => 'En progreso',
+                'ready' => 'Listo',
+                'delivered' => 'Entregado',
+            ];
+
+            $translatedStatus = $statusMap[$appointment->status] ?? 'Desconocido';
+
+            $colorMap = [
+                'pending' => '#ef4444',
+                'in_progress' => '#f59e0b',
+                'completed' => '#22c55e',
+                'ready' => '#22c55e',
+                'delivered' => '#22c55e',
+            ];
+            
+            $color = $colorMap[$appointment->status] ?? '#3b82f6';
+        @endphp
+
+        {{-- Estado --}}
+        <div class="text-center">
+            <span class="text-lg uppercase font-bold tracking-wide text-neutral-500 dark:text-gray-400">
+                Estado
+            </span>
+
+            <div class="mt-2">
+                <span class="px-3 py-1 rounded-full text-lg font-semibold text-black"
+                    style="background-color: {{ $color }}">
+                    {{ $translatedStatus }}
+                </span>
+            </div>
+        </div>
+
+        {{-- Información principal --}}
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+            <div>
+                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Cliente</p>
+                <p class="text-lg font-semibold text-neutral-900 dark:text-white">
+                    {{ $appointment->client->name }}
+                </p>
+            </div>
+
+            <div>
+                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Teléfono</p>
+                <p class="text-neutral-900 dark:text-white">
+                    {{ $appointment->contact_phone ?? '-' }}
+                </p>
+            </div>
+
+            <div>
+                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Fecha pactada de entrega</p>
+                <p class="text-neutral-900 dark:text-white">
+                    {{ $appointment->scheduled_at->format('d/m/Y') }}
+                </p>
+            </div>
+
+            <div>
+                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Hora</p>
+                <p class="text-neutral-900 dark:text-white">
+                    {{ $appointment->scheduled_at->format('H:i') }}
+                </p>
+            </div>
+
+            <div class="md:col-span-2">
+                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Modelo de Bicicleta</p>
+                <p class="text-neutral-900 dark:text-white">
+                    {{ $appointment->bike_model ?? '-' }}
+                </p>
+            </div>
+
+            <div class="md:col-span-2">
+                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Problema Reportado</p>
+                <p class="text-neutral-900 dark:text-white">
+                    {{ $appointment->problem_description }}
+                </p>
+            </div>
+
+            <div class="md:col-span-2">
+                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Notas</p>
+                <p class="text-neutral-900 dark:text-white">
+                    {{ $appointment->notes ?? '-' }}
+                </p>
+            </div>
+
+        </div>
+
+    </div>
+
+</x-layout>
@@ -1,40 +1,33 @@
 <x-layout title="Login - Lauck">
-    <div class="flex flex-col items-center space-y-6 w-full max-w-lg p-6">
-        <!-- Título -->
-        <h1 class="text-4xl font-bold text-white text-center drop-shadow-lg" > Bicicletería<span class="text-neon-lime"> Lauck</span> </h1>
-        
-        <!-- 
-        <x-section-header 
+
+<div class="justify-center">
+    <x-section-header 
                subtitle="Inicio de sesion" 
                title="Bicicletería " 
                highlight="Lauck" 
            />
-        -->
-        
        <div class="bg-panel-bg p-8 rounded-xl shadow-lg w-full max-w-md border border-neutral-700">
            <form action="{{ route('login.attempt') }}" method="POST" class="space-y-5">
                @csrf
-                {{-- No muestra los errores, ver --}}
-                {{-- Bloque de errores de validación y autenticación --}}
-                    @if ($errors->any())
-                        <div class="bg-red-900 border border-red-700 text-white p-3 rounded-md">
-                         {{-- Muestra el primer mensaje de error sin lista --}}
-                            <p class="text-sm font-medium">
-                                {{ $errors->first() }}
-                            </p>
-        </div>
-                    @endif
+                {{-- Bloque de errores --}}
+                @if ($errors->any())
+                    <div class="bg-red-900 border border-red-700 text-white p-3 rounded-md">
+                        <p class="text-sm font-medium">
+                            {{ $errors->first() }}
+                        </p>
+                    </div>
+                @endif

                <div>
-                    <label class="block text-sm font-bold text-gray-600 mb-1">Correo electrónico</label>
-                    <input type="email" name="email" required
-                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600">
+                    <x-forms.label class="block text-sm font-bold text-gray-600 mb-1">Correo electrónico</x-forms.label>
+                    <x-forms.input type="email" name="email" required
+                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"/>
                </div>

                <div>
-                    <label class="block text-sm font-bold text-gray-600 mb-1">Contraseña</label>
-                    <input type="password" name="password" required
-                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600">
+                    <x-forms.label class="block text-sm font-bold text-gray-600 mb-1">Contraseña</x-forms.label>
+                    <x-forms.input type="password" name="password" required
+                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"/>
                </div>

                <div>
@@ -1,59 +1,95 @@
-<x-layout title="Registrarse - Lauck">
+<x-layout title="Register - Lauck">

-    <div class="flex flex-col items-center space-y-6 w-full max-w-lg">
-        <!-- Título -->
-        <h1 class="text-4xl font-bold text-white text-center drop-shadow-lg" > Bicicletería<span class="text-neon-lime"> Lauck</span> </h1>
+<div class="justify-center">
+    <x-section-header 
+        subtitle="Crear una cuenta" 
+        title="Bicicletería " 
+        highlight="Lauck" 
+    />
+</div>

-        <!-- Formulario -->
-        <div class="bg-zinc-900 p-8 rounded-xl shadow-lg w-full max-w-md border-2 border-gray-500">
-            <h2 class="text-2xl font-bold mb-2 text-center">Registrarse</h2>
-            <p class="mb-6 text-center text-gray-500">Por favor completá el formulario para crear una cuenta.</p>
+<div class="flex flex-col items-center space-y-6 w-full max-w-lg p-6">
+    <div class="bg-zinc-900 p-8 rounded-xl shadow-lg w-full max-w-md border-2 border-gray-500">

-            <form action="{{ route('register.store') }}" method="post" class="space-y-5">
-                @csrf
-                @if ($errors->any())
-                    <div>
-                        <ul>
-                            @foreach ($errors->all() as $error)
-                                <li class="text-red-600">{{ $error }}</li>
-                            @endforeach
-                        </ul>
-                    </div>
-                @endif
-                <div>
-                    <label class="block text-sm font-bold text-gray-600 mb-1">Nombre completo</label>
-                    <input type="text" name="name" required
-                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
+        <form action="{{ route('register.store') }}" method="POST" class="space-y-5">
+            @csrf
+
+            {{-- Bloque de errores --}}
+            @if ($errors->any())
+                <div class="bg-red-900 border border-red-700 text-white p-3 rounded-md">
+                    <p class="text-sm font-medium">
+                        {{ $errors->first() }}
+                    </p>
                </div>
+            @endif

                <div>
-                    <label class="block text-sm font-bold text-gray-600 mb-1">Correo electrónico</label>
-                    <input type="email" name="email" required
-                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
+                    <x-forms.label class="block text-sm font-bold text-gray-600 mb-1">
+                        Nombre completo
+                    </x-forms.label>
+                    <x-forms.input 
+                        type="text"
+                        value="{{ old('name') }}" 
+                        name="name" 
+                        required
+                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"
+                    />
                </div>

-                <div>
-                    <label class="block text-sm font-bold text-gray-600 mb-1">Contraseña</label>
-                    <input type="password" name="password" required
-                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
-                </div>
+            <div>
+                <x-forms.label class="block text-sm font-bold text-gray-600 mb-1">
+                    Correo electrónico
+                </x-forms.label>
+                <x-forms.input 
+                    type="email"
+                    value="{{ old('email') }}"  
+                    name="email" 
+                    required
+                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"
+                />
+            </div>

-                <div>
-                    <label class="block text-sm font-bold text-gray-600 mb-1">Confirmar contraseña</label>
-                    <input type="password" name="password_confirmation" required
-                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
-                </div>
+            <div>
+                <x-forms.label class="block text-sm font-bold text-gray-600 mb-1">
+                    Contraseña
+                </x-forms.label>
+                <x-forms.input 
+                    type="password" 
+                    name="password" 
+                    required
+                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"
+                />
+            </div>

-                <div>
-                    <input type="submit" name="submit" value="Registrarse"
-                        class="w-full bg-lime-500 font-bold text-white py-2 rounded-md hover:bg-lime-600 transition-colors">
-                </div>
+            <div>
+                <x-forms.label class="block text-sm font-bold text-gray-600 mb-1">
+                    Confirmar contraseña
+                </x-forms.label>
+                <x-forms.input 
+                    type="password" 
+                    name="password_confirmation" 
+                    required
+                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-400 text-gray-600"
+                />
+            </div>
+
+            <div>
+                <input 
+                    type="submit" 
+                    value="Registrarse"
+                    class="w-full bg-lime-400 font-bold text-white py-2 rounded-md hover:bg-lime-500 transition-colors"
+                >
+            </div>
+
+            <p class="text-center text-sm text-gray-600">
+                ¿Ya tenés una cuenta?
+                <a href="{{ route('login') }}" class="text-blue-600 hover:underline">
+                    Iniciá sesión acá
+                </a>.
+            </p>
+        </form>

-                <p class="text-center text-sm text-gray-600">
-                    ¿Ya tenés una cuenta? <a href="login" class="text-blue-600 hover:underline">Iniciá sesión acá</a>.
-                </p>
-            </form>
-        </div>
    </div>
+</div>

-</x-layout>
+</x-layout>
@@ -8,7 +8,12 @@
        </div>
    @endif
    
-    <div class="flex w-full justify-end items-end mb-4">
+    <div class="flex w-full justify-end items-end mb-4 gap-x-2">
+        <a href="{{ route('agenda') }}" 
+           class="px-5 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] uppercase tracking-wide text-xs flex items-center gap-2">
+            Ver Agenda
+        </a>
+        
        <a href="{{ route('taller.create') }}" class="px-5 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] uppercase tracking-wide text-xs flex items-center gap-2">
            + Ingresar Bici
        </a>
@@ -10,6 +10,8 @@ use App\Http\Controllers\LoginController;
 use App\Http\Controllers\ProductosController;
 use App\Http\Controllers\RegisterController;
 use App\Http\Controllers\TallerController;
+use App\Http\Controllers\AgendaController;
+use App\Http\Controllers\AppointmentController;
 use App\Models\Product;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Session;
@@ -48,4 +50,7 @@ Route::middleware(['auth'])->group(function () {
        Route::post('/', 'store')->name('store');
        Route::patch('/{appointment}/status', 'updateStatus')->name('updateStatus');
    });
+    Route::get('/agenda', [AgendaController::class, 'index'])->name('agenda');
+    Route::get('/appointments/{appointment}', [AppointmentController::class, 'show'])
+    ->name('appointments.show');
 });