Component Preview
A reference gallery of reusable UI components and their states.
Status Badges
Booking Status
PendingAssignedAccomplishedCanceled
Generic Status
ActivePendingCanceledAssignedInactive
shadcn Badge Variants
DefaultSecondaryOutlineDestructive
Summary Cards
Total Bookings
10
Pending
4
Assigned
3
Accomplished
2
Canceled
1
Detail Row
- Reference Number
- BK-2024-001
- Customer Name
- Maria Santos
- Status
- Pending
- Service Type
- Cleaning
- Empty field
- —
Alert Variants
Success
Booking created successfully! No data was saved.
Info
After creation, an invitation email would normally be sent.
Warning
This booking can no longer be edited within 24 hours of its scheduled time.
Error
Failed to load bookings. Please try refreshing the page.
Loading States
Generic Skeleton
Table Skeleton
Empty States
No bookings yet
Create your first booking to get started.
No results found
No bookings match your current filters. Try adjusting your search.
Password Components
Password requirements
- At least 8 characters- met
- One uppercase letter- met
- One lowercase letter- met
- One number- met
- One special character- met
Strong
Audit Timeline
Booking Created
juan.delacruz@example.comCustomer Information Updated
juan.delacruz@example.com- customerMobile changed from 09171111111 to 09171234567
- customerEmail changed from old.email@example.com to maria.santos@email.com
Product Added
ana.garcia@example.com- product to Washing Machine — Leaking water from bottom: Washing Machine — Leaking water from bottom
Schedule Updated
juan.delacruz@example.com- bookingDate changed from 2024-08-14 to 2024-08-15
- timeslot changed from 6:00 AM–9:00 AM to 9:00 AM–12:00 PM
Pagination
Rows per page:
1–10 of 75
Confirm Dialog
Status Badge Combinations
Maria Santos
BK-2024-001
Roberto Reyes
BK-2024-002
Luisa Fernandez de la Rosa Bautista
BK-2024-003
Pedro Cruz
BK-2024-004