additional features, refinement and more control over the app from admin side, better bookings UX

components/admin/AdminUserManagement.tsx

@@ -71,8 +71,12 @@ export function AdminUserManagement() {
 		}
 	};
 
-	const handleCreateUser = async () => {
+	const handleCreateUser = async (e?: React.FormEvent) => {
 		try {
+			// Prevent form submission and double submissions
+			if (e) e.preventDefault();
+			if (loading) return;
+
 			if (!formData.name || !formData.surname || !formData.email || !formData.password) {
 				toast({
 					title: 'Error',
@@ -82,6 +86,8 @@ export function AdminUserManagement() {
 				return;
 			}
 
+			setLoading(true);
+
 			const response = await fetch('/api/admin/users', {
 				method: 'POST',
 				headers: {
@@ -114,11 +120,16 @@ export function AdminUserManagement() {
 				description: 'Failed to create user',
 				variant: 'destructive',
 			});
+		} finally {
+			setLoading(false);
 		}
 	};
 
 	const handleEditUser = async () => {
 		try {
+			// Prevent double submissions
+			if (loading) return;
+
 			if (!editingUser || !formData.name || !formData.surname || !formData.email) {
 				toast({
 					title: 'Error',
@@ -128,6 +139,8 @@ export function AdminUserManagement() {
 				return;
 			}
 
+			setLoading(true);
+
 			const updateData = { ...formData };
 			if (!updateData.password) {
 				delete updateData.password; // Don't update password if not provided
@@ -166,6 +179,8 @@ export function AdminUserManagement() {
 				description: 'Failed to update user',
 				variant: 'destructive',
 			});
+		} finally {
+			setLoading(false);
 		}
 	};
 
@@ -262,7 +277,7 @@ export function AdminUserManagement() {
 						<DialogHeader>
 							<DialogTitle>Create New User</DialogTitle>
 						</DialogHeader>
-						<div className='space-y-4'>
+						<form onSubmit={handleCreateUser} className='space-y-4'>
 							<div className='grid grid-cols-2 gap-4'>
 								<div>
 									<Label htmlFor='name'>First Name</Label>
@@ -321,12 +336,14 @@ export function AdminUserManagement() {
 								</Select>
 							</div>
 							<div className='flex gap-2 justify-end'>
-								<Button variant='outline' onClick={() => setIsCreateDialogOpen(false)}>
+								<Button type='button' variant='outline' onClick={() => setIsCreateDialogOpen(false)}>
 									Cancel
 								</Button>
-								<Button onClick={handleCreateUser}>Create User</Button>
+								<Button type='submit' disabled={loading}>
+									{loading ? 'Creating...' : 'Create User'}
+								</Button>
 							</div>
-						</div>
+						</form>
 					</DialogContent>
 				</Dialog>
 			</div>
@@ -474,7 +491,9 @@ export function AdminUserManagement() {
 							<Button variant='outline' onClick={() => setIsEditDialogOpen(false)}>
 								Cancel
 							</Button>
-							<Button onClick={handleEditUser}>Update User</Button>
+							<Button onClick={handleEditUser} disabled={loading}>
+								{loading ? 'Updating...' : 'Update User'}
+							</Button>
 						</div>
 					</div>
 				</DialogContent>