soconnor/beenvoice-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add administration page and account role management

Browse Source 
- Implemented `AdministrationContent` component for managing account roles.
- Created `AdministrationPage` to serve as the main entry point for administration tasks.
- Added PDF preview functionality with `PdfPreviewFrame` component for invoice generation.
- Introduced `InputColor` component for advanced color selection with various formats.
- Established color conversion utilities in `color-converter.ts` for handling color formats.
- Defined appearance-related schemas and types in `appearance.ts` for consistent theme management.
This commit is contained in:
Sean O'Connor
2026-04-30 10:50:50 -04:00
parent ddc2b42672
commit 0e46fdafb2
87 changed files with 4566 additions and 2425 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/globals.css
+311 -5
View File
@@ -50,6 +50,48 @@
--radius: 1rem;
}
:root[data-interface-theme="frutiger"] {
--background: 0 0% 100%;
--foreground: 210 24% 8%;
--card: 0 0% 100%;
--card-foreground: 210 24% 8%;
--popover: 0 0% 100%;
--popover-foreground: 210 24% 8%;
--primary: 203 100% 18%;
--primary-foreground: 46 100% 91%;
--secondary: 47 100% 50%;
--secondary-foreground: 210 24% 8%;
--muted: 199 73% 91%;
--muted-foreground: 203 52% 24%;
--accent: 47 100% 50%;
--accent-foreground: 210 24% 8%;
--border: 203 45% 42%;
--input: 203 45% 42%;
--ring: 203 100% 18%;
--radius: 0rem;
}
:root[data-interface-theme="frutiger-aero"] {
--background: 190 76% 96%;
--foreground: 205 50% 12%;
--card: 0 0% 100%;
--card-foreground: 205 50% 12%;
--popover: 0 0% 100%;
--popover-foreground: 205 50% 12%;
--primary: 201 100% 37%;
--primary-foreground: 0 0% 100%;
--secondary: 104 55% 55%;
--secondary-foreground: 205 50% 12%;
--muted: 190 56% 90%;
--muted-foreground: 205 32% 32%;
--accent: 104 55% 55%;
--accent-foreground: 205 50% 12%;
--border: 195 48% 74%;
--input: 195 48% 74%;
--ring: 201 100% 37%;
--radius: 0.75rem;
}
:root[data-interface-theme="minimal"] {
--background: 0 0% 100%;
--card: 0 0% 100%;
@@ -80,7 +122,11 @@
:root[data-body-font="brand"],
:root[data-body-font="inter"] {
--app-font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
--app-font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
:root[data-body-font="frutiger"] {
--app-font-sans: var(--font-frutiger), ui-sans-serif, system-ui, sans-serif;
}
:root[data-body-font="platform"] {
@@ -99,6 +145,10 @@
--app-font-heading: var(--font-playfair), ui-serif, Georgia, serif;
}
:root[data-heading-font="frutiger"] {
--app-font-heading: var(--font-frutiger), ui-sans-serif, system-ui, sans-serif;
}
:root[data-heading-font="platform"] {
--app-font-heading:
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
@@ -106,14 +156,19 @@
}
:root[data-heading-font="inter"] {
--app-font-heading: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
--app-font-heading: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
:root[data-font="brand"]:not([data-body-font]) {
--app-font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
--app-font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
--app-font-heading: var(--font-playfair), ui-serif, Georgia, serif;
}
:root[data-font="frutiger"]:not([data-body-font]) {
--app-font-sans: var(--font-frutiger), ui-sans-serif, system-ui, sans-serif;
--app-font-heading: var(--font-frutiger), ui-sans-serif, system-ui, sans-serif;
}
:root[data-font="platform"]:not([data-body-font]) {
--app-font-sans:
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
@@ -124,8 +179,8 @@
}
:root[data-font="inter"]:not([data-body-font]) {
--app-font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
--app-font-heading: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
--app-font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
--app-font-heading: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
:root[data-font="serif"]:not([data-body-font]) {
@@ -251,6 +306,46 @@
--accent-foreground: 355.7 100% 97.3%;
}
:root[data-interface-theme="frutiger"] {
--background: 0 0% 100%;
--foreground: 210 24% 8%;
--card: 0 0% 100%;
--card-foreground: 210 24% 8%;
--popover: 0 0% 100%;
--popover-foreground: 210 24% 8%;
--primary: 203 100% 18%;
--primary-foreground: 46 100% 91%;
--accent: 47 100% 50%;
--accent-foreground: 210 24% 8%;
--secondary: 47 100% 50%;
--secondary-foreground: 210 24% 8%;
--muted: 199 73% 91%;
--muted-foreground: 203 52% 24%;
--border: 203 45% 42%;
--input: 203 45% 42%;
--ring: 203 100% 18%;
}
:root[data-interface-theme="frutiger-aero"] {
--background: 190 76% 96%;
--foreground: 205 50% 12%;
--card: 0 0% 100%;
--card-foreground: 205 50% 12%;
--popover: 0 0% 100%;
--popover-foreground: 205 50% 12%;
--primary: 201 100% 37%;
--primary-foreground: 0 0% 100%;
--accent: 104 55% 55%;
--accent-foreground: 205 50% 12%;
--secondary: 104 55% 55%;
--secondary-foreground: 205 50% 12%;
--muted: 190 56% 90%;
--muted-foreground: 205 32% 32%;
--border: 195 48% 74%;
--input: 195 48% 74%;
--ring: 201 100% 37%;
}
:root[data-color-mode="dark"][data-color-theme="slate"],
:root.dark[data-color-theme="slate"] {
--primary: 0 0% 98%;
@@ -325,6 +420,185 @@
display: none;
}
:root[data-interface-theme="frutiger"] .brand-background {
display: none;
}
:root[data-interface-theme="frutiger-aero"] .brand-background {
display: flex;
background:
radial-gradient(circle at 18% 22%, hsl(104 55% 55% / 0.35), transparent 32%),
radial-gradient(circle at 82% 18%, hsl(190 88% 66% / 0.42), transparent 30%),
linear-gradient(180deg, hsl(195 100% 94% / 0.95), hsl(0 0% 100% / 0.35));
}
:root[data-interface-theme="frutiger"] .dashboard-content-shell {
padding: 1rem;
padding-top: 4rem;
}
@media (min-width: 768px) {
:root[data-interface-theme="frutiger"] .dashboard-content-shell {
padding: 1.25rem;
}
}
:root[data-interface-theme="frutiger"] .bg-dashboard {
background: hsl(var(--background));
}
:root[data-interface-theme="frutiger-aero"] .bg-dashboard {
background:
radial-gradient(circle at 78% 8%, hsl(104 55% 55% / 0.22), transparent 26rem),
linear-gradient(180deg, hsl(190 76% 96%) 0%, hsl(0 0% 100%) 72%);
}
:root[data-interface-theme="frutiger"] aside {
border-color: hsl(var(--primary));
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
:root[data-interface-theme="frutiger"] aside [class*="text-muted-foreground"] {
color: hsl(var(--primary-foreground) / 0.72);
}
:root[data-interface-theme="frutiger"] aside a {
color: hsl(var(--primary-foreground) / 0.86);
}
:root[data-interface-theme="frutiger"] aside a:hover,
:root[data-interface-theme="frutiger"] aside a[data-active="true"] {
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
}
:root[data-interface-theme="frutiger"] aside button {
color: hsl(var(--primary-foreground) / 0.82);
}
:root[data-interface-theme="frutiger"] .dashboard-mobile-header {
border-color: hsl(var(--primary));
background-color: hsl(var(--accent));
color: hsl(var(--foreground));
backdrop-filter: none;
}
:root[data-interface-theme="frutiger"] .platform-header-surface {
border-color: hsl(var(--primary));
border-top: 0.5rem solid hsl(var(--primary));
background-color: hsl(var(--accent));
color: hsl(var(--foreground));
box-shadow: none;
}
:root[data-interface-theme="frutiger"] .platform-header-gradient {
display: none !important;
background: none !important;
}
:root[data-interface-theme="frutiger"] .platform-header-surface .text-primary,
:root[data-interface-theme="frutiger"] .platform-header-surface [class*="text-primary"],
:root[data-interface-theme="frutiger"] .dashboard-mobile-header .text-primary,
:root[data-interface-theme="frutiger"] .dashboard-mobile-header [class*="text-primary"] {
color: hsl(var(--foreground));
}
:root[data-interface-theme="frutiger"] .platform-header-surface .text-muted-foreground,
:root[data-interface-theme="frutiger"] .platform-header-surface [class*="text-muted-foreground"] {
color: hsl(var(--foreground) / 0.72);
}
:root[data-interface-theme="frutiger-aero"] aside {
border-color: hsl(190 88% 66% / 0.55);
background:
linear-gradient(180deg, hsl(201 100% 37% / 0.82), hsl(190 88% 45% / 0.72)),
hsl(201 100% 37% / 0.78);
color: hsl(var(--primary-foreground));
box-shadow: 0 18px 36px -20px hsl(201 100% 22% / 0.55);
backdrop-filter: blur(18px) saturate(1.35);
}
:root[data-interface-theme="frutiger-aero"] aside [class*="text-muted-foreground"] {
color: hsl(var(--primary-foreground) / 0.76);
}
:root[data-interface-theme="frutiger-aero"] aside a {
color: hsl(var(--primary-foreground) / 0.88);
}
:root[data-interface-theme="frutiger-aero"] aside a:hover,
:root[data-interface-theme="frutiger-aero"] aside a[data-active="true"] {
background-color: hsl(0 0% 100% / 0.92);
color: hsl(var(--primary));
}
:root[data-interface-theme="frutiger-aero"] .dashboard-mobile-header {
border-color: hsl(190 88% 66% / 0.55);
background-color: hsl(0 0% 100% / 0.78);
color: hsl(var(--foreground));
backdrop-filter: blur(18px) saturate(1.35);
}
:root[data-interface-theme="frutiger-aero"] .platform-header-surface {
border-color: hsl(190 88% 66% / 0.6);
background:
linear-gradient(180deg, hsl(0 0% 100% / 0.88), hsl(190 88% 92% / 0.72)),
hsl(0 0% 100% / 0.72);
box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.9),
0 18px 36px -28px hsl(201 100% 37% / 0.6);
backdrop-filter: blur(16px) saturate(1.35);
}
:root[data-interface-theme="frutiger-aero"] .platform-header-gradient {
display: block;
background: radial-gradient(circle at 92% 10%, hsl(104 55% 55% / 0.45), transparent 34%),
linear-gradient(135deg, hsl(190 88% 66% / 0.28), transparent 48%);
opacity: 1;
}
:root[data-interface-theme="frutiger"] [data-slot="card"],
:root[data-interface-theme="frutiger"] [data-slot="dialog-content"],
:root[data-interface-theme="frutiger"] [data-slot="popover-content"],
:root[data-interface-theme="frutiger"] [data-slot="select-content"] {
border-color: hsl(var(--primary) / 0.45);
border-radius: 0;
background-color: hsl(var(--card));
box-shadow: none;
}
:root[data-interface-theme="frutiger"] [data-slot="card"] {
border-top: 0.35rem solid hsl(var(--accent));
}
:root[data-interface-theme="frutiger-aero"] [data-slot="card"] {
border-color: hsl(190 88% 66% / 0.45);
background-color: hsl(0 0% 100% / 0.78);
box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.9),
0 16px 34px -30px hsl(201 100% 37% / 0.7);
backdrop-filter: blur(14px) saturate(1.25);
}
:root[data-interface-theme="frutiger"] [data-slot="button"],
:root[data-interface-theme="frutiger"] button,
:root[data-interface-theme="frutiger"] input,
:root[data-interface-theme="frutiger"] textarea,
:root[data-interface-theme="frutiger"] [role="combobox"] {
border-radius: 0;
}
:root[data-interface-theme="frutiger"] .button-hover:hover,
:root[data-interface-theme="frutiger"] .card-hover:hover {
transform: none;
box-shadow: none;
}
:root[data-interface-theme="frutiger"] [data-slot="card-header"],
:root[data-interface-theme="frutiger"] [data-slot="card-content"],
:root[data-interface-theme="frutiger"] [data-slot="card-footer"] {
padding-inline: 1rem;
}
:root[data-interface-theme="minimal"] [data-slot="card"] {
background-color: transparent;
border-color: transparent;
@@ -397,6 +671,38 @@
background-color: hsl(var(--background));
}
:root[data-interface-theme="beenvoice"] .dashboard-content-shell {
padding: 0.75rem;
padding-top: 4rem;
}
@media (min-width: 768px) {
:root[data-interface-theme="beenvoice"] .dashboard-content-shell {
padding-top: 0.75rem;
}
}
:root[data-interface-theme="beenvoice"] .platform-header-content {
padding: 1.25rem;
}
:root[data-interface-theme="beenvoice"] [data-slot="card"] {
border-radius: var(--radius-lg);
}
:root[data-interface-theme="beenvoice"] [data-slot="card-header"] {
padding: 1rem 1rem 0.75rem;
}
:root[data-interface-theme="beenvoice"] [data-slot="card-content"] {
padding-inline: 1rem;
padding-bottom: 1rem;
}
:root[data-interface-theme="beenvoice"] [data-slot="card-footer"] {
padding: 1rem;
}
:root[data-interface-theme="editorial"] .brand-background {
opacity: 0.55;
}