Dashboard-Zahlen (Kategorien, Read Later), Host/IP getrennte Spalten bei Diensten, Scanner-Uebersicht beim Massen-Scan

2026-07-20 17:51:58 +02:00
parent 0580d46000
commit 724f076c8c
3 changed files with 111 additions and 18 deletions
--- a/apps/frontend/src/routes/admin/DashboardPage.tsx
+++ b/apps/frontend/src/routes/admin/DashboardPage.tsx
@@ -3,6 +3,7 @@ import { useServices } from "../../hooks/useServices.js";
 import { useDevices } from "../../hooks/useDevices.js";
 import { useCategories } from "../../hooks/useCategories.js";
 import { useBookmarks } from "../../hooks/useBookmarks.js";
+import { useReadLater } from "../../hooks/useReadLater.js";
 import { AdminPageHeader } from "./AdminPageHeader.js";

 function StatCard({ label, value }: { label: string; value: number | string }) {
@@ -19,6 +20,7 @@ export function DashboardPage() {
  const { data: devices } = useDevices();
  const { data: categories } = useCategories();
  const { data: bookmarks } = useBookmarks();
+  const { data: readLaterItems } = useReadLater();

  const onlineDevices = devices?.filter((d) => d.online).length ?? 0;
  const favoriteServices = services?.filter((s) => s.favorite).length ?? 0;
@@ -46,11 +48,13 @@ export function DashboardPage() {
        }
      />

-      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8">
        <StatCard label="Geräte" value={devices?.length ?? 0} />
        <StatCard label="davon online" value={onlineDevices} />
        <StatCard label="Dienste" value={services?.length ?? 0} />
        <StatCard label="Lesezeichen" value={bookmarks?.length ?? 0} />
+        <StatCard label="Kategorien" value={categories?.length ?? 0} />
+        <StatCard label="Später lesen" value={readLaterItems?.length ?? 0} />
        <StatCard label="Favoriten (Dienste)" value={favoriteServices} />
        <StatCard label="Favoriten (Lesezeichen)" value={favoriteBookmarks} />
      </div>
@@ -88,15 +92,6 @@ export function DashboardPage() {
          </div>
        )}
      </div>
-
-      <div className="mt-8">
-        <h2 className="mb-3 text-sm font-semibold text-black/60 dark:text-white/60">
-          Kategorien
-        </h2>
-        <p className="text-sm text-black/40 dark:text-white/40">
-          {categories?.length ?? 0} Kategorie(n) angelegt.
-        </p>
-      </div>
    </div>
  );
 }
--- a/apps/frontend/src/routes/admin/ScannerPage.tsx
+++ b/apps/frontend/src/routes/admin/ScannerPage.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@launchpad/ui";
-import type { Device } from "@launchpad/shared";
+import type { Device, Service } from "@launchpad/shared";
 import { useDevices } from "../../hooks/useDevices.js";
 import { AdminPageHeader } from "./AdminPageHeader.js";

@@ -26,13 +26,76 @@ async function deleteDeviceRequest(id: string) {
  }
 }

