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

wip

Browse source
This commit is contained in:
Janus C. H. Knudsen 2026-01-11 18:18:36 +01:00
parent abcf8ee75e
commit 12869e35bf
34 changed files with 1177 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

114
PlanTempus.Application/wwwroot/css/attentions.css Normal file
View file

@ -0,0 +1,114 @@
/**
* Attentions CSS
*
* Styling for attention/alert components on dashboard
*/
/* ===========================================
ATTENTION LIST
=========================================== */
swp-attention-list {
display: contents;
}
/* ===========================================
ATTENTION ITEM
=========================================== */
swp-attention-item {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
gap: var(--spacing-8);
padding: var(--spacing-5) var(--spacing-6);
background: var(--color-background-alt);
border-radius: var(--radius-xl);
border-left: 3px solid var(--color-border);
cursor: pointer;
transition: background var(--transition-fast);
}
swp-attention-item:hover {
background: var(--color-background-hover);
}
/* Severity: Urgent (red) */
swp-attention-item.urgent {
border-left-color: var(--color-red);
background: color-mix(in srgb, var(--color-red) 5%, var(--color-background-alt));
}
swp-attention-item.urgent:hover {
background: color-mix(in srgb, var(--color-red) 8%, var(--color-background-alt));
}
/* Severity: Warning (amber) */
swp-attention-item.warning {
border-left-color: var(--color-amber);
background: color-mix(in srgb, var(--color-amber) 5%, var(--color-background-alt));
}
swp-attention-item.warning:hover {
background: color-mix(in srgb, var(--color-amber) 8%, var(--color-background-alt));
}
/* Severity: Info (blue) */
swp-attention-item.info {
border-left-color: var(--color-blue);
}
/* ===========================================
ATTENTION ICON
=========================================== */
swp-attention-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);
}
/* Icon colors per severity */
swp-attention-item.urgent swp-attention-icon {
background: color-mix(in srgb, var(--color-red) 15%, transparent);
color: var(--color-red);
}
swp-attention-item.warning swp-attention-icon {
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
color: var(--color-amber);
}
swp-attention-item.info swp-attention-icon {
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
color: var(--color-blue);
}
/* ===========================================
ATTENTION CONTENT
=========================================== */
swp-attention-content {
display: flex;
flex-direction: column;
min-width: 0;
}
/* ===========================================
ATTENTION ACTION
=========================================== */
swp-attention-action {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-teal);
cursor: pointer;
white-space: nowrap;
transition: text-decoration var(--transition-fast);
}
swp-attention-action:hover {
text-decoration: underline;
}

23
PlanTempus.Application/wwwroot/css/bookings.css
View file

