Barber Shop App - Copy this React, Tailwind Component to your project

I-need-to-create-a-prototype-for-a-barbershop-appointment-management-system.-The-system-should-allow-customers-to-book,-modify,-and-cancel-appointments-easily-and-efficiently.-Additionally,-it-should-include-functionalities-for-managing-customers,-services,-and-employees.-Below-are-the-sections-of-the-program-and-their-relationships-to-guide-the-prototype-development.-Program-Sections-and-Their-Relationships:-Customer-Relationship-Management-(CRM):-Customer-Registration:-Allows-creating-an-account-for-each-customer,-including-personal-data-such-as-name,-email,-phone-number,-appointment-history,-and-preferences.-Updating-and-Tracking:-Customers-can-modify-their-information-and-view-their-appointment-history.-Preferences-for-services,-barbers,-and-visit-frequency-are-also-recorded.-Relationship-with-Other-Sections:-Registered-customers-can-book-appointments-and-receive-notifications.-Appointment-Management:-Booking-Appointments:-The-customer-selects-the-service,-barber,-date,-and-available-time.-The-system-verifies-the-barber's-availability-before-confirming-the-appointment.-Modification-and-Cancellation:-Customers-can-modify-or-cancel-an-appointment,-and-the-system-sends-automatic-notifications-to-confirm-the-changes.-Automatic-Reminders:-The-system-sends-reminders-for-upcoming-appointments-to-the-customer-via-email-or-text-message.-Relationship-with-Other-Sections:-Appointment-management-interacts-with-customer-management-to-obtain-user-data-and-with-schedule-management-to-verify-barber-availability.-Schedule-Management:-Barber-Calendar:-Each-barber-has-a-calendar-reflecting-their-daily-availability.-Administrators-can-manage-work-schedules,-vacations,-and-special-events.-Calendar-Optimization:-The-system-suggests-appointments-based-on-availability-and-prevents-overlapping-bookings.-Relationship-with-Other-Sections:-Schedule-management-provides-barber-availability-for-appointment-booking-and-updates-in-real-time-with-modifications-and-cancellations.-User-Management:-Roles-and-Permissions:-Access-to-the-system-is-defined-based-on-the-role-(customer,-administrator,-or-barber).-Administrators-have-permissions-to-manage-appointments,-barbers,-and-customers,-while-barbers-can-only-view-their-calendar.-Security:-User-authentication-through-secure-passwords-and,-optionally,-two-factor-authentication.-Relationship-with-Other-Sections:-User-management-controls-access-to-all-sections-of-the-system,-ensuring-that-only-authorized-users-can-perform-certain-actions.-Report-Generation:-Appointment-Reports:-Automatic-reports-are-generated-on-booked,-canceled-appointments,-most-requested-barbers,-and-most-popular-services.-Productivity-Analysis:-Administrators-can-view-statistics-on-the-number-of-appointments-per-barber,-services-provided,-and-hours-worked.-Relationship-with-Other-Sections:-Report-generation-uses-data-from-appointment-management-and-schedule-management-to-provide-analysis-and-statistics.-Payment-System:-Payment-Processing:-The-system-should-allow-customers-to-pay-for-their-appointments-online.-Payment-Confirmation:-Once-the-payment-is-made,-the-system-should-confirm-the-transaction-and-update-the-appointment-status.-Relationship-with-Other-Sections:-The-payment-system-interacts-with-appointment-management-to-process-payments-for-booked-appointments.-Notification-System:-Sending-Notifications:-The-system-sends-automatic-notifications-to-customers-and-barbers-about-confirmed-appointments,-modifications,-and-reminders.-Relationship-with-Other-Sections:-The-notification-system-interacts-with-appointment-management-and-schedule-management-to-send-updates-and-reminders.-Preferred-Technologies:-Frontend:-React.js,-HTML5,-CSS3.-Backend:-Node.js,-Express.js.-Database:-MongoDB,-MySQL.-Others:-Firebase-for-notifications,-Twilio-for-SMS.-Additional-Notes:-The-prototype-should-be-functional-and-allow-for-usability-testing.-Include-sample-data-to-simulate-the-system's-operation.-Provide-basic-documentation-on-how-to-use-the-prototype.