Working version 6.2

src/components/packages/package-card.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import type { PackageDef } from "@/lib/packages";
+
+interface Props {
+  pkg: PackageDef;
+  enabled: boolean;
+  status?: "pending" | "active" | "error";
+  tenantName: string;
+  onToggled: () => void;
+}
+
+export function PackageCard({ pkg, enabled, status, tenantName, onToggled }: Props) {
+  const t = useTranslations();
+  const [showModal, setShowModal] = useState(false);
+  const [secrets, setSecrets] = useState<Record<string, string>>({});
+  const [accepted, setAccepted] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleEnable() {
+    if (pkg.requiresSecrets) {
+      setShowModal(true);
+      setSecrets({});
+      setAccepted(false);
+      setError(null);
+      return;
+    }
+    await togglePackage(true);
+  }
+
+  async function togglePackage(enable: boolean) {
+    setSaving(true);
+    try {
+      const res = await fetch(`/api/tenants/${tenantName}`);
+      const tenant = await res.json();
+      const current: string[] = tenant.spec?.packages || [];
+      const next = enable
+        ? [...current, pkg.id]
+        : current.filter((p: string) => p !== pkg.id);
+
+      const patchRes = await fetch(`/api/tenants/${tenantName}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ packages: next }),
+      });
+      if (!patchRes.ok) throw new Error("Failed to update packages");
+      onToggled();
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleSubmitSecrets() {
+    if (pkg.disclaimerKey && !accepted) return;
+
+    const required = (pkg.secrets || []).map((s) => s.key);
+    const missing = required.filter((k) => !secrets[k]?.trim());
+    if (missing.length) { setError(t("packages.missingFields")); return; }
+
+    setSaving(true);
+    setError(null);
+    try {
+      const secretRes = await fetch(`/api/tenants/${tenantName}/secrets`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ packageId: pkg.id, secrets }),
+      });
+      if (!secretRes.ok) {
+        const err = await secretRes.json();
+        throw new Error(err.error || "Failed to store secrets");
+      }
+      await togglePackage(true);
+      setShowModal(false);
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const statusColors: Record<string, string> = {
+    pending: "text-warning",
+    active: "text-success",
+    error: "text-error",
+  };
+
+  return (
+    <>
+      <div className="bg-surface-1 border border-border rounded-xl p-5 flex flex-col gap-3">
+        <div className="flex items-start justify-between">
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-text-primary">{pkg.name}</span>
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-text-muted bg-surface-3 px-1.5 py-0.5 rounded">
+                {pkg.category}
+              </span>
+            </div>
+            <p className="text-xs text-text-secondary mt-1">{t(pkg.descriptionKey)}</p>
+          </div>
+          {enabled && status && (
+            <span className={`text-xs font-medium ${statusColors[status] || ""}`}>
+              {t(`packages.status.${status}`)}
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between mt-auto pt-3 border-t border-border">
+          {pkg.requiresSecrets && (
+            <span className="text-[10px] text-text-muted">{t("packages.requiresApiKey")}</span>
+          )}
+          <button
+            onClick={enabled ? () => togglePackage(false) : handleEnable}
+            disabled={saving}
+            className={`ml-auto rounded-lg px-3 py-1.5 text-xs font-medium transition-all cursor-pointer ${
+              enabled
+                ? "bg-surface-3 text-text-secondary hover:text-text-primary hover:bg-surface-2"
+                : "bg-accent text-surface-0 hover:bg-accent-dim shadow-lg shadow-accent/20"
+            } disabled:opacity-50`}
+          >
+            {saving ? "…" : enabled ? t("packages.disable") : t("packages.enable")}
+          </button>
+        </div>
+      </div>
+
+      {showModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+          <div className="w-full max-w-md bg-surface-1 border border-border rounded-2xl p-6 space-y-4 shadow-2xl shadow-black/40">
+            <h3 className="font-display text-base font-semibold text-text-primary">
+              {t("packages.configure")} {pkg.name}
+            </h3>
+
+            {pkg.instructionsKey && (
+              <div className="bg-surface-2 border border-border rounded-lg p-3 text-xs text-text-secondary leading-relaxed whitespace-pre-line">
+                {t(pkg.instructionsKey)}
+              </div>
+            )}
+
+            <div className="space-y-3">
+              {(pkg.secrets || []).map((s) => (
+                <label key={s.key} className="block">
+                  <span className="text-xs text-text-secondary mb-1 block">{t(s.labelKey)}</span>
+                  <input
+                    type="password"
+                    placeholder={t(s.placeholderKey)}
+                    value={secrets[s.key] || ""}
+                    onChange={(e) => setSecrets((p) => ({ ...p, [s.key]: e.target.value }))}
+                    className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-accent focus:outline-none"
+                  />
+                </label>
+              ))}
+            </div>
+
+            {pkg.disclaimerKey && (
+              <label className="flex items-start gap-2 text-xs text-text-secondary">
+                <input
+                  type="checkbox"
+                  checked={accepted}
+                  onChange={(e) => setAccepted(e.target.checked)}
+                  className="mt-0.5 accent-accent"
+                />
+                <span>{t(pkg.disclaimerKey)}</span>
+              </label>
+            )}
+
+            {error && <p className="text-xs text-error">{error}</p>}
+
+            <div className="flex justify-end gap-2 pt-2">
+              <button
+                onClick={() => setShowModal(false)}
+                className="rounded-lg px-3 py-1.5 text-xs text-text-secondary hover:text-text-primary cursor-pointer"
+              >
+                {t("common.cancel")}
+              </button>
+              <button
+                onClick={handleSubmitSecrets}
+                disabled={saving || (!!pkg.disclaimerKey && !accepted)}
+                className="rounded-lg bg-accent px-4 py-1.5 text-xs font-medium text-surface-0 hover:bg-accent-dim disabled:opacity-50 cursor-pointer shadow-lg shadow-accent/20"
+              >
+                {saving ? "…" : t("packages.enableAndSave")}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}