Team Management

What This Page Does

The Team Management page (manage-team) is the full administrative interface for the staff roster. It allows creating, viewing, editing, deleting, and toggling the active/inactive status of team members. It also provides a dedicated Staff Loans Modal that shows all loans booked by a specific member — filterable by month with live summary statistics.

Data loads on init from team_api alongside branches and roles. All five modals reuse a single CSS overlay system. The page generates a staffId string server-side in PHP from the logged-in session name.

Page Structure

Five logical areas inside <main>, plus five modal overlays.

API Endpoints

Four PHP files are consumed. All return {"success": bool, "data": ...}. The team_api file serves multiple purposes via query params and action suffixes.

Stats Dashboard

Four KPI cards are computed entirely client-side from the members array returned by the last load() call. The cards update every time filters change and data reloads.

const tot = members.length;
const act = members.filter(m => m.team_status === 'active').length;
const pos = new Set(members.map(m => m.team_position).filter(Boolean)).size;

// sInact = tot - act (no extra filter needed)

Filters & Search

Three independent filter controls work together — any change triggers a fresh load() call with all active filters applied as query parameters. There is no client-side filtering; the server always filters the result.

Member Listing

AAvatar System

Every member is represented by a coloured circular avatar with 1–2 letter initials, generated deterministically from the member's full name. The same avatar appears consistently in the table row, mobile card, view modal, and loans modal banner.

const avatarPalette = ['#2563eb','#1b3560','#5a7a62','#b85c38','#4a5568','#334155'];

function aColor(s) {
  let h = 0;
  for (let i = 0; i < s.length; i++)
    h = s.charCodeAt(i) + ((h << 5) - h);
  return avatarPalette[Math.abs(h) % avatarPalette.length];
}

function initials(n) {
  return (n || 'TM').split(' ').slice(0, 2)
    .map(w => w[0]?.toUpperCase() || '').join('');
}

BAction Buttons

Each table row and mobile card has five action buttons. Each has a distinct hover colour to visually signal its destructiveness level.

CMoney Formatters

Two money helpers are used across the loans modal — full format for table cells and compact format for summary chips and banners.

// Full: "NGN 1,250,000"
const fMoney = n => 'NGN ' + Number(n || 0).toLocaleString('en-NG');

// Compact: "1.3M", "250K", "900"
const fMoneyK = n => {
  const v = Number(n || 0);
  return v >= 1e6 ? (v/1e6).toFixed(1) + 'M'
       : v >= 1e3 ? (v/1e3).toFixed(0) + 'K'
       : v.toFixed(0);
};

Roles & Privileges

The role system connects two APIs: roles_api?action=list for the dropdown options, and roles_api?action=manifest for the map of privilege keys to human-readable labels grouped by category. A third call — roles_api?action=get&id=X — fetches the specific privilege keys for a chosen role and is cached per role_id.

AIn-Form Preview

When a role is selected in the Add/Edit form, a purple collapsible panel appears beneath the dropdown showing up to 8 privilege pills from that role, plus a "+N more" count badge if there are more. This preview is rendered from rolePrivsCache[roleId] after lazy-fetching the role's full detail.

BIn-View Modal Display

The View modal shows privileges grouped by their manifest category (e.g. "Loans", "Reports", "Settings"). getGroupedPrivs(privKeys) cross-references the manifest to build a { groupName: [label1, label2] } object, which is then rendered as a purple section with labelled pill groups.

function getGroupedPrivs(privKeys) {
  const labelMap = {};
  rolesManifest.forEach(g =>
    g.items.forEach(i => {
      labelMap[i.key] = { label: i.label, group: g.group };
    })
  );
  const groups = {};
  privKeys.forEach(k => {
    const info = labelMap[k];
    if (!info) return;
    if (!groups[info.group]) groups[info.group] = [];
    groups[info.group].push(info.label);
  });
  return groups;  // { "Loans": ["Book Loan", "Disburse"], ... }
}

Add / Edit Modal

The same #formModal handles both create (POST) and update (PUT). The modal title and editId distinguish the mode. When editing, the password field becomes optional — the pwHint note appears and the Required asterisk is hidden. The status toggle defaults to Active on Add, and mirrors the member's current status on Edit.

AForm Sections

The form is divided into four labelled sub-sections, each with an uppercase coloured label: Personal Information, Role & Privileges, Location, and Account.

View Modal

Opens from the eye button on any row. Entirely rendered from the in-memory members array plus the lazily-loaded role privilege cache — no API call on open (unless the role's privileges haven't been cached yet). An "Edit Member" button in the footer immediately transitions to the edit form.

AGrid Sections

The content is structured as: a centred avatar header → a 2-column detail grid → a purple privileges panel (only shown if the member has a role assigned). The detail grid includes: Email, Phone, Branch, Role, Address (full width), 2FA Status, Last Login, Member Since.

BPrivilege Panel

If a role is assigned, a purple-header panel renders privileges grouped by category using getGroupedPrivs(). Each group shows its name as a small label followed by coloured pills for each privilege. If the role has no privileges, an italic "No privileges assigned" hint is shown instead.

Staff Loans Modal

The most complex modal in the page. Opens via the teal loans button. It fetches all loans for the selected staff member in a single API call, caches them in allLoansForMember, then performs all month filtering client-side — no further API calls when the month changes.

AMember Banner

The top section of the modal is a teal-tinted banner showing the member's avatar, name, position + branch, and two headline stats (Total Loans and Volume). The banner stats always reflect the all-time totals regardless of the active month filter.

BMonth Filter

A native <input type="month"> defaults to the current calendar month when the modal opens. An "All Time" button clears the filter. Changing either control calls renderLoansTable(monthFilter) — no API re-fetch.

let loans = allLoansForMember;

if (monthFilter) {
  loans = loans.filter(l => {
    if (!l.loan_dated) return false;
    return l.loan_dated.substring(0, 7) === monthFilter; // "YYYY-MM"
  });
}

// Summary chips (always reflect filtered list)
const sumActive  = loans.filter(l =>
  ['Active', 'Disbursed', 'Approved'].includes(l.loan_status)
).length;
const sumPending = loans.filter(l =>
  ['Pending', 'Rework'].includes(l.loan_status)
).length;

CSummary Chips

DLoan Status Chips

Each loan row has a coloured status chip. The CSS class is derived directly from the loan_status value.

Delete Modal

Compact confirmation dialog (max-width 360px). The member's name is shown in the warning to prevent accidental deletion. Confirming calls confirmDelete() which sends DELETE to team_api?id={delId}.

Database Schema

Columns inferred from field mappings, API response properties, and rendered data.

API Payload

{
  "team_fullname":      "John Adeyemi",
  "team_email":         "john@company.com",
  "team_phone_number":  "+234 800 000 0000",
  "team_position":      "Branch Manager",
  "role_id":            3,             // null if none selected
  "branch_fk":          2,             // null if none selected
  "team_address":       "14 Victoria Island, Lagos",
  "team_status":        "active",
  "team_password_hash": "plaintext"    // omitted on edit if blank
}

AStatus-only Toggle Payload

When the toggle button is clicked inline (not via the form), a minimal PUT is sent containing only the new status. The backend should treat partial updates as PATCH-style — only updating supplied fields.

{ "team_status": "inactive" }

BSuccess Response

{
  "success": true,
  "data": { "team_id": 7 }   // on create; null on update/delete
}

JavaScript State Variables

Functions

Validation Rules

Client-side validation runs at the top of saveMember(). Failing fields are highlighted red for 1.5 s via hl(id) and focused. The function returns early on first failure — it does not accumulate all errors.