| | 1 | 1 | | import React from 'react'; |
| | 1 | 2 | | import { Package, AlertTriangle, CheckCircle } from 'lucide-react'; |
| | 1 | 3 | | |
| | 1 | 4 | | export function StatusCard({ label, value, isLowStock, onRestock, children }) { |
| | 2 | 5 | | const statusColor = isLowStock ? '#e74c3c' : '#2ecc71'; |
| | 2 | 6 | | |
| | 2 | 7 | | return ( |
| | 2 | 8 | | <div className="status-card" style={{ |
| | 2 | 9 | | border: `none`, |
| | 2 | 10 | | borderLeft: `6px solid ${statusColor}`, |
| | 2 | 11 | | padding: '20px', |
| | 2 | 12 | | marginBottom: '20px', |
| | 2 | 13 | | borderRadius: '12px', |
| | 2 | 14 | | backgroundColor: 'white', |
| | 2 | 15 | | boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)' |
| | 2 | 16 | | }}> |
| | 2 | 17 | | <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '15px' }}> |
| | 2 | 18 | | <Package size={20} color="#34495e" /> |
| | 2 | 19 | | <h3 style={{ margin: 0, fontSize: '1.1rem', color: '#2c3e50' }}>{label}</h3> |
| | 2 | 20 | | </div> |
| | 2 | 21 | | |
| | 2 | 22 | | <div style={{ fontSize: '1.8rem', fontWeight: '800', margin: '10px 0' }}>{value}</div> |
| | 2 | 23 | | |
| | 2 | 24 | | {isLowStock ? ( |
| | 0 | 25 | | <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#e74c3c', fontSize: '0.85rem', |
| | 0 | 26 | | <AlertTriangle size={16} /> LOW STOCK WARNING |
| | 0 | 27 | | </div> |
| | 2 | 28 | | ) : ( |
| | 2 | 29 | | <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#2ecc71', fontSize: '0.85rem', |
| | 2 | 30 | | <CheckCircle size={16} /> LEVELS OPTIMAL |
| | 2 | 31 | | </div> |
| | 2 | 32 | | )} |
| | 2 | 33 | | |
| | 2 | 34 | | {isLowStock && ( |
| | 0 | 35 | | <button |
| | 0 | 36 | | onClick={onRestock} |
| | 0 | 37 | | style={{ |
| | 0 | 38 | | width: '100%', |
| | 0 | 39 | | marginTop: '15px', |
| | 0 | 40 | | backgroundColor: '#3498db', |
| | 0 | 41 | | color: 'white', |
| | 0 | 42 | | border: 'none', |
| | 0 | 43 | | padding: '12px', |
| | 0 | 44 | | borderRadius: '8px', |
| | 0 | 45 | | cursor: 'pointer', |
| | 0 | 46 | | fontWeight: 'bold' |
| | 0 | 47 | | }} |
| | 0 | 48 | | > |
| | 0 | 49 | | Quick Restock |
| | 0 | 50 | | </button> |
| | 2 | 51 | | )} |
| | 2 | 52 | | |
| | 2 | 53 | | <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #f0f0f0', color: '#7f8c8d', fontS |
| | 2 | 54 | | {children} |
| | 2 | 55 | | </div> |
| | 2 | 56 | | </div> |
| | 2 | 57 | | ); |
| | 2 | 58 | | } |