feat(mi-dia): app /hoy + CRM ligero para vendedores

- App Mi día: KPIs, mis actividades, mis leads con acciones rápidas
  (contactado/intento/agenda cita/descartar con motivo), captura rápida
  de lead (409 en duplicado por teléfono), vista equipo para coordinadores
- API: GET /api/mi-dia/resumen, POST /api/leads, /leads/:id/estado,
  /leads/:id/descartar; mapeo Usuario.mondayUserId (seed listo para
  cuando inviten a los vendedores a Monday)
- Landing: tarjeta Mi día; tests api 188, mi-dia 8, landing 4
This commit is contained in:
2026-08-28 06:23:15 +00:00
parent 1f5b6ee088
commit bc0f9da8fe
31 changed files with 5917 additions and 3 deletions

12
apps/mi-dia/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FRASA Desarrollos — Mi día</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

3897
apps/mi-dia/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

27
apps/mi-dia/package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "mi-dia",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"test": "vitest run",
"preview": "vite preview"
},
"dependencies": {
"@fontsource/inter": "^5.3.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@tailwindcss/vite": "^4.0.0",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"@vitejs/plugin-react": "^4.3.4",
"tailwindcss": "^4.0.0",
"typescript": "~5.6.3",
"vite": "^6.0.7",
"vitest": "^2.1.8"
}
}

View File

@@ -0,0 +1,38 @@
import { useState, type ReactNode } from 'react'
import { getSesion, logout, type Sesion } from '../services/auth'
import LoginScreen from './LoginScreen'
/**
* Gate de autenticación: sin sesión solo se ve el login; con sesión se ve la
* app con una barra discreta "nombre · rol" y botón "Salir".
*/
export default function AuthGate({ children }: { children: ReactNode }) {
const [sesion, setSesion] = useState<Sesion | null>(() => getSesion())
if (!sesion) {
return <LoginScreen onLogin={() => setSesion(getSesion())} />
}
return (
<div className="min-h-screen bg-white text-neutral-900">
<div className="border-b border-neutral-200">
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
<span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
{sesion.usuario.nombre} · {sesion.usuario.rol}
</span>
<button
type="button"
onClick={() => {
logout()
setSesion(null)
}}
className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
>
Salir
</button>
</div>
</div>
{children}
</div>
)
}

View File

@@ -0,0 +1,11 @@
import type { ReactNode } from 'react'
export default function KpiCard({ titulo, valor, detalle }: { titulo: string; valor: ReactNode; detalle?: string }) {
return (
<div className="border border-neutral-200 bg-white p-6">
<p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{titulo}</p>
<p className="mt-2 text-3xl font-light text-neutral-900">{valor}</p>
{detalle && <p className="mt-2 text-xs text-neutral-500">{detalle}</p>}
</div>
)
}

View File

@@ -0,0 +1,88 @@
import { useState, type FormEvent } from 'react'
import { login, ErrorLogin, type UsuarioSesion } from '../services/auth'
/** Pantalla de login StudioBlank: marca FRASA, usuario + contraseña, Enter envía */
export default function LoginScreen({ onLogin }: { onLogin: (usuario: UsuarioSesion) => void }) {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState<string | null>(null)
const [cargando, setCargando] = useState(false)
async function enviar(e: FormEvent) {
e.preventDefault()
setError(null)
setCargando(true)
try {
onLogin(await login(username, password))
} catch (err) {
setError(err instanceof ErrorLogin ? err.message : 'Usuario o contraseña incorrectos')
} finally {
setCargando(false)
}
}
return (
<div className="flex min-h-screen items-center justify-center bg-white px-4">
<div className="w-full max-w-sm">
<div className="mb-10 text-center">
<p className="text-lg font-bold tracking-widest">FRASA</p>
<p className="mt-2 text-xs font-bold uppercase tracking-widest text-neutral-500">
Acceso al ecosistema
</p>
</div>
<form onSubmit={enviar} className="space-y-6">
<div>
<label
htmlFor="login-usuario"
className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
>
Usuario
</label>
<input
id="login-usuario"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
autoComplete="username"
autoFocus
required
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
/>
</div>
<div>
<label
htmlFor="login-password"
className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500"
>
Contraseña
</label>
<input
id="login-password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
autoComplete="current-password"
required
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
/>
</div>
{error && (
<p
role="alert"
className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
>
{error}
</p>
)}
<button
type="submit"
disabled={cargando}
className="w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
>
{cargando ? 'Entrando…' : 'Entrar'}
</button>
</form>
</div>
</div>
)
}

