• Each award type has predefined points value
• Points range from 50 to 1000+ depending on award significance
• Points accumulate on employee profiles
• Points contribute to leaderboard ranking
• Monthly points reset with leaderboard rankings

• Total points = sum of all recognition points received
• Ranking based on total points earned
• Monthly leaderboard resets with recognition of top performers
• Historical data preserved for analytics

• View leaderboard and recognition feed
• Create recognitions for colleagues
• Like and comment on recognitions
• View award types and points system
• Search and filter recognitions

• All regular employee permissions
• Create, edit, and delete award types
• Manage award categories and points values
• Access advanced analytics and reporting
• Configure system settings

• Access through main application navigation menu
• Navigate to "Recognition" or "Employee Recognition" section
• System requires organization ID for data isolation
• Dashboard loads automatically with default tab (Leaderboard)
• Initial data loading shows LoadingFlower animation

The recognition dashboard is organized into three main sections:

1. Header Section: Search bar, recognition creation button, and tab navigation
2. Main Content Area (2/3 width): Leaderboard or recognition feed based on active tab
3. Sidebar (1/3 width): Statistics, popular awards, and call-to-action cards

When the system loads, it automatically fetches:

1. Recognition feed (most recent recognitions)
2. Leaderboard data (top performers)
3. Recognition statistics (monthly metrics)
4. Award types (available award categories)
5. Employee dropdown data (for recognition creation)

Loading states are shown with the LoadingFlower component

The leaderboard features a distinctive podium layout for top 3 performers:

• 🥇 1st Place (Center): Elevated position with yellow theme
• 🥈 2nd Place (Left): Slightly lower position with silver theme
• 🥉 3rd Place (Right): Lower position with bronze theme
• Visual Hierarchy: Heights indicate ranking (1st > 2nd > 3rd)
• Special Effects: Winner gets trophy icon and larger avatar

Each leaderboard entry includes:

• Employee Avatar: Photo or gradient initials circle
• Employee Name: Full name prominently displayed
• Award Count: Number of recognitions received
• Total Points: Sum of all points from recognitions
• Rank Badge: Medal emoji indicating position (🥇🥈🥉)

The leaderboard includes summary statistics at the bottom:

• Total Awards: Sum of all recognitions given
• Top Performers: Count of employees on leaderboard
• Total Points: Sum of all points awarded
• Last Updated: Timestamp of latest leaderboard refresh

• Leaderboard loads automatically on tab selection
• Default limit: Top 10 performers
• Loading state shows LoadingFlower animation
• Error states display appropriate messages
• Empty state shows encouraging message to create recognitions

• Automatic refresh when new recognition is created
• Manual refresh via browser reload (F5)
• Monthly leaderboard resets while preserving historical data
• Real-time updates for points and rankings

Each award type consists of:

• Name: Descriptive title (e.g., "Excellence Award")
• Description: Detailed explanation of when to award
• Icon Emoji: Visual representation (🏆, ⭐, 💎, etc.)
• Color Code: Hex color for visual theme
• Points Value: Points awarded (1-10000)
• Category: Classification (SPOT, MONTHLY, LEADERSHIP, etc.)
• Frequency: How often can be awarded (DAILY, WEEKLY, ANYTIME, etc.)
• Requires Approval: Boolean flag for manager approval

1. Navigate to "Award Types" tab from main navigation
2. Click the yellow circular award button (🏆) in top-right
3. Creation modal opens with all configuration options
4. Form fields are organized in logical sections

Choose from 18 preset emojis or enter custom emoji:

Choose from 10 preset colors or use color picker:

• Minimum: 1 point
• Maximum: 10,000 points
• Default: 100 points
• Recommended: 50-500 for regular awards
• Special Awards: 500-1000 for exceptional achievements

• Award types display in 2-column grid on desktop
• Each card shows icon, name, description, and points
• Color theme applied as background tint
• Hover over cards to reveal delete button
• Categories shown as badges on cards

1. Hover over award type card to reveal delete button (trash icon)
2. Click delete button to open confirmation modal
3. Review warning message about permanent deletion
4. Confirm deletion or cancel operation
5. If award has been used, it's marked inactive instead of deleted

Three ways to start creating a recognition:

1. Header Button: Click yellow circular "+" button in top-right corner
2. Empty State: Click "Create Recognition" button when no recognitions exist
3. Sidebar CTA: Click "Start Recognizing" button in right sidebar

The recognition creation modal has two main sections:

• Left Column: Form fields for recognition details
• Right Column: Live preview of how recognition will appear
• Header: Blue theme with "Recognize Someone" title
• Footer: Action buttons (Cancel and Send Recognition)

1. Click in "Search employees by name or title..." field
2. Start typing employee name to filter list
3. Browse through filtered results showing avatars and titles
4. Click on desired employee to select them
5. Selected employee shows checkmark and highlighted background
6. Employee avatar appears in preview section

Required Field: Must select an employee to proceed

1. Browse available award types in 2-3 column grid
2. Each award shows icon, name, and points value
3. Click on desired award type to select it
4. Selected award gets blue border and background highlight
5. Award details appear in preview section
6. Points value added to recognition total

Required Field: Must select an award type to proceed

• Purpose: Brief summary of recognition (appears in bold)
• Format: Short, descriptive phrase
• Examples: "Excellent team leadership", "Outstanding client presentation"
• Character Limit: 200 characters maximum
• Validation: Title cannot be empty
• Preview: Appears prominently in recognition card

