feat: dashboard overhaul, chargeability reports, dispo import enhancements, UI polish
Dashboard: expanded chargeability widget, resource/project table widgets with sorting and filters, stat cards with formatMoney integration. Chargeability: new report client with filtering, chargeability-bookings use case, updated dashboard overview logic. Dispo import: TBD project handling, parse-dispo-matrix improvements, stage-dispo-projects resource value scores, new tests. Estimates: CommercialTermsEditor component, commercial-terms engine module, expanded estimate schemas and types. UI: AppShell navigation updates, timeline filter/toolbar enhancements, role management improvements, signin page redesign, Tailwind/globals polish, SystemSettings SMTP section, anonymization support. Tests: new router tests (anonymization, chargeability, effort-rule, entitlement, estimate, experience-multiplier, notification, resource, staffing, vacation). Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
+200
-36
@@ -90,32 +90,36 @@
|
||||
/* ─── Light Theme Surface Variables ─────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
--surface-page: 249 250 251; /* gray-50 */
|
||||
--surface-card: 255 255 255; /* white */
|
||||
--surface-elevated: 249 250 251; /* gray-50 */
|
||||
--surface-input: 255 255 255; /* white */
|
||||
--border-subtle: 229 231 235; /* gray-200 */
|
||||
--border-input: 209 213 219; /* gray-300 */
|
||||
--text-primary: 17 24 39; /* gray-900 */
|
||||
--text-secondary: 75 85 99; /* gray-600 */
|
||||
--text-muted: 107 114 128; /* gray-500 */
|
||||
--text-very-muted: 156 163 175; /* gray-400 */
|
||||
--surface-page: 244 246 250;
|
||||
--surface-card: 255 255 255;
|
||||
--surface-elevated: 249 250 252;
|
||||
--surface-input: 255 255 255;
|
||||
--border-subtle: 219 224 232;
|
||||
--border-input: 197 205 218;
|
||||
--text-primary: 18 24 38;
|
||||
--text-secondary: 71 85 105;
|
||||
--text-muted: 100 116 139;
|
||||
--text-very-muted: 148 163 184;
|
||||
--shadow-soft: 15 23 42 / 0.05;
|
||||
--shadow-strong: 15 23 42 / 0.12;
|
||||
}
|
||||
|
||||
/* ─── Dark Theme Surface Variables ──────────────────────────────────────── */
|
||||
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
--surface-page: 10 11 16; /* near-black page bg */
|
||||
--surface-card: 24 27 38; /* dark card bg */
|
||||
--surface-elevated: 32 36 50; /* slightly lighter - table headers etc */
|
||||
--surface-input: 32 36 50; /* input bg */
|
||||
--border-subtle: 45 51 71; /* dark border */
|
||||
--border-input: 58 65 90; /* slightly lighter border */
|
||||
--text-primary: 232 234 240; /* near-white */
|
||||
--text-secondary: 163 173 197; /* medium gray */
|
||||
--text-muted: 107 117 142; /* muted */
|
||||
--text-very-muted: 75 84 107; /* very muted */
|
||||
--surface-page: 12 17 29;
|
||||
--surface-card: 16 23 38;
|
||||
--surface-elevated: 24 33 52;
|
||||
--surface-input: 18 28 45;
|
||||
--border-subtle: 41 55 78;
|
||||
--border-input: 61 79 110;
|
||||
--text-primary: 237 242 247;
|
||||
--text-secondary: 196 207 223;
|
||||
--text-muted: 147 161 185;
|
||||
--text-very-muted: 118 133 161;
|
||||
--shadow-soft: 2 6 23 / 0.38;
|
||||
--shadow-strong: 2 6 23 / 0.65;
|
||||
}
|
||||
|
||||
/* ─── Base Layer: Apply variables to body ────────────────────────────────── */
|
||||
@@ -124,16 +128,55 @@
|
||||
body {
|
||||
background-color: rgb(var(--surface-page));
|
||||
color: rgb(var(--text-primary));
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
background-image:
|
||||
radial-gradient(circle at top left, rgb(var(--accent-100) / 0.32), transparent 24rem),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.72), transparent 24rem);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.dark body {
|
||||
background-image:
|
||||
radial-gradient(circle at top left, rgb(var(--accent-600) / 0.16), transparent 26rem),
|
||||
linear-gradient(180deg, rgb(15 23 42 / 0.35), transparent 28rem);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
[data-page-title="true"] {
|
||||
font-family: var(--font-display), system-ui, sans-serif;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
/* Smooth transition for theme changes */
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
transition-property: background-color, border-color, color;
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible,
|
||||
button:focus-visible,
|
||||
a:focus-visible {
|
||||
outline: 2px solid rgb(var(--accent-500));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Scrollbar styling for dark mode */
|
||||
.dark ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
@@ -155,6 +198,10 @@
|
||||
background-color: rgb(var(--surface-card)) !important;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
box-shadow: 0 18px 42px -28px rgb(var(--shadow-strong));
|
||||
}
|
||||
|
||||
.dark .bg-gray-50 {
|
||||
background-color: rgb(var(--surface-elevated)) !important;
|
||||
}
|
||||
@@ -199,6 +246,32 @@
|
||||
color: rgb(var(--text-very-muted)) !important;
|
||||
}
|
||||
|
||||
.text-gray-900 {
|
||||
color: rgb(var(--text-primary)) !important;
|
||||
}
|
||||
|
||||
.text-gray-800,
|
||||
.text-gray-700 {
|
||||
color: rgb(var(--text-secondary)) !important;
|
||||
}
|
||||
|
||||
.text-gray-600,
|
||||
.text-gray-500 {
|
||||
color: rgb(var(--text-muted)) !important;
|
||||
}
|
||||
|
||||
.text-gray-400 {
|
||||
color: rgb(var(--text-very-muted)) !important;
|
||||
}
|
||||
|
||||
.border-gray-200 {
|
||||
border-color: rgb(var(--border-subtle)) !important;
|
||||
}
|
||||
|
||||
.border-gray-300 {
|
||||
border-color: rgb(var(--border-input)) !important;
|
||||
}
|
||||
|
||||
.dark input,
|
||||
.dark select,
|
||||
.dark textarea {
|
||||
@@ -222,26 +295,117 @@
|
||||
}
|
||||
|
||||
/* Status badge adjustments in dark mode - keep them readable */
|
||||
.dark .bg-green-100 { background-color: rgb(6 78 59 / 0.4) !important; }
|
||||
.dark .text-green-700 { color: rgb(52 211 153) !important; }
|
||||
.dark .bg-yellow-100 { background-color: rgb(120 53 15 / 0.4) !important; }
|
||||
.dark .text-yellow-700 { color: rgb(251 191 36) !important; }
|
||||
.dark .bg-blue-100 { background-color: rgb(30 58 138 / 0.4) !important; }
|
||||
.dark .text-blue-700 { color: rgb(96 165 250) !important; }
|
||||
.dark .bg-red-100 { background-color: rgb(127 29 29 / 0.4) !important; }
|
||||
.dark .text-red-600 { color: rgb(248 113 113) !important; }
|
||||
.dark .text-red-700 { color: rgb(248 113 113) !important; }
|
||||
.dark .bg-gray-100 { background-color: rgb(var(--surface-elevated)) !important; }
|
||||
.dark .text-gray-700 { color: rgb(var(--text-secondary)) !important; }
|
||||
.dark .bg-purple-100 { background-color: rgb(76 29 149 / 0.4) !important; }
|
||||
.dark .text-purple-700 { color: rgb(196 181 253) !important; }
|
||||
.dark .bg-amber-50 { background-color: rgb(120 53 15 / 0.2) !important; }
|
||||
.dark .bg-green-100 {
|
||||
background-color: rgb(6 78 59 / 0.4) !important;
|
||||
}
|
||||
.dark .text-green-700 {
|
||||
color: rgb(52 211 153) !important;
|
||||
}
|
||||
.dark .bg-yellow-100 {
|
||||
background-color: rgb(120 53 15 / 0.4) !important;
|
||||
}
|
||||
.dark .text-yellow-700 {
|
||||
color: rgb(251 191 36) !important;
|
||||
}
|
||||
.dark .bg-blue-100 {
|
||||
background-color: rgb(30 58 138 / 0.4) !important;
|
||||
}
|
||||
.dark .text-blue-700 {
|
||||
color: rgb(96 165 250) !important;
|
||||
}
|
||||
.dark .bg-red-100 {
|
||||
background-color: rgb(127 29 29 / 0.4) !important;
|
||||
}
|
||||
.dark .text-red-600 {
|
||||
color: rgb(248 113 113) !important;
|
||||
}
|
||||
.dark .text-red-700 {
|
||||
color: rgb(248 113 113) !important;
|
||||
}
|
||||
.dark .bg-gray-100 {
|
||||
background-color: rgb(var(--surface-elevated)) !important;
|
||||
}
|
||||
.dark .text-gray-700 {
|
||||
color: rgb(var(--text-secondary)) !important;
|
||||
}
|
||||
.dark .bg-purple-100 {
|
||||
background-color: rgb(76 29 149 / 0.4) !important;
|
||||
}
|
||||
.dark .text-purple-700 {
|
||||
color: rgb(196 181 253) !important;
|
||||
}
|
||||
.dark .bg-amber-50 {
|
||||
background-color: rgb(120 53 15 / 0.2) !important;
|
||||
}
|
||||
|
||||
/* Modal / overlay */
|
||||
.dark .shadow-2xl {
|
||||
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6) !important;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.app-surface {
|
||||
@apply rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900/92;
|
||||
}
|
||||
|
||||
.app-surface-strong {
|
||||
@apply rounded-3xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900;
|
||||
}
|
||||
|
||||
.app-toolbar {
|
||||
@apply rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm backdrop-blur;
|
||||
@apply dark:border-gray-700 dark:bg-gray-900/88 dark:shadow-black/20;
|
||||
}
|
||||
|
||||
.app-input {
|
||||
@apply w-full rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition;
|
||||
@apply focus:border-brand-500 focus:ring-4 focus:ring-brand-100/80;
|
||||
@apply dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:ring-brand-900/50;
|
||||
}
|
||||
|
||||
.app-select {
|
||||
@apply rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition;
|
||||
@apply focus:border-brand-500 focus:ring-4 focus:ring-brand-100/80;
|
||||
@apply dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:ring-brand-900/50;
|
||||
}
|
||||
|
||||
.app-label {
|
||||
@apply mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.app-page {
|
||||
@apply p-6 md:p-8;
|
||||
}
|
||||
|
||||
.app-page-header {
|
||||
@apply flex flex-col gap-2 md:flex-row md:items-end md:justify-between;
|
||||
}
|
||||
|
||||
.app-page-title {
|
||||
@apply font-display text-3xl font-semibold text-gray-900 dark:text-gray-100;
|
||||
}
|
||||
|
||||
.app-page-subtitle {
|
||||
@apply text-sm text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.app-data-table {
|
||||
@apply overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900/94;
|
||||
}
|
||||
|
||||
.app-data-table table {
|
||||
@apply min-w-full text-sm;
|
||||
}
|
||||
|
||||
.app-data-table thead tr {
|
||||
@apply bg-gray-50/90 dark:bg-gray-800/80;
|
||||
}
|
||||
|
||||
.app-data-table th {
|
||||
@apply text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Timeline utilities (unchanged) ────────────────────────────────────── */
|
||||
|
||||
@layer utilities {
|
||||
|
||||
Reference in New Issue
Block a user