| | 1 | 1 | | import React from 'react'; |
| | 1 | 2 | | import { useMaintenance } from '../context/MaintenanceContext.js'; |
| | 1 | 3 | | import { Box, AlertTriangle, CheckCircle } from 'lucide-react'; |
| | 1 | 4 | | |
| | 1 | 5 | | export function InventoryPanel() { |
| | 17 | 6 | | const { inventory } = useMaintenance(); |
| | 17 | 7 | | |
| | 17 | 8 | | return ( |
| | 17 | 9 | | <div style={{ padding: '15px' }}> |
| | 17 | 10 | | <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}> |
| | 17 | 11 | | <Box size={20} color="#e74c3c" /> |
| | 17 | 12 | | <h3 style={{ margin: 0 }}>Parts & Inventory</h3> |
| | 17 | 13 | | </div> |
| | 17 | 14 | | |
| | 17 | 15 | | <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}> |
| | 17 | 16 | | {inventory.map((item) => { |
| | 1 | 17 | | const isCritical = item.quantity <= item.min_stock; |
| | 1 | 18 | | return ( |
| | 1 | 19 | | <div key={item.id} style={{ |
| | 1 | 20 | | padding: '12px', |
| | 1 | 21 | | borderRadius: '8px', |
| | 1 | 22 | | backgroundColor: '#f8f9fa', |
| | 1 | 23 | | border: `1px solid ${isCritical ? '#fab1a0' : '#e1e4e8'}`, |
| | 1 | 24 | | display: 'flex', |
| | 1 | 25 | | justifyContent: 'space-between', |
| | 1 | 26 | | alignItems: 'center' |
| | 1 | 27 | | }}> |
| | 1 | 28 | | <div> |
| | 1 | 29 | | <div style={{ fontWeight: 'bold', fontSize: '0.9rem' }}>{item.part_name}</div> |
| | 1 | 30 | | <div style={{ fontSize: '0.7rem', color: '#7f8c8d' }}>SKU: {item.sku}</div> |
| | 1 | 31 | | </div> |
| | 1 | 32 | | |
| | 1 | 33 | | <div style={{ textAlign: 'right' }}> |
| | 1 | 34 | | <div style={{ |
| | 1 | 35 | | display: 'flex', |
| | 1 | 36 | | alignItems: 'center', |
| | 1 | 37 | | gap: '5px', |
| | 1 | 38 | | color: isCritical ? '#e17055' : '#27ae60', |
| | 1 | 39 | | fontWeight: 'bold', |
| | 1 | 40 | | fontSize: '1rem' |
| | 1 | 41 | | }}> |
| | 1 | 42 | | {item.quantity} |
| | 1 | 43 | | {isCritical ? <AlertTriangle size={14} /> : <CheckCircle size={14} />} |
| | 1 | 44 | | </div> |
| | 1 | 45 | | <div style={{ fontSize: '0.7rem', color: '#95a5a6' }}>Min: {item.min_stock}</div> |
| | 1 | 46 | | </div> |
| | 1 | 47 | | </div> |
| | 1 | 48 | | ); |
| | 17 | 49 | | })} |
| | 17 | 50 | | </div> |
| | 17 | 51 | | </div> |
| | 17 | 52 | | ); |
| | 17 | 53 | | } |