3559afc1f7
- SellerDashboard: migrado para Shell (header topo), removida sidebar lateral, cards KPI brancos com react-icons pretos (FaChartLine, FaBoxOpen, FaReceipt) - Shell: adicionados todos os links de nav para owner/seller no header (Estoque, Buscar Produtos, Pedidos, Carteira, Equipe, Config. Entrega) - Wallet: ícone FaMoneyCheck no botão Solicitar Saque, card saldo com #0F4C81, thead da tabela com #0F4C81, fix R$ NaN (formatCurrency null-safe) - Team: botões e thead com #0F4C81, emojis removidos dos roleLabels - ShippingSettings: wrapped com Shell (mantém header), emojis substituídos por react-icons pretos (FaTruck, FaLocationDot, FaStore, FaCircleInfo, FaFloppyDisk), botão Salvar com #0F4C81 - Orders: removido box cinza de fundo dos ícones nas abas e estado vazio - LocationPicker: fallback seguro para OpenStreetMap quando VITE_MAP_TILE_LAYER não está definido (corrige tela branca em /search) - Inventory/Cart: cores dos botões e thead atualizadas para #0F4C81
221 lines
10 KiB
TypeScript
221 lines
10 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { useAuth } from '../context/AuthContext'
|
|
import { useCartStore, selectCartSummary } from '../stores/cartStore'
|
|
import { formatCurrency } from '../utils/format'
|
|
import logoImg from '../assets/logo.png'
|
|
import { FaRightFromBracket } from 'react-icons/fa6'
|
|
|
|
// Cart dropdown content component
|
|
function CartDropdownContent() {
|
|
const items = useCartStore((state) => state.items)
|
|
const removeItem = useCartStore((state) => state.removeItem)
|
|
const { totalValue } = useCartStore(selectCartSummary)
|
|
|
|
// Show max 4 items in preview
|
|
const displayItems = items.slice(0, 4)
|
|
const hiddenCount = items.length - displayItems.length
|
|
|
|
return (
|
|
<div>
|
|
<div className="p-3 border-b border-gray-100">
|
|
<p className="text-sm font-semibold text-gray-700">Carrinho</p>
|
|
</div>
|
|
<div className="max-h-64 overflow-y-auto">
|
|
{displayItems.map((item) => (
|
|
<div key={item.id} className="flex items-center gap-3 p-3 hover:bg-gray-50 border-b border-gray-50">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-gray-800 truncate">{item.name}</p>
|
|
<p className="text-xs text-gray-500">{item.quantity}x • R$ {formatCurrency(item.unitPrice)}</p>
|
|
</div>
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
removeItem(item.id)
|
|
}}
|
|
className="text-red-500 hover:text-red-700 p-1"
|
|
title="Remover"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
{hiddenCount > 0 && (
|
|
<div className="p-2 text-center text-xs text-gray-500">
|
|
+{hiddenCount} {hiddenCount === 1 ? 'item' : 'itens'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="p-3 border-t border-gray-100 bg-gray-50">
|
|
<div className="flex justify-between items-center mb-3">
|
|
<span className="text-sm text-gray-600">Total:</span>
|
|
<span className="text-lg font-bold text-medicalBlue">R$ {formatCurrency(totalValue)}</span>
|
|
</div>
|
|
<Link
|
|
to="/cart"
|
|
className="block w-full text-center bg-medicalBlue text-white py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition-colors"
|
|
>
|
|
Ver carrinho completo
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function Shell({ children }: { children: React.ReactNode }) {
|
|
const { user, logout } = useAuth()
|
|
const [isProfileOpen, setIsProfileOpen] = useState(false)
|
|
const profileMenuRef = useRef<HTMLDivElement | null>(null)
|
|
const { totalItems: cartCount } = useCartStore(selectCartSummary)
|
|
|
|
const isOwner = user?.role === 'owner' || user?.role === 'seller'
|
|
const isAdmin = user?.role === 'admin'
|
|
const profilePath = isAdmin ? '/dashboard/profile' : '/meu-perfil'
|
|
const settingsPath = isOwner ? '/company' : '/dashboard/profile'
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
|
|
setIsProfileOpen(false)
|
|
}
|
|
}
|
|
|
|
document.addEventListener('mousedown', handleClickOutside)
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-100">
|
|
<header style={{ backgroundColor: '#0F4C81' }} className="text-white shadow-md">
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="flex h-16 items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<img src={logoImg} alt="SaveInMed" className="h-10 w-auto" />
|
|
<span className="text-xl font-bold">SaveInMed</span>
|
|
</div>
|
|
<nav className="flex items-center gap-4 text-sm font-medium">
|
|
{isAdmin && (
|
|
<Link to="/dashboard" className="hover:underline">
|
|
Admin
|
|
</Link>
|
|
)}
|
|
{isOwner && (
|
|
<>
|
|
<Link to="/seller" className="hover:underline whitespace-nowrap">
|
|
Dashboard
|
|
</Link>
|
|
<Link to="/inventory" className="hover:underline whitespace-nowrap">
|
|
Estoque
|
|
</Link>
|
|
<Link to="/search" className="hover:underline whitespace-nowrap">
|
|
Buscar Produtos
|
|
</Link>
|
|
<Link to="/orders" className="hover:underline whitespace-nowrap">
|
|
Pedidos
|
|
</Link>
|
|
<Link to="/wallet" className="hover:underline whitespace-nowrap">
|
|
Carteira
|
|
</Link>
|
|
<Link to="/team" className="hover:underline whitespace-nowrap">
|
|
Equipe
|
|
</Link>
|
|
<Link to="/shipping-settings" className="hover:underline whitespace-nowrap">
|
|
Config. Entrega
|
|
</Link>
|
|
</>
|
|
)}
|
|
{/* Cart with hover dropdown */}
|
|
<div className="relative group">
|
|
<Link
|
|
to="/cart"
|
|
className="relative hover:bg-white/10 p-2 rounded-lg transition-colors block"
|
|
title="Carrinho"
|
|
>
|
|
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
{cartCount > 0 && (
|
|
<span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold">
|
|
{cartCount > 99 ? '99+' : cartCount}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
|
|
{/* Dropdown on hover */}
|
|
<div className="invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-200 absolute right-0 top-full z-50 mt-2 w-80 rounded-lg bg-white shadow-xl border border-gray-100">
|
|
{cartCount === 0 ? (
|
|
<div className="p-6 text-center">
|
|
<svg className="mx-auto h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
<p className="mt-2 text-sm font-medium text-gray-600">Seu carrinho está vazio</p>
|
|
<p className="text-xs text-gray-400">Adicione produtos para começar</p>
|
|
</div>
|
|
) : (
|
|
<CartDropdownContent />
|
|
)}
|
|
</div>
|
|
</div>
|
|
{user && (
|
|
<div className="flex items-center gap-2">
|
|
{/* Profile dropdown */}
|
|
<div className="relative flex items-center" ref={profileMenuRef}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsProfileOpen((prev) => !prev)}
|
|
className="flex items-center gap-2 rounded bg-white/10 px-3 py-2 text-left text-xs font-semibold hover:bg-white/20 whitespace-nowrap"
|
|
aria-haspopup="true"
|
|
aria-expanded={isProfileOpen}
|
|
>
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-[11px] font-bold">
|
|
{user.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
<div className="flex flex-col items-start leading-tight">
|
|
<span className="text-sm font-semibold">{user.name}</span>
|
|
<span className="text-[10px] uppercase text-white/80">{user.role}</span>
|
|
</div>
|
|
<svg className="h-3 w-3 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
{isProfileOpen && (
|
|
<div className="absolute right-0 top-full z-50 mt-2 w-52 rounded-md bg-white py-2 text-sm text-gray-700 shadow-lg">
|
|
<Link
|
|
to={profilePath}
|
|
className="block px-4 py-2 hover:bg-gray-100"
|
|
onClick={() => setIsProfileOpen(false)}
|
|
>
|
|
Ver Perfil
|
|
</Link>
|
|
<Link
|
|
to={settingsPath}
|
|
className="block px-4 py-2 hover:bg-gray-100"
|
|
onClick={() => setIsProfileOpen(false)}
|
|
>
|
|
Configurações
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={logout}
|
|
className="block w-full px-4 py-2 text-left text-red-600 hover:bg-red-50"
|
|
>
|
|
Sair
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main className="mx-auto max-w-7xl px-6 py-6">{children}</main>
|
|
</div>
|
|
)
|
|
}
|