[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Univvy marketplace design *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/elcodigodeabis-projects/v0-univvy-marketplace-design) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/grK1hfY85Ol) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/elcodigodeabis-projects/v0-univvy-marketplace-design](https://vercel.com/elcodigodeabis-projects/v0-univvy-marketplace-design)** ## Build your app Continue building your app on: **[https://v0.app/chat/grK1hfY85Ol](https://v0.app/chat/grK1hfY85Ol)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/actions/auth.ts" isMerged="true" "use server" import { createClient } from "@/lib/supabase/server" import { redirect } from "next/navigation" export async function signUp(formData: { email: string password: string nombre: string tipo: "alumno" | "asesor" universidad: string carrera: string }) { const supabase = await createClient() const { data, error } = await supabase.auth.signUp({ email: formData.email, password: formData.password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"}/auth/callback`, data: { nombre: formData.nombre, tipo: formData.tipo, universidad: formData.universidad, carrera: formData.carrera, }, }, }) if (error) { return { error: error.message } } return { data, needsEmailConfirmation: true } } export async function signIn(formData: { email: string; password: string }) { const supabase = await createClient() const { data, error } = await supabase.auth.signInWithPassword({ email: formData.email, password: formData.password, }) if (error) { if (error.message.includes("Email not confirmed")) { return { error: "Por favor, confirma tu correo electrónico antes de iniciar sesión." } } return { error: error.message } } // Redirect based on user role const userType = data.user?.user_metadata?.tipo || "alumno" if (userType === "asesor") { redirect("/dashboard-asesor") } else { redirect("/dashboard") } } export async function signOut() { const supabase = await createClient() await supabase.auth.signOut() redirect("/login") } export async function getUser() { const supabase = await createClient() const { data: { user } } = await supabase.auth.getUser() return user } export async function resendVerificationEmail(email: string) { const supabase = await createClient() const { error } = await supabase.auth.resend({ type: "signup", email, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"}/auth/callback`, }, }) if (error) { return { error: error.message } } return { success: true } } [V0_FILE]typescript:file="app/actions/stripe.ts" isMerged="true" "use server" import { stripe, calculatePricing, CURRENCY } from "@/lib/stripe" import { createClient } from "@/lib/supabase/server" // ─── Create Stripe Checkout Session ─────────────────────────────────────── // Called by createBooking in bookings.ts after the booking row is saved. export async function createStripeCheckoutSession(params: { bookingId: string advisorId: string advisorName: string studentEmail: string title: string description: string pricePerHour: number // euros, e.g. 25 durationMinutes: number cancelUrl: string }) { const { advisorAmountCents, platformFeeCents, totalCents } = calculatePricing( params.pricePerHour, params.durationMinutes ) const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000" const session = await stripe.checkout.sessions.create({ mode: "payment", // Let Stripe pick the best payment methods for the user's location line_items: [ { price_data: { currency: CURRENCY, product_data: { name: params.title, description: params.description, }, unit_amount: totalCents, }, quantity: 1, }, ], success_url: `${baseUrl}/pago/exito?checkout_session_id={CHECKOUT_SESSION_ID}&booking_id=${params.bookingId}`, cancel_url: params.cancelUrl, customer_email: params.studentEmail, metadata: { booking_id: params.bookingId, advisor_id: params.advisorId, advisor_name: params.advisorName, advisor_amount_cents: advisorAmountCents.toString(), platform_fee_cents: platformFeeCents.toString(), total_cents: totalCents.toString(), }, payment_intent_data: { // Funds held in Stripe — we release manually via Transfer after escrow resolves metadata: { booking_id: params.bookingId, advisor_id: params.advisorId, escrow: "true", }, }, }) return { checkoutUrl: session.url!, checkoutSessionId: session.id, advisorAmountCents, platformFeeCents, totalCents, } } // ─── Retrieve and verify a Checkout Session ─────────────────────────────── export async function getStripeCheckoutSession(checkoutSessionId: string) { const session = await stripe.checkout.sessions.retrieve(checkoutSessionId, { expand: ["payment_intent"], }) return session } // ─── Release escrow to advisor (Stripe Transfer) ────────────────────────── // Called when both parties confirm the session occurred. export async function releaseEscrowToAdvisor(params: { bookingId: string paymentIntentId: string advisorStripeAccountId: string // advisor's connected Stripe account advisorAmountCents: number }) { // Create a Transfer from platform balance to advisor's connected account const transfer = await stripe.transfers.create({ amount: params.advisorAmountCents, currency: CURRENCY, destination: params.advisorStripeAccountId, source_transaction: params.paymentIntentId, metadata: { booking_id: params.bookingId, type: "escrow_release", }, }) return transfer } // ─── Refund to student ──────────────────────────────────────────────────── // Called when session didn't occur (both confirm) or admin resolves dispute. export async function refundToStudent(params: { paymentIntentId: string bookingId: string reason: "session_not_held" | "dispute_resolved_student" | "cancellation" }) { const refund = await stripe.refunds.create({ payment_intent: params.paymentIntentId, metadata: { booking_id: params.bookingId, reason: params.reason, }, }) return refund } // ─── Cancel booking before payment ─────────────────────────────────────── // If student hasn't paid yet, just expire the checkout session. export async function expireCheckoutSession(checkoutSessionId: string) { try { await stripe.checkout.sessions.expire(checkoutSessionId) } catch { // Session may already be expired/completed — ignore } } // ─── Get advisor Stripe account status ─────────────────────────────────── // For future Stripe Connect onboarding flow. export async function getOrCreateAdvisorStripeAccount(advisorId: string) { const supabase = await createClient() const { data: profile } = await supabase .from("profiles") .select("stripe_account_id, email, full_name") .eq("id", advisorId) .single() if (!profile) throw new Error("Perfil de asesor no encontrado") // If advisor already has a Stripe account, return it if (profile.stripe_account_id) { const account = await stripe.accounts.retrieve(profile.stripe_account_id) return account } // Create a new Express account for the advisor const account = await stripe.accounts.create({ type: "express", email: profile.email, capabilities: { transfers: { requested: true }, }, metadata: { advisor_id: advisorId, platform: "univvy", }, }) // Save the account ID in the profiles table await supabase .from("profiles") .update({ stripe_account_id: account.id }) .eq("id", advisorId) return account } // ─── Create Stripe Connect onboarding link ─────────────────────────────── export async function createStripeConnectOnboardingLink(advisorId: string) { const account = await getOrCreateAdvisorStripeAccount(advisorId) const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000" const link = await stripe.accountLinks.create({ account: account.id, refresh_url: `${baseUrl}/asesor/onboarding?refresh=true`, return_url: `${baseUrl}/asesor/onboarding?success=true`, type: "account_onboarding", }) return link.url } [V0_FILE]typescriptreact:file="app/agendar/[id]/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/asesores/[id]/page.tsx" isMerged="true" "use client" import { useParams } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { ArrowLeft, Star, MapPin, Clock, BookOpen, MessageSquare, Calendar, GraduationCap, Award, CheckCircle2, Loader2, UserX, } from "lucide-react" import { useAsesor } from "@/hooks/use-asesores" export default function AsesorProfilePage() { const params = useParams<{ id: string }>() const { asesor, loading, error } = useAsesor(params.id || "") if (loading) { return (

Volver a Asesores

Cargando perfil del asesor...

) } if (error || !asesor) { return (

Volver a Asesores

Asesor no encontrado

El asesor que buscas no existe o no está disponible en este momento.

) } return (

{/* Header */}

Volver a Asesores

{/* Main Content */}

{/* Left Column - Profile Info */}

{/* Advisor Profile Card */}

{asesor.nombre .split(" ") .map((n) => n[0]) .join("")}

{asesor.nombre}

{asesor.carrera}

{asesor.rating.toFixed(1)}

({asesor.sesiones_completadas} sesiones completadas)

{asesor.especialidades.length > 0 && (

{asesor.especialidades.map((esp, idx) => ( {esp} ))}

)}

{asesor.universidad}

{asesor.disponibilidad || "Disponibilidad flexible"}

{asesor.modalidad.length > 0 ? asesor.modalidad.join(", ") : "Virtual"}

{/* About Section */} Sobre mí

{asesor.descripcion || "Este asesor aún no ha agregado una descripción."}

{/* Methodology */} Metodología de Enseñanza

Metodología personalizada adaptada a las necesidades de cada estudiante.

{/* Reviews Section */} Reseñas

Este asesor aún no tiene reseñas. ¡Sé el primero en dejar una!

{/* Right Column - Booking Card */}

${asesor.precio_por_hora.toLocaleString()} /hora

Primera sesión con descuento del 20%

¿Qué incluye?

Sesión personalizada uno a uno
Material de apoyo incluido
Seguimiento post-sesión
Garantía de satisfacción

Responde en promedio: menos de 2 horas

) } [V0_FILE]typescriptreact:file="app/asesores/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/asesores/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Search, Filter, Star, MapPin, Clock, BookOpen, ChevronDown, ArrowLeft, Users, Loader2 } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { useAsesores } from "@/hooks/use-asesores" export default function AsesoresPage() { const [searchQuery, setSearchQuery] = useState("") const [showFilters, setShowFilters] = useState(false) const { asesores, loading, error } = useAsesores() // Filter asesores based on search query const filteredAsesores = asesores.filter((asesor) => { const searchLower = searchQuery.toLowerCase() return ( asesor.nombre.toLowerCase().includes(searchLower) || asesor.universidad.toLowerCase().includes(searchLower) || asesor.especialidades.some((esp) => esp.toLowerCase().includes(searchLower)) ) }) return (

