@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/widgets/management/tabs/c4-management-billing-tab.d.ts

@@ -0,0 +1,43 @@
+import { type UsageAlertDto } from '@camunda/ccma-shared-types';
+import type { JSX } from 'react';
+type Translate = (key: string, options?: Record<string, unknown>) => string;
+interface ClusterReservation {
+    id: string;
+    name: string;
+    used: number;
+    clusters: number;
+    reserved: number;
+}
+export interface C4ManagementBillingTabProps {
+    billingIsEnterprise: boolean;
+    billingLoading: boolean;
+    billingError: string | undefined;
+    billingGeneralData: {
+        displaySalesPlan: string;
+        lastUpdated: Date;
+    };
+    billingEnterprisePeriod: {
+        periodStart: Date;
+        periodEnd: Date;
+        nextRenewal: Date;
+    };
+    billingUsageAlerts: UsageAlertDto[];
+    billingIncludedMetrics: {
+        processInstances: number;
+        decisionInstances: number;
+        taskUsers: number;
+    };
+    billingCurrentMetrics: {
+        processInstances: number;
+        decisionInstances: number;
+        taskUsers: number;
+    };
+    billingClusterReservations: ClusterReservation[];
+    enterpriseDevOnly: boolean;
+    membersCount: number;
+    changeTab: (tabId: string) => void;
+    onUpdateUsageAlert: (alertId: string, threshold: number, enabled: boolean) => Promise<void>;
+    t?: Translate;
+}
+export declare const C4ManagementBillingTab: (props: C4ManagementBillingTabProps) => JSX.Element;
+export {};

package/lib/esm/widgets/management/tabs/c4-management-billing-tab.js

