jcoffey-dev
0054b8a3ce
Administration used to open on its first section. It opens on a grid of cards now: users, domains, messages waiting in the delivery queue, server memory, and the last 24 hours' received and sent. Each card is there only when the role holds what its number needs -- a count is a query, the metric history a query and a get -- so a helpdesk role that reads accounts and domains sees those two cards and nothing about the server. What the cards count is whatever Stalwart answers for the signed-in account, which scopes a tenant administrator's accounts, domains and queue to the tenancy. The metric history has no tenant in it, and Stalwart's Tenant Administrator role does not hold it, so a tenant's dashboard is users, domains and pending. The history is Enterprise-only and switched off by default. A server that refuses it leaves those cards off; one that records nothing says so rather than showing zeroes. Received and sent add up the queue counters Stalwart's own dashboard uses, filtered with the comparison names the live server accepts (a bare timestamp is unsupportedFilter). The column count follows the number of cards so rows stay even, and falls back by the grid's own width rather than the window's. The server's test for whether an account is offered Administration matches the client's again, now that a count is enough. The mock answers the queue and an hourly history ending in the current hour; MOCK_METRICS=off refuses the history as Community does, a tenant administrator gets the queue, and helpdesk reads domains, as the demo's does. ROADMAP and FEATURES said reporting and queues were out of scope; they say the dashboard reads a handful of numbers and that managing queues, logs and settings stays out. KNOWN-ISSUES records what was settled on the live server and what was only read from source. Fourteen new strings, in all nine catalogues.
50 lines
2.2 KiB
TypeScript
50 lines
2.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Link, useLocation } from "wouter";
|
|
import { Globe, LayoutDashboard, User } from "lucide-react";
|
|
import { adminSections, type AdminSection } from "@/lib/adminAccess";
|
|
import { t } from "@/lib/i18n";
|
|
import { usePermissions } from "./usePermissions";
|
|
|
|
export const ADMIN_SECTIONS: Record<AdminSection, { group: string; label: string; icon: ReactNode }> = {
|
|
dashboard: { group: "Overview", label: "Dashboard", icon: <LayoutDashboard size={20} /> },
|
|
accounts: { group: "Directory", label: "Accounts", icon: <User size={20} /> },
|
|
domains: { group: "Mail", label: "Domains", icon: <Globe size={20} /> },
|
|
};
|
|
|
|
/** The section the address names, or the first the role can open. */
|
|
export function currentAdminSection(allowed: AdminSection[], requested: string | undefined): AdminSection | undefined {
|
|
return allowed.find((s) => s === requested) ?? allowed[0];
|
|
}
|
|
|
|
/**
|
|
* Administration's sections, in the folder pane.
|
|
*
|
|
* Settings keeps its list inside the page; Administration's pages are tables
|
|
* that want the width, so the list lives where Mail keeps its folders. On a
|
|
* phone that puts it in the drawer, which is where every other section's list
|
|
* already is. Only sections the role can read are listed.
|
|
*/
|
|
export function AdminNav() {
|
|
const [location] = useLocation();
|
|
const allowed = adminSections(usePermissions());
|
|
const current = currentAdminSection(allowed, location.split("/")[2]);
|
|
const groups = [...new Set(allowed.map((s) => ADMIN_SECTIONS[s].group))];
|
|
return (
|
|
<nav aria-label={t("Administration")}>
|
|
{groups.map((group) => (
|
|
<div key={group}>
|
|
<div className="nav-section"><span>{t(group)}</span></div>
|
|
{allowed
|
|
.filter((s) => ADMIN_SECTIONS[s].group === group)
|
|
.map((s) => (
|
|
<Link key={s} href={`/admin/${s}`} className={`nav-item ${current === s ? "active" : ""}`} title={t(ADMIN_SECTIONS[s].label)} aria-current={current === s ? "page" : undefined}>
|
|
{ADMIN_SECTIONS[s].icon}
|
|
<span className="nav-label">{t(ADMIN_SECTIONS[s].label)}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|