Design a desktop dashboard screen for an "Attendance Management System" used by a software company's CEO.
The layout should include:
- A top section with filters:
-
Location (dropdown)
-
Project (dropdown)
-
Department (dropdown)
-
Date Range (date picker)
-
View By (toggle: Daily | Monthly | User)
-
Search (input field)
-
Export (button)
- A main section with 3 view tabs:
-
Daily View
-
Monthly View
-
User View
In Daily View, show a table with columns:
-
Name
-
In-Time
-
Out-Time
-
Late (Yes/No)
-
Total Hours
-
Status (color-coded badge: Present, Absent, Leave)
In Monthly View, show a table with:
-
Name
-
Present %
-
Absent %
-
Leave %
-
Total Days
-
Late Count
In User View, display:
-
A calendar grid (month view) with each day color-coded as Present, Absent, Leave, Holiday
-
A sidebar showing summary cards:
-
Present Days (✅)
-
Absent Days (❌)
-
Late Days (⏰)
-
Total Working Days (📅)
-
- Bottom section:
-
Pagination controls
-
Legend for status colors
-
Optional: Bulk actions (Notify, Export Selected)
Use a clean and modern UI with table cards, badge components, and subtle shadows. Prioritize readability, hierarchy, and white space. Use Tailwind utility classes or shadcn/ui components.
I'll create a comprehensive attendance management dashboard for a CEO with all the requested features. This will include filtering options, multiple view tabs, and detailed attendance data presentation.
I've created a comprehensive attendance management dashboard with all the requested features:
Key Features:
Top Filter Section:
- Location, Project, Department dropdowns
- Date range selector
- View toggle (Daily/Monthly/User)
- Search functionality
- Export button
Three Main Views:
Daily View - Table showing:
- Employee names with checkboxes for bulk selection
- In/Out times
- Late status badges
- Total hours worked
- Color-coded status badges (Present/Absent/Leave)
Monthly View - Summary table with:
- Attendance percentages with visual progress bars
- Total working days
- Late count with warning badges
User View - Individual employee focus:
- Interactive calendar grid with color-coded days
- Summary cards showing key metrics
- User selector dropdown
Bottom Section:
- Pagination controls
- Color legend for status indicators
- Bulk action buttons (when items are selected)
Design Features:
- Clean, modern interface using shadcn/ui components 1
- Responsive grid layouts
- Color-coded status indicators
- Interactive elements with hover states
- Proper spacing and typography hierarchy
- Professional card-based layout
The dashboard provides executives with comprehensive attendance insights while maintaining excellent usability and visual clarity.
Sources
I'll add a "Weekly" view filter to the attendance dashboard with a comprehensive weekly attendance table.
I've successfully added the "Weekly" view filter to the attendance dashboard! Here's what I added:
New Weekly View Features:
Weekly Table Structure:
- Employee names with bulk selection checkboxes
Individual day columns (Mon-Sun) with compact status badges:
- P = Present (green)
- A = Absent (red)
- L = Leave (blue)
- Late = Late arrival (orange)
- H = Holiday (gray)
Weekly Summary Columns:
- Total Present days count
- Total Absent days count
- Total Late days count
- Total Hours worked for the week
Enhanced Navigation:
- Updated the tabs to include "Weekly View"
- Modified the "View By" dropdown to include "Weekly" option
- Updated bulk selection to work with weekly data
Visual Design:
- Compact badge system for daily status indicators
- Color-coded summary badges that highlight issues (red for absences/late)
- Clean table layout optimized for weekly data viewing
- Consistent styling with the existing dashboard theme
The Weekly view provides managers with a perfect middle-ground between daily granular data and monthly summaries, making it easy to spot weekly attendance patterns and issues at a glance.