@@ -0,0 +1,340 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { UsageAlertMetric, UsageAlertThresholdLimits, } from '@camunda/ccma-shared-types';
+import { Modal, Stack } from '@carbon/react';
+import { useState } from 'react';
+import { C4BillingPage } from '../../../components/c4-billing-page/c4-billing-page.js';
+import { C4UsageAlertUpdateModal } from '../../../components/c4-usage-alert-update-modal/c4-usage-alert-update-modal.js';
+function safeTranslate(t, key, fallback, options) {
+    try {
+        const translated = t?.(key, options);
+        return translated && translated !== key ? translated : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+function formatDate(date) {
+    try {
+        return Intl.DateTimeFormat('en-GB', {
+            hour12: false,
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+        }).format(date);
+    }
+    catch {
+        return '';
+    }
+}
+function formatDateTime(date) {
+    try {
+        return Intl.DateTimeFormat('en-GB', {
+            hour12: false,
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        }).format(date);
+    }
+    catch {
+        return '';
+    }
+}
+export const C4ManagementBillingTab = (props) => {
+    const [usageAlertUpdateModalOpen, setUsageAlertUpdateModalOpen] = useState(false);
+    const [usageAlertUpdateTarget, setUsageAlertUpdateTarget] = useState(undefined);
+    const [usageAlertUpdateThreshold, setUsageAlertUpdateThreshold] = useState(0);
+    const [usageAlertUpdateEnabled, setUsageAlertUpdateEnabled] = useState(false);
+    const [usageAlertUpdateSaving, setUsageAlertUpdateSaving] = useState(false);
+    const [usageAlertUpdateInvalid, setUsageAlertUpdateInvalid] = useState(false);
+    const [usageAlertUpdateInvalidText, setUsageAlertUpdateInvalidText] = useState('');
+    const [usageAlertUpdateError, setUsageAlertUpdateError] = useState(undefined);
+    if (!props.billingIsEnterprise) {
+        return (_jsx("p", { children: safeTranslate(props.t, 'orgmanagement:tabs.billing.errors.default', 'Billing is not available.') }));
+    }
+    const getMetricLabel = (metric) => {
+        switch (metric) {
+            case UsageAlertMetric.DECISION_INSTANCES:
+                return safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.table.data.decisionInstances', 'Decision Instances');
+            case UsageAlertMetric.PROCESS_INSTANCES:
+                return safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.table.data.processInstances', 'Process Instances');
+            case UsageAlertMetric.TASK_USERS:
+                return safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.table.data.taskUsers', 'Task Users');
+        }
+    };
+    const usageAlertsRows = props.billingUsageAlerts
+        .slice()
+        .filter((alert) => {
+        switch (alert.metric) {
+            case UsageAlertMetric.PROCESS_INSTANCES:
+                return props.billingIncludedMetrics.processInstances > 0;
+            case UsageAlertMetric.DECISION_INSTANCES:
+                return props.billingIncludedMetrics.decisionInstances > 0;
+            case UsageAlertMetric.TASK_USERS:
+                return props.billingIncludedMetrics.taskUsers > 0;
+            default:
+                return false;
+        }
+    })
+        .sort((a) => (a.metric === UsageAlertMetric.PROCESS_INSTANCES ? -1 : 1))
+        .map((alert) => {
+        return {
+            key: alert.uuid,
+            metric: getMetricLabel(alert.metric),
+            threshold: `${alert.threshold}%`,
+            status: alert.enabled
+                ? safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.table.data.on', 'On')
+                : safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.table.data.off', 'Off'),
+            action: {
+                label: safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.table.data.edit', 'Edit'),
+                onClick: () => {
+                    setUsageAlertUpdateTarget(alert);
+                    setUsageAlertUpdateThreshold(alert.threshold);
+                    setUsageAlertUpdateEnabled(alert.enabled);
+                    setUsageAlertUpdateInvalid(false);
+                    setUsageAlertUpdateInvalidText('');
+                    setUsageAlertUpdateError(undefined);
+                    setUsageAlertUpdateModalOpen(true);
+                },
+            },
+        };
+    });
+    const hasAdvancedOfferingClusters = props.billingClusterReservations.find((res) => res.clusters !== res.used) !== undefined;
+    return (_jsxs(_Fragment, { children: [_jsx(C4BillingPage, { planDetails: {
+                    title: safeTranslate(props.t, 'orgmanagement:tabs.billing.planDetails.title', 'Plan details'),
+                    description: `${safeTranslate(props.t, 'orgmanagement:tabs.billing.planDetails.updated', 'Updated')} ${formatDateTime(props.billingGeneralData.lastUpdated)} (UTC + 1)`,
+                    loading: props.billingLoading,
+                    plan: {
+                        title: props.billingGeneralData.displaySalesPlan,
+                        subTitle: safeTranslate(props.t, 'orgmanagement:tabs.billing.planDetails.plan.subTitle', 'Plan'),
+                    },
+                    additional: {
+                        title: formatDate(props.billingEnterprisePeriod.nextRenewal),
+                        subTitle: safeTranslate(props.t, 'orgmanagement:tabs.billing.planDetails.additional.renews', 'Renews'),
+                    },
+                }, usageAlerts: {
+                    title: safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.title', 'Usage alerts'),
+                    description: safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.description', ''),
+                    loading: props.billingLoading,
+                    action: {
+                        label: safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.cta', 'View activity'),
+                        onClick: () => {
+                            props.changeTab('activity');
+                        },
+                    },
+                    data: {
+                        heading: {
+                            metric: safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.table.heading.metric', 'Metric'),
+                            threshold: safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.table.heading.threshold', 'Threshold'),
+                            status: safeTranslate(props.t, 'orgmanagement:tabs.billing.usageAlerts.table.heading.status', 'Status'),
+                        },
+                        rows: usageAlertsRows,
+                    },
+                }, currentUsageMetrics: {
+                    title: (_jsx(_Fragment, { children: safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.title', 'Current usage') })),
+                    description: `${formatDate(props.billingEnterprisePeriod.periodStart)} - ${formatDate(props.billingEnterprisePeriod.periodEnd)}`,
+                    order: ['gu', 'pi', 'di', 'tu'],
+                    taskUsers: {
+                        title: safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.taskUsers.title', 'Task Users'),
+                        loading: props.billingLoading,
+                        metric: {
+                            kind: 'chart',
+                            value: {
+                                current: props.billingCurrentMetrics.taskUsers,
+                                currentPostfix: safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.taskUsers.currentPostfix', ''),
+                                max: props.billingIncludedMetrics.taskUsers,
+                                maxPostfix: safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.taskUsers.maxPostfix', ''),
+                            },
+                        },
+                    },
+                    generalUsers: {
+                        title: safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.generalUsers.title', 'General Users'),
+                        loading: props.billingLoading,
+                        metric: {
+                            kind: 'simple',
+                            value: {
+                                title: `${props.membersCount} ${safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.generalUsers.currentPostfix', '')}`,
+                            },
+                        },
+                    },
+                    processInstances: {
+                        title: safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.processInstances.title', 'Process Instances'),
+                        loading: props.billingLoading,
+                        metric: {
+                            kind: 'chart',
+                            value: {
+                                current: props.billingCurrentMetrics.processInstances,
+                                max: props.billingIncludedMetrics.processInstances,
+                                maxPostfix: safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.processInstances.maxPostfix', ''),
+                            },
+                            overagesDescription: !props.enterpriseDevOnly
+                                ? safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.processInstances.overagesTooltipEnterprise', '')
+                                : undefined,
+                        },
+                    },
+                    decisionInstances: {
+                        title: safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.decisionInstances.title', 'Decision Instances'),
+                        loading: props.billingLoading,
+                        metric: {
+                            kind: 'chart',
+                            value: {
+                                current: props.billingCurrentMetrics.decisionInstances,
+                                max: props.billingIncludedMetrics.decisionInstances,
+                                maxPostfix: safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.decisionInstances.maxPostfix', ''),
+                            },
+                            overagesDescription: !props.enterpriseDevOnly
+                                ? safeTranslate(props.t, 'orgmanagement:tabs.billing.metrics.decisionInstances.overagesTooltipEnterprise', '')
+                                : undefined,
+                        },
+                    },
+                }, clusterReservations: {
+                    title: safeTranslate(props.t, 'orgmanagement:tabs.billing.clusterReservations.title', 'Cluster reservations'),
+                    tooltip: safeTranslate(props.t, 'orgmanagement:tabs.billing.clusterReservations.tooltip', ''),
+                    loading: props.billingLoading,
+                    data: {
+                        heading: {
+                            type: safeTranslate(props.t, 'orgmanagement:tabs.billing.clusterReservations.headers.type', 'Type'),
+                            used: safeTranslate(props.t, 'orgmanagement:tabs.billing.clusterReservations.headers.used', 'Used'),
+                            clusters: hasAdvancedOfferingClusters
+                                ? safeTranslate(props.t, 'orgmanagement:tabs.billing.clusterReservations.headers.clusters', 'Clusters')
+                                : undefined,
+                            totalReserved: safeTranslate(props.t, 'orgmanagement:tabs.billing.clusterReservations.headers.totalReserved', 'Total reserved'),
+                        },
+                        rows: props.billingClusterReservations.map((row) => {
+                            return {
+                                key: row.id,
+                                type: row.name,
+                                used: row.used,
+                                clusters: row.clusters,
+                                totalReserved: `${row.used}/${row.reserved}`,
+                            };
+                        }),
+                    },
+                }, isEnterpriseOrg: true }), props.billingError ? (_jsx("p", { style: { color: 'var(--cds-text-error)' }, children: props.billingError })) : null, usageAlertUpdateModalOpen && usageAlertUpdateTarget ? (_jsx(Modal, { open: usageAlertUpdateModalOpen, modalHeading: (() => {
+                    switch (usageAlertUpdateTarget.metric) {
+                        case UsageAlertMetric.DECISION_INSTANCES:
+                            return safeTranslate(props.t, 'usagealerts:update.heading.di', 'Update Decision Instances alert');
+                        case UsageAlertMetric.PROCESS_INSTANCES:
+                            return safeTranslate(props.t, 'usagealerts:update.heading.pi', 'Update Process Instances alert');
+                        case UsageAlertMetric.TASK_USERS:
+                            return safeTranslate(props.t, 'usagealerts:update.heading.tu', 'Update Task Users alert');
+                    }
+                })(), primaryButtonText: safeTranslate(props.t, 'usagealerts:update.buttons.primary', 'Update'), secondaryButtonText: safeTranslate(props.t, 'usagealerts:update.buttons.secondary', 'Cancel'), primaryButtonDisabled: usageAlertUpdateSaving, onRequestClose: () => {
+                    setUsageAlertUpdateModalOpen(false);
+                    setUsageAlertUpdateTarget(undefined);
+                }, onRequestSubmit: () => {
+                    const alert = usageAlertUpdateTarget;
+                    if (!alert) {
+                        return;
+                    }
+                    const nextThreshold = usageAlertUpdateThreshold;
+                    const nextEnabled = usageAlertUpdateEnabled;
+                    const validate = () => {
+                        if (nextThreshold < UsageAlertThresholdLimits.min ||
+                            nextThreshold > UsageAlertThresholdLimits.max) {
+                            setUsageAlertUpdateInvalid(true);
+                            setUsageAlertUpdateInvalidText(safeTranslate(props.t, 'usagealerts:update.error.thresholdLimit', `Threshold must be between ${UsageAlertThresholdLimits.min} and ${UsageAlertThresholdLimits.max}.`, {
+                                min: UsageAlertThresholdLimits.min,
+                                max: UsageAlertThresholdLimits.max,
+                            }));
+                            return false;
+                        }
+                        if (nextThreshold === alert.threshold &&
+                            nextEnabled === alert.enabled) {
+                            setUsageAlertUpdateInvalid(true);
+                            setUsageAlertUpdateInvalidText(safeTranslate(props.t, 'usagealerts:update.error.thresholdSame', 'No changes to save.'));
+                            return false;
+                        }
+                        if (nextEnabled === true &&
+                            alert.triggered === true &&
+                            nextThreshold < alert.threshold) {
+                            setUsageAlertUpdateInvalid(true);
+                            setUsageAlertUpdateInvalidText(safeTranslate(props.t, 'usagealerts:update.error.thresholdTriggered', 'Threshold cannot be lowered while the alert is triggered.'));
+                            return false;
+                        }
+                        return true;
+                    };
+                    setUsageAlertUpdateInvalid(false);
+                    setUsageAlertUpdateInvalidText('');
+                    setUsageAlertUpdateError(undefined);
+                    if (!validate()) {
+                        return;
+                    }
+                    void (async () => {
+                        setUsageAlertUpdateSaving(true);
+                        try {
+                            await props.onUpdateUsageAlert(alert.uuid, nextThreshold, nextEnabled);
+                            setUsageAlertUpdateModalOpen(false);
+                            setUsageAlertUpdateTarget(undefined);
+                        }
+                        catch (error) {
+                            setUsageAlertUpdateError(error instanceof Error ? error.message : 'Update failed');
+                        }
+                        finally {
+                            setUsageAlertUpdateSaving(false);
+                        }
+                    })();
+                }, size: 'sm', id: 'c4-update-usage-alert-modal', children: _jsxs(Stack, { gap: 6, children: [_jsx(C4UsageAlertUpdateModal, { notification: {
+                                title: safeTranslate(props.t, 'usagealerts:update.notification.title', 'Usage alert'),
+                                subTitle: safeTranslate(props.t, 'usagealerts:update.notification.subTitle', 'Update usage alert', {
+                                    metric: (() => {
+                                        switch (usageAlertUpdateTarget.metric) {
+                                            case UsageAlertMetric.DECISION_INSTANCES:
+                                                return 'Decision Instances';
+                                            case UsageAlertMetric.PROCESS_INSTANCES:
+                                                return 'Process Instances';
+                                            case UsageAlertMetric.TASK_USERS:
+                                                return 'Task Users';
+                                        }
+                                    })(),
+                                }),
+                            }, description: safeTranslate(props.t, 'usagealerts:update.description', ''), form: {
+                                threashold: {
+                                    currentValue: usageAlertUpdateThreshold,
+                                    label: safeTranslate(props.t, 'usagealerts:update.fields.threshold.label', 'Threshold'),
+                                    helperText: safeTranslate(props.t, 'usagealerts:update.fields.threshold.helper', ''),
+                                    min: UsageAlertThresholdLimits.min,
+                                    max: UsageAlertThresholdLimits.max,
+                                    onChange: (value) => {
+                                        const threshold = Number(value);
+                                        setUsageAlertUpdateThreshold(threshold);
+                                        setUsageAlertUpdateInvalid(false);
+                                        setUsageAlertUpdateInvalidText('');
+                                        setUsageAlertUpdateError(undefined);
+                                    },
+                                    errors: {
+                                        invalid: usageAlertUpdateInvalid,
+                                        invalidText: usageAlertUpdateInvalidText,
+                                    },
+                                },
+                                status: {
+                                    currentValue: usageAlertUpdateEnabled,
+                                    label: (() => {
+                                        switch (usageAlertUpdateTarget.metric) {
+                                            case UsageAlertMetric.DECISION_INSTANCES:
+                                                return safeTranslate(props.t, 'usagealerts:update.fields.status.label.di', 'Status');
+                                            case UsageAlertMetric.PROCESS_INSTANCES:
+                                                return safeTranslate(props.t, 'usagealerts:update.fields.status.label.pi', 'Status');
+                                            case UsageAlertMetric.TASK_USERS:
+                                                return safeTranslate(props.t, 'usagealerts:update.fields.status.label.tu', 'Status');
+                                        }
+                                    })(),
+                                    valueLabel: {
+                                        on: safeTranslate(props.t, 'usagealerts:update.fields.status.on', 'On'),
+                                        off: safeTranslate(props.t, 'usagealerts:update.fields.status.off', 'Off'),
+                                    },
+                                    onChange: (value) => {
+                                        setUsageAlertUpdateEnabled(value);
+                                        setUsageAlertUpdateInvalid(false);
+                                        setUsageAlertUpdateInvalidText('');
+                                        setUsageAlertUpdateError(undefined);
+                                    },
+                                },
+                            } }), usageAlertUpdateError ? (_jsx("p", { style: { color: 'var(--cds-text-error)' }, children: usageAlertUpdateError })) : null] }) })) : null] }));
+};

package/lib/esm/widgets/management/tabs/c4-management-groups-tab.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from 'react';
+export interface C4ManagementGroupsTabProps {
+    orgId: string;
+    groupsPermissions: {
+        maySee: boolean;
+        mayAssign: boolean;
+        hasAtLeastOneIdentityIntegrationCluster: boolean;
+    };
+    introToIdentityDocsUrl?: string;
+    identityAuthorizationsDocsUrl?: string;
+    onGroupClick: (groupId: string) => void;
+}
+export declare const C4ManagementGroupsTab: (props: C4ManagementGroupsTabProps) => JSX.Element;

package/lib/esm/widgets/management/tabs/c4-management-groups-tab.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { C4GroupsList } from '@camunda/c4-identity';
+import { Stack } from '@carbon/react';
+export const C4ManagementGroupsTab = (props) => {
+    return (_jsx(Stack, { gap: 3, children: _jsx(C4GroupsList, { docsPath: '/next/components/console/manage-organization/manage-user-groups/', onGroupClick: (groupId) => {
+                props.onGroupClick(groupId);
+            }, permissions: props.groupsPermissions, notification: {
+                visible: true,
+                title: 'Organization group management updates starting with 8.8 clusters',
+                description: (_jsx(_Fragment, { children: _jsxs("p", { children: ["Starting with version 8.8, groups created in Console are no longer recommended for use; instead, user groups and authorizations must be managed in the", ' ', props.introToIdentityDocsUrl ? (_jsx("a", { href: props.introToIdentityDocsUrl, target: '_blank', rel: 'noopener noreferrer', children: "cluster's Admin component." })) : (_jsx("span", { children: "cluster's Admin component." }))] }) })),
+                action: {
+                    label: 'Learn more',
+                    onClick: () => {
+                        if (!props.identityAuthorizationsDocsUrl) {
+                            return;
+                        }
+                        window.open(props.identityAuthorizationsDocsUrl, '_blank', 'noopener,noreferrer');
+                    },
+                },
+            } }) }));
+};

package/lib/esm/widgets/management/tabs/c4-management-overview-tab.d.ts

@@ -0,0 +1,12 @@
+import type { JSX } from 'react';
+export interface C4ManagementOverviewTabProps {
+    orgId: string;
+    orgName: string;
+    salesPlan?: string;
+    ownerName?: string;
+    loading: boolean;
+    mayRename: boolean;
+    t?: (key: string, options?: Record<string, unknown>) => string;
+    onRenameOrg: (newName: string) => Promise<void>;
+}
+export declare const C4ManagementOverviewTab: ({ orgId, orgName, salesPlan, ownerName, loading, mayRename, t, onRenameOrg, }: C4ManagementOverviewTabProps) => JSX.Element;

package/lib/esm/widgets/management/tabs/c4-management-overview-tab.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Modal, Stack, TextInput } from '@carbon/react';
+import { Edit } from '@carbon/react/icons/index.esm.js';
+import { useMemo, useState } from 'react';
+import { C4ManagementOverview } from '../../../components/c4-management-overview/c4-management-overview.js';
+function safeTranslate(t, key, defaultValue, 
+// biome-ignore lint/suspicious/noExplicitAny: legacy compatibility
+opts) {
+    if (!t)
+        return defaultValue;
+    try {
+        const translated = t(key, opts);
+        return typeof translated === 'string' ? translated : defaultValue;
+    }
+    catch {
+        return defaultValue;
+    }
+}
+export const C4ManagementOverviewTab = ({ orgId, orgName, salesPlan, ownerName, loading, mayRename, t, onRenameOrg, }) => {
+    const [renameModalOpen, setRenameModalOpen] = useState(false);
+    const [renameValue, setRenameValue] = useState('');
+    const [renameSaving, setRenameSaving] = useState(false);
+    const [renameError, setRenameError] = useState(undefined);
+    const overviewItems = useMemo(() => {
+        const items = [];
+        items.push({
+            id: 'organization-name',
+            label: safeTranslate(t, 'orgmanagement:tabs.overview.tableitems.orgname', 'Organization name'),
+            value: orgName,
+            action: mayRename
+                ? {
+                    renderIcon: Edit,
+                    iconDescription: safeTranslate(t, 'orgmanagement:tabs.overview.actions.rename', 'Rename'),
+                    kind: 'primary',
+                    action: () => {
+                        setRenameError(undefined);
+                        setRenameValue(orgName);
+                        setRenameModalOpen(true);
+                    },
+                }
+                : undefined,
+        });
+        if (salesPlan) {
+            items.push({
+                id: 'organization-plan',
+                label: safeTranslate(t, 'orgmanagement:tabs.overview.tableitems.plan', 'Plan'),
+                value: salesPlan,
+            });
+        }
+        if (ownerName) {
+            items.push({
+                id: 'organization-owner',
+                label: safeTranslate(t, 'orgmanagement:tabs.overview.tableitems.owner', 'Owner'),
+                value: ownerName,
+            });
+        }
+        return items;
+    }, [orgName, salesPlan, ownerName, mayRename, t]);
+    return (_jsxs(_Fragment, { children: [_jsx(C4ManagementOverview, { orgId: orgId, overviewItems: overviewItems, loading: loading }), renameModalOpen && (_jsx(Modal, { open: renameModalOpen, modalHeading: safeTranslate(t, 'orgmanagement:tabs.overview.actions.rename', 'Rename'), primaryButtonText: safeTranslate(t, 'orgmanagement:common.save', 'Save'), secondaryButtonText: safeTranslate(t, 'orgmanagement:common.cancel', 'Cancel'), onRequestClose: () => setRenameModalOpen(false), onRequestSubmit: () => {
+                    void (async () => {
+                        setRenameSaving(true);
+                        setRenameError(undefined);
+                        try {
+                            const nextName = renameValue.trim();
+                            if (nextName.length === 0) {
+                                setRenameError('Name is required');
+                                return;
+                            }
+                            await onRenameOrg(nextName);
+                            setRenameModalOpen(false);
+                        }
+                        catch (error) {
+                            setRenameError(error instanceof Error ? error.message : 'Rename failed');
+                        }
+                        finally {
+                            setRenameSaving(false);
+                        }
+                    })();
+                }, primaryButtonDisabled: renameSaving, children: _jsx(Stack, { gap: 5, children: _jsx(TextInput, { id: 'c4-rename-org-input', labelText: safeTranslate(t, 'orgmanagement:tabs.overview.tableitems.orgname', 'Organization name'), value: renameValue, onChange: (e) => setRenameValue(e.currentTarget.value), disabled: renameSaving, invalid: Boolean(renameError), invalidText: renameError }) }) }))] }));
+};

package/lib/esm/widgets/management/tabs/c4-management-pricing-tab.d.ts

@@ -0,0 +1,20 @@
+import { type JSX } from 'react';
+import type { ConsoleTelemetry, ConsoleUser } from '../../../runtime/c4-console-runtime.types';
+type Translate = (key: string, options?: Record<string, unknown>) => string;
+type OrgRecord = Record<string, unknown>;
+type ExternalUrls = {
+    contactUrl?: string;
+    contactEnterprisePlanUrl?: string;
+    trustCenterUrl?: string;
+    talkToAnExpertUrl?: string;
+    requestCelpLicenceUrl?: string;
+};
+export declare const C4ManagementPricingTab: (props: {
+    org: OrgRecord | undefined;
+    user: ConsoleUser | undefined;
+    userPersonaRole?: string;
+    telemetry?: ConsoleTelemetry;
+    urls: ExternalUrls;
+    t?: Translate;
+}) => JSX.Element;
+export {};