Design a dashboard screen for barbershops to manage their appointments using Shadcn UI and Tailwind CSS, following a modern dark-mode theme.
The screen should include: • A dual-view interface: • A calendar view similar to Google Calendar where barbers can see their week or month at a glance. • A list view that shows upcoming appointments in chronological order with clear status indicators (e.g., Pending, Confirmed, Completed, Canceled, Rescheduled). • Each appointment in the list should include: • Client name and profile photo (if available). • Service booked (e.g., Haircut + Beard). • Scheduled date and time. • Appointment status badge (color-coded). • A quick action dropdown or buttons: Approve, Decline, Suggest New Time, Message Client. • On the calendar view: • Appointments are shown as blocks, color-coded by status. • Allow drag-to-reschedule. • Option to click on a time slot to block it as “Unavailable” for reasons like holidays, lunch breaks, or internal events. • A top-right button to add a new time block or mark a day as unavailable. • Use Shadcn UI components where appropriate, such as: • popover for time slot actions. • dialog for suggesting a new time or confirming cancellation. • calendar and badge components to indicate status. • switch or checkbox to toggle between calendar and list views.
Ensure the layout is mobile-responsive and user-friendly, optimized for quick actions by barbershop staff.
I'll create a modern dark-mode dashboard for barbershops to manage their appointments using shadcn/ui components and Tailwind CSS.
Dual-View Interface
Appointment Management
Time Blocking
Interactive Components
Mobile Responsive
The dashboard follows a modern dark-mode theme using shadc
Update the calendar component to match a modern and clean style inspired by Google Calendar, while maintaining the current aesthetic using ShadCN UI components and Tailwind CSS.
The calendar should support multiple views:
Requirements:
Tabs, Badge, Card, Popover, and Dialog to handle actions like confirming, rescheduling, or rejecting appointments.The updated calendar component should feel intuitive for barbershops managing daily schedules and blocking time slots for internal events or holidays.
I'll update the calendar component to match Google Calendar's modern design with multiple view options while maintaining the dark theme and ShadCN UI components.
The updated calendar now provides a professional, Google Calendar-like experience while maintaining the dark theme and barbershop-specific functionality. Each view is optimized for different use cases - daily planning, short-term scheduling, weekly overview, and agenda management.