maybe good
This commit is contained in:
HotSwapp
1128
templates/admin.html
Normal file
1128
templates/admin.html
Normal file
File diff suppressed because it is too large
Load Diff
170
templates/base.html
Normal file
170
templates/base.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{{ title }}{% endblock %}</title>
|
||||
|
||||
<!-- Bootstrap 5.3 CDN -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link href="/static/css/main.css" rel="stylesheet">
|
||||
<link href="/static/css/themes.css" rel="stylesheet">
|
||||
<link href="/static/css/components.css" rel="stylesheet">
|
||||
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">
|
||||
Delphi Database System
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/customers" data-shortcut="Alt+C">
|
||||
<i class="bi bi-people"></i> Customers <small>(Alt+C)</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/files" data-shortcut="Alt+F">
|
||||
<i class="bi bi-folder"></i> Files <small>(Alt+F)</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/financial" data-shortcut="Alt+L">
|
||||
<i class="bi bi-calculator"></i> Ledger <small>(Alt+L)</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/documents" data-shortcut="Alt+D">
|
||||
<i class="bi bi-file-text"></i> Documents <small>(Alt+D)</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/import" data-shortcut="Alt+I">
|
||||
<i class="bi bi-upload"></i> Import <small>(Alt+I)</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/search" data-shortcut="Ctrl+F">
|
||||
<i class="bi bi-search"></i> Search <small>(Ctrl+F)</small>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-person-circle"></i> User
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="/admin" data-shortcut="Alt+A"><i class="bi bi-gear"></i> Admin <small>(Alt+A)</small></a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#" onclick="logout()"><i class="bi bi-box-arrow-right"></i> Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container-fluid mt-3">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<!-- Keyboard Shortcuts Help Modal -->
|
||||
<div class="modal fade" id="shortcutsModal" tabindex="-1" aria-labelledby="shortcutsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="shortcutsModalLabel">
|
||||
<i class="bi bi-keyboard"></i> Keyboard Shortcuts
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6><i class="bi bi-house"></i> Navigation</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><kbd>Alt+C</kbd> - Customers/Rolodex</li>
|
||||
<li><kbd>Alt+F</kbd> - File Cabinet</li>
|
||||
<li><kbd>Alt+L</kbd> - Ledger/Financial</li>
|
||||
<li><kbd>Alt+D</kbd> - Documents/QDROs</li>
|
||||
<li><kbd>Alt+A</kbd> - Admin Panel</li>
|
||||
<li><kbd>Ctrl+F</kbd> - Global Search</li>
|
||||
</ul>
|
||||
|
||||
<h6><i class="bi bi-pencil"></i> Forms</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><kbd>Ctrl+N</kbd> - New Record</li>
|
||||
<li><kbd>Ctrl+S</kbd> - Save</li>
|
||||
<li><kbd>F9</kbd> - Edit Mode</li>
|
||||
<li><kbd>F2</kbd> - Complete/Save</li>
|
||||
<li><kbd>F8</kbd> - Clear/Cancel</li>
|
||||
<li><kbd>Del</kbd> - Delete Record</li>
|
||||
<li><kbd>Esc</kbd> - Cancel/Close</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6><i class="bi bi-list"></i> Lists/Tables</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><kbd>↑/↓</kbd> - Navigate records</li>
|
||||
<li><kbd>Page Up/Down</kbd> - Page navigation</li>
|
||||
<li><kbd>Home/End</kbd> - First/Last record</li>
|
||||
<li><kbd>Enter</kbd> - Open/Edit record</li>
|
||||
<li><kbd>+/-</kbd> - Change dates</li>
|
||||
</ul>
|
||||
|
||||
<h6><i class="bi bi-tools"></i> System</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><kbd>F1</kbd> - Help (this dialog)</li>
|
||||
<li><kbd>F10</kbd> - Menu</li>
|
||||
<li><kbd>Alt+M</kbd> - Memo/Notes</li>
|
||||
<li><kbd>Alt+T</kbd> - Time Tracker</li>
|
||||
<li><kbd>Alt+B</kbd> - Balance Summary</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Custom JavaScript -->
|
||||
<script src="/static/js/keyboard-shortcuts.js"></script>
|
||||
<script src="/static/js/main.js"></script>
|
||||
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
|
||||
<script>
|
||||
// Initialize keyboard shortcuts on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeKeyboardShortcuts();
|
||||
});
|
||||
|
||||
// Logout function
|
||||
function logout() {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
799
templates/customers.html
Normal file
799
templates/customers.html
Normal file
@@ -0,0 +1,799 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Customers (Rolodex) - Delphi Database{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2><i class="bi bi-person-rolodex"></i> Customers (Rolodex)</h2>
|
||||
<div>
|
||||
<button class="btn btn-success" id="addCustomerBtn">
|
||||
<i class="bi bi-plus-circle"></i> New Customer (Ctrl+N)
|
||||
</button>
|
||||
<button class="btn btn-info" id="statsBtn">
|
||||
<i class="bi bi-graph-up"></i> Statistics
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filter Panel -->
|
||||
<div class="card customer-search-panel mb-3">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="searchInput" class="form-label">Search Customers</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="searchInput" placeholder="Name, ID, City, Email...">
|
||||
<button class="btn btn-outline-secondary" type="button" id="searchBtn">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="groupFilter" class="form-label">Group Filter</label>
|
||||
<select class="form-select" id="groupFilter">
|
||||
<option value="">All Groups</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label for="stateFilter" class="form-label">State Filter</label>
|
||||
<select class="form-select" id="stateFilter">
|
||||
<option value="">All States</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="phoneSearch" class="form-label">Phone Search</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="phoneSearch" placeholder="Phone number...">
|
||||
<button class="btn btn-outline-secondary" type="button" id="phoneSearchBtn">
|
||||
<i class="bi bi-telephone"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer List -->
|
||||
<div class="card customer-table-container">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" id="customersTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Group</th>
|
||||
<th>City, State</th>
|
||||
<th>Phone</th>
|
||||
<th>Email</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="customersTableBody">
|
||||
<!-- Customer rows will be populated here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav aria-label="Customer pagination">
|
||||
<ul class="pagination justify-content-center" id="pagination">
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Modal -->
|
||||
<div class="modal fade customer-modal" id="customerModal" tabindex="-1" aria-labelledby="customerModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="customerModalLabel">Customer Details</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="customerForm">
|
||||
<div class="row g-3">
|
||||
<!-- Customer ID and Basic Info -->
|
||||
<div class="col-md-6">
|
||||
<div class="card customer-form-section">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">Basic Information</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="customerId" class="form-label">Customer ID *</label>
|
||||
<input type="text" class="form-control" id="customerId" name="id" required>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label for="prefix" class="form-label">Prefix</label>
|
||||
<input type="text" class="form-control" id="prefix" name="prefix" placeholder="Mr., Ms., Dr.">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="suffix" class="form-label">Suffix</label>
|
||||
<input type="text" class="form-control" id="suffix" name="suffix" placeholder="Jr., Sr., M.D.">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="first" class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" id="first" name="first">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="middle" class="form-label">Middle Name</label>
|
||||
<input type="text" class="form-control" id="middle" name="middle">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="last" class="form-label">Last Name / Company *</label>
|
||||
<input type="text" class="form-control" id="last" name="last" required>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label for="title" class="form-label">Title</label>
|
||||
<input type="text" class="form-control" id="title" name="title" placeholder="President, Attorney">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="group" class="form-label">Group</label>
|
||||
<input type="text" class="form-control" id="group" name="group" placeholder="Client, Personal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Address Information -->
|
||||
<div class="col-md-6">
|
||||
<div class="card customer-form-section">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">Address Information</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="a1" class="form-label">Address Line 1</label>
|
||||
<input type="text" class="form-control" id="a1" name="a1">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="a2" class="form-label">Address Line 2</label>
|
||||
<input type="text" class="form-control" id="a2" name="a2">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="a3" class="form-label">Address Line 3</label>
|
||||
<input type="text" class="form-control" id="a3" name="a3">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label for="city" class="form-label">City</label>
|
||||
<input type="text" class="form-control" id="city" name="city">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="abrev" class="form-label">State</label>
|
||||
<input type="text" class="form-control" id="abrev" name="abrev" placeholder="TX" maxlength="2">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="zip" class="form-label">ZIP Code</label>
|
||||
<input type="text" class="form-control" id="zip" name="zip">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact & Legal Info -->
|
||||
<div class="col-12">
|
||||
<div class="card customer-form-section">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">Contact & Legal Information</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email" name="email">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="dob" class="form-label">Date of Birth</label>
|
||||
<input type="date" class="form-control" id="dob" name="dob">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="ss_number" class="form-label">Social Security #</label>
|
||||
<input type="text" class="form-control" id="ss_number" name="ss_number" placeholder="###-##-####">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label for="legal_status" class="form-label">Legal Status</label>
|
||||
<input type="text" class="form-control" id="legal_status" name="legal_status" placeholder="Petitioner">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone Numbers -->
|
||||
<div class="col-12">
|
||||
<div class="card customer-form-section">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0">Phone Numbers</h6>
|
||||
<button type="button" class="btn btn-sm btn-success" id="addPhoneBtn">
|
||||
<i class="bi bi-plus"></i> Add Phone
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="phoneNumbers">
|
||||
<!-- Phone numbers will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memo -->
|
||||
<div class="col-12">
|
||||
<div class="card customer-form-section">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">Memo / Notes (Alt+M)</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<textarea class="form-control" id="memo" name="memo" rows="4" placeholder="Enter notes and comments here..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel (Esc)</button>
|
||||
<button type="button" class="btn btn-danger delete-customer-btn" id="deleteCustomerBtn">
|
||||
<i class="bi bi-trash"></i> Delete (Del)
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="saveCustomerBtn">
|
||||
<i class="bi bi-check-circle"></i> Save (Ctrl+S)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Modal -->
|
||||
<div class="modal fade" id="statsModal" tabindex="-1" aria-labelledby="statsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="statsModalLabel">Customer Database Statistics</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="statsContent">
|
||||
<!-- Statistics will be loaded here -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Customer management functionality
|
||||
let currentPage = 0;
|
||||
let currentSearch = '';
|
||||
let isEditing = false;
|
||||
let editingCustomerId = null;
|
||||
|
||||
// Helper function for authenticated API calls
|
||||
function getAuthHeaders() {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
return {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check authentication first
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (!token) {
|
||||
window.location.href = '/login';
|
||||
return;
|
||||
}
|
||||
|
||||
loadCustomers();
|
||||
loadGroups();
|
||||
loadStates();
|
||||
setupEventListeners();
|
||||
});
|
||||
|
||||
function setupEventListeners() {
|
||||
// Search functionality
|
||||
document.getElementById('searchBtn').addEventListener('click', performSearch);
|
||||
document.getElementById('searchInput').addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') performSearch();
|
||||
});
|
||||
|
||||
// Phone search
|
||||
document.getElementById('phoneSearchBtn').addEventListener('click', performPhoneSearch);
|
||||
document.getElementById('phoneSearch').addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') performPhoneSearch();
|
||||
});
|
||||
|
||||
// Modal buttons
|
||||
document.getElementById('addCustomerBtn').addEventListener('click', showAddCustomerModal);
|
||||
document.getElementById('saveCustomerBtn').addEventListener('click', saveCustomer);
|
||||
document.getElementById('deleteCustomerBtn').addEventListener('click', deleteCustomer);
|
||||
document.getElementById('addPhoneBtn').addEventListener('click', addPhoneField);
|
||||
document.getElementById('statsBtn').addEventListener('click', showStats);
|
||||
|
||||
// Form validation
|
||||
document.getElementById('customerId').addEventListener('blur', validateCustomerId);
|
||||
}
|
||||
|
||||
async function loadCustomers(page = 0, search = '') {
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
skip: page * 50,
|
||||
limit: 50
|
||||
});
|
||||
|
||||
if (search) params.append('search', search);
|
||||
|
||||
const response = await fetch(`/api/customers/?${params}`, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Failed to load customers');
|
||||
|
||||
const customers = await response.json();
|
||||
displayCustomers(customers);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading customers:', error);
|
||||
showAlert('Error loading customers: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
function displayCustomers(customers) {
|
||||
const tbody = document.getElementById('customersTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
customers.forEach(customer => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${customer.id}</td>
|
||||
<td>${formatName(customer)}</td>
|
||||
<td>${customer.group || ''}</td>
|
||||
<td>${formatLocation(customer)}</td>
|
||||
<td>${formatPhones(customer.phone_numbers)}</td>
|
||||
<td>${customer.email || ''}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-primary" onclick="editCustomer('${customer.id}')">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</button>
|
||||
<button class="btn btn-sm btn-info" onclick="viewCustomer('${customer.id}')">
|
||||
<i class="bi bi-eye"></i> View
|
||||
</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function formatName(customer) {
|
||||
const parts = [];
|
||||
if (customer.prefix) parts.push(customer.prefix);
|
||||
if (customer.first) parts.push(customer.first);
|
||||
if (customer.middle) parts.push(customer.middle);
|
||||
parts.push(customer.last);
|
||||
if (customer.suffix) parts.push(customer.suffix);
|
||||
return parts.join(' ');
|
||||
}
|
||||
|
||||
function formatLocation(customer) {
|
||||
const parts = [];
|
||||
if (customer.city) parts.push(customer.city);
|
||||
if (customer.abrev) parts.push(customer.abrev);
|
||||
return parts.join(', ');
|
||||
}
|
||||
|
||||
function formatPhones(phones) {
|
||||
if (!phones || phones.length === 0) return '';
|
||||
return phones.map(p => `${p.location || 'Phone'}: ${p.phone}`).join('<br>');
|
||||
}
|
||||
|
||||
async function loadGroups() {
|
||||
try {
|
||||
const response = await fetch('/api/customers/groups', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const groups = await response.json();
|
||||
const select = document.getElementById('groupFilter');
|
||||
groups.forEach(g => {
|
||||
const option = document.createElement('option');
|
||||
option.value = g.group;
|
||||
option.textContent = g.group;
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading groups:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStates() {
|
||||
try {
|
||||
const response = await fetch('/api/customers/states', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const states = await response.json();
|
||||
const select = document.getElementById('stateFilter');
|
||||
states.forEach(s => {
|
||||
const option = document.createElement('option');
|
||||
option.value = s.state;
|
||||
option.textContent = s.state;
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading states:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function performSearch() {
|
||||
currentSearch = document.getElementById('searchInput').value;
|
||||
currentPage = 0;
|
||||
loadCustomers(currentPage, currentSearch);
|
||||
}
|
||||
|
||||
async function performPhoneSearch() {
|
||||
const phone = document.getElementById('phoneSearch').value;
|
||||
if (!phone) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/customers/search/phone?phone=${encodeURIComponent(phone)}`, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Phone search failed');
|
||||
|
||||
const results = await response.json();
|
||||
displayPhoneSearchResults(results);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Phone search error:', error);
|
||||
showAlert('Phone search failed: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
function displayPhoneSearchResults(results) {
|
||||
const tbody = document.getElementById('customersTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
results.forEach(result => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${result.customer.id}</td>
|
||||
<td>${result.customer.name}</td>
|
||||
<td>-</td>
|
||||
<td>${result.customer.city}, ${result.customer.state}</td>
|
||||
<td><strong>${result.location}: ${result.phone}</strong></td>
|
||||
<td>-</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-primary" onclick="editCustomer('${result.customer.id}')">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function showAddCustomerModal() {
|
||||
isEditing = false;
|
||||
editingCustomerId = null;
|
||||
document.getElementById('customerModalLabel').textContent = 'Add New Customer';
|
||||
document.getElementById('deleteCustomerBtn').classList.remove('show');
|
||||
clearCustomerForm();
|
||||
new bootstrap.Modal(document.getElementById('customerModal')).show();
|
||||
}
|
||||
|
||||
async function editCustomer(customerId) {
|
||||
try {
|
||||
const response = await fetch(`/api/customers/${customerId}`, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Failed to load customer');
|
||||
|
||||
const customer = await response.json();
|
||||
populateCustomerForm(customer);
|
||||
|
||||
isEditing = true;
|
||||
editingCustomerId = customerId;
|
||||
document.getElementById('customerModalLabel').textContent = 'Edit Customer';
|
||||
document.getElementById('deleteCustomerBtn').classList.add('show');
|
||||
document.getElementById('customerId').disabled = true;
|
||||
|
||||
new bootstrap.Modal(document.getElementById('customerModal')).show();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading customer:', error);
|
||||
showAlert('Error loading customer: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
function viewCustomer(customerId) {
|
||||
// Similar to editCustomer but make form read-only
|
||||
editCustomer(customerId);
|
||||
// TODO: Make form read-only for view mode
|
||||
}
|
||||
|
||||
function populateCustomerForm(customer) {
|
||||
const form = document.getElementById('customerForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Populate basic fields
|
||||
Object.keys(customer).forEach(key => {
|
||||
const input = form.querySelector(`[name="${key}"]`);
|
||||
if (input && customer[key] !== null) {
|
||||
if (input.type === 'date' && customer[key]) {
|
||||
input.value = customer[key];
|
||||
} else {
|
||||
input.value = customer[key] || '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Populate phone numbers
|
||||
populatePhoneNumbers(customer.phone_numbers || []);
|
||||
}
|
||||
|
||||
function populatePhoneNumbers(phones) {
|
||||
const container = document.getElementById('phoneNumbers');
|
||||
container.innerHTML = '';
|
||||
|
||||
phones.forEach((phone, index) => {
|
||||
addPhoneField(phone);
|
||||
});
|
||||
|
||||
if (phones.length === 0) {
|
||||
addPhoneField();
|
||||
}
|
||||
}
|
||||
|
||||
function addPhoneField(phone = null) {
|
||||
const container = document.getElementById('phoneNumbers');
|
||||
const phoneDiv = document.createElement('div');
|
||||
phoneDiv.className = 'row mb-2 phone-entry';
|
||||
|
||||
phoneDiv.innerHTML = `
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control phone-location" placeholder="Location (Home, Office, Mobile)" value="${phone?.location || ''}">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control phone-number" placeholder="Phone Number" value="${phone?.phone || ''}">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<button type="button" class="btn btn-outline-danger btn-sm remove-phone">
|
||||
<i class="bi bi-dash"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add remove functionality
|
||||
phoneDiv.querySelector('.remove-phone').addEventListener('click', function() {
|
||||
phoneDiv.remove();
|
||||
});
|
||||
|
||||
container.appendChild(phoneDiv);
|
||||
}
|
||||
|
||||
async function saveCustomer() {
|
||||
const form = document.getElementById('customerForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
const customerData = {};
|
||||
|
||||
// Collect basic form data
|
||||
for (let [key, value] of formData.entries()) {
|
||||
if (value.trim() !== '') {
|
||||
customerData[key] = value.trim();
|
||||
}
|
||||
}
|
||||
|
||||
// Validate required fields
|
||||
if (!customerData.id || !customerData.last) {
|
||||
showAlert('Customer ID and Last Name are required', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const url = isEditing ? `/api/customers/${editingCustomerId}` : '/api/customers/';
|
||||
const method = isEditing ? 'PUT' : 'POST';
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: method,
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify(customerData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Failed to save customer');
|
||||
}
|
||||
|
||||
const customer = await response.json();
|
||||
|
||||
// Save phone numbers
|
||||
await savePhoneNumbers(customer.id);
|
||||
|
||||
bootstrap.Modal.getInstance(document.getElementById('customerModal')).hide();
|
||||
showAlert(isEditing ? 'Customer updated successfully' : 'Customer created successfully', 'success');
|
||||
loadCustomers(currentPage, currentSearch);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error saving customer:', error);
|
||||
showAlert('Error saving customer: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
async function savePhoneNumbers(customerId) {
|
||||
const phoneEntries = document.querySelectorAll('.phone-entry');
|
||||
|
||||
// First, get existing phones to update/delete
|
||||
try {
|
||||
const response = await fetch(`/api/customers/${customerId}/phones`, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const existingPhones = await response.json();
|
||||
// For simplicity, delete all existing phones and re-add
|
||||
// In production, you'd want to be more sophisticated about updates
|
||||
for (const phone of existingPhones) {
|
||||
await fetch(`/api/customers/${customerId}/phones/${phone.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error managing existing phones:', error);
|
||||
}
|
||||
|
||||
// Add new phones
|
||||
for (const entry of phoneEntries) {
|
||||
const location = entry.querySelector('.phone-location').value.trim();
|
||||
const phone = entry.querySelector('.phone-number').value.trim();
|
||||
|
||||
if (phone) {
|
||||
try {
|
||||
await fetch(`/api/customers/${customerId}/phones`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({
|
||||
location: location || null,
|
||||
phone: phone
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error saving phone:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteCustomer() {
|
||||
if (!confirm('Are you sure you want to delete this customer? This action cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/customers/${editingCustomerId}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Failed to delete customer');
|
||||
|
||||
bootstrap.Modal.getInstance(document.getElementById('customerModal')).hide();
|
||||
showAlert('Customer deleted successfully', 'success');
|
||||
loadCustomers(currentPage, currentSearch);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error deleting customer:', error);
|
||||
showAlert('Error deleting customer: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
async function validateCustomerId() {
|
||||
const id = document.getElementById('customerId').value;
|
||||
if (!id || isEditing) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/customers/${id}`, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showAlert('Customer ID already exists', 'warning');
|
||||
document.getElementById('customerId').focus();
|
||||
}
|
||||
} catch (error) {
|
||||
// ID doesn't exist, which is good for new customers
|
||||
}
|
||||
}
|
||||
|
||||
async function showStats() {
|
||||
try {
|
||||
const response = await fetch('/api/customers/stats', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Failed to load statistics');
|
||||
|
||||
const stats = await response.json();
|
||||
displayStats(stats);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading stats:', error);
|
||||
showAlert('Error loading statistics: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
function displayStats(stats) {
|
||||
const content = document.getElementById('statsContent');
|
||||
content.innerHTML = `
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6>Database Overview</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><strong>Total Customers:</strong> ${stats.total_customers}</li>
|
||||
<li><strong>Phone Numbers:</strong> ${stats.total_phone_numbers}</li>
|
||||
<li><strong>With Email:</strong> ${stats.customers_with_email}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6>Group Breakdown</h6>
|
||||
<ul class="list-unstyled">
|
||||
${stats.group_breakdown.map(g => `<li><strong>${g.group}:</strong> ${g.count}</li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
new bootstrap.Modal(document.getElementById('statsModal')).show();
|
||||
}
|
||||
|
||||
function clearCustomerForm() {
|
||||
document.getElementById('customerForm').reset();
|
||||
document.getElementById('customerId').disabled = false;
|
||||
document.getElementById('phoneNumbers').innerHTML = '';
|
||||
addPhoneField();
|
||||
}
|
||||
|
||||
function showAlert(message, type = 'info') {
|
||||
// Create and show Bootstrap alert
|
||||
const alertDiv = document.createElement('div');
|
||||
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
||||
alertDiv.innerHTML = `
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
|
||||
document.body.insertBefore(alertDiv, document.body.firstChild);
|
||||
|
||||
// Auto-dismiss after 5 seconds
|
||||
setTimeout(() => {
|
||||
if (alertDiv.parentNode) {
|
||||
alertDiv.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
232
templates/dashboard.html
Normal file
232
templates/dashboard.html
Normal file
@@ -0,0 +1,232 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Dashboard - {{ super() }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1><i class="bi bi-speedometer2"></i> Dashboard</h1>
|
||||
<div>
|
||||
<button class="btn btn-outline-secondary btn-sm" onclick="showShortcuts()">
|
||||
<i class="bi bi-keyboard"></i> Shortcuts (F1)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats Cards -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-primary text-white">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="bi bi-people fs-1"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="card-title">Customers</h5>
|
||||
<h2 class="mb-0" id="customer-count">-</h2>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/customers" class="text-white-50 small">
|
||||
View all <i class="bi bi-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-success text-white">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="bi bi-folder fs-1"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="card-title">Active Files</h5>
|
||||
<h2 class="mb-0" id="file-count">-</h2>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/files" class="text-white-50 small">
|
||||
View all <i class="bi bi-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-info text-white">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="bi bi-receipt fs-1"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="card-title">Transactions</h5>
|
||||
<h2 class="mb-0" id="transaction-count">-</h2>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/financial" class="text-white-50 small">
|
||||
View ledger <i class="bi bi-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-warning text-dark">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<i class="bi bi-file-text fs-1"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="card-title">Documents</h5>
|
||||
<h2 class="mb-0" id="document-count">-</h2>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/documents" class="text-dark-50 small">
|
||||
View all <i class="bi bi-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5><i class="bi bi-lightning"></i> Quick Actions</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-outline-primary btn-lg" onclick="newCustomer()">
|
||||
<i class="bi bi-person-plus"></i> New Customer
|
||||
<small class="d-block text-muted">Ctrl+Shift+C</small>
|
||||
</button>
|
||||
<button class="btn btn-outline-success btn-lg" onclick="newFile()">
|
||||
<i class="bi bi-folder-plus"></i> New File
|
||||
<small class="d-block text-muted">Ctrl+Shift+F</small>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-outline-info btn-lg" onclick="newTransaction()">
|
||||
<i class="bi bi-plus-circle"></i> New Transaction
|
||||
<small class="d-block text-muted">Ctrl+Shift+T</small>
|
||||
</button>
|
||||
<button class="btn btn-outline-warning btn-lg" onclick="globalSearch()">
|
||||
<i class="bi bi-search"></i> Global Search
|
||||
<small class="d-block text-muted">Ctrl+F</small>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5><i class="bi bi-clock-history"></i> Recent Activity</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="recent-activity">
|
||||
<p class="text-muted text-center">
|
||||
<i class="bi bi-hourglass-split"></i><br>
|
||||
Loading recent activity...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Status -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5><i class="bi bi-info-circle"></i> System Information</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p><strong>System:</strong> Delphi Consulting Group Database System</p>
|
||||
<p><strong>Version:</strong> 1.0.0</p>
|
||||
<p><strong>Database:</strong> SQLite</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p><strong>Last Backup:</strong> <span id="last-backup">Not available</span></p>
|
||||
<p><strong>Database Size:</strong> <span id="db-size">-</span></p>
|
||||
<p><strong>Status:</strong> <span id="system-status" class="badge bg-success">Healthy</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
// Load dashboard data
|
||||
async function loadDashboardData() {
|
||||
try {
|
||||
// This would typically be authenticated API calls
|
||||
const response = await fetch('/api/admin/stats', {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
document.getElementById('customer-count').textContent = data.total_customers || '0';
|
||||
document.getElementById('file-count').textContent = data.total_files || '0';
|
||||
document.getElementById('transaction-count').textContent = data.total_transactions || '0';
|
||||
document.getElementById('document-count').textContent = data.total_qdros || '0';
|
||||
document.getElementById('db-size').textContent = data.database_size || '-';
|
||||
document.getElementById('last-backup').textContent = data.last_backup || 'Not available';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading dashboard data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Quick action functions
|
||||
function newCustomer() {
|
||||
window.location.href = '/customers/new';
|
||||
}
|
||||
|
||||
function newFile() {
|
||||
window.location.href = '/files/new';
|
||||
}
|
||||
|
||||
function newTransaction() {
|
||||
window.location.href = '/financial/new';
|
||||
}
|
||||
|
||||
function globalSearch() {
|
||||
window.location.href = '/search';
|
||||
}
|
||||
|
||||
function showShortcuts() {
|
||||
const modal = new bootstrap.Modal(document.getElementById('shortcutsModal'));
|
||||
modal.show();
|
||||
}
|
||||
|
||||
// Load data on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// loadDashboardData(); // Uncomment when authentication is implemented
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
1149
templates/documents.html
Normal file
1149
templates/documents.html
Normal file
File diff suppressed because it is too large
Load Diff
1077
templates/files.html
Normal file
1077
templates/files.html
Normal file
File diff suppressed because it is too large
Load Diff
1150
templates/financial.html
Normal file
1150
templates/financial.html
Normal file
File diff suppressed because it is too large
Load Diff
584
templates/import.html
Normal file
584
templates/import.html
Normal file
@@ -0,0 +1,584 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Data Import - Delphi Database{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2><i class="bi bi-upload"></i> Data Import</h2>
|
||||
<div>
|
||||
<button class="btn btn-info" id="refreshStatusBtn">
|
||||
<i class="bi bi-arrow-clockwise"></i> Refresh Status
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Status Panel -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-info-circle"></i> Current Database Status</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="importStatus">
|
||||
<div class="text-center">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-2">Loading import status...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CSV File Upload Panel -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-file-earmark-arrow-up"></i> Upload CSV Files</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="importForm" enctype="multipart/form-data">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="fileType" class="form-label">Data Type *</label>
|
||||
<select class="form-select" id="fileType" name="fileType" required>
|
||||
<option value="">Select data type...</option>
|
||||
</select>
|
||||
<div class="form-text" id="fileTypeDescription"></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="csvFile" class="form-label">CSV File *</label>
|
||||
<input type="file" class="form-control" id="csvFile" name="csvFile" accept=".csv" required>
|
||||
<div class="form-text">Select the CSV file to import</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label"> </label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="replaceExisting" name="replaceExisting">
|
||||
<label class="form-check-label" for="replaceExisting">
|
||||
Replace existing data
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-secondary" id="validateBtn">
|
||||
<i class="bi bi-check-circle"></i> Validate File
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" id="importBtn">
|
||||
<i class="bi bi-upload"></i> Import Data
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Validation Results Panel -->
|
||||
<div class="card mb-4" id="validationPanel" style="display: none;">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-clipboard-check"></i> File Validation Results</h5>
|
||||
</div>
|
||||
<div class="card-body" id="validationResults">
|
||||
<!-- Validation results will be shown here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Progress Panel -->
|
||||
<div class="card mb-4" id="progressPanel" style="display: none;">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-hourglass-split"></i> Import Progress</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated"
|
||||
role="progressbar" style="width: 0%" id="progressBar">0%</div>
|
||||
</div>
|
||||
<div id="progressStatus">Ready to import...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Results Panel -->
|
||||
<div class="card mb-4" id="resultsPanel" style="display: none;">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-check-circle-fill"></i> Import Results</h5>
|
||||
</div>
|
||||
<div class="card-body" id="importResults">
|
||||
<!-- Import results will be shown here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Management Panel -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-database"></i> Data Management</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6>Clear Table Data</h6>
|
||||
<p class="text-muted small">Remove all records from a specific table (cannot be undone)</p>
|
||||
<div class="input-group">
|
||||
<select class="form-select" id="clearTableType">
|
||||
<option value="">Select table to clear...</option>
|
||||
</select>
|
||||
<button class="btn btn-danger" id="clearTableBtn">
|
||||
<i class="bi bi-trash"></i> Clear Table
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6>Quick Actions</h6>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-outline-warning" id="backupBtn">
|
||||
<i class="bi bi-download"></i> Download Backup
|
||||
</button>
|
||||
<button class="btn btn-outline-info" id="viewLogsBtn">
|
||||
<i class="bi bi-journal-text"></i> View Import Logs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Import functionality
|
||||
let availableFiles = {};
|
||||
let importInProgress = false;
|
||||
|
||||
// Helper function for authenticated API calls
|
||||
function getAuthHeaders() {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
return {
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check authentication first
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (!token) {
|
||||
window.location.href = '/login';
|
||||
return;
|
||||
}
|
||||
|
||||
loadAvailableFiles();
|
||||
loadImportStatus();
|
||||
setupEventListeners();
|
||||
});
|
||||
|
||||
function setupEventListeners() {
|
||||
// Form submission
|
||||
document.getElementById('importForm').addEventListener('submit', handleImport);
|
||||
|
||||
// Validation button
|
||||
document.getElementById('validateBtn').addEventListener('click', validateFile);
|
||||
|
||||
// File type selection
|
||||
document.getElementById('fileType').addEventListener('change', updateFileTypeDescription);
|
||||
|
||||
// Refresh status
|
||||
document.getElementById('refreshStatusBtn').addEventListener('click', loadImportStatus);
|
||||
|
||||
// Clear table
|
||||
document.getElementById('clearTableBtn').addEventListener('click', clearTable);
|
||||
|
||||
// Other buttons
|
||||
document.getElementById('backupBtn').addEventListener('click', downloadBackup);
|
||||
document.getElementById('viewLogsBtn').addEventListener('click', viewLogs);
|
||||
}
|
||||
|
||||
async function loadAvailableFiles() {
|
||||
try {
|
||||
const response = await fetch('/api/import/available-files', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Failed to load available files');
|
||||
|
||||
const data = await response.json();
|
||||
availableFiles = data;
|
||||
|
||||
// Populate file type dropdown
|
||||
const fileTypeSelect = document.getElementById('fileType');
|
||||
const clearTableSelect = document.getElementById('clearTableType');
|
||||
|
||||
fileTypeSelect.innerHTML = '<option value="">Select data type...</option>';
|
||||
clearTableSelect.innerHTML = '<option value="">Select table to clear...</option>';
|
||||
|
||||
data.available_files.forEach(fileType => {
|
||||
const description = data.descriptions[fileType] || fileType;
|
||||
|
||||
const option1 = document.createElement('option');
|
||||
option1.value = fileType;
|
||||
option1.textContent = `${fileType} - ${description}`;
|
||||
fileTypeSelect.appendChild(option1);
|
||||
|
||||
const option2 = document.createElement('option');
|
||||
option2.value = fileType;
|
||||
option2.textContent = `${fileType} - ${description}`;
|
||||
clearTableSelect.appendChild(option2);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading available files:', error);
|
||||
showAlert('Error loading available file types: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadImportStatus() {
|
||||
try {
|
||||
const response = await fetch('/api/import/status', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Failed to load import status');
|
||||
|
||||
const status = await response.json();
|
||||
displayImportStatus(status);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading import status:', error);
|
||||
document.getElementById('importStatus').innerHTML =
|
||||
'<div class="alert alert-danger">Error loading import status: ' + error.message + '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function displayImportStatus(status) {
|
||||
const container = document.getElementById('importStatus');
|
||||
|
||||
let html = '<div class="row">';
|
||||
let totalRecords = 0;
|
||||
|
||||
Object.entries(status).forEach(([fileType, info], index) => {
|
||||
totalRecords += info.record_count || 0;
|
||||
|
||||
const statusClass = info.error ? 'danger' : (info.record_count > 0 ? 'success' : 'secondary');
|
||||
const statusIcon = info.error ? 'exclamation-triangle' : (info.record_count > 0 ? 'check-circle' : 'circle');
|
||||
|
||||
if (index % 3 === 0 && index > 0) {
|
||||
html += '</div><div class="row mt-2">';
|
||||
}
|
||||
|
||||
html += `
|
||||
<div class="col-md-4">
|
||||
<div class="card border-${statusClass}">
|
||||
<div class="card-body p-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<small class="fw-bold">${fileType}</small><br>
|
||||
<small class="text-muted">${info.table_name}</small>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<i class="bi bi-${statusIcon} text-${statusClass}"></i><br>
|
||||
<small class="fw-bold">${info.record_count || 0}</small>
|
||||
</div>
|
||||
</div>
|
||||
${info.error ? `<div class="text-danger small mt-1">${info.error}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
html += `<div class="mt-3 text-center">
|
||||
<strong>Total Records: ${totalRecords.toLocaleString()}</strong>
|
||||
</div>`;
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function updateFileTypeDescription() {
|
||||
const fileType = document.getElementById('fileType').value;
|
||||
const description = availableFiles.descriptions && availableFiles.descriptions[fileType];
|
||||
document.getElementById('fileTypeDescription').textContent = description || '';
|
||||
}
|
||||
|
||||
async function validateFile() {
|
||||
const fileType = document.getElementById('fileType').value;
|
||||
const fileInput = document.getElementById('csvFile');
|
||||
|
||||
if (!fileType || !fileInput.files[0]) {
|
||||
showAlert('Please select both file type and CSV file', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', fileInput.files[0]);
|
||||
|
||||
try {
|
||||
showProgress(true, 'Validating file...');
|
||||
|
||||
const response = await fetch(`/api/import/validate/${fileType}`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Validation failed');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
displayValidationResults(result);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Validation error:', error);
|
||||
showAlert('Validation failed: ' + error.message, 'danger');
|
||||
} finally {
|
||||
showProgress(false);
|
||||
}
|
||||
}
|
||||
|
||||
function displayValidationResults(result) {
|
||||
const panel = document.getElementById('validationPanel');
|
||||
const container = document.getElementById('validationResults');
|
||||
|
||||
let html = '';
|
||||
|
||||
// Overall status
|
||||
const statusClass = result.valid ? 'success' : 'danger';
|
||||
const statusIcon = result.valid ? 'check-circle-fill' : 'exclamation-triangle-fill';
|
||||
|
||||
html += `
|
||||
<div class="alert alert-${statusClass}">
|
||||
<i class="bi bi-${statusIcon}"></i>
|
||||
File validation ${result.valid ? 'passed' : 'failed'}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Headers validation
|
||||
html += '<h6>Column Headers</h6>';
|
||||
if (result.headers.missing.length > 0) {
|
||||
html += `<div class="alert alert-warning">
|
||||
<strong>Missing columns:</strong> ${result.headers.missing.join(', ')}
|
||||
</div>`;
|
||||
}
|
||||
if (result.headers.extra.length > 0) {
|
||||
html += `<div class="alert alert-info">
|
||||
<strong>Extra columns:</strong> ${result.headers.extra.join(', ')}
|
||||
</div>`;
|
||||
}
|
||||
if (result.headers.missing.length === 0 && result.headers.extra.length === 0) {
|
||||
html += '<div class="alert alert-success">All expected columns found</div>';
|
||||
}
|
||||
|
||||
// Sample data
|
||||
if (result.sample_data && result.sample_data.length > 0) {
|
||||
html += '<h6>Sample Data (First 10 rows)</h6>';
|
||||
html += '<div class="table-responsive">';
|
||||
html += '<table class="table table-sm table-striped">';
|
||||
html += '<thead><tr>';
|
||||
Object.keys(result.sample_data[0]).forEach(header => {
|
||||
html += `<th>${header}</th>`;
|
||||
});
|
||||
html += '</tr></thead><tbody>';
|
||||
|
||||
result.sample_data.forEach(row => {
|
||||
html += '<tr>';
|
||||
Object.values(row).forEach(value => {
|
||||
html += `<td class="small">${value || ''}</td>`;
|
||||
});
|
||||
html += '</tr>';
|
||||
});
|
||||
html += '</tbody></table></div>';
|
||||
}
|
||||
|
||||
// Validation errors
|
||||
if (result.validation_errors && result.validation_errors.length > 0) {
|
||||
html += '<h6>Data Issues Found</h6>';
|
||||
html += '<div class="alert alert-warning">';
|
||||
result.validation_errors.forEach(error => {
|
||||
html += `<div>Row ${error.row}, Field "${error.field}": ${error.error}</div>`;
|
||||
});
|
||||
if (result.total_errors > result.validation_errors.length) {
|
||||
html += `<div class="mt-2"><strong>... and ${result.total_errors - result.validation_errors.length} more errors</strong></div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
panel.style.display = 'block';
|
||||
}
|
||||
|
||||
async function handleImport(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (importInProgress) {
|
||||
showAlert('Import already in progress', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
const fileType = document.getElementById('fileType').value;
|
||||
const fileInput = document.getElementById('csvFile');
|
||||
const replaceExisting = document.getElementById('replaceExisting').checked;
|
||||
|
||||
if (!fileType || !fileInput.files[0]) {
|
||||
showAlert('Please select both file type and CSV file', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
importInProgress = true;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', fileInput.files[0]);
|
||||
formData.append('replace_existing', replaceExisting);
|
||||
|
||||
try {
|
||||
showProgress(true, 'Importing data...');
|
||||
|
||||
const response = await fetch(`/api/import/upload/${fileType}`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Import failed');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
displayImportResults(result);
|
||||
|
||||
// Refresh status after successful import
|
||||
await loadImportStatus();
|
||||
|
||||
// Reset form
|
||||
document.getElementById('importForm').reset();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Import error:', error);
|
||||
showAlert('Import failed: ' + error.message, 'danger');
|
||||
} finally {
|
||||
importInProgress = false;
|
||||
showProgress(false);
|
||||
}
|
||||
}
|
||||
|
||||
function displayImportResults(result) {
|
||||
const panel = document.getElementById('resultsPanel');
|
||||
const container = document.getElementById('importResults');
|
||||
|
||||
const successClass = result.errors && result.errors.length > 0 ? 'warning' : 'success';
|
||||
|
||||
let html = `
|
||||
<div class="alert alert-${successClass}">
|
||||
<h6><i class="bi bi-check-circle"></i> Import Completed</h6>
|
||||
<p class="mb-0">
|
||||
<strong>File Type:</strong> ${result.file_type}<br>
|
||||
<strong>Records Imported:</strong> ${result.imported_count}<br>
|
||||
<strong>Errors:</strong> ${result.total_errors || 0}
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (result.errors && result.errors.length > 0) {
|
||||
html += '<h6>Import Errors</h6>';
|
||||
html += '<div class="alert alert-danger">';
|
||||
result.errors.forEach(error => {
|
||||
html += `<div><strong>Row ${error.row}:</strong> ${error.error}</div>`;
|
||||
});
|
||||
if (result.total_errors > result.errors.length) {
|
||||
html += `<div class="mt-2"><strong>... and ${result.total_errors - result.errors.length} more errors</strong></div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
panel.style.display = 'block';
|
||||
}
|
||||
|
||||
function showProgress(show, message = '') {
|
||||
const panel = document.getElementById('progressPanel');
|
||||
const status = document.getElementById('progressStatus');
|
||||
const bar = document.getElementById('progressBar');
|
||||
|
||||
if (show) {
|
||||
status.textContent = message;
|
||||
bar.style.width = '100%';
|
||||
bar.textContent = 'Processing...';
|
||||
panel.style.display = 'block';
|
||||
} else {
|
||||
panel.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
async function clearTable() {
|
||||
const fileType = document.getElementById('clearTableType').value;
|
||||
|
||||
if (!fileType) {
|
||||
showAlert('Please select a table to clear', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`Are you sure you want to clear all data from ${fileType}? This action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/import/clear/${fileType}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Clear operation failed');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
showAlert(`Successfully cleared ${result.deleted_count} records from ${result.table_name}`, 'success');
|
||||
|
||||
// Refresh status
|
||||
await loadImportStatus();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Clear table error:', error);
|
||||
showAlert('Clear operation failed: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
function downloadBackup() {
|
||||
showAlert('Backup functionality coming soon', 'info');
|
||||
}
|
||||
|
||||
function viewLogs() {
|
||||
showAlert('Import logs functionality coming soon', 'info');
|
||||
}
|
||||
|
||||
function showAlert(message, type = 'info') {
|
||||
// Create and show Bootstrap alert
|
||||
const alertDiv = document.createElement('div');
|
||||
alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
|
||||
alertDiv.style.top = '20px';
|
||||
alertDiv.style.right = '20px';
|
||||
alertDiv.style.zIndex = '9999';
|
||||
alertDiv.innerHTML = `
|
||||
${message}
|
||||
<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"></button>
|
||||
`;
|
||||
|
||||
document.body.appendChild(alertDiv);
|
||||
|
||||
// Auto-dismiss after 5 seconds
|
||||
setTimeout(() => {
|
||||
if (alertDiv.parentNode) {
|
||||
alertDiv.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
181
templates/login.html
Normal file
181
templates/login.html
Normal file
@@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - Delphi Consulting Group Database System</title>
|
||||
|
||||
<!-- Bootstrap 5.3 CDN -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link href="/static/css/main.css" rel="stylesheet">
|
||||
<link href="/static/css/themes.css" rel="stylesheet">
|
||||
<link href="/static/css/components.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="login-page">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card login-card shadow-sm mt-5">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center mb-4">
|
||||
<img src="/static/images/delphi-logo.webp" alt="Delphi Consulting Group" height="60" class="mb-3">
|
||||
<h2 class="h4 mb-3">Delphi Database System</h2>
|
||||
<p class="text-muted">Sign in to access the system</p>
|
||||
</div>
|
||||
|
||||
<form id="loginForm" class="login-form" novalidate>
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-person"></i></span>
|
||||
<input type="text" class="form-control" id="username" name="username" required>
|
||||
</div>
|
||||
<div class="invalid-feedback">Please enter your username.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
</div>
|
||||
<div class="invalid-feedback">Please enter your password.</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary" id="loginBtn">
|
||||
<i class="bi bi-box-arrow-in-right"></i> Sign In
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<small class="text-muted">
|
||||
Default credentials: admin / admin123
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Status -->
|
||||
<div class="card login-status mt-3">
|
||||
<div class="card-body text-center py-2">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-shield-check text-success"></i>
|
||||
Secure connection established
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check if already logged in
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (token) {
|
||||
window.location.href = '/customers';
|
||||
return;
|
||||
}
|
||||
|
||||
const loginForm = document.getElementById('loginForm');
|
||||
const loginBtn = document.getElementById('loginBtn');
|
||||
|
||||
loginForm.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form
|
||||
if (!loginForm.checkValidity()) {
|
||||
e.stopPropagation();
|
||||
loginForm.classList.add('was-validated');
|
||||
return;
|
||||
}
|
||||
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
// Show loading state
|
||||
const originalText = loginBtn.innerHTML;
|
||||
loginBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Signing in...';
|
||||
loginBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: username,
|
||||
password: password
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || 'Login failed');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Store token
|
||||
localStorage.setItem('auth_token', data.access_token);
|
||||
|
||||
// Show success message
|
||||
showAlert('Login successful! Redirecting...', 'success');
|
||||
|
||||
// Redirect to customers page
|
||||
setTimeout(() => {
|
||||
window.location.href = '/customers';
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
showAlert('Login failed: ' + error.message, 'danger');
|
||||
} finally {
|
||||
// Restore button
|
||||
loginBtn.innerHTML = originalText;
|
||||
loginBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Focus username field
|
||||
document.getElementById('username').focus();
|
||||
});
|
||||
|
||||
function showAlert(message, type = 'info') {
|
||||
// Remove existing alerts
|
||||
const existingAlerts = document.querySelectorAll('.alert');
|
||||
existingAlerts.forEach(alert => alert.remove());
|
||||
|
||||
// Create new alert
|
||||
const alertDiv = document.createElement('div');
|
||||
alertDiv.className = `alert alert-${type} alert-dismissible fade show mt-3`;
|
||||
alertDiv.innerHTML = `
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
|
||||
// Insert before the form
|
||||
const form = document.getElementById('loginForm');
|
||||
form.parentNode.insertBefore(alertDiv, form);
|
||||
|
||||
// Auto-dismiss success messages
|
||||
if (type === 'success') {
|
||||
setTimeout(() => {
|
||||
if (alertDiv.parentNode) {
|
||||
alertDiv.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1205
templates/search.html
Normal file
1205
templates/search.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user