1644 lines
84 KiB
HTML
1644 lines
84 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}File Cabinet - Delphi Database{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="space-y-6">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded-xl">
|
|
<i class="fa-regular fa-folder-open text-lg"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100">File Cabinet</h1>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button id="addFileBtn" class="flex items-center gap-2 px-4 py-2 bg-success-600 text-white hover:bg-success-700 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-circle-plus"></i>
|
|
<span>New File</span>
|
|
<kbd class="hidden sm:inline-block ml-2 px-1.5 py-0.5 bg-success-700 rounded text-xs">Ctrl+N</kbd>
|
|
</button>
|
|
<button id="statsBtn" class="flex items-center gap-2 px-4 py-2 bg-info-600 text-white hover:bg-info-700 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-chart-line"></i>
|
|
<span>Statistics</span>
|
|
</button>
|
|
<button id="advancedSearchBtn" class="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
<span>Advanced Search</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filter Panel -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
|
<i class="fa-solid fa-filter"></i>
|
|
<span>Search & Filters</span>
|
|
</h5>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
|
|
<div class="md:col-span-3">
|
|
<label for="searchInput" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Search Files</label>
|
|
<div class="relative">
|
|
<input type="text" id="searchInput" class="w-full pl-10 pr-4 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" placeholder="File #, Client, Matter...">
|
|
<i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 dark:text-neutral-500"></i>
|
|
<button id="searchBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-neutral-400 hover:text-primary-600 dark:text-neutral-500 dark:hover:text-primary-400 transition-colors">
|
|
<i class="fa-solid fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="statusFilter" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Status</label>
|
|
<select id="statusFilter" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
<option value="">All Statuses</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="typeFilter" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">File Type</label>
|
|
<select id="typeFilter" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
<option value="">All Types</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="employeeFilter" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Attorney</label>
|
|
<select id="employeeFilter" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200">
|
|
<option value="">All Attorneys</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button id="clearFiltersBtn" class="px-3 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-200 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors duration-200">
|
|
<i class="fa-regular fa-circle-xmark"></i> Clear
|
|
</button>
|
|
<button id="refreshBtn" class="px-3 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-200 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors duration-200">
|
|
<i class="fa-solid fa-rotate-right"></i> Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File List -->
|
|
<div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
|
|
<div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
|
|
<i class="fa-regular fa-folder-open"></i>
|
|
<span>File List</span>
|
|
</h5>
|
|
</div>
|
|
<div class="p-0">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm text-left text-neutral-900 dark:text-neutral-100" id="filesTable">
|
|
<thead class="bg-neutral-50 dark:bg-neutral-800/50">
|
|
<tr class="border-b border-neutral-200 dark:border-neutral-700">
|
|
<th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">File #</th>
|
|
<th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Client</th>
|
|
<th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Matter</th>
|
|
<th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Type</th>
|
|
<th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Status</th>
|
|
<th data-sort="text" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Attorney</th>
|
|
<th data-sort="date" class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Opened</th>
|
|
<th data-sort="number" class="px-4 py-3 text-right text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Balance</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="filesTableBody">
|
|
<!-- File rows will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav aria-label="File pagination" class="px-6 py-4 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50 flex items-center justify-center" id="pagination"></nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Modal -->
|
|
<div class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" id="fileModal" aria-hidden="true">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-6xl w-full max-h-screen overflow-hidden" role="dialog" aria-modal="true">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold" id="fileModalLabel">File Details</h5>
|
|
<button type="button" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="closeModal('fileModal')"><i class="fa-solid fa-xmark"></i></button>
|
|
</div>
|
|
<div class="px-6 py-4 overflow-y-auto max-h-[70vh]">
|
|
<form id="fileForm">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Basic Information -->
|
|
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
|
|
<div class="pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="mb-0 font-semibold">Basic Information</h6>
|
|
</div>
|
|
<div>
|
|
<div class="mb-3">
|
|
<label for="fileNo" class="block text-sm font-medium mb-1">File Number *</label>
|
|
<input type="text" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="fileNo" name="file_no" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="clientId" class="block text-sm font-medium mb-1">Client *</label>
|
|
<div class="flex gap-2">
|
|
<input type="text" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-neutral-50 dark:bg-neutral-900/30" id="clientId" name="id" required readonly>
|
|
<button class="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors" type="button" id="selectClientBtn"><i class="fa-solid fa-magnifying-glass"></i> Select</button>
|
|
</div>
|
|
<div class="text-sm text-neutral-500" id="clientName">Selected client will appear here</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="regarding" class="block text-sm font-medium mb-1">Matter Description</label>
|
|
<textarea class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="regarding" name="regarding" rows="3" placeholder="Describe the legal matter..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case Details -->
|
|
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
|
|
<div class="pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="mb-0 font-semibold">Case Details</h6>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="fileType" class="block text-sm font-medium mb-1">File Type *</label>
|
|
<select class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="fileType" name="file_type" required>
|
|
<option value="">Select type...</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="status" class="block text-sm font-medium mb-1">Status *</label>
|
|
<select class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="status" name="status" required>
|
|
<option value="">Select status...</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="employeeNum" class="block text-sm font-medium mb-1">Assigned Attorney *</label>
|
|
<select class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="employeeNum" name="empl_num" required>
|
|
<option value="">Select attorney...</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="ratePerHour" class="block text-sm font-medium mb-1">Hourly Rate</label>
|
|
<div class="relative">
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-neutral-500">$</span>
|
|
<input type="number" class="w-full pl-7 pr-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="ratePerHour" name="rate_per_hour" step="0.01" min="0">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="opened" class="block text-sm font-medium mb-1">Date Opened *</label>
|
|
<input type="date" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="opened" name="opened" required>
|
|
</div>
|
|
<div>
|
|
<label for="closed" class="block text-sm font-medium mb-1">Date Closed</label>
|
|
<input type="date" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="closed" name="closed">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Information -->
|
|
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
|
|
<div class="pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="mb-0 font-semibold">Additional Information</h6>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="opposing" class="block text-sm font-medium mb-1">Opposing Counsel</label>
|
|
<input type="text" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="opposing" name="opposing" placeholder="Opposing attorney or firm">
|
|
</div>
|
|
<div>
|
|
<label for="footerCode" class="block text-sm font-medium mb-1">Statement Footer Code</label>
|
|
<input type="text" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="footerCode" name="footer_code" placeholder="Footer code for billing statements">
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label for="memo" class="block text-sm font-medium mb-1">Notes</label>
|
|
<textarea class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" id="memo" name="memo" rows="4" placeholder="Internal notes and comments..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Financial Summary (View only) -->
|
|
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6" id="financialSummaryCard" style="display: none;">
|
|
<div class="flex items-center justify-between pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="mb-0 font-semibold">Financial Summary</h6>
|
|
<button type="button" class="px-3 py-2 bg-info-600 text-white hover:bg-info-700 rounded-lg transition-colors text-sm font-medium" id="viewFullFinancialBtn"><i class="fa-solid fa-calculator mr-2"></i> View Details</button>
|
|
</div>
|
|
<div>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4" id="financialSummary">
|
|
<!-- Financial data will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Documents -->
|
|
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6 md:col-span-2" id="documentsCard" style="display: none;">
|
|
<div class="flex items-center justify-between pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="mb-0 font-semibold">Documents</h6>
|
|
<button type="button" class="px-3 py-2 bg-success-600 text-white hover:bg-success-700 rounded-lg transition-colors text-sm font-medium" id="uploadDocumentBtn"><i class="fa-solid fa-upload mr-2"></i> Upload</button>
|
|
</div>
|
|
<div>
|
|
<div class="mb-3">
|
|
<input type="file" id="documentFile" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
<input type="text" id="documentDescription" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg mt-2" placeholder="Description (optional)">
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm text-left text-neutral-900 dark:text-neutral-100 border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden" id="documentsTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Filename</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Description</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Uploaded</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Size</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="documentsTableBody">
|
|
<!-- Documents will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Closure Checklist -->
|
|
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6 md:col-span-2" id="closureChecklistCard" style="display: none;">
|
|
<div class="flex items-center justify-between pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="mb-0 font-semibold">Closure Checklist</h6>
|
|
<div class="flex items-center gap-2">
|
|
<input type="text" id="newChecklistName" class="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="Add checklist item...">
|
|
<label class="flex items-center gap-1 text-sm"><input type="checkbox" id="newChecklistRequired" class="mr-1"> Required</label>
|
|
<button type="button" class="px-3 py-2 bg-success-600 text-white rounded-lg hover:bg-success-700" id="addChecklistBtn">
|
|
<i class="fa-solid fa-plus mr-1"></i> Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<ul id="checklistItems" class="space-y-2"></ul>
|
|
</div>
|
|
|
|
<!-- File Alerts -->
|
|
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6 md:col-span-2" id="fileAlertsCard" style="display: none;">
|
|
<div class="pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="mb-0 font-semibold">File Alerts</h6>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-2 mb-3">
|
|
<div>
|
|
<input type="text" id="alertType" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="Type (e.g., follow_up)">
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<input type="text" id="alertTitle" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="Title">
|
|
</div>
|
|
<div>
|
|
<input type="date" id="alertDate" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<label class="flex items-center gap-1 text-sm"><input type="checkbox" id="alertNotifyAttorney" checked> Attorney</label>
|
|
<label class="flex items-center gap-1 text-sm"><input type="checkbox" id="alertNotifyAdmin"> Admin</label>
|
|
</div>
|
|
<div class="md:col-span-4">
|
|
<input type="text" id="alertMessage" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="Message">
|
|
</div>
|
|
<div>
|
|
<button type="button" class="w-full px-3 py-2 bg-success-600 text-white rounded-lg hover:bg-success-700" id="createAlertBtn">
|
|
<i class="fa-solid fa-bell mr-1"></i> Create
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<ul id="alertsList" class="space-y-2"></ul>
|
|
</div>
|
|
|
|
<!-- File Relationships -->
|
|
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6 md:col-span-2" id="fileRelationshipsCard" style="display: none;">
|
|
<div class="pb-2 mb-3 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h6 class="mb-0 font-semibold">File Relationships</h6>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-2 mb-3">
|
|
<div>
|
|
<input type="text" id="relTargetFileNo" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="Target File #">
|
|
</div>
|
|
<div>
|
|
<select id="relType" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
<option value="related">related</option>
|
|
<option value="parent">parent</option>
|
|
<option value="child">child</option>
|
|
<option value="duplicate">duplicate</option>
|
|
<option value="conflict">conflict</option>
|
|
<option value="referral">referral</option>
|
|
</select>
|
|
</div>
|
|
<div class="md:col-span-3">
|
|
<input type="text" id="relNotes" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg" placeholder="Notes (optional)">
|
|
</div>
|
|
<div class="md:col-span-5">
|
|
<button type="button" class="px-3 py-2 bg-success-600 text-white rounded-lg hover:bg-success-700" id="addRelationshipBtn">
|
|
<i class="fa-solid fa-link mr-1"></i> Link Files
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<ul id="relationshipsList" class="space-y-2"></ul>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-neutral-200 dark:border-neutral-700">
|
|
<button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors" onclick="closeModal('fileModal')">Cancel (Esc)</button>
|
|
<div class="flex items-center gap-2" id="fileActions" style="display: none;">
|
|
<button type="button" class="px-3 py-2 bg-warning-600 text-white hover:bg-warning-700 rounded-lg" id="closeFileBtn">
|
|
<i class="fa-solid fa-lock"></i> Close File
|
|
</button>
|
|
<button type="button" class="px-3 py-2 bg-success-600 text-white hover:bg-success-700 rounded-lg" id="reopenFileBtn" style="display: none;">
|
|
<i class="fa-solid fa-unlock"></i> Reopen File
|
|
</button>
|
|
<button type="button" class="px-3 py-2 bg-danger-600 text-white hover:bg-danger-700 rounded-lg" id="deleteFileBtn">
|
|
<i class="fa-solid fa-trash"></i> Delete (Del)
|
|
</button>
|
|
</div>
|
|
<button type="button" class="px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg" id="saveFileBtn">
|
|
<i class="fa-regular fa-circle-check"></i> Save (Ctrl+S)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Search Modal -->
|
|
<div class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" id="advancedSearchModal" aria-hidden="true">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-3xl w-full" role="dialog" aria-modal="true">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold" id="advancedSearchModalLabel">Advanced File Search</h5>
|
|
<button type="button" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="closeModal('advancedSearchModal')"><i class="fa-solid fa-xmark"></i></button>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<form id="advancedSearchForm">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="advFileNo" class="block text-sm font-medium mb-1">File Number</label>
|
|
<input type="text" id="advFileNo" placeholder="Partial file number" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
</div>
|
|
<div>
|
|
<label for="advClientName" class="block text-sm font-medium mb-1">Client Name</label>
|
|
<input type="text" id="advClientName" placeholder="First or last name" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
</div>
|
|
<div>
|
|
<label for="advRegarding" class="block text-sm font-medium mb-1">Matter Description</label>
|
|
<input type="text" id="advRegarding" placeholder="Keywords in matter description" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
</div>
|
|
<div>
|
|
<label for="advFileType" class="block text-sm font-medium mb-1">File Type</label>
|
|
<select id="advFileType" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
<option value="">All Types</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="advStatus" class="block text-sm font-medium mb-1">Status</label>
|
|
<select id="advStatus" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
<option value="">All Statuses</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="advEmployee" class="block text-sm font-medium mb-1">Attorney</label>
|
|
<select id="advEmployee" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
<option value="">All Attorneys</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="advOpenedAfter" class="block text-sm font-medium mb-1">Opened After</label>
|
|
<input type="date" id="advOpenedAfter" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
</div>
|
|
<div>
|
|
<label for="advOpenedBefore" class="block text-sm font-medium mb-1">Opened Before</label>
|
|
<input type="date" id="advOpenedBefore" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-neutral-200 dark:border-neutral-700">
|
|
<button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg" onclick="closeModal('advancedSearchModal')">Cancel</button>
|
|
<button type="button" class="px-4 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700" id="clearAdvancedSearchBtn">Clear</button>
|
|
<button type="button" class="px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg" id="performAdvancedSearchBtn">Search</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Client Selection Modal -->
|
|
<div class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" id="clientSelectionModal" aria-hidden="true">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-3xl w-full" role="dialog" aria-modal="true">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold" id="clientSelectionModalLabel">Select Client</h5>
|
|
<button type="button" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="closeModal('clientSelectionModal')"><i class="fa-solid fa-xmark"></i></button>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<div class="mb-3">
|
|
<input type="text" class="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg" id="clientSearchInput" placeholder="Search clients by name or ID...">
|
|
</div>
|
|
<div class="overflow-y-auto max-h-96">
|
|
<table class="w-full text-sm text-left text-neutral-900 dark:text-neutral-100 border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
|
|
<thead class="bg-neutral-50 dark:bg-neutral-800/50">
|
|
<tr class="border-b border-neutral-200 dark:border-neutral-700">
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">ID</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Name</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">City, State</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Group</th>
|
|
<th class="px-3 py-2 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="clientSelectionTableBody">
|
|
<!-- Client options will be loaded here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Modal -->
|
|
<div class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" id="statsModal" aria-hidden="true">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xl max-w-3xl w-full" role="dialog" aria-modal="true">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
|
|
<h5 class="text-lg font-semibold" id="statsModalLabel">File Cabinet Statistics</h5>
|
|
<button type="button" class="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300" onclick="closeModal('statsModal')"><i class="fa-solid fa-xmark"></i></button>
|
|
</div>
|
|
<div class="px-6 py-4" id="statsContent">
|
|
<!-- Statistics will be loaded here -->
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-neutral-200 dark:border-neutral-700">
|
|
<button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg" onclick="closeModal('statsModal')">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// File management functionality
|
|
let currentPage = 0;
|
|
let currentFilters = {};
|
|
let isEditing = false;
|
|
let editingFileNo = null;
|
|
let lookupData = {
|
|
fileTypes: [],
|
|
fileStatuses: [],
|
|
employees: []
|
|
};
|
|
|
|
// Authorization and JSON headers are injected by window.http.wrappedFetch
|
|
|
|
// 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);
|
|
// Checklist
|
|
document.getElementById('addChecklistBtn').addEventListener('click', addChecklistItem);
|
|
// Alerts
|
|
document.getElementById('createAlertBtn').addEventListener('click', createAlert);
|
|
// Relationships
|
|
document.getElementById('addRelationshipBtn').addEventListener('click', addRelationship);
|
|
|
|
// 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);
|
|
}
|
|
|
|
// Highlight helpers
|
|
function _escapeHtml(text) {
|
|
try { if (window.htmlSanitizer && typeof window.htmlSanitizer.escape === 'function') { return window.htmlSanitizer.escape(text); } } catch (_) {}
|
|
const str = String(text == null ? '' : text);
|
|
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
|
}
|
|
function _buildTokens(raw) {
|
|
return String(raw || '')
|
|
.trim()
|
|
.replace(/[,_;:]+/g, ' ')
|
|
.split(/\s+/)
|
|
.map(t => t.replace(/^[^A-Za-z0-9]+|[^A-Za-z0-9]+$/g, ''))
|
|
.filter(Boolean);
|
|
}
|
|
function highlightText(text, tokens) {
|
|
if (!text) return '';
|
|
const unique = Array.from(new Set(tokens || []));
|
|
if (unique.length === 0) return _escapeHtml(text);
|
|
let safe = _escapeHtml(String(text));
|
|
try {
|
|
unique.forEach(tok => {
|
|
const esc = tok.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
const re = new RegExp(`(${esc})`, 'ig');
|
|
safe = safe.replace(re, '<mark class="bg-yellow-200 text-neutral-900 rounded px-0.5">$1</mark>');
|
|
});
|
|
} catch (_) {}
|
|
return safe;
|
|
}
|
|
|
|
async function loadLookupData() {
|
|
try {
|
|
// Load all lookup data in parallel
|
|
const [fileTypesRes, statusesRes, employeesRes] = await Promise.all([
|
|
window.http.wrappedFetch('/api/files/lookups/file-types'),
|
|
window.http.wrappedFetch('/api/files/lookups/file-statuses'),
|
|
window.http.wrappedFetch('/api/files/lookups/employees')
|
|
]);
|
|
|
|
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 window.http.wrappedFetch(`/api/files/?${params}`);
|
|
|
|
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 = '';
|
|
const tokens = _buildTokens(document.getElementById('searchInput') ? document.getElementById('searchInput').value : '');
|
|
|
|
if (files.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="9" class="text-center text-neutral-500">No files found</td></tr>';
|
|
return;
|
|
}
|
|
|
|
files.forEach(file => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td class="px-4 py-2"><strong>${highlightText(file.file_no, tokens)}</strong></td>
|
|
<td class="px-4 py-2">
|
|
<div>
|
|
<div>${highlightText(file.client_name || 'Unknown Client', tokens)}</div>
|
|
<div class="text-xs text-neutral-500">${highlightText(file.client_id || '', tokens)}</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
${file.regarding ? `<div>${highlightText(file.regarding.substring(0, 50) + (file.regarding.length > 50 ? '...' : ''), tokens)}</div>` : '<em class="text-neutral-500">No description</em>'}
|
|
</td>
|
|
<td class="px-4 py-2">${highlightText(file.file_type || '', tokens)}</td>
|
|
<td class="px-4 py-2"><span class="${getStatusBadgeClass(file.status)}">${highlightText(file.status || '', tokens)}</span></td>
|
|
<td class="px-4 py-2">${highlightText(file.empl_num || '', tokens)}</td>
|
|
<td class="px-4 py-2">${formatDate(file.opened)}</td>
|
|
<td class="px-4 py-2 text-right">
|
|
<strong class="${file.amount_owing > 0 ? 'text-success-600' : 'text-neutral-500'}">
|
|
${formatCurrency(file.amount_owing)}
|
|
</strong>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
<div class="flex items-center gap-2">
|
|
<button class="inline-flex items-center px-3 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg text-sm font-semibold transition-colors" onclick="editFile('${String(file.file_no).replace(/"/g, '"')}')"><i class="fa-solid fa-pencil mr-1.5"></i> Edit</button>
|
|
<button class="inline-flex items-center px-3 py-2 bg-info-600 text-white hover:bg-info-700 rounded-lg text-sm font-semibold transition-colors" onclick="viewFile('${String(file.file_no).replace(/"/g, '"')}')"><i class="fa-regular fa-eye mr-1.5"></i> View</button>
|
|
</div>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function getStatusBadgeClass(status) {
|
|
const s = (status || '').toUpperCase();
|
|
switch (s) {
|
|
case 'ACTIVE':
|
|
return 'inline-block px-2 py-0.5 text-xs font-medium rounded bg-green-100 text-green-700 border border-green-400';
|
|
case 'CLOSED':
|
|
return 'inline-block px-2 py-0.5 text-xs font-medium rounded bg-neutral-100 text-neutral-700 border border-neutral-300';
|
|
case 'INACTIVE':
|
|
return 'inline-block px-2 py-0.5 text-xs font-medium rounded bg-yellow-100 text-yellow-700 border border-yellow-500';
|
|
case 'FOLLOW UP':
|
|
return 'inline-block px-2 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-700 border border-blue-400';
|
|
default:
|
|
return 'inline-block px-2 py-0.5 text-xs font-medium rounded bg-neutral-100 text-neutral-700 border border-neutral-300';
|
|
}
|
|
}
|
|
|
|
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';
|
|
document.getElementById('documentsCard').style.display = 'none'; // Hide documents card for new file
|
|
clearFileForm();
|
|
|
|
// Set default date to today
|
|
document.getElementById('opened').value = new Date().toISOString().split('T')[0];
|
|
|
|
openModal('fileModal');
|
|
}
|
|
|
|
async function editFile(fileNo) {
|
|
try {
|
|
const response = await window.http.wrappedFetch(`/api/files/${fileNo}`);
|
|
|
|
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('documentsCard').style.display = 'block'; // Show documents card for editing
|
|
document.getElementById('closureChecklistCard').style.display = 'block';
|
|
document.getElementById('fileAlertsCard').style.display = 'block';
|
|
document.getElementById('fileRelationshipsCard').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);
|
|
loadDocuments(fileNo); // Load documents for editing
|
|
loadClosureChecklist(fileNo);
|
|
loadAlerts(fileNo);
|
|
loadRelationships(fileNo);
|
|
|
|
openModal('fileModal');
|
|
|
|
} 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 window.http.wrappedFetch(`/api/customers/${clientId}`);
|
|
|
|
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 window.http.wrappedFetch(`/api/files/${fileNo}/financial-summary`);
|
|
|
|
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="text-center">
|
|
<div class="text-xl text-primary-600">${formatCurrency(financial.total_charges)}</div>
|
|
<div class="text-xs text-neutral-500">Total Charges</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-xl text-success-600">${formatCurrency(financial.amount_owing)}</div>
|
|
<div class="text-xs text-neutral-500">Amount Owing</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-xl text-info-600">${formatCurrency(financial.trust_balance)}</div>
|
|
<div class="text-xs text-neutral-500">Trust Balance</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-xl text-warning-600">${financial.hours_total.toFixed(2)} hrs</div>
|
|
<div class="text-xs text-neutral-500">Total Hours</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.reportValidity();
|
|
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 window.http.wrappedFetch(url, {
|
|
method: method,
|
|
body: JSON.stringify(fileData)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Failed to save file');
|
|
}
|
|
|
|
closeModal('fileModal');
|
|
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 window.http.wrappedFetch(`/api/files/${editingFileNo}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to delete file');
|
|
|
|
closeModal('fileModal');
|
|
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 window.http.wrappedFetch(`/api/files/${editingFileNo}/close`, {
|
|
method: 'POST',
|
|
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 window.http.wrappedFetch(`/api/files/${editingFileNo}/reopen`, {
|
|
method: 'POST'
|
|
});
|
|
|
|
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
|
|
openModal('clientSelectionModal');
|
|
}
|
|
|
|
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 window.http.wrappedFetch(`/api/customers/?${params}`);
|
|
|
|
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 = '';
|
|
const tokens = _buildTokens(document.getElementById('clientSearchInput') ? document.getElementById('clientSearchInput').value : '');
|
|
|
|
clients.forEach(client => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${highlightText(client.id || '', tokens)}</td>
|
|
<td>${highlightText(`${client.first || ''} ${client.last || ''}`.trim(), tokens)}</td>
|
|
<td>${highlightText(`${client.city || ''}, ${client.abrev || ''}`.trim(), tokens)}</td>
|
|
<td>${highlightText(client.group || '', tokens)}</td>
|
|
<td>
|
|
<button class="px-2 py-1 bg-primary-600 text-white rounded hover:bg-primary-700 text-sm" onclick="selectClient('${String(client.id).replace(/"/g, '"')}', '${((client.first || '') + ' ' + (client.last || '')).replace(/"/g, '"')}', '${(`${client.city || ''}, ${client.abrev || ''}`).replace(/"/g, '"')}')">Select</button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function selectClient(clientId, clientName, location) {
|
|
document.getElementById('clientId').value = clientId;
|
|
document.getElementById('clientName').textContent = `${clientName} (${location})`;
|
|
closeModal('clientSelectionModal');
|
|
}
|
|
|
|
async function validateFileNumber() {
|
|
const fileNo = document.getElementById('fileNo').value;
|
|
if (!fileNo || isEditing) return;
|
|
|
|
try {
|
|
const response = await window.http.wrappedFetch(`/api/files/${fileNo}`);
|
|
|
|
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() {
|
|
openModal('advancedSearchModal');
|
|
}
|
|
|
|
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 window.http.wrappedFetch(`/api/files/search/advanced?${params}`);
|
|
|
|
if (!response.ok) throw new Error('Advanced search failed');
|
|
|
|
const results = await response.json();
|
|
displayFiles(results.files);
|
|
|
|
closeModal('advancedSearchModal');
|
|
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 window.http.wrappedFetch('/api/files/stats/summary');
|
|
|
|
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="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="col-span-1 md:col-span-1">
|
|
<h6>File Overview</h6>
|
|
<ul class="list-none p-0 m-0 space-y-1">
|
|
<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-none p-0 m-0 space-y-1">
|
|
${stats.status_breakdown.map(s => `<li><strong>${s.status}:</strong> ${s.count}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-1">
|
|
<h6>Financial Summary</h6>
|
|
<ul class="list-none p-0 m-0 space-y-1">
|
|
<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-none p-0 m-0 space-y-1">
|
|
${stats.type_breakdown.map(t => `<li><strong>${t.type}:</strong> ${t.count}</li>`).join('')}
|
|
</ul>
|
|
|
|
<h6>Attorney Breakdown</h6>
|
|
<ul class="list-none p-0 m-0 space-y-1">
|
|
${stats.employee_breakdown.map(e => `<li><strong>${e.employee}:</strong> ${e.count}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
openModal('statsModal');
|
|
}
|
|
|
|
// 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') {
|
|
if (window.alerts && typeof window.alerts.show === 'function') {
|
|
window.alerts.show(message, type);
|
|
} else if (window.showNotification) {
|
|
window.showNotification(message, type);
|
|
} else {
|
|
alert(String(message));
|
|
}
|
|
}
|
|
|
|
async function loadDocuments(fileNo) {
|
|
try {
|
|
const response = await window.http.wrappedFetch(`/api/documents/${fileNo}/uploaded`);
|
|
if (!response.ok) throw new Error('Failed to load documents');
|
|
const docs = await response.json();
|
|
displayDocuments(docs);
|
|
} catch (error) {
|
|
console.error('Error loading documents:', error);
|
|
showAlert('Error loading documents: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function displayDocuments(docs) {
|
|
const tbody = document.getElementById('documentsTableBody');
|
|
tbody.innerHTML = '';
|
|
if (docs.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="5" class="text-center text-neutral-500">No documents uploaded</td></tr>';
|
|
return;
|
|
}
|
|
docs.forEach(doc => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${doc.filename}</td>
|
|
<td>${doc.description || ''}</td>
|
|
<td>${formatDate(doc.upload_date)}</td>
|
|
<td>${formatSize(doc.size)}</td>
|
|
<td>
|
|
<button class="px-2 py-1 border border-blue-600 text-blue-600 rounded hover:bg-blue-100" onclick="downloadDocument('${doc.id}')"><i class="fa-solid fa-download"></i></button>
|
|
<button class="px-2 py-1 border border-cyan-600 text-cyan-600 rounded hover:bg-blue-100" onclick="editDocumentDescription(${doc.id}, '${doc.description || ''}')"><i class="fa-solid fa-pencil"></i></button>
|
|
<button class="px-2 py-1 border border-red-600 text-red-600 rounded hover:bg-red-100" onclick="deleteDocument(${doc.id})"><i class="fa-solid fa-trash"></i></button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function formatSize(bytes) {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
|
|
document.getElementById('uploadDocumentBtn').addEventListener('click', uploadDocument);
|
|
|
|
async function uploadDocument() {
|
|
const fileInput = document.getElementById('documentFile');
|
|
const description = document.getElementById('documentDescription').value;
|
|
const file = fileInput.files[0];
|
|
if (!file) {
|
|
showAlert('Please select a file', 'warning');
|
|
return;
|
|
}
|
|
|
|
// Client-side validation
|
|
const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png'];
|
|
if (!allowedTypes.includes(file.type)) {
|
|
showAlert('Invalid file type', 'warning');
|
|
return;
|
|
}
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
showAlert('File too large (max 10MB)', 'warning');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
formData.append('description', description);
|
|
|
|
try {
|
|
const response = await window.http.wrappedFetch(`/api/documents/upload/${editingFileNo}`, {
|
|
method: 'POST',
|
|
body: formData,
|
|
// Note: no Content-Type; browser sets multipart boundaries
|
|
});
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Upload failed');
|
|
}
|
|
showAlert('Document uploaded successfully', 'success');
|
|
loadDocuments(editingFileNo);
|
|
fileInput.value = '';
|
|
document.getElementById('documentDescription').value = '';
|
|
} catch (error) {
|
|
showAlert('Error uploading document: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function downloadDocument(docId) {
|
|
// To download, need endpoint to serve or get path
|
|
// Assuming we have /api/documents/uploaded/{doc_id}/download that returns file
|
|
window.open(`/api/documents/uploaded/${docId}/download`, '_blank');
|
|
// But since we have path, and /uploads mounted, can do window.open('/' + path)
|
|
// But since path is uploads/file_no/uuid.ext, yes.
|
|
// But to get path, need to adjust displayDocuments to include path in data attribute or something.
|
|
// For simplicity, add endpoint for download if needed, but since public, can use path.
|
|
// Wait, in display, use doc.path
|
|
// Adjust the row to <button onclick="downloadDocument('${doc.path}')">
|
|
// Then function downloadDocument(path) { window.open('/' + path, '_blank'); }
|
|
}
|
|
|
|
function downloadDocument(path) {
|
|
window.open('/' + path, '_blank');
|
|
}
|
|
|
|
async function deleteDocument(docId) {
|
|
if (!confirm('Are you sure you want to delete this document?')) return;
|
|
try {
|
|
const response = await window.http.wrappedFetch(`/api/documents/uploaded/${docId}`, {
|
|
method: 'DELETE',
|
|
});
|
|
if (!response.ok) throw new Error('Failed to delete');
|
|
showAlert('Document deleted', 'success');
|
|
loadDocuments(editingFileNo);
|
|
} catch (error) {
|
|
showAlert('Error deleting document: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function editDocumentDescription(docId, currentDesc) {
|
|
const newDesc = prompt('Edit description:', currentDesc);
|
|
if (newDesc === null) return;
|
|
updateDocumentDescription(docId, newDesc);
|
|
}
|
|
|
|
async function updateDocumentDescription(docId, description) {
|
|
const formData = new FormData();
|
|
formData.append('description', description);
|
|
try {
|
|
const response = await window.http.wrappedFetch(`/api/documents/uploaded/${docId}`, {
|
|
method: 'PUT',
|
|
body: formData,
|
|
});
|
|
if (!response.ok) throw new Error('Failed to update');
|
|
showAlert('Description updated', 'success');
|
|
loadDocuments(editingFileNo);
|
|
} catch (error) {
|
|
showAlert('Error updating description: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
// Closure Checklist
|
|
async function loadClosureChecklist(fileNo) {
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/${encodeURIComponent(fileNo)}/closure-checklist`);
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to load checklist');
|
|
const items = await res.json();
|
|
const list = document.getElementById('checklistItems');
|
|
list.innerHTML = '';
|
|
if (!items || items.length === 0) {
|
|
list.innerHTML = '<li class="text-neutral-500 text-sm">No checklist items yet.</li>';
|
|
return;
|
|
}
|
|
items.forEach(item => {
|
|
const li = document.createElement('li');
|
|
li.dataset.itemId = item.id;
|
|
li.className = 'flex items-center justify-between gap-2 border border-neutral-200 dark:border-neutral-700 rounded-md px-3 py-2';
|
|
li.innerHTML = `
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" ${item.is_completed ? 'checked' : ''} onchange="toggleChecklistItem(${item.id}, this.checked)" />
|
|
<div>
|
|
<div class="font-medium">${_escapeHtml(item.item_name)}</div>
|
|
<div class="text-xs text-neutral-500">${_escapeHtml(item.item_description || '')}</div>
|
|
</div>
|
|
${item.is_required ? '<span class="text-xs px-2 py-0.5 rounded bg-red-100 text-red-700">Required</span>' : ''}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="px-2 py-1 text-xs border border-neutral-300 dark:border-neutral-600 rounded" onclick="editChecklistItem(${item.id})">Edit</button>
|
|
<button class="px-2 py-1 text-xs border border-red-600 text-red-700 rounded" onclick="deleteChecklistItem(${item.id})">Delete</button>
|
|
</div>
|
|
`;
|
|
list.appendChild(li);
|
|
});
|
|
} catch (err) {
|
|
showAlert(window.http.formatAlert(err, 'Error loading checklist'), 'danger');
|
|
}
|
|
}
|
|
|
|
async function addChecklistItem() {
|
|
const name = (document.getElementById('newChecklistName').value || '').trim();
|
|
const isRequired = !!document.getElementById('newChecklistRequired').checked;
|
|
if (!editingFileNo) return;
|
|
if (!name) {
|
|
showAlert('Enter a checklist item name', 'warning');
|
|
return;
|
|
}
|
|
// optimistic add
|
|
const tempId = 'temp-' + Date.now();
|
|
const list = document.getElementById('checklistItems');
|
|
const li = document.createElement('li');
|
|
li.dataset.itemId = tempId;
|
|
li.className = 'flex items-center justify-between gap-2 border border-neutral-200 dark:border-neutral-700 rounded-md px-3 py-2 opacity-60';
|
|
li.innerHTML = `
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" />
|
|
<div>
|
|
<div class="font-medium">${_escapeHtml(name)}</div>
|
|
</div>
|
|
${isRequired ? '<span class="text-xs px-2 py-0.5 rounded bg-red-100 text-red-700">Required</span>' : ''}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-neutral-500">Saving...</span>
|
|
</div>
|
|
`;
|
|
list.appendChild(li);
|
|
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/${encodeURIComponent(editingFileNo)}/closure-checklist`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ item_name: name, is_required: isRequired })
|
|
});
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to add item');
|
|
const saved = await res.json();
|
|
document.getElementById('newChecklistName').value = '';
|
|
document.getElementById('newChecklistRequired').checked = true;
|
|
// Refresh list for clean state
|
|
loadClosureChecklist(editingFileNo);
|
|
} catch (err) {
|
|
li.remove();
|
|
showAlert(window.http.formatAlert(err, 'Error adding item'), 'danger');
|
|
}
|
|
}
|
|
|
|
async function toggleChecklistItem(itemId, checked) {
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/closure-checklist/${itemId}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ is_completed: !!checked })
|
|
});
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to update item');
|
|
} catch (err) {
|
|
showAlert(window.http.formatAlert(err, 'Error updating item'), 'danger');
|
|
loadClosureChecklist(editingFileNo);
|
|
}
|
|
}
|
|
|
|
function editChecklistItem(itemId) {
|
|
const newName = prompt('Update item name (leave blank to skip):');
|
|
if (newName === null) return;
|
|
const newNotes = prompt('Notes (optional, leave blank to skip):');
|
|
updateChecklistItem(itemId, newName, newNotes || undefined);
|
|
}
|
|
|
|
async function updateChecklistItem(itemId, newName, notes) {
|
|
const payload = {};
|
|
if (newName && newName.trim()) payload.item_name = newName.trim();
|
|
if (notes !== undefined) payload.notes = notes;
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/closure-checklist/${itemId}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(payload)
|
|
});
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to update item');
|
|
loadClosureChecklist(editingFileNo);
|
|
} catch (err) {
|
|
showAlert(window.http.formatAlert(err, 'Error updating item'), 'danger');
|
|
}
|
|
}
|
|
|
|
async function deleteChecklistItem(itemId) {
|
|
if (!confirm('Delete this checklist item?')) return;
|
|
const li = document.querySelector(`li[data-item-id="${itemId}"]`);
|
|
if (li) li.remove();
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/closure-checklist/${itemId}`, { method: 'DELETE' });
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to delete item');
|
|
} catch (err) {
|
|
showAlert(window.http.formatAlert(err, 'Error deleting item'), 'danger');
|
|
loadClosureChecklist(editingFileNo);
|
|
}
|
|
}
|
|
|
|
// Alerts
|
|
async function loadAlerts(fileNo) {
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/${encodeURIComponent(fileNo)}/alerts?active_only=true&upcoming_only=false&limit=100`);
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to load alerts');
|
|
const alerts = await res.json();
|
|
const list = document.getElementById('alertsList');
|
|
list.innerHTML = '';
|
|
if (!alerts || alerts.length === 0) {
|
|
list.innerHTML = '<li class="text-neutral-500 text-sm">No alerts yet.</li>';
|
|
return;
|
|
}
|
|
alerts.forEach(a => {
|
|
const li = document.createElement('li');
|
|
li.dataset.alertId = a.id;
|
|
li.className = 'flex items-center justify-between gap-2 border border-neutral-200 dark:border-neutral-700 rounded-md px-3 py-2';
|
|
li.innerHTML = `
|
|
<div>
|
|
<div class="font-medium">${_escapeHtml(a.title)} <span class="text-xs text-neutral-500">(${_escapeHtml(a.alert_type)})</span></div>
|
|
<div class="text-xs text-neutral-500">${formatDate(a.alert_date)} • ${_escapeHtml(a.message || '')}</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
${a.is_acknowledged ? '<span class="text-xs text-green-700">Acknowledged</span>' : `<button class="px-2 py-1 text-xs border border-success-600 text-success-700 rounded" onclick="ackAlert(${a.id})">Acknowledge</button>`}
|
|
<button class="px-2 py-1 text-xs border border-neutral-300 dark:border-neutral-600 rounded" onclick="editAlert(${a.id})">Edit</button>
|
|
<button class="px-2 py-1 text-xs border border-red-600 text-red-700 rounded" onclick="deleteAlert(${a.id})">Delete</button>
|
|
</div>
|
|
`;
|
|
list.appendChild(li);
|
|
});
|
|
} catch (err) {
|
|
showAlert(window.http.formatAlert(err, 'Error loading alerts'), 'danger');
|
|
}
|
|
}
|
|
|
|
async function createAlert() {
|
|
if (!editingFileNo) return;
|
|
const alert_type = (document.getElementById('alertType').value || '').trim();
|
|
const title = (document.getElementById('alertTitle').value || '').trim();
|
|
const message = (document.getElementById('alertMessage').value || '').trim();
|
|
const alert_date = document.getElementById('alertDate').value;
|
|
const notify_attorney = !!document.getElementById('alertNotifyAttorney').checked;
|
|
const notify_admin = !!document.getElementById('alertNotifyAdmin').checked;
|
|
if (!alert_type || !title || !alert_date) {
|
|
showAlert('Type, title, and date are required', 'warning');
|
|
return;
|
|
}
|
|
// optimistic row
|
|
const tempId = 'temp-' + Date.now();
|
|
const list = document.getElementById('alertsList');
|
|
const li = document.createElement('li');
|
|
li.dataset.alertId = tempId;
|
|
li.className = 'flex items-center justify-between gap-2 border border-neutral-200 dark:border-neutral-700 rounded-md px-3 py-2 opacity-60';
|
|
li.innerHTML = `
|
|
<div>
|
|
<div class="font-medium">${_escapeHtml(title)} <span class="text-xs text-neutral-500">(${_escapeHtml(alert_type)})</span></div>
|
|
<div class="text-xs text-neutral-500">${_escapeHtml(alert_date)} • ${_escapeHtml(message)}</div>
|
|
</div>
|
|
<div class="text-xs text-neutral-500">Saving...</div>
|
|
`;
|
|
list.appendChild(li);
|
|
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/${encodeURIComponent(editingFileNo)}/alerts`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ alert_type, title, message, alert_date, notify_attorney, notify_admin })
|
|
});
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to create alert');
|
|
document.getElementById('alertType').value = '';
|
|
document.getElementById('alertTitle').value = '';
|
|
document.getElementById('alertMessage').value = '';
|
|
document.getElementById('alertDate').value = '';
|
|
document.getElementById('alertNotifyAttorney').checked = true;
|
|
document.getElementById('alertNotifyAdmin').checked = false;
|
|
loadAlerts(editingFileNo);
|
|
} catch (err) {
|
|
li.remove();
|
|
showAlert(window.http.formatAlert(err, 'Error creating alert'), 'danger');
|
|
}
|
|
}
|
|
|
|
async function ackAlert(alertId) {
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/alerts/${alertId}/acknowledge`, { method: 'POST' });
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to acknowledge alert');
|
|
loadAlerts(editingFileNo);
|
|
} catch (err) {
|
|
showAlert(window.http.formatAlert(err, 'Error acknowledging alert'), 'danger');
|
|
}
|
|
}
|
|
|
|
function editAlert(alertId) {
|
|
const newTitle = prompt('New title (leave blank to skip):');
|
|
if (newTitle === null) return;
|
|
const newMessage = prompt('New message (leave blank to skip):');
|
|
updateAlert(alertId, newTitle, newMessage);
|
|
}
|
|
|
|
async function updateAlert(alertId, title, message) {
|
|
const payload = {};
|
|
if (title && title.trim()) payload.title = title.trim();
|
|
if (message && message.trim()) payload.message = message.trim();
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/alerts/${alertId}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(payload)
|
|
});
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to update alert');
|
|
loadAlerts(editingFileNo);
|
|
} catch (err) {
|
|
showAlert(window.http.formatAlert(err, 'Error updating alert'), 'danger');
|
|
}
|
|
}
|
|
|
|
async function deleteAlert(alertId) {
|
|
if (!confirm('Delete this alert?')) return;
|
|
const li = document.querySelector(`li[data-alert-id="${alertId}"]`);
|
|
if (li) li.remove();
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/alerts/${alertId}`, { method: 'DELETE' });
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to delete alert');
|
|
} catch (err) {
|
|
showAlert(window.http.formatAlert(err, 'Error deleting alert'), 'danger');
|
|
loadAlerts(editingFileNo);
|
|
}
|
|
}
|
|
|
|
// Relationships
|
|
async function loadRelationships(fileNo) {
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/${encodeURIComponent(fileNo)}/relationships`);
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to load relationships');
|
|
const rels = await res.json();
|
|
const list = document.getElementById('relationshipsList');
|
|
list.innerHTML = '';
|
|
if (!rels || rels.length === 0) {
|
|
list.innerHTML = '<li class="text-neutral-500 text-sm">No relationships yet.</li>';
|
|
return;
|
|
}
|
|
rels.forEach(r => {
|
|
const li = document.createElement('li');
|
|
li.dataset.relationshipId = r.id;
|
|
li.className = 'flex items-center justify-between gap-2 border border-neutral-200 dark:border-neutral-700 rounded-md px-3 py-2';
|
|
li.innerHTML = `
|
|
<div>
|
|
<div class="font-medium">${_escapeHtml(r.relationship_type)} → ${_escapeHtml(r.other_file_no)}</div>
|
|
<div class="text-xs text-neutral-500">${_escapeHtml(r.notes || '')}</div>
|
|
</div>
|
|
<div>
|
|
<button class="px-2 py-1 text-xs border border-red-600 text-red-700 rounded" onclick="deleteRelationship(${r.id})">Remove</button>
|
|
</div>
|
|
`;
|
|
list.appendChild(li);
|
|
});
|
|
} catch (err) {
|
|
showAlert(window.http.formatAlert(err, 'Error loading relationships'), 'danger');
|
|
}
|
|
}
|
|
|
|
async function addRelationship() {
|
|
const target = (document.getElementById('relTargetFileNo').value || '').trim();
|
|
const relationship_type = document.getElementById('relType').value;
|
|
const notes = (document.getElementById('relNotes').value || '').trim();
|
|
if (!editingFileNo) return;
|
|
if (!target) { showAlert('Enter a target file #', 'warning'); return; }
|
|
// optimistic
|
|
const tempId = 'temp-' + Date.now();
|
|
const list = document.getElementById('relationshipsList');
|
|
const li = document.createElement('li');
|
|
li.dataset.relationshipId = tempId;
|
|
li.className = 'flex items-center justify-between gap-2 border border-neutral-200 dark:border-neutral-700 rounded-md px-3 py-2 opacity-60';
|
|
li.innerHTML = `
|
|
<div>
|
|
<div class="font-medium">${_escapeHtml(relationship_type)} → ${_escapeHtml(target)}</div>
|
|
<div class="text-xs text-neutral-500">${_escapeHtml(notes)}</div>
|
|
</div>
|
|
<div class="text-xs text-neutral-500">Saving...</div>
|
|
`;
|
|
list.appendChild(li);
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/${encodeURIComponent(editingFileNo)}/relationships`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ target_file_no: target, relationship_type, notes })
|
|
});
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to link files');
|
|
document.getElementById('relTargetFileNo').value = '';
|
|
document.getElementById('relNotes').value = '';
|
|
loadRelationships(editingFileNo);
|
|
} catch (err) {
|
|
li.remove();
|
|
showAlert(window.http.formatAlert(err, 'Error linking files'), 'danger');
|
|
}
|
|
}
|
|
|
|
async function deleteRelationship(id) {
|
|
if (!confirm('Remove this relationship?')) return;
|
|
const li = document.querySelector(`li[data-relationship-id="${id}"]`);
|
|
if (li) li.remove();
|
|
try {
|
|
const res = await window.http.wrappedFetch(`/api/file-management/relationships/${id}`, { method: 'DELETE' });
|
|
if (!res.ok) throw await window.http.toError(res, 'Failed to remove relationship');
|
|
} catch (err) {
|
|
showAlert(window.http.formatAlert(err, 'Error removing relationship'), 'danger');
|
|
loadRelationships(editingFileNo);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |