Add reports page with sales analytics and UI components
Introduces comprehensive reports feature with interactive sales dashboard Includes dynamic data tables, charts, and filtering capabilities Enhances application with new statistics and reporting functionality
This commit is contained in:
Janus C. H. Knudsen
parent
6ef001e35f
commit
405dabeb34
15 changed files with 1909 additions and 212 deletions
395
PlanTempus.Application/wwwroot/css/reports.css
Normal file
395
PlanTempus.Application/wwwroot/css/reports.css
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
/**
|
||||
* Reports - Statistik og Rapporter
|
||||
*
|
||||
* Feature-specific styling for reports pages.
|
||||
* Reuses: swp-stats-row (stats.css), swp-stat-card (stats.css),
|
||||
* swp-tab-bar (tabs.css), swp-data-table (components.css)
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
CHARTS GRID (2-column layout)
|
||||
=========================================== */
|
||||
swp-charts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: var(--card-gap);
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
swp-charts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
CHART CARD
|
||||
=========================================== */
|
||||
swp-chart-card {
|
||||
display: block;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-chart-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-6) var(--card-padding);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
swp-chart-title {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-chart-hint {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-chart-container {
|
||||
display: block;
|
||||
height: 240px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
FILTER BAR
|
||||
=========================================== */
|
||||
swp-filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-6);
|
||||
padding: var(--spacing-6) var(--card-padding);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--border-radius-lg);
|
||||
margin-bottom: var(--section-gap);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
swp-search-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
flex: 1;
|
||||
max-width: 350px;
|
||||
|
||||
& i {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
& input {
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: var(--font-size-md);
|
||||
font-family: var(--font-family);
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
swp-filter-label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-filter-bar select,
|
||||
swp-filter-bar input[type="date"] {
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-md);
|
||||
font-family: var(--font-family);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
swp-filter-bar input[type="date"] {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SALES TABLE - Grid columns
|
||||
=========================================== */
|
||||
swp-card.sales-table {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-card.sales-table swp-data-table {
|
||||
grid-template-columns: 100px 140px minmax(120px, 1fr) 120px minmax(140px, 1.2fr) 100px 120px 100px 40px;
|
||||
}
|
||||
|
||||
swp-card.sales-table swp-data-table-header {
|
||||
padding: var(--spacing-4) var(--card-padding);
|
||||
}
|
||||
|
||||
swp-card.sales-table swp-data-table-row {
|
||||
padding: var(--spacing-5) var(--card-padding);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
INVOICE CELL
|
||||
=========================================== */
|
||||
swp-invoice-cell {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
DATETIME CELL
|
||||
=========================================== */
|
||||
swp-datetime-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
& .date {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
& .time {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
CUSTOMER CELL
|
||||
=========================================== */
|
||||
swp-customer-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
& .name {
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
& .phone {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SERVICES CELL
|
||||
=========================================== */
|
||||
swp-services-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
& .main {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
& .more {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
AMOUNT CELL
|
||||
=========================================== */
|
||||
swp-amount-cell {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: var(--font-size-base);
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
PAYMENT BADGE
|
||||
=========================================== */
|
||||
swp-payment-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
& i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.card {
|
||||
background: color-mix(in srgb, var(--color-blue) 12%, transparent);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
&.cash {
|
||||
background: color-mix(in srgb, var(--color-green) 12%, transparent);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
&.mobilepay {
|
||||
background: color-mix(in srgb, var(--color-blue) 12%, transparent);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
&.invoice {
|
||||
background: color-mix(in srgb, var(--color-amber) 12%, transparent);
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
&.giftcard {
|
||||
background: color-mix(in srgb, var(--color-purple) 12%, transparent);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
STATUS BADGE ADDITIONS (paid, credited)
|
||||
=========================================== */
|
||||
swp-status-badge.paid {
|
||||
background: var(--bg-green-strong);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-status-badge.credited {
|
||||
background: var(--bg-purple-strong);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
ROW ARROW
|
||||
=========================================== */
|
||||
swp-row-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
& i {
|
||||
font-size: 18px;
|
||||
color: var(--color-text-secondary);
|
||||
transition: transform var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
}
|
||||
|
||||
swp-data-table-row:hover swp-row-arrow i {
|
||||
transform: translateX(4px);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
TABLE FOOTER + PAGINATION
|
||||
=========================================== */
|
||||
swp-table-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-5) var(--card-padding);
|
||||
background: var(--color-background-alt);
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
swp-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-1);
|
||||
}
|
||||
|
||||
swp-page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--color-teal);
|
||||
color: white;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
& i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
RESPONSIVE
|
||||
=========================================== */
|
||||
@media (max-width: 1200px) {
|
||||
swp-card.sales-table swp-data-table {
|
||||
grid-template-columns: 100px 130px 1fr 100px 100px 100px 40px;
|
||||
}
|
||||
|
||||
/* Hide employee and services columns */
|
||||
swp-card.sales-table swp-data-table-cell:nth-child(4),
|
||||
swp-card.sales-table swp-data-table-cell:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
swp-card.sales-table swp-data-table {
|
||||
grid-template-columns: 100px 1fr 100px 100px 40px;
|
||||
}
|
||||
|
||||
/* Hide customer column */
|
||||
swp-card.sales-table swp-data-table-cell:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
swp-filter-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
swp-search-input {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue