mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-01-21 03:50:01 -06:00
8a378b7078
- Clients: add model, routes, and templates
- app/models/client.py
- app/routes/clients.py
- templates/clients/{create,edit,list,view}.html
- docs/CLIENT_MANAGEMENT_README.md
- Database: add enhanced init/verify scripts, migrations, and docs
- docker/{init-database-enhanced.py,start-enhanced.py,verify-database.py}
- docs/ENHANCED_DATABASE_STARTUP.md
- migrations/{add_analytics_column.sql,add_analytics_setting.py,migrate_to_client_model.py}
- Scripts: add version manager and docker network test helpers
- scripts/version-manager.{bat,ps1,py,sh}
- scripts/test-docker-network.{bat,sh}
- docs/VERSION_MANAGEMENT.md
- UI: tweak base stylesheet
- app/static/base.css
- Tests: add client system test
- test_client_system.py
299 lines
16 KiB
HTML
299 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Projects - {{ app_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4 flex-column flex-md-row">
|
|
<h1 class="h3 mb-0 mb-3 mb-md-0">
|
|
<i class="fas fa-project-diagram text-primary"></i> Projects
|
|
</h1>
|
|
{% if current_user.is_admin %}
|
|
<div>
|
|
<a href="{{ url_for('projects.create_project') }}" class="btn btn-primary touch-target">
|
|
<i class="fas fa-plus"></i> New Project
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card mobile-card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-filter me-2 text-primary"></i>Filters
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="GET" class="row g-3 mobile-form">
|
|
<div class="col-12 col-md-4 mobile-form-group">
|
|
<label for="status" class="form-label">Status</label>
|
|
<select class="form-select touch-target" id="status" name="status">
|
|
<option value="">All Statuses</option>
|
|
<option value="active" {% if request.args.get('status') == 'active' %}selected{% endif %}>Active</option>
|
|
<option value="archived" {% if request.args.get('status') == 'archived' %}selected{% endif %}>Archived</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12 col-md-4 mobile-form-group">
|
|
<label for="client" class="form-label">Client</label>
|
|
<select class="form-select touch-target" id="client" name="client">
|
|
<option value="">All Clients</option>
|
|
{% for client in clients %}
|
|
<option value="{{ client }}" {% if request.args.get('client') == client %}selected{% endif %}>{{ client }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-12 col-md-4 mobile-form-group">
|
|
<label for="search" class="form-label">Search</label>
|
|
<input type="text" class="form-control touch-target" id="search" name="search"
|
|
value="{{ request.args.get('search', '') }}" placeholder="Project name or description">
|
|
</div>
|
|
<div class="col-12 d-flex flex-column flex-md-row gap-2 mobile-stack">
|
|
<button type="submit" class="btn btn-primary mobile-btn flex-fill">
|
|
<i class="fas fa-search me-1"></i>Filter
|
|
</button>
|
|
<a href="{{ url_for('projects.list_projects') }}" class="btn btn-outline-secondary mobile-btn flex-fill">
|
|
<i class="fas fa-times me-1"></i>Clear
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projects List -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card mobile-card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-list"></i> Projects ({{ projects|length }})
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if projects %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Project</th>
|
|
<th>Client</th>
|
|
<th>Status</th>
|
|
<th>Hours</th>
|
|
<th>Rate</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for project in projects %}
|
|
<tr>
|
|
<td data-label="Project">
|
|
<div>
|
|
<a href="{{ url_for('projects.view_project', project_id=project.id) }}" class="text-decoration-none">
|
|
<strong>{{ project.name }}</strong>
|
|
</a>
|
|
{% if project.description %}
|
|
<br><small class="text-muted">{{ project.description[:100] }}{% if project.description|length > 100 %}...{% endif %}</small>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
<td data-label="Client">
|
|
<span class="badge rounded-pill bg-info-subtle text-info-emphasis border border-info-subtle">{{ project.client }}</span>
|
|
</td>
|
|
<td data-label="Status">
|
|
{% if project.status == 'active' %}
|
|
<span class="badge rounded-pill bg-success-subtle text-success-emphasis border border-success-subtle">Active</span>
|
|
{% else %}
|
|
<span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle">Archived</span>
|
|
{% endif %}
|
|
</td>
|
|
<td data-label="Hours" class="align-middle" style="min-width:180px;">
|
|
{% set total_h = (project.total_hours or 0) %}
|
|
{% set billable_h = (project.billable_hours or 0) %}
|
|
{% set pct = (billable_h / total_h * 100) if total_h > 0 else 0 %}
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<strong>{{ "%.1f"|format(total_h) }} h</strong>
|
|
<small class="text-success">{{ "%.1f"|format(billable_h) }} h billable</small>
|
|
</div>
|
|
<div class="progress bg-light rounded-pill" style="height:6px;">
|
|
<div class="progress-bar bg-success rounded-pill" role="progressbar" data-pct="{{ pct|round(0, 'floor') }}" aria-valuenow="{{ pct|round(0, 'floor') }}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</td>
|
|
<td data-label="Rate" class="text-end">
|
|
{% if project.hourly_rate %}
|
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill">${{ "%.2f"|format(project.hourly_rate) }}/h</span>
|
|
{% else %}
|
|
<span class="text-muted">-</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="actions-cell" data-label="Actions">
|
|
<div class="btn-group btn-group-sm" role="group">
|
|
<a href="{{ url_for('projects.view_project', project_id=project.id) }}"
|
|
class="btn btn-sm btn-action btn-action--view touch-target" title="View project">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
{% if current_user.is_admin %}
|
|
<a href="{{ url_for('projects.edit_project', project_id=project.id) }}"
|
|
class="btn btn-sm btn-action btn-action--edit touch-target" title="Edit project">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<button type="button" class="btn btn-sm btn-action btn-action--danger touch-target" title="Delete project"
|
|
onclick="showDeleteProjectModal('{{ project.id }}', '{{ project.name }}')">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<div class="mb-4">
|
|
<i class="fas fa-project-diagram fa-3x text-muted opacity-50"></i>
|
|
</div>
|
|
<h5 class="text-muted mb-3">No projects found</h5>
|
|
<p class="text-muted mb-4">Create your first project to get started</p>
|
|
{% if current_user.is_admin %}
|
|
<a href="{{ url_for('projects.create_project') }}" class="btn btn-primary touch-target">
|
|
<i class="fas fa-plus me-2"></i>Create Project
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Project Modal -->
|
|
<div class="modal fade" id="deleteProjectModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-trash me-2 text-danger"></i>Delete Project
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="alert alert-warning">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
<strong>Warning:</strong> This action cannot be undone.
|
|
</div>
|
|
<p>Are you sure you want to delete the project <strong id="deleteProjectName"></strong>?</p>
|
|
<p class="text-muted mb-0">All associated time entries will also be deleted.</p>
|
|
</div>
|
|
<div class="modal-footer d-flex flex-column flex-md-row">
|
|
<button type="button" class="btn btn-secondary mb-2 mb-md-0 me-md-2 touch-target" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-1"></i>Cancel
|
|
</button>
|
|
<form method="POST" id="deleteProjectForm" class="d-inline">
|
|
<button type="submit" class="btn btn-danger touch-target">
|
|
<i class="fas fa-trash me-2"></i>Delete Project
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Mobile-specific improvements
|
|
if (window.innerWidth <= 768) {
|
|
// Improve mobile table responsiveness
|
|
const tableRows = document.querySelectorAll('tbody tr');
|
|
tableRows.forEach(row => {
|
|
const cells = row.querySelectorAll('td');
|
|
cells.forEach((cell, index) => {
|
|
if (index === 0) {
|
|
cell.setAttribute('data-label', 'Project');
|
|
} else if (index === 1) {
|
|
cell.setAttribute('data-label', 'Client');
|
|
} else if (index === 2) {
|
|
cell.setAttribute('data-label', 'Status');
|
|
} else if (index === 3) {
|
|
cell.setAttribute('data-label', 'Hours');
|
|
} else if (index === 4) {
|
|
cell.setAttribute('data-label', 'Rate');
|
|
} else if (index === 5) {
|
|
cell.setAttribute('data-label', 'Actions');
|
|
} else if (index === 6) {
|
|
cell.setAttribute('data-label', 'Actions');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Improve touch targets
|
|
const inputs = document.querySelectorAll('.form-control, .form-select');
|
|
inputs.forEach(input => {
|
|
input.classList.add('touch-target');
|
|
});
|
|
|
|
const buttons = document.querySelectorAll('.btn');
|
|
buttons.forEach(btn => {
|
|
btn.classList.add('touch-target');
|
|
});
|
|
}
|
|
|
|
// Handle mobile viewport changes
|
|
window.addEventListener('resize', function() {
|
|
if (window.innerWidth <= 768) {
|
|
// Re-apply mobile table improvements
|
|
const tableRows = document.querySelectorAll('tbody tr');
|
|
tableRows.forEach(row => {
|
|
const cells = row.querySelectorAll('td');
|
|
cells.forEach((cell, index) => {
|
|
if (index === 0) {
|
|
cell.setAttribute('data-label', 'Project');
|
|
} else if (index === 1) {
|
|
cell.setAttribute('data-label', 'Client');
|
|
} else if (index === 2) {
|
|
cell.setAttribute('data-label', 'Status');
|
|
} else if (index === 3) {
|
|
cell.setAttribute('data-label', 'Hours');
|
|
} else if (index === 4) {
|
|
cell.setAttribute('data-label', 'Rate');
|
|
} else if (index === 5) {
|
|
cell.setAttribute('data-label', 'Actions');
|
|
} else if (index === 6) {
|
|
cell.setAttribute('data-label', 'Actions');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Function to show delete project modal
|
|
function showDeleteProjectModal(projectId, projectName) {
|
|
document.getElementById('deleteProjectName').textContent = projectName;
|
|
document.getElementById('deleteProjectForm').action = "{{ url_for('projects.delete_project', project_id=0) }}".replace('0', projectId);
|
|
new bootstrap.Modal(document.getElementById('deleteProjectModal')).show();
|
|
}
|
|
|
|
// Add loading state to delete project form
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const deleteForm = document.getElementById('deleteProjectForm');
|
|
if (deleteForm) {
|
|
deleteForm.addEventListener('submit', function(e) {
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
submitBtn.innerHTML = '<div class="loading-spinner me-2"></div>Deleting...';
|
|
submitBtn.disabled = true;
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|