sos panel

web/src/components/SosPanel.jsx

@@ -1,23 +1,23 @@
-export default function SosPanel({ sos, openCount, onAck, onResolve }) {
+export default function SosPanel({ sos, onAck, onResolve, onSelect }) {
+  const open = sos.filter((a) => a.state !== 'resolved');
   return (
     <section className="panel">
-      <h2>SOS alerts {openCount > 0 && <span className="badge">{openCount}</span>}</h2>
-      {sos.length === 0 && <p className="muted small">No alerts.</p>}
+      <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}`}>
-          <div>
-            <b>{a.member_name}</b>{' '}
-            <span className="muted small">{new Date(a.created_at).toLocaleTimeString()}</span>
-            <div className="muted small">
-              {a.lat != null ? `${a.lat.toFixed(5)}, ${a.lng.toFixed(5)}` : 'no fix'}
-              {a.ack_by ? ` · ack: ${a.ack_by}` : ''}
-            </div>
+        <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="small-btn" onClick={() => onAck(a.id)}>Ack</button>}
-            {a.state !== 'resolved' && (
-              <button className="secondary small-btn" onClick={() => onResolve(a.id)}>Resolve</button>
-            )}
+            {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>
       ))}