@cosmicdrift/kumiko-bundled-features 0.124.0 → 0.125.0

package/src/tenant/feature.ts

@@ -8,6 +8,7 @@ import {
   defineFeature,
   type FeatureDefinition,
 } from "@cosmicdrift/kumiko-framework/engine";
+import { MEMBERS_SCREEN_ID } from "./constants";
 import { activeTenantIdsQuery } from "./handlers/active-tenant-ids.query";
 import { addMemberWrite } from "./handlers/add-member.write";
 import { cancelInvitationWrite } from "./handlers/cancel-invitation.write";
@@ -134,6 +135,21 @@ export function createTenantFeature(): FeatureDefinition {
     );
     r.screen(tenantListScreen);
     r.screen(tenantEditScreen);
+    // Tenant-admin team UI: members list + invite/cancel (no role-edit — updateMemberRoles
+    // stays SystemAdmin-only). Screen access matches handler access.admin.
+    r.screen({
+      id: MEMBERS_SCREEN_ID,
+      type: "custom",
+      renderer: { react: { __component: "MembersScreen" } },
+      access: { roles: access.admin },
+    });
+    r.nav({
+      id: "members",
+      label: "tenant:nav.members",
+      icon: "users",
+      screen: "tenant:screen:members",
+      order: 20,
+    });
 
     return { handlers, queries };
   });

package/src/tenant/handlers/cancel-invitation.write.ts

@@ -12,7 +12,7 @@
 
 import { fetchOne } from "@cosmicdrift/kumiko-framework/bun-db";
 import { createEventStoreExecutor } from "@cosmicdrift/kumiko-framework/db";
