Adds localization support across application views

Implements localization for dashboard, cash register, account, and profile sections

Adds localization keys for various UI elements, improving internationalization support
Refactors view components to use ILocalizationService for dynamic text rendering
Prepares ground for multi-language support with translation-ready markup
This commit is contained in:
Janus C. H. Knudsen 2026-01-12 15:42:18 +01:00
parent 1f400dcc6e
commit ef174af0e1
36 changed files with 821 additions and 263 deletions

View file

@ -1,21 +1,21 @@
<swp-card>
<swp-card-header>
<swp-card-title>Afslut dagen</swp-card-title>
<swp-card-title localize="cash.approval.title">Afslut dagen</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-approval-grid>
<swp-form-field>
<swp-form-label>Status</swp-form-label>
<swp-form-label localize="common.status">Status</swp-form-label>
<swp-status-row>
<swp-status-badge class="draft">Kladde</swp-status-badge>
<swp-status-badge class="draft" localize="cash.status.draft">Kladde</swp-status-badge>
</swp-status-row>
</swp-form-field>
<swp-form-field>
<swp-form-label>Godkendt af (valgfrit)</swp-form-label>
<swp-form-label localize="cash.approval.approvedBy">Godkendt af (valgfrit)</swp-form-label>
<swp-form-input>
<select id="approver">
<option value="">Vælg...</option>
<option value="" localize="cash.approval.selectPlaceholder">Vælg...</option>
<option>Karina Knudsen</option>
<option>Butikschef</option>
</select>
@ -24,15 +24,15 @@
<swp-checkbox-field>
<input type="checkbox" id="confirmCheckbox" />
<label for="confirmCheckbox">Jeg bekræfter, at kassen er talt op, og at tallene er indtastet efter bedste evne.</label>
<label for="confirmCheckbox" localize="cash.approval.confirmation">Jeg bekræfter, at kassen er talt op, og at tallene er indtastet efter bedste evne.</label>
</swp-checkbox-field>
</swp-approval-grid>
</swp-card-content>
<swp-card-footer>
<swp-btn class="secondary">Gem som kladde</swp-btn>
<swp-btn class="secondary" localize="cash.approval.saveDraft">Gem som kladde</swp-btn>
<swp-actions-right>
<swp-btn class="ghost">Fortryd</swp-btn>
<swp-btn class="primary" id="approveBtn" disabled>Godkend & lås</swp-btn>
<swp-btn class="ghost" localize="common.cancel">Fortryd</swp-btn>
<swp-btn class="primary" id="approveBtn" disabled localize="cash.approval.approve">Godkend & lås</swp-btn>
</swp-actions-right>
</swp-card-footer>
</swp-card>

View file

@ -1,20 +1,20 @@
<swp-card>
<swp-card-header>
<swp-card-title>Kontanter i kassen</swp-card-title>
<swp-card-title localize="cash.balance.title">Kontanter i kassen</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-calc-row>
<swp-calc-label>
<span>Startbeholdning</span>
<small>Overført fra sidste afstemning</small>
<span localize="cash.balance.startBalance">Startbeholdning</span>
<small localize="cash.balance.startHint">Overført fra sidste afstemning</small>
</swp-calc-label>
<swp-calc-value class="muted">2.000,00</swp-calc-value>
</swp-calc-row>
<swp-calc-row>
<swp-calc-label>
<span>Udbetalinger / Bilag</span>
<small>Sammentæl bilag betalt kontant</small>
<span localize="cash.balance.payouts">Udbetalinger / Bilag</span>
<small localize="cash.balance.payoutsHint">Sammentæl bilag betalt kontant</small>
</swp-calc-label>
<swp-calc-input>
<input type="text" id="payouts" placeholder="0,00" />
@ -23,8 +23,8 @@
<swp-calc-row>
<swp-calc-label>
<span>Udtaget til bank</span>
<small>Kontanter lagt til side</small>
<span localize="cash.balance.toBank">Udtaget til bank</span>
<small localize="cash.balance.toBankHint">Kontanter lagt til side</small>
</swp-calc-label>
<swp-calc-input>
<input type="text" id="toBank" placeholder="0,00" />
@ -33,15 +33,15 @@
<swp-calc-row>
<swp-calc-label>
<span>Forventet kontantbeholdning</span>
<span localize="cash.balance.expected">Forventet kontantbeholdning</span>
</swp-calc-label>
<swp-calc-value id="expectedCash">5.220,00</swp-calc-value>
</swp-calc-row>
<swp-calc-row class="input-row">
<swp-calc-label>
<span>Optalt kontantbeholdning <span style="color: var(--color-red)">*</span></span>
<small>Hvad ligger der faktisk i kassen?</small>
<span><span localize="cash.balance.counted">Optalt kontantbeholdning</span> <span style="color: var(--color-red)">*</span></span>
<small localize="cash.balance.countedHint">Hvad ligger der faktisk i kassen?</small>
</swp-calc-label>
<swp-calc-input>
<input type="text" id="actualCash" placeholder="0,00" />

