Consult AS Technology
c77b4c0628
Fase 1 - UI: dark mode, skeletons, toasts Fase 2 - Filtros: avanzados Mi día, búsqueda global Ctrl+K Fase 3 - Datos: export Excel, notas apartados, auditoría Fase 4 - Dashboard: gráficas vendedor + métricas uso Fase 5 - Responsive: tablets optimizadas Fase 6 - PWA: IndexedDB offline, push notifications Backend: 3 tablas nuevas, 6 services, 6 endpoints nuevos 721 API tests + fronts verdes.
27 lines
845 B
TypeScript
27 lines
845 B
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
export default function KpiCard({
|
|
titulo,
|
|
valor,
|
|
detalle,
|
|
plano = false,
|
|
}: {
|
|
titulo: string
|
|
valor: ReactNode
|
|
detalle?: string
|
|
/** `plano` quita sombra/hover para anidar la tarjeta dentro de otra tarjeta */
|
|
plano?: boolean
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`rounded-xl border border-[#E5E7EB] bg-white p-6 dark:border-[#1E293B] dark:bg-[#1E293B] ${
|
|
plano ? '' : 'shadow-sm transition-shadow duration-200 ease-in-out hover:shadow-md'
|
|
}`}
|
|
>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">{titulo}</p>
|
|
<p className="mt-2 text-3xl font-light text-[#111827] dark:text-[#E2E8F0]">{valor}</p>
|
|
{detalle && <p className="mt-2 text-xs text-[#64748B] dark:text-[#94A3B8]">{detalle}</p>}
|
|
</div>
|
|
)
|
|
}
|