Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 roberto.silva
|
9fd816bfa1 |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -7,6 +7,13 @@ import type { AsignaturaDetail } from '@/data'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import {
|
||||
Tooltip,
|
||||
@@ -14,6 +21,7 @@ import {
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
import { usePlanAsignaturas } from '@/data'
|
||||
import { useSubject, useUpdateAsignatura } from '@/data/hooks/useSubjects'
|
||||
|
||||
export interface BibliografiaEntry {
|
||||
@@ -59,8 +67,12 @@ export default function AsignaturaDetailPage() {
|
||||
const { asignaturaId } = useParams({
|
||||
from: '/planes/$planId/asignaturas/$asignaturaId',
|
||||
})
|
||||
const { planId } = useParams({
|
||||
from: '/planes/$planId/asignaturas/$asignaturaId',
|
||||
})
|
||||
const { data: asignaturaApi } = useSubject(asignaturaId)
|
||||
|
||||
const { data: asignaturasApi, isLoading: loadingAsig } =
|
||||
usePlanAsignaturas(planId)
|
||||
const [asignatura, setAsignatura] = useState<AsignaturaDetail | null>(null)
|
||||
const updateAsignatura = useUpdateAsignatura()
|
||||
|
||||
@@ -81,16 +93,54 @@ export default function AsignaturaDetailPage() {
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const asignaturaSeriada = useMemo(() => {
|
||||
if (!asignaturaApi?.prerrequisito_asignatura_id || !asignaturasApi)
|
||||
return null
|
||||
return asignaturasApi.find(
|
||||
(asig) => asig.id === asignaturaApi.prerrequisito_asignatura_id,
|
||||
)
|
||||
}, [asignaturaApi, asignaturasApi])
|
||||
const requisitosFormateados = useMemo(() => {
|
||||
if (!asignaturaSeriada) return []
|
||||
return [
|
||||
{
|
||||
type: 'Pre-requisito',
|
||||
code: asignaturaSeriada.codigo,
|
||||
name: asignaturaSeriada.nombre,
|
||||
id: asignaturaSeriada.id, // Guardamos el ID para el select
|
||||
},
|
||||
]
|
||||
}, [asignaturaSeriada])
|
||||
|
||||
const handleUpdatePrerrequisito = (newId: string | null) => {
|
||||
updateAsignatura.mutate({
|
||||
asignaturaId,
|
||||
patch: {
|
||||
prerrequisito_asignatura_id: newId,
|
||||
},
|
||||
})
|
||||
}
|
||||
/* ---------- sincronizar API ---------- */
|
||||
useEffect(() => {
|
||||
if (asignaturaApi) setAsignatura(asignaturaApi)
|
||||
}, [asignaturaApi])
|
||||
console.log(requisitosFormateados)
|
||||
|
||||
return <DatosGenerales onPersistDato={handlePersistDatoGeneral} />
|
||||
if (asignaturaApi) setAsignatura(asignaturaApi)
|
||||
}, [asignaturaApi, requisitosFormateados])
|
||||
|
||||
return (
|
||||
<DatosGenerales
|
||||
pre={requisitosFormateados}
|
||||
availableSubjects={asignaturasApi}
|
||||
onPersistDato={handlePersistDatoGeneral}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DatosGenerales({
|
||||
onPersistDato,
|
||||
pre,
|
||||
availableSubjects,
|
||||
}: {
|
||||
onPersistDato: (clave: string, value: string) => void
|
||||
}) {
|
||||
@@ -265,18 +315,19 @@ function DatosGenerales({
|
||||
<InfoCard
|
||||
title="Requisitos y Seriación"
|
||||
type="requirements"
|
||||
initialContent={[
|
||||
{
|
||||
type: 'Pre-requisito',
|
||||
code: 'PA-301',
|
||||
name: 'Programación Avanzada',
|
||||
initialContent={pre}
|
||||
// Pasamos las materias del plan para el Select (excluyendo la actual)
|
||||
availableSubjects={
|
||||
availableSubjects?.filter((a) => a.id !== asignaturaId) || []
|
||||
}
|
||||
onPersist={({ value }) => {
|
||||
updateAsignatura.mutate({
|
||||
asignaturaId,
|
||||
patch: {
|
||||
prerrequisito_asignatura_id: value, // value ya viene como ID o null desde handleSave
|
||||
},
|
||||
{
|
||||
type: 'Co-requisito',
|
||||
code: 'MAT-201',
|
||||
name: 'Matemáticas Discretas',
|
||||
},
|
||||
]}
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Tarjeta de Evaluación */}
|
||||
@@ -316,6 +367,7 @@ interface InfoCardProps {
|
||||
containerRef?: React.RefObject<HTMLDivElement | null>
|
||||
forceEditToken?: number
|
||||
highlightToken?: number
|
||||
availableSubjects?: any
|
||||
}
|
||||
|
||||
function InfoCard({
|
||||
@@ -332,6 +384,7 @@ function InfoCard({
|
||||
containerRef,
|
||||
forceEditToken,
|
||||
highlightToken,
|
||||
availableSubjects,
|
||||
}: InfoCardProps) {
|
||||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [isHighlighted, setIsHighlighted] = useState(false)
|
||||
@@ -349,7 +402,8 @@ function InfoCard({
|
||||
useEffect(() => {
|
||||
setData(initialContent)
|
||||
setTempText(initialContent)
|
||||
|
||||
console.log(data)
|
||||
console.log(initialContent)
|
||||
if (type === 'evaluation') {
|
||||
const raw = Array.isArray(initialContent) ? initialContent : []
|
||||
const rows: Array<CriterioEvaluacionRowDraft> = raw
|
||||
@@ -392,6 +446,8 @@ function InfoCard({
|
||||
|
||||
const handleSave = () => {
|
||||
console.log('clave, valor:', clave, String(tempText ?? ''))
|
||||
console.log(clave)
|
||||
console.log(tempText)
|
||||
|
||||
if (type === 'evaluation') {
|
||||
const cleaned: Array<CriterioEvaluacionRow> = []
|
||||
@@ -422,6 +478,25 @@ function InfoCard({
|
||||
void onPersist?.({ type, clave, value: cleaned })
|
||||
return
|
||||
}
|
||||
if (type === 'requirements') {
|
||||
console.log('entre aqui ')
|
||||
|
||||
// Si tempText es un array y tiene elementos, tomamos el ID del primero
|
||||
// Si es "none" o está vacío, mandamos null (para limpiar la seriación)
|
||||
const prerequisiteId =
|
||||
Array.isArray(tempText) && tempText.length > 0 ? tempText[0].id : null
|
||||
|
||||
setData(tempText) // Actualiza la vista local
|
||||
setIsEditing(false)
|
||||
|
||||
// Mandamos el ID específico a la base de datos
|
||||
void onPersist?.({
|
||||
type,
|
||||
clave: 'prerrequisito_asignatura_id', // Forzamos la columna correcta
|
||||
value: prerequisiteId,
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setData(tempText)
|
||||
setIsEditing(false)
|
||||
@@ -541,7 +616,52 @@ function InfoCard({
|
||||
<CardContent className="pt-4">
|
||||
{isEditing ? (
|
||||
<div className="space-y-3">
|
||||
{type === 'evaluation' ? (
|
||||
{/* Condicionales de edición según el tipo */}
|
||||
{type === 'requirements' ? (
|
||||
<div className="space-y-3">
|
||||
<label className="text-xs font-medium text-slate-500">
|
||||
Materia de Seriación
|
||||
</label>
|
||||
<Select
|
||||
value={tempText?.[0]?.id || 'none'}
|
||||
onValueChange={(val) => {
|
||||
const selected = availableSubjects?.find(
|
||||
(s) => s.id === val,
|
||||
)
|
||||
if (val === 'none' || !selected) {
|
||||
console.log('guardando')
|
||||
|
||||
setTempText([])
|
||||
} else {
|
||||
console.log('hola')
|
||||
|
||||
setTempText([
|
||||
{
|
||||
id: selected.id,
|
||||
type: 'Pre-requisito',
|
||||
code: selected.codigo,
|
||||
name: selected.nombre,
|
||||
},
|
||||
])
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecciona una materia" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">
|
||||
Ninguna (Sin seriación)
|
||||
</SelectItem>
|
||||
{availableSubjects?.map((asig) => (
|
||||
<SelectItem key={asig.id} value={asig.id}>
|
||||
{asig.codigo} - {asig.nombre}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
) : type === 'evaluation' ? (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
{evalRows.map((row) => (
|
||||
@@ -563,85 +683,36 @@ function InfoCard({
|
||||
)
|
||||
}}
|
||||
/>
|
||||
|
||||
<Input
|
||||
value={row.porcentaje}
|
||||
placeholder="%"
|
||||
type="number"
|
||||
min={1}
|
||||
max={100}
|
||||
step={1}
|
||||
inputMode="numeric"
|
||||
onChange={(e) => {
|
||||
const raw = e.target.value
|
||||
// Solo permitir '' o dígitos
|
||||
if (raw !== '' && !/^\d+$/.test(raw)) return
|
||||
|
||||
if (raw === '') {
|
||||
setEvalRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.id === row.id
|
||||
? {
|
||||
id: r.id,
|
||||
criterio: r.criterio,
|
||||
porcentaje: '',
|
||||
}
|
||||
: r,
|
||||
),
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
const n = Number(raw)
|
||||
if (!Number.isFinite(n)) return
|
||||
const porcentaje = Math.trunc(n)
|
||||
if (porcentaje < 1 || porcentaje > 100) return
|
||||
|
||||
// No permitir suma > 100
|
||||
setEvalRows((prev) => {
|
||||
const next = prev.map((r) =>
|
||||
r.id === row.id
|
||||
? {
|
||||
id: r.id,
|
||||
criterio: r.criterio,
|
||||
porcentaje: raw,
|
||||
}
|
||||
: r,
|
||||
r.id === row.id ? { ...r, porcentaje: raw } : r,
|
||||
)
|
||||
const total = next.reduce(
|
||||
(acc, r) => acc + (Number(r.porcentaje) || 0),
|
||||
0,
|
||||
)
|
||||
|
||||
const total = next.reduce((acc, r) => {
|
||||
const v = String(r.porcentaje).trim()
|
||||
if (!v) return acc
|
||||
const nn = Number(v)
|
||||
if (!Number.isFinite(nn)) return acc
|
||||
const vv = Math.trunc(nn)
|
||||
if (vv < 1 || vv > 100) return acc
|
||||
return acc + vv
|
||||
}, 0)
|
||||
|
||||
return total > 100 ? prev : next
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="flex w-[1ch] items-center justify-center text-sm text-slate-600"
|
||||
aria-hidden
|
||||
>
|
||||
%
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-slate-600">%</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-red-600 hover:bg-red-50"
|
||||
onClick={() => {
|
||||
onClick={() =>
|
||||
setEvalRows((prev) =>
|
||||
prev.filter((r) => r.id !== row.id),
|
||||
)
|
||||
}}
|
||||
aria-label="Quitar renglón"
|
||||
title="Quitar"
|
||||
}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
@@ -651,22 +722,15 @@ function InfoCard({
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span
|
||||
className={
|
||||
'text-sm ' +
|
||||
(evaluationTotal === 100
|
||||
? 'text-muted-foreground'
|
||||
: 'text-destructive font-semibold')
|
||||
}
|
||||
className={`text-sm ${evaluationTotal === 100 ? 'text-muted-foreground' : 'text-destructive font-semibold'}`}
|
||||
>
|
||||
Total: {evaluationTotal}/100
|
||||
</span>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-emerald-700 hover:bg-emerald-50"
|
||||
onClick={() => {
|
||||
// Agregar una fila vacía (siempre permitido)
|
||||
onClick={() =>
|
||||
setEvalRows((prev) => [
|
||||
...prev,
|
||||
{
|
||||
@@ -675,7 +739,7 @@ function InfoCard({
|
||||
porcentaje: '',
|
||||
},
|
||||
])
|
||||
}}
|
||||
}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" /> Agregar renglón
|
||||
</Button>
|
||||
@@ -689,28 +753,15 @@ function InfoCard({
|
||||
className="min-h-30 text-sm leading-relaxed"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Botones de acción comunes */}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setIsEditing(false)
|
||||
if (type === 'evaluation') {
|
||||
const raw = Array.isArray(data) ? data : []
|
||||
setEvalRows(
|
||||
raw.map((r: CriterioEvaluacionRow) => ({
|
||||
id: crypto.randomUUID(),
|
||||
criterio:
|
||||
typeof r.criterio === 'string' ? r.criterio : '',
|
||||
porcentaje:
|
||||
typeof r.porcentaje === 'number'
|
||||
? String(Math.trunc(r.porcentaje))
|
||||
: typeof r.porcentaje === 'string'
|
||||
? String(Math.trunc(Number(r.porcentaje)))
|
||||
: '',
|
||||
})),
|
||||
)
|
||||
}
|
||||
// Lógica de reset si es necesario...
|
||||
}}
|
||||
>
|
||||
Cancelar
|
||||
@@ -726,6 +777,7 @@ function InfoCard({
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Modo Visualización */
|
||||
<div className="text-sm leading-relaxed text-slate-600">
|
||||
{type === 'text' &&
|
||||
(data ? (
|
||||
@@ -734,9 +786,7 @@ function InfoCard({
|
||||
<p className="text-slate-400 italic">Sin información.</p>
|
||||
))}
|
||||
{type === 'requirements' && <RequirementsView items={data} />}
|
||||
{type === 'evaluation' && (
|
||||
<EvaluationView items={data as Array<CriterioEvaluacionRow>} />
|
||||
)}
|
||||
{type === 'evaluation' && <EvaluationView items={data} />}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
@@ -191,7 +191,7 @@ export async function subjects_get(subjectId: UUID): Promise<AsignaturaDetail> {
|
||||
.from('asignaturas')
|
||||
.select(
|
||||
`
|
||||
id,plan_estudio_id,estructura_id,codigo,nombre,tipo,creditos,numero_ciclo,linea_plan_id,orden_celda,estado,datos,contenido_tematico,horas_academicas,horas_independientes,asignatura_hash,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,criterios_de_evaluacion,
|
||||
id,plan_estudio_id,estructura_id,codigo,nombre,tipo,creditos,numero_ciclo,linea_plan_id,orden_celda,estado,datos,contenido_tematico,horas_academicas,horas_independientes,asignatura_hash,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,criterios_de_evaluacion,prerrequisito_asignatura_id,
|
||||
planes_estudio(
|
||||
id,carrera_id,estructura_id,nombre,nivel,tipo_ciclo,numero_ciclos,datos,estado_actual_id,activo,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,
|
||||
carreras(id,facultad_id,nombre,nombre_corto,clave_sep,activa, facultades(id,nombre,nombre_corto,color,icono))
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
Plus,
|
||||
ChevronDown,
|
||||
AlertTriangle,
|
||||
GripVertical,
|
||||
Trash2,
|
||||
Pencil,
|
||||
} from 'lucide-react'
|
||||
@@ -45,33 +46,16 @@ import {
|
||||
useUpdateAsignatura,
|
||||
useUpdateLinea,
|
||||
} from '@/data'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
|
||||
// --- Mapeadores (Fuera del componente para mayor limpieza) ---
|
||||
const palette = [
|
||||
'#4F46E5', // índigo
|
||||
'#7C3AED', // violeta
|
||||
'#EA580C', // naranja
|
||||
'#059669', // esmeralda
|
||||
'#DC2626', // rojo
|
||||
'#0891B2', // cyan
|
||||
'#CA8A04', // ámbar
|
||||
'#C026D3', // fucsia
|
||||
]
|
||||
|
||||
const mapLineasToLineaCurricular = (
|
||||
lineasApi: Array<any> = [],
|
||||
): Array<LineaCurricular> => {
|
||||
return lineasApi.map((linea, index) => ({
|
||||
return lineasApi.map((linea) => ({
|
||||
id: linea.id,
|
||||
nombre: linea.nombre,
|
||||
orden: linea.orden ?? 0,
|
||||
color: palette[index % palette.length],
|
||||
color: '#1976d2',
|
||||
}))
|
||||
}
|
||||
|
||||
@@ -137,216 +121,52 @@ function StatItem({
|
||||
)
|
||||
}
|
||||
|
||||
import * as Icons from 'lucide-react'
|
||||
|
||||
const estadoConfig: Record<
|
||||
Asignatura['estado'],
|
||||
{
|
||||
label: string
|
||||
dot: string
|
||||
soft: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
> = {
|
||||
borrador: {
|
||||
label: 'Borrador',
|
||||
dot: 'bg-slate-500',
|
||||
soft: 'bg-slate-100 text-slate-700',
|
||||
icon: Icons.FileText,
|
||||
},
|
||||
revisada: {
|
||||
label: 'Revisada',
|
||||
dot: 'bg-amber-500',
|
||||
soft: 'bg-amber-100 text-amber-700',
|
||||
icon: Icons.ScanSearch,
|
||||
},
|
||||
aprobada: {
|
||||
label: 'Aprobada',
|
||||
dot: 'bg-emerald-500',
|
||||
soft: 'bg-emerald-100 text-emerald-700',
|
||||
icon: Icons.BadgeCheck,
|
||||
},
|
||||
generando: {
|
||||
label: 'Generando',
|
||||
dot: 'bg-sky-500',
|
||||
soft: 'bg-sky-100 text-sky-700',
|
||||
icon: Icons.LoaderCircle,
|
||||
},
|
||||
}
|
||||
|
||||
function hexToRgba(hex: string, alpha: number) {
|
||||
const clean = hex.replace('#', '')
|
||||
const bigint = parseInt(clean, 16)
|
||||
const r = (bigint >> 16) & 255
|
||||
const g = (bigint >> 8) & 255
|
||||
const b = bigint & 255
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`
|
||||
}
|
||||
|
||||
function AsignaturaCardItem({
|
||||
asignatura,
|
||||
lineaColor,
|
||||
lineaNombre,
|
||||
onDragStart,
|
||||
isDragging,
|
||||
onClick,
|
||||
}: {
|
||||
asignatura: Asignatura
|
||||
lineaColor: string
|
||||
lineaNombre?: string
|
||||
onDragStart: (e: React.DragEvent, id: string) => void
|
||||
isDragging: boolean
|
||||
onClick: () => void
|
||||
}) {
|
||||
const estado = estadoConfig[asignatura.estado] ?? estadoConfig.borrador
|
||||
const EstadoIcon = estado.icon
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={150}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
draggable
|
||||
onDragStart={(e) => onDragStart(e, asignatura.id)}
|
||||
onClick={onClick}
|
||||
className={[
|
||||
'group relative h-[200px] w-[272px] shrink-0 overflow-hidden rounded-[22px] border text-left',
|
||||
'transition-all duration-300 ease-out',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30',
|
||||
'active:cursor-grabbing cursor-grab',
|
||||
className={`group cursor-grab rounded-lg border bg-white p-3 shadow-sm transition-all active:cursor-grabbing ${
|
||||
isDragging
|
||||
? 'scale-[0.985] opacity-45 shadow-none'
|
||||
: 'hover:-translate-y-1 hover:shadow-lg',
|
||||
].join(' ')}
|
||||
style={{
|
||||
borderColor: hexToRgba(lineaColor, 0.18),
|
||||
background: `
|
||||
radial-gradient(circle at top right, ${hexToRgba(lineaColor, 0.22)} 0%, transparent 34%),
|
||||
linear-gradient(180deg, ${hexToRgba(lineaColor, 0.12)} 0%, ${hexToRgba(lineaColor, 0.04)} 42%, var(--card) 100%)
|
||||
`,
|
||||
}}
|
||||
title={asignatura.nombre}
|
||||
? 'scale-95 opacity-40'
|
||||
: 'hover:border-teal-400 hover:shadow-md'
|
||||
}`}
|
||||
>
|
||||
{/* franja */}
|
||||
<div
|
||||
className="absolute inset-x-0 top-0 h-2"
|
||||
style={{ backgroundColor: lineaColor }}
|
||||
/>
|
||||
|
||||
{/* glow decorativo */}
|
||||
<div
|
||||
className="absolute -top-10 -right-10 h-28 w-28 rounded-full blur-2xl transition-transform duration-500 group-hover:scale-110"
|
||||
style={{ backgroundColor: hexToRgba(lineaColor, 0.22) }}
|
||||
/>
|
||||
|
||||
<div className="relative flex h-full flex-col p-4">
|
||||
{/* top */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div
|
||||
className="inline-flex h-8 max-w-[200px] items-center gap-1.5 rounded-full border px-2.5 text-[11px] font-semibold"
|
||||
style={{
|
||||
borderColor: hexToRgba(lineaColor, 0.2),
|
||||
backgroundColor: hexToRgba(lineaColor, 0.1),
|
||||
color: lineaColor,
|
||||
}}
|
||||
>
|
||||
<Icons.KeyRound className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="truncate">{asignatura.clave || 'Sin clave'}</span>
|
||||
</div>
|
||||
|
||||
<div className="relative flex h-8 items-center overflow-hidden rounded-full bg-background/70 px-2 backdrop-blur-sm">
|
||||
<div className="flex gap-4 items-center gap-1.5 transition-transform duration-300 group-hover:-translate-x-[72px]">
|
||||
<span className={`h-2.5 w-2.5 rounded-full ${estado.dot}`} />
|
||||
<EstadoIcon
|
||||
className={[
|
||||
'h-3.5 w-3.5 text-foreground/65',
|
||||
asignatura.estado === 'generando' ? 'animate-spin' : '',
|
||||
].join(' ')}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'absolute right-2 flex translate-x-6 items-center gap-1.5 opacity-0 transition-all duration-300',
|
||||
'group-hover:translate-x-0 group-hover:opacity-100'
|
||||
].join(' ')}
|
||||
>
|
||||
<span className="text-[11px] font-semibold whitespace-nowrap">
|
||||
{estado.label}
|
||||
<div className="mb-1 flex items-start justify-between">
|
||||
<span className="font-mono text-[10px] font-bold text-slate-400">
|
||||
{asignatura.clave}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* titulo */}
|
||||
<div className="mt-4 min-h-[72px]">
|
||||
<h3
|
||||
className="overflow-hidden text-[18px] leading-[1.08] font-bold text-foreground"
|
||||
style={{
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 3,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
}}
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`px-1 py-0 text-[9px] uppercase ${statusBadge[asignatura.estado] || ''}`}
|
||||
>
|
||||
{asignatura.estado}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="mb-1 text-xs leading-tight font-bold text-slate-700">
|
||||
{asignatura.nombre}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* bottom */}
|
||||
<div className="mt-auto grid grid-cols-3 gap-2">
|
||||
<div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
|
||||
<Icons.Award className="h-3.5 w-3.5" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide">
|
||||
CR
|
||||
</p>
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<span className="text-[10px] text-slate-500">
|
||||
{asignatura.creditos} CR • HD:{asignatura.hd} • HI:{asignatura.hi}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-foreground">
|
||||
{asignatura.creditos}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
|
||||
<Icons.Clock3 className="h-3.5 w-3.5" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide">
|
||||
HD
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-foreground">
|
||||
{asignatura.hd}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
|
||||
<Icons.BookOpenText className="h-3.5 w-3.5" />
|
||||
<span className="text-[10px] font-medium uppercase tracking-wide">
|
||||
HI
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-foreground">
|
||||
{asignatura.hi}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* drag affordance */}
|
||||
<div className="pointer-events-none absolute right-3 bottom-3 rounded-full bg-background/70 p-1.5 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:opacity-100">
|
||||
<Icons.GripVertical className="h-4 w-4 text-muted-foreground/55" />
|
||||
</div>
|
||||
<GripVertical
|
||||
size={12}
|
||||
className="text-slate-300 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
|
||||
<TooltipContent side="bottom">
|
||||
<div className="text-xs">
|
||||
{lineaNombre ? `${lineaNombre} · ` : ''}
|
||||
{asignatura.nombre}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -798,7 +618,8 @@ function MapaCurricularPage() {
|
||||
return (
|
||||
<Fragment key={linea.id}>
|
||||
<div
|
||||
className={`group relative flex items-center justify-between rounded-xl border-l-4 p-4 transition-all ${lineColors[idx % lineColors.length]
|
||||
className={`group relative flex items-center justify-between rounded-xl border-l-4 p-4 transition-all ${
|
||||
lineColors[idx % lineColors.length]
|
||||
} ${editingLineaId === linea.id ? 'bg-white ring-2 ring-teal-500/20' : ''}`}
|
||||
>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
@@ -814,7 +635,8 @@ function MapaCurricularPage() {
|
||||
setTempNombreLinea(linea.nombre)
|
||||
}
|
||||
}}
|
||||
className={`block w-full text-xs font-bold break-words outline-none ${editingLineaId === linea.id
|
||||
className={`block w-full text-xs font-bold break-words outline-none ${
|
||||
editingLineaId === linea.id
|
||||
? 'cursor-text border-b border-teal-500/50 pb-1'
|
||||
: 'cursor-pointer'
|
||||
}`}
|
||||
@@ -855,8 +677,6 @@ function MapaCurricularPage() {
|
||||
<AsignaturaCardItem
|
||||
key={m.id}
|
||||
asignatura={m}
|
||||
lineaColor={linea.color || '#1976d2'}
|
||||
lineaNombre={linea.nombre}
|
||||
isDragging={draggedAsignatura === m.id}
|
||||
onDragStart={handleDragStart}
|
||||
onClick={() => {
|
||||
@@ -907,81 +727,45 @@ function MapaCurricularPage() {
|
||||
</div>
|
||||
|
||||
{/* Asignaturas Sin Asignar */}
|
||||
<div className="mt-12 rounded-[28px] border border-border bg-card/80 p-5 shadow-sm backdrop-blur-sm">
|
||||
<div className="mb-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
|
||||
<Icons.Inbox className="h-4.5 w-4.5" />
|
||||
</div>
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-bold tracking-wide text-foreground uppercase">
|
||||
Bandeja de entrada
|
||||
<div className="mt-10 rounded-2xl border border-slate-200 bg-slate-50 p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-slate-600">
|
||||
<h3 className="text-sm font-bold tracking-wider uppercase">
|
||||
Bandeja de Entrada / Asignaturas sin asignar
|
||||
</h3>
|
||||
|
||||
<div className="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-muted px-2 text-[11px] font-semibold text-muted-foreground">
|
||||
{unassignedAsignaturas.length}
|
||||
<Badge variant="secondary">{unassignedAsignaturas.length}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-0.5 text-sm text-muted-foreground">
|
||||
Asignaturas sin ciclo o línea curricular
|
||||
<p className="text-xs text-slate-400">
|
||||
Arrastra una asignatura aquí para quitarla del mapa
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 rounded-full border border-dashed border-border bg-background/80 px-3 py-1.5 text-xs text-muted-foreground">
|
||||
<Icons.MoveDown className="h-3.5 w-3.5" />
|
||||
<span>Arrastra aquí para desasignar</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(e, null, null)}
|
||||
className={[
|
||||
'rounded-[24px] border-2 border-dashed p-4 transition-all duration-300',
|
||||
'min-h-[220px]',
|
||||
className={`flex min-h-[120px] flex-wrap gap-4 rounded-xl border-2 border-dashed p-4 transition-colors ${
|
||||
draggedAsignatura
|
||||
? 'border-primary/35 bg-primary/6 shadow-inner'
|
||||
: 'border-border bg-muted/20',
|
||||
].join(' ')}
|
||||
? 'border-teal-300 bg-teal-50/50'
|
||||
: 'border-slate-200 bg-white/50'
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleDrop(e, null, null)} // Limpia ciclo y línea
|
||||
>
|
||||
{unassignedAsignaturas.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{unassignedAsignaturas.map((m) => (
|
||||
<div key={m.id} className="w-[272px] shrink-0">
|
||||
<div key={m.id} className="w-[200px]">
|
||||
<AsignaturaCardItem
|
||||
asignatura={m}
|
||||
lineaColor="#94A3B8"
|
||||
lineaNombre="Sin asignar"
|
||||
isDragging={draggedAsignatura === m.id}
|
||||
onDragStart={handleDragStart}
|
||||
onClick={() => {
|
||||
setEditingData(m)
|
||||
setEditingData(m) // Cargamos los datos en el estado de edición
|
||||
setIsEditModalOpen(true)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex min-h-[188px] flex-col items-center justify-center rounded-[20px] border border-border/70 bg-background/70 px-6 text-center">
|
||||
<div className="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
|
||||
<Icons.CheckCheck className="h-5 w-5" />
|
||||
</div>
|
||||
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
No hay asignaturas pendientes
|
||||
</p>
|
||||
|
||||
<p className="mt-1 max-w-md text-sm text-muted-foreground">
|
||||
Todo está colocado en el mapa. Arrastra una asignatura aquí para quitarle
|
||||
ciclo y línea curricular.
|
||||
</p>
|
||||
{unassignedAsignaturas.length === 0 && (
|
||||
<div className="flex w-full items-center justify-center text-sm text-slate-400">
|
||||
No hay asignaturas pendientes. Arrastra una asignatura aquí para
|
||||
desasignarla.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
+12
-139
@@ -4,145 +4,18 @@
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-Light.otf') format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-LightItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-Regular.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-RegularItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-Bold.otf') format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-BoldItalic.otf') format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-Black.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Sans';
|
||||
src: url('/fonts/indivisa/IndivisaTextSans-BlackItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Serif */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-Light.otf') format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-LightItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-Regular.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-RegularItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-Bold.otf') format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-BoldItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-Black.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Indivisa Serif';
|
||||
src: url('/fonts/indivisa/IndivisaTextSerif-BlackItalic.otf')
|
||||
format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply m-0;
|
||||
font-family: var(--font-sans);
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
strong,
|
||||
b,
|
||||
.font-bold {
|
||||
font-family: 'Indivisa Sans', serif;
|
||||
font-weight: 900;
|
||||
/* Inter letter space */
|
||||
letter-spacing: -0.025em;
|
||||
font-family:
|
||||
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -178,9 +51,9 @@ b,
|
||||
--sidebar-accent-foreground: oklch(0.6304 0.2472 28.2698);
|
||||
--sidebar-border: oklch(0.9401 0 0);
|
||||
--sidebar-ring: oklch(0 0 0);
|
||||
--font-sans: 'Indivisa Sans', sans-serif;
|
||||
--font-serif: 'Indivisa Serif', serif;
|
||||
--font-mono: 'Indivisa Sans', monospace;
|
||||
--font-sans: Plus Jakarta Sans, sans-serif;
|
||||
--font-serif: Lora, serif;
|
||||
--font-mono: IBM Plex Mono, monospace;
|
||||
--radius: 1.4rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 2px;
|
||||
@@ -228,7 +101,7 @@ b,
|
||||
--chart-1: oklch(0.6686 0.1794 251.7436);
|
||||
--chart-2: oklch(0.6342 0.2516 22.4415);
|
||||
--chart-3: oklch(0.8718 0.1716 90.9505);
|
||||
--chart-4: oklch(11.492% 0.00001 271.152);
|
||||
--chart-4: oklch(0.4503 0.229 263.0881);
|
||||
--chart-5: oklch(0.8322 0.146 185.9404);
|
||||
--sidebar: oklch(0.1564 0.0688 261.2771);
|
||||
--sidebar-foreground: oklch(0.9551 0 0);
|
||||
@@ -238,9 +111,9 @@ b,
|
||||
--sidebar-accent-foreground: oklch(0.6786 0.2095 24.6583);
|
||||
--sidebar-border: oklch(0.3289 0.0092 268.3843);
|
||||
--sidebar-ring: oklch(0.6048 0.2166 257.2136);
|
||||
--font-sans: 'Indivisa Sans', sans-serif;
|
||||
--font-serif: 'Indivisa Serif', serif;
|
||||
--font-mono: 'Indivisa Sans', monospace;
|
||||
--font-sans: Plus Jakarta Sans, sans-serif;
|
||||
--font-serif: Lora, serif;
|
||||
--font-mono: IBM Plex Mono, monospace;
|
||||
--radius: 1.4rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 2px;
|
||||
|
||||
Reference in New Issue
Block a user