import { useState } from 'react' import { Calendar, Clock, List, X, Plus, ChevronDown, ChevronUp, Users, Bell } from 'lucide-react' import { Button } from "/components/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "/components/ui/card" import { Input } from "/components/ui/input" import { Label } from "/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "/components/ui/select" import { Textarea } from "/components/ui/textarea" type Prioridad = 'baja' | 'media' | 'alta' type Categoria = 'reunión' | 'tarea' | 'recordatorio' | 'evento' interface Actividad { id: string titulo: string descripcion: string fecha: string hora: string categoria: Categoria prioridad: Prioridad } export default function AdministradorActividades() { const [actividades, setActividades] = useState([]) const [mostrarFormulario, setMostrarFormulario] = useState(false) const [filtroFecha, setFiltroFecha] = useState('') const [descripcionesExpandidas, setDescripcionesExpandidas] = useState>({}) // Estado del formulario const [formulario, setFormulario] = useState({ titulo: '', descripcion: '', fecha: '', hora: '', categoria: 'tarea' as Categoria, prioridad: 'media' as Prioridad }) const [errores, setErrores] = useState({ titulo: false, fecha: false, hora: false }) const manejarCambioInput = (e: React.ChangeEvent) => { const { name, value } = e.target setFormulario(prev => ({ ...prev, [name]: value })) if (errores[name as keyof typeof errores]) { setErrores(prev => ({ ...prev, [name]: false })) } } const manejarCambioSelect = (name: string, value: string) => { setFormulario(prev => ({ ...prev, [name]: value })) } const validarFormulario = () => { const nuevosErrores = { titulo: !formulario.titulo.trim(), fecha: !formulario.fecha, hora: !formulario.hora } setErrores(nuevosErrores) return !Object.values(nuevosErrores).some(Boolean) } const manejarEnvio = (e: React.FormEvent) => { e.preventDefault() if (!validarFormulario()) return const nuevaActividad: Actividad = { id: Date.now().toString(), ...formulario } setActividades(prev => [...prev, nuevaActividad].sort((a, b) => { const fechaA = new Date(`${a.fecha}T${a.hora}`).getTime() const fechaB = new Date(`${b.fecha}T${b.hora}`).getTime() return fechaA - fechaB })) // Reiniciar formulario setFormulario({ titulo: '', descripcion: '', fecha: '', hora: '', categoria: 'tarea', prioridad: 'media' }) setMostrarFormulario(false) } const alternarDescripcion = (id: string) => { setDescripcionesExpandidas(prev => ({ ...prev, [id]: !prev[id] })) } const limpiarFiltro = () => { setFiltroFecha('') } const actividadesFiltradas = filtroFecha ? actividades.filter(actividad => actividad.fecha === filtroFecha) : actividades const obtenerColorPrioridad = (prioridad: Prioridad) => { switch (prioridad) { case 'alta': return 'bg-red-100 text-red-800' case 'media': return 'bg-yellow-100 text-yellow-800' case 'baja': return 'bg-green-100 text-green-800' default: return 'bg-gray-100 text-gray-800' } } const obtenerIconoCategoria = (categoria: Categoria) => { switch (categoria) { case 'reunión': return case 'tarea': return case 'recordatorio': return case 'evento': return default: return } } const formatearFecha = (fecha: string) => { return new Date(fecha).toLocaleDateString('es-ES', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) } return (

Administrador de Actividades

Organiza tus tareas, reuniones y eventos

setFiltroFecha(e.target.value)} className="bg-blue-800 border-blue-700 text-white" />

{filtroFecha && ( )}

