# 3. Gerir marcações O separador \*\*Reservas\*\* é o centro do dia-a-dia: mostra a agenda da \*\*loja ativa\*\* e é onde cria, move, confirma e cancela marcações. # Introdução O separador **Reservas** é o centro do dia-a-dia: mostra a agenda da **loja ativa** e é onde cria, move, confirma e cancela marcações. --- # 3.1 As vistas da agenda Use a barra de ferramentas no topo (prev/hoje/próximo + seletor de data + seletor de vista) para alternar: - **Dia** — a vista de trabalho principal. - Para *Por colaborador / serviço / espaço*: uma **grelha** com uma coluna por colaborador/serviço/ espaço e as horas na vertical. As marcações são barras coloridas (cor do serviço). - Para *Por mesa*: um **Gantt horizontal**, uma linha por mesa, as barras posicionadas no tempo. - **Semana** — visão geral dos 7 dias; cada dia mostra até **50 marcações** (com indicação de "+N mais" quando há mais). Clicar numa marcação abre os Detalhes. - **Mês** — calendário mensal com a contagem de marcações por dia. - **Lista** — lista cronológica, com **paginação** e os mesmos filtros das outras vistas. **Barra lateral (esquerda):** mini-calendário para saltar de data + **filtros** por colaborador/ serviço/espaço (clique para esconder/mostrar) + filtro por serviço. Os filtros **persistem** entre as vistas e entre sessões. **No telemóvel:** uma faixa de dias no topo + um botão de **filtros**. > 📸 **`03-agenda-dia.png`** — Vista de Dia (grelha por colaborador) cheia, com a barra lateral de filtros. (Há capturas reais em `design/screenshots/cal*.png`.) ![Agenda — Dia](images/03-agenda-dia.png) > 📸 **`03-agenda-semana.png`** — Vista de Semana com os filtros e o "+N mais" num dia cheio. ![Agenda — Semana](images/03-agenda-semana.png) > 📸 **`03-agenda-gantt.png`** — Vista de Dia em Gantt (Por mesa), uma linha por mesa. ![Agenda — Gantt](images/03-agenda-gantt.png) --- # 3.2 Criar uma marcação 1. Clique em **+ Nova marcação** (ou clique diretamente num espaço livre da agenda — já abre com a data/hora/coluna preenchidas). 2. **Data e hora:** os horários oferecidos respeitam o horário da loja, o horário do colaborador (2.8), a antecedência mínima e os conflitos. Os indisponíveis aparecem riscados. 3. **Cliente:** nome + **telefone e/ou email** (pelo menos um, se quiser que o cliente receba notificações). O cliente é criado/ligado automaticamente ao guardar. 4. **Detalhes da reserva** (conforme o tipo de agenda): - *Por colaborador:* **serviço** + **profissional**. - *Por serviço:* **serviço** (profissional opcional). - *Por espaço / mesa:* **espaço/mesa** + **nº de pessoas**. 5. **Notas** (opcional). 6. Guarde. **Multi-serviço (Por colaborador):** adicione vários serviços ao mesmo cliente; cada um pode ter um **profissional diferente** (ou "sem preferência") e são **encadeados em sequência**. Gera uma marcação por serviço, ligadas como **grupo**. **Recorrente:** marque a repetição (ex. semanal) e a **data de fim**. (Marcações multi-serviço não podem ser recorrentes.) > 📸 **`03-criar-marcacao.png`** — Formulário de criação: cliente, serviço, profissional e a lista de horários disponíveis. ![Criar marcação](images/03-criar-marcacao.png) > 📸 **`03-multi-servico.png`** — Reserva multi-serviço com vários serviços e profissionais. ![Multi-serviço](images/03-multi-servico.png) > ⚠️ Se tentar marcar fora do horário do colaborador, ou em conflito com outra marcação, o formulário > mostra o erro e **não grava** — corrija a hora/profissional. --- # 3.3 Detalhes da marcação e histórico Clique numa marcação (na barra da agenda, ou no nome na vista de Lista) para abrir os **Detalhes** — um ecrã só de leitura com: - Quando, serviço/profissional (ou mesa/espaço + nº de pessoas), **estado**, **preço/pagamento**, contacto do cliente, notas e as **marcações irmãs** do grupo (se for multi-serviço). - **Histórico de atividade** — linha do tempo: criada, confirmada, cancelada, reaberta, remarcada, pagamento recebido — com quem fez a ação ("· Cliente" ou "· Nome (Staff)"). - **Histórico de notificações** — o que foi enviado, quando e por que canal. A partir daqui: **Confirmar / Cancelar / Reabrir**, **Reenviar confirmação**, ou **Editar**. > 📸 **`03-detalhes.png`** — Ecrã de Detalhes com a linha do tempo de atividade e o histórico de notificações. ![Detalhes](images/03-detalhes.png) --- # 3.4 Estados e ações - **Pendente** — recebida, à espera de confirmação (a menos que a loja tenha confirmação automática). - **Confirmada** — confirmada por si ou pelo cliente. - **Cancelada** — pode ser **reaberta**. - **Aguarda pagamento** — quando há pagamento online por concluir (capítulo 7). Para marcações de **grupo** (multi-serviço), ao confirmar/cancelar pode escolher fazer só àquela ou ao **grupo inteiro**. --- # 3.5 Mover, redimensionar e remarcar - **Arrastar** uma marcação na grelha muda a **hora**; arrastar para **outra coluna** muda o **colaborador / serviço / espaço**. - **Redimensionar** pela aresta (inferior na grelha, direita no Gantt) muda a **duração**. - Cada alteração pede **confirmação** e é validada (horário, conflitos, horário do colaborador, capacidade/exclusividade dos espaços). Se for inválida, é recusada com uma mensagem. - Ao remarcar, o cliente é **notificado** ("Alterada") e o lembrete é reagendado. **No telemóvel:** mantenha o dedo **premido ~0,3 s** sobre a marcação até esta "levantar" (vibra) antes de arrastar/redimensionar — assim não mexe sem querer quando faz scroll. Um toque rápido abre os Detalhes. > 📸 **`03-arrastar.png`** — Marcação a ser arrastada para outra coluna/hora, com o modal de confirmação. ![Arrastar](images/03-arrastar.png) --- # 3.6 Dicas e resolução de problemas - **"Não aparecem horários":** o dia pode estar fechado (horário ou horário especial), o colaborador pode não estar a trabalhar nesse dia, ou a antecedência mínima/limite diário foram atingidos. - **"O profissional não pode fazer este serviço":** o âmbito de serviços do colaborador nessa loja não inclui o serviço (2.7). - **Sincronizar com o telemóvel:** exporte a agenda para o calendário do telefone (capítulo 11). --- **A seguir:** [Página pública de reservas](04-pagina-publica.md).