Files
govoplan-core/webui/src/features/dashboard/DashboardPage.tsx
T

48 lines
2.1 KiB
TypeScript

import ContentGrid from "../../components/ContentGrid";
import Card from "../../components/Card";
import MetricCard from "../../components/MetricCard";
import MetricGrid from "../../components/MetricGrid";
import DescriptionList from "../../components/DescriptionList";
import PageLayout from "../../components/PageLayout";
import { usePlatformModules } from "../../platform/ModuleContext";
export default function DashboardPage() {
const modules = usePlatformModules();
return (
<PageLayout
archetype="overview"
title="i18n:govoplan-core.dashboard.d87f47b4"
description="Install and enable the dashboard module to make this page configurable."
viewportClassName="core-dashboard-page"
>
<MetricGrid>
<MetricCard label="i18n:govoplan-core.installed_modules.32b3e799" value={modules.length} tone="info" detail={modules.length ? moduleLabels(modules).join(", ") : "i18n:govoplan-core.core_only.d46ce7d9"} />
<MetricCard label="Dashboard module" value="not installed" tone="neutral" detail="Core fallback is active." />
</MetricGrid>
<ContentGrid columns={2} collapseAt="workspace" className="">
<Card title="i18n:govoplan-core.installed_modules.32b3e799">
{modules.length === 0 ? <p className="muted">i18n:govoplan-core.no_feature_modules_are_active.e9c2d936</p> :
<DescriptionList variant="inline">
{modules.map((module) =>
<div key={module.id}>
<dt>{module.id}</dt>
<dd><strong>{module.label}</strong><span className="muted"> i18n:govoplan-core.v.26c12f1e{module.version}</span></dd>
</div>
)}
</DescriptionList>
}
</Card>
<Card title="Home">
<p className="muted">This minimal core home is only shown while no dashboard WebUI module is available. Feature modules own their pages and can expose dashboard widgets once the dashboard module is installed.</p>
</Card>
</ContentGrid>
</PageLayout>);
}
function moduleLabels(modules: Array<{label: string;}>): string[] {
return modules.map((module) => module.label).slice(0, 4);
}