From 9dfa3b9bb9aa9c529e69ccb0063d203a14103c2b Mon Sep 17 00:00:00 2001 From: Oliver Kieselbach Date: Tue, 7 Jul 2026 15:17:21 +0200 Subject: [PATCH] updated layout for plans and sidebar navigation added --- .../settings/tenant/sections/SectionPlan.tsx | 271 +++++++++++------- .../app/settings/tenant/tenantNavSections.ts | 2 +- .../lib/globalNavConfig.tsx | 1 + 3 files changed, 168 insertions(+), 106 deletions(-) diff --git a/src/Web/autopilot-monitor-web/app/settings/tenant/sections/SectionPlan.tsx b/src/Web/autopilot-monitor-web/app/settings/tenant/sections/SectionPlan.tsx index ffa7abc9..b8f680d2 100644 --- a/src/Web/autopilot-monitor-web/app/settings/tenant/sections/SectionPlan.tsx +++ b/src/Web/autopilot-monitor-web/app/settings/tenant/sections/SectionPlan.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { useTenantConfig } from "../../TenantConfigContext"; -import { editionLabel, trialDaysLeft } from "@/lib/edition"; +import { trialDaysLeft } from "@/lib/edition"; /** * Self-service Enterprise trial switch. The Enterprise feature set is not finalized yet, so the @@ -12,21 +12,59 @@ import { editionLabel, trialDaysLeft } from "@/lib/edition"; */ const TRIAL_SELF_SERVICE_ENABLED = false; +function CheckIcon({ className }: { className: string }) { + return ( + + + + ); +} + +function FeatureList({ features, checkClass }: { features: string[]; checkClass: string }) { + return ( + + ); +} + /** - * Plan section: shows the tenant's current plan (Community / Enterprise / Enterprise Trial) - * and teases what the Enterprise plan adds. + * Plan section: two side-by-side plan cards (Community and Enterprise). The tenant's current plan + * is highlighted so the edition is obvious at a glance; the Enterprise card teases what it adds. */ export function SectionPlan() { const { editionInfo, startTrial, startingTrial, user } = useTenantConfig(); const [confirming, setConfirming] = useState(false); const isEnterprise = editionInfo.edition === "enterprise"; - const label = editionLabel(editionInfo); + const retention = editionInfo.entitlements.retentionCapDays; const daysLeft = editionInfo.isTrial ? trialDaysLeft(editionInfo.trialExpiresUtc) : 0; const trialConsumed = !isEnterprise && !editionInfo.trialAvailable; const canStartTrial = editionInfo.trialAvailable && (user?.isTenantAdmin === true || user?.isGlobalAdmin === true); + const communityFeatures = [ + "Live session monitoring & progress portal", + "Full rules engine, including custom rules", + "Fleet analytics, notifications & diagnostics", + "AI integration (MCP) within usage limits", + `${retention}-day data retention`, + "Community support (GitHub)", + ]; + + const enterpriseFeatures = [ + `Extended data retention — 365 days (vs ${retention})`, + "Higher portal & agent API rate limits", + "Larger AI (MCP) usage quota", + "Delegated (MSP) administration across tenants", + "Reliability commitments & priority support", + ]; + return (
@@ -41,112 +79,135 @@ export function SectionPlan() {
-
- {/* Current plan */} -
-

Current plan

-
- - {label} - - {editionInfo.isTrial && editionInfo.trialExpiresUtc && ( - - Trial ends {new Date(editionInfo.trialExpiresUtc).toLocaleDateString()} - {daysLeft > 0 && ` (${daysLeft} day${daysLeft === 1 ? "" : "s"} left)`} +
+
+ {/* Community card */} +
+
+
+

Community

+

The full product, free

+
+ {!isEnterprise && ( + + Current plan + + )} +
+ +
+ Free + — and stays free +
+ + +
+ + {/* Enterprise card */} +
+
+
+

Enterprise

+

Higher limits, support & MSP

+
+ {isEnterprise ? ( + + {editionInfo.isTrial ? `Trial — ${daysLeft} day${daysLeft === 1 ? "" : "s"} left` : "Current plan"} + + ) : ( + + Coming soon + + )} +
+ +
+ + {isEnterprise ? "Active" : "Pricing TBA"} + {!isEnterprise && — to be announced} +
+ +

+ Everything in Community, plus +

+ + + {/* CTA — only meaningful while the tenant is on Community */} + {!isEnterprise && ( +
+ {trialConsumed ? ( +

+ This tenant has already used its Enterprise trial. To move to Enterprise,{" "} + + get in touch + + . +

+ ) : !TRIAL_SELF_SERVICE_ENABLED ? ( + + ) : canStartTrial && !confirming ? ( + + ) : canStartTrial && confirming ? ( +
+ One-time trial — start now? + + +
+ ) : null} +
)}
-

- {isEnterprise - ? editionInfo.isTrial - ? "Your Enterprise trial is active — all Enterprise capabilities are unlocked. When the trial ends, the tenant returns to Community automatically." - : "This tenant is on the Enterprise plan — all Enterprise capabilities are unlocked." - : `This tenant is on the Community plan — the full product, free, with a ${editionInfo.entitlements.retentionCapDays}-day data retention window.`} -

- {/* Enterprise teaser — only for Community tenants */} - {!isEnterprise && ( -
-
-

Enterprise

- - Coming soon - -
-

- A commercial plan for organizations that need more than the preview can promise — - reliability commitments and support, plus higher operating limits: data retention - extended from {editionInfo.entitlements.retentionCapDays} to 365 days, raised portal - and agent API rate limits, a larger AI (MCP) usage quota, and delegated (MSP) - administration for managing multiple tenants from one place. The full feature set and - pricing will be announced here. -

- -
- {trialConsumed ? ( -

- This tenant has already used its Enterprise trial. To move to Enterprise,{" "} - - get in touch - - . -

- ) : !TRIAL_SELF_SERVICE_ENABLED ? ( - - ) : canStartTrial && !confirming ? ( - - ) : canStartTrial && confirming ? ( - - One-time trial — start now? - - - - ) : null} -
-
- )} +

+ {isEnterprise && editionInfo.isTrial + ? "When the trial ends, the tenant returns to Community automatically." + : "Scope, pricing and timeline for Enterprise will be announced. Community stays free."} +

); diff --git a/src/Web/autopilot-monitor-web/app/settings/tenant/tenantNavSections.ts b/src/Web/autopilot-monitor-web/app/settings/tenant/tenantNavSections.ts index 950cc587..6bb96e1f 100644 --- a/src/Web/autopilot-monitor-web/app/settings/tenant/tenantNavSections.ts +++ b/src/Web/autopilot-monitor-web/app/settings/tenant/tenantNavSections.ts @@ -1,5 +1,4 @@ export const TENANT_NAV_SECTIONS = [ - { id: "plan", label: "Plan", description: "Your current plan and what Enterprise adds" }, { id: "access-management", label: "Access Management", description: "Manage tenant admins and operators" }, { id: "autopilot", label: "Autopilot Validation", description: "Autopilot device and corporate identifier validation" }, { id: "hardware-whitelist", label: "Hardware Whitelist", description: "Manufacturer and model whitelist configuration" }, @@ -7,6 +6,7 @@ export const TENANT_NAV_SECTIONS = [ { id: "sla-targets", label: "SLA Targets", description: "SLA targets and breach notification settings" }, { id: "bootstrap-sessions", label: "Bootstrap Sessions", description: "Create and manage bootstrap tokens" }, { id: "graph-permissions", label: "Optional Graph capabilities", description: "Grant additional Microsoft Graph permissions for optional features" }, + { id: "plan", label: "Plan", description: "Your current plan and what Enterprise adds" }, { id: "support", label: "Submit Logs", description: "Send diagnostic files to the Autopilot Monitor team" }, ] as const; diff --git a/src/Web/autopilot-monitor-web/lib/globalNavConfig.tsx b/src/Web/autopilot-monitor-web/lib/globalNavConfig.tsx index 9bdb9267..80f296a0 100644 --- a/src/Web/autopilot-monitor-web/lib/globalNavConfig.tsx +++ b/src/Web/autopilot-monitor-web/lib/globalNavConfig.tsx @@ -208,6 +208,7 @@ export const EXPANDABLE_NAV_GROUPS: ExpandableNavGroup[] = [ { id: "cfg-sla-targets", label: "SLA Targets", href: "/settings/tenant/sla-targets" }, { id: "cfg-bootstrap-sessions", label: "Bootstrap Sessions", href: "/settings/tenant/bootstrap-sessions" }, { id: "cfg-graph-permissions", label: "Optional Graph capabilities", href: "/settings/tenant/graph-permissions" }, + { id: "cfg-plan", label: "Plan", href: "/settings/tenant/plan" }, { id: "cfg-support", label: "Submit Logs", href: "/settings/tenant/support" }, ], },