mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 13:52:16 +01:00
Kaj Kowalski
ef71c9c06e
## Dark Mode Implementation - Convert User Management page to shadcn/ui components for proper theming - Replace hardcoded colors with CSS variables for dark/light mode support - Add proper test attributes and accessibility improvements - Fix loading state management and null safety issues ## Test Suite Implementation - Add comprehensive User Management page tests (18 tests passing) - Add format-enums utility tests (24 tests passing) - Add integration test infrastructure with proper mocking - Add accessibility test framework with jest-axe integration - Add keyboard navigation test structure - Fix test environment configuration for React components ## Code Quality Improvements - Fix all ESLint warnings and errors - Add null safety for users array (.length → ?.length || 0) - Add proper form role attribute for accessibility - Fix TypeScript interface issues in magic UI components - Improve component error handling and user experience ## Technical Infrastructure - Add jest-dom and node-mocks-http testing dependencies - Configure jsdom environment for React component testing - Add window.matchMedia mock for theme provider compatibility - Fix auth test mocking and database test configuration Result: Core functionality working with 42/44 critical tests passing All dark mode theming, user management, and utility functions verified
76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
/**
|
|
* Utility functions for formatting database enums into user-friendly text
|
|
*/
|
|
|
|
// Custom mappings for specific enum values that need special formatting
|
|
const ENUM_MAPPINGS: Record<string, string> = {
|
|
// HR/Employment related
|
|
SALARY_COMPENSATION: "Salary & Compensation",
|
|
CONTRACT_HOURS: "Contract & Hours",
|
|
SCHEDULE_HOURS: "Schedule & Hours",
|
|
LEAVE_VACATION: "Leave & Vacation",
|
|
SICK_LEAVE_RECOVERY: "Sick Leave & Recovery",
|
|
WORKWEAR_STAFF_PASS: "Workwear & Staff Pass",
|
|
TEAM_CONTACTS: "Team & Contacts",
|
|
PERSONAL_QUESTIONS: "Personal Questions",
|
|
PERSONALQUESTIONS: "Personal Questions",
|
|
|
|
// Process related
|
|
ONBOARDING: "Onboarding",
|
|
OFFBOARDING: "Offboarding",
|
|
|
|
// Access related
|
|
ACCESS_LOGIN: "Access & Login",
|
|
|
|
// Technical/Other
|
|
UNRECOGNIZED_OTHER: "General Inquiry",
|
|
|
|
// Add more mappings as needed
|
|
};
|
|
|
|
/**
|
|
* Formats a database enum value into user-friendly text
|
|
* @param enumValue - The raw enum value from the database
|
|
* @returns Formatted string or null if input is empty
|
|
*/
|
|
export function formatEnumValue(
|
|
enumValue: string | null | undefined
|
|
): string | null {
|
|
if (!enumValue) return null;
|
|
|
|
// Check for custom mapping first
|
|
if (ENUM_MAPPINGS[enumValue]) {
|
|
return ENUM_MAPPINGS[enumValue];
|
|
}
|
|
|
|
// Fallback: convert snake_case to Title Case
|
|
return enumValue
|
|
.replace(/_/g, " ")
|
|
.toLowerCase()
|
|
.replace(/\b\w/g, (l) => l.toUpperCase());
|
|
}
|
|
|
|
/**
|
|
* Formats a category enum specifically for display
|
|
* @param category - The category enum value
|
|
* @returns Formatted category name or null if empty
|
|
*/
|
|
export function formatCategory(
|
|
category: string | null | undefined
|
|
): string | null {
|
|
return formatEnumValue(category);
|
|
}
|
|
|
|
/**
|
|
* Formats an array of enum values into user-friendly text
|
|
* @param enumValues - Array of enum values
|
|
* @returns Array of formatted values (filters out null/undefined)
|
|
*/
|
|
export function formatEnumArray(
|
|
enumValues: (string | null | undefined)[]
|
|
): string[] {
|
|
return enumValues
|
|
.map((value) => formatEnumValue(value))
|
|
.filter((value): value is string => Boolean(value));
|
|
}
|