Fix supplies navigation paths

src/pages/Cutting.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
-import { AlertTriangle, ClipboardList, Download, Layers3, Package, Palette, RotateCcw, Ruler, Save as SaveIcon, Scissors, Search, Settings2, X } from 'lucide-react';
+import { AlertTriangle, ArrowLeft, ClipboardList, Download, Layers3, Package, Palette, RotateCcw, Ruler, Save as SaveIcon, Scissors, Search, Settings2, X } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
 import PaginationControls from '../components/PaginationControls';
 import ProductColorBadge from '../components/ProductColorBadge';
@@ -399,6 +399,10 @@ const Cutting = () => {
     <div className="space-y-6">
       <div className="grid grid-cols-1 gap-4 2xl:grid-cols-[minmax(520px,1fr)_auto] 2xl:items-start">
         <div>
+          <Link to="/supplies" className="mb-3 inline-flex items-center gap-2 text-sm font-bold text-zinc-500 transition-colors hover:text-zinc-900 dark:text-dark-muted dark:hover:text-dark-text">
+            <ArrowLeft className="h-4 w-4" />
+            Voltar para Suprimentos
+          </Link>
           <h1 className="mb-2 text-2xl font-bold text-zinc-900 dark:text-dark-text">Plano de Corte</h1>
           <p className="font-medium text-zinc-500 dark:text-dark-muted">
             Necessidade por família, cor e tamanho calculada com vendas, estoque e cobertura alvo.

src/pages/ProductionOrders.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useOutletContext } from 'react-router-dom';
+import { Link, useOutletContext } from 'react-router-dom';
-import { CalendarDays, CheckCircle2, ClipboardList, Clock3, Download, PackageCheck, Search } from 'lucide-react';
+import { ArrowLeft, CalendarDays, CheckCircle2, ClipboardList, Clock3, Download, PackageCheck, Search } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
 import PaginationControls from '../components/PaginationControls';
 import RefreshStatus from '../components/RefreshStatus';
@@ -198,6 +198,10 @@ const ProductionOrders = () => {
     <div className="space-y-6">
       <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
         <div>
+          <Link to="/supplies" className="mb-3 inline-flex items-center gap-2 text-sm font-bold text-dark-muted transition-colors hover:text-dark-text">
+            <ArrowLeft className="h-4 w-4" />
+            Voltar para Suprimentos
+          </Link>
           <h1 className="text-2xl font-bold text-dark-text">Ordens de Produção</h1>
           <p className="mt-2 text-dark-muted font-medium">Acompanhe as ordens de produção sincronizadas do Tiny.</p>
         </div>

src/pages/Replenishment.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link, useOutletContext, useSearchParams } from 'react-router-dom';
-import { AlertTriangle, CheckCircle2, Download, Package, Search, TrendingUp } from 'lucide-react';
+import { AlertTriangle, ArrowLeft, CheckCircle2, Download, Package, Search, TrendingUp } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
 import PaginationControls from '../components/PaginationControls';
 import RefreshStatus from '../components/RefreshStatus';
@@ -314,6 +314,10 @@ const Replenishment = () => {
     <div className="space-y-6">
       <div className="grid grid-cols-1 gap-4 2xl:grid-cols-[minmax(520px,1fr)_auto] 2xl:items-start">
         <div>
+          <Link to="/supplies" className="mb-3 inline-flex items-center gap-2 text-sm font-bold text-zinc-500 transition-colors hover:text-zinc-900 dark:text-dark-muted dark:hover:text-dark-text">
+            <ArrowLeft className="h-4 w-4" />
+            Voltar para Suprimentos
+          </Link>
           <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">
             O período selecionado define a base de vendas; a cobertura define quantos dias de estoque sugerir.

src/pages/Supplies.tsx

@@ -125,7 +125,7 @@ const SuppliesHub = () => (
       <ModuleCard title="Planos / Ordem de Produção" description="Ordens geradas pelo corte e acompanhamento de produção." icon={ClipboardList} to="/production-orders" />
       <ModuleCard title="Planejamento de Malha" description="Fila de compra/recebimento de matéria-prima para alimentar o corte." icon={Ruler} to="/supplies/fabric-planning" />
       <ModuleCard title="Ordens de Compra" description="Compra, recebimento e vínculo financeiro de materiais." icon={ShoppingCart} disabled />
-      <ModuleCard title="Necessidade de Compra" description="Itens abaixo do mínimo e necessidade projetada para compra." icon={BarChart3} to="/replenishment" />
+      <ModuleCard title="Necessidade de Compra" description="Itens abaixo do mínimo e necessidade projetada para compra." icon={BarChart3} to="/supplies/purchase-needs" />
       <ModuleCard title="Relatórios" description="Extratos operacionais de estoque, consumo e movimentações." icon={Download} disabled />
     </div>
   </div>
@@ -325,12 +325,50 @@ const FabricPlanningScreen = () => (
   </div>
 );
 
+const PurchaseNeedsScreen = () => (
+  <div className={pageClassName}>
+    <Header title="Necessidade de Compra" subtitle="Materiais abaixo do mínimo e necessidade projetada para compra." backTo="/supplies" />
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+      {[
+        { label: 'Itens críticos', value: '0' },
+        { label: 'Compra sugerida', value: '0 kg' },
+        { label: 'Fornecedores pendentes', value: '0' },
+      ].map(stat => (
+        <div key={stat.label} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+          <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">{stat.label}</p>
+          <p className="mt-2 text-3xl font-bold text-dark-text">{stat.value}</p>
+        </div>
+      ))}
+    </div>
+    <div className={`${panelClassName} p-5`}>
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h2 className="text-base font-bold text-dark-text">Necessidade por material</h2>
+          <p className="mt-1 text-sm font-semibold text-dark-muted">Calculada com estoque atual, mínimo configurado e consumo dos planos.</p>
+        </div>
+        <button type="button" className={buttonClassName}><Download className="h-4 w-4" /> Exportar CSV</button>
+      </div>
+      <div className={emptyStateClassName}>
+        <BarChart3 className="h-8 w-8 text-brand-primary" />
+        <h3 className="text-base font-bold text-dark-text">Nenhuma necessidade de compra</h3>
+        <p className="text-sm font-semibold text-dark-muted">Configure mínimos e registre estoque para gerar sugestões.</p>
+      </div>
+    </div>
+    <div className={`${panelClassName} p-5`}>
+      <h2 className="text-base font-bold text-dark-text">Estoque mínimo por item</h2>
+      <p className="mt-2 text-sm font-semibold text-dark-muted">Defina o ponto de pedido de cada matéria-prima para aparecer aqui quando ficar abaixo do mínimo.</p>
+      <button type="button" className={`${buttonClassName} mt-4`}>Configurar estoques mínimos</button>
+    </div>
+  </div>
+);
+
 const Supplies = () => {
   const { section } = useParams<{ section?: string }>();
 
   if (!section) return <SuppliesHub />;
   if (section === 'inventory') return <InventoryScreen />;
   if (section === 'fabric-planning') return <FabricPlanningScreen />;
+  if (section === 'purchase-needs') return <PurchaseNeedsScreen />;
 
   return <Navigate to="/supplies" replace />;
 };