Sprint 8E - React Apps E2E tests

.github/workflows/master-ci-cd.yml

@@ -98,7 +98,7 @@
           ConnectionStrings__meajudaai-db: ${{ steps.db.outputs.connection-string }}
         run: |
           set -e  # Exit immediately if any command fails
 
           # Define exclude patterns for coverage (files only - assemblies excluded via Include in coverlet)
           # Excludes: Migrations, Database, Contracts, OpenApi generated, compiler services, regex generator
           EXCLUDE_PATTERNS="**/Migrations/*.cs,**/Database/*.cs,**/*OpenApi*.generated.cs,**/System.Runtime.CompilerServices*.cs,**/*RegexGenerator.g.cs"
@@ -164,29 +164,43 @@
           npm test
           echo "React Admin tests completed"
 
+      - name: Run E2E Tests (Playwright)
+        working-directory: src/Web
+        if: false  # Disabled for now - enable after apps are running
+        run: |
+          echo "================================"
+          echo "E2E TESTS (PLAYWRIGHT)"
+          echo "================================"
+
+          # Install Playwright browsers
+          npx playwright install --with-deps chromium
+
+          # Run E2E tests (chromium only)
+          npx playwright test --reporter=list --project=ci
+
       - name: Free Disk Space for Integration Tests
         run: |
           echo "Freeing disk space before integration tests..."
 
           # Show disk usage before cleanup
           echo "Disk usage before cleanup:"
           df -h
 
           # Remove Docker images and containers that are not needed
           echo "️  Removing unused Docker resources..."
           docker system prune -af --volumes || true
 
           # Remove large packages/tools not needed for tests
           echo "️  Removing unnecessary packages..."
           sudo apt-get clean
           sudo rm -rf /usr/local/lib/android || true
           sudo rm -rf /opt/ghc || true
           sudo rm -rf /usr/local/.ghcup || true
 
           # Show disk usage after cleanup
           echo "Disk usage after cleanup:"
           df -h
 
           echo "Disk space cleanup completed"
 
       - name: Run integration tests
@@ -202,7 +216,7 @@
           ConnectionStrings__meajudaai-db: ${{ steps.db.outputs.connection-string }}
         run: |
           set -e  # Exit immediately if any command fails
 
           echo "================================"
           echo "INTEGRATION TESTS (NO COVERAGE)"
           echo "================================"
@@ -216,7 +230,7 @@
           ConnectionStrings__meajudaai-db: ${{ steps.db.outputs.connection-string }}
         run: |
           set -e  # Exit immediately if any command fails
 
           echo "================================"
           echo "E2E TESTS (NO COVERAGE)"
           echo "================================"
@@ -239,11 +253,11 @@
         env:
           DOTNET_ROOT: ${{ env.DOTNET_ROOT }}
         with:
           reports: 'TestResults/Shared/**/coverage.cobertura.xml;TestResults/Architecture/**/coverage.cobertura.xml;TestResults/ApiService/**/coverage.cobertura.xml;TestResults/Users/**/coverage.cobertura.xml;TestResults/Documents/**/coverage.cobertura.xml;TestResults/Providers/**/coverage.cobertura.xml;TestResults/ServiceCatalogs/**/coverage.cobertura.xml;TestResults/Locations/**/coverage.cobertura.xml;TestResults/SearchProviders/**/coverage.cobertura.xml'
           targetdir: 'TestResults/Coverage'
           reporttypes: 'Html;Cobertura;JsonSummary'
           assemblyfilters: '-*.Tests*;-*Test*;-*.Migrations.*;-*.Database;-*.Contracts'
           classfilters: '-*.Migrations.*;-*.Database.*;-*.Contracts.*;-*.Metrics.*;-*.HealthChecks.*;-*.Jobs.Hangfire*;-*.Jobs.Configuration*;-*Program*;-*AppHost*;-*.ServiceDefaults*;-*.Keycloak.*;-*.Monitoring.*;-*NoOp*;-*RabbitMq*;-*ServiceBus*;-*Hangfire*;-*.Jobs.*;-*Options;-*BaseDesignTimeDbContextFactory*;-*SchemaPermissionsManager;-*SimpleHostEnvironment;-*CacheWarmupService;-*GeoPointConverter;-*ModuleNames;-*ModuleApiInfo;-*MessagingExtensions;-*ICacheableQuery'
           verbosity: 'Info'
           tag: '${{ github.run_number }}_${{ github.run_id }}'
         # Note: UNIT test coverage for backend only. 

