Frontend
Dashboard Overview

Dashboard Overview

Welcome to Your Dashboard

After successfully logging in with your credentials and OTP verification, you'll be taken to the Dashboard. The Dashboard is your central hub for accessing all Worksphere features and viewing your personal information.

Dashboard Layout

Header Section

Top Navigation Bar

  • Logo/Brand - Left side
  • User Menu - Right side
    • Profile icon
    • Username display
    • Notifications badge
    • Settings
    • Logout button

Main Content Area

The dashboard is organized into several key sections:

Dashboard Sections

1. Welcome Card

Displays:

  • Personalized greeting: "Welcome, [Your Name]"
  • Current date and time
  • Your designation and department
  • Quick access buttons

2. Key Information Widgets

Personal Information Widget

  • Employee ID
  • Full Name
  • Email Address
  • Contact Number
  • Department
  • Designation
  • Manager Name
  • Joining Date

Attendance Widget

  • Today's Attendance Status
  • Current Month Attendance (%)
  • Days Present/Absent
  • Last check-in time
  • Mark Attendance button (if applicable)

Leave Information Widget

  • Total Leave Balance
  • Leaves Used This Year
  • Available Leaves Breakdown:
    • Casual Leave
    • Sick Leave
    • Annual Leave
    • Other Leaves
  • Apply Leave button

Payroll Information Widget

  • Last Salary Amount
  • Last Salary Date
  • Next Salary Date
  • YTD (Year-to-Date) Salary
  • View Payslip button

3. Quick Actions Section

Common tasks accessible from dashboard:

ActionDescription
Apply LeaveSubmit a new leave request
Mark AttendanceManual attendance marking (if enabled)
View PayslipDownload monthly payslip
Update ProfileEdit personal information
Submit DocumentUpload required documents
View CalendarCheck holidays and leave calendar

4. Performance & Goals

Current Performance Card

  • Performance Rating
  • Last Appraisal Date
  • Next Review Date
  • View Details button

Goals Card

  • Active Goals Count
  • Completed Goals Count
  • In Progress Goals
  • View All Goals button

5. Notifications Panel

Types of Notifications:

  • Leave approval/rejection
  • Payslip availability
  • Performance appraisal reminders
  • Document upload reminders
  • System announcements
  • HR updates

Notification Features:

  • Badge count showing unread notifications
  • Click to mark as read
  • Delete old notifications
  • Notification preferences in settings

6. Upcoming Events

Calendar Widget Shows:

  • Holidays
  • Approved leaves (yours and team)
  • Important dates
  • Training sessions
  • Appraisal dates

7. Recent Activity

Shows Recent Actions:

  • Last login time
  • Recent documents uploaded
  • Latest leave requests
  • Recent payslips downloaded
  • Recent updates to profile

Dashboard Data at a Glance

Information Displayed

┌─────────────────────────────────────────┐
│         Worksphere DASHBOARD                  │
├─────────────────────────────────────────┤
│                                         │
│  Welcome, John Doe                      │
│  Employee ID: EMP001                    │
│                                         │
├─────────────────────────────────────────┤
│                                         │
│  ATTENDANCE       LEAVE        PAYROLL  │
│  ──────────       ──────       ──────   │
│  95%             12 days      ₹50,000  │
│  Present         Available    Last Paid │
│                                         │
├─────────────────────────────────────────┤
│                                         │
│  QUICK ACTIONS                          │
│  □ Apply Leave   □ View Payslip        │
│  □ Update Docs   □ View Calendar       │
│                                         │
└─────────────────────────────────────────┘

Accessing Different Modules

From the Dashboard, you can access:

Left Sidebar Menu

  1. Dashboard - Current page
  2. Employee Profile - Personal information
  3. Attendance - Attendance records
  4. Leave Management - Apply and manage leaves
  5. Payroll - Salary and payslip details
  6. Performance - Appraisals and goals
  7. Documents - Upload and manage documents
  8. Support - Help and support

Dashboard Features

Responsive Design

The dashboard is fully responsive:

  • Desktop - Full layout with all widgets
  • Tablet - Optimized widget arrangement
  • Mobile - Stacked single-column layout

Customization

You can customize your dashboard:

  1. Rearrange Widgets

    • Click and drag widgets
    • Arrange in your preferred order
    • Changes auto-save

  2. Hide/Show Widgets

    • Click settings icon on widget
    • Toggle visibility
    • Only show relevant widgets

  3. Save Preferences

    • Dashboard layout is saved per user
    • Preferences sync across devices
    • Reset to default available

Refresh Data

  • Auto-Refresh - Dashboard auto-refreshes every 5 minutes
  • Manual Refresh - Click refresh button for immediate update
  • Real-time Updates - Critical data updates in real-time

Dashboard Widgets Details

Attendance Widget

Shows:

  • Today's status (Present/Absent/On Leave)
  • Current month attendance percentage
  • Working days vs attendance
  • Leave days taken
  • Absent days

Actions:

  • View full attendance report
  • Mark attendance (if manual marking enabled)
  • Download attendance certificate

Leave Widget

Shows:

  • Leave balance by type
  • Used leaves this year
  • Leaves expiring soon
  • Pending leave requests
  • Approved leaves calendar

Actions:

  • Apply for new leave
  • View leave history
  • Download leave balance report
  • View team leaves

Payroll Widget

Shows:

  • Latest salary amount
  • Salary payment date
  • Year-to-date salary
  • Tax details
  • Deductions summary

Actions:

  • Download latest payslip
  • View payslip history
  • Download Form 16
  • View salary certificate

Performance Widget

Shows:

  • Current performance rating
  • Last appraisal rating
  • Upcoming appraisals
  • Active goals progress
  • 360-feedback status

Actions:

  • View full performance review
  • Submit self-assessment
  • View goal progress
  • Request feedback

Dashboard Security

Session Management

  • Session Timeout - 30 minutes of inactivity
  • Auto-Logout - Automatic logout after timeout
  • Session Extension - Click to extend active session
  • Remember Session - Option to extend stay

Data Privacy

  • Personal Data - Only your data is visible
  • Sensitive Information - Masked where necessary
  • Audit Trail - All actions logged
  • Data Encryption - All data encrypted in transit

Device Security

  • Logout on Exit - Click logout button when done
  • Clear Cache - Automatic on logout
  • Public Computer Warning - Warning on public device login
  • Session Lock - Lock dashboard when idle

Mobile Dashboard

The mobile app provides:

  • Compact View - Optimized for small screens
  • Quick Actions - Quick access buttons
  • Offline Mode - View cached data offline
  • Push Notifications - Real-time alerts
  • Fingerprint Login - Biometric authentication (optional)

Troubleshooting

Q: Dashboard not loading? A: Refresh page, clear cache, try different browser.

Q: Data not updating? A: Click refresh button, wait for auto-refresh, check internet connection.

Q: Notification badge not clearing? A: Click notification icon and mark as read, refresh page.

Q: Widget missing? A: Check customization settings, reset to default layout.

Best Practices

  1. Check Dashboard Daily

    • Review upcoming events
    • Check notifications
    • Verify attendance status

  2. Keep Information Updated

    • Update profile regularly
    • Upload required documents
    • Keep contact details current

  3. Review Leave Balance

    • Check available leaves regularly
    • Plan leaves in advance
    • Note expiring leaves

  4. Monitor Performance

    • Review appraisal status
    • Track goal progress
    • Prepare for reviews

  5. Secure Your Session

    • Always logout when done
    • Don't share login credentials
    • Use strong password

Next Steps

Authentication & LoginGroup