Refactor UI components and update stylesheets

Standardizes markup structure for invoice history, employee table, and salary history components

Simplifies HTML markup by removing unnecessary wrapper elements
Applies consistent CSS class naming and styling approach
Improves component readability and maintainability
This commit is contained in:
Janus C. H. Knudsen 2026-01-14 17:37:53 +01:00
parent 679c3fb3a6
commit 8b2a630861
5 changed files with 144 additions and 251 deletions

View file

@ -1,108 +1,101 @@
<swp-invoices-card>
<swp-invoices-header>
<swp-invoices-title localize="account.invoices.title">Faktura-historik</swp-invoices-title>
</swp-invoices-header>
<swp-card class="invoice-history">
<swp-section-label localize="account.invoices.title">Faktura-historik</swp-section-label>
<swp-data-table>
<swp-data-table-header>
<swp-data-table-cell localize="account.invoices.date">Dato</swp-data-table-cell>
<swp-data-table-cell localize="account.invoices.invoiceNumber">Fakturanr.</swp-data-table-cell>
<swp-data-table-cell localize="account.invoices.amount">Beløb</swp-data-table-cell>
<swp-data-table-cell localize="common.status">Status</swp-data-table-cell>
<swp-data-table-cell></swp-data-table-cell>
</swp-data-table-header>
<swp-data-table-row>
<swp-data-table-cell>1. jan 2026</swp-data-table-cell>
<swp-data-table-cell class="mono">INV-2026-0001</swp-data-table-cell>
<swp-data-table-cell>599,00 kr</swp-data-table-cell>
<swp-data-table-cell>
<swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status>
</swp-data-table-cell>
<swp-data-table-cell>
<swp-download-btn>
<i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span>
</swp-download-btn>
</swp-data-table-cell>
</swp-data-table-row>
<swp-invoice-table>
<swp-invoice-table-header>
<swp-invoice-row>
<swp-invoice-cell localize="account.invoices.date">Dato</swp-invoice-cell>
<swp-invoice-cell localize="account.invoices.invoiceNumber">Fakturanr.</swp-invoice-cell>
<swp-invoice-cell localize="account.invoices.amount">Beløb</swp-invoice-cell>
<swp-invoice-cell localize="common.status">Status</swp-invoice-cell>
<swp-invoice-cell></swp-invoice-cell>
</swp-invoice-row>
</swp-invoice-table-header>
<swp-invoice-table-body>
<swp-invoice-row>
<swp-invoice-cell>1. jan 2026</swp-invoice-cell>
<swp-invoice-cell class="mono">INV-2026-0001</swp-invoice-cell>
<swp-invoice-cell>599,00 kr</swp-invoice-cell>
<swp-invoice-cell>
<swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status>
</swp-invoice-cell>
<swp-invoice-cell>
<swp-download-btn>
<i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span>
</swp-download-btn>
</swp-invoice-cell>
</swp-invoice-row>
<swp-data-table-row>
<swp-data-table-cell>1. dec 2025</swp-data-table-cell>
<swp-data-table-cell class="mono">INV-2025-0012</swp-data-table-cell>
<swp-data-table-cell>599,00 kr</swp-data-table-cell>
<swp-data-table-cell>
<swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status>
</swp-data-table-cell>
<swp-data-table-cell>
<swp-download-btn>
<i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span>
</swp-download-btn>
</swp-data-table-cell>
</swp-data-table-row>
<swp-invoice-row>
<swp-invoice-cell>1. dec 2025</swp-invoice-cell>
<swp-invoice-cell class="mono">INV-2025-0012</swp-invoice-cell>
<swp-invoice-cell>599,00 kr</swp-invoice-cell>
<swp-invoice-cell>
<swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status>
</swp-invoice-cell>
<swp-invoice-cell>
<swp-download-btn>
<i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span>
</swp-download-btn>
</swp-invoice-cell>
</swp-invoice-row>
<swp-data-table-row>
<swp-data-table-cell>1. nov 2025</swp-data-table-cell>
<swp-data-table-cell class="mono">INV-2025-0011</swp-data-table-cell>
<swp-data-table-cell>599,00 kr</swp-data-table-cell>
<swp-data-table-cell>
<swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status>
</swp-data-table-cell>
<swp-data-table-cell>
<swp-download-btn>
<i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span>
</swp-download-btn>
</swp-data-table-cell>
</swp-data-table-row>
<swp-invoice-row>
<swp-invoice-cell>1. nov 2025</swp-invoice-cell>
<swp-invoice-cell class="mono">INV-2025-0011</swp-invoice-cell>
<swp-invoice-cell>599,00 kr</swp-invoice-cell>
<swp-invoice-cell>
<swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status>
</swp-invoice-cell>
<swp-invoice-cell>
<swp-download-btn>
<i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span>
</swp-download-btn>
</swp-invoice-cell>
</swp-invoice-row>
<swp-data-table-row>
<swp-data-table-cell>1. okt 2025</swp-data-table-cell>
<swp-data-table-cell class="mono">INV-2025-0010</swp-data-table-cell>
<swp-data-table-cell>599,00 kr</swp-data-table-cell>
<swp-data-table-cell>
<swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status>
</swp-data-table-cell>
<swp-data-table-cell>
<swp-download-btn>
<i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span>
</swp-download-btn>
</swp-data-table-cell>
</swp-data-table-row>
<swp-invoice-row>
<swp-invoice-cell>1. okt 2025</swp-invoice-cell>
<swp-invoice-cell class="mono">INV-2025-0010</swp-invoice-cell>
<swp-invoice-cell>599,00 kr</swp-invoice-cell>
<swp-invoice-cell>
<swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status>
</swp-invoice-cell>
<swp-invoice-cell>
<swp-download-btn>
<i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span>
</swp-download-btn>
</swp-invoice-cell>
</swp-invoice-row>
<swp-invoice-row>
<swp-invoice-cell>1. sep 2025</swp-invoice-cell>
<swp-invoice-cell class="mono">INV-2025-0009</swp-invoice-cell>
<swp-invoice-cell>599,00 kr</swp-invoice-cell>
<swp-invoice-cell>
<swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status>
</swp-invoice-cell>
<swp-invoice-cell>
<swp-download-btn>
<i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span>
</swp-download-btn>
</swp-invoice-cell>
</swp-invoice-row>
</swp-invoice-table-body>
</swp-invoice-table>
</swp-invoices-card>
<swp-data-table-row>
<swp-data-table-cell>1. sep 2025</swp-data-table-cell>
<swp-data-table-cell class="mono">INV-2025-0009</swp-data-table-cell>
<swp-data-table-cell>599,00 kr</swp-data-table-cell>
<swp-data-table-cell>
<swp-invoice-status class="paid">
<i class="ph ph-check-circle"></i>
<span localize="account.invoices.paid">Betalt</span>
</swp-invoice-status>
</swp-data-table-cell>
<swp-data-table-cell>
<swp-download-btn>
<i class="ph ph-download"></i>
<span localize="account.invoices.download">PDF</span>
</swp-download-btn>
</swp-data-table-cell>
</swp-data-table-row>
</swp-data-table>
</swp-card>