@nextjscms/plugin-cpanel-dashboard 1.1.0

package/dist/client/DashboardPage.d.ts

@@ -0,0 +1,6 @@
+type CpanelDashboardPageProps = {
+    title?: string;
+};
+export declare const CpanelDashboardPage: ({ title }: CpanelDashboardPageProps) => import("react/jsx-runtime").JSX.Element;
+export default CpanelDashboardPage;
+//# sourceMappingURL=DashboardPage.d.ts.map

package/dist/client/DashboardPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../src/client/DashboardPage.tsx"],"names":[],"mappings":"AAuBA,KAAK,wBAAwB,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,WAAW,wBAAwB,4CA0NtE,CAAA;AAkFD,eAAe,mBAAmB,CAAA"}

package/dist/client/DashboardPage.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { humanReadableFileSize } from 'nextjs-cms/utils';
+import { trpc as trpcClient } from 'nextjs-cms/api/trpc/client';
+import { useI18n } from 'nextjs-cms/translations/client';
+// import { LucideIcon } from 'lucide-react'
+import { HardDriveIcon, NetworkIcon, MailIcon, DatabaseIcon, ServerIcon, FolderIcon, HexagonIcon, PackageIcon } from 'lucide-react';
+export const CpanelDashboardPage = ({ title }) => {
+    const t = useI18n();
+    const trpc = trpcClient;
+    const query = trpc?.cpanelDashboard?.getData.useQuery;
+    const { data, isLoading, isError, error } = query ? query() : { isLoading: true, isError: true, error: null };
+    if (!query) {
+        return (_jsx("div", { className: 'flex min-h-[200px] items-center justify-center p-6', children: _jsx("div", { className: 'rounded-lg border border-destructive/30 bg-destructive/5 px-6 py-4 text-sm text-destructive', children: t('cpanelPluginMisconfigured') }) }));
+    }
+    return (_jsxs("div", { className: 'w-full', children: [_jsx("div", { className: 'bg-orange-500 dark:bg-orange-800 p-8 font-extrabold text-foreground', children: _jsx("div", { className: 'relative', children: _jsx("h1", { className: 'text-3xl font-bold tracking-tight text-white', children: title || t('cPanelDashboard') }) }) }), _jsxs("div", { className: 'flex flex-col gap-6 p-6', children: [isLoading && (_jsx("div", { className: 'grid grid-cols-1 gap-4 md-sidebar:grid-cols-2 2xl-sidebar:grid-cols-4', children: [...Array(4)].map((_, i) => (_jsxs("div", { className: 'animate-pulse rounded-xl border bg-card p-5', children: [_jsxs("div", { className: 'mb-4 flex items-center gap-3', children: [_jsx("div", { className: 'size-10 rounded-lg bg-muted' }), _jsx("div", { className: 'h-4 w-24 rounded bg-muted' })] }), _jsx("div", { className: 'mb-2 h-8 w-20 rounded bg-muted' }), _jsx("div", { className: 'h-2 rounded-full bg-muted' })] }, i))) })), isError && !isLoading && (_jsxs("div", { className: 'flex items-center gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4', children: [_jsx("div", { className: 'flex size-10 shrink-0 items-center justify-center rounded-full bg-destructive/10', children: _jsx("svg", { className: 'size-5 text-destructive', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', children: _jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z' }) }) }), _jsxs("div", { children: [_jsx("p", { className: 'font-medium text-destructive', children: t('unableToLoadCpanelData') }), error instanceof Error && (_jsx("p", { className: 'mt-0.5 text-sm text-destructive/80', children: error.message }))] })] })), data && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'grid grid-cols-1 gap-4 md-sidebar:grid-cols-2 2xl-sidebar:grid-cols-4', children: [_jsx(StatCard, { icon: _jsx(HardDriveIcon, { color: 'blue' }), title: t('diskSpace'), used: data.diskSpaceUsage, total: data.diskSpaceLimit, formatFn: humanReadableFileSize }), _jsx(StatCard, { icon: _jsx(NetworkIcon, { color: 'green' }), title: t('thisMothBandwidth'), used: data.bandwidthUsage, total: data.bandwidthLimit, formatFn: humanReadableFileSize }), _jsx(StatCard, { icon: _jsx(MailIcon, { color: 'red' }), title: t('emailAccounts'), used: data.emailsUsage, total: data.emailsLimit }), _jsx(StatCard, { icon: _jsx(DatabaseIcon, { color: 'purple' }), title: t('mysqlDatabases'), used: data.dbsCount, total: data.dbsLimit })] }), _jsxs("div", { className: 'grid grid-cols-1 gap-6 lg-sidebar:grid-cols-2', children: [_jsxs("div", { className: 'overflow-hidden rounded-xl border bg-card shadow-sm', children: [_jsxs("div", { className: 'flex items-center gap-3 border-b bg-gradient-to-r from-cyan-500/10 via-transparent to-transparent px-6 py-5', children: [_jsx("div", { className: 'flex size-10 items-center justify-center rounded-xl bg-cyan-500/15 text-cyan-600 dark:bg-cyan-500/20 dark:text-cyan-400', children: _jsx(ServerIcon, {}) }), _jsx("h2", { className: 'text-lg font-semibold text-card-foreground', children: t('accountInformation') })] }), _jsxs("div", { className: 'divide-y p-2', children: [_jsx(InfoRow, { icon: _jsx(HexagonIcon, {}), iconColor: 'text-green-800', label: t('nodeVersion'), value: data?.nodeVersion ?? 'N/A', valueColor: 'text-green-600 dark:text-green-400' }), _jsx(InfoRow, { icon: _jsx(PackageIcon, {}), iconColor: 'text-red-800', label: t('pnpmVersion'), value: data?.pnpmVersion ?? 'N/A', valueColor: 'text-green-600 dark:text-green-400' }), _jsx(InfoRow, { icon: _jsx(PackageIcon, {}), iconColor: 'text-red-800', label: t('npmVersion'), value: data?.npmVersion ?? 'N/A', valueColor: 'text-green-600 dark:text-green-400' }), _jsx(InfoRow, { icon: _jsx(PackageIcon, {}), iconColor: 'text-red-800', label: t('bunVersion'), value: data?.bunVersion ?? 'N/A', valueColor: 'text-green-600 dark:text-green-400' }), _jsx(InfoRow, { icon: _jsx("span", { className: 'font-mono text-xs font-bold text-indigo-600 dark:text-indigo-400', children: "PHP" }), label: t('phpVersion'), value: data?.phpVersion ?? 'N/A', valueColor: 'text-indigo-600 dark:text-indigo-400' }), _jsx(InfoRow, { icon: _jsx(FolderIcon, {}), iconColor: 'text-amber-500', label: t('documentRoot'), value: data?.documentRoot ?? 'N/A', mono: true })] })] }), _jsxs("div", { className: 'overflow-hidden rounded-xl border bg-card shadow-sm', children: [_jsxs("div", { className: 'flex items-center gap-3 border-b bg-gradient-to-r from-purple-500/10 via-transparent to-transparent px-6 py-5', children: [_jsx("div", { className: 'flex size-10 items-center justify-center rounded-xl bg-purple-500/15 text-purple-600 dark:bg-purple-500/20 dark:text-purple-400', children: _jsx(DatabaseIcon, {}) }), _jsx("h2", { className: 'text-lg font-semibold text-card-foreground', children: t('database') })] }), data?.dbInfo ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'divide-y border-b p-2', children: [_jsx(InfoRow, { label: t('version'), value: data.dbInfo.version, valueColor: 'text-purple-600 dark:text-purple-400 font-semibold' }), _jsx(InfoRow, { label: t('remote'), value: _jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ${data.dbInfo.is_remote ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400'}`, children: data.dbInfo.is_remote ? t('yes') : t('no') }) })] }), data?.dbsList?.length > 0 && (_jsxs("div", { className: 'p-4', children: [_jsxs("p", { className: 'mb-4 text-xs font-semibold uppercase tracking-wider text-purple-600 dark:text-purple-400', children: [t('databases'), " (", data.dbsList.length, ")"] }), _jsx("div", { className: 'space-y-3', children: data.dbsList.map((db, index) => (_jsxs("div", { className: 'flex items-center justify-between rounded-xl border border-purple-200/50 bg-gradient-to-r from-purple-50 to-transparent p-4 transition-all hover:border-purple-300 hover:shadow-sm dark:border-purple-800/30 dark:from-purple-900/20 dark:hover:border-purple-700', children: [_jsxs("div", { className: 'flex items-center gap-3', children: [_jsx("div", { className: 'flex size-10 items-center justify-center rounded-lg bg-purple-500/15 text-purple-600 dark:bg-purple-500/25 dark:text-purple-400', children: _jsx(DatabaseIcon, {}) }), _jsxs("div", { children: [_jsx("p", { className: 'font-semibold text-card-foreground', children: db.database }), _jsxs("p", { className: 'text-xs text-muted-foreground', children: [db.users?.length ?? 0, " ", t('users')] })] })] }), _jsxs("div", { className: 'text-right', children: [_jsx("p", { className: 'text-sm font-bold text-purple-600 dark:text-purple-400', children: humanReadableFileSize(db.disk_usage) }), _jsx("p", { className: 'text-xs text-muted-foreground', children: t('diskUsage') })] })] }, `${db.name}_${db.database}_${index}`))) })] }))] })) : (_jsx("div", { className: 'flex items-center justify-center py-12 text-sm text-muted-foreground', children: t('mysqlNotInstalled') }))] })] })] }))] })] }));
+};
+const StatCard = ({ icon, title, used, total, formatFn }) => {
+    const t = useI18n();
+    const percentage = total > 0 ? Math.min((used / total) * 100, 100) : 0;
+    const displayUsed = formatFn ? formatFn(used) : used.toString();
+    const displayTotal = formatFn ? formatFn(total) : total.toString();
+    // Warning colors for high usage
+    const getProgressColor = () => {
+        if (percentage >= 90)
+            return 'bg-red-500';
+        if (percentage >= 75)
+            return 'bg-yellow-500';
+        return 'bg-green-500';
+    };
+    return (_jsx("div", { className: `group relative overflow-hidden rounded-xl border border-l-4 bg-card p-6 shadow-sm transition-all hover:shadow-lg`, children: _jsxs("div", { className: 'flex flex-col relative', children: [_jsxs("div", { className: 'mb-4 flex items-center justify-between', children: [_jsx("span", { className: 'text-sm font-medium text-muted-foreground', children: title }), _jsx("div", { className: `flex size-11 items-center justify-center rounded-xl`, children: icon })] }), _jsxs("div", { className: 'flex items-end gap-2 justify-start content-end mb-4 text-start w-full', children: [_jsx("span", { dir: 'ltr', className: 'text-3xl font-bold tracking-tight text-card-foreground', children: displayUsed }), _jsx("span", { children: "/" }), _jsxs("span", { dir: 'ltr', className: 'text-sm text-muted-foreground', children: [" ", displayTotal] })] }), _jsx("div", { className: 'h-2.5 overflow-hidden rounded-full bg-muted/50', children: _jsx("div", { className: `h-full rounded-full transition-all duration-500 ${getProgressColor()}`, style: { width: `${percentage}%` } }) }), _jsxs("div", { className: 'flex flex-row gap-2 pt-3 text-xs font-medium text-muted-foreground', children: [_jsxs("span", { className: percentage >= 75 ? 'text-amber-600 dark:text-amber-400' : percentage >= 90 ? 'text-red-600 dark:text-red-400' : '', children: [percentage.toFixed(1), "%"] }), _jsx("span", { children: t('usedLabel') })] })] }) }));
+};
+const InfoRow = ({ icon, iconColor, label, value, valueColor, mono }) => (_jsxs("div", { className: 'flex items-center justify-between rounded-lg px-4 py-4 transition-colors hover:bg-muted/30', children: [_jsxs("div", { className: 'flex items-center gap-3 text-sm text-muted-foreground', children: [icon && _jsx("span", { className: iconColor || 'text-muted-foreground/70', children: icon }), _jsx("span", { className: 'font-medium', children: label })] }), _jsx("span", { className: `text-sm ${valueColor || 'text-card-foreground'} ${mono ? 'font-mono text-xs' : 'font-medium'}`, children: value })] }));
+export default CpanelDashboardPage;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export declare const PLUGIN_TITLE = "cPanel Dashboard";
+export declare function createPlugin(): import("nextjs-cms/plugins/server").CMSPluginSingleRoute;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,qBAAqB,CAAA;AAC9C,wBAAgB,YAAY,6DAc3B"}

package/dist/index.js

@@ -0,0 +1,18 @@
+import { definePlugin } from 'nextjs-cms/plugins/server';
+import { cpanelDashboardRouter } from './router.js';
+export const PLUGIN_TITLE = 'cPanel Dashboard';
+export function createPlugin() {
+    return definePlugin({
+        title: PLUGIN_TITLE,
+        name: 'plugin_cpanel_dashboard',
+        registryName: 'cpanel-dashboard',
+        router: cpanelDashboardRouter,
+        routes: [
+            {
+                path: '/cpanel-dashboard',
+                title: PLUGIN_TITLE,
+                icon: 'home',
+            },
+        ],
+    });
+}

package/dist/router.d.ts

@@ -0,0 +1,47 @@
+export declare const cpanelDashboardRouter: import("@trpc/server").TRPCBuiltRouter<{
+    ctx: {
+        headers: Headers;
+        db: import("drizzle-orm/mysql2").MySql2Database<typeof import("nextjs-cms/db/schema")> & {
+            $client: import("mysql2/promise").Pool;
+        };
+        session: import("nextjs-cms").Session | null;
+    };
+    meta: object;
+    errorShape: {
+        data: {
+            zodError: import("zod").ZodFlattenedError<unknown, string> | null;
+            code: import("@trpc/server").TRPC_ERROR_CODE_KEY;
+            httpStatus: number;
+            path?: string;
+            stack?: string;
+        };
+        message: string;
+        code: import("@trpc/server").TRPC_ERROR_CODE_NUMBER;
+    };
+    transformer: true;
+}, import("@trpc/server").TRPCDecorateCreateRouterOptions<{
+    getData: import("@trpc/server").TRPCQueryProcedure<{
+        input: void;
+        output: {
+            dbsLimit: number;
+            dbsCount: number;
+            bandwidthUsage: number;
+            bandwidthLimit: number;
+            diskSpaceUsage: number;
+            diskSpaceLimit: number;
+            emailsUsage: number;
+            emailsLimit: number;
+            dbInfo: any;
+            dbsList: any;
+            phpVersion: any;
+            nodeVersion: string | null;
+            pnpmVersion: string | null;
+            npmVersion: string | null;
+            bunVersion: string | null;
+            passengerAppList: never[];
+            documentRoot: any;
+        };
+        meta: object;
+    }>;
+}>>;
+//# sourceMappingURL=router.d.ts.map

package/dist/router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/router.ts"],"names":[],"mappings":"AA0CA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;gBAsBvB,CAAC;iBACA,CAAH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEP,CAAA"}

package/dist/router.js

@@ -0,0 +1,118 @@
+import { TRPCError } from '@trpc/server';
+import { execSync } from 'child_process';
+import getString from 'nextjs-cms/translations';
+import { CpanelAPI } from 'nextjs-cms/utils';
+import { pluginProcedure, router } from 'nextjs-cms/api/trpc';
+const getNodeVersion = () => {
+    try {
+        const version = execSync('node -v', { encoding: 'utf-8' }).trim();
+        return version; // Returns something like "v20.10.0"
+    }
+    catch {
+        return null;
+    }
+};
+const getPnpmVersion = () => {
+    try {
+        const version = execSync('pnpm -v', { encoding: 'utf-8' }).trim();
+        return version; // Returns something like "10.10.0"
+    }
+    catch {
+        return null;
+    }
+};
+const getNpmVersion = () => {
+    try {
+        const version = execSync('npm -v', { encoding: 'utf-8' }).trim();
+        return version; // Returns something like "10.10.0"
+    }
+    catch {
+        return null;
+    }
+};
+const getBunVersion = () => {
+    try {
+        const version = execSync('bun -v', { encoding: 'utf-8' }).trim();
+        return version; // Returns something like "10.10.0"
+    }
+    catch {
+        return null;
+    }
+};
+export const cpanelDashboardRouter = router({
+    getData: pluginProcedure('plugin_cpanel_dashboard').query(async ({ ctx }) => {
+        if (!process.env.CPANEL_USER || !process.env.CPANEL_PASSWORD || !process.env.CPANEL_DOMAIN) {
+            throw new TRPCError({
+                code: 'BAD_REQUEST',
+                message: getString('cpanelCredentialsNotSet'),
+            });
+        }
+        const cPanel = new CpanelAPI(process.env.CPANEL_USER, process.env.CPANEL_PASSWORD, `cpanel.${process.env.CPANEL_DOMAIN}`);
+        const data = await Promise.all([
+            cPanel.callApi('DomainInfo', 'single_domain_data', {
+                domain: process.env.CPANEL_DOMAIN,
+            }),
+            cPanel.callApi('ResourceUsage', 'get_usages'),
+            cPanel.callApi('Mysql', 'get_server_information'),
+            cPanel.callApi('Mysql', 'list_databases'),
+        ]);
+        if (cPanel.isError) {
+            throw new TRPCError({
+                code: 'BAD_REQUEST',
+                message: cPanel.getError(),
+            });
+        }
+        const dbInfo = data[2];
+        const dbsList = data[3];
+        let bandwidthLimit = 0, bandwidthUsage = 0;
+        let diskSpaceLimit = 0, usedDiskSpace = 0;
+        let emailsLimit = 0, emailsCount = 0;
+        let dbsLimit = 0, dbsCount = 0;
+        const domainInfoData = data[0].data;
+        const cpanelUsagesArray = data[1].data;
+        cpanelUsagesArray.forEach((singleItemUsage) => {
+            switch (singleItemUsage.id) {
+                case 'bandwidth':
+                    bandwidthLimit = singleItemUsage.maximum || 1000000000000;
+                    bandwidthUsage = singleItemUsage.usage;
+                    break;
+                case 'disk_usage':
+                    diskSpaceLimit = singleItemUsage.maximum || 1000000000000;
+                    usedDiskSpace = singleItemUsage.usage;
+                    break;
+                case 'email_accounts':
+                    emailsLimit = singleItemUsage.maximum || 1000000000000;
+                    emailsCount = singleItemUsage.usage;
+                    break;
+                case 'mysql_databases':
+                    dbsLimit = singleItemUsage.maximum || 1000000000000;
+                    dbsCount = singleItemUsage.usage;
+                    break;
+            }
+        });
+        // Get Node.js version from the server
+        const nodeVersion = getNodeVersion();
+        const pnpmVersion = getPnpmVersion();
+        const npmVersion = getNpmVersion();
+        const bunVersion = getBunVersion();
+        return {
+            dbsLimit,
+            dbsCount,
+            bandwidthUsage,
+            bandwidthLimit,
+            diskSpaceUsage: usedDiskSpace,
+            diskSpaceLimit,
+            emailsUsage: emailsCount,
+            emailsLimit,
+            dbInfo: dbInfo.data,
+            dbsList: dbsList.data,
+            phpVersion: domainInfoData?.phpversion,
+            nodeVersion,
+            pnpmVersion,
+            npmVersion,
+            bunVersion,
+            passengerAppList: [],
+            documentRoot: domainInfoData?.documentroot,
+        };
+    }),
+});

package/dist/server.d.ts

@@ -0,0 +1,2 @@
+export default function CpanelDashboardServer(): Promise<import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=server.d.ts.map

package/dist/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.tsx"],"names":[],"mappings":"AAOA,wBAA8B,qBAAqB,qDA6BlD"}

package/dist/server.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { api, HydrateClient } from 'nextjs-cms/api/trpc/server';
+import { CpanelDashboardPage } from './client/DashboardPage.js';
+import { findPluginRouteByPath } from 'nextjs-cms/plugins/server';
+import { resolveLocalizedString, resolveLocale } from 'nextjs-cms/translations';
+import { getCMSConfig } from 'nextjs-cms/core';
+import auth from 'nextjs-cms/auth';
+export default async function CpanelDashboardServer() {
+    const helpers = api;
+    const prefetch = helpers.cpanelDashboard?.getData?.prefetch;
+    if (!prefetch) {
+        throw new Error('[cpanel-dashboard] Missing cpanelDashboard.getData prefetch helper.');
+    }
+    await prefetch();
+    // Resolve the plugin route title
+    const [route, session, config] = await Promise.all([
+        findPluginRouteByPath('/cpanel-dashboard'),
+        auth(),
+        getCMSConfig(),
+    ]);
+    const { supportedLanguages, fallbackLanguage } = config.i18n;
+    const locale = resolveLocale(session?.user?.locale, supportedLanguages, fallbackLanguage);
+    const resolvedTitle = route ? resolveLocalizedString(route.title, locale, fallbackLanguage) : '';
+    return (_jsx(HydrateClient, { children: _jsx(CpanelDashboardPage, { title: resolvedTitle }) }));
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@nextjscms/plugin-cpanel-dashboard",
+  "version": "1.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "default": "./dist/server.js"
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "README.md"
+  ],
+  "private": false,
+  "dependencies": {
+    "@trpc/server": "^11.4.2",
+    "zod": "4.1.12"
+  },
+  "peerDependencies": {
+    "lucide-react": "^0.563.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "nextjs-cms": "0.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "git clean -xdf .cache .turbo dist node_modules"
+  }
+}