230417/smartagenda_pap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cores

Browse Source
This commit is contained in:
230417
2026-03-12 16:34:12 +00:00
parent 9d4e04a411
commit fb573a19ca
7 changed files with 52 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/ShopCard.tsx
View File

@@ -21,7 +21,7 @@ export const ShopCard = ({ shop }: { shop: BarberShop }) => {
</div>
{/* Rating Badge - Posicionado em cima à direita como na imagem base */}
<div className="absolute -top-1 -right-2 bg-slate-800 border border-slate-700 px-2 py-0.5 rounded-full flex items-center gap-[2px] shadow-sm z-10">
<Star size={11} className="fill-amber-400 text-amber-400" />
<Star size={11} className="fill-violet-400 text-violet-400" />
<span className="text-white text-[11px] font-semibold tracking-wide">
{shop.rating ? shop.rating.toFixed(1) : '0.0'}
</span>
@@ -30,11 +30,11 @@ export const ShopCard = ({ shop }: { shop: BarberShop }) => {
{/* Informações da Barbearia */}
<div className="flex flex-col flex-1 py-1">
<h2 className="text-slate-900 text-base md:text-lg font-bold uppercase tracking-wide truncate mb-1.5 group-hover:text-amber-600 transition-colors">
<h2 className="text-slate-900 text-base md:text-lg font-bold uppercase tracking-wide truncate mb-1.5 group-hover:text-violet-600 transition-colors">
{shop.name}
</h2>
<div className="flex items-start gap-1.5 text-slate-500 mb-2">
<MapPin size={16} className="shrink-0 mt-0.5 text-amber-600" />
<MapPin size={16} className="shrink-0 mt-0.5 text-violet-600" />
<p className="text-sm leading-snug line-clamp-2 pr-1">
{shop.address || 'Endereço Indisponível'}
</p>
@@ -53,7 +53,7 @@ export const ShopCard = ({ shop }: { shop: BarberShop }) => {
<Button asChild variant="outline" size="sm" className="flex-1">
<Link to={`/barbearia/${shop.id}`}>Ver detalhes</Link>
</Button>
<Button asChild size="sm" className="flex-1 bg-amber-600 hover:bg-amber-700 border-0">
<Button asChild size="sm" className="flex-1 bg-violet-600 hover:bg-violet-700 border-0">
<Link to={`/agendar/${shop.id}`}>Agendar</Link>
</Button>
</div>

10
web/src/components/layout/Header.tsx
View File

@@ -84,7 +84,7 @@ export const Header = () => {
{/* Mobile Menu Button */}
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="md:hidden p-2 text-slate-700 hover:text-amber-600 hover:bg-amber-50 rounded-lg transition-colors"
className="md:hidden p-2 text-slate-700 hover:text-violet-600 hover:bg-violet-50 rounded-lg transition-colors"
type="button"
>
{mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
@@ -100,7 +100,7 @@ export const Header = () => {
<Link
to="/explorar"
onClick={() => setMobileMenuOpen(false)}
className="flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-amber-600 transition-colors px-3 py-2 rounded-lg hover:bg-amber-50"
className="flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-violet-600 transition-colors px-3 py-2 rounded-lg hover:bg-violet-50"
>
<MapPin size={16} />
Barbearias
@@ -109,12 +109,12 @@ export const Header = () => {
<Link
to="/carrinho"
onClick={() => setMobileMenuOpen(false)}
className="flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-amber-600 transition-colors px-3 py-2 rounded-lg hover:bg-amber-50"
className="flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-violet-600 transition-colors px-3 py-2 rounded-lg hover:bg-violet-50"
>
<ShoppingCart size={16} />
Carrinho
{cart.length > 0 && (
<span className="ml-auto rounded-full bg-amber-500 px-2 py-0.5 text-[10px] font-bold text-white">
<span className="ml-auto rounded-full bg-violet-500 px-2 py-0.5 text-[10px] font-bold text-white">
{cart.length}
</span>
)}
@@ -129,7 +129,7 @@ export const Header = () => {
navigate(user.role === 'barbearia' ? '/painel' : '/perfil')
setMobileMenuOpen(false)
}}
className="w-full flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-amber-600 transition-colors px-3 py-2 rounded-lg hover:bg-amber-50 text-left"
className="w-full flex items-center gap-2 text-sm font-medium text-slate-700 hover:text-violet-600 transition-colors px-3 py-2 rounded-lg hover:bg-violet-50 text-left"
type="button"
>
<User size={16} />

4
web/src/pages/AuthLogin.tsx
View File

@@ -69,7 +69,7 @@ export default function AuthLogin() {
<div className="max-w-md mx-auto py-8">
<Card className="p-8 space-y-6">
<div className="text-center space-y-2">
<div className="inline-flex p-3 bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl text-white shadow-lg mb-2">
<div className="inline-flex p-3 bg-gradient-to-br from-violet-500 to-violet-600 rounded-xl text-white shadow-lg mb-2">
<LogIn size={24} />
</div>
<h1 className="text-2xl font-bold text-slate-900">Entrar</h1>
@@ -109,7 +109,7 @@ export default function AuthLogin() {
<div className="text-center pt-4 border-t border-slate-200">
<p className="text-sm text-slate-600">
Não tem conta?{' '}
<Link to="/registo" className="text-amber-700 font-semibold hover:text-amber-800 transition-colors">
<Link to="/registo" className="text-violet-700 font-semibold hover:text-violet-800 transition-colors">
Criar conta
</Link>
</p>

12
web/src/pages/AuthRegister.tsx
View File

@@ -111,7 +111,7 @@ export default function AuthRegister() {
<div className="max-w-md mx-auto py-8">
<Card className="p-8 space-y-6">
<div className="text-center space-y-2">
<div className="inline-flex p-3 bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl text-white shadow-lg mb-2">
<div className="inline-flex p-3 bg-gradient-to-br from-violet-500 to-violet-600 rounded-xl text-white shadow-lg mb-2">
<UserPlus size={24} />
</div>
<h1 className="text-2xl font-bold text-slate-900">
@@ -144,15 +144,15 @@ export default function AuthRegister() {
setError('')
}}
className={`p-4 rounded-xl border-2 transition-all ${role === r
? 'border-amber-500 bg-amber-50 shadow-md'
: 'border-slate-200 hover:border-amber-300'
? 'border-violet-500 bg-violet-50 shadow-md'
: 'border-slate-200 hover:border-violet-300'
}`}
>
<div className="flex flex-col items-center gap-2">
{r === 'cliente' ? (
<User size={20} className={role === r ? 'text-amber-600' : 'text-slate-400'} />
<User size={20} className={role === r ? 'text-violet-600' : 'text-slate-400'} />
) : (
<Scissors size={20} className={role === r ? 'text-amber-600' : 'text-slate-400'} />
<Scissors size={20} className={role === r ? 'text-violet-600' : 'text-slate-400'} />
)}
<span className="text-sm font-semibold">
{r === 'cliente' ? 'Cliente' : 'Barbearia'}
@@ -209,7 +209,7 @@ export default function AuthRegister() {
Já tem conta?{' '}
<Link
to="/login"
className="text-amber-700 font-semibold hover:text-amber-800"
className="text-violet-700 font-semibold hover:text-violet-800"
>
Entrar
</Link>

32
web/src/pages/Booking.tsx
View File

@@ -124,18 +124,18 @@ export default function Booking() {
<div className="flex flex-col items-center flex-1">
<div
className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all ${step.completed
? 'bg-gradient-to-br from-amber-500 to-amber-600 border-amber-600 text-white shadow-md'
? 'bg-gradient-to-br from-violet-500 to-violet-600 border-violet-600 text-white shadow-md'
: 'bg-white border-slate-300 text-slate-400'
}`}
>
{step.completed ? <CheckCircle2 size={18} /> : <step.icon size={18} />}
</div>
<span className={`text-xs mt-2 font-medium ${step.completed ? 'text-amber-700' : 'text-slate-500'}`}>
<span className={`text-xs mt-2 font-medium ${step.completed ? 'text-violet-700' : 'text-slate-500'}`}>
{step.label}
</span>
</div>
{idx < steps.length - 1 && (
<div className={`h-0.5 flex-1 mx-2 ${step.completed ? 'bg-amber-500' : 'bg-slate-200'}`} />
<div className={`h-0.5 flex-1 mx-2 ${step.completed ? 'bg-violet-500' : 'bg-slate-200'}`} />
)}
</div>
))}
@@ -145,7 +145,7 @@ export default function Booking() {
{/* Step 1: Service */}
<div className="space-y-3">
<div className="flex items-center gap-2">
<Scissors size={18} className="text-amber-600" />
<Scissors size={18} className="text-violet-600" />
<h3 className="text-base font-bold text-slate-900">1. Escolha o serviço</h3>
</div>
<div className="grid md:grid-cols-2 gap-3">
@@ -154,13 +154,13 @@ export default function Booking() {
key={s.id}
onClick={() => setService(s.id)}
className={`p-4 rounded-xl border-2 text-left transition-all ${serviceId === s.id
? 'border-amber-500 bg-gradient-to-br from-amber-50 to-amber-100/50 shadow-md scale-[1.02]'
: 'border-slate-200 hover:border-amber-300 hover:bg-amber-50/50'
? 'border-violet-500 bg-gradient-to-br from-violet-50 to-violet-100/50 shadow-md scale-[1.02]'
: 'border-slate-200 hover:border-violet-300 hover:bg-violet-50/50'
}`}
>
<div className="flex items-center justify-between mb-1">
<div className="font-bold text-slate-900">{s.name}</div>
<div className="text-sm font-bold text-amber-600">{currency(s.price)}</div>
<div className="text-sm font-bold text-violet-600">{currency(s.price)}</div>
</div>
<div className="text-xs text-slate-500">Duração: {s.duration} min</div>
</button>
@@ -171,7 +171,7 @@ export default function Booking() {
{/* Step 2: Barber */}
<div className="space-y-3">
<div className="flex items-center gap-2">
<User size={18} className="text-amber-600" />
<User size={18} className="text-violet-600" />
<h3 className="text-base font-bold text-slate-900">2. Escolha o barbeiro</h3>
</div>
<div className="flex gap-2 flex-wrap">
@@ -180,8 +180,8 @@ export default function Booking() {
key={b.id}
onClick={() => setBarber(b.id)}
className={`px-4 py-2.5 rounded-full border-2 text-sm font-medium transition-all ${barberId === b.id
? 'border-amber-500 bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-md'
: 'border-slate-200 text-slate-700 hover:border-amber-300 hover:bg-amber-50'
? 'border-violet-500 bg-gradient-to-r from-violet-500 to-violet-600 text-white shadow-md'
: 'border-slate-200 text-slate-700 hover:border-violet-300 hover:bg-violet-50'
}`}
>
{b.name}
@@ -197,7 +197,7 @@ export default function Booking() {
<div className="grid md:grid-cols-2 gap-6">
<div className="space-y-3">
<div className="flex items-center gap-2">
<Calendar size={18} className="text-amber-600" />
<Calendar size={18} className="text-violet-600" />
<h3 className="text-base font-bold text-slate-900">3. Escolha a data</h3>
</div>
<Input
@@ -209,7 +209,7 @@ export default function Booking() {
</div>
<div className="space-y-3">
<div className="flex items-center gap-2">
<Clock size={18} className="text-amber-600" />
<Clock size={18} className="text-violet-600" />
<h3 className="text-base font-bold text-slate-900">4. Escolha o horário</h3>
</div>
<div className="flex gap-2 flex-wrap">
@@ -221,15 +221,15 @@ export default function Booking() {
key={h}
onClick={() => setSlot(h)}
className={`px-4 py-2 rounded-lg border-2 text-sm font-medium transition-all ${slot === h
? 'border-amber-500 bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-md'
: 'border-slate-200 text-slate-700 hover:border-amber-300 hover:bg-amber-50'
? 'border-violet-500 bg-gradient-to-r from-violet-500 to-violet-600 text-white shadow-md'
: 'border-slate-200 text-slate-700 hover:border-violet-300 hover:bg-violet-50'
}`}
>
{h}
</button>
))
) : (
<p className="text-sm text-amber-600 py-2 font-medium">Nenhum horário disponível para esta data.</p>
<p className="text-sm text-violet-600 py-2 font-medium">Nenhum horário disponível para esta data.</p>
)}
</div>
</div>
@@ -256,7 +256,7 @@ export default function Booking() {
</div>
<div className="flex justify-between pt-2 border-t border-slate-200">
<span className="font-bold text-slate-900">Total:</span>
<span className="font-bold text-lg text-amber-600">{currency(selectedService.price)}</span>
<span className="font-bold text-lg text-violet-600">{currency(selectedService.price)}</span>
</div>
</div>
</div>

36
web/src/pages/Profile.tsx
View File

@@ -14,8 +14,8 @@ import { Calendar, ShoppingBag, User, Clock, Heart, Star, MapPin } from 'lucide-
import { supabase } from '../lib/supabase'
import { ReviewModal } from '../components/ReviewModal'
const statusColor: Record<string, 'amber' | 'green' | 'slate' | 'red'> = {
pendente: 'amber',
const statusColor: Record<string, 'violet' | 'green' | 'slate' | 'red'> = {
pendente: 'violet',
confirmado: 'green',
concluido: 'green',
cancelado: 'red',
@@ -90,7 +90,7 @@ export default function Profile() {
return (
<div className="flex items-center justify-center py-20">
<div className="text-center">
<div className="w-10 h-10 border-4 border-slate-200 border-t-amber-500 rounded-full animate-spin mx-auto mb-3" />
<div className="w-10 h-10 border-4 border-slate-200 border-t-violet-500 rounded-full animate-spin mx-auto mb-3" />
<p className="text-slate-500 text-sm">A carregar perfil...</p>
</div>
</div>
@@ -100,15 +100,15 @@ export default function Profile() {
if (!authId) {
return (
<div className="text-center py-16">
<div className="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<User size={28} className="text-amber-600" />
<div className="w-16 h-16 bg-violet-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<User size={28} className="text-violet-600" />
</div>
<p className="text-slate-700 font-semibold mb-1">Sessão não encontrada</p>
<p className="text-slate-500 text-sm mb-4">Faz login para ver o teu perfil.</p>
<button
type="button"
onClick={() => navigate('/login', { replace: true })}
className="px-5 py-2 bg-amber-500 text-white text-sm font-semibold rounded-xl hover:bg-amber-600 transition-colors"
className="px-5 py-2 bg-violet-500 text-white text-sm font-semibold rounded-xl hover:bg-violet-600 transition-colors"
>
Ir para login
</button>
@@ -132,16 +132,16 @@ export default function Profile() {
<div className="space-y-8">
{/* Profile Header */}
<Card className="p-6 bg-gradient-to-br from-amber-50 via-white to-orange-50 border-amber-100">
<Card className="p-6 bg-gradient-to-br from-violet-50 via-white to-orange-50 border-violet-100">
<div className="flex items-center gap-4">
<div className="w-16 h-16 bg-gradient-to-br from-amber-400 to-amber-600 rounded-2xl flex items-center justify-center text-white shadow-lg flex-shrink-0">
<div className="w-16 h-16 bg-gradient-to-br from-violet-400 to-violet-600 rounded-2xl flex items-center justify-center text-white shadow-lg flex-shrink-0">
<User size={28} />
</div>
<div className="flex-1 min-w-0">
<h1 className="text-2xl font-bold text-slate-900 truncate">Olá, {displayName}!</h1>
<p className="text-sm text-slate-500 truncate">{authEmail}</p>
<div className="flex items-center gap-2 mt-2">
<Badge color="amber" variant="soft">Cliente</Badge>
<Badge color="violet" variant="soft">Cliente</Badge>
{favoriteShops.length > 0 && (
<span className="flex items-center gap-1 text-xs text-rose-500 font-medium">
<Heart size={12} className="fill-rose-500" /> {favoriteShops.length} favorita{favoriteShops.length > 1 ? 's' : ''}
@@ -172,15 +172,15 @@ export default function Profile() {
</div>
)}
<div className="flex-1 min-w-0">
<p className="font-bold text-slate-900 truncate group-hover:text-amber-700 transition-colors">{shop.name}</p>
<p className="font-bold text-slate-900 truncate group-hover:text-violet-700 transition-colors">{shop.name}</p>
{shop.address && (
<p className="text-xs text-slate-500 flex items-center gap-1 mt-0.5 truncate">
<MapPin size={10} /> {shop.address}
</p>
)}
{shop.rating > 0 && (
<p className="text-xs text-amber-600 flex items-center gap-1 mt-1">
<Star size={10} className="fill-amber-400 text-amber-400" />
<p className="text-xs text-violet-600 flex items-center gap-1 mt-1">
<Star size={10} className="fill-violet-400 text-violet-400" />
{shop.rating.toFixed(1)}
</p>
)}
@@ -195,7 +195,7 @@ export default function Profile() {
{/* Agendamentos */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<Calendar size={20} className="text-amber-600" />
<Calendar size={20} className="text-violet-600" />
<h2 className="text-xl font-bold text-slate-900">Agendamentos</h2>
<Badge color="slate" variant="soft">{myAppointments.length}</Badge>
</div>
@@ -233,9 +233,9 @@ export default function Profile() {
{canReview && (
<button
onClick={() => setReviewTarget({ appointmentId: a.id, shopId: a.shopId, shopName: shop?.name ?? 'Barbearia' })}
className="flex items-center gap-1.5 mt-2 text-xs font-semibold text-amber-600 hover:text-amber-700 bg-amber-50 hover:bg-amber-100 px-3 py-1.5 rounded-lg transition-colors"
className="flex items-center gap-1.5 mt-2 text-xs font-semibold text-violet-600 hover:text-violet-700 bg-violet-50 hover:bg-violet-100 px-3 py-1.5 rounded-lg transition-colors"
>
<Star size={12} className="fill-amber-400 text-amber-400" />
<Star size={12} className="fill-violet-400 text-violet-400" />
Avaliar atendimento
</button>
)}
@@ -246,7 +246,7 @@ export default function Profile() {
)}
</div>
<div className="text-right flex-shrink-0">
<p className="text-lg font-bold text-amber-600">{currency(a.total)}</p>
<p className="text-lg font-bold text-violet-600">{currency(a.total)}</p>
</div>
</div>
</Card>
@@ -259,7 +259,7 @@ export default function Profile() {
{/* Pedidos */}
<section className="space-y-3">
<div className="flex items-center gap-2">
<ShoppingBag size={20} className="text-amber-600" />
<ShoppingBag size={20} className="text-violet-600" />
<h2 className="text-xl font-bold text-slate-900">Pedidos</h2>
<Badge color="slate" variant="soft">{myOrders.length}</Badge>
</div>
@@ -294,7 +294,7 @@ export default function Profile() {
</p>
</div>
<div className="text-right flex-shrink-0">
<p className="text-lg font-bold text-amber-600">{currency(o.total)}</p>
<p className="text-lg font-bold text-violet-600">{currency(o.total)}</p>
</div>
</div>
</Card>

2
web/src/pages/ShopDetails.tsx
View File

@@ -67,7 +67,7 @@ export default function ShopDetails() {
</div>
<div className="absolute bottom-4 left-4 space-y-1 text-white">
<div className="flex items-center gap-2 text-sm">
<Star size={14} className="fill-amber-400 text-amber-400" />
<Star size={14} className="fill-violet-400 text-violet-400" />
<span className="font-semibold">{(shop.rating || 0).toFixed(1)}</span>
</div>
<h1 className="text-2xl font-semibold">{shop.name}</h1>