@micha.bigler/ui-core-micha 4.7.1 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 4.8.0 - UCM-BILL-2
+
+Operator surfaces for billing and a fuller "Abo" section, against the `django-core-micha` operator endpoints
+(DCM-BILL-5, dcm >= 3.7.0). `OperatorOverview` (month selector; active accounts by source, new and ended subscriptions,
+packages sold, tokens granted, used and expired, AI cost and cost per token, AI cost by model) is read-only and renders
+nothing without the operator right or without billing. `useBillingUsersColumn` gives the shared Users tab the column
+"Zugang" (plan and end date, team seat, free access, read-only) with the switch "Ohne Abo freigeschaltet" per account
+(`FreeAccessSwitch`: a mandatory reason when switching on, a confirmation when switching off; the switch only shows what
+the server confirmed); `AccountPage` takes the new optional prop `billingUsers` (`true` or a billing api) and adds the
+column, without it nothing changes and no request is made. `SubscriptionSection` shows plan name and period with
+"renews" or "ends", the token grants with remaining amount and expiry, for a team payer "n of m seats used" with the
+holders' names, and for a seat holder "team seat until"; a `me/` without the new keys renders as before.
+`createBillingApi` gets `getOperatorOverview`, `listOperatorAccounts`, `grantFreeAccess`, `revokeFreeAccess`; new keys
+`Billing.OP_*`.
+
 ## 4.7.1 - UCM-BILL-4
 
 The withdrawal dialog no longer says the subscription will not renew for a token package: for `kind: token_package` it says that the unused tokens of the purchase are removed (`Billing.WITHDRAWAL_EFFECT_TOKENS`, de, de_informal, en, fr, sw).

package/dist/billing/BillingAccessCell.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatDate } from './format';
+import { FreeAccessSwitch } from './FreeAccessSwitch';
+export function accountAccessText(account, t, language) {
+    if (!account)
+        return '–'; // no row for this person (not loaded): say nothing rather than claim read-only
+    const access = account.access || {};
+    if (access.source === 'subscription') {
+        const date = formatDate(account.term_ends_at || access.ends_at, language);
+        const plan = account.plan_key || '';
+        return [t('Billing.OP_PLAN', { plan }), date && t('Billing.OP_UNTIL', { date }), access.status === 'read_only' && t('Billing.OP_READ_ONLY')].filter(Boolean).join(' · ');
+    }
+    if (access.source === 'team') {
+        const date = formatDate(access.ends_at, language);
+        return [t('Billing.OP_TEAM_SEAT'), date && t('Billing.OP_UNTIL', { date }), access.status === 'read_only' && t('Billing.OP_READ_ONLY')].filter(Boolean).join(' · ');
+    }
+    if (access.source === 'free')
+        return [t('Billing.OP_FREE_ACCESS'), access.status === 'read_only' && t('Billing.OP_READ_ONLY')].filter(Boolean).join(' · ');
+    return t('Billing.OP_READ_ONLY');
+}
+export function BillingAccessCell({ account, api, onChanged }) {
+    const { t, i18n } = useTranslation();
+    return _jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { children: accountAccessText(account, t, i18n.language) }), account && _jsx(FreeAccessSwitch, { account: account, api: api, onChanged: onChanged })] });
+}
+export function BillingAccessError({ onRetry }) {
+    const { t } = useTranslation();
+    return _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { color: "error", children: t('Billing.OP_LOAD_ERROR') }), onRetry && _jsx(Button, { size: "small", onClick: onRetry, children: t('Billing.RETRY') })] });
+}
+export default BillingAccessCell;

package/dist/billing/FreeAccessSwitch.js

