Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds time reporting UI with filtering and charts

Browse source 
Implements comprehensive hours report tab with:
- Period and employee filtering
- Statistical overview cards
- Hours per week and absence distribution charts
- Detailed employee hours table

Enhances reports page interactivity and data visualization
This commit is contained in:
Janus C. H. Knudsen 2026-01-21 22:45:47 +01:00
parent 2f92b0eb7b
commit 0144e1ae17
4 changed files with 605 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

99
PlanTempus.Application/wwwroot/css/reports.css
View file

@ -1,9 +1,10 @@
/**
* Reports - Statistik og Rapporter
*
* Feature-specific styling for reports pages.
* Feature-specific styling for reports pages (Salgsrapport, Timerapport).
* Reuses: swp-stats-row (stats.css), swp-stat-card (stats.css),
* swp-tab-bar (tabs.css), swp-data-table (components.css)
* swp-tab-bar (tabs.css), swp-data-table (components.css),
* swp-status-badge (components.css), swp-card (components.css)
*/
/* ===========================================
@ -359,6 +360,100 @@ swp-page-btn {
}
}
/* ===========================================
PERIOD SELECTOR (for time reports)
=========================================== */
swp-period-selector {
display: flex;
background: var(--color-background-alt);
border-radius: var(--radius-md);
padding: var(--spacing-1);
& button {
padding: var(--spacing-3) var(--spacing-5);
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
font-family: var(--font-family);
border: none;
background: transparent;
color: var(--color-text-secondary);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-fast);
&:hover {
color: var(--color-text);
}
&.active {
background: var(--color-teal);
color: white;
}
}
}
/* ===========================================
HOURS TABLE - Grid columns
=========================================== */
swp-card.hours-table {
padding: 0;
overflow: hidden;
}
swp-card.hours-table swp-data-table {
grid-template-columns: 200px repeat(7, 1fr);
}
swp-card.hours-table swp-data-table-header {
padding: var(--spacing-4) var(--card-padding);
}
swp-card.hours-table swp-data-table-row {
padding: var(--spacing-5) var(--card-padding);
}
swp-card.hours-table swp-data-table-cell.name {
font-weight: var(--font-weight-medium);
}
swp-card.hours-table swp-data-table-cell.number {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}
swp-card.hours-table swp-data-table-cell.danger {
color: var(--color-red);
}
swp-card.hours-table swp-data-table-cell.warning {
color: var(--color-amber);
}
swp-card.hours-table swp-data-table-cell.purple {
color: var(--color-purple);
}
/* ===========================================
STATUS BADGE ADDITIONS (absence percentages)
=========================================== */
swp-status-badge.low {
background: var(--bg-green-strong);
color: var(--color-green);
font-family: var(--font-mono);
}
swp-status-badge.medium {
background: var(--bg-amber-strong);
color: var(--color-amber);
font-family: var(--font-mono);
}
swp-status-badge.high {
background: var(--bg-red-strong);
color: var(--color-red);
font-family: var(--font-mono);
}
/* ===========================================
RESPONSIVE
=========================================== */