{/* Header */}

Volver al Dashboard

{/* Main Content */}

{/* Page Header */}

Encuentra tu Asesor Ideal

Explora asesores verificados de tu universidad

{/* Search and Filters */}

{/* Search Bar */}

setSearchQuery(e.target.value)} className="pl-10 border-gray-300" />

{/* Filter Options */} {showFilters && (

Universidad

Modalidad

Precio por Hora

Calificación

)}

{/* Loading State */} {loading && (

Cargando asesores...

)} {/* Error State */} {!loading && error && (

No se pudieron cargar los asesores

Hubo un problema al conectar con la base de datos. Por favor, intenta nuevamente más tarde.

)} {/* Empty State */} {!loading && !error && filteredAsesores.length === 0 && (

{searchQuery ? "No se encontraron resultados" : "No hay asesores disponibles"}

{searchQuery ? "Intenta con otros términos de búsqueda o ajusta los filtros." : "Aún no hay asesores registrados en la plataforma. Vuelve pronto para encontrar tu asesor ideal." }

{searchQuery && ( )} )} {/* Results */} {!loading && !error && filteredAsesores.length > 0 && ( <>

{filteredAsesores.length} asesores encontrados

{/* Advisor Cards */}

{filteredAsesores.map((asesor) => ( {/* Advisor Header */}

{asesor.nombre .split(" ") .map((n) => n[0]) .join("")}

{asesor.nombre}

{asesor.carrera}

{asesor.rating.toFixed(1)} ({asesor.sesiones_completadas} sesiones)

{/* Specialties */}

{asesor.especialidades.slice(0, 3).map((esp, idx) => ( {esp} ))} {asesor.especialidades.length > 3 && ( +{asesor.especialidades.length - 3} más )}

{/* Info */}

{asesor.universidad}

{asesor.disponibilidad || "Disponibilidad flexible"}

{asesor.modalidad.length > 0 ? asesor.modalidad.join(", ") : "Virtual"}

{/* Description */}

{asesor.descripcion || "Asesor disponible para ayudarte con tus estudios."}

{/* Footer */}

${asesor.precio_por_hora.toLocaleString()} /hora

))}

)}

) } [V0_FILE]typescript:file="app/auth/callback/route.ts" isMerged="true" import { createClient } from "@/lib/supabase/server" import { NextResponse } from "next/server" export async function GET(request: Request) { const { searchParams, origin } = new URL(request.url) const code = searchParams.get("code") const next = searchParams.get("next") ?? "/dashboard" if (code) { const supabase = await createClient() const { data, error } = await supabase.auth.exchangeCodeForSession(code) if (!error && data.user) { // Redirect based on user type const userType = data.user.user_metadata?.tipo || "alumno" const redirectPath = userType === "asesor" ? "/dashboard-asesor" : "/dashboard" return NextResponse.redirect(`${origin}${redirectPath}`) } } // Return the user to an error page with instructions return NextResponse.redirect(`${origin}/auth/error`) } [V0_FILE]typescriptreact:file="app/auth/error/page.tsx" isMerged="true" import Link from "next/link" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { AlertCircle, ArrowLeft } from "lucide-react" export default function AuthErrorPage() { return (

Volver al inicio

Error de Autenticación Hubo un problema al verificar tu cuenta. El enlace puede haber expirado o ya fue utilizado.

) } [V0_FILE]typescriptreact:file="app/calendario-asesor/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CalendarIcon, ArrowLeft, ChevronLeft, ChevronRight, Clock, Plus, MapPin, Video, CheckCircle2, XCircle, AlertCircle, Users, DollarSign, TrendingUp, } from "lucide-react" import { UserMenu } from "@/components/user-menu" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { toast } from "sonner" export default function CalendarioAsesorPage() { const [currentDate, setCurrentDate] = useState(new Date(2025, 0, 1)) const [selectedDate, setSelectedDate] = useState(null) const [isDisponibilidadDialogOpen, setIsDisponibilidadDialogOpen] = useState(false) const [isBloquearDialogOpen, setIsBloquearDialogOpen] = useState(false) // Mock sessions data with status const sesiones = [ { id: 1, fecha: "2025-01-06", hora: "14:00", duracion: 60, alumno: "Juan Díaz", materia: "Programación en Java", tipo: "Virtual", estado: "confirmada", avatar: "/abstract-geometric-shapes.png", }, { id: 2, fecha: "2025-01-06", hora: "16:00", duracion: 60, alumno: "María Rodríguez", materia: "Estructuras de Datos", tipo: "Presencial", estado: "pendiente", avatar: "/portrait-thoughtful-woman.png", }, { id: 3, fecha: "2025-01-08", hora: "10:00", duracion: 60, alumno: "Carlos Méndez", materia: "Algoritmos", tipo: "Virtual", estado: "confirmada", avatar: "/hombre-estudiante.png", }, { id: 4, fecha: "2025-01-10", hora: "15:00", duracion: 60, alumno: "Ana Torres", materia: "Programación en Java", tipo: "Virtual", estado: "confirmada", avatar: "/mujer-estudiante.png", }, { id: 5, fecha: "2025-01-15", hora: "11:00", duracion: 60, alumno: "Pedro Gómez", materia: "Estructuras de Datos", tipo: "Presencial", estado: "pendiente", avatar: "/hombre-estudiante.png", }, ] // Sesiones completadas const sesionesCompletadas = [ { id: 101, fecha: "2024-12-20", hora: "14:00", alumno: "Laura Sánchez", materia: "Programación en Java", tipo: "Virtual", calificacion: 5, avatar: "/portrait-of-a-woman.png", }, { id: 102, fecha: "2024-12-18", hora: "16:00", alumno: "Diego Ruiz", materia: "Algoritmos", tipo: "Presencial", calificacion: 5, avatar: "/portrait-carlos.png", }, { id: 103, fecha: "2024-12-15", hora: "10:00", alumno: "Sofía Morales", materia: "Estructuras de Datos", tipo: "Virtual", calificacion: 4, avatar: "/mujer-estudiante.png", }, ] // Mock disponibilidad const [disponibilidad, setDisponibilidad] = useState([ { dia: "Lunes", horarios: ["09:00-12:00", "14:00-18:00"], activo: true }, { dia: "Martes", horarios: ["10:00-12:00", "15:00-18:00"], activo: true }, { dia: "Miércoles", horarios: ["09:00-12:00", "14:00-17:00"], activo: true }, { dia: "Jueves", horarios: ["10:00-12:00", "14:00-18:00"], activo: true }, { dia: "Viernes", horarios: ["09:00-12:00"], activo: true }, { dia: "Sábado", horarios: [], activo: false }, { dia: "Domingo", horarios: [], activo: false }, ]) const getDaysInMonth = (date: Date) => { const year = date.getFullYear() const month = date.getMonth() const firstDay = new Date(year, month, 1) const lastDay = new Date(year, month + 1, 0) const daysInMonth = lastDay.getDate() const startingDayOfWeek = firstDay.getDay() return { daysInMonth, startingDayOfWeek } } const getSesionesForDate = (date: Date) => { const dateString = date.toISOString().split("T")[0] return sesiones.filter((s) => s.fecha === dateString) } const { daysInMonth, startingDayOfWeek } = getDaysInMonth(currentDate) const previousMonth = () => { setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1)) } const nextMonth = () => { setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1)) } const monthNames = [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre", ] const dayNames = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"] const formatDate = (date: Date) => { return `${date.getDate()} de ${monthNames[date.getMonth()]}` } const proximasSesiones = sesiones.filter((s) => s.estado === "confirmada").slice(0, 5) const sesionesPendientes = sesiones.filter((s) => s.estado === "pendiente") const handleSaveDisponibilidad = () => { setIsDisponibilidadDialogOpen(false) toast.success("Disponibilidad actualizada", { description: "Tus horarios han sido guardados correctamente.", }) } const handleBloquearHorario = () => { setIsBloquearDialogOpen(false) toast.success("Horario bloqueado", { description: "El horario ha sido marcado como no disponible.", }) } // Stats const totalSesiones = sesiones.length + sesionesCompletadas.length const ingresosMes = sesiones.length * 15000 const calificacionPromedio = ( sesionesCompletadas.reduce((sum, s) => sum + s.calificacion, 0) / sesionesCompletadas.length ).toFixed(1) return (

{/* Header */}

{/* Main Content */}

{/* Page Header */}

Mi Calendario

Gestiona tu disponibilidad y visualiza tus sesiones

{/* Stats Cards */}

Sesiones este mes

{sesiones.length}

Pendientes

{sesionesPendientes.length}

Ingresos mes

${ingresosMes.toLocaleString()}

Calificación

{calificacionPromedio}/5

{/* Calendar */}

{monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}

{/* Day names */}

{dayNames.map((day) => (

{day}

))}

{/* Calendar grid */}

{Array.from({ length: startingDayOfWeek }).map((_, index) => (

))} {Array.from({ length: daysInMonth }).map((_, index) => { const day = index + 1 const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day) const sesionesDelDia = getSesionesForDate(date) const isToday = date.toDateString() === new Date().toDateString() const isSelected = selectedDate?.toDateString() === date.toDateString() const hasPendientes = sesionesDelDia.some((s) => s.estado === "pendiente") const hasConfirmadas = sesionesDelDia.some((s) => s.estado === "confirmada") return ( ) })}

{/* Legend */}

Confirmada

Pendiente

Hoy

{/* Sessions for selected date */} {selectedDate && ( Sesiones del {formatDate(selectedDate)} {getSesionesForDate(selectedDate).length > 0 ? (

{getSesionesForDate(selectedDate).map((sesion) => (

{sesion.alumno.split(" ").map((n) => n[0]).join("")}

{sesion.alumno}

{sesion.estado === "pendiente" ? ( Pendiente ) : ( Confirmada )}

{sesion.materia}

{sesion.hora} ({sesion.duracion} min) {sesion.tipo === "Virtual" ? (

) : ( Presencial )}

{sesion.estado === "pendiente" && (

)}

))}

) : (

No hay sesiones programadas para este día

)} )}

