Frontend
Client
Client

Client Master

This page documents the Client Master module in Worksphere: the Client List, Add, Edit and Delete flows.

1. Client List Page

Page title: Client Lists

Displays a table of clients with the following columns:

  • S No
  • Code
  • Client Name
  • Client Type
  • Client Category
  • Industry Type
  • Status
  • Actions

Features:

  • Search bar at the top to filter clients
  • Column-level filters (inputs/selects) below each column header
  • Checkbox selection for rows (bulk actions)
  • Table view toggle (compact / comfortable)
  • Add Client button at the top-right
  • Actions column contains icons for Edit and Delete

Behaviour:

  • The search bar performs a global filter across table columns.
  • Column-level filters narrow results by that specific column.
  • Selecting rows enables bulk actions (if implemented).
  • Clicking Add Client opens the Add New Client form.
  • Clicking Edit opens the Edit Client page for that record.
  • Clicking Delete opens a confirmation modal (see section 4).

2. Add New Client Page

Page title: Add New Client

Used to create a new client master record.

Form fields (Client Details):

  • Code — Auto-generated (read-only)
  • Client Name — Text input; required
  • Client Type — Dropdown; required
  • Client Category — Dropdown; required
  • Industry Type — Dropdown; optional
  • Gross PF / ESI Applicable — Toggle or dropdown (Yes / No)

Email Management:

  • Email 1 — Email input (required if provided)
  • Ability to add multiple email rows (Add / Delete controls per row)
  • Each email row validates format before save

Actions:

  • Submit — Saves the client record (validates required fields and email formats)
  • Reset — Clears form inputs

Validation:

  • Required fields must be filled prior to submission.
  • Email fields must match a valid email regex; show inline error for invalid entries.
  • If the selected Code already exists (unlikely for auto-generated), surface a validation error.

Success:

  • On success, close the form (or navigate back) and show a success toast: "Client created successfully." The new record appears in the Client Lists.

3. Edit Client Page

Page title: Edit Client

Same layout and fields as Add New Client. Fields are pre-filled with the selected client's data.

Capabilities:

  • Update client information
  • Add new email addresses
  • Edit existing emails
  • Delete email addresses

Actions:

  • Update — Saves changes (validations apply)
  • Cancel — Discards changes and returns to the list

Success:

  • On successful update show: "Client updated successfully."

4. Delete Client Confirmation

Triggered from the Actions column delete icon on the Client Lists table.

Modal content:

  • Warning icon
  • Title: Are you sure?
  • Message: You are about to permanently delete this client.
  • Buttons:
    • Yes, delete it! — Confirms deletion
    • Cancel — Closes the popup without changes

Behaviour:

  • Deletion is destructive; confirm action with the modal.
  • On confirm, remove the client and show success toast: "Client deleted successfully." Optionally refresh the list.

End of Client Master documentation.