Projeto_Integrador_3

Documentação da Implementação - Projeto "Leitura Mágica"

Esta documentação detalha a implementação do sistema Leitura Mágica (uma plataforma de e-commerce e gerenciamento de livraria online), destacando a conformidade com os requisitos solicitados na atividade acadêmica.

---

1. Tema Escolhido e Propósito

• Tema: E-commerce de Livros (Livraria Online) com Painel Administrativo.
• Propósito: Oferecer uma interface de compras para os clientes (catálogo, detalhes de produtos, carrinho, promoções e contato) integrada a um sistema administrativo completo para gerenciar o acervo, os clientes e o fluxo de pedidos de forma dinâmica e interativa.

---

2. Estrutura de Dados (Mínimo de 3 Entidades)

Os dados são estruturados e manipulados em formato JSON, persistidos no LocalStorage e carregados com dados iniciais (seeding) caso o banco local esteja vazio. As três entidades principais são:

A. Clientes (clientes)

Representa os usuários registrados no sistema.

• Estrutura JSON:

  {
    "id": "c1",
    "nome": "Maria do Carmo",
    "cpf": "123.456.789-00",
    "email": "maria@gmail.com",
    "telefone": "(53) 99999-1111",
    "cep": "96000-000",
    "rua": "Rua XV de Novembro",
    "numero": "123",
    "complemento": "Apto 301",
    "bairro": "Centro",
    "cidade": "Pelotas",
    "estado": "RS",
    "senha": "..."
  }

B. Livros (livros)

Representa o catálogo de produtos disponíveis para venda.

• Estrutura JSON:

  {
    "id": "l1",
    "titulo": "A Chave de Ébano",
    "autor": "Gustavo Lima",
    "isbn": "978-85-12345-01-2",
    "categoria": "ficcao",
    "preco": 49.90,
    "estoque": 15,
    "descricao": "Uma aventura misteriosa repleta de magia...",
    "imagem": "data:image/png;base64,..."
  }

C. Pedidos (pedidos)

Representa as compras realizadas, associando clientes e itens.

• Estrutura JSON:

  {
    "id": "10045",
    "data": "2026-07-12",
    "clienteId": "c1",
    "clienteNome": "Maria do Carmo",
    "status": "Pendente",
    "itens": [
      {
        "livroId": "l1",
        "titulo": "A Chave de Ébano",
        "preco": 49.90,
        "quantidade": 2
      }
    ],
    "total": 99.80
  }

---

3. Interface com Bootstrap 5 e Customização Visual

O layout é responsivo, dinâmico e focado em uma experiência moderna e limpa:

