User Management

This module controls your staff accounts. You can create users, assign roles, choose warehouse access, activate/deactivate users, and manage user records safely from one page.

Part A: Non-Technical User Guide

1. What You Can Do Here

• Add new staff users.
• Edit user profile, role, status, and warehouse.
• Search users by name, email, or phone.
• Filter users by role and status.
• Activate/inactivate single or multiple users.
• Delete one user or multiple users.
• Export user list and copy user list data.
• View a user details pop-up.

2. Page Layout

1. Top search box: find users quickly.
2. Filter icon: open role/status filters.
3. Action buttons: export, copy, add user.
4. User table: profile image, name, role, email, phone, status, actions.
5. Pagination: move across pages.

3. How To Add a New User

1. Go to Users from the left menu.
2. Click Add.
3. Fill required fields: First name, last name, email, phone, role, status.
4. Select warehouse if needed.
5. Set password and confirm password.
6. Click Submit.

4. How To Edit a User

1. Find the user in the list.
2. Click the Edit icon.
3. Update needed fields.
4. Click Update.

5. How To Change User Status

1. Use the status toggle on a user row to activate/inactivate that user.
2. For multiple users: select rows and click Set Active or Set Inactive.

6. How To Delete Users

1. Single delete: click delete icon on the row.
2. Bulk delete: select multiple users, then click Delete.
3. Confirm the warning popup.

7. Export and Copy

• Excel/CSV button: download user list.
• Copy button: copy user data to clipboard.
• If rows are selected, export/copy uses selected rows; otherwise all visible rows.

8. Field Meanings

9. Common Problems and Fixes

Part B: Technical Reference (For Admin/Developer)

1. Frontend Files

• frontend-source/src/pages/users/User.jsx - list screen, filtering, actions, bulk operations.
• frontend-source/src/pages/users/components/AddUpdateUser.jsx - add/edit modal form.
• frontend-source/src/pages/users/components/UserDetails.jsx - user detail dialog.
• frontend-source/src/api/users.js - status update and delete API wrappers.
• frontend-source/src/slice/userSlice.js - async fetch and store state.

2. Backend File

• app/Http/Controllers/Api/UserController.php contains list, store, update, status update, delete, and customer helper endpoints.

3. Main API Endpoints Used by Users Page

4. Filters and Sorting (List API)

GET /users accepts:

• search
• role
• status
• page
• perPage
• sortField
• sortOrder

5. Store Validation Rules

• first_name, last_name: required strings.
• email: required, unique in user.email per company.
• phone: required, unique in user.phone per company.
• role: required, must exist in role table for same company.
• status: required.
• password: optional in API, min 6, max 20, confirmed.
• private_code: optional, min 4.
• warehouse_id: optional, must belong to same company.

6. Update Validation Rules

• Same as store with unique checks excluding current user id.
• status must be 0 or 1.
• thumbnail image upload allowed (jpeg/png/jpg/gif, max 2MB).

7. Status and Delete Payloads

{
  "ids": [12, 13, 14],
  "status": 1
}

{
  "ids": [12, 13, 14]
}

8. Security and Data Scope Notes

• Email/phone uniqueness and role existence are company-scoped.
• Passwords and private codes are hashed before save.
• Warehouse assignment is validated against same company warehouses.
• Status update and delete operations are transactional in backend.

9. Implementation Notes

• Frontend shows action buttons by permission keys: user.create, user.view, user.edit, user.delete.
• Bulk actions rely on selected IDs from useSelectableList.
• Redux slice fetchingUser drives list state.