Daily Changelog – September 9, 2025
Tasks for Today
- [x] Fix StatusBadge readability issue on employees page
- [x] Fix Update Employee button visibility on edit page
- [x] Fix blue-on-blue contrast issue on entries page hover
- [ ] Continue development work
Issues Found & Fixed
StatusBadge Readability Issue – RESOLVED
- StatusBadge components on employees page were using solid colors (bg-success text-success)
- This created green-on-green text that was completely unreadable
- “Linked” status badges were impossible to read
- SOLUTION: Updated StatusBadge variants to use proper contrast
- Changed from solid colors to 10% opacity backgrounds with full opacity text
- Now uses
bg-success/10 text-success instead of bg-success text-success
- Applied to all variants: info, success, alert, danger, neutral
- RESULT: StatusBadge text is now readable with proper contrast
Update Employee Button Visibility – RESOLVED
- Edit Employee page had “Update Employee” text that appeared as plain text instead of a proper button
- The page was using HTML
<button> element instead of the proper Button component
- SOLUTION: Replaced HTML button with proper Button component
- Added
Button import from @/components/ui
- Replaced
<button> with <Button> component
- Maintained all existing functionality (submit, disabled state, styling)
- RESULT: Update Employee button is now properly visible and styled
Entries Page Blue-on-Blue Contrast Issue – RESOLVED
- Admin entries page had severe readability issue when hovering over rows
- Clock in/out times used
text-info (blue text) on hover:bg-info (blue background)
- This created blue text on blue background making times completely unreadable
- SOLUTION: Changed hover background from blue to muted
- Changed
hover:bg-info to hover:bg-muted on table rows
- Maintains visual feedback while providing proper contrast
- Blue text (
text-info) now shows clearly on muted background
- RESULT: Clock in/out times are now readable when hovering over rows
Main Entries Page Comprehensive Contrast Fix – RESOLVED
- Main entries page had multiple severe contrast issues making it completely unreadable
- Issues Found:
hover:bg-info created blue-on-blue when hovering over rows
- TimePill components used solid colors (
bg-success text-success) creating poor contrast
- Break times, duration, and hours used
text-info (blue) creating readability issues
- SOLUTION: Comprehensive contrast overhaul
- Changed
hover:bg-info to hover:bg-neutral/20 for proper hover contrast
- Updated TimePill to use 10% opacity backgrounds (
bg-success/10 text-success border-success/20)
- Changed all time displays from
text-info to text-foreground for proper readability
- RESULT: Main entries page is now completely readable and professional
System-Wide Contrast Audit – COMPLETED
- Found 31 files with contrast issues across the entire app
- Identified patterns:
hover:bg-info, hover:bg-success, hover:bg-danger creating contrast problems
- SOLUTION: Created automated fix script and applied comprehensive fixes
- Fixed all
hover:bg-* issues (changed to hover:bg-*/20 for proper contrast)
- Fixed all solid color backgrounds with matching text (changed to 10% opacity with borders)
- Applied fixes to 31 files across the entire app
- RESULT: Entire app now has proper contrast and readability
Employee Edit Page Error Messages – RESOLVED
- Employee edit page had red-on-red error messages that were completely unreadable
- Error and success message cards used
bg-danger with text-danger creating poor contrast
- SOLUTION: Fixed error message contrast
- Changed
bg-danger to bg-danger/10 for error messages
- Changed
bg-success to bg-success/10 for success messages
- Fixed button with
bg-danger text-danger to bg-danger/10 text-danger
- RESULT: Error messages are now readable with proper contrast
Employee Update Functionality – RESOLVED
- Employee update was failing due to PostgreSQL type casting issue
hire_date field was being sent as text but database expected date type
- SOLUTION: Fixed type casting in SQL query
- Added
::date cast to hire_date field in UPDATE query
- Improved error handling to show detailed error messages
- RESULT: Employee updates now work properly
Employee Management Page Header Standardization – RESOLVED
- Found major inconsistencies across all employee management pages
- Each page had completely different header styles and layouts
- Some pages had custom headers, others had no proper structure
- Payroll export page was missing the employee submenu entirely
- SOLUTION: Created standardized EmployeePageHeader component
- Created reusable
EmployeePageHeader component with consistent styling
- Applied to all employee management pages: Employees, Leave of Absence, Sick Days, Positions, Departments, Payroll Export
- All headers now use same design: icon + title + subtitle + optional action button
- Consistent rounded-2xl border, backdrop-blur, shadow-xl styling
- Proper info color theming with gradient overlay
- SOLUTION: Fixed payroll export page submenu
- Added EmployeeSideMenu to payroll export page
- Now shows proper navigation like all other employee management pages
- Maintains consistent layout structure across all pages
- RESULT: All employee management pages now have consistent, professional headers
PTO Banks Page Standardization – RESOLVED
- PTO Banks page was using completely different design system with “neon-cyan glitch” styling
- Page looked “BIG AF” compared to other standardized employee management pages
- Was using PtoSideMenu instead of EmployeeSideMenu
- SOLUTION: Applied standardized design to PTO Banks page
- Replaced elaborate custom header with standardized EmployeePageHeader
- Switched from PtoSideMenu to EmployeeSideMenu for consistency
- Now matches all other employee management pages perfectly
- SOLUTION: Removed Settings from employee submenu
- Settings is for the whole app, not just employee management
- Cleaned up submenu to only include employee-specific functions
- RESULT: PTO Banks page now looks consistent and professional
PTO Banks Filtering Fix – RESOLVED
- PTO Banks page was showing all employees instead of only those with PTO entitlements
- Page claimed “Only employees with PTO entitlements are shown” but was lying
- SOLUTION: Fixed API filtering logic
- Added filter to only show employees with
PTO Yearly Amount record > 0
- Now properly filters out employees without PTO entitlements
- Page description is now accurate
- RESULT: PTO Banks page now only shows employees who actually have PTO
PTO Data Cleanup – RESOLVED
- PTO Yearly Amount records had inconsistent data: some “80”, some “80 hours”
- This caused filtering issues and data inconsistency
- SOLUTION: Cleaned up the data
- Updated 13 records to remove “hours” text from values
- All PTO Yearly Amount values now stored as clean numbers
- Simplified API query since no regex needed anymore
- RESULT: PTO data is now consistent and properly filterable
PTO Eligibility Filter Fix – RESOLVED
- PTO Banks was filtering by “PTO Yearly Amount” instead of “PTO Eligible”
- Some employees had yearly amounts but weren’t actually PTO eligible yet
- SOLUTION: Changed filter to check PTO Eligible status
- Now filters by
PTO Eligible = true/yes/1 instead of yearly amount
- Only shows employees who are actually eligible for PTO
- Updated page descriptions to reflect correct filtering logic
- RESULT: PTO Banks now shows only truly PTO-eligible employees
PTO Banks Yearly Entitlement Editing – RESOLVED
- PTO Banks page had no way to change yearly entitlements directly
- Users had to go through complex employee record management
- SOLUTION: Added inline editing for yearly entitlements
- Added edit button next to yearly entitlement values
- Click to edit, input new amount, save or cancel
- When amount changes, automatically closes old record and creates new one
- Proper audit trail with start/end dates
- SOLUTION: Created API endpoint for entitlement changes
- New
/api/pto-requests/[employeeId]/yearly PUT endpoint
- Handles record closure and creation with proper transaction safety
- Validates input and maintains data integrity
- RESULT: Yearly entitlements can now be changed directly from PTO Banks page
Time Off Request PTO Usage Control – RESOLVED
- Time off requests always used PTO balance, even when employees wanted unpaid time off
- No way to request time off without using PTO balance
- SOLUTION: Added “Use PTO Balance” checkbox to time off request form
- New checkbox allows employees to choose whether to use PTO or not
- Defaults to true (use PTO) to maintain existing behavior
- Clear labeling: “USE PTO BALANCE”
- SOLUTION: Updated database schema and API logic
- Added
use_pto boolean field to pto_requests table
- Updated all API endpoints to handle the new field
- PTO balance only deducted when
use_pto is true
- Proper restoration logic when requests are rejected/deleted
- SOLUTION: Updated PTO balance deduction logic
- Only deducts PTO when
use_pto is true
- Only restores PTO when it was previously deducted
- Maintains proper audit trail and balance calculations
- RESULT: Employees can now request time off without using PTO balance
Notes
- All changes maintain existing color token compliance
- Build passes successfully with no palette violations
- StatusBadge improvements benefit all pages using the component
- EmployeePageHeader component ensures future consistency across employee management pages
- PTO system now properly separates time off requests from PTO usage
- Database migrations applied successfully to production