.github/workflows/pr-validation.yml

@@ -179,6 +179,20 @@ jobs:
           # 2. Run the affected build for the rest of the workspace
           npx nx affected --target=build --exclude=MeAjudaAi.Web.Customer
 
+      - name: Run E2E Tests (Playwright)
+        working-directory: ./src/Web
+        if: false  # Disabled for now - enable after apps are running
+        run: |
+          echo "================================"
+          echo "E2E TESTS (PLAYWRIGHT)"
+          echo "================================"
+
+          # Install Playwright browsers
+          npx playwright install --with-deps chromium
+
+          # Run E2E tests (chromium only)
+          npx playwright test --reporter=list --project=ci
+
       - name: Prepare Aspire Integration Tests
         run: |
           echo " Preparing .NET Aspire for integration tests..."

README.md

@@ -2,7 +2,7 @@
 
 Uma plataforma abrangente de serviços construída com .NET Aspire, projetada para conectar prestadores de serviços com clientes usando arquitetura monólito modular.
 
-<!-- Atualizado: 5 Fevereiro 2026 - Sprint 7.21 (Package Updates: Microsoft.OpenApi 2.6.1, Aspire.Hosting.Redis 13.1.0, SonarAnalyzer.CSharp 10.19.0) -->
+<!-- Atualizado: 24 Março 2026 - Sprint 8D (Admin Portal Migration: Blazor → React) -->
 
 ## 🎯 Visão Geral
 
@@ -20,9 +20,10 @@ O **MeAjudaAi** é uma plataforma moderna de marketplace de serviços que implem
 
 - **.NET 10.0.2** - Framework principal
 - **.NET Aspire 13.1** - Orquestração e observabilidade
-- **Blazor WebAssembly 10.0.2** - Admin Portal SPA
-- **MudBlazor 8.15.0** - Material Design UI components
-- **Fluxor 6.9.0** - Redux state management
+- **React 19 + Next.js 15** - Frontend Web Apps (Customer, Provider, Admin)
+- **Tailwind CSS v4** - Styling
+- **Zustand + TanStack Query** - State management
+- **Playwright** - E2E Testing
 - **Entity Framework Core 10.0.2** - ORM e persistência
 - **Microsoft.OpenApi 2.6.1** - OpenAPI specification
 - **SonarAnalyzer.CSharp 10.19.0** - Code quality analysis
@@ -102,9 +103,10 @@ O projeto foi organizado para facilitar navegação e manutenção:
 │   ├── Bootstrapper/   # API Service entry point
 │   ├── Modules/        # Módulos de domínio (DDD)
 │   ├── Shared/         # Contratos e abstrações
-│   └── Web/            # Aplicações Web
-│       ├── MeAjudaAi.Web.Admin/     # Admin Portal (Blazor WASM)
-│       └── meajudaai-web-customer/  # Customer Web App (Next.js 15)
+│   └── Web/            # Aplicações Web (NX Workspace)
+│       ├── MeAjudaAi.Web.Admin/     # Admin Portal (React + Next.js 15)
+│       ├── MeAjudaAi.Web.Customer/ # Customer Web App (Next.js 15)
+│       └── MeAjudaAi.Web.Provider/  # Provider Web App (Next.js 15)
 ├── 📁 tests/           # Testes automatizados (xUnit v3)
 └── 📁 tools/           # Ferramentas de desenvolvimento
     └── api-collections/  # Gerador Bruno/Postman collections
