feat: Refactor user management to replace email with username across the application

src/app/admin/users/[id]/edit/page.js

@@ -15,7 +15,7 @@ export default function EditUserPage() {
 	const [user, setUser] = useState(null);
 	const [formData, setFormData] = useState({
 		name: "",
-		email: "",
+		username: "",
 		role: "user",
 		is_active: true,
 		password: ""
@@ -62,7 +62,7 @@ export default function EditUserPage() {
 			setUser(userData);
 			setFormData({
 				name: userData.name,
-				email: userData.email,
+				username: userData.username,
 				role: userData.role,
 				is_active: userData.is_active,
 				password: "" // Never populate password field
@@ -84,7 +84,7 @@ export default function EditUserPage() {
 			// Prepare update data (exclude empty password)
 			const updateData = {
 				name: formData.name,
-				email: formData.email,
+				username: formData.username,
 				role: formData.role,
 				is_active: formData.is_active
 			};
@@ -209,12 +209,12 @@ export default function EditUserPage() {
 
 							<div>
 								<label className="block text-sm font-medium text-gray-700 mb-2">
-									Email *
+									Username *
 								</label>
 								<Input
-									type="email"
-									value={formData.email}
-									onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+									type="text"
+									value={formData.username}
+									onChange={(e) => setFormData({ ...formData, username: e.target.value })}
 									required
 								/>
 							</div>

src/app/admin/users/page.js

@@ -194,7 +194,7 @@ export default function UserManagementPage() {
 												</div>
 												<div>
 													<h3 className="text-lg font-semibold text-gray-900">{user.name}</h3>
-													<p className="text-sm text-gray-500">{user.email}</p>
+													<p className="text-sm text-gray-500">{user.username}</p>
 												</div>
 											</div>
 											<div className="flex items-center space-x-2">
@@ -284,7 +284,7 @@ export default function UserManagementPage() {
 function CreateUserModal({ onClose, onUserCreated }) {
 	const [formData, setFormData] = useState({
 		name: "",
-		email: "",
+		username: "",
 		password: "",
 		role: "user",
 		is_active: true
@@ -353,12 +353,12 @@ function CreateUserModal({ onClose, onUserCreated }) {
 
 					<div>
 						<label className="block text-sm font-medium text-gray-700 mb-1">
-							Email
+							Username
 						</label>
 						<Input
-							type="email"
-							value={formData.email}
-							onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+							type="text"
+							value={formData.username}
+							onChange={(e) => setFormData({ ...formData, username: e.target.value })}
 							required
 						/>
 					</div>