Merge pull request #7 from wellington1993/feature/architectural-refactor

test(ui): adiciona cobertura para componentes compartilhados

Author: wellington1993

README.md

@@ -1,59 +1,77 @@
-# Flugo Staff Manager
+# Flugo Employees
 
-Gerenciador de colaboradores feito com React + Firebase. Formulário multi-etapa com rascunho automático e sincronização com o Firestore.
+Este é o sistema de gestão de colaboradores e times da Flugo. Ele foi construído com foco em resiliência e facilidade de manutenção, usando uma arquitetura limpa que separa bem as regras de negócio da infraestrutura técnica.
 
-Demo: [https://flugo-employees-theta.vercel.app](https://flugo-employees-theta.vercel.app)
+Demo online: [https://flugo-employees-theta.vercel.app](https://flugo-employees-theta.vercel.app)
 
----
+## O que tem dentro?
 
-## Stack
+- **React 19 + TypeScript:** O core da aplicação com a última versão do React.
+- **Material UI v7:** Toda a interface visual e componentes de UI.
+- **Firebase (Auth + Firestore):** Controle de acesso e banco de dados em tempo real.
+- **TanStack Query v5:** Gerenciamento inteligente de estado e cache de dados.
+- **Clean Architecture:** Código organizado em camadas (Domínio, Aplicação, Infra e Apresentação).
+- **Service Workers:** Estratégias avançadas de caching e sincronização de dados em segundo plano.
 
-- React 19 + TypeScript + Vite
-- Material UI v7 + Emotion
-- TanStack Query v5
-- React Hook Form + Zod
-- Firebase Firestore
-- React Router v7
+## Como rodar na sua máquina
 
----
-
-## Como rodar
-
-**Localmente**
+Primeiro, clone o repositório e instale as dependências:
 
 ```bash
 npm install
-# configure o .env com base no .env.example
-npm run dev
-# http://localhost:5173
 ```
 
-**Com Docker**
+### Configurando o ambiente
+
+Você vai precisar de um arquivo `.env.local` na raiz do projeto. Use o `.env.example` como base e preencha com as suas chaves do Firebase:
+
+```env
+VITE_FIREBASE_API_KEY=sua_chave
+VITE_FIREBASE_AUTH_DOMAIN=seu_projeto.firebaseapp.com
+VITE_FIREBASE_PROJECT_ID=seu_projeto
+VITE_FIREBASE_STORAGE_BUCKET=seu_projeto.appspot.com
+VITE_FIREBASE_MESSAGING_SENDER_ID=seu_sender_id
+VITE_FIREBASE_APP_ID=seu_app_id
+```
+
+### Rodando o projeto
+
+Para iniciar o servidor de desenvolvimento:
 
 ```bash
-docker compose up --build
-# http://localhost:3000
+npm run dev
 ```
 
----
+Abra [http://localhost:5173](http://localhost:5173) no navegador.
 
-## Testes
+### Build de Produção
+
+Para gerar a versão final otimizada:
 
 ```bash
-npm run test        # unitários (Vitest)
-npm run test:e2e    # E2E (Playwright)
+`npm run build
+npm run preview
 ```
 
----
+## Configurando o Firebase
+
+
+Para que tudo funcione, você precisa ativar dois serviços no seu console do Firebase:
 
-## Firebase
+1. **Authentication:** Ative o provedor de **E-mail/Senha**.
+2. **Cloud Firestore:** Crie o banco de dados.
 
-1. Crie um projeto no Firebase Console
-2. Ative o Firestore em modo de teste
-3. Copie as chaves web para o `.env`
+### Regras de Segurança
 
-As regras de segurança estão em `firestore.rules`. Para publicar:
+Para aplicar as regras do banco de dados (que estão no arquivo `firestore.rules`), você pode usar o CLI do Firebase:
 
 ```bash
-npx firebase-tools deploy --only firestore:rules --project SEU_ID
+npx firebase-tools deploy --only firestore:rules --project SEU_ID_DO_PROJETO
 ```
+
+## Testes
+
+Temos uma boa cobertura de testes para garantir que nada quebre ao adicionar novas funções:
+
+- **Unitários:** `npm run test` (testamos a lógica de negócio isolada).
+- **E2E:** `npm run test:e2e` (testamos o fluxo completo no navegador com Playwright).

docker-compose.yml

@@ -2,15 +2,7 @@ services:
   app:
     build:
       context: .
-      args:
-        - VITE_FIREBASE_API_KEY=${VITE_FIREBASE_API_KEY}
-        - VITE_FIREBASE_AUTH_DOMAIN=${VITE_FIREBASE_AUTH_DOMAIN}
-        - VITE_FIREBASE_PROJECT_ID=${VITE_FIREBASE_PROJECT_ID}
-        - VITE_FIREBASE_STORAGE_BUCKET=${VITE_FIREBASE_STORAGE_BUCKET}
-        - VITE_FIREBASE_MESSAGING_SENDER_ID=${VITE_FIREBASE_MESSAGING_SENDER_ID}
-        - VITE_FIREBASE_APP_ID=${VITE_FIREBASE_APP_ID}
-        - VITE_BASE_URL=/
     ports:
       - "8080:80"
     env_file:
-      - .env
+      - .env.local

package-lock.json

@@ -6,13 +6,16 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "start": "vite preview --host 0.0.0.0",
+    "heroku-postbuild": "npm run build",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:e2e": "playwright test tests/e2e/staff.spec.ts",
-    "test:smoke": "playwright test tests/e2e/smoke.spec.ts"
+    "test:smoke": "playwright test tests/e2e/smoke.spec.ts",
+    "db:purge": "tsx scripts/purge-test-data.ts"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
@@ -27,6 +30,7 @@
     "firebase": "^12.10.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-firebase-hooks": "^5.1.1",
     "react-hook-form": "^7.71.2",
     "react-router-dom": "^7.13.1",
     "zod": "^4.3.6"

package.json

@@ -0,0 +1,54 @@
+import { initializeApp } from 'firebase/app';
+import { getFirestore, collection, getDocs, deleteDoc, doc, query, where } from 'firebase/firestore';
+import * as dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+dotenv.config({ path: path.resolve(__dirname, '../.env.local') });
+
+const firebaseConfig = {
+  apiKey: process.env.VITE_FIREBASE_API_KEY,
+  authDomain: process.env.VITE_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.VITE_FIREBASE_APP_ID,
+};
+
+async function purge() {
+  if (!firebaseConfig.projectId) {
+    console.error('Firebase Project ID não encontrado no .env.local');
+    return;
+  }
+
+  const app = initializeApp(firebaseConfig);
+  const db = getFirestore(app);
+
+  const collections = ['staffs', 'departments'];
+  const patterns = ['Error', 'Optimistic User', 'Teste', 'Scalability'];
+
+  for (const colName of collections) {
+    console.log(`Limpando coleção: ${colName}...`);
+    const colRef = collection(db, colName);
+    const snapshot = await getDocs(colRef);
+    
+    let count = 0;
+    for (const document of snapshot.docs) {
+      const data = document.data();
+      const name = data.name || '';
+      
+      const shouldDelete = patterns.some(p => name.includes(p));
+      
+      if (shouldDelete) {
+        await deleteDoc(doc(db, colName, document.id));
+        count++;
+      }
+    }
+    console.log(`Removidos ${count} documentos de ${colName}.`);
+  }
+}
+
+purge().catch(console.error);

scripts/purge-test-data.ts

@@ -6,13 +6,13 @@ import { Sidebar } from '@/components/sidebar'
 import { Header } from '@/components/header'
 import { Breadcrumb } from '@/components/breadcrumb'
 import { useSyncPending } from '@/features/staff/hooks'
+import { ConnectivityIndicator } from '@/components/connectivity-indicator'
 
 function App() {
   const [mobileOpen, setMobileOpen] = useState(false)
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
-  // Ativa a sincronização em segundo plano
   useSyncPending()
 
   const handleDrawerToggle = () => {
@@ -21,6 +21,7 @@ function App() {
 
   return (
     <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}>
+      <ConnectivityIndicator />
       <Sidebar mobileOpen={mobileOpen} onClose={handleDrawerToggle} />
       <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', width: '100%' }}>
         <Header>
@@ -36,8 +37,8 @@ function App() {
             </IconButton>
           )}
         </Header>
-        <Box component="main" sx={{ flex: 1, p: { xs: 2, md: 5 }, width: '100%' }}>
-          <Container maxWidth="md" disableGutters>
+        <Box component="main" sx={{ flex: 1, p: { xs: 1.5, sm: 2.5, md: 4 }, width: '100%' }}>
+          <Container maxWidth="xl" disableGutters>
             <Breadcrumb />
             <Outlet />
           </Container>