feat(marketplace): fix R$ NaN and add owner navigation links

This commit is contained in:
Tiago Yamamoto 2025-12-22 15:42:58 -03:00
parent 9fc9b211bf
commit 5c004422f2
2 changed files with 35 additions and 7 deletions

View file

@ -4,6 +4,9 @@ import { useAuth } from '../context/AuthContext'
export function Shell({ children }: { children: React.ReactNode }) { export function Shell({ children }: { children: React.ReactNode }) {
const { user, logout } = useAuth() const { user, logout } = useAuth()
const isOwner = user?.role === 'owner' || user?.role === 'seller'
const isAdmin = user?.role === 'admin'
return ( return (
<div className="min-h-screen bg-gray-100"> <div className="min-h-screen bg-gray-100">
<header className="flex items-center justify-between bg-medicalBlue px-6 py-4 text-white shadow-md"> <header className="flex items-center justify-between bg-medicalBlue px-6 py-4 text-white shadow-md">
@ -11,20 +14,37 @@ export function Shell({ children }: { children: React.ReactNode }) {
<div className="h-10 w-10 rounded-full bg-white/10 text-center text-xl font-bold leading-10">MP</div> <div className="h-10 w-10 rounded-full bg-white/10 text-center text-xl font-bold leading-10">MP</div>
<div> <div>
<p className="text-lg font-semibold">Marketplace Farmacêutico B2B</p> <p className="text-lg font-semibold">Marketplace Farmacêutico B2B</p>
<p className="text-sm text-gray-100">Dashboard de Compras</p> <p className="text-sm text-gray-100">
{isAdmin ? 'Painel Administrativo' : isOwner ? 'Painel do Dono' : 'Dashboard'}
</p>
</div> </div>
</div> </div>
<nav className="flex items-center gap-4 text-sm font-medium"> <nav className="flex items-center gap-4 text-sm font-medium">
<Link to="/dashboard" className="hover:underline"> {isAdmin && (
Compras <Link to="/dashboard" className="hover:underline">
</Link> Admin
</Link>
)}
{isOwner && (
<>
<Link to="/seller" className="hover:underline">
Dashboard
</Link>
<Link to="/orders" className="hover:underline">
Meus Pedidos
</Link>
<Link to="/inventory" className="hover:underline">
Meus Produtos
</Link>
</>
)}
<Link to="/cart" className="hover:underline"> <Link to="/cart" className="hover:underline">
Carrinho Carrinho
</Link> </Link>
<Link to="/checkout" className="hover:underline"> <Link to="/checkout" className="hover:underline">
Checkout Checkout
</Link> </Link>
<Link to="/profile" className="hover:underline"> <Link to="/company" className="hover:underline">
Perfil da Empresa Perfil da Empresa
</Link> </Link>
{user && ( {user && (

View file

@ -6,6 +6,14 @@ import { useAuth } from '../context/AuthContext'
const MP_PUBLIC_KEY = import.meta.env.VITE_MP_PUBLIC_KEY || 'TEST-PUBLIC-KEY' const MP_PUBLIC_KEY = import.meta.env.VITE_MP_PUBLIC_KEY || 'TEST-PUBLIC-KEY'
// Helper function to safely format currency values
const formatCurrency = (value: number | undefined | null): string => {
if (value === undefined || value === null || isNaN(value)) {
return '0,00'
}
return value.toFixed(2).replace('.', ',')
}
export function CheckoutPage() { export function CheckoutPage() {
const { user } = useAuth() const { user } = useAuth()
const summary = useCartStore(selectCartSummary) const summary = useCartStore(selectCartSummary)
@ -36,7 +44,7 @@ export function CheckoutPage() {
<div key={vendorId} className="rounded border border-gray-200 bg-gray-50 p-3"> <div key={vendorId} className="rounded border border-gray-200 bg-gray-50 p-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="font-semibold text-gray-800">{group.vendorName}</p> <p className="font-semibold text-gray-800">{group.vendorName}</p>
<p className="text-sm font-bold text-medicalBlue">R$ {group.total.toFixed(2)}</p> <p className="text-sm font-bold text-medicalBlue">R$ {formatCurrency(group.total)}</p>
</div> </div>
<p className="text-xs text-gray-600">Itens enviados no split de pagamento.</p> <p className="text-xs text-gray-600">Itens enviados no split de pagamento.</p>
</div> </div>
@ -45,7 +53,7 @@ export function CheckoutPage() {
<div className="space-y-3 rounded-lg bg-white p-4 shadow-sm"> <div className="space-y-3 rounded-lg bg-white p-4 shadow-sm">
<div> <div>
<p className="text-sm font-semibold text-gray-700">Resumo</p> <p className="text-sm font-semibold text-gray-700">Resumo</p>
<p className="text-2xl font-bold text-medicalBlue">R$ {summary.totalValue.toFixed(2)}</p> <p className="text-2xl font-bold text-medicalBlue">R$ {formatCurrency(summary.totalValue)}</p>
</div> </div>
<div className="rounded bg-gray-100 p-3 text-sm"> <div className="rounded bg-gray-100 p-3 text-sm">
<p className="font-semibold text-gray-700">Status</p> <p className="font-semibold text-gray-700">Status</p>