Marketing/4ventures-client-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: interfaz clara unificada en Centro de Mando

Browse Source 
Shell con nav agrupada y activa, PageHeader común, tipografía y tokens.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
4Ventures
2026-09-24 09:32:35 +02:00
parent 8c11291396
commit bf9a504c40
17 changed files with 577 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/MetricsDashboard.tsx
View File

@@ -33,6 +33,7 @@ import {
KpiWeeklyRow,
KpiRangeKey,
} from '@/lib/metrics';
import { PageHeader } from '@/components/ui';
type Card = {
key: keyof MetricTotals;
@@ -250,46 +251,39 @@ export default function MetricsDashboard({
return (
<div className="space-y-8">
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-3">
<div>
<h2 className="text-2xl font-bold tracking-tight text-white">
North Star · métricas
</h2>
<p className="text-sm text-gray-400 mt-1">
{label}
{portfolioWide
? ' · portafolio'
: ' · zoom cliente'}
. Periodo {rangeHint} (mismos días calendario que Ad Tracker).
</p>
</div>
<div className="flex items-center gap-2">
<CalendarRange className="w-4 h-4 text-gray-500" />
<div className="flex gap-1 rounded-lg border border-gray-800 p-0.5 bg-black/20">
{(
[
['7d', '7d'],
['30d', '30d'],
['month', 'Mes'],
['all', 'Todo'],
] as [RangeKey, string][]
).map(([k, lbl]) => (
<button
key={k}
type="button"
onClick={() => setRange(k)}
className={`px-2.5 py-1 text-xs rounded-md ${
range === k
? 'bg-brand-500/20 text-brand-300'
: 'text-gray-400 hover:text-white'
}`}
>
{lbl}
</button>
))}
<PageHeader
eyebrow="Rendimiento"
title="Métricas"
description={`${label}${portfolioWide ? ' · portafolio' : ''}. Periodo ${rangeHint} (mismos días calendario que Ad Tracker).`}
actions={
<div className="flex items-center gap-2">
<CalendarRange className="w-4 h-4 text-gray-500" />
<div className="flex gap-1 rounded-lg border border-white/[0.08] p-0.5 bg-black/20">
{(
[
['7d', '7d'],
['30d', '30d'],
['month', 'Mes'],
['all', 'Todo'],
] as [RangeKey, string][]
).map(([k, lbl]) => (
<button
key={k}
type="button"
onClick={() => setRange(k)}
className={`px-2.5 py-1 text-xs rounded-md ${
range === k
? 'bg-brand-500/20 text-brand-300'
: 'text-gray-400 hover:text-white'
}`}
>
{lbl}
</button>
))}
</div>
</div>
</div>
</div>
}
/>
{sparse && (
<p className="text-xs text-amber-400/90 border border-amber-500/20 rounded-lg px-3 py-2">