Canal Ético

Canal Ético é uma plataforma web moderna e segura para registro, acompanhamento e gestão de denúncias de condutas antiéticas, assédio, fraudes e outros comportamentos inadequados. O sistema prioriza o anonimato, a segurança dos dados e a transparência no processo de apuração.

✨ Funcionalidades

• Registro de Denúncias: Usuários podem registrar denúncias detalhadas, com opção de anonimato e upload de arquivos anexos (documentos, imagens, vídeos)
• Acompanhamento em Tempo Real: Consulte o status da denúncia usando um protocolo único e visualize o histórico completo de atualizações
• Visualização de Anexos: Modal interativo para visualizar imagens e fazer download direto de arquivos anexados
• Gestão Administrativa Completa:
  • Dashboard com estatísticas e filtros avançados
  • Atualização de status e prioridade em tempo real
  • Sistema de feedback para comunicação com denunciantes
  • Histórico detalhado de todas as alterações
• Sistema de Armazenamento: Integração com Supabase Storage para upload seguro de arquivos com controle de acesso por RLS (Row Level Security)
• Interface Moderna: Layout responsivo, acessível e otimizado com Tailwind CSS e componentes shadcn/ui

🛠️ Tecnologias Utilizadas

• Frontend: React 18 + TypeScript + Vite
• Estilização: Tailwind CSS + shadcn/ui (componentes acessíveis Radix UI)
• Roteamento: React Router DOM v6
• Backend: Supabase (Auth, PostgreSQL Database, Storage com RLS)
• Gerenciamento de Estado: React Hooks (useState, useEffect, useAuth)
• Validação: Zod + React Hook Form
• Ícones: Lucide React
• Formatação de Datas: date-fns
• Controle de Acesso: Autenticação JWT e autorização via Supabase RLS

📁 Estrutura do Projeto

Canal-Seguro/
├── public/                          # Arquivos estáticos
│   └── robots.txt
├── src/
│   ├── components/                  # Componentes reutilizáveis de UI
│   │   ├── ui/                     # Componentes shadcn/ui (40+ componentes)
│   │   ├── Footer.tsx
│   │   ├── Header.tsx
│   │   ├── ImageViewerDialog.tsx   # Modal para visualização de imagens/arquivos
│   │   ├── NavLink.tsx
│   │   ├── PriorityBadge.tsx
│   │   └── StatusBadge.tsx
│   ├── hooks/                       # Hooks customizados
│   │   ├── useAuth.tsx             # Autenticação e gerenciamento de usuário
│   │   ├── use-mobile.tsx
│   │   └── use-toast.ts
│   ├── integrations/supabase/       # Integração com Supabase
│   │   ├── client.ts               # Cliente Supabase configurado
│   │   └── types.ts                # Tipos gerados do banco
│   ├── lib/                         # Tipos, utilitários e lógica de domínio
│   │   ├── denuncias.ts            # Lógica de negócio das denúncias
│   │   ├── supabase.ts
│   │   ├── types.ts                # Tipos TypeScript do domínio
│   │   └── utils.ts
│   ├── pages/                       # Páginas principais
│   │   ├── admin/                  # Área administrativa
│   │   │   ├── Dashboard.tsx       # Lista e filtros de denúncias
│   │   │   └── DenunciaDetail.tsx  # Detalhes, histórico e gestão
│   │   ├── Acompanhar.tsx          # Consulta de protocolo
│   │   ├── Denunciar.tsx           # Formulário de denúncia
│   │   ├── Index.tsx               # Página inicial
│   │   ├── Login.tsx               # Autenticação admin
│   │   └── NotFound.tsx
│   ├── services/                    # Serviços de acesso a dados
│   │   └── denunciaService.ts      # CRUD de denúncias e upload de arquivos
│   ├── App.css
│   ├── App.tsx                      # Configuração de rotas
│   ├── index.css
│   ├── main.tsx                     # Entry point
│   └── vite-env.d.ts
├── supabase/                        # Configurações e migrações
│   ├── config.toml
│   └── migrations/
├── .env.local                       # (IGNORADO) Variáveis de ambiente
├── .gitignore
├── components.json                  # Configuração shadcn/ui
├── eslint.config.js
├── index.html
├── package.json
├── postcss.config.js
├── tailwind.config.ts
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── vite.config.ts
└── README.md

