nexarch/web/portal/app/ModuleGrid.tsx

"use client";

import { useEffect, useState } from "react";
import { useI18n, resolveModuleHref } from "@nexarch/shl";
import type { ModuleEntry } from "../lib/modules";
import { getSession } from "../lib/http";

interface VisibleModulesResponse {
  modules?: ModuleEntry[];
  error?: string;
}

export async function fetchVisibleModules(
  tenant: string,
  role: string,
  fetchImpl: typeof fetch = fetch
): Promise<ModuleEntry[]> {
  const res = await fetchImpl(
    `/api/visible-modules?tenant=${encodeURIComponent(tenant)}&role=${encodeURIComponent(role)}`
  );
  if (!res.ok) return [];
  const body = (await res.json()) as VisibleModulesResponse;
  return body.modules ?? [];
}

type State =
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "ready"; modules: ModuleEntry[] };

export function ModuleGrid() {
  const { t } = useI18n();
  const [state, setState] = useState<State>({ status: "loading" });

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const session = getSession();
        await session.token();
        const identity = session.identity();
        if (!identity) {
          if (!cancelled) setState({ status: "error", message: t("portal.noIdentity", "Anmeldung erforderlich.") });
          return;
        }
        const modules = await fetchVisibleModules(identity.tenant, identity.role);
        if (!cancelled) setState({ status: "ready", modules });
      } catch (err) {
        if (!cancelled) {
          setState({ status: "error", message: (err as Error).message });
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [t]);

  if (state.status === "loading") return <p>{t("portal.loading", "Lade Übersicht …")}</p>;
  if (state.status === "error") return <p role="alert">{state.message}</p>;
  if (state.modules.length === 0) {
    return <p>{t("portal.noModules", "Für Ihr Konto sind derzeit keine Module freigeschaltet.")}</p>;
  }

  return (
    <ul
      style={{
        listStyle: "none",
        margin: 0,
        padding: 0,
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
        gap: 16,
      }}
    >
      {state.modules.map((mod) => (
        <li key={mod.key}>
          <a
            href={resolveModuleHref(mod.href)}
            style={{
              display: "block",
              minHeight: 44,
              padding: 16,
              border: "1px solid var(--shl-color-border, #d7dbe0)",
              borderRadius: 8,
              textDecoration: "none",
              color: "inherit",
            }}
          >
            <strong>{mod.label}</strong>
            <p style={{ margin: "4px 0 0" }}>{mod.description}</p>
          </a>
        </li>
      ))}
    </ul>
  );
}