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

Redesigns cash reconciliation overview page

Browse source 
Refactors the cash reconciliation list view with improved UI and UX

Adds period display and filtering capabilities
Introduces table with enhanced status and period tracking
Implements SAF-T export functionality for selected reconciliations
This commit is contained in:
Janus C. H. Knudsen 2025-12-29 17:14:11 +01:00
parent 1acab8c049
commit b5d5cfdf33
2 changed files with 855 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

95
wwwroot/poc-kasseafstemning.html
View file

@ -258,6 +258,47 @@
border-top: 1px solid var(--color-border);
}
/* ==========================================
PERIOD DISPLAY
========================================== */
swp-period-display {
display: block;
padding: 16px;
background: var(--color-background-alt);
border-radius: 8px;
}
swp-period-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
margin-bottom: 8px;
}
swp-period-value {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
color: var(--color-text);
}
swp-period-value .arrow {
color: var(--color-teal);
font-weight: 400;
}
swp-period-hint {
display: block;
font-size: 12px;
color: var(--color-text-secondary);
margin-top: 8px;
}
/* ==========================================
DATA TABLE
========================================== */
@ -788,27 +829,18 @@
<swp-card-hint>Identificér afstemningen</swp-card-hint>
</swp-card-header>
<swp-card-body>
<swp-form-grid>
<swp-form-field>
<swp-form-label>Dato <span class="required">*</span></swp-form-label>
<swp-form-input>
<input type="date" id="reconciliationDate" />
</swp-form-input>
</swp-form-field>
<swp-period-display>
<swp-period-label>Periode</swp-period-label>
<swp-period-value>
<span class="from">28. dec 2025 kl. 18:00</span>
<span class="arrow">→</span>
<span class="to">29. dec 2025</span>
</swp-period-value>
</swp-period-display>
<swp-form-grid style="margin-top: 20px;">
<swp-form-field>
<swp-form-label>Medarbejder <span class="required">*</span></swp-form-label>
<swp-form-input>
<select id="employee">
<option>Anna Jensen</option>
<option>Karina Knudsen</option>
<option>Martin Nielsen</option>
</select>
</swp-form-input>
</swp-form-field>
<swp-form-field>
<swp-form-label>Kassepunkt <span class="required">*</span></swp-form-label>
<swp-form-label>Kassepunkt</swp-form-label>
<swp-form-input>
<select id="register">
<option>Kasse 1 – Reception</option>
@ -818,18 +850,18 @@
</swp-form-field>
<swp-form-field>
<swp-form-label>Skift (valgfrit)</swp-form-label>
<swp-form-label>Afsluttet af</swp-form-label>
<swp-form-input>
<select id="shift">
<option>Ikke angivet</option>
<option>Morgen (08-14)</option>
<option>Eftermiddag (14-20)</option>
<select id="employee">
<option>Anna Jensen</option>
<option>Karina Knudsen</option>
<option>Martin Nielsen</option>
</select>
</swp-form-input>
</swp-form-field>
</swp-form-grid>
<swp-auto-id>Afstemnings-ID: <strong id="reconciliationId">KA-2025-12-29-01</strong> · oprettet automatisk</swp-auto-id>
<swp-auto-id>Afstemnings-ID: <strong>KA-2025-12-29</strong> · Z-043</swp-auto-id>
</swp-card-body>
</swp-card>
@ -893,19 +925,6 @@
</swp-page-container>
<script>
// Set today's date
const dateInput = document.getElementById('reconciliationDate');
const today = new Date();
dateInput.value = today.toISOString().split('T')[0];
// Update reconciliation ID based on date
function updateReconciliationId() {
const date = new Date(dateInput.value);
const id = `KA-${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}-01`;
document.getElementById('reconciliationId').textContent = id;
}
dateInput.addEventListener('change', updateReconciliationId);
// Base values (from system)
const startBalance = 2000;
const cashSales = 3540;