+
ボット数
${(guildInfo.botCount || 0).toLocaleString()}
-
+
総参加者数
${(settings.statistics?.totalJoins || 0).toLocaleString()}
-
+
総退出者数
${(settings.statistics?.totalLeaves || 0).toLocaleString()}
-
`;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | 日時 |
+ イベント |
+ ユーザー |
+
+
+
+ ${recentLogs.logs.slice(0, 5).map(log => `
+
+ | ${new Date(log.timestamp.seconds * 1000).toLocaleString()} |
+ ${log.eventType} |
+ ${log.executorTag || 'System'} |
+
+ `).join('')}
+
+
+
+
+ `;
+
feather.replace();
+
+ // Render Trend Chart
+ const ctx = document.getElementById('trendChart').getContext('2d');
+ const dates = Object.keys(trends);
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: dates,
+ datasets: [
+ {
+ label: '参加者',
+ data: dates.map(d => trends[d].joins),
+ borderColor: '#00e676',
+ tension: 0.4,
+ fill: true,
+ backgroundColor: 'rgba(0, 230, 118, 0.1)'
+ },
+ {
+ label: '退出者',
+ data: dates.map(d => trends[d].leaves),
+ borderColor: '#ff5252',
+ tension: 0.4,
+ fill: true,
+ backgroundColor: 'rgba(255, 82, 82, 0.1)'
+ }
+ ]
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: { legend: { labels: { color: '#b4b9d6' } } },
+ scales: {
+ x: { ticks: { color: '#b4b9d6' }, grid: { color: 'rgba(255,255,255,0.05)' } },
+ y: { ticks: { color: '#b4b9d6' }, grid: { color: 'rgba(255,255,255,0.05)' } }
+ }
+ }
+ });
},
// =====【ここから変更】=====
@@ -1002,6 +1200,119 @@ document.addEventListener('DOMContentLoaded', async () => {
trackChanges('#leveling-form');
},
+ tickets: async () => {
+ pageTitle.textContent = 'チケットシステム設定';
+ const settings = await api.get('/api/settings/tickets');
+
+ pageContent.innerHTML = `
+
+ `;
+
+ initializeTomSelect('#ticket-category', { items: [settings.categoryId] });
+ initializeTomSelect('#ticket-role', { items: [settings.supportRoleId] });
+
+ document.getElementById('tickets-form').onsubmit = async (e) => {
+ e.preventDefault();
+ const data = {
+ enabled: document.getElementById('ticket-enabled').checked,
+ categoryId: document.getElementById('ticket-category').value,
+ supportRoleId: document.getElementById('ticket-role').value,
+ title: document.getElementById('ticket-title').value,
+ description: document.getElementById('ticket-desc').value
+ };
+ await api.post('/api/settings/tickets', data);
+ showMessage('チケット設定を保存しました。');
+ resetDirtyState();
+ };
+ trackChanges('#tickets-form');
+ },
+
+ commands: async () => {
+ pageTitle.textContent = 'コマンド管理';
+ const disabledCommands = await api.get('/api/settings/commands');
+
+ // コマンドリスト (本来はAPIから取得すべきだが、固定でも可)
+ const commands = [
+ { id: 'ping', name: 'Ping', category: 'General' },
+ { id: 'help', name: 'Help', category: 'General' },
+ { id: 'rank', name: 'Rank', category: 'Leveling' },
+ { id: 'profile-card', name: 'Profile Card', category: 'Leveling' },
+ { id: 'warn', name: 'Warn', category: 'Moderation' },
+ { id: 'roleboard', name: 'Roleboard', category: 'Utility' },
+ { id: 'feedback', name: 'Feedback', category: 'Utility' }
+ ];
+
+ pageContent.innerHTML = `
+
+
+
無効化したコマンドはサーバー内で使用できなくなります。
+
+ ${commands.map(cmd => `
+
+
+
/${cmd.id}
+
${cmd.category}
+
+
+
+ `).join('')}
+
+
+
+ `;
+
+ document.getElementById('save-commands-btn').onclick = async () => {
+ const disabled = Array.from(document.querySelectorAll('.command-toggle'))
+ .filter(i => !i.checked)
+ .map(i => i.dataset.command);
+
+ await api.post('/api/settings/commands', { disabledCommands: disabled });
+ showMessage('コマンド設定を保存しました。');
+ resetDirtyState();
+ };
+
+ document.querySelectorAll('.command-toggle').forEach(el => el.onchange = () => isDirty = true);
+ },
+
ai: async () => {
pageTitle.textContent = 'AI設定';
const settings = await api.get('/api/settings/guild_settings');
@@ -1089,8 +1400,9 @@ document.addEventListener('DOMContentLoaded', async () => {
});
document.getElementById('ai-form').addEventListener('submit', handleFormSubmit);
trackChanges('#ai-form');
- },
- };
+ }
+ }
+};
// --- Roleboard Functions ---
const renderRoleboardList = async () => {
@@ -1459,58 +1771,6 @@ document.addEventListener('DOMContentLoaded', async () => {
}
};
- // --- Navigation ---
- const navigate = async (event) => {
- const proceed = async () => {
- resetDirtyState();
- if (window.innerWidth <= 768) {
- sidebar.classList.remove('is-open');
- }
-
- const page = window.location.hash.substring(1) || 'dashboard';
- navItems.forEach(item => item.classList.toggle('active', item.dataset.page === page));
- pageContent.innerHTML = '
';
-
- if (renderers[page]) {
- try {
- await renderers[page]();
- } catch (error) {
- pageContent.innerHTML = `
ページの読み込みに失敗しました: ${error.message}
`;
- }
- } else {
- pageContent.innerHTML = `
ページが見つかりません。
`;
- }
-
- feather.replace();
- };
-
- if (isDirty) {
- if (event && event.type === 'hashchange') {
- event.preventDefault();
- const oldHash = event.oldURL.split('#')[1] || 'dashboard';
- history.pushState(null, null, `#${oldHash}`);
- }
-
- createModal('未保存の変更があります',
- '
ページを移動すると、保存されていない変更は失われます。本当に移動しますか？
',
- [
- { id: 'cancel-nav', text: 'キャンセル', class: 'btn-secondary' },
- { id: 'confirm-nav', text: '移動する', class: 'btn-danger' }
- ]
- );
- document.getElementById('cancel-nav').onclick = closeModal;
- document.getElementById('confirm-nav').onclick = () => {
- closeModal();
- if (event) {
- const newHash = new URL(event.newURL).hash;
- window.location.hash = newHash;
- }
- proceed();
- };
- } else {
- proceed();
- }
- };
// --- Member Actions ---
const addMemberActionListeners = () => {
@@ -1601,55 +1861,5 @@ document.addEventListener('DOMContentLoaded', async () => {
};
- // --- Initialization ---
- const init = async () => {
- try {
- guildInfo = await api.get('/api/guild-info');
- document.getElementById('server-icon').src = guildInfo.icon || 'https://cdn.discordapp.com/embed/avatars/0.png';
- document.getElementById('server-name').textContent = guildInfo.name;
-
- loader.style.display = 'none';
- dashboardWrapper.style.display = 'flex';
-
- window.addEventListener('hashchange', navigate, false);
- await navigate();
-
- logoutBtn.addEventListener('click', () => {
- createModal('ログアウトの確認',
- '
本当にログアウトしますか？
',
- [
- { id: 'cancel-logout', text: 'キャンセル', class: 'btn-secondary' },
- { id: 'confirm-logout', text: 'ログアウト', class: 'btn-danger' }
- ]
- );
- document.getElementById('cancel-logout').onclick = closeModal;
- document.getElementById('confirm-logout').onclick = async () => {
- try {
- isDirty = false;
- await api.post('/api/logout');
- window.location.href = '/login';
- } catch (err) {
- showMessage('ログアウトに失敗しました', 'error');
- }
- };
- });
-
- menuToggle.addEventListener('click', () => {
- sidebar.classList.toggle('is-open');
- });
-
- window.addEventListener('beforeunload', (e) => {
- if (isDirty) {
- e.preventDefault();
- e.returnValue = '';
- return '';
- }
- });
-
- } catch (error) {
- loader.innerHTML = `
情報の読み込みに失敗しました。再ログインしてください。
ログインページへ`;
- }
- };
-
- init();
+ App.init();
});
\ No newline at end of file
diff --git a/public/dashboard.html b/public/dashboard.html
index b48f91e..342019a 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -42,6 +42,8 @@
サーバー名
ロールボード
オートモッド
レベリング
+
チケットシステム
+
コマンド管理
AI設定
ログ設定
diff --git a/public/style.css b/public/style.css
index 90a3910..51bdaad 100644
--- a/public/style.css
+++ b/public/style.css
@@ -113,6 +113,16 @@
50% { transform: translateY(-10px); }
}
+@keyframes pulse-glow {
+ 0%, 100% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.3); }
+ 50% { box-shadow: 0 0 40px rgba(0, 229, 255, 0.6); }
+}
+
+@keyframes slide-up {
+ from { transform: translateY(20px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
+
/* === Base Styles === */
* {
margin: 0;
@@ -146,10 +156,25 @@ body::before {
/* === Glassmorphism Utility === */
.glass {
- background: rgba(26, 31, 58, 0.7);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
+ background: rgba(26, 31, 58, 0.4);
+ backdrop-filter: blur(25px);
+ -webkit-backdrop-filter: blur(25px);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+.glass-card {
+ background: rgba(255, 255, 255, 0.03);
+ backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: var(--radius-lg);
+ transition: all var(--transition-base);
+}
+
+.glass-card:hover {
+ background: rgba(255, 255, 255, 0.05);
+ border-color: var(--primary);
+ transform: translateY(-5px);
}
/* === Loader === */
diff --git a/src/routes/admin.js b/src/routes/admin.js
index ded1060..99ecf38 100644
--- a/src/routes/admin.js
+++ b/src/routes/admin.js
@@ -122,4 +122,95 @@ router.post('/statuses', isAdminAuthenticated, async (req, res) => {
}
});
+router.get('/maintenance', isAdminAuthenticated, async (req, res) => {
+ try {
+ const docRef = doc(db, 'bot_settings', 'maintenance');
+ const snap = await getDoc(docRef);
+ res.json(snap.exists() ? snap.data() : { enabled: false });
+ } catch (error) {
+ res.status(500).json({ error: 'Failed to fetch maintenance status.' });
+ }
+});
+
+router.post('/maintenance', isAdminAuthenticated, async (req, res) => {
+ try {
+ const { enabled, reason } = req.body;
+ const docRef = doc(db, 'bot_settings', 'maintenance');
+ await setDoc(docRef, { enabled, reason, updatedAt: new Date().toISOString() });
+ res.status(200).json({ message: 'Maintenance status updated.' });
+ } catch (error) {
+ res.status(500).json({ error: 'Failed to update maintenance status.' });
+ }
+});
+
+router.get('/blacklist', isAdminAuthenticated, async (req, res) => {
+ try {
+ const docRef = doc(db, 'bot_settings', 'blacklist');
+ const snap = await getDoc(docRef);
+ res.json(snap.exists() ? snap.data().users || [] : []);
+ } catch (error) {
+ res.status(500).json({ error: 'Failed to fetch blacklist.' });
+ }
+});
+
+router.post('/blacklist', isAdminAuthenticated, async (req, res) => {
+ try {
+ const { userId, action } = req.body; // action: 'add' or 'remove'
+ const docRef = doc(db, 'bot_settings', 'blacklist');
+ const snap = await getDoc(docRef);
+ let users = snap.exists() ? snap.data().users || [] : [];
+
+ if (action === 'add') {
+ if (!users.includes(userId)) users.push(userId);
+ } else {
+ users = users.filter(id => id !== userId);
+ }
+
+ await setDoc(docRef, { users, updatedAt: new Date().toISOString() });
+ res.status(200).json({ message: `User ${action === 'add' ? 'added to' : 'removed from'} blacklist.` });
+ } catch (error) {
+ res.status(500).json({ error: 'Failed to update blacklist.' });
+ }
+});
+
+router.get('/health/history', isAdminAuthenticated, async (req, res) => {
+ try {
+ // Since we don't have a background task to record history,
+ // we'll return current stats and let the frontend track it.
+ // We could also try to find health logs if we had them.
+ res.json({
+ timestamp: new Date().toISOString(),
+ memory: (process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2),
+ ping: client.ws.ping
+ });
+ } catch (error) {
+ res.status(500).json({ error: 'Failed to fetch health data.' });
+ }
+});
+
+router.get('/user-search', isAdminAuthenticated, async (req, res) => {
+ const { userId } = req.query;
+ if (!userId) return res.status(400).json({ error: 'User ID is required.' });
+ try {
+ const user = await client.users.fetch(userId).catch(() => null);
+ if (!user) return res.status(404).json({ error: 'User not found in Discord.' });
+
+ const guilds = [];
+ for (const guild of client.guilds.cache.values()) {
+ if (guild.members.cache.has(userId)) {
+ guilds.push({ id: guild.id, name: guild.name });
+ }
+ }
+
+ res.json({
+ id: user.id,
+ tag: user.tag,
+ avatar: user.displayAvatarURL(),
+ guilds: guilds
+ });
+ } catch (error) {
+ res.status(500).json({ error: 'Failed to search user.' });
+ }
+});
+
module.exports = router;
diff --git a/src/routes/api.js b/src/routes/api.js
index cb88817..10b35d1 100644
--- a/src/routes/api.js
+++ b/src/routes/api.js
@@ -310,6 +310,81 @@ router.post('/settings/welcome-message', isAuthenticated, isGuildAdmin, async (r
}
});
+router.get('/settings/commands', isAuthenticated, isGuildAdmin, async (req, res) => {
+ try {
+ const settingsRef = doc(db, 'guild_settings', req.session.guildId);
+ const docSnap = await getDoc(settingsRef);
+ res.json(docSnap.exists() ? (docSnap.data().disabledCommands || []) : []);
+ } catch (error) {
+ res.status(500).json({ error: 'Failed to fetch command settings.' });
+ }
+});
+
+router.post('/settings/commands', isAuthenticated, isGuildAdmin, async (req, res) => {
+ try {
+ const settingsRef = doc(db, 'guild_settings', req.session.guildId);
+ await setDoc(settingsRef, { disabledCommands: req.body.disabledCommands }, { merge: true });
+ res.status(200).json({ message: 'Command settings updated.' });
+ } catch (error) {
+ res.status(500).json({ error: 'Failed to update command settings.' });
+ }
+});
+
+router.get('/settings/tickets', isAuthenticated, isGuildAdmin, async (req, res) => {
+ try {
+ const settingsRef = doc(db, 'guild_settings', req.session.guildId);
+ const docSnap = await getDoc(settingsRef);
+ res.json(docSnap.exists() ? (docSnap.data().ticketSystem || {}) : {});
+ } catch (error) {
+ res.status(500).json({ error: 'Failed to fetch ticket settings.' });
+ }
+});
+
+router.post('/settings/tickets', isAuthenticated, isGuildAdmin, async (req, res) => {
+ try {
+ const settingsRef = doc(db, 'guild_settings', req.session.guildId);
+ await setDoc(settingsRef, { ticketSystem: req.body }, { merge: true });
+ res.status(200).json({ message: 'Ticket settings updated.' });
+ } catch (error) {
+ res.status(500).json({ error: 'Failed to update ticket settings.' });
+ }
+});
+
+router.get('/analytics/trends', isAuthenticated, isGuildAdmin, async (req, res) => {
+ try {
+ const guildId = req.session.guildId;
+ const logsRef = collection(db, 'audit_logs');
+
+ // 直近30日間のデータを取得
+ const thirtyDaysAgo = new Date();
+ thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+
+ const q = query(
+ logsRef,
+ where('guildId', '==', guildId),
+ where('eventType', 'in', ['MemberJoin', 'MemberLeave']),
+ where('timestamp', '>=', thirtyDaysAgo),
+ orderBy('timestamp', 'asc')
+ );
+
+ const snapshot = await getDocs(q);
+ const trends = {};
+
+ snapshot.forEach(doc => {
+ const data = doc.data();
+ const date = data.timestamp.toDate().toLocaleDateString('ja-JP');
+ if (!trends[date]) trends[date] = { joins: 0, leaves: 0 };
+ if (data.eventType === 'MemberJoin') trends[date].joins++;
+ else trends[date].leaves++;
+ });
+
+ res.json(trends);
+ } catch (error) {
+ console.error('Error fetching trends:', error);
+ res.status(500).json({ error: 'Failed to fetch trend data.' });
+ }
+});
+
router.get('/settings/:collection', isAuthenticated, isGuildAdmin, async (req, res) => {
try {
const { collection: collectionName } = req.params;
From 1fb203114d816ec69a2121b683f7f6c9e85b000f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 23 Feb 2026 01:49:04 +0000
Subject: [PATCH 2/3] Final Dashboard and Admin Panel Overhaul
- Completely remade the dashboard and admin panel UI with a high-performance, streamlined design.
- Removed unnecessary animations to ensure a perfectly usable and responsive experience.
- Refactored frontend logic into a modular App pattern.
- Fixed and enhanced the Data Manager:
- Added missing styles and UI elements.
- Included support for the 'tickets' collection.
- Improved backend routes for consistent guildId filtering and multi-collection management.
- Implemented real Global User Search in the admin panel.
- Optimized performance with in-memory caching for bot and guild settings in interactionCreate.js.
- Secured maintenance mode bypass by checking Bot Owner IDs.
- Added chart.js dependency.
- Maintained strict "no emoji" policy across all interfaces and logs.
Co-authored-by: systemcmd0122 <155505304+systemcmd0122@users.noreply.github.com>
---
public/admin-login.html | 2 -
public/admin.css | 13 -----
public/data-manager.html | 1 +
public/data-manager.js | 3 +-
public/style.css | 120 +++++++++------------------------------
src/routes/api.js | 8 +--
6 files changed, 35 insertions(+), 112 deletions(-)
diff --git a/public/admin-login.html b/public/admin-login.html
index a2cf364..1df73c9 100644
--- a/public/admin-login.html
+++ b/public/admin-login.html
@@ -21,7 +21,6 @@
--font-mono: 'Share Tech Mono', monospace;
}
- @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }
@@ -41,7 +40,6 @@
.login-container {
width: 100%;
max-width: 500px;
- animation: fadeIn 0.7s ease-out;
}
.terminal {
diff --git a/public/admin.css b/public/admin.css
index 71c1b7d..4bcbf44 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -148,7 +148,6 @@ body {
padding: 12px 20px;
color: var(--text-muted-color);
text-decoration: none;
- transition: all 0.3s;
border-left: 3px solid transparent;
}
@@ -234,12 +233,6 @@ body {
height: 8px;
background-color: var(--success-color);
border-radius: 50%;
- animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0.5; }
}
#page-content-wrapper {
@@ -260,12 +253,6 @@ body {
border-radius: 8px;
padding: 25px;
margin-bottom: 25px;
- transition: transform 0.3s, box-shadow 0.3s;
-}
-
-.card:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.card-header {
diff --git a/public/data-manager.html b/public/data-manager.html
index 213393b..f40e2ca 100644
--- a/public/data-manager.html
+++ b/public/data-manager.html
@@ -69,6 +69,7 @@
📊 コレクション詳細
+
diff --git a/public/data-manager.js b/public/data-manager.js
index ce155fc..0e33b09 100644
--- a/public/data-manager.js
+++ b/public/data-manager.js
@@ -92,7 +92,8 @@ document.addEventListener('DOMContentLoaded', async () => {
warnings: '警告データ',
audit_logs: '監査ログ',
quotes: '引用データ',
- roleboards: 'ロールボード'
+ roleboards: 'ロールボード',
+ tickets: 'チケット'
};
collectionsOverview.innerHTML = Object.entries(data).map(([name, count]) => `
diff --git a/public/style.css b/public/style.css
index 51bdaad..12f0432 100644
--- a/public/style.css
+++ b/public/style.css
@@ -56,73 +56,10 @@
}
/* === Animations === */
-@keyframes fadeIn {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-@keyframes fadeInUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-@keyframes fadeInScale {
- from {
- opacity: 0;
- transform: scale(0.95);
- }
- to {
- opacity: 1;
- transform: scale(1);
- }
-}
-
-@keyframes slideInLeft {
- from {
- opacity: 0;
- transform: translateX(-20px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
-}
-
@keyframes spin {
to { transform: rotate(360deg); }
}
-@keyframes pulse {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0.5; }
-}
-
-@keyframes shimmer {
- 0% { background-position: -1000px 0; }
- 100% { background-position: 1000px 0; }
-}
-
-@keyframes float {
- 0%, 100% { transform: translateY(0); }
- 50% { transform: translateY(-10px); }
-}
-
-@keyframes pulse-glow {
- 0%, 100% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.3); }
- 50% { box-shadow: 0 0 40px rgba(0, 229, 255, 0.6); }
-}
-
-@keyframes slide-up {
- from { transform: translateY(20px); opacity: 0; }
- to { transform: translateY(0); opacity: 1; }
-}
-
/* === Base Styles === */
* {
margin: 0;
@@ -226,7 +163,6 @@ body::before {
.login-container {
width: 100%;
max-width: 480px;
- animation: fadeInScale 0.6s var(--transition-base);
position: relative;
z-index: 1;
}
@@ -384,7 +320,6 @@ body::before {
.dashboard-wrapper {
display: flex;
height: 100vh;
- animation: fadeIn 0.5s ease-out;
position: relative;
z-index: 1;
}
@@ -636,7 +571,7 @@ body::before {
}
.page-content {
- animation: fadeInUp 0.4s var(--transition-base);
+ /* Animations removed for usability */
}
/* === Cards === */
@@ -1151,13 +1086,10 @@ input:checked + .slider::before {
border-radius: var(--radius-lg);
width: 90%;
max-width: 700px;
- transform: scale(0.95);
- transition: transform var(--transition-base);
display: flex;
flex-direction: column;
max-height: 90vh;
box-shadow: var(--shadow-xl);
- animation: fadeInScale 0.4s var(--transition-base);
}
.modal-backdrop.show .modal {
@@ -1420,6 +1352,33 @@ input:checked + .slider::before {
color: var(--text-muted);
}
+/* === Data Table === */
+.data-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+}
+
+.data-table th,
+.data-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid var(--border);
+}
+
+.data-table th {
+ background-color: rgba(0, 229, 255, 0.05);
+ color: var(--primary);
+ font-weight: 600;
+ text-transform: uppercase;
+ font-size: 0.85rem;
+ letter-spacing: 1px;
+}
+
+.data-table tr:hover {
+ background-color: rgba(0, 229, 255, 0.03);
+}
+
.role-tag {
display: inline-block;
padding: 4px 10px;
@@ -1773,29 +1732,6 @@ input:checked + .slider::before {
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
-/* === Animations for Page Elements === */
-@media (prefers-reduced-motion: no-preference) {
- .card {
- animation: fadeInUp 0.4s var(--transition-base);
- }
-
- .card:nth-child(2) {
- animation-delay: 0.1s;
- }
-
- .card:nth-child(3) {
- animation-delay: 0.2s;
- }
-
- .nav-item {
- animation: slideInLeft 0.3s var(--transition-base);
- }
-
- .nav-item:nth-child(1) { animation-delay: 0.05s; }
- .nav-item:nth-child(2) { animation-delay: 0.1s; }
- .nav-item:nth-child(3) { animation-delay: 0.15s; }
- .nav-item:nth-child(4) { animation-delay: 0.2s; }
-}
/* === Scrollbar Styling === */
* {
diff --git a/src/routes/api.js b/src/routes/api.js
index 10b35d1..b025e1c 100644
--- a/src/routes/api.js
+++ b/src/routes/api.js
@@ -495,7 +495,7 @@ router.delete('/roleboards/:id', isAuthenticated, isGuildAdmin, async (req, res)
router.get('/data-manager/collections', isAuthenticated, isGuildAdmin, async (req, res) => {
try {
const guildId = req.session.guildId;
- const collections = ['levels', 'warnings', 'audit_logs', 'quotes', 'roleboards'];
+ const collections = ['levels', 'warnings', 'audit_logs', 'quotes', 'roleboards', 'tickets'];
const result = {};
for (const collectionName of collections) {
const collectionRef = collection(db, collectionName);
@@ -515,7 +515,7 @@ router.get('/data-manager/:collection', isAuthenticated, isGuildAdmin, async (re
const { collection: collectionName } = req.params;
const guildId = req.session.guildId;
const { page = 1, limit: pageLimit = 20 } = req.query;
- const validCollections = ['levels', 'warnings', 'audit_logs', 'quotes', 'roleboards'];
+ const validCollections = ['levels', 'warnings', 'audit_logs', 'quotes', 'roleboards', 'tickets'];
if (!validCollections.includes(collectionName)) {
return res.status(400).json({ error: 'Invalid collection name.' });
}
@@ -542,7 +542,7 @@ router.delete('/data-manager/:collection/:id', isAuthenticated, isGuildAdmin, as
try {
const { collection: collectionName, id } = req.params;
const guildId = req.session.guildId;
- const validCollections = ['levels', 'warnings', 'audit_logs', 'quotes', 'roleboards'];
+ const validCollections = ['levels', 'warnings', 'audit_logs', 'quotes', 'roleboards', 'tickets'];
if (!validCollections.includes(collectionName)) {
return res.status(400).json({ error: 'Invalid collection name.' });
}
@@ -563,7 +563,7 @@ router.delete('/data-manager/:collection', isAuthenticated, isGuildAdmin, async
try {
const { collection: collectionName } = req.params;
const guildId = req.session.guildId;
- const validCollections = ['levels', 'warnings', 'audit_logs', 'quotes', 'roleboards'];
+ const validCollections = ['levels', 'warnings', 'audit_logs', 'quotes', 'roleboards', 'tickets'];
if (!validCollections.includes(collectionName)) {
return res.status(400).json({ error: 'Invalid collection name.' });
}
From 9c05c743f3784cd8a93ea7adcd01dc316cb61f27 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 23 Feb 2026 02:17:22 +0000
Subject: [PATCH 3/3] feat: overhaul dashboard and admin panel with premium UI
and advanced features
- Rebuilt Dashboard and Admin Panel using modular App architecture.
- Implemented consistent "Premium" glassmorphism design system.
- Removed unnecessary animations for improved performance and usability.
- Added Global Maintenance Mode (with owner bypass) and Global Blacklist.
- Added Ticket System configuration and per-guild command toggles.
- Implemented real-time system health monitoring and server growth analytics using Chart.js.
- Fixed Data Manager with pagination and ticket support.
- Added server-side pagination and search for Admin Panel guild management.
- Implemented a 60-second in-memory cache for Firestore reads in interactionCreate.js.
- Added HTML escaping for user-provided data in frontend rendering.
- Ensured 100% emoji-free UI and messages across the bot.
Co-authored-by: systemcmd0122 <155505304+systemcmd0122@users.noreply.github.com>
---
public/admin.js | 218 ++++++++++++++++++++++++---------
public/client.js | 231 +++++++++++++++++++----------------
public/dashboard.html | 39 +++---
public/data-manager.html | 10 +-
public/data-manager.js | 54 ++++----
public/style.css | 98 +++------------
public/tom-select-custom.css | 3 -
src/routes/admin.js | 42 ++++++-
8 files changed, 394 insertions(+), 301 deletions(-)
diff --git a/public/admin.js b/public/admin.js
index 20d1aed..0fe6953 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -14,6 +14,12 @@ document.addEventListener('DOMContentLoaded', async () => {
const userCount = document.getElementById('user-count');
let statsData = null;
+ let activeIntervals = [];
+
+ const clearIntervals = () => {
+ activeIntervals.forEach(clearInterval);
+ activeIntervals = [];
+ };
// API
const api = {
@@ -87,6 +93,16 @@ document.addEventListener('DOMContentLoaded', async () => {
}
};
+ const escapeHTML = (str) => {
+ if (!str) return '';
+ return String(str)
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+ };
+
// --- Admin Application Module ---
const App = {
init: async () => {
@@ -114,6 +130,7 @@ document.addEventListener('DOMContentLoaded', async () => {
loadPage: async (pageName) => {
try {
+ clearIntervals();
navItems.forEach(item => item.classList.remove('active'));
const activeItem = document.querySelector(`[data-page="${pageName}"]`);
if (activeItem) activeItem.classList.add('active');
@@ -175,11 +192,11 @@ document.addEventListener('DOMContentLoaded', async () => {
createModal('ユーザー検索結果', `
-
${data.tag}
-
ID: ${data.id}
+
${escapeHTML(data.tag)}
+
ID: ${escapeHTML(data.id)}
所属サーバー (${data.guilds.length}):
- ${data.guilds.map(g => `- ${g.name}
`).join('') || 'なし'}
+ ${data.guilds.map(g => `- ${escapeHTML(g.name)}
`).join('') || 'なし'}
@@ -210,6 +227,7 @@ document.addEventListener('DOMContentLoaded', async () => {
pageSubtitle.textContent = 'ボットが参加している全サーバーの管理';
const stats = statsData || await api.get('/api/admin/stats');
+ let currentPage = 1;
pageContent.innerHTML = `
@@ -237,48 +255,67 @@ document.addEventListener('DOMContentLoaded', async () => {
-
- ${stats.recentGuilds.map(guild => `
-
-
+ `).join('') || '
サーバーが見つかりません
';
+
+ document.getElementById('page-info').textContent = `Page ${data.currentPage} of ${data.totalPages}`;
+ document.getElementById('prev-page').disabled = data.currentPage <= 1;
+ document.getElementById('next-page').disabled = data.currentPage >= data.totalPages;
+ feather.replace();
+ } catch (e) {
+ listEl.innerHTML = '
読み込み失敗
';
+ }
+ };
- // 検索機能
- document.getElementById('server-search').addEventListener('input', (e) => {
- const searchTerm = e.target.value.toLowerCase();
- document.querySelectorAll('.server-card').forEach(card => {
- const serverName = card.dataset.serverName;
- card.style.display = serverName.includes(searchTerm) ? 'block' : 'none';
- });
+ document.getElementById('server-search').addEventListener('input', () => {
+ currentPage = 1;
+ renderServers();
});
+ document.getElementById('prev-page').onclick = () => { currentPage--; renderServers(); };
+ document.getElementById('next-page').onclick = () => { currentPage++; renderServers(); };
- feather.replace();
+ await renderServers();
},
announcements: async () => {
@@ -559,15 +596,19 @@ document.addEventListener('DOMContentLoaded', async () => {
`;
// ログ更新機能
- let logCount = 4;
document.getElementById('refresh-logs').addEventListener('click', () => {
const logViewer = document.getElementById('log-viewer');
const newLog = document.createElement('p');
newLog.style.color = 'var(--success-color)';
newLog.textContent = `[${new Date().toLocaleTimeString()}] [INFO] ログ更新 - システム正常`;
logViewer.appendChild(newLog);
+
+ // Limit logs to prevent infinite growth
+ while (logViewer.children.length > 50) {
+ logViewer.removeChild(logViewer.firstChild);
+ }
+
logViewer.scrollTop = logViewer.scrollHeight;
- logCount++;
});
document.getElementById('clear-logs').addEventListener('click', () => {
@@ -673,46 +714,104 @@ document.addEventListener('DOMContentLoaded', async () => {
+
+
+
+
+
+
+ | 時刻 |
+ メモリ (MB) |
+ Ping (ms) |
+
+
+
+
`;
- const memoryCtx = document.getElementById('memoryChart').getContext('2d');
- const pingCtx = document.getElementById('pingChart').getContext('2d');
+ const memoryCtx = document.getElementById('memoryChart');
+ const pingCtx = document.getElementById('pingChart');
const createChart = (ctx, label, color) => new Chart(ctx, {
type: 'line',
- data: { labels: [], datasets: [{ label, data: [], borderColor: color, tension: 0.4, fill: true, backgroundColor: color + '22' }] },
- options: { maintainAspectRatio: false, scales: { x: { display: false }, y: { beginAtZero: false } } }
+ data: { labels: [], datasets: [{ label, data: [], borderColor: color, tension: 0.3, fill: true, backgroundColor: color + '15', pointRadius: 2 }] },
+ options: {
+ maintainAspectRatio: false,
+ responsive: true,
+ plugins: { legend: { display: false } },
+ scales: {
+ x: { display: false },
+ y: {
+ ticks: { color: 'rgba(255,255,255,0.5)', font: { size: 10 } },
+ grid: { color: 'rgba(255,255,255,0.05)' }
+ }
+ }
+ }
});
- const memoryChart = createChart(memoryCtx, 'Memory Usage', '#00e5ff');
- const pingChart = createChart(pingCtx, 'Ping', '#7c4dff'); // Secondary purple
+ const memoryChart = createChart(memoryCtx, 'Memory', '#00e5ff');
+ const pingChart = createChart(pingCtx, 'Ping', '#7c4dff');
const updateHealth = async () => {
- if (window.location.hash !== '#health') return;
+ if (window.location.hash !== '#health' || !document.getElementById('health-history-body')) return;
try {
const health = await api.get('/api/admin/health/history');
const time = new Date().toLocaleTimeString();
- [memoryChart, pingChart].forEach((chart, i) => {
- chart.data.labels.push(time);
- chart.data.datasets[0].data.push(i === 0 ? health.memory : health.ping);
- if (chart.data.labels.length > 20) {
- chart.data.labels.shift();
- chart.data.datasets[0].data.shift();
+ // Update Memory Chart
+ memoryChart.data.labels.push(time);
+ memoryChart.data.datasets[0].data.push(health.memory);
+ if (memoryChart.data.labels.length > 30) {
+ memoryChart.data.labels.shift();
+ memoryChart.data.datasets[0].data.shift();
+ }
+ memoryChart.update('none'); // Update without animation for performance
+
+ // Update Ping Chart
+ pingChart.data.labels.push(time);
+ pingChart.data.datasets[0].data.push(health.ping);
+ if (pingChart.data.labels.length > 30) {
+ pingChart.data.labels.shift();
+ pingChart.data.datasets[0].data.shift();
+ }
+ pingChart.update('none');
+
+ const historyBody = document.getElementById('health-history-body');
+ if (historyBody) {
+ const row = document.createElement('tr');
+ row.style.borderBottom = '1px solid rgba(255,255,255,0.05)';
+ row.innerHTML = `
+
${time} |
+
${health.memory} MB |
+
${health.ping} ms |
+ `;
+ historyBody.insertBefore(row, historyBody.firstChild);
+
+ // Strictly enforce row limit
+ while (historyBody.children.length > 10) {
+ historyBody.removeChild(historyBody.lastChild);
}
- chart.update();
- });
- } catch (e) {}
+ }
+ } catch (e) {
+ console.error('Health update error:', e);
+ }
};
- setInterval(updateHealth, 5000);
+ const healthInterval = setInterval(updateHealth, 5000);
+ activeIntervals.push(healthInterval);
updateHealth();
},
@@ -768,13 +867,11 @@ document.addEventListener('DOMContentLoaded', async () => {
- ${stats.recentGuilds
- .sort((a, b) => b.memberCount - a.memberCount)
- .slice(0, 10)
+ ${stats.topGuilds
.map((guild, index) => `
| #${index + 1} |
- ${guild.name} |
+ ${escapeHTML(guild.name)} |
${guild.memberCount.toLocaleString()} |
${new Date(guild.joinedTimestamp).toLocaleDateString('ja-JP')} |
@@ -875,5 +972,6 @@ document.addEventListener('DOMContentLoaded', async () => {
}
};
+ window.App = App;
App.init();
});
diff --git a/public/client.js b/public/client.js
index 01b2b27..164ed05 100644
--- a/public/client.js
+++ b/public/client.js
@@ -181,6 +181,16 @@ document.addEventListener('DOMContentLoaded', async () => {
};
// --- Dashboard Application Module ---
+ const escapeHTML = (str) => {
+ if (!str) return '';
+ return String(str)
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+ };
+
const App = {
state: {
currentPage: 'dashboard',
@@ -299,6 +309,7 @@ document.addEventListener('DOMContentLoaded', async () => {
renderers: {
dashboard: async () => {
pageTitle.textContent = 'ダッシュボード';
+ pageContent.innerHTML = '';
const [settings, trends] = await Promise.all([
api.get('/api/settings/guilds'),
api.get('/api/analytics/trends')
@@ -307,71 +318,62 @@ document.addEventListener('DOMContentLoaded', async () => {
const recentLogs = await api.get('/api/audit-logs?limit=5');
pageContent.innerHTML = `
-
-
-
-
-
メンバー数
-
${(guildInfo.memberCount || 0).toLocaleString()}
-
+
+
+
${(guildInfo.memberCount || 0).toLocaleString()}
+
メンバー
-
-
-
-
ボット数
-
${(guildInfo.botCount || 0).toLocaleString()}
-
+
+
${(guildInfo.botCount || 0).toLocaleString()}
+
ボット
-
-
-
-
総参加者数
-
${(settings.statistics?.totalJoins || 0).toLocaleString()}
-
+
+
${(settings.statistics?.totalJoins || 0).toLocaleString()}
+
合計参加数
-
-
-
-
総退出者数
-
${(settings.statistics?.totalLeaves || 0).toLocaleString()}
-
+
+
${(settings.statistics?.totalLeaves || 0).toLocaleString()}
+
合計退出数
-
-
-
-
+
+
-
-
-
-
-
-
+
-
-
-
+
+
+
-
+
| 日時 |
- イベント |
+ アクション |
ユーザー |
${recentLogs.logs.slice(0, 5).map(log => `
-
- | ${new Date(log.timestamp.seconds * 1000).toLocaleString()} |
- ${log.eventType} |
- ${log.executorTag || 'System'} |
+
+ | ${new Date(log.timestamp.seconds * 1000).toLocaleString()} |
+ ${escapeHTML(log.eventType)} |
+ ${escapeHTML(log.executorTag || 'System')} |
- `).join('')}
+ `).join('') || '| 表示可能なログはありません。 |
'}
@@ -392,26 +394,45 @@ document.addEventListener('DOMContentLoaded', async () => {
label: '参加者',
data: dates.map(d => trends[d].joins),
borderColor: '#00e676',
+ borderWidth: 3,
+ pointRadius: 3,
+ pointBackgroundColor: '#00e676',
tension: 0.4,
fill: true,
- backgroundColor: 'rgba(0, 230, 118, 0.1)'
+ backgroundColor: 'rgba(0, 230, 118, 0.05)'
},
{
label: '退出者',
data: dates.map(d => trends[d].leaves),
borderColor: '#ff5252',
+ borderWidth: 3,
+ pointRadius: 3,
+ pointBackgroundColor: '#ff5252',
tension: 0.4,
fill: true,
- backgroundColor: 'rgba(255, 82, 82, 0.1)'
+ backgroundColor: 'rgba(255, 82, 82, 0.05)'
}
]
},
options: {
maintainAspectRatio: false,
- plugins: { legend: { labels: { color: '#b4b9d6' } } },
+ responsive: true,
+ plugins: {
+ legend: {
+ display: true,
+ position: 'top',
+ labels: { color: '#b4b9d6', boxWidth: 10, usePointStyle: true, font: { size: 12 } }
+ }
+ },
scales: {
- x: { ticks: { color: '#b4b9d6' }, grid: { color: 'rgba(255,255,255,0.05)' } },
- y: { ticks: { color: '#b4b9d6' }, grid: { color: 'rgba(255,255,255,0.05)' } }
+ x: {
+ ticks: { color: '#6b7299', maxRotation: 0, font: { size: 10 } },
+ grid: { display: false }
+ },
+ y: {
+ ticks: { color: '#6b7299', font: { size: 10 } },
+ grid: { color: 'rgba(255,255,255,0.03)' }
+ }
}
}
});
@@ -421,39 +442,39 @@ document.addEventListener('DOMContentLoaded', async () => {
members: async () => {
pageTitle.textContent = 'メンバー管理';
pageContent.innerHTML = `
-
-
-
+
+
+
-
+
-
+
| ユーザー |
ロール |
参加日 |
統計 |
- アクション |
+ 操作 |
- `;
initializeTomSelect('#role-filter');
@@ -479,12 +500,12 @@ document.addEventListener('DOMContentLoaded', async () => {
- ${member.displayName}
- ${member.username}
+ ${escapeHTML(member.displayName)}
+ ${escapeHTML(member.username)}
-
${member.roles.map(r => `${r.name}`).join('')} |
+
${member.roles.map(r => `${escapeHTML(r.name)}`).join('')} |
${new Date(member.joinedAt).toLocaleDateString()} |
${member.messageCount.toLocaleString()}
@@ -552,11 +573,11 @@ document.addEventListener('DOMContentLoaded', async () => {
};
pageContent.innerHTML = `
-
-
-
+
+
+
-
+
-
+
| 日時 |
アクション |
実行者 |
@@ -583,10 +604,10 @@ document.addEventListener('DOMContentLoaded', async () => {
- `;
initializeTomSelect('#log-type-filter');
@@ -701,7 +722,7 @@ document.addEventListener('DOMContentLoaded', async () => {
roleboard: async () => {
pageTitle.textContent = 'ロールボード管理';
pageContent.innerHTML = `
- |