OSP Projects

Category: Time Clock

  • Time Clock – Daily Changelog – October 2, 2025

    Time Clock – Daily Changelog – October 2, 2025

    Daily Changelog – October 2, 2025

    Improvements

    • Removed all video game and arcade aesthetic CSS from globals.css including neon effects, pixel animations, glitch effects, and arcade-themed classes
    • Eliminated Orbitron font family from tailwind config in favor of Inter and Alderwood typography
    • Reduced globals.css from 1073 lines to 115 lines by removing aggressive color override rules and simplifying design token system
    • Simplified color token system to use only gray-1 through gray-12 and two yellow accent variables (yellow-9, yellow-11) instead of full 12-shade palettes
    • Removed all CSS rules using !important that forced color conversions from blue/purple/cyan to yellow
    • Removed semantic color tokens (success, info, danger, alert, neutral) from CSS in favor of intentional Tailwind class usage in components
    • Updated @layer base styles to use Tailwind @apply directives for better consistency with design tokens
    • Removed glassmorphism effects from Card component in favor of solid backgrounds with subtle shadows
    • Simplified Card component from rounded-xl with backdrop-blur to clean rounded-lg with shadow-sm styling
    • Updated Button component to use clean minimal variants removing all semantic color options (info, success, danger, alert, neutral)
    • Removed arcade styling from Button component including shadow animations and active state transforms
    • Changed Button base class to use simple transition-colors instead of complex transition-all with duration
    • Rewrote StatusBadge component to use class-variance-authority with clean solid backgrounds instead of semi-transparent overlays
    • Updated StatusBadge variants to success, warning, error, neutral, and info with proper contrast ratios
    • Changed StatusBadge styling to pill-shaped (rounded-full) badges with consistent spacing and clean typography
    • Modernized homepage heading from arcade-style neon effect to clean professional greeting with simple date display
    • Simplified homepage stats cards with subtle gray icon backgrounds (bg-neutral/10) instead of bright colored circles
    • Reduced homepage hero section complexity removing uppercase styling, Orbitron font, and arcade status text
    • Streamlined homepage footer from multi-line status display to single version number line
    • Removed gradient background and backdrop filters from CustomNavbar in favor of clean solid background with subtle border
    • Reduced navbar height from h-20 to h-16 for more compact professional appearance
    • Simplified navbar hover states from bg-accent/60 to bg-muted/50 for subtler interaction feedback
    • Changed navbar link styling to use text-muted-foreground with hover:text-foreground instead of opacity-based colors
    • Updated admin console styling to use consistent muted backgrounds and simplified transitions
    • Removed duration-200 and transition-all animations from navbar in favor of simple transition-colors
    • Replaced arcade-card class with bg-card border border-border rounded-lg across 12 TSX files
    • Replaced arcade-btn class with px-4 py-2 rounded-md transition-colors button styling sitewide
    • Replaced arcade-loader class with standard animate-spin spinner implementation
    • Removed all neon-* classes (neon-cyan, neon-pink, neon-purple, neon-orange, neon-green) from entire codebase
    • Removed all pixel-* animation classes from components
    • Removed all glitch effect classes from headers and titles
    • Removed all Orbitron font-family inline styles from TSX files
    • Replaced arcadeStyles object in TimeEntryEditModal with clean styles object using standard Tailwind classes
    • Replaced arcadeStyles object in time-entry/new page with professional styles removing uppercase and tracking classes
    • Replaced arcadeStyles object in settings/pay-periods page with clean professional styling
    • Changed homepage greeting initialization from “TIME CLOCK ARCADE” to “Good Day”
    • Updated time-entry/new page header from “ADD NEW ENTRY” to “Add New Entry” with descriptive subtitle
    • Changed schedules/nexus page title from “[SCHEDULING ARCADE]” to “Schedule Nexus”
    • Replaced gaming color variables (neon-pink, neon-cyan gradients) with semantic theme colors (text-primary, text-info)
    • Updated TimeEntryEditModal title from “EDIT TIME ENTRY” to “Edit Time Entry” with reduced icon size
    • Simplified all loading states from arcade-themed to standard spinner with “Loading…” text
    • Removed “PERSONNEL TIME LOGGING SYSTEM” arcade-style subtitle in favor of plain English descriptions
    • Standardized all rounded corners from rounded-xl and rounded-2xl to consistent rounded-lg across all pages
    • Unified main container padding from py-8 to py-12 for consistent page spacing
    • Standardized card padding from p-8 to p-6 across all cards and panels
    • Changed grid gaps from gap-8 to gap-6 for more compact, professional layouts
    • Reduced large margins from mt-16 to mt-12 for better visual rhythm
    • Removed all backdrop-blur effects for cleaner, simpler card styling
    • Removed shadow-sm and shadow-xl in favor of simple border-based separation
    • Updated time-clock page to use container mx-auto px-4 py-12 max-w-7xl for consistent width
    • Changed employees page container padding from py-8 to py-12
    • Standardized payroll page grid from gap-8 to gap-6
    • Updated payroll card transition from transition-all duration-200 to simple transition-colors
    • Fixed error state layouts to use consistent container and card spacing
    • Ensured all section spacing uses mb-6, mb-8, or mb-12 from Tailwind scale
    • Standardized all page titles (h1) to text-3xl font-semibold across all pages
    • Changed section headings (h2) from text-2xl font-bold to text-xl font-semibold
    • Updated subsection headings (h3) from text-xl font-bold to text-lg font-semibold or text-base font-semibold
    • Replaced all font-bold with font-semibold for headings and labels (except display numbers)
    • Removed all uppercase text transforms for more natural, readable typography
    • Removed tracking-wide and tracking-wider letter-spacing for cleaner text
    • Fixed homepage h1 from text-4xl to text-3xl for consistency
    • Updated time-clock page h1 from text-2xl to text-3xl for proper hierarchy
    • Changed quick action labels from font-bold to font-medium
    • Standardized error messages and alerts to use font-semibold
    • Fixed text-muted-foreground900 typos to text-muted-foreground
    • Ensured proper text contrast with semantic foreground colors
    • Replaced standard Tailwind colors in button.tsx with brand colors (bg-red-600 → bg-[#8F4224], hover:bg-red-700 → hover:bg-[#7E371B])
    • Updated status-badge.tsx to use brand colors: success (#718F24), warning (#E5B919), error (#8F4224), info (#3978AC)
    • Fixed palette validation build errors by ensuring all background colors use approved brand hex values
    • Fixed syntax error in payroll/pay-periods/page.tsx by removing stray comma from style object
    • Fixed syntax error in schedules/nexus/page.tsx by removing stray comma from style object
    • Fixed syntax error in time-clock/page.tsx by adding missing closing div tag and fixing indentation
    • Updated StatusBadge variant from “alert” to “warning” in employee/components/ClockPanel.tsx
    • Changed StatusBadge variant from “alert” to “warning” in time-off-requests/page.tsx
    • Updated StatusBadge variant from “alert” to “warning” in entries/page.tsx for consistency
    • Changed Button variant from “error” to “destructive” in schedules/weekly-schedules/[weekStart]/page.tsx
    • Updated SemanticVariant type in variant-map.tsx from alert/danger to warning/error
    • Fixed statusToVariant function to return warning instead of alert for pending/paused statuses
    • Fixed priorityToVariant function to return error/warning instead of danger/alert
    • Updated getVariantIcon function to handle warning and error variants
    • Replaced all StatusBadge variant=”danger” with variant=”error” across entire codebase
    • Replaced all StatusBadge variant=”alert” with variant=”warning” across entire codebase
    • Fixed variant comparisons in entries/page.tsx to use warning/error instead of alert/danger
    • Updated sick-days page to use error/warning variants instead of danger/alert
    • Updated tasks page subtask badges to use error/warning variants
    • Removed withIcon prop from StatusBadge components (not supported by component)
    • Replaced all CSS color variables with warm palette from mama-tried-fulfillment app (#8F6624 primary, #E5B919 accent, #8F4224 destructive)
    • Updated light theme colors to use warm off-white (#FDFDFC) background with warm foreground (#120E07) for better color temperature
    • Updated dark theme colors to use warm dark brown backgrounds (#120E07, #1A1612) instead of cold grays
    • Changed muted backgrounds from gray (#eff0f3) to warm beige (#F4F3F1) for warmer overall appearance
    • Updated border colors from neutral gray (#d8d9e0) to warm tan (#D1CDC7) matching fulfillment app
    • Added primary color scale (100-900) to Tailwind config with warm amber/gold shades from fulfillment app
    • Added gray color scale (100-900) with warm gray tones matching fulfillment app palette
    • Updated Button component to match fulfillment app exactly with gap-2, svg sizing, and ring-offset-2 focus states
    • Changed Button hover states from opacity changes to bg-primary with opacity-90 for consistent warm feel
    • Added primary and success button variants to match fulfillment app button options
    • Updated Input component to match fulfillment app with file:text-foreground styling and responsive text sizing (text-base md:text-sm)
    • Changed Table wrapper from rounded-xl with backdrop-blur to rounded-md with solid bg-white/dark:bg-card matching fulfillment app
    • Updated Table default zebra striping to false to match cleaner fulfillment app table aesthetic
    • Changed TableRow hover state from hover:bg-muted to hover:bg-muted/50 for subtler interaction
    • Updated TableHeader and TableHead backgrounds from bg-muted/30 to full bg-muted for stronger header contrast
    • Changed container padding to match fulfillment app exactly (px-4 md:px-8 lg:px-16)
    • Updated navbar styling from backdrop-blur to solid bg-card with shadow-sm for cleaner appearance
    • Changed navbar padding to match fulfillment app container width system
    • Applied font-alderwood and text-primary to all major page headings for consistent brand typography
    • Updated EmployeePageHeader to use primary colors instead of info blue for brand consistency
    • Changed homepage greeting to use Alderwood font with primary color for warm branded appearance
    • Updated task management page title to use Alderwood font with primary color
    • Changed employee portal welcome header to use Alderwood font with primary color for brand identity
    • Fixed palette validation error by replacing bg-green-600/bg-green-700 with approved brand green colors (#718F24/#627E1B)
    • Updated Textarea component to match fulfillment app with responsive text sizing (text-base md:text-sm)
    • Updated Badge component variants to use approved brand colors from brand_colors.svg palette
    • Changed Badge warning variant to use Alert palette (#F7F0D4 light, #614D05 text, #F5E3A3 hover)
    • Updated Badge success variant to use Success palette (#F3F5F0 light, #42570F text, #D3DBBD hover)
    • Changed Badge info variant to use Info palette (#F0F3F5 light, #0F3757 text, #BDCEDB hover)
    • Updated Badge processing variant to use warm gray tones for neutral status indication
    • Added dark mode variants for all Badge colors maintaining brand palette consistency

    Notes

    • Design system now follows modern SaaS aesthetic similar to Linear, Vercel, and Notion with minimal styling and intentional color usage
    • Components now use proper Tailwind utilities and design tokens without fighting CSS override rules
    • Color decisions are now made at the component level rather than forced through global CSS overrides
    • All pages now use consistent spacing scale (p-4, p-6, gap-4, gap-6, mb-6, mb-8, mb-12) for professional rhythm
    • Container widths standardized with max-w-7xl for main content areas and max-w-6xl for centered grids
    • Spacing system creates breathable layouts with predictable visual hierarchy
    • Typography hierarchy now consistent: h1 (text-3xl font-semibold), h2 (text-xl font-semibold), h3 (text-lg/base font-semibold)
    • All uppercase transforms and excessive letter-spacing removed for natural readability
    • Font weights simplified to semibold for headings, medium for labels, normal for body text
    • Time Clock app now visually matches mama-tried-fulfillment app with identical color palette, warm temperature, and consistent component styling
    • Both apps share warm amber/gold primary colors (#8F6624), warm backgrounds, and Alderwood font for headers creating unified Orchard Street Press brand identity
    • Table styling now consistent between apps with clean borders, muted headers, and subtle hover states
    • Button and input components use identical styling patterns for seamless cross-app consistency
    • Container widths and padding match exactly between apps for unified layout experience
  • Time Clock – Daily Changelog – September 24, 2025

    Time Clock – Daily Changelog – September 24, 2025

    Daily Changelog – September 24, 2025 – little changes

    Fixes

    • Fixed dark header backgrounds in entries page by changing from bg-card to bg-muted2 for better light mode contrast
    • Fixed missing header backgrounds in employees page by changing from bg-card to bg-muted2 for better light mode visibility
    • Fixed dark header backgrounds in schedule pages by changing from bg-info to bg-muted2 for better light mode contrast
    • Fixed dark header backgrounds in shared table component by changing from bg-card to bg-muted2 for better light mode contrast across all tables

    Improvements

    • Improved light mode readability across entries, employees, and schedule pages with consistent header styling
    • Standardized header background tokens to use muted variants for better contrast in both light and dark modes
    • Created shared DepartmentHeader component to ensure all department headers use identical styling across the app
    • Removed alternating background colors from entries page that created visual inconsistency
    • Debugged color token system to identify why bg-muted wasn’t visible (very light yellow color)
  • Time Clock – Daily Changelog – September 23, 2025

    Time Clock – Daily Changelog – September 23, 2025

    Daily Changelog – September 23, 2025

    Daily Changelog – September 23, 2025

    Improvements

    • Removed non-functional “View as Employee” functionality from admin navbar since dedicated employee portal exists
    • Removed ViewRoleBanner component from layout since view role switching no longer needed
    • Removed ViewRoleProvider and useViewRole hook to clean up unused code
    • Cleaned up commented view role imports in sick-days page

    Security

    • Implemented whitelist security approach: employees only allowed explicit routes they need
    • Added comprehensive middleware protection using allowlist instead of blocklist
    • Protected sensitive API routes from employee access with 403 responses
    • Updated navigation configuration with role-based restrictions on all admin functionality
    • Added employee-specific navigation items and removed admin menu for employees
    • Preview mode respects role overrides for UI testing without granting actual access

    Preview Mode

    • Restored “Preview as Employee” functionality for admins to test employee experience
    • Preview mode shows UI changes without granting actual access to restricted data
    • Admins can verify what employees see before making interface changes

    Fixes

    • Fixed time display showing impossible chronological times (clock-in after clock-out) by enforcing strict UTC ISO string handling across all time clock APIs
    • Fixed payroll calculations to match legacy FileMaker app totals by implementing proper 30-minute lunch credit logic
    • Resolved variable shadowing compilation errors in time_clock_records API that were causing Heroku build failures
    • Fixed TypeScript error in NavbarWrapper where userRole could be undefined
    • Fixed unused variable warnings in middleware and entries page

    Improvements

    • Implemented 30-minute lunch credit for employees with “Break Rules” record set to Yes/Y/true/1
    • Applied lunch credit at day level with 2-decimal rounding to match legacy system behavior
    • Enhanced payroll export queries to calculate daily totals with lunch credit before weekly aggregation
    • Updated time display format to show 12-hour AM/PM format instead of 24-hour format on entries page
  • Time Clock – Daily Changelog – September 22, 2025

    Time Clock – Daily Changelog – September 22, 2025

    Daily Changelog – September 22, 2025

    Fixes

    • Fixed time display formatting on entries page to keep start/end times on single lines

    Improvements

    • Adjusted column widths on entries page to better accommodate time displays and improve layout
    • Made TimePill components more compact with reduced padding and smaller text size
    • Changed Start · End column layout from space-y to flex column for better time display
    • Reduced Duration and Hours column widths to make room for wider time columns
    • Added whitespace-nowrap to prevent time text wrapping in break columns
    • Updated break time displays to use flex column layout with smaller text
    • Fixed all TypeScript errors related to Date vs UTCISOString type mismatches across multiple files
    • Corrected import statements to use date-fns for addDays, startOfWeek, and differenceInCalendarDays functions
    • Fixed formatLocal function calls to properly convert Date objects to UTCISOString before formatting
    • Modified payroll export system to exclude employees in Company Leadership department from payroll exports while keeping them trackable in system for management purposes

    Notes

    • Successfully resolved all TypeScript compilation errors and achieved successful Heroku deployment after extensive debugging
  • Time Clock – Daily Changelog – September 19, 2025

    Time Clock – Daily Changelog – September 19, 2025

    Daily Changelog – September 19, 2025

    Fixes

    • Fixed holiday date display issue in calendar settings where Labor Day showed as Aug 31 instead of Sep 1 by changing formatLocal() to formatDateOnlyLocal() in HolidaysSection.tsx, resolving timezone conversion error for date-only strings

    Improvements

    • Updated payroll export to include holiday_hours totals in total_holiday_hours and summed into total_hours on API api/payroll/export, improving accuracy for holiday weeks

    New

    • Added daily holiday hours generator API api/holiday-hours/generate to upsert paid holiday entries per eligible employee based on master schedules (8 or 10 hours), enabling automatic holiday population
    • Added script scripts/generate-holiday-hours.js with npm command npm run holiday:generate to trigger holiday generation via deployed app URL, allowing Heroku Scheduler or manual runs
    • Added unified time-off entries API api/time-off/entries to combine PTO requests and holiday hours into single dataset with employee names and filtering
    • Added time-off entries page time-off/entries with data table showing all vacation and holiday entries across employees, accessible from navigation menu
    • Backfilled holiday hours for Memorial Day 2025 and Labor Day 2025 for all eligible employees using deployed script

    Notes

    • Holiday generator script initially failed due to API changes not being deployed; resolved after deployment
    • Time-off entries page initially showed future empty holiday placeholders; fixed by defaulting includeCalendar=false to hide scheduled holidays until actual entries exist
  • Time Clock – Daily Changelog – September 18, 2025

    Time Clock – Daily Changelog – September 18, 2025

    Daily Changelog – September 18, 2025

    Fixes

    • Fixed missing calendar entries causing schedule generation failures by adding auto-creation of calendar entries in generateWeeklySchedulesRefactored function
    • Resolved “generate more weeks” functionality breaking when calendar entries don’t exist for future dates
    • Added defensive programming to schedule generation to automatically create missing calendar dates instead of failing
    • Fixed PTO requests API to return date fields as plain text strings using ::text casting to prevent timezone conversion of date-only values
    • Resolved date display issues where manual PTO requests showed incorrect dates due to UTC timestamp conversion in API layer

    Improvements

    • Enhanced schedule generation robustness by ensuring calendar entries exist before attempting to generate schedules
    • Added automatic calendar entry creation for any missing dates during schedule generation process
    • Cleaned up import modal styling by removing unprofessional emojis and fixing contrast issues with yellow file upload button
    • Improved schedule page layout with proper button grouping, spacing between header and content, and better department section separation
    • Fixed cramped UI elements across multiple pages by adding appropriate gaps and breathing room
    • Enhanced payroll export page to automatically select the most recent relevant pay period instead of defaulting to blank selection
    • Fixed payroll export SQL GROUP BY error by adding missing columns to GROUP BY clause
    • Added CSV export functionality to payroll export API with proper Content-Disposition headers for file downloads
    • Simplified payroll export query to resolve complex recursive CTE issues causing data retrieval failures
    • Added defensive programming to payroll export frontend to handle non-numeric values with Number() conversion
  • Time Clock – Daily Changelog – September 17, 2025

    Time Clock – Daily Changelog – September 17, 2025

    Daily Changelog – September 17, 2025

    Fixes

    • Fixed timezone display issues in PTO request dates where date-only values (2025-10-20) were being incorrectly interpreted as UTC and shifted by timezone conversion, causing 10/20 to display as 10/19
    • Updated time-off-requests page to use formatDateOnlyLocal instead of formatLocal for proper date-only formatting
    • Fixed DateTime.fromISO calls in employee portal, main dashboard, and leave of absence components to specify America/Chicago timezone for date-only strings
    • Resolved date shifting in FileMaker PTO import display where imported 10/20 and 11/20 requests appeared as 10/19 and 11/19 in frontend
    • Fixed PTO import functions to use simple date component parsing instead of timezone-aware parseAppDate for date-only values
    • Removed unnecessary timezone conversion from both FileMaker PTO import and regular PTO import routes
    • Standardized date-only parsing across all import functions to match time clock import approach (direct MM/DD/YYYY to YYYY-MM-DD conversion)
    • Resolved massive TypeScript build regression where 208+ errors were caused by systematic removal of date-fns imports while leaving function calls intact
    • Restored missing date-fns imports to 23+ files including format, parseISO, addDays, startOfWeek functions
    • Fixed duplicate DateTime import causing webpack compilation failure in payroll pay-periods page
    • Fixed UTCISOString type casting errors across 15+ components by adding proper type assertions
    • Fixed Luxon DateTime method calls (.toISOString() → .toISO(), .getTime() → .toJSDate().getTime())
    • Resolved import conflicts in time.ts library where date-fns functions conflicted with existing implementations
    • Fixed missing fs import in wordpress-simple.ts and various API route type errors
    • Installed missing @types/luxon and date-fns packages to restore proper TypeScript definitions
    • Fixed function declaration order issues where useEffect hooks referenced functions before they were declared
  • Time Clock – Daily Changelog – September 16, 2025

    Time Clock – Daily Changelog – September 16, 2025

    Daily Changelog – September 16, 2025

    Improvements

    • Changed agent terminology from “PTO” to “vacation” throughout system prompts and interface to match company usage
    • Added confirmation step to agent time off requests – agent now presents request details for user approval before submitting
    • Improved agent response format to display natural text instead of raw JSON in conversation history
    • Enhanced agent system prompt to default to “vacation” type unless user specifies sick leave, personal time, or other types

    Fixes

    • Fixed 400+ linting violations across 70+ files by removing eslint.ignoreDuringBuilds and typescript.ignoreBuildErrors from next.config.ts
    • Replaced all Date instantiations with proper time library functions from src/lib/time.ts
    • Converted all date-fns imports to use centralized time utilities
    • Fixed TypeScript any types with proper type definitions
    • Removed unused variables and imports across codebase
    • Achieved 100% reduction in linting violations (400+ → 0)

    Notes

    • Agent now follows two-step process: confirm_time_off tool for user confirmation, then create_time_off_request after approval
    • Build process now properly enforces code quality standards and will fail on violations

  • Time Clock – Daily Changelog – September 15, 2025

    Daily Changelog – September 15, 2025

    Fixes

    • Fixed break constraint violation in time clock import by adding validation to skip breaks with identical start/end times
    • Updated import scripts to check break_end > break_start before insertion in all import processes
    • Added logging for invalid breaks to help debug future import issues
    • Prevented database constraint violation errors during time clock data import

    Notes

    • Import process now handles edge cases where break start and end times are identical
    • All import scripts (Python and JavaScript) now include proper break validation