shimwrappercheck 0.3.0 → 0.4.0

package/dashboard/components/Header.tsx

@@ -1,29 +1,65 @@
 /**
- * Header: shimwrappercheck centered at top; nav left.
+ * Header: "shimwrappercheck" zentriert; rechts Schalter [myshim | Settings].
+ * myshim = Ansicht My Shim + Check Library, Settings = Templates & Information.
  * Location: /components/Header.tsx
  */
 "use client";
 
-import Link from "next/link";
+import { useTranslations, useLocale } from "next-intl";
+import { Link, usePathname } from "@/i18n/navigation";
+import { IconSettings } from "@/components/Icons";
 
 export default function Header() {
+  const t = useTranslations("common");
+  const tHeader = useTranslations("header");
+  const pathname = usePathname();
+  const isSettings = pathname === "/settings";
+
   return (
-    <header className="h-16 border-b border-neutral-700 flex items-center justify-between px-6 bg-[#0f0f0f]">
-      <nav className="flex gap-2">
-        <Link href="/" className="text-sm text-neutral-300 hover:text-white">
-          Dashboard
-        </Link>
-        <Link href="/settings" className="text-sm text-neutral-300 hover:text-white">
-          Einstellungen
+    <header className="h-14 border-b border-white/20 flex items-center justify-between px-6 bg-[#0f0f0f] shrink-0">
+      <div className="w-24 flex items-center gap-2" aria-hidden>
+        <LocaleSwitcher />
+      </div>
+      <div className="flex-1 flex justify-center pointer-events-none">
+        <span className="text-xl font-semibold text-white">{t("appName")}</span>
+      </div>
+      <div className="flex items-center gap-0 rounded overflow-hidden border border-white/80">
+        <Link
+          href="/"
+          className={`px-4 py-2 text-sm font-medium transition-colors ${
+            !isSettings ? "bg-white text-black" : "text-white hover:bg-white/10"
+          }`}
+        >
+          {t("myshim")}
         </Link>
-        <Link href="/config" className="text-sm text-neutral-300 hover:text-white">
-          Config
+        <Link
+          href="/settings"
+          className={`px-4 py-2 text-sm font-medium transition-colors flex items-center gap-1.5 ${
+            isSettings ? "bg-white text-black" : "text-white hover:bg-white/10"
+          }`}
+          aria-label={tHeader("settingsAria")}
+        >
+          <IconSettings />
+          {t("settings")}
         </Link>
-        <Link href="/agents" className="text-sm text-neutral-300 hover:text-white">
-          AGENTS.md
-        </Link>
-      </nav>
-      <div className="absolute left-1/2 -translate-x-1/2 text-xl font-semibold text-white">shimwrappercheck</div>
+      </div>
     </header>
   );
 }
+
+function LocaleSwitcher() {
+  const pathname = usePathname();
+  const locale = useLocale();
+  const activeClass = "px-2 py-1 bg-white text-black font-medium";
+  const inactiveClass = "px-2 py-1 bg-white/10 hover:bg-white/20 text-white";
+  return (
+    <div className="flex rounded overflow-hidden border border-white/50 text-xs">
+      <Link href={pathname} locale="de" className={locale === "de" ? activeClass : inactiveClass}>
+        DE
+      </Link>
+      <Link href={pathname} locale="en" className={locale === "en" ? activeClass : inactiveClass}>
+        EN
+      </Link>
+    </div>
+  );
+}

package/dashboard/components/Icons.tsx

@@ -0,0 +1,20 @@
+/**
+ * Shared SVG icons used across the dashboard. Ensures consistent look (solid where needed).
+ * Location: /components/Icons.tsx
+ */
+
+type IconProps = { className?: string };
+
+/** Settings (cog) – solid fill so it renders clearly at all sizes. */
+export function IconSettings({ className = "w-4 h-4" }: IconProps) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden>
+      <path
+        fillRule="evenodd"
+        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+        clipRule="evenodd"
+      />
+      <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  );
+}

package/dashboard/components/LayoutContent.tsx

