Simplify replenishment date controls

src/pages/Replenishment.tsx

@@ -28,8 +28,6 @@ type ReplenishmentRow = ProductAnalyticsItem & {
   sizes: string[];
 };
 
-const horizonOptions = [7, 15, 30, 60];
-
 const statusStyles: Record<ReplenishmentStatus, { label: string; className: string; dotClass: string }> = {
   need: {
     label: 'Repor',
@@ -117,7 +115,6 @@ const Replenishment = () => {
   const [products, setProducts] = useState<ProductAnalyticsItem[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState('');
-  const [horizonDays, setHorizonDays] = useState(30);
   const [statusFilter, setStatusFilter] = useState<ReplenishmentFilter>(() => {
     const filter = searchParams.get('status') as ReplenishmentFilter | null;
     return filter && filterOptions.some(option => option.value === filter) ? filter : 'need';
@@ -126,6 +123,7 @@ const Replenishment = () => {
   const [viewMode, setViewMode] = useState<ReplenishmentView>(() => searchParams.get('view') === 'group' ? 'group' : 'sku');
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
+  const horizonDays = useMemo(() => getRangeDays(dateRange), [dateRange]);
 
   useEffect(() => {
     let isMounted = true;
@@ -285,7 +283,7 @@ const Replenishment = () => {
         <div>
           <h1 className="text-2xl font-bold mb-2 text-zinc-900 dark:text-dark-text">Necessidade de Reposição</h1>
           <p className="text-zinc-500 dark:text-dark-muted font-medium">
-            Demanda projetada pelo ritmo de venda atual comparada com o estoque disponível.
+            O período selecionado define a base de vendas e a duração da projeção de reposição.
           </p>
         </div>
 
@@ -385,7 +383,7 @@ const Replenishment = () => {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[auto_1fr_160px_180px_190px]">
+      <div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[auto_1fr_180px_190px]">
         <div className="inline-flex rounded-xl border border-dark-border bg-dark-input p-1">
           {[
             { key: 'sku' as const, label: 'SKU' },
@@ -423,19 +421,6 @@ const Replenishment = () => {
           />
         </div>
 
-        <select
-          value={horizonDays}
-          onChange={(event) => {
-            setHorizonDays(Number(event.target.value));
-            setCurrentPage(1);
-          }}
-          className="h-11 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text focus:outline-none focus:border-brand-primary cursor-pointer"
-        >
-          {horizonOptions.map(days => (
-            <option key={days} value={days}>{days} dias</option>
-          ))}
-        </select>
-
         <select
           value={statusFilter}
           onChange={(event) => {