View file

@ -1,6 +1,6 @@
<swp-difference-box id="differenceBox" class="neutral">
<swp-difference-label>
Kontant difference
<span localize="cash.difference.title">Kassedifference</span>
<small>Optalt minus forventet</small>
</swp-difference-label>
<swp-difference-value id="differenceValue"> kr</swp-difference-value>

View file

@ -1,11 +1,10 @@
<swp-card>
<swp-card-header>
<swp-card-title>Periodeoplysninger</swp-card-title>
<swp-card-action>Identificér afstemningen</swp-card-action>
<swp-card-title localize="cash.period.title">Periodeoplysninger</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-period-display>
<swp-period-label>Periode</swp-period-label>
<swp-period-label localize="cash.period.dateRange">Periode</swp-period-label>
<swp-period-value>
<span class="from">28. dec 2025 kl. 18:00</span>
<span class="arrow">→</span>
@ -15,7 +14,7 @@
<swp-form-grid style="margin-top: var(--spacing-10);">
<swp-form-field>
<swp-form-label>Kassepunkt</swp-form-label>
<swp-form-label localize="cash.period.register">Kassepunkt</swp-form-label>
<swp-form-input>
<select id="register">
<option>Kasse 1 Reception</option>
@ -25,7 +24,7 @@
</swp-form-field>
<swp-form-field>
<swp-form-label>Afsluttet af</swp-form-label>
<swp-form-label localize="cash.period.employee">Medarbejder</swp-form-label>
<swp-form-input>
<select id="employee">
<option>Anna Jensen</option>

View file

@ -1,7 +1,7 @@
<swp-card>
<swp-card-header>
<swp-card-title>Periodens omsætning</swp-card-title>
<swp-card-action>Systemtal vs. kontrol</swp-card-action>
<swp-card-title localize="cash.revenue.title">Periodens omsætning</swp-card-title>
<swp-card-action localize="cash.revenue.subtitle">Systemtal vs. kontrol</swp-card-action>
</swp-card-header>
<swp-card-content>
<swp-data-table>
@ -12,7 +12,7 @@
</swp-data-header>
<swp-data-row>
<swp-data-label>Kortbetalinger</swp-data-label>
<swp-data-label localize="cash.revenue.cardPayments">Kortbetalinger</swp-data-label>
<swp-data-system>12.875,50</swp-data-system>
<swp-data-input>
<input type="text" placeholder="Valgfrit" />
@ -20,7 +20,7 @@
</swp-data-row>
<swp-data-row>
<swp-data-label>MobilePay / Online</swp-data-label>
<swp-data-label localize="cash.revenue.mobilePay">MobilePay / Online</swp-data-label>
<swp-data-system>2.450,00</swp-data-system>
<swp-data-input>
<input type="text" placeholder="Valgfrit" />
@ -28,12 +28,12 @@
</swp-data-row>
<swp-data-row>
<swp-data-label>Kontantsalg</swp-data-label>
<swp-data-label localize="cash.revenue.cashSales">Kontantsalg</swp-data-label>
<swp-data-system>3.540,00</swp-data-system>
<swp-data-value class="muted">..</swp-data-value>
</swp-data-row>
</swp-data-table>
<swp-table-note>Kort og MobilePay afstemmes mod bank/indløser. Kontanter tælles op nedenfor.</swp-table-note>
<swp-table-note localize="cash.revenue.hint">Kort og MobilePay afstemmes mod bank/indløser. Kontanter tælles op nedenfor.</swp-table-note>
</swp-card-content>
</swp-card>

View file

@ -1,12 +1,10 @@
<swp-card>
<swp-card-header>
<swp-card-title>Note til difference</swp-card-title>
<swp-card-action>Valgfrit</swp-card-action>
<swp-card-title localize="cash.note.title">Note til afstemning</swp-card-title>
</swp-card-header>
<swp-card-content>
<swp-note-field>
<textarea placeholder="Fx kassedifference, fejlslag, runding osv."></textarea>
<textarea placeholder="Beskriv evt. årsag til difference..."></textarea>
</swp-note-field>
<swp-note-hint>Kan gøres obligatorisk ved difference over 100 kr.</swp-note-hint>
</swp-card-content>
</swp-card>

View file

