feat: Implement staff dashboard, admin attendance page, and role-based routing

[codeunia-dev]

This PR introduces the new Staff Dashboard, Admin Attendance Page, and a fully updated role-based routing system across the application.

Key Changes

• Added Staff Dashboard with stats, quick actions, weekly overview, and widgets.

• Implemented Admin Attendance Page with mock data (DB-ready structure).

• Introduced centralized, scalable role-based routing:

  • Staff users are redirected to /staff/dashboard.
  • Admin pages now use protected layouts.
  • Removed outdated email-based access checks.

• Updated middleware.ts with improved route handling logic.

• Added new components:

  • AttendanceWidget
  • DashboardStats
  • StaffSidebar
  • WeeklyOverview
  • Updated header and user-icon for role awareness.

• Refactored folder structure for cleaner routing and future extensibility.

Why This Matters

• Establishes a clear separation between Staff and Admin experiences.
• Removes legacy guard logic and prepares the app for multi-role expansion.
• Provides the foundation for future functional dashboards tied to real DB data.

Testing

• Verified navigation for both Admin and Staff roles.
• Confirmed that protected routes redirect correctly.
• Ensured all new components render without errors.

Additional Notes

• No breaking changes for existing flows.
• Ready for integration with real attendance APIs and Staff metrics once backend endpoints are available.

Auhored by: @akshay0611

Summary by CodeRabbit

• New Features

  • Added admin attendance management page to view and export employee attendance logs
  • Introduced staff dashboard with real-time attendance tracking and clock in/out functionality
  • Staff can now view attendance statistics, weekly overview, and recent activity

• Improvements

  • Implemented role-based navigation routing that automatically directs staff and students to their respective dashboards
  • Enhanced authentication flow with automatic role detection on login

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Building	Preview	Comment	Dec 12, 2025 10:13am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This PR introduces role-based authentication with separate staff and student dashboards. Staff users gain access to an attendance portal with real-time clock in/out tracking, activity overview, and dashboard widgets. An admin attendance management page is added for viewing and managing all staff attendance logs. Navigation and middleware are updated to route users to appropriate dashboards based on their role.

Changes

Cohort / File(s)	Summary
Admin Attendance Management app/admin/attendance/page.tsx, app/admin/layout.tsx	Introduces admin attendance page to view staff logs with filtering, sorting, and export. Updates admin sidebar with Clock icon and /admin/attendance link.
Auth & Layout Refactoring app/protected/layout.tsx, app/protected/page.tsx, middleware.ts	Implements role-based routing: middleware detects staff role and redirects to /staff/dashboard; protected layout and page updated to handle role state and redirect staff users; authentication checks simplified.
Staff Portal Layout app/staff/layout.tsx, components/staff/StaffSidebar.tsx	Adds StaffLayout wrapper with responsive StaffSidebar component; sidebar supports mobile sheet navigation and desktop collapsible panels with grouped navigation items and user menu.
Staff Dashboard & Widgets app/staff/dashboard/page.tsx, components/staff/AttendanceWidget.tsx, components/staff/DashboardStats.tsx, components/staff/QuickActions.tsx, components/staff/WeeklyOverview.tsx	Implements staff dashboard with real-time attendance tracking, attendance history, weekly activity charts, quick actions, and stats display; fetches recent attendance logs from Supabase on mount.
Navigation Updates components/header.tsx, components/user-icon.tsx	Updates Dashboard navigation links to route staff users to /staff/dashboard with appropriate labeling; non-staff continue routing to /protected.

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Middleware
    participant Supabase
    participant ProtectedLayout
    participant StaffLayout
    participant Dashboard

    User->>Browser: Navigate to app
    Browser->>Middleware: Request page
    Middleware->>Supabase: Fetch user profile & role
    alt Role is staff
        Supabase-->>Middleware: role: 'staff'
        Middleware-->>Browser: Redirect to /staff/dashboard
        Browser->>StaffLayout: Load staff layout
        StaffLayout->>Supabase: Fetch attendance logs
        Supabase-->>StaffLayout: Attendance history
        StaffLayout->>Dashboard: Render staff dashboard
        Dashboard-->>User: Display dashboard with widgets
    else Role is student
        Supabase-->>Middleware: role: 'student'
        Middleware-->>Browser: Redirect to /protected
        Browser->>ProtectedLayout: Load protected layout
        ProtectedLayout->>Dashboard: Render student dashboard
        Dashboard-->>User: Display dashboard
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Areas requiring extra attention:

• Role-based redirect logic: Verify redirect behavior is consistent across middleware, layout components, and pages; ensure no infinite loops or race conditions when determining user role.
• Attendance tracking: Review AttendanceWidget's clock-in/out logic, state management, and Supabase query correctness; validate elapsed time calculation and error handling.
• Authentication state consistency: Check that auth state is properly managed across StaffLayout, ProtectedLayout, and dashboard components; ensure loading states are handled uniformly.
• Data fetching patterns: Validate that all dashboard components properly handle Supabase queries, error cases, and loading states; check for potential race conditions in useEffect dependencies.
• Navigation flow: Confirm that user-icon and header components correctly route based on role; test navigation transitions between student and staff dashboards.

Poem

🐰 A staff dashboard springs to life so bright,
With attendance widgets dancing in the light,
Role-based routes now guide each soul,
To their rightful portal, reaching their goal!
Hop forth, dear users, your dashboards await! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/staff-admin-attendance-routing

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6a8abf3 and e775eb7.

📒 Files selected for processing (14)

• app/admin/attendance/page.tsx (1 hunks)
• app/admin/layout.tsx (2 hunks)
• app/protected/layout.tsx (4 hunks)
• app/protected/page.tsx (2 hunks)
• app/staff/dashboard/page.tsx (1 hunks)
• app/staff/layout.tsx (1 hunks)
• components/header.tsx (1 hunks)
• components/staff/AttendanceWidget.tsx (1 hunks)
• components/staff/DashboardStats.tsx (1 hunks)
• components/staff/QuickActions.tsx (1 hunks)
• components/staff/StaffSidebar.tsx (1 hunks)
• components/staff/WeeklyOverview.tsx (1 hunks)
• components/user-icon.tsx (2 hunks)
• middleware.ts (7 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}