-import { defineWriteHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { access, defineWriteHandler } from "@cosmicdrift/kumiko-framework/engine";
 import { NotFoundError, writeFailure } from "@cosmicdrift/kumiko-framework/errors";
 import { z } from "zod";
 // kumiko-lint-ignore cross-feature-import cancel needs invite-token-store für Redis-cleanup
@@ -37,7 +37,7 @@ const executor = createEventStoreExecutor(tenantInvitationsTable, tenantInvitati
 export const cancelInvitationWrite = defineWriteHandler({
   name: "cancel-invitation",
   schema: CancelInvitationSchema,
-  access: { roles: ["Admin"] },
+  access: { roles: access.admin },
   handler: async (event, ctx) => {
     const invitation = await fetchOne(ctx.db.raw, tenantInvitationsTable, {
       id: event.payload.invitationId,

package/src/tenant/handlers/invitations.query.ts

@@ -1,5 +1,5 @@
 import { selectMany } from "@cosmicdrift/kumiko-framework/bun-db";
-import { defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { access, defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
 import { z } from "zod";
 import { decryptStoredPii } from "../../shared";
 import { INVITATION_STATUS, tenantInvitationsTable } from "../invitation-table";
@@ -16,7 +16,7 @@ import { INVITATION_STATUS, tenantInvitationsTable } from "../invitation-table";
 export const invitationsQuery = defineQueryHandler({
   name: "invitations",
   schema: z.object({}),
-  access: { roles: ["Admin", "SystemAdmin"] },
+  access: { roles: access.admin },
   handler: async (query, ctx) => {
     const rows = await selectMany<Record<string, unknown>>(ctx.db, tenantInvitationsTable, {
       tenantId: query.user.tenantId,

package/src/tenant/handlers/members.query.ts

@@ -1,5 +1,5 @@
 import { selectMany } from "@cosmicdrift/kumiko-framework/bun-db";
-import { defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { access, defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
 import { parseRoles } from "@cosmicdrift/kumiko-framework/utils";
 import { z } from "zod";
 import { tenantMembershipsTable } from "../membership-table";
@@ -7,7 +7,7 @@ import { tenantMembershipsTable } from "../membership-table";
 export const membersQuery = defineQueryHandler({
   name: "members",
   schema: z.object({}),
-  access: { roles: ["Admin", "SystemAdmin"] },
+  access: { roles: access.admin },
   handler: async (query, ctx) => {
     const rows = await selectMany(ctx.db, tenantMembershipsTable, {
       tenantId: query.user.tenantId,

package/src/tenant/web/client-plugin.tsx

@@ -0,0 +1,20 @@
+// @runtime client
+import { mergeTranslations, type TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
+import { MEMBERS_SCREEN_ID, TENANT_FEATURE } from "../constants";
+import { defaultTranslations } from "./i18n";
+import { MembersScreen } from "./members-screen";
+
+export type TenantClientOptions = {
+  readonly translations?: TranslationsByLocale;
+};
+
+export function tenantClient(options?: TenantClientOptions): ClientFeatureDefinition {
+  return {
+    name: TENANT_FEATURE,
+    translations: mergeTranslations(defaultTranslations, options?.translations ?? {}),
+    components: {
+      [MEMBERS_SCREEN_ID]: MembersScreen,
+    },
+  };
+}

package/src/tenant/web/i18n.ts

@@ -0,0 +1,43 @@
+// @runtime client
+import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+
+export const defaultTranslations: TranslationsByLocale = {
+  de: {
+    "tenant.members.title": "Mitglieder",
+    "tenant.members.loading": "Lade Mitglieder…",
+    "tenant.members.active": "Aktive Mitglieder",
+    "tenant.members.invite.title": "Neue Einladung",
+    "tenant.members.invite.email": "E-Mail",
+    "tenant.members.invite.role": "Rolle",
+    "tenant.members.invite.submit": "Einladung senden",
+    "tenant.members.invite.submitting": "Einladung wird gesendet…",
+    "tenant.members.invite.success": "Einladung an {email} gesendet",
+    "tenant.members.pending": "Ausstehende Einladungen",
+    "tenant.members.pending.empty": "Keine ausstehenden Einladungen.",
+    "tenant.members.cancel": "Zurückziehen",
+    "tenant.members.col.userId": "User-ID",
+    "tenant.members.col.roles": "Rollen",
+    "tenant.members.col.email": "E-Mail",
+    "tenant.members.col.expires": "Gültig bis",
+    "tenant.nav.members": "Team",
+  },
+  en: {
+    "tenant.members.title": "Members",
+    "tenant.members.loading": "Loading members…",
+    "tenant.members.active": "Active members",
+    "tenant.members.invite.title": "New invitation",
+    "tenant.members.invite.email": "Email",
+    "tenant.members.invite.role": "Role",
+    "tenant.members.invite.submit": "Send invitation",
+    "tenant.members.invite.submitting": "Sending invitation…",
+    "tenant.members.invite.success": "Invitation sent to {email}",
+    "tenant.members.pending": "Pending invitations",
+    "tenant.members.pending.empty": "No pending invitations.",
+    "tenant.members.cancel": "Cancel",
+    "tenant.members.col.userId": "User ID",
+    "tenant.members.col.roles": "Roles",
+    "tenant.members.col.email": "Email",
+    "tenant.members.col.expires": "Valid until",
+    "tenant.nav.members": "Team",
+  },
+};

package/src/tenant/web/index.ts

@@ -0,0 +1,4 @@
+// @runtime client
+export { type TenantClientOptions, tenantClient } from "./client-plugin";
+export { defaultTranslations } from "./i18n";
+export { MembersScreen, type MembersScreenProps } from "./members-screen";

package/src/tenant/web/members-screen.tsx

@@ -0,0 +1,265 @@
+// @runtime client
+// MembersScreen — active members + pending invitations for the current tenant.
+// Read-only member list; invite + cancel only (no updateMemberRoles — SystemAdmin-only).
+
+import { AuthHandlers } from "@cosmicdrift/kumiko-bundled-features/auth-email-password/constants";
+import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { DEFAULT_INVITE_ROLE_OPTIONS, TenantHandlers, TenantQueries } from "../constants";
+
+type MemberRow = {
+  readonly id: string;
+  readonly userId: string;
+  readonly tenantId: string;
+  readonly roles: readonly string[];
+};
+
+type InvitationRow = {
+  readonly id: string;
+  readonly email: string;
+  readonly role: string;
+  readonly status: string;
+  readonly expiresAt: string;
+};
+
+type State =
+  | { readonly kind: "loading" }
+  | { readonly kind: "error"; readonly message: string }
+  | {
+      readonly kind: "ready";
+      readonly members: readonly MemberRow[];
+      readonly invitations: readonly InvitationRow[];
+    };
+
+type RoleOption = (typeof DEFAULT_INVITE_ROLE_OPTIONS)[number];
+
+export type MembersScreenProps = {
+  /** Invite-role allowlist; defaults to User/Admin/Editor — never reserved/global roles. */
+  readonly inviteRoleOptions?: readonly RoleOption[];
+};
+
+export function MembersScreen({
+  inviteRoleOptions = DEFAULT_INVITE_ROLE_OPTIONS,
+}: MembersScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Banner, Button, Card, DataTable, Field, Form, Heading, Input, Text } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const [state, setState] = useState<State>({ kind: "loading" });
+  const [inviteEmail, setInviteEmail] = useState("");
+  const [inviteRole, setInviteRole] = useState<RoleOption>(inviteRoleOptions[0] ?? "User");
+  const [submitting, setSubmitting] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [lastInvited, setLastInvited] = useState<string | null>(null);
+
+  const refresh = useCallback(async (): Promise<void> => {
+    const membersRes = await dispatcher.query<readonly MemberRow[]>(TenantQueries.members, {});
+    if (!membersRes.isSuccess) {
+      setState({ kind: "error", message: membersRes.error.message });
+      return;
+    }
+    const invitationsRes = await dispatcher.query<readonly InvitationRow[]>(
+      TenantQueries.invitations,
+      {},
+    );
+    if (!invitationsRes.isSuccess) {
+      setState({ kind: "error", message: invitationsRes.error.message });
+      return;
+    }
+    setState({ kind: "ready", members: membersRes.data, invitations: invitationsRes.data });
+  }, [dispatcher]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const onInvite = (e?: React.FormEvent): void => {
+    e?.preventDefault();
+    void (async (): Promise<void> => {
+      setActionError(null);
+      setSubmitting(true);
+      const email = inviteEmail.trim();
+      const res = await dispatcher.write(AuthHandlers.inviteCreate, { email, role: inviteRole });
+      setSubmitting(false);
+      if (!res.isSuccess) {
+        setActionError(res.error.message);
+        return;
+      }
+      setLastInvited(email);
+      setInviteEmail("");
+      await refresh();
+    })();
+  };
+
+  const onCancel = async (invitationId: string): Promise<void> => {
+    setActionError(null);
+    const res = await dispatcher.write(TenantHandlers.cancelInvitation, { invitationId });
+    if (!res.isSuccess) {
+      setActionError(res.error.message);
+      return;
+    }
+    await refresh();
+  };
+
+  if (state.kind === "loading") {
+    return (
+      <FormScreenShell testId="members-screen">
+        <Text variant="small">{t("tenant.members.loading")}</Text>
+      </FormScreenShell>
+    );
+  }
+
+  if (state.kind === "error") {
+    return (
+      <FormScreenShell testId="members-screen">
+        <Banner variant="error">{state.message}</Banner>
+      </FormScreenShell>
+    );
+  }
+
+  const roleSelectOptions = inviteRoleOptions.map((r) => ({ value: r, label: r }));
+
+  return (
+    <FormScreenShell testId="members-screen" className="flex flex-col gap-6">
+      <Heading variant="page">{t("tenant.members.title")}</Heading>
+
+      <Card
+        slots={{ title: `${t("tenant.members.active")} (${state.members.length})` }}
+        options={{ padded: false }}
+      >
+        <DataTable
+          testId="members-active-table"
+          columns={[
+            {
+              field: "userId",
+              label: t("tenant.members.col.userId"),
+              type: "string",
+              sortable: false,
+            },
+            {
+              field: "roles",
+              label: t("tenant.members.col.roles"),
+              type: "string",
+              sortable: false,
+            },
+          ]}
+          rows={state.members.map((m) => ({
+            id: m.id,
+            values: { userId: m.userId, roles: m.roles.join(", ") },
+          }))}
+        />
+      </Card>
+
+      <Form
+        testId="invite-form"
+        title={t("tenant.members.invite.title")}
+        onSubmit={onInvite}
+        actions={
+          <Button
+            type="submit"
+            variant="primary"
+            loading={submitting}
+            disabled={submitting}
+            testId="invite-submit"
+          >
+            {submitting ? t("tenant.members.invite.submitting") : t("tenant.members.invite.submit")}
+          </Button>
+        }
+      >
+        <div className="grid gap-4 sm:grid-cols-2">
+          <Field id="invite-email" label={t("tenant.members.invite.email")} required>
+            <Input
+              kind="email"
+              id="invite-email"
+              name="invite-email"
+              value={inviteEmail}
+              onChange={setInviteEmail}
+              disabled={submitting}
+              required
+              autoComplete="email"
+            />
+          </Field>
+          <Field id="invite-role" label={t("tenant.members.invite.role")} required>
+            <Input
+              kind="select"
+              id="invite-role"
+              name="invite-role"
+              value={inviteRole}
+              onChange={(v) => setInviteRole(v as RoleOption)}
+              options={roleSelectOptions}
+              disabled={submitting}
+              required
+            />
+          </Field>
+        </div>
+        {lastInvited !== null && !submitting && (
+          <Banner variant="info">
+            {t("tenant.members.invite.success", { email: lastInvited })}
+          </Banner>
+        )}
+        {actionError !== null && <Banner variant="error">{actionError}</Banner>}
+      </Form>
+
+      <Card
+        slots={{ title: `${t("tenant.members.pending")} (${state.invitations.length})` }}
+        options={{ padded: false }}
+      >
+        <DataTable
+          testId="pending-list"
+          columns={[
+            {
+              field: "email",
+              label: t("tenant.members.col.email"),
+              type: "string",
+              sortable: false,
+            },
+            {
+              field: "role",
+              label: t("tenant.members.col.roles"),
+              type: "string",
+              sortable: false,
+            },
+            {
+              field: "expires",
+              label: t("tenant.members.col.expires"),
+              type: "string",
+              sortable: false,
+            },
+          ]}
+          rows={state.invitations.map((inv) => ({
+            id: inv.id,
+            values: {
+              email: inv.email,
+              role: inv.role,
+              expires: formatExpiresAt(inv.expiresAt),
+            },
+          }))}
+          rowActions={[
+            {
+              id: "cancel",
+              label: t("tenant.members.cancel"),
+              style: "danger",
+              onTrigger: (row) => void onCancel(row.id),
+            },
+          ]}
+          rowActionMode="inline"
+          emptyState={<Text variant="small">{t("tenant.members.pending.empty")}</Text>}
+        />
+      </Card>
+    </FormScreenShell>
+  );
+}
+
+function formatExpiresAt(iso: string): string {
+  try {
+    return new Date(iso).toLocaleString(undefined, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}

package/src/tier-engine/web/tier-admin-screen.tsx

@@ -13,6 +13,7 @@ import {
   useQuery,
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
+import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
 import { type ReactNode, useEffect, useState } from "react";
 import { TierEngineHandlers, TierEngineQueries } from "../constants";
 
@@ -36,7 +37,7 @@ type Status =
 
 export function TierAdminScreen(): ReactNode {
   const t = useTranslation();
-  const { Section, Field, Input, Button, Banner, Heading } = usePrimitives();
+  const { Section, Field, Input, Button, Banner, Heading, Text } = usePrimitives();
   const dispatcher = useDispatcher();
 
   // ponytail: nur die erste Seite (default-limit, nextCursor ignoriert) —
@@ -91,9 +92,9 @@ export function TierAdminScreen(): ReactNode {
   const canSubmit = tenantId !== "" && tier !== "" && !submitting;
 
   return (
-    <div className="p-6 flex flex-col gap-6 max-w-xl" data-testid="tier-admin-screen">
+    <FormScreenShell testId="tier-admin-screen" className="flex max-w-xl flex-col gap-6">
       <Heading variant="page">{t("tier-admin.title")}</Heading>
-      <p className="text-sm text-muted-foreground">{t("tier-admin.explainer")}</p>
+      <Text variant="small">{t("tier-admin.explainer")}</Text>
 
       {tenantsQuery.error !== null && (
         <Banner variant="error" testId="tier-admin-load-error">
@@ -119,9 +120,9 @@ export function TierAdminScreen(): ReactNode {
         </Field>
 
         {tenantId !== "" && (
-          <p className="text-sm text-muted-foreground" data-testid="tier-admin-current">
+          <Text variant="small" testId="tier-admin-current">
             {t("tier-admin.current.label")}: {currentTier ?? t("tier-admin.current.none")}
-          </p>
+          </Text>
         )}
 
         <Field id="tier-admin-tier" label={t("tier-admin.tier.label")} required>
@@ -156,6 +157,6 @@ export function TierAdminScreen(): ReactNode {
           {t("tier-admin.submit")}
         </Button>
       </Section>
-    </div>
+    </FormScreenShell>
   );
 }