| Tecnologia | Versão | Propósito |
|---|---|---|
| React | 18.3.1 | Framework principal |
| Vite | - | Build tool e dev server |
| TypeScript | - | Tipagem estática |
| Tailwind CSS | - | Estilização utility-first |
| shadcn/ui | - | Componentes UI |
| React Router DOM | 6.30.1 | Roteamento |
| TanStack Query | 5.83.0 | Gerenciamento de estado/cache |
| Lucide React | 0.462.0 | Ícones |
| Recharts | 2.15.4 | Gráficos |
src/
├── components/ # Componentes reutilizáveis
│ ├── ui/
│ ├── CompanyGate.tsx
│ ├── ContactForm.tsx
│ ├── ManageAccessModal.tsx
│ └── Header.tsx
├── contexts/
│ ├── AuthContext.tsx
│ ├── DashboardFiltersContext.tsx
│ ├── ThemeContext.tsx
│ └── CompanyContext.ts
├── hooks/
│ ├── useCompany.ts
│ ├── useComposition.ts
│ ├── useContactForm.ts
│ ├── useDashboardMetrics.ts
│ ├── useFeedbackAnalysis.ts
│ ├── useFeedbackByType.ts
│ ├── useFeedbacksOverTime.ts
│ ├── usePersistFn.ts
│ └── useRecentFeedbacks.ts
├── lib/
│ ├── supabase.ts
│ └── utils.ts
├── pages/ # Páginas da aplicação
│ ├── Dashboard.tsx
│ ├── Feedback.tsx
│ ├── Home.tsx
│ ├── Login.tsx
│ ├── NotFound.tsx
│ └── QuemSomos.tsx
├── services/
│ ├── contact.service.ts
│ └── reportExport.service.ts
├── App.tsx # Componente principal + rotas
├── index.css # Design system tokens
└── main.tsx # Entry point
| Rota | Componente | Descrição |
|---|---|---|
/ |
Home | Landing page pública |
/login |
Login | Tela de login com Google |
/quem-somos |
QuemSomos | Página institucional + cadastro |
/dashboard |
Dashboard | Painel principal (requer auth) |
/feedback |
Feedback | Formulário de resposta |
/404 |
NotFound | Página 404 |
O projeto utiliza um design system customizado com tokens definidos em index.css:
Cores Principais:
hsl(211, 69%, 39%) - Azul corporativohsl(247, 10%, 97%) - Cinza clarohsl(254, 10%, 25%) - Texto escuroComponentes Customizados:
.page-container - Container padrão de páginas.section-card - Cards de seção.info-banner - Banner informativo.stat-card - Card de estatísticas.data-table - Tabela de dados.status-badge - Badges de status