23
apps/mi-dia/src/index.css Normal file
View File

@@ -0,0 +1,23 @@
@import "tailwindcss";
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--color-accent: #1B4332;
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-xl: 0;
--radius-2xl: 0;
--radius-3xl: 0;
}
@layer base {
body {
@apply bg-white text-neutral-900 antialiased;
}
*:focus-visible {
outline: 2px solid #1B4332;
outline-offset: 2px;
}
}

View File

@@ -0,0 +1,64 @@
import { describe, expect, it } from 'vitest'
import {
esActividadVencida,
esRolConEquipo,
formatoFechaCorta,
hoyLocal,
MOTIVOS_NO_COMPRA,
ORIGENES_LEAD,
textoDiasRestantes,
} from './mi-dia'
describe('catálogos', () => {
it('orígenes = labels reales de la columna Origen del board Leads', () => {
expect([...ORIGENES_LEAD]).toEqual(['WhatsApp', 'Web', 'Recomendado', 'Facebook', 'Otro'])
})
it('motivos de descarte = vocabulario CRM (igual que el API)', () => {
expect(MOTIVOS_NO_COMPRA).toContain('Precio')
expect(MOTIVOS_NO_COMPRA).toContain('Timing')
expect(MOTIVOS_NO_COMPRA).toHaveLength(7)
})
})
describe('esRolConEquipo', () => {
it('coordinador, corporativo y admin ven equipo; vendedor no', () => {
expect(esRolConEquipo('coordinador')).toBe(true)
expect(esRolConEquipo('corporativo')).toBe(true)
expect(esRolConEquipo('admin')).toBe(true)
expect(esRolConEquipo('vendedor')).toBe(false)
})
})
describe('formatoFechaCorta', () => {
it('recorta el año', () => {
expect(formatoFechaCorta('2026-08-29')).toBe('29/08')
})
it('tolera cadenas mal formadas devolviéndolas tal cual', () => {
expect(formatoFechaCorta('sin-fecha')).toBe('sin-fecha')
})
})
describe('textoDiasRestantes', () => {
it('hoy, mañana y n días', () => {
expect(textoDiasRestantes(0)).toBe('Vence hoy')
expect(textoDiasRestantes(1)).toBe('Vence mañana')
expect(textoDiasRestantes(5)).toBe('Vence en 5 días')
})
})
describe('esActividadVencida', () => {
it('compara contra la fecha de hoy', () => {
expect(esActividadVencida('2026-08-27', '2026-08-28')).toBe(true)
expect(esActividadVencida('2026-08-28', '2026-08-28')).toBe(false)
expect(esActividadVencida('2026-08-29', '2026-08-28')).toBe(false)
expect(esActividadVencida('', '2026-08-28')).toBe(false)
})
})
describe('hoyLocal', () => {
it('devuelve YYYY-MM-DD', () => {
expect(hoyLocal()).toMatch(/^\d{4}-\d{2}-\d{2}$/)
})
})

View File

