Add grouped replenishment analysis

src/pages/Products.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
-import { Download, Filter, Package, PackageCheck, Search, TrendingDown, TrendingUp, X } from 'lucide-react';
+import { Download, Filter, Package, PackageCheck, PackagePlus, Search, TrendingDown, TrendingUp, X } from 'lucide-react';
 import PaginationControls from '../components/PaginationControls';
 import RefreshStatus from '../components/RefreshStatus';
 import type { DateRange, ProductAnalyticsItem } from '../types';
@@ -569,6 +569,15 @@ const Products = () => {
             )}
           </div>
 
+          <Link
+            to="/replenishment?status=need&view=group"
+            className="flex items-center justify-center gap-2 bg-dark-card border border-dark-border px-4 py-2.5 rounded-xl shadow-sm hover:border-brand-primary transition-colors text-sm font-medium text-dark-text cursor-pointer"
+            title="Ver necessidade de reposição"
+          >
+            <PackagePlus size={16} className="text-brand-primary" />
+            <span className="hidden sm:inline">Reposição</span>
+          </Link>
+
           <button
             onClick={() => {
               const exportData = productsData.map(product => ({