@@ -267,9 +269,8 @@ dotnet test tests/MeAjudaAi.Modules.Users.Tests/
 - ✅ Gestão de Documentos (upload, OCR, verificação)
 - ✅ Gestão de Service Catalogs (categorias + serviços)
 - ✅ Restrições Geográficas (cidades permitidas)
-- ✅ Dark Mode com Fluxor state management
-- ✅ Localização completa em português
-- ✅ 43 testes bUnit (componentes principais)
+- ✅ Admin Portal React com Tailwind CSS
+- ✅ E2E Tests com Playwright
 
 **Como Executar:**
 

docs/admin-portal/features.md

@@ -158,24 +158,23 @@ Ver [Dashboard Documentation](dashboard.md) para detalhes completos.
 
 ## 🎨 Padrões de UI/UX
 
-### MudBlazor Components
+### Componentes React
 
-Todos os módulos utilizam componentes MudBlazor para consistência:
+Todos os módulos utilizam componentes React com Tailwind CSS para consistência:
 
-- **MudDataGrid**: Tabelas paginadas com ordenação e filtros
-- **MudDialog**: Modais para criação/edição
-- **MudForm**: Formulários com validação
-- **MudTextField**: Campos de texto com máscaras
-- **MudSelect**: Dropdowns para seleção
-- **MudChip**: Status badges coloridos
-- **MudButton**: Botões de ação
+- **DataGrid**: Tabelas paginadas com ordenação e filtros (TanStack Table)
+- **Dialog**: Modais para criação/edição
+- **Forms**: Formulários com validação (React Hook Form + Zod)
+- **Select**: Dropdowns para seleção
+- **Badge**: Status badges coloridos
+- **Button**: Botões de ação
 
-### Status Chips
+### Status Badges
 
-```razor
-<MudChip Color="@VerificationStatus.ToColor(provider.VerificationStatus)">
-    @VerificationStatus.ToDisplayName(provider.VerificationStatus)
-</MudChip>
+```tsx
+<Badge color={statusColors[provider.verificationStatus]}>
+    {verificationStatusLabels[provider.verificationStatus]}
+</Badge>
 ```
 
 **Cores Padrão**:

docs/admin-portal/overview.md

@@ -2,7 +2,7 @@
 
 ## 📋 Introdução
 
-O **Admin Portal** é a interface administrativa da plataforma MeAjudaAi, construída com Blazor WebAssembly para fornecer uma experiência de gerenciamento moderna, responsiva e eficiente.
+O **Admin Portal** é a interface administrativa da plataforma MeAjudaAi, construída com React + Next.js para fornecer uma experiência de gerenciamento moderna, responsiva e eficiente.
 
 ## 🎯 Propósito
 
@@ -17,27 +17,28 @@ O Admin Portal permite que administradores da plataforma gerenciem:
 ## 🛠️ Stack Tecnológica
 
 ### Frontend
-- **Blazor WebAssembly (.NET 10)**: Framework principal para SPA
-- **MudBlazor 8.15.0**: Biblioteca de componentes UI Material Design
-- **Fluxor**: State management (padrão Flux/Redux)
+- **React 19 + Next.js 15**: Framework principal para SPA
+- **Tailwind CSS v4**: Biblioteca de estilização
+- **Zustand**: State management
+- **TanStack Query**: Server state management
 
 ### Autenticação
 - **Keycloak**: Identity Provider (OIDC/OAuth 2.0)
-- **PKCE Flow**: Autenticação segura para aplicações públicas
+- **NextAuth.js**: Autenticação para Next.js
 
 ### Comunicação
-- **Refit**: Cliente HTTP tipado para APIs
-- **System.Text.Json**: Serialização JSON
+- **Axios / Fetch**: Cliente HTTP
+- **TanStack Query**: Data fetching e caching
 
 ## 🏗️ Arquitetura
 
 ```mermaid
 graph TB
