k4rli/medreport_mrb2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

B2B-36: add personal dashboard (#20)

Browse Source 
* B2B-36: add dashboard cards

* B2B-36: add dashboard cards

* card variants, some improvements, gen db types

* add menus to home page

* update db types

* remove unnecessary card variant

---------

Co-authored-by: Helena <helena@Helenas-MacBook-Pro.local>
This commit is contained in:
Helena
2025-06-30 21:11:18 +03:00
committed by GitHub
parent d7841ca6ba
commit 297dd7c221
28 changed files with 1016 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
styles/globals.css
View File

@@ -31,7 +31,9 @@
@layer base {
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
font-feature-settings:
'rlig' 1,
'calt' 1;
}
*,
@@ -47,9 +49,44 @@
color: theme(--color-muted-foreground);
}
h1,
h2,
h3,
h4,
h5,
h6 {
@apply font-heading text-foreground font-semibold tracking-tight;
}
h1,h2,h3,h4,h5,h6 {
@apply font-heading text-foreground text-2xl font-semibold tracking-tight
}
h1 {
@apply text-5xl;
}
}
h2 {
@apply text-4xl;
}
h3 {
@apply text-3xl;
}
h4 {
@apply text-2xl;
}
h5 {
@apply text-xl;
}
h6 {
@apply text-lg;
}
.lucide {
stroke-width: 1;
}
.lucide {
@apply size-4;
}
}

191
styles/shadcn-ui.css
View File

