casemgmt_cases.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Case Tracker</title>
<link rel="stylesheet" href="css/cases.css">
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
</head>
<body>
<header class="topbar">
<div>
<h1>Case Tracker</h1>
<p class="subtitle">Oracle & DB case management</p>
</div>
<div class="status-pill" id="apiStatus">Checking API...</div>
</header>
<main class="page">
<section class="panel">
<div class="panel-header">
<div>
<h2>Cases</h2>
<p>Home shows only open cases. Use filters to view history.</p>
</div>
<div class="panel-actions">
<button class="primary-btn" id="openCreateBtn">New Case</button>
<button class="ghost-btn" id="exportBtn">Export to Excel</button>
</div>
</div>
<div class="filters">
<div class="filter-row">
<label>
Case #
<input type="text" id="filterCaseNumber" placeholder="Exact match">
</label>
<label>
Subject
<input type="text" id="filterSubject" placeholder="Contains">
</label>
<label>
DB Name
<input type="text" id="filterDbName" placeholder="Contains">
</label>
<label>
DBA
<input type="text" id="filterDba" placeholder="Contains">
</label>
</div>
<div class="filter-row">
<label>
DB Type
<select id="filterDbType">
<option value="">All</option>
<option value="oracle">Oracle</option>
<option value="mongo">Mongo</option>
<option value="mysql">MySQL</option>
<option value="postgres">Postgres</option>
</select>
</label>
<label>
Severity
<select id="filterSeverity">
<option value="">All</option>
<option value="sev-1">sev-1</option>
<option value="sev-2">sev-2</option>
<option value="sev-3">sev-3</option>
<option value="sev-4">sev-4</option>
</select>
</label>
<label>
Status
<select id="filterStatus">
<option value="">All (except Closed)</option>
<option value="Open">Open</option>
<option value="In Progress">In Progress</option>
<option value="On Hold">On Hold</option>
<option value="Resolved">Resolved</option>
<option value="Closed">Closed</option>
<option value="Development Working">Development Working</option>
<option value="Unix Team - Pending">Unix Team - Pending</option>
<option value="Wat Team - Pending">Wat Team - Pending</option>
<option value="Storage Team - Pending">Storage Team - Pending</option>
<option value="AO Team - Pending">AO Team - Pending</option>
<option value="Solution Provided">Solution Provided</option>
<option value="Support working">Support working</option>
</select>
</label>
<label>
Search text
<input type="text" id="filterSearch" placeholder="Case #, subject, DBA">
</label>
</div>
<div class="filter-row">
<label>
Created from
<input type="date" id="filterFrom">
</label>
<label>
Created to
<input type="date" id="filterTo">
</label>
<div class="filter-actions">
<button class="primary-btn" id="applyFiltersBtn">Apply Filters</button>
<button class="ghost-btn" id="resetFiltersBtn">Reset Filters</button>
</div>
</div>
</div>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Case #</th>
<th>Subject</th>
<th>DB Name</th>
<th>DB Type</th>
<th>Severity</th>
<th>Status</th>
<th>Created</th>
<th>DBA</th>
<th>Solution</th>
<th>Action</th>
</tr>
</thead>
<tbody id="casesTableBody">
<tr><td colspan="10" class="empty">Loading...</td></tr>
</tbody>
</table>
</div>
</section>
</main>
<div class="modal" id="caseModal" aria-hidden="true">
<div class="modal-backdrop" id="modalBackdrop"></div>
<div class="modal-card" role="dialog" aria-modal="true">
<div class="modal-header">
<div>
<h2 id="formTitle">Create Case</h2>
<p class="subtitle">Submit new case details or update an existing record.</p>
</div>
<button class="close-btn" id="closeModalBtn" aria-label="Close">×</button>
</div>
<form id="caseForm" class="form-grid">
<input type="hidden" id="caseId">
<label>
Case Number *
<input type="text" id="caseNumber" required>
</label>
<label>
Subject *
<input type="text" id="subject" required>
</label>
<label>
Database Name *
<input type="text" id="dbName" required>
</label>
<label>
Database Type *
<select id="dbType" required>
<option value="oracle">Oracle</option>
<option value="mongo">Mongo</option>
<option value="mysql">MySQL</option>
<option value="postgres">Postgres</option>
</select>
</label>
<label>
Severity *
<select id="severity" required>
<option value="sev-1">sev-1</option>
<option value="sev-2">sev-2</option>
<option value="sev-3">sev-3</option>
<option value="sev-4">sev-4</option>
</select>
</label>
<label>
Current Status *
<select id="status" required>
<option value="Open">Open</option>
<option value="In Progress">In Progress</option>
<option value="On Hold">On Hold</option>
<option value="Resolved">Resolved</option>
<option value="Closed">Closed</option>
<option value="Development Working">Development Working</option>
<option value="Unix Team - Pending">Unix Team - Pending</option>
<option value="Wat Team - Pending">Wat Team - Pending</option>
<option value="Storage Team - Pending">Storage Team - Pending</option>
<option value="AO Team - Pending">AO Team - Pending</option>
<option value="Solution Provided">Solution Provided</option>
<option value="Support working">Support working</option>
</select>
</label>
<label>
Created (date) *
<input type="date" id="createdOn" required>
</label>
<label>
DBA *
<input type="text" id="dba" required>
</label>
<label class="full-row">
Solution / Notes (5000+ chars)
<textarea id="solution" rows="5" maxlength="8000" placeholder="Add full investigation notes and solution steps"></textarea>
<span class="helper" id="solutionCounter">0 / 8000</span>
</label>
<div class="form-actions">
<button type="submit" class="primary-btn" id="submitBtn">Save Case</button>
<button type="button" class="ghost-btn" id="cancelEditBtn">Cancel</button>
</div>
</form>
</div>
</div>
<div class="modal" id="viewModal" aria-hidden="true">
<div class="modal-backdrop" id="viewBackdrop"></div>
<div class="modal-card" role="dialog" aria-modal="true">
<div class="modal-header">
<div>
<h2>Solution</h2>
<p class="subtitle" id="viewSubtitle"></p>
</div>
<button class="close-btn" id="closeViewBtn" aria-label="Close">×</button>
</div>
<div class="detail-grid" id="viewGrid">
<!-- populated by JS -->
</div>
</div>
</div>
<template id="toastTemplate">
<div class="toast"></div>
</template>
<script src="js/cases.js"></script>
</body>
</html>
Comments
Post a Comment