Add admin-managed user creation

resources/js/pages/admin/users/Index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
-import { FolderPlus, Shield, Users } from 'lucide-vue-next';
+import { Form, Head, Link } from '@inertiajs/vue3';
+import { FolderPlus, KeyRound, Shield, UserPlus, Users } from 'lucide-vue-next';
 import UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
 import Heading from '@/components/Heading.vue';
 import { Badge } from '@/components/ui/badge';
@@ -13,7 +13,7 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { index as adminUsers } from '@/routes/admin/users';
+import { create as createAdminUser, index as adminUsers } from '@/routes/admin/users';
 import type { AdminUsersPageProps, BreadcrumbItem } from '@/types';
 
 const props = defineProps<AdminUsersPageProps>();
@@ -40,10 +40,19 @@ const hasPermission = (actorId: number, permission: string) =>
                     description="Assign the global permissions that unlock platform-wide administration and project creation."
                 />
 
-                <Badge variant="outline" class="gap-1.5 px-3 py-1">
-                    <Users class="size-3.5" />
-                    Admin-only area
-                </Badge>
+                <div class="flex items-center gap-3">
+                    <Button as-child>
+                        <Link :href="createAdminUser()">
+                            <UserPlus class="size-4" />
+                            User create
+                        </Link>
+                    </Button>
+
+                    <Badge variant="outline" class="gap-1.5 px-3 py-1">
+                        <Users class="size-3.5" />
+                        Admin-only area
+                    </Badge>
+                </div>
             </div>
 
             <div
@@ -108,6 +117,14 @@ const hasPermission = (actorId: number, permission: string) =>
                                     </td>
                                     <td class="px-4 py-4">
                                         <div class="flex flex-wrap gap-2">
+                                            <Badge
+                                                v-if="user.must_change_password_on_next_login"
+                                                variant="outline"
+                                                class="gap-1.5"
+                                            >
+                                                <KeyRound class="size-3.5" />
+                                                Must change password
+                                            </Badge>
                                             <Badge
                                                 v-if="
                                                     hasPermission(