@@ -0,0 +1,24 @@
+/**
+ * Client wrapper: zeigt Sidebar nur auf /, auf /settings nur Main (volle Breite).
+ * Location: /components/LayoutContent.tsx
+ */
+"use client";
+
+import { usePathname } from "@/i18n/navigation";
+import SidebarMyShim from "./SidebarMyShim";
+
+export default function LayoutContent({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const showSidebar = pathname !== "/settings";
+
+  return (
+    <div className="flex flex-1 min-h-0 w-full">
+      {showSidebar && (
+        <aside className="flex-1 min-h-0 border-r border-white/20 flex flex-col overflow-hidden min-w-0">
+          <SidebarMyShim />
+        </aside>
+      )}
+      <main className="flex-1 min-h-0 min-w-0 relative bg-[#0f0f0f] p-6 overflow-auto">{children}</main>
+    </div>
+  );
+}

package/dashboard/components/MyShimChecks.tsx

@@ -0,0 +1,257 @@
+/**
+ * My Shim – My Checks: Titel + Zeitstempel, Suchfeld, Karten mit Tags (frontend/backend) und Info-/Settings-Icon.
+ * Drop-Zone: Check von Check Library hierher ziehen = aktivieren.
+ * Location: /components/MyShimChecks.tsx
+ */
+"use client";
+
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import type { SettingsData, CheckToggles } from "@/lib/presets";
+import { CHECK_DEFINITIONS } from "@/lib/checks";
+import type { CheckDef } from "@/lib/checks";
+import CheckCard, { type ToolStatus } from "./CheckCard";
+
+function formatTimestamp(d: Date): string {
+  const day = String(d.getDate()).padStart(2, "0");
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const year = d.getFullYear();
+  const h = String(d.getHours()).padStart(2, "0");
+  const min = String(d.getMinutes()).padStart(2, "0");
+  const sec = String(d.getSeconds()).padStart(2, "0");
+  return `${day}.${month}.${year} - ${h}:${min}:${sec}`;
+}
+
+export default function MyShimChecks({
+  settings,
+  onSave,
+  lastUpdated,
+}: {
+  settings: SettingsData | null;
+  onSave: (s: SettingsData) => void;
+  lastUpdated: Date | null;
+}) {
+  const t = useTranslations("common");
+  const tMyChecks = useTranslations("myChecks");
+  const [search, setSearch] = useState("");
+  const [dropHighlight, setDropHighlight] = useState(false);
+  const [dropTargetId, setDropTargetId] = useState<string | null>(null);
+  const [toolStatusMap, setToolStatusMap] = useState<Record<string, ToolStatus>>({});
+
+  useEffect(() => {
+    fetch("/api/check-tools")
+      .then((r) => r.json())
+      .then((data) => setToolStatusMap(data.tools ?? {}))
+      .catch(() => setToolStatusMap({}));
+  }, []);
+
+  const order = settings?.checkOrder ?? [];
+  const list = order.map((id) => CHECK_DEFINITIONS.find((c) => c.id === id)).filter(Boolean) as CheckDef[];
+  const filtered = search.trim()
+    ? list.filter((c) => c.label.toLowerCase().includes(search.trim().toLowerCase()))
+    : list;
+
+  const handleRemoveFromMyShim = (id: string) => {
+    if (!settings) return;
+    const order = (settings.checkOrder ?? []).filter((x) => x !== id);
+    const nextToggles = { ...settings.checkToggles } as Record<string, boolean>;
+    nextToggles[id] = false;
+    onSave({ ...settings, checkOrder: order, checkToggles: nextToggles as unknown as CheckToggles });
+  };
+
+  const handleSettingsChange = (checkId: string, partial: Record<string, unknown>) => {
+    if (!settings) return;
+    onSave({
+      ...settings,
+      checkSettings: {
+        ...settings.checkSettings,
+        [checkId]: { ...(settings.checkSettings as Record<string, Record<string, unknown>>)?.[checkId], ...partial },
+      },
+    });
+  };
+
+  const onDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "move";
+    setDropHighlight(true);
+  };
+
+  const onDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setDropHighlight(true);
+  };
+
+  const onDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setDropHighlight(false);
+      setDropTargetId(null);
+    }
+  };
+
+  const onDropList = async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDropHighlight(false);
+    setDropTargetId(null);
+    const id = (e.dataTransfer.getData("checkId") || e.dataTransfer.getData("text/plain"))?.trim();
+    if (!id || !settings) return;
+    let base = settings;
+    if (!base?.presets?.length) {
+      try {
+        const res = await fetch("/api/settings");
+        const data = await res.json();
+        if (data?.presets?.length) base = data;
+      } catch {
+        /* ignore */
+      }
+    }
+    if (!base) return;
+    const order = base.checkOrder ?? [];
+    if (order.includes(id)) return;
+    const nextToggles = { ...base.checkToggles } as Record<string, boolean>;
+    nextToggles[id] = true;
+    onSave({ ...base, checkOrder: [...order, id], checkToggles: nextToggles as unknown as CheckToggles });
+  };
+
+  const moveOrder = (draggedId: string, targetId: string) => {
+    if (!settings) return;
+    const order = settings.checkOrder ?? [];
+    const fromIdx = order.indexOf(draggedId);
+    const toIdx = order.indexOf(targetId);
+    if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) return;
+    const next = order.slice();
+    next.splice(fromIdx, 1);
+    const newToIdx = fromIdx < toIdx ? toIdx - 1 : toIdx;
+    next.splice(newToIdx, 0, draggedId);
+    onSave({ ...settings, checkOrder: next });
+  };
+
+  const onDropOnItem = (e: React.DragEvent, targetId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDropTargetId(null);
+    setDropHighlight(false);
+    const draggedId = (e.dataTransfer.getData("checkId") || e.dataTransfer.getData("text/plain"))?.trim();
+    if (!draggedId || !settings) return;
+    const order = settings.checkOrder ?? [];
+    if (order.includes(draggedId)) {
+      moveOrder(draggedId, targetId);
+      return;
+    }
+    const nextToggles = { ...settings.checkToggles } as Record<string, boolean>;
+    nextToggles[draggedId] = true;
+    const toIdx = order.indexOf(targetId);
+    const insertIdx = toIdx === -1 ? order.length : toIdx;
+    const nextOrder = [...order.slice(0, insertIdx), draggedId, ...order.slice(insertIdx)];
+    onSave({ ...settings, checkOrder: nextOrder, checkToggles: nextToggles as unknown as CheckToggles });
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-2 flex-wrap">
+        <h3 className="text-sm font-medium text-white">{tMyChecks("title")}</h3>
+        <span className="text-xs text-green-500 shrink-0">
+          {t("updated")} {lastUpdated ? formatTimestamp(lastUpdated) : "–"}
+        </span>
+      </div>
+
+      <div className="relative">
+        <input
+          type="text"
+          placeholder={t("search")}
+          className="input w-full input-sm bg-[#0f0f0f] border border-white/80 text-white pr-8 rounded placeholder-neutral-500"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        <svg
+          className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-white/80 pointer-events-none"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </div>
+
+      <ul
+        className={`space-y-2 list-none p-0 m-0 min-h-[140px] rounded-lg border-2 border-dashed transition-all duration-200 ${
+          dropHighlight
+            ? "border-green-400 bg-green-500/20 shadow-[inset_0_0_0_2px_rgba(34,197,94,0.3)]"
+            : "border-white/40 bg-white/5"
+        }`}
+        onDragEnter={onDragEnter}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDropList}
+      >
+        {dropHighlight && (
+          <li className="list-none py-3 text-center pointer-events-none">
+            <span className="inline-block px-3 py-1.5 rounded bg-green-500/30 text-green-200 text-sm font-medium">
+              {t("dropHereActivate")}
+            </span>
+          </li>
+        )}
+        {filtered.length === 0 && !dropHighlight ? (
+          <li className="list-none py-6 text-center text-neutral-500 text-sm px-2">{t("noMyChecksYet")}</li>
+        ) : (
+          filtered.map((def) => (
+            <li
+              key={def.id}
+              draggable
+              onDragStart={(e) => {
+                e.dataTransfer.setData("checkId", def.id);
+                e.dataTransfer.setData("text/plain", def.id);
+                e.dataTransfer.effectAllowed = "move";
+              }}
+              onDragOver={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                e.dataTransfer.dropEffect = "move";
+                setDropTargetId(def.id);
+              }}
+              onDragLeave={(e) => {
+                if (!e.currentTarget.contains(e.relatedTarget as Node)) setDropTargetId(null);
+              }}
+              onDrop={(e) => onDropOnItem(e, def.id)}
+              className={`list-none cursor-grab active:cursor-grabbing transition-colors ${dropTargetId === def.id ? "ring-2 ring-primary/60 ring-inset rounded-lg" : ""}`}
+            >
+              <CheckCard
+                def={def}
+                orderIndex={order.indexOf(def.id) + 1 || undefined}
+                enabled={true}
+                onToggle={() => {}}
+                checkSettings={(settings?.checkSettings as Record<string, Record<string, unknown>>)?.[def.id]}
+                onSettingsChange={(partial) => handleSettingsChange(def.id, partial)}
+                dragHandle={<span className="text-neutral-500 select-none">⋮⋮</span>}
+                leftTags={[...def.tags, def.role]}
+                statusTag="active"
+                inlineStyle
+                hideEnabledToggle
+                toolStatus={toolStatusMap[def.id]}
+                headerExtra={
+                  <button
+                    type="button"
+                    className="btn btn-ghost btn-xs text-neutral-400 hover:text-red-400 shrink-0"
+                    onClick={() => handleRemoveFromMyShim(def.id)}
+                    title={t("removeFromMyShim")}
+                  >
+                    {t("remove")}
+                  </button>
+                }
+              />
+            </li>
+          ))
+        )}
+      </ul>
+      <p className="text-xs text-neutral-500 mt-1.5 px-0.5">{t("dragFromLibrary")}</p>
+    </div>
+  );
+}

