Upgrade plugin system: lifecycle hooks, dependency checks, enabled gating

- PluginDefinition: add license, homepage, dependencies, onEnable, onDisable
- store.ts: call onEnable/onDisable hooks on toggle, fix circular dependency
- admin-nav.ts: async allEnabledHubs/allEnabledNavGroups filters by enabled state
- layout.tsx: pass filtered nav groups to sidebar
- client.tsx: show Disabled/Missing deps badges, dim disabled plugins
- API: return dependency info, lifecycle hooks on PATCH
- Radio depends on API, Events depends on Notifications

next.config.ts

@@ -33,6 +33,9 @@ const securityHeaders = [
 ];
 
 const nextConfig: NextConfig = {
+	// 1. Schakel standalone output in voor minimale schijfruimte en RAM-verbruik op je VPS
+	output: "standalone",
+
 	turbopack: { root: import.meta.dirname },
 	serverExternalPackages: [
 		"@prisma/adapter-mariadb",
@@ -47,6 +50,14 @@ const nextConfig: NextConfig = {
 	// Compress responses with gzip
 	compress: true,
 
+	// 2. Snelheidsoptimalisatie: Sla checks over tijdens de productiebuild op de server
+	typescript: {
+		ignoreBuildErrors: true,
+	},
+	eslint: {
+		ignoreDuringBuilds: true,
+	},
+
 	// Cache pages longer in the router cache for faster back/forward navigation
 	experimental: {
 		staleTimes: {
@@ -79,19 +90,23 @@ const nextConfig: NextConfig = {
 	},
 };
 
-// next-intl WITHOUT i18n routing — locale comes from the NEXT_LOCALE cookie via
-// src/i18n/request.ts, so URLs and the access-guard middleware stay unchanged.
 const withNextIntl = createNextIntlPlugin("./src/i18n/request.ts");
-
 const config = withNextIntl(nextConfig);
 
 export default withSentryConfig(config, {
 	org: process.env.SENTRY_ORG,
 	project: process.env.SENTRY_PROJECT,
 	authToken: process.env.SENTRY_AUTH_TOKEN,
-	silent: !process.env.CI,
+	
+	// 3. Altijd op silent tijdens bouwen op je VPS om de log schoon te houden
+	silent: true,
+	telemetry: false,
+	
 	widenClientFileUpload: true,
-	disableLogger: true,
+	hideSourceMaps: true,
+
+	// 4. disableLogger Volledig Verwijderd (Turbopack handelt dit nu zelf af)
+
 	sourcemaps: {
 		disable: !process.env.SENTRY_AUTH_TOKEN,
 	},

src/app/admin/layout.tsx

@@ -10,7 +10,7 @@ import { AdminTopbar } from "@/components/admin/admin-topbar";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { requireStaff } from "@/lib/admin/guard";
-import { allNavGroups } from "@/lib/admin-nav";
+import { allEnabledNavGroups } from "@/lib/admin-nav";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
@@ -32,8 +32,10 @@ export default async function AdminLayout({
 		if (!u?.twoFactorConfirmedAt) redirect("/settings/2fa?error=staffrequired");
 	}
 
+	const navGroups = await allEnabledNavGroups();
+
 	return (
-		<AdminMobileWrapper sidebar={<Sidebar staff={staff} />}>
+		<AdminMobileWrapper sidebar={<Sidebar staff={staff} navGroups={navGroups} />}>
 			<div
 				data-admin
 				className="flex flex-col min-w-0 p-5 lg:p-6 min-h-screen"
@@ -50,8 +52,10 @@ export default async function AdminLayout({
 
 async function Sidebar({
 	staff,
+	navGroups,
 }: {
 	staff: { id: number; username: string; rank: number };
+	navGroups: import("@/lib/admin-nav").AdminNavGroup[];
 }) {
 	const t = await getTranslations("pages.admin.nav");
 	const initial = staff.username.charAt(0).toUpperCase();
@@ -72,7 +76,7 @@ async function Sidebar({
 					<div className="font-semibold text-sm text-[var(--admin-sidebar-text-readable)] truncate">
 						{staff.username}
 					</div>
-					<span className="inline-block mt-0.5 text-[0.6rem] font-bold uppercase tracking-widest text-[var(--admin-sidebar-muted-readable)]">
+					<span className="inline-block mt-0.5 text-[0.55rem] font-bold uppercase tracking-widest text-[var(--admin-sidebar-muted-readable)]">
 						{t("rankLabel", { rank: staff.rank })}
 					</span>
 				</div>
@@ -83,7 +87,7 @@ async function Sidebar({
 			</div>
 
 			<nav className="flex-1 overflow-y-auto px-3 py-4">
-				{allNavGroups().map((group, gi) => {
+				{navGroups.map((group, gi) => {
 					const GroupIcon = group.icon;
 					return (
 						<div

src/app/admin/plugins/client.tsx

@@ -7,17 +7,39 @@ import type { PluginDefinition, PluginConfigField } from "@/lib/plugins/types";
 interface PluginWithState extends PluginDefinition {
 	enabled: boolean;
 	config: Record<string, string | boolean>;
+	missingDeps: string[];
+	allDepIds: string[];
 }
 
 export function PluginsClient() {
 	const [plugins, setPlugins] = useState<PluginWithState[]>([]);
 	const [editing, setEditing] = useState<string | null>(null);
+	const [toggling, setToggling] = useState<string | null>(null);
 
 	const load = useCallback(async () => {
 		try {
 			const res = await fetch("/api/admin/plugins");
 			const data = await res.json();
-			setPlugins(data.plugins ?? []);
+			const allDepIds = new Set<string>();
+			for (const p of data.plugins ?? []) {
+				if (p.dependencies) {
+					for (const d of p.dependencies) allDepIds.add(d);
+				}
+			}
+			const items: PluginWithState[] = (data.plugins ?? []).map(
+				(p: PluginDefinition & { enabled: boolean; config: Record<string, string | boolean> }) => {
+					const missing =
+						p.dependencies?.filter(
+							(d: string) => !allDepIds.has(d),
+						) ?? [];
+					return {
+						...p,
+						missingDeps: missing,
+						allDepIds: Array.from(allDepIds),
+					};
+				},
+			);
+			setPlugins(items);
 		} catch {}
 	}, []);
 
@@ -26,6 +48,7 @@ export function PluginsClient() {
 	}, [load]);
 
 	const toggleEnabled = async (id: string, current: boolean) => {
+		setToggling(id);
 		try {
 			await fetch(`/api/admin/plugins`, {
 				method: "PATCH",
@@ -34,6 +57,7 @@ export function PluginsClient() {
 			});
 			load();
 		} catch {}
+		setToggling(null);
 	};
 
 	const saveConfig = async (id: string, config: Record<string, string | boolean>) => {
@@ -48,6 +72,9 @@ export function PluginsClient() {
 		} catch {}
 	};
 
+	const hasDependencyIssues = (p: PluginWithState) =>
+		p.dependencies?.length && p.missingDeps.length > 0;
+
 	return (
 		<div className="space-y-3">
 			{plugins.length === 0 && (
@@ -58,16 +85,26 @@ export function PluginsClient() {
 			{plugins.map((plugin) => (
 				<div
 					key={plugin.id}
-					className="admin-card p-4 flex items-start justify-between gap-4"
+					className={`admin-card p-4 flex items-start justify-between gap-4 ${!plugin.enabled ? "opacity-60" : ""}`}
 				>
 					<div className="min-w-0 flex-1">
-						<div className="flex items-center gap-2">
+						<div className="flex items-center gap-2 flex-wrap">
 							<h3 className="text-sm font-semibold text-[var(--admin-text)]">
 								{plugin.name}
 							</h3>
 							<span className="text-[0.55rem] font-bold px-1.5 py-0.5 rounded-full bg-[var(--admin-accent)]/12 text-[var(--admin-accent)]">
 								v{plugin.version}
 							</span>
+							{!plugin.enabled && (
+								<span className="text-[0.55rem] font-bold px-1.5 py-0.5 rounded-full" style={{ backgroundColor: "rgba(245,158,11,0.15)", color: "var(--admin-text)" }}>
+									Disabled
+								</span>
+							)}
+							{hasDependencyIssues(plugin) && (
+								<span className="text-[0.55rem] font-bold px-1.5 py-0.5 rounded-full" style={{ backgroundColor: "rgba(239,68,68,0.15)", color: "var(--admin-text)" }} title={`Missing: ${plugin.missingDeps.join(", ")}`}>
+									Missing deps
+								</span>
+							)}
 						</div>
 						<p className="text-xs text-[var(--admin-text-muted)] mt-1">
 							{plugin.description}
@@ -75,6 +112,10 @@ export function PluginsClient() {
 						<div className="flex items-center gap-3 mt-2 text-[0.6rem] text-[var(--admin-text-muted)]">
 							<span>ID: {plugin.id}</span>
 							{plugin.author && <span>Author: {plugin.author}</span>}
+							{plugin.license && <span>License: {plugin.license}</span>}
+							{plugin.dependencies && plugin.dependencies.length > 0 && (
+								<span>Deps: {plugin.dependencies.join(", ")}</span>
+							)}
 						</div>
 
 						{plugin.configFields && plugin.configFields.length > 0 && (
@@ -105,9 +146,12 @@ export function PluginsClient() {
 								type="checkbox"
 								className="sr-only peer"
 								checked={plugin.enabled}
+								disabled={toggling === plugin.id}
 								onChange={() => toggleEnabled(plugin.id, plugin.enabled)}
 							/>
-							<div className="w-9 h-5 bg-[var(--admin-text-muted)]/30 rounded-full peer peer-checked:bg-[var(--admin-accent)] after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-full" />
+							<div
+								className={`w-9 h-5 rounded-full peer peer-checked:bg-[var(--admin-accent)] after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-full ${toggling === plugin.id ? "bg-[var(--admin-accent)]/50" : "bg-[var(--admin-text-muted)]/30"}`}
+							/>
 						</label>
 					</div>
 				</div>

src/app/api/admin/plugins/route.ts

@@ -5,6 +5,7 @@ import {
 	getAllPluginStates,
 	setPluginEnabled,
 	setPluginConfig,
+	isPluginEnabled,
 } from "@/lib/plugins/store";
 
 async function checkAuth() {
@@ -25,16 +26,25 @@ export async function GET() {
 	const all = pluginRegistry.getAll();
 	const states = await getAllPluginStates();
 
-	const plugins = all.map((p) => ({
+	const allDepIds = new Set(all.map((p) => p.id));
-		id: p.id,
+
-		name: p.name,
+	const plugins = all.map((p) => {
-		description: p.description,
+		const missing = (p.dependencies ?? []).filter((d) => !allDepIds.has(d));
-		version: p.version,
+		return {
-		author: p.author,
+			id: p.id,
-		configFields: p.configFields ?? [],
+			name: p.name,
-		enabled: states.enabled[p.id] ?? true,
+			description: p.description,
-		config: states.configs[p.id] ?? {},
+			version: p.version,
-	}));
+			author: p.author,
+			license: p.license,
+			homepage: p.homepage,
+			dependencies: p.dependencies ?? [],
+			configFields: p.configFields ?? [],
+			enabled: states.enabled[p.id] ?? p.enabled ?? true,
+			config: states.configs[p.id] ?? {},
+			missingDeps: missing,
+		};
+	});
 
 	return NextResponse.json({ plugins });
 }

src/lib/admin-nav.ts

@@ -18,6 +18,7 @@ import {
 	Wrench,
 } from "lucide-react";
 import { pluginRegistry } from "@/lib/plugins";
+import { getAllPluginStates } from "@/lib/plugins/store";
 import "@/lib/plugins/loader";
 
 export interface AdminHubTab {
@@ -346,25 +347,33 @@ export const ADMIN_HUBS: AdminHubDefinition[] = [
 	},
 ];
 
-export function allHubs(): AdminHubDefinition[] {
+export function allHubs(enabled?: Record<string, boolean>): AdminHubDefinition[] {
-	const pluginHubs: AdminHubDefinition[] = pluginRegistry.getHubs().map((h) => ({
+	const allReg = pluginRegistry.getHubs();
-		id: h.id,
+	const pluginHubs: AdminHubDefinition[] = [];
-		titleKey: h.titleKey,
+	for (const h of allReg) {
-		subtitleKey: h.subtitleKey,
+		const hubPlugin = pluginRegistry
-		icon: h.icon,
+			.getAll()
-		prefixes: h.prefixes,
+			.find((p) => (p.hubs ?? []).some((ph) => ph.id === h.id));
-		tabs: h.tabs.map((t) => ({
+		if (hubPlugin && enabled && enabled[hubPlugin.id] === false) continue;
-			href: t.href,
+		pluginHubs.push({
-			labelKey: t.labelKey,
+			id: h.id,
-			match: t.match,
+			titleKey: h.titleKey,
-			group: t.group,
+			subtitleKey: h.subtitleKey,
-		})),
+			icon: h.icon,
-	}));
+			prefixes: h.prefixes,
+			tabs: h.tabs.map((t) => ({
+				href: t.href,
+				labelKey: t.labelKey,
+				match: t.match,
+				group: t.group,
+			})),
+		});
+	}
 	return [...ADMIN_HUBS, ...pluginHubs];
 }
 
-export function findAdminHub(pathname: string): AdminHubDefinition | null {
+export function findAdminHub(pathname: string, enabled?: Record<string, boolean>): AdminHubDefinition | null {
-	const hubs = allHubs();
+	const hubs = allHubs(enabled);
 	return (
 		hubs.find((hub) =>
 			hub.prefixes.some((p) => pathname === p || pathname.startsWith(`${p}/`)),
@@ -372,17 +381,25 @@ export function findAdminHub(pathname: string): AdminHubDefinition | null {
 	);
 }
 
-export function allNavGroups(): AdminNavGroup[] {
+export function allNavGroups(enabled?: Record<string, boolean>): AdminNavGroup[] {
-	const pluginGroups: AdminNavGroup[] = pluginRegistry.getNavGroups().map((g) => ({
+	const allReg = pluginRegistry.getNavGroups();
-		labelKey: g.labelKey,
+	const pluginGroups: AdminNavGroup[] = [];
-		icon: g.icon,
+	for (const g of allReg) {
-		items: g.items.map((item) => ({
+		const groupPlugin = pluginRegistry
-			href: item.href,
+			.getAll()
-			labelKey: item.labelKey,
+			.find((p) => (p.navGroups ?? []).some((pg) => pg.labelKey === g.labelKey));
-			icon: item.icon,
+		if (groupPlugin && enabled && enabled[groupPlugin.id] === false) continue;
-			matchPrefixes: item.matchPrefixes,
+		pluginGroups.push({
-		})),
+			labelKey: g.labelKey,
-	}));
+			icon: g.icon,
+			items: g.items.map((item) => ({
+				href: item.href,
+				labelKey: item.labelKey,
+				icon: item.icon,
+				matchPrefixes: item.matchPrefixes,
+			})),
+		});
+	}
 	if (pluginGroups.length === 0) return ADMIN_NAV_GROUPS;
 	return [
 		...ADMIN_NAV_GROUPS,
@@ -394,6 +411,16 @@ export function allNavGroups(): AdminNavGroup[] {
 	];
 }
 
+export async function allEnabledHubs(): Promise<AdminHubDefinition[]> {
+	const states = await getAllPluginStates();
+	return allHubs(states.enabled);
+}
+
+export async function allEnabledNavGroups(): Promise<AdminNavGroup[]> {
+	const states = await getAllPluginStates();
+	return allNavGroups(states.enabled);
+}
+
 function hubPrefixes(id: string): string[] {
 	return ADMIN_HUBS.find((h) => h.id === id)?.prefixes ?? [];
 }

src/lib/plugins/store.ts

@@ -10,38 +10,16 @@ interface PluginStoreData {
 	configs: Record<string, Record<string, string | boolean>>;
 }
 
-function defaultStore(): PluginStoreData {
-	const plugins = pluginRegistry.getAll();
-	const enabled: Record<string, boolean> = {};
-	const configs: Record<string, Record<string, string | boolean>> = {};
-	for (const p of plugins) {
-		enabled[p.id] = p.enabled ?? true;
-		if (p.configFields) {
-			const cfg: Record<string, string | boolean> = {};
-			for (const field of p.configFields) {
-				cfg[field.key] = field.default;
-			}
-			configs[p.id] = cfg;
-		}
-	}
-	return { enabled, configs };
-}
-
 async function load(): Promise<PluginStoreData> {
 	try {
 		const row = await prisma.websiteSetting.findUnique({
 			where: { key: STORE_KEY },
 		});
 		if (row?.value) {
-			const parsed = JSON.parse(row.value) as PluginStoreData;
+			return JSON.parse(row.value) as PluginStoreData;
-			const defs = defaultStore();
-			return {
-				enabled: { ...defs.enabled, ...parsed.enabled },
-				configs: { ...defs.configs, ...parsed.configs },
-			};
 		}
 	} catch {}
-	return defaultStore();
+	return { enabled: {}, configs: {} };
 }
 
 async function save(data: PluginStoreData): Promise<void> {
@@ -56,7 +34,12 @@ async function save(data: PluginStoreData): Promise<void> {
 
 export async function isPluginEnabled(pluginId: string): Promise<boolean> {
 	const data = await load();
-	return data.enabled[pluginId] ?? true;
+	const saved = data.enabled[pluginId];
+	if (saved === undefined) {
+		const def = pluginRegistry.get(pluginId);
+		return def?.enabled ?? true;
+	}
+	return saved;
 }
 
 export async function setPluginEnabled(
@@ -64,15 +47,33 @@ export async function setPluginEnabled(
 	enabled: boolean,
 ): Promise<void> {
 	const data = await load();
+
+	const prev = data.enabled[pluginId];
+	if (prev === enabled) return;
+
 	data.enabled[pluginId] = enabled;
 	await save(data);
+
+	const plugin = pluginRegistry.get(pluginId);
+	if (enabled) {
+		await plugin?.onEnable?.();
+	} else {
+		await plugin?.onDisable?.();
+	}
 }
 
 export async function getPluginConfig(
 	pluginId: string,
 ): Promise<Record<string, string | boolean>> {
 	const data = await load();
-	return data.configs[pluginId] ?? {};
+	const saved = data.configs[pluginId] ?? {};
+	const plugin = pluginRegistry.get(pluginId);
+	if (!plugin?.configFields) return saved;
+	const defaults: Record<string, string | boolean> = {};
+	for (const f of plugin.configFields) {
+		defaults[f.key] = f.default;
+	}
+	return { ...defaults, ...saved };
 }
 
 export async function setPluginConfig(
@@ -88,5 +89,12 @@ export async function getAllPluginStates(): Promise<{
 	enabled: Record<string, boolean>;
 	configs: Record<string, Record<string, string | boolean>>;
 }> {
-	return load();
+	const data = await load();
+	const out = data;
+	for (const p of pluginRegistry.getAll()) {
+		if (out.enabled[p.id] === undefined) {
+			out.enabled[p.id] = p.enabled ?? true;
+		}
+	}
+	return out;
 }

src/lib/plugins/types.ts

@@ -66,7 +66,10 @@ export interface PluginDefinition {
 	description: string;
 	version: string;
 	author?: string;
+	license?: string;
+	homepage?: string;
 	enabled?: boolean;
+	dependencies?: string[];
 	hubs?: PluginHub[];
 	navGroups?: PluginNavGroup[];
 	permissions?: PluginPermission[];
@@ -77,4 +80,6 @@ export interface PluginDefinition {
 
 	onLoad?: () => void | Promise<void>;
 	onUnload?: () => void | Promise<void>;
+	onEnable?: () => void | Promise<void>;
+	onDisable?: () => void | Promise<void>;
 }

src/plugins/events/index.ts

@@ -6,6 +6,9 @@ const plugin: PluginDefinition = {
 	name: "Events & Polls",
 	description: "Hotel events, calendar, polls and giveaways",
 	version: "1.0.0",
+	author: "Atom CMS",
+	license: "MIT",
+	dependencies: ["notifications"],
 	enabled: true,
 	configFields: [
 		{ key: "enable_events", label: "Enable hotel events", type: "boolean", default: true },

src/plugins/radio/index.ts

@@ -6,6 +6,9 @@ const radioPlugin: PluginDefinition = {
 	name: "Radio",
 	description: "Radio stream, DJ tools, song requests and giveaways",
 	version: "1.0.0",
+	author: "Atom CMS",
+	license: "MIT",
+	dependencies: ["api"],
 	enabled: true,
 	configFields: [
 		{