@ -1,11 +1,11 @@
<!-- Action Bar -->
<swp-action-bar>
<swp-selection-info>
<span id="selectionCount">0 valgt</span>
<span id="selectionCount" localize="cash.table.noneSelected">0 valgt</span>
</swp-selection-info>
<swp-btn class="primary" id="exportBtn" disabled>
<i class="ph ph-download"></i>
Eksporter SAF-T
<span localize="cash.table.exportSaft">Eksporter SAF-T</span>
</swp-btn>
</swp-action-bar>
@ -13,14 +13,14 @@
<swp-cash-table>
<swp-cash-table-header>
<swp-cash-th class="checkbox"><input type="checkbox" id="selectAll" /></swp-cash-th>
<swp-cash-th>Dato</swp-cash-th>
<swp-cash-th>ID</swp-cash-th>
<swp-cash-th>Periode</swp-cash-th>
<swp-cash-th>Kassepunkt</swp-cash-th>
<swp-cash-th>Afsluttet af</swp-cash-th>
<swp-cash-th class="right">Omsætning</swp-cash-th>
<swp-cash-th class="right">Difference</swp-cash-th>
<swp-cash-th>Status</swp-cash-th>
<swp-cash-th localize="cash.table.date">Dato</swp-cash-th>
<swp-cash-th localize="cash.table.id">ID</swp-cash-th>
<swp-cash-th localize="cash.table.period">Periode</swp-cash-th>
<swp-cash-th localize="cash.table.register">Kassepunkt</swp-cash-th>
<swp-cash-th localize="cash.table.closedBy">Afsluttet af</swp-cash-th>
<swp-cash-th class="right" localize="cash.table.revenue">Omsætning</swp-cash-th>
<swp-cash-th class="right" localize="cash.table.difference">Difference</swp-cash-th>
<swp-cash-th localize="common.status">Status</swp-cash-th>
<swp-cash-th></swp-cash-th>
</swp-cash-table-header>
@ -39,7 +39,7 @@
<swp-cash-td class="muted"></swp-cash-td>
<swp-cash-td class="right mono muted">4.250 kr</swp-cash-td>
<swp-cash-td class="right mono muted"></swp-cash-td>
<swp-cash-td><swp-status-badge class="draft">Kladde</swp-status-badge></swp-cash-td>
<swp-cash-td><swp-status-badge class="draft" localize="cash.status.draft">Kladde</swp-status-badge></swp-cash-td>
<swp-cash-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-cash-td>
</swp-cash-table-row>
@ -56,7 +56,7 @@
<swp-cash-td>Anna Jensen</swp-cash-td>
<swp-cash-td class="right mono">18.865 kr</swp-cash-td>
<swp-cash-td class="right mono">0 kr</swp-cash-td>
<swp-cash-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-cash-td>
<swp-cash-td><swp-status-badge class="approved" localize="cash.status.approved">Godkendt</swp-status-badge></swp-cash-td>
<swp-cash-td><swp-row-toggle><i class="ph ph-caret-right"></i></swp-row-toggle></swp-cash-td>
</swp-cash-table-row>
<swp-cash-row-detail data-for="043">
@ -64,15 +64,15 @@
<swp-row-detail-actions>
<swp-btn class="secondary">
<i class="ph ph-file-csv"></i>
Download CSV
<span localize="cash.table.downloadCsv">Download CSV</span>
</swp-btn>
<swp-btn class="secondary">
<i class="ph ph-file-pdf"></i>
Download PDF
<span localize="cash.table.downloadPdf">Download PDF</span>
</swp-btn>
<swp-btn class="primary">
<i class="ph ph-list-bullets"></i>
Se transaktioner
<span localize="cash.table.viewTransactions">Se transaktioner</span>
</swp-btn>
</swp-row-detail-actions>
</swp-row-detail-content>
@ -91,7 +91,7 @@
<swp-cash-td>Karina Knudsen</swp-cash-td>
<swp-cash-td class="right mono">12.450 kr</swp-cash-td>
<swp-cash-td class="right mono negative">-25 kr</swp-cash-td>
<swp-cash-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-cash-td>
<swp-cash-td><swp-status-badge class="approved" localize="cash.status.approved">Godkendt</swp-status-badge></swp-cash-td>
<swp-cash-td><swp-row-toggle><i class="ph ph-caret-right"></i></swp-row-toggle></swp-cash-td>
</swp-cash-table-row>
<swp-cash-row-detail data-for="042">
@ -99,15 +99,15 @@
<swp-row-detail-actions>
<swp-btn class="secondary">
<i class="ph ph-file-csv"></i>
Download CSV
<span localize="cash.table.downloadCsv">Download CSV</span>
</swp-btn>
<swp-btn class="secondary">
<i class="ph ph-file-pdf"></i>
Download PDF
<span localize="cash.table.downloadPdf">Download PDF</span>
</swp-btn>
<swp-btn class="primary">
<i class="ph ph-list-bullets"></i>
Se transaktioner
<span localize="cash.table.viewTransactions">Se transaktioner</span>
</swp-btn>
</swp-row-detail-actions>
</swp-row-detail-content>
@ -126,7 +126,7 @@
<swp-cash-td>Martin Nielsen</swp-cash-td>
<swp-cash-td class="right mono">21.340 kr</swp-cash-td>
<swp-cash-td class="right mono">0 kr</swp-cash-td>
<swp-cash-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-cash-td>
<swp-cash-td><swp-status-badge class="approved" localize="cash.status.approved">Godkendt</swp-status-badge></swp-cash-td>
<swp-cash-td><swp-row-toggle><i class="ph ph-caret-right"></i></swp-row-toggle></swp-cash-td>
</swp-cash-table-row>
<swp-cash-row-detail data-for="041">
@ -134,15 +134,15 @@
<swp-row-detail-actions>
<swp-btn class="secondary">
<i class="ph ph-file-csv"></i>
Download CSV
<span localize="cash.table.downloadCsv">Download CSV</span>
</swp-btn>
<swp-btn class="secondary">
<i class="ph ph-file-pdf"></i>
Download PDF
<span localize="cash.table.downloadPdf">Download PDF</span>
</swp-btn>
<swp-btn class="primary">
<i class="ph ph-list-bullets"></i>
Se transaktioner
<span localize="cash.table.viewTransactions">Se transaktioner</span>
</swp-btn>
</swp-row-detail-actions>
</swp-row-detail-content>
@ -161,7 +161,7 @@
<swp-cash-td>Anna Jensen</swp-cash-td>
<swp-cash-td class="right mono">28.750 kr</swp-cash-td>
<swp-cash-td class="right mono negative">-50 kr</swp-cash-td>
<swp-cash-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-cash-td>
<swp-cash-td><swp-status-badge class="approved" localize="cash.status.approved">Godkendt</swp-status-badge></swp-cash-td>
<swp-cash-td><swp-row-toggle><i class="ph ph-caret-right"></i></swp-row-toggle></swp-cash-td>
</swp-cash-table-row>
<swp-cash-row-detail data-for="040">
@ -169,15 +169,15 @@
<swp-row-detail-actions>
<swp-btn class="secondary">
<i class="ph ph-file-csv"></i>
Download CSV
<span localize="cash.table.downloadCsv">Download CSV</span>
</swp-btn>
<swp-btn class="secondary">
<i class="ph ph-file-pdf"></i>
Download PDF
<span localize="cash.table.downloadPdf">Download PDF</span>
</swp-btn>
<swp-btn class="primary">
<i class="ph ph-list-bullets"></i>
Se transaktioner
<span localize="cash.table.viewTransactions">Se transaktioner</span>
</swp-btn>
</swp-row-detail-actions>
</swp-row-detail-content>

