< Summary - Frontend Coverage Report (Windows)

Information
Class: src\components\StatusCard.js
Assembly: Default
File(s): src\components\StatusCard.js
Line coverage
67%
Covered lines: 39
Uncovered lines: 19
Coverable lines: 58
Total lines: 58
Line coverage: 67.2%
Branch coverage
25%
Covered branches: 1
Total branches: 4
Branch coverage: 25%
Method coverage

Feature is only available for sponsors

Upgrade to PRO version

File(s)

src\components\StatusCard.js

#LineLine coverage
 11import React from 'react';
 12import { Package, AlertTriangle, CheckCircle } from 'lucide-react';
 13
 14export function StatusCard({ label, value, isLowStock, onRestock, children }) {
 25    const statusColor = isLowStock ? '#e74c3c' : '#2ecc71';
 26
 27    return (
 28        <div className="status-card" style={{
 29            border: `none`,
 210            borderLeft: `6px solid ${statusColor}`,
 211            padding: '20px',
 212            marginBottom: '20px',
 213            borderRadius: '12px',
 214            backgroundColor: 'white',
 215            boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)'
 216        }}>
 217            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '15px' }}>
 218                <Package size={20} color="#34495e" />
 219                <h3 style={{ margin: 0, fontSize: '1.1rem', color: '#2c3e50' }}>{label}</h3>
 220            </div>
 221
 222            <div style={{ fontSize: '1.8rem', fontWeight: '800', margin: '10px 0' }}>{value}</div>
 223
 224            {isLowStock ? (
 025                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#e74c3c', fontSize: '0.85rem', 
 026                    <AlertTriangle size={16} /> LOW STOCK WARNING
 027                </div>
 228            ) : (
 229                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#2ecc71', fontSize: '0.85rem', 
 230                    <CheckCircle size={16} /> LEVELS OPTIMAL
 231                </div>
 232            )}
 233
 234            {isLowStock && (
 035                <button
 036                    onClick={onRestock}
 037                    style={{
 038                        width: '100%',
 039                        marginTop: '15px',
 040                        backgroundColor: '#3498db',
 041                        color: 'white',
 042                        border: 'none',
 043                        padding: '12px',
 044                        borderRadius: '8px',
 045                        cursor: 'pointer',
 046                        fontWeight: 'bold'
 047                    }}
 048                >
 049                    Quick Restock
 050                </button>
 251            )}
 252
 253            <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #f0f0f0', color: '#7f8c8d', fontS
 254                {children}
 255            </div>
 256        </div>
 257    );
 258}
Generated by: ReportGenerator 5.3.8.0
2/20/2026 - 1:34:04 AM
GitHub | reportgenerator.io

Methods/Properties

StatusCard