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:
parent
a1059adf06
commit
4d7e1ecbd5
3 changed files with 89 additions and 110 deletions
|
|
@ -90,9 +90,9 @@
|
||||||
</swp-edit-section>
|
</swp-edit-section>
|
||||||
</swp-card>
|
</swp-card>
|
||||||
</swp-card-column>
|
</swp-card-column>
|
||||||
</swp-detail-grid>
|
|
||||||
|
|
||||||
<!-- Loenspecifikationer (full width accordion) -->
|
<swp-card-column>
|
||||||
|
<!-- Loenspecifikationer -->
|
||||||
<swp-card class="salary-specifications">
|
<swp-card class="salary-specifications">
|
||||||
<swp-card-header>
|
<swp-card-header>
|
||||||
<swp-card-title>@Model.LabelSpecifications</swp-card-title>
|
<swp-card-title>@Model.LabelSpecifications</swp-card-title>
|
||||||
|
|
@ -117,42 +117,13 @@
|
||||||
</swp-accordion-summary>
|
</swp-accordion-summary>
|
||||||
</swp-accordion-header>
|
</swp-accordion-header>
|
||||||
<swp-accordion-content>
|
<swp-accordion-content>
|
||||||
<!-- Config row -->
|
|
||||||
<swp-config-row>
|
|
||||||
<swp-config-item>
|
|
||||||
<swp-config-label>@Model.LabelNormalRate:</swp-config-label>
|
|
||||||
<swp-config-value class="mono">@spec.Config.HourlyRateFormatted</swp-config-value>
|
|
||||||
</swp-config-item>
|
|
||||||
<swp-config-item>
|
|
||||||
<swp-config-label>@Model.LabelWeeklyNorm:</swp-config-label>
|
|
||||||
<swp-config-value>@spec.Config.WeeklyHoursFormatted</swp-config-value>
|
|
||||||
</swp-config-item>
|
|
||||||
<swp-config-item>
|
|
||||||
<swp-config-label>@Model.LabelOvertimeMultiplier:</swp-config-label>
|
|
||||||
<swp-config-value>@spec.Config.OvertimeFormatted</swp-config-value>
|
|
||||||
</swp-config-item>
|
|
||||||
<swp-config-item>
|
|
||||||
<swp-config-label>@Model.LabelMinimum:</swp-config-label>
|
|
||||||
<swp-config-value class="mono">@spec.Config.MinimumFormatted</swp-config-value>
|
|
||||||
</swp-config-item>
|
|
||||||
<swp-config-item>
|
|
||||||
<swp-config-label>@Model.LabelProvision:</swp-config-label>
|
|
||||||
<swp-config-value>@spec.Config.CommissionFormatted</swp-config-value>
|
|
||||||
</swp-config-item>
|
|
||||||
</swp-config-row>
|
|
||||||
|
|
||||||
<!-- Weeks table -->
|
<!-- Weeks table -->
|
||||||
<swp-accordion-table>
|
<swp-accordion-table>
|
||||||
<swp-data-table class="specification-weeks">
|
<swp-data-table class="specification-weeks-compact">
|
||||||
<swp-data-table-header>
|
<swp-data-table-header>
|
||||||
<swp-data-table-cell>@Model.LabelWeek</swp-data-table-cell>
|
<swp-data-table-cell>@Model.LabelWeek</swp-data-table-cell>
|
||||||
<swp-data-table-cell>Timer</swp-data-table-cell>
|
<swp-data-table-cell>Timer</swp-data-table-cell>
|
||||||
<swp-data-table-cell>Overtid</swp-data-table-cell>
|
<swp-data-table-cell>Overtid</swp-data-table-cell>
|
||||||
<swp-data-table-cell>Ferie</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell>Services</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell>Produkter</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell>Minimum</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell>Provision</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell>I alt</swp-data-table-cell>
|
<swp-data-table-cell>I alt</swp-data-table-cell>
|
||||||
</swp-data-table-header>
|
</swp-data-table-header>
|
||||||
@foreach (var week in spec.Weeks)
|
@foreach (var week in spec.Weeks)
|
||||||
|
|
@ -161,11 +132,6 @@
|
||||||
<swp-data-table-cell>Uge @week.WeekNumber</swp-data-table-cell>
|
<swp-data-table-cell>Uge @week.WeekNumber</swp-data-table-cell>
|
||||||
<swp-data-table-cell class="mono">@week.NormalHoursFormatted</swp-data-table-cell>
|
<swp-data-table-cell class="mono">@week.NormalHoursFormatted</swp-data-table-cell>
|
||||||
<swp-data-table-cell class="mono @(week.HasOvertime ? "warning" : "")">@week.OvertimeHoursFormatted</swp-data-table-cell>
|
<swp-data-table-cell class="mono @(week.HasOvertime ? "warning" : "")">@week.OvertimeHoursFormatted</swp-data-table-cell>
|
||||||
<swp-data-table-cell class="mono">@week.VacationDaysFormatted</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell class="mono">@week.ServiceRevenueFormatted</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell class="mono">@week.ProductRevenueFormatted</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell class="mono">@week.MinimumThresholdFormatted</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell class="mono @(week.HasCommission ? "highlight" : "")">@week.CommissionFormatted</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell class="mono">@week.TotalPayFormatted</swp-data-table-cell>
|
<swp-data-table-cell class="mono">@week.TotalPayFormatted</swp-data-table-cell>
|
||||||
</swp-data-table-row>
|
</swp-data-table-row>
|
||||||
}
|
}
|
||||||
|
|
@ -173,11 +139,6 @@
|
||||||
<swp-data-table-cell>TOTAL</swp-data-table-cell>
|
<swp-data-table-cell>TOTAL</swp-data-table-cell>
|
||||||
<swp-data-table-cell class="mono">@(spec.Weeks.Sum(w => w.NormalHours))t</swp-data-table-cell>
|
<swp-data-table-cell class="mono">@(spec.Weeks.Sum(w => w.NormalHours))t</swp-data-table-cell>
|
||||||
<swp-data-table-cell class="mono">@(spec.Weeks.Sum(w => w.OvertimeHours))t</swp-data-table-cell>
|
<swp-data-table-cell class="mono">@(spec.Weeks.Sum(w => w.OvertimeHours))t</swp-data-table-cell>
|
||||||
<swp-data-table-cell class="mono">@(spec.Weeks.Sum(w => w.VacationDays)) dg</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell class="mono">@(spec.Weeks.Sum(w => w.ServiceRevenue).ToString("N0", System.Globalization.CultureInfo.GetCultureInfo("da-DK"))) kr</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell class="mono">@(spec.Weeks.Sum(w => w.ProductRevenue).ToString("N0", System.Globalization.CultureInfo.GetCultureInfo("da-DK"))) kr</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell class="mono">-</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell class="mono">@(spec.Weeks.Sum(w => w.Commission).ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("da-DK"))) kr</swp-data-table-cell>
|
|
||||||
<swp-data-table-cell class="mono">@(spec.Weeks.Sum(w => w.TotalPay).ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("da-DK"))) kr</swp-data-table-cell>
|
<swp-data-table-cell class="mono">@(spec.Weeks.Sum(w => w.TotalPay).ToString("N2", System.Globalization.CultureInfo.GetCultureInfo("da-DK"))) kr</swp-data-table-cell>
|
||||||
</swp-data-table-footer>
|
</swp-data-table-footer>
|
||||||
</swp-data-table>
|
</swp-data-table>
|
||||||
|
|
@ -193,6 +154,8 @@
|
||||||
}
|
}
|
||||||
</swp-accordion>
|
</swp-accordion>
|
||||||
</swp-card>
|
</swp-card>
|
||||||
|
</swp-card-column>
|
||||||
|
</swp-detail-grid>
|
||||||
|
|
||||||
<!-- Rates drawer -->
|
<!-- Rates drawer -->
|
||||||
<div id="rates-drawer" data-drawer="lg">
|
<div id="rates-drawer" data-drawer="lg">
|
||||||
|
|
|
||||||
|
|
@ -960,16 +960,16 @@ swp-employee-display {
|
||||||
Reuses: swp-accordion (accordion.css), swp-data-table (components.css)
|
Reuses: swp-accordion (accordion.css), swp-data-table (components.css)
|
||||||
=========================================== */
|
=========================================== */
|
||||||
swp-card.salary-specifications {
|
swp-card.salary-specifications {
|
||||||
margin-top: var(--spacing-8);
|
/* No extra margin needed when inside column */
|
||||||
}
|
}
|
||||||
|
|
||||||
swp-card.salary-specifications swp-accordion {
|
swp-card.salary-specifications swp-accordion {
|
||||||
padding: 0 var(--spacing-6) var(--spacing-6);
|
padding: 0 var(--spacing-6) var(--spacing-6);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Table columns for weeks data (9 columns) */
|
/* Table columns for weeks data (4 columns - compact view) */
|
||||||
swp-card.salary-specifications swp-data-table.specification-weeks {
|
swp-card.salary-specifications swp-data-table.specification-weeks-compact {
|
||||||
grid-template-columns: 70px repeat(8, 1fr);
|
grid-template-columns: 70px 1fr 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cell styling */
|
/* Cell styling */
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { createChart } from '@sevenweirdpeople/swp-charting';
|
import { createChart } from '@sevenweirdpeople/swp-charting';
|
||||||
import { Accordion, initAccordions } from './accordion';
|
import { Accordion } from './accordion';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Employees Controller
|
* Employees Controller
|
||||||
|
|
@ -93,14 +93,30 @@ export class EmployeesController {
|
||||||
this.ratesSync = new RatesSyncController();
|
this.ratesSync = new RatesSyncController();
|
||||||
this.scheduleController = new ScheduleController();
|
this.scheduleController = new ScheduleController();
|
||||||
this.statsController = new EmployeeStatsController();
|
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 {
|
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"]');
|
const salaryTab = document.querySelector('swp-tab-content[data-tab="salary"]');
|
||||||
if (salaryTab) {
|
if (salaryTab) {
|
||||||
salaryTab.querySelectorAll<HTMLElement>('swp-accordion').forEach(accordion => {
|
salaryTab.querySelectorAll<HTMLElement>('swp-accordion').forEach(accordion => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue