feat: add UI components and improve layout
- Introduced new UI components: Input, Label, ScrollArea, Separator, Sheet, Skeleton, Table. - Implemented utility function for class name merging. - Enhanced the authenticated layout with a sidebar and user menu. - Added login functionality with improved UI and error handling. - Integrated theme provider for consistent theming across the application. - Updated styles with Tailwind CSS and custom properties for dark mode support. - Refactored routes to utilize new components and improve user experience.
This commit is contained in:
@@ -1,22 +1,131 @@
|
||||
import { useSupabaseAuth } from '@/auth/supabase'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { createFileRoute, useRouter } from "@tanstack/react-router"
|
||||
import { useMemo, useState } from "react"
|
||||
import { supabase, useSupabaseAuth } from "@/auth/supabase"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Plus, RefreshCcw } from "lucide-react"
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/planes')({
|
||||
// --- Tipo correcto según tu esquema ---
|
||||
export type PlanDeEstudios = {
|
||||
id: string
|
||||
nombre: string
|
||||
nivel: string | null
|
||||
objetivo_general: string | null
|
||||
perfil_ingreso: string | null
|
||||
perfil_egreso: string | null
|
||||
duracion: string | null
|
||||
total_creditos: number | null
|
||||
competencias_genericas: string | null
|
||||
competencias_especificas: string | null
|
||||
sistema_evaluacion: string | null
|
||||
indicadores_desempeno: string | null
|
||||
estado: string | null
|
||||
fecha_creacion: string | null // timestamp with time zone → string ISO
|
||||
pertinencia: string | null
|
||||
prompt: string | null
|
||||
carrera_id: string | null // uuid
|
||||
}
|
||||
|
||||
export const Route = createFileRoute("/_authenticated/planes")({
|
||||
component: RouteComponent,
|
||||
loader: async () => {
|
||||
const { data, error } = await supabase
|
||||
.from("plan_estudios")
|
||||
.select("*")
|
||||
.order("fecha_creacion", { ascending: false })
|
||||
.limit(100)
|
||||
|
||||
if (error) throw new Error(error.message)
|
||||
return data as PlanDeEstudios[]
|
||||
}
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
const auth = useSupabaseAuth()
|
||||
console.log(auth.user);
|
||||
const [q, setQ] = useState("")
|
||||
const data = Route.useLoaderData()
|
||||
const router = useRouter()
|
||||
|
||||
return <div>
|
||||
<h2>Hello "/_authenticated/planes"!</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
auth.logout()
|
||||
}}
|
||||
>
|
||||
Logout {auth.isAuthenticated}
|
||||
</button>
|
||||
</div>
|
||||
const filtered = useMemo(() => {
|
||||
const term = q.trim().toLowerCase()
|
||||
if (!term || !data) return data
|
||||
return data.filter((p) =>
|
||||
[p.nombre, p.nivel, p.estado]
|
||||
.filter(Boolean)
|
||||
.some((v) => String(v).toLowerCase().includes(term))
|
||||
)
|
||||
}, [q, data])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<CardTitle className="text-xl">Planes de estudio</CardTitle>
|
||||
<div className="flex w-full items-center gap-2 md:w-auto">
|
||||
<div className="relative w-full md:w-80">
|
||||
<Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar por nombre, nivel o estado…" />
|
||||
</div>
|
||||
<Button variant="outline" size="icon" onClick={() => router.invalidate()} title="Recargar">
|
||||
<RefreshCcw className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button>
|
||||
<Plus className="mr-2 h-4 w-4" /> Nuevo plan
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nombre</TableHead>
|
||||
<TableHead className="hidden md:table-cell">Nivel</TableHead>
|
||||
<TableHead className="hidden md:table-cell">Créditos</TableHead>
|
||||
<TableHead>Duración</TableHead>
|
||||
<TableHead>Estado</TableHead>
|
||||
<TableHead className="hidden md:table-cell">Creado</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered?.map((p) => (
|
||||
<TableRow key={p.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-medium">{p.nombre}</TableCell>
|
||||
<TableCell className="hidden md:table-cell">{p.nivel ?? "—"}</TableCell>
|
||||
<TableCell className="hidden md:table-cell">{p.total_creditos ?? "—"}</TableCell>
|
||||
<TableCell>{p.duracion ?? "—"}</TableCell>
|
||||
<TableCell>
|
||||
{p.estado ? (
|
||||
<Badge variant={p.estado === "activo" ? "default" : p.estado === "en revisión" ? "secondary" : "outline"}>
|
||||
{p.estado}
|
||||
</Badge>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="hidden md:table-cell">
|
||||
{p.fecha_creacion ? new Date(p.fecha_creacion).toLocaleDateString() : "—"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{!filtered?.length && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center text-sm text-muted-foreground">
|
||||
Sin resultados
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Logueado como: <strong>{auth.user?.email}</strong>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user