ifritechnologies/pfm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Role column to user directory #117

Merged
khwezi merged 1 commits from finishline into main 2026-09-28 10:59:34 +02:00
Conversation 0 Commits 1 Files Changed 4
+153 -8
4 changed files with 153 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
PostFundManagement.ConsoleUI/src/components/ui/StatusBadge.tsx
+22 -2
View File
@@ -1,6 +1,11 @@
import React from 'react';
import { ApprovalStatus, Priority, ActivityStatus } from '../../types';
import { getApprovalStatusBadge, getPriorityBadge, getActivityStatusBadge } from '../../lib/formatters';
import { ApprovalStatus, Priority, ActivityStatus, UserRole } from '../../types';
import {
getApprovalStatusBadge,
getPriorityBadge,
getActivityStatusBadge,
getUserRoleBadge,
} from '../../lib/formatters';
export const ApprovalStatusBadge: React.FC<{ status: ApprovalStatus | number | null | undefined }> = ({ status }) => {
const badge = getApprovalStatusBadge(status ?? ApprovalStatus.Pending);
@@ -29,3 +34,18 @@ export const ActivityStatusBadge: React.FC<{ status: ActivityStatus | number | s
</span>
);
};
export const UserRoleBadge: React.FC<{ role: string | number | UserRole | null | undefined; className?: string }> = ({
role,
className = '',
}) => {
const badge = getUserRoleBadge(role);
return (
<span
className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] font-medium border whitespace-nowrap ${badge.className} ${className}`}
>
{badge.dot && <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${badge.dot}`} />}
<span>{badge.label}</span>
</span>
);
};
PostFundManagement.ConsoleUI/src/lib/formatters.ts
+78
View File
@@ -13,6 +13,7 @@ import {
NotificationPlatform,
NotificationStatus,
EmailStatuses,
UserRole,
} from '../types';
export const formatZAR = (amount: number): string => {
@@ -570,3 +571,80 @@ export const getUserEmail = (userIdOrEmail?: string | number | null): string =>
return str;
};
// ==========================================
// User Role Badges & Formatter
// ==========================================
export const USER_ROLE_OPTIONS = [
{ value: 'Admin', label: 'Admin' },
{ value: 'Executive', label: 'Executive' },
{ value: 'Supervisor', label: 'Supervisor' },
{ value: 'Manager', label: 'Manager' },
{ value: 'Contributor', label: 'Contributor' },
];
export const getUserRoleBadge = (role?: string | number | UserRole | null) => {
if (role === null || role === undefined || role === '') {
return {
label: 'Contributor',
className: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30',
dot: 'bg-emerald-400',
};
}
const roleStr = String(role).trim().toLowerCase();
// 1. Admin - High-privilege Crimson/Rose
if (roleStr === 'admin' || roleStr === 'superadmin' || roleStr === '1') {
return {
label: 'Admin',
className: 'bg-rose-500/15 text-rose-300 border-rose-500/30 shadow-xs shadow-rose-500/10 font-semibold',
dot: 'bg-rose-400',
};
}
// 2. Executive - Strategic Amber/Gold
if (roleStr === 'executive' || roleStr === '2') {
return {
label: 'Executive',
className: 'bg-amber-500/15 text-amber-300 border-amber-500/30 shadow-xs shadow-amber-500/10 font-semibold',
dot: 'bg-amber-400',
};
}
// 3. Supervisor - Operational Governance Purple/Violet
if (roleStr === 'supervisor' || roleStr === '3') {
return {
label: 'Supervisor',
className: 'bg-purple-500/15 text-purple-300 border-purple-500/30 shadow-xs shadow-purple-500/10 font-semibold',
dot: 'bg-purple-400',
};
}
// 4. Manager - Programme & Project Management Blue/Sky
if (roleStr === 'manager' || roleStr === 'programmemanager' || roleStr === 'projectmanager' || roleStr === '4') {
return {
label: 'Manager',
className: 'bg-blue-500/15 text-blue-300 border-blue-500/30 shadow-xs shadow-blue-500/10 font-semibold',
dot: 'bg-blue-400',
};
}
// 5. Contributor - Execution & Outreach Emerald/Mint
if (roleStr === 'contributor' || roleStr === 'viewer' || roleStr === 'recipientviewer' || roleStr === '5') {
return {
label: 'Contributor',
className: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30 shadow-xs shadow-emerald-500/10 font-semibold',
dot: 'bg-emerald-400',
};
}
// Fallback for custom formatted role strings
const formatted = roleStr.charAt(0).toUpperCase() + roleStr.slice(1);
return {
label: formatted,
className: 'bg-cyan-500/15 text-cyan-300 border-cyan-500/30',
dot: 'bg-cyan-400',
};
};
PostFundManagement.ConsoleUI/src/pages/SettingsPage.tsx
+47 -4
View File
@@ -61,6 +61,7 @@ import { useToast } from '../components/ui/Toast';
import { ExportButton } from '../components/ui/ExportButton';
import { ExportColumn } from '../utils/exportUtils';
import { useTableSort, SortableTh } from '../utils/tableSort';
import { UserRoleBadge } from '../components/ui/StatusBadge';
import { useAuth } from '../auth/AuthProvider';
import {
EmailStatuses,
@@ -84,6 +85,8 @@ import {
getUserEmail,
registerUserEmails,
getActivityStatusBadge,
getUserRoleBadge,
USER_ROLE_OPTIONS,
EMAIL_STATUSES_OPTIONS,
NOTIFICATION_STATUS_OPTIONS,
NOTIFICATION_PLATFORM_OPTIONS,
@@ -101,6 +104,7 @@ export const SettingsPage: React.FC = () => {
// ==========================================
const [userEmailSearch, setUserEmailSearch] = useState('');
const [userStatusFilter, setUserStatusFilter] = useState<ActivityStatus | 'all'>('all');
const [userRoleFilter, setUserRoleFilter] = useState<string>('all');
const [selectedUserForDetail, setSelectedUserForDetail] = useState<User | null>(null);
const [isUserDetailModalOpen, setIsUserDetailModalOpen] = useState(false);
@@ -125,6 +129,16 @@ export const SettingsPage: React.FC = () => {
queryFn: () => getUsers(1, 100, userFilter),
});
const filteredUsers = useMemo(() => {
return usersList.filter((u) => {
const matchRole =
userRoleFilter === 'all' ||
(u.role && String(u.role).toLowerCase() === userRoleFilter.toLowerCase()) ||
(!u.role && userRoleFilter.toLowerCase() === 'contributor');
return matchRole;
});
}, [usersList, userRoleFilter]);
React.useEffect(() => {
if (usersDirectory && usersDirectory.length > 0) {
registerUserEmails(usersDirectory);
@@ -462,6 +476,7 @@ export const SettingsPage: React.FC = () => {
const userExportColumns: ExportColumn<User>[] = [
{ header: 'User Email', key: 'email', format: (val, u) => val || getUserEmail(u.id) || '—' },
{ header: 'User Identifier', key: 'id' },
{ header: 'Role', key: 'role', format: (val) => getUserRoleBadge(val).label },
{ header: 'Status', key: 'status', format: (val) => getActivityStatusBadge(val).label },
{ header: 'Last Login', key: 'lastLoginAt', format: (val) => (val ? formatDate(val) : 'Never') },
];
@@ -483,7 +498,9 @@ export const SettingsPage: React.FC = () => {
sortColumn: userSortCol,
sortDirection: userSortDir,
handleSort: handleUserSort,
} = useTableSort(usersList, 'email', 'asc');
} = useTableSort(filteredUsers, 'email', 'asc', {
role: (u: User) => getUserRoleBadge(u.role).label,
});
const {
sortedData: sortedInvites,
@@ -682,6 +699,21 @@ export const SettingsPage: React.FC = () => {
/>
</div>
<div className="flex items-center gap-1.5 text-xs text-slate-400">
<select
value={userRoleFilter}
onChange={(e) => setUserRoleFilter(e.target.value)}
className="text-xs bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-white focus:outline-none focus:border-blue-500"
>
<option value="all">All Roles</option>
{USER_ROLE_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</div>
<div className="flex items-center gap-1.5 text-xs text-slate-400">
<select
value={userStatusFilter}
@@ -695,12 +727,13 @@ export const SettingsPage: React.FC = () => {
</select>
</div>
{(userEmailSearch.trim() !== '' || userStatusFilter !== 'all') && (
{(userEmailSearch.trim() !== '' || userStatusFilter !== 'all' || userRoleFilter !== 'all') && (
<button
type="button"
onClick={() => {
setUserEmailSearch('');
setUserStatusFilter('all');
setUserRoleFilter('all');
}}
className="inline-flex items-center gap-1 text-[11px] font-semibold text-slate-400 hover:text-slate-200 transition cursor-pointer"
>
@@ -772,6 +805,9 @@ export const SettingsPage: React.FC = () => {
<SortableTh column="id" currentColumn={userSortCol} direction={userSortDir} onSort={handleUserSort} className="py-3.5 px-4">
User Identifier
</SortableTh>
<SortableTh column="role" currentColumn={userSortCol} direction={userSortDir} onSort={handleUserSort} className="py-3.5 px-4">
Role
</SortableTh>
<SortableTh column="status" currentColumn={userSortCol} direction={userSortDir} onSort={handleUserSort} className="py-3.5 px-4">
Status
</SortableTh>
@@ -784,13 +820,13 @@ export const SettingsPage: React.FC = () => {
<tbody className="divide-y divide-slate-800/50">
{loadingUsers ? (
<tr>
<td colSpan={5} className="py-8 text-center text-slate-500">
<td colSpan={6} className="py-8 text-center text-slate-500">
Loading user directory...
</td>
</tr>
) : sortedUsers.length === 0 ? (
<tr>
<td colSpan={5} className="py-8 text-center text-slate-500">
<td colSpan={6} className="py-8 text-center text-slate-500">
No users found matching current filters.
</td>
</tr>
@@ -805,6 +841,9 @@ export const SettingsPage: React.FC = () => {
<td className="py-3.5 px-4 font-mono text-slate-400 text-[11px]">
{u.id}
</td>
<td className="py-3.5 px-4">
<UserRoleBadge role={u.role} />
</td>
<td className="py-3.5 px-4">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-semibold border ${badge.className}`}>
{badge.label}
@@ -2173,6 +2212,10 @@ export const SettingsPage: React.FC = () => {
{userFreshDetail?.id || selectedUserForDetail.id}
</span>
</div>
<div>
<span className="text-slate-400 font-semibold block text-[11px] uppercase mb-1">System Role:</span>
<UserRoleBadge role={userFreshDetail?.role ?? selectedUserForDetail.role} />
</div>
<div className="flex items-center justify-between pt-1">
<div>
<span className="text-slate-400 font-semibold block text-[11px] uppercase">Status:</span>
PostFundManagement.ConsoleUI/src/types.ts
+6 -2
View File
@@ -245,8 +245,12 @@ export interface Dashboard {
}
export enum UserRole {
Admin = 'Admin',
Executive = 'Executive',
Supervisor = 'Supervisor',
Manager = 'Manager',
Contributor = 'Contributor',
SuperAdmin = 1,
Executive = 2,
ProgrammeManager = 3,
FinanceOfficer = 4,
RecipientViewer = 5,
@@ -257,7 +261,7 @@ export interface User {
email: string | null;
status: ActivityStatus;
lastLoginAt: string | null;
role?: string | UserRole;
role?: string | UserRole | null;
name?: string;
organisationId?: number | string;
organisationName?: string;