{/* Sidebar */}

{/* Tabs for session lists */} Próximas Pendientes Completadas

{proximasSesiones.length > 0 ? ( proximasSesiones.map((sesion) => (

{sesion.alumno.split(" ").map((n) => n[0]).join("")}

{sesion.alumno}

{sesion.fecha} - {sesion.hora}

{sesion.tipo === "Virtual" ?

)) ) : (

No hay sesiones próximas

)}

{sesionesPendientes.length > 0 ? ( sesionesPendientes.map((sesion) => (

{sesion.alumno.split(" ").map((n) => n[0]).join("")}

{sesion.alumno}

{sesion.fecha} - {sesion.hora}

)) ) : (

No hay sesiones pendientes

)}

{sesionesCompletadas.map((sesion) => (

{sesion.alumno.split(" ").map((n) => n[0]).join("")}

{sesion.alumno}

{sesion.fecha}

{[...Array(5)].map((_, i) => ( ★ ))}

))}

{/* Disponibilidad Quick View */} Mi Disponibilidad Horarios configurados

{disponibilidad.filter((d) => d.activo).map((disp) => (

{disp.dia} {disp.horarios.join(", ") || "Sin horarios"}

))}

{/* Quick Actions */}

Acciones Rápidas

) } [V0_FILE]typescriptreact:file="app/configuracion-asesor/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowLeft, Plus, X, Save, DollarSign, BookOpen, Settings } from "lucide-react" import { UserMenu } from "@/components/user-menu" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" export default function ConfiguracionAsesorPage() { const [materias, setMaterias] = useState([ { id: 1, nombre: "Programación en Java", precio: 15000, duracion: 60 }, { id: 2, nombre: "Estructuras de Datos", precio: 20000, duracion: 90 }, { id: 3, nombre: "Algoritmos", precio: 15000, duracion: 60 }, ]) const [newMateria, setNewMateria] = useState({ nombre: "", precio: "", duracion: "60" }) const [isAdding, setIsAdding] = useState(false) const [configuracion, setConfiguracion] = useState({ aceptarAutomatico: false, notificacionesEmail: true, notificacionesPush: true, mostrarTelefono: false, permitirCancelacion: true, tiempoCancelacion: "24", modalidades: { virtual: true, presencial: true, }, }) const handleAddMateria = () => { if (newMateria.nombre && newMateria.precio) { setMaterias([ ...materias, { id: materias.length + 1, nombre: newMateria.nombre, precio: Number.parseInt(newMateria.precio), duracion: Number.parseInt(newMateria.duracion), }, ]) setNewMateria({ nombre: "", precio: "", duracion: "60" }) setIsAdding(false) } } const handleRemoveMateria = (id: number) => { setMaterias(materias.filter((m) => m.id !== id)) } return (

{/* Header */}

{/* Main Content */}

Configuración de Asesoría

Gestiona tus materias, precios y preferencias

Materias y Precios Preferencias Métodos de Pago

Mis Materias Administra las materias que ofreces y sus tarifas

{/* Add new materia form */} {isAdding && (

Nueva Materia

Nombre de la materia setNewMateria({ ...newMateria, nombre: e.target.value })} className="border-gray-300" />

Precio por hora (COP) setNewMateria({ ...newMateria, precio: e.target.value })} className="border-gray-300" />

Duración típica (minutos)

)} {/* Lista de materias existentes */} {materias.map((materia) => (

{materia.nombre}

${materia.precio.toLocaleString()} / hora {materia.duracion} min

))} {materias.length === 0 && !isAdding && (

No has agregado materias aún

)}

Preferencias Generales Configura cómo deseas recibir y gestionar solicitudes {/* Solicitudes */}

Solicitudes

Aceptación automática

Acepta solicitudes sin revisión manual

setConfiguracion({ ...configuracion, aceptarAutomatico: checked }) } />

