57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import { useInventoryStore } from '../store/inventoryStore';
|
|
import { formatItemName } from '../utils/itemUtils';
|
|
import ItemIcon from './ItemIcon';
|
|
import './AlertsPanel.css';
|
|
|
|
function AlertsPanel() {
|
|
const alerts = useInventoryStore((state) => state.alerts);
|
|
|
|
return (
|
|
<div className="alerts-panel">
|
|
<div className="alerts-header">
|
|
<h2>🔔 Low-Stock Alerts</h2>
|
|
<span className="alert-count">
|
|
{alerts.length} alert{alerts.length !== 1 ? 's' : ''}
|
|
</span>
|
|
</div>
|
|
|
|
{alerts.length > 0 ? (
|
|
<div className="alert-list">
|
|
{alerts.map((alert, idx) => (
|
|
<div key={idx} className={`alert-card ${alert.triggered ? 'triggered' : 'ok'}`}>
|
|
<div className="alert-icon">
|
|
{alert.triggered ? '🔴' : '🟢'}
|
|
</div>
|
|
<div className="alert-info">
|
|
<div className="alert-item-row">
|
|
<ItemIcon itemName={alert.item} size={20} />
|
|
<span className="alert-item-name">{formatItemName(alert.item)}</span>
|
|
</div>
|
|
<div className="alert-details">
|
|
<span className="alert-stock">
|
|
Stock: <strong>{alert.current ?? '?'}</strong>
|
|
</span>
|
|
<span className="alert-threshold">
|
|
Min: <strong>{alert.threshold || alert.min || '?'}</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className={`alert-badge ${alert.triggered ? 'low' : 'ok'}`}>
|
|
{alert.triggered ? 'LOW' : 'OK'}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="no-alerts">
|
|
<span className="no-alerts-icon">✅</span>
|
|
<span>No alerts configured or all stock levels are OK</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AlertsPanel;
|