@@ -7,127 +7,130 @@
*/
@layer base {
:root {
--font-sans: var(--font-sans) -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-heading: var(--font-heading);
:root {
--font-sans:
var(--font-sans) -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
--font-heading: var(--font-heading);
--background: hsla(0, 0%, 100%, 1);
--foreground: hsla(240, 10%, 4%, 1);
--foreground-50: hsla(240, 10%, 4%, 0.5);
--background: hsla(0, 0%, 100%, 1);
--foreground: hsla(240, 10%, 4%, 1);
--foreground-50: hsla(240, 10%, 4%, 0.5);
--background-90: hsla(0, 0%, 100%, 0.9);
--background-80: hsla(0, 0%, 100%, 0.8);
--background-90: hsla(0, 0%, 100%, 0.9);
--background-80: hsla(0, 0%, 100%, 0.8);
--card: var(--color-white);
--card-foreground: var(--color-neutral-950);
--card: var(--color-white);
--card-foreground: var(--color-neutral-950);
--popover: hsla(0, 0%, 100%, 1);
--popover-foreground: hsla(240, 10%, 4%, 1);
--popover: hsla(0, 0%, 100%, 1);
--popover-foreground: hsla(240, 10%, 4%, 1);
--primary: hsla(145, 78%, 18%, 1);
--primary-foreground: hsla(356, 100%, 97%, 1);
--primary: hsla(145, 78%, 18%, 1);
--primary-foreground: hsla(356, 100%, 97%, 1);
--primary-90: hsla(145, 78%, 18%, 0.9);
--primary-80: hsla(145, 78%, 18%, 0.8);
--primary-50: hsla(145, 78%, 18%, 0.5);
--primary-20: hsla(145, 78%, 18%, 0.2);
--primary-10: hsla(145, 78%, 18%, 0.1);
--primary-90: hsla(145, 78%, 18%, 0.9);
--primary-80: hsla(145, 78%, 18%, 0.8);
--primary-50: hsla(145, 78%, 18%, 0.5);
--primary-20: hsla(145, 78%, 18%, 0.2);
--primary-10: hsla(145, 78%, 18%, 0.1);
--secondary: hsla(240, 5%, 96%, 1);
--secondary-foreground: hsla(240, 6%, 10%, 1);
--secondary-90: hsla(240, 5%, 96%, 0.9);
--secondary-80: hsla(240, 5%, 96%, 0.8);
--secondary: hsla(240, 5%, 96%, 1);
--secondary-foreground: hsla(240, 6%, 10%, 1);
--secondary-90: hsla(240, 5%, 96%, 0.9);
--secondary-80: hsla(240, 5%, 96%, 0.8);
--muted: hsla(240, 5%, 96%, 1);
--muted-foreground: hsla(240, 4%, 41%, 1);
--muted: hsla(240, 5%, 96%, 1);
--muted-foreground: hsla(240, 4%, 41%, 1);
--muted-90: hsla(240, 5%, 96%, 0.9);
--muted-80: hsla(240, 5%, 96%, 0.8);
--muted-50: hsla(240, 5%, 96%, 0.5);
--muted-40: hsla(240, 5%, 96%, 0.4);
--muted-90: hsla(240, 5%, 96%, 0.9);
--muted-80: hsla(240, 5%, 96%, 0.8);
--muted-50: hsla(240, 5%, 96%, 0.5);
--muted-40: hsla(240, 5%, 96%, 0.4);
--accent: hsla(240, 5%, 96%, 1);
--accent-foreground: hsla(240, 6%, 10%, 1);
--accent: hsla(240, 5%, 96%, 1);
--accent-foreground: hsla(240, 6%, 10%, 1);
--accent-90: hsla(240, 5%, 96%, 0.9);
--accent-80: hsla(240, 5%, 96%, 0.8);
--accent-50: hsla(240, 5%, 96%, 0.5);
--accent-90: hsla(240, 5%, 96%, 0.9);
--accent-80: hsla(240, 5%, 96%, 0.8);
--accent-50: hsla(240, 5%, 96%, 0.5);
--destructive: hsla(0, 84%, 60%, 1);
--destructive-foreground: hsla(0, 0%, 98%, 1);
--success: hsla(142, 76%, 36%, 1);
--destructiv-90: hsla(0, 84%, 60%, 0.9);
--destructiv-80: hsla(0, 84%, 60%, 0.8);
--destructiv-50: hsla(0, 84%, 60%, 0.5);
--destructive: hsla(0, 84%, 60%, 1);
--destructive-foreground: hsla(0, 0%, 98%, 1);
--destructiv-90: hsla(0, 84%, 60%, 0.9);
--destructiv-80: hsla(0, 84%, 60%, 0.8);
--destructiv-50: hsla(0, 84%, 60%, 0.5);
--border: hsla(240, 6%, 90%, 1);
--input: hsla(240, 6%, 90%, 1);
--ring: var(--color-neutral-800);
--border: hsla(240, 6%, 90%, 1);
--input: hsla(240, 6%, 90%, 1);
--ring: var(--color-neutral-800);
--radius: calc(1rem);
--spacing: 0.25rem;
--radius: calc(1rem);
--spacing: 0.25rem;
--chart-1: var(--color-orange-400);
--chart-2: var(--color-teal-600);
--chart-3: var(--color-green-800);
--chart-4: var(--color-yellow-200);
--chart-5: var(--color-orange-200);
--chart-1: var(--color-orange-400);
--chart-2: var(--color-teal-600);
--chart-3: var(--color-green-800);
--chart-4: var(--color-yellow-200);
--chart-5: var(--color-orange-200);
--sidebar-background: var(--background);
--sidebar-foreground: var(--foreground);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--color-white);
--sidebar-accent: var(--secondary);
--sidebar-accent-foreground: var(--secondary-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}
--sidebar-background: var(--background);
--sidebar-foreground: var(--foreground);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--color-white);
--sidebar-accent: var(--secondary);
--sidebar-accent-foreground: var(--secondary-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}
.dark {
--background: var(--color-neutral-900);
--foreground: var(--color-white);
.dark {
--background: var(--color-neutral-900);
--foreground: var(--color-white);
--card: var(--color-neutral-900);
--card-foreground: var(--color-white);
--card: var(--color-neutral-900);
--card-foreground: var(--color-white);
--popover: var(--color-neutral-900);
--popover-foreground: var(--color-white);
--popover: var(--color-neutral-900);
--popover-foreground: var(--color-white);
--primary: var(--color-white);
--primary-foreground: var(--color-neutral-900);
--primary: var(--color-white);
--primary-foreground: var(--color-neutral-900);
--secondary: var(--color-neutral-800);
--secondary-foreground: oklch(98.43% 0.0017 247.84);
--secondary: var(--color-neutral-800);
--secondary-foreground: oklch(98.43% 0.0017 247.84);
--muted: var(--color-neutral-800);
--muted-foreground: hsla(240, 4%, 41%, 1);
--muted: var(--color-neutral-800);
--muted-foreground: hsla(240, 4%, 41%, 1);
--accent: var(--color-neutral-800);
--accent-foreground: oklch(98.48% 0 0);
--accent: var(--color-neutral-800);
--accent-foreground: oklch(98.48% 0 0);
--destructive: var(--color-red-700);
--destructive-foreground: var(--color-white);
--destructive: var(--color-red-700);
--destructive-foreground: var(--color-white);
--border: var(--color-neutral-800);
--input: var(--color-neutral-700);
--ring: oklch(87.09% 0.0055 286.29);
--border: var(--color-neutral-800);
--input: var(--color-neutral-700);
--ring: oklch(87.09% 0.0055 286.29);
--chart-1: var(--color-blue-600);
--chart-2: var(--color-emerald-400);
--chart-3: var(--color-orange-400);
--chart-4: var(--color-purple-500);
--chart-5: var(--color-pink-500);
--chart-1: var(--color-blue-600);
--chart-2: var(--color-emerald-400);
--chart-3: var(--color-orange-400);
--chart-4: var(--color-purple-500);
--chart-5: var(--color-pink-500);
--sidebar-background: var(--color-neutral-900);
--sidebar-foreground: var(--color-white);
--sidebar-primary: var(--color-blue-500);
--sidebar-primary-foreground: var(--color-white);
--sidebar-accent: var(--color-neutral-800);
--sidebar-accent-foreground: var(--color-white);
--sidebar-border: var(--border);
--sidebar-ring: var(--color-blue-500);
}
}
--sidebar-background: var(--color-neutral-900);
--sidebar-foreground: var(--color-white);
--sidebar-primary: var(--color-blue-500);
--sidebar-primary-foreground: var(--color-white);
--sidebar-accent: var(--color-neutral-800);
--sidebar-accent-foreground: var(--color-white);
--sidebar-border: var(--border);
--sidebar-ring: var(--color-blue-500);
}
}