{/* Notificaciones */}

Notificaciones

Notificaciones por email

Recibe alertas en tu correo

setConfiguracion({ ...configuracion, notificacionesEmail: checked }) } />

Notificaciones push

Recibe alertas en el navegador

setConfiguracion({ ...configuracion, notificacionesPush: checked }) } />

{/* Privacidad */}

Privacidad

Mostrar teléfono en perfil

Permite que estudiantes vean tu número

setConfiguracion({ ...configuracion, mostrarTelefono: checked })} />

{/* Cancelaciones */}

Cancelaciones

Permitir cancelación

Los estudiantes pueden cancelar sesiones

setConfiguracion({ ...configuracion, permitirCancelacion: checked }) } />

{configuracion.permitirCancelacion && (

Tiempo mínimo de anticipación (horas)

)}

{/* Modalidades */}

Modalidades de Asesoría

Virtual

Sesiones por videollamada

setConfiguracion({ ...configuracion, modalidades: { ...configuracion.modalidades, virtual: checked }, }) } />

Presencial

Sesiones en persona

setConfiguracion({ ...configuracion, modalidades: { ...configuracion.modalidades, presencial: checked }, }) } />

Métodos de Pago Configura cómo recibirás tus pagos

Cuenta bancaria

Banco

Tipo de cuenta

Nombre del titular

Nota: Los pagos se procesan de forma segura a través de nuestra plataforma. Recibirás tus ganancias cada 15 días.

) } [V0_FILE]typescriptreact:file="app/dashboard-asesor/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Calendar, MessageSquare, Clock, Star, TrendingUp, DollarSign, Users, Bell, Menu, CheckCircle, AlertCircle, User, Loader2, } from "lucide-react" import { useAuth } from "@/hooks/use-auth" import { UserMenu } from "@/components/user-menu" import { createClient } from "@/lib/supabase/client" interface Session { id: string student_id: string student_nombre: string materia: string fecha: string hora: string tipo: string precio: number estado: string } interface Stats { ganancias_mes: number sesiones_mes: number promedio_calificacion: number estudiantes_activos: number tasa_aceptacion: number horas_mes: number } export default function DashboardAsesorPage() { const { user } = useAuth() const [proximasSesiones, setProximasSesiones] = useState([]) const [solicitudesPendientes, setSolicitudesPendientes] = useState([]) const [loading, setLoading] = useState(true) const [estadisticas, setEstadisticas] = useState({ ganancias_mes: 0, sesiones_mes: 0, promedio_calificacion: 0, estudiantes_activos: 0, tasa_aceptacion: 0, horas_mes: 0, }) useEffect(() => { async function fetchData() { if (!user?.id) { setLoading(false) return } const supabase = createClient() try { // Try to fetch upcoming sessions const { data: sessions } = await supabase .from("bookings") .select("*") .eq("asesor_id", user.id) .eq("status", "confirmed") .gte("scheduled_date", new Date().toISOString().split("T")[0]) .order("scheduled_date", { ascending: true }) .limit(5) if (sessions) { setProximasSesiones( sessions.map((s: any) => ({ id: s.id, student_id: s.student_id, student_nombre: s.student_nombre || "Estudiante", materia: s.subject || "Asesoría", fecha: s.scheduled_date, hora: s.scheduled_time, tipo: s.modality || "Virtual", precio: s.price || 0, estado: s.status, })) ) } // Try to fetch pending requests const { data: pending } = await supabase .from("bookings") .select("*") .eq("asesor_id", user.id) .eq("status", "pending") .order("created_at", { ascending: false }) .limit(5) if (pending) { setSolicitudesPendientes( pending.map((s: any) => ({ id: s.id, student_id: s.student_id, student_nombre: s.student_nombre || "Estudiante", materia: s.subject || "Asesoría", fecha: s.scheduled_date, hora: s.scheduled_time, tipo: s.modality || "Virtual", precio: s.price || 0, estado: s.status, })) ) } // Try to fetch stats from profile const { data: profile } = await supabase .from("profiles") .select("rating, sesiones_completadas") .eq("id", user.id) .single() if (profile) { setEstadisticas((prev) => ({ ...prev, promedio_calificacion: profile.rating || 0, sesiones_mes: profile.sesiones_completadas || 0, })) } } catch (err) { console.log("[v0] Error fetching asesor data:", err) } finally { setLoading(false) } } fetchData() }, [user?.id]) return (

{/* Navigation Header */}

{/* Main Content */}

Hola, {user?.nombre?.split(" ")[0] || "Asesor"}

Gestiona tus sesiones y monitorea tu progreso

{/* Stats Grid */}

Ganancias Este Mes

${estadisticas.ganancias_mes.toLocaleString()}

Actualizado en tiempo real

Sesiones Completadas

{estadisticas.sesiones_mes}

{estadisticas.horas_mes} horas totales

Calificación Promedio

{estadisticas.promedio_calificacion > 0 ? estadisticas.promedio_calificacion.toFixed(1) : "-"}

{estadisticas.promedio_calificacion > 0 && (

{[...Array(5)].map((_, i) => ( ))}

)}

Basado en reseñas de estudiantes

Estudiantes Activos

{estadisticas.estudiantes_activos}

Este mes

