feat: Frontend CSS refactoring and test improvements

Frontend:
- Refactored CSS architecture with new utility classes
- Updated dashboard components styling
- Improved responsive grid system
- Enhanced typography and variables
- Updated E2E and integration tests

Added:
- Claude Code slash commands for validation
- SSH tunnel and start test scripts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

reports-app/frontend/tests/e2e/auth/login.spec.js

@@ -38,9 +38,7 @@ test.describe('Authentication - Login Flow', () => {
     
     // Button should remain disabled with empty fields
     expect(await loginPage.isLoginButtonDisabled()).toBe(true);
-    
-    // Verify form validation classes are applied
-    const hasInvalidFields = await loginPage.hasInvalidField();
+
     // Note: validation might not show invalid state until user interaction
   });
 

reports-app/frontend/tests/e2e/button-fix-test.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
 import { LoginPage } from '../page-objects/LoginPage.js';
 
 test.describe('🔧 Button Fix Test - Identify Disabled State Issue', () => {
@@ -18,9 +18,8 @@ test.describe('🔧 Button Fix Test - Identify Disabled State Issue', () => {
         const usernameInput = document.getElementById('username');
         const passwordInput = document.querySelector('#password input');
         const button = document.querySelector('button[type="submit"]');
-        
+
         // Get Vue component data if available
-        const vueApp = document.querySelector('#app').__vue__;
         let vueData = null;
         
         try {

reports-app/frontend/tests/e2e/complete-reports-functionality.spec.js

@@ -1,10 +1,8 @@
 import { test, expect } from '@playwright/test';
 import { LoginPage } from '../page-objects/LoginPage.js';
-import { DashboardPage } from '../page-objects/DashboardPage.js';
 
 test.describe('📊 Complete Reports Functionality Test', () => {
   let loginPage;
-  let dashboardPage;
   let networkRequests = [];
   let apiErrors = [];
 
@@ -34,7 +32,6 @@ test.describe('📊 Complete Reports Functionality Test', () => {
     });
 
     loginPage = new LoginPage(page);
-    dashboardPage = new DashboardPage(page);
   });
 
   test('🎯 Complete User Flow: Login → Dashboard → Reports', async ({ page }) => {
@@ -293,7 +290,7 @@ test.describe('📊 Complete Reports Functionality Test', () => {
     }
   });
 
-  test.afterEach(async ({ page }) => {
+  test.afterEach(async () => {
     // Generate test report
     console.log('\n📋 === TEST REPORT ===');
     console.log(`🌐 Total Network Requests: ${networkRequests.length}`);

reports-app/frontend/tests/e2e/debugging-real-issues.spec.js

@@ -227,7 +227,7 @@ test.describe('🔍 ROA2WEB Real Issues Debugging Suite', () => {
       );
       
       let node;
-      while (node = walker.nextNode()) {
+      while ((node = walker.nextNode())) {
         const text = node.textContent.trim();
         if (text.toLowerCase().includes('eroare') || 
             text.toLowerCase().includes('error') ||
@@ -298,7 +298,7 @@ test.describe('🔍 ROA2WEB Real Issues Debugging Suite', () => {
     }
   });
 
-  test.afterEach(async ({ page }) => {
+  test.afterEach(async () => {
     // Generate final report
     console.log('\n📋 === FINAL TEST REPORT ===');
     console.log(`Total Network Requests: ${networkRequests.length}`);

reports-app/frontend/tests/e2e/real-world-comprehensive.spec.js

@@ -4,11 +4,9 @@
 
 import { test, expect } from '@playwright/test';
 import { LoginPage } from '../page-objects/LoginPage.js';
-import { DashboardPage } from '../page-objects/DashboardPage.js';
 
 test.describe('🌍 ROA2WEB Real-World Comprehensive Testing', () => {
   let loginPage;
-  let dashboardPage;
   let performanceMetrics = [];
   let networkErrors = [];
   let consoleErrors = [];
@@ -50,7 +48,6 @@ test.describe('🌍 ROA2WEB Real-World Comprehensive Testing', () => {
     });
 
     loginPage = new LoginPage(page);
-    dashboardPage = new DashboardPage(page);
   });
 
   test('🎯 COMPLETE USER JOURNEY - Login to Dashboard to Reports', async ({ page }) => {
@@ -327,7 +324,7 @@ test.describe('🌍 ROA2WEB Real-World Comprehensive Testing', () => {
     }
   });
 
-  test.afterEach(async ({ page }) => {
+  test.afterEach(async () => {
     // Generate comprehensive test report
     console.log('\n📋 === COMPREHENSIVE TEST REPORT ===');
     console.log(`🌐 Total Network Requests: ${performanceMetrics.length}`);

reports-app/frontend/tests/integration/api-endpoints/data-consistency.spec.js

@@ -5,9 +5,8 @@
  */
 
 import { test, expect } from '@playwright/test';
-import { 
-  authenticateWithRealCredentials, 
-  getRealCompanies,
+import {
+  authenticateWithRealCredentials,
   selectCompany,
   REAL_CREDENTIALS,
   API_ENDPOINTS
@@ -64,7 +63,7 @@ test.describe('Oracle Cross-Schema Data Consistency', () => {
     // Additional Oracle-specific fields that might be present
     const oracleFields = ['cui', 'reg_com', 'adresa', 'telefon', 'email'];
     oracleFields.forEach(field => {
-      if (romfast.hasOwnProperty(field)) {
+      if (Object.prototype.hasOwnProperty.call(romfast, field)) {
         console.log(`ℹ️  Oracle field '${field}' present:`, romfast[field]);
       }
     });

reports-app/frontend/tests/integration/api-endpoints/health-check.spec.js

@@ -6,11 +6,9 @@
 
 import { test, expect } from '@playwright/test';
 import { API_ENDPOINTS } from '../../utils/real-auth.js';
-import { 
+import {
   setupConsoleCapture,
-  assertNoCriticalErrors,
   generateErrorReport,
-  PerformanceBaselines,
   assertPerformanceBaseline
 } from '../../utils/console-monitor.js';
 
@@ -400,7 +398,7 @@ test.describe('Backend Health Monitoring', () => {
     expect(degradationRatio).toBeLessThan(1.5);
     
     // All cycles should maintain good success rates
-    resourceMetrics.forEach((metric, index) => {
+    resourceMetrics.forEach((metric) => {
       expect(metric.successCount).toBeGreaterThan(2); // At least 3/4 operations successful
     });
     

reports-app/frontend/tests/integration/console-monitoring/error-tracking.spec.js

@@ -5,16 +5,15 @@
  */
 
 import { test, expect } from '@playwright/test';
-import { 
-  authenticateWithRealCredentials, 
+import {
+  authenticateWithRealCredentials,
   selectCompany,
   REAL_CREDENTIALS
 } from '../../utils/real-auth.js';
-import { 
+import {
   setupConsoleCapture,
   ErrorClassifier,
-  generateErrorReport,
-  assertNoCriticalErrors
+  generateErrorReport
 } from '../../utils/console-monitor.js';
 
 test.describe('Console Error Pattern Analysis', () => {
@@ -173,7 +172,7 @@ test.describe('Console Error Pattern Analysis', () => {
     // Analyze recurring patterns
     console.log('🔍 Error Frequency Analysis:');
     const recurringIssues = Object.entries(errorFrequencies)
-      .filter(([pattern, count]) => count > 2)
+      .filter(([_pattern, count]) => count > 2)
       .sort((a, b) => b[1] - a[1]);
     
     if (recurringIssues.length > 0) {

reports-app/frontend/tests/integration/console-monitoring/performance-monitoring.spec.js

@@ -24,8 +24,8 @@ test.describe('Performance Regression Testing', () => {
   });
 
   test.afterEach(async ({ page }) => {
-    const report = generateErrorReport(page, test.info().title);
-    
+    generateErrorReport(page, test.info().title);
+
     // Log performance metrics from the test
     if (page.performanceMetrics?.apiCalls?.length > 0) {
       const avgApiTime = page.performanceMetrics.apiCalls

reports-app/frontend/tests/integration/global-setup.js

@@ -3,10 +3,10 @@
  * Ensures SSH tunnel and backend services are running
  */
 
-import path from 'path';
-import { fileURLToPath } from 'url';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+// import path from 'path';
+// import { fileURLToPath } from 'url';
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname = path.dirname(__filename);
 
 export default async function globalSetup() {
   console.log('🔧 Setting up real API integration test environment...');

reports-app/frontend/tests/integration/real-data/romfast-reports.spec.js

@@ -5,18 +5,15 @@
  */
 
 import { test, expect } from '@playwright/test';
-import { 
-  authenticateWithRealCredentials, 
+import {
+  authenticateWithRealCredentials,
   selectCompany,
-  getRealCompanies,
-  REAL_CREDENTIALS,
-  API_ENDPOINTS
+  REAL_CREDENTIALS
 } from '../../utils/real-auth.js';
-import { 
+import {
   setupConsoleCapture,
   assertNoCriticalErrors,
   generateErrorReport,
-  PerformanceMonitor,
   PerformanceBaselines,
   assertPerformanceBaseline
 } from '../../utils/console-monitor.js';