| | 1 | 1 | | import React, { useState, useRef } from 'react'; |
| | 1 | 2 | | import { useMaintenanceDispatch } from '../context/MaintenanceContext.js'; |
| | 1 | 3 | | |
| | 1 | 4 | | export function MaintenanceForm() { |
| | 19 | 5 | | const [name, setName] = useState(''); |
| | 19 | 6 | | const [status, setStatus] = useState('Operational'); |
| | 19 | 7 | | |
| | 19 | 8 | | // Point 3: useRef - DOM focus |
| | 19 | 9 | | const inputRef = useRef(null); |
| | 19 | 10 | | |
| | 19 | 11 | | const dispatch = useMaintenanceDispatch(); |
| | 19 | 12 | | |
| | 19 | 13 | | const handleSubmit = (e) => { |
| | 2 | 14 | | e.preventDefault(); |
| | 2 | 15 | | if (!name) { |
| | 1 | 16 | | // Point 3: Direct DOM manipulation for UX |
| | 1 | 17 | | inputRef.current.focus(); |
| | 1 | 18 | | return; |
| | 1 | 19 | | } |
| | 1 | 20 | | |
| | 1 | 21 | | dispatch({ |
| | 1 | 22 | | type: 'ADD_MACHINE', |
| | 1 | 23 | | payload: { id: Date.now(), name, status } |
| | 1 | 24 | | }); |
| | 1 | 25 | | |
| | 1 | 26 | | setName(''); |
| | 1 | 27 | | // Auto focus back to input for better workflow |
| | 1 | 28 | | inputRef.current.focus(); |
| | 2 | 29 | | }; |
| | 19 | 30 | | |
| | 19 | 31 | | return ( |
| | 19 | 32 | | <div style={{ backgroundColor: '#fff', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0. |
| | 19 | 33 | | <h3 style={{ marginTop: 0 }}>Equipment Onboarding</h3> |
| | 19 | 34 | | <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}> |
| | 19 | 35 | | <div> |
| | 19 | 36 | | <label style={{ display: 'block', marginBottom: '5px', fontSize: '0.9em' }}>Machine Designation</lab |
| | 19 | 37 | | <input |
| | 19 | 38 | | ref={inputRef} // Point 3: Hooking the DOM |
| | 19 | 39 | | type="text" |
| | 19 | 40 | | placeholder="e.g. Laser Cutter X-1" |
| | 19 | 41 | | value={name} |
| | 19 | 42 | | onChange={(e) => setName(e.target.value)} |
| | 19 | 43 | | style={{ |
| | 19 | 44 | | width: '100%', |
| | 19 | 45 | | padding: '10px', |
| | 19 | 46 | | borderRadius: '4px', |
| | 19 | 47 | | border: '1px solid #ddd', |
| | 19 | 48 | | boxSizing: 'border-box' |
| | 19 | 49 | | }} |
| | 19 | 50 | | /> |
| | 19 | 51 | | </div> |
| | 19 | 52 | | |
| | 19 | 53 | | <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}> |
| | 19 | 54 | | <div> |
| | 19 | 55 | | <label style={{ display: 'block', marginBottom: '5px', fontSize: '0.9em' }}>Initial Status</labe |
| | 19 | 56 | | <select |
| | 19 | 57 | | value={status} |
| | 19 | 58 | | onChange={(e) => setStatus(e.target.value)} |
| | 19 | 59 | | style={{ width: '100%', padding: '10px', borderRadius: '4px', border: '1px solid #ddd' }} |
| | 19 | 60 | | > |
| | 19 | 61 | | <option value="Operational">Operational</option> |
| | 19 | 62 | | <option value="Warning">Warning</option> |
| | 19 | 63 | | <option value="Maintenance">Maintenance</option> |
| | 19 | 64 | | </select> |
| | 19 | 65 | | </div> |
| | 19 | 66 | | <button type="submit" style={{ |
| | 19 | 67 | | alignSelf: 'end', |
| | 19 | 68 | | padding: '10px', |
| | 19 | 69 | | backgroundColor: '#27ae60', |
| | 19 | 70 | | color: 'white', |
| | 19 | 71 | | border: 'none', |
| | 19 | 72 | | borderRadius: '4px', |
| | 19 | 73 | | cursor: 'pointer', |
| | 19 | 74 | | fontWeight: 'bold' |
| | 19 | 75 | | }}>Register Asset</button> |
| | 19 | 76 | | </div> |
| | 19 | 77 | | </form> |
| | 19 | 78 | | </div> |
| | 19 | 79 | | ); |
| | 19 | 80 | | } |