-    subgraph "Admin Portal (Blazor WASM)"
-        UI[Pages/Components]
-        State[Fluxor State]
-        Effects[Fluxor Effects]
-        API[API Clients - Refit]
+    subgraph "Admin Portal (React + Next.js)"
+        UI[React Components]
+        Store[Zustand Store]
+        Query[TanStack Query]
+        API[API Calls - Fetch]
     end
 
     subgraph "Backend"
@@ -47,57 +48,57 @@ graph TB
 
     subgraph "Auth"
         Keycloak[Keycloak]
+        NextAuth[NextAuth.js]
     end
 
-    UI --> State
-    State --> Effects
-    Effects --> API
+    UI --> Store
+    UI --> Query
+    Query --> API
     API --> Gateway
     Gateway --> Modules
 
-    UI -.Auth.-> Keycloak
+    UI -.Auth.-> NextAuth
+    NextAuth -.-> Keycloak
     API -.JWT.-> Gateway
 ```
 
 ## 📁 Estrutura de Diretórios
 
 ```text
-src/Web/MeAjudaAi.Web.Admin/
-├── Pages/                    # Páginas principais
-│   ├── Dashboard.razor
-│   ├── Providers.razor
-│   ├── Documents.razor
-│   ├── Categories.razor
-│   ├── Services.razor
-│   └── AllowedCities.razor
-├── Components/               # Componentes reutilizáveis
-│   ├── Dialogs/             # Modais de criação/edição
-│   ├── Common/              # Componentes compartilhados
-│   └── Accessibility/       # Componentes de acessibilidade
-├── Features/                # Fluxor Features (State/Actions/Effects/Reducers)
-│   ├── Modules/
-│   │   ├── Providers/
-│   │   ├── Documents/
-│   │   └── ServiceCatalogs/
-│   ├── Dashboard/
-│   └── Theme/
-├── Services/                # Serviços auxiliares
-│   ├── ErrorHandlingService.cs
-│   ├── LocalizationService.cs
-│   └── LiveRegionService.cs
-├── Constants/               # Constantes centralizadas
-│   ├── ProviderConstants.cs
-│   ├── DocumentConstants.cs
-│   └── CommonConstants.cs
-│   # Nota: Enums e constantes compartilhadas com backend estão em MeAjudaAi.Contracts
-│   # Esta pasta contém apenas constantes específicas da UI (ex: layout, cores, timeouts)
-├── Helpers/                 # Métodos auxiliares
-│   ├── AccessibilityHelper.cs
-│   ├── PerformanceHelper.cs
-│   └── DebounceHelper.cs
-└── Layout/                  # Layouts e navegação
-    ├── MainLayout.razor
-    └── NavMenu.razor
+apps/admin-portal/
+├── src/
+│   ├── app/                    # Next.js App Router
+│   │   ├── (auth)/             # Authentication routes
+│   │   │   ├── login/
+│   │   │   └── layout.tsx
+│   │   ├── (dashboard)/        # Protected routes
+│   │   │   ├── providers/
+│   │   │   ├── documents/
+│   │   │   ├── services/
+│   │   │   ├── cities/
+│   │   │   ├── dashboard/
+│   │   │   └── layout.tsx
+│   │   ├── layout.tsx
+│   │   └── page.tsx
+│   ├── components/             # Reusable components
+│   │   ├── ui/                 # Base UI components (Button, Text, etc.)
+│   │   ├── providers/          # Provider-specific components
+│   │   ├── documents/          # Document-specific components
+│   │   └── common/             # Shared components
+│   ├── hooks/                  # Custom React hooks
+│   │   ├── useProviders.ts
+│   │   ├── useDocuments.ts
+│   │   └── useTranslation.ts
+│   ├── stores/                 # Zustand stores
+│   │   ├── providersStore.ts
+│   │   └── uiStore.ts
+│   ├── lib/                    # Utilities
+│   │   ├── api.ts              # API client
+│   │   └── utils.ts
+│   └── types/                  # TypeScript types
+├── e2e/                        # Playwright tests
+├── playwright.config.ts
+└── package.json
 ```
 
 ## 🔐 Autenticação e Autorização
@@ -121,17 +122,31 @@ src/Web/MeAjudaAi.Web.Admin/
 
 ### Uso em Componentes
 
-```razor
-@attribute [Authorize(Policy = PolicyNames.AdminPolicy)]
-
-<AuthorizeView Policy="@PolicyNames.ManagerPolicy">
-    <Authorized>
-        <MudButton>Editar</MudButton>
-    </Authorized>
-    <NotAuthorized>
-        <MudText>Sem permissão</MudText>
-    </NotAuthorized>
-</AuthorizeView>
+```tsx
+// Using NextAuth.js useSession for auth
+'use client';
+import { useSession } from 'next-auth/react';
+
+export function EditButton({ providerId }: { providerId: string }) {
+  const { data: session } = useSession();
+
+  if (session?.user?.role !== 'admin' && session?.user?.role !== 'manager') {
+    return <span className="text-gray-500">Sem permissão</span>;
+  }
+
+  return <Button>Editar</Button>;
+}
+
+// Protected route wrapper
+function AdminProtected({ children }: { children: React.ReactNode }) {
+  const { data: session, status } = useSession();
+
+  if (status === 'loading') return <Spinner />;
+  if (!session) return <Redirect to="/login" />;
+  if (session.user.role !== 'admin') return <AccessDenied />;
+
+  return <>{children}</>;
+}
 ```
 
 ## 🌐 Localização (i18n)
