SOS alert queue with ack/resolve

web/src/components/SosPanel.jsx

@@ -0,0 +1,26 @@
+export default function SosPanel({ sos, openCount, onAck, onResolve }) {
+  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>}
+      {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>
+          <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>
+            )}
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}