Initial commit: Dockerized, Postgres, CI/CD pipeline

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;