demo2

app/components/users/UserList.tsx

@@ -184,12 +184,95 @@ export const UserList = memo(function UserList({
 
   return (
     <>
-      <DataTable
-        data={users}
-        columns={columns}
-        loading={loading}
-        emptyMessage="لا توجد مستخدمين"
-      />
+      {/* Desktop Table View */}
+      <div className="hidden md:block">
+        <DataTable
+          data={users}
+          columns={columns}
+          loading={loading}
+          emptyMessage="لا توجد مستخدمين"
+        />
+      </div>
+
+      {/* Mobile Card View */}
+      <div className="md:hidden divide-y divide-gray-200">
+        {users.map((user) => {
+          const levelName = getAuthLevelName(user.authLevel);
+          const statusName = getStatusName(user.status);
+          const levelColorClass = user.authLevel === AUTH_LEVELS.SUPERADMIN 
+            ? 'text-purple-600 bg-purple-100'
+            : user.authLevel === AUTH_LEVELS.ADMIN
+            ? 'text-blue-600 bg-blue-100'
+            : 'text-gray-600 bg-gray-100';
+          const statusColorClass = user.status === 'active'
+            ? 'text-green-600 bg-green-100'
+            : 'text-red-600 bg-red-100';
+          
+          return (
+            <div key={user.id} className="p-4 hover:bg-gray-50">
+              <div className="space-y-3">
+                <div className="flex justify-between items-start">
+                  <div className="flex-1 min-w-0">
+                    <Text weight="medium" className="truncate">{user.name}</Text>
+                    <Text size="sm" color="secondary" className="truncate">@{user.username}</Text>
+                    {user.email && (
+                      <Text size="sm" color="secondary" className="truncate mt-1">{user.email}</Text>
+                    )}
+                  </div>
+                </div>
+                
+                <div className="flex gap-2">
+                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${levelColorClass}`}>
+                    {levelName}
+                  </span>
+                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColorClass}`}>
+                    {statusName}
+                  </span>
+                </div>
+                
+                <Text size="sm" color="secondary">
+                  {formatDate(user.createdDate)}
+                </Text>
+                
+                <div className="flex flex-wrap gap-2 pt-2">
+                  {canEditUser(user) && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => onEdit(user)}
+                      className="flex-1 min-w-[80px]"
+                    >
+                      تعديل
+                    </Button>
+                  )}
+                  
+                  {canEditUser(user) && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => handleStatusClick(user)}
+                      className="flex-1 min-w-[100px]"
+                    >
+                      {user.status === 'active' ? 'إلغاء تفعيل' : 'تفعيل'}
+                    </Button>
+                  )}
+                  
+                  {canDeleteUser(user) && (
+                    <Button
+                      size="sm"
+                      variant="danger"
+                      onClick={() => handleDeleteClick(user)}
+                      className="flex-1 min-w-[80px]"
+                    >
+                      حذف
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
 
       {totalPages > 1 && (
         <div className="mt-6">