• Layout Responsivo: Implementado usando o sistema de grid do Bootstrap (row, col-lg-*, col-md-*, g-4), garantindo excelente legibilidade em computadores, tablets e smartphones.
• Navbar Responsiva: Presente no cabeçalho de todas as páginas, permitindo navegação entre a loja e o painel administrativo.
• Sidebar (Menu Lateral): Utilizado nas páginas administrativas para alternar de forma rápida entre as telas de Dashboard & Pedidos, Clientes e Livros.
• Componentes Bootstrap Utilizados:
  • Cards: Utilizados nos destaques da página inicial (index.html) e nos blocos informativos de estatísticas do dashboard.
  • Tabelas: Tabelas estilizadas (table, table-striped, table-hover) para listagem detalhada de registros no painel administrativo.
  • Modais: Modais interativos do Bootstrap 5 para criação/edição de pedidos (#modalPedidoForm) e exibição detalhada de um pedido específico (#modalDetalhesPedido).
  • Formulários: Formulários modernos (form-control, form-select) com validações no lado do cliente.
  • Badges: Utilizados para identificar visualmente o status dos pedidos (Pendente em amarelo, Enviado em azul, Entregue em verde, Cancelado em vermelho).
• Personalização de Temas (Modo Escuro / Light-Dark Theme):
  • Desenvolvido um interruptor de tema inteligente em JavaScript que alterna as classes CSS e altera o atributo do Bootstrap data-bs-theme="dark" / data-bs-theme="light".
  • As variáveis nativas do Bootstrap 5 foram sobrescritas no CSS próprio (styles.css) usando custom properties (ex: --bs-primary, --bs-body-bg) para garantir que todos os componentes do framework adaptem-se dinamicamente ao modo escuro ou claro sem perder a harmonia visual.

---

4. CRUD Completo com Persistência em LocalStorage

Todas as operações de criação, leitura, atualização e exclusão foram desenvolvidas em JavaScript puro (script.js) manipulando dados salvos no LocalStorage do navegador:

A. CRUD de Clientes

• Create (Criar): Formulário em cadastro_clientes.html captura os dados cadastrais (incluindo endereço completo) e adiciona ao vetor de clientes no LocalStorage gerando uma ID única baseada em timestamp.
• Read (Ler): Apresentados na tabela de clientes. Conta com um filtro de busca inteligente por campo de texto (busca em tempo real por nome, CPF ou e-mail).
• Update (Atualizar): Ao clicar no botão "Editar", o JavaScript preenche o formulário com os dados do cliente correspondente e altera o comportamento e texto do formulário ("Editar Cliente" / "Salvar Alterações"). Permite cancelar a edição.
• Delete (Excluir): Botão "Excluir" remove o registro correspondente do array de clientes, atualizando o LocalStorage e redesenhando a tabela na tela após confirmação do usuário (confirm()).

B. CRUD de Livros

• Create (Criar): Formulário de cadastro em cadastro_livros.html. Inclui tratamento especial de arquivos via FileReader para converter a imagem da capa enviada para Base64, garantindo que a imagem seja persistida diretamente no LocalStorage.
• Read (Ler): Exibição em tabela com imagem da capa em miniatura. Possui barra de pesquisa por texto (título, autor ou ISBN) e filtro por categorias (Ficção, Não-Ficção, Romance, etc.).
• Update (Atualizar): Carrega as informações atuais do livro no formulário. Se nenhuma nova imagem for anexada, o sistema preserva a imagem Base64 existente.
• Delete (Excluir): Remove o livro do catálogo local, com confirmação e recarregamento reativo da tabela.

C. CRUD de Pedidos

• Create (Criar): No modal de pedidos de controle_pedidos.html, o administrador seleciona um cliente e adiciona múltiplos itens (livros) definindo a quantidade. O JavaScript manipula uma lista temporária em memória (tempItensPedido), validando quantidades, impedindo duplicidades e atualizando o valor total em tempo real na tela.
• Read (Ler): Tabela principal que exibe número do pedido, data formatada (DD/MM/AAAA), cliente, valor total e status. Um botão "Detalhes" abre um segundo modal contendo todas as informações do cliente, endereço de entrega e a lista de itens adquiridos com subtotais.
• Update (Atualizar): Botão "Atualizar" abre o modal pré-carregado com os dados do pedido. Permite alterar o status da entrega (Pendente, Enviado, Entregue, Cancelado), adicionar ou remover livros e alterar quantidades diretamente, recalculando o total final.
• Delete (Excluir): Remove o pedido do histórico, atualizando instantaneamente os dados do painel e o faturamento do dashboard.

---

5. Padrão Administrativo (Admin Template)

As telas administrativas do sistema oferecem um painel de gerenciamento completo estruturado da seguinte forma:

A. Dashboard Principal (controle_pedidos.html)

Apresenta cartões estatísticos com métricas dinâmicas obtidas em tempo real a partir dos dados do LocalStorage:

• Faturamento Total: Soma dos valores de todos os pedidos finalizados ou ativos (desconsiderando os pedidos cancelados).
• Total Pedidos: Quantidade total de pedidos registrados no sistema.
• Livros no Catálogo: Número de obras cadastradas.
• Clientes Ativos: Quantidade de clientes registrados no banco de dados.

B. Formulários Integrados e Tabelas

• O layout administrativo divide a tela de forma inteligente (na proporção 5/12 para o formulário e 7/12 para a tabela de listagem no desktop), permitindo que o administrador visualize a lista de dados e realize inserções ou edições simultaneamente na mesma página.
• Os formulários possuem mensagens interativas e foco automático via JavaScript ao iniciar um processo de edição, melhorando a usabilidade do operador do sistema.

---

Arquivos do Projeto Relacionados

• index - Página inicial com o catálogo da loja.
• Dashboard - Dashboard estatístico e controle (CRUD) de pedidos.
• Cadastro de Clientes - Tela administrativa para gerenciamento (CRUD) de clientes.
• Cadastro de Livros - Tela administrativa para gerenciamento (CRUD) de livros.
• script.js - Arquivo JavaScript principal com as lógicas de CRUD, LocalStorage e manipulação de DOM.
• Estilos gerais do site com customização do tema escuro integrado ao Bootstrap 5 utilizando o repositório de css do próprio Bootstrap.