{filtroFecha && (

Mostrando {actividadesFiltradas.length} actividades para el {formatearFecha(filtroFecha)}

)} {mostrarFormulario && ( Agregar Nueva Actividad Completa los detalles a continuación

Título * {errores.titulo &&

El título es requerido

}

Descripción

</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="fecha">Fecha *</Label>
                    <div className="relative mt-1">
                      <Input
                        id="fecha"
                        name="fecha"
                        type="date"
                        value={formulario.fecha}
                        onChange={manejarCambioInput}
                        className={`w-full ${errores.fecha ? 'border-red-500' : ''}`}
                      />
                      <Calendar className="absolute right-3 top-2.5 h-5 w-5 text-gray-400" />
                    </div>
                    {errores.fecha && <p className="text-red-400 text-sm mt-1">La fecha es requerida</p>}
                  </div>

<div>
                    <Label htmlFor="hora">Hora *</Label>
                    <div className="relative mt-1">
                      <Input
                        id="hora"
                        name="hora"
                        type="time"
                        value={formulario.hora}
                        onChange={manejarCambioInput}
                        className={`w-full ${errores.hora ? 'border-red-500' : ''}`}
                      />
                      <Clock className="absolute right-3 top-2.5 h-5 w-5 text-gray-400" />
                    </div>
                    {errores.hora && <p className="text-red-400 text-sm mt-1">La hora es requerida</p>}
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="categoria">Categoría</Label>
                    <Select
                      value={formulario.categoria}
                      onValueChange={(value) => manejarCambioSelect('categoria', value)}
                    >
                      <SelectTrigger className="w-full mt-1">
                        <SelectValue placeholder="Seleccionar categoría" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="reunión">Reunión</SelectItem>
                        <SelectItem value="tarea">Tarea</SelectItem>
                        <SelectItem value="recordatorio">Recordatorio</SelectItem>
                        <SelectItem value="evento">Evento</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="prioridad">Prioridad</Label>
                    <Select
                      value={formulario.prioridad}
                      onValueChange={(value) => manejarCambioSelect('prioridad', value)}
                    >
                      <SelectTrigger className="w-full mt-1">
                        <SelectValue placeholder="Seleccionar prioridad" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="baja">Baja</SelectItem>
                        <SelectItem value="media">Media</SelectItem>
                        <SelectItem value="alta">Alta</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="flex justify-end gap-2 pt-4">
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => setMostrarFormulario(false)}
                  >
                    Cancelar
                  </Button>
                  <Button type="submit">Agregar Actividad</Button>
                </div>
              </form>
            </CardContent>
          </Card>
        )}

{actividadesFiltradas.length > 0 ? (
          <div className="space-y-4">
            {actividadesFiltradas.map(actividad => (
              <Card key={actividad.id} className="bg-blue-800 border-blue-700">
                <CardHeader className="pb-3">
                  <div className="flex justify-between items-start">
                    <div>
                      <CardTitle className="flex items-center gap-2">
                        {obtenerIconoCategoria(actividad.categoria)}
                        {actividad.titulo}
                      </CardTitle>
                      <CardDescription className="flex items-center gap-4 mt-2">
                        <span className="flex items-center gap-1">
                          <Calendar className="w-4 h-4" />
                          {formatearFecha(actividad.fecha)}
                        </span>
                        <span className="flex items-center gap-1">
                          <Clock className="w-4 h-4" />
                          {actividad.hora}
                        </span>
                        <span className={`px-2 py-1 rounded-full text-xs ${obtenerColorPrioridad(actividad.prioridad)}`}>
                          {actividad.prioridad}
                        </span>
                      </CardDescription>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => alternarDescripcion(actividad.id)}
                      className="text-blue-300 hover:text-white"
                    >
                      {descripcionesExpandidas[actividad.id] ? (
                        <ChevronUp className="h-4 w-4" />
                      ) : (
                        <ChevronDown className="h-4 w-4" />
                      )}
                    </Button>
                  </div>
                </CardHeader>
                {descripcionesExpandidas[actividad.id] && actividad.descripcion && (
                  <CardContent className="pt-0">
                    <div className="bg-blue-900/50 p-4 rounded-lg">
                      <p className="text-blue-100">{actividad.descripcion}</p>
                    </div>
                  </CardContent>
                )}
              </Card>
            ))}
          </div>
        ) : (
          <Card className="text-center py-8 bg-blue-800 border-blue-700">
            <CardContent>
              <p className="text-blue-300">
                {actividades.length === 0
                  ? "No hay actividades aún. ¡Agrega tu primera actividad!"
                  : filtroFecha
                    ? "No se encontraron actividades para la fecha seleccionada."
                    : "No se encontraron actividades."}
              </p>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}</article></body></html>