Skip to content

Commit 1b71d46

Browse files
Skywalker690Skywalker690
authored
Merge pull request #41 from incial/development
feat: Implement user management functionality with user creation
2 parents 7e3a811 + 25afa31 commit 1b71d46

File tree

10 files changed

+719
-24
lines changed

10 files changed

+719
-24
lines changed

‎client/App.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { AnalyticsPage } from './pages/AnalyticsPage';
1212
import { ClientTrackerPage } from './pages/ClientTrackerPage';
1313
import { ClientDetailsPage } from './pages/ClientDetailsPage';
1414
import { AdminPerformancePage } from './pages/AdminPerformancePage';
15+
import { AdminUserManagementPage } from './pages/AdminUserManagementPage';
1516
import { MeetingTrackerPage } from './pages/MeetingTrackerPage';
1617
import { UniversalCalendarPage } from './pages/UniversalCalendarPage';
1718
import { MyDashboardPage } from './pages/MyDashboardPage';
@@ -215,7 +216,7 @@ const AppRoutes = () => {
215216
</OperationalRoute>
216217
} />
217218

218-
{/* Analytics (Super Admin Only) */}
219+
{/* Analytics & User Management (Super Admin Only) */}
219220
<Route path="/reports" element={
220221
<SuperAdminRoute>
221222
<AnalyticsPage title="Reports" />
@@ -226,6 +227,11 @@ const AppRoutes = () => {
226227
<AdminPerformancePage />
227228
</SuperAdminRoute>
228229
} />
230+
<Route path="/admin/users" element={
231+
<SuperAdminRoute>
232+
<AdminUserManagementPage />
233+
</SuperAdminRoute>
234+
} />
229235

230236
{/* System Routes */}
231237
<Route path="/unauthorized" element={<UnauthorizedPage />} />

‎client/components/admin/CreateUserModal.tsx‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
2+
import React, { useState } from 'react';
3+
import { X, Save, User, Mail, Lock, Shield } from 'lucide-react';
4+
import { authApi } from '../../services/api';
5+
import { useToast } from '../../context/ToastContext';
6+
import { CustomSelect } from '../ui/CustomSelect';
7+
8+
interface CreateUserModalProps {
9+
isOpen: boolean;
10+
onClose: () => void;
11+
onSuccess: () => void;
12+
}
13+
14+
const ROLE_OPTIONS = [
15+
{ label: 'Employee', value: 'ROLE_EMPLOYEE' },
16+
{ label: 'Admin', value: 'ROLE_ADMIN' },
17+
{ label: 'Super Admin', value: 'ROLE_SUPER_ADMIN' },
18+
];
19+
20+
export const CreateUserModal: React.FC<CreateUserModalProps> = ({ isOpen, onClose, onSuccess }) => {
21+
const { showToast } = useToast();
22+
const [formData, setFormData] = useState({
23+
name: '',
24+
email: '',
25+
password: '',
26+
role: 'ROLE_EMPLOYEE'
27+
});
28+
const [isLoading, setIsLoading] = useState(false);
29+
30+
if (!isOpen) return null;
31+
32+
const handleSubmit = async (e: React.FormEvent) => {
33+
e.preventDefault();
34+
setIsLoading(true);
35+
36+
try {
37+
await authApi.registerUser(formData);
38+
showToast(`User ${formData.name} created successfully`, 'success');
39+
// Reset form
40+
setFormData({
41+
name: '',
42+
email: '',
43+
password: '',
44+
role: 'ROLE_EMPLOYEE'
45+
});
46+
onSuccess();
47+
onClose();
48+
} catch (err: any) {
49+
showToast(err.message || 'Failed to create user', 'error');
50+
} finally {
51+
setIsLoading(false);
52+
}
53+
};
54+
55+
return (
56+
<div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200" onClick={onClose}>
57+
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col transform transition-all scale-100" onClick={(e) => e.stopPropagation()}>
58+
59+
{/* Header */}
60+
<div className="flex items-center justify-between p-5 border-b border-gray-100 bg-gray-50/50">
61+
<h2 className="text-xl font-bold text-gray-900 flex items-center gap-2">
62+
<User className="h-5 w-5 text-brand-600" /> Create New User
63+
</h2>
64+
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-2 rounded-full hover:bg-gray-200 transition-colors">
65+
<X className="h-5 w-5" />
66+
</button>
67+
</div>
68+
69+
{/* Content */}
70+
<div className="p-6">
71+
<form onSubmit={handleSubmit} className="space-y-5">
72+
73+
{/* Name */}
74+
<div>
75+
<label className="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Full Name <span className="text-red-500">*</span></label>
76+
<div className="relative">
77+
<User className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
78+
<input
79+
type="text"
80+
required
81+
className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-brand-500 focus:outline-none transition-all"
82+
placeholder="John Doe"
83+
value={formData.name}
84+
onChange={e => setFormData({...formData, name: e.target.value})}
85+
/>
86+
</div>
87+
</div>
88+
89+
{/* Email */}
90+
<div>
91+
<label className="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Email Address <span className="text-red-500">*</span></label>
92+
<div className="relative">
93+
<Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
94+
<input
95+
type="email"
96+
required
97+
className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-brand-500 focus:outline-none transition-all"
98+
placeholder="john@incial.com"
99+
value={formData.email}
100+
onChange={e => setFormData({...formData, email: e.target.value})}
101+
/>
102+
</div>
103+
</div>
104+
105+
{/* Password */}
106+
<div>
107+
<label className="block text-xs font-bold text-gray-500 uppercase tracking-wide mb-1.5">Password <span className="text-red-500">*</span></label>
108+
<div className="relative">
109+
<Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
110+
<input
111+
type="password"
112+
required
113+
className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-brand-500 focus:outline-none transition-all"
114+
placeholder="Min 6 characters"
115+
value={formData.password}
116+
onChange={e => setFormData({...formData, password: e.target.value})}
117+
minLength={6}
118+
/>
119+
</div>
120+
</div>
121+
122+
{/* Role */}
123+
<div>
124+
<CustomSelect
125+
label="System Role"
126+
value={formData.role}
127+
onChange={(val) => setFormData({...formData, role: val})}
128+
options={ROLE_OPTIONS}
129+
required
130+
/>
131+
<p className="text-xs text-gray-400 mt-1.5 flex items-center gap-1">
132+
<Shield className="h-3 w-3" />
133+
Assign appropriate permissions.
134+
</p>
135+
</div>
136+
137+
{/* Footer */}
138+
<div className="flex justify-end gap-3 pt-4 border-t border-gray-50 mt-2">
139+
<button
140+
type="button"
141+
onClick={onClose}
142+
className="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-xl font-medium transition-colors"
143+
>
144+
Cancel
145+
</button>
146+
<button
147+
type="submit"
148+
disabled={isLoading}
149+
className="px-5 py-2.5 text-white bg-brand-600 hover:bg-brand-700 rounded-xl font-medium shadow-lg shadow-brand-500/20 flex items-center gap-2 transition-colors disabled:opacity-70"
150+
>
151+
{isLoading ? (
152+
<span className="flex items-center gap-2">Creating...</span>
153+
) : (
154+
<>
155+
<Save className="h-4 w-4" /> Create User
156+
</>
157+
)}
158+
</button>
159+
</div>
160+
161+
</form>
162+
</div>
163+
</div>
164+
</div>
165+
);
166+
};

‎client/components/admin/UserProfileModal.tsx‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
2+
import React from 'react';
3+
import { X, User, Mail, Calendar, Shield, Trash2, MapPin } from 'lucide-react';
4+
import { User as UserType } from '../../types';
5+
import { useAuth } from '../../context/AuthContext';
6+
import { CustomSelect } from '../ui/CustomSelect';
7+
8+
interface UserProfileModalProps {
9+
isOpen: boolean;
10+
onClose: () => void;
11+
user: UserType | null;
12+
onDeleteRequest: (user: UserType) => void;
13+
onRoleUpdate: (userId: number, newRole: string) => void;
14+
}
15+
16+
const ROLE_OPTIONS = [
17+
{ label: 'Super Admin', value: 'ROLE_SUPER_ADMIN' },
18+
{ label: 'Admin', value: 'ROLE_ADMIN' },
19+
{ label: 'Employee', value: 'ROLE_EMPLOYEE' },
20+
{ label: 'Client', value: 'ROLE_CLIENT' },
21+
];
22+
23+
export const UserProfileModal: React.FC<UserProfileModalProps> = ({ isOpen, onClose, user, onDeleteRequest, onRoleUpdate }) => {
24+
const { user: currentUser } = useAuth();
25+
26+
if (!isOpen || !user) return null;
27+
28+
const isSelf = currentUser?.id === user.id;
29+
30+
const getRoleBadge = (role: string) => {
31+
let styles = 'bg-gray-100 text-gray-600 border-gray-200';
32+
if (role === 'ROLE_SUPER_ADMIN') styles = 'bg-yellow-50 text-yellow-700 border-yellow-200';
33+
if (role === 'ROLE_ADMIN') styles = 'bg-purple-50 text-purple-700 border-purple-200';
34+
if (role === 'ROLE_EMPLOYEE') styles = 'bg-blue-50 text-blue-700 border-blue-200';
35+
36+
const label = role.replace('ROLE_', '').replace('_', ' ');
37+
return <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wide border ${styles}`}>{label}</span>;
38+
};
39+
40+
return (
41+
<div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200" onClick={onClose}>
42+
<div className="bg-white rounded-[2rem] shadow-2xl w-full max-w-md overflow-hidden flex flex-col transform transition-all scale-100 relative border border-gray-100" onClick={(e) => e.stopPropagation()}>
43+
44+
{/* Close Button - Z-Index 50 to stay above banner */}
45+
<button
46+
onClick={onClose}
47+
className="absolute top-4 right-4 z-50 p-2 bg-black/20 hover:bg-black/30 text-white rounded-full transition-colors backdrop-blur-md"
48+
>
49+
<X className="h-5 w-5" />
50+
</button>
51+
52+
{/* Cover Background */}
53+
<div className="h-48 relative bg-gradient-to-r from-brand-600 to-indigo-600 shrink-0">
54+
<img
55+
src="/banner.png"
56+
alt="Profile Banner"
57+
className="w-full h-full object-cover absolute inset-0 z-10"
58+
onError={(e) => e.currentTarget.style.display = 'none'}
59+
/>
60+
{/* Avatar - Absolute to banner but hanging off bottom */}
61+
<div className="absolute -bottom-12 left-8 z-30">
62+
<div className="h-24 w-24 rounded-3xl bg-white p-1.5 shadow-xl border border-gray-100">
63+
{user.avatarUrl ? (
64+
<img src={user.avatarUrl} alt={user.name} className="h-full w-full rounded-2xl object-cover bg-gray-100" />
65+
) : (
66+
<div className="h-full w-full rounded-2xl bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center text-3xl font-bold text-gray-400 uppercase tracking-tighter">
67+
{user.name.charAt(0)}
68+
</div>
69+
)}
70+
</div>
71+
</div>
72+
</div>
73+
74+
{/* User Info - Added top padding to account for avatar overlap */}
75+
<div className="pt-16 pb-8 px-8">
76+
<div className="mb-6">
77+
<div className="flex flex-col gap-4">
78+
<div>
79+
<h2 className="text-2xl font-bold text-gray-900">{user.name}</h2>
80+
<div className="mt-3">
81+
{isSelf ? (
82+
<div title="You cannot change your own role.">
83+
{getRoleBadge(user.role)}
84+
</div>
85+
) : (
86+
<div className="w-full">
87+
<CustomSelect
88+
value={user.role}
89+
onChange={(val) => onRoleUpdate(user.id, val)}
90+
options={ROLE_OPTIONS}
91+
placeholder="Select Role"
92+
className="w-full"
93+
/>
94+
</div>
95+
)}
96+
</div>
97+
</div>
98+
</div>
99+
100+
<div className="mt-6 space-y-3">
101+
<div className="flex items-center gap-3 text-sm text-gray-600 p-3.5 bg-gray-50 rounded-2xl border border-gray-100">
102+
<Mail className="h-5 w-5 text-gray-400" />
103+
<span className="font-medium">{user.email}</span>
104+
</div>
105+
106+
<div className="flex items-center gap-3 text-sm text-gray-600 p-3.5 bg-gray-50 rounded-2xl border border-gray-100">
107+
<Calendar className="h-5 w-5 text-gray-400" />
108+
<span>Joined {user.createdAt ? new Date(user.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) : 'Unknown'}</span>
109+
</div>
110+
111+
<div className="flex items-center gap-3 text-sm text-gray-600 p-3.5 bg-gray-50 rounded-2xl border border-gray-100">
112+
<Shield className="h-5 w-5 text-gray-400" />
113+
<span>System ID: <span className="font-mono text-xs font-bold bg-gray-200 px-2 py-0.5 rounded text-gray-600">{user.id}</span></span>
114+
</div>
115+
</div>
116+
</div>
117+
118+
{/* Actions */}
119+
<div className="pt-6 border-t border-gray-100 flex justify-end">
120+
{isSelf ? (
121+
<div className="text-xs text-gray-400 italic">You cannot delete your own account.</div>
122+
) : (
123+
<button
124+
onClick={() => onDeleteRequest(user)}
125+
className="flex items-center gap-2 px-5 py-2.5 bg-red-50 text-red-600 hover:bg-red-100 rounded-xl font-bold text-sm transition-colors border border-red-100"
126+
>
127+
<Trash2 className="h-4 w-4" /> Delete User
128+
</button>
129+
)}
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
);
135+
};

‎client/components/layout/Sidebar.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
import React from 'react';
3-
import { Users, Briefcase, Settings, PieChart, ChevronRight, CheckSquare, ListTodo, BarChart2, Calendar, LayoutDashboard, Home, Command } from 'lucide-react';
3+
import { Users, Briefcase, Settings, PieChart, ChevronRight, CheckSquare, ListTodo, BarChart2, Calendar, LayoutDashboard, Home, Command, Shield } from 'lucide-react';
44
import { Link, useLocation } from 'react-router-dom';
55
import { useAuth } from '../../context/AuthContext';
66
import { useLayout } from '../../context/LayoutContext';
@@ -65,10 +65,8 @@ export const Sidebar: React.FC = () => {
6565
<div className={`h-[88px] flex items-center ${isSidebarCollapsed ? 'justify-center' : 'px-8'} transition-all duration-300`}>
6666
<div className="flex items-center gap-3.5 overflow-hidden whitespace-nowrap group cursor-pointer">
6767
<div className={`relative flex items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 shadow-lg shadow-brand-500/30 transition-all duration-500 ${isSidebarCollapsed ? 'h-10 w-10' : 'h-9 w-9'}`}>
68-
<div className={`relative flex items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 shadow-lg shadow-brand-500/30 transition-all duration-500 ${isSidebarCollapsed ? 'h-10 w-10' : 'h-9 w-9'}`}>
6968
<img src="/logo.png" alt="Incial" className="h-9 w-9 rounded-xl bg-white shadow-lg object-contain p-1 flex-shrink-0" />
7069
</div>
71-
</div>
7270

7371
{!isSidebarCollapsed && (
7472
<div className="flex flex-col opacity-100 transition-opacity duration-300">
@@ -131,6 +129,7 @@ export const Sidebar: React.FC = () => {
131129
<div className="space-y-0.5">
132130
<NavItem collapsed={isSidebarCollapsed} icon={PieChart} label="Reports" to="/reports" active={currentPath === '/reports'} />
133131
<NavItem collapsed={isSidebarCollapsed} icon={BarChart2} label="Performance" to="/admin/performance" active={currentPath === '/admin/performance'} />
132+
<NavItem collapsed={isSidebarCollapsed} icon={Shield} label="Users" to="/admin/users" active={currentPath === '/admin/users'} />
134133
</div>
135134
</div>
136135
)}

‎client/components/ui/DeleteConfirmationModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
2222
if (!isOpen) return null;
2323

2424
return (
25-
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200" onClick={onClose}>
25+
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200" onClick={onClose}>
2626
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all scale-100 p-6" onClick={(e) => e.stopPropagation()}>
2727

2828
<div className="flex items-start gap-4">

0 commit comments

Comments
 (0)