Pular para o conteúdo principal

Area Completa do Cliente

Todas as funcionalidades do portal do cliente — dashboard, servicos, faturas com estado fiscal, subscricao, pagamentos, tickets e perfil.

Passo a Passo

Passo 1. Dashboard carregado — mensagem de boas-vindas visivel: "Welcome, Dany IAW". O dashboard e a pagina principal do portal onde o cliente ve um resumo de toda a sua conta: servicos activos, tickets abertos e faturas pendentes.

Dashboard carregado — mensagem de boas-vindas visivel: "Welcome, Dany IAW". O dashboard e a pagina principal do portal onde o cliente ve um resumo de toda a sua conta: servicos activos, tickets abertos e faturas pendentes.

Passo 2. 3 cartoes KPI visiveis com valores numericos. Cada cartao mostra um icone, uma etiqueta descritiva e o total actual: Servicos Activos, Tickets Abertos e Faturas Pendentes. Estes numeros actualizam automaticamente quando ha alteracoes na conta.

3 cartoes KPI visiveis com valores numericos. Cada cartao mostra um icone, uma etiqueta descritiva e o total actual: Servicos Activos, Tickets Abertos e Faturas Pendentes. Estes numeros actualizam automaticamente quando ha alteracoes na conta.

Passo 3. Botao "Novo Servico" visivel no canto superior direito. Ao clicar, o cliente e redirigido para a pagina de precos onde pode escolher um plano e contratar um novo servico.

Botao "Novo Servico" visivel no canto superior direito. Ao clicar, o cliente e redirigido para a pagina de precos onde pode escolher um plano e contratar um novo servico.

Seccao "Os Meus Servicos" visivel mas sem servicos activos. E apresentada uma mensagem com link para consultar os planos disponiveis. Este e o estado normal para contas novas.

Vista geral completa do Dashboard do Portal. Esta pagina e o ponto de entrada do cliente apos login e fornece acesso rapido a todas as seccoes: servicos, faturas, tickets e perfil atraves do menu lateral ou dos links directos.

Passo 6. Pagina de Faturas carregada. Esta pagina apresenta todas as faturas emitidas ao cliente numa tabela organizada com colunas para numero, data, valor, estado de pagamento, estado fiscal (Moloni) e documento fiscal.

Pagina de Faturas carregada. Esta pagina apresenta todas as faturas emitidas ao cliente numa tabela organizada com colunas para numero, data, valor, estado de pagamento, estado fiscal (Moloni) e documento fiscal.

Passo 7. Sem faturas — estado vazio apresentado com mensagem informativa. As faturas sao criadas automaticamente apos a primeira compra.

Sem faturas — estado vazio apresentado com mensagem informativa. As faturas sao criadas automaticamente apos a primeira compra.

Passo 8. Pagina de Subscricao carregada. Esta pagina mostra o plano actual do cliente, permite comparar os 4 tiers disponiveis e gerir o cancelamento da subscricao.

Pagina de Subscricao carregada. Esta pagina mostra o plano actual do cliente, permite comparar os 4 tiers disponiveis e gerir o cancelamento da subscricao.

Sem subscricao activa — estado vazio com link para consultar os planos. O cliente pode clicar para ir a pagina de precos e escolher um plano.

Passo 10. Pagina de Subscricao carregada — a explorar a seccao de cancelamento. A seccao de cancelamento encontra-se no fundo da pagina com borda vermelha.

Pagina de Subscricao carregada — a explorar a seccao de cancelamento. A seccao de cancelamento encontra-se no fundo da pagina com borda vermelha.

Passo 11. Seccao de cancelamento NAO visivel. A subscricao pode ja estar cancelada, agendada para cancelamento, ou o utilizador pode nao ter uma subscricao activa. Neste caso, pode aparecer um botao de "Reactivar" em vez de cancelar.

Seccao de cancelamento NAO visivel. A subscricao pode ja estar cancelada, agendada para cancelamento, ou o utilizador pode nao ter uma subscricao activa. Neste caso, pode aparecer um botao de "Reactivar" em vez de cancelar.

Passo 12. Pagina de Pagamentos carregada. Esta pagina gere os pagamentos recebidos pelo cliente atraves do Stripe Connect. O conteudo muda conforme o estado da conta: formulario de configuracao, verificacao pendente, ou dashboard activo.

Pagina de Pagamentos carregada. Esta pagina gere os pagamentos recebidos pelo cliente atraves do Stripe Connect. O conteudo muda conforme o estado da conta: formulario de configuracao, verificacao pendente, ou dashboard activo.

Passo 13. Estado: Formulario de configuracao de pagamentos (Stripe Connect Setup). O cliente ainda nao tem conta de pagamentos activa e precisa de preencher os dados da empresa, dados bancarios e dados pessoais do representante.

Estado: Formulario de configuracao de pagamentos (Stripe Connect Setup). O cliente ainda nao tem conta de pagamentos activa e precisa de preencher os dados da empresa, dados bancarios e dados pessoais do representante.

Passo 14. Seccao "Dados da Empresa" com campos: Nome Empresa, NIF, Morada, Cidade, Codigo Postal. Todos os campos sao obrigatorios para activar os pagamentos.

Seccao "Dados da Empresa" com campos: Nome Empresa, NIF, Morada, Cidade, Codigo Postal. Todos os campos sao obrigatorios para activar os pagamentos.

Passo 15. Seccao "Dados Bancarios" com campo IBAN. O IBAN e necessario para receber levantamentos (payouts) na conta bancaria.

Seccao "Dados Bancarios" com campo IBAN. O IBAN e necessario para receber levantamentos (payouts) na conta bancaria.