🚀 Como Rodar o Projeto

Pré-requisitos

• Node.js versão 18+ (recomendado: versão LTS mais recente)
• npm ou yarn ou pnpm
• Conta no Supabase (gratuita para começar)
• Git instalado

Passos para Instalação

1. Clone o repositório:

   git clone https://github.com/iSousadev/Canal-Etico.git
   cd Canal-Etico

2. Instale as dependências:

   npm install
   # ou
   yarn install
   # ou
   pnpm install

3. Configure as variáveis de ambiente:

   Crie um arquivo .env.local na raiz do projeto:

   VITE_SUPABASE_URL=sua_url_do_supabase
   VITE_SUPABASE_ANON_KEY=sua_chave_anonima_do_supabase

   ⚠️ Importante: Nunca commite o arquivo .env.local para o repositório. Ele já está incluído no .gitignore.

4. Configure o Supabase:

   • Crie um novo projeto no Supabase
   • Execute as migrations SQL em supabase/migrations/
   • Configure o bucket de storage arquivos com políticas RLS
   • Copie a URL e a chave anônima do seu projeto

5. Inicie o servidor de desenvolvimento:

   npm run dev
   # ou
   yarn dev
   # ou
   pnpm dev

6. Acesse no navegador:

   http://localhost:5173
   

Build para Produção

npm run build
npm run preview

🎯 Fluxo de Uso

� Scripts Disponíveis

npm run dev          # Inicia o servidor de desenvolvimento
npm run build        # Build para produção
npm run preview      # Preview do build de produção
npm run lint         # Executa o linter

🎨 Padrões de Código

• TypeScript com type-safety rigoroso
• ESLint para qualidade de código
• Prettier para formatação consistente
• Componentes seguem padrão shadcn/ui
• Commits seguem Conventional Commits

🤝 Contribuindo

Contribuições são muito bem-vindas! Para contribuir:

1. Faça um fork do projeto
2. Crie uma branch para sua feature: git checkout -b feat/minha-feature
3. Commit suas alterações: git commit -m 'feat: adiciona minha feature'
4. Push para a branch: git push origin feat/minha-feature
5. Abra um Pull Request

Tipos de Commit

• feat: Nova funcionalidade
• fix: Correção de bug
• docs: Documentação
• style: Formatação/estilo
• refactor: Refatoração de código
• test: Testes
• chore: Manutenção

🐛 Reportar Bugs

Encontrou um bug? Por favor, abra uma issue com:

• Descrição clara do problema
• Passos para reproduzir
• Comportamento esperado vs atual
• Screenshots (se aplicável)
• Ambiente (navegador, OS, etc.)

📞 Contato

• GitHub: @iSousadev
• Projeto: Canal Ético

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Desenvolvido com ❤️ por iSousadev

⭐ Se este projeto foi útil, considere dar uma estrela!

## 📄 Licença

Este projeto está sob a licença MIT. VITE_SUPABASE_URL=... VITE_SUPABASE_ANON_KEY=... ``` - Nunca suba seu .env para o repositório.

4. Rode o projeto em modo desenvolvimento:

   npm run dev
   # ou
   yarn dev

5. Acesse no navegador:

   http://localhost:5173
   

Fluxo de Uso

• Usuário: Pode registrar uma denúncia, receber um protocolo e acompanhar o andamento.
• Administrador: Após login, acessa o painel para visualizar, filtrar, atualizar status/prioridade, responder feedbacks e consultar histórico de cada denúncia.

Exemplos de Uso

Tela Inicial

Registro de Denúncia

Painel Administrativo

Contribuição

1. Faça um fork do projeto
2. Crie uma branch: git checkout -b minha-feature
3. Commit suas alterações: git commit -m 'feat: minha nova feature'
4. Push para a branch: git push origin minha-feature
5. Abra um Pull Request

Licença

Este projeto está sob a licença MIT.