@arch-cadre/panel 1.0.7 → 1.0.10

package/src/ui/components/breadcrumb-slot.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useTranslation } from "@arch-cadre/intl";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@arch-cadre/ui/components/breadcrumb";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@arch-cadre/ui/components/tooltip";
+import Image from "next/image";
+import Link from "next/link";
+import * as React from "react";
+
+export default function BreadcrumbSlot() {
+  const { t } = useTranslation();
+
+  return (
+    <Breadcrumb className="hidden sm:block">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Link href="/kryo">
+                <Image
+                  width={16}
+                  height={16}
+                  src="/favicon.svg"
+                  alt="logo"
+                  className="size-4"
+                  aria-hidden={true}
+                />
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t("Back to Dashboard")}</p>
+            </TooltipContent>
+          </Tooltip>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>&bull;</BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>{t("Dashboard")}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

package/src/ui/components/manager/module-card.tsx

@@ -0,0 +1,327 @@
+"use client";
+
+import { eventBus } from "@arch-cadre/core";
+import { useTranslation } from "@arch-cadre/intl";
+import type { ModuleManifest } from "@arch-cadre/modules";
+import { Badge } from "@arch-cadre/ui/components/badge";
+import { Button } from "@arch-cadre/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@arch-cadre/ui/components/card";
+import { Switch } from "@arch-cadre/ui/components/switch";
+import { Loader } from "@arch-cadre/ui/shared/loader";
+import { AlertCircle, FileText, ShieldCheck } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { toggleModuleAction } from "../../../actions/manager";
+
+interface ModuleStatusCheckEvent {
+  triggerSource: string;
+  dependencies: string[];
+  action: "enable" | "disable";
+}
+
+interface ModuleCardProps {
+  module: ModuleManifest & {
+    installed?: boolean;
+    hasDocs?: boolean;
+    lastStep?: string | null;
+    isNpm?: boolean;
+  };
+}
+
+export function ModuleCard({ module }: ModuleCardProps) {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const [isEnabled, setIsEnabled] = useState(module.enabled);
+  const [isProcessing, setIsProcessing] = useState(!!module.lastStep);
+  const [localStep, setLocalStep] = useState<string | null>(
+    module.lastStep || null,
+  );
+  const pollerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const stopPolling = useCallback(() => {
+    if (pollerRef.current) {
+      clearInterval(pollerRef.current);
+      pollerRef.current = null;
+    }
+  }, []);
+
+  const startPolling = useCallback(() => {
+    if (pollerRef.current) return;
+
+    pollerRef.current = setInterval(async () => {
+      try {
+        const res = await fetch(`/api/system/modules/${module.id}/status`);
+        const status = await res.json();
+
+        // Jeśli serwer zwrócił konkretny krok, ustawiamy go
+        if (status.lastStep) {
+          setLocalStep(status.lastStep);
+        }
+
+        // Jeśli lastStep zniknął, proces się zakończył
+        if (!status.lastStep) {
+          setIsProcessing(false);
+          setLocalStep(null);
+          stopPolling();
+          router.refresh();
+        } else if (status.lastStep.toLowerCase().includes("error")) {
+          setIsProcessing(false);
+          stopPolling();
+        }
+      } catch (e) {
+        console.error("Polling error", e);
+      }
+    }, 1000);
+  }, [module.id, router, stopPolling]);
+
+  // Subskrypcja EventBus
+  useEffect(() => {
+    const eventType = "module:status:check";
+    const subscriberId = `card-${module.id}`;
+
+    eventBus.subscribe<ModuleStatusCheckEvent>(
+      eventType,
+      subscriberId,
+      (event) => {
+        const { triggerSource, dependencies, action } = event.payload;
+        // Ignorujemy jeśli to my wywołaliśmy akcję LUB jeśli jesteśmy modułem systemowym
+        if (triggerSource === module.id || module.system) return;
+
+        let shouldCheck = false;
+
+        if (action === "enable") {
+          // Jeśli ktoś włącza moduł, który zależy ode mnie, ja muszę zostać sprawdzony/zaktualizowany pierwszy
+          if (dependencies.includes(module.id)) {
+            shouldCheck = true;
+          }
+        } else if (action === "disable") {
+          // Jeśli ktoś wyłącza moduł, od którego JA zależę, ja też zostanę wyłączony
+          if (module.dependencies?.includes(triggerSource)) {
+            shouldCheck = true;
+          }
+          // Jeśli ktoś wyłącza moduł, który zależał ode mnie, ja MOGĘ zostać wyłączony (jeśli nikt inny mnie nie chce)
+          if (dependencies.includes(module.id)) {
+            shouldCheck = true;
+          }
+        }
+
+        if (shouldCheck && !isProcessing) {
+          setIsProcessing(true);
+          setLocalStep(t("Waiting..."));
+          startPolling();
+        }
+      },
+    );
+
+    return () => eventBus.unsubscribe(eventType, subscriberId);
+  }, [
+    module.id,
+    module.dependencies,
+    isProcessing,
+    module.system,
+    startPolling,
+    t,
+  ]);
+
+  // Uruchom polling jeśli moduł przyszedł z serwera jako "w trakcie"
+  useEffect(() => {
+    if (module.lastStep) {
+      setIsProcessing(true);
+      setLocalStep(module.lastStep);
+      startPolling();
+    }
+    return () => stopPolling();
+  }, [module.lastStep, startPolling, stopPolling]);
+
+  // Synchronizacja isEnabled przy zmianie propsów (np. po refresh)
+  useEffect(() => {
+    setIsEnabled(module.enabled);
+  }, [module.enabled]);
+
+  const handleToggle = async (checked: boolean) => {
+    setIsProcessing(true);
+    setLocalStep(t("Starting..."));
+    setIsEnabled(checked);
+
+    // Publikowanie zdarzenia przez EventBus
+    eventBus.publish(
+      "module:status:check",
+      {
+        triggerSource: module.id,
+        dependencies: module.dependencies || [],
+        action: checked ? "enable" : "disable",
+      },
+      `card-${module.id}`,
+    );
+
+    try {
+      await toggleModuleAction(module.id, checked);
+      startPolling();
+    } catch (_error) {
+      setIsEnabled(!checked);
+      setIsProcessing(false);
+      setLocalStep(null);
+      toast.error(t("error_occurred"));
+    }
+  };
+
+  return (
+    <Card
+      className={`relative overflow-hidden transition-all duration-300 ${!isEnabled && !module.system ? "opacity-75 shadow-none border-dashed" : "shadow-md"}`}
+    >
+      {isProcessing && (
+        <div className="absolute top-0 left-0 w-full h-1 bg-primary/20 overflow-hidden">
+          <div
+            className={`h-full bg-primary ${localStep?.startsWith("Waiting") ? "animate-pulse opacity-50" : "animate-progress-fast"}`}
+            style={{ width: localStep?.startsWith("Waiting") ? "100%" : "40%" }}
+          />
+        </div>
+      )}
+
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-base font-medium flex items-center gap-2">
+          {module.name}
+          {module.system && <ShieldCheck className="size-4 text-primary" />}
+        </CardTitle>
+
+        <div className="flex items-center gap-2">
+          {module.hasDocs && (
+            <Button
+              asChild
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              title={t("View documentation")}
+            >
+              <Link href={`/kryo/modules/docs/${module.id}`}>
+                <FileText className="size-4" />
+              </Link>
+            </Button>
+          )}
+          {!module.system && (
+            <Switch
+              checked={isEnabled}
+              onCheckedChange={handleToggle}
+              disabled={isProcessing}
+            />
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-2 mb-4">
+          <Badge variant={isEnabled || module.system ? "default" : "secondary"}>
+            {isProcessing ? (
+              <span className="flex items-center gap-1">
+                <Loader
+                  variant={isEnabled || module.system ? "dark" : "default"}
+                  className="size-3"
+                />
+                {localStep?.startsWith("Waiting")
+                  ? t("Please wait...")
+                  : t("Working...")}
+              </span>
+            ) : isEnabled || module.system ? (
+              t("Enabled")
+            ) : (
+              t("Disabled")
+            )}
+          </Badge>
+          {module.installed && (
+            <Badge variant="outline" className="text-[10px] h-5 font-mono">
+              {t("Installed")}
+            </Badge>
+          )}
+          {module.isNpm && (
+            <Badge
+              variant="secondary"
+              className="text-[10px] h-5 font-mono bg-blue-500/10 text-blue-600 border-blue-500/20"
+            >
+              NPM
+            </Badge>
+          )}
+          <span className="text-xs text-muted-foreground ml-auto">
+            v{module.version}
+          </span>
+        </div>
+
+        {isProcessing || localStep ? (
+          <div
+            className={`p-2 rounded-lg border text-[11px] font-mono mb-2 flex items-center gap-2 ${localStep?.toLowerCase().includes("error") ? "bg-destructive/10 text-destructive border-destructive/20" : localStep?.startsWith("Waiting") ? "bg-amber-500/10 text-amber-600 border-amber-500/20" : "bg-muted/50 text-muted-foreground"}`}
+          >
+            {localStep?.toLowerCase().includes("error") ? (
+              <AlertCircle className="size-3" />
+            ) : localStep?.startsWith("Waiting") ? (
+              <Loader className="size-3 animate-spin opacity-50" />
+            ) : (
+              <Loader className="size-3 animate-spin" />
+            )}
+            <span className="truncate">{localStep || t("Processing")}</span>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <p className="text-sm text-muted-foreground line-clamp-2 h-[40px]">
+              {t(module.description!)}
+            </p>
+
+            <div className="flex flex-wrap gap-y-2 gap-x-4 pt-2 border-t border-muted/50">
+              {(!module.extends || module.extends.length === 0) &&
+                (!module.dependencies || module.dependencies.length === 0) ? (
+                <div className="flex items-center gap-1.5">
+                  <span className="text-[10px] font-black uppercase tracking-tight text-muted-foreground/40 italic">
+                    {t("No dependencies")}
+                  </span>
+                </div>
+              ) : (
+                <>
+                  {module.extends && module.extends.length > 0 && (
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-[10px] font-black uppercase tracking-tight text-primary/70">
+                        {t("Extends")}
+                      </span>
+                      <div className="flex gap-1">
+                        {module.extends.map((ext) => (
+                          <span
+                            key={ext}
+                            className="text-[10px] font-mono bg-primary/5 text-primary px-1 rounded border border-primary/10"
+                          >
+                            {ext}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {module.dependencies && module.dependencies.length > 0 && (
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-[10px] font-black uppercase tracking-tight text-muted-foreground">
+                        {t("Requires")}
+                      </span>
+                      <div className="flex gap-1">
+                        {module.dependencies.map((dep) => (
+                          <span
+                            key={dep}
+                            className="text-[10px] font-mono bg-muted text-muted-foreground px-1 rounded border"
+                          >
+                            {dep}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/ui/components/manager/module-list.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useTranslation } from "@arch-cadre/intl";
+
+import { Separator } from "@arch-cadre/ui/components/separator";
+import * as React from "react";
+import { ModuleCard } from "./module-card";
+
+export function ModuleMarketplaceList({
+  initialModules,
+}: {
+  initialModules: any[];
+}) {
+  const { t } = useTranslation();
+  // Sortowanie i filtrowanie
+  const sortedModules = [...initialModules].sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+  const coreModules = sortedModules.filter((m) => m.system);
+  const publicModules = sortedModules.filter((m) => !m.system);
+
+  return (
+    <div className="space-y-10">
+      {/* Sekcja Public */}
+      {publicModules.length > 0 && (
+        <div className="space-y-6">
+          <div className="flex items-center gap-4">
+            <h3 className="text-sm font-bold uppercase tracking-widest text-muted-foreground shrink-0">
+              {t("Public Modules")}
+            </h3>
+            <Separator className="flex-1" />
+          </div>
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {publicModules.map((module) => (
+              <ModuleCard key={module.id} module={module} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Sekcja Core */}
+      {coreModules.length > 0 && (
+        <div className="space-y-6">
+          <div className="flex items-center gap-4">
+            <h3 className="text-sm font-bold uppercase tracking-widest text-primary shrink-0">
+              {t("Core Modules")}
+            </h3>
+            <Separator className="flex-1" />
+          </div>
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {coreModules.map((module) => (
+              <ModuleCard key={module.id} module={module} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/components/manager/module-upload.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useTranslation } from "@arch-cadre/intl";
+
+import { Button } from "@arch-cadre/ui/components/button";
+import { Loader2, Lock, Upload } from "lucide-react";
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import {
+  checkDiskWriteAccess,
+  uploadModuleAction,
+} from "../../../actions/manager";
+
+export function ModuleUpload() {
+  const [isUploading, setIsUploading] = useState(false);
+  const [canWrite, setCanWrite] = useState<boolean | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    checkDiskWriteAccess().then((res) => setCanWrite(res.canWrite));
+  }, []);
+
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.name.endsWith(".zip")) {
+      toast.error(t("Invalid file"));
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    setIsUploading(true);
+    const id = toast.loading(t("Uploading..."));
+
+    try {
+      const result = await uploadModuleAction(formData);
+      if (result.success) {
+        toast.success(t("Upload successful"), { id });
+        if (fileInputRef.current) fileInputRef.current.value = "";
+      } else {
+        toast.error(result.error || t("Upload error"), { id });
+      }
+    } catch (_error) {
+      toast.error(t("error_occurred"), { id });
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-4">
+      <input
+        type="file"
+        accept=".zip"
+        className="hidden"
+        ref={fileInputRef}
+        onChange={handleUpload}
+        disabled={isUploading}
+      />
+      <Button
+        onClick={() => fileInputRef.current?.click()}
+        disabled={isUploading || canWrite === false}
+        variant="outline"
+        size="sm"
+        className="gap-2 w-full sm:w-auto"
+        title={canWrite === false ? t("No write access") : undefined}
+      >
+        {isUploading ? (
+          <Loader2 className="size-4 animate-spin" />
+        ) : canWrite === false ? (
+          <Lock className="size-4 text-destructive" />
+        ) : (
+          <Upload className="size-4" />
+        )}
+        {canWrite === false ? t("Upload disabled") : t("Upload module")}
+      </Button>
+    </div>
+  );
+}