• PayLevel Component: Main container component
• Redux Integration: State management via Redux slices
• API Integration: Connection to backend services
• UI Components: Custom UI elements with consistent styling

• Initial Load: Fetch pay rates on component mount
• Add Operation: Dispatch addPayRate action
• Edit Operation: Dispatch updatePayRate action
• Error Handling: Global error state management

The PayLevel component is typically integrated into a larger application structure. It receives the following props:

• darkMode: Boolean indicating dark mode status
• organizationId: String identifier for the organization

Example usage:

• Component automatically fetches pay rates on mount
• Uses Redux fetchPayRates action
• Requires valid organizationId
• Shows loading state during data fetch

• Page Title: "Pay Levels" with gradient styling
• Add Button: Yellow circular button with plus icon
• Error Display: Top-aligned error messages when present

• Click the yellow "Add" button with plus icon in the header
• Slide-in panel opens from the right
• Overlay with dark background appears
• Form has gradient header with title "Add New Pay Level"

• Classification: Text input for pay rate classification name
• Weekly: Number input for weekly pay rate
• Hourly: Number input for hourly pay rate
• Saturday: Number input for Saturday pay rate
• Sunday: Number input for Sunday pay rate
• Holiday: Number input for holiday pay rate
• Afternoon: Number input for afternoon shift rate
• Night: Number input for night shift rate

• Two-column grid layout on medium screens and larger
• Single column on mobile devices
• Consistent spacing between fields
• Labels above inputs for clarity

• Add Button: Primary teal-colored button
• Cancel Button: Secondary button with border
• Fixed position at bottom of panel
• Consistent with dark mode theming

• Click "Add" button to submit form
• All fields are required and validated
• Numeric fields must contain valid numbers
• Organization ID is automatically included

• Form closes automatically on success
• New pay level appears in the table
• Table refreshes to include the new entry
• No explicit success message - changes are visible immediately

• Locate the pay level you want to edit in the table
• Click the blue "Edit" button (pencil icon) in the Actions column
• The row transforms into editable input fields
• Save and Cancel buttons appear in the Actions column

• Classification: Text input field
• Weekly: Number input field
• Hourly: Number input field
• Saturday: Number input field
• Sunday: Number input field
• Holiday: Number input field
• Afternoon: Number input field
• Night: Number input field

• Click the green "Save" button (checkmark icon)
• System validates all changes
• Numeric fields must contain valid numbers
• Redux updatePayRate action is dispatched

• Row returns to read-only mode
• Changes are immediately reflected in the table
• No explicit success message - changes are visible immediately

• Click the red "Cancel" button (X icon) to discard changes
• Row returns to read-only mode without saving
• All edited values are reverted to their original state

The PayLevel component receives a darkMode prop:

This boolean prop determines the color scheme:

• true: Dark mode colors applied
• false: Light mode colors applied

The component uses conditional class generation based on the darkMode prop:

This pattern is used throughout the component for consistent theming.

• Positioned at the top of the component
• Red background with white text
• Sticky positioning to remain visible while scrolling
• Close button (X icon) to dismiss the error
• Displays the exact error message from Redux state

• Errors stored in Redux payRatesError state
• useEffect hook shows error when present
• User can dismiss errors with close button
• clearPayRateError action clears the error state
• Errors automatically cleared on component mount

• Displayed during initial data fetch
• Centered vertically and horizontally
• Uses custom LoadingFlower component
• Prevents user interaction during loading

• All form fields marked as required
• Numeric inputs validate for number format
• Browser-native validation used for simplicity
• Form submission prevented if validation fails

• Backend validates data before persistence
• Organization ID required for all operations
• Data type validation on server side
• Error messages returned from API for display

All form fields in the Add PayLevel form are required:

• Classification: Non-empty string
• Weekly: Valid number
• Hourly: Valid number
• Saturday: Valid number
• Sunday: Valid number
• Holiday: Valid number
• Afternoon: Valid number
• Night: Valid number

• Numeric fields use type="number" input
• Browser prevents non-numeric input
• Values converted to numbers before API submission
• Negative numbers allowed (for rate adjustments)

The backend API validates all incoming data:

• Organization ID: Must be valid and exist in system
• Classification: Non-empty string, unique per organization
• Numeric Fields: Valid numbers, reasonable ranges
• Data Types: Correct data types for all fields

Backend returns appropriate error messages for validation failures:

• Field-specific error messages
• HTTP status codes indicating error type (400, 404, 500)
• Consistent error response format
• User-friendly error messages for display

• Same validation rules as add form
• Numeric inputs must contain valid numbers
• Empty fields not allowed
• Validation occurs before save operation

• Save button disabled if validation fails
• User must correct errors before saving
• Cancel button always available to discard changes