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

Adds dashboard booking and notification components

Browse source 
Introduces reusable view components for bookings and notifications
Implements dynamic rendering of booking items and lists
Adds corresponding CSS styles for new dashboard components

Enhances dashboard user interface with interactive elements
This commit is contained in:
Janus C. H. Knudsen 2026-01-11 13:11:55 +01:00
parent 9b2ace7bc0
commit abcf8ee75e
15 changed files with 648 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

194
PlanTempus.Application/wwwroot/css/bookings.css Normal file
View file

@ -0,0 +1,194 @@
/**
* Bookings - Booking List & Items
*
* Styling for booking components on dashboard
*/
/* ===========================================
BOOKING LIST
=========================================== */
swp-booking-list {
display: grid;
grid-template-columns: 50px 4px 1fr auto auto;
gap: var(--spacing-4);
padding: 0 var(--card-body-padding);
}
/* ===========================================
BOOKING ITEM
=========================================== */
swp-booking-item {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
padding: var(--spacing-4);
background: var(--color-background-alt);
border-radius: var(--radius-lg);
cursor: pointer;
transition: background var(--transition-fast);
}
swp-booking-item:hover {
background: var(--color-background-hover);
}
swp-booking-item.completed {
opacity: 0.6;
}
swp-booking-item.completed swp-booking-indicator {
background: var(--color-border);
}
swp-booking-item.inprogress {
background: color-mix(in srgb, var(--color-teal) 8%, var(--color-background-alt));
}
/* ===========================================
BOOKING TIME
=========================================== */
swp-booking-time {
display: flex;
flex-direction: column;
align-items: flex-start;
}
swp-booking-time swp-time-start {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
font-family: var(--font-mono);
color: var(--color-text);
}
swp-booking-time swp-time-end {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-family: var(--font-mono);
}
/* ===========================================
BOOKING INDICATOR
=========================================== */
swp-booking-indicator {
width: 4px;
height: 40px;
border-radius: 2px;
}
swp-booking-indicator.teal { background: var(--color-teal); }
swp-booking-indicator.blue { background: var(--color-blue); }
swp-booking-indicator.purple { background: var(--color-purple); }
swp-booking-indicator.amber { background: var(--color-amber); }
swp-booking-indicator.green { background: var(--color-green); }
/* ===========================================
BOOKING DETAILS
=========================================== */
swp-booking-details {
min-width: 0;
overflow: hidden;
}
swp-booking-service {
display: block;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
swp-booking-customer {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ===========================================
BOOKING EMPLOYEE
=========================================== */
swp-booking-employee {
display: flex;
align-items: center;
gap: var(--spacing-3);
}
swp-booking-employee swp-avatar-small {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background: var(--color-teal);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: var(--font-weight-semibold);
}
swp-booking-employee span {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ===========================================
BOOKING STATUS
=========================================== */
swp-booking-status {
padding: var(--spacing-2) var(--spacing-4);
border-radius: var(--radius-md);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
}
swp-booking-status.confirmed {
background: color-mix(in srgb, var(--color-green) 15%, transparent);
color: var(--color-green);
}
swp-booking-status.pending {
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
color: var(--color-amber);
}
swp-booking-status.inprogress,
swp-booking-status.in-progress {
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
color: var(--color-blue);
}
swp-booking-status.completed {
background: var(--color-background-hover);
color: var(--color-text-secondary);
}
/* ===========================================
CURRENT TIME INDICATOR
=========================================== */
swp-current-time {
display: flex;
align-items: center;
gap: var(--spacing-4);
padding: var(--spacing-4) var(--spacing-6);
background: color-mix(in srgb, var(--color-teal) 10%, transparent);
border-radius: var(--radius-lg);
margin: 0 var(--card-body-padding) var(--spacing-4) var(--card-body-padding);
}
swp-current-time i {
font-size: var(--font-size-lg);
color: var(--color-teal);
}
swp-current-time span {
font-size: var(--font-size-md);
color: var(--color-teal);
font-weight: var(--font-weight-medium);
}
swp-current-time swp-time {
font-family: var(--font-mono);
font-weight: var(--font-weight-semibold);
}