helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-12 02:38:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: design tokens — multi-hospital theming system

Browse Source 
Backend (sidecar):
- ThemeService: read/write/backup/reset theme.json with versioning
- ThemeController: GET/PUT/POST /api/config/theme endpoints
- ConfigThemeModule registered in app

Frontend:
- ThemeTokenProvider: fetches theme, injects CSS variables on <html>
- Login page: logo, title, subtitle, Google/forgot toggles from tokens
- Sidebar: title, subtitle, active highlight from brand color scale
- AI chat: quick actions from tokens
- Branding settings page: 2-column layout, file upload for logo/favicon,
  single color picker with palette generation, font dropdowns, presets,
  pinned footer, versioning

Theme CSS:
- Sidebar active/hover text now references --color-brand-400

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-04-02 15:50:36 +05:30
parent c5d5e9c4f9
commit afd0829dc6
10 changed files with 1358 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/team-performance.tsx
View File

@@ -64,7 +64,7 @@ const DateFilter = ({ value, onChange }: { value: DateRange; onChange: (v: DateR
);
const KpiCard = ({ icon, value, label, color }: { icon: any; value: string | number; label: string; color?: string }) => (
<div className="flex flex-1 items-center gap-3 rounded-xl border border-secondary bg-primary p-4">
<div className="flex items-center gap-3 rounded-xl border border-secondary bg-primary p-4 min-w-0">
<div className={cx('flex size-10 items-center justify-center rounded-lg', color ?? 'bg-brand-secondary')}>
<FontAwesomeIcon icon={icon} className="size-4 text-fg-white" />
</div>
@@ -210,8 +210,8 @@ export const TeamPerformancePage = () => {
const days = Object.keys(dayMap);
return {
tooltip: { trigger: 'axis' },
legend: { data: ['Inbound', 'Outbound'], bottom: 0 },
grid: { top: 10, right: 10, bottom: 30, left: 40 },
legend: { data: ['Inbound', 'Outbound'], bottom: 0, textStyle: { fontSize: 11 } },
grid: { top: 10, right: 10, bottom: 50, left: 40 },
xAxis: { type: 'category', data: days },
yAxis: { type: 'value' },
series: [
@@ -292,7 +292,7 @@ export const TeamPerformancePage = () => {
<h3 className="text-sm font-semibold text-secondary">Key Metrics</h3>
<DateFilter value={range} onChange={setRange} />
</div>
<div className="flex gap-3">
<div className="grid grid-cols-5 gap-3">
<KpiCard icon={faUsers} value={activeAgents} label="Active Agents" color="bg-brand-secondary" />
<KpiCard icon={faPhoneVolume} value={totalCalls} label="Total Calls" color="bg-brand-solid" />
<KpiCard icon={faCalendarCheck} value={totalAppts} label="Appointments" color="bg-success-solid" />