@@ -0,0 +1,96 @@
// Tipos y transformaciones de la app "Mi día" (espejo del contrato del API)
export interface LeadMiDia {
id: string
nombre: string
telefono: string
email: string
estado: string
origen: string
updatedAt: string
}
export interface ActividadMiDia {
id: string
nombre: string
tipo: string
fecha: string // 'YYYY-MM-DD'
estado: string
}
export interface ApartadoPorVencer {
id: string
nombre: string
unidadCodigo: string
fechaLimite: string // 'YYYY-MM-DD'
estado: string
diasRestantes: number
}
export interface ResumenMiDia {
generadoEn: string
sinMapeoMonday: boolean
misLeads: LeadMiDia[]
misActividadesHoy: ActividadMiDia[]
apartadosPorVencer: ApartadoPorVencer[]
misOportunidades: { porEtapa: Record<string, number> } | null
notaOportunidades: string | null
conteos: {
leadsNuevosSemana: number
actividadesAbiertas: number
}
equipo?: {
leadsNuevosSinAsignar: number
porVendedor: { mondayUserId: number; nombre: string | null; leadsAsignados: number }[]
}
}
// Labels reales de la columna status 'Origen' del board Leads (verificados en Monday)
export const ORIGENES_LEAD = ['WhatsApp', 'Web', 'Recomendado', 'Facebook', 'Otro'] as const
// Categorías del dropdown Motivo No Compra (vocabulario CRM FRASA, igual que el API)
export const MOTIVOS_NO_COMPRA = [
'Precio',
'Producto',
'Ubicacion',
'Financiamiento',
'Competencia',
'Cliente',
'Timing',
] as const
export type MotivoNoCompra = (typeof MOTIVOS_NO_COMPRA)[number]
const ROLES_CON_EQUIPO = ['coordinador', 'corporativo', 'admin']
/** ¿El rol ve la sección de equipo? (misma regla que el API) */
export function esRolConEquipo(rol: string): boolean {
return ROLES_CON_EQUIPO.includes(rol)
}
/** 'YYYY-MM-DD' → 'dd/mm' (sin año: la agenda es de esta semana) */
export function formatoFechaCorta(fecha: string): string {
const [, m, d] = fecha.split('-')
if (!m || !d) return fecha
return `${d}/${m}`
}
/** Texto de urgencia de un apartado según los días que faltan */
export function textoDiasRestantes(dias: number): string {
if (dias <= 0) return 'Vence hoy'
if (dias === 1) return 'Vence mañana'
return `Vence en ${dias} días`
}
/** ¿La fecha de una actividad ya pasó? (vencida, para marcarla en la lista) */
export function esActividadVencida(fecha: string, hoy: string): boolean {
return fecha !== '' && fecha < hoy
}
/** Fecha local 'YYYY-MM-DD' de hoy (para comparar contra las del API) */
export function hoyLocal(): string {
const d = new Date()
const m = String(d.getMonth() + 1).padStart(2, '0')
const dd = String(d.getDate()).padStart(2, '0')
return `${d.getFullYear()}-${m}-${dd}`
}

17
apps/mi-dia/src/main.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import '@fontsource/inter/300.css'
import '@fontsource/inter/400.css'
import '@fontsource/inter/500.css'
import '@fontsource/inter/700.css'
import './index.css'
import AuthGate from './components/AuthGate'
import MiDiaPage from './pages/MiDiaPage'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<AuthGate>
<MiDiaPage />
</AuthGate>
</StrictMode>,
)

View File

