Hugging Face's logo

Spaces:
Tataaicoltd
/
tools
Running

App Files Community
tools / admin /index.html
Tataaicoltd's picture
Tataaicoltd
deploy: groups + search-point (admin + backend)
a024174 verified
Raw History Blame Contribute Delete
18 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - Intent Management System</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="css/favicon.ico" type="image/x-icon">
<link rel="icon" href="css/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
<!-- Sidebar Navigation -->
<aside class="sidebar">
<div class="sidebar-header">
<h1 class="logo">&gt; ADMIN MATRIX</h1>
</div>
<nav class="nav-menu">
<button class="nav-btn active" data-view="dashboard">
<span class="icon">⚡</span> Dashboard
</button>
<button class="nav-btn" data-view="categories">
<span class="icon">📁</span> Categories
</button>
<button class="nav-btn" data-view="intents">
<span class="icon">🎯</span> Intents
</button>
<button class="nav-btn" data-view="cities">
<span class="icon">🏙️</span> Cities
</button>
<button class="nav-btn" data-view="districts">
<span class="icon">🗺️</span> Districts
</button>
<button class="nav-btn" data-view="streets">
<span class="icon">🛣️</span> Streets
</button>
<button class="nav-btn" data-view="positions">
<span class="icon">📍</span> Positions
</button>
<button class="nav-btn" data-view="pathfinder">
<span class="icon">🔍</span> Pathfinder
</button>
</nav>
<div class="sidebar-footer">
<div class="status-indicator">
<span class="status-dot"></span>
<span class="status-text" id="statusText">Initializing...</span>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="main-content">
<!-- Header -->
<header class="header">
<div class="header-title">
<h2 id="viewTitle">Dashboard</h2>
</div>
<div class="header-actions">
<input type="text" id="searchInput" class="search-box" placeholder="Search...">
<button class="btn-icon" id="refreshBtn" title="Refresh">🔄</button>
</div>
</header>
<!-- Dashboard View -->
<section id="dashboard" class="view active">
<canvas id="matrixCanvas" class="matrix-canvas"></canvas>
<div class="dashboard-stats-overlay">
<div class="dashboard-search-wrap">
<input type="text" id="dashboardSearch" class="dashboard-search" placeholder="&gt; prompt_" autocomplete="off" spellcheck="false">
<div class="searchResults" id="searchResults">
</div>
</div>
</div>
</section>
<!-- Categories View -->
<section id="categories" class="view">
<div class="view-header">
<h3>Categories Management</h3>
<button class="btn btn-primary" id="addCategoryBtn">+ Add Category</button>
</div>
<div class="table-wrapper">
<table class="data-table">
<thead id="categoriesTableHead"></thead>
<tbody id="categoriesTableBody">
<!-- Populated by JS -->
</tbody>
</table>
</div>
</section>
<!-- Intents View -->
<section id="intents" class="view">
<div class="view-header">
<h3>Intents Management</h3>
<div class="filter-group">
<select id="priorityFilter" class="filter-select">
<option value="">All Priorities</option>
<option value="Critical">Critical</option>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low">Low</option>
</select>
<select id="categoryFilter" class="filter-select">
<option value="">All Categories</option>
</select>
<button class="btn btn-primary" id="addIntentBtn">+ Add Intent</button>
</div>
</div>
<div class="table-wrapper">
<table class="data-table">
<thead id="intentsTableHead"></thead>
<tbody id="intentsTableBody">
<!-- Populated by JS -->
</tbody>
</table>
</div>
</section>
<!-- Cities View -->
<section id="cities" class="view">
<div class="view-header">
<h3>Cities Management</h3>
<button class="btn btn-primary" id="addCityBtn">+ Add City</button>
</div>
<div class="table-wrapper">
<table class="data-table">
<thead id="citiesTableHead"></thead>
<tbody id="citiesTableBody"></tbody>
</table>
</div>
</section>
<!-- Districts View -->
<section id="districts" class="view">
<div class="view-header">
<h3>Districts Management</h3>
<div class="filter-group">
<select id="districtCityFilter" class="filter-select">
<option value="">All Cities</option>
</select>
<button class="btn btn-primary" id="addDistrictBtn">+ Add District</button>
</div>
</div>
<div class="table-wrapper">
<table class="data-table">
<thead id="districtsTableHead"></thead>
<tbody id="districtsTableBody"></tbody>
</table>
</div>
</section>
<!-- Streets View -->
<section id="streets" class="view">
<div class="view-header">
<h3>Streets Management</h3>
<div class="filter-group">
<select id="streetCityFilter" class="filter-select">
<option value="">All Cities</option>
</select>
<select id="streetDistrictFilter" class="filter-select">
<option value="">All Districts</option>
</select>
<button class="btn btn-primary" id="addStreetBtn">+ Add Street</button>
</div>
</div>
<div class="table-wrapper">
<table class="data-table">
<thead id="streetsTableHead"></thead>
<tbody id="streetsTableBody"></tbody>
</table>
</div>
</section>
<!-- Pathfinder View -->
<section id="pathfinder" class="view">
<div class="view-header">
<h3>A* Pathfinder</h3>
<div class="filter-group">
<button class="btn btn-secondary" id="pathDownloadBtn">⬇ Download position.bin</button>
<button class="btn btn-secondary" id="pathResetBtn">✕ Reset</button>
</div>
</div>
<div class="pathfinder-panel">
<div class="pathfinder-inputs">
<div class="path-select-group">
<label class="path-label">🟢 Start Position</label>
<input type="text" id="pathStartSearch" class="search-box path-search" placeholder="Filter by id or street...">
<select id="pathStart" class="path-select" size="8"></select>
</div>
<div class="path-arrow">→</div>
<div class="path-select-group">
<label class="path-label">🔴 End Position</label>
<input type="text" id="pathEndSearch" class="search-box path-search" placeholder="Filter by id or street...">
<select id="pathEnd" class="path-select" size="8"></select>
</div>
</div>
<div class="pathfinder-actions">
<button class="btn btn-primary" id="findPathBtn">▶ Find Path</button>
</div>
<div id="pathResult" class="path-result"></div>
</div>
</section>
<!-- Positions View -->
<section id="positions" class="view">
<div class="view-header">
<h3>Positions Management</h3>
<div class="filter-group">
<select id="positionStreetFilter" class="filter-select">
<option value="">All Streets</option>
</select>
</div>
</div>
<div class="table-wrapper">
<table class="data-table">
<thead id="positionsTableHead"></thead>
<tbody id="positionsTableBody"></tbody>
</table>
</div>
</section>
</main>
</div>
<!-- Modal: Add/Edit City -->
<div id="cityModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h4 id="cityModalTitle">Add City</h4>
<button class="modal-close" data-modal="cityModal">&times;</button>
</div>
<form id="cityForm">
<div class="form-group">
<label for="cityName">Name *</label>
<input type="text" id="cityName" name="cityName" required>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-modal="cityModal">Cancel</button>
</div>
</form>
</div>
</div>
<!-- Modal: Add/Edit District -->
<div id="districtModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h4 id="districtModalTitle">Add District</h4>
<button class="modal-close" data-modal="districtModal">&times;</button>
</div>
<form id="districtForm">
<div class="form-group">
<label for="districtName">Name *</label>
<input type="text" id="districtName" name="districtName" required>
</div>
<div class="form-group">
<label for="districtLname">Short Name</label>
<input type="text" id="districtLname" name="districtLname">
</div>
<div class="form-group">
<label for="districtCity">City *</label>
<select id="districtCity" name="districtCity" required>
<option value="">Select a city</option>
</select>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-modal="districtModal">Cancel</button>
</div>
</form>
</div>
</div>
<!-- Modal: Add/Edit Street -->
<div id="streetModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h4 id="streetModalTitle">Add Street</h4>
<button class="modal-close" data-modal="streetModal">&times;</button>
</div>
<form id="streetForm">
<div class="form-group">
<label for="streetName">Name *</label>
<input type="text" id="streetName" name="streetName" required>
</div>
<div class="form-group">
<label for="streetType">Type</label>
<select id="streetType" name="streetType">
<option value="">Select a type</option>
<option value="Phố">Phố</option>
<option value="Xã">Xã</option>
<option value="Cao Tốc">Cao Tốc</option>
<option value="Quê">Quê</option>
<option value="Hẻm">Hẻm</option>
</select>
</div>
<div class="form-group">
<label for="streetCity">City *</label>
<select id="streetCity" name="streetCity" required>
<option value="">Select a city</option>
</select>
</div>
<div class="form-group">
<label for="streetDistrict">District *</label>
<select id="streetDistrict" name="streetDistrict" required>
<option value="">Select a district</option>
</select>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-modal="streetModal">Cancel</button>
</div>
</form>
</div>
</div>
<div id="categoryModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h4 id="categoryModalTitle">Add Category</h4>
<button class="modal-close" data-modal="categoryModal">&times;</button>
</div>
<form id="categoryForm">
<div class="form-group">
<label for="categoryLabel">Label *</label>
<input type="text" id="categoryLabel" name="categoryLabel" required>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-modal="categoryModal">Cancel</button>
</div>
</form>
</div>
</div>
<!-- Modal: Add/Edit Intent -->
<div id="intentModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h4 id="intentModalTitle">Add Intent</h4>
<button class="modal-close" data-modal="intentModal">&times;</button>
</div>
<form id="intentForm">
<div class="form-group">
<label for="intentName">Intent Name *</label>
<input type="text" id="intentName" name="intentName" required>
</div>
<div class="form-group">
<label for="intentCategory">Category *</label>
<select id="intentCategory" name="intentCategory" required>
<option value="">Select a category</option>
</select>
</div>
<div class="form-group">
<label for="intentPriority">Priority *</label>
<select id="intentPriority" name="intentPriority" required>
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
<option value="Critical">Critical</option>
</select>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-modal="intentModal">Cancel</button>
</div>
</form>
</div>
</div>
<!-- Modal: Delete Confirmation -->
<div id="deleteModal" class="modal">
<div class="modal-content modal-small">
<div class="modal-header">
<h4>Confirm Delete</h4>
<button class="modal-close" data-modal="deleteModal">&times;</button>
</div>
<div class="modal-body">
<p id="deleteMessage">Are you sure you want to delete this item?</p>
</div>
<div class="form-actions">
<button class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
<button class="btn btn-secondary" data-modal="deleteModal">Cancel</button>
</div>
</div>
</div>
<!-- Toast Notification -->
<div id="toast" class="toast"></div>
<script src="js/auth.js"></script>
<script src="js/api.js"></script>
<script src="js/components.js"></script>
<script src="js/app.js"></script>
</body>
</html>