mirror of
https://github.com/sassanix/Warracker.git
synced 2026-01-18 20:10:19 -06:00
195 lines
8.6 KiB
HTML
195 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Warranty Status Dashboard</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<!-- Font Awesome for icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<!-- Chart.js for visualizations -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="container">
|
|
<div class="app-title">
|
|
<i class="fas fa-shield-alt"></i>
|
|
<h1>Warranty Tracker</h1>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="index.html" class="nav-link">
|
|
<i class="fas fa-home"></i> Home
|
|
</a>
|
|
<a href="status.html" class="nav-link active">
|
|
<i class="fas fa-chart-pie"></i> Status
|
|
</a>
|
|
</div>
|
|
<div class="settings-container">
|
|
<button id="settingsBtn" class="settings-btn" aria-label="Settings">
|
|
<i class="fas fa-cog"></i>
|
|
</button>
|
|
<div id="settingsMenu" class="settings-menu">
|
|
<div class="settings-item">
|
|
<span>Dark Mode</span>
|
|
<label class="toggle-switch" title="Toggle dark mode">
|
|
<input type="checkbox" id="darkModeToggle">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="settings-item">
|
|
<a href="simple-status.html" class="settings-link">
|
|
<i class="fas fa-vial"></i> Simple Test
|
|
</a>
|
|
</div>
|
|
<div class="settings-item">
|
|
<a href="api-test.html" class="settings-link">
|
|
<i class="fas fa-terminal"></i> API Test
|
|
</a>
|
|
</div>
|
|
<div class="settings-item">
|
|
<a href="page-test.html" class="settings-link">
|
|
<i class="fas fa-sitemap"></i> Page Test
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container">
|
|
<div class="status-content">
|
|
<div class="dashboard-header">
|
|
<h2>Warranty Status Dashboard</h2>
|
|
<button id="refreshDashboardBtn" class="refresh-btn" title="Refresh dashboard">
|
|
<i class="fas fa-sync-alt"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading Indicator -->
|
|
<div id="loadingIndicator" class="loading-container active">
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
|
|
<!-- Error Message Container -->
|
|
<div id="errorContainer" style="display: none;" class="error-message">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
<h3>Error Loading Dashboard</h3>
|
|
<p id="errorMessage">There was a problem loading the warranty statistics. Please try refreshing the page.</p>
|
|
<p id="errorDetails" class="error-details"></p>
|
|
</div>
|
|
|
|
<!-- Dashboard Content -->
|
|
<div id="dashboardContent">
|
|
<!-- Summary Cards -->
|
|
<div class="status-cards">
|
|
<div class="status-card" data-status="active">
|
|
<div class="card-icon">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Active</h3>
|
|
<p class="count" id="activeCount">0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-card" data-status="expiring">
|
|
<div class="card-icon">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Expiring Soon</h3>
|
|
<p class="count" id="expiringCount">0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-card" data-status="expired">
|
|
<div class="card-icon">
|
|
<i class="fas fa-times-circle"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Expired</h3>
|
|
<p class="count" id="expiredCount">0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-card" data-status="total">
|
|
<div class="card-icon">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Total</h3>
|
|
<p class="count" id="totalCount">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="charts-container">
|
|
<div class="chart-card">
|
|
<h3>Warranty Status Distribution</h3>
|
|
<div class="chart-container">
|
|
<canvas id="statusChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-card">
|
|
<h3>Expiration Timeline</h3>
|
|
<div class="chart-container">
|
|
<canvas id="timelineChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Expirations -->
|
|
<div class="recent-expirations">
|
|
<div class="table-header">
|
|
<h3>Recently Expired or Expiring Soon</h3>
|
|
<div class="table-actions">
|
|
<div class="search-box">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="searchWarranties" placeholder="Search warranties...">
|
|
</div>
|
|
<div class="filter-options">
|
|
<select id="statusFilter" class="filter-select">
|
|
<option value="all">All Statuses</option>
|
|
<option value="active">Active</option>
|
|
<option value="expiring">Expiring Soon</option>
|
|
<option value="expired">Expired</option>
|
|
</select>
|
|
</div>
|
|
<button id="exportBtn" class="export-btn" title="Export data">
|
|
<i class="fas fa-download"></i> Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table id="recentExpirationsTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="sortable" data-sort="product">Product <i class="fas fa-sort"></i></th>
|
|
<th class="sortable" data-sort="purchase">Purchase Date <i class="fas fa-sort"></i></th>
|
|
<th class="sortable" data-sort="expiration">Expiration Date <i class="fas fa-sort"></i></th>
|
|
<th class="sortable" data-sort="status">Status <i class="fas fa-sort"></i></th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="recentExpirationsBody">
|
|
<!-- Data will be filled by JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notifications -->
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
<!-- Load status.js script after page is processed -->
|
|
<script src="status.js"></script>
|
|
</body>
|
|
</html> |