{loading ? (

) : (

{/* Left Column - Main Content */}

{/* Pending Requests */} Solicitudes Pendientes {solicitudesPendientes.length > 0 && ( {solicitudesPendientes.length} )} Nuevas solicitudes de asesoría {solicitudesPendientes.length > 0 ? (

{solicitudesPendientes.map((solicitud) => (

{solicitud.student_nombre .split(" ") .map((n) => n[0]) .join("")}

{solicitud.student_nombre}

{solicitud.materia}

{solicitud.fecha} {solicitud.hora} {solicitud.tipo}

))}

) : (

No tienes solicitudes pendientes

Las nuevas solicitudes aparecerán aquí

)} {/* Upcoming Sessions */} Próximas Sesiones Tus asesorías programadas {proximasSesiones.length > 0 ? (

{proximasSesiones.map((sesion) => (

{sesion.student_nombre .split(" ") .map((n) => n[0]) .join("")}

{sesion.student_nombre}

{sesion.materia}

{sesion.fecha} • {sesion.hora} {sesion.tipo}

${sesion.precio.toLocaleString()}

))}

) : (

No tienes sesiones programadas

Las sesiones confirmadas aparecerán aquí

)}

{/* Right Column - Sidebar */}

{/* Performance Card */} Tu Rendimiento

Tasa de Aceptación {estadisticas.tasa_aceptacion > 0 ? `${estadisticas.tasa_aceptacion}%` : "-"}

Satisfacción -

Tiempo de Respuesta -

{/* Quick Actions */}

Acciones Rápidas

{/* Tips Card */}

Consejo

Completa tu perfil con una descripción detallada y tus especialidades para aumentar tu visibilidad en la plataforma.

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Calendar, Search, MessageSquare, Clock, Star, BookOpen, Menu, Bell, Users, Loader2 } from "lucide-react" import { useAuth } from "@/hooks/use-auth" import { UserMenu } from "@/components/user-menu" import { useAsesores, type Asesor } from "@/hooks/use-asesores" import { createClient } from "@/lib/supabase/client" interface Session { id: string asesor_id: string asesor_nombre: string materia: string fecha: string hora: string tipo: string estado: string } export default function DashboardPage() { const { user } = useAuth() const { asesores, loading: loadingAsesores } = useAsesores() const [upcomingSessions, setUpcomingSessions] = useState([]) const [loadingSessions, setLoadingSessions] = useState(true) const [stats, setStats] = useState({ sesiones_completadas: 0, horas_asesoria: 0, asesores_contactados: 0, }) useEffect(() => { async function fetchSessions() { if (!user?.id) { setLoadingSessions(false) return } const supabase = createClient() try { // Try to fetch upcoming sessions for the student const { data, error } = await supabase .from("bookings") .select("*") .eq("student_id", user.id) .gte("scheduled_date", new Date().toISOString().split("T")[0]) .order("scheduled_date", { ascending: true }) .limit(5) if (!error && data) { setUpcomingSessions(data.map((s: any) => ({ id: s.id, asesor_id: s.asesor_id, asesor_nombre: s.asesor_nombre || "Asesor", materia: s.subject || "Asesoría", fecha: s.scheduled_date, hora: s.scheduled_time, tipo: s.modality || "Virtual", estado: s.status, }))) } } catch (err) { console.log("[v0] Error fetching sessions:", err) } finally { setLoadingSessions(false) } } fetchSessions() }, [user?.id]) // Get up to 3 recommended asesores const recommendedAdvisors = asesores.slice(0, 3) return (

{/* Navigation Header */}

{/* Logo */}

{/* Desktop Navigation */} {/* User Menu */}

{/* Main Content */}

{/* Welcome Section */}

Bienvenido, {user?.nombre?.split(" ")[0] || "Usuario"}

Encuentra el apoyo académico que necesitas

{/* Quick Search - Redirects to /buscar */}

{/* Left Column - Main Content */}

{/* Upcoming Sessions */} Próximas Sesiones Tus asesorías programadas {loadingSessions ? (

) : upcomingSessions.length > 0 ? (

{upcomingSessions.map((sesion) => (

{sesion.asesor_nombre .split(" ") .map((n) => n[0]) .join("")}

{sesion.asesor_nombre}

{sesion.materia}

{sesion.fecha} • {sesion.hora} {sesion.tipo}

))}

) : (

No tienes sesiones programadas

)} {/* Recommended Advisors */} Asesores Disponibles Explora asesores verificados {loadingAsesores ? (

) : recommendedAdvisors.length > 0 ? (

{recommendedAdvisors.map((asesor) => (

{asesor.nombre .split(" ") .map((n) => n[0]) .join("")}

{asesor.nombre}

{asesor.especialidades[0] || "Asesoría general"}

{asesor.universidad}

{asesor.rating.toFixed(1)} ({asesor.sesiones_completadas})

${asesor.precio_por_hora.toLocaleString()}/hr

))}

) : (

No hay asesores disponibles en este momento

Vuelve pronto para encontrar tu asesor ideal

)} {recommendedAdvisors.length > 0 && (

)}

{/* Right Column - Sidebar */}

{/* Stats Card */} Tu Progreso

Sesiones completadas {stats.sesiones_completadas}

Horas de asesoría {stats.horas_asesoria}

Asesores contactados {stats.asesores_contactados}

{/* Quick Actions */}

Acciones Rápidas

) } [V0_FILE]typescriptreact:file="app/gestion-asesor/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/gestion-asesor/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { ArrowLeft, Calendar, Clock, ChevronLeft, ChevronRight, Plus, X, Edit2, Save, Trash2, DollarSign, BookOpen, CheckCircle2, AlertCircle, } from "lucide-react" import { UserMenu } from "@/components/user-menu" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { toast } from "sonner" interface HorarioSlot { id: string horaInicio: string horaFin: string } interface DisponibilidadDia { dia: string activo: boolean horarios: HorarioSlot[] } interface Materia { id: number nombre: string descripcion: string precio: number duracion: number activa: boolean } interface BloqueoHorario { id: string fecha: string horaInicio: string horaFin: string motivo: string } export default function GestionAsesorPage() { const [currentDate, setCurrentDate] = useState(new Date(2025, 0, 1)) const [selectedDate, setSelectedDate] = useState(null) // Estados para modales const [isAddHorarioOpen, setIsAddHorarioOpen] = useState(false) const [isEditMateriaOpen, setIsEditMateriaOpen] = useState(false) const [isBloquearOpen, setIsBloquearOpen] = useState(false) const [isAddMateriaOpen, setIsAddMateriaOpen] = useState(false) // Estado de edicion const [editingMateria, setEditingMateria] = useState(null) const [editingDia, setEditingDia] = useState(null) // Nuevo horario temporal const [nuevoHorario, setNuevoHorario] = useState({ horaInicio: "09:00", horaFin: "10:00" }) // Nueva materia temporal const [nuevaMateria, setNuevaMateria] = useState({ nombre: "", descripcion: "", precio: "", duracion: "60", }) // Bloqueo temporal const [nuevoBloqueo, setNuevoBloqueo] = useState({ fecha: "", horaInicio: "09:00", horaFin: "10:00", motivo: "", }) // Disponibilidad semanal const [disponibilidad, setDisponibilidad] = useState([ { dia: "Lunes", activo: true, horarios: [ { id: "1", horaInicio: "09:00", horaFin: "12:00" }, { id: "2", horaInicio: "14:00", horaFin: "18:00" }, ]}, { dia: "Martes", activo: true, horarios: [ { id: "3", horaInicio: "10:00", horaFin: "12:00" }, { id: "4", horaInicio: "15:00", horaFin: "18:00" }, ]}, { dia: "Miércoles", activo: true, horarios: [ { id: "5", horaInicio: "09:00", horaFin: "12:00" }, { id: "6", horaInicio: "14:00", horaFin: "17:00" }, ]}, { dia: "Jueves", activo: true, horarios: [ { id: "7", horaInicio: "10:00", horaFin: "12:00" }, { id: "8", horaInicio: "14:00", horaFin: "18:00" }, ]}, { dia: "Viernes", activo: true, horarios: [ { id: "9", horaInicio: "09:00", horaFin: "13:00" }, ]}, { dia: "Sábado", activo: false, horarios: [] }, { dia: "Domingo", activo: false, horarios: [] }, ]) // Materias const [materias, setMaterias] = useState([ { id: 1, nombre: "Programación en Java", descripcion: "Fundamentos y POO en Java", precio: 15000, duracion: 60, activa: true }, { id: 2, nombre: "Estructuras de Datos", descripcion: "Listas, árboles, grafos y algoritmos", precio: 20000, duracion: 90, activa: true }, { id: 3, nombre: "Algoritmos", descripcion: "Diseño y análisis de algoritmos", precio: 15000, duracion: 60, activa: true }, { id: 4, nombre: "Base de Datos", descripcion: "SQL, diseño y normalización", precio: 18000, duracion: 60, activa: false }, ]) // Bloqueos de horario const [bloqueos, setBloqueos] = useState([ { id: "b1", fecha: "2025-01-10", horaInicio: "14:00", horaFin: "18:00", motivo: "Cita médica" }, { id: "b2", fecha: "2025-01-15", horaInicio: "09:00", horaFin: "12:00", motivo: "Examen personal" }, ]) // Funciones del calendario const getDaysInMonth = (date: Date) => { const year = date.getFullYear() const month = date.getMonth() const firstDay = new Date(year, month, 1) const lastDay = new Date(year, month + 1, 0) const daysInMonth = lastDay.getDate() const startingDayOfWeek = firstDay.getDay() return { daysInMonth, startingDayOfWeek } } const { daysInMonth, startingDayOfWeek } = getDaysInMonth(currentDate) const previousMonth = () => { setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1)) } const nextMonth = () => { setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1)) } const monthNames = [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre", ] const dayNames = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"] const diasSemana = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"] const getDateString = (date: Date) => date.toISOString().split("T")[0] const formatDate = (date: Date) => `${date.getDate()} de ${monthNames[date.getMonth()]}` // Obtener disponibilidad para un dia especifico const getDisponibilidadForDate = (date: Date) => { const dayOfWeek = date.getDay() const diaName = diasSemana[dayOfWeek] const diaConfig = disponibilidad.find(d => d.dia === diaName) if (!diaConfig || !diaConfig.activo) return null // Verificar si hay bloqueo para esta fecha const dateString = getDateString(date) const bloqueo = bloqueos.find(b => b.fecha === dateString) return { config: diaConfig, bloqueo } } // Generar slots de hora disponibles const generateTimeSlots = (horarios: HorarioSlot[]) => { const slots: string[] = [] horarios.forEach(h => { const start = parseInt(h.horaInicio.split(":")[0]) const end = parseInt(h.horaFin.split(":")[0]) for (let hour = start; hour < end; hour++) { slots.push(`${hour.toString().padStart(2, "0")}:00`) } }) return slots.sort() } // Handlers para disponibilidad const toggleDiaActivo = (dia: string) => { setDisponibilidad(prev => prev.map(d => d.dia === dia ? { ...d, activo: !d.activo } : d )) toast.success(`${dia} ${disponibilidad.find(d => d.dia === dia)?.activo ? "desactivado" : "activado"}`) } const addHorarioToDia = (dia: string) => { setEditingDia(dia) setNuevoHorario({ horaInicio: "09:00", horaFin: "10:00" }) setIsAddHorarioOpen(true) } const handleSaveHorario = () => { if (!editingDia) return const newId = `h-${Date.now()}` setDisponibilidad(prev => prev.map(d => d.dia === editingDia ? { ...d, horarios: [...d.horarios, { id: newId, ...nuevoHorario }] } : d )) setIsAddHorarioOpen(false) toast.success("Horario agregado correctamente") } const removeHorarioFromDia = (dia: string, horarioId: string) => { setDisponibilidad(prev => prev.map(d => d.dia === dia ? { ...d, horarios: d.horarios.filter(h => h.id !== horarioId) } : d )) toast.success("Horario eliminado") } // Handlers para materias const handleAddMateria = () => { if (!nuevaMateria.nombre || !nuevaMateria.precio) { toast.error("Completa los campos requeridos") return } const newMateria: Materia = { id: Date.now(), nombre: nuevaMateria.nombre, descripcion: nuevaMateria.descripcion, precio: parseInt(nuevaMateria.precio), duracion: parseInt(nuevaMateria.duracion), activa: true, } setMaterias(prev => [...prev, newMateria]) setNuevaMateria({ nombre: "", descripcion: "", precio: "", duracion: "60" }) setIsAddMateriaOpen(false) toast.success("Materia agregada correctamente") } const handleEditMateria = (materia: Materia) => { setEditingMateria(materia) setIsEditMateriaOpen(true) } const handleSaveMateria = () => { if (!editingMateria) return setMaterias(prev => prev.map(m => m.id === editingMateria.id ? editingMateria : m )) setIsEditMateriaOpen(false) toast.success("Materia actualizada correctamente") } const handleDeleteMateria = (id: number) => { setMaterias(prev => prev.filter(m => m.id !== id)) toast.success("Materia eliminada") } const toggleMateriaActiva = (id: number) => { setMaterias(prev => prev.map(m => m.id === id ? { ...m, activa: !m.activa } : m )) } // Handlers para bloqueos const handleAddBloqueo = () => { if (!nuevoBloqueo.fecha) { toast.error("Selecciona una fecha") return } const newBloqueo: BloqueoHorario = { id: `b-${Date.now()}`, ...nuevoBloqueo, } setBloqueos(prev => [...prev, newBloqueo]) setNuevoBloqueo({ fecha: "", horaInicio: "09:00", horaFin: "10:00", motivo: "" }) setIsBloquearOpen(false) toast.success("Horario bloqueado correctamente") } const removeBloqueo = (id: string) => { setBloqueos(prev => prev.filter(b => b.id !== id)) toast.success("Bloqueo eliminado") } // Generar opciones de hora const horasOptions = Array.from({ length: 15 }, (_, i) => { const hour = i + 7 return `${hour.toString().padStart(2, "0")}:00` }) return (

{/* Header */}

{/* Main Content */}

{/* Page Header */}

Gestión de Asesorías

Administra tus horarios, materias y precios

Horarios Materias Precios {/* TAB: HORARIOS */}

{/* Calendario */}

{monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}

Visualiza tu disponibilidad y bloqueos {/* Day names */}

{dayNames.map((day) => (

{day}

))}

{/* Calendar grid */}

{Array.from({ length: startingDayOfWeek }).map((_, index) => (

))} {Array.from({ length: daysInMonth }).map((_, index) => { const day = index + 1 const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day) const dispData = getDisponibilidadForDate(date) const isToday = date.toDateString() === new Date().toDateString() const isSelected = selectedDate?.toDateString() === date.toDateString() const hasBloqueo = dispData?.bloqueo !== undefined const isDisponible = dispData?.config?.activo && !hasBloqueo return ( ) })}

{/* Legend */}

Disponible

Bloqueado

Sin disponibilidad

{/* Detalle del dia seleccionado */} {selectedDate && ( {formatDate(selectedDate)} ({diasSemana[selectedDate.getDay()]}) {(() => { const dispData = getDisponibilidadForDate(selectedDate) if (dispData?.bloqueo) { return (

Horario bloqueado

{dispData.bloqueo.horaInicio} - {dispData.bloqueo.horaFin}

{dispData.bloqueo.motivo && (

Motivo: {dispData.bloqueo.motivo}

)}

) } if (!dispData?.config?.activo) { return (

No tienes disponibilidad configurada para {diasSemana[selectedDate.getDay()]}

) } const slots = generateTimeSlots(dispData.config.horarios) return (

Horarios disponibles:

{slots.map((slot) => (

{slot}

))}

) })()} )}

{/* Sidebar - Configuracion semanal */}

Disponibilidad Semanal

Configura tus horarios por día {disponibilidad.map((dia) => (

toggleDiaActivo(dia.dia)} /> {dia.dia}

{dia.activo && ( )}

{dia.activo && dia.horarios.length > 0 && (

{dia.horarios.map((horario) => (

{horario.horaInicio} - {horario.horaFin}

))}

)} {dia.activo && dia.horarios.length === 0 && (

Sin horarios configurados

)}

))} {/* Bloqueos activos */}

