From 8b65f903d33a1bd85ae0ec29d33139c0849d3cda Mon Sep 17 00:00:00 2001 From: Consult AS Technology Date: Mon, 7 Sep 2026 06:44:08 +0000 Subject: [PATCH] =?UTF-8?q?fix(dark-mode):=20dark=20mode=20completo=20+=20?= =?UTF-8?q?gr=C3=A1ficas=20adaptadas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../src/components/BotonOcrIne.tsx | 2 +- .../src/components/FileUploader.tsx | 4 +-- apps/cobranza/src/components/ModalAbono.tsx | 6 ++-- apps/cobranza/src/pages/DashboardPage.tsx | 6 ++-- apps/cotizador/src/pages/CotizadorPage.tsx | 10 +++--- apps/dashboards/src/components/MiTablero.tsx | 3 +- .../src/components/Perfilamiento.tsx | 9 ++--- .../src/components/TableroGeneral.tsx | 21 ++++++------ apps/dashboards/src/index.css | 15 ++++++++ apps/dashboards/src/lib/chart-theme.ts | 24 +++++++++++++ apps/dashboards/src/pages/DashboardPage.tsx | 6 ++-- .../src/components/config/ConfigPage.tsx | 10 +++--- .../src/components/config/ModoTrabajo.tsx | 16 ++++----- .../src/components/config/RolesPermisos.tsx | 16 ++++----- .../landing/src/components/config/Sistema.tsx | 10 +++--- .../src/components/config/Usuarios.tsx | 34 +++++++++---------- .../src/components/DashboardVendedor.tsx | 28 +++++++-------- apps/mi-dia/src/index.css | 15 ++++++++ apps/mi-dia/src/lib/chart-theme.ts | 24 +++++++++++++ apps/mi-dia/src/pages/MiDiaPage.tsx | 30 ++++++++-------- 20 files changed, 184 insertions(+), 105 deletions(-) create mode 100644 apps/dashboards/src/lib/chart-theme.ts create mode 100644 apps/mi-dia/src/lib/chart-theme.ts diff --git a/apps/alta-clientes/src/components/BotonOcrIne.tsx b/apps/alta-clientes/src/components/BotonOcrIne.tsx index 90b90bb..fae8f3a 100644 --- a/apps/alta-clientes/src/components/BotonOcrIne.tsx +++ b/apps/alta-clientes/src/components/BotonOcrIne.tsx @@ -84,7 +84,7 @@ export default function BotonOcrIne({ archivo, onAplicar }: Props) { } return ( -
+

Lectura automática (OCR)

diff --git a/apps/cobranza/src/components/ModalAbono.tsx b/apps/cobranza/src/components/ModalAbono.tsx index 4161cf1..300973a 100644 --- a/apps/cobranza/src/components/ModalAbono.tsx +++ b/apps/cobranza/src/components/ModalAbono.tsx @@ -84,7 +84,7 @@ export default function ModalAbono({ pago, onCancelar, onGuardar }: Props) { id="abono-monto" type="number" step="0.01" - className={`mt-1 w-full rounded-lg border bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 ${errors.monto ? 'border-red-400' : 'border-[#D1D5DB]'}`} + className={`mt-1 w-full rounded-lg border bg-white px-3 py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#E2E8F0] ${errors.monto ? 'border-red-400' : 'border-[#D1D5DB]'}`} {...regMonto} ref={(el) => { regMonto.ref(el) @@ -100,7 +100,7 @@ export default function ModalAbono({ pago, onCancelar, onGuardar }: Props) { {errors.fechaPago &&

{errors.fechaPago.message}

} @@ -112,7 +112,7 @@ export default function ModalAbono({ pago, onCancelar, onGuardar }: Props) { diff --git a/apps/cobranza/src/pages/DashboardPage.tsx b/apps/cobranza/src/pages/DashboardPage.tsx index affc33b..7f085d8 100644 --- a/apps/cobranza/src/pages/DashboardPage.tsx +++ b/apps/cobranza/src/pages/DashboardPage.tsx @@ -298,13 +298,13 @@ export default function DashboardPage() { {/* Filtros */}
{/* Toggle Mis planes / Todos (?mios=1 filtra en el API por el vendedor del token) */} -
+
diff --git a/apps/dashboards/src/components/MiTablero.tsx b/apps/dashboards/src/components/MiTablero.tsx index 05d160a..9de4e81 100644 --- a/apps/dashboards/src/components/MiTablero.tsx +++ b/apps/dashboards/src/components/MiTablero.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect, useState } from 'react' import { Cell, Funnel, FunnelChart, LabelList, ResponsiveContainer, Tooltip } from 'recharts' +import { tooltipProps } from '../lib/chart-theme' import KpiCard from './KpiCard' import { EstadoVacio, TarjetaGrafica, type AccionesTablero } from './comunes' import { funnelMisLeads, type ResumenMiDia } from '../lib/mi-tablero' @@ -95,7 +96,7 @@ export default function MiTablero({ alCambiarAcciones }: { alCambiarAcciones: (a
- + {funnel.map((etapa, i) => ( diff --git a/apps/dashboards/src/components/Perfilamiento.tsx b/apps/dashboards/src/components/Perfilamiento.tsx index e5240ee..8a47a5b 100644 --- a/apps/dashboards/src/components/Perfilamiento.tsx +++ b/apps/dashboards/src/components/Perfilamiento.tsx @@ -1,4 +1,5 @@ import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts' +import { axisTextColor, gridStroke, tooltipProps } from '../lib/chart-theme' import { EstadoVacio, TituloSeccion } from './comunes' import { rebanadasDe, type ResumenReportes } from '../lib/reportes' @@ -28,10 +29,10 @@ function TarjetaDimension({ titulo, datos }: { titulo: string; datos: Record - - - - + + + + diff --git a/apps/dashboards/src/components/TableroGeneral.tsx b/apps/dashboards/src/components/TableroGeneral.tsx index 2ee290e..96eecdc 100644 --- a/apps/dashboards/src/components/TableroGeneral.tsx +++ b/apps/dashboards/src/components/TableroGeneral.tsx @@ -15,6 +15,7 @@ import { XAxis, YAxis, } from 'recharts' +import { axisTextColor, gridStroke, tooltipProps } from '../lib/chart-theme' import KpiCard from './KpiCard' import Perfilamiento from './Perfilamiento' import SeccionEquipo from './SeccionEquipo' @@ -160,10 +161,10 @@ export default function TableroGeneral({
- - - - + + + + {Object.keys(COLORES_STATUS).map((status) => ( @@ -183,10 +184,10 @@ export default function TableroGeneral({
- - - - + + + + @@ -203,7 +204,7 @@ export default function TableroGeneral({
- + {funnel.map((etapa, i) => ( @@ -226,6 +227,7 @@ export default function TableroGeneral({
+ ))} -
diff --git a/apps/dashboards/src/index.css b/apps/dashboards/src/index.css index 038e755..a9dd8fc 100644 --- a/apps/dashboards/src/index.css +++ b/apps/dashboards/src/index.css @@ -8,6 +8,21 @@ --color-accent-hover: #1D4ED8; } +:root { + --chart-grid: #E5E7EB; + --chart-text: #64748B; + --chart-tooltip-bg: white; + --chart-tooltip-border: #E5E7EB; + --chart-tooltip-text: #111827; +} +.dark { + --chart-grid: #334155; + --chart-text: #94A3B8; + --chart-tooltip-bg: #1E293B; + --chart-tooltip-border: #334155; + --chart-tooltip-text: #E2E8F0; +} + @layer base { body { @apply bg-[#F8FAFC] text-[#111827] antialiased; diff --git a/apps/dashboards/src/lib/chart-theme.ts b/apps/dashboards/src/lib/chart-theme.ts new file mode 100644 index 0000000..b8c4cdc --- /dev/null +++ b/apps/dashboards/src/lib/chart-theme.ts @@ -0,0 +1,24 @@ +/** + * Helpers de tema para gráficas Recharts. + * + * Recharts renderiza SVG puro y no resuelve CSS custom properties en + * atributos como `fill` / `stroke`, así que necesitamos funciones que + * lean el estado dark-mode del documento y devuelvan los colores + * apropiados como strings literales. + */ + +/** `true` cuando el `` lleva la clase `dark` (Tailwind convention). */ +export const isDark = (): boolean => + typeof document !== 'undefined' && document.documentElement.classList.contains('dark') + +/** Color de texto para los ejes (XAxis / YAxis tick fill). */ +export const axisTextColor = (): string => (isDark() ? '#94A3B8' : '#64748B') + +/** Color de la cuadrícula (CartesianGrid stroke). */ +export const gridStroke = (): string => (isDark() ? '#334155' : '#E5E7EB') + +/** Props comunes de Tooltip para aplicar estilo dark/light. */ +export const tooltipProps = (): Record => + isDark() + ? { contentStyle: { backgroundColor: '#1E293B', borderColor: '#334155', color: '#E2E8F0', borderRadius: 8, fontSize: 12 } } + : { contentStyle: { borderRadius: 8, fontSize: 12 } } diff --git a/apps/dashboards/src/pages/DashboardPage.tsx b/apps/dashboards/src/pages/DashboardPage.tsx index e132931..7650cad 100644 --- a/apps/dashboards/src/pages/DashboardPage.tsx +++ b/apps/dashboards/src/pages/DashboardPage.tsx @@ -64,7 +64,7 @@ export default function DashboardPage() { {permitidas.length > 1 && (
@@ -77,8 +77,8 @@ export default function DashboardPage() { onClick={() => setElegida(v.id)} className={ vista === v.id - ? 'rounded-md bg-white px-2 py-1.5 text-[10px] font-medium text-[#111827] dark:text-[#E2E8F0] shadow-sm transition-all duration-100 ease-out sm:px-3 sm:text-xs' - : 'rounded-md px-2 py-1.5 text-[10px] font-medium text-[#64748B] dark:text-[#94A3B8] transition-all duration-100 ease-out hover:text-[#111827] dark:text-[#E2E8F0] sm:px-3 sm:text-xs' + ? 'rounded-md bg-white px-2 py-1.5 text-[10px] font-medium text-[#111827] dark:text-[#E2E8F0] shadow-sm transition-all duration-100 ease-out sm:px-3 sm:text-xs dark:bg-[#1E293B]' + : 'rounded-md px-2 py-1.5 text-[10px] font-medium text-[#64748B] dark:text-[#94A3B8] transition-all duration-100 ease-out hover:text-[#111827] dark:hover:text-[#E2E8F0] sm:px-3 sm:text-xs' } > {v.etiqueta} diff --git a/apps/landing/src/components/config/ConfigPage.tsx b/apps/landing/src/components/config/ConfigPage.tsx index bd61e3e..a7f4e42 100644 --- a/apps/landing/src/components/config/ConfigPage.tsx +++ b/apps/landing/src/components/config/ConfigPage.tsx @@ -30,18 +30,18 @@ export function ConfigPage({ onVolver }: Props) { -

+

Configuraciones

{/* Tabs */}