+ {% if not clients %}
+ {% from "components/ui.html" import empty_state %}
+ {% set actions %}
+ {% if current_user.is_admin %}
+
+ Create Your First Client
+
+ {% endif %}
+
+ Learn More
+
+ {% endset %}
+ {% if search or status != 'active' %}
+ {{ empty_state('fas fa-search', 'No Clients Match Your Filters', 'Try adjusting your filters to see more results. You can clear filters or create a new client that matches your criteria.', actions, type='no-results') }}
+ {% else %}
+ {{ empty_state('fas fa-users', 'No Clients Yet', 'Clients help you organize your projects and manage relationships. Create your first client to get started!', actions, type='no-data') }}
+ {% endif %}
+ {% endif %}
+
- {% if not clients %}
- {% from "components/ui.html" import empty_state %}
- {% set actions %}
- {% if current_user.is_admin %}
-
- Create Your First Client
-
- {% endif %}
-
- Learn More
-
- {% endset %}
- {% if search or status != 'active' %}
- {{ empty_state('fas fa-search', 'No Clients Match Your Filters', 'Try adjusting your filters to see more results. You can clear filters or create a new client that matches your criteria.', actions, type='no-results') }}
- {% else %}
- {{ empty_state('fas fa-users', 'No Clients Yet', 'Clients help you organize your projects and manage relationships. Create your first client to get started!', actions, type='no-data') }}
- {% endif %}
- {% endif %}
+
+ {% include 'clients/_clients_list.html' %}
{% if current_user.is_admin %}
@@ -214,6 +108,181 @@ document.addEventListener('DOMContentLoaded', function() {
setTimeout(() => { filterBody.classList.add('filter-toggle-transition'); }, 100);
});
+// Clients Filter Handler - AJAX filtering
+(function() {
+ 'use strict';
+
+ let filterTimeout = null;
+ let searchTimeout = null;
+
+ function getFilterParams() {
+ const form = document.getElementById('clientsFilterForm');
+ if (!form) return {};
+
+ const params = {};
+
+ // Get search input value directly
+ const searchInput = form.querySelector('input[name="search"], input#search');
+ if (searchInput) {
+ const searchValue = searchInput.value.trim();
+ if (searchValue) {
+ params.search = searchValue;
+ }
+ }
+
+ // Get other form fields from FormData
+ const formData = new FormData(form);
+ for (const [key, value] of formData.entries()) {
+ if (key === 'search') continue;
+ const trimmed = String(value || '').trim();
+ if (trimmed && trimmed !== '' && trimmed !== 'all') {
+ params[key] = trimmed;
+ }
+ }
+
+ // Always include status, default to "all" if not set
+ if (!params.status) {
+ params.status = 'all';
+ }
+
+ return params;
+ }
+
+ function buildFilterUrl() {
+ const params = getFilterParams();
+ const queryString = new URLSearchParams(params).toString();
+ return `/clients?${queryString}`;
+ }
+
+ function applyFilters() {
+ const url = buildFilterUrl();
+ const container = document.getElementById('clientsListContainer');
+
+ if (!container) {
+ console.error('clientsListContainer not found');
+ return;
+ }
+
+ // Show loading state
+ container.style.opacity = '0.5';
+ container.style.pointerEvents = 'none';
+
+ // Update URL
+ if (window.history && window.history.pushState) {
+ window.history.pushState({}, '', url);
+ }
+
+ // Fetch filtered results
+ fetch(url, {
+ method: 'GET',
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ 'Accept': 'text/html'
+ },
+ credentials: 'same-origin'
+ })
+ .then(response => {
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+ }
+ return response.text();
+ })
+ .then(html => {
+ const tempDiv = document.createElement('div');
+ tempDiv.innerHTML = html.trim();
+
+ const newContainer = tempDiv.querySelector('#clientsListContainer');
+
+ if (newContainer) {
+ container.innerHTML = newContainer.innerHTML;
+ } else {
+ const match = html.trim().match(/]*id=["']clientsListContainer["'][^>]*>([\s\S]*?)<\/div>\s*$/);
+ if (match && match[1]) {
+ container.innerHTML = match[1];
+ } else {
+ container.innerHTML = html;
+ }
+ }
+ })
+ .catch(error => {
+ console.error('Filter error:', error);
+ container.style.opacity = '';
+ container.style.pointerEvents = '';
+ if (window.toastManager) {
+ window.toastManager.show('Failed to filter clients. Please refresh the page.', 'error');
+ } else if (window.showToast) {
+ window.showToast('Failed to filter clients. Please refresh the page.', 'error');
+ }
+ })
+ .finally(() => {
+ container.style.opacity = '';
+ container.style.pointerEvents = '';
+ });
+ }
+
+ function debouncedApplyFilters(delay = 100) {
+ if (filterTimeout) {
+ clearTimeout(filterTimeout);
+ }
+ filterTimeout = setTimeout(applyFilters, delay);
+ }
+
+ function debouncedSearch(delay = 500) {
+ if (searchTimeout) {
+ clearTimeout(searchTimeout);
+ }
+ searchTimeout = setTimeout(applyFilters, delay);
+ }
+
+ // Initialize when DOM is ready
+ document.addEventListener('DOMContentLoaded', function() {
+ const form = document.getElementById('clientsFilterForm');
+ if (!form) {
+ console.error('Clients filter form not found');
+ return;
+ }
+
+ // Auto-submit on dropdown changes
+ form.querySelectorAll('select').forEach(select => {
+ select.addEventListener('change', () => {
+ debouncedApplyFilters(100);
+ });
+ });
+
+ // Auto-submit on search input (debounced)
+ const searchInput = form.querySelector('input[name="search"], input#search');
+ if (searchInput) {
+ searchInput.addEventListener('input', () => {
+ debouncedSearch(500);
+ });
+
+ // Submit on Enter
+ searchInput.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ if (searchTimeout) {
+ clearTimeout(searchTimeout);
+ }
+ applyFilters();
+ }
+ });
+ }
+
+ // Prevent form submission (use AJAX instead)
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (searchTimeout) {
+ clearTimeout(searchTimeout);
+ }
+ if (filterTimeout) {
+ clearTimeout(filterTimeout);
+ }
+ applyFilters();
+ });
+ });
+})();
+
{% if current_user.is_admin %}
function toggleAllClients(){
const selectAll = document.getElementById('selectAll');
diff --git a/app/templates/invoices/_invoices_list.html b/app/templates/invoices/_invoices_list.html
new file mode 100644
index 0000000..519b6e8
--- /dev/null
+++ b/app/templates/invoices/_invoices_list.html
@@ -0,0 +1,157 @@
+
+
+
+ {{ invoices|length }} invoice{{ 's' if invoices|length != 1 else '' }} found
+
+ {% if not invoices %}
+ {% from "components/ui.html" import empty_state %}
+ {% set actions %}
+
+ Create Your First Invoice
+
+
+ Learn More
+
+ {% endset %}
+ {% if request.args.get('search') or request.args.get('status') or request.args.get('client') %}
+ {{ empty_state('fas fa-search', 'No Invoices Match Your Filters', 'Try adjusting your filters to see more results. You can clear filters or create a new invoice that matches your criteria.', actions, type='no-results') }}
+ {% else %}
+ {{ empty_state('fas fa-file-invoice', 'No Invoices Yet', 'Create professional invoices to bill your clients for completed work. Create your first invoice to get started!', actions, type='no-data') }}
+ {% endif %}
+ {% endif %}
+
- {% if not invoices %}
- {% from "components/ui.html" import empty_state %}
- {% set actions %}
-
- Create Your First Invoice
-
-
- Learn More
-
- {% endset %}
- {% if request.args.get('search') or request.args.get('status') or request.args.get('client') %}
- {{ empty_state('fas fa-search', 'No Invoices Match Your Filters', 'Try adjusting your filters to see more results. You can clear filters or create a new invoice that matches your criteria.', actions, type='no-results') }}
- {% else %}
- {{ empty_state('fas fa-file-invoice', 'No Invoices Yet', 'Create professional invoices to bill your clients for completed work. Create your first invoice to get started!', actions, type='no-data') }}
- {% endif %}
- {% endif %}
+
+
+
+
+ {% if current_user.is_admin or has_permission('edit_projects') %}
+
+
+
+ {% endif %}
+
+
+
+
+
+
+
+
+ {{ project.name }}
+
+
+
+ {{ project.status|title }}
+
+
+
+ {% if project.client %}
+
+ {{ project.client }}
+
+ {% endif %}
+
+ {% if project.description %}
+
+ {{ project.description | markdown | safe }}
+
+ {% endif %}
+
+
+
+
+ {% if project.budget_amount %}
+ {% set consumed = (project.budget_consumed_amount or 0.0) %}
+ {% set total = project.budget_amount|float %}
+ {% set pct = (consumed / total * 100) if total > 0 else 0 %}
+
+
+ {% if not projects %}
+ {% from "components/ui.html" import empty_state %}
+ {% set actions %}
+ {% if current_user.is_admin %}
+
+ Create Your First Project
+
+ {% endif %}
+
+ Learn More
+
+ {% endset %}
+ {% if request.args.get('search') or request.args.get('client') or request.args.get('status') != 'all' %}
+ {{ empty_state('fas fa-search', 'No Projects Match Your Filters', 'Try adjusting your filters to see more results. You can clear filters or create a new project that matches your criteria.', actions, type='no-results') }}
+ {% else %}
+ {{ empty_state('fas fa-folder-open', 'No Projects Yet', 'Projects help you organize your work and track time efficiently. Create your first project to get started!', actions, type='no-data') }}
+ {% endif %}
+ {% endif %}
+
{{ projects|length }} project{{ 's' if projects|length != 1 else '' }} found
@@ -354,6 +352,7 @@
{{ empty_state('fas fa-folder-open', 'No Projects Yet', 'Projects help you organize your work and track time efficiently. Create your first project to get started!', actions, type='no-data') }}
{% endif %}
{% endif %}
+
{% endblock %}
@@ -735,5 +734,313 @@ function toggleFavorite(projectId, button) {
button.disabled = false;
});
}
+
+// Projects Filter Handler - Simple AJAX filtering
+(function() {
+ 'use strict';
+
+ let filterTimeout = null;
+ let searchTimeout = null;
+
+ function getFilterParams() {
+ const form = document.getElementById('projectsFilterForm');
+ if (!form) return {};
+
+ const params = {};
+
+ // Get search input value directly (more reliable than FormData for text inputs)
+ const searchInput = form.querySelector('input[name="search"], input#search');
+ if (searchInput) {
+ const searchValue = searchInput.value.trim();
+ if (searchValue) {
+ params.search = searchValue;
+ }
+ }
+
+ // Get other form fields from FormData
+ const formData = new FormData(form);
+ for (const [key, value] of formData.entries()) {
+ // Skip search as we already handled it above
+ if (key === 'search') {
+ continue;
+ }
+ const trimmed = String(value || '').trim();
+ if (trimmed && trimmed !== '') {
+ params[key] = trimmed;
+ }
+ }
+
+ // Always include status, default to "all" if not set
+ if (!params.status) {
+ params.status = 'all';
+ }
+
+ return params;
+ }
+
+ function buildFilterUrl() {
+ const params = getFilterParams();
+ const queryString = new URLSearchParams(params).toString();
+ return `/projects?${queryString}`;
+ }
+
+ function applyFilters() {
+ const url = buildFilterUrl();
+ const container = document.getElementById('projectsListContainer');
+
+ if (!container) {
+ console.error('projectsListContainer not found');
+ return;
+ }
+
+ // Show loading state
+ container.style.opacity = '0.5';
+ container.style.pointerEvents = 'none';
+
+ // Update URL
+ if (window.history && window.history.pushState) {
+ window.history.pushState({}, '', url);
+ }
+
+ // Fetch filtered results
+ fetch(url, {
+ method: 'GET',
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ 'Accept': 'text/html'
+ },
+ credentials: 'same-origin'
+ })
+ .then(response => {
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+ }
+ return response.text();
+ })
+ .then(html => {
+ // The response should be the projectsListContainer div
+ const tempDiv = document.createElement('div');
+ tempDiv.innerHTML = html.trim();
+
+ const newContainer = tempDiv.querySelector('#projectsListContainer');
+
+ if (newContainer) {
+ container.innerHTML = newContainer.innerHTML;
+ } else {
+ // Fallback: try to extract content using regex
+ const match = html.trim().match(/]*id=["']projectsListContainer["'][^>]*>([\s\S]*?)<\/div>\s*$/);
+ if (match && match[1]) {
+ container.innerHTML = match[1];
+ } else {
+ // Last resort: use the HTML as-is
+ container.innerHTML = html;
+ }
+ }
+
+ // Re-initialize view mode
+ if (window.setViewMode) {
+ const savedMode = localStorage.getItem('projectsViewMode') || 'list';
+ setViewMode(savedMode);
+ }
+
+ // Update filter chips after successful filter
+ updateFilterChips();
+ })
+ .catch(error => {
+ console.error('Filter error:', error);
+ // Restore container state
+ container.style.opacity = '';
+ container.style.pointerEvents = '';
+
+ // Show error message
+ if (window.toastManager) {
+ window.toastManager.show('Failed to filter projects. Please refresh the page.', 'error');
+ } else if (window.showToast) {
+ window.showToast('Failed to filter projects. Please refresh the page.', 'error');
+ }
+ })
+ .finally(() => {
+ container.style.opacity = '';
+ container.style.pointerEvents = '';
+ });
+ }
+
+ function debouncedApplyFilters(delay = 100) {
+ if (filterTimeout) {
+ clearTimeout(filterTimeout);
+ }
+ filterTimeout = setTimeout(applyFilters, delay);
+ }
+
+ function debouncedSearch(delay = 500) {
+ if (searchTimeout) {
+ clearTimeout(searchTimeout);
+ }
+ searchTimeout = setTimeout(applyFilters, delay);
+ }
+
+ function updateFilterChips() {
+ const form = document.getElementById('projectsFilterForm');
+ if (!form) return;
+
+ const params = getFilterParams();
+ const chipsContainer = document.getElementById('filterChipsContainer');
+
+ // Remove old chips container if it exists
+ if (chipsContainer) {
+ chipsContainer.remove();
+ }
+
+ // Get active filters (exclude empty values and "all" status)
+ const activeFilters = {};
+ Object.entries(params).forEach(([key, value]) => {
+ if (value && value !== 'all' && value !== '' && value !== 'false') {
+ activeFilters[key] = value;
+ }
+ });
+
+ // If no active filters, don't show chips
+ if (Object.keys(activeFilters).length === 0) {
+ return;
+ }
+
+ // Create chips container
+ const container = document.createElement('div');
+ container.id = 'filterChipsContainer';
+ container.className = 'flex flex-wrap items-center gap-2 mb-4';
+
+ // Add filter chips
+ Object.entries(activeFilters).forEach(([key, value]) => {
+ const chip = document.createElement('span');
+ chip.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary/10 dark:bg-primary/20 text-primary border border-primary/20 dark:border-primary/30';
+
+ const input = form.querySelector(`[name="${key}"]`);
+ const label = input?.labels?.[0]?.textContent || key;
+
+ chip.innerHTML = `
+ ${label}:
+ ${value}
+
+ `;
+
+ // Add remove listener
+ chip.querySelector('button').addEventListener('click', () => {
+ removeFilter(key);
+ });
+
+ container.appendChild(chip);
+ });
+
+ // Add "Clear All" button
+ const clearAllBtn = document.createElement('button');
+ clearAllBtn.type = 'button';
+ clearAllBtn.className = 'text-sm text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors';
+ clearAllBtn.innerHTML = ' Clear all';
+ clearAllBtn.addEventListener('click', clearAllFilters);
+ container.appendChild(clearAllBtn);
+
+ // Insert after filter form
+ const filterBody = document.getElementById('filterBody');
+ if (filterBody) {
+ filterBody.appendChild(container);
+ }
+ }
+
+ function removeFilter(key) {
+ const form = document.getElementById('projectsFilterForm');
+ if (!form) return;
+
+ const input = form.querySelector(`[name="${key}"]`);
+ if (input) {
+ if (input.tagName === 'SELECT') {
+ input.value = input.options[0].value; // First option (usually "All" or empty)
+ } else {
+ input.value = '';
+ }
+ }
+
+ applyFilters();
+ }
+
+ function clearAllFilters() {
+ const form = document.getElementById('projectsFilterForm');
+ if (!form) return;
+
+ // Reset all form fields
+ form.reset();
+
+ // Set status to "all"
+ const statusSelect = form.querySelector('[name="status"]');
+ if (statusSelect) {
+ statusSelect.value = 'all';
+ }
+
+ // Clear text inputs
+ form.querySelectorAll('input[type="text"]').forEach(input => {
+ input.value = '';
+ });
+
+ // Apply filters immediately
+ applyFilters();
+ }
+
+ // Initialize when DOM is ready
+ document.addEventListener('DOMContentLoaded', function() {
+ const form = document.getElementById('projectsFilterForm');
+ if (!form) {
+ console.error('Projects filter form not found');
+ return;
+ }
+
+ // Auto-submit on dropdown changes
+ form.querySelectorAll('select').forEach(select => {
+ select.addEventListener('change', () => {
+ debouncedApplyFilters(100);
+ });
+ });
+
+ // Auto-submit on search input (debounced)
+ const searchInput = form.querySelector('input[name="search"], input#search');
+ if (searchInput) {
+ searchInput.addEventListener('input', (e) => {
+ debouncedSearch(500);
+ });
+
+ // Submit on Enter
+ searchInput.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ if (searchTimeout) {
+ clearTimeout(searchTimeout);
+ }
+ applyFilters();
+ }
+ });
+ } else {
+ console.error('Search input not found in form');
+ }
+
+ // Prevent form submission (use AJAX instead)
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (searchTimeout) {
+ clearTimeout(searchTimeout);
+ }
+ if (filterTimeout) {
+ clearTimeout(filterTimeout);
+ }
+ applyFilters();
+ });
+
+ // Initial filter chips update
+ setTimeout(updateFilterChips, 100);
+
+ // Export clear function
+ window.clearProjectsFilters = clearAllFilters;
+ });
+})();
{% endblock %}
diff --git a/app/templates/quotes/_quotes_list.html b/app/templates/quotes/_quotes_list.html
new file mode 100644
index 0000000..175a178
--- /dev/null
+++ b/app/templates/quotes/_quotes_list.html
@@ -0,0 +1,101 @@
+
+
+
+ {{ quotes|length }} quote{{ 's' if quotes|length != 1 else '' }} found
+
+ {% if current_user.is_admin or has_permission('create_quotes') %}
+
+ {% else %}
+ {% from "components/ui.html" import empty_state %}
+ {% set actions %}
+ {% if current_user.is_admin or has_permission('create_quotes') %}
+
+ {{ _('Create Your First Quote') }}
+
+ {% endif %}
+
+ {{ _('Learn More') }}
+
+ {% endset %}
+ {% if search or status != 'all' %}
+ {{ empty_state('fas fa-search', 'No Quotes Match Your Filters', 'Try adjusting your filters to see more results. You can clear filters or create a new quote that matches your criteria.', actions, type='no-results') }}
+ {% else %}
+ {{ empty_state('fas fa-file-contract', 'No Quotes Yet', 'Quotes help you manage client proposals and track acceptance rates. Create your first quote to get started!', actions, type='no-data') }}
+ {% endif %}
+ {% endif %}
+
- {% else %}
- {% set actions %}
- {% if current_user.is_admin or has_permission('create_quotes') %}
-
- {{ _('Create Your First Quote') }}
-
- {% endif %}
-
- {{ _('Learn More') }}
-
- {% endset %}
- {% if search or status != 'all' %}
- {{ empty_state('fas fa-search', 'No Quotes Match Your Filters', 'Try adjusting your filters to see more results. You can clear filters or create a new quote that matches your criteria.', actions, type='no-results') }}
- {% else %}
- {{ empty_state('fas fa-file-contract', 'No Quotes Yet', 'Quotes help you manage client proposals and track acceptance rates. Create your first quote to get started!', actions, type='no-data') }}
- {% endif %}
- {% endif %}
+
+ {% if not tasks %}
+ {% from "components/ui.html" import empty_state %}
+ {% set actions %}
+
+ Create Your First Task
+
+
+ Learn More
+
+ {% endset %}
+ {% if search or status or priority or project_id or assigned_to %}
+ {{ empty_state('fas fa-search', 'No Tasks Match Your Filters', 'Try adjusting your filters to see more results. You can clear filters or create a new task that matches your criteria.', actions, type='no-results') }}
+ {% else %}
+ {{ empty_state('fas fa-tasks', 'No Tasks Yet', 'Tasks help you break down projects into manageable pieces. Create your first task to get started organizing your work!', actions, type='no-data') }}
+ {% endif %}
+ {% endif %}
+
- {% if not tasks %}
- {% from "components/ui.html" import empty_state %}
- {% set actions %}
-
- Create Your First Task
-
-
- Learn More
-
- {% endset %}
- {% if search or status or priority or project_id or assigned_to %}
- {{ empty_state('fas fa-search', 'No Tasks Match Your Filters', 'Try adjusting your filters to see more results. You can clear filters or create a new task that matches your criteria.', actions, type='no-results') }}
- {% else %}
- {{ empty_state('fas fa-tasks', 'No Tasks Yet', 'Tasks help you break down projects into manageable pieces. Create your first task to get started organizing your work!', actions, type='no-data') }}
- {% endif %}
- {% endif %}
-
-
+