Initial commit: Dockerized, Postgres, CI/CD pipeline

src/pages/ClientDetails.tsx

@@ -0,0 +1,145 @@
+import { useMemo } from 'react';
+import { useParams, Link, useOutletContext } from 'react-router-dom';
+import { ArrowLeft, User, Calendar, Tag, Package, DollarSign } from 'lucide-react';
+import type { OrderData } from '../types';
+
+const ClientDetails = () => {
+  const { name } = useParams<{ name: string }>();
+  const decodedName = name ? decodeURIComponent(name) : '';
+  const { ordersData } = useOutletContext<{ ordersData: OrderData[] }>();
+
+  const { groupedOrders, totalSpent, totalItems } = useMemo(() => {
+    const orders = ordersData;
+    const clientOrders = orders.filter(order => {
+      const clientName = order.Nome_Cliente || `Cliente Desconhecido (Pedido ${order.Valor_Pedido})`;
+      return clientName === decodedName;
+    });
+    
+    const groupedOrdersMap: Record<string, { date: string, orderTotal: number, items: OrderData[] }> = {};
+    let totalSpent = 0;
+    let totalItems = 0;
+
+    clientOrders.forEach(order => {
+      totalSpent += (order.Quantidade * order.Valor_Unitario);
+      totalItems += order.Quantidade;
+
+      // Use date and total order value as a unique cart/order identifier
+      const key = `${order.Data_Pedido}_${order.Valor_Pedido}`;
+      if (!groupedOrdersMap[key]) {
+        groupedOrdersMap[key] = {
+          date: order.Data_Pedido,
+          orderTotal: order.Valor_Pedido,
+          items: []
+        };
+      }
+      groupedOrdersMap[key].items.push(order);
+    });
+
+    // Sort grouped orders by date descending
+    const groupedOrders = Object.values(groupedOrdersMap).sort((a, b) => {
+      const [dayA, monthA, yearA] = a.date.split('-').map(Number);
+      const [dayB, monthB, yearB] = b.date.split('-').map(Number);
+      return new Date(yearB, monthB - 1, dayB).getTime() - new Date(yearA, monthA - 1, dayA).getTime();
+    });
+
+    return { groupedOrders, totalSpent, totalItems };
+  }, [decodedName, ordersData]);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
+  };
+
+  if (!groupedOrders.length) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-zinc-500 dark:text-dark-muted font-medium">Cliente não encontrado.</p>
+        <Link to="/clients" className="text-brand-primary hover:underline mt-4 inline-block font-bold">Voltar para clientes</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header Area */}
+      <div className="flex flex-col gap-4">
+        <Link to="/clients" className="inline-flex items-center text-sm font-bold text-zinc-400 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text transition-colors w-fit">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Voltar
+        </Link>
+        
+        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+          <div className="flex items-center gap-4">
+            <div className="w-16 h-16 rounded-2xl bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border flex items-center justify-center shadow-sm">
+              <User className="w-8 h-8 text-brand-primary" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{decodedName}</h1>
+              <p className="text-zinc-500 dark:text-dark-muted font-medium">Histórico completo de compras</p>
+            </div>
+          </div>
+          
+          <div className="flex gap-8">
+            <div className="flex flex-col items-center">
+              <p className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest mb-1">Total Gasto</p>
+              <p className="text-2xl font-bold text-brand-primary">{formatCurrency(totalSpent)}</p>
+            </div>
+            <div className="flex flex-col items-center">
+              <p className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest mb-1">Itens Comprados</p>
+              <p className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{totalItems}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Orders List */}
+      <div className="flex flex-col gap-6">
+        {groupedOrders.map((group, groupIndex) => (
+          <div key={groupIndex} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
+            <div className="p-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-header flex justify-between items-center">
+              <h2 className="text-sm font-bold uppercase tracking-wider text-zinc-500 dark:text-dark-muted">
+                Data do Pedido: {group.date}
+              </h2>
+              <span className="text-sm font-bold text-brand-primary">
+                Total do Pedido: {formatCurrency(group.orderTotal)}
+              </span>
+            </div>
+            
+            <div className="divide-y divide-zinc-100 dark:divide-dark-border">
+              {group.items.map((order, index) => (
+                <div key={`${order.ID_Produto}-${index}`} className="px-4 py-2 flex flex-col md:flex-row md:items-center justify-between gap-3 hover:bg-zinc-50/50 dark:hover:bg-dark-input/30 transition-colors">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-0.5">
+                      <div className="flex items-center gap-1">
+                        <Tag className="w-3 h-3 text-zinc-400 dark:text-dark-muted" />
+                        <span className="text-[10px] font-bold text-zinc-400 dark:text-dark-muted">ID: {order.ID_Produto}</span>
+                      </div>
+                    </div>
+                    <h3 className="text-sm font-bold text-zinc-900 dark:text-dark-text truncate mb-1">{order.Descricao_Produto}</h3>
+                    
+                    <div className="flex gap-4">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <Package className="w-3.5 h-3.5 text-zinc-400 dark:text-dark-muted" />
+                        <span className="text-zinc-500 dark:text-dark-muted font-medium">Qtd: <span className="text-zinc-900 dark:text-dark-text font-bold">{order.Quantidade}</span></span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <DollarSign className="w-3.5 h-3.5 text-zinc-400 dark:text-dark-muted" />
+                        <span className="text-zinc-500 dark:text-dark-muted font-medium">Preço: <span className="text-zinc-900 dark:text-dark-text font-bold">{formatCurrency(order.Valor_Unitario)}</span></span>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div className="text-right shrink-0">
+                    <p className="text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest mb-0.5">Subtotal</p>
+                    <p className="text-base font-bold text-zinc-900 dark:text-dark-text">{formatCurrency(order.Quantidade * order.Valor_Unitario)}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ClientDetails;

src/pages/Clients.tsx

@@ -0,0 +1,146 @@
+import { useMemo, useState } from 'react';
+import { Link, useOutletContext } from 'react-router-dom';
+import { Search, ChevronRight, Filter } from 'lucide-react';
+import type { OrderData } from '../types';
+
+type SortOption = 'recent' | 'spent_desc' | 'spent_asc' | 'items_desc' | 'items_asc';
+
+const Clients = () => {
+  const { ordersData } = useOutletContext<{ ordersData: OrderData[] }>();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState<SortOption>('recent');
+
+  const clientsData = useMemo(() => {
+    const orders = ordersData;
+    const clientMap: Record<string, { totalSpent: number, totalItems: number, uniqueOrders: Set<string>, lastPurchase: number }> = {};
+
+    orders.forEach(order => {
+      const clientName = order.Nome_Cliente || `Cliente Desconhecido (Pedido ${order.Valor_Pedido})`;
+
+      if (!clientMap[clientName]) {
+        clientMap[clientName] = { totalSpent: 0, totalItems: 0, uniqueOrders: new Set(), lastPurchase: 0 };
+      }
+      
+      // Calculate total spent based on quantity * unit price
+      clientMap[clientName].totalSpent += (order.Quantidade * order.Valor_Unitario);
+      clientMap[clientName].totalItems += order.Quantidade;
+      clientMap[clientName].uniqueOrders.add(`${order.Data_Pedido}_${order.Valor_Pedido}`);
+      
+      const [day, month, year] = order.Data_Pedido.split('-').map(Number);
+      const orderTime = new Date(year, month - 1, day).getTime();
+      
+      if (orderTime > clientMap[clientName].lastPurchase) {
+        clientMap[clientName].lastPurchase = orderTime;
+      }
+    });
+
+    let result = Object.keys(clientMap).map(name => ({
+      name,
+      totalSpent: clientMap[name].totalSpent,
+      totalItems: clientMap[name].totalItems,
+      orderCount: clientMap[name].uniqueOrders.size, // Grouped by unique date+value combinations
+      lastPurchase: clientMap[name].lastPurchase
+    }));
+
+    if (searchTerm) {
+      result = result.filter(c => c.name.toLowerCase().includes(searchTerm.toLowerCase()));
+    }
+
+    return result.sort((a, b) => {
+      switch (sortBy) {
+        case 'recent': return b.lastPurchase - a.lastPurchase;
+        case 'spent_desc': return b.totalSpent - a.totalSpent;
+        case 'spent_asc': return a.totalSpent - b.totalSpent;
+        case 'items_desc': return b.totalItems - a.totalItems;
+        case 'items_asc': return a.totalItems - b.totalItems;
+        default: return 0;
+      }
+    });
+  }, [searchTerm, sortBy, ordersData]);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold mb-2 text-zinc-900 dark:text-dark-text">Clientes</h1>
+          <p className="text-zinc-500 dark:text-dark-muted font-medium">Métricas de engajamento e histórico de consumo dos seus clientes.</p>
+        </div>
+        
+        <div className="flex flex-col sm:flex-row gap-3">
+          <div className="relative">
+            <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-400 dark:text-dark-muted w-4 h-4" />
+            <select 
+              value={sortBy}
+              onChange={(e) => setSortBy(e.target.value as SortOption)}
+              className="appearance-none bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border text-zinc-700 dark:text-dark-text text-sm rounded-xl pl-9 pr-8 py-2.5 focus:outline-none focus:border-brand-primary transition-all shadow-sm cursor-pointer"
+            >
+              <option value="recent">Mais Recentes</option>
+              <option value="spent_desc">Maior Gasto</option>
+              <option value="spent_asc">Menor Gasto</option>
+              <option value="items_desc">Mais Produtos</option>
+              <option value="items_asc">Menos Produtos</option>
+            </select>
+          </div>
+
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-400 dark:text-dark-muted w-5 h-5" />
+            <input 
+              type="text" 
+              placeholder="Buscar cliente..." 
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full md:w-64 bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border text-zinc-900 dark:text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20 transition-all shadow-sm"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
+        <div className="overflow-x-auto">
+          <table className="w-full text-left text-sm">
+            <thead className="bg-zinc-50 dark:bg-dark-header border-b border-zinc-100 dark:border-dark-border text-zinc-500 dark:text-dark-muted">
+              <tr>
+                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Posição</th>
+                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Nome do Cliente</th>
+                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Total Gasto</th>
+                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Produtos Comprados</th>
+                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px] text-right">Ações</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
+              {clientsData.map((client, index) => (
+                <tr key={client.name} className="hover:bg-zinc-50/80 dark:hover:bg-dark-input/50 transition-colors group">
+                  <td className="px-6 py-2.5">
+                    <span className="inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold bg-zinc-100 dark:bg-dark-border text-zinc-500 dark:text-dark-muted">
+                      {index + 1}
+                    </span>
+                  </td>
+                  <td className="px-6 py-2.5 font-semibold text-zinc-900 dark:text-dark-text">{client.name}</td>
+                  <td className="px-6 py-2.5 text-brand-primary font-bold">{formatCurrency(client.totalSpent)}</td>
+                  <td className="px-6 py-2.5 text-zinc-500 dark:text-dark-muted text-xs font-medium">
+                    {client.totalItems} un. ({client.orderCount} {client.orderCount === 1 ? 'pedido' : 'pedidos'})
+                  </td>
+                  <td className="px-6 py-2.5 text-right">
+                    <Link 
+                      to={`/clients/${encodeURIComponent(client.name)}`}
+                      className="inline-flex items-center text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity"
+                    >
+                      Ver detalhes
+                      <ChevronRight className="w-3.5 h-3.5 ml-1" />
+                    </Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Clients;

src/pages/Dashboard.tsx

@@ -0,0 +1,164 @@
+import { useMemo } from 'react';
+import { useOutletContext } from 'react-router-dom';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
+import { DollarSign, ShoppingCart, TrendingUp } from 'lucide-react';
+import DateRangePicker from '../components/DateRangePicker';
+import type { OrderData, DateRange } from '../types';
+
+const COLORS = [
+  '#10b981', '#3b82f6', '#8b5cf6', '#f43f5e', '#f97316', 
+  '#06b6d4', '#ec4899', '#eab308', '#6366f1', '#14b8a6'
+];
+
+const Dashboard = () => {
+  const { dateRange, setDateRange, ordersData } = useOutletContext<{ dateRange: DateRange, setDateRange: (range: DateRange) => void, ordersData: OrderData[] }>();
+
+  const filteredData = useMemo(() => {
+    const orders = ordersData;
+    return orders.filter(order => {
+      const [day, month, year] = order.Data_Pedido.split('-').map(Number);
+      const orderDate = new Date(year, month - 1, day);
+      return orderDate >= dateRange.start && orderDate <= dateRange.end;
+    });
+  }, [dateRange, ordersData]);
+
+  const { totalRevenue, totalOrders, averageOrderValue, salesByProduct } = useMemo(() => {
+    let revenue = 0;
+    let totalItems = 0;
+    const productSalesMap: Record<string, number> = {};
+
+    filteredData.forEach(order => {
+      revenue += (order.Quantidade * order.Valor_Unitario);
+      totalItems += order.Quantidade;
+      const productName = order.Descricao_Produto.split(' TAMANHO')[0]; 
+      if (productSalesMap[productName]) {
+        productSalesMap[productName] += order.Quantidade;
+      } else {
+        productSalesMap[productName] = order.Quantidade;
+      }
+    });
+
+    const productsData = Object.keys(productSalesMap).map(key => ({
+      name: key,
+      value: productSalesMap[key]
+    })).sort((a, b) => b.value - a.value).slice(0, 10);
+
+    return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData };
+  }, [filteredData]);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold mb-2 text-dark-text">Visão Geral</h1>
+          <p className="text-dark-muted font-medium">Resumo de vendas e performance dos produtos.</p>
+        </div>
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
+          <div className="flex justify-between items-start">
+            <div>
+              <p className="text-dark-muted text-sm font-medium mb-1">Receita Total</p>
+              <h3 className="text-3xl font-bold text-dark-text">{formatCurrency(totalRevenue)}</h3>
+            </div>
+            <div className="p-3 bg-emerald-500/10 rounded-xl">
+              <DollarSign className="w-6 h-6 text-emerald-500" />
+            </div>
+          </div>
+        </div>
+        
+        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
+          <div className="flex justify-between items-start">
+            <div>
+              <p className="text-dark-muted text-sm font-medium mb-1">Total de Produtos Vendidos</p>
+              <h3 className="text-3xl font-bold text-dark-text">{totalOrders}</h3>
+            </div>
+            <div className="p-3 bg-blue-500/10 rounded-xl">
+              <ShoppingCart className="w-6 h-6 text-blue-500" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
+          <div className="flex justify-between items-start">
+            <div>
+              <p className="text-dark-muted text-sm font-medium mb-1">Ticket Médio (Por Item)</p>
+              <h3 className="text-3xl font-bold text-dark-text">{formatCurrency(averageOrderValue)}</h3>
+            </div>
+            <div className="p-3 bg-purple-500/10 rounded-xl">
+              <TrendingUp className="w-6 h-6 text-purple-500" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
+          <h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3>
+          <div className="h-80 w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
+                <XAxis 
+                  dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
+                  tickFormatter={(v) => v.length > 12 ? v.substring(0, 12) + '...' : v}
+                />
+                <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
+                <Tooltip 
+                  cursor={{ fill: '#222222' }}
+                  contentStyle={{ 
+                    backgroundColor: '#141414', borderColor: 'transparent', borderRadius: '12px',
+                    boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.5)', border: 'none', color: '#ededed'
+                  }}
+                  itemStyle={{ color: '#ededed' }}
+                />
+                <Bar dataKey="value" radius={[4, 4, 0, 0]}>
+                  {salesByProduct.map((_, index) => (
+                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
+          <h3 className="text-lg font-bold mb-6 text-dark-text">Distribuição de Produtos</h3>
+          <div className="h-80 w-full flex items-center justify-center">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie data={salesByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none">
+                  {salesByProduct.map((_, index) => (
+                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  ))}
+                </Pie>
+                <Tooltip 
+                  contentStyle={{ 
+                    backgroundColor: '#141414', borderColor: 'transparent', borderRadius: '12px',
+                    boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.5)', border: 'none', color: '#ededed'
+                  }}
+                />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+          <div className="mt-4 grid grid-cols-2 gap-2">
+            {salesByProduct.map((entry, index) => (
+              <div key={entry.name} className="flex items-center text-[10px]">
+                <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: COLORS[index % COLORS.length] }}></span>
+                <span className="text-dark-muted truncate font-semibold">{entry.name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

src/pages/ProductDetails.tsx

@@ -0,0 +1,134 @@
+import { useMemo } from 'react';
+import { useParams, Link, useOutletContext } from 'react-router-dom';
+import { ArrowLeft, Package, DollarSign, Calendar } from 'lucide-react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import DateRangePicker from '../components/DateRangePicker';
+import type { OrderData, DateRange } from '../types';
+
+const ProductDetails = () => {
+  const { id } = useParams<{ id: string }>();
+  const { dateRange, setDateRange, ordersData } = useOutletContext<{ dateRange: DateRange, setDateRange: (range: DateRange) => void, ordersData: OrderData[] }>();
+
+  const { productInfo, chartData, totalSold, totalRevenue } = useMemo(() => {
+    const orders = ordersData.filter(order => order.ID_Produto === id);
+    
+    if (orders.length === 0) return { productInfo: null, chartData: [], totalSold: 0, totalRevenue: 0 };
+
+    const info = {
+      id: orders[0].ID_Produto,
+      name: orders[0].Descricao_Produto.split(' TAMANHO')[0],
+      price: orders[0].Valor_Unitario
+    };
+
+    const salesByDate: Record<string, number> = {};
+    let sold = 0;
+    let revenue = 0;
+
+    orders.forEach(order => {
+      const [day, month, year] = order.Data_Pedido.split('-').map(Number);
+      const orderDate = new Date(year, month - 1, day);
+      
+      if (orderDate >= dateRange.start && orderDate <= dateRange.end) {
+        const dateStr = order.Data_Pedido;
+        salesByDate[dateStr] = (salesByDate[dateStr] || 0) + order.Quantidade;
+        sold += order.Quantidade;
+        revenue += (order.Quantidade * order.Valor_Unitario);
+      }
+    });
+
+    const chart = Object.keys(salesByDate).map(date => ({
+      date,
+      value: salesByDate[date]
+    })).sort((a, b) => {
+      const [da, ma, ya] = a.date.split('-').map(Number);
+      const [db, mb, yb] = b.date.split('-').map(Number);
+      return new Date(ya, ma - 1, da).getTime() - new Date(yb, mb - 1, db).getTime();
+    });
+
+    return { productInfo: info, chartData: chart, totalSold: sold, totalRevenue: revenue };
+  }, [id, dateRange, ordersData]);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
+  };
+
+  if (!productInfo) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-zinc-500 dark:text-dark-muted font-medium">Produto não encontrado.</p>
+        <Link to="/products" className="text-brand-primary hover:underline mt-4 inline-block font-bold">Voltar para produtos</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div className="flex flex-col gap-4">
+          <Link to="/products" className="inline-flex items-center text-sm font-bold text-zinc-400 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text transition-colors w-fit">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Voltar
+          </Link>
+          
+          <div className="flex items-center gap-4">
+            <div className="w-16 h-16 rounded-2xl bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border flex items-center justify-center shadow-sm text-brand-primary">
+              <Package className="w-8 h-8" />
+            </div>
+            <div>
+              <div className="text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest">ID: #{productInfo.id}</div>
+              <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{productInfo.name}</h1>
+            </div>
+          </div>
+        </div>
+
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
+          <div>
+            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Unidades Vendidas</p>
+            <p className="text-3xl font-bold text-dark-text">{totalSold}</p>
+          </div>
+          <div className="p-3 bg-brand-primary/10 rounded-xl text-brand-primary">
+            <Package size={24} />
+          </div>
+        </div>
+        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
+          <div>
+            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Receita Total</p>
+            <p className="text-3xl font-bold text-brand-primary">{formatCurrency(totalRevenue)}</p>
+          </div>
+          <div className="p-3 bg-emerald-500/10 rounded-xl text-emerald-500">
+            <DollarSign size={24} />
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
+        <h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">Volume de Vendas por Data</h3>
+        <div className="h-80 w-full">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
+              <XAxis 
+                dataKey="date" stroke="#888888" fontSize={12} tickLine={false} axisLine={false}
+              />
+              <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
+              <Tooltip 
+                cursor={{ fill: '#222222' }}
+                contentStyle={{ 
+                  backgroundColor: '#141414', borderColor: 'transparent', borderRadius: '12px',
+                  boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.5)', border: 'none', color: '#ededed'
+                }}
+              />
+              <Bar dataKey="value" fill="#9ECAE1" radius={[4, 4, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductDetails;

src/pages/Products.tsx

@@ -0,0 +1,117 @@
+import { useMemo, useState } from 'react';
+import { Link, useOutletContext } from 'react-router-dom';
+import { Search, ChevronRight, Package, TrendingUp } from 'lucide-react';
+import DateRangePicker from '../components/DateRangePicker';
+import type { OrderData, DateRange } from '../types';
+
+const Products = () => {
+  const { dateRange, setDateRange, ordersData } = useOutletContext<{ dateRange: DateRange, setDateRange: (range: DateRange) => void, ordersData: OrderData[] }>();
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const productsData = useMemo(() => {
+    const orders = ordersData;
+    const productMap: Record<string, { id: string, name: string, totalSold: number, revenue: number, lastPrice: number }> = {};
+
+    orders.forEach(order => {
+      const [day, month, year] = order.Data_Pedido.split('-').map(Number);
+      const orderDate = new Date(year, month - 1, day);
+      if (orderDate < dateRange.start || orderDate > dateRange.end) return;
+
+      if (!productMap[order.ID_Produto]) {
+        productMap[order.ID_Produto] = { 
+          id: order.ID_Produto, 
+          name: order.Descricao_Produto.split(' TAMANHO')[0], 
+          totalSold: 0, 
+          revenue: 0,
+          lastPrice: order.Valor_Unitario
+        };
+      }
+      
+      productMap[order.ID_Produto].totalSold += order.Quantidade;
+      productMap[order.ID_Produto].revenue += (order.Quantidade * order.Valor_Unitario);
+      productMap[order.ID_Produto].lastPrice = order.Valor_Unitario;
+    });
+
+    let result = Object.values(productMap);
+    if (searchTerm) {
+      result = result.filter(p => p.name.toLowerCase().includes(searchTerm.toLowerCase()) || p.id.includes(searchTerm));
+    }
+
+    return result.sort((a, b) => b.totalSold - a.totalSold);
+  }, [dateRange, searchTerm, ordersData]);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold mb-2 text-zinc-900 dark:text-dark-text">Produtos</h1>
+          <p className="text-zinc-500 dark:text-dark-muted font-medium">Gestão de catálogo e performance de vendas por item.</p>
+        </div>
+        
+        <div className="flex flex-col sm:flex-row gap-3">
+          <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
+          
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-400 dark:text-dark-muted w-5 h-5" />
+            <input 
+              type="text" 
+              placeholder="Buscar por nome ou ID..." 
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full md:w-64 bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border text-zinc-900 dark:text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20 transition-all shadow-sm"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
+        <div className="overflow-x-auto">
+          <table className="w-full text-left text-sm">
+            <thead className="bg-zinc-50 dark:bg-dark-header border-b border-zinc-100 dark:border-dark-border text-zinc-500 dark:text-dark-muted">
+              <tr>
+                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">ID Produto</th>
+                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Descrição</th>
+                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Total Vendido</th>
+                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Receita Gerada</th>
+                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px] text-right">Ações</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
+              {productsData.map((product) => (
+                <tr key={product.id} className="hover:bg-zinc-50/80 dark:hover:bg-dark-input/50 transition-colors group">
+                  <td className="px-6 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">#{product.id}</td>
+                  <td className="px-6 py-2.5">
+                    <div className="font-semibold text-zinc-900 dark:text-dark-text">{product.name}</div>
+                    <div className="text-[10px] text-zinc-400 dark:text-dark-muted font-medium">Preço Atual: {formatCurrency(product.lastPrice)}</div>
+                  </td>
+                  <td className="px-6 py-2.5">
+                    <div className="flex items-center gap-2">
+                      <Package className="w-3.5 h-3.5 text-zinc-400 dark:text-dark-muted" />
+                      <span className="font-bold text-zinc-900 dark:text-dark-text">{product.totalSold} un.</span>
+                    </div>
+                  </td>
+                  <td className="px-6 py-2.5 text-brand-primary font-bold">{formatCurrency(product.revenue)}</td>
+                  <td className="px-6 py-2.5 text-right">
+                    <Link 
+                      to={`/products/${product.id}`}
+                      className="inline-flex items-center text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity bg-brand-primary/10 px-3 py-1.5 rounded-lg"
+                    >
+                      <TrendingUp className="w-3.5 h-3.5 mr-1.5" />
+                      Ver Gráfico
+                    </Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Products;