Simplify employee salary specification view

Reduces complexity of salary details table by streamlining columns and layout

Removes detailed salary configuration display
Focuses on essential weekly salary information
Improves readability of salary specifications accordion
This commit is contained in:
Janus C. H. Knudsen 2026-01-23 22:47:16 +01:00
parent a1059adf06
commit 4d7e1ecbd5
3 changed files with 89 additions and 110 deletions

View file

@ -960,16 +960,16 @@ swp-employee-display {
Reuses: swp-accordion (accordion.css), swp-data-table (components.css)
=========================================== */
swp-card.salary-specifications {
margin-top: var(--spacing-8);
/* No extra margin needed when inside column */
}
swp-card.salary-specifications swp-accordion {
padding: 0 var(--spacing-6) var(--spacing-6);
}
/* Table columns for weeks data (9 columns) */
swp-card.salary-specifications swp-data-table.specification-weeks {
grid-template-columns: 70px repeat(8, 1fr);
/* Table columns for weeks data (4 columns - compact view) */
swp-card.salary-specifications swp-data-table.specification-weeks-compact {
grid-template-columns: 70px 1fr 1fr 1fr;
}
/* Cell styling */

View file

@ -1,5 +1,5 @@
import { createChart } from '@sevenweirdpeople/swp-charting';
import { Accordion, initAccordions } from './accordion';
import { Accordion } from './accordion';
/**
* Employees Controller
@ -93,14 +93,30 @@ export class EmployeesController {
this.ratesSync = new RatesSyncController();
this.scheduleController = new ScheduleController();
this.statsController = new EmployeeStatsController();
this.initSalaryAccordions();
this.setupSalaryTabListener();
}
/**
* Initialize salary accordions when they exist
* Listen for salary tab activation to initialize accordions
*/
private setupSalaryTabListener(): void {
document.addEventListener('click', (e: Event) => {
const target = e.target as HTMLElement;
const tab = target.closest<HTMLElement>('swp-tab[data-tab="salary"]');
if (tab) {
// Small delay to ensure tab content is visible
setTimeout(() => this.initSalaryAccordions(), 50);
}
});
}
/**
* Initialize salary tab accordions
*/
private initSalaryAccordions(): void {
// Initialize all accordions in the salary tab
if (this.salaryAccordions.length > 0) return;
const salaryTab = document.querySelector('swp-tab-content[data-tab="salary"]');
if (salaryTab) {
salaryTab.querySelectorAll<HTMLElement>('swp-accordion').forEach(accordion => {