@ozdao/martyrs 0.2.604 → 0.2.605

package/src/components/UploadImageMultiple/UploadImageMultiple.vue

@@ -13,7 +13,7 @@
           fill="rgb(var(--main))"
         />
         <span v-if="options.showText || options.showTitle" class="mn-t-medium  mn-b-medium d-block h3 t-black">{{ text.title }}</span>
-        <span v-if="options.showText" class="mn-b-small t-transp d-block ">{{ text.subtitle }}</span>
+        <span v-if="options.showText" class="mn-b-small opacity-50 d-block ">{{ text.subtitle }}</span>
         <span  v-if="options.showText"class="mn-b-small uppercase p-small fw-medium d-block">or</span>
         <button  v-if="options.showText" class="cursor-pointer mn-b-small br-2px br-main radius-extra pd-l-thin pd-r-thin  t-main">Browse Files</button>
         <span  v-if="options.showText" class="uppercase p-small fw-medium d-block ">Maximum size: 2MB</span>

package/src/jit/rules.js

@@ -153,6 +153,10 @@ export const rules = [
   // Size (общие перед специфичными — для правильного каскада CSS)
   [/^w-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `width: ${v};` : null; }],
   [/^h-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `height: ${v};` : null; }],
+  // w-clamp-20r-25r-100 → min-width: min(20rem, 100%); max-width: min(25rem, 100%)
+  // 3 значения: min, max, cap (ограничитель, обычно 100 = 100%)
+  [/^w-clamp-(.+?)-(.+?)-(.+)$/, (m, jit) => { const mn = resolveValue(m[1], jit); const mx = resolveValue(m[2], jit); const cap = resolveValue(m[3], jit); return mn && mx && cap ? `min-width: min(${mn}, ${cap}); max-width: min(${mx}, ${cap});` : null; }],
+  [/^h-clamp-(.+?)-(.+?)-(.+)$/, (m, jit) => { const mn = resolveValue(m[1], jit); const mx = resolveValue(m[2], jit); const cap = resolveValue(m[3], jit); return mn && mx && cap ? `min-height: min(${mn}, ${cap}); max-height: min(${mx}, ${cap});` : null; }],
   [/^w-min-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `min-width: ${v};` : null; }],
   [/^w-max-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `max-width: ${v};` : null; }],
   [/^h-min-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `min-height: ${v};` : null; }],

package/src/modules/TASKS.MD

@@ -11,9 +11,9 @@
 - Добавить фильтрацию по `featured: true/false`
 
 **Затронутые файлы**:
-- `/Users/magicofoz/Development/OZDAO/ozdao.dev/app/martyrs/src/modules/core/models/schemas/common.schema.js`
-- `/Users/magicofoz/Development/OZDAO/ozdao.dev/app/martyrs/src/modules/products/models/category.model.js`
-- `/Users/magicofoz/Development/OZDAO/ozdao.dev/app/martyrs/src/modules/products/controllers/categories.controller.js`
+- `/Users/magicofoz/Development/OZDAO/ozdao.com/app/martyrs/src/modules/core/models/schemas/common.schema.js`
+- `/Users/magicofoz/Development/OZDAO/ozdao.com/app/martyrs/src/modules/products/models/category.model.js`
+- `/Users/magicofoz/Development/OZDAO/ozdao.com/app/martyrs/src/modules/products/controllers/categories.controller.js`
 - Все компоненты фронтенда, использующие статус 'featured'
 
 ---
@@ -200,3 +200,16 @@ plugin.js регистрирует варианты из variants.js через
 
 ---
 
+### Chats: клиентский модуль и страница в бекофисе
+
+**Проблема**: Модуль chats существует только на сервере. Нет клиентского модуля, контекста и UI для просмотра чатов в бекофисе.
+
+**Решение**: Создать клиентский модуль `chats/client` с:
+1. Контекст `backoffice` — страница `/backoffice/chats` со списком всех чатов организации
+2. Список чатов с превью последнего сообщения, именем клиента, датой
+3. Просмотр отдельного чата с историей сообщений
+
+**Приоритет**: Средний — сейчас чаты работают только через API, нет UI для менеджеров
+
+---
+

package/src/modules/auth/auth.client.js

