Files
medassist-ng/frontend/src/utils/formatters.ts
T
Daniel Volz cab0fcbba7 feat: mobile UI improvements, biome linting, and reminder info display (#71)
* fix: make dismissed doses robust against schedule/timezone changes

- Store dismissedUntil date (YYYY-MM-DD) per medication instead of individual dose IDs
- Add POST /medications/dismiss-until endpoint to set dismissed date
- Add DELETE /medications/:id/dismiss-until endpoint to clear dismissed date
- Update frontend to use medication-level dismissedUntil for filtering
- Remove old dismissMissedDoses function from useDoses hook (was using dose IDs)
- Add backward-compatible ALTER TABLE migration for dismissed_until column
- Add 5 integration tests for dismiss-until functionality
- Update test schemas with new column

The old approach stored individual dose IDs which broke when schedule or timezone
settings changed (dose IDs contain timestamps). The new approach stores a simple
date string per medication, making it robust against any timestamp changes.

* chore: add Biome linter and Husky pre-commit hook

* chore: add unified biome config and pre-push hook

- Add root-level biome.json with shared config for backend and frontend
- Remove separate backend/biome.json and frontend/biome.json
- Add .husky/pre-push hook to run backend tests before push
- Update package.json lint-staged config to use root biome config

* feat(db): add reminder info columns to schema

- Add dismissed_until column to medications table
- Add last_reminder_med_name and last_reminder_taken_by to user_settings
- Generate Drizzle migration 0003
- Add backward-compatible ALTER migrations in client.ts

* feat(frontend): add unsaved changes warning

- Add UnsavedChangesContext for tracking unsaved form state
- Add useUnsavedChangesWarning hook for browser close warning
- Wrap App with UnsavedChangesProvider
- Add i18n translations for unsaved changes dialog (en/de)

* style: apply biome formatting across codebase

- Apply consistent formatting to all TypeScript files
- Organize imports alphabetically
- Use double quotes and tabs consistently
- Fix trailing commas (es5 style)
- Remove frontend/biome.json deletion (already deleted)

* fix(tests): add missing columns to test schemas

Add last_reminder_med_name and last_reminder_taken_by columns to
test CREATE TABLE statements in:
- planner.test.ts
- e2e-routes.test.ts
- integration.test.ts

Also improve runDrizzleMigrations to handle duplicate column errors
gracefully (returns warning instead of failing).

* fix(planner): add missing 'as unknown' type cast for request.user

* fix(security): address CodeQL XSS and SSRF warnings

- Escape all user-provided strings in email HTML templates
- Coerce numeric values with Number() to prevent type injection
- Add redirect:error to fetch() to prevent SSRF via redirect
- Document SSRF validation in settings.ts

* fix(security): refactor SSRF mitigation to reconstruct URL from validated components

CodeQL traces taint through validation functions that return the same string.
Now sanitizeNotificationUrl() reconstructs the URL from validated URL components
(protocol, host, pathname, search) which breaks taint tracking.

- Renamed to sanitizeNotificationUrl() to clarify it returns sanitized data
- Returns reconstructed URL built from URL() parsed components
- Extracts auth credentials separately instead of including in URL string
- Added isNtfy flag to avoid re-parsing the sanitized URL

* fix(security): add SSRF suppression comment for validated notification URL

The fetch() uses a URL that has been validated by sanitizeNotificationUrl():
- Only http/https protocols
- Blocks localhost and loopback IPs
- Blocks private IP ranges (10.x, 172.16-31.x, 192.168.x, 169.254.x)
- Blocks internal hostnames (.local, .internal, .lan)
- redirect: 'error' prevents redirect bypass

This is an intentional feature: users configure their own notification endpoints.
2026-01-25 18:01:35 +01:00

267 lines
7.8 KiB
TypeScript

// =============================================================================
// Formatting Utilities
// =============================================================================
import type { BlisterStock, Medication } from "../types";
/**
* Map timezone to region code (ISO 3166-1 alpha-2).
* This allows combining app language with regional formatting.
*/
const TIMEZONE_TO_REGION: Record<string, string> = {
// Europe
"Europe/Berlin": "DE",
"Europe/Vienna": "AT",
"Europe/Zurich": "CH",
"Europe/London": "GB",
"Europe/Dublin": "IE",
"Europe/Paris": "FR",
"Europe/Madrid": "ES",
"Europe/Rome": "IT",
"Europe/Amsterdam": "NL",
"Europe/Brussels": "BE",
"Europe/Warsaw": "PL",
"Europe/Prague": "CZ",
"Europe/Stockholm": "SE",
"Europe/Oslo": "NO",
"Europe/Copenhagen": "DK",
"Europe/Helsinki": "FI",
"Europe/Athens": "GR",
"Europe/Lisbon": "PT",
"Europe/Moscow": "RU",
"Europe/Kiev": "UA",
"Europe/Kyiv": "UA",
"Europe/Budapest": "HU",
"Europe/Bucharest": "RO",
// Americas
"America/New_York": "US",
"America/Chicago": "US",
"America/Denver": "US",
"America/Los_Angeles": "US",
"America/Phoenix": "US",
"America/Toronto": "CA",
"America/Vancouver": "CA",
"America/Mexico_City": "MX",
"America/Sao_Paulo": "BR",
"America/Buenos_Aires": "AR",
// Asia/Pacific
"Asia/Tokyo": "JP",
"Asia/Shanghai": "CN",
"Asia/Hong_Kong": "HK",
"Asia/Singapore": "SG",
"Asia/Seoul": "KR",
"Asia/Dubai": "AE",
"Asia/Kolkata": "IN",
"Australia/Sydney": "AU",
"Australia/Melbourne": "AU",
"Pacific/Auckland": "NZ",
};
/**
* Get region code from timezone.
* Returns undefined if timezone is not mapped.
*/
export function getRegionFromTimezone(): string | undefined {
try {
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
return TIMEZONE_TO_REGION[timezone];
} catch {
return undefined;
}
}
/**
* Get locale for formatting based on app language and timezone region.
* Combines app language (en/de) with region from timezone (DE/US/etc.)
* Example: app=en + timezone=Europe/Berlin → en-DE (English text, German format)
*
* @param appLanguage - The app's UI language (e.g., 'en', 'de')
*/
export function getSystemLocale(appLanguage?: string): string {
const region = getRegionFromTimezone();
const lang = appLanguage || navigator.language?.split("-")[0] || "en";
if (region) {
return `${lang}-${region}`;
}
// Fallback: use browser language, or en-US as last resort
return navigator.language || "en-US";
}
/**
* Format a number using the current locale with optional decimal places
*/
export function formatNumber(n: number | null | undefined, decimals = 0): string {
if (n === null || n === undefined) return "—";
return n.toLocaleString(undefined, {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals,
});
}
/**
* Format a date/time string for display
* Extracts date and time directly from string to avoid timezone conversion
* Uses system locale by default for consistent regional formatting
*/
export function formatDateTime(iso: string | null | undefined, locale?: string): string {
if (!iso) return "-";
// Extract date and time components directly from ISO string
// Format: YYYY-MM-DDTHH:MM:SS or YYYY-MM-DDTHH:MM:SS.sssZ
const match = iso.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
if (!match) return "-";
const [, year, month, day, hour, minute] = match;
const effectiveLocale = locale ?? getSystemLocale();
// Create a date object for formatting, but use local timezone interpretation
// by creating the date without the Z suffix
const localDateStr = `${year}-${month}-${day}T${hour}:${minute}:00`;
const d = new Date(localDateStr);
if (Number.isNaN(d.getTime())) return "-";
const dateOpts: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "2-digit",
day: "2-digit",
};
const timeOpts: Intl.DateTimeFormatOptions = {
hour: "2-digit",
minute: "2-digit",
};
const dateStr = d.toLocaleDateString(effectiveLocale, dateOpts);
const timeStr = d.toLocaleTimeString(effectiveLocale, timeOpts);
return `${dateStr} ${timeStr}`;
}
/**
* Pad a number to 2 digits with leading zero
*/
export function pad2(n: number): string {
return n.toString().padStart(2, "0");
}
/**
* Convert a Date to ISO date string (YYYY-MM-DD)
*/
export function toIsoString(d: Date): string {
return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
}
/**
* Get the date portion (YYYY-MM-DD) from an ISO datetime string or Date
*/
export function toDateValue(input: string | Date): string {
if (input instanceof Date) {
return toIsoString(input);
}
return input.slice(0, 10);
}
/**
* Get the time portion (HH:MM) from an ISO datetime string or Date
* For strings, extracts HH:MM directly without timezone conversion
*/
export function toTimeValue(input: string | Date): string {
if (input instanceof Date) {
return `${pad2(input.getHours())}:${pad2(input.getMinutes())}`;
}
// Extract HH:MM directly from string (position 11-16 in YYYY-MM-DDTHH:MM...)
// This avoids timezone conversion issues with Z suffix
const timeMatch = input.match(/T(\d{2}):(\d{2})/);
if (timeMatch) {
return `${timeMatch[1]}:${timeMatch[2]}`;
}
// Fallback to Date parsing if format doesn't match
const d = new Date(input);
return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
}
/**
* Combine a date string (YYYY-MM-DD) and time string (HH:MM) into ISO datetime
*/
export function combineDateAndTime(dateStr: string, timeStr: string): string {
return `${dateStr}T${timeStr}:00`;
}
/**
* Format a Date or ISO string to datetime-local input value (YYYY-MM-DDTHH:MM)
*/
export function toInputValue(input: Date | string): string {
const d = input instanceof Date ? input : new Date(input);
return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
}
/**
* Derive total pills from medication inventory
*/
export function deriveTotal(
packCount: number,
blistersPerPack: number,
pillsPerBlister: number,
looseTablets: number
): number {
return packCount * blistersPerPack * pillsPerBlister + looseTablets;
}
/**
* Get CSS class for expiry date status
* Returns: danger-text (expired), warning-text (within threshold), success-text (OK)
*/
export function getExpiryClass(expiryDate: string | null | undefined, thresholdDays: number): string {
if (!expiryDate) return "";
const exp = new Date(expiryDate);
const now = new Date();
const diff = (exp.getTime() - now.getTime()) / (1000 * 60 * 60 * 24);
if (diff < 0) return "danger-text";
if (diff <= thresholdDays) return "warning-text";
return "success-text";
}
/**
* Calculate blister stock breakdown for a medication
*/
export function getBlisterStock(med: Medication): BlisterStock {
const total =
med.packCount * med.blistersPerPack * med.pillsPerBlister + med.looseTablets + (med.stockAdjustment ?? 0);
const bSize = med.pillsPerBlister;
const fullBlisters = Math.floor(total / bSize);
const openBlisterPills = total % bSize;
return { fullBlisters, openBlisterPills, loosePills: openBlisterPills };
}
/**
* Format full blisters count with optional pills per blister
*/
export function formatFullBlisters(stock: BlisterStock, pillsPerBlister?: number): string {
const count = stock.fullBlisters;
if (pillsPerBlister !== undefined) {
return `${count} (${count * pillsPerBlister})`;
}
return String(count);
}
/**
* Format open blister and loose pills
*/
export function formatOpenBlisterAndLoose(stock: BlisterStock): string {
return String(stock.openBlisterPills);
}
/**
* Compare semantic version strings
* Returns: negative if a < b, positive if a > b, 0 if equal
*/
export function compareSemver(a: string, b: string): number {
const pa = a.replace(/^v/, "").split(".").map(Number);
const pb = b.replace(/^v/, "").split(".").map(Number);
for (let i = 0; i < Math.max(pa.length, pb.length); i++) {
const na = pa[i] ?? 0;
const nb = pb[i] ?? 0;
if (na !== nb) return na - nb;
}
return 0;
}