@ -8,10 +8,7 @@
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);
display: contents;
}
/* ===========================================
@ -90,22 +87,6 @@ swp-booking-details {
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
=========================================== */
@ -174,7 +155,7 @@ swp-current-time {
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);
margin-bottom: var(--spacing-4);
}
swp-current-time i {

54
PlanTempus.Application/wwwroot/css/drawers.css
View file

@ -5,8 +5,36 @@
*/
/* ===========================================
BASE DRAWER
BASE DRAWER (Generic)
=========================================== */
[data-drawer] {
position: fixed;
top: 0;
right: 0;
width: var(--drawer-width, 320px);
height: 100vh;
background: var(--color-surface);
border-left: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--transition-normal);
}
[data-drawer].active,
[data-drawer].open {
transform: translateX(0);
}
/* Drawer width variants */
[data-drawer="sm"] { --drawer-width: 280px; }
[data-drawer="md"] { --drawer-width: 360px; }
[data-drawer="lg"] { --drawer-width: 420px; }
[data-drawer="xl"] { --drawer-width: 480px; }
/* Legacy support for existing drawers */
swp-profile-drawer,
swp-notification-drawer,
swp-todo-drawer {
@ -38,17 +66,26 @@ swp-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-4) var(--spacing-5);
padding: var(--spacing-10) var(--spacing-12);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
swp-drawer-title {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-lg);
font-weight: 600;
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
swp-drawer-title swp-count {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
swp-drawer-close {
width: 32px;
height: 32px;
@ -56,8 +93,8 @@ swp-drawer-close {
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: var(--border-radius);
background: var(--color-background-alt);
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
@ -73,12 +110,13 @@ swp-drawer-close i {
}
/* ===========================================
DRAWER CONTENT
DRAWER CONTENT / BODY
=========================================== */
swp-drawer-content {
swp-drawer-content,
swp-drawer-body {
flex: 1;
overflow-y: auto;
padding: var(--spacing-5);
padding: var(--spacing-8);
}
swp-drawer-divider {

25
PlanTempus.Application/wwwroot/css/notifications.css
View file

@ -8,10 +8,7 @@
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);
display: contents;
}
/* ===========================================
@ -70,23 +67,3 @@ swp-notification-content {
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);
}

52
PlanTempus.Application/wwwroot/css/page.css
View file

@ -49,6 +49,7 @@ swp-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: var(--spacing-5);
margin-bottom: var(--spacing-5);
}
@ -56,6 +57,7 @@ swp-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin: calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-5)) var(--spacing-4) calc(-1 * var(--spacing-5));
padding: var(--spacing-4) var(--spacing-5);
border-bottom: 1px solid var(--color-border);
}
@ -86,7 +88,44 @@ swp-card-action:hover {
}
swp-card-content {
padding: var(--spacing-5);
display: block;
}
/* Card content with grid lists - auto-detect via :has() */
swp-card-content:has(> swp-booking-list),
swp-card-content:has(> swp-notification-list),
swp-card-content:has(> swp-attention-list) {
display: grid;
gap: var(--spacing-4);
}
swp-card-content:has(> swp-booking-list) {
grid-template-columns: 50px 4px 1fr auto auto;
}
swp-card-content:has(> swp-notification-list) {
grid-template-columns: 50px 1fr;
}
swp-card-content:has(> swp-attention-list) {
grid-template-columns: 50px 1fr auto;
}
/* Generic list item title & description */
swp-item-title {
display: block;
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
swp-item-desc {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
/* ===========================================
@ -98,14 +137,11 @@ swp-dashboard-grid {
gap: var(--spacing-5);
}
swp-main-column {
display: flex;
flex-direction: column;
}
swp-main-column,
swp-side-column {
display: flex;
flex-direction: column;
display: grid;
gap: var(--spacing-5);
align-content: start;
}
/* ===========================================

38
PlanTempus.Application/wwwroot/css/quick-stats.css Normal file
View file

@ -0,0 +1,38 @@
/**
* Quick Stats CSS
*
* Styling for quick stats components in sidebar
*/
/* ===========================================
QUICK STATS CONTAINER
=========================================== */
swp-quick-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-3);
}
/* ===========================================
QUICK STAT ITEM
=========================================== */
swp-quick-stat {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
padding: var(--spacing-3);
background: var(--color-background-alt);
border-radius: var(--radius-md);
}
swp-quick-stat swp-stat-value {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
font-family: var(--font-mono);
color: var(--color-text);
}
swp-quick-stat swp-stat-label {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}

27
PlanTempus.Application/wwwroot/css/stats.css
View file

@ -182,33 +182,6 @@ swp-stat-card.highlight.filled swp-stat-change {
color: rgba(255, 255, 255, 0.9);
}
/* ===========================================
QUICK STATS (Compact Variant)
=========================================== */
swp-quick-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-3);
}
swp-quick-stat {
display: flex;
flex-direction: column;
text-align: center;
padding: var(--spacing-3);
background: var(--color-background);
border-radius: var(--border-radius);
}
swp-quick-stat swp-stat-value {
font-size: var(--font-size-xl);
}
swp-quick-stat swp-stat-label {
font-size: var(--font-size-xs);
margin-top: var(--spacing-1);
}
/* ===========================================
STAT ITEM (Inline Variant)
=========================================== */

250
PlanTempus.Application/wwwroot/css/waitlist.css Normal file
View file

@ -0,0 +1,250 @@
/**
* Waitlist CSS
*
* Styling for waitlist mini card and drawer items
*/
/* ===========================================
WAITLIST MINI CARD
=========================================== */
swp-waitlist-card {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-fast);
}
swp-waitlist-card:hover {
border-color: var(--color-teal);
box-shadow: var(--shadow-md);
}
swp-waitlist-icon {
position: relative;
font-size: var(--font-size-2xl);
color: var(--color-text-secondary);
}
swp-waitlist-badge {
position: absolute;
top: -8px;
right: -8px;
min-width: 20px;
height: 20px;
padding: 0 var(--spacing-2);
background: var(--color-teal);
color: white;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
}
swp-waitlist-label {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
/* ===========================================
WAITLIST LIST
=========================================== */
swp-waitlist-list {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
/* ===========================================
WAITLIST ITEM
=========================================== */
swp-waitlist-item {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
padding: var(--spacing-8);
background: var(--color-background-alt);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
}
/* ===========================================
CUSTOMER SECTION
=========================================== */
swp-waitlist-customer {
display: flex;
align-items: center;
gap: var(--spacing-6);
}
swp-waitlist-customer swp-avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--color-teal);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
flex-shrink: 0;
}
swp-waitlist-customer-info {
flex: 1;
min-width: 0;
}
swp-waitlist-name {
display: block;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
swp-waitlist-phone {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ===========================================
SERVICE TAG
=========================================== */
swp-waitlist-service {
display: inline-block;
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
color: var(--color-teal);
padding: var(--spacing-2) var(--spacing-3);
background: color-mix(in srgb, var(--color-teal) 10%, transparent);
border-radius: var(--radius-sm);
}
/* ===========================================
META SECTION (Preferences & Dates)
=========================================== */
swp-waitlist-meta {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
}
swp-waitlist-periods {
display: flex;
align-items: center;
gap: var(--spacing-2);
flex-wrap: wrap;
}
swp-waitlist-periods swp-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
swp-waitlist-period-tag {
font-size: var(--font-size-xs);
padding: var(--spacing-1) var(--spacing-2);
background: var(--color-background);
border-radius: var(--radius-sm);
color: var(--color-text);
}
swp-waitlist-dates {
display: flex;
align-items: center;
gap: var(--spacing-4);
}
swp-waitlist-date {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: var(--spacing-1);
}
swp-waitlist-date i {
font-size: var(--font-size-sm);
}
swp-waitlist-date.expires.soon {
color: var(--color-amber);
font-weight: var(--font-weight-medium);
}
/* ===========================================
ACTION BUTTONS
=========================================== */
swp-waitlist-actions {
display: flex;
gap: var(--spacing-4);
padding-top: var(--spacing-4);
border-top: 1px solid var(--color-border);
}
swp-waitlist-actions swp-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-4) var(--spacing-6);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
font-family: var(--font-family);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
border: none;
}
swp-waitlist-actions swp-btn.secondary {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
}
swp-waitlist-actions swp-btn.secondary:hover {
background: var(--color-background-hover);
}
swp-waitlist-actions swp-btn.primary {
background: var(--color-teal);
color: white;
}
swp-waitlist-actions swp-btn.primary:hover {
opacity: 0.9;
}
/* ===========================================
EMPTY STATE
=========================================== */
swp-waitlist-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-10) var(--spacing-6);
text-align: center;
}
swp-waitlist-empty i {
font-size: 48px;
color: var(--color-border);
margin-bottom: var(--spacing-4);
}
swp-waitlist-empty span {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
}