@@ -0,0 +1,484 @@
import { useCallback, useEffect, useState, type FormEvent } from 'react'
import KpiCard from '../components/KpiCard'
import {
esActividadVencida,
esRolConEquipo,
formatoFechaCorta,
hoyLocal,
MOTIVOS_NO_COMPRA,
ORIGENES_LEAD,
textoDiasRestantes,
type LeadMiDia,
type MotivoNoCompra,
type ResumenMiDia,
} from '../lib/mi-dia'
import { cambiarEstadoLead, crearLead, descartarLead, fetchResumenMiDia } from '../services/mi-dia'
import { getSesion } from '../services/auth'
function TituloSeccion({ children }: { children: string }) {
return <h2 className="mb-4 text-xs font-bold uppercase tracking-widest text-neutral-500">{children}</h2>
}
function EstadoVacio({ mensaje }: { mensaje: string }) {
return (
<div className="flex h-24 items-center justify-center border border-dashed border-neutral-300">
<p className="text-xs font-bold uppercase tracking-widest text-neutral-400">{mensaje}</p>
</div>
)
}
const CLASE_BOTON_ACCION =
'border border-accent px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50'
/** Modal de descarte: motivo (dropdown CRM) + comentario opcional */
function ModalDescartar({
lead,
onCancelar,
onConfirmar,
enviando,
}: {
lead: LeadMiDia
onCancelar: () => void
onConfirmar: (motivo: MotivoNoCompra, comentario: string) => void
enviando: boolean
}) {
const [motivo, setMotivo] = useState<MotivoNoCompra>(MOTIVOS_NO_COMPRA[0])
const [comentario, setComentario] = useState('')
return (
<div className="fixed inset-0 z-10 flex items-center justify-center bg-black/40 px-4" role="dialog" aria-modal="true">
<div className="w-full max-w-md border border-neutral-300 bg-white p-6">
<p className="text-xs font-bold uppercase tracking-widest text-neutral-500">Descartar lead</p>
<p className="mt-2 text-lg font-light">{lead.nombre}</p>
<form
className="mt-6 space-y-4"
onSubmit={(e) => {
e.preventDefault()
onConfirmar(motivo, comentario.trim())
}}
>
<div>
<label htmlFor="motivo-descarte" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
Motivo
</label>
<select
id="motivo-descarte"
value={motivo}
onChange={(e) => setMotivo(e.target.value as MotivoNoCompra)}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
>
{MOTIVOS_NO_COMPRA.map((m) => (
<option key={m} value={m}>
{m}
</option>
))}
</select>
</div>
<div>
<label htmlFor="comentario-descarte" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
Comentario (opcional)
</label>
<textarea
id="comentario-descarte"
value={comentario}
onChange={(e) => setComentario(e.target.value)}
rows={3}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
/>
</div>
<div className="flex justify-end gap-3">
<button
type="button"
onClick={onCancelar}
disabled={enviando}
className="border border-neutral-300 px-5 py-2 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500 disabled:opacity-50"
>
Cancelar
</button>
<button
type="submit"
disabled={enviando}
className="bg-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
>
{enviando ? 'Descartando…' : 'Descartar'}
</button>
</div>
</form>
</div>
</div>
)
}
/** Fila de lead con acciones rápidas (contactado / intento / cita / descartar) */
function FilaLead({
lead,
onAccion,
onDescartar,
enviando,
}: {
lead: LeadMiDia
onAccion: (estado: string, fecha?: string) => void
onDescartar: () => void
enviando: boolean
}) {
const [conCita, setConCita] = useState(false)
const [fechaCita, setFechaCita] = useState('')
return (
<li className="border border-neutral-200 p-4">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<p className="text-sm font-medium">{lead.nombre}</p>
<p className="mt-1 text-xs text-neutral-500">
{lead.telefono || 'Sin teléfono'}
{lead.origen ? ` · ${lead.origen}` : ''}
</p>
</div>
<span className="border border-neutral-300 px-2 py-1 text-xs font-bold uppercase tracking-widest text-neutral-500">
{lead.estado || 'Sin estado'}
</span>
</div>
<div className="mt-3 flex flex-wrap items-center gap-2">
<button type="button" disabled={enviando} onClick={() => onAccion('CONTACTADO')} className={CLASE_BOTON_ACCION}>
Contactado
</button>
<button type="button" disabled={enviando} onClick={() => onAccion('Intento de contacto')} className={CLASE_BOTON_ACCION}>
Intento
</button>
<button
type="button"
disabled={enviando}
onClick={() => (conCita ? onAccion('AGENDA CITA', fechaCita || undefined) : setConCita(true))}
className={CLASE_BOTON_ACCION}
>
{conCita ? 'Confirmar cita' : 'Agenda cita'}
</button>
{conCita && (
<input
type="date"
aria-label="Fecha de la cita"
value={fechaCita}
onChange={(e) => setFechaCita(e.target.value)}
className="border border-neutral-300 px-2 py-1.5 text-xs focus:border-accent focus:outline-none"
/>
)}
<button
type="button"
disabled={enviando}
onClick={onDescartar}
className="border border-red-700 px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-red-700 transition-colors duration-150 hover:bg-red-700 hover:text-white disabled:opacity-50"
>
Descartar
</button>
</div>
</li>
)
}
export default function MiDiaPage() {
const nombreVendedor = getSesion()?.usuario.nombre ?? ''
const rol = getSesion()?.usuario.rol ?? 'vendedor'
const [resumen, setResumen] = useState<ResumenMiDia | null>(null)
const [error, setError] = useState<string | null>(null)
const [cargando, setCargando] = useState(true)
const [enviando, setEnviando] = useState(false)
const [aviso, setAviso] = useState<string | null>(null)
const [descartando, setDescartando] = useState<LeadMiDia | null>(null)
// Captura rápida
const [capNombre, setCapNombre] = useState('')
const [capTelefono, setCapTelefono] = useState('')
const [capOrigen, setCapOrigen] = useState<string>(ORIGENES_LEAD[0])
const [capNotas, setCapNotas] = useState('')
const [capEnviando, setCapEnviando] = useState(false)
const [capMensaje, setCapMensaje] = useState<{ tipo: 'ok' | 'error'; texto: string } | null>(null)
const cargar = useCallback(async () => {
setCargando(true)
try {
setResumen(await fetchResumenMiDia())
setError(null)
} catch (err) {
setError(err instanceof Error ? err.message : 'No se pudo cargar tu día')
} finally {
setCargando(false)
}
}, [])
useEffect(() => {
void cargar()
}, [cargar])
/** Ejecuta una acción sobre un lead y refresca el resumen */
async function ejecutar(accion: () => Promise<unknown>, mensajeError: string) {
setEnviando(true)
setAviso(null)
try {
await accion()
await cargar()
} catch (err) {
setAviso(err instanceof Error ? err.message : mensajeError)
} finally {
setEnviando(false)
}
}
async function enviarCaptura(e: FormEvent) {
e.preventDefault()
setCapEnviando(true)
setCapMensaje(null)
try {
await crearLead({
nombre: capNombre.trim(),
...(capTelefono.trim() !== '' ? { telefono: capTelefono.trim() } : {}),
...(capOrigen !== '' ? { origen: capOrigen } : {}),
...(capNotas.trim() !== '' ? { notas: capNotas.trim() } : {}),
})
setCapMensaje({ tipo: 'ok', texto: 'Lead registrado, se asignará por round-robin' })
setCapNombre('')
setCapTelefono('')
setCapNotas('')
} catch (err) {
setCapMensaje({ tipo: 'error', texto: err instanceof Error ? err.message : 'No se pudo registrar el lead' })
} finally {
setCapEnviando(false)
}
}
const hoy = hoyLocal()
return (
<main className="mx-auto max-w-6xl px-4 py-8">
<div className="mb-8 flex items-end justify-between">
<div>
<p className="text-xs font-bold uppercase tracking-widest text-accent">FRASA · Mi día</p>
<h1 className="mt-2 text-3xl font-light text-neutral-900">{nombreVendedor}</h1>
</div>
<button
type="button"
onClick={() => void cargar()}
disabled={cargando}
className="border border-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50"
>
{cargando ? 'Actualizando…' : 'Actualizar'}
</button>
</div>
{error && (
<p role="alert" className="mb-8 border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
Sin datos del API — {error}
</p>
)}
{aviso && (
<p role="alert" className="mb-8 border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700">
{aviso}
</p>
)}
{resumen?.sinMapeoMonday && (
<p className="mb-8 border border-neutral-300 px-4 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500">
Tu usuario aún no está vinculado a Monday; las acciones siguen funcionando
</p>
)}
{!resumen && cargando && <EstadoVacio mensaje="Cargando…" />}
{resumen && (
<>
<section aria-label="Indicadores del día" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<KpiCard titulo="Leads asignados" valor={resumen.misLeads.length} />
<KpiCard
titulo="Actividades de hoy"
valor={resumen.misActividadesHoy.length}
detalle={`${resumen.conteos.actividadesAbiertas} abiertas en total`}
/>
<KpiCard titulo="Apartados por vencer" valor={resumen.apartadosPorVencer.length} detalle="próximos 7 días" />
<KpiCard titulo="Leads nuevos esta semana" valor={resumen.conteos.leadsNuevosSemana} />
</section>
<section aria-label="Mis actividades" className="mt-12">
<TituloSeccion>Mis actividades</TituloSeccion>
{resumen.misActividadesHoy.length === 0 ? (
<EstadoVacio mensaje="Sin actividades para hoy" />
) : (
<ul className="space-y-2">
{resumen.misActividadesHoy.map((a) => (
<li key={a.id} className="flex items-center justify-between gap-3 border border-neutral-200 px-4 py-3">
<p className="text-sm">
{a.nombre}
{a.tipo ? <span className="ml-2 text-xs uppercase tracking-widest text-neutral-400">{a.tipo}</span> : null}
</p>
<span
className={`text-xs font-bold uppercase tracking-widest ${
esActividadVencida(a.fecha, hoy) ? 'text-red-700' : 'text-neutral-500'
}`}
>
{formatoFechaCorta(a.fecha)}
</span>
</li>
))}
</ul>
)}
</section>
{resumen.apartadosPorVencer.length > 0 && (
<section aria-label="Apartados por vencer" className="mt-12">
<TituloSeccion>Apartados por vencer</TituloSeccion>
<ul className="space-y-2">
{resumen.apartadosPorVencer.map((a) => (
<li key={a.id} className="flex flex-wrap items-center justify-between gap-3 border border-neutral-200 px-4 py-3">
<p className="text-sm">
{a.nombre}
{a.unidadCodigo ? <span className="ml-2 text-xs text-neutral-400">{a.unidadCodigo}</span> : null}
</p>
<span
className={`text-xs font-bold uppercase tracking-widest ${
a.diasRestantes <= 1 ? 'text-red-700' : 'text-amber-700'
}`}
>
{textoDiasRestantes(a.diasRestantes)} · {formatoFechaCorta(a.fechaLimite)}
</span>
</li>
))}
</ul>
</section>
)}
<section aria-label="Mis leads" className="mt-12">
<TituloSeccion>Mis leads</TituloSeccion>
{resumen.misLeads.length === 0 ? (
<EstadoVacio mensaje="Sin leads asignados" />
) : (
<ul className="space-y-2">
{resumen.misLeads.map((lead) => (
<FilaLead
key={lead.id}
lead={lead}
enviando={enviando}
onAccion={(estado, fecha) => void ejecutar(() => cambiarEstadoLead(lead.id, estado, fecha), 'No se pudo actualizar el lead')}
onDescartar={() => setDescartando(lead)}
/>
))}
</ul>
)}
</section>
<section aria-label="Captura rápida de lead" className="mt-12">
<TituloSeccion>Captura rápida de lead</TituloSeccion>
<form onSubmit={enviarCaptura} className="grid gap-4 border border-neutral-200 p-6 sm:grid-cols-2">
<div>
<label htmlFor="cap-nombre" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
Nombre
</label>
<input
id="cap-nombre"
type="text"
value={capNombre}
onChange={(e) => setCapNombre(e.target.value)}
required
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
/>
</div>
<div>
<label htmlFor="cap-telefono" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
Teléfono
</label>
<input
id="cap-telefono"
type="tel"
value={capTelefono}
onChange={(e) => setCapTelefono(e.target.value)}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
/>
</div>
<div>
<label htmlFor="cap-origen" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
Origen
</label>
<select
id="cap-origen"
value={capOrigen}
onChange={(e) => setCapOrigen(e.target.value)}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
>
{ORIGENES_LEAD.map((o) => (
<option key={o} value={o}>
{o}
</option>
))}
</select>
</div>
<div>
<label htmlFor="cap-notas" className="mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500">
Notas
</label>
<input
id="cap-notas"
type="text"
value={capNotas}
onChange={(e) => setCapNotas(e.target.value)}
className="w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none"
/>
</div>
{capMensaje && (
<p
role="status"
className={`border px-4 py-3 text-xs font-bold uppercase tracking-widest sm:col-span-2 ${
capMensaje.tipo === 'ok' ? 'border-accent text-accent' : 'border-red-700 text-red-700'
}`}
>
{capMensaje.texto}
</p>
)}
<div className="sm:col-span-2">
<button
type="submit"
disabled={capEnviando}
className="bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
>
{capEnviando ? 'Registrando…' : 'Registrar lead'}
</button>
</div>
</form>
</section>
{esRolConEquipo(rol) && resumen.equipo && (
<section aria-label="Equipo" className="mt-12">
<TituloSeccion>Equipo</TituloSeccion>
<p className="mb-4 text-sm text-neutral-500">
Leads nuevos sin asignar: <strong>{resumen.equipo.leadsNuevosSinAsignar}</strong>
</p>
{resumen.equipo.porVendedor.length === 0 ? (
<EstadoVacio mensaje="Sin leads asignados en el equipo" />
) : (
<ul className="space-y-2">
{resumen.equipo.porVendedor.map((v) => (
<li key={v.mondayUserId} className="flex items-center justify-between border border-neutral-200 px-4 py-3">
<p className="text-sm">{v.nombre ?? `Monday #${v.mondayUserId}`}</p>
<span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
{v.leadsAsignados} lead(s)
</span>
</li>
))}
</ul>
)}
</section>
)}
</>
)}
{descartando && (
<ModalDescartar
lead={descartando}
enviando={enviando}
onCancelar={() => setDescartando(null)}
onConfirmar={(motivo, comentario) => {
const lead = descartando
setDescartando(null)
void ejecutar(
() => descartarLead(lead.id, motivo, comentario === '' ? undefined : comentario),
'No se pudo descartar el lead',
)
}}
/>
)}
</main>
)
}

