Spaces:

gutzu1015
/

adminbot-brainhub

Running

App Files Files Community

gutzu1015 commited on Dec 26, 2025

Commit

659d490

verified ·

1 Parent(s): 23ab43a

<?php

Browse files

session_start();
include 'db.php';
include 'header.php';

if (!isset($_SESSION['user_id'])) {
header("Location: index.html");
exit();
}

$user_id = (int)$_SESSION['user_id'];

if (!isset($_SESSION['current_session'])) {
$sqlLast = "SELECT MAX(session_id) AS last FROM chat_logs WHERE user_id = $user_id";
$resLast = mysqli_query($conn, $sqlLast);
$rowLast = mysqli_fetch_assoc($resLast);

$active_session = ($rowLast['last'] ?? 0) + 1;

$_SESSION['current_session'] = $active_session;
} else {
$active_session = $_SESSION['current_session'];
}

// FETCH TOPICS GROUPED BY CATEGORY
$sqlTopics = "SELECT category, user_query FROM chatbot_responses ORDER BY category ASC, user_query ASC";
$resTopics = mysqli_query($conn, $sqlTopics);

$categorizedTopics = [];
while ($row = mysqli_fetch_assoc($resTopics)) {
$cat = $row['category'] ?: 'General';
$categorizedTopics[$cat][] = $row['user_query'];
}

// FETCH PREVIOUS SESSIONS ("Your Chats" history)
$sqlSessions = "SELECT DISTINCT session_id FROM chat_logs WHERE user_id = $user_id ORDER BY session_id DESC";
$resSessions = mysqli_query($conn, $sqlSessions);

$userEmail = $_SESSION['name'] ?? $_SESSION['email'] ?? 'Unknown';
?>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>FoodSave Chatbot</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #ecfdf5;
}

.container {
display: flex;
height: calc(100vh - 110px);
padding: 20px;
gap: 20px;
box-sizing: border-box;
}

.sidebar {
width: 260px;
background: #fff;
border-radius: 15px;
padding: 15px;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}

.sidebar h3 {
color: #16a34a;
margin-top: 0;
}

.sidebar-section {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
margin-bottom: 15px;
background: #f9fafb;
border-radius: 10px;
padding: 10px;
border: 1px solid #e5e7eb;
}

.sidebar-section h3 {
color: #16a34a;
font-size: 1rem;
margin-bottom: 10px;
margin-top: 0;
flex-shrink: 0;
}

.scroll-container {
overflow-y: auto;
flex: 1;
padding-right: 5px;
}

.scroll-container::-webkit-scrollbar {
width: 5px;
}

.scroll-container::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 10px;
}

.session-btn,
.topic-btn,
#newChatBtn {
width: 100%;
padding: 10px;
border: none;
border-radius: 10px;
margin-bottom: 8px;
cursor: pointer;
text-align: left;
}

.session-btn.active {
background: #22c55e;
color: white;
}

.topic-btn:hover,
#newChatBtn:hover {
background: #22c55e;
color: white;
}

#newChatBtn {
background: #f3f4f6;
font-weight: bold;
margin-bottom: 15px;
flex-shrink: 0;
}

.category-dropdown {
margin-bottom: 8px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
overflow: hidden;
}

.category-header {
padding: 12px 15px;
background: #f8fafc;
font-weight: 600;
font-size: 13px;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
color: #16a34a;
border-bottom: 1px solid transparent;
}

details[open] .category-header {
border-bottom: 1px solid #e2e8f0;
background: #f1fdf4;
}

.category-header::after {
content: '▼';
font-size: 9px;
color: #94a3b8;
transition: 0.3s;
}

details[open] .category-header::after {
transform: rotate(180deg);
}

.category-content {
background: #ffffff;
padding: 4px 0;
}

.topic-btn {
width: 100%;
padding: 10px 20px;
border: none;
background: none;
text-align: left;
font-size: 13px;
color: #334155;
cursor: pointer;
display: block;
transition: all 0.2s;
}

.topic-btn:hover {
background: #f0fdf4;
color: #16a34a;
font-weight: 500;
}

