mohanki/MRF-AI-SOP-Monitoring-react-node-postgres
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center and focus the View Event Timeline button

Browse Source
This commit is contained in:
Mohan K
2026-07-28 14:40:03 +05:30
parent c77f63bb29
commit e995c0ec0b
1 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/ChangeoverDetail.jsx
+24 -11
View File
@@ -118,26 +118,39 @@ export default function ChangeoverDetail() {
return (
<div className="container animate-fade-in">
<div className="header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>
<Link to="/" style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem' }}>
<div className="header" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: '3rem' }}>
<Link to="/" style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1.5rem', alignSelf: 'flex-start' }}>
<ArrowLeft size={16} /> Back to Home
</Link>
<h1>Changeover Session: {id}</h1>
<p>Detailed Analytics and SOP Monitoring</p>
</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '1rem' }}>
<Activity size={32} color="var(--accent)" />
<Activity size={48} color="var(--accent)" style={{ marginBottom: '1rem' }} />
<h1 style={{ fontSize: '2.5rem', margin: '0 0 0.5rem 0' }}>Changeover Session: {id}</h1>
<p style={{ color: 'var(--text-secondary)', fontSize: '1.1rem', marginBottom: '2rem' }}>Detailed Analytics and SOP Monitoring</p>
<button
className="glass-panel"
style={{ padding: '0.75rem 1.5rem', cursor: 'pointer', background: 'var(--accent)', color: '#fff', border: 'none', fontWeight: 'bold' }}
style={{
padding: '1rem 2.5rem',
cursor: 'pointer',
background: 'var(--accent)',
color: '#fff',
border: 'none',
fontWeight: 'bold',
fontSize: '1.2rem',
borderRadius: '50px',
boxShadow: '0 8px 32px rgba(10, 185, 150, 0.3)',
transition: 'transform 0.2s, box-shadow 0.2s',
display: 'flex',
alignItems: 'center',
gap: '0.75rem'
}}
onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 40px rgba(10, 185, 150, 0.4)'; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(10, 185, 150, 0.3)'; }}
onClick={() => navigate(`/changeover/${id}/timeline`)}
>
<Calendar size={16} style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }}/>
<Calendar size={24} />
View Event Timeline
</button>
</div>
</div>
<div className="kpi-grid">
<div className="glass-panel kpi-card">