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

refactor: optimize mobile layout with improved responsiveness, overflow handling, and touch interactions

Browse Source
This commit is contained in:
230417
2026-04-28 15:51:52 +01:00
parent d6f9b51205
commit 2ba5f03f35
5 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/components/ServiceList.tsx
View File

@@ -13,28 +13,28 @@ export const ServiceList = ({
}) => (
<div className="grid md:grid-cols-2 gap-4 sm:gap-6">
{services.map((s) => (
<Card key={s.id} className="p-4 sm:p-6 border-none glass-card rounded-2xl sm:rounded-[2rem] group hover:shadow-2xl transition-all duration-300 overflow-hidden">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4">
<div className="flex-1 min-w-0 space-y-2">
<h3 className="font-black text-slate-900 text-lg sm:text-xl tracking-tight leading-tight group-hover:text-indigo-600 transition-colors uppercase italic">{s.name}</h3>
<div className="flex items-center gap-3">
<div className="flex items-center gap-1.5 px-2 py-1 bg-slate-100 rounded-lg text-xs font-bold text-slate-500 uppercase">
<Clock size={12} />
<Card key={s.id} className="p-3 sm:p-6 border-none glass-card rounded-xl sm:rounded-[2rem] group hover:shadow-2xl transition-all duration-300 overflow-hidden">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-1.5 sm:gap-4">
<div className="flex-1 min-w-0 space-y-1">
<h3 className="font-black text-slate-900 text-base sm:text-xl tracking-tight leading-tight group-hover:text-indigo-600 transition-colors uppercase italic">{s.name}</h3>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-slate-100 rounded-md text-[10px] font-bold text-slate-500 uppercase">
<Clock size={10} />
<span>{s.duration} min</span>
</div>
</div>
</div>
<div className="text-xl sm:text-2xl font-black text-slate-900 tracking-tighter bg-indigo-50 px-2 sm:px-3 py-1 rounded-xl border border-indigo-100 whitespace-nowrap shrink-0 w-fit">
<div className="text-lg sm:text-2xl font-black text-slate-900 tracking-tighter bg-indigo-50 px-2 py-0.5 rounded-lg border border-indigo-100 whitespace-nowrap shrink-0 w-fit">
{currency(s.price)}
</div>
</div>
{onSelect && (
<div className="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-slate-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
<p className="text-xs font-medium text-slate-400 shrink-0">Lugar disponível hoje</p>
<div className="mt-3 sm:mt-6 pt-3 sm:pt-6 border-t border-slate-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4">
<p className="text-[10px] font-medium text-slate-400 shrink-0">Lugar disponível hoje</p>
<Button
onClick={() => onSelect(s.id)}
className="w-full sm:w-auto h-10 sm:h-11 bg-slate-900 hover:bg-slate-800 text-indigo-400 font-black rounded-xl shadow-lg shadow-slate-200 transition-all active:scale-95 uppercase tracking-wider sm:tracking-widest text-xs px-6"
className="w-full sm:w-auto h-9 sm:h-11 bg-slate-900 hover:bg-slate-800 text-indigo-400 font-black rounded-lg shadow-lg shadow-slate-200 transition-all active:scale-95 uppercase tracking-tight sm:tracking-widest text-[11px] sm:text-xs px-4"
>
Reservar
</Button>

8
web/src/components/ui/tabs.tsx
View File

@@ -3,21 +3,21 @@ import { cn } from '../../lib/cn';
type Tab = { id: string; label: string; badge?: number };
export const Tabs = ({ tabs, active, onChange, className }: { tabs: Tab[]; active: string; onChange: (id: string) => void; className?: string }) => (
<div className={cn("flex gap-1.5 sm:gap-2 p-1 bg-slate-100 rounded-2xl overflow-x-auto scrollbar-hide", className)}>
<div className={cn("flex gap-1 p-1 bg-slate-100 rounded-xl overflow-x-auto scrollbar-hide w-full", className)}>
{tabs.map((t) => (
<button
key={t.id}
onClick={() => onChange(t.id)}
className={cn(
"px-3 sm:px-6 py-2 sm:py-2.5 text-[11px] sm:text-sm font-black uppercase tracking-wider sm:tracking-widest transition-all rounded-xl whitespace-nowrap shrink-0",
"px-3 sm:px-6 py-1.5 sm:py-2.5 text-[10px] sm:text-sm font-black uppercase tracking-tight sm:tracking-widest transition-all rounded-lg whitespace-nowrap shrink-0",
active === t.id
? "bg-slate-900 text-indigo-400 shadow-xl"
? "bg-slate-900 text-indigo-400 shadow-lg"
: "text-slate-500 hover:text-slate-900 hover:bg-white/50"
)}
>
{t.label}
{t.badge && (
<span className="ml-1.5 sm:ml-2 inline-flex items-center justify-center w-4 h-4 sm:w-5 sm:h-5 text-[8px] sm:text-[10px] font-black text-white bg-slate-900 rounded-full border border-indigo-500/50">
<span className="ml-1 sm:ml-2 inline-flex items-center justify-center w-3.5 h-3.5 sm:w-5 sm:h-5 text-[7px] sm:text-[10px] font-black text-white bg-slate-900 rounded-full border border-indigo-500/50">
{t.badge}
</span>
)}

4
web/src/index.css
View File

@@ -19,13 +19,15 @@
}
html, body {
overflow-x: hidden;
overflow-x: clip;
width: 100%;
max-width: 100vw;
position: relative;
}
body {
@apply bg-[#f8fafc] text-slate-900 font-sans antialiased;
touch-action: pan-y;
background-image:
radial-gradient(at 0% 0%, rgba(79, 70, 229, 0.03) 0px, transparent 50%),
radial-gradient(at 100% 0%, rgba(15, 23, 42, 0.03) 0px, transparent 50%);

51
web/src/pages/Dashboard.tsx
View File

@@ -409,7 +409,9 @@ function DashboardInner({ shop }: { shop: BarberShop }) {
</div>
{/* Tabs */}
<Tabs tabs={sidebarTabs.map((t) => ({ id: t.id, label: t.label, badge: t.badge }))} active={activeTab} onChange={(v) => setActiveTab(v as TabId)} />
<div className="w-full max-w-[100vw] overflow-hidden">
<Tabs tabs={sidebarTabs.map((t) => ({ id: t.id, label: t.label, badge: t.badge }))} active={activeTab} onChange={(v) => setActiveTab(v as TabId)} />
</div>
{/* Tab Content */}
{activeTab === 'overview' && (
@@ -430,40 +432,43 @@ function DashboardInner({ shop }: { shop: BarberShop }) {
</div>
{/* Stats Cards Principais */}
<div className="grid md:grid-cols-3 gap-4">
<Card className="p-6">
<div className="flex items-center justify-between mb-3">
<div className="p-3 bg-indigo-500 rounded-lg text-white">
<Calendar size={24} />
<div className="grid md:grid-cols-3 gap-3">
<Card className="p-4 sm:p-6">
<div className="flex items-center justify-between mb-2 sm:mb-3">
<div className="p-2 sm:p-3 bg-indigo-500 rounded-lg text-white">
<Calendar size={20} className="sm:hidden" />
<Calendar size={24} className="hidden sm:block" />
</div>
</div>
<p className="text-sm text-slate-600 mb-1">Total de reservas</p>
<p className="text-3xl font-bold text-slate-900">{allShopAppointments.length}</p>
<p className="text-xs text-slate-500 mt-2">Reservas da plataforma: {allShopAppointments.length}</p>
<p className="text-xs sm:text-sm text-slate-600 mb-0.5 sm:mb-1">Total de reservas</p>
<p className="text-2xl sm:text-3xl font-bold text-slate-900">{allShopAppointments.length}</p>
<p className="text-[10px] sm:text-xs text-slate-500 mt-1.5 sm:mt-2">Reservas da plataforma: {allShopAppointments.length}</p>
</Card>
<Card className="p-6">
<div className="flex items-center justify-between mb-3">
<div className="p-3 bg-blue-500 rounded-lg text-white">
<Globe size={24} />
<Card className="p-4 sm:p-6">
<div className="flex items-center justify-between mb-2 sm:mb-3">
<div className="p-2 sm:p-3 bg-blue-500 rounded-lg text-white">
<Globe size={20} className="sm:hidden" />
<Globe size={24} className="hidden sm:block" />
</div>
</div>
<p className="text-sm text-slate-600 mb-1">Reservas online</p>
<p className="text-3xl font-bold text-slate-900">{allShopAppointments.length}</p>
<p className="text-xs text-slate-500 mt-2">Marcações feitas pela plataforma</p>
<p className="text-xs sm:text-sm text-slate-600 mb-0.5 sm:mb-1">Reservas online</p>
<p className="text-2xl sm:text-3xl font-bold text-slate-900">{allShopAppointments.length}</p>
<p className="text-[10px] sm:text-xs text-slate-500 mt-1.5 sm:mt-2">Marcações feitas pela plataforma</p>
</Card>
<Card className="p-6">
<div className="flex items-center justify-between mb-3">
<div className="p-3 bg-green-500 rounded-lg text-white">
<UserPlus size={24} />
<Card className="p-4 sm:p-6">
<div className="flex items-center justify-between mb-2 sm:mb-3">
<div className="p-2 sm:p-3 bg-green-500 rounded-lg text-white">
<UserPlus size={20} className="sm:hidden" />
<UserPlus size={24} className="hidden sm:block" />
</div>
</div>
<p className="text-sm text-slate-600 mb-1">Novos clientes</p>
<p className="text-3xl font-bold text-slate-900">
<p className="text-xs sm:text-sm text-slate-600 mb-0.5 sm:mb-1">Novos clientes</p>
<p className="text-2xl sm:text-3xl font-bold text-slate-900">
{new Set(allShopAppointments.map(a => a.customerId)).size}
</p>
<p className="text-xs text-slate-500 mt-2">Clientes únicos</p>
<p className="text-[10px] sm:text-xs text-slate-500 mt-1.5 sm:mt-2">Clientes únicos</p>
</Card>
</div>

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

@@ -98,18 +98,20 @@ export default function ShopDetails() {
<div className="grid gap-4 sm:gap-8">
<div className="flex flex-col gap-3 sm:gap-4 bg-white/50 backdrop-blur-sm p-1.5 sm:p-2 rounded-2xl sm:rounded-[2rem] border border-white/50">
<Tabs
tabs={[
{ id: 'servicos', label: 'Serviços' },
{ id: 'barbeiros', label: 'Barbeiros' },
{ id: 'produtos', label: 'Produtos' },
{ id: 'detalhes', label: 'Detalhes' },
]}
active={tab}
onChange={(v) => setTab(v as typeof tab)}
className="border-none bg-transparent"
/>
<div className="px-3 sm:px-6 py-2 text-[10px] sm:text-xs font-black text-slate-400 uppercase tracking-widest bg-white rounded-xl sm:rounded-2xl border border-slate-100 shadow-sm text-center sm:text-left">
<div className="w-full max-w-[100vw] overflow-hidden">
<Tabs
tabs={[
{ id: 'servicos', label: 'Serviços' },
{ id: 'barbeiros', label: 'Barbeiros' },
{ id: 'produtos', label: 'Produtos' },
{ id: 'detalhes', label: 'Detalhes' },
]}
active={tab}
onChange={(v) => setTab(v as typeof tab)}
className="border-none bg-transparent"
/>
</div>
<div className="px-3 sm:px-6 py-2 text-[9px] sm:text-xs font-black text-slate-400 uppercase tracking-widest bg-white rounded-xl sm:rounded-2xl border border-slate-100 shadow-sm text-center sm:text-left">
{(shop.services || []).length} SERVIÇOS · {(shop.barbers || []).length} BARBEIROS
</div>
</div>