@zumito-team/analytics-module 0.5.0 → 0.7.0

package/dist/index.js

@@ -24,7 +24,10 @@ export class AnalyticsModule extends Module {
                         {
                             label: 'Analiticas',
                             items: [
-                                { label: 'Dashboard', url: '/admin/analytics' },
+                                { label: 'Resumen', url: '/admin/analytics' },
+                                { label: 'Mensajes', url: '/admin/analytics/messages' },
+                                { label: 'Comandos', url: '/admin/analytics/commands' },
+                                { label: 'Crecimiento', url: '/admin/analytics/growth' },
                             ],
                         },
                     ],
@@ -37,9 +40,35 @@ export class AnalyticsModule extends Module {
         try {
             const { UserPanelNavigationService } = await import('@zumito-team/user-panel-module/services/UserPanelNavigationService');
             const nav = ServiceContainer.getService(UserPanelNavigationService);
-            nav.registerSubItems('dashboard', 'general', [
-                { id: 'analytics', label: 'analytics.sidebarTitle', url: '/panel/:guildId/analytics' },
-            ]);
+            nav.registerItem({
+                id: 'analytics',
+                icon: `<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-discord-white/60 group-hover:text-white" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 16l4-8 4 5 4-3"/></svg>`,
+                label: 'analytics.sidebarTitle',
+                url: '/panel/:guildId/analytics',
+                order: 3,
+                category: 'general',
+                sidebar: {
+                    showDropdown: false,
+                    sections: [
+                        {
+                            id: 'analytics-overview',
+                            label: 'analytics.overview',
+                            items: [
+                                { label: 'analytics.overview', url: '/panel/:guildId/analytics' },
+                            ],
+                        },
+                        {
+                            id: 'analytics-details',
+                            label: 'analytics.detailedStats',
+                            items: [
+                                { label: 'analytics.messages', url: '/panel/:guildId/analytics/messages' },
+                                { label: 'analytics.voice', url: '/panel/:guildId/analytics/voice' },
+                                { label: 'analytics.commands', url: '/panel/:guildId/analytics/commands' },
+                            ],
+                        },
+                    ],
+                },
+            });
         }
         catch (e) {
             console.warn('[AnalyticsModule] User panel not available, skipping user panel integration');

package/dist/routes/AdminAnalytics.d.ts

@@ -1,11 +1,9 @@
 import { Route, RouteMethod } from 'zumito-framework';
-import { Client } from 'zumito-framework/discord';
 import { AnalyticsCollector } from '../services/AnalyticsCollector.js';
 export declare class AdminAnalytics extends Route {
     private collector;
-    private client;
     method: RouteMethod;
     path: string;
-    constructor(collector?: AnalyticsCollector, client?: Client);
+    constructor(collector?: AnalyticsCollector);
     execute(req: any, res: any): Promise<void>;
 }

package/dist/routes/AdminAnalytics.js

@@ -2,14 +2,12 @@ import { Route, RouteMethod, ServiceContainer } from 'zumito-framework';
 import path, { dirname } from 'path';
 import { fileURLToPath } from 'url';
 import ejs from 'ejs';
-import { Client } from 'zumito-framework/discord';
 import { AnalyticsCollector } from '../services/AnalyticsCollector.js';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 export class AdminAnalytics extends Route {
-    constructor(collector = ServiceContainer.getService(AnalyticsCollector), client = ServiceContainer.getService(Client)) {
+    constructor(collector = ServiceContainer.getService(AnalyticsCollector)) {
         super();
         this.collector = collector;
-        this.client = client;
         this.method = RouteMethod.get;
         this.path = '/admin/analytics';
     }
@@ -22,26 +20,7 @@ export class AdminAnalytics extends Route {
         const summary = await this.collector.getGlobalStatsSummary(daysBack);
         const guildGrowth = await this.collector.getGuildGrowth(daysBack);
         const messagesPerDay = await this.collector.getMessagesPerDay(daysBack);
-        const commandsPerDay = await this.collector.getCommandsPerDay(null, daysBack);
-        const topCommands = await this.collector.getTopCommands(null, daysBack);
-        const slowestCommands = await this.collector.getSlowestCommands(null, daysBack);
-        const chartData = {
-            guildGrowth,
-            messagesPerDay,
-            commandsPerDay,
-            topCommands,
-            slowestCommands,
-        };
-        const { TranslationManager } = await import('zumito-framework');
-        const tm = ServiceContainer.getService(TranslationManager);
-        const t = (key, params) => tm.get(key, 'en', params);
-        const content = await ejs.renderFile(path.resolve(__dirname, '../views/admin-analytics.ejs'), {
-            summary,
-            chartData,
-            slowestCommands: slowestCommands.length > 0 ? slowestCommands : undefined,
-            t,
-            daysBack,
-        });
+        const content = await ejs.renderFile(path.resolve(__dirname, '../views/admin-analytics.ejs'), { summary, guildGrowth, messagesPerDay });
         const { AdminViewService } = await import('@zumito-team/admin-module/services/AdminViewService.js');
         const view = ServiceContainer.getService(AdminViewService);
         const html = await view.render({

package/dist/routes/AdminAnalyticsCommands.d.ts

@@ -0,0 +1,7 @@
+import { Route, RouteMethod } from 'zumito-framework';
+export declare class AdminAnalyticsCommands extends Route {
+    method: RouteMethod;
+    path: string;
+    private collector;
+    execute(req: any, res: any): Promise<void>;
+}

package/dist/routes/AdminAnalyticsCommands.js

@@ -0,0 +1,34 @@
+import { Route, RouteMethod, ServiceContainer } from 'zumito-framework';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import ejs from 'ejs';
+import { AnalyticsCollector } from '../services/AnalyticsCollector.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export class AdminAnalyticsCommands extends Route {
+    constructor() {
+        super(...arguments);
+        this.method = RouteMethod.get;
+        this.path = '/admin/analytics/commands';
+        this.collector = ServiceContainer.getService(AnalyticsCollector);
+    }
+    async execute(req, res) {
+        const { AdminAuthService } = await import('@zumito-team/admin-module/services/AdminAuthService.js');
+        const auth = await ServiceContainer.getService(AdminAuthService).isLoginValid(req);
+        if (!auth?.isValid)
+            return res.redirect('/admin/login');
+        const daysBack = parseInt(req.query.days) || 7;
+        const commandsPerDay = await this.collector.getCommandsPerDay(null, daysBack);
+        const topCommands = await this.collector.getTopCommands(null, daysBack, 15);
+        const slowestCommands = await this.collector.getSlowestCommands(null, daysBack, 10);
+        const content = await ejs.renderFile(path.resolve(__dirname, '../views/admin-analytics-commands.ejs'), { commandsPerDay, topCommands, slowestCommands, daysBack });
+        const { AdminViewService } = await import('@zumito-team/admin-module/services/AdminViewService.js');
+        const view = ServiceContainer.getService(AdminViewService);
+        const html = await view.render({
+            title: 'Analiticas - Comandos',
+            content,
+            reqPath: this.path,
+            user: { name: 'Admin' },
+        });
+        res.send(html);
+    }
+}

package/dist/routes/AdminAnalyticsGrowth.d.ts

@@ -0,0 +1,7 @@
+import { Route, RouteMethod } from 'zumito-framework';
+export declare class AdminAnalyticsGrowth extends Route {
+    method: RouteMethod;
+    path: string;
+    private collector;
+    execute(req: any, res: any): Promise<void>;
+}

package/dist/routes/AdminAnalyticsGrowth.js

@@ -0,0 +1,34 @@
+import { Route, RouteMethod, ServiceContainer } from 'zumito-framework';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import ejs from 'ejs';
+import { AnalyticsCollector } from '../services/AnalyticsCollector.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export class AdminAnalyticsGrowth extends Route {
+    constructor() {
+        super(...arguments);
+        this.method = RouteMethod.get;
+        this.path = '/admin/analytics/growth';
+        this.collector = ServiceContainer.getService(AnalyticsCollector);
+    }
+    async execute(req, res) {
+        const { AdminAuthService } = await import('@zumito-team/admin-module/services/AdminAuthService.js');
+        const auth = await ServiceContainer.getService(AdminAuthService).isLoginValid(req);
+        if (!auth?.isValid)
+            return res.redirect('/admin/login');
+        const daysBack = parseInt(req.query.days) || 30;
+        const guildGrowth = await this.collector.getGuildGrowth(daysBack);
+        const summary = await this.collector.getGlobalStatsSummary(daysBack);
+        const totalGuilds = Math.max(summary.totalGuilds, guildGrowth.length > 0 ? guildGrowth[guildGrowth.length - 1].guildCount : 0);
+        const content = await ejs.renderFile(path.resolve(__dirname, '../views/admin-analytics-growth.ejs'), { guildGrowth, totalGuilds, summary, daysBack });
+        const { AdminViewService } = await import('@zumito-team/admin-module/services/AdminViewService.js');
+        const view = ServiceContainer.getService(AdminViewService);
+        const html = await view.render({
+            title: 'Analiticas - Crecimiento',
+            content,
+            reqPath: this.path,
+            user: { name: 'Admin' },
+        });
+        res.send(html);
+    }
+}

package/dist/routes/AdminAnalyticsMessages.d.ts

@@ -0,0 +1,7 @@
+import { Route, RouteMethod } from 'zumito-framework';
+export declare class AdminAnalyticsMessages extends Route {
+    method: RouteMethod;
+    path: string;
+    private collector;
+    execute(req: any, res: any): Promise<void>;
+}

package/dist/routes/AdminAnalyticsMessages.js

@@ -0,0 +1,32 @@
+import { Route, RouteMethod, ServiceContainer } from 'zumito-framework';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import ejs from 'ejs';
+import { AnalyticsCollector } from '../services/AnalyticsCollector.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export class AdminAnalyticsMessages extends Route {
+    constructor() {
+        super(...arguments);
+        this.method = RouteMethod.get;
+        this.path = '/admin/analytics/messages';
+        this.collector = ServiceContainer.getService(AnalyticsCollector);
+    }
+    async execute(req, res) {
+        const { AdminAuthService } = await import('@zumito-team/admin-module/services/AdminAuthService.js');
+        const auth = await ServiceContainer.getService(AdminAuthService).isLoginValid(req);
+        if (!auth?.isValid)
+            return res.redirect('/admin/login');
+        const daysBack = parseInt(req.query.days) || 7;
+        const messagesPerDay = await this.collector.getMessagesPerDay(daysBack);
+        const content = await ejs.renderFile(path.resolve(__dirname, '../views/admin-analytics-messages.ejs'), { messagesPerDay, daysBack });
+        const { AdminViewService } = await import('@zumito-team/admin-module/services/AdminViewService.js');
+        const view = ServiceContainer.getService(AdminViewService);
+        const html = await view.render({
+            title: 'Analiticas - Mensajes',
+            content,
+            reqPath: this.path,
+            user: { name: 'Admin' },
+        });
+        res.send(html);
+    }
+}

package/dist/routes/UserPanelAnalytics.js

@@ -57,23 +57,7 @@ export class UserPanelAnalytics extends Route {
             leavesPerDay.push({ date: s.date, count: s.leave_count });
             voicePerDay.push({ date: s.date, count: s.voice_minutes });
         }
-        const commandsPerDay = await this.collector.getCommandsPerDay(guildId, daysBack);
-        const topCommands = await this.collector.getTopCommands(guildId, daysBack);
-        const slowestCommands = await this.collector.getSlowestCommands(guildId, daysBack);
-        const channelVoice = await this.collector.getVoiceChannelStats(guildId, daysBack);
-        const chartData = {
-            messagesPerDay, joinsPerDay, leavesPerDay, voicePerDay,
-            commandsPerDay, topCommands, slowestCommands, channelVoice,
-        };
-        const config = await this.collector.getConfig(guildId);
-        const content = await ejs.renderFile(path.resolve(__dirname, '../views/user-analytics.ejs'), {
-            guildSummary,
-            chartData,
-            slowestCommands: (config.track_command_performance && slowestCommands.length > 0) ? slowestCommands : undefined,
-            channelVoice: (config.track_per_channel_voice && channelVoice.length > 0) ? channelVoice : undefined,
-            t,
-            daysBack,
-        });
+        const content = await ejs.renderFile(path.resolve(__dirname, '../views/user-analytics.ejs'), { guildSummary, messagesPerDay, joinsPerDay, leavesPerDay, t });
         const view = ServiceContainer.getService(UserPanelViewService);
         const html = await view.render({ content, reqPath: req.path, req, res });
         res.send(html);

package/dist/routes/UserPanelAnalyticsCommands.d.ts

@@ -0,0 +1,8 @@
+import { Route, RouteMethod } from 'zumito-framework';
+export declare class UserPanelAnalyticsCommands extends Route {
+    method: RouteMethod;
+    path: string;
+    private collector;
+    private client;
+    execute(req: any, res: any): Promise<void>;
+}

package/dist/routes/UserPanelAnalyticsCommands.js

@@ -0,0 +1,48 @@
+import { Route, RouteMethod, ServiceContainer } from 'zumito-framework';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import ejs from 'ejs';
+import { Client, PermissionFlagsBits } from 'zumito-framework/discord';
+import { AnalyticsCollector } from '../services/AnalyticsCollector.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export class UserPanelAnalyticsCommands extends Route {
+    constructor() {
+        super(...arguments);
+        this.method = RouteMethod.get;
+        this.path = '/panel/:guildId/analytics/commands';
+        this.collector = ServiceContainer.getService(AnalyticsCollector);
+        this.client = ServiceContainer.getService(Client);
+    }
+    async execute(req, res) {
+        const { UserPanelAuthService } = await import('@zumito-team/user-panel-module/services/UserPanelAuthService');
+        const { UserPanelViewService } = await import('@zumito-team/user-panel-module/services/UserPanelViewService');
+        const { UserPanelLanguageManager } = await import('@zumito-team/user-panel-module/services/UserPanelLanguageManager');
+        const authService = ServiceContainer.getService(UserPanelAuthService);
+        const authData = await authService.isLoginValid(req);
+        if (!authData.isValid)
+            return res.redirect('/panel/login');
+        const userId = authData.data.discordUserData.id;
+        const guildId = req.params.guildId;
+        const guild = this.client.guilds.cache.get(guildId);
+        if (!guild)
+            return res.status(404).send('Server not found');
+        let member = guild.members.cache.get(userId);
+        if (!member)
+            member = await guild.members.fetch(userId).catch(() => null);
+        if (!member || !(member.permissions.has(PermissionFlagsBits.Administrator) ||
+            member.permissions.has(PermissionFlagsBits.ManageGuild) || guild.ownerId === userId)) {
+            return res.status(403).send('No tienes permisos en este servidor');
+        }
+        const daysBack = parseInt(req.query.days) || 7;
+        const langMgr = ServiceContainer.getService(UserPanelLanguageManager);
+        const { t } = langMgr.getLanguageVariables(req, res);
+        const commandsPerDay = await this.collector.getCommandsPerDay(guildId, daysBack);
+        const topCommands = await this.collector.getTopCommands(guildId, daysBack, 15);
+        const slowestCommands = await this.collector.getSlowestCommands(guildId, daysBack, 10);
+        const config = await this.collector.getConfig(guildId);
+        const content = await ejs.renderFile(path.resolve(__dirname, '../views/user-analytics-commands.ejs'), { commandsPerDay, topCommands, slowestCommands: config.track_command_performance ? slowestCommands : null, t, daysBack });
+        const view = ServiceContainer.getService(UserPanelViewService);
+        const html = await view.render({ content, reqPath: req.path, req, res });
+        res.send(html);
+    }
+}

package/dist/routes/UserPanelAnalyticsMessages.d.ts

@@ -0,0 +1,8 @@
+import { Route, RouteMethod } from 'zumito-framework';
+export declare class UserPanelAnalyticsMessages extends Route {
+    method: RouteMethod;
+    path: string;
+    private collector;
+    private client;
+    execute(req: any, res: any): Promise<void>;
+}

package/dist/routes/UserPanelAnalyticsMessages.js

@@ -0,0 +1,51 @@
+import { Route, RouteMethod, ServiceContainer } from 'zumito-framework';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import ejs from 'ejs';
+import { Client, PermissionFlagsBits } from 'zumito-framework/discord';
+import { AnalyticsCollector } from '../services/AnalyticsCollector.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export class UserPanelAnalyticsMessages extends Route {
+    constructor() {
+        super(...arguments);
+        this.method = RouteMethod.get;
+        this.path = '/panel/:guildId/analytics/messages';
+        this.collector = ServiceContainer.getService(AnalyticsCollector);
+        this.client = ServiceContainer.getService(Client);
+    }
+    async execute(req, res) {
+        const { UserPanelAuthService } = await import('@zumito-team/user-panel-module/services/UserPanelAuthService');
+        const { UserPanelViewService } = await import('@zumito-team/user-panel-module/services/UserPanelViewService');
+        const { UserPanelLanguageManager } = await import('@zumito-team/user-panel-module/services/UserPanelLanguageManager');
+        const authService = ServiceContainer.getService(UserPanelAuthService);
+        const authData = await authService.isLoginValid(req);
+        if (!authData.isValid)
+            return res.redirect('/panel/login');
+        const userId = authData.data.discordUserData.id;
+        const guildId = req.params.guildId;
+        const guild = this.client.guilds.cache.get(guildId);
+        if (!guild)
+            return res.status(404).send('Server not found');
+        let member = guild.members.cache.get(userId);
+        if (!member)
+            member = await guild.members.fetch(userId).catch(() => null);
+        if (!member || !(member.permissions.has(PermissionFlagsBits.Administrator) ||
+            member.permissions.has(PermissionFlagsBits.ManageGuild) || guild.ownerId === userId)) {
+            return res.status(403).send('No tienes permisos en este servidor');
+        }
+        const daysBack = parseInt(req.query.days) || 7;
+        const langMgr = ServiceContainer.getService(UserPanelLanguageManager);
+        const { t } = langMgr.getLanguageVariables(req, res);
+        const stats = await this.collector.getGuildStats(guildId, daysBack);
+        let totalMessages = 0;
+        const messagesPerDay = [];
+        for (const s of stats) {
+            totalMessages += s.message_count;
+            messagesPerDay.push({ date: s.date, count: s.message_count });
+        }
+        const content = await ejs.renderFile(path.resolve(__dirname, '../views/user-analytics-messages.ejs'), { totalMessages, messagesPerDay, t, daysBack });
+        const view = ServiceContainer.getService(UserPanelViewService);
+        const html = await view.render({ content, reqPath: req.path, req, res });
+        res.send(html);
+    }
+}

package/dist/routes/UserPanelAnalyticsVoice.d.ts

@@ -0,0 +1,8 @@
+import { Route, RouteMethod } from 'zumito-framework';
+export declare class UserPanelAnalyticsVoice extends Route {
+    method: RouteMethod;
+    path: string;
+    private collector;
+    private client;
+    execute(req: any, res: any): Promise<void>;
+}

package/dist/routes/UserPanelAnalyticsVoice.js

@@ -0,0 +1,53 @@
+import { Route, RouteMethod, ServiceContainer } from 'zumito-framework';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import ejs from 'ejs';
+import { Client, PermissionFlagsBits } from 'zumito-framework/discord';
+import { AnalyticsCollector } from '../services/AnalyticsCollector.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export class UserPanelAnalyticsVoice extends Route {
+    constructor() {
+        super(...arguments);
+        this.method = RouteMethod.get;
+        this.path = '/panel/:guildId/analytics/voice';
+        this.collector = ServiceContainer.getService(AnalyticsCollector);
+        this.client = ServiceContainer.getService(Client);
+    }
+    async execute(req, res) {
+        const { UserPanelAuthService } = await import('@zumito-team/user-panel-module/services/UserPanelAuthService');
+        const { UserPanelViewService } = await import('@zumito-team/user-panel-module/services/UserPanelViewService');
+        const { UserPanelLanguageManager } = await import('@zumito-team/user-panel-module/services/UserPanelLanguageManager');
+        const authService = ServiceContainer.getService(UserPanelAuthService);
+        const authData = await authService.isLoginValid(req);
+        if (!authData.isValid)
+            return res.redirect('/panel/login');
+        const userId = authData.data.discordUserData.id;
+        const guildId = req.params.guildId;
+        const guild = this.client.guilds.cache.get(guildId);
+        if (!guild)
+            return res.status(404).send('Server not found');
+        let member = guild.members.cache.get(userId);
+        if (!member)
+            member = await guild.members.fetch(userId).catch(() => null);
+        if (!member || !(member.permissions.has(PermissionFlagsBits.Administrator) ||
+            member.permissions.has(PermissionFlagsBits.ManageGuild) || guild.ownerId === userId)) {
+            return res.status(403).send('No tienes permisos en este servidor');
+        }
+        const daysBack = parseInt(req.query.days) || 7;
+        const langMgr = ServiceContainer.getService(UserPanelLanguageManager);
+        const { t } = langMgr.getLanguageVariables(req, res);
+        const stats = await this.collector.getGuildStats(guildId, daysBack);
+        const channelVoice = await this.collector.getVoiceChannelStats(guildId, daysBack);
+        let totalVoice = 0;
+        const voicePerDay = [];
+        for (const s of stats) {
+            totalVoice += s.voice_minutes;
+            voicePerDay.push({ date: s.date, count: s.voice_minutes });
+        }
+        const config = await this.collector.getConfig(guildId);
+        const content = await ejs.renderFile(path.resolve(__dirname, '../views/user-analytics-voice.ejs'), { totalVoice, voicePerDay, channelVoice: config.track_per_channel_voice ? channelVoice : null, t, daysBack });
+        const view = ServiceContainer.getService(UserPanelViewService);
+        const html = await view.render({ content, reqPath: req.path, req, res });
+        res.send(html);
+    }
+}

package/dist/services/AnalyticsCollector.js

@@ -15,7 +15,7 @@ export class AnalyticsCollector {
         this.cleanupTimer = null;
     }
     repo(name) {
-        return this.repo(name);
+        return this.db.getRepository(name);
     }
     // ── Event recording ──────────────────────────────────────────
     async ensuredConfig(guildId) {

package/dist/views/admin-analytics-commands.ejs

@@ -0,0 +1,55 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground">Comandos</h1>
+        <div class="flex gap-2">
+            <a href="?days=7" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">7d</a>
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">30d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="card">
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Comandos por Dia</h3>
+            <canvas id="chartCommands" width="400" height="200"></canvas>
+        </div>
+        <div class="card">
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Top Comandos</h3>
+            <canvas id="chartTop" width="400" height="200"></canvas>
+        </div>
+    </div>
+    <% if (typeof slowestCommands !== 'undefined' && slowestCommands.length > 0) { %>
+    <div class="card mt-6">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Comandos Mas Lentos (ms)</h3>
+        <canvas id="chartSlow" width="700" height="250"></canvas>
+    </div>
+    <% } %>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartCommands'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(commandsPerDay.map(v => v.date)) %>,
+        datasets: [{ label: 'Comandos', data: <%- JSON.stringify(commandsPerDay.map(v => v.count)) %>, backgroundColor: '#5865f2', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+new Chart(document.getElementById('chartTop'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(topCommands.map(v => v.command_name)) %>,
+        datasets: [{ label: 'Usos', data: <%- JSON.stringify(topCommands.map(v => v.usage_count)) %>, backgroundColor: topCommands.map((_, i) => 'rgba(88,101,242,' + Math.max(0.3, 1 - i * 0.08) + ')'), borderRadius: 4 }]
+    },
+    options: { indexAxis: 'y', responsive: true, plugins: { legend: { display: false } } }
+});
+<% if (typeof slowestCommands !== 'undefined' && slowestCommands.length > 0) { %>
+new Chart(document.getElementById('chartSlow'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(slowestCommands.map(v => v.command_name)) %>,
+        datasets: [{ label: 'ms', data: <%- JSON.stringify(slowestCommands.map(v => v.avgExecutionTimeMs)) %>, backgroundColor: '#fee75c', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { title: { display: true, text: 'ms' } } } }
+});
+<% } %>
+</script>

package/dist/views/admin-analytics-growth.ejs

@@ -0,0 +1,46 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground">Crecimiento</h1>
+        <div class="flex gap-2">
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">30d</a>
+            <a href="?days=60" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">60d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="grid grid-cols-3 gap-4 mb-6">
+        <div class="card text-center">
+            <div class="text-3xl font-bold text-discord-foreground"><%= totalGuilds %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Servidores Totales</div>
+        </div>
+        <div class="card text-center">
+            <div class="text-3xl font-bold text-discord-foreground"><%= summary.totalMessages %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Mensajes</div>
+        </div>
+        <div class="card text-center">
+            <div class="text-3xl font-bold text-discord-foreground"><%= summary.totalCommands %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Comandos</div>
+        </div>
+    </div>
+    <div class="card">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Servidores Activos por Dia</h3>
+        <canvas id="chartGrowth" width="700" height="300"></canvas>
+    </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartGrowth'), {
+    type: 'line',
+    data: {
+        labels: <%- JSON.stringify(guildGrowth.map(v => v.date)) %>,
+        datasets: [{
+            label: 'Servidores',
+            data: <%- JSON.stringify(guildGrowth.map(v => v.guildCount)) %>,
+            borderColor: '#57f287',
+            backgroundColor: 'rgba(87,242,135,0.1)',
+            fill: true,
+            tension: 0.3,
+        }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+</script>

package/dist/views/admin-analytics-messages.ejs

@@ -0,0 +1,30 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground">Mensajes</h1>
+        <div class="flex gap-2">
+            <a href="?days=7" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">7d</a>
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">30d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="card">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Mensajes por Dia (<%= daysBack %> dias)</h3>
+        <canvas id="chartMessages" width="700" height="300"></canvas>
+    </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartMessages'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(messagesPerDay.map(v => v.date)) %>,
+        datasets: [{
+            label: 'Mensajes',
+            data: <%- JSON.stringify(messagesPerDay.map(v => v.count)) %>,
+            backgroundColor: '#5865f2',
+            borderRadius: 4,
+        }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+</script>

package/dist/views/admin-analytics.ejs

@@ -1,170 +1,76 @@
 <div class="p-4">
     <div class="flex items-center justify-between mb-6">
-        <h1 class="text-2xl font-bold text-discord-foreground"><%= t('analytics.botStats') %></h1>
-        <div class="flex gap-2">
-            <button data-days="7" class="date-btn btn-primary text-sm px-3 py-1 rounded"><%= t('analytics.last7days') %></button>
-            <button data-days="30" class="date-btn text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground"><%= t('analytics.last30days') %></button>
-            <button data-days="90" class="date-btn text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground"><%= t('analytics.last90days') %></button>
-        </div>
+        <h1 class="text-2xl font-bold text-discord-foreground">Analiticas</h1>
     </div>
 
-    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
-        <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= summary.totalGuilds %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.totalGuilds') %></div>
-        </div>
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
         <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= summary.totalMessages %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.messages') %></div>
+            <div class="text-2xl font-bold text-discord-primary"><%= summary.totalGuilds %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Servidores</div>
         </div>
         <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= summary.totalCommands %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.commands') %></div>
+            <div class="text-2xl font-bold text-discord-success"><%= summary.totalMessages %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Mensajes</div>
         </div>
         <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= summary.totalJoins %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.joins') %></div>
+            <div class="text-2xl font-bold text-discord-warning"><%= summary.totalCommands %></div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Comandos</div>
         </div>
         <div class="card text-center">
             <div class="text-2xl font-bold text-discord-foreground"><%= Math.round(summary.totalVoiceMinutes) %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.voice') %> (min)</div>
+            <div class="text-xs text-discord-foreground/60 mt-1">Min. Voz</div>
         </div>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.guildGrowth') %></h3>
-            <canvas id="chartGuildGrowth" width="400" height="200"></canvas>
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Crecimiento de Servidores</h3>
+            <canvas id="chartGrowth" width="400" height="200"></canvas>
         </div>
         <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.messagesPerDay') %></h3>
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground">Mensajes por Dia</h3>
             <canvas id="chartMessages" width="400" height="200"></canvas>
         </div>
-        <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.commandsPerDay') %></h3>
-            <canvas id="chartCommands" width="400" height="200"></canvas>
-        </div>
-        <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.topCommands') %></h3>
-            <canvas id="chartTopCommands" width="400" height="200"></canvas>
-        </div>
     </div>
-
-    <% if (typeof slowestCommands !== 'undefined' && slowestCommands.length > 0) { %>
-    <div class="card mb-6">
-        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.slowestCommands') %></h3>
-        <canvas id="chartSlowestCommands" width="600" height="200"></canvas>
-    </div>
-    <% } %>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 <script>
 (function() {
-    const colors = {
-        primary: '#5865f2',
-        success: '#57f287',
-        warning: '#fee75c',
-        danger: '#ed4245',
-        foreground: '#ffffff',
-        foreground60: 'rgba(255,255,255,0.6)',
-        dark100: '#36393f',
-        dark200: '#2f3136',
-    };
-
-    Chart.defaults.color = colors.foreground60;
-    Chart.defaults.borderColor = colors.dark100;
-    Chart.defaults.plugins.legend.labels.color = colors.foreground60;
+    Chart.defaults.color = 'rgba(255,255,255,0.6)';
+    Chart.defaults.borderColor = '#36393f';
 
-    const data = <%- JSON.stringify(chartData) %>;
+    const guildGrowth = <%- JSON.stringify(guildGrowth) %>;
+    const messages = <%- JSON.stringify(messagesPerDay) %>;
 
-    function createLineChart(canvasId, label, values, keyX, keyY) {
-        new Chart(document.getElementById(canvasId), {
-            type: 'line',
-            data: {
-                labels: values.map(v => v[keyX]),
-                datasets: [{
-                    label: label,
-                    data: values.map(v => v[keyY]),
-                    borderColor: colors.primary,
-                    backgroundColor: 'rgba(88,101,242,0.1)',
-                    fill: true,
-                    tension: 0.3,
-                }]
-            },
-            options: { responsive: true, plugins: { legend: { display: false } } }
-        });
-    }
-
-    function createBarChart(canvasId, label, values, keyX, keyY) {
-        new Chart(document.getElementById(canvasId), {
-            type: 'bar',
-            data: {
-                labels: values.map(v => v[keyX]),
-                datasets: [{
-                    label: label,
-                    data: values.map(v => v[keyY]),
-                    backgroundColor: colors.primary,
-                    borderRadius: 4,
-                }]
-            },
-            options: { responsive: true, plugins: { legend: { display: false } } }
-        });
-    }
-
-    function createHorizontalBarChart(canvasId, label, values, keyX, keyY) {
-        new Chart(document.getElementById(canvasId), {
-            type: 'bar',
-            data: {
-                labels: values.map(v => v[keyX]),
-                datasets: [{
-                    label: label,
-                    data: values.map(v => v[keyY]),
-                    backgroundColor: values.map((_, i) => {
-                        const alpha = 1 - (i * 0.08);
-                        return `rgba(88,101,242,${Math.max(0.3, alpha)})`;
-                    }),
-                    borderRadius: 4,
-                }]
-            },
-            options: {
-                indexAxis: 'y',
-                responsive: true,
-                plugins: { legend: { display: false } }
-            }
-        });
-    }
-
-    createLineChart('chartGuildGrowth', '<%= t("analytics.guildGrowth") %>', data.guildGrowth, 'date', 'guildCount');
-    createBarChart('chartMessages', '<%= t("analytics.messagesPerDay") %>', data.messagesPerDay, 'date', 'count');
-    createBarChart('chartCommands', '<%= t("analytics.commandsPerDay") %>', data.commandsPerDay, 'date', 'count');
-    createHorizontalBarChart('chartTopCommands', '<%= t("analytics.topCommands") %>', data.topCommands, 'command_name', 'usage_count');
+    new Chart(document.getElementById('chartGrowth'), {
+        type: 'line',
+        data: {
+            labels: guildGrowth.map(v => v.date),
+            datasets: [{
+                label: 'Servidores',
+                data: guildGrowth.map(v => v.guildCount),
+                borderColor: '#57f287',
+                backgroundColor: 'rgba(87,242,135,0.1)',
+                fill: true,
+                tension: 0.3,
+            }]
+        },
+        options: { responsive: true, plugins: { legend: { display: false } } }
+    });
 
-    <% if (typeof slowestCommands !== 'undefined' && slowestCommands.length > 0) { %>
-    new Chart(document.getElementById('chartSlowestCommands'), {
+    new Chart(document.getElementById('chartMessages'), {
         type: 'bar',
         data: {
-            labels: data.slowestCommands.map(v => v.command_name),
+            labels: messages.map(v => v.date),
             datasets: [{
-                label: '<%= t("analytics.avgExecutionTime") %> (ms)',
-                data: data.slowestCommands.map(v => v.avgExecutionTimeMs),
-                backgroundColor: colors.warning,
+                label: 'Mensajes',
+                data: messages.map(v => v.count),
+                backgroundColor: '#5865f2',
                 borderRadius: 4,
             }]
         },
-        options: {
-            responsive: true,
-            plugins: { legend: { display: false } },
-            scales: { y: { title: { display: true, text: 'ms' } } }
-        }
-    });
-    <% } %>
-
-    document.querySelectorAll('.date-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const days = btn.dataset.days;
-            window.location.href = '/admin/analytics?days=' + days;
-        });
+        options: { responsive: true, plugins: { legend: { display: false } } }
     });
 })();
 </script>

package/dist/views/user-analytics-commands.ejs

@@ -0,0 +1,55 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground"><%= t('analytics.commands') %></h1>
+        <div class="flex gap-2">
+            <a href="?days=7" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">7d</a>
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">30d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="card">
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.commandsPerDay') %></h3>
+            <canvas id="chartCommands" width="400" height="200"></canvas>
+        </div>
+        <div class="card">
+            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.topCommands') %></h3>
+            <canvas id="chartTop" width="400" height="200"></canvas>
+        </div>
+    </div>
+    <% if (slowestCommands && slowestCommands.length > 0) { %>
+    <div class="card mt-6">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.slowestCommands') %></h3>
+        <canvas id="chartSlow" width="700" height="250"></canvas>
+    </div>
+    <% } %>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartCommands'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(commandsPerDay.map(v => v.date)) %>,
+        datasets: [{ label: '<%= t("analytics.commands") %>', data: <%- JSON.stringify(commandsPerDay.map(v => v.count)) %>, backgroundColor: '#5865f2', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+new Chart(document.getElementById('chartTop'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(topCommands.map(v => v.command_name)) %>,
+        datasets: [{ label: '<%= t("analytics.usageCount") %>', data: <%- JSON.stringify(topCommands.map(v => v.usage_count)) %>, backgroundColor: topCommands.map((_, i) => 'rgba(88,101,242,' + Math.max(0.3, 1 - i * 0.08) + ')'), borderRadius: 4 }]
+    },
+    options: { indexAxis: 'y', responsive: true, plugins: { legend: { display: false } } }
+});
+<% if (slowestCommands && slowestCommands.length > 0) { %>
+new Chart(document.getElementById('chartSlow'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(slowestCommands.map(v => v.command_name)) %>,
+        datasets: [{ label: 'ms', data: <%- JSON.stringify(slowestCommands.map(v => v.avgExecutionTimeMs)) %>, backgroundColor: '#fee75c', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { title: { display: true, text: 'ms' } } } }
+});
+<% } %>
+</script>

package/dist/views/user-analytics-messages.ejs

@@ -0,0 +1,31 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground"><%= t('analytics.messages') %></h1>
+        <div class="flex gap-2">
+            <a href="?days=7" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">7d</a>
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">30d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="card mb-6">
+        <div class="text-center py-4">
+            <div class="text-4xl font-bold text-discord-primary"><%= totalMessages %></div>
+            <div class="text-sm text-discord-foreground/60"><%= t('analytics.messages') %> (<%= daysBack %> <%= t('analytics.minutes') %>)</div>
+        </div>
+    </div>
+    <div class="card">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.messagesPerDay') %></h3>
+        <canvas id="chartMessages" width="700" height="300"></canvas>
+    </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartMessages'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(messagesPerDay.map(v => v.date)) %>,
+        datasets: [{ label: '<%= t("analytics.messages") %>', data: <%- JSON.stringify(messagesPerDay.map(v => v.count)) %>, backgroundColor: '#5865f2', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+</script>

package/dist/views/user-analytics-voice.ejs

@@ -0,0 +1,47 @@
+<div class="p-4">
+    <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-discord-foreground"><%= t('analytics.voice') %></h1>
+        <div class="flex gap-2">
+            <a href="?days=7" class="text-sm px-3 py-1 rounded bg-discord-primary text-white">7d</a>
+            <a href="?days=30" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">30d</a>
+            <a href="?days=90" class="text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground">90d</a>
+        </div>
+    </div>
+    <div class="card mb-6">
+        <div class="text-center py-4">
+            <div class="text-4xl font-bold text-discord-primary"><%= Math.round(totalVoice) %> min</div>
+            <div class="text-sm text-discord-foreground/60"><%= t('analytics.voiceActivity') %></div>
+        </div>
+    </div>
+    <div class="card mb-6">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.voiceActivity') %> (<%= daysBack %> dias)</h3>
+        <canvas id="chartVoice" width="700" height="300"></canvas>
+    </div>
+    <% if (channelVoice && channelVoice.length > 0) { %>
+    <div class="card">
+        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.perChannelVoice') %></h3>
+        <canvas id="chartChannels" width="700" height="250"></canvas>
+    </div>
+    <% } %>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+new Chart(document.getElementById('chartVoice'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(voicePerDay.map(v => v.date)) %>,
+        datasets: [{ label: 'min', data: <%- JSON.stringify(voicePerDay.map(v => v.count)) %>, backgroundColor: '#57f287', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+<% if (channelVoice && channelVoice.length > 0) { %>
+new Chart(document.getElementById('chartChannels'), {
+    type: 'bar',
+    data: {
+        labels: <%- JSON.stringify(channelVoice.map(v => v.channel_id)) %>,
+        datasets: [{ label: 'min', data: <%- JSON.stringify(channelVoice.map(v => v.total_minutes)) %>, backgroundColor: '#5865f2', borderRadius: 4 }]
+    },
+    options: { responsive: true, plugins: { legend: { display: false } } }
+});
+<% } %>
+</script>

package/dist/views/user-analytics.ejs

@@ -1,37 +1,28 @@
 <div class="p-4">
-    <div class="flex items-center justify-between mb-6">
+    <div class="mb-6">
         <h1 class="text-2xl font-bold text-discord-foreground"><%= t('analytics.serverStats') %></h1>
-        <div class="flex gap-2">
-            <button data-days="7" class="date-btn btn-primary text-sm px-3 py-1 rounded"><%= t('analytics.last7days') %></button>
-            <button data-days="30" class="date-btn text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground"><%= t('analytics.last30days') %></button>
-            <button data-days="90" class="date-btn text-sm px-3 py-1 rounded bg-discord-dark-100 text-discord-foreground/70 hover:text-discord-foreground"><%= t('analytics.last90days') %></button>
-        </div>
     </div>
 
-    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
         <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= guildSummary.totalMessages %></div>
+            <div class="text-2xl font-bold text-discord-primary"><%= guildSummary.totalMessages %></div>
             <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.messages') %></div>
         </div>
         <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= guildSummary.totalCommands %></div>
+            <div class="text-2xl font-bold text-discord-success"><%= guildSummary.totalCommands %></div>
             <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.commands') %></div>
         </div>
-        <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= guildSummary.totalJoins %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.joins') %></div>
-        </div>
-        <div class="card text-center">
-            <div class="text-2xl font-bold text-discord-foreground"><%= guildSummary.totalLeaves %></div>
-            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.leaves') %></div>
-        </div>
         <div class="card text-center">
             <div class="text-2xl font-bold text-discord-foreground"><%= Math.round(guildSummary.totalVoiceMinutes) %></div>
             <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.voice') %> (min)</div>
         </div>
+        <div class="card text-center">
+            <div class="text-2xl font-bold"><span class="text-discord-success"><%= guildSummary.totalJoins %></span> / <span class="text-discord-danger"><%= guildSummary.totalLeaves %></span></div>
+            <div class="text-xs text-discord-foreground/60 mt-1"><%= t('analytics.joins') %> / <%= t('analytics.leaves') %></div>
+        </div>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div class="card">
             <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.messagesPerDay') %></h3>
             <canvas id="chartMessages" width="400" height="200"></canvas>
@@ -40,170 +31,38 @@
             <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.joinsVsLeaves') %></h3>
             <canvas id="chartMembers" width="400" height="200"></canvas>
         </div>
-        <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.voiceActivity') %></h3>
-            <canvas id="chartVoice" width="400" height="200"></canvas>
-        </div>
-        <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.commandsPerDay') %></h3>
-            <canvas id="chartCommands" width="400" height="200"></canvas>
-        </div>
-    </div>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-        <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.topCommands') %></h3>
-            <canvas id="chartTopCommands" width="400" height="200"></canvas>
-        </div>
-        <% if (typeof slowestCommands !== 'undefined' && slowestCommands.length > 0) { %>
-        <div class="card">
-            <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.slowestCommands') %></h3>
-            <canvas id="chartSlowestCommands" width="400" height="200"></canvas>
-        </div>
-        <% } %>
     </div>
-
-    <% if (typeof channelVoice !== 'undefined' && channelVoice.length > 0) { %>
-    <div class="card mb-6">
-        <h3 class="text-lg font-semibold mb-4 text-discord-foreground"><%= t('analytics.perChannelVoice') %></h3>
-        <canvas id="chartChannelVoice" width="600" height="200"></canvas>
-    </div>
-    <% } %>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 <script>
 (function() {
-    const colors = {
-        primary: '#5865f2',
-        success: '#57f287',
-        warning: '#fee75c',
-        danger: '#ed4245',
-        foreground: '#ffffff',
-        foreground60: 'rgba(255,255,255,0.6)',
-        dark100: '#36393f',
-        dark200: '#2f3136',
-    };
-
-    Chart.defaults.color = colors.foreground60;
-    Chart.defaults.borderColor = colors.dark100;
-    Chart.defaults.plugins.legend.labels.color = colors.foreground60;
+    Chart.defaults.color = 'rgba(255,255,255,0.6)';
+    Chart.defaults.borderColor = '#36393f';
 
-    const data = <%- JSON.stringify(chartData) %>;
+    const messages = <%- JSON.stringify(messagesPerDay) %>;
+    const joins = <%- JSON.stringify(joinsPerDay) %>;
+    const leaves = <%- JSON.stringify(leavesPerDay) %>;
 
-    function createBarChart(canvasId, label, values, keyX, keyY) {
-        new Chart(document.getElementById(canvasId), {
-            type: 'bar',
-            data: {
-                labels: values.map(v => v[keyX]),
-                datasets: [{
-                    label: label,
-                    data: values.map(v => v[keyY]),
-                    backgroundColor: colors.primary,
-                    borderRadius: 4,
-                }]
-            },
-            options: { responsive: true, plugins: { legend: { display: false } } }
-        });
-    }
-
-    function createHorizontalBarChart(canvasId, label, values, keyX, keyY) {
-        new Chart(document.getElementById(canvasId), {
-            type: 'bar',
-            data: {
-                labels: values.map(v => v[keyX]),
-                datasets: [{
-                    label: label,
-                    data: values.map(v => v[keyY]),
-                    backgroundColor: values.map((_, i) => {
-                        const alpha = 1 - (i * 0.08);
-                        return `rgba(88,101,242,${Math.max(0.3, alpha)})`;
-                    }),
-                    borderRadius: 4,
-                }]
-            },
-            options: {
-                indexAxis: 'y',
-                responsive: true,
-                plugins: { legend: { display: false } }
-            }
-        });
-    }
-
-    createBarChart('chartMessages', '<%= t("analytics.messagesPerDay") %>', data.messagesPerDay, 'date', 'count');
-    createBarChart('chartVoice', '<%= t("analytics.voiceActivity") %>', data.voicePerDay, 'date', 'count');
-    createBarChart('chartCommands', '<%= t("analytics.commandsPerDay") %>', data.commandsPerDay, 'date', 'count');
-    createHorizontalBarChart('chartTopCommands', '<%= t("analytics.topCommands") %>', data.topCommands, 'command_name', 'usage_count');
+    new Chart(document.getElementById('chartMessages'), {
+        type: 'bar',
+        data: {
+            labels: messages.map(v => v.date),
+            datasets: [{ label: '<%= t("analytics.messages") %>', data: messages.map(v => v.count), backgroundColor: '#5865f2', borderRadius: 4 }]
+        },
+        options: { responsive: true, plugins: { legend: { display: false } } }
+    });
 
     new Chart(document.getElementById('chartMembers'), {
         type: 'line',
         data: {
-            labels: data.joinsPerDay.map(v => v.date),
+            labels: joins.map(v => v.date),
             datasets: [
-                {
-                    label: '<%= t("analytics.joins") %>',
-                    data: data.joinsPerDay.map(v => v.count),
-                    borderColor: colors.success,
-                    backgroundColor: 'rgba(87,242,135,0.1)',
-                    fill: true,
-                    tension: 0.3,
-                },
-                {
-                    label: '<%= t("analytics.leaves") %>',
-                    data: data.leavesPerDay.map(v => v.count),
-                    borderColor: colors.danger,
-                    backgroundColor: 'rgba(237,66,69,0.1)',
-                    fill: true,
-                    tension: 0.3,
-                }
+                { label: '<%= t("analytics.joins") %>', data: joins.map(v => v.count), borderColor: '#57f287', backgroundColor: 'rgba(87,242,135,0.1)', fill: true, tension: 0.3 },
+                { label: '<%= t("analytics.leaves") %>', data: leaves.map(v => v.count), borderColor: '#ed4245', backgroundColor: 'rgba(237,66,69,0.1)', fill: true, tension: 0.3 },
             ]
         },
         options: { responsive: true }
     });
-
-    <% if (typeof slowestCommands !== 'undefined' && slowestCommands.length > 0) { %>
-    new Chart(document.getElementById('chartSlowestCommands'), {
-        type: 'bar',
-        data: {
-            labels: data.slowestCommands.map(v => v.command_name),
-            datasets: [{
-                label: '<%= t("analytics.avgExecutionTime") %> (ms)',
-                data: data.slowestCommands.map(v => v.avgExecutionTimeMs),
-                backgroundColor: colors.warning,
-                borderRadius: 4,
-            }]
-        },
-        options: {
-            responsive: true,
-            plugins: { legend: { display: false } },
-            scales: { y: { title: { display: true, text: 'ms' } } }
-        }
-    });
-    <% } %>
-
-    <% if (typeof channelVoice !== 'undefined' && channelVoice.length > 0) { %>
-    new Chart(document.getElementById('chartChannelVoice'), {
-        type: 'bar',
-        data: {
-            labels: data.channelVoice.map(v => v.channel_id),
-            datasets: [{
-                label: '<%= t("analytics.totalMinutes") %>',
-                data: data.channelVoice.map(v => v.total_minutes),
-                backgroundColor: colors.primary,
-                borderRadius: 4,
-            }]
-        },
-        options: { responsive: true, plugins: { legend: { display: false } } }
-    });
-    <% } %>
-
-    document.querySelectorAll('.date-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const days = btn.dataset.days;
-            const currentUrl = new URL(window.location.href);
-            currentUrl.searchParams.set('days', days);
-            window.location.href = currentUrl.toString();
-        });
-    });
 })();
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumito-team/analytics-module",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Server analytics module with configurable tracking and optional panel integration",
   "type": "module",
   "main": "dist/index.js",