Passo 16. Seccao "Dados Pessoais do Representante" com campos: Nome, Apelido, Data de Nascimento. Checkbox de aceitacao dos Termos de Servico. Botao "Submeter para Verificacao" no final do formulario.

Seccao "Dados Pessoais do Representante" com campos: Nome, Apelido, Data de Nascimento. Checkbox de aceitacao dos Termos de Servico. Botao "Submeter para Verificacao" no final do formulario.

Passo 17. Vista completa da pagina de Pagamentos. Esta funcionalidade permite aos clientes que vendem servicos (booking/loja) receberem pagamentos dos seus proprios clientes via Stripe Connect.

Vista completa da pagina de Pagamentos. Esta funcionalidade permite aos clientes que vendem servicos (booking/loja) receberem pagamentos dos seus proprios clientes via Stripe Connect.

Passo 18. Pagina de Suporte (Tickets) carregada. Esta pagina permite ao cliente criar e gerir pedidos de suporte. Cada ticket tem assunto, prioridade e estado.

Pagina de Suporte (Tickets) carregada. Esta pagina permite ao cliente criar e gerir pedidos de suporte. Cada ticket tem assunto, prioridade e estado.

Passo 19. Botao "Novo Ticket" visivel no canto superior direito. Ao clicar, abre o formulario inline para criar um novo ticket de suporte.

Botao "Novo Ticket" visivel no canto superior direito. Ao clicar, abre o formulario inline para criar um novo ticket de suporte.

Passo 20. Sem tickets — estado vazio. A mensagem informa o cliente que nao existem tickets de suporte.

Sem tickets — estado vazio. A mensagem informa o cliente que nao existem tickets de suporte.

Passo 21. Formulario de novo ticket aberto com campos: Assunto (texto), Mensagem (textarea), Prioridade (dropdown: baixa, media, alta, urgente). O botao "Enviar" e o botao "Cancelar" estao visiveis. O formulario abre inline acima da lista de tickets.

Formulario de novo ticket aberto com campos: Assunto (texto), Mensagem (textarea), Prioridade (dropdown: baixa, media, alta, urgente). O botao "Enviar" e o botao "Cancelar" estao visiveis. O formulario abre inline acima da lista de tickets.

Passo 22. Dropdown de prioridade com 4 opcoes. As prioridades disponiveis sao: Baixa, Media (defeito), Alta e Urgente. A prioridade afecta a ordem de atendimento pelo suporte.

Dropdown de prioridade com 4 opcoes. As prioridades disponiveis sao: Baixa, Media (defeito), Alta e Urgente. A prioridade afecta a ordem de atendimento pelo suporte.

Passo 23. Vista completa da pagina de Suporte. O sistema de tickets permite comunicacao estruturada entre cliente e equipa de suporte. Cada ticket tem historico de respostas, prioridade e estado actualizado.

Vista completa da pagina de Suporte. O sistema de tickets permite comunicacao estruturada entre cliente e equipa de suporte. Cada ticket tem historico de respostas, prioridade e estado actualizado.

Passo 24. Pagina de Perfil carregada. Esta pagina permite ao cliente ver e actualizar os seus dados pessoais e de facturacao.

Pagina de Perfil carregada. Esta pagina permite ao cliente ver e actualizar os seus dados pessoais e de facturacao.

Passo 25. Seccao de dados pessoais com 7 campos editaveis. Nome actual: "Dany IAW". Os campos disponiveis sao: Nome, Empresa, NIF e Telefone. Todos os campos sao editaveis directamente na pagina.

Seccao de dados pessoais com 7 campos editaveis. Nome actual: "Dany IAW". Os campos disponiveis sao: Nome, Empresa, NIF e Telefone. Todos os campos sao editaveis directamente na pagina.

Passo 26. Seccao de Morada com campos: Rua/Morada, Cidade e Codigo Postal. Estes dados sao usados para a facturacao e aparecem nas faturas fiscais geradas pelo Moloni. E importante manter esta informacao actualizada.

Seccao de Morada com campos: Rua/Morada, Cidade e Codigo Postal. Estes dados sao usados para a facturacao e aparecem nas faturas fiscais geradas pelo Moloni. E importante manter esta informacao actualizada.

Passo 27. Botao "Guardar" visivel abaixo do formulario. Ao clicar, os dados sao enviados para o servidor via API PATCH. Uma mensagem de confirmacao verde aparece durante 3 segundos apos guardar.

Botao "Guardar" visivel abaixo do formulario. Ao clicar, os dados sao enviados para o servidor via API PATCH. Uma mensagem de confirmacao verde aparece durante 3 segundos apos guardar.

Passo 28. Campo NIF em modo de edicao (valor actual: ""). Todos os campos do formulario sao editaveis sem necessidade de clicar num botao "Editar" — basta clicar no campo e alterar o valor. O NIF e importante para a emissao correcta de faturas fiscais.

Campo NIF em modo de edicao (valor actual: ""). Todos os campos do formulario sao editaveis sem necessidade de clicar num botao "Editar" — basta clicar no campo e alterar o valor. O NIF e importante para a emissao correcta de faturas fiscais.

** Vista completa da pagina de Perfil. O formulario esta dividido em 2 seccoes logicas (Dados Pessoais e Morada) com um design limpo e responsivo. Todos os dados sao sincronizados com o Stripe e o Moloni para manter a consistencia da facturacao.**

Vista completa da pagina de Perfil. O formulario esta dividido em 2 seccoes logicas (Dados Pessoais e Morada) com um design limpo e responsivo. Todos os dados sao sincronizados com o Stripe e o Moloni para manter a consistencia da facturacao.