mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-01-02 01:30:15 -06:00
77aec94b86
Major Features: - Add project costs feature with full CRUD operations - Implement toast notification system for better user feedback - Enhance analytics dashboard with improved visualizations - Add OIDC authentication improvements and debug tools Improvements: - Enhance reports with new filtering and export capabilities - Update command palette with additional shortcuts - Improve mobile responsiveness across all pages - Refactor UI components for consistency Removals: - Remove license server integration and related dependencies - Clean up unused license-related templates and utilities Technical Changes: - Add new migration 018 for project_costs table - Update models: Project, Settings, User with new relationships - Refactor routes: admin, analytics, auth, invoices, projects, reports - Update static assets: CSS improvements, new JS modules - Enhance templates: analytics, admin, projects, reports Documentation: - Add comprehensive documentation for project costs feature - Document toast notification system with visual guides - Update README with new feature descriptions - Add migration instructions and quick start guides - Document OIDC improvements and Kanban enhancements Files Changed: - Modified: 56 files (core app, models, routes, templates, static assets) - Deleted: 6 files (license server integration) - Added: 28 files (new features, documentation, migrations)
680 lines
14 KiB
CSS
680 lines
14 KiB
CSS
/**
|
|
* Reports Enhanced Styling
|
|
* Modern, clean styles for the reports section
|
|
*/
|
|
|
|
/* Report Container */
|
|
.reports-container {
|
|
background: var(--body-bg, #ffffff);
|
|
min-height: calc(100vh - var(--navbar-height, 72px));
|
|
}
|
|
|
|
/* Summary Cards - Enhanced */
|
|
.summary-card {
|
|
border: 1px solid var(--border-light, #f1f5f9) !important;
|
|
background: var(--card-bg, #ffffff);
|
|
cursor: default;
|
|
}
|
|
|
|
.summary-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: var(--border-radius-lg, 12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.summary-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary, #475569);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #1e293b);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.summary-trend {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.summary-trend.up {
|
|
color: var(--success-color, #10b981);
|
|
}
|
|
|
|
.summary-trend.down {
|
|
color: var(--danger-color, #ef4444);
|
|
}
|
|
|
|
/* Filter Section */
|
|
.filters-card {
|
|
background: var(--surface-variant, #f8fafc);
|
|
border: 1px solid var(--border-color, #e2e8f0) !important;
|
|
}
|
|
|
|
.filters-card .card-header {
|
|
background: var(--card-bg, #ffffff);
|
|
border-bottom: 1px solid var(--border-color, #e2e8f0);
|
|
}
|
|
|
|
.date-presets-container {
|
|
margin-bottom: 1rem;
|
|
padding: 1rem;
|
|
background: var(--card-bg, #ffffff);
|
|
border-radius: var(--border-radius, 8px);
|
|
border: 1px dashed var(--border-color, #e2e8f0);
|
|
}
|
|
|
|
.date-presets-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary, #475569);
|
|
margin-bottom: 0.75rem;
|
|
display: block;
|
|
}
|
|
|
|
#datePresets .btn-group {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
#datePresets .btn {
|
|
font-size: 0.8125rem;
|
|
padding: 0.375rem 0.875rem;
|
|
border-radius: var(--border-radius-sm, 6px);
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
#datePresets .btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Report Tables */
|
|
.report-table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.report-table thead th {
|
|
background: var(--gray-50, #f9fafb);
|
|
color: var(--text-secondary, #475569);
|
|
font-weight: 600;
|
|
font-size: 0.8125rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 2px solid var(--border-color, #e2e8f0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.report-table thead th[data-sortable] {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.report-table thead th[data-sortable]:hover {
|
|
background: var(--gray-100, #f3f4f6);
|
|
color: var(--primary-color, #3b82f6);
|
|
}
|
|
|
|
.report-table thead th.sort-asc,
|
|
.report-table thead th.sort-desc {
|
|
background: var(--primary-50, #eff6ff);
|
|
color: var(--primary-color, #3b82f6);
|
|
}
|
|
|
|
.report-table tbody tr {
|
|
transition: all 0.2s ease;
|
|
border-bottom: 1px solid var(--border-light, #f1f5f9);
|
|
}
|
|
|
|
.report-table tbody tr:hover {
|
|
background: var(--surface-hover, #f8fafc);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.report-table tbody td {
|
|
padding: 1rem 1.25rem;
|
|
vertical-align: middle;
|
|
font-size: 0.9375rem;
|
|
color: var(--text-primary, #1e293b);
|
|
}
|
|
|
|
.report-table tbody td strong {
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1e293b);
|
|
}
|
|
|
|
/* Table Actions */
|
|
.table-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.btn-action {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
border-radius: var(--border-radius-sm, 6px);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-action:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.btn-action--view {
|
|
background: var(--primary-50, #eff6ff);
|
|
color: var(--primary-color, #3b82f6);
|
|
border: 1px solid var(--primary-200, #bfdbfe);
|
|
}
|
|
|
|
.btn-action--view:hover {
|
|
background: var(--primary-color, #3b82f6);
|
|
color: white;
|
|
}
|
|
|
|
.btn-action--more {
|
|
background: var(--gray-50, #f9fafb);
|
|
color: var(--text-secondary, #475569);
|
|
border: 1px solid var(--border-color, #e2e8f0);
|
|
}
|
|
|
|
.btn-action--more:hover {
|
|
background: var(--gray-100, #f3f4f6);
|
|
color: var(--text-primary, #1e293b);
|
|
}
|
|
|
|
/* Chart Containers */
|
|
.chart-container {
|
|
position: relative;
|
|
height: 350px;
|
|
margin: 1.5rem 0;
|
|
padding: 1.5rem;
|
|
background: var(--card-bg, #ffffff);
|
|
border-radius: var(--border-radius, 8px);
|
|
border: 1px solid var(--border-light, #f1f5f9);
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1e293b);
|
|
margin: 0;
|
|
}
|
|
|
|
.chart-controls {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.chart-toggle-btn {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
border: 1px solid var(--border-color, #e2e8f0);
|
|
background: var(--card-bg, #ffffff);
|
|
color: var(--text-secondary, #475569);
|
|
border-radius: var(--border-radius-sm, 6px);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.chart-toggle-btn:hover,
|
|
.chart-toggle-btn.active {
|
|
background: var(--primary-color, #3b82f6);
|
|
color: white;
|
|
border-color: var(--primary-color, #3b82f6);
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-state {
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 4rem;
|
|
color: var(--gray-300, #d1d5db);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.empty-state h5 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary, #475569);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.empty-state p {
|
|
font-size: 0.9375rem;
|
|
color: var(--text-tertiary, #64748b);
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Pagination Controls */
|
|
.pagination-controls {
|
|
border-top: 1px solid var(--border-light, #f1f5f9);
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary, #475569);
|
|
}
|
|
|
|
.pagination .page-link {
|
|
color: var(--text-secondary, #475569);
|
|
border: 1px solid var(--border-color, #e2e8f0);
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
border-radius: var(--border-radius-sm, 6px);
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
.pagination .page-link:hover {
|
|
background: var(--primary-50, #eff6ff);
|
|
color: var(--primary-color, #3b82f6);
|
|
border-color: var(--primary-200, #bfdbfe);
|
|
}
|
|
|
|
.pagination .page-item.active .page-link {
|
|
background: var(--primary-color, #3b82f6);
|
|
border-color: var(--primary-color, #3b82f6);
|
|
color: white;
|
|
}
|
|
|
|
.pagination .page-item.disabled .page-link {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Report Export Options */
|
|
.export-options {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.export-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1.25rem;
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
border-radius: var(--border-radius, 8px);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.export-btn i {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.export-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Progress Bars */
|
|
.progress-compact {
|
|
height: 8px;
|
|
border-radius: var(--border-radius-full, 9999px);
|
|
background: var(--gray-100, #f3f4f6);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-compact .progress-bar {
|
|
border-radius: var(--border-radius-full, 9999px);
|
|
transition: width 0.6s ease;
|
|
}
|
|
|
|
/* Report Stats Grid */
|
|
.report-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.report-stat-item {
|
|
padding: 1.25rem;
|
|
background: var(--card-bg, #ffffff);
|
|
border: 1px solid var(--border-light, #f1f5f9);
|
|
border-radius: var(--border-radius, 8px);
|
|
cursor: default;
|
|
}
|
|
|
|
.report-stat-label {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary, #475569);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.report-stat-value {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #1e293b);
|
|
}
|
|
|
|
/* Hover Card Effects */
|
|
.hover-lift {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
.filters-card,
|
|
.export-options,
|
|
.btn-action,
|
|
.pagination-controls,
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.summary-card {
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.report-table {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.chart-container {
|
|
break-inside: avoid;
|
|
}
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.summary-value {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.summary-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.chart-container {
|
|
height: 280px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.report-table thead th,
|
|
.report-table tbody td {
|
|
padding: 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
#datePresets .btn-group {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
#datePresets .btn {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.export-options {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.export-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.report-stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Loading State */
|
|
.report-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4rem 2rem;
|
|
color: var(--text-secondary, #475569);
|
|
}
|
|
|
|
.report-loading .spinner-border {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-width: 0.3rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.report-loading-text {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Badges and Tags */
|
|
.report-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
border-radius: var(--border-radius-full, 9999px);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.report-badge.badge-billable {
|
|
background: var(--success-light, #d1fae5);
|
|
color: var(--success-color, #10b981);
|
|
}
|
|
|
|
.report-badge.badge-non-billable {
|
|
background: var(--gray-100, #f3f4f6);
|
|
color: var(--text-tertiary, #64748b);
|
|
}
|
|
|
|
/* Table Search */
|
|
.table-search-container {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.table-search {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 0.625rem 1rem;
|
|
border: 1px solid var(--border-color, #e2e8f0);
|
|
border-radius: var(--border-radius, 8px);
|
|
font-size: 0.9375rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.table-search:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color, #3b82f6);
|
|
box-shadow: var(--focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.12));
|
|
}
|
|
|
|
/* Comparison View */
|
|
.comparison-view {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.comparison-card {
|
|
padding: 1.5rem;
|
|
background: var(--card-bg, #ffffff);
|
|
border: 2px solid var(--border-light, #f1f5f9);
|
|
border-radius: var(--border-radius-lg, 12px);
|
|
cursor: default;
|
|
}
|
|
|
|
.comparison-header {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1e293b);
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 2px solid var(--border-light, #f1f5f9);
|
|
}
|
|
|
|
.comparison-metric {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 0;
|
|
}
|
|
|
|
.comparison-metric-label {
|
|
font-size: 0.9375rem;
|
|
color: var(--text-secondary, #475569);
|
|
}
|
|
|
|
.comparison-metric-value {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1e293b);
|
|
}
|
|
|
|
/* Reports Grid - Clean Compact Layout */
|
|
.reports-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.report-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background: var(--card-bg, #ffffff);
|
|
border: 1px solid var(--border-light, #f1f5f9);
|
|
border-radius: var(--border-radius, 8px);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.report-item:hover {
|
|
background: var(--surface-hover, #f8fafc);
|
|
border-color: var(--primary-color, #3b82f6);
|
|
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.report-item-icon {
|
|
flex-shrink: 0;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: var(--border-radius, 8px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.report-item-content {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.report-item-title {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1e293b);
|
|
margin: 0 0 0.25rem 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.report-item-description {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary, #64748b);
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.report-item-arrow {
|
|
flex-shrink: 0;
|
|
color: var(--text-muted, #9ca3af);
|
|
font-size: 0.875rem;
|
|
margin-left: 0.75rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.report-item:hover .report-item-arrow {
|
|
color: var(--primary-color, #3b82f6);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* Purple color utility for analytics */
|
|
.bg-purple {
|
|
background-color: #8b5cf6 !important;
|
|
}
|
|
|
|
.text-purple {
|
|
color: #8b5cf6 !important;
|
|
}
|
|
|
|
/* Responsive adjustments for report grid */
|
|
@media (max-width: 768px) {
|
|
.reports-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.report-item {
|
|
padding: 0.875rem;
|
|
}
|
|
|
|
.report-item-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 1.125rem;
|
|
margin-right: 0.875rem;
|
|
}
|
|
|
|
.report-item-title {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.report-item-description {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|