Skip to main content

Add New Payment

This document describes the "Add New Payment" form, which allows staff to record a new payment for a booking and attach a receipt.

Key Features​

  • Payment Details Form:
    • Amount: A field to enter the numerical value of the payment.
    • Description: A text field to describe the payment (e.g., "Bank Transfer - 1st night").
    • Date: A date picker to select the date the payment was made.
  • File Attachment:
    • An input to upload a file, typically a receipt or proof of payment.
    • Accepts common image formats (image/*).
    • Displays the name of the selected file for confirmation.
  • Input Validation:
    • Ensures all fields are filled and a file is selected before submission.
    • Checks if the uploaded file is a valid image type.
    • Verifies that the file is not corrupted.
  • User Feedback:
    • Provides clear error messages if validation fails.
    • Shows a success message when the payment is saved correctly.

How to Use​

  1. Enter Payment Amount: Type the amount of the payment into the "Amount" field.
  2. Add Description: Provide a brief description of the payment in the "Description" field.
  3. Select Date: Choose the correct date of the transaction using the date picker.
  4. Attach Receipt: Click the file input button to select and upload an image of the receipt.
  5. Save Payment: Once all fields are complete, click the Save Payment button to record the transaction.