Barbershop System - Copy this Angular, Css 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.