| | 1 | 1 | | import React, { useState, useEffect, useRef } from 'react'; |
| | 1 | 2 | | import { Clock, User } from 'lucide-react'; |
| | 1 | 3 | | |
| | 1 | 4 | | const WelcomeMessage = () => { |
| | 18 | 5 | | const [time, setTime] = useState(new Date().toLocaleTimeString()); |
| | 18 | 6 | | |
| | 18 | 7 | | useEffect(() => { |
| | 7 | 8 | | const timer = setInterval(() => setTime(new Date().toLocaleTimeString()), 1000); |
| | 7 | 9 | | return () => clearInterval(timer); |
| | 18 | 10 | | }, []); |
| | 18 | 11 | | |
| | 18 | 12 | | return ( |
| | 18 | 13 | | <div style={{ padding: '10px 0', borderBottom: '1px solid #eee', marginBottom: '20px', display: 'flex', justifyC |
| | 18 | 14 | | <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#666' }}> |
| | 18 | 15 | | <Clock size={16} /> |
| | 18 | 16 | | <span>{time}</span> |
| | 18 | 17 | | </div> |
| | 18 | 18 | | <div style={{ color: '#2ecc71', fontWeight: 'bold', fontSize: '0.9rem' }}> |
| | 18 | 19 | | ● SYSTEM OPERATIONAL |
| | 18 | 20 | | </div> |
| | 18 | 21 | | </div> |
| | 18 | 22 | | ); |
| | 18 | 23 | | }; |
| | 1 | 24 | | |
| | 1 | 25 | | export const Header = ({ title }) => { |
| | 17 | 26 | | const username = localStorage.getItem('username') || 'Unknown User'; |
| | 17 | 27 | | const role = localStorage.getItem('user_role') || 'operator'; |
| | 17 | 28 | | |
| | 17 | 29 | | return ( |
| | 17 | 30 | | <header style={{ |
| | 17 | 31 | | display: 'flex', |
| | 17 | 32 | | justifyContent: 'space-between', |
| | 17 | 33 | | alignItems: 'center', |
| | 17 | 34 | | padding: '20px 0', |
| | 17 | 35 | | borderBottom: '2px solid #2c3e50', |
| | 17 | 36 | | marginBottom: '10px' |
| | 17 | 37 | | }}> |
| | 17 | 38 | | <div> |
| | 17 | 39 | | <h1 style={{ margin: 0, color: '#2c3e50', fontSize: '2rem', fontWeight: 800 }}>{title}</h1> |
| | 17 | 40 | | <div style={{ color: '#7f8c8d', fontSize: '0.9rem', marginTop: '4px' }}> |
| | 17 | 41 | | INDUSTRIAL INTELLIGENCE GATEWAY V2.0 |
| | 17 | 42 | | </div> |
| | 17 | 43 | | </div> |
| | 17 | 44 | | |
| | 17 | 45 | | <div style={{ |
| | 17 | 46 | | display: 'flex', |
| | 17 | 47 | | alignItems: 'center', |
| | 17 | 48 | | gap: '15px', |
| | 17 | 49 | | backgroundColor: '#f8f9fa', |
| | 17 | 50 | | padding: '10px 20px', |
| | 17 | 51 | | borderRadius: '12px', |
| | 17 | 52 | | border: '1px solid #e1e4e8' |
| | 17 | 53 | | }}> |
| | 17 | 54 | | <div style={{ textAlign: 'right' }}> |
| | 17 | 55 | | <div style={{ fontWeight: 'bold', color: '#2c3e50', fontSize: '1rem' }}>{username}</div> |
| | 17 | 56 | | <div style={{ |
| | 17 | 57 | | fontSize: '0.7rem', |
| | 17 | 58 | | color: '#3498db', |
| | 17 | 59 | | fontWeight: 'bold', |
| | 17 | 60 | | textTransform: 'uppercase', |
| | 17 | 61 | | letterSpacing: '1px' |
| | 17 | 62 | | }}> |
| | 17 | 63 | | {role.toUpperCase()} LEVEL ACCESS |
| | 17 | 64 | | </div> |
| | 17 | 65 | | </div> |
| | 17 | 66 | | <div style={{ |
| | 17 | 67 | | width: '40px', |
| | 17 | 68 | | height: '40px', |
| | 17 | 69 | | backgroundColor: '#2c3e50', |
| | 17 | 70 | | borderRadius: '50%', |
| | 17 | 71 | | display: 'flex', |
| | 17 | 72 | | alignItems: 'center', |
| | 17 | 73 | | justifyContent: 'center', |
| | 17 | 74 | | color: 'white' |
| | 17 | 75 | | }}> |
| | 17 | 76 | | <User size={20} /> |
| | 17 | 77 | | </div> |
| | 17 | 78 | | </div> |
| | 17 | 79 | | </header> |
| | 17 | 80 | | ); |
| | 17 | 81 | | }; |
| | 1 | 82 | | |
| | 1 | 83 | | export default WelcomeMessage; |