+DoctorStarWeb Design Lab
Frontend concept · HTML/CSS/Vanilla JS · Sample data
Patientapp Logga in

DoctorStar Web Design Lab

Designsystem för vård, apotek, diagnostik, patientportal och plattformsadministration. Allt här är frontend och sample data.

Design exploration V0.4

Tema, språk och densitet

Tema och språk ligger nu även i navbaren. Språket sparas lokalt och hela UI:t uppdateras utan omladdning.

DragonStar-style language shell
SVCentral resource dictionary · local SVG flags

Knappar, switchar och formulär

Alla interaktiva kort, knappar och val har hover-, focus- och klickrespons. Checkboxar används inte i UI:t.

Interactive
Visa endast aktiva ordinationerSwitch component · role=switch
Inkludera historikSame component across web/mobile
Numret formatteras efter valt land medan du skriver. · +46 70 123 45 67
Autosparad 14:1884 / 4 000

Dropdowns, multiselect och autocomplete

Samma moderna dropdownmotor används i hela DoctorStar. Sökbara urval får sökfält; små tekniska urval kan vara utan sökfält.

Custom controls only
Sökbar dropdown
Inga träffar
Tabell-liknande dropdown
För stora dataset kan alternativen visa flera kolumner utan att bli en full tabell.
NameRoleUnitID
Inga träffar
Multiselect dropdown
Flera val visas som tokens och antal.
Autocomplete / token field
Sök efter användare eller kliniska etiketter och lägg till med klick eller Enter.
Dr Anna Berg

Responsiv datatabell

Sökning, sortering, sidstorlek, riktiga frontend-exporter, radmenyer, pagination och stabil tabellhöjd på sista sidan.

25 demo rows
Rader
Åtgärder

Modaler, drawer och toasts

Destruktiva flöden har en tydligare varningshierarki och ska aldrig kunna förväxlas med en vanlig bekräftelse.

Patientkontext

Patientidentitet och säkerhetskritiska uppgifter ligger kvar tydligt under kliniskt arbete.

EL
Elin Larsson DEMO
1978-04-12 · Patient ID DS-100284
PenicillinallergiFallriskIdentitet verifierad
Vårdteam
Dr Anna Berg
Primär enhet
Nordic Care Demo
Blood group
A+
Samtycke
Aktuellt
Last verified
Today 13:52

E-receptflöde

Receptets status ska kunna följas från ordination till apotekets expediering.

Prescription DS-RX-24018
Demo · Metoprolol 50 mg
Signerat
OrdineratSigneratÖverförtApotekExpedierat
Pharmacy channel visibilityEvent-driven state preview
i
Prescription available to pharmacy

UI differentiates local saved state from external acknowledgement.

Clinical workspace concept

En tät men lugn arbetsyta där patientkontext, journal, läkemedel, provsvar och uppgifter kan kombineras.

Blood pressure
128/78
Pulse
68
SpO₂
98%
Current care plan

Continue current antihypertensive treatment. Follow-up in six weeks.

Clinical safety
!
Dose review

Review patient factors before signing.

Identity, MFA, villkor och audit

Phishing-resistent MFA först, versionsstyrd legal acceptance och ett audit-upplägg där privilegierade handlingar aldrig ska kunna döljas av tenantadministratörer.

Security baseline

Portaler och inloggningsmodell

DoctorStar stödjer både separata portaladresser och smart inloggning där behöriga portaler visas först efter att identiteten har verifierats.

Mobil patientapp

Responsiv webb/PWA-design som kan återanvändas som grund för framtida mobilappar.

DoctorStar Patient
Safe-area support · touch targets · bottom navigation · responsive/PWA shell
Öppna patientapp-preview

Plattforms-backoffice

Central administration för tenants, användare, licenser, fakturering, compliance, support och plattformsdrift.

Tenant ManagementProvisioning, status, domains, country packs
Identity & AccessUsers, roles, MFA, sessions, platform admins
LicensingProducts, modules, seats, trials, renewals
Billing & InvoicingContracts, invoices, credits, payment state
Compliance CenterCountry packs, evidence, incidents, audit
Support & OperationsCases, health, maintenance, status
Integration RegistryFHIR/HL7/DICOM/eRx connectors
Platform AuditPrivileged events and traceability