Prompt
Objetivo:
Dashboard para usuário consultar seus dados de consumo de franquia móvel, moderno,
fino e responsivo para mobiles. vou hospedar ela no meu servidor ubuntu.
tasks:
step 1 Validação: ao usuário inserir o cpf vamos consultar a api o bora e retornar
um hover com os números disponiveis encontrados na api do bora e Para realizar
qualquer consulta usuário deve confirmar a senha da Central do assinante, para isso
é necessário a consulta na api SGP usando o cpf que o usuário já inseriu (retirando
os pontos do cpf deixando apenas os números) a resposta desta api conterá um campo
chamado "contratoCentralSenha" o que terá seu valor a senha primeiro solicite ao
cliente que escolha qual numero de telefone ele esta se referindo e ao escolher o
numero verificar no retorno da api a resposta exemplo de resposta resumida:[
{
"msg": "Contrato(s) Localizado(s)",
"contratos": [
{
"contratoCentralSenha": "senha01",
"contratoStatusModo": 2,
"telefones": [
"(31) 99959-6250",
"(31) 98010-6431"
],
{
"contratoCentralSenha": "senha02",
"contratoStatusModo": 2,
"telefones": [
"(31) 99959-6250",
"(31) 98010-6431"
],
"razaoSocial": "JOHNATHA VIEIRA MEDICI DE BRITO",
}
] logica necessária: se o cliente selecionar o numero (31) 98010-6431 a senha
correta da contratoCentralSenha é senha02 porque o numero (31) 99959-6250" é o item
0 e o numero,"(31) 98010-6431 é o item 1 da lista "telefones": o que nos orienta
que a senha correta é a do objeto 1 de toda a lista.
step 2 Exibição de dados:
Para exibir os dados do usuário é necessário chamar a api do bora
ENV:
Apis
bora api:
1 - endpoint para autenticação e obtenção de token:
[Link]
é necessário usar usuário e senha bora com basic auth para validar e conseguir
obter o token
2- consulta linhas/números ativos do usuário:
[Link] do usuario}
curl -X GET "[Link] do
usuario}" \
-H "accept: application/json" \
-H "Authorization: Bearer SEU_TOKEN_AQUI"
3 - Consulta consumo do usuário
[Link]
# Substitua os valores conforme necessário
MSISDN="numero_da_linha_ex:5511999999999"
TOKEN="seu_token_aqui"
curl -X GET
"[Link] \
-H "accept: application/json" \
-H "Authorization: Bearer ${TOKEN}"
4 - obtem detalhes sobre o usuário através do msisdn (numero)
[Link]
# Substitua pelos valores reais
MSISDN="5511999999999"
TOKEN="seu_token_aqui"
curl -X GET "[Link]
\
-H "accept: application/json" \
-H "Authorization: Bearer ${TOKEN}"
SGP api (usado para validação de senha)
1 - Consultar os dados para obter a senha do sgp
[Link]
curl -X POST [Link] \
-H "Content-Type: multipart/form-data" \
-F "app=vplay" \
-F "token=05d11bbc-3027-4272-a6ee-6ae2ff7ab609" \
-F "cpfcnpj={cpf iserido pelo usuario}" \
-F "tservico=4"
Credenciais
Rules:
Api do bora é necessário atualizar seu token a cada nova chamada usando o endpoint
[Link]
Quando foi usar a api sgp com endpoint
[Link] para consultar a senha do
campo "contratoCentralSenha" sera necessário identificar pelo numero de telefone.
cada objeto retonado na requisição tem um campo chamado "telefones" do tipo array o
que servira para identificar de qual numero o cliente esta se referindo e qual a
senha "contratoCentralSenha" correta vou dar um exemplo:
Resultado:
step 1, ao acessar a primeira pagina sera uma barra inicial de consulta onde o
usuário poderá consultar por cpf (uma frase de saudação devera ter)
step 2, ao validar os dados vamos exibir nesta tela: saudação de bem vindo ou bem
vinda, Nome do Usuário, numero referente a linha, status do plano (ativo ou
inativo), quantidade restante de dados, quanto de dados é o plano atual, quanto já
foi usado, quanto de voz restante e quanto já foi usado, quanto de sms restante e
quanto já foi usado.
Layout:
- Botões circulares com ícones no centro.
- saudação e nome do cliente.
- Área de status com informações sobre o plano, status de conexão, Status de Dados,
Status de Voz, Status de SMS, e botão de Recarregar(ira recarregar as informações).
🎨 Paleta de Cores:
- Fundo geral da tela: `#F7F7F7`
- Fundo escuro (login e cards): `#212121` ou `#1C1C1C`
- Texto principal: `#000000`
- Texto secundário: `#555555`
- Texto em cards escuros: `#FFFFFF`
- Botões principais (como "Continuar"): degradê `linear-gradient(135deg, #FF6D00,
#F44336)`
- Botões circulares de ferramentas: mesmo degradê laranja-vermelho
- Ícones: `#FFFFFF`
- Texto de status negativo (como “Suspenso”): `#E53935`
- Destaques em laranja: `#FF6D00`
🧱 Componentes:
1. **Botões com degradê laranja-vermelho**, texto branco, cantos arredondados.
2. **Cards escuros** com título branco e ícone branco centralizado.
3. **Botões circulares** para funcionalidades como “Meu Wi-Fi”, “2ª via”,
“Suporte”.
4. **Seção de status do plano** com título, status (“Ativo”, “Suspenso”), número IP
e botão de renovação.
5. **Tela de login** com fundo `#2C2C2C → #1F1F1F`, botão “Continuar” com o mesmo
degradê dos botões principais.
6. **Rodapé fixo** com ícones (Home, Perfil, Suporte), estilo minimalista.
📱 Estilo:
- Interface mobile-first
- Tipografia: usar "Poppins" ou "Inter"
- Animações suaves (hover, botão pressionado)
- Sombreamento suave nos cards e botões
- Bordas arredondadas `rounded-xl` em quase tudo