151
PlanTempus.Application/wwwroot/js/app.js
View file

File diff suppressed because one or more lines are too long

7
PlanTempus.Application/wwwroot/js/app.js.map Normal file
View file

File diff suppressed because one or more lines are too long

59
PlanTempus.Application/wwwroot/ts/modules/drawers.ts
View file

@ -13,6 +13,7 @@ export class DrawerController {
private newTodoDrawer: HTMLElement | null = null;
private overlay: HTMLElement | null = null;
private activeDrawer: DrawerName | null = null;
private activeGenericDrawer: HTMLElement | null = null;
constructor() {
this.profileDrawer = document.getElementById('profileDrawer');
@ -22,6 +23,7 @@ export class DrawerController {
this.overlay = document.getElementById('drawerOverlay');
this.setupListeners();
this.setupGenericDrawers();
}
/**
@ -71,11 +73,37 @@ export class DrawerController {
[this.profileDrawer, this.notificationDrawer, this.todoDrawer, this.newTodoDrawer]
.forEach(drawer => drawer?.classList.remove('active'));
// Close any generic drawers
this.closeGenericDrawer();
this.overlay?.classList.remove('active');
document.body.style.overflow = '';
this.activeDrawer = null;
}
/**
* Open a generic drawer by ID
*/
openGenericDrawer(drawerId: string): void {
this.closeAll();
const drawer = document.getElementById(drawerId);
if (drawer && this.overlay) {
drawer.classList.add('open');
this.overlay.classList.add('active');
document.body.style.overflow = 'hidden';
this.activeGenericDrawer = drawer;
}
}
/**
* Close the currently open generic drawer
*/
closeGenericDrawer(): void {
this.activeGenericDrawer?.classList.remove('open');
this.activeGenericDrawer = null;
}
/**
* Open profile drawer
*/
@ -223,4 +251,35 @@ export class DrawerController {
option.classList.add('active');
}
}
/**
* Setup generic drawer triggers and close buttons
* Uses data-drawer-trigger="drawer-id" and data-drawer-close attributes
*/
private setupGenericDrawers(): void {
// Handle drawer triggers
document.addEventListener('click', (e: Event) => {
const target = e.target as HTMLElement;
const trigger = target.closest<HTMLElement>('[data-drawer-trigger]');
if (trigger) {
const drawerId = trigger.dataset.drawerTrigger;
if (drawerId) {
this.openGenericDrawer(drawerId);
}
}
});
// Handle drawer close buttons
document.addEventListener('click', (e: Event) => {
const target = e.target as HTMLElement;
const closeBtn = target.closest<HTMLElement>('[data-drawer-close]');
if (closeBtn) {
this.closeGenericDrawer();
this.overlay?.classList.remove('active');
document.body.style.overflow = '';
}
});
}
}