Adds dashboard booking and notification components
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
parent
9b2ace7bc0
commit
abcf8ee75e
15 changed files with 648 additions and 14 deletions
194
PlanTempus.Application/wwwroot/css/bookings.css
Normal file
194
PlanTempus.Application/wwwroot/css/bookings.css
Normal 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);
|
||||
}
|
||||
|
|
@ -189,6 +189,9 @@
|
|||
--container-max-width-md: 1200px;
|
||||
--container-max-width-lg: 1400px;
|
||||
|
||||
/* -------- Card Spacing -------- */
|
||||
--card-body-padding: var(--spacing-5);
|
||||
|
||||
/* -------- Calendar Grid -------- */
|
||||
--hour-height: 64px;
|
||||
--time-axis-width: 60px;
|
||||
|
|
|
|||
92
PlanTempus.Application/wwwroot/css/notifications.css
Normal file
92
PlanTempus.Application/wwwroot/css/notifications.css
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
/**
|
||||
* Notifications CSS
|
||||
*
|
||||
* Styling for notification components on dashboard
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
NOTIFICATION LIST
|
||||
=========================================== */
|
||||
swp-notification-list {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr;
|
||||
gap: var(--spacing-4) var(--spacing-6);
|
||||
padding: 0 var(--card-body-padding);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
NOTIFICATION ITEM
|
||||
=========================================== */
|
||||
swp-notification-item {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
padding: var(--spacing-5) var(--spacing-6);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-xl);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
swp-notification-item:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
swp-notification-item.unread {
|
||||
background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background-alt));
|
||||
}
|
||||
|
||||
swp-notification-item.unread:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
NOTIFICATION ICON
|
||||
=========================================== */
|
||||
swp-notification-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--color-background-hover);
|
||||
border-radius: var(--radius-xl);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
swp-notification-item.unread swp-notification-icon {
|
||||
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
NOTIFICATION CONTENT
|
||||
=========================================== */
|
||||
swp-notification-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
swp-notification-text {
|
||||
display: block;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text);
|
||||
line-height: var(--line-height-snug);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
swp-notification-text strong {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
swp-notification-time {
|
||||
display: block;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--spacing-1);
|
||||
}
|
||||
|
|
@ -94,7 +94,7 @@ swp-card-content {
|
|||
=========================================== */
|
||||
swp-dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 350px;
|
||||
grid-template-columns: 1fr 380px;
|
||||
gap: var(--spacing-5);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue