OSP Projects

Time Clock – Daily Changelog – September 9, 2025

Written by

Mark

in

,

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

More posts