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

28
apps/mi-dia/src/components/DashboardVendedor.tsx
View File

@@ -4,15 +4,13 @@ import {
Cell,
} from 'recharts'
import { fetchMiTablero, type MiTablero } from '../services/reporte-mi-tablero'
import { axisTextColor, gridStroke, tooltipProps } from '../lib/chart-theme'
import KpiCard from './KpiCard'
// ---------- Colores ----------
const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6']
const LIGHT_TEXT = '#64748B'
const GRID_LIGHT = '#E5E7EB'
// ---------- Sub-componentes ----------
function TituloSeccion({ children }: { children: string }) {
@@ -129,16 +127,16 @@ export default function DashboardVendedor() {
<TituloSeccion>Leads por día (últimos 30 días)</TituloSeccion>
<ResponsiveContainer width="100%" height={260}>
<BarChart data={tablero.leadsPorDia} margin={{ top: 8, right: 4, left: -16, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke={GRID_LIGHT} vertical={false} />
<CartesianGrid strokeDasharray="3 3" stroke={gridStroke()} vertical={false} />
<XAxis
dataKey="fecha"
tickFormatter={(f: string) => f.slice(8)}
tick={{ fontSize: 10, fill: LIGHT_TEXT }}
tick={{ fontSize: 10, fill: axisTextColor() }}
interval="preserveStartEnd"
/>
<YAxis tick={{ fontSize: 10, fill: LIGHT_TEXT }} allowDecimals={false} />
<YAxis tick={{ fontSize: 10, fill: axisTextColor() }} allowDecimals={false} />
<Tooltip
contentStyle={{ fontSize: 12, borderRadius: 8 }}
{...tooltipProps()}
labelFormatter={(f: unknown) => `Fecha: ${String(f)}`}
formatter={(value: unknown) => [`${Number(value)} leads`, "Leads"]}
/>
@@ -166,16 +164,16 @@ export default function DashboardVendedor() {
) : (
<ResponsiveContainer width="100%" height={260}>
<BarChart data={datosOrigen} layout="vertical" margin={{ top: 8, right: 16, left: 8, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke={GRID_LIGHT} horizontal={false} />
<XAxis type="number" tick={{ fontSize: 10, fill: LIGHT_TEXT }} allowDecimals={false} />
<CartesianGrid strokeDasharray="3 3" stroke={gridStroke()} horizontal={false} />
<XAxis type="number" tick={{ fontSize: 10, fill: axisTextColor() }} allowDecimals={false} />
<YAxis
type="category"
dataKey="origen"
tick={{ fontSize: 10, fill: LIGHT_TEXT }}
tick={{ fontSize: 10, fill: axisTextColor() }}
width={100}
/>
<Tooltip
contentStyle={{ fontSize: 12, borderRadius: 8 }}
{...tooltipProps()}
formatter={(value: unknown, name: unknown) => [`${Number(value)}`, String(name) === "total" ? "Total" : "Convertidos"]}
/>
<Bar dataKey="total" fill="#3B82F6" radius={[0, 4, 4, 0]} maxBarSize={18} />
@@ -193,16 +191,16 @@ export default function DashboardVendedor() {
) : (
<ResponsiveContainer width="100%" height={260}>
<BarChart data={datosDesarrollo} layout="vertical" margin={{ top: 8, right: 16, left: 8, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke={GRID_LIGHT} horizontal={false} />
<XAxis type="number" tick={{ fontSize: 10, fill: LIGHT_TEXT }} allowDecimals={false} />
<CartesianGrid strokeDasharray="3 3" stroke={gridStroke()} horizontal={false} />
<XAxis type="number" tick={{ fontSize: 10, fill: axisTextColor() }} allowDecimals={false} />
<YAxis
type="category"
dataKey="desarrollo"
tick={{ fontSize: 10, fill: LIGHT_TEXT }}
tick={{ fontSize: 10, fill: axisTextColor() }}
width={90}
/>
<Tooltip
contentStyle={{ fontSize: 12, borderRadius: 8 }}
{...tooltipProps()}
formatter={(value: unknown) => [`${Number(value)} ventas`, "Ventas"]}
/>
<Bar dataKey="ventas" fill="#8B5CF6" radius={[0, 4, 4, 0]} maxBarSize={18}>