1. Quick Search: A search bar that allows users to quickly search for appointments using keywords like customer name or service.
   • Date Filter: A dropdown or date picker to filter appointments by date.
   • Service Filter: Allows users to filter appointments based on the service provided (e.g., Haircut, Hair Treatment).
   • Customer Filter: Enables filtering by customer name.
   • Staff Filter: Filters appointments based on the staff member assigned.
   • Status Filter: A dropdown to filter appointments by their current status (e.g., confirmed, canceled).
   • Additional Filters: Offers more advanced filtering options to refine the appointment list.
     
2. Appointments List
   • Displays all the appointments in a tabular format.
   • Columns:
     • ID: A unique identifier for each appointment.
     • Appointment Date: The date and time the appointment.
     • Customer: The name and email address of the customer.
     • Staff: The staff member assigned to the appointment
     • Service: The service that is being provided (e.g., Haircut, Hair Treatment).
     • Method: Refers to payment method (e.g., local means cash or in facility, online means credit card)
     • Total Amount: The total price of the service
     • Paid Amount: The amount that was paid by the customer
     • Due Amount: The amount left to be paid
     • Status: Indicating whether the whole amount was paid or not yet.
       
3. Export Option
   • Export to CSV: A button that allows users to export the list of appointments into a CSV file for external analysis or record-keeping.
     
4. More Options (Info)
   • The Payment Info panel on the right side of the image serves as a detailed interface for managing and reviewing payment information related to customer appointments. Here’s a breakdown of its functionality:
     • Payment and Appointment Details Display
       • The panel provides an overview of critical information, such as:
         • Staff handling the service
         • Location where the service was performed
         • Service provided (e.g., haircut)
         • Date and time of the appointment
           
     • Customer Information
       • The panel shows details about the customer, including:
         • Name and email
         • Next to the customer details, there is a section for Payment Method (e.g., “Local” for in-person payment) and the status (shown with an incomplete “X” symbol, indicating that the payment is not yet fully paid).

If the customer has paid the full amount, select Complete Payment to finalize the transaction. In cases where the customer has made a partial payment, select Edit and enter the amount that has been paid. The system will automatically record the partial payment and indicate the remaining balance that is still due.