changes to sms packages and option to create user

resources/js/Pages/Admin/Users/Index.vue

@@ -3,7 +3,8 @@ import AdminLayout from "@/Layouts/AdminLayout.vue";
 import { useForm, Link } from "@inertiajs/vue3";
 import { ref, computed } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faMagnifyingGlass, faFloppyDisk } from "@fortawesome/free-solid-svg-icons";
+import { faMagnifyingGlass, faFloppyDisk, faPlus } from "@fortawesome/free-solid-svg-icons";
+import DialogModal from "@/Components/DialogModal.vue";
 
 const props = defineProps({
   users: Array,
@@ -65,6 +66,43 @@ const filteredUsers = computed(() => {
 });
 
 const anyDirty = computed(() => Object.values(forms).some((f) => f.dirty));
+
+// Create user modal
+const showCreateModal = ref(false);
+const createForm = useForm({
+  name: "",
+  email: "",
+  password: "",
+  password_confirmation: "",
+  roles: [],
+});
+
+function openCreateModal() {
+  createForm.reset();
+  createForm.clearErrors();
+  showCreateModal.value = true;
+}
+
+function closeCreateModal() {
+  showCreateModal.value = false;
+  createForm.reset();
+}
+
+function submitCreateUser() {
+  createForm.post(route("admin.users.store"), {
+    preserveScroll: true,
+    onSuccess: () => {
+      closeCreateModal();
+    },
+  });
+}
+
+function toggleCreateRole(roleId) {
+  const exists = createForm.roles.includes(roleId);
+  createForm.roles = exists
+    ? createForm.roles.filter((id) => id !== roleId)
+    : [...createForm.roles, roleId];
+}
 </script>
 
 <template>
@@ -127,6 +165,14 @@ const anyDirty = computed(() => Object.values(forms).some((f) => f.dirty));
             </div>
           </div>
           <div class="flex items-center gap-3">
+            <button
+              type="button"
+              @click="openCreateModal"
+              class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-medium bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-500"
+            >
+              <FontAwesomeIcon :icon="faPlus" class="w-4 h-4" />
+              Ustvari uporabnika
+            </button>
             <button
               type="button"
               @click="submitAll"
@@ -265,5 +311,107 @@ const anyDirty = computed(() => Object.values(forms).some((f) => f.dirty));
         </div>
       </div>
     </div>
+
+    <!-- Create User Modal -->
+    <DialogModal :show="showCreateModal" @close="closeCreateModal" max-width="2xl">
+      <template #title>Ustvari novega uporabnika</template>
+      <template #content>
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Ime</label>
+            <input
+              v-model="createForm.name"
+              type="text"
+              class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+              placeholder="Ime uporabnika"
+            />
+            <div v-if="createForm.errors.name" class="text-red-600 text-xs mt-1">
+              {{ createForm.errors.name }}
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">E-pošta</label>
+            <input
+              v-model="createForm.email"
+              type="email"
+              class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+              placeholder="uporabnik@example.com"
+            />
+            <div v-if="createForm.errors.email" class="text-red-600 text-xs mt-1">
+              {{ createForm.errors.email }}
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Geslo</label>
+            <input
+              v-model="createForm.password"
+              type="password"
+              class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+              placeholder="********"
+            />
+            <div v-if="createForm.errors.password" class="text-red-600 text-xs mt-1">
+              {{ createForm.errors.password }}
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Potrdi geslo</label>
+            <input
+              v-model="createForm.password_confirmation"
+              type="password"
+              class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+              placeholder="********"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">Vloge</label>
+            <div class="flex flex-wrap gap-2">
+              <label
+                v-for="role in props.roles"
+                :key="'create-role-' + role.id"
+                class="inline-flex items-center gap-2 px-3 py-2 rounded-md border cursor-pointer transition"
+                :class="
+                  createForm.roles.includes(role.id)
+                    ? 'bg-indigo-50 border-indigo-600 text-indigo-700'
+                    : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
+                "
+              >
+                <input
+                  type="checkbox"
+                  class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                  :checked="createForm.roles.includes(role.id)"
+                  @change="toggleCreateRole(role.id)"
+                />
+                <span class="text-sm font-medium">{{ role.name }}</span>
+              </label>
+            </div>
+            <div v-if="createForm.errors.roles" class="text-red-600 text-xs mt-1">
+              {{ createForm.errors.roles }}
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <button
+          type="button"
+          @click="closeCreateModal"
+          class="px-4 py-2 rounded-md text-sm font-medium bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
+        >
+          Prekliči
+        </button>
+        <button
+          type="button"
+          @click="submitCreateUser"
+          :disabled="createForm.processing"
+          class="ml-3 px-4 py-2 rounded-md text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed"
+        >
+          <span v-if="createForm.processing">Ustvarjanje...</span>
+          <span v-else>Ustvari</span>
+        </button>
+      </template>
+    </DialogModal>
   </AdminLayout>
 </template>