feat(admin): create user with password (#12112)

close AF-2494

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
  - Added support for importing users with optional passwords via CSV, including password validation and error handling.
  - Enhanced user creation form to allow password input and validation according to server-configured requirements.
  - User table now displays a password column and provides granular error highlighting for email and password fields.
  - Introduced detailed CSV format guidance and improved import dialog with dynamic content and footer controls.

- **Improvements**
  - Updated import dialog workflow for clearer CSV formatting guidance and improved user feedback during import.
  - Refined dropdown menu actions and improved UI clarity for user management actions.

- **Bug Fixes**
  - Corrected menu action handlers for "Edit" and "Reset Password" in user actions dropdown.

- **Chores**
  - Refactored import dialog code into modular components for maintainability and clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/admin/src/modules/accounts/components/user-table.tsx

@@ -11,7 +11,7 @@ export const UserTable: React.FC<UserTableProps> = ({ users }) => {
   return (
     <div className="max-h-[300px] overflow-y-auto border rounded-md">
       <table className="w-full border-collapse">
-        <thead className="bg-gray-50 sticky top-0">
+        <thead className="bg-white sticky top-0">
           <tr>
             <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
               Username
@@ -19,6 +19,9 @@ export const UserTable: React.FC<UserTableProps> = ({ users }) => {
             <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
               Email
             </th>
+            <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Password
+            </th>
             <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
               Status
             </th>
@@ -37,10 +40,26 @@ export const UserTable: React.FC<UserTableProps> = ({ users }) => {
                 {user.name || '-'}
               </td>
               <td
-                className={`py-2 px-4 text-sm truncate max-w-[200px] ${user.valid === false ? 'text-red-500' : 'text-gray-900'}`}
+                className={`py-2 px-4 text-sm truncate max-w-[200px] ${
+                  user.valid === false &&
+                  (user.error?.toLowerCase().includes('email') ||
+                    !user.error?.toLowerCase().includes('password'))
+                    ? 'text-red-500'
+                    : 'text-gray-900'
+                }`}
               >
                 {user.email}
               </td>
+              <td
+                className={`py-2 px-4 text-sm truncate max-w-[150px] ${
+                  user.valid === false &&
+                  user.error?.toLowerCase().includes('password')
+                    ? 'text-red-500'
+                    : 'text-gray-900'
+                }`}
+              >
+                {user.password || '-'}
+              </td>
               <td className="py-2 px-4 text-sm">
                 {user.importStatus === ImportStatus.Success ? (
                   <span className="text-gray-900">