package/dashboard/components/Nav.tsx

@@ -4,28 +4,31 @@
  */
 "use client";
 
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 
 export default function Nav() {
+  const t = useTranslations("common");
+  const tNav = useTranslations("nav");
   return (
     <div className="navbar bg-base-100 shadow-lg">
       <div className="flex-1">
         <Link href="/" className="btn btn-ghost text-xl">
-          shimwrappercheck
+          {t("appName")}
         </Link>
       </div>
       <div className="flex-none gap-2">
         <Link href="/" className="btn btn-ghost btn-sm">
-          Dashboard
+          {tNav("dashboard")}
         </Link>
         <Link href="/settings" className="btn btn-ghost btn-sm">
-          Einstellungen
+          {tNav("settings")}
         </Link>
         <Link href="/config" className="btn btn-ghost btn-sm">
-          Config
+          {tNav("config")}
         </Link>
         <Link href="/agents" className="btn btn-ghost btn-sm">
-          AGENTS.md
+          {tNav("agentsMd")}
         </Link>
       </div>
     </div>

package/dashboard/components/SetDocumentLang.tsx

@@ -0,0 +1,18 @@
+/**
+ * Sets document.documentElement.lang from current locale (for accessibility).
+ * Location: /components/SetDocumentLang.tsx
+ */
+"use client";
+
+import { useLocale } from "next-intl";
+import { useEffect } from "react";
+
+export default function SetDocumentLang() {
+  const locale = useLocale();
+  useEffect(() => {
+    if (typeof document !== "undefined") {
+      document.documentElement.lang = locale;
+    }
+  }, [locale]);
+  return null;
+}

package/dashboard/components/SidebarMyShim.tsx

@@ -1,43 +1,132 @@
 /**
- * Left sidebar "My Shim": Trigger commandos + Checks (simple cards with search).
+ * Left sidebar "My Shim": My Trigger Commandos + My Checks (Referenz-Layout mit Zeitstempel, Tabs, Karten).
  * Location: /components/SidebarMyShim.tsx
  */
 "use client";
 
-import { useEffect, useState } from "react";
-import type { SettingsData } from "@/lib/presets";
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
+import type { SettingsData, CheckToggles } from "@/lib/presets";
+import { IconSettings } from "@/components/Icons";
 import TriggerCommandos from "@/components/TriggerCommandos";
-import CheckCardList from "@/components/CheckCardList";
+import MyShimChecks from "@/components/MyShimChecks";
 
 export default function SidebarMyShim() {
+  const tSidebar = useTranslations("sidebar");
+  const tCommon = useTranslations("common");
   const [settings, setSettings] = useState<SettingsData | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const settingsRef = useRef<SettingsData | null>(settings);
+  settingsRef.current = settings;
 
   useEffect(() => {
-    fetch("/api/settings")
-      .then((r) => r.json())
-      .then((data) => setSettings(data))
-      .catch(() => setSettings(null));
+    const load = () => {
+      fetch("/api/settings")
+        .then((r) => r.json())
+        .then((data) => setSettings(data))
+        .catch(() => setSettings(null));
+    };
+    load();
+    const handler = () => load();
+    window.addEventListener("settings-updated", handler);
+    return () => window.removeEventListener("settings-updated", handler);
   }, []);
 
-  const saveSettings = (next: SettingsData) => {
+  const saveSettings = useCallback((next: SettingsData) => {
     setSettings(next);
     fetch("/api/settings", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(next),
-    }).catch(() => {});
-  };
+    })
+      .then(() => {
+        setLastUpdated(new Date());
+        if (typeof window !== "undefined") window.dispatchEvent(new Event("settings-updated"));
+      })
+      .catch(() => {});
+  }, []);
+
+  const activePreset = settings?.presets?.find((p) => p.id === settings.activePresetId);
+
+  useEffect(() => {
+    const el = sidebarRef.current;
+    if (!el) return;
+    const handleDragOver = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    };
+    const handleDrop = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const dt = e.dataTransfer;
+      if (!dt) return;
+      const id = dt.getData("text/plain") || dt.getData("checkId");
+      const checkId = (id || "").trim();
+      if (!checkId) return;
+      const apply = (base: SettingsData) => {
+        const order = base.checkOrder ?? [];
+        if (order.includes(checkId)) return;
+        const nextToggles = { ...base.checkToggles } as Record<string, boolean>;
+        nextToggles[checkId] = true;
+        saveSettings({
+          ...base,
+          checkOrder: [...order, checkId],
+          checkToggles: nextToggles as unknown as CheckToggles,
+        });
+      };
+      const base = settingsRef.current;
+      if (base?.presets?.length) {
+        apply(base);
+      } else {
+        fetch("/api/settings")
+          .then((r) => r.json())
+          .then((data) => {
+            if (data?.presets?.length) apply(data);
+          })
+          .catch(() => {});
+      }
+    };
+    el.addEventListener("dragover", handleDragOver, false);
+    el.addEventListener("drop", handleDrop, false);
+    return () => {
+      el.removeEventListener("dragover", handleDragOver);
+      el.removeEventListener("drop", handleDrop);
+    };
+  }, [saveSettings]);
 
   return (
-    <div className="p-4 space-y-6">
-      <h2 className="text-lg font-semibold text-white">My Shim</h2>
-      <section>
-        <h3 className="text-sm font-medium text-white mb-2">Trigger commandos</h3>
-        <TriggerCommandos settings={settings} onSave={saveSettings} />
+    <div ref={sidebarRef} className="p-4 space-y-6 flex flex-col min-h-0 overflow-y-auto">
+      <div className="flex items-center justify-between gap-2 shrink-0 min-w-0">
+        <h2 className="text-lg font-semibold text-white shrink-0">{tSidebar("myActiveShim")}</h2>
+        <div className="flex items-center gap-1 min-w-0">
+          {activePreset?.name != null && activePreset.name !== "" && (
+            <span
+              className="text-xs font-medium bg-violet-600 text-white rounded px-2 py-0.5 truncate min-w-0"
+              title={activePreset.name}
+            >
+              {activePreset.name}
+            </span>
+          )}
+          <Link
+            href="/settings"
+            className="btn btn-ghost btn-xs btn-square text-white/80 hover:text-white hover:bg-white/10 shrink-0"
+            aria-label={tCommon("presetsAndSettings")}
+            title={tCommon("presetsAndSettings")}
+          >
+            <IconSettings />
+          </Link>
+        </div>
+      </div>
+      <section className="shrink-0">
+        <TriggerCommandos settings={settings} onSave={saveSettings} lastUpdated={lastUpdated} />
       </section>
-      <section>
-        <h3 className="text-sm font-medium text-white mb-2">Checks</h3>
-        <CheckCardList settings={settings} onSave={saveSettings} variant="simple" />
+      <section className="flex flex-col min-h-0 flex-1">
+        <div className="min-h-[200px] overflow-y-auto">
+          <MyShimChecks settings={settings} onSave={saveSettings} lastUpdated={lastUpdated} />
+        </div>
       </section>
     </div>
   );

package/dashboard/components/StatusCard.tsx

@@ -4,22 +4,15 @@
  */
 "use client";
 
-export default function StatusCard({
-  label,
-  ok,
-  detail,
-}: {
-  label: string;
-  ok: boolean;
-  detail?: string;
-}) {
+import { useTranslations } from "next-intl";
+
+export default function StatusCard({ label, ok, detail }: { label: string; ok: boolean; detail?: string }) {
+  const t = useTranslations("common");
   return (
     <div className="card bg-neutral-800 border border-neutral-600 shadow-md">
       <div className="card-body p-4">
         <h3 className="card-title text-sm text-white">{label}</h3>
-        <p className={ok ? "text-green-400" : "text-amber-400"}>
-          {ok ? "✓ Vorhanden" : "— Nicht gefunden"}
-        </p>
+        <p className={ok ? "text-green-400" : "text-amber-400"}>{ok ? t("statusPresent") : t("statusMissing")}</p>
         {detail && <p className="text-xs text-neutral-400">{detail}</p>}
       </div>
     </div>