User Management UI/UX Guide

Table Column Layout

┌─────┬──────────┬──────────────┬───────┬───────────┬─────────────┬────────┬──────────┬──────────┬──────────┐
│  #  │   Name   │    Email     │ Phone │  Vendor   │  Project    │   DC   │   Role   │  Status  │ Actions  │
├─────┼──────────┼──────────────┼───────┼───────────┼─────────────┼────────┼──────────┼──────────┼──────────┤
│  1  │ John Doe │ john@ex.com  │ 12345 │ Vendor A  │ Project X   │ DC-1   │  [Admin] │ [Active] │ 👁 ✎ 🔒 │
│  2  │ Jane Doe │ jane@ex.com  │ 54321 │ Vendor B  │ Project Y   │ DC-2   │ [Staff]  │ [Active] │ 👁 ✎ 🔒 │
│  3  │ Bob Smith│ bob@ex.com   │ 99999 │     -     │      -      │   -    │[Superv] │ [Inactive]│ 👁 ✎ 🔒 🗑 │
└─────┴──────────┴──────────────┴───────┴───────────┴─────────────┴────────┴──────────┴──────────┴──────────┘

View User Modal

╔════════════════════════════════════════════╗
║  👁 View User Details              X       ║
╠════════════════════════════════════════════╣
║                                            ║
║  Name:     [John Doe                    ]  ║
║  Email:    [john@example.com           ]  ║
║  Phone:    [1234567890                 ]  ║
║  Vendor:   [Vendor A                   ]  ║  ← NEW FIELD
║  Project:  [Project X                  ]  ║  ← NEW FIELD
║  DC:       [DC-1                       ]  ║  ← NEW FIELD
║  Role:     [Admin                      ]  ║
║  Status:   [Active                     ]  ║
║                                            ║
╠════════════════════════════════════════════╣
║                              [ Close ]     ║
╚════════════════════════════════════════════╝

Create User Modal (2-Column Layout)

╔════════════════════════════════════════════════════════════════╗
║  👤 Create New User                                   X        ║
╠════════════════════════════════════════════════════════════════╣
║                                                                ║
║  ┌──────────────────────────┬──────────────────────────────┐   ║
║  │ Name *                   │ Email *                      │   ║
║  │ [John Doe            ]   │ [john@example.com        ]   │   ║
║  │ Enter user's full name   │ Must be a valid email...     │   ║
║  └──────────────────────────┴──────────────────────────────┘   ║
║                                                                ║
║  ┌──────────────────────────┬──────────────────────────────┐   ║
║  │ Phone                    │ Role *                       │   ║
║  │ [1234567890          ]   │ [Select role...          ▼]  │   ║
║  │                          │   Admin                      │   ║
║  │                          │   Staff                      │   ║
║  │                          │   Supervisor                 │   ║
║  │                          │   Field Worker               │   ║
║  └──────────────────────────┴──────────────────────────────┘   ║
║                                                                ║
║  ┌──────────────────────────┬──────────────────────────────┐   ║
║  │ Vendor Name          NEW │ Project Name             NEW │   ║
║  │ [Select vendor...    ▼]  │ [Select project...       ▼]  │   ║
║  │   Vendor A               │   (filtered by vendor)       │   ║
║  │   Vendor B               │                              │   ║
║  │   Vendor C               │                              │   ║
║  └──────────────────────────┴──────────────────────────────┘   ║
║                                                                ║
║  ┌──────────────────────────┬──────────────────────────────┐   ║
║  │ DC Name              NEW │ Status *                     │   ║
║  │ [Select DC...        ▼]  │ [Select status...        ▼]  │   ║
║  │   (filtered by project)  │   Active                     │   ║
║  │                          │   Inactive                   │   ║
║  └──────────────────────────┴──────────────────────────────┘   ║
║                                                                ║
╠════════════════════════════════════════════════════════════════╣
║                               [ Cancel ]  [ Create User ]      ║
╚════════════════════════════════════════════════════════════════╝

Edit User Modal (2-Column Layout)

╔════════════════════════════════════════════════════════════════╗
║  ✎ Edit User                                         X        ║
╠════════════════════════════════════════════════════════════════╣
║                                                                ║
║  ┌──────────────────────────┬──────────────────────────────┐   ║
║  │ Name *                   │ Email *                      │   ║
║  │ [John Doe            ]   │ [john@example.com        ]   │   ║
║  └──────────────────────────┴──────────────────────────────┘   ║
║                                                                ║
║  ┌──────────────────────────┬──────────────────────────────┐   ║
║  │ Phone                    │ Role *                       │   ║
║  │ [1234567890          ]   │ [Admin                   ▼]  │   ║
║  └──────────────────────────┴──────────────────────────────┘   ║
║                                                                ║
║  ┌──────────────────────────┬──────────────────────────────┐   ║
║  │ Vendor Name              │ Project Name                 │   ║
║  │ [Vendor A            ▼]  │ [Project X               ▼]  │   ║
║  │   (auto-filtered)        │   (auto-filtered)            │   ║
║  └──────────────────────────┴──────────────────────────────┘   ║
║                                                                ║
║  ┌──────────────────────────┬──────────────────────────────┐   ║
║  │ DC Name                  │ Status *                     │   ║
║  │ [DC-1                ▼]  │ [Active                  ▼]  │   ║
║  │   (auto-filtered)        │   Active                     │   ║
║  │                          │   Inactive                   │   ║
║  └──────────────────────────┴──────────────────────────────┘   ║
║                                                                ║
╠════════════════════════════════════════════════════════════════╣
║                               [ Cancel ]  [ Save Changes ]     ║
╚════════════════════════════════════════════════════════════════╝

