modified: bot.db
modified: db/db.go modified: handlers/dashboard.go modified: main.go modified: services/openrouter.go modified: templates/dashboard.html
This commit is contained in:
@@ -1,198 +1,99 @@
|
||||
{{ define "dashboard.html" }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SekiBot Admin | Discord Edition</title>
|
||||
<title>SekiBot | Conversations</title>
|
||||
<style>
|
||||
:root {
|
||||
--blurple: #5865F2;
|
||||
--background-dark: #36393f;
|
||||
--background-darker: #2f3136;
|
||||
--background-deep: #202225;
|
||||
--text-normal: #dcddde;
|
||||
--text-muted: #b9bbbe;
|
||||
--header-primary: #ffffff;
|
||||
--danger: #ed4245;
|
||||
--success: #3ba55c;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-deep);
|
||||
color: var(--text-normal);
|
||||
font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Sidebar Look */
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
background-color: var(--background-darker);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
border-right: 1px solid #202225;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
background-color: var(--background-dark);
|
||||
padding: 40px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3 { color: var(--header-primary); margin-top: 0; }
|
||||
/* DISCORD THEME COLORS */
|
||||
:root { --blurple: #5865F2; --bg-sidebar: #2f3136; --bg-chat: #36393f; --bg-input: #40444b; --text: #dcddde; }
|
||||
body { margin: 0; display: flex; height: 100vh; font-family: sans-serif; background: var(--bg-chat); color: var(--text); }
|
||||
|
||||
.card {
|
||||
background-color: var(--background-darker);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Inputs & Buttons */
|
||||
input {
|
||||
background-color: var(--background-deep);
|
||||
border: 1px solid #202225;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
width: calc(100% - 22px);
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--blurple);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
button:hover { background-color: #4752c4; }
|
||||
button.delete { background-color: var(--danger); }
|
||||
button.delete:hover { background-color: #c03537; }
|
||||
|
||||
/* Table Styling */
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
||||
th { text-align: left; color: var(--text-muted); text-transform: uppercase; font-size: 12px; padding-bottom: 10px; }
|
||||
td { padding: 12px 0; border-top: 1px solid #42454a; vertical-align: middle; }
|
||||
|
||||
.status-pill {
|
||||
background-color: var(--success);
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#ai-response-box {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
background-color: var(--background-deep);
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid var(--blurple);
|
||||
display: none;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.sidebar { width: 240px; background: var(--bg-sidebar); display: flex; flex-direction: column; padding: 15px; }
|
||||
.chat-list { flex-grow: 1; overflow-y: auto; }
|
||||
.chat-item { padding: 10px; border-radius: 4px; cursor: pointer; margin-bottom: 5px; background: rgba(255,255,255,0.05); }
|
||||
.chat-item:hover, .active { background: var(--bg-input); color: white; }
|
||||
|
||||
.chat-area { flex-grow: 1; display: flex; flex-direction: column; }
|
||||
.messages { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
|
||||
.msg { max-width: 80%; padding: 10px 15px; border-radius: 8px; line-height: 1.4; }
|
||||
.user { align-self: flex-end; background: var(--blurple); color: white; }
|
||||
.assistant { align-self: flex-start; background: var(--bg-input); }
|
||||
|
||||
.input-container { padding: 20px; background: var(--bg-chat); }
|
||||
#user-input { width: 100%; background: var(--bg-input); border: none; padding: 15px; border-radius: 8px; color: white; outline: none; }
|
||||
|
||||
button.new-chat { background: var(--blurple); color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; margin-bottom: 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="sidebar">
|
||||
<h2>SekiBot</h2>
|
||||
<p style="font-size: 12px; color: var(--text-muted);">v1.0.0-beta</p>
|
||||
<hr style="border: 0.5px solid #42454a; width: 100%;">
|
||||
<nav>
|
||||
<p style="color: var(--blurple); font-weight: bold;"># dashboard</p>
|
||||
<p style="color: var(--text-muted);"># analytics</p>
|
||||
<p style="color: var(--text-muted);"># settings</p>
|
||||
<div class="chat-item active" onclick="showPanel('chat-panel')" id="nav-chat"># conversations</div>
|
||||
<div class="chat-item" onclick="showPanel('appt-panel')" id="nav-appt"># appointments-manager</div>
|
||||
</nav>
|
||||
<hr style="border: 0.5px solid #42454a; margin: 15px 0;">
|
||||
<button class="new-chat" onclick="newChat()">+ New Chat</button>
|
||||
<div class="chat-list">
|
||||
{{range .Chats}}
|
||||
<div class="chat-item" onclick="loadChat({{.ID}})"># chat-{{.ID}}</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<h1>Welcome back, seki</h1>
|
||||
|
||||
<!-- AI Tester -->
|
||||
<div class="card">
|
||||
<h3>Test OpenRouter AI</h3>
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<input type="text" id="ai-input" placeholder="Message the bot..." style="margin-bottom: 0;">
|
||||
<button onclick="testAI()">Send</button>
|
||||
</div>
|
||||
<div id="ai-response-box"></div>
|
||||
<!-- MAIN CHAT PANEL -->
|
||||
<div class="main-content" id="chat-panel">
|
||||
<div class="messages" id="message-pane" style="height: calc(100vh - 120px); overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px;">
|
||||
<p style="text-align: center; color: var(--text-muted);">Select a chat to begin.</p>
|
||||
</div>
|
||||
<div class="input-container" style="padding: 20px; background: var(--bg-chat);">
|
||||
<input type="text" id="user-input" placeholder="Type a message..." onkeypress="if(event.key==='Enter') sendMessage()" style="width: 100%; background: var(--bg-input); border: none; padding: 15px; border-radius: 8px; color: white;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manual Entry -->
|
||||
<div class="card">
|
||||
<h3>Quick Create Appointment</h3>
|
||||
<!-- APPOINTMENTS CRUD PANEL -->
|
||||
<div class="main-content" id="appt-panel" style="display: none; padding: 40px;">
|
||||
<h1>Appointments Manager</h1>
|
||||
<div style="background: var(--bg-sidebar); padding: 20px; border-radius: 8px; margin-bottom: 20px;">
|
||||
<h3>Create Mock Appointment</h3>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr 100px; gap: 10px;">
|
||||
<input type="text" id="phone" placeholder="Customer Phone (+569...)">
|
||||
<input type="datetime-local" id="date">
|
||||
<button onclick="createAppt()">Add</button>
|
||||
<input type="text" id="m-phone" placeholder="Phone">
|
||||
<input type="datetime-local" id="m-date">
|
||||
<button onclick="createMockAppt()">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The Table -->
|
||||
<div class="card">
|
||||
<h3>Scheduled Appointments</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Customer</th>
|
||||
<th>Date & Time</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Appointments}}
|
||||
<tr id="row-{{.ID}}">
|
||||
<td>#{{.ID}}</td>
|
||||
<td style="font-weight: bold;">{{.CustomerPhone}}</td>
|
||||
<td>{{.Date}}</td>
|
||||
<td><span class="status-pill">{{.Status}}</span></td>
|
||||
<td>
|
||||
<button class="delete" onclick="deleteAppt({{.ID}})">Cancel</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>ID</th><th>Phone</th><th>Date</th><th>Status</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody id="appt-table-body">
|
||||
{{range .Appointments}}
|
||||
<tr id="appt-{{.ID}}">
|
||||
<td>#{{.ID}}</td>
|
||||
<td><input type="text" value="{{.CustomerPhone}}" id="edit-phone-{{.ID}}" style="width: 120px; margin:0;"></td>
|
||||
<td><input type="text" value="{{.Date}}" id="edit-date-{{.ID}}" style="width: 160px; margin:0;"></td>
|
||||
<td><span class="status-pill">{{.Status}}</span></td>
|
||||
<td>
|
||||
<button style="background: var(--success);" onclick="updateAppt({{.ID}})">Save</button>
|
||||
<button class="delete" onclick="deleteAppt({{.ID}})">Del</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function testAI() {
|
||||
const input = document.getElementById('ai-input').value;
|
||||
const box = document.getElementById('ai-response-box');
|
||||
box.style.display = 'block';
|
||||
box.innerText = "Processing message...";
|
||||
|
||||
const res = await fetch('/admin/test-ai', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({prompt: input})
|
||||
});
|
||||
const data = await res.json();
|
||||
box.innerText = data.response;
|
||||
function showPanel(panelId) {
|
||||
document.getElementById('chat-panel').style.display = panelId === 'chat-panel' ? 'flex' : 'none';
|
||||
document.getElementById('appt-panel').style.display = panelId === 'appt-panel' ? 'block' : 'none';
|
||||
document.querySelectorAll('nav .chat-item').forEach(el => el.classList.remove('active'));
|
||||
document.getElementById(panelId === 'chat-panel' ? 'nav-chat' : 'nav-appt').classList.add('active');
|
||||
}
|
||||
|
||||
async function createAppt() {
|
||||
const phone = document.getElementById('phone').value;
|
||||
const date = document.getElementById('date').value;
|
||||
if(!phone || !date) return alert("Fill the fields, seki.");
|
||||
|
||||
async function createMockAppt() {
|
||||
const phone = document.getElementById('m-phone').value;
|
||||
const date = document.getElementById('m-date').value;
|
||||
await fetch('/admin/appointment', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
@@ -201,11 +102,24 @@
|
||||
location.reload();
|
||||
}
|
||||
|
||||
async function deleteAppt(id) {
|
||||
if(!confirm("Terminate this appointment?")) return;
|
||||
await fetch(`/admin/appointment/${id}`, { method: 'DELETE' });
|
||||
document.getElementById(`row-${id}`).remove();
|
||||
async function updateAppt(id) {
|
||||
const phone = document.getElementById(`edit-phone-${id}`).value;
|
||||
const date = document.getElementById(`edit-date-${id}`).value;
|
||||
await fetch(`/admin/appointment/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({phone, date})
|
||||
});
|
||||
alert("Updated, seki.");
|
||||
}
|
||||
|
||||
async function deleteAppt(id) {
|
||||
if(!confirm("Kill it?")) return;
|
||||
await fetch(`/admin/appointment/${id}`, { method: 'DELETE' });
|
||||
document.getElementById(`appt-${id}`).remove();
|
||||
}
|
||||
|
||||
// ... (Keep your existing newChat, loadChat, and sendMessage scripts here) ...
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user