Bloqueos Activos

{bloqueos.length === 0 ? (

No tienes bloqueos activos

) : (

{bloqueos.map((bloqueo) => (

{bloqueo.fecha}

{bloqueo.horaInicio} - {bloqueo.horaFin}

{bloqueo.motivo &&

{bloqueo.motivo}

}

))}

)}

{/* TAB: MATERIAS */}

Mis Materias Administra las materias que ofreces

{materias.map((materia) => (

{materia.nombre}

{!materia.activa && ( Inactiva )}

toggleMateriaActiva(materia.id)} />

{materia.descripcion}

${materia.precio.toLocaleString()} /hora

{materia.duracion} min

))}

{materias.length === 0 && (

No has agregado materias aún

)} {/* TAB: PRECIOS */}

Resumen de Precios Vista general de tus tarifas por materia

{materias.filter(m => m.activa).map((materia) => (

{materia.nombre}

{materia.duracion} minutos por sesión

${materia.precio.toLocaleString()}

por hora

))}

Edición Rápida de Precios Modifica los precios de todas tus materias

{materias.map((materia) => (

{materia.nombre}

$ { const newPrecio = parseInt(e.target.value) || 0 setMaterias(prev => prev.map(m => m.id === materia.id ? { ...m, precio: newPrecio } : m )) }} className="w-28 border-gray-300" /> /hr

))}

{/* Estadisticas de precios */} Estadísticas de Precios

${Math.min(...materias.map(m => m.precio)).toLocaleString()}

Precio mínimo

${Math.max(...materias.map(m => m.precio)).toLocaleString()}

Precio máximo

${Math.round(materias.reduce((sum, m) => sum + m.precio, 0) / materias.length).toLocaleString()}

Precio promedio

{materias.filter(m => m.activa).length}

Materias activas

{/* Dialog: Agregar Horario */} {/* Dialog: Bloquear Horario */} {/* Dialog: Agregar Materia */}