@@ -16,6 +16,7 @@ console.log(`[LOADING 36] Store imports completed in ${storesTime.duration.toFix
 import addRoutes from '@martyrs/src/modules/core/views/router/addRoutes.js';
 import { getAuthRoutes } from './views/router/auth.router.js';
 import { getUsersRoutes } from './views/router/users.router.js';
+import routerBackofficeUsers from './views/router/users.backoffice.router.js';
 
 // Middlewares
 import * as validationAuth from '@martyrs/src/modules/auth/views/middlewares/auth.validation.js';
@@ -44,10 +45,24 @@ function initializeAuth(app, store, router, options = {}) {
   i18nManager.register('auth', locales);
 
   const authRoute = getAuthRoutes(options);
-  const usersRoute = getUsersRoutes(options);
-
   addRoutes(router, { ...authRoute.config, parentName: authRoute.parentName });
-  addRoutes(router, { ...usersRoute.config, parentName: usersRoute.parentName });
+
+  // Users client context
+  if (!options.contexts || options.contexts.includes('client')) {
+    const usersRoute = getUsersRoutes(options);
+    addRoutes(router, { ...usersRoute.config, parentName: usersRoute.parentName });
+  }
+
+  // Users backoffice context
+  if (!options.contexts || options.contexts.includes('backoffice')) {
+    addRoutes(router, {
+      parentName: options.routeBackoffice || 'Backoffice Root',
+      basePath: 'users',
+      routes: routerBackofficeUsers,
+      routeNamePrefix: 'Backoffice',
+      meta: { context: 'backoffice' },
+    });
+  }
 
   store.addStore('auth', storeAuth);
   store.addStore('users', storeUsers);

package/src/modules/auth/controllers/routes/users.routes.js

@@ -41,4 +41,22 @@ export default (function (app, db, origins) {
     otp.dualVerify('phone')
   ], controller.updatePhone);
 
+  // Admin update (roles, status, profile)
+  app.put('/api/users/:_id/admin', [
+    authJwt.verifyToken(),
+    authJwt.isAdmin,
+  ], controller.adminUpdate);
+
+  // Roles list
+  app.get('/api/roles', [
+    authJwt.verifyToken(),
+  ], async (req, res) => {
+    try {
+      const roles = await db.role.find({});
+      res.status(200).send(roles);
+    } catch (err) {
+      res.status(500).send({ message: err });
+    }
+  });
+
 });

package/src/modules/auth/controllers/services/auth.service.js

@@ -82,7 +82,7 @@ const controllerFactory = db => {
         },
         process.env.SECRET_KEY,
         {
-          expiresIn: 864000,
+          expiresIn: 2592000,
         }
       );
       const authorities = user.roles.map(role => `ROLE_${role.name.toUpperCase()}`);
@@ -179,7 +179,7 @@ const controllerFactory = db => {
       },
       process.env.SECRET_KEY,
       {
-        expiresIn: 86400,
+        expiresIn: 2592000,
       }
     );
     res.status(200).send({
@@ -222,7 +222,7 @@ const controllerFactory = db => {
       });
 
       const token = jwt.sign({ _id: user._id, session_id: session._id }, process.env.SECRET_KEY, {
-        expiresIn: 86400,
+        expiresIn: 2592000,
       });
       const authorities = user.roles.map(role => `ROLE_${role.name.toUpperCase()}`);
       return res.status(200).send({

package/src/modules/auth/controllers/services/users.service.js

@@ -1,3 +1,4 @@
+import bcrypt from 'bcryptjs';
 import addMembersQuantity from '@martyrs/src/modules/organizations/controllers/utils/addMembersQuantity.js';
 import addUserStatusFields from '@martyrs/src/modules/organizations/controllers/utils/addUserStatusFields.js';
 import queryProcessorCore from '@martyrs/src/modules/core/controllers/utils/queryProcessor.js';
@@ -112,16 +113,19 @@ const controllerFactory = db => {
   const create = async (req, res) => {
     try {
       const newUser = {
-        phone: req.body.phone,
-        email: req.body.email,
         roles: req.body.roles ? req.body.roles : [],
       };
-      const user = await User.create(newUser);
+      if (req.body.phone) newUser.phone = req.body.phone;
+      if (req.body.email) newUser.email = req.body.email;
+      if (req.body.username) newUser.username = req.body.username;
+      if (req.body.password) newUser.password = bcrypt.hashSync(req.body.password, 8);
+      if (req.body.profile) newUser.profile = req.body.profile;
+      let user = await User.create(newUser);
       if (!user) {
         return res.status(404).send({ errorCode: 'USER_NOT_CREATED', message: 'User is not created.' });
       }
-      const { password, refreshToken, __v, ...safeUser } = user.toObject();
-      res.status(200).send(safeUser);
+      user = await User.findById(user._id).select('-password -refreshToken -__v').populate('roles');
+      res.status(200).send(user);
     } catch (err) {
       return res.status(500).send({ errorCode: 'INTERNAL_SERVER_ERROR', message: err });
     }
@@ -217,10 +221,35 @@ const controllerFactory = db => {
     }
   };
 
+  const adminUpdate = async (req, res) => {
+    try {
+      const { profile, username, status, roles } = req.body;
+      const updateData = {};
+      if (profile) updateData.profile = profile;
+      if (username !== undefined) updateData.username = username;
+      if (status) updateData.status = status;
+      if (roles) updateData.roles = roles.map(r => new ObjectId(r));
+
+      const user = await User.findOneAndUpdate(
+        { _id: req.params._id },
+        updateData,
+        { new: true }
+      ).select('-password -refreshToken -__v').populate('roles');
+      if (!user) {
+        return res.status(404).send({ errorCode: 'UPDATE_FAILED', message: 'User not found.' });
+      }
+      res.status(200).send(user);
+    } catch (err) {
+      console.error('adminUpdate error:', err);
+      return res.status(500).send({ errorCode: 'INTERNAL_SERVER_ERROR', message: err.message || err });
+    }
+  };
+
   return {
     read,
     create,
     update,
+    adminUpdate,
     updateEmail,
     updatePhone,
     getStats,

package/src/modules/auth/views/components/blocks/OtpDialog.vue

@@ -2,7 +2,7 @@
   <Popup
     :isPopupOpen="otpState.visible"
     @close-popup="cancelOtp"
-    class="bg-white w-min-20r w-max-30r w-max-100 radius-medium pd-medium"
+    class="bg-white w-clamp-20r-30r-100 radius-medium pd-medium"
   >
     <!-- Single mode -->
     <section v-if="otpState.mode !== 'dual'" class="t-center">
@@ -10,13 +10,13 @@
         {{ otpState.challenge?.type === 'email' ? 'Verify Email' : 'Verify Phone' }}
       </h3>
 
-      <p class="mn-b-big t-transp">
+      <p class="mn-b-big opacity-50">
         {{ otpState.challenge?.type === 'email'
           ? 'Enter the code sent to your email'
           : 'Enter the code sent to your phone' }}
       </p>
 
-      <p class="mn-b-small t-transp">{{ otpState.challenge?.identifier }}</p>
+      <p class="mn-b-small opacity-50">{{ otpState.challenge?.identifier }}</p>
 
       <div class="pos-relative mn-b-big cursor-text" @click="focusInput(0)">
         <input
@@ -49,7 +49,7 @@
       <h3 class="mn-b-medium">Verify Change</h3>
 
       <div v-for="(challenge, idx) in otpState.challenges" :key="idx" class="mn-b-big">
-        <p class="mn-b-thin t-transp">
+        <p class="mn-b-thin opacity-50">
           {{ challenge.label === 'old' ? 'Current' : 'New' }}
         </p>
         <p class="mn-b-small">{{ challenge.identifier }}</p>

package/src/modules/auth/views/components/blocks/PopupAuth.vue

@@ -9,7 +9,7 @@
     <div class="t-center">
       <img loading="lazy" :src="'/logo/logo.svg'" class="i-extra radius-small mn-b-medium">
       <h3 class="mn-b-medium">{{ authState.title || t('auth.popup.title') }}</h3>
-      <p class="mn-b-semi t-transp">{{ authState.subtitle || t('auth.popup.subtitle') }}</p>
+      <p class="mn-b-semi opacity-50">{{ authState.subtitle || t('auth.popup.subtitle') }}</p>
 
       <div class="flex-column flex gap-thin">
         <Button

package/src/modules/auth/views/components/blocks/SidebarUserCard.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="flex-shrink-0 w-100 br-t-1px br-grey"
+    :class="{
+      'pd-micro': !stateSidebar,
+      'pd-small': stateSidebar,
+    }"
+  >
+    <!-- Skeleton while loading -->
+    <Skeleton
+      v-if="loading"
+      :horizontal="true"
+      :structure="[
+        { block: 'avatar', size: 'small' },
+      ]"
+      class="radius-small pd-thin"
+    />
+
+    <!-- User card -->
+    <router-link
+      v-else-if="user?._id"
+      :to="`/backoffice/users/${user._id}`"
+      class="ease-quint-out flex w-100 radius-small cursor-pointer flex-nowrap"
+      :class="[
+        stateSidebar ? 'pd-thin flex-v-center' : 'w-100 flex-center',
+        theme === 'light' ? 'bg-light hover:bg-grey' : 'bg-dark hover:bg-grey'
+      ]"
+    >
+      <span class="aspect-1x1 flex-child-default w-max-big w-100 flex flex-center">
+        <img
+          v-if="user.profile?.photo"
+          :src="(FILE_SERVER_URL || '') + user.profile.photo"
+          class="radius-small bg-white object-fit-cover i-semi"
+        />
+        <PlaceholderUserpic
+          v-else
+          class="radius-small i-semi"
+        />
+      </span>
+
+      <div
+        v-if="stateSidebar"
+        class="flex-child-default mn-l-thin o-hidden"
+      >
+        <p class="fw-medium mn-b-micro t-truncate ws-nowrap">{{ user.profile?.name || 'Anonymous' }}</p>
+        <div class="flex flex-nowrap gap-micro">
+          <span
+            v-for="(role, index) in user.roles"
+            :key="index"
+            class="pd-thin radius-small p-small fw-semi bg-white ws-nowrap"
+          >
+            {{ role.icon }} {{ role.name }}
+          </span>
+        </div>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+
+  import Skeleton from '@martyrs/src/components/Skeleton/Skeleton.vue'
+  import PlaceholderUserpic from '@martyrs/src/modules/icons/placeholders/PlaceholderUserpic.vue'
+
+  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
+  import * as users from '@martyrs/src/modules/auth/views/store/users.js'
+
+  defineProps({
+    theme: {
+      type: String,
+      default: 'light'
+    },
+    stateSidebar: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const loading = ref(true)
+  const user = ref(null)
+
+  onMounted(async () => {
+    try {
+      if (auth.state.user?._id) {
+        await users.actions.read({ _id: auth.state.user._id })
+        user.value = users.state.current
+      }
+    } catch (err) {
+      console.error('Failed to load user:', err)
+    } finally {
+      loading.value = false
+    }
+  })
+</script>

package/src/modules/auth/views/components/pages/BackofficeUsers.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="pos-relative">
+    <SectionPageTitle
+      title="Users"
+      :actions="[{ method: openCreate, label: '+ Add User' }]"
+      class="pd-medium pd-b-zero"
+    />
+
+    <div class="w-100 pd-medium pos-relative">
+      <Feed
+        :search="true"
+        :showLoadMore="false"
+        :states="{
+          empty: {
+            title: 'No Users Found',
+            description: 'No users match your search criteria.'
+          }
+        }"
+        :store="{
+          read: (options) => users.actions.read(options),
+          state: users.state
+        }"
+        :options="{
+          limit: 20,
+          search: route.query.search
+        }"
+        v-slot="{ items }"
+        class="cols-1 pos-relative w-100 gap-thin"
+      >
+        <div
+          v-for="item in items"
+          :key="item._id"
+          @click="openEdit(item)"
+          class="pd-small bg-light radius-medium cursor-pointer hover-bg-white h-4r"
+        >
+          <CardUser
+            :user="item"
+            :photo="item.profile?.photo"
+            :name="item.profile?.name || 'Anonymous'"
+            :email="item.email || item.phone || item.username || '—'"
+            :role="item.roles"
+            :status="item.status"
+            :statusClass="item.status === 'active' ? 'bg-main-transp-20 t-main' : 'bg-red-transp-20 t-red'"
+          />
+        </div>
+      </Feed>
+    </div>
+
+    <!-- Create User Popup -->
+    <Popup
+      :isPopupOpen="isCreateOpen"
+      @close-popup="closeCreate"
+      title="Create User"
+      class="w-m-50r mobile:h-100 bg-white mobile:radius-zero radius-medium pd-medium"
+    >
+      <div class="for-transition w-100">
+        <Field
+          v-model:field="createData.email"
+          label="Email"
+          placeholder="user@example.com"
+          class="mn-b-thin w-100 bg-light pd-medium radius-small"
+        />
+
+        <Field
+          v-model:field="createData.phone"
+          label="Phone"
+          placeholder="+66..."
+          class="mn-b-thin w-100 bg-light pd-medium radius-small"
+        />
+
+        <Field
+          v-model:field="createData.username"
+          label="@"
+          placeholder="username"
+          class="mn-b-thin w-100 bg-light pd-medium radius-small"
+        />
+
+        <Field
+          v-model:field="createData.profile.name"
+          label="Name"
+          placeholder="Full name"
+          class="mn-b-thin w-100 bg-light pd-medium radius-small"
+        />
+
+        <Field
+          v-model:field="createData.password"
+          label="Password"
+          placeholder="Password"
+          type="password"
+          class="mn-b-semi w-100 bg-light pd-medium radius-small"
+        />
+
+        <h4 class="mn-b-small">Roles</h4>
+
+        <div class="flex flex-wrap gap-thin mn-b-semi">
+          <div
+            v-for="role in availableRoles"
+            :key="role._id"
+            @click="toggleCreateRole(role)"
+            class="pd-l-small pd-r-small pd-t-thin pd-b-thin radius-small cursor-pointer fw-medium capitalize"
+            :class="createData.roles.includes(role._id) ? 'bg-second t-white' : 'bg-light t-dark'"
+          >
+            {{ role.name }}
+          </div>
+        </div>
+
+        <Button
+          :submit="createUser"
+          :callback="closeCreate"
+          class="mn-b-thin bg-main w-100"
+        >
+          Create
+        </Button>
+      </div>
+    </Popup>
+
+    <!-- Edit User Popup -->
+    <Popup
+      :isPopupOpen="isPopupOpen"
+      @close-popup="closeEdit"
+      title="Edit User"
+      class="w-m-50r mobile:h-100 bg-white mobile:radius-zero radius-medium pd-medium"
+    >
+      <div v-if="editData" class="for-transition w-100">
+        <div class="mn-b-semi">
+          <div class="mn-b-thin radius-small w-100 h-10r bg-light flex-center flex-column flex">
+            <img
+              v-if="editData.profile?.photo"
+              :src="(FILE_SERVER_URL || '') + editData.profile.photo"
+              class="radius-extra aspect-1x1 object-fit-cover h-4r w-4r mn-b-thin"
+            />
+            <PlaceholderUserpic
+              v-else
+              class="radius-extra h-4r w-4r mn-b-thin"
+            />
+            <p class="p-small opacity-50">{{ editData.email || editData.phone || '' }}</p>
+          </div>
+        </div>
+
+        <h4 class="mn-b-small">Profile</h4>
+
+        <Field
+          v-model:field="editData.username"
+          label="@"
+          placeholder="Not specified"
+          class="mn-b-thin w-100 bg-light pd-medium radius-small"
+        />
+
+        <Field
+          v-model:field="editData.profile.name"
+          label="Name"
+          placeholder="Not specified"
+          class="mn-b-thin bg-light pd-medium radius-small"
+        />
+
+        <Field
+          v-model:field="editData.profile.description"
+          label="Description"
+          placeholder="Not specified"
+          class="mn-b-semi bg-light pd-medium radius-small"
+        />
+
+        <h4 class="mn-b-small">Status</h4>
+
+        <Select
+          v-model:select="editData.status"
+          :options="statusOptions"
+          placeholder="Select status"
+          class="mn-b-semi bg-light pd-medium radius-small"
+        />
+
+        <h4 class="mn-b-small">Roles</h4>
+
+        <div class="flex flex-wrap gap-thin mn-b-semi">
+          <div
+            v-for="role in availableRoles"
+            :key="role._id"
+            @click="toggleRole(role)"
+            class="pd-l-small pd-r-small pd-t-thin pd-b-thin radius-small cursor-pointer fw-medium capitalize"
+            :class="isRoleSelected(role) ? 'bg-second t-white' : 'bg-light t-dark'"
+          >
+            {{ role.name }}
+          </div>
+        </div>
+
+        <Button
+          :submit="saveUser"
+          :callback="closeEdit"
+          class="mn-b-thin bg-main w-100"
+        >
+          Save
+        </Button>
+      </div>
+    </Popup>
+  </div>
+</template>
+
+<script setup>
+  import { ref, reactive, onMounted } from 'vue'
+
+  import { useRoute } from 'vue-router'
+
+  import Feed from '@martyrs/src/components/Feed/Feed.vue'
+  import Field from '@martyrs/src/components/Field/Field.vue'
+  import Button from '@martyrs/src/components/Button/Button.vue'
+  import Select from '@martyrs/src/components/Select/Select.vue'
+  import Popup from '@martyrs/src/components/Popup/Popup.vue'
+  import SectionPageTitle from '@martyrs/src/modules/core/views/components/sections/SectionPageTitle.vue'
+  import CardUser from '@martyrs/src/modules/core/views/components/blocks/CardUser.vue'
+  import PlaceholderUserpic from '@martyrs/src/modules/icons/placeholders/PlaceholderUserpic.vue'
+
+  import * as users from '@martyrs/src/modules/auth/views/store/users.js'
+  import $axios from '@martyrs/src/modules/core/views/utils/axios-instance.js'
+
+  const route = useRoute()
+
+  const isPopupOpen = ref(false)
+  const editData = ref(null)
+  const editSourceItem = ref(null)
+  const availableRoles = ref([])
+
+  const isCreateOpen = ref(false)
+  const createData = reactive({
+    email: '',
+    phone: '',
+    username: '',
+    password: '',
+    roles: [],
+    profile: {
+      name: '',
+    },
+  })
+
+  const openCreate = () => {
+    createData.email = ''
+    createData.phone = ''
+    createData.username = ''
+    createData.password = ''
+    createData.roles = []
+    createData.profile.name = ''
+    isCreateOpen.value = true
+  }
+
+  const closeCreate = () => {
+    isCreateOpen.value = false
+  }
+
+  const toggleCreateRole = (role) => {
+    const idx = createData.roles.indexOf(role._id)
+    if (idx > -1) {
+      createData.roles.splice(idx, 1)
+    } else {
+      createData.roles.push(role._id)
+    }
+  }
+
+  const createUser = async () => {
+    const payload = {}
+    if (createData.email) payload.email = createData.email
+    if (createData.phone) payload.phone = createData.phone
+    if (createData.username) payload.username = createData.username
+    if (createData.password) payload.password = createData.password
+    if (createData.roles.length) payload.roles = createData.roles
+    if (createData.profile.name) payload.profile = { name: createData.profile.name }
+
+    const result = await users.actions.create(payload)
+    if (result) {
+      users.state.all.unshift(result)
+    }
+  }
+
+  const statusOptions = ['active', 'banned', 'inactive']
+
+  const openEdit = (user) => {
+    editSourceItem.value = user
+    editData.value = {
+      _id: user._id,
+      username: user.username || '',
+      email: user.email || '',
+      phone: user.phone || '',
+      status: user.status || 'active',
+      roles: (user.roles || []).map(r => r._id || r),
+      profile: {
+        name: user.profile?.name || '',
+        description: user.profile?.description || '',
+        photo: user.profile?.photo || '',
+      },
+    }
+    isPopupOpen.value = true
+  }
+
+  const closeEdit = () => {
+    isPopupOpen.value = false
+    editData.value = null
+    editSourceItem.value = null
+  }
+
+  const toggleRole = (role) => {
+    const idx = editData.value.roles.indexOf(role._id)
+    if (idx > -1) {
+      editData.value.roles.splice(idx, 1)
+    } else {
+      editData.value.roles.push(role._id)
+    }
+  }
+
+  const isRoleSelected = (role) => {
+    return editData.value?.roles.includes(role._id)
+  }
+
+  const saveUser = async () => {
+    if (!editData.value) return
+    const { data } = await $axios.put(`/api/users/${editData.value._id}/admin`, {
+      profile: editData.value.profile,
+      username: editData.value.username,
+      status: editData.value.status,
+      roles: editData.value.roles,
+    })
+
+    // Update list item from server response
+    if (data && editSourceItem.value) {
+      editSourceItem.value.profile = data.profile || editSourceItem.value.profile
+      editSourceItem.value.username = data.username
+      editSourceItem.value.status = data.status
+      editSourceItem.value.roles = data.roles || []
+    }
+  }
+
+  onMounted(async () => {
+    try {
+      const { data } = await $axios.get('/api/roles')
+      availableRoles.value = data
+    } catch (err) {
+      console.error('Failed to load roles:', err)
+    }
+  })
+</script>