View File

@@ -0,0 +1,77 @@
// Sesión de autenticación contra el API Gateway (JWT guardado en localStorage)
const API_URL = import.meta.env.VITE_API_URL ?? 'http://192.168.10.123:3000/api'
const STORAGE_KEY = 'frasa_auth'
export interface UsuarioSesion {
nombre: string
rol: string
asignacion: string | null
}
export interface Sesion {
token: string
usuario: UsuarioSesion
}
/** Error de login con mensaje genérico (no filtra si el usuario existe) */
export class ErrorLogin extends Error {
constructor(message = 'Usuario o contraseña incorrectos') {
super(message)
this.name = 'ErrorLogin'
}
}
export function getSesion(): Sesion | null {
try {
const raw = localStorage.getItem(STORAGE_KEY)
if (!raw) return null
const sesion = JSON.parse(raw) as Sesion
if (typeof sesion?.token !== 'string' || !sesion.usuario) return null
return sesion
} catch {
return null
}
}
export function getToken(): string | null {
return getSesion()?.token ?? null
}
export function logout(): void {
localStorage.removeItem(STORAGE_KEY)
}
/** POST /auth/login; guarda token + usuario en localStorage */
export async function login(username: string, password: string): Promise<UsuarioSesion> {
let res: Response
try {
res = await fetch(`${API_URL}/auth/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
})
} catch {
throw new ErrorLogin('No se pudo conectar con el servidor')
}
if (!res.ok) throw new ErrorLogin()
const data = (await res.json()) as Sesion
localStorage.setItem(STORAGE_KEY, JSON.stringify({ token: data.token, usuario: data.usuario }))
return data.usuario
}
/**
* Agrega Authorization: Bearer a un RequestInit si hay sesión.
* Sin token devuelve el init tal cual (las llamadas siguen iguales que antes).
*/
export function conAuth(init: RequestInit = {}): RequestInit {
const token = getToken()
if (!token) return init
return { ...init, headers: { ...(init.headers as Record<string, string>), Authorization: `Bearer ${token}` } }
}
/** Si el API responde 401: cierra sesión y recarga para volver al login */
export function manejar401(res: Response): void {
if (res.status !== 401) return
logout()
if (typeof window !== 'undefined') window.location.reload()
}

View File

@@ -0,0 +1,54 @@
// Cliente del API para la app "Mi día" (mismas convenciones que las demás apps)
import type { ResumenMiDia } from '../lib/mi-dia'
import { conAuth, manejar401 } from './auth'
const API_URL = import.meta.env.VITE_API_URL ?? 'http://192.168.10.123:3000/api'
async function fetchJson<T>(path: string, init: RequestInit = {}): Promise<T> {
const res = await fetch(`${API_URL}${path}`, conAuth(init))
manejar401(res)
if (!res.ok) {
const body = (await res.json().catch(() => null)) as { error?: string } | null
throw new Error(body?.error ?? `Error ${res.status}`)
}
return (await res.json()) as T
}
export function fetchResumenMiDia(): Promise<ResumenMiDia> {
return fetchJson<ResumenMiDia>('/mi-dia/resumen')
}
export interface LeadCreado {
id: string
estado: string
}
/** Crea un lead; en duplicado (409) lanza Error con el mensaje del API */
export async function crearLead(datos: {
nombre: string
telefono?: string
origen?: string
notas?: string
}): Promise<LeadCreado> {
return fetchJson<LeadCreado>('/leads', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(datos),
})
}
export function cambiarEstadoLead(itemId: string, estado: string, fecha?: string): Promise<unknown> {
return fetchJson(`/leads/${itemId}/estado`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(fecha !== undefined && fecha !== '' ? { estado, fecha } : { estado }),
})
}
export function descartarLead(itemId: string, motivo: string, comentario?: string): Promise<unknown> {
return fetchJson(`/leads/${itemId}/descartar`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(comentario !== undefined && comentario !== '' ? { motivo, comentario } : { motivo }),
})
}

View File

@@ -0,0 +1,22 @@
{
"compilerOptions": {
"target": "ES2022",
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"types": ["vite/client"]
},
"include": ["src"]
}

View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

View File

@@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "ES2023",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts", "vitest.config.ts"]
}

View File

@@ -0,0 +1,9 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// La app se sirve detrás de NGINX bajo el prefijo /hoy
export default defineConfig({
base: '/hoy/',
plugins: [react(), tailwindcss()],
})

View File

@@ -0,0 +1,8 @@
import { defineConfig } from 'vitest/config'
// Config de tests separada para no mezclar los tipos de Vite y Vitest
export default defineConfig({
test: {
environment: 'node',
},
})