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