Commit graph

15 commits

Author SHA1 Message Date
81cd34b0e7
refactor(frontend): consolidate shared styles into centralized style system
- Create comprehensive shared.ts with design tokens and categorized styles:
  - layoutStyles: main, loader, content variants
  - cardStyles: card, tableCard, cardHeader
  - tableStyles: complete table styling
  - paginationStyles: pagination controls
  - formStyles: inputs, labels, errors
  - buttonStyles: primary, secondary, accent, danger variants
  - badgeStyles: status badges with color variants
  - bannerStyles: error/success banners
  - modalStyles: modal overlay and content
  - toastStyles: toast notifications
  - utilityStyles: divider, emptyState, etc.

- Refactor all page components to use shared styles:
  - page.tsx (counter)
  - audit/page.tsx
  - booking/page.tsx
  - appointments/page.tsx
  - profile/page.tsx
  - invites/page.tsx
  - admin/invites/page.tsx
  - admin/availability/page.tsx

- Reduce code duplication significantly (each page now has only
  truly page-specific styles)
- Maintain backwards compatibility with sharedStyles export
2025-12-21 23:45:47 +01:00
37de6f70e0
Add Prettier for TypeScript formatting
- Install prettier
- Configure .prettierrc.json and .prettierignore
- Add npm scripts: format, format:check
- Add Makefile target: format-frontend
- Format all frontend files
2025-12-21 21:59:26 +01:00
4b394b0698
Add ESLint for TypeScript/React linting
- Install eslint, typescript-eslint, eslint-plugin-react-hooks
- Configure eslint.config.js with flat config format
- Add type: module to package.json
- Fix unused variable issues (prefix with underscore)
- Add Makefile targets: lint-frontend, fix-frontend
2025-12-21 21:58:41 +01:00
f81e7a88bd
Fix React CSS property conflict in availability page
- Replaced borderColor with full border property in dayCardActive
- Replaced borderColor with full border property in dayCardSource
- Replaced borderColor with full border property in dayCardTarget
- Prevents React warning about mixing shorthand and non-shorthand properties
- Fixes console error when using 'Clear all' button on availability page
2025-12-21 18:23:31 +01:00
b9f605d7b3
Extract common errorBanner style to shared styles
- Added errorBanner to sharedStyles for consistent error display
- Removed duplicate errorBanner definitions from all pages
- Updated appointments, booking, admin/appointments, and admin/availability pages
- Reduced code duplication while maintaining component-specific styles
2025-12-21 18:01:30 +01:00
64eeaadd28
Extract weekend detection logic to shared utility
- Created isWeekend() function in utils/date.ts
- Replaced inline weekend detection logic in availability page
- More reusable and testable
2025-12-21 17:57:06 +01:00
3c13270bc0
Standardize time formatting and avoid string slicing
- Created formatTimeString() utility to properly parse time strings
- Replaced all .slice(0, 5) calls with proper time formatting
- Handles both 'HH:MM:SS' and 'HH:MM' formats safely
- More robust than string slicing
2025-12-21 17:56:20 +01:00
a25e84e197
Fix copy button symbol to use more standard Unicode character
- Replaced ⎘ (U+2398) with 📋 (clipboard emoji) for better cross-platform compatibility
- More recognizable and widely supported symbol
2025-12-21 17:55:06 +01:00
5c396e62ec
Extract duplicate date range helpers to shared utility
- Created getDateRange() function in utils/date.ts
- Replaced getBookableDates() and getDateRange() duplicates
- Both booking and availability pages now use shared function
- Function accepts minAdvanceDays and maxAdvanceDays as parameters
2025-12-21 17:54:49 +01:00
40b193238e
Move TIME_OPTIONS outside component
- TIME_OPTIONS is now computed at module level, not inside component
- generateTimeOptions now accepts slotDurationMinutes as parameter
- Prevents unnecessary recomputation on every render
2025-12-21 17:53:17 +01:00
6ff3c0a133
Extract duplicate date formatting functions to shared utilities
- Created frontend/app/utils/date.ts with formatDate, formatTime, formatDateTime, formatDisplayDate
- Created frontend/e2e/helpers/date.ts with formatDateLocal, getTomorrowDateStr
- Updated all frontend pages and e2e tests to use shared utilities
- Removed duplicate date formatting code from 6 files
2025-12-21 17:48:17 +01:00
eefdfd714f
Fix: useCallback dependency array in availability page
Compute dates inside fetchAvailability callback to avoid
dependency on external variable that changes on every render.
2025-12-21 17:32:55 +01:00
89eec1e9c4
Fix flaky E2E tests with proper selectors and response waits
- Use data-testid attributes to target specific day cards in availability tests
- Wait for networkidle before interacting with page elements
- Set up PUT and GET response listeners before triggering actions
- Add retry logic for availability API in booking tests
- Fix appointments test to handle multiple 'Booked' elements with .first()
- Increase parallel workers to 12 for faster test execution
2025-12-21 01:13:10 +01:00
06817875f7
Phase 3: Appointment model & booking API with timezone fix 2025-12-21 00:03:34 +01:00
f6cf093cb1
Phase 2: Admin availability UI with calendar grid, edit modal, and e2e tests 2025-12-20 23:54:34 +01:00