23
styles/theme.css
View File

@@ -43,6 +43,15 @@
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--success: hsla(142, 76%, 36%, 1);
--color-success: var(--success);
--warning: hsla(25, 95%, 53%, 1);
--color-warning: var(--warning);
--cyan: hsla(189, 94%, 43%, 1);
--color-cyan: var(--cyan);
/* text colors */
--color-text-foreground: var(--foreground);
--color-text-primary: var(--primary);
@@ -94,7 +103,7 @@
--color-border-primary: var(--primary);
--color-border-primary-50: var(--primary-50);
--color-border-primary-foreground: var(--primary-foreground);
--color-border-destructive: var(--destructive-50);
--color-border-toast-destructive: var(--muted-40);
--color-border-muted: var(--muted);
@@ -123,13 +132,13 @@
--animate-accordion-down: accordion-down 0.2s ease-out;
--animate-accordion-up: accordion-up 0.2s ease-out;
--breakpoint-xs: 30rem;
--breakpoint-xs: 30rem;
--breakpoint-sm: 48rem;
--breakpoint-md: 70rem;
--breakpoint-lg: 80rem;
--breakpoint-xl: 96rem;
--breakpoint-2xl: 100rem;
--breakpoint-3xl: 120rem;
--breakpoint-lg: 80rem;
--breakpoint-xl: 96rem;
--breakpoint-2xl: 100rem;
--breakpoint-3xl: 120rem;
--container-max-width: 80rem;
@@ -180,4 +189,4 @@
transform: translateY(0px);
}
}
}
}