update frontend

frontend/src/components/PotentialDeviceCard.tsx

@@ -0,0 +1,63 @@
+import type { PotentialDevice } from "../types";
+
+interface PotentialDeviceCardProps {
+  deviceId: string;
+  group: PotentialDevice[];
+  isExpanded: boolean;
+  onToggleExpand: (deviceId: string) => void;
+}
+
+export const PotentialDeviceCard = ({
+  deviceId,
+  group,
+  isExpanded,
+  onToggleExpand,
+}: PotentialDeviceCardProps) => {
+  const latest = group.reduce((prev, current) =>
+    prev.last_seen > current.last_seen ? prev : current
+  );
+
+  return (
+    <div key={deviceId} className="card">
+      <div className="card-header">
+        <div>
+          <h3 className="device-name">
+            <span className="emoji">❓</span> {latest.class}
+          </h3>
+          <div className="device-meta">
+            <span className="badge badge-protocol">{latest.protocol}</span>{" "}
+            {latest.model}
+          </div>
+        </div>
+      </div>
+      <div className="card-content">
+        <div className="device-meta">ID: {deviceId}</div>
+        <div className="device-meta">
+          Last seen: {new Date(latest.last_seen * 1000).toLocaleString()}
+        </div>
+        <div className="device-meta">Events: {group.length}</div>
+
+        {isExpanded && (
+          <div className="events-list">
+            <h4>History</h4>
+            {group
+              .sort((a, b) => b.last_seen - a.last_seen)
+              .map((event, idx) => (
+                <div key={idx} className="event-item">
+                  <div className="event-time">
+                    {new Date(event.last_seen * 1000).toLocaleTimeString()}
+                  </div>
+                  <div className="event-data">{event.last_data}</div>
+                </div>
+              ))}
+          </div>
+        )}
+      </div>
+      <div className="actions">
+        <button onClick={() => onToggleExpand(deviceId)}>
+          {isExpanded ? "Collapse" : "Expand"}
+        </button>
+      </div>
+    </div>
+  );
+};