Updated client contract table and notification table, multiselect

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

@@ -1,6 +1,6 @@
 <script setup>
 import AdminLayout from "@/Layouts/AdminLayout.vue";
-import { useForm, Link } from "@inertiajs/vue3";
+import { useForm, Link, router } from "@inertiajs/vue3";
 import { ref, computed } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faMagnifyingGlass, faFloppyDisk, faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -103,6 +103,12 @@ function toggleCreateRole(roleId) {
     ? createForm.roles.filter((id) => id !== roleId)
     : [...createForm.roles, roleId];
 }
+
+function toggleUserActive(userId) {
+  router.patch(route("admin.users.toggle-active", { user: userId }), {}, {
+    preserveScroll: true,
+  });
+}
 </script>
 
 <template>
@@ -197,6 +203,9 @@ function toggleCreateRole(roleId) {
                 <th class="p-2 text-left font-medium text-[11px] uppercase tracking-wide">
                   Uporabnik
                 </th>
+                <th class="p-2 text-center font-medium text-[11px] uppercase tracking-wide">
+                  Status
+                </th>
                 <th
                   v-for="role in props.roles"
                   :key="role.id"
@@ -218,6 +227,7 @@ function toggleCreateRole(roleId) {
                 :class="[
                   'border-t border-slate-100',
                   idx % 2 === 1 ? 'bg-slate-50/40' : 'bg-white',
+                  !user.active && 'opacity-60',
                 ]"
               >
                 <td class="p-2 whitespace-nowrap align-top">
@@ -237,6 +247,19 @@ function toggleCreateRole(roleId) {
                     {{ user.email }}
                   </div>
                 </td>
+                <td class="p-2 text-center align-top">
+                  <button
+                    @click="toggleUserActive(user.id)"
+                    class="inline-flex items-center px-2 py-1 rounded text-xs font-medium transition"
+                    :class="
+                      user.active
+                        ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
+                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                    "
+                  >
+                    {{ user.active ? 'Aktiven' : 'Neaktiven' }}
+                  </button>
+                </td>
                 <td
                   v-for="role in props.roles"
                   :key="role.id"
@@ -269,7 +292,7 @@ function toggleCreateRole(roleId) {
               </tr>
               <tr v-if="!filteredUsers.length">
                 <td
-                  :colspan="props.roles.length + 2"
+                  :colspan="props.roles.length + 3"
                   class="p-6 text-center text-sm text-gray-500"
                 >
                   Ni rezultatov