@strapi-community/plugin-better-auth-dashboard 1.0.0-alpha.9 → 1.0.0-beta.1

package/dist/admin/index-DszX3ibA.mjs

@@ -0,0 +1,1683 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Field, Combobox, ComboboxOption, Button, Flex, TextInput, Checkbox, Box, Typography, Alert, Tabs, Grid, SingleSelect, SingleSelectOption, IconButton, SearchForm, Searchbar, Loader } from "@strapi/design-system";
+import { Plus, Trash, Pencil } from "@strapi/icons";
+import { useNotification, useFetchClient, Page, useRBAC } from "@strapi/strapi/admin";
+import { useState } from "react";
+import { useQuery, useQueryClient, useMutation } from "react-query";
+import styled, { keyframes } from "styled-components";
+import { c as client, d as getAuthHeaders, e as useOrganizationOptions, b as PERMISSIONS, P as PLUGIN_ID } from "./index-D9CiI8Yr.mjs";
+import { w as withContext, D as Drawer, F as FormSection, S as SectionLabel, M as MediaPickerField, u as useModelSchema, E as EditLayout, C as CustomFieldsSection, a as EditSidebar, b as MetaItem, c as MetaKey, d as MonoChip, e as MetaVal, f as EditViewSidePanels, A as AccountRow, P as ProviderBadge, i as ConfirmDialog } from "./useModelSchema-B2tmzlwQ.mjs";
+function UserCombobox({
+  label = "User",
+  hint,
+  placeholder = "Search users by email or name…",
+  value,
+  onChange,
+  error,
+  required
+}) {
+  const [search, setSearch] = useState("");
+  const { data, isLoading } = useQuery({
+    queryKey: ["user-combobox-search", search],
+    queryFn: async () => {
+      const whereClause = search ? JSON.stringify([
+        {
+          field: "email",
+          operator: "contains",
+          value: search,
+          connector: "OR"
+        },
+        {
+          field: "name",
+          operator: "contains",
+          value: search,
+          connector: "OR"
+        }
+      ]) : void 0;
+      const result = await client.dash.listUsers({
+        query: {
+          limit: search ? 100 : 20,
+          offset: 0,
+          sortBy: "createdAt",
+          sortOrder: "desc",
+          ...whereClause ? { where: whereClause } : {}
+        }
+      });
+      return result.data?.users ?? [];
+    },
+    keepPreviousData: true
+  });
+  const users = data ?? [];
+  return /* @__PURE__ */ jsxs(Field.Root, { hint, error, style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Field.Label, { children: label }),
+    /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        placeholder,
+        value,
+        onChange: (val) => onChange(val),
+        onInputChange: (e) => setSearch(e.target.value),
+        loading: isLoading,
+        required,
+        children: users.map((user) => /* @__PURE__ */ jsxs(ComboboxOption, { value: user.id, children: [
+          user.name,
+          " — ",
+          user.email
+        ] }, user.id))
+      }
+    ),
+    /* @__PURE__ */ jsx(Field.Hint, {}),
+    /* @__PURE__ */ jsx(Field.Error, {})
+  ] });
+}
+function CreateOrganizationDialog({ teamsEnabled, onClose }) {
+  const qc = useQueryClient();
+  const { toggleNotification } = useNotification();
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [logo, setLogo] = useState("");
+  const [ownerId, setOwnerId] = useState("");
+  const [skipDefaultTeam, setSkipDefaultTeam] = useState(false);
+  const [defaultTeamName, setDefaultTeamName] = useState("");
+  const createMutation = useMutation({
+    mutationFn: async () => {
+      const result = await client.dash.organization.create(
+        {
+          name,
+          slug,
+          ...logo ? { logo } : {},
+          ...teamsEnabled && !skipDefaultTeam && defaultTeamName ? { defaultTeamName } : {}
+        },
+        withContext({ userId: ownerId, skipDefaultTeam }, getAuthHeaders())
+      );
+      if (result.error)
+        throw new Error(result.error.message ?? "Create failed");
+      return result.data;
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["dash-organizations"] });
+      toggleNotification({
+        type: "success",
+        message: "Organization created successfully"
+      });
+      onClose();
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to create organization"
+      });
+    }
+  });
+  const handleNameChange = (e) => {
+    const val = e.target.value;
+    setName(val);
+    if (!slug || slug === slugify(name)) {
+      setSlug(slugify(val));
+    }
+  };
+  const footer = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, children: "Cancel" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        loading: createMutation.isLoading,
+        disabled: !name || !slug || !ownerId,
+        onClick: () => createMutation.mutate(),
+        "data-testid": "create-org-submit",
+        children: "Create organization"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(Drawer, { title: "Create organization", footer, onClose, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, children: [
+    /* @__PURE__ */ jsxs(FormSection, { children: [
+      /* @__PURE__ */ jsx(SectionLabel, { children: "Details" }),
+      /* @__PURE__ */ jsxs(Field.Root, { style: { width: "100%" }, required: true, children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: "Name" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            name: "name",
+            value: name,
+            onChange: handleNameChange,
+            placeholder: "Acme Corp"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Field.Root, { style: { width: "100%" }, hint: "Used in URLs", required: true, children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: "Slug" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            name: "slug",
+            value: slug,
+            onChange: (e) => setSlug(e.target.value),
+            placeholder: "acme-corp"
+          }
+        ),
+        /* @__PURE__ */ jsx(Field.Hint, {})
+      ] }),
+      /* @__PURE__ */ jsx(
+        MediaPickerField,
+        {
+          label: "Logo URL",
+          name: "logo",
+          value: logo,
+          onChange: setLogo,
+          placeholder: "https://example.com/logo.png",
+          hint: "Optional — publicly accessible image URL"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FormSection, { children: [
+      /* @__PURE__ */ jsx(SectionLabel, { children: "Owner" }),
+      /* @__PURE__ */ jsx(
+        UserCombobox,
+        {
+          label: "Owner",
+          hint: "The user who will own and manage this organization",
+          value: ownerId,
+          onChange: setOwnerId,
+          required: true
+        }
+      )
+    ] }),
+    teamsEnabled && /* @__PURE__ */ jsxs(FormSection, { children: [
+      /* @__PURE__ */ jsx(SectionLabel, { children: "Default team" }),
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          name: "skipDefaultTeam",
+          checked: skipDefaultTeam,
+          onCheckedChange: (checked) => setSkipDefaultTeam(checked),
+          children: "Don't create a default team"
+        }
+      ),
+      !skipDefaultTeam && /* @__PURE__ */ jsxs(Field.Root, { style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: "Default team name" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            name: "defaultTeamName",
+            value: defaultTeamName,
+            onChange: (e) => setDefaultTeamName(e.target.value),
+            placeholder: "Leave blank to use the system default"
+          }
+        )
+      ] }),
+      skipDefaultTeam && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "Members can be added to teams manually after the organization is created." }) })
+    ] })
+  ] }) });
+}
+function slugify(str) {
+  return str.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+const ExpandableRow = styled.div`
+  width: 100%;
+  background: white;
+  border: 1px solid #dcdce4;
+  border-radius: 8px;
+  overflow: hidden;
+`;
+const ExpandableRowHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  gap: 12px;
+  cursor: pointer;
+  &:hover {
+    background: #fafafe;
+  }
+`;
+const ExpandableRowBody = styled.div`
+  padding: 12px 14px;
+  border-top: 1px solid #eaeaef;
+  background: #fafafe;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+const STANDARD_ORG_FIELDS = /* @__PURE__ */ new Set([
+  "id",
+  "name",
+  "slug",
+  "logo",
+  "metadata",
+  "memberCount",
+  "createdAt",
+  "updatedAt"
+]);
+function OrganizationDetail({
+  organizationId,
+  teamsEnabled,
+  onClose
+}) {
+  const schemaQuery = useModelSchema("organization");
+  const qc = useQueryClient();
+  const { toggleNotification } = useNotification();
+  const { get, put } = useFetchClient();
+  const orgQuery = useQuery({
+    queryKey: ["dash-org", organizationId],
+    queryFn: async () => {
+      const result = await client.dash.organization[organizationId](
+        {},
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error)
+        throw new Error(result.error.message ?? "Failed to load org");
+      return result.data;
+    }
+  });
+  const membersQuery = useQuery({
+    queryKey: ["dash-org-members", organizationId],
+    queryFn: async () => {
+      const result = await client.dash.organization[organizationId].members({}, withContext({ organizationId }, getAuthHeaders()));
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data ?? [];
+    }
+  });
+  const teamsQuery = useQuery({
+    queryKey: ["dash-org-teams", organizationId],
+    queryFn: async () => {
+      if (!teamsEnabled) return [];
+      const result = await client.dash.organization[organizationId].teams({}, withContext({ organizationId }, getAuthHeaders()));
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data ?? [];
+    },
+    enabled: teamsEnabled
+  });
+  const ssoQuery = useQuery({
+    queryKey: ["dash-org-sso", organizationId],
+    queryFn: async () => {
+      const result = await client.dash.organization[organizationId].ssoProviders({}, withContext({ organizationId }, getAuthHeaders()));
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data ?? [];
+    }
+  });
+  const invitationsQuery = useQuery({
+    queryKey: ["dash-org-invitations", organizationId],
+    queryFn: async () => {
+      const result = await client.dash.organization[organizationId].invitations({}, withContext({ organizationId }, getAuthHeaders()));
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data ?? [];
+    }
+  });
+  const strapiOrgQuery = useQuery({
+    queryKey: ["dash-strapi-org", organizationId],
+    enabled: !!orgQuery.data,
+    queryFn: async () => {
+      const { data } = await get(
+        `/better-auth-dashboard/db?uid=plugin::better-auth.organization&filters[id][$eq]=${organizationId}&pagination[pageSize]=1`
+      );
+      return data.results?.[0] ?? null;
+    }
+  });
+  const [activeTab, setActiveTab] = useState("details");
+  const [editName, setEditName] = useState(void 0);
+  const [editSlug, setEditSlug] = useState(void 0);
+  const [editLogo, setEditLogo] = useState(void 0);
+  const [editExtra, setEditExtra] = useState({});
+  const [confirmRemoveMemberId, setConfirmRemoveMemberId] = useState(null);
+  const [confirmDeleteTeamId, setConfirmDeleteTeamId] = useState(
+    null
+  );
+  const [confirmDeleteSsoId, setConfirmDeleteSsoId] = useState(
+    null
+  );
+  const [inviteEmail, setInviteEmail] = useState("");
+  const [inviteRole, setInviteRole] = useState("member");
+  const [confirmCancelInvitationId, setConfirmCancelInvitationId] = useState(null);
+  const handleExtraChange = (name, value) => {
+    setEditExtra((prev) => ({ ...prev, [name]: value }));
+  };
+  const org = orgQuery.data;
+  const extraData = {
+    ...strapiOrgQuery.data ?? {},
+    ...editExtra
+  };
+  const updateOrgMutation = useMutation({
+    mutationFn: async () => {
+      const body = { ...editExtra };
+      if (editName !== void 0) body.name = editName;
+      if (editSlug !== void 0) body.slug = editSlug;
+      if (editLogo !== void 0) body.logo = editLogo;
+      const documentId = strapiOrgQuery.data?.documentId;
+      if (!documentId)
+        throw new Error("Could not resolve documentId for organization");
+      await put(
+        `/better-auth-dashboard/db/${documentId}?uid=plugin::better-auth.organization`,
+        body
+      );
+    },
+    onSuccess: async () => {
+      await qc.invalidateQueries({
+        queryKey: ["dash-strapi-org", organizationId]
+      });
+      qc.invalidateQueries({ queryKey: ["dash-org", organizationId] });
+      qc.invalidateQueries({ queryKey: ["dash-organizations"] });
+      qc.invalidateQueries({ queryKey: ["dash-strapi-org", organizationId] });
+      setEditName(void 0);
+      setEditSlug(void 0);
+      setEditLogo(void 0);
+      setEditExtra({});
+      toggleNotification({
+        type: "success",
+        message: "Organization updated successfully"
+      });
+      onClose();
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Update failed"
+      });
+    }
+  });
+  const [addUserId, setAddUserId] = useState("");
+  const [addRole, setAddRole] = useState("member");
+  const addMemberMutation = useMutation({
+    mutationFn: async () => {
+      const result = await client.dash.organization.addMember(
+        { userId: addUserId, role: addRole },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error)
+        throw new Error(result.error.message ?? "Add member failed");
+      return result.data;
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["dash-org-members", organizationId] });
+      setAddUserId("");
+      setAddRole("member");
+      toggleNotification({ type: "success", message: "Member added" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to add member"
+      });
+    }
+  });
+  const removeMemberMutation = useMutation({
+    mutationFn: async (memberId) => {
+      const result = await client.dash.organization.removeMember(
+        { memberId },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+    },
+    onSuccess: () => {
+      setConfirmRemoveMemberId(null);
+      qc.invalidateQueries({ queryKey: ["dash-org-members", organizationId] });
+      toggleNotification({ type: "success", message: "Member removed" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to remove member"
+      });
+    }
+  });
+  const updateRoleMutation = useMutation({
+    mutationFn: async ({
+      memberId,
+      role
+    }) => {
+      const result = await client.dash.organization.updateMemberRole(
+        { memberId, role },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data;
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["dash-org-members", organizationId] });
+      toggleNotification({ type: "success", message: "Role updated" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to update role"
+      });
+    }
+  });
+  const [newTeamName, setNewTeamName] = useState("");
+  const createTeamMutation = useMutation({
+    mutationFn: async () => {
+      const result = await client.dash.organization.createTeam(
+        { name: newTeamName },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error)
+        throw new Error(result.error.message ?? "Create team failed");
+      return result.data;
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["dash-org-teams", organizationId] });
+      setNewTeamName("");
+      toggleNotification({ type: "success", message: "Team created" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to create team"
+      });
+    }
+  });
+  const deleteTeamMutation = useMutation({
+    mutationFn: async (teamId) => {
+      const result = await client.dash.organization.deleteTeam(
+        { teamId },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+    },
+    onSuccess: () => {
+      setConfirmDeleteTeamId(null);
+      qc.invalidateQueries({ queryKey: ["dash-org-teams", organizationId] });
+      toggleNotification({ type: "success", message: "Team deleted" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to delete team"
+      });
+    }
+  });
+  const deleteSsoMutation = useMutation({
+    mutationFn: async (providerId) => {
+      const result = await client.dash.organization[organizationId].ssoProvider.delete(
+        { providerId },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+    },
+    onSuccess: () => {
+      setConfirmDeleteSsoId(null);
+      qc.invalidateQueries({ queryKey: ["dash-org-sso", organizationId] });
+      toggleNotification({ type: "success", message: "SSO provider deleted" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to delete SSO provider"
+      });
+    }
+  });
+  const inviteMemberMutation = useMutation({
+    mutationFn: async () => {
+      const result = await client.dash.organization.inviteMember(
+        { email: inviteEmail, role: inviteRole, invitedBy: "" },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data;
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({
+        queryKey: ["dash-org-invitations", organizationId]
+      });
+      setInviteEmail("");
+      setInviteRole("member");
+      toggleNotification({ type: "success", message: "Invitation sent" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to invite"
+      });
+    }
+  });
+  const cancelInvitationMutation = useMutation({
+    mutationFn: async (invitationId) => {
+      const result = await client.dash.organization.cancelInvitation(
+        { invitationId },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+    },
+    onSuccess: () => {
+      setConfirmCancelInvitationId(null);
+      qc.invalidateQueries({
+        queryKey: ["dash-org-invitations", organizationId]
+      });
+      toggleNotification({ type: "success", message: "Invitation cancelled" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to cancel"
+      });
+    }
+  });
+  const resendInvitationMutation = useMutation({
+    mutationFn: async (invitationId) => {
+      const result = await client.dash.organization.resendInvitation(
+        { invitationId },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+    },
+    onSuccess: () => {
+      toggleNotification({ type: "success", message: "Invitation resent" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to resend"
+      });
+    }
+  });
+  const members = membersQuery.data ?? [];
+  const teams = teamsQuery.data ?? [];
+  const ssoProviders = ssoQuery.data ?? [];
+  const invitations = invitationsQuery.data ?? [];
+  const hasOrgEdits = editName !== void 0 || editSlug !== void 0 || editLogo !== void 0 || Object.keys(editExtra).length > 0;
+  const customFields = Object.entries(schemaQuery.data ?? {}).filter(([name]) => !STANDARD_ORG_FIELDS.has(name)).map(([name, attribute]) => ({ name, attribute }));
+  const detailsFooter = activeTab === "details" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "tertiary",
+        onClick: () => {
+          setEditName(void 0);
+          setEditSlug(void 0);
+          setEditLogo(void 0);
+          setEditExtra({});
+        },
+        children: "Discard"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: !hasOrgEdits,
+        loading: updateOrgMutation.isLoading,
+        onClick: () => updateOrgMutation.mutate(),
+        "data-testid": "save-org-btn",
+        children: "Save changes"
+      }
+    )
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxs(
+    Drawer,
+    {
+      title: org?.name ?? "Organization",
+      footer: detailsFooter,
+      onClose,
+      "data-testid": "org-detail-drawer",
+      children: [
+        orgQuery.isLoading ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: "Loading…" }) : orgQuery.isError ? /* @__PURE__ */ jsx(
+          Alert,
+          {
+            closeLabel: "Close",
+            title: "Failed to load organization",
+            variant: "danger",
+            children: orgQuery.error instanceof Error ? orgQuery.error.message : "An error occurred"
+          }
+        ) : /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: "details", onValueChange: setActiveTab, children: [
+          /* @__PURE__ */ jsxs(Tabs.List, { children: [
+            /* @__PURE__ */ jsx(Tabs.Trigger, { value: "details", children: "Details" }),
+            /* @__PURE__ */ jsxs(Tabs.Trigger, { value: "members", "data-testid": "org-members-tab", children: [
+              "Members (",
+              members.length,
+              ")"
+            ] }),
+            teamsEnabled && /* @__PURE__ */ jsxs(Tabs.Trigger, { value: "teams", children: [
+              "Teams (",
+              teams.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxs(Tabs.Trigger, { value: "invitations", children: [
+              "Invitations (",
+              invitations.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxs(Tabs.Trigger, { value: "sso", children: [
+              "SSO (",
+              ssoProviders.length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: "details", children: /* @__PURE__ */ jsxs(EditLayout, { children: [
+            /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, children: [
+              /* @__PURE__ */ jsxs(FormSection, { children: [
+                /* @__PURE__ */ jsx(SectionLabel, { children: "Details" }),
+                /* @__PURE__ */ jsxs(Field.Root, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Name" }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      value: editName ?? org?.name ?? "",
+                      onChange: (e) => setEditName(e.target.value),
+                      "data-testid": "org-name-input"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Field.Root, { hint: "Used in URLs", style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Slug" }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      value: editSlug ?? org?.slug ?? "",
+                      onChange: (e) => setEditSlug(e.target.value),
+                      "data-testid": "org-slug-input"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Field.Hint, {})
+                ] }),
+                /* @__PURE__ */ jsx(
+                  MediaPickerField,
+                  {
+                    label: "Logo URL",
+                    name: "logo",
+                    value: editLogo ?? org?.logo ?? "",
+                    onChange: setEditLogo,
+                    placeholder: "https://example.com/logo.png",
+                    hint: "Optional — publicly accessible image URL"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                CustomFieldsSection,
+                {
+                  fields: customFields,
+                  data: extraData,
+                  onChange: handleExtraChange
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(EditSidebar, { children: [
+              /* @__PURE__ */ jsxs(FormSection, { children: [
+                /* @__PURE__ */ jsx(SectionLabel, { children: "Details" }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "grid",
+                      gridTemplateColumns: "1fr 1fr",
+                      gap: 12
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(MetaItem, { style: { gridColumn: "1 / -1" }, children: [
+                        /* @__PURE__ */ jsx(MetaKey, { children: "Organization ID" }),
+                        /* @__PURE__ */ jsx(MonoChip, { children: org?.id })
+                      ] }),
+                      /* @__PURE__ */ jsxs(MetaItem, { children: [
+                        /* @__PURE__ */ jsx(MetaKey, { children: "Members" }),
+                        /* @__PURE__ */ jsx(MetaVal, { children: org?.memberCount ?? 0 })
+                      ] }),
+                      /* @__PURE__ */ jsxs(MetaItem, { children: [
+                        /* @__PURE__ */ jsx(MetaKey, { children: "Created" }),
+                        /* @__PURE__ */ jsx(MetaVal, { children: org?.createdAt ? new Date(org.createdAt).toLocaleDateString() : "—" })
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                EditViewSidePanels,
+                {
+                  model: "plugin::better-auth.organization",
+                  documentId: strapiOrgQuery.data?.documentId,
+                  document: strapiOrgQuery.data ?? void 0
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: "members", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, paddingTop: 6, children: [
+            /* @__PURE__ */ jsxs(FormSection, { children: [
+              /* @__PURE__ */ jsx(SectionLabel, { children: "Add member" }),
+              /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+                /* @__PURE__ */ jsx(Grid.Item, { col: 8, children: /* @__PURE__ */ jsx(
+                  UserCombobox,
+                  {
+                    label: "User",
+                    value: addUserId,
+                    onChange: setAddUserId
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Role" }),
+                  /* @__PURE__ */ jsxs(
+                    SingleSelect,
+                    {
+                      value: addRole,
+                      onChange: (role) => setAddRole(String(role)),
+                      "aria-label": "Member role",
+                      children: [
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "member", children: "Member" }),
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "admin", children: "Admin" }),
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "owner", children: "Owner" })
+                      ]
+                    }
+                  )
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "S",
+                  startIcon: /* @__PURE__ */ jsx(Plus, {}),
+                  disabled: !addUserId,
+                  loading: addMemberMutation.isLoading,
+                  onClick: () => addMemberMutation.mutate(),
+                  "data-testid": "add-member-btn",
+                  children: "Add member"
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs(FormSection, { children: [
+              /* @__PURE__ */ jsxs(SectionLabel, { children: [
+                "Members (",
+                members.length,
+                ")"
+              ] }),
+              membersQuery.isLoading ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: "Loading…" }) : members.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "No members yet." }) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: members.map((member) => /* @__PURE__ */ jsxs(AccountRow, { "data-testid": "member-row", children: [
+                /* @__PURE__ */ jsxs(
+                  Flex,
+                  {
+                    direction: "column",
+                    gap: 1,
+                    alignItems: "flex-start",
+                    style: { flex: 1 },
+                    children: [
+                      /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: member.user?.name ?? "Unknown" }),
+                      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: member.user?.email })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+                  /* @__PURE__ */ jsx(Field.Root, { style: { width: 110 }, children: /* @__PURE__ */ jsxs(
+                    SingleSelect,
+                    {
+                      value: member.role,
+                      onChange: (role) => updateRoleMutation.mutate({
+                        memberId: member.id,
+                        role: String(role)
+                      }),
+                      size: "S",
+                      "aria-label": "Member role",
+                      children: [
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "member", children: "Member" }),
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "admin", children: "Admin" }),
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "owner", children: "Owner" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      label: "Remove member",
+                      onClick: () => setConfirmRemoveMemberId(member.id),
+                      "data-testid": "remove-member-btn",
+                      children: /* @__PURE__ */ jsx(Trash, {})
+                    }
+                  )
+                ] })
+              ] }, member.id)) })
+            ] })
+          ] }) }),
+          teamsEnabled && /* @__PURE__ */ jsx(Tabs.Content, { value: "teams", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, paddingTop: 6, children: [
+            /* @__PURE__ */ jsxs(FormSection, { children: [
+              /* @__PURE__ */ jsx(SectionLabel, { children: "Create team" }),
+              /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-end", children: [
+                /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Team name" }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      value: newTeamName,
+                      onChange: (e) => setNewTeamName(e.target.value),
+                      placeholder: "e.g. Engineering"
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    startIcon: /* @__PURE__ */ jsx(Plus, {}),
+                    disabled: !newTeamName,
+                    loading: createTeamMutation.isLoading,
+                    onClick: () => createTeamMutation.mutate(),
+                    children: "Create"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(FormSection, { children: [
+              /* @__PURE__ */ jsxs(SectionLabel, { children: [
+                "Teams (",
+                teams.length,
+                ")"
+              ] }),
+              teamsQuery.isLoading ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: "Loading…" }) : teams.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "No teams yet." }) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: teams.map((team) => /* @__PURE__ */ jsx(
+                TeamRow,
+                {
+                  team,
+                  organizationId,
+                  onDelete: () => setConfirmDeleteTeamId(team.id)
+                },
+                team.id
+              )) })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: "sso", children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 5, paddingTop: 6, children: /* @__PURE__ */ jsxs(FormSection, { children: [
+            /* @__PURE__ */ jsx(SectionLabel, { children: "SSO providers" }),
+            ssoQuery.isLoading ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: "Loading…" }) : ssoProviders.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "No SSO providers configured." }) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: ssoProviders.map((provider) => /* @__PURE__ */ jsxs(
+              AccountRow,
+              {
+                "data-testid": "sso-provider-row",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      direction: "column",
+                      gap: 1,
+                      alignItems: "flex-start",
+                      style: { flex: 1 },
+                      children: [
+                        /* @__PURE__ */ jsx(ProviderBadge, { children: provider.providerId }),
+                        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: provider.domain }),
+                        /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+                          "Issuer: ",
+                          provider.issuer
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      label: "Delete SSO provider",
+                      onClick: () => setConfirmDeleteSsoId(provider.providerId),
+                      children: /* @__PURE__ */ jsx(Trash, {})
+                    }
+                  )
+                ]
+              },
+              provider.id
+            )) })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: "invitations", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, paddingTop: 6, children: [
+            /* @__PURE__ */ jsxs(FormSection, { children: [
+              /* @__PURE__ */ jsx(SectionLabel, { children: "Invite member by email" }),
+              /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+                /* @__PURE__ */ jsx(Grid.Item, { col: 8, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Email address" }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      type: "email",
+                      value: inviteEmail,
+                      onChange: (e) => setInviteEmail(e.target.value),
+                      placeholder: "user@example.com"
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: "Role" }),
+                  /* @__PURE__ */ jsxs(
+                    SingleSelect,
+                    {
+                      value: inviteRole,
+                      onChange: (v) => setInviteRole(String(v)),
+                      "aria-label": "Invite role",
+                      children: [
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "member", children: "Member" }),
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "admin", children: "Admin" }),
+                        /* @__PURE__ */ jsx(SingleSelectOption, { value: "owner", children: "Owner" })
+                      ]
+                    }
+                  )
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "S",
+                  startIcon: /* @__PURE__ */ jsx(Plus, {}),
+                  disabled: !inviteEmail,
+                  loading: inviteMemberMutation.isLoading,
+                  onClick: () => inviteMemberMutation.mutate(),
+                  children: "Send invitation"
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs(FormSection, { children: [
+              /* @__PURE__ */ jsxs(SectionLabel, { children: [
+                "Invitations (",
+                invitations.length,
+                ")"
+              ] }),
+              invitationsQuery.isLoading ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: "Loading…" }) : invitations.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "No invitations yet." }) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: invitations.map((inv) => {
+                const statusColor = {
+                  pending: "#f59e0b",
+                  accepted: "#5cb176",
+                  rejected: "#d02b20",
+                  canceled: "#8e8ea9"
+                };
+                const color = statusColor[inv.status] ?? "#8e8ea9";
+                const isPending = inv.status === "pending";
+                return /* @__PURE__ */ jsxs(AccountRow, { children: [
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      direction: "column",
+                      gap: 1,
+                      alignItems: "flex-start",
+                      style: { flex: 1 },
+                      children: [
+                        /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: inv.user?.name ?? inv.email }),
+                        /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+                          inv.email,
+                          " · role: ",
+                          inv.role
+                        ] }),
+                        /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+                          "Expires",
+                          " ",
+                          new Date(inv.expiresAt).toLocaleDateString()
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+                    /* @__PURE__ */ jsx(
+                      MonoChip,
+                      {
+                        style: {
+                          color,
+                          borderColor: color,
+                          background: `${color}18`
+                        },
+                        children: inv.status
+                      }
+                    ),
+                    isPending && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "S",
+                          variant: "secondary",
+                          loading: resendInvitationMutation.isLoading,
+                          onClick: () => resendInvitationMutation.mutate(inv.id),
+                          children: "Resend"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          label: "Cancel invitation",
+                          onClick: () => setConfirmCancelInvitationId(inv.id),
+                          children: /* @__PURE__ */ jsx(Trash, {})
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }, inv.id);
+              }) })
+            ] })
+          ] }) })
+        ] }),
+        confirmRemoveMemberId && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: "Remove member",
+            message: "Are you sure you want to remove this member from the organization?",
+            confirmLabel: "Remove",
+            loading: removeMemberMutation.isLoading,
+            onConfirm: () => removeMemberMutation.mutate(confirmRemoveMemberId),
+            onCancel: () => setConfirmRemoveMemberId(null)
+          }
+        ),
+        confirmDeleteTeamId && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: "Delete team",
+            message: "Are you sure you want to delete this team? All team members will be removed. This action cannot be undone.",
+            confirmLabel: "Delete",
+            loading: deleteTeamMutation.isLoading,
+            onConfirm: () => deleteTeamMutation.mutate(confirmDeleteTeamId),
+            onCancel: () => setConfirmDeleteTeamId(null)
+          }
+        ),
+        confirmDeleteSsoId && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: "Delete SSO provider",
+            message: "Are you sure you want to delete this SSO provider? Members using this provider will need to authenticate differently.",
+            confirmLabel: "Delete",
+            loading: deleteSsoMutation.isLoading,
+            onConfirm: () => deleteSsoMutation.mutate(confirmDeleteSsoId),
+            onCancel: () => setConfirmDeleteSsoId(null)
+          }
+        ),
+        confirmCancelInvitationId && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: "Cancel invitation",
+            message: "Are you sure you want to cancel this invitation? The invite link will no longer work.",
+            confirmLabel: "Cancel invitation",
+            loading: cancelInvitationMutation.isLoading,
+            onConfirm: () => cancelInvitationMutation.mutate(confirmCancelInvitationId),
+            onCancel: () => setConfirmCancelInvitationId(null)
+          }
+        )
+      ]
+    }
+  );
+}
+function TeamRow({
+  team,
+  organizationId,
+  onDelete
+}) {
+  const qc = useQueryClient();
+  const [expanded, setExpanded] = useState(false);
+  const [confirmRemoveTeamMemberId, setConfirmRemoveTeamMemberId] = useState(null);
+  const teamMembersQuery = useQuery({
+    queryKey: ["dash-team-members", organizationId, team.id],
+    queryFn: async () => {
+      const result = await client.dash.organization[
+        // @ts-expect-error
+        organizationId
+      ].teams[team.id].members(
+        { params: { orgId: organizationId, teamId: team.id } },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data ?? [];
+    },
+    enabled: expanded
+  });
+  const [addUserId, setAddUserId] = useState("");
+  const addTeamMemberMutation = useMutation({
+    mutationFn: async () => {
+      const result = await client.dash.organization.addTeamMember(
+        { teamId: team.id, userId: addUserId },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+      return result.data;
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({
+        queryKey: ["dash-team-members", organizationId, team.id]
+      });
+      setAddUserId("");
+    }
+  });
+  const removeTeamMemberMutation = useMutation({
+    mutationFn: async (userId) => {
+      const result = await client.dash.organization.removeTeamMember(
+        { teamId: team.id, userId },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error) throw new Error(result.error.message ?? "Failed");
+    },
+    onSuccess: () => {
+      setConfirmRemoveTeamMemberId(null);
+      qc.invalidateQueries({
+        queryKey: ["dash-team-members", organizationId, team.id]
+      });
+    }
+  });
+  return /* @__PURE__ */ jsxs(ExpandableRow, { "data-testid": "team-row", children: [
+    /* @__PURE__ */ jsxs(ExpandableRowHeader, { onClick: () => setExpanded((e) => !e), children: [
+      /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          direction: "column",
+          gap: 1,
+          alignItems: "flex-start",
+          style: { flex: 1 },
+          children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: team.name }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+              expanded ? "Collapse" : "Expand",
+              " ·",
+              " ",
+              teamMembersQuery.data?.length ?? "—",
+              " members"
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral400", children: expanded ? "▲" : "▼" }),
+        /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(IconButton, { label: "Delete team", onClick: onDelete, children: /* @__PURE__ */ jsx(Trash, {}) }) })
+      ] })
+    ] }),
+    expanded && /* @__PURE__ */ jsxs(ExpandableRowBody, { children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-end", children: [
+        /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+          UserCombobox,
+          {
+            label: "Add member to team",
+            value: addUserId,
+            onChange: setAddUserId
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "S",
+            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+            disabled: !addUserId,
+            loading: addTeamMemberMutation.isLoading,
+            onClick: () => addTeamMemberMutation.mutate(),
+            children: "Add"
+          }
+        )
+      ] }),
+      teamMembersQuery.isLoading ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "Loading…" }) : (teamMembersQuery.data ?? []).length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "No members in this team." }) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: (teamMembersQuery.data ?? []).map((tm) => /* @__PURE__ */ jsxs(AccountRow, { children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: "column",
+            gap: 1,
+            alignItems: "flex-start",
+            style: { flex: 1 },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: tm.user?.name ?? tm.userId }),
+              tm.user?.email && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: tm.user.email })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: "Remove from team",
+            onClick: () => setConfirmRemoveTeamMemberId(tm.userId),
+            children: /* @__PURE__ */ jsx(Trash, {})
+          }
+        )
+      ] }, tm.id)) })
+    ] }),
+    confirmRemoveTeamMemberId && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        title: "Remove from team",
+        message: "Are you sure you want to remove this member from the team?",
+        confirmLabel: "Remove",
+        loading: removeTeamMemberMutation.isLoading,
+        onConfirm: () => removeTeamMemberMutation.mutate(confirmRemoveTeamMemberId),
+        onCancel: () => setConfirmRemoveTeamMemberId(null)
+      }
+    )
+  ] });
+}
+const PAGE_SIZE = 25;
+const fadeUp = keyframes`
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+`;
+const Wrap = styled.div`
+  padding: 28px 32px;
+  background: #f6f6f9;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+const PageHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+const TitleBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const PageTitle = styled.h1`
+  margin: 0;
+  font-size: 22px;
+  font-weight: 800;
+  color: #32324d;
+  letter-spacing: -0.03em;
+`;
+const PageSubtitle = styled.p`
+  margin: 0;
+  font-size: 12px;
+  color: #8e8ea9;
+`;
+const TableCard = styled.div`
+  background: #ffffff;
+  border: 1px solid #eaeaef;
+  border-radius: 10px;
+  overflow: hidden;
+`;
+const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+`;
+const TH = styled.th`
+  text-align: left;
+  padding: 10px 14px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #8e8ea9;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  border-bottom: 1px solid #eaeaef;
+  background: #fafafa;
+  white-space: nowrap;
+  &:first-child { padding-left: 20px; }
+  &:last-child  { padding-right: 20px; }
+`;
+const THCheck = styled(TH)`
+  width: 44px;
+`;
+const THActions = styled(TH)`
+  width: 80px;
+`;
+const TD = styled.td`
+  padding: 11px 14px;
+  font-size: 12px;
+  color: #32324d;
+  border-bottom: 1px solid #f5f5f9;
+  vertical-align: middle;
+  &:first-child { padding-left: 20px; }
+  &:last-child  { padding-right: 20px; }
+`;
+const TDCheck = styled(TD)`
+  width: 44px;
+`;
+const TDActions = styled(TD)`
+  width: 80px;
+`;
+const TR = styled.tr`
+  animation: ${fadeUp} 280ms ease both;
+  animation-delay: ${(p) => (p.$i ?? 0) * 25}ms;
+  background: ${(p) => p.$selected ? "#f0f0ff" : "transparent"};
+  transition: background 120ms ease;
+  &:hover td { background: ${(p) => p.$selected ? "#e8e8ff" : "#fafafe"}; }
+  &:last-child td { border-bottom: none; }
+`;
+const SlugChip = styled.span`
+  display: inline-block;
+  background: #f5f5f9;
+  color: #666687;
+  border: 1px solid #eaeaef;
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 11px;
+`;
+const CountChip = styled.span`
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 20px;
+  font-size: 10px;
+  font-weight: 700;
+  background: #f0f0ff;
+  color: #4945ff;
+`;
+const OrgName = styled.span`
+  font-size: 12px;
+  font-weight: 600;
+  color: #32324d;
+`;
+const DateText = styled.span`
+  font-size: 11px;
+  color: #b8b8c7;
+  font-variant-numeric: tabular-nums;
+`;
+const Toolbar = styled.div`
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+`;
+const OrgLogoFallback = styled.div`
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  background: ${(p) => p.$bg};
+  color: ${(p) => p.$fg};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  flex-shrink: 0;
+  user-select: none;
+`;
+const ORG_COLORS = [
+  { bg: "#EAF5FF", fg: "#0C75AF" },
+  { bg: "#F0F0FF", fg: "#4945FF" },
+  { bg: "#EAFBE7", fg: "#328048" },
+  { bg: "#FFF3D3", fg: "#8E6A00" },
+  { bg: "#FCECEA", fg: "#D02B20" },
+  { bg: "#F6ECFC", fg: "#8312D1" }
+];
+function OrgAvatar({ name, logo }) {
+  if (logo) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        tag: "img",
+        src: logo,
+        alt: "",
+        style: {
+          width: 30,
+          height: 30,
+          borderRadius: 7,
+          objectFit: "cover",
+          flexShrink: 0
+        }
+      }
+    );
+  }
+  const color = ORG_COLORS[(name.charCodeAt(0) || 0) % ORG_COLORS.length];
+  const initials = name.slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsx(OrgLogoFallback, { $bg: color.bg, $fg: color.fg, children: initials });
+}
+function OrganizationsPage({ teamsEnabled }) {
+  const rbac = useRBAC(PERMISSIONS.organization);
+  const qc = useQueryClient();
+  const { toggleNotification } = useNotification();
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const [showCreate, setShowCreate] = useState(false);
+  const [detailOrgId, setDetailOrgId] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(null);
+  const [confirmDeleteMany, setConfirmDeleteMany] = useState(false);
+  const offset = (page - 1) * PAGE_SIZE;
+  const orgsQuery = useQuery({
+    queryKey: ["dash-organizations", page, search],
+    queryFn: async () => {
+      const result = await client.dash.listOrganizations({
+        query: {
+          limit: PAGE_SIZE,
+          offset,
+          sortBy: "createdAt",
+          sortOrder: "desc",
+          ...search ? { search } : {}
+        }
+      });
+      if (result.error)
+        throw new Error(result.error.message ?? "Failed to load organizations");
+      return result.data;
+    },
+    keepPreviousData: true
+  });
+  const deleteMutation = useMutation({
+    mutationFn: async (organizationId) => {
+      const result = await client.dash.organization.delete(
+        { organizationId },
+        withContext({ organizationId }, getAuthHeaders())
+      );
+      if (result.error)
+        throw new Error(result.error.message ?? "Delete failed");
+    },
+    onSuccess: () => {
+      setConfirmDelete(null);
+      qc.invalidateQueries({ queryKey: ["dash-organizations"] });
+      toggleNotification({ type: "success", message: "Organization deleted" });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to delete organization"
+      });
+    }
+  });
+  const deleteManyMutation = useMutation({
+    mutationFn: async (organizationIds) => {
+      const result = await client.dash.organization.deleteMany(
+        {},
+        withContext({ organizationIds }, getAuthHeaders())
+      );
+      if (result.error)
+        throw new Error(result.error.message ?? "Delete failed");
+      return result.data;
+    },
+    onSuccess: (_data, organizationIds) => {
+      setConfirmDeleteMany(false);
+      setSelected(/* @__PURE__ */ new Set());
+      qc.invalidateQueries({ queryKey: ["dash-organizations"] });
+      toggleNotification({
+        type: "success",
+        message: `${organizationIds.length} organization${organizationIds.length !== 1 ? "s" : ""} deleted`
+      });
+    },
+    onError: (err) => {
+      toggleNotification({
+        type: "danger",
+        message: err.message ?? "Failed to delete organizations"
+      });
+    }
+  });
+  const orgs = orgsQuery.data && "organizations" in orgsQuery.data ? orgsQuery.data.organizations : [];
+  const total = orgsQuery.data && "total" in orgsQuery.data ? orgsQuery.data.total : 0;
+  const pageCount = Math.ceil(total / PAGE_SIZE);
+  const allSelected = orgs.length > 0 && orgs.every((o) => selected.has(o.id));
+  const someSelected = selected.size > 0;
+  const toggleSelect = (id) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const handleSelectAll = () => {
+    if (allSelected) setSelected(/* @__PURE__ */ new Set());
+    else setSelected(new Set(orgs.map((o) => o.id)));
+  };
+  const handleSearch = (e) => {
+    e.preventDefault();
+    setSearch(searchInput);
+    setPage(1);
+  };
+  return /* @__PURE__ */ jsxs(Wrap, { "data-testid": "organizations-page", children: [
+    /* @__PURE__ */ jsxs(PageHeader, { children: [
+      /* @__PURE__ */ jsxs(TitleBlock, { children: [
+        /* @__PURE__ */ jsx(PageTitle, { children: "Organizations" }),
+        /* @__PURE__ */ jsxs(PageSubtitle, { children: [
+          total.toLocaleString(),
+          " total"
+        ] })
+      ] }),
+      rbac.allowedActions.canCreate && /* @__PURE__ */ jsx(
+        Button,
+        {
+          startIcon: /* @__PURE__ */ jsx(Plus, {}),
+          onClick: () => setShowCreate(true),
+          "data-testid": "create-org-btn",
+          children: "Create organization"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Toolbar, { children: [
+      /* @__PURE__ */ jsx(SearchForm, { onSubmit: handleSearch, children: /* @__PURE__ */ jsx(
+        Searchbar,
+        {
+          clearLabel: "Clear",
+          name: "search",
+          placeholder: "Search organizations…",
+          value: searchInput,
+          onChange: (e) => setSearchInput(e.target.value),
+          onClear: () => {
+            setSearchInput("");
+            setSearch("");
+            setPage(1);
+          },
+          children: "Search organizations"
+        }
+      ) }),
+      someSelected && rbac.allowedActions.canDelete && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "danger-light",
+          size: "S",
+          onClick: () => setConfirmDeleteMany(true),
+          "data-testid": "delete-selected-orgs-btn",
+          children: [
+            "Delete ",
+            selected.size,
+            " selected"
+          ]
+        }
+      )
+    ] }),
+    orgsQuery.isError && /* @__PURE__ */ jsx("div", { style: { color: "#d02b20", fontSize: 12, padding: "8px 0" }, children: orgsQuery.error instanceof Error ? orgsQuery.error.message : "An error occurred" }),
+    /* @__PURE__ */ jsx(TableCard, { children: orgsQuery.isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading organizations…" }) }) : /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        rbac.allowedActions.canDelete && /* @__PURE__ */ jsx(THCheck, { children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: allSelected,
+            onCheckedChange: handleSelectAll,
+            "aria-label": "Select all"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TH, { children: "Name" }),
+        /* @__PURE__ */ jsx(TH, { children: "Slug" }),
+        /* @__PURE__ */ jsx(TH, { children: "Members" }),
+        /* @__PURE__ */ jsx(TH, { children: "Created" }),
+        /* @__PURE__ */ jsx(THActions, {})
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: orgs.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        TD,
+        {
+          colSpan: 6,
+          style: {
+            textAlign: "center",
+            padding: "40px",
+            color: "#8e8ea9"
+          },
+          "data-testid": "orgs-empty",
+          children: search ? `No organizations matching "${search}"` : "No organizations found"
+        }
+      ) }) : orgs.map((org, i) => /* @__PURE__ */ jsxs(
+        TR,
+        {
+          $selected: selected.has(org.id),
+          $i: i,
+          "data-testid": "org-row",
+          children: [
+            rbac.allowedActions.canDelete && /* @__PURE__ */ jsx(TDCheck, { children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: selected.has(org.id),
+                onCheckedChange: () => toggleSelect(org.id),
+                "aria-label": `Select ${org.name}`
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+              /* @__PURE__ */ jsx(OrgAvatar, { name: org.name, logo: org.logo }),
+              /* @__PURE__ */ jsx(OrgName, { children: org.name })
+            ] }) }),
+            /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsx(SlugChip, { children: org.slug }) }),
+            /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsx(CountChip, { children: org.memberCount }) }),
+            /* @__PURE__ */ jsx(TD, { children: /* @__PURE__ */ jsx(DateText, { children: new Date(org.createdAt).toLocaleDateString() }) }),
+            /* @__PURE__ */ jsx(TDActions, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, justifyContent: "flex-end", children: [
+              rbac.allowedActions.canUpdate && /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: "Edit organization",
+                  onClick: () => setDetailOrgId(org.id),
+                  "data-testid": "edit-org-btn",
+                  children: /* @__PURE__ */ jsx(Pencil, {})
+                }
+              ),
+              rbac.allowedActions.canDelete && /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: "Delete organization",
+                  onClick: () => setConfirmDelete(org.id),
+                  "data-testid": "delete-org-btn",
+                  children: /* @__PURE__ */ jsx(Trash, {})
+                }
+              )
+            ] }) })
+          ]
+        },
+        org.id
+      )) })
+    ] }) }),
+    pageCount > 1 && /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: "S",
+          disabled: page === 1,
+          onClick: () => setPage((p) => p - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: "S",
+          disabled: page >= pageCount,
+          onClick: () => setPage((p) => p + 1),
+          children: "Next"
+        }
+      )
+    ] }) }),
+    rbac.allowedActions.canCreate && showCreate && /* @__PURE__ */ jsx(
+      CreateOrganizationDialog,
+      {
+        teamsEnabled,
+        onClose: () => setShowCreate(false)
+      }
+    ),
+    rbac.allowedActions.canUpdate && detailOrgId && /* @__PURE__ */ jsx(
+      OrganizationDetail,
+      {
+        organizationId: detailOrgId,
+        teamsEnabled,
+        onClose: () => setDetailOrgId(null)
+      }
+    ),
+    rbac.allowedActions.canDelete && confirmDelete && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        title: "Delete organization",
+        message: "Are you sure you want to delete this organization? All members and teams will be removed. This action cannot be undone.",
+        confirmLabel: "Delete",
+        loading: deleteMutation.isLoading,
+        onConfirm: () => deleteMutation.mutate(confirmDelete),
+        onCancel: () => setConfirmDelete(null)
+      }
+    ),
+    rbac.allowedActions.canDelete && confirmDeleteMany && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        title: `Delete ${selected.size} organization${selected.size !== 1 ? "s" : ""}`,
+        message: `Are you sure you want to delete ${selected.size} organization${selected.size !== 1 ? "s" : ""}? This action cannot be undone.`,
+        confirmLabel: "Delete all",
+        loading: deleteManyMutation.isLoading,
+        onConfirm: () => deleteManyMutation.mutate([...selected]),
+        onCancel: () => setConfirmDeleteMany(false)
+      }
+    )
+  ] });
+}
+function ProtectedOrganizationsPage() {
+  const { data: organizationOptions } = useOrganizationOptions();
+  const teamsEnabled = organizationOptions?.teamsEnabled ?? false;
+  return /* @__PURE__ */ jsx(
+    Page.Protect,
+    {
+      permissions: PERMISSIONS.organization.filter(
+        (p) => p.action === `plugin::${PLUGIN_ID}.organization.read`
+      ),
+      children: /* @__PURE__ */ jsx(OrganizationsPage, { teamsEnabled })
+    }
+  );
+}
+export {
+  OrganizationsPage,
+  ProtectedOrganizationsPage as default
+};