feat: Enhance user management and dashboard components

- Updated user management templates to improve user experience with a new layout and success/error message handling.
- Implemented password hashing for user creation and management, enhancing security.
- Refactored dashboard components to include better data presentation and responsiveness.
- Added dark mode support for various components, ensuring a consistent user interface across themes.
- Improved toast notification animations for better user feedback during actions.

components/admin_roles.templ

@@ -94,14 +94,20 @@ templ AdminRoles(ctx context.Context, data RolesData) {
 					<div class="p-4 md:p-5 text-center">
 						<i class="fas fa-exclamation-triangle mx-auto mb-4 text-red-400 text-3xl"></i>
 						<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this role?</h3>
-						<form method="POST" id="delete-form" action="">
-							<button type="submit" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
+						<div>
+							<button 
+								id="confirm-delete-button"
+								type="button" 
+								class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
 								Yes, delete it
 							</button>
-							<button type="button" data-modal-hide="confirm-delete-modal" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+							<button 
+								type="button" 
+								data-modal-hide="confirm-delete-modal" 
+								class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
 								No, cancel
 							</button>
-						</form>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -109,14 +115,52 @@ templ AdminRoles(ctx context.Context, data RolesData) {
 
 		<script>
 			document.addEventListener('DOMContentLoaded', function() {
+				let currentRoleId = null;
+				const modal = document.getElementById('confirm-delete-modal');
+				
 				// Handle delete modal
 				const deleteButtons = document.querySelectorAll('[data-modal-target="confirm-delete-modal"]');
 				deleteButtons.forEach(button => {
 					button.addEventListener('click', function() {
-						const roleId = this.getAttribute('data-role-id');
-						document.getElementById('delete-form').action = `/admin/roles/${roleId}/delete`;
+						currentRoleId = this.getAttribute('data-role-id');
 					});
 				});
+				
+				// Handle confirm delete button
+				const confirmDeleteButton = document.getElementById('confirm-delete-button');
+				confirmDeleteButton.addEventListener('click', function() {
+					if (currentRoleId) {
+						// Use fetch to send DELETE request
+						fetch(`/admin/roles/${currentRoleId}`, {
+							method: 'DELETE',
+							headers: {
+								'Content-Type': 'application/json'
+							}
+						})
+						.then(response => {
+							if (response.ok) {
+								// Reload page on success
+								window.location.reload();
+							} else {
+								// Handle error
+								response.json().then(data => {
+									alert('Error: ' + (data.error || 'Failed to delete role'));
+								}).catch(() => {
+									alert('An error occurred while deleting the role');
+								});
+							}
+						})
+						.catch(error => {
+							console.error('Error:', error);
+							alert('An error occurred while deleting the role');
+						})
+						.finally(() => {
+							// Hide modal
+							const closeModalButton = document.querySelector('[data-modal-hide="confirm-delete-modal"]');
+							if (closeModalButton) closeModalButton.click();
+						});
+					}
+				});
 			});
 		</script>
 	}