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">