Automatic detect of clients

dashboard/src/clients.tsx

@@ -1,8 +1,62 @@
-import React from 'react';
-const Infoscreens: React.FC = () => (
-  <div>
-    <h2 className="text-xl font-bold mb-4">Infoscreens</h2>
-    <p>Willkommen im Infoscreen-Management Infoscreens.</p>
-  </div>
-);
-export default Infoscreens;
+import SetupModeButton from './components/SetupModeButton';
+import React, { useEffect, useState } from 'react';
+import { fetchClients, fetchClientsWithoutDescription, setClientDescription } from './apiClients';
+import type { Client } from './apiClients';
+
+// Dummy Modalbox (ersetzbar durch SyncFusion Dialog)
+function ModalBox({ open, onClose }) {
+  if (!open) return null;
+  return (
+    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.3)', zIndex: 1000 }}>
+      <div style={{ background: 'white', padding: 32, margin: '100px auto', maxWidth: 400, borderRadius: 8 }}>
+        <h3>Neue Clients ohne Beschreibung!</h3>
+        <p>Bitte ergänzen Sie die Beschreibung für neue Clients.</p>
+        <button onClick={onClose}>Speichern (Dummy)</button>
+      </div>
+    </div>
+  );
+}
+
+const Clients: React.FC = () => {
+  const [clients, setClients] = useState<Client[]>([]);
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    fetchClients().then(setClients);
+    fetchClientsWithoutDescription().then(list => {
+      if (list.length > 0) setShowModal(true);
+    });
+  }, []);
+
+  return (
+    <div>
+      <h2 className="text-xl font-bold mb-4">Client-Übersicht</h2>
+      <table className="min-w-full border">
+        <thead>
+          <tr>
+            <th>UUID</th>
+            <th>Hostname</th>
+            <th>Beschreibung</th>
+            <th>Gruppe</th>
+          </tr>
+        </thead>
+        <tbody>
+          {clients.map(c => (
+            <tr key={c.uuid}>
+              <td>{c.uuid}</td>
+              <td>{c.hostname}</td>
+              <td>{c.description}</td>
+              <td>{c.group_id}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="mb-4">
+        <SetupModeButton />
+      </div>
+      <ModalBox open={showModal} onClose={() => setShowModal(false)} />
+    </div>
+  );
+};
+
+export default Clients;