feat: rango de fechas personalizado y datos hasta ayer (salvo Hoy)

Selector libre en Ad Tracker/Seguimiento; presets y KPIs cierran en ayer.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/AdTrackerClient.tsx

@@ -2,7 +2,6 @@
 
 import React, { useEffect, useMemo, useState } from 'react';
 import {
-  AD_TRACKER_PRESETS,
   RangePreset,
   normalizePlatform,
   resolveAdRange,
@@ -14,6 +13,7 @@ import {
   CreativeZoomModal,
 } from '@/components/AdCreativesGallery';
 import { PageHeader } from '@/components/ui';
+import DateRangePicker from '@/components/DateRangePicker';
 
 type PlatformKpis = {
   spend: number;
@@ -318,6 +318,8 @@ export default function AdTrackerClient({
   rows: AdDailyRow[];
 }) {
   const [preset, setPreset] = useState<RangePreset>('last_7d');
+  const [customSince, setCustomSince] = useState('');
+  const [customUntil, setCustomUntil] = useState('');
   const [tab, setTab] = useState<Tab>('resumen');
   const [chartMode, setChartMode] = useState<ChartMode>('combined');
   const [creatives, setCreatives] = useState<AdCreativeCard[]>([]);
@@ -325,7 +327,10 @@ export default function AdTrackerClient({
   const [creativesWarning, setCreativesWarning] = useState<string | null>(null);
   const [zoomAd, setZoomAd] = useState<AdCreativeCard | null>(null);
 
-  const range = useMemo(() => resolveAdRange(preset), [preset]);
+  const range = useMemo(
+    () => resolveAdRange(preset, { since: customSince, until: customUntil }),
+    [preset, customSince, customUntil]
+  );
 
   useEffect(() => {
     let cancelled = false;
@@ -415,30 +420,23 @@ export default function AdTrackerClient({
       />
 
       {/* Period presets */}
-      <div>
-        <p className="text-[10px] uppercase tracking-wider text-gray-500 mb-2">
-          Periodo
-        </p>
-        <div className="flex flex-wrap gap-1.5">
-          {AD_TRACKER_PRESETS.map((p) => (
-            <button
-              key={p.id}
-              type="button"
-              onClick={() => setPreset(p.id)}
-              className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${
-                preset === p.id
-                  ? 'bg-brand-500 text-white'
-                  : 'bg-gray-100 text-gray-600 hover:bg-gray-50'
-              }`}
-            >
-              {p.label}
-            </button>
-          ))}
-          <span className="px-3 py-1.5 rounded-lg text-xs font-medium border border-gray-200 text-gray-600">
-            {range.label}
-          </span>
-        </div>
-      </div>
+      <DateRangePicker
+        preset={preset}
+        customSince={customSince || range.since}
+        customUntil={customUntil || range.until}
+        onPreset={(p) => {
+          setPreset(p);
+          if (p !== 'custom') {
+            const r = resolveAdRange(p);
+            setCustomSince(r.since);
+            setCustomUntil(r.until);
+          }
+        }}
+        onCustomChange={(since, until) => {
+          setCustomSince(since);
+          setCustomUntil(until);
+        }}
+      />
 
       {/* Tabs */}
       <div className="flex flex-wrap gap-1.5">

src/components/DateRangePicker.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  AD_TRACKER_PRESETS,
+  RangePreset,
+  isoYesterday,
+  resolveAdRange,
+} from '@/lib/ad-tracker-range';
+
+type Props = {
+  preset: RangePreset;
+  customSince: string;
+  customUntil: string;
+  onPreset: (preset: RangePreset) => void;
+  onCustomChange: (since: string, until: string) => void;
+  /** Compact = fewer labels (for sticky headers). */
+  compact?: boolean;
+};
+
+/**
+ * Periodo predefinido + rango libre.
+ * El hasta personalizado no puede pasar de ayer (Hoy solo vía botón «Hoy»).
+ */
+export default function DateRangePicker({
+  preset,
+  customSince,
+  customUntil,
+  onPreset,
+  onCustomChange,
+  compact = false,
+}: Props) {
+  const yesterday = useMemo(() => isoYesterday(), []);
+  const range = useMemo(
+    () =>
+      resolveAdRange(preset, {
+        since: customSince,
+        until: customUntil,
+      }),
+    [preset, customSince, customUntil]
+  );
+
+  const [draftSince, setDraftSince] = useState(customSince || range.since);
+  const [draftUntil, setDraftUntil] = useState(customUntil || range.until);
+
+  useEffect(() => {
+    if (preset === 'custom') {
+      setDraftSince(customSince || range.since);
+      setDraftUntil(customUntil || range.until);
+    } else {
+      setDraftSince(range.since);
+      setDraftUntil(range.until);
+    }
+  }, [preset, customSince, customUntil, range.since, range.until]);
+
+  function applyCustom() {
+    let s = draftSince || yesterday;
+    let u = draftUntil || yesterday;
+    if (u > yesterday) u = yesterday;
+    if (s > u) s = u;
+    onCustomChange(s, u);
+    onPreset('custom');
+  }
+
+  return (
+    <div className="space-y-2">
+      {!compact ? (
+        <p className="text-[10px] uppercase tracking-wider text-gray-500">
+          Periodo
+        </p>
+      ) : null}
+      <div className="flex flex-wrap gap-1.5 items-center">
+        {AD_TRACKER_PRESETS.map((p) => (
+          <button
+            key={p.id}
+            type="button"
+            onClick={() => onPreset(p.id)}
+            className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${
+              preset === p.id
+                ? 'bg-brand-500 text-white'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-50'
+            }`}
+          >
+            {p.label}
+          </button>
+        ))}
+        <button
+          type="button"
+          onClick={() => {
+            let until = draftUntil || range.until;
+            let since = draftSince || range.since;
+            if (until > yesterday) until = yesterday;
+            if (since > until) since = until;
+            setDraftSince(since);
+            setDraftUntil(until);
+            onCustomChange(since, until);
+            onPreset('custom');
+          }}
+          className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${
+            preset === 'custom'
+              ? 'bg-brand-500 text-white'
+              : 'bg-gray-100 text-gray-600 hover:bg-gray-50'
+          }`}
+        >
+          Personalizado
+        </button>
+        <span className="px-3 py-1.5 rounded-lg text-xs font-medium border border-gray-200 text-gray-600">
+          {range.label}
+        </span>
+      </div>
+
+      {preset === 'custom' ? (
+        <div className="flex flex-wrap items-end gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2.5">
+          <label className="text-xs text-gray-600">
+            Desde
+            <input
+              type="date"
+              value={draftSince}
+              max={draftUntil || yesterday}
+              onChange={(e) => setDraftSince(e.target.value)}
+              className="mt-1 block rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-sm text-gray-900"
+            />
+          </label>
+          <label className="text-xs text-gray-600">
+            Hasta
+            <input
+              type="date"
+              value={draftUntil}
+              max={yesterday}
+              min={draftSince || undefined}
+              onChange={(e) => setDraftUntil(e.target.value)}
+              className="mt-1 block rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-sm text-gray-900"
+            />
+          </label>
+          <button
+            type="button"
+            onClick={applyCustom}
+            className="rounded-lg bg-gray-900 px-3 py-1.5 text-xs font-semibold text-white hover:bg-gray-800"
+          >
+            Aplicar
+          </button>
+          <p className="w-full text-[10px] text-gray-500">
+            El rango personalizado llega como máximo a ayer. Usa «Hoy» para
+            incluir el día en curso.
+          </p>
+        </div>
+      ) : preset !== 'today' ? (
+        <p className="text-[10px] text-gray-400">
+          Datos hasta ayer · «Hoy» incluye el día en curso
+        </p>
+      ) : null}
+    </div>
+  );
+}

src/components/SeguimientoBoard.tsx

@@ -25,8 +25,8 @@ import {
   sumWeekly,
 } from '@/lib/metrics';
 import { PageHeader } from '@/components/ui';
+import DateRangePicker from '@/components/DateRangePicker';
 import {
-  AD_TRACKER_PRESETS,
   RangePreset,
   resolveAdRange,
 } from '@/lib/ad-tracker-range';
@@ -263,6 +263,8 @@ export default function SeguimientoBoard() {
   const [openId, setOpenId] = useState<string | null>(null);
   const [query, setQuery] = useState('');
   const [preset, setPreset] = useState<RangePreset>('last_30d');
+  const [customSince, setCustomSince] = useState('');
+  const [customUntil, setCustomUntil] = useState('');
   const [noteTitle, setNoteTitle] = useState('');
   const [noteBody, setNoteBody] = useState('');
   const [noteBusy, setNoteBusy] = useState(false);
@@ -288,7 +290,10 @@ export default function SeguimientoBoard() {
     void load();
   }, []);
 
-  const range = useMemo(() => resolveAdRange(preset), [preset]);
+  const range = useMemo(
+    () => resolveAdRange(preset, { since: customSince, until: customUntil }),
+    [preset, customSince, customUntil]
+  );
 
   const rangedWeekly = useMemo(() => {
     const rows = data?.weekly || [];
@@ -450,28 +455,28 @@ export default function SeguimientoBoard() {
       />
 
       {/* Date selector */}
-      <section className="rounded-2xl border border-white/[0.06] bg-card/80 p-4 space-y-3">
-        <div className="flex items-center gap-2 text-xs text-gray-400">
-          <CalendarRange className="w-3.5 h-3.5 text-sky-400" />
+      <section className="rounded-2xl border border-gray-200 bg-white p-4 space-y-3">
+        <div className="flex items-center gap-2 text-xs text-gray-500">
+          <CalendarRange className="w-3.5 h-3.5 text-sky-500" />
           Periodo
-          <span className="text-gray-500">· {range.label}</span>
-        </div>
-        <div className="flex flex-wrap gap-1.5">
-          {AD_TRACKER_PRESETS.map((p) => (
-            <button
-              key={p.id}
-              type="button"
-              onClick={() => setPreset(p.id)}
-              className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${
-                preset === p.id
-                  ? 'bg-brand-500 text-white'
-                  : 'bg-gray-100 text-gray-600 hover:bg-gray-50'
-              }`}
-            >
-              {p.label}
-            </button>
-          ))}
         </div>
+        <DateRangePicker
+          preset={preset}
+          customSince={customSince || range.since}
+          customUntil={customUntil || range.until}
+          onPreset={(p) => {
+            setPreset(p);
+            if (p !== 'custom') {
+              const r = resolveAdRange(p);
+              setCustomSince(r.since);
+              setCustomUntil(r.until);
+            }
+          }}
+          onCustomChange={(since, until) => {
+            setCustomSince(since);
+            setCustomUntil(until);
+          }}
+        />
       </section>
 
       {/* KPI cards (Métricas-like) */}