View file

@ -1,28 +1,28 @@
<swp-filter-bar>
<swp-filter-group>
<swp-filter-label>Fra</swp-filter-label>
<swp-filter-label localize="common.from">Fra</swp-filter-label>
<input type="date" id="dateFrom" />
</swp-filter-group>
<swp-filter-group>
<swp-filter-label>Til</swp-filter-label>
<swp-filter-label localize="common.to">Til</swp-filter-label>
<input type="date" id="dateTo" />
</swp-filter-group>
<swp-filter-group>
<swp-filter-label>Kassepunkt</swp-filter-label>
<swp-filter-label localize="cash.filter.register">Kassepunkt</swp-filter-label>
<select id="register">
<option>Alle</option>
<option localize="common.all">Alle</option>
<option>Kasse 1 Reception</option>
<option>Kasse 2 Salon</option>
</select>
</swp-filter-group>
<swp-filter-group>
<swp-filter-label>Status</swp-filter-label>
<swp-filter-label localize="common.status">Status</swp-filter-label>
<select id="status">
<option>Alle</option>
<option>Godkendt</option>
<option>Kladde</option>
<option localize="common.all">Alle</option>
<option localize="cash.filter.approved">Godkendt</option>
<option localize="cash.filter.draft">Kladde</option>
</select>
</swp-filter-group>
<swp-filter-spacer></swp-filter-spacer>
<swp-btn class="secondary">Nulstil</swp-btn>
<swp-btn class="secondary" localize="common.reset">Nulstil</swp-btn>
</swp-filter-bar>