consultoria-as/FRASA-CAS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dark-mode): dark mode completo + gráficas adaptadas

Browse Source 
Dark mode fixes:
- Cards secundarias: Mis capturas, Mis clientes, Actividades, Apartados por vencer, Equipo
- Botones: Exportar, Descartar, Afluencia, Agendo, Forzar reconexión, Subir archivo
- Config: ModoTrabajo, Usuarios, Sistema, RolesPermisos, ConfigPage
- Cotizador: inputs, tabs, placeholder, botón compartir
- Alta clientes: BotonOcrIne, FileUploader
- Cobranza: toggle dashboard, modal abono
- Dashboards: tabs

Gráficas Recharts:
- CSS variables para colores chart (grid, text, tooltip)
- Helper isDark() + axisTextColor() + gridStroke() + tooltipProps()
- DashboardVendedor: grid, axes, tooltips adaptados
- TableroGeneral: grid, axes, tooltips (BarChart, Funnel, PieChart)
- MiTablero: tooltip adaptado
- Perfilamiento: grid, axes, tooltip

7 apps construidas limpias.
This commit is contained in:
Consult AS Technology
2026-09-07 06:44:08 +00:00
parent c77b4c0628
commit 8b65f903d3
20 changed files with 184 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/mi-dia/src/pages/MiDiaPage.tsx
View File

@@ -236,7 +236,7 @@ function FilaOportunidad({
type="button"
disabled={enviando}
onClick={onAfluencia}
className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white disabled:opacity-50"
className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white disabled:opacity-50 dark:bg-[#0F172A] dark:border-accent dark:text-accent"
>
Afluencia →
</button>
@@ -277,7 +277,7 @@ function FilaOportunidad({
type="button"
disabled={enviando || (acciones !== undefined && !acciones.includes('descartar_lead'))}
onClick={onDescartar}
className="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50"
className="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50 dark:bg-[#0F172A] dark:border-red-800 dark:text-red-400"
>
Descartar
</button>
@@ -339,7 +339,7 @@ function FilaApartado({
}}
className={
fase === 'Cancelacion Apartado'
? 'rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50'
? 'rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50 dark:bg-[#0F172A] dark:border-red-800 dark:text-red-400'
: fase === 'Firma Cliente (Venta)'
? 'rounded-lg bg-accent px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50'
: fase === apartado.estado
@@ -422,7 +422,7 @@ function PanelDocumentosApartado({ itemId }: { itemId: string }) {
{slot.obligatorio && <span className="ml-1 text-red-600">*</span>}
</p>
<label
className={`cursor-pointer rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:bg-accent hover:text-white ${
className={`cursor-pointer rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:bg-accent hover:text-white dark:bg-[#0F172A] dark:border-accent dark:text-accent ${
subiendo !== null ? 'pointer-events-none opacity-50' : ''
}`}
>
@@ -574,7 +574,7 @@ function FilaLead({
type="button"
disabled={enviando}
onClick={onConvertir}
className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white disabled:opacity-50"
className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-accent hover:text-white disabled:opacity-50 dark:bg-[#0F172A] dark:border-accent dark:text-accent"
>
Agendo →
</button>
@@ -582,7 +582,7 @@ function FilaLead({
type="button"
disabled={enviando || (acciones !== undefined && !acciones.includes("descartar_lead"))}
onClick={onDescartar}
className="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50"
className="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 shadow-sm transition-all duration-100 ease-out hover:bg-red-50 disabled:opacity-50 dark:bg-[#0F172A] dark:border-red-800 dark:text-red-400"
>
Descartar
</button>
@@ -854,7 +854,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
</p>
)}
{resumen?.sinMapeoMonday && (
<p className="mb-6 rounded-lg border border-[#E5E7EB] bg-white px-4 py-3 text-sm font-medium text-[#64748B] dark:text-[#94A3B8] shadow-sm">
<p className="mb-6 rounded-lg border border-[#E5E7EB] bg-white px-4 py-3 text-sm font-medium text-[#64748B] dark:text-[#94A3B8] shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]">
Tu usuario aún no está vinculado a Monday; las acciones siguen funcionando
</p>
)}
@@ -907,7 +907,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
<button
type="button"
onClick={() => exportarLeads(leadsFiltrados)}
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]"
>
Exportar
</button>
@@ -949,7 +949,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
<button
type="button"
onClick={() => exportarOportunidades(opsFiltradas)}
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]"
>
Exportar
</button>
@@ -995,7 +995,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
<button
type="button"
onClick={() => exportarApartados(apartadosFiltrados)}
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]"
>
Exportar
</button>
@@ -1040,7 +1040,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
{resumen.misCapturas.map((c) => (
<li
key={c.leadId}
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
>
<div>
<p className="flex items-center gap-2 text-sm font-medium">
@@ -1075,7 +1075,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
{resumen.misClientes.map((c) => (
<li
key={c.id}
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
>
<div>
<p className="text-sm font-medium">{c.nombre}</p>
@@ -1120,7 +1120,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
{resumen.misActividadesHoy.map((a) => (
<li
key={a.id}
className="flex items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
className="flex items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
>
<p className="text-sm">
{a.nombre}
@@ -1146,7 +1146,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
{resumen.apartadosPorVencer.map((a) => (
<li
key={a.id}
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
>
<p className="text-sm">
{a.nombre}
@@ -1309,7 +1309,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
{resumen.equipo.porVendedor.map((v) => (
<li
key={v.mondayUserId}
className="flex items-center justify-between rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
className="flex items-center justify-between rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm dark:bg-[#1E293B] dark:border-[#1E293B]"
>
<p className="text-sm">{v.nombre ?? `Monday #${v.mondayUserId}`}</p>
<span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">