• Purpose: Detailed explanation of why employee deserves recognition
• Format: Paragraph describing specific achievements
• Minimum Length: 10 characters
• Best Practices: Be specific, mention impact, use positive language
• Examples: "John demonstrated exceptional leadership by..."
• Character Counter: Shows current length below field

• Public (Default): Visible to entire organization
• Private: Only visible to recipient and recognizer
• Toggle: Switch control with ON/OFF states
• Indicator: Badge shows visibility status in preview
• Recommendation: Use public for celebrating achievements, private for sensitive feedback

The right column shows real-time preview of the recognition:

• Employee Info: Avatar, name, and title
• Award Details: Icon, name, and points
• Title: Recognition title in preview card
• Visibility Badge: Public/Private indicator
• Date Stamp: Current date for context
• Empty State: Instructional message when form incomplete

• Updates in real-time as form fields are filled
• Shows validation errors visually
• Provides immediate feedback on recognition appearance
• Helps ensure recognition is properly formatted before submission

The system validates all fields before submission:

1. Click "Send Recognition" button (blue with send icon)
2. System validates all fields
3. If validation passes, submission begins
4. Button shows loading state with spinner
5. Modal closes automatically on success
6. New recognition appears in feed immediately
7. Leaderboard updates with new points

Each recognition card contains these elements:

• Header: Award type with icon, name, and points on colored background
• Employee Section: Recipient avatar, name, title, and recognition timestamp
• Recognition Content: Title (bold) and detailed message
• Recognizer Info: Avatar and name of person giving recognition
• Interaction Bar: Like and comment buttons with counts
• Comment Section: Expandable area for viewing and adding comments

10 alternating pastel colors for visual variety:

Colors rotate sequentially through recognition cards for visual appeal.

1. Click the thumbs-up icon (👍) on any recognition card
2. Button turns blue when liked by current user
3. Like count increments immediately
4. Click again to unlike (toggle functionality)
5. Like count updates in real-time
6. No limit on number of recognitions you can like

• Default State: Gray thumbs-up icon with count
• Liked State: Blue thumbs-up icon with count
• Hover Effect: Color change on hover
• Count Display: Number shown next to icon
• Visual Feedback: Smooth transition between states

1. Click the message bubble icon (💬) on any recognition card
2. First click expands comment input field below the card
3. Subsequent clicks toggle comment section visibility
4. Comment count shows number of existing comments
5. Only one comment section can be open at a time per card

1. Click comment icon to expand input field
2. Type your comment in the text input field
3. Press Enter or click "Post" button to submit
4. Comment appears immediately in the recognition feed
5. Comment count increments by one
6. Input field clears after successful submission
7. Comment section collapses automatically after posting

• Real-time Updates: Comments appear immediately
• Focus Management: Input field auto-focuses when expanded
• Keyboard Support: Enter key to submit comment
• Character Limit: No strict limit, but very long comments may be truncated
• Error Handling: Empty comments cannot be submitted

Each recognition shows detailed information about:

• Recipient: Avatar, full name, job title/department
• Recognizer: Avatar and name of person giving recognition
• Award Details: Type, icon, points value, and category
• Timing: Relative time ago (e.g., "2 hours ago")
• Visibility: Public/Private indicator (badge)

• Like Count: Total number of likes received
• Comment Count: Total number of comments
• Points Awarded: Points value of the award
• Popularity Indicator: High engagement shown by large numbers

• Location: Top-left corner of the dashboard header
• Components: Magnifying glass icon, text input field, search button
• Placeholder: "Search recognitions..."
• Keyboard Shortcut: Focus search field with Ctrl+F (browser standard)
• Search Button: Blue button labeled "Search" to initiate search

The search function looks through multiple recognition attributes:

• Recognition Title: Main recognition headline
• Recognition Message: Detailed description text
• Employee Names: Recipient's full name
• Award Type Names: Name of award given
• Recognizer Names: Name of person giving recognition
• Partial Matches: Searches within text, not just exact matches

1. Click in search field or use Ctrl+F to focus
2. Type search terms (case-insensitive)
3. Press Enter or click "Search" button
4. System displays matching recognitions
5. Search results replace current feed view
6. Clear search field to return to full recognition feed

• Visual Indicators: Active tab has blue background and white text
• Inactive Tabs: Gray text with hover effects
• Transition: Smooth animation between tab contents
• State Persistence: System remembers last active tab between sessions
• Loading States: Tab-specific loading indicators when fetching data

The recognition feed is organized with these characteristics:

• Chronological Order: Most recent recognitions first
• Pagination: Initial load shows 10 recognitions
• Load More: Click button to load additional recognitions
• Infinite Scroll: Manual load more instead of automatic infinite scroll
• Real-time Updates: New recognitions appear at top automatically

1. Scroll to bottom of recognition feed
2. Click "Load More Recognitions" button
3. System fetches next page of recognitions
4. New recognitions append to existing feed
5. Button shows loading state during fetch
6. Button disappears when no more recognitions available

Right sidebar provides quick access to metrics:

• This Month Section: Monthly performance statistics
• Popular Awards: Most frequently used award types
• Call-to-Action: "Start Recognizing" button for quick access
• Quick Links: Direct access to common actions