Cascade Filtering Logic

When Creating or Editing a User:

1. Load Dropdowns

   LoadDropdowns() 
   ├─ Fetch vendors, projects, DCs from API
   ├─ Populate all three select elements
   └─ Store data in window.projectsData, window.dcsData

2. Vendor Selection

   Vendor Dropdown Change Event
   ├─ Get selected vendorId
   ├─ Filter projects (where projectId.vendorId == selected)
   ├─ Repopulate Project dropdown
   └─ Clear DC dropdown

3. Project Selection

   Project Dropdown Change Event
   ├─ Get selected projectId
   ├─ Filter DCs (where dcId.projectId == selected)
   └─ Repopulate DC dropdown

4. Edit Mode Special Handling

   When opening Edit modal with pre-selected values:
   ├─ Set Vendor to user's vendorId
   ├─ Trigger change event (filters projects)
   ├─ Wait 100ms for projects to load
   ├─ Set Project to user's projectId
   ├─ Trigger change event (filters DCs)
   ├─ Wait 100ms for DCs to load
   └─ Set DC to user's dcId

Data Flow Diagram

USER MANAGEMENT PAGE LOAD
│
├─ Load dropdowns.php
│  ├─ Returns: vendors[], projects[], dcs[]
│  └─ Populate all dropdowns + store globally
│
├─ Load users-list.php (DataTables AJAX)
│  ├─ Returns: users with vendorName, projectName, dcName
│  └─ Display 10-column table
│
└─ Ready for user interactions


USER VIEWS DETAILS (Click View Icon)
│
├─ Call users-view.php with userId
│  ├─ Query user JOIN vendor JOIN project JOIN dc
│  └─ Return: user data + names + IDs
│
└─ Display read-only View modal


USER CREATES NEW USER (Click New User Button)
│
├─ Show Create modal with 2-column layout
├─ User selects Vendor → projects auto-filter
├─ User selects Project → DCs auto-filter
├─ Click Create User button
│
├─ POST to users-create.php with all fields
│  ├─ Insert with vendorId, projectId, dcId
│  └─ Return: success message + user data
│
└─ Close modal, reload table


USER EDITS USER (Click Edit Icon)
│
├─ Call users-view.php with userId
│  └─ Return: user data + vendorId, projectId, dcId
│
├─ Show Edit modal with pre-filled values
├─ Cascade-filter dropdowns based on current IDs
├─ User can change any fields
│
├─ POST to users-edit.php with modified fields
│  ├─ Update all fields including new ones
│  └─ Return: updated user data
│
└─ Close modal, reload table

Search/Filter Capability

DataTables Search now includes:

• User name
• Email address
• Phone number
• User role
• User status
• Vendor name ← NEW
• Project name ← NEW
• DC name ← NEW

Example: Searching for "Vendor A" will show all users assigned to Vendor A

Color/Badge Scheme

Role Badges:
┌─────────────┐
│ Admin    ▲  │  (Red badge - bg-danger)
├─────────────┤
│ Staff    🧑  │  (Blue badge - bg-info)
├─────────────┤
│ Other    ○  │  (Gray badge - bg-secondary)
└─────────────┘

Status Badges:
┌──────────────┐
│ Active   ✓   │  (Green badge - bg-success)
├──────────────┤
│ Inactive ✗   │  (Gray badge - bg-secondary)
└──────────────┘

Action Buttons

Each row shows action buttons:

👁 = View User (shows all details in modal)
✎  = Edit User (allows modification of all fields)
🔒 = Change Password (dedicated password modal)
🗑 = Delete User (only shown for non-admin users)

Note: Delete button hidden for admin users (protection)

Mobile Responsive Behavior

• DataTable: Horizontal scroll on small screens
• Modals: Adjust to screen width (max-width: 2 columns maintained)
• Buttons: Stack vertically on extra-small screens
• Dropdowns: Full width on mobile

Accessibility Features

• All form labels with proper for attributes
• Required fields marked with *
• Focus management in modals
• ARIA labels for icons
• Keyboard navigation support
• High contrast dark theme for readability

Performance Notes

• Dropdowns loaded once on page load (cached globally)
• Cascade filtering uses client-side data (no API calls)
• DataTables uses server-side processing (efficient for large datasets)
• Timeouts used in edit modal to ensure cascade filtering works smoothly