+async function deleteServiceRequest(id: string) {
+  const res = await fetch(`/api/services/${id}`, { method: "DELETE" });
+  if (!res.ok && res.status !== 404) {
+    throw new Error(`Dienst konnte nicht gelöscht werden (HTTP ${res.status})`);
+  }
+}
+
 async function scanDeviceById(id: string) {
  const res = await fetch(`/api/scan/devices/${id}`, { method: "POST" });
  const body = await res.json();
  if (!res.ok) {
    throw new Error(body.detail ?? body.error ?? `Scan fehlgeschlagen (HTTP ${res.status})`);
  }
-  return body as { created: number; updated: number };
+  return body as { created: number; updated: number; staleServices: Service[] };
+}
+
+function StaleServicesReview({
+  staleServices,
+  onDone,
+}: {
+  staleServices: Service[];
+  onDone: () => void;
+}) {
+  const queryClient = useQueryClient();
+  const [handled, setHandled] = useState<Set<string>>(new Set());
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteServiceRequest(id),
+    onSuccess: (_data, id) => {
+      setHandled((prev) => new Set(prev).add(id));
+      queryClient.invalidateQueries({ queryKey: ["services"] });
+    },
+  });
+
+  const remaining = staleServices.filter((s) => !handled.has(s.id));
+  if (remaining.length === 0) return null;
+
+  return (
+    <div className="mt-3 rounded-xl border border-amber-500/30 bg-amber-500/5 p-3 text-xs">
+      <p className="mb-2 font-medium text-amber-700 dark:text-amber-400">
+        {remaining.length} Dienst(e) über alle gescannten Geräte hinweg nicht mehr gefunden (Port
+        nicht mehr offen):
+      </p>
+      <ul className="max-h-60 space-y-1 overflow-y-auto">
+        {remaining.map((s) => (
+          <li key={s.id} className="flex items-center justify-between gap-2">
+            <span className="text-black/70 dark:text-white/70">
+              {s.displayName} ({s.hostname}:{s.port})
+            </span>
+            <div className="flex gap-1">
+              <Button size="sm" variant="ghost" onClick={() => setHandled((prev) => new Set(prev).add(s.id))}>
+                Behalten
+              </Button>
+              <Button
+                size="sm"
+                variant="danger"
+                onClick={() => deleteMutation.mutate(s.id)}
+                disabled={deleteMutation.isPending}
+              >
+                Entfernen
+              </Button>
+            </div>
+          </li>
+        ))}
+      </ul>
+      <button onClick={onDone} className="mt-2 text-black/40 underline dark:text-white/40">
+        Hinweis schließen
+      </button>
+    </div>
+  );
 }

 function StaleDevicesReview({ staleDevices, onDone }: { staleDevices: Device[]; onDone: () => void }) {
@@ -90,6 +153,7 @@ export function ScannerPage() {
  const { data: devices } = useDevices();
  const [bulkStatus, setBulkStatus] = useState<string | null>(null);
  const [bulkRunning, setBulkRunning] = useState(false);
+  const [bulkStaleServices, setBulkStaleServices] = useState<Service[]>([]);
  const [staleDevices, setStaleDevices] = useState<Device[]>([]);

  const fritzboxMutation = useMutation({
@@ -105,21 +169,29 @@ export function ScannerPage() {
  async function scanAllDevices() {
    if (!devices || devices.length === 0) return;
    setBulkRunning(true);
+    setBulkStaleServices([]);
    let created = 0;
    let updated = 0;
+    const allStale: Service[] = [];

    for (const device of devices) {
      try {
        const result = await scanDeviceById(device.id);
        created += result.created;
        updated += result.updated;
+        allStale.push(...result.staleServices);
        setBulkStatus(`Scanne ${device.hostname} … (${created} neu, ${updated} aktualisiert bisher)`);
      } catch {
        // einzelnes fehlgeschlagenes Gerät soll den Rest nicht abbrechen
      }
    }

-    setBulkStatus(`Fertig: ${devices.length} Gerät(e) gescannt, ${created} neue Dienste, ${updated} aktualisiert.`);
+    setBulkStatus(
+      `Fertig: ${devices.length} Gerät(e) gescannt, ${created} neue Dienste, ${updated} aktualisiert${
+        allStale.length > 0 ? `, ${allStale.length} nicht mehr gefunden (siehe unten)` : ""
+      }.`
+    );
+    setBulkStaleServices(allStale);
    setBulkRunning(false);
    queryClient.invalidateQueries({ queryKey: ["devices"] });
    queryClient.invalidateQueries({ queryKey: ["services"] });
@@ -182,6 +254,12 @@ export function ScannerPage() {
          {bulkStatus ? (
            <p className="mt-2 text-sm text-black/50 dark:text-white/50">{bulkStatus}</p>
          ) : null}
+          {bulkStaleServices.length > 0 ? (
+            <StaleServicesReview
+              staleServices={bulkStaleServices}
+              onDone={() => setBulkStaleServices([])}
+            />
+          ) : null}
        </div>
      </div>
    </div>
--- a/apps/frontend/src/routes/admin/ServicesPage.tsx
+++ b/apps/frontend/src/routes/admin/ServicesPage.tsx
@@ -103,7 +103,7 @@ function CategorySelect({
  );
 }

-const EDIT_FORM_COLSPAN = 11;
+const EDIT_FORM_COLSPAN = 12;

 function EditForm({ service, onDone }: { service: Service; onDone: () => void }) {
  const queryClient = useQueryClient();
@@ -239,6 +239,7 @@ function EditForm({ service, onDone }: { service: Service; onDone: () => void })
 function ServiceRow({
  service,
  deviceMac,
+  deviceIp,
  draggable,
  onDragStart,
  onDragOver,
@@ -247,6 +248,7 @@ function ServiceRow({
 }: {
  service: Service;
  deviceMac: string | null;
+  deviceIp: string | null;
  draggable: boolean;
  onDragStart: (e: DragEvent<HTMLTableRowElement>) => void;
  onDragOver: (e: DragEvent<HTMLTableRowElement>) => void;
@@ -328,6 +330,9 @@ function ServiceRow({
      <td className="px-4 py-3 font-mono text-xs text-black/60 dark:text-white/60">
        {service.hostname}
      </td>
+      <td className="px-4 py-3 font-mono text-xs text-black/60 dark:text-white/60">
+        {deviceIp ?? "–"}
+      </td>
      <td className="px-4 py-3 text-black/60 dark:text-white/60">{service.category ?? "–"}</td>
      <td className="px-4 py-3 font-mono text-xs text-black/40 dark:text-white/40">
        {deviceMac ?? "–"}
@@ -371,7 +376,7 @@ function ServiceRow({
  );
 }

-type SortColumn = "displayName" | "hostname" | "category" | "alias" | "port" | "https" | null;
+type SortColumn = "displayName" | "hostname" | "ip" | "category" | "alias" | "port" | "https" | null;

 function SortableHeader({
  label,
@@ -417,6 +422,12 @@ export function ServicesPage() {
    return map;
  }, [devices]);

+  const ipByDeviceId = useMemo(() => {
+    const map: Record<string, string | null> = {};
+    for (const d of devices ?? []) map[d.id] = d.ip;
+    return map;
+  }, [devices]);
+
  const reorderMutation = useMutation({
    mutationFn: reorderServicesRequest,
    onSuccess: () => {
@@ -440,6 +451,13 @@ export function ServicesPage() {
        case "hostname":
          cmp = a.hostname.localeCompare(b.hostname);
          break;
+        case "ip":
+          cmp = (ipByDeviceId[a.deviceId] ?? "").localeCompare(
+            ipByDeviceId[b.deviceId] ?? "",
+            undefined,
+            { numeric: true }
+          );
+          break;
        case "category":
          cmp = (a.category ?? "").localeCompare(b.category ?? "");
          break;
@@ -456,7 +474,7 @@ export function ServicesPage() {
      return sortDirection === "asc" ? cmp : -cmp;
    });
    return sorted;
-  }, [baseList, sortColumn, sortDirection]);
+  }, [baseList, sortColumn, sortDirection, ipByDeviceId]);

  function handleHeaderClick(column: SortColumn) {
    if (sortColumn === column) {
@@ -526,14 +544,15 @@ export function ServicesPage() {
      ) : list.length > 0 ? (
        <div className="overflow-hidden rounded-2xl border border-black/10 dark:border-white/10">
          <div className="overflow-x-auto">
-            <table className="w-full min-w-[1020px] text-sm">
+            <table className="w-full min-w-[1140px] text-sm">
              <thead>
                <tr className="border-b border-black/10 bg-black/[0.02] text-left text-xs
                  uppercase tracking-wide text-black/40 dark:border-white/10 dark:bg-white/5 dark:text-white/40">
                  <th className="px-2 py-2" />
                  <th className="px-2 py-2" />
                  <SortableHeader label="Dienst" column="displayName" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
-                  <SortableHeader label="Host/IP" column="hostname" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
+                  <SortableHeader label="Host" column="hostname" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
+                  <SortableHeader label="IP" column="ip" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
                  <SortableHeader label="Kategorie" column="category" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
                  <th className="px-4 py-2 font-medium">MAC</th>
                  <SortableHeader label="Alias" column="alias" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
@@ -549,6 +568,7 @@ export function ServicesPage() {
                    key={service.id}
                    service={service}
                    deviceMac={macByDeviceId[service.deviceId] ?? null}
+                    deviceIp={ipByDeviceId[service.deviceId] ?? null}
                    draggable={dragEnabled}
                    isDragging={draggedId === service.id}
                    onDragStart={handleDragStart(service.id)}