Roadmap

apps/web/src/app/(dash)/roadmap.tsx

@@ -0,0 +1,128 @@
+import { BreadcrumbItem } from "@mattrax/ui";
+import clsx from "clsx";
+import { For, Show } from "solid-js";
+import { Page } from "~/components/Page";
+
+export default function () {
+	return (
+		<Page
+			title="Roadmap"
+			breadcrumbs={[<BreadcrumbItem>Roadmap</BreadcrumbItem>]}
+			class="p-4 max-w-xl"
+		>
+			<div class="relative pl-6 after:absolute after:inset-y-0 after:left-0 after:w-px after:bg-muted-foreground/20">
+				<div class="grid gap-6">
+					<For each={Object.entries(roadmap)}>
+						{([title, section]) => (
+							<div class="grid gap-1 text-sm relative">
+								<div
+									class={clsx(
+										"aspect-square w-3 rounded-full absolute left-0 translate-x-[-29.5px] z-10 top-2",
+										Object.values(section.items).every(
+											(status) => status === "done",
+										)
+											? "bg-green-500"
+											: Object.values(section.items).some(
+														(status) => status === "progress",
+													)
+												? "bg-orange-500"
+												: "bg-muted-foreground",
+									)}
+								/>
+								<div class="font-medium text-xl">{title}</div>
+								<Show when={section.description}>
+									{(description) => (
+										<div class="text-md text-zinc-500 dark:text-zinc-400">
+											{description()}
+										</div>
+									)}
+								</Show>
+								<ul class="flex flex-col space-y-1 list-disc pl-2 ml-2">
+									<For each={Object.entries(section.items)}>
+										{([item, status]) => (
+											<li
+												class={clsx(
+													"text-sm text-zinc-500 dark:text-zinc-400 font-light",
+													status === "done"
+														? "line-through marker:text-green-500"
+														: status === "progress"
+															? "italic marker:text-orange-500"
+															: "",
+												)}
+											>
+												{item}
+											</li>
+										)}
+									</For>
+								</ul>
+							</div>
+						)}
+					</For>
+				</div>
+			</div>
+		</Page>
+	);
+}
+
+type Status = "none" | "progress" | "done";
+type RoadmapSection = {
+	description?: string;
+	items: Record<string, Status>;
+};
+
+const roadmap: Record<string, RoadmapSection> = {
+	"Alpha launch": {
+		items: {
+			"Basic account and tenant management": "done",
+			"Blueprint management & Device overview": "progress",
+			"Basic Windows management": "none",
+			"Improve sidebar with mobile support & minimise": "none",
+			"Analytics and error tracking": "none",
+		},
+	},
+	// Beta launch
+	Cleanup: {
+		description: "Cleanup major missing functionality from the alpha launch.",
+		items: {
+			"Implement tenant delete": "none",
+			"Implement account delete": "none",
+			"Multiple administrators with access to a single tenant": "none",
+			"Improve login process": "none",
+			"Global Search (Cmd + K) & Keyboard navigation": "none",
+		},
+	},
+	"Extended management": {
+		items: {
+			"macOS Management": "none",
+			"Android Management": "none",
+			"Application management": "none",
+			"Run bash and batch scripts on devices": "none",
+			"Custom attributes": "none",
+		},
+	},
+	Composability: {
+		items: {
+			"Apply policies in the user vs device scope": "none",
+			Policies: "none",
+			Groups: "none",
+			"Manage policy versions": "none",
+		},
+	},
+	Users: {
+		items: {
+			"AzureAD integration": "none",
+			"Google Workspaces integration": "none",
+			"Active Directory integration": "none",
+			"SAML integration": "none",
+			"User-initiated enrollment": "none",
+		},
+	},
+	// v1 Launch
+	"Self-service self hosting": {
+		items: {
+			"Support self-hosted": "none",
+			Updater: "none",
+			"Deployment Guide": "none",
+		},
+	},
+};

apps/web/src/components/Sidebar/OtherNavigation.tsx

@@ -14,11 +14,12 @@ export function OtherNavigation() {
 		title: string,
 		href: string,
 		Icon: (props: { class: string }) => JSX.Element,
+		newTab?: boolean,
 	) => (
 		<li>
 			<a
 				href={href}
-				target="_blank"
+				target={newTab === false ? undefined : "_blank"}
 				rel="noopener noreferrer"
 				class="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-zinc-950 transition-all hover:bg-zinc-100 hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-2 dark:ring-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50"
 			>
@@ -104,6 +105,7 @@ export function OtherNavigation() {
 			</li>
 
 			{item("Support", "mailto:[email protected]", IconLucideLifeBuoy)}
+			{item("Roadmap", "/roadmap", IconPhMapTrifold, false)}
 		</ul>
 	);
 }

packages/ui/src/auto-imports.d.ts

@@ -82,6 +82,7 @@ declare global {
   const IconPhMagnifyingGlass: typeof import('~icons/ph/magnifying-glass.jsx')['default']
   const IconPhMagnifyingGlassDuotone: typeof import('~icons/ph/magnifying-glass-duotone.jsx')['default']
   const IconPhMagnifyingGlassLight: typeof import('~icons/ph/magnifying-glass-light.jsx')['default']
+  const IconPhMapTrifold: typeof import('~icons/ph/map-trifold.jsx')['default']
   const IconPhPlus: typeof import('~icons/ph/plus.jsx')['default']
   const IconPhPlusCircle: typeof import('~icons/ph/plus-circle.jsx')['default']
   const IconPhPuzzlePiece: typeof import('~icons/ph/puzzle-piece.jsx')['default']