.chat-area {
flex: 1;
background: white;
border-radius: 15px;
display: flex;
flex-direction: column;
height: 100%;
}

.chat-header {
background: linear-gradient(to right, #22c55e, #16a34a);
padding: 15px;
color: white;
border-radius: 15px 15px 0 0;
}

.chat-header-content {
display: flex;
align-items: center;
gap: 12px;
}

.chat-body {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
}

.message {
max-width: 80%;
padding: 10px 15px;
border-radius: 18px;
margin-bottom: 10px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
position: relative;
width: fit-content;
display: block;
}

.message.bot {
background: #f1f5f9;
color: #1e293b;
margin-right: auto;
border-bottom-left-radius: 4px;
align-self: flex-start;
}

.user {
background: #22c55e;
color: white;
margin-left: auto;
border-bottom-right-radius: 4px;
align-self: flex-end;
}

.chat-input {
display: flex;
padding: 15px;
gap: 10px;
}

.chat-input input {
flex: 1;
padding: 12px;
border-radius: 10px;
border: 2px solid #22c55e;
}

.chat-input button {
background: #22c55e;
color: white;
border: none;
border-radius: 10px;
padding: 12px 18px;
cursor: pointer;
}

.chat-logo {
width: 40px;
height: 40px;
object-fit: contain;
background: white;
border-radius: 8px;
padding: 2px;
}

.chat-status {
line-height: 1.2;
}

.chat-status strong {
font-size: 16px;
}

.chat-status small {
font-size: 12px;
opacity: 0.9;
}

</style>
</head>

<body>

<div class="container">


<div class="sidebar">

<button id="newChatBtn">+ New Chat</button>

<div class="sidebar-section">
<h3>Topics</h3>
<div class="scroll-container">
<?php if (!empty($categorizedTopics)): ?>
<?php foreach ($categorizedTopics as $categoryName => $queries): ?>
<details class="category-dropdown">
<summary class="category-header">
<?= htmlspecialchars(strtoupper($categoryName)) ?>
</summary>
<div class="category-content">
<?php foreach ($queries as $query): ?>
<button class="topic-btn"
onclick="sendQuestion('<?= htmlspecialchars($query, ENT_QUOTES) ?>')">
<?= htmlspecialchars($query) ?>
</button>
<?php endforeach; ?>
</div>
</details>
<?php endforeach; ?>
<?php else: ?>
<p style="padding:10px; font-size:12px; color:#888;">No topics found.</p>
<?php endif; ?>
</div>
</div>

<div class="sidebar-section">
<h3>Your Chats</h3>
<div class="scroll-container" id="sessionList">
<?php
$sessions = [];
while ($row = mysqli_fetch_assoc($resSessions)) {
$sessions[] = $row['session_id'];
}

if ($active_session && in_array($active_session, $sessions)) {
echo '<button class="session-btn active" onclick="loadSession(' . $active_session . ')" data-session="' . $active_session . '">Chat ' . $active_session . '</button>';
}

foreach ($sessions as $sid) {
if ($sid == $active_session) continue;
echo '<button class="session-btn" onclick="loadSession(' . $sid . ')" data-session="' . $sid . '">Chat ' . $sid . '</button>';
}
?>
</div>
</div>

</div>


<div class="chat-area">
<div class="chat-header">
<div class="chat-header-content">
<img src="images/logo.png" alt="Logo" class="chat-logo">
<div class="chat-status">
<strong>FoodSave</strong> <br>
<small>Online</small>
</div>
</div>
</div>
<div class="chat-body" id="chatBody">

</div>
<div class="chat-input">
<input type="text" id="userInput" placeholder="Type your question here...">
<button onclick="manualSend()">Send</button>
</div>
</div>

</div>

<script>
let activeSession = <?= $active_session ?>;
let loadedMessages = [];

window.onload = function() {
if (activeSession > 0) {
loadSession(activeSession);
}
}

function loadSession(session_id) {
activeSession = session_id;

fetch('update_session.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'session_id=' + session_id
});

document.querySelectorAll('.session-btn'

Files changed (9) hide show

README.md +8 -5
admin.php +224 -0
components/navbar.js +28 -0
components/sidebar.js +65 -0
index.html +103 -19
login.php +103 -0
script.js +19 -0
style.css +18 -18
user_chats.php +129 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Adminbot Brainhub
-emoji: 📊
-colorFrom: green
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: AdminBot BrainHub 🧠
+colorFrom: purple
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

admin.php ADDED Viewed

	@@ -0,0 +1,224 @@

+```php
+<?php
+session_start();
+include 'db.php';
+if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'admin') {
+    header("Location: login.php");
+    exit();
+}
+// Handle CRUD operations
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    if (isset($_POST['add_qa'])) {
+        $category = mysqli_real_escape_string($conn, $_POST['category']);
+        $question = mysqli_real_escape_string($conn, $_POST['question']);
+        $answer = mysqli_real_escape_string($conn, $_POST['answer']);
+        $sql = "INSERT INTO chatbot_responses (category, user_query, bot_response)
+                VALUES ('$category', '$question', '$answer')";
+        mysqli_query($conn, $sql);
+    }
+    elseif (isset($_POST['update_qa'])) {
+        $id = (int)$_POST['id'];
+        $category = mysqli_real_escape_string($conn, $_POST['category']);
+        $question = mysqli_real_escape_string($conn, $_POST['question']);
+        $answer = mysqli_real_escape_string($conn, $_POST['answer']);
+        $sql = "UPDATE chatbot_responses
+                SET category='$category', user_query='$question', bot_response='$answer'
+                WHERE id=$id";
+        mysqli_query($conn, $sql);
+    }
+    elseif (isset($_POST['delete_qa'])) {
+        $id = (int)$_POST['id'];
+        $sql = "DELETE FROM chatbot_responses WHERE id=$id";
+        mysqli_query($conn, $sql);
+    }
+}
+// Get all Q&A pairs
+$qa_pairs = [];
+$sql = "SELECT * FROM chatbot_responses ORDER BY category, user_query";
+$result = mysqli_query($conn, $sql);
+while ($row = mysqli_fetch_assoc($result)) {
+    $qa_pairs[] = $row;
+}
+// Get all users and their chat history
+$users = [];
+$sql = "SELECT u.id, u.name, u.email, COUNT(DISTINCT cl.session_id) as session_count
+        FROM users u
+        LEFT JOIN chat_logs cl ON u.id = cl.user_id
+        GROUP BY u.id";
+$result = mysqli_query($conn, $sql);
+while ($row = mysqli_fetch_assoc($result)) {
+    $users[] = $row;
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Dashboard - AdminBot BrainHub</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+</head>
+<body class="bg-gray-100">
+    <custom-navbar></custom-navbar>
+    <div class="flex">
+        <custom-sidebar></custom-sidebar>
+        <main class="flex-1 p-8">
+            <div class="mb-8">
+                <h1 class="text-3xl font-bold text-gray-800">Admin Dashboard</h1>
+                <p class="text-gray-600">Manage chatbot knowledge and user interactions</p>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <!-- Q&A Management Section -->
+                <div class="bg-white rounded-lg shadow p-6">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-xl font-semibold">Knowledge Base</h2>
+                        <button onclick="toggleQaForm()" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
+                            Add New Q&A
+                        </button>
+                    </div>
+                    <!-- Add/Edit Form (Hidden by default) -->
+                    <div id="qaForm" class="hidden mb-6 p-4 bg-gray-50 rounded-lg">
+                        <form method="POST">
+                            <input type="hidden" name="id" id="editId">
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Category</label>
+                                <input type="text" name="category" id="category" class="w-full p-2 border rounded" required>
+                            </div>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Question</label>
+                                <input type="text" name="question" id="question" class="w-full p-2 border rounded" required>
+                            </div>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Answer</label>
+                                <textarea name="answer" id="answer" rows="3" class="w-full p-2 border rounded" required></textarea>
+                            </div>
+                            <div class="flex gap-2">
+                                <button type="submit" name="add_qa" id="addBtn" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
+                                    Add Q&A
+                                </button>
+                                <button type="submit" name="update_qa" id="updateBtn" class="hidden bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
+                                    Update Q&A
+                                </button>
+                                <button type="button" onclick="toggleQaForm()" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600">
+                                    Cancel
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                    <!-- Q&A List -->
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full bg-white">
+                            <thead>
+                                <tr>
+                                    <th class="py-2 px-4 border-b">Category</th>
+                                    <th class="py-2 px-4 border-b">Question</th>
+                                    <th class="py-2 px-4 border-b">Answer</th>
+                                    <th class="py-2 px-4 border-b">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php foreach ($qa_pairs as $qa): ?>
+                                <tr>
+                                    <td class="py-2 px-4 border-b"><?= htmlspecialchars($qa['category']) ?></td>
+                                    <td class="py-2 px-4 border-b"><?= htmlspecialchars($qa['user_query']) ?></td>
+                                    <td class="py-2 px-4 border-b"><?= htmlspecialchars($qa['bot_response']) ?></td>
+                                    <td class="py-2 px-4 border-b">
+                                        <button onclick="editQa(<?= $qa['id'] ?>, '<?= addslashes($qa['category']) ?>', '<?= addslashes($qa['user_query']) ?>', `<?= addslashes($qa['bot_response']) ?>`)"
+                                                class="text-blue-500 hover:text-blue-700 mr-2">
+                                            <i data-feather="edit"></i>
+                                        </button>
+                                        <form method="POST" class="inline">
+                                            <input type="hidden" name="id" value="<?= $qa['id'] ?>">
+                                            <button type="submit" name="delete_qa" class="text-red-500 hover:text-red-700">
+                                                <i data-feather="trash-2"></i>
+                                            </button>
+                                        </form>
+                                    </td>
+                                </tr>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <!-- User Management Section -->
+                <div class="bg-white rounded-lg shadow p-6">
+                    <h2 class="text-xl font-semibold mb-6">User Interactions</h2>
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full bg-white">
+                            <thead>
+                                <tr>
+                                    <th class="py-2 px-4 border-b">User</th>
+                                    <th class="py-2 px-4 border-b">Email</th>
+                                    <th class="py-2 px-4 border-b">Chat Sessions</th>
+                                    <th class="py-2 px-4 border-b">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php foreach ($users as $user): ?>
+                                <tr>
+                                    <td class="py-2 px-4 border-b"><?= htmlspecialchars($user['name']) ?></td>
+                                    <td class="py-2 px-4 border-b"><?= htmlspecialchars($user['email']) ?></td>
+                                    <td class="py-2 px-4 border-b"><?= $user['session_count'] ?></td>
+                                    <td class="py-2 px-4 border-b">
+                                        <a href="user_chats.php?user_id=<?= $user['id'] ?>" class="text-blue-500 hover:text-blue-700">
+                                            <i data-feather="eye"></i> View Chats
+                                        </a>
+                                    </td>
+                                </tr>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    <script>
+        feather.replace();
+        function toggleQaForm() {
+            const form = document.getElementById('qaForm');
+            form.classList.toggle('hidden');
+            // Reset form when showing
+            if (!form.classList.contains('hidden')) {
+                document.getElementById('editId').value = '';
+                document.getElementById('category').value = '';
+                document.getElementById('question').value = '';
+                document.getElementById('answer').value = '';
+                document.getElementById('addBtn').classList.remove('hidden');
+                document.getElementById('updateBtn').classList.add('hidden');
+            }
+        }
+        function editQa(id, category, question, answer) {
+            toggleQaForm();
+            document.getElementById('editId').value = id;
+            document.getElementById('category').value = category;
+            document.getElementById('question').value = question;
+            document.getElementById('answer').value = answer;
+            document.getElementById('addBtn').classList.add('hidden');
+            document.getElementById('updateBtn').classList.remove('hidden');
+        }
+    </script>
+    <script src="script.js"></script>
+</body>
+</html>
+```

components/navbar.js ADDED Viewed

	@@ -0,0 +1,28 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .navbar {
+          height: 64px;
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+        }
+      </style>
+      <nav class="navbar bg-white w-full fixed z-10">
+        <div class="flex items-center justify-between h-full px-6">
+          <div class="flex items-center">
+            <a href="/" class="text-xl font-bold text-gray-800">Admin Pulse</a>
+          </div>
+          <div class="flex items-center space-x-4">
+            <div class="relative">
+              <i data-feather="bell" class="text-gray-600 hover:text-gray-900 cursor-pointer"></i>
+              <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-500 text-white text-xs flex items-center justify-center">3</span>
+            </div>
+            <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">AD</div>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/sidebar.js ADDED Viewed

	@@ -0,0 +1,65 @@

+class CustomSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .sidebar {
+          width: 240px;
+          height: calc(100vh - 64px);
+          top: 64px;
+        }
+        .nav-link:hover {
+          background-color: rgba(59, 130, 246, 0.1);
+        }
+        .nav-link.active {
+          background-color: rgba(59, 130, 246, 0.1);
+          color: #3b82f6;
+          border-left: 3px solid #3b82f6;
+        }
+      </style>
+      <aside class="sidebar bg-white fixed shadow sidebar-transition">
+        <div class="p-4">
+          <ul class="space-y-1">
+            <li>
+              <a href="/" class="nav-link active flex items-center p-3 rounded-lg">
+                <i data-feather="home" class="mr-3"></i>
+                <span>Dashboard</span>
+              </a>
+            </li>
+            <li>
+              <a href="/users" class="nav-link flex items-center p-3 rounded-lg">
+                <i data-feather="users" class="mr-3"></i>
+                <span>Users</span>
+              </a>
+            </li>
+            <li>
+              <a href="/settings" class="nav-link flex items-center p-3 rounded-lg">
+                <i data-feather="settings" class="mr-3"></i>
+                <span>Settings</span>
+              </a>
+            </li>
+            <li>
+              <a href="/reports" class="nav-link flex items-center p-3 rounded-lg">
+                <i data-feather="file-text" class="mr-3"></i>
+                <span>Reports</span>
+              </a>
+            </li>
+            <li>
+              <a href="/admin.php" class="nav-link flex items-center p-3 rounded-lg">
+                <i data-feather="shield" class="mr-3"></i>
+                <span>Admin Panel</span>
+              </a>
+            </li>
+<li>
+              <a href="/logout" class="nav-link flex items-center p-3 rounded-lg text-red-500">
+                <i data-feather="log-out" class="mr-3"></i>
+                <span>Logout</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </aside>
+    `;
+  }
+}
+customElements.define('custom-sidebar', CustomSidebar);

index.html CHANGED Viewed

@@ -1,19 +1,103 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Pulse Dashboard</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+</head>
+<body class="bg-gray-100">
+    <custom-navbar></custom-navbar>
+    <div class="flex">
+        <custom-sidebar></custom-sidebar>
+        <main class="flex-1 p-8">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Stats Cards -->
+                <div class="bg-white rounded-lg shadow p-6">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-500">Total Users</p>
+                            <h3 class="text-2xl font-bold">1,234</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-blue-100 text-blue-600">
+                            <i data-feather="users"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow p-6">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-500">Active Sessions</p>
+                            <h3 class="text-2xl font-bold">56</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-green-100 text-green-600">
+                            <i data-feather="activity"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow p-6">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-500">Server Load</p>
+                            <h3 class="text-2xl font-bold">24%</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-purple-100 text-purple-600">
+                            <i data-feather="server"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Recent Activity -->
+            <div class="mt-8 bg-white rounded-lg shadow overflow-hidden">
+                <div class="p-6 border-b">
+                    <h2 class="text-xl font-semibold">Recent Activity</h2>
+                </div>
+                <div class="divide-y">
+                    <div class="p-4 flex items-center">
+                        <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
+                            <i data-feather="user-plus"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">New user registered</p>
+                            <p class="text-gray-500 text-sm">John Doe - 2 minutes ago</p>
+                        </div>
+                    </div>
+                    <div class="p-4 flex items-center">
+                        <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
+                            <i data-feather="settings"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">System updated</p>
+                            <p class="text-gray-500 text-sm">Version 2.3.1 - 1 hour ago</p>
+                        </div>
+                    </div>
+                    <div class="p-4 flex items-center">
+                        <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
+                            <i data-feather="alert-triangle"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">Warning notification</p>
+                            <p class="text-gray-500 text-sm">High CPU usage - 3 hours ago</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

	@@ -0,0 +1,103 @@

+```php
+<?php
+session_start();
+include 'db.php';
+if (isset($_SESSION['user_id'])) {
+    header("Location: " . ($_SESSION['role'] === 'admin' ? 'admin.php' : 'index.php'));
+    exit();
+}
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $email = mysqli_real_escape_string($conn, $_POST['email']);
+    $password = $_POST['password'];
+    $sql = "SELECT * FROM users WHERE email = '$email'";
+    $result = mysqli_query($conn, $sql);
+    if (mysqli_num_rows($result) == 1) {
+        $user = mysqli_fetch_assoc($result);
+        if (password_verify($password, $user['password'])) {
+            $_SESSION['user_id'] = $user['id'];
+            $_SESSION['name'] = $user['name'];
+            $_SESSION['email'] = $user['email'];
+            $_SESSION['role'] = $user['role'];
+            header("Location: " . ($user['role'] === 'admin' ? 'admin.php' : 'index.php'));
+            exit();
+        } else {
+            $error = "Invalid email or password";
+        }
+    } else {
+        $error = "Invalid email or password";
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - AdminBot BrainHub</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .login-container {
+            max-width: 400px;
+            margin: 0 auto;
+            margin-top: 100px;
+        }
+    </style>
+</head>
+<body class="bg-gray-100">
+    <div class="login-container bg-white p-8 rounded-lg shadow-lg">
+        <h1 class="text-2xl font-bold text-center mb-6">AdminBot BrainHub</h1>
+        <?php if (isset($error)): ?>
+            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+                <?= htmlspecialchars($error) ?>
+            </div>
+        <?php endif; ?>
+        <form method="POST">
+            <div class="mb-4">
+                <label class="block text-gray-700 mb-2">Email</label>
+                <input type="email" name="email" required
+                       class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-700 mb-2">Password</label>
+                <input type="password" name="password" required
+                       class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
+            </div>
+            <button type="submit"
+                    class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                Login
+            </button>
+        </form>
+        <p class="text-center mt-4 text-gray-600">
+            Demo Admin: admin@admin.com / admin123
+        </p>
+    </div>
+</body>
+</html>
+```
+These files create a complete admin dashboard for managing the chatbot's knowledge base and user interactions. The system includes:
+1. Admin panel with CRUD operations for Q&A pairs
+2. User management section showing all users and their chat history
+3. Detailed view of individual user chat sessions
+4. Login system with admin/user roles
+5. Database setup with sample admin user
+The design follows the reference dashboard style while adding the specific functionality requested. The admin can:
+- Add/edit/delete questions and answers
+- View all users and their chat histories
+- See detailed conversation logs per user session
+The system uses the same styling components (navbar, sidebar) as the reference dashboard for consistency.
+___METADATA_START___
+{"isNew":true,"userName":"gutzu1015"}
+___METADATA_END___

script.js ADDED Viewed

	@@ -0,0 +1,19 @@

+// Main script file for the admin dashboard
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+    // Make sidebar links active on click
+    const navLinks = document.querySelectorAll('.nav-link');
+    navLinks.forEach(link => {
+        link.addEventListener('click', function() {
+            navLinks.forEach(l => l.classList.remove('active'));
+            this.classList.add('active');
+        });
+    });
+    // Responsive sidebar toggle (can be added later)
+});

style.css CHANGED Viewed

@@ -1,28 +1,28 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom styles that can't be handled by Tailwind */
 body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
+/* Smooth transitions for sidebar */
+.sidebar-transition {
+    transition: all 0.3s ease;
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
 }
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 3px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}

user_chats.php ADDED Viewed

	@@ -0,0 +1,129 @@

+```php
+<?php
+session_start();
+include 'db.php';
+if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'admin') {
+    header("Location: login.php");
+    exit();
+}
+$user_id = (int)$_GET['user_id'];
+// Get user info
+$sql = "SELECT name, email FROM users WHERE id = $user_id";
+$result = mysqli_query($conn, $sql);
+$user = mysqli_fetch_assoc($result);
+// Get all sessions for this user
+$sessions = [];
+$sql = "SELECT DISTINCT session_id FROM chat_logs WHERE user_id = $user_id ORDER BY session_id DESC";
+$result = mysqli_query($conn, $sql);
+while ($row = mysqli_fetch_assoc($result)) {
+    $sessions[] = $row['session_id'];
+}
+// Get messages for selected session
+$selected_session = isset($_GET['session']) ? (int)$_GET['session'] : ($sessions[0] ?? 0);
+$messages = [];
+if ($selected_session > 0) {
+    $sql = "SELECT * FROM chat_logs
+            WHERE user_id = $user_id AND session_id = $selected_session
+            ORDER BY timestamp ASC";
+    $result = mysqli_query($conn, $sql);
+    while ($row = mysqli_fetch_assoc($result)) {
+        $messages[] = $row;
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Chats - AdminBot BrainHub</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+    <style>
+        .chat-container {
+            max-height: 500px;
+            overflow-y: auto;
+        }
+        .user-message {
+            background-color: #e3f2fd;
+            border-radius: 10px;
+            padding: 10px;
+            margin: 5px 0;
+            max-width: 80%;
+            margin-left: auto;
+        }
+        .bot-message {
+            background-color: #f1f1f1;
+            border-radius: 10px;
+            padding: 10px;
+            margin: 5px 0;
+            max-width: 80%;
+        }
+    </style>
+</head>
+<body class="bg-gray-100">
+    <custom-navbar></custom-navbar>
+    <div class="flex">
+        <custom-sidebar></custom-sidebar>
+        <main class="flex-1 p-8">
+            <div class="mb-6">
+                <a href="admin.php" class="text-blue-500 hover:text-blue-700 flex items-center">
+                    <i data-feather="arrow-left"></i>
+                    <span class="ml-2">Back to Admin</span>
+                </a>
+                <h1 class="text-2xl font-bold mt-4">Chat History for <?= htmlspecialchars($user['name']) ?></h1>
+                <p class="text-gray-600"><?= htmlspecialchars($user['email']) ?></p>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+                <!-- Session List -->
+                <div class="lg:col-span-1 bg-white rounded-lg shadow p-4">
+                    <h2 class="text-lg font-semibold mb-4">Chat Sessions</h2>
+                    <div class="space-y-2">
+                        <?php foreach ($sessions as $session): ?>
+                            <a href="?user_id=<?= $user_id ?>&session=<?= $session ?>"
+                               class="block p-3 rounded-lg <?= $session == $selected_session ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100' ?>">
+                                Session #<?= $session ?>
+                            </a>
+                        <?php endforeach; ?>
+                    </div>
+                </div>
+                <!-- Chat Messages -->
+                <div class="lg:col-span-3 bg-white rounded-lg shadow p-6">
+                    <div class="chat-container">
+                        <?php if (empty($messages)): ?>
+                            <p class="text-gray-500">No messages found in this session.</p>
+                        <?php else: ?>
+                            <?php foreach ($messages as $msg): ?>
+                                <div class="<?= $msg['type'] === 'user' ? 'user-message' : 'bot-message' ?>">
+                                    <p><?= htmlspecialchars($msg['message']) ?></p>
+                                    <p class="text-xs text-gray-500 mt-1">
+                                        <?= date('M j, Y g:i A', strtotime($msg['timestamp'])) ?>
+                                    </p>
+                                </div>
+                            <?php endforeach; ?>
+                        <?php endif; ?>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+</body>
+</html>
+```