Initial commit: Dockerized, Postgres, CI/CD pipeline

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;