From 8a5ec57e9c08a692d7050163ea27d63375614474 Mon Sep 17 00:00:00 2001 From: Tiago Yamamoto Date: Tue, 23 Dec 2025 17:32:55 -0300 Subject: [PATCH] feat: redesign Orders page with tabs for purchases/sales - Add tabs: 'Pedidos Feitos' (compras) and 'Pedidos Recebidos' (vendas) - Add stats bar with totals and pending count - Add progress tracker for purchase orders - Improved UI with icons and better styling - Actions only visible on sales tab --- marketplace/src/pages/Orders.tsx | 299 ++++++++++++++++++++++++------- 1 file changed, 230 insertions(+), 69 deletions(-) diff --git a/marketplace/src/pages/Orders.tsx b/marketplace/src/pages/Orders.tsx index 684b6fe..c3d60cf 100644 --- a/marketplace/src/pages/Orders.tsx +++ b/marketplace/src/pages/Orders.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react' import { Shell } from '../layouts/Shell' import { apiClient } from '../services/apiClient' import { formatCents } from '../utils/format' +import { useAuth } from '../context/AuthContext' interface Order { id: string @@ -13,25 +14,39 @@ interface Order { } const statusColors: Record = { - Pendente: 'bg-yellow-100 text-yellow-800', - Pago: 'bg-blue-100 text-blue-800', - Faturado: 'bg-purple-100 text-purple-800', - Entregue: 'bg-green-100 text-green-800' + Pendente: 'bg-yellow-100 text-yellow-800 border-yellow-300', + Pago: 'bg-blue-100 text-blue-800 border-blue-300', + Faturado: 'bg-purple-100 text-purple-800 border-purple-300', + Entregue: 'bg-green-100 text-green-800 border-green-300' } +const statusIcons: Record = { + Pendente: '⏳', + Pago: '💳', + Faturado: '📄', + Entregue: '✅' +} + +type TabType = 'compras' | 'vendas' + export function OrdersPage() { + const { user } = useAuth() + const [activeTab, setActiveTab] = useState('compras') const [orders, setOrders] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { loadOrders() - }, []) + }, [activeTab]) const loadOrders = async () => { try { setLoading(true) - const response = await apiClient.get<{ orders: Order[]; total: number }>('/v1/orders') + const endpoint = activeTab === 'compras' + ? '/v1/orders?role=buyer' + : '/v1/orders?role=seller' + const response = await apiClient.get<{ orders: Order[]; total: number }>(endpoint) setOrders(response?.orders || []) setError(null) } catch (err) { @@ -53,85 +68,231 @@ export function OrdersPage() { const formatCurrency = (cents: number | undefined | null) => formatCents(cents) + // Calculate stats + const pendingCount = orders.filter(o => o.status === 'Pendente').length + const totalValue = orders.reduce((sum, o) => sum + (o.total_cents || 0), 0) + return ( -
+
+ {/* Header */}
-

Pedidos

-

Gerenciamento de pedidos e status

+

Gestão de Pedidos

+

Acompanhe suas compras e vendas

- {loading && ( -
-
-
- )} - - {error && ( -
{error}
- )} - - {!loading && orders.length === 0 && ( -
- Nenhum pedido encontrado -
- )} - -
- {orders.map((order) => ( -
-
-
-

Pedido #{order.id.slice(0, 8)}

-

- {new Date(order.created_at).toLocaleDateString('pt-BR')} -

-
-
-

- {formatCurrency(order.total_cents)} -

- - {order.status} - + {/* Tabs */} +
+
+ - )} - {order.status === 'Pago' && ( - - )} - {order.status === 'Faturado' && ( - - )} + {activeTab === 'compras' && ( +
+ )} + + +
+ + {/* Stats Bar */} +
+
+
+ Total: + {orders.length} pedidos +
+
+ Valor: + {formatCurrency(totalValue)} +
+ {pendingCount > 0 && ( +
+ {pendingCount} pendentes +
+ )}
- ))} +
+ + {/* Content */} +
+ {loading && ( +
+
+
+ )} + + {error && ( +
+ ⚠️ + {error} +
+ )} + + {!loading && orders.length === 0 && ( +
+ + {activeTab === 'compras' ? '🛒' : '💰'} + +

+ Nenhum pedido {activeTab === 'compras' ? 'feito' : 'recebido'} ainda +

+

+ {activeTab === 'compras' + ? 'Pesquise produtos e comece a comprar!' + : 'Cadastre produtos e aguarde as vendas!' + } +

+
+ )} + + {/* Orders List */} +
+ {orders.map((order) => ( +
+
+
+
+ {statusIcons[order.status] || '📦'} +
+
+

+ Pedido #{order.id.slice(0, 8).toUpperCase()} +

+

+ {new Date(order.created_at).toLocaleDateString('pt-BR', { + day: '2-digit', + month: 'long', + year: 'numeric', + hour: '2-digit', + minute: '2-digit' + })} +

+
+
+
+

+ {formatCurrency(order.total_cents)} +

+ + {statusIcons[order.status]} {order.status} + +
+
+ + {/* Actions - only for sales */} + {activeTab === 'vendas' && ( +
+ {order.status === 'Pendente' && ( + + )} + {order.status === 'Pago' && ( + + )} + {order.status === 'Faturado' && ( + + )} + {order.status === 'Entregue' && ( + + ✅ Pedido concluído com sucesso + + )} +
+ )} + + {/* Track progress for purchases */} + {activeTab === 'compras' && ( +
+
+ {['Pendente', 'Pago', 'Faturado', 'Entregue'].map((status, idx) => { + const isCompleted = ['Pendente', 'Pago', 'Faturado', 'Entregue'].indexOf(order.status) >= idx + return ( +
+
+ {isCompleted ? '✓' : idx + 1} +
+ {idx < 3 && ( +
idx + ? 'bg-blue-600' + : 'bg-gray-200' + }`} /> + )} +
+ ) + })} +
+
+ Pendente + Pago + Faturado + Entregue +
+
+ )} +
+ ))} +
+