Enhances employee details with comprehensive salary and HR data
Adds detailed salary rates, commission structures, and HR-related records Introduces new data models and view components for: - Salary rates and supplements - Commissions and rate configurations - Employee HR tracking (certifications, courses, absence) Implements dynamic rate synchronization between drawer and card views
This commit is contained in:
Janus C. H. Knudsen
parent
2e6207bb0b
commit
f71f00099a
15 changed files with 1589 additions and 137 deletions
|
|
@ -3,14 +3,17 @@
|
|||
*
|
||||
* Employees-specific styling only.
|
||||
* Reuses: swp-stat-card (stats.css), swp-stats-row (stats.css), swp-tab-bar (tabs.css),
|
||||
* swp-btn, swp-status-badge, swp-icon-btn, swp-card, swp-section-label (components.css),
|
||||
* swp-btn, swp-status-badge, swp-icon-btn, swp-card, swp-section-label,
|
||||
* swp-add-button (components.css),
|
||||
* swp-row-toggle (cash.css),
|
||||
* swp-sticky-header, swp-header-content (page.css),
|
||||
* swp-toggle-slider, swp-checkbox-list (controls.css)
|
||||
*
|
||||
* Creates: swp-employee-table, swp-employee-row, swp-user-info,
|
||||
* swp-employee-avatar-large, swp-employee-detail-header,
|
||||
* swp-fact-inline, swp-edit-row, swp-detail-grid
|
||||
* swp-fact-inline, swp-edit-section/row/label/value/select, swp-detail-grid,
|
||||
* swp-salary-table, swp-document-list/item/info/name/meta/actions,
|
||||
* swp-subsection/title, swp-simple-list/item/text
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -434,7 +437,7 @@ swp-edit-label {
|
|||
swp-edit-value {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-background-alt);
|
||||
border: 1px solid transparent;
|
||||
|
|
@ -585,48 +588,62 @@ swp-service-price {
|
|||
|
||||
/* ===========================================
|
||||
DOCUMENT LIST (HR tab)
|
||||
Also used for certs, courses, and similar lists
|
||||
=========================================== */
|
||||
swp-document-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-document-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-4) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-document-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-document-item:hover {
|
||||
padding: 12px 16px;
|
||||
background: var(--color-background-alt);
|
||||
margin: 0 calc(-1 * var(--spacing-3));
|
||||
padding-left: var(--spacing-3);
|
||||
padding-right: var(--spacing-3);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-document-item i {
|
||||
font-size: 24px;
|
||||
/* Icon (optional) */
|
||||
swp-document-item i,
|
||||
swp-document-icon {
|
||||
font-size: 20px;
|
||||
color: var(--color-text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
swp-document-item i.ph-file-pdf {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
swp-document-name {
|
||||
/* Info wrapper (name + meta) */
|
||||
swp-document-info {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
swp-document-date {
|
||||
swp-document-name {
|
||||
display: block;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-document-meta {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Actions (buttons/badges at end) */
|
||||
swp-document-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Notes area */
|
||||
|
|
@ -646,6 +663,262 @@ swp-notes-area:focus {
|
|||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
EDIT SELECT (dropdown in edit rows)
|
||||
=========================================== */
|
||||
swp-edit-select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
swp-edit-select select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
font-size: var(--font-size-base);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-edit-select select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Mono variant for edit-value */
|
||||
swp-edit-value.mono {
|
||||
font-family: var(--font-mono);
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* Input in edit-row */
|
||||
swp-edit-row input {
|
||||
font-size: var(--font-size-base);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-background-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
swp-edit-row input:hover {
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
swp-edit-row input:focus {
|
||||
outline: none;
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Number input variant */
|
||||
swp-edit-row input[data-type="number"] {
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
width: 150px;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SALARY TABLE (Grid + Subgrid)
|
||||
=========================================== */
|
||||
swp-salary-table {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 120px 60px;
|
||||
}
|
||||
|
||||
swp-salary-table-header,
|
||||
swp-salary-table-body {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
swp-salary-table-header {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-salary-table-row {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-salary-table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-salary-table-cell {
|
||||
padding: var(--spacing-4) var(--spacing-2);
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-salary-table-cell:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
swp-salary-table-cell:last-child {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-salary-table-header swp-salary-table-cell {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-salary-table-cell.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Chevron for row actions */
|
||||
swp-salary-table-cell i {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
swp-salary-table-row {
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-salary-table-row:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-salary-table-row:hover swp-salary-table-cell i {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SUBSECTION TITLE (for grouped lists like courses)
|
||||
=========================================== */
|
||||
swp-subsection {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
swp-subsection:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
swp-subsection-title {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SIMPLE LIST (dates + badge, like vacation)
|
||||
=========================================== */
|
||||
swp-simple-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-simple-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-3);
|
||||
padding: 12px 16px;
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-simple-item-text {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* swp-add-button styles in components.css */
|
||||
|
||||
/* ===========================================
|
||||
RATES DRAWER CONTENT (overrides for swp-data-*)
|
||||
=========================================== */
|
||||
.rates-content swp-data-table {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr 100px;
|
||||
}
|
||||
|
||||
.rates-content swp-data-row {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.rates-content swp-data-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.rates-content swp-data-row input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--color-teal);
|
||||
}
|
||||
|
||||
.rates-content swp-data-label {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.rates-content swp-data-label.disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.rates-content swp-data-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 4px;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.rates-content swp-data-input input {
|
||||
width: 100px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
font-family: var(--font-mono);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rates-content swp-data-input.disabled input {
|
||||
opacity: 0.4;
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
.rates-content swp-section-label {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.rates-content swp-data-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
RESPONSIVE
|
||||
=========================================== */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue