Dashboard em modo desktop (1280x900)

Passo 1. Dashboard em modo desktop (1280x900) — o layout adapta-se automaticamente ao tamanho do ecra. Em mobile, os KPI cards empilham verticalmente e a sidebar transforma-se num menu hamburger ou bottom navigation. Em tablet, o layout usa 2 colunas. Em desktop, a sidebar fica fixa a esquerda.

Dashboard em modo desktop (1280x900) — o layout adapta-se automaticamente ao tamanho do ecra. Em mobile, os KPI cards empilham verticalmente e a sidebar transforma-se num menu hamburger ou bottom navigation. Em tablet, o layout usa 2 colunas. Em desktop, a sidebar fica fixa a esquerda.

Passo 2. Lista de clientes em modo desktop — a tabela adapta-se mostrando menos colunas em ecras pequenos. Em mobile, apenas o nome e email sao visiveis, com os outros dados acessiveis ao clicar no cliente. A pesquisa mantem-se funcional em todos os tamanhos de ecra.

Lista de clientes em modo desktop — a tabela adapta-se mostrando menos colunas em ecras pequenos. Em mobile, apenas o nome e email sao visiveis, com os outros dados acessiveis ao clicar no cliente. A pesquisa mantem-se funcional em todos os tamanhos de ecra.

Passo 3. Pagina de faturacao em modo desktop — os separadores (tabs) adaptam-se ao espaco disponivel. Em mobile, os tabs podem tornar-se scrollaveis horizontalmente ou transformar-se num dropdown. As tabelas de dados mantêm a scrollabilidade horizontal quando necessario.

Pagina de faturacao em modo desktop — os separadores (tabs) adaptam-se ao espaco disponivel. Em mobile, os tabs podem tornar-se scrollaveis horizontalmente ou transformar-se num dropdown. As tabelas de dados mantêm a scrollabilidade horizontal quando necessario.

Passo 4. Catalogo de produtos em modo desktop — os cartoes de produto reorganizam-se em grelha responsiva. Em mobile, os produtos aparecem em coluna unica. Em tablet, em grelha de 2. Em desktop, em grelha de 3 ou mais. Todos os elementos interactivos mantem o tamanho minimo de toque (44x44px) para acessibilidade.

Catalogo de produtos em modo desktop — os cartoes de produto reorganizam-se em grelha responsiva. Em mobile, os produtos aparecem em coluna unica. Em tablet, em grelha de 2. Em desktop, em grelha de 3 ou mais. Todos os elementos interactivos mantem o tamanho minimo de toque (44x44px) para acessibilidade.

Passo 5. Modulo Stripe em modo desktop — os KPI cards e a tabela de pagamentos adaptam-se ao ecra. A experiencia de administracao e completa em qualquer dispositivo, permitindo ao admin gerir a plataforma a partir de um telefone ou tablet quando necessario.

Modulo Stripe em modo desktop — os KPI cards e a tabela de pagamentos adaptam-se ao ecra. A experiencia de administracao e completa em qualquer dispositivo, permitindo ao admin gerir a plataforma a partir de um telefone ou tablet quando necessario.