< Summary - Frontend Coverage Report (WSL)

Information
Class: src/App.js
Assembly: Default
File(s): src/App.js
Line coverage
98%
Covered lines: 178
Uncovered lines: 2
Coverable lines: 180
Total lines: 180
Line coverage: 98.8%
Branch coverage
81%
Covered branches: 18
Total branches: 22
Branch coverage: 81.8%
Method coverage

Feature is only available for sponsors

Upgrade to PRO version

File(s)

src/App.js

#LineLine coverage
 11import React, { useState, useEffect } from 'react';
 12import { MaintenanceProvider, useMaintenance, useMaintenanceDispatch } from './context/MaintenanceContext.js';
 13import { useMachineStats } from './context/useHooks.js';
 14import WelcomeMessage, { Header } from './components/Header.js';
 15import { MachineList } from './components/MachineList.js';
 16import { MaintenanceForm } from './components/MaintenanceForm.js';
 17import { AlertsPanel } from './components/AlertsPanel.js';
 18import LoginPage from './components/LoginPage.js';
 19import { InventoryPanel } from './components/InventoryPanel.js';
 110import { MaintenanceHistory } from './components/MaintenanceHistory.js';
 111import { AnalyticsPanel } from './components/AnalyticsPanel.js';
 112
 1513function Dashboard() {
 1514    const { machines = [], alerts = [], maintenanceLogs = [] } = useMaintenance();
 1515    const dispatch = useMaintenanceDispatch();
 1516    const stats = useMachineStats();
 1517    const [isSyncing, setIsSyncing] = useState(false);
 1518
 1519    const syncWithBackend = async () => {
 520        setIsSyncing(true);
 521        try {
 522            const [mRes, iRes, aRes, maintRes] = await Promise.all([
 523                fetch('http://127.0.0.1:8080/api/machines'),
 524                fetch('http://127.0.0.1:8080/api/inventory'),
 525                fetch('http://127.0.0.1:8080/api/alerts'),
 526                fetch('http://127.0.0.1:8080/api/maintenance')
 527            ]);
 228
 229            const machinesData = await mRes.json();
 230            const inventoryData = await iRes.json();
 231            const alertsData = await aRes.json();
 232            const maintData = await maintRes.json();
 233
 534            dispatch({ type: 'SET_MACHINES', payload: machinesData || [] });
 535            dispatch({ type: 'SET_INVENTORY', payload: inventoryData || [] });
 536            dispatch({ type: 'SET_ALERTS', payload: alertsData || [] });
 537            dispatch({ type: 'SET_MAINTENANCE_LOGS', payload: maintData || [] });
 538
 539            console.log("System data synchronized with C backend.");
 540        } catch (error) {
 341            console.error("Backend connection failed:", error);
 542        } finally {
 543            setIsSyncing(false);
 544        }
 545    };
 1546
 1547    useEffect(() => {
 548        syncWithBackend();
 549        const interval = setInterval(syncWithBackend, 30000);
 550        return () => clearInterval(interval);
 1551    }, [dispatch]);
 1552
 1553    return (
 1554        <div style={{ padding: '20px', maxWidth: '1440px', margin: '0 auto', backgroundColor: '#f4f7f6', minHeight: '100
 1555            <Header title="Smart Maintenance Control" />
 1556            <WelcomeMessage />
 1557
 1558            {localStorage.getItem('user_role') === 'admin' && (
 359                <div style={{ display: 'flex', gap: '10px', marginBottom: '15px' }}>
 360                    <button
 361                        onClick={() => window.open('http://127.0.0.1:8080/api/reports/maintenance')}
 362                        style={{ backgroundColor: '#2c3e50', color: 'white', border: 'none', padding: '8px 12px', border
 363                    >
 364                        📊 MAINTENANCE (CSV)
 365                    </button>
 366                    <button
 367                        onClick={() => window.open('http://127.0.0.1:8080/api/reports/maintenance/xml')}
 368                        style={{ backgroundColor: '#34495e', color: 'white', border: 'none', padding: '8px 12px', border
 369                    >
 370                        📂 MAINTENANCE (XML)
 371                    </button>
 372                    <button
 373                        onClick={() => window.open('http://127.0.0.1:8080/api/reports/inventory')}
 374                        style={{ backgroundColor: '#2c3e50', color: 'white', border: 'none', padding: '8px 12px', border
 375                    >
 376                        📦 INVENTORY (CSV)
 377                    </button>
 378                    <button
 379                        onClick={() => window.open('http://127.0.0.1:8080/api/reports/inventory/xml')}
 380                        style={{ backgroundColor: '#34495e', color: 'white', border: 'none', padding: '8px 12px', border
 381                    >
 382                        📄 INVENTORY (XML)
 383                    </button>
 384                    <button
 385                        onClick={() => window.print()}
 386                        style={{ backgroundColor: '#e67e22', color: 'white', border: 'none', padding: '8px 12px', border
 387                    >
 388                        🖨️ PRINT PDF REPORT
 389                    </button>
 390                </div>
 1591            )}
 1592
 1593            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '15px', margin: '20px 0' }}>
 1594                <StatTile label="Total Assets" value={stats?.total || 0} color="#3498db" />
 1595                <StatTile label="Healthy" value={stats?.operational || 0} color="#2ecc71" />
 1596                <StatTile label="Critical Issues" value={alerts.filter(a => a.severity === 'CRITICAL').length} color="#e
 1597                <StatTile label="Recent Logs" value={maintenanceLogs.length} color="#9b59b6" />
 1598            </div>
 1599
 15100            <AnalyticsPanel />
 15101
 15102            <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr 340px', gap: '20px', marginTop: '20px' }}>
 15103                <aside style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
 15104                    <div style={{ backgroundColor: 'white', padding: '15px', borderRadius: '12px', boxShadow: '0 4px 6px
 15105                        <InventoryPanel />
 15106                    </div>
 15107                </aside>
 15108
 15109                <main style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
 15110                    <div style={{ backgroundColor: 'white', padding: '25px', borderRadius: '12px', boxShadow: '0 4px 20p
 15111                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBott
 15112                            <h2 style={{ margin: 0 }}>Asset Telemetry</h2>
 15113                            {isSyncing && <span style={{ fontSize: '0.8em', color: '#3498db', fontWeight: 'bold' }}>📡 S
 15114                        </div>
 15115                        <MachineList />
 15116                    </div>
 15117                    <MaintenanceHistory />
 15118                </main>
 15119
 15120                <aside style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
 15121                    {localStorage.getItem('user_role') !== 'operator' && <MaintenanceForm />}
 15122                    <div style={{ backgroundColor: 'white', padding: '15px', borderRadius: '12px', boxShadow: '0 4px 6px
 15123                        <AlertsPanel />
 15124                    </div>
 15125                </aside>
 15126            </div>
 15127        </div>
 15128    );
 15129}
 1130
 60131function StatTile({ label, value, color }) {
 60132    return (
 60133        <div style={{ backgroundColor: 'white', padding: '15px', borderRadius: '8px', borderTop: `4px solid ${color}`, b
 60134            <small style={{ color: '#7f8c8d', textTransform: 'uppercase', letterSpacing: '1px' }}>{label}</small>
 60135            <div style={{ fontSize: '1.5em', fontWeight: 'bold', color: '#2c3e50' }}>{value}</div>
 60136        </div>
 60137    );
 60138}
 1139
 12140function App() {
 12141    const [isAuthenticated, setIsAuthenticated] = useState(false);
 12142
 12143    useEffect(() => {
 6144        const token = localStorage.getItem('auth_token');
 6145        if (token) {
 5146            setIsAuthenticated(true);
 5147        }
 12148    }, []);
 12149
 12150    const handleLogin = () => {
 0151        setIsAuthenticated(true);
 0152    };
 12153
 12154    const handleLogout = () => {
 1155        localStorage.clear();
 1156        setIsAuthenticated(false);
 1157    };
 12158
 12159    return (
 12160        <MaintenanceProvider>
 12161            {!isAuthenticated ? (
 7162                <LoginPage onLogin={handleLogin} />
 5163            ) : (
 5164                <div className="App">
 5165                    <div style={{ textAlign: 'right', padding: '10px', backgroundColor: '#2c3e50' }}>
 5166                        <button
 5167                            onClick={handleLogout}
 5168                            style={{ backgroundColor: '#e74c3c', color: 'white', border: 'none', padding: '8px 15px', bo
 5169                        >
 5170                            SİSTEMDEN ÇIKIŞ YAP 🔓
 5171                        </button>
 5172                    </div>
 5173                    <Dashboard />
 5174                </div>
 12175            )}
 12176        </MaintenanceProvider>
 12177    );
 12178}
 1179
 1180export default App;
Generated by: ReportGenerator 5.5.1.0
2/18/2026 - 11:10:46 PM
GitHub | reportgenerator.io

Methods/Properties

Dashboard
syncWithBackend
onClick
onClick
onClick
onClick
onClick
StatTile
App
handleLogin
handleLogout