@@ -143,11 +158,21 @@ O Admin Portal suporta múltiplos idiomas:
 
 ### Uso
 
-```razor
-@inject LocalizationService L
-
-<MudButton>@L.GetString("Common.Save")</MudButton>
-<MudText>@L.GetString("Providers.ItemsFound", count)</MudText>
+```tsx
+'use client';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export function SaveButton() {
+  const { t } = useTranslation();
+
+  return <Button>{t('Common.Save')}</Button>;
+}
+
+// With interpolation
+function ProvidersCount({ count }: { count: number }) {
+  const { t } = useTranslation();
+  return <Text>{t('Providers.ItemsFound', { count })}</Text>;
+}
 ```
 
 ## ♿ Acessibilidade
@@ -164,10 +189,10 @@ O Admin Portal segue as diretrizes **WCAG 2.1 AA**:
 
 ### Otimizações Implementadas
 
-- **Virtualization**: MudDataGrid renderiza apenas linhas visíveis
-- **Debouncing**: Search com delay de 300ms
-- **Memoization**: Cache de resultados filtrados (30s)
-- **Lazy Loading**: Componentes carregados sob demanda
+- **Virtualization**: TanStack Table com virtualização para renderizar apenas linhas visíveis
+- **Debouncing**: Search com delay de 300ms via TanStack Query
+- **Memoization**: Cache de resultados filtrados (30s via TanStack Query)
+- **Lazy Loading**: Next.js App Router com code splitting automático
 
 ### Métricas
 
@@ -180,16 +205,16 @@ O Admin Portal segue as diretrizes **WCAG 2.1 AA**:
 
 ## 🧪 Testes
 
-### Cobertura de Testes bUnit
+### E2E Tests com Playwright
 
-- **43 testes** implementados
-- Testes de páginas, dialogs e componentes
-- Integração com Fluxor state
+- Testes end-to-end para todos os fluxos principais
+- Localização: `src/Web/e2e/admin/`
 
 ### Executar Testes
 
 ```bash
-dotnet test tests/MeAjudaAi.Web.Admin.Tests/
+cd src/Web
+npx playwright test e2e/admin/
 ```
 
 ## 🚀 Executando Localmente