Skip to main content

Add User Modal

Introduction​

This guide explains how to use the Add / Edit User modal in My Home Plan to create new users or update existing users. The flow is a three‑step wizard: Personal Details → Contact Information → Companies.

Accessing the Page​

  1. From the left sidebar, click Users.
  2. Click Add user to create a new user, or Edit in the row actions to update an existing one.
  • Header: Shows Add user or Edit user based on context, with a close (×) button.
  • Step Indicator: Displays the three steps and highlights the current step.
  • Form Area: Renders fields for the current step only.
  • Footer Actions:
    • Next / Previous (for new users): Moves between steps.
    • Save (final step for new users): Submits the form.
    • Save Changes (for edits): Enabled only when some fields have changed.
  • Error Banner: A red banner appears at the top of the modal for validation or server errors.

Steps & Fields​

1) Personal Details​

  • Full Name* — required.
  • Access Level* — required. Options:
    • None
    • Admin (visible only if the current user is super-admin)
    • Finance
    • Sales
    • Real Estate Agent

2) Contact Information​

  • Email Address* — required; must be a valid email format.

3) Companies​

  • Allowed Companies* — check one or more companies to grant access.
    • When editing a user, existing selections are pre‑loaded.

Key Behaviors​

  • Validation by Step
    • Contact Information: Email must be valid.
    • Companies: At least one company must be selected.
  • Changed Fields Optimization (Edit Mode)
    • When editing, only fields that actually changed are sent to the API (PUT /users/{id}).
    • Array fields (e.g., allowedCompanies) are compared by contents to avoid unnecessary updates.
  • Creation Flow (New User)
    • Submits all fields to POST /users.
    • After success, the app shows a message: “An Email Sent to you to reset your password.”
  • Companies Loading
    • The Companies step fetches all companies and (for edits) the user’s current allowed companies to pre‑select them.
  • Error Handling
    • API errors are displayed in the red banner with the server’s message when available.
  • Loading States
    • Save / Save Changes buttons show “Saving…” while requests are in flight.

Common Tasks​

  1. Create a New User
    • Click Add user → fill Personal Details → Next.
    • Enter Email Address → Next.
    • Select at least one company in Companies → Save.
  2. Edit an Existing User
    • Click Edit on the user row.
    • Modify any field(s). The Save Changes button becomes enabled when something changes.
    • Click Save Changes.
  3. Grant or Revoke Company Access
    • In Companies, tick/untick companies. At least one must remain selected.

Troubleshooting​

  • “Please enter a valid email address”
    • Ensure the email is correctly formatted (e.g., name@example.com).
  • “Please select at least one company”
    • In the Companies step, select at least one company.
  • Save button disabled (Edit Mode)
    • No fields have changed yet. Modify a value to enable Save Changes.
  • Error Banner Shows a Server Message
    • The API returned an error. Review the message, fix the data, and try again.
  • Companies Not Loading
    • Check your network connection; reopen the modal to retry.

Contact Support​

Reach out via: