591 lines
20 KiB
HTML
591 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ReservaMesa — Gestão de Reservas Mockup</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg-primary: #0F0E0C;
|
|
--bg-secondary: #1A1814;
|
|
--bg-tertiary: #252219;
|
|
--bg-hover: #2E2A22;
|
|
--brand: #D4891A;
|
|
--brand-light: #E8A832;
|
|
--brand-muted: #3D2E0F;
|
|
--status-pending: #F59E0B;
|
|
--status-confirmed: #10B981;
|
|
--status-seated: #3B82F6;
|
|
--status-completed: #6B7280;
|
|
--status-cancelled: #EF4444;
|
|
--status-noshow: #8B5CF6;
|
|
--text-primary: #F5F0E8;
|
|
--text-secondary: #A09880;
|
|
--text-muted: #6B6355;
|
|
--border: #2A261E;
|
|
--border-strong: #3D3828;
|
|
--font-display: 'Playfair Display', serif;
|
|
--font-body: 'DM Sans', sans-serif;
|
|
--font-mono: 'DM Mono', monospace;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 220px;
|
|
flex-shrink: 0;
|
|
background: var(--bg-secondary);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-logo {
|
|
padding: 20px 20px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.logo-mark {
|
|
font-family: var(--font-display);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--brand-light);
|
|
}
|
|
|
|
.logo-sub {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
letter-spacing: 1.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sidebar-restaurant {
|
|
padding: 12px 16px;
|
|
margin: 10px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.restaurant-name { font-weight: 600; font-size: 12px; }
|
|
.restaurant-status { font-size: 10px; color: var(--status-confirmed); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
|
|
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
|
|
.nav-section { padding: 6px 10px 0; flex: 1; }
|
|
.nav-label { font-size: 9px; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 8px 4px; }
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
border-radius: 7px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.nav-item.active { background: var(--brand-muted); color: var(--brand-light); }
|
|
.nav-icon { width: 16px; height: 16px; }
|
|
.nav-badge { margin-left: auto; background: var(--brand); color: #000; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; }
|
|
|
|
.sidebar-footer { padding: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
|
|
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-muted); border: 2px solid var(--brand); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--brand-light); }
|
|
.footer-info { flex: 1; }
|
|
.footer-name { font-size: 12px; font-weight: 600; }
|
|
.footer-role { font-size: 10px; color: var(--text-muted); }
|
|
|
|
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
|
|
|
.topbar {
|
|
height: 56px;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
gap: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.topbar-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; flex: 1; }
|
|
.topbar-date { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 7px 14px;
|
|
border-radius: 7px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: none;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.btn-primary { background: var(--brand); color: #000; }
|
|
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); }
|
|
|
|
.content { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
|
|
|
|
/* FILTERS BAR */
|
|
.filters-bar {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-box {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.search-box input {
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
flex: 1;
|
|
}
|
|
|
|
.search-box input::placeholder { color: var(--text-muted); }
|
|
|
|
.filter-select {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.date-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--brand-muted);
|
|
border: 1px solid var(--brand);
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
color: var(--brand-light);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* STATUS TABS */
|
|
.status-tabs {
|
|
display: flex;
|
|
gap: 2px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 9px;
|
|
padding: 4px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.status-tab {
|
|
padding: 5px 14px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.status-tab.active {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.tab-count {
|
|
font-size: 10px;
|
|
padding: 1px 5px;
|
|
border-radius: 8px;
|
|
background: var(--bg-hover);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.status-tab.active .tab-count { background: var(--brand-muted); color: var(--brand); }
|
|
|
|
/* TABLE */
|
|
.reservations-panel {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
}
|
|
|
|
.table-header {
|
|
display: grid;
|
|
grid-template-columns: 180px 1fr 90px 80px 120px 130px 160px;
|
|
padding: 10px 18px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg-tertiary);
|
|
gap: 12px;
|
|
}
|
|
|
|
.th {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.table-body { overflow-y: auto; }
|
|
|
|
.table-row {
|
|
display: grid;
|
|
grid-template-columns: 180px 1fr 90px 80px 120px 130px 160px;
|
|
padding: 13px 18px;
|
|
border-bottom: 1px solid var(--border);
|
|
gap: 12px;
|
|
align-items: center;
|
|
transition: background 0.12s;
|
|
}
|
|
|
|
.table-row:hover { background: var(--bg-hover); }
|
|
.table-row:last-child { border-bottom: none; }
|
|
|
|
.client-info {}
|
|
.client-name { font-size: 13px; font-weight: 600; }
|
|
.client-phone { font-size: 11px; color: var(--text-muted); margin-top: 1px; font-family: var(--font-mono); }
|
|
|
|
.time-cell { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--brand-light); }
|
|
.pax-cell { font-size: 13px; color: var(--text-secondary); }
|
|
.mesa-cell { font-size: 13px; font-weight: 600; }
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 3px 10px;
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-badge.confirmed { background: rgba(16,185,129,0.12); color: var(--status-confirmed); }
|
|
.status-badge.pending { background: rgba(245,158,11,0.12); color: var(--status-pending); }
|
|
.status-badge.seated { background: rgba(59,130,246,0.12); color: var(--status-seated); }
|
|
.status-badge.completed { background: rgba(107,114,128,0.12); color: var(--status-completed); }
|
|
.status-badge.cancelled { background: rgba(239,68,68,0.12); color: var(--status-cancelled); }
|
|
.status-badge.noshow { background: rgba(139,92,246,0.12); color: var(--status-noshow); }
|
|
|
|
.status-dot-sm { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
|
|
.actions-cell { display: flex; gap: 4px; }
|
|
|
|
.action-btn {
|
|
padding: 5px 8px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: 1px solid var(--border-strong);
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-body);
|
|
transition: all 0.1s;
|
|
}
|
|
|
|
.action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|
.action-btn.confirm { color: var(--status-confirmed); border-color: rgba(16,185,129,0.3); }
|
|
.action-btn.seat { color: var(--status-seated); border-color: rgba(59,130,246,0.3); }
|
|
.action-btn.cancel { color: var(--status-cancelled); border-color: rgba(239,68,68,0.3); }
|
|
|
|
::-webkit-scrollbar { width: 4px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
|
|
|
|
.mockup-label {
|
|
position: fixed;
|
|
bottom: 12px;
|
|
right: 16px;
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 1px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
svg { display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<aside class="sidebar">
|
|
<div class="sidebar-logo">
|
|
<div class="logo-mark">ReservaMesa</div>
|
|
<div class="logo-sub">Dashboard</div>
|
|
</div>
|
|
<div style="padding: 10px;">
|
|
<div class="sidebar-restaurant">
|
|
<div class="restaurant-name">Restaurante Solar</div>
|
|
<div class="restaurant-status"><span class="dot"></span> Aberto agora</div>
|
|
</div>
|
|
</div>
|
|
<nav class="nav-section">
|
|
<div class="nav-label">Principal</div>
|
|
<div class="nav-item">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
|
Dashboard
|
|
</div>
|
|
<div class="nav-item active">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="m9 16 2 2 4-4"/></svg>
|
|
Reservas
|
|
<span class="nav-badge">12</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/></svg>
|
|
Mesas
|
|
</div>
|
|
<div class="nav-item">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
|
Calendário
|
|
</div>
|
|
<div class="nav-label" style="margin-top: 8px;">Análise</div>
|
|
<div class="nav-item">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
|
|
Analytics
|
|
</div>
|
|
<div class="nav-label" style="margin-top: 8px;">Gestão</div>
|
|
<div class="nav-item">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 0-14.14 0M4.93 19.07a10 10 0 0 0 14.14 0"/></svg>
|
|
Configurações
|
|
</div>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<div class="avatar">JS</div>
|
|
<div class="footer-info">
|
|
<div class="footer-name">João Silva</div>
|
|
<div class="footer-role">Gestor</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<div class="topbar">
|
|
<div class="topbar-title">Reservas</div>
|
|
<div class="topbar-date">Quarta, 6 Mai 2026</div>
|
|
<button class="btn btn-primary">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
Nova Reserva
|
|
</button>
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<!-- FILTERS -->
|
|
<div class="filters-bar">
|
|
<div class="search-box">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6B6355" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
<input placeholder="Pesquisar por nome ou telefone…">
|
|
</div>
|
|
<div class="date-chip">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
|
6 Mai 2026
|
|
</div>
|
|
<select class="filter-select">
|
|
<option>Zona: Todas</option>
|
|
<option>Interior</option>
|
|
<option>Exterior</option>
|
|
<option>VIP</option>
|
|
</select>
|
|
<select class="filter-select">
|
|
<option>Grupo: Todos</option>
|
|
<option>1-2 pessoas</option>
|
|
<option>3-4 pessoas</option>
|
|
<option>5+ pessoas</option>
|
|
</select>
|
|
<div style="margin-left: auto; display: flex; gap: 8px;">
|
|
<button class="btn btn-ghost">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Exportar CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STATUS TABS -->
|
|
<div class="status-tabs">
|
|
<div class="status-tab">Todas <span class="tab-count">24</span></div>
|
|
<div class="status-tab active">Pendentes <span class="tab-count">5</span></div>
|
|
<div class="status-tab">Confirmadas <span class="tab-count">12</span></div>
|
|
<div class="status-tab">Sentados <span class="tab-count">4</span></div>
|
|
<div class="status-tab">Concluídas <span class="tab-count">1</span></div>
|
|
<div class="status-tab">Canceladas <span class="tab-count">2</span></div>
|
|
</div>
|
|
|
|
<!-- TABLE -->
|
|
<div class="reservations-panel">
|
|
<div class="table-header">
|
|
<div class="th">Cliente</div>
|
|
<div class="th">Notas</div>
|
|
<div class="th">Hora</div>
|
|
<div class="th">Pax</div>
|
|
<div class="th">Mesa</div>
|
|
<div class="th">Estado</div>
|
|
<div class="th">Ações</div>
|
|
</div>
|
|
<div class="table-body">
|
|
|
|
<!-- ROW 1 - Pending -->
|
|
<div class="table-row">
|
|
<div class="client-info">
|
|
<div class="client-name">M. Santos</div>
|
|
<div class="client-phone">+351 912 345 678</div>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--text-muted)">Alergia a frutos do mar</div>
|
|
<div class="time-cell">19:00</div>
|
|
<div class="pax-cell">3 pax</div>
|
|
<div class="mesa-cell">Mesa 6</div>
|
|
<div><span class="status-badge pending"><span class="status-dot-sm"></span>Pendente</span></div>
|
|
<div class="actions-cell">
|
|
<button class="action-btn confirm">Confirmar</button>
|
|
<button class="action-btn cancel">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ROW 2 - Pending -->
|
|
<div class="table-row">
|
|
<div class="client-info">
|
|
<div class="client-name">Alves Family</div>
|
|
<div class="client-phone">+351 961 234 567</div>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--text-muted)">Aniversário — bolo surpresa</div>
|
|
<div class="time-cell">20:30</div>
|
|
<div class="pax-cell">6 pax</div>
|
|
<div class="mesa-cell">Mesa 9</div>
|
|
<div><span class="status-badge pending"><span class="status-dot-sm"></span>Pendente</span></div>
|
|
<div class="actions-cell">
|
|
<button class="action-btn confirm">Confirmar</button>
|
|
<button class="action-btn cancel">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ROW 3 - Pending -->
|
|
<div class="table-row">
|
|
<div class="client-info">
|
|
<div class="client-name">T. Barbosa</div>
|
|
<div class="client-phone">+351 934 567 890</div>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--text-muted)">—</div>
|
|
<div class="time-cell">19:30</div>
|
|
<div class="pax-cell">2 pax</div>
|
|
<div class="mesa-cell">Mesa 11</div>
|
|
<div><span class="status-badge pending"><span class="status-dot-sm"></span>Pendente</span></div>
|
|
<div class="actions-cell">
|
|
<button class="action-btn confirm">Confirmar</button>
|
|
<button class="action-btn cancel">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ROW 4 - Confirmed -->
|
|
<div class="table-row">
|
|
<div class="client-info">
|
|
<div class="client-name">Ana Ferreira</div>
|
|
<div class="client-phone">+351 926 789 012</div>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--text-muted)">Preferência zona silenciosa</div>
|
|
<div class="time-cell">19:00</div>
|
|
<div class="pax-cell">4 pax</div>
|
|
<div class="mesa-cell">Mesa 2</div>
|
|
<div><span class="status-badge confirmed"><span class="status-dot-sm"></span>Confirmada</span></div>
|
|
<div class="actions-cell">
|
|
<button class="action-btn seat">Sentar</button>
|
|
<button class="action-btn cancel">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ROW 5 - Confirmed -->
|
|
<div class="table-row">
|
|
<div class="client-info">
|
|
<div class="client-name">Grupo Empresa XY</div>
|
|
<div class="client-phone">+351 213 456 789</div>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--text-muted)">Jantar de negócios</div>
|
|
<div class="time-cell">19:00</div>
|
|
<div class="pax-cell">8 pax</div>
|
|
<div class="mesa-cell">Mesa 12</div>
|
|
<div><span class="status-badge confirmed"><span class="status-dot-sm"></span>Confirmada</span></div>
|
|
<div class="actions-cell">
|
|
<button class="action-btn seat">Sentar</button>
|
|
<button class="action-btn cancel">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ROW 6 - Seated -->
|
|
<div class="table-row">
|
|
<div class="client-info">
|
|
<div class="client-name">Família Rodrigues</div>
|
|
<div class="client-phone">+351 917 654 321</div>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--text-muted)">Cadeira de bebé necessária</div>
|
|
<div class="time-cell">18:00</div>
|
|
<div class="pax-cell">5 pax</div>
|
|
<div class="mesa-cell">Mesa 4</div>
|
|
<div><span class="status-badge seated"><span class="status-dot-sm"></span>Sentados</span></div>
|
|
<div class="actions-cell">
|
|
<button class="action-btn" style="color:var(--text-muted)">Concluir</button>
|
|
<button class="action-btn" style="color:var(--status-noshow)">No-show</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ROW 7 - Cancelled -->
|
|
<div class="table-row" style="opacity: 0.5;">
|
|
<div class="client-info">
|
|
<div class="client-name">C. Marques</div>
|
|
<div class="client-phone">+351 963 258 741</div>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--text-muted)">Cancelou 2h antes</div>
|
|
<div class="time-cell">20:00</div>
|
|
<div class="pax-cell">2 pax</div>
|
|
<div class="mesa-cell">Mesa 5</div>
|
|
<div><span class="status-badge cancelled"><span class="status-dot-sm"></span>Cancelada</span></div>
|
|
<div class="actions-cell">
|
|
<button class="action-btn">Ver</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<div class="mockup-label">MOCKUP v1.0 — RESERVAMESA RESERVAS</div>
|
|
|
|
</body>
|
|
</html>
|