@@ -0,0 +1,41 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId, useRef, useState } from 'react';
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, Switch, TextField, Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export const FREE_ACCESS_SWITCH_ALERT_SX = { width: '100%' };
+const statusOf = (error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status; };
+export function FreeAccessSwitch({ account, api, onChanged, sx }) {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const [reason, setReason] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const inFlight = useRef(false);
+    const titleId = useId();
+    const active = Boolean(account === null || account === void 0 ? void 0 : account.free_access);
+    const openDialog = () => { setReason(''); setError(null); setOpen(true); };
+    const close = () => { if (!busy)
+        setOpen(false); };
+    const submit = async () => {
+        if (inFlight.current)
+            return;
+        inFlight.current = true;
+        setBusy(true);
+        setError(null);
+        try {
+            const answer = active ? await api.revokeFreeAccess(account.user_id) : await api.grantFreeAccess(account.user_id, reason.trim());
+            onChanged === null || onChanged === void 0 ? void 0 : onChanged(answer);
+            setOpen(false);
+        }
+        catch (failure) {
+            setError(statusOf(failure) === 403 ? 'Billing.OP_FORBIDDEN' : 'Billing.OP_SAVE_ERROR');
+        }
+        finally {
+            inFlight.current = false;
+            setBusy(false);
+        }
+    };
+    const validReason = reason.trim().length > 0 && reason.trim().length <= 1000;
+    return _jsxs(_Fragment, { children: [_jsx(Box, { sx: sx, children: _jsx(FormControlLabel, { control: _jsx(Switch, { checked: active, disabled: busy, onChange: openDialog, slotProps: { input: { 'aria-label': `${t('Billing.OP_FREE_ACCESS')} – ${(account === null || account === void 0 ? void 0 : account.name) || (account === null || account === void 0 ? void 0 : account.email) || (account === null || account === void 0 ? void 0 : account.user_id)}` } } }), label: t('Billing.OP_FREE_ACCESS') }) }), _jsxs(Dialog, { open: open, onClose: close, "aria-labelledby": titleId, children: [_jsx(DialogTitle, { id: titleId, children: active ? t('Billing.OP_REVOKE_TITLE') : t('Billing.OP_FREE_ACCESS') }), _jsxs(DialogContent, { children: [active ? _jsx("p", { children: t('Billing.OP_REVOKE_BODY') }) : _jsx(TextField, { label: t('Billing.OP_REASON'), multiline: true, required: true, fullWidth: true, disabled: busy, value: reason, onChange: (event) => setReason(event.target.value), inputProps: { maxLength: 1001 } }), error && _jsx(Alert, { severity: "error", sx: FREE_ACCESS_SWITCH_ALERT_SX, children: t(error) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { disabled: busy, onClick: close, children: t('Billing.OP_CANCEL') }), _jsx(Button, { disabled: busy || (!active && !validReason), onClick: submit, children: active ? t('Billing.OP_REVOKE') : t('Billing.OP_GRANT') })] })] })] });
+}
+export default FreeAccessSwitch;

package/dist/billing/OperatorOverview.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { Alert, Button, Card, CardContent, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import StatTile from '../components/StatTile';
+import { defaultBillingApi } from './api';
+import { formatTokens, formatUsdMicros } from './format';
+export const OPERATOR_OVERVIEW_ALERT_SX = { width: '100%' };
+const hiddenStatus = (error) => { var _a; return [401, 403, 404].includes((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status); };
+const currentUtcMonth = () => new Date().toISOString().slice(0, 7);
+export function OperatorOverview({ api = defaultBillingApi, sx }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { t, i18n } = useTranslation();
+    const [month, setMonth] = useState(currentUtcMonth);
+    const [state, setState] = useState('loading');
+    const [data, setData] = useState(null);
+    const [attempt, setAttempt] = useState(0);
+    const generation = useRef(0);
+    useEffect(() => {
+        const current = ++generation.current;
+        setState('loading');
+        Promise.resolve().then(() => api.getOperatorOverview({ month })).then((result) => {
+            if (generation.current !== current)
+                return;
+            setData(result);
+            setState('ready');
+        }).catch((error) => {
+            if (generation.current !== current)
+                return;
+            setData(null);
+            setState(hiddenStatus(error) ? 'hidden' : 'error');
+        });
+        return () => { generation.current += 1; };
+    }, [api, month, attempt]);
+    if (state === 'hidden')
+        return null;
+    if (state === 'error')
+        return _jsxs(Stack, { sx: sx, spacing: 1, children: [_jsx(Alert, { severity: "error", sx: OPERATOR_OVERVIEW_ALERT_SX, children: t('Billing.OP_LOAD_ERROR') }), _jsx(Button, { onClick: () => setAttempt((value) => value + 1), children: t('Billing.RETRY') })] });
+    if (state === 'loading')
+        return _jsxs(Stack, { sx: sx, spacing: 2, children: [_jsx(Typography, { variant: "h5", children: t('Billing.OP_OVERVIEW_TITLE') }), _jsx(TextField, { type: "month", label: t('Billing.OP_MONTH'), value: month, onChange: (event) => setMonth(event.target.value) })] });
+    if (state !== 'ready')
+        return null;
+    const accounts = (data === null || data === void 0 ? void 0 : data.accounts) || { active: 0, by_source: { subscription: {}, team_seat: 0, free_access: 0 } };
+    const subscriptions = (data === null || data === void 0 ? void 0 : data.subscriptions) || { new: 0, ended: 0 };
+    const tokens = (data === null || data === void 0 ? void 0 : data.tokens) || { granted: 0, used: 0, expired: 0 };
+    const models = Array.isArray((_a = data === null || data === void 0 ? void 0 : data.ai_cost) === null || _a === void 0 ? void 0 : _a.by_model) ? data.ai_cost.by_model : [];
+    const n = (value) => formatTokens(Number.isInteger(value) ? value : 0, i18n.language);
+    const planRows = Object.entries(((_b = accounts.by_source) === null || _b === void 0 ? void 0 : _b.subscription) || {}).map(([plan, value]) => t('Billing.OP_PLAN', { plan }) + ': ' + n(value));
+    const activeLines = [...planRows, `${t('Billing.OP_TEAM_SEAT')}: ${n((_c = accounts.by_source) === null || _c === void 0 ? void 0 : _c.team_seat)}`, `${t('Billing.OP_FREE_ACCESS')}: ${n((_d = accounts.by_source) === null || _d === void 0 ? void 0 : _d.free_access)}`];
+    const packages = ((_e = data === null || data === void 0 ? void 0 : data.team) === null || _e === void 0 ? void 0 : _e.packages_sold) || 0;
+    const tokenPackages = ((_f = data === null || data === void 0 ? void 0 : data.token_packages) === null || _f === void 0 ? void 0 : _f.sold) || 0;
+    const packageTokens = ((_g = data === null || data === void 0 ? void 0 : data.token_packages) === null || _g === void 0 ? void 0 : _g.tokens) || 0;
+    const tiles = [
+        [t('Billing.OP_ACTIVE_ACCOUNTS'), n(accounts.active), activeLines],
+        [t('Billing.OP_NEW_SUBSCRIPTIONS'), n(subscriptions.new)],
+        [t('Billing.OP_ENDED_SUBSCRIPTIONS'), n(subscriptions.ended)],
+        [t('Billing.OP_PACKAGES_SOLD'), n(packages + tokenPackages), undefined, `${n(packageTokens)} ${t('Billing.OP_TOKENS_GRANTED')}`],
+        [t('Billing.OP_TOKENS_GRANTED'), n(tokens.granted)],
+        [t('Billing.OP_TOKENS_USED'), n(tokens.used)],
+        [t('Billing.OP_TOKENS_EXPIRED'), n(tokens.expired)],
+        [t('Billing.OP_AI_COST'), formatUsdMicros(((_h = data === null || data === void 0 ? void 0 : data.ai_cost) === null || _h === void 0 ? void 0 : _h.usd_micros) || 0, i18n.language)],
+        [t('Billing.OP_COST_PER_TOKEN'), ((_j = data === null || data === void 0 ? void 0 : data.ai_cost) === null || _j === void 0 ? void 0 : _j.usd_micros_per_used_token) == null ? '–' : formatUsdMicros(data.ai_cost.usd_micros_per_used_token, i18n.language, { fractionDigits: 6 })],
+    ];
+    return _jsxs(Stack, { sx: sx, spacing: 2, children: [_jsx(Typography, { variant: "h5", children: t('Billing.OP_OVERVIEW_TITLE') }), _jsx(TextField, { type: "month", label: t('Billing.OP_MONTH'), value: month, onChange: (event) => setMonth(event.target.value) }), _jsx(Stack, { direction: "row", useFlexGap: true, flexWrap: "wrap", gap: 1, children: tiles.map(([label, value, lines, caption]) => _jsx(StatTile, { label: label, value: value, caption: caption, minWidth: 170, children: lines === null || lines === void 0 ? void 0 : lines.map((line) => _jsx(Typography, { variant: "body2", children: line }, line)) }, label)) }), _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", children: t('Billing.OP_AI_COST') }), models.length ? _jsx(TableContainer, { children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Billing.OP_PROVIDER') }), _jsx(TableCell, { children: t('Billing.OP_MODEL') }), _jsx(TableCell, { children: t('Billing.OP_CALLS') }), _jsx(TableCell, { children: t('Billing.OP_COST_USD') })] }) }), _jsx(TableBody, { children: models.map((model, index) => _jsxs(TableRow, { children: [_jsx(TableCell, { children: model.provider }), _jsx(TableCell, { children: model.model }), _jsx(TableCell, { children: n(model.calls) }), _jsx(TableCell, { children: formatUsdMicros(model.usd_micros, i18n.language) })] }, `${model.provider}-${model.model}-${index}`)) })] }) }) : _jsx(Typography, { color: "text.secondary", children: t('Billing.OP_NO_AI_COST') })] }) })] });
+}
+export default OperatorOverview;

package/dist/billing/SubscriptionSection.js

@@ -92,7 +92,11 @@ export function SubscriptionSection({ api = defaultBillingApi, redirect = (url)
                             var _a, _b, _c, _d;
                             (_b = (_a = renewalPickerRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { behavior: 'smooth', block: 'start' });
                             (_d = (_c = renewalPickerRef.current) === null || _c === void 0 ? void 0 : _c.querySelector('input[type="radio"]')) === null || _d === void 0 ? void 0 : _d.focus();
-                        }) }), _jsx("div", { ref: renewalPickerRef, children: _jsx(PlanPicker, { plans: me.plans || [], api: api, redirect: redirect, allowedHosts: allowedHosts, describePlan: describePlan }) })] }) : _jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", children: t('Billing.HEADING') }), _jsx(Typography, { children: sourceLine }), access.source !== 'free' && dateLine && _jsx(Typography, { children: dateLine }), access.source === 'subscription' && _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Button, { disabled: busy, onClick: () => safeRedirect(() => api.openPortal(), 'Billing.ERROR_PORTAL'), children: t('Billing.MANAGE') }), _jsx(Typography, { children: t('Billing.MANAGE_DETAILS') })] }), access.source === 'team' && seatError && !seats && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t('Billing.ERROR_LOAD') }), access.source === 'team' && seats && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { children: t('Billing.TEAM_SEATS') }), seats.map((seat) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { children: String(seat.user_id) }), _jsx(Button, { disabled: busy, onClick: () => updateSeat(() => api.removeSeat({ userId: seat.user_id })), children: t('Billing.SEAT_REMOVE') })] }, seat.user_id)), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { size: "small", label: t('Billing.SEAT_USER'), value: seatInput, onChange: (event) => setSeatInput(event.target.value) }), _jsx(Button, { disabled: busy || !seatInput.trim(), onClick: () => updateSeat(() => seatInput.includes('@') ? api.addSeat({ email: seatInput.trim() }) : api.addSeat({ userId: seatInput.trim() })), children: t('Billing.SEATS_ADD') })] }), seatError && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: typeof seatError === 'string' ? t(seatError) : t('Billing.ERROR_LOAD') })] }), actionError && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t(actionError) })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { children: t('Billing.BALANCE_LABEL') }), _jsx(TokenBalanceBadge, { balance: tokens.balance })] }), _jsx(Typography, { children: t('Billing.BALANCE', { tokens: formatTokens(tokens.balance, i18n.language) }) }), packagePlans.length > 0 && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('Billing.BUY_PACKAGE') }), packagePlans.map((plan) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsxs(Typography, { children: [formatPrice(plan.amount_cents, i18n.language), " \u00B7 ", t('Billing.PACKAGE_TOKENS', { tokens: formatTokens(plan.tokens, i18n.language) })] }), _jsx(Button, { disabled: busy, onClick: () => safeRedirect(() => api.startCheckout(plan.key), 'Billing.ERROR_CHECKOUT'), children: t('Billing.PACKAGE_BUY') })] }, plan.key))] }), withdrawal && _jsx(WithdrawalSection, { api: api, plans: me.plans, sessionWithdrawals: withdrawnPurchases, onWithdrawn: (result, purchase) => {
+                        }) }), _jsx("div", { ref: renewalPickerRef, children: _jsx(PlanPicker, { plans: me.plans || [], api: api, redirect: redirect, allowedHosts: allowedHosts, describePlan: describePlan }) })] }) : _jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", children: t('Billing.HEADING') }), _jsx(Typography, { children: sourceLine }), access.source !== 'free' && dateLine && _jsx(Typography, { children: dateLine }), me.subscription && typeof me.subscription === 'object' && typeof me.subscription.plan_key === 'string' && typeof me.subscription.renews === 'boolean' && formatDate(me.subscription.current_period_end, i18n.language) && _jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { children: t('Billing.OP_PLAN', { plan: me.subscription.plan_name || me.subscription.plan_key }) }), formatDate(me.subscription.current_period_end, i18n.language) && _jsx(Typography, { children: formatDate(me.subscription.current_period_start, i18n.language) ? `${formatDate(me.subscription.current_period_start, i18n.language)} – ${formatDate(me.subscription.current_period_end, i18n.language)}` : t('Billing.OP_UNTIL', { date: formatDate(me.subscription.current_period_end, i18n.language) }) }), typeof me.subscription.renews === 'boolean' && _jsx(Typography, { children: t(me.subscription.renews ? 'Billing.OP_RENEWS' : 'Billing.OP_ENDS') })] }), access.source === 'subscription' && _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Button, { disabled: busy, onClick: () => safeRedirect(() => api.openPortal(), 'Billing.ERROR_PORTAL'), children: t('Billing.MANAGE') }), _jsx(Typography, { children: t('Billing.MANAGE_DETAILS') })] }), access.source === 'team' && seatError && !seats && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t('Billing.ERROR_LOAD') }), me.team && Number.isInteger(me.team.seats_used) && Number.isInteger(me.team.seats_total) && _jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { children: t('Billing.OP_SEATS_USED', { n: formatTokens(me.team.seats_used, i18n.language), m: formatTokens(me.team.seats_total, i18n.language) }) }), (Array.isArray(me.team.seat_holders) ? me.team.seat_holders : []).map((holder) => _jsxs(Stack, { children: [_jsx(Typography, { children: holder.name || holder.email }), holder.name && _jsx(Typography, { color: "text.secondary", children: holder.email })] }, holder.user_id))] }), access.source === 'team' && seats && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { children: t('Billing.TEAM_SEATS') }), seats.map((seat) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [(() => { var _a; const holder = (((_a = me.team) === null || _a === void 0 ? void 0 : _a.seat_holders) || []).find((entry) => String(entry.user_id) === String(seat.user_id)); return _jsxs(Stack, { children: [_jsx(Typography, { children: (holder === null || holder === void 0 ? void 0 : holder.name) || (holder === null || holder === void 0 ? void 0 : holder.email) || String(seat.user_id) }), (holder === null || holder === void 0 ? void 0 : holder.name) && _jsx(Typography, { color: "text.secondary", children: holder.email })] }); })(), _jsx(Button, { disabled: busy, onClick: () => updateSeat(() => api.removeSeat({ userId: seat.user_id })), children: t('Billing.SEAT_REMOVE') })] }, seat.user_id)), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { size: "small", label: t('Billing.SEAT_USER'), value: seatInput, onChange: (event) => setSeatInput(event.target.value) }), _jsx(Button, { disabled: busy || !seatInput.trim(), onClick: () => updateSeat(() => seatInput.includes('@') ? api.addSeat({ email: seatInput.trim() }) : api.addSeat({ userId: seatInput.trim() })), children: t('Billing.SEATS_ADD') })] }), seatError && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: typeof seatError === 'string' ? t(seatError) : t('Billing.ERROR_LOAD') })] }), actionError && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t(actionError) }), me.seat && typeof me.seat === 'object' && formatDate(me.seat.ends_at, i18n.language) && _jsx(Typography, { children: t('Billing.OP_SEAT_UNTIL', { date: formatDate(me.seat.ends_at, i18n.language) }) })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { children: t('Billing.BALANCE_LABEL') }), _jsx(TokenBalanceBadge, { balance: tokens.balance })] }), _jsx(Typography, { children: t('Billing.BALANCE', { tokens: formatTokens(tokens.balance, i18n.language) }) }), Array.isArray(tokens.grants) && tokens.grants.length > 0 && _jsx(Stack, { spacing: 0.5, children: tokens.grants.map((grant, index) => {
+                    if (!['plan', 'package'].includes(grant === null || grant === void 0 ? void 0 : grant.source) || !Number.isInteger(grant.amount) || !Number.isInteger(grant.remaining))
+                        return null;
+                    return _jsxs(Stack, { spacing: 0.25, children: [_jsxs(Typography, { children: [t(grant.source === 'plan' ? 'Billing.OP_GRANT_PLAN' : 'Billing.OP_GRANT_PACKAGE'), ": ", formatTokens(grant.amount, i18n.language)] }), _jsxs(Typography, { children: [formatTokens(grant.remaining, i18n.language), " ", t('Billing.OP_REMAINING')] }), formatDate(grant.expires_at, i18n.language) && _jsx(Typography, { children: t('Billing.OP_VALID_UNTIL', { date: formatDate(grant.expires_at, i18n.language) }) })] }, `${grant.source}-${grant.expires_at || 'never'}-${index}`);
+                }) }), packagePlans.length > 0 && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('Billing.BUY_PACKAGE') }), packagePlans.map((plan) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsxs(Typography, { children: [formatPrice(plan.amount_cents, i18n.language), " \u00B7 ", t('Billing.PACKAGE_TOKENS', { tokens: formatTokens(plan.tokens, i18n.language) })] }), _jsx(Button, { disabled: busy, onClick: () => safeRedirect(() => api.startCheckout(plan.key), 'Billing.ERROR_CHECKOUT'), children: t('Billing.PACKAGE_BUY') })] }, plan.key))] }), withdrawal && _jsx(WithdrawalSection, { api: api, plans: me.plans, sessionWithdrawals: withdrawnPurchases, onWithdrawn: (result, purchase) => {
                     if ((purchase === null || purchase === void 0 ? void 0 : purchase.id) != null)
                         setWithdrawnPurchases((current) => (Object.assign(Object.assign({}, current), { [purchase.id]: { result, purchase } })));
                     reload();

package/dist/billing/api.js

@@ -13,6 +13,19 @@ export function createBillingApi(overrides = {}, { apiBase = '/api/billing/' } =
         listWithdrawals: () => data(apiClient.get(urls.withdrawals)),
         previewWithdrawal: (id) => data(apiClient.get(urls.withdrawalPreview(id))),
         confirmWithdrawal: (id) => data(apiClient.post(urls.withdrawalConfirm(id), { confirm: true })),
+        getOperatorOverview: ({ month } = {}) => data(month === undefined ? apiClient.get(urls.operatorOverview) : apiClient.get(urls.operatorOverview, { params: { month } })),
+        listOperatorAccounts: ({ q, page, pageSize } = {}) => {
+            const params = {};
+            if (q !== undefined)
+                params.q = q;
+            if (page !== undefined)
+                params.page = page;
+            if (pageSize !== undefined)
+                params.page_size = pageSize;
+            return data(apiClient.get(urls.operatorAccounts, { params }));
+        },
+        grantFreeAccess: (userId, reason) => data(apiClient.post(urls.operatorFreeAccess(userId), { reason })),
+        revokeFreeAccess: (userId) => data(apiClient.delete(urls.operatorFreeAccess(userId))),
     };
     return Object.assign(Object.assign({}, defaults), overrides);
 }

package/dist/billing/format.js

@@ -22,6 +22,14 @@ export function formatTokens(count, language) {
         return '';
     return new Intl.NumberFormat(intlLocale(language), { maximumFractionDigits: 0 }).format(count);
 }
+export function formatUsdMicros(micros, language, { fractionDigits = 2 } = {}) {
+    if (!Number.isFinite(micros))
+        return '';
+    return new Intl.NumberFormat(intlLocale(language), {
+        style: 'currency', currency: 'USD', minimumFractionDigits: fractionDigits === 2 ? 2 : 0,
+        maximumFractionDigits: fractionDigits,
+    }).format(micros / 1000000);
+}
 export function formatDate(iso, language) {
     if (typeof iso !== 'string' || !iso)
         return '';

package/dist/billing/useBillingUsersColumn.js

@@ -0,0 +1,21 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { defaultBillingApi } from './api';
+import { BillingAccessCell, BillingAccessError, accountAccessText } from './BillingAccessCell';
+import { useOperatorAccounts } from './useOperatorAccounts';
+export function useBillingUsersColumn({ api = defaultBillingApi, enabled = true } = {}) {
+    const { t, i18n } = useTranslation();
+    const billing = useOperatorAccounts(api, { enabled });
+    const extraColumns = useMemo(() => billing.status === 'error' ? [{
+            key: 'billing-access', label: t('Billing.OP_ACCESS'), minWidth: 260,
+            renderCell: () => React.createElement(BillingAccessError, { onRetry: billing.reload }),
+            getSortValue: () => '', getSearchValue: () => '',
+        }] : billing.status !== 'ready' ? [] : [{
+            key: 'billing-access', label: t('Billing.OP_ACCESS'), minWidth: 260,
+            renderCell: ({ user }) => React.createElement(BillingAccessCell, { account: billing.accounts.get(user === null || user === void 0 ? void 0 : user.id), api, onChanged: (answer) => billing.setFreeAccess(user.id, answer) }),
+            getSortValue: ({ user }) => accountAccessText(billing.accounts.get(user === null || user === void 0 ? void 0 : user.id), t, i18n.language),
+            getSearchValue: ({ user }) => accountAccessText(billing.accounts.get(user === null || user === void 0 ? void 0 : user.id), t, i18n.language),
+        }], [billing.status, billing.accounts, billing.setFreeAccess, billing.reload, api, t, i18n.language]);
+    return { status: billing.status, extraColumns, reload: billing.reload };
+}
+export default useBillingUsersColumn;

package/dist/billing/useOperatorAccounts.js

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+const hiddenStatus = (error) => { var _a; return [401, 403, 404].includes((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status); };
+export function useOperatorAccounts(api, { enabled = true } = {}) {
+    const [status, setStatus] = useState(enabled ? 'loading' : 'idle');
+    const [accounts, setAccounts] = useState(() => new Map());
+    const [reloadCount, setReloadCount] = useState(0);
+    const generation = useRef(0);
+    const reload = useCallback(() => setReloadCount((count) => count + 1), []);
+    useEffect(() => {
+        const current = ++generation.current;
+        if (!enabled) {
+            setStatus('idle');
+            setAccounts(new Map());
+            return () => { generation.current += 1; };
+        }
+        setStatus('loading');
+        setAccounts(new Map());
+        const load = async () => {
+            try {
+                const merged = new Map();
+                let page = 1;
+                let count = Infinity;
+                while (merged.size < count && page <= 50) {
+                    const result = await api.listOperatorAccounts({ page, pageSize: 100 });
+                    if (generation.current !== current)
+                        return;
+                    if (!Array.isArray(result === null || result === void 0 ? void 0 : result.results) || !Number.isInteger(result === null || result === void 0 ? void 0 : result.count) || result.count < 0)
+                        throw new Error('invalid_operator_accounts');
+                    count = result.count;
+                    for (const account of result.results)
+                        if (Number.isInteger(account === null || account === void 0 ? void 0 : account.user_id))
+                            merged.set(account.user_id, account);
+                    setAccounts(new Map(merged));
+                    page += 1;
+                    if (result.results.length === 0)
+                        break;
+                }
+                if (generation.current === current)
+                    setStatus('ready');
+            }
+            catch (error) {
+                if (generation.current !== current)
+                    return;
+                setAccounts(new Map());
+                setStatus(hiddenStatus(error) ? 'hidden' : 'error');
+            }
+        };
+        load();
+        return () => { generation.current += 1; };
+    }, [api, enabled, reloadCount]);
+    const setFreeAccess = useCallback((userId, answer) => {
+        setAccounts((current) => {
+            const previous = current.get(userId);
+            if (!previous || !answer)
+                return current;
+            const updated = new Map(current);
+            updated.set(userId, Object.assign(Object.assign({}, previous), { free_access: answer.free_access, access: answer.access }));
+            return updated;
+        });
+    }, []);
+    return { status, accounts, reload, setFreeAccess };
+}
+export default useOperatorAccounts;

package/dist/billing/wire.js

@@ -2,6 +2,7 @@ export const BILLING_STATUSES = { ACTIVE: 'active', READ_ONLY: 'read_only' };
 export const BILLING_SOURCES = { SUBSCRIPTION: 'subscription', TEAM: 'team', FREE: 'free', NONE: null };
 export const BILLING_KINDS = { SUBSCRIPTION: 'subscription', TEAM_PACKAGE: 'team_package', TOKEN_PACKAGE: 'token_package' };
 export const BILLING_ERROR_CODES = ['unknown_plan', 'checkout_unavailable', 'no_customer', 'portal_unavailable', 'no_active_team', 'invalid_user', 'seat_limit'];
+export const BILLING_OPERATOR_ERROR_CODES = ['authentication_required', 'forbidden', 'invalid_month', 'invalid_page', 'invalid_query', 'reason_required', 'user_not_found'];
 export const billingApiUrls = (base = '/api/billing/') => {
     const root = base.replace(/\/$/, '') + '/';
     return {
@@ -12,5 +13,8 @@ export const billingApiUrls = (base = '/api/billing/') => {
         withdrawals: root + 'withdrawal/',
         withdrawalPreview: (id) => root + `withdrawal/${encodeURIComponent(id)}/preview/`,
         withdrawalConfirm: (id) => root + `withdrawal/${encodeURIComponent(id)}/`,
+        operatorOverview: root + 'operator/overview/',
+        operatorAccounts: root + 'operator/accounts/',
+        operatorFreeAccess: (id) => root + `operator/accounts/${encodeURIComponent(id)}/free-access/`,
     };
 };

package/dist/i18n/billingTranslations.js

@@ -61,4 +61,43 @@ export const billingTranslations = {
     'Billing.WITHDRAWAL_TOKEN_SHARE': { de: 'Tokenanteil: {{amount}}', de_informal: 'Tokenanteil: {{amount}}', en: 'Token share: {{amount}}', fr: 'Part des jetons : {{amount}}', sw: 'Sehemu ya tokeni: {{amount}}' },
     'Billing.WITHDRAWAL_USED': { de: 'Genutzt: {{amount}}', de_informal: 'Genutzt: {{amount}}', en: 'Used: {{amount}}', fr: 'Utilisé : {{amount}}', sw: 'Imetumika: {{amount}}' },
     'Billing.WITHDRAWAL_CLOSE': { de: 'Schließen', de_informal: 'Schließen', en: 'Close', fr: 'Fermer', sw: 'Funga' },
+    'Billing.OP_OVERVIEW_TITLE': { de: 'Übersicht Abos', en: 'Subscription overview', fr: 'Aperçu des abonnements', sw: 'Muhtasari wa usajili' },
+    'Billing.OP_ACTIVE_ACCOUNTS': { de: 'Aktive Konten', en: 'Active accounts', fr: 'Comptes actifs', sw: 'Akaunti zinazotumika' },
+    'Billing.OP_PLAN': { de: 'Abo {{plan}}', en: 'Subscription {{plan}}', fr: 'Abonnement {{plan}}', sw: 'Usajili {{plan}}' },
+    'Billing.OP_TEAM_SEAT': { de: 'Team-Platz', en: 'Team seat', fr: 'Place d’équipe', sw: 'Nafasi ya timu' },
+    'Billing.OP_FREE_ACCESS': { de: 'Ohne Abo freigeschaltet', en: 'Access enabled without a subscription', fr: 'Accès activé sans abonnement', sw: 'Ufikiaji umewezeshwa bila usajili' },
+    'Billing.OP_READ_ONLY': { de: 'Schreibgeschützt', en: 'Read-only', fr: 'Lecture seule', sw: 'Kusoma pekee' },
+    'Billing.OP_NEW_SUBSCRIPTIONS': { de: 'Neue Abos', en: 'New subscriptions', fr: 'Nouveaux abonnements', sw: 'Usajili mpya' },
+    'Billing.OP_ENDED_SUBSCRIPTIONS': { de: 'Beendete Abos', en: 'Ended subscriptions', fr: 'Abonnements terminés', sw: 'Usajili uliomalizika' },
+    'Billing.OP_PACKAGES_SOLD': { de: 'Verkaufte Pakete', en: 'Packages sold', fr: 'Forfaits vendus', sw: 'Vifurushi vilivyouzwa' },
+    'Billing.OP_TOKENS_GRANTED': { de: 'Token gewährt', en: 'Tokens granted', fr: 'Jetons accordés', sw: 'Tokeni zilizotolewa' },
+    'Billing.OP_TOKENS_USED': { de: 'Token verbraucht', en: 'Tokens used', fr: 'Jetons utilisés', sw: 'Tokeni zilizotumika' },
+    'Billing.OP_TOKENS_EXPIRED': { de: 'Token verfallen', en: 'Tokens expired', fr: 'Jetons expirés', sw: 'Tokeni zilizoisha muda' },
+    'Billing.OP_AI_COST': { de: 'KI-Kosten', en: 'AI costs', fr: 'Coûts de l’IA', sw: 'Gharama za AI' },
+    'Billing.OP_COST_PER_TOKEN': { de: 'Kosten pro Token', en: 'Cost per token', fr: 'Coût par jeton', sw: 'Gharama kwa tokeni' },
+    'Billing.OP_ACCESS': { de: 'Zugang', en: 'Access', fr: 'Accès', sw: 'Ufikiaji' },
+    'Billing.OP_REASON': { de: 'Grund', en: 'Reason', fr: 'Motif', sw: 'Sababu' },
+    'Billing.OP_REVOKE_TITLE': { de: 'Freischaltung aufheben?', en: 'Revoke access?', fr: 'Retirer l’accès ?', sw: 'Uondoe ruhusa ya ufikiaji?' },
+    'Billing.OP_REVOKE_BODY': { de: 'Die Daten bleiben erhalten; ohne anderen Zugang sind sie danach schreibgeschützt.', en: 'The data will remain; without another access source, it will become read-only.', fr: 'Les données sont conservées ; sans autre accès, elles seront ensuite en lecture seule.', sw: 'Data zitabaki; bila chanzo kingine cha ufikiaji, zitasomeka pekee.' },
+    'Billing.OP_UNTIL': { de: 'bis {{date}}', en: 'until {{date}}', fr: 'jusqu’au {{date}}', sw: 'hadi {{date}}' },
+    'Billing.OP_RENEWS': { de: 'verlängert sich', en: 'renews', fr: 'se renouvelle', sw: 'inasasishwa' },
+    'Billing.OP_ENDS': { de: 'endet', en: 'ends', fr: 'se termine', sw: 'inaisha' },
+    'Billing.OP_GRANT_PLAN': { de: 'Kontingent', en: 'Allowance', fr: 'Allocation', sw: 'Kiwango kilichotengwa' },
+    'Billing.OP_GRANT_PACKAGE': { de: 'Paket', en: 'Package', fr: 'Forfait', sw: 'Kifurushi' },
+    'Billing.OP_REMAINING': { de: 'verbleibend', en: 'remaining', fr: 'restants', sw: 'zilizobaki' },
+    'Billing.OP_VALID_UNTIL': { de: 'gültig bis {{date}}', en: 'valid until {{date}}', fr: 'valable jusqu’au {{date}}', sw: 'halali hadi {{date}}' },
+    'Billing.OP_SEATS_USED': { de: '{{n}} von {{m}} Plätzen belegt', en: '{{n}} of {{m}} seats occupied', fr: '{{n}} places occupées sur {{m}}', sw: 'Nafasi {{n}} kati ya {{m}} zimejazwa' },
+    'Billing.OP_MONTH': { de: 'Monat', en: 'Month', fr: 'Mois', sw: 'Mwezi' },
+    'Billing.OP_PROVIDER': { de: 'Anbieter', en: 'Provider', fr: 'Fournisseur', sw: 'Mtoa huduma' },
+    'Billing.OP_MODEL': { de: 'Modell', en: 'Model', fr: 'Modèle', sw: 'Muundo' },
+    'Billing.OP_CALLS': { de: 'Aufrufe', en: 'Calls', fr: 'Appels', sw: 'Miito' },
+    'Billing.OP_COST_USD': { de: 'Kosten (USD)', en: 'Cost (USD)', fr: 'Coût (USD)', sw: 'Gharama (USD)' },
+    'Billing.OP_CANCEL': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler', sw: 'Ghairi' },
+    'Billing.OP_GRANT': { de: 'Freischalten', en: 'Grant access', fr: 'Autoriser l’accès', sw: 'Ruhusu ufikiaji' },
+    'Billing.OP_REVOKE': { de: 'Aufheben', en: 'Revoke', fr: 'Retirer', sw: 'Ondoa' },
+    'Billing.OP_SEAT_UNTIL': { de: 'Team-Platz bis {{date}}', en: 'Team seat until {{date}}', fr: 'Place d’équipe jusqu’au {{date}}', sw: 'Nafasi ya timu hadi {{date}}' },
+    'Billing.OP_LOAD_ERROR': { de: 'Die Übersicht konnte nicht geladen werden.', en: 'The overview could not be loaded.', fr: 'Impossible de charger l’aperçu.', sw: 'Muhtasari haukuweza kupakiwa.' },
+    'Billing.OP_SAVE_ERROR': { de: 'Die Änderung konnte nicht gespeichert werden.', en: 'The change could not be saved.', fr: 'Impossible d’enregistrer la modification.', sw: 'Mabadiliko hayakuweza kuhifadhiwa.' },
+    'Billing.OP_FORBIDDEN': { de: 'Dafür fehlt die Berechtigung.', en: 'You do not have permission for this action.', fr: 'Vous n’avez pas l’autorisation pour cette action.', sw: 'Huna ruhusa ya kufanya kitendo hiki.' },
+    'Billing.OP_NO_AI_COST': { de: 'In diesem Monat gab es keine KI-Aufrufe.', en: 'There were no AI calls this month.', fr: 'Aucun appel à l’IA ce mois-ci.', sw: 'Hakukuwa na miito ya AI mwezi huu.' },
 };

package/dist/index.js

@@ -49,6 +49,11 @@ export { AccessEndedBanner } from './billing/AccessEndedBanner';
 export { PlanPicker } from './billing/PlanPicker';
 export { SubscriptionSection } from './billing/SubscriptionSection';
 export { WithdrawalSection } from './billing/WithdrawalSection';
+export { OperatorOverview } from './billing/OperatorOverview';
+export { FreeAccessSwitch } from './billing/FreeAccessSwitch';
+export { BillingAccessCell } from './billing/BillingAccessCell';
+export { useBillingUsersColumn } from './billing/useBillingUsersColumn';
+export { useOperatorAccounts } from './billing/useOperatorAccounts';
 export { WithdrawalDialog } from './billing/WithdrawalDialog';
 export { useBilling } from './billing/useBilling';
 export { createBillingApi, defaultBillingApi } from './billing/api';

package/dist/pages/AccountPage.js

@@ -25,7 +25,9 @@ import { QrSignupValidityManager } from '../components/QrSignupValidityManager';
 import { SupportRecoveryRequestsTab } from '../components/SupportRecoveryRequestsTab';
 import { BulkInviteCsvTab } from '../components/BulkInviteCsvTab';
 import { fetchAuthPolicy, updateUserProfile } from '../auth/authApi'; // Ggf. Pfad anpassen
-export function AccountPage({ userListExtraColumns = [], userListExtraRowActions = [], userListExtraContext = null, userListRefreshTrigger = 0, userListCanEditUser = null, userListShowNewColumn = true, userListShowSuccessfulLoginColumn = true, userListShowRoleColumn = true, userListOnChangeRole = null, userListShowDeleteAction = true, userListCanDeleteUser = null, userListOnDeleteUser = null, showBulkInviteCsvTab = false, bulkInviteCsvProps = {}, extraTabs = [], showProfileStatements = true, }) {
+import { defaultBillingApi } from '../billing/api';
+import { useBillingUsersColumn } from '../billing/useBillingUsersColumn';
+export function AccountPage({ userListExtraColumns = [], userListExtraRowActions = [], userListExtraContext = null, userListRefreshTrigger = 0, userListCanEditUser = null, userListShowNewColumn = true, userListShowSuccessfulLoginColumn = true, userListShowRoleColumn = true, userListOnChangeRole = null, userListShowDeleteAction = true, userListCanDeleteUser = null, userListOnDeleteUser = null, showBulkInviteCsvTab = false, bulkInviteCsvProps = {}, extraTabs = [], showProfileStatements = true, billingUsers = false, }) {
     var _a;
     const { t, i18n } = useTranslation();
     const { user, login, loading } = useContext(AuthContext);
@@ -34,6 +36,8 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     const [authPolicyError, setAuthPolicyError] = useState('');
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const billingApi = billingUsers && typeof billingUsers === 'object' ? billingUsers : defaultBillingApi;
+    const billing = useBillingUsersColumn({ api: billingApi, enabled: Boolean(billingUsers) });
     // 1. URL State Management
     const currentTabRaw = searchParams.get('tab') || 'profile';
     const currentTab = ['invite', 'bulk-invite-csv', 'access'].includes(currentTabRaw)
@@ -173,5 +177,5 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     const activeExtraTab = builtInTabValues.has(safeTab)
         ? null
         : extraTabs.find((tab) => tab.value === safeTab);
-    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx("title", { children: `${t('Account.PAGE_TITLE', 'Account')} – ${user.email}` }), _jsxs(SectionNav, { mode: isMobile ? 'mobile' : 'desktop', groups: groups, activeKey: safeTab, onSelect: (key) => handleTabChange(null, key), children: [safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true, showStatements: showProfileStatements }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: userListExtraColumns, extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser, showNewColumn: userListShowNewColumn, showSuccessfulLoginColumn: userListShowSuccessfulLoginColumn, showRoleColumn: userListShowRoleColumn, onChangeRole: userListOnChangeRole, showDeleteAction: userListShowDeleteAction, canDeleteUser: userListCanDeleteUser, onDeleteUser: userListOnDeleteUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsxs(Stack, { spacing: 2.5, children: [canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AuthFactorRequirementCard, { canEdit: canWriteAuthPolicy, policy: authPolicy }) })), canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(RegistrationMethodsManager, { policy: authPolicy, error: authPolicyError, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canSendInvites && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(UserInviteComponent, {}) })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsxs(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ACCESS_CODE_MANAGER_TITLE', 'Access Codes') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AccessCodeSingleUseToggle, { canEdit: canWriteAuthPolicy, policy: authPolicy, onPolicyChange: setAuthPolicy }) })), canSendInvites && showBulkInviteCsvTab && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AllowedEmailDomainsManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain), domains: (authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allowed_email_domains) || [], onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(QrSignupValidityManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canManageSignupQr && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(QrSignupManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days }) }))] }) })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] })] }));
+    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx("title", { children: `${t('Account.PAGE_TITLE', 'Account')} – ${user.email}` }), _jsxs(SectionNav, { mode: isMobile ? 'mobile' : 'desktop', groups: groups, activeKey: safeTab, onSelect: (key) => handleTabChange(null, key), children: [safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true, showStatements: showProfileStatements }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: [...userListExtraColumns, ...billing.extraColumns], extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser, showNewColumn: userListShowNewColumn, showSuccessfulLoginColumn: userListShowSuccessfulLoginColumn, showRoleColumn: userListShowRoleColumn, onChangeRole: userListOnChangeRole, showDeleteAction: userListShowDeleteAction, canDeleteUser: userListCanDeleteUser, onDeleteUser: userListOnDeleteUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsxs(Stack, { spacing: 2.5, children: [canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AuthFactorRequirementCard, { canEdit: canWriteAuthPolicy, policy: authPolicy }) })), canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(RegistrationMethodsManager, { policy: authPolicy, error: authPolicyError, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canSendInvites && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(UserInviteComponent, {}) })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsxs(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ACCESS_CODE_MANAGER_TITLE', 'Access Codes') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AccessCodeSingleUseToggle, { canEdit: canWriteAuthPolicy, policy: authPolicy, onPolicyChange: setAuthPolicy }) })), canSendInvites && showBulkInviteCsvTab && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AllowedEmailDomainsManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain), domains: (authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allowed_email_domains) || [], onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(QrSignupValidityManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canManageSignupQr && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(QrSignupManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days }) }))] }) })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] })] }));
 }

package/dist/theme/kitSxRegistry.js

@@ -39,6 +39,8 @@ import { PLAN_PICKER_ALERT_SX, PLAN_PICKER_CARD_SX, PLAN_PICKER_LABEL_SX, PLAN_P
 import { SUBSCRIPTION_SECTION_ALERT_SX } from '../billing/SubscriptionSection';
 import { WITHDRAWAL_DIALOG_ALERT_SX } from '../billing/WithdrawalDialog';
 import { WITHDRAWAL_SECTION_ALERT_SX } from '../billing/WithdrawalSection';
+import { FREE_ACCESS_SWITCH_ALERT_SX } from '../billing/FreeAccessSwitch';
+import { OPERATOR_OVERVIEW_ALERT_SX } from '../billing/OperatorOverview';
 import { RECEIPT_CONSENT_ALERT_SX, RECEIPT_CONSENT_CONTROL_SX } from '../receipts/ReceiptConsentSwitch';
 import { RECEIPT_CAPTURE_ACTION_SX, RECEIPT_CAPTURE_ALERT_SX, RECEIPT_CAPTURE_CARD_SX, RECEIPT_CAPTURE_PROGRESS_SX } from '../receipts/ReceiptCaptureCard';
 import { RECEIPT_PICKER_ACTION_SX, RECEIPT_PICKER_CARD_SX } from '../receipts/ReceiptPicker';
@@ -46,6 +48,8 @@ import { RECEIPT_REVIEW_ACTIONS_SX, RECEIPT_REVIEW_ACTION_BUTTON_SX, RECEIPT_REV
 const SX_EXPORTS = {
     ACCESS_CODE_ACTION_SX,
     ACCESS_ENDED_BANNER_ALERT_SX,
+    FREE_ACCESS_SWITCH_ALERT_SX,
+    OPERATOR_OVERVIEW_ALERT_SX,
     ACCESS_CODE_ALERT_SX,
     ACCESS_CODE_PRIMARY_ACTION_SX,
     ACCESS_CODE_SINGLE_USE_ALERT_SX,
@@ -236,6 +240,8 @@ export const KIT_COMPONENT_SX_REGISTRY = [
     entry('PlanPicker.label', 'MuiFormControlLabel', PLAN_PICKER_LABEL_SX),
     entry('PlanPicker.alert', 'MuiAlert', PLAN_PICKER_ALERT_SX),
     entry('SubscriptionSection.alert', 'MuiAlert', SUBSCRIPTION_SECTION_ALERT_SX),
+    entry('FreeAccessSwitch.alert', 'MuiAlert', FREE_ACCESS_SWITCH_ALERT_SX),
+    entry('OperatorOverview.alert', 'MuiAlert', OPERATOR_OVERVIEW_ALERT_SX),
     entry('WithdrawalDialog.alert', 'MuiAlert', WITHDRAWAL_DIALOG_ALERT_SX),
     entry('WithdrawalSection.alert', 'MuiAlert', WITHDRAWAL_SECTION_ALERT_SX),
     entry('ReceiptConsentSwitch.alert', 'MuiAlert', RECEIPT_CONSENT_ALERT_SX),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "4.7.1",
+  "version": "4.8.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {