| | 1 | 1 | | import React from 'react'; |
| | 1 | 2 | | import { useMaintenance } from '../context/MaintenanceContext.js'; |
| | 1 | 3 | | import { History, User, Calendar, ClipboardList } from 'lucide-react'; |
| | 1 | 4 | | |
| | 1 | 5 | | export function MaintenanceHistory() { |
| | 17 | 6 | | const { maintenanceLogs } = useMaintenance(); |
| | 17 | 7 | | |
| | 17 | 8 | | return ( |
| | 17 | 9 | | <div style={{ padding: '15px', backgroundColor: 'white', borderRadius: '12px', marginTop: '20px' }}> |
| | 17 | 10 | | <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}> |
| | 17 | 11 | | <History size={20} color="#3498db" /> |
| | 17 | 12 | | <h3 style={{ margin: 0 }}>Maintenance History</h3> |
| | 17 | 13 | | </div> |
| | 17 | 14 | | |
| | 17 | 15 | | <div style={{ maxHeight: '300px', overflowY: 'auto' }}> |
| | 17 | 16 | | {(maintenanceLogs && Array.isArray(maintenanceLogs) && maintenanceLogs.length > 0) ? ( |
| | 1 | 17 | | maintenanceLogs.map((log) => ( |
| | 1 | 18 | | <div key={log.id} style={{ |
| | 1 | 19 | | padding: '12px', |
| | 1 | 20 | | borderBottom: '1px solid #eee', |
| | 1 | 21 | | display: 'grid', |
| | 1 | 22 | | gridTemplateColumns: '120px 1fr', |
| | 1 | 23 | | gap: '15px' |
| | 1 | 24 | | }}> |
| | 1 | 25 | | <div style={{ fontSize: '0.8rem', color: '#7f8c8d' }}> |
| | 1 | 26 | | <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}> |
| | 1 | 27 | | <Calendar size={12} /> {log.date} |
| | 1 | 28 | | </div> |
| | 1 | 29 | | <div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginTop: '4px' }}> |
| | 1 | 30 | | <User size={12} /> {log.performer} |
| | 1 | 31 | | </div> |
| | 1 | 32 | | </div> |
| | 1 | 33 | | <div> |
| | 1 | 34 | | <div style={{ fontWeight: '600', color: '#2c3e50', fontSize: '0.9rem' }}> |
| | 1 | 35 | | {log.description} |
| | 1 | 36 | | </div> |
| | 1 | 37 | | <div style={{ fontSize: '0.75rem', color: '#95a5a6', marginTop: '5px' }}> |
| | 1 | 38 | | <ClipboardList size={12} style={{ verticalAlign: 'middle', marginRight: '4px' }} /> |
| | 1 | 39 | | Machine ID: {log.machine_id} |
| | 1 | 40 | | </div> |
| | 1 | 41 | | </div> |
| | 1 | 42 | | </div> |
| | 1 | 43 | | )) |
| | 16 | 44 | | ) : ( |
| | 16 | 45 | | <p style={{ textAlign: 'center', color: '#95a5a6', padding: '20px' }}>No history records found.</p> |
| | 17 | 46 | | )} |
| | 17 | 47 | | </div> |
| | 17 | 48 | | </div> |
| | 17 | 49 | | ); |
| | 17 | 50 | | } |