1077 lines
45 KiB
HTML
1077 lines
45 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}File Cabinet - 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-folder2-open"></i> File Cabinet</h2>
|
|
<div>
|
|
<button class="btn btn-success" id="addFileBtn">
|
|
<i class="bi bi-plus-circle"></i> New File (Ctrl+N)
|
|
</button>
|
|
<button class="btn btn-info" id="statsBtn">
|
|
<i class="bi bi-graph-up"></i> Statistics
|
|
</button>
|
|
<button class="btn btn-secondary" id="advancedSearchBtn">
|
|
<i class="bi bi-search"></i> Advanced Search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filter Panel -->
|
|
<div class="card mb-3">
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-3">
|
|
<label for="searchInput" class="form-label">Search Files</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="File #, Client, Matter...">
|
|
<button class="btn btn-outline-secondary" type="button" id="searchBtn">
|
|
<i class="bi bi-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="statusFilter" class="form-label">Status</label>
|
|
<select class="form-select" id="statusFilter">
|
|
<option value="">All Statuses</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="typeFilter" class="form-label">File Type</label>
|
|
<select class="form-select" id="typeFilter">
|
|
<option value="">All Types</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="employeeFilter" class="form-label">Attorney</label>
|
|
<select class="form-select" id="employeeFilter">
|
|
<option value="">All Attorneys</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label"> </label>
|
|
<div class="btn-group w-100" role="group">
|
|
<button class="btn btn-outline-primary" id="clearFiltersBtn">
|
|
<i class="bi bi-x-circle"></i> Clear
|
|
</button>
|
|
<button class="btn btn-outline-secondary" id="refreshBtn">
|
|
<i class="bi bi-arrow-clockwise"></i> Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File List -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover" id="filesTable">
|
|
<thead>
|
|
<tr>
|
|
<th data-sort="file_no">File #</th>
|
|
<th data-sort="client_name">Client</th>
|
|
<th data-sort="regarding">Matter</th>
|
|
<th data-sort="file_type">Type</th>
|
|
<th data-sort="status">Status</th>
|
|
<th data-sort="employee">Attorney</th>
|
|
<th data-sort="opened">Opened</th>
|
|
<th data-sort="amount_owing">Balance</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="filesTableBody">
|
|
<!-- File rows will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav aria-label="File pagination">
|
|
<ul class="pagination justify-content-center" id="pagination">
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Modal -->
|
|
<div class="modal fade" id="fileModal" tabindex="-1" aria-labelledby="fileModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="fileModalLabel">File Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="fileForm">
|
|
<div class="row g-3">
|
|
<!-- Basic Information -->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">Basic Information</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="fileNo" class="form-label">File Number *</label>
|
|
<input type="text" class="form-control" id="fileNo" name="file_no" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="clientId" class="form-label">Client *</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="clientId" name="id" required readonly>
|
|
<button class="btn btn-outline-secondary" type="button" id="selectClientBtn">
|
|
<i class="bi bi-search"></i> Select
|
|
</button>
|
|
</div>
|
|
<div class="form-text" id="clientName">Selected client will appear here</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="regarding" class="form-label">Matter Description</label>
|
|
<textarea class="form-control" id="regarding" name="regarding" rows="3" placeholder="Describe the legal matter..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case Details -->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">Case Details</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="fileType" class="form-label">File Type *</label>
|
|
<select class="form-select" id="fileType" name="file_type" required>
|
|
<option value="">Select type...</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="status" class="form-label">Status *</label>
|
|
<select class="form-select" id="status" name="status" required>
|
|
<option value="">Select status...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-md-6">
|
|
<label for="employeeNum" class="form-label">Assigned Attorney *</label>
|
|
<select class="form-select" id="employeeNum" name="empl_num" required>
|
|
<option value="">Select attorney...</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="ratePerHour" class="form-label">Hourly Rate</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">$</span>
|
|
<input type="number" class="form-control" id="ratePerHour" name="rate_per_hour" step="0.01" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-md-6">
|
|
<label for="opened" class="form-label">Date Opened *</label>
|
|
<input type="date" class="form-control" id="opened" name="opened" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="closed" class="form-label">Date Closed</label>
|
|
<input type="date" class="form-control" id="closed" name="closed">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Information -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">Additional Information</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="opposing" class="form-label">Opposing Counsel</label>
|
|
<input type="text" class="form-control" id="opposing" name="opposing" placeholder="Opposing attorney or firm">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="footerCode" class="form-label">Statement Footer Code</label>
|
|
<input type="text" class="form-control" id="footerCode" name="footer_code" placeholder="Footer code for billing statements">
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<label for="memo" class="form-label">Notes</label>
|
|
<textarea class="form-control" id="memo" name="memo" rows="4" placeholder="Internal notes and comments..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Financial Summary (View only) -->
|
|
<div class="col-12" id="financialSummaryCard" style="display: none;">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">Financial Summary</h6>
|
|
<button type="button" class="btn btn-sm btn-outline-info" id="viewFullFinancialBtn">
|
|
<i class="bi bi-calculator"></i> View Details
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row" id="financialSummary">
|
|
<!-- Financial data will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel (Esc)</button>
|
|
<div class="btn-group" id="fileActions" style="display: none;">
|
|
<button type="button" class="btn btn-warning" id="closeFileBtn">
|
|
<i class="bi bi-lock"></i> Close File
|
|
</button>
|
|
<button type="button" class="btn btn-success" id="reopenFileBtn" style="display: none;">
|
|
<i class="bi bi-unlock"></i> Reopen File
|
|
</button>
|
|
<button type="button" class="btn btn-danger" id="deleteFileBtn">
|
|
<i class="bi bi-trash"></i> Delete (Del)
|
|
</button>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" id="saveFileBtn">
|
|
<i class="bi bi-check-circle"></i> Save (Ctrl+S)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Search Modal -->
|
|
<div class="modal fade" id="advancedSearchModal" tabindex="-1" aria-labelledby="advancedSearchModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="advancedSearchModalLabel">Advanced File Search</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="advancedSearchForm">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label for="advFileNo" class="form-label">File Number</label>
|
|
<input type="text" class="form-control" id="advFileNo" placeholder="Partial file number">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="advClientName" class="form-label">Client Name</label>
|
|
<input type="text" class="form-control" id="advClientName" placeholder="First or last name">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="advRegarding" class="form-label">Matter Description</label>
|
|
<input type="text" class="form-control" id="advRegarding" placeholder="Keywords in matter description">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="advFileType" class="form-label">File Type</label>
|
|
<select class="form-select" id="advFileType">
|
|
<option value="">All Types</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="advStatus" class="form-label">Status</label>
|
|
<select class="form-select" id="advStatus">
|
|
<option value="">All Statuses</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="advEmployee" class="form-label">Attorney</label>
|
|
<select class="form-select" id="advEmployee">
|
|
<option value="">All Attorneys</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="advOpenedAfter" class="form-label">Opened After</label>
|
|
<input type="date" class="form-control" id="advOpenedAfter">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="advOpenedBefore" class="form-label">Opened Before</label>
|
|
<input type="date" class="form-control" id="advOpenedBefore">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-outline-secondary" id="clearAdvancedSearchBtn">Clear</button>
|
|
<button type="button" class="btn btn-primary" id="performAdvancedSearchBtn">Search</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Client Selection Modal -->
|
|
<div class="modal fade" id="clientSelectionModal" tabindex="-1" aria-labelledby="clientSelectionModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="clientSelectionModalLabel">Select Client</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control" id="clientSearchInput" placeholder="Search clients by name or ID...">
|
|
</div>
|
|
<div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>City, State</th>
|
|
<th>Group</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="clientSelectionTableBody">
|
|
<!-- Client options will be loaded here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Modal -->
|
|
<div class="modal fade" id="statsModal" tabindex="-1" aria-labelledby="statsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="statsModalLabel">File Cabinet 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>
|
|
// File management functionality
|
|
let currentPage = 0;
|
|
let currentFilters = {};
|
|
let isEditing = false;
|
|
let editingFileNo = null;
|
|
let lookupData = {
|
|
fileTypes: [],
|
|
fileStatuses: [],
|
|
employees: []
|
|
};
|
|
|
|
// 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;
|
|
}
|
|
|
|
loadLookupData();
|
|
loadFiles();
|
|
setupEventListeners();
|
|
initializeDataTable('filesTable');
|
|
});
|
|
|
|
function setupEventListeners() {
|
|
// Search and filters
|
|
document.getElementById('searchBtn').addEventListener('click', performSearch);
|
|
document.getElementById('searchInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') performSearch();
|
|
});
|
|
|
|
// Filter changes
|
|
['statusFilter', 'typeFilter', 'employeeFilter'].forEach(id => {
|
|
document.getElementById(id).addEventListener('change', applyFilters);
|
|
});
|
|
|
|
// Modal buttons
|
|
document.getElementById('addFileBtn').addEventListener('click', showAddFileModal);
|
|
document.getElementById('saveFileBtn').addEventListener('click', saveFile);
|
|
document.getElementById('deleteFileBtn').addEventListener('click', deleteFile);
|
|
document.getElementById('closeFileBtn').addEventListener('click', closeFile);
|
|
document.getElementById('reopenFileBtn').addEventListener('click', reopenFile);
|
|
|
|
// Other buttons
|
|
document.getElementById('statsBtn').addEventListener('click', showStats);
|
|
document.getElementById('advancedSearchBtn').addEventListener('click', showAdvancedSearchModal);
|
|
document.getElementById('clearFiltersBtn').addEventListener('click', clearFilters);
|
|
document.getElementById('refreshBtn').addEventListener('click', () => loadFiles());
|
|
|
|
// Client selection
|
|
document.getElementById('selectClientBtn').addEventListener('click', showClientSelectionModal);
|
|
document.getElementById('clientSearchInput').addEventListener('input', searchClients);
|
|
|
|
// Advanced search
|
|
document.getElementById('performAdvancedSearchBtn').addEventListener('click', performAdvancedSearch);
|
|
document.getElementById('clearAdvancedSearchBtn').addEventListener('click', clearAdvancedSearch);
|
|
|
|
// Form validation
|
|
document.getElementById('fileNo').addEventListener('blur', validateFileNumber);
|
|
}
|
|
|
|
async function loadLookupData() {
|
|
try {
|
|
// Load all lookup data in parallel
|
|
const [fileTypesRes, statusesRes, employeesRes] = await Promise.all([
|
|
fetch('/api/files/lookups/file-types', { headers: getAuthHeaders() }),
|
|
fetch('/api/files/lookups/file-statuses', { headers: getAuthHeaders() }),
|
|
fetch('/api/files/lookups/employees', { headers: getAuthHeaders() })
|
|
]);
|
|
|
|
if (fileTypesRes.ok) {
|
|
lookupData.fileTypes = await fileTypesRes.json();
|
|
populateSelect('fileType', lookupData.fileTypes, 'code', 'description');
|
|
populateSelect('typeFilter', lookupData.fileTypes, 'code', 'description');
|
|
populateSelect('advFileType', lookupData.fileTypes, 'code', 'description');
|
|
}
|
|
|
|
if (statusesRes.ok) {
|
|
lookupData.fileStatuses = await statusesRes.json();
|
|
populateSelect('status', lookupData.fileStatuses, 'code', 'description');
|
|
populateSelect('statusFilter', lookupData.fileStatuses, 'code', 'description');
|
|
populateSelect('advStatus', lookupData.fileStatuses, 'code', 'description');
|
|
}
|
|
|
|
if (employeesRes.ok) {
|
|
lookupData.employees = await employeesRes.json();
|
|
populateSelect('employeeNum', lookupData.employees, 'code', 'name');
|
|
populateSelect('employeeFilter', lookupData.employees, 'code', 'name');
|
|
populateSelect('advEmployee', lookupData.employees, 'code', 'name');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error loading lookup data:', error);
|
|
showAlert('Error loading form data: ' + error.message, 'warning');
|
|
}
|
|
}
|
|
|
|
function populateSelect(selectId, data, valueField, textField) {
|
|
const select = document.getElementById(selectId);
|
|
if (!select) return;
|
|
|
|
// Keep existing first option if it exists
|
|
const firstOption = select.children[0];
|
|
select.innerHTML = '';
|
|
if (firstOption) {
|
|
select.appendChild(firstOption);
|
|
}
|
|
|
|
data.forEach(item => {
|
|
const option = document.createElement('option');
|
|
option.value = item[valueField];
|
|
option.textContent = `${item[valueField]} - ${item[textField]}`;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
|
|
async function loadFiles(page = 0, filters = {}) {
|
|
try {
|
|
const params = new URLSearchParams({
|
|
skip: page * 50,
|
|
limit: 50,
|
|
...filters
|
|
});
|
|
|
|
const response = await fetch(`/api/files/?${params}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to load files');
|
|
|
|
const files = await response.json();
|
|
displayFiles(files);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading files:', error);
|
|
showAlert('Error loading files: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function displayFiles(files) {
|
|
const tbody = document.getElementById('filesTableBody');
|
|
tbody.innerHTML = '';
|
|
|
|
if (files.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted">No files found</td></tr>';
|
|
return;
|
|
}
|
|
|
|
files.forEach(file => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td><strong>${file.file_no}</strong></td>
|
|
<td>
|
|
<div class="client-info">
|
|
<div>${file.client_name || 'Unknown Client'}</div>
|
|
<small class="text-muted">${file.client_id}</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="matter-info">
|
|
${file.regarding ? `<div>${file.regarding.substring(0, 50)}${file.regarding.length > 50 ? '...' : ''}</div>` : '<em class="text-muted">No description</em>'}
|
|
</div>
|
|
</td>
|
|
<td>${file.file_type}</td>
|
|
<td><span class="badge bg-${getStatusColor(file.status)}">${file.status}</span></td>
|
|
<td>${file.empl_num}</td>
|
|
<td>${formatDate(file.opened)}</td>
|
|
<td class="text-end">
|
|
<strong class="${file.amount_owing > 0 ? 'text-success' : 'text-muted'}">
|
|
${formatCurrency(file.amount_owing)}
|
|
</strong>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-sm btn-primary" onclick="editFile('${file.file_no}')">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-info" onclick="viewFile('${file.file_no}')">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function getStatusColor(status) {
|
|
switch (status.toUpperCase()) {
|
|
case 'ACTIVE': return 'success';
|
|
case 'CLOSED': return 'secondary';
|
|
case 'INACTIVE': return 'warning';
|
|
case 'FOLLOW UP': return 'info';
|
|
default: return 'secondary';
|
|
}
|
|
}
|
|
|
|
function performSearch() {
|
|
const search = document.getElementById('searchInput').value;
|
|
currentFilters = { ...currentFilters, search };
|
|
currentPage = 0;
|
|
loadFiles(currentPage, currentFilters);
|
|
}
|
|
|
|
function applyFilters() {
|
|
const statusFilter = document.getElementById('statusFilter').value;
|
|
const typeFilter = document.getElementById('typeFilter').value;
|
|
const employeeFilter = document.getElementById('employeeFilter').value;
|
|
|
|
currentFilters = {
|
|
...currentFilters,
|
|
status_filter: statusFilter,
|
|
// Add other filters as needed
|
|
};
|
|
|
|
currentPage = 0;
|
|
loadFiles(currentPage, currentFilters);
|
|
}
|
|
|
|
function clearFilters() {
|
|
document.getElementById('searchInput').value = '';
|
|
document.getElementById('statusFilter').value = '';
|
|
document.getElementById('typeFilter').value = '';
|
|
document.getElementById('employeeFilter').value = '';
|
|
|
|
currentFilters = {};
|
|
currentPage = 0;
|
|
loadFiles(currentPage, currentFilters);
|
|
}
|
|
|
|
function showAddFileModal() {
|
|
isEditing = false;
|
|
editingFileNo = null;
|
|
document.getElementById('fileModalLabel').textContent = 'Add New File';
|
|
document.getElementById('fileActions').style.display = 'none';
|
|
document.getElementById('financialSummaryCard').style.display = 'none';
|
|
clearFileForm();
|
|
|
|
// Set default date to today
|
|
document.getElementById('opened').value = new Date().toISOString().split('T')[0];
|
|
|
|
new bootstrap.Modal(document.getElementById('fileModal')).show();
|
|
}
|
|
|
|
async function editFile(fileNo) {
|
|
try {
|
|
const response = await fetch(`/api/files/${fileNo}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to load file');
|
|
|
|
const file = await response.json();
|
|
populateFileForm(file);
|
|
|
|
isEditing = true;
|
|
editingFileNo = fileNo;
|
|
document.getElementById('fileModalLabel').textContent = 'Edit File - ' + fileNo;
|
|
document.getElementById('fileActions').style.display = 'block';
|
|
document.getElementById('financialSummaryCard').style.display = 'block';
|
|
document.getElementById('fileNo').readOnly = true;
|
|
|
|
// Show/hide close/reopen buttons based on status
|
|
const isClosed = file.status === 'CLOSED' || file.closed;
|
|
document.getElementById('closeFileBtn').style.display = isClosed ? 'none' : 'inline-block';
|
|
document.getElementById('reopenFileBtn').style.display = isClosed ? 'inline-block' : 'none';
|
|
|
|
// Load financial summary
|
|
loadFinancialSummary(fileNo);
|
|
|
|
new bootstrap.Modal(document.getElementById('fileModal')).show();
|
|
|
|
} catch (error) {
|
|
console.error('Error loading file:', error);
|
|
showAlert('Error loading file: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function viewFile(fileNo) {
|
|
editFile(fileNo); // For now, same as edit - could be made read-only
|
|
}
|
|
|
|
function populateFileForm(file) {
|
|
const form = document.getElementById('fileForm');
|
|
|
|
// Populate basic fields
|
|
Object.keys(file).forEach(key => {
|
|
const input = form.querySelector(`[name="${key}"]`);
|
|
if (input && file[key] !== null && file[key] !== undefined) {
|
|
if (input.type === 'date') {
|
|
input.value = file[key];
|
|
} else {
|
|
input.value = file[key];
|
|
}
|
|
}
|
|
});
|
|
|
|
// Load client information
|
|
loadClientInfo(file.id);
|
|
}
|
|
|
|
async function loadClientInfo(clientId) {
|
|
try {
|
|
const response = await fetch(`/api/customers/${clientId}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const client = await response.json();
|
|
const name = `${client.first || ''} ${client.last}`.trim();
|
|
document.getElementById('clientName').textContent = `${name} (${client.city || ''}, ${client.abrev || ''})`;
|
|
} else {
|
|
document.getElementById('clientName').textContent = 'Client information not found';
|
|
}
|
|
} catch (error) {
|
|
document.getElementById('clientName').textContent = 'Error loading client information';
|
|
}
|
|
}
|
|
|
|
async function loadFinancialSummary(fileNo) {
|
|
try {
|
|
const response = await fetch(`/api/files/${fileNo}/financial-summary`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
displayFinancialSummary(data.financial_data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading financial summary:', error);
|
|
}
|
|
}
|
|
|
|
function displayFinancialSummary(financial) {
|
|
const container = document.getElementById('financialSummary');
|
|
container.innerHTML = `
|
|
<div class="col-md-3">
|
|
<div class="text-center">
|
|
<div class="h5 text-primary">${formatCurrency(financial.total_charges)}</div>
|
|
<div class="small text-muted">Total Charges</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="text-center">
|
|
<div class="h5 text-success">${formatCurrency(financial.amount_owing)}</div>
|
|
<div class="small text-muted">Amount Owing</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="text-center">
|
|
<div class="h5 text-info">${formatCurrency(financial.trust_balance)}</div>
|
|
<div class="small text-muted">Trust Balance</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="text-center">
|
|
<div class="h5 text-warning">${financial.hours_total.toFixed(2)} hrs</div>
|
|
<div class="small text-muted">Total Hours</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function clearFileForm() {
|
|
document.getElementById('fileForm').reset();
|
|
document.getElementById('fileNo').readOnly = false;
|
|
document.getElementById('clientName').textContent = 'Selected client will appear here';
|
|
}
|
|
|
|
async function saveFile() {
|
|
const form = document.getElementById('fileForm');
|
|
const formData = new FormData(form);
|
|
|
|
if (!form.checkValidity()) {
|
|
form.classList.add('was-validated');
|
|
return;
|
|
}
|
|
|
|
const fileData = {};
|
|
for (let [key, value] of formData.entries()) {
|
|
if (value.trim() !== '') {
|
|
// Convert numeric fields
|
|
if (['rate_per_hour'].includes(key)) {
|
|
fileData[key] = parseFloat(value);
|
|
} else {
|
|
fileData[key] = value.trim();
|
|
}
|
|
}
|
|
}
|
|
|
|
try {
|
|
const url = isEditing ? `/api/files/${editingFileNo}` : '/api/files/';
|
|
const method = isEditing ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: getAuthHeaders(),
|
|
body: JSON.stringify(fileData)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Failed to save file');
|
|
}
|
|
|
|
bootstrap.Modal.getInstance(document.getElementById('fileModal')).hide();
|
|
showAlert(isEditing ? 'File updated successfully' : 'File created successfully', 'success');
|
|
loadFiles(currentPage, currentFilters);
|
|
|
|
} catch (error) {
|
|
console.error('Error saving file:', error);
|
|
showAlert('Error saving file: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function deleteFile() {
|
|
if (!confirm('Are you sure you want to delete this file? This action cannot be undone and will also delete all related ledger entries, QDROs, and other associated data.')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/files/${editingFileNo}`, {
|
|
method: 'DELETE',
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to delete file');
|
|
|
|
bootstrap.Modal.getInstance(document.getElementById('fileModal')).hide();
|
|
showAlert('File deleted successfully', 'success');
|
|
loadFiles(currentPage, currentFilters);
|
|
|
|
} catch (error) {
|
|
console.error('Error deleting file:', error);
|
|
showAlert('Error deleting file: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function closeFile() {
|
|
const closeDate = prompt('Enter close date (YYYY-MM-DD) or leave blank for today:');
|
|
|
|
try {
|
|
const body = closeDate ? JSON.stringify({ close_date: closeDate }) : '';
|
|
const response = await fetch(`/api/files/${editingFileNo}/close`, {
|
|
method: 'POST',
|
|
headers: getAuthHeaders(),
|
|
body: body
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to close file');
|
|
|
|
showAlert('File closed successfully', 'success');
|
|
// Refresh the current file view
|
|
editFile(editingFileNo);
|
|
loadFiles(currentPage, currentFilters);
|
|
|
|
} catch (error) {
|
|
console.error('Error closing file:', error);
|
|
showAlert('Error closing file: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function reopenFile() {
|
|
try {
|
|
const response = await fetch(`/api/files/${editingFileNo}/reopen`, {
|
|
method: 'POST',
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to reopen file');
|
|
|
|
showAlert('File reopened successfully', 'success');
|
|
// Refresh the current file view
|
|
editFile(editingFileNo);
|
|
loadFiles(currentPage, currentFilters);
|
|
|
|
} catch (error) {
|
|
console.error('Error reopening file:', error);
|
|
showAlert('Error reopening file: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function showClientSelectionModal() {
|
|
searchClients(); // Load initial client list
|
|
new bootstrap.Modal(document.getElementById('clientSelectionModal')).show();
|
|
}
|
|
|
|
async function searchClients() {
|
|
const search = document.getElementById('clientSearchInput').value;
|
|
|
|
try {
|
|
const params = new URLSearchParams({ limit: 100 });
|
|
if (search) params.append('search', search);
|
|
|
|
const response = await fetch(`/api/customers/?${params}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to search clients');
|
|
|
|
const clients = await response.json();
|
|
displayClientOptions(clients);
|
|
|
|
} catch (error) {
|
|
console.error('Error searching clients:', error);
|
|
showAlert('Error searching clients: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function displayClientOptions(clients) {
|
|
const tbody = document.getElementById('clientSelectionTableBody');
|
|
tbody.innerHTML = '';
|
|
|
|
clients.forEach(client => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${client.id}</td>
|
|
<td>${client.first || ''} ${client.last}</td>
|
|
<td>${client.city || ''}, ${client.abrev || ''}</td>
|
|
<td>${client.group || ''}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-primary" onclick="selectClient('${client.id}', '${(client.first || '') + ' ' + client.last}', '${client.city || ''}, ${client.abrev || ''}')">
|
|
Select
|
|
</button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function selectClient(clientId, clientName, location) {
|
|
document.getElementById('clientId').value = clientId;
|
|
document.getElementById('clientName').textContent = `${clientName} (${location})`;
|
|
bootstrap.Modal.getInstance(document.getElementById('clientSelectionModal')).hide();
|
|
}
|
|
|
|
async function validateFileNumber() {
|
|
const fileNo = document.getElementById('fileNo').value;
|
|
if (!fileNo || isEditing) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/files/${fileNo}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.ok) {
|
|
showAlert('File number already exists', 'warning');
|
|
document.getElementById('fileNo').focus();
|
|
}
|
|
} catch (error) {
|
|
// File doesn't exist, which is good for new files
|
|
}
|
|
}
|
|
|
|
function showAdvancedSearchModal() {
|
|
new bootstrap.Modal(document.getElementById('advancedSearchModal')).show();
|
|
}
|
|
|
|
async function performAdvancedSearch() {
|
|
const form = document.getElementById('advancedSearchForm');
|
|
const formData = new FormData(form);
|
|
const params = new URLSearchParams();
|
|
|
|
for (let [key, value] of formData.entries()) {
|
|
if (value.trim()) {
|
|
// Map form field names to API parameter names
|
|
const apiKey = key.replace('adv', '').toLowerCase();
|
|
if (apiKey.includes('opened')) {
|
|
params.append(key.replace('adv', '').toLowerCase().replace('opened', 'opened_'), value);
|
|
} else {
|
|
params.append(apiKey.replace('filename', 'file_no').replace('clientname', 'client_name'), value);
|
|
}
|
|
}
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/files/search/advanced?${params}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Advanced search failed');
|
|
|
|
const results = await response.json();
|
|
displayFiles(results.files);
|
|
|
|
bootstrap.Modal.getInstance(document.getElementById('advancedSearchModal')).hide();
|
|
showAlert(`Found ${results.total} files`, 'info');
|
|
|
|
} catch (error) {
|
|
console.error('Advanced search error:', error);
|
|
showAlert('Advanced search failed: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function clearAdvancedSearch() {
|
|
document.getElementById('advancedSearchForm').reset();
|
|
}
|
|
|
|
async function showStats() {
|
|
try {
|
|
const response = await fetch('/api/files/stats/summary', {
|
|
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>File Overview</h6>
|
|
<ul class="list-unstyled">
|
|
<li><strong>Total Files:</strong> ${stats.total_files}</li>
|
|
<li><strong>Active Files:</strong> ${stats.active_files}</li>
|
|
<li><strong>Total Hours:</strong> ${stats.financial_summary.total_hours.toFixed(1)}</li>
|
|
<li><strong>Total Charges:</strong> ${formatCurrency(stats.financial_summary.total_charges)}</li>
|
|
</ul>
|
|
|
|
<h6>Status Breakdown</h6>
|
|
<ul class="list-unstyled">
|
|
${stats.status_breakdown.map(s => `<li><strong>${s.status}:</strong> ${s.count}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Financial Summary</h6>
|
|
<ul class="list-unstyled">
|
|
<li><strong>Total Owing:</strong> ${formatCurrency(stats.financial_summary.total_owing)}</li>
|
|
<li><strong>Trust Balance:</strong> ${formatCurrency(stats.financial_summary.total_trust)}</li>
|
|
</ul>
|
|
|
|
<h6>File Type Breakdown</h6>
|
|
<ul class="list-unstyled">
|
|
${stats.type_breakdown.map(t => `<li><strong>${t.type}:</strong> ${t.count}</li>`).join('')}
|
|
</ul>
|
|
|
|
<h6>Attorney Breakdown</h6>
|
|
<ul class="list-unstyled">
|
|
${stats.employee_breakdown.map(e => `<li><strong>${e.employee}:</strong> ${e.count}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
new bootstrap.Modal(document.getElementById('statsModal')).show();
|
|
}
|
|
|
|
// Utility functions
|
|
function formatDate(dateString) {
|
|
if (!dateString) return '';
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString();
|
|
}
|
|
|
|
function formatCurrency(amount) {
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: 'USD'
|
|
}).format(amount || 0);
|
|
}
|
|
|
|
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 %} |