Spaces:
Paused
Paused
| export default function SosPanel({ sos, onAck, onResolve, onSelect }) { | |
| const open = sos.filter((a) => a.state !== 'resolved'); | |
| return ( | |
| <section className="panel"> | |
| <h2>SOS alerts ({open.length})</h2> | |
| {sos.length === 0 && <p className="muted">No active alerts.</p>} | |
| {sos.map((a) => ( | |
| <div key={a.id} className={`sos-item ${a.state === 'ack' ? 'ack' : ''}`}> | |
| <div className="sos-top"> | |
| <span>🆘 {a.member_name}</span> | |
| <span style={{ fontSize: 10, color: '#7d8b9c' }}>{new Date(a.created_at).toLocaleTimeString()}</span> | |
| </div> | |
| <div className="sos-meta"> | |
| {a.lat != null ? `${a.lat.toFixed(5)}, ${a.lng.toFixed(5)}` : 'no position'} ·{' '} | |
| {a.state === 'ack' ? `ack by ${a.ack_by}` : 'unacknowledged'} | |
| </div> | |
| <div className="row"> | |
| {a.state === 'open' && <button className="btn-ack" onClick={() => onAck(a.id)}>Ack</button>} | |
| {a.state !== 'resolved' && <button className="btn-mut" onClick={() => onResolve(a.id)}>Resolve</button>} | |
| <button className="btn-mut" onClick={() => onSelect(a.member_id)}>Locate</button> | |
| </div> | |
| </div> | |
| ))} | |
| </section> | |
| ); | |
| } |