{"file":"index-Bd_e7zBi.js","mappings":"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","names":["$t","_ssrRenderClass","_ssrInterpolate","_ssrRenderList","_push","_parent","_createTextVNode","_toDisplayString","_ssrRenderAttr","_ssrIncludeBooleanAttr","_ssrLooseContain","_ssrLooseEqual"],"sources":["../../../../pages/users/[id]/index.vue"],"sourcesContent":["<template>\n  <div>\n    <!-- Loading State -->\n    <div v-if=\"loading\" class=\"flex items-center justify-center py-20\">\n      <div class=\"flex flex-col items-center gap-3\">\n        <svg class=\"w-8 h-8 text-indigo-400 animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n          <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\" />\n        </svg>\n        <p class=\"text-slate-400 text-sm\">{{ $t('users.details.loading') }}</p>\n      </div>\n    </div>\n\n    <!-- Error State -->\n    <div v-else-if=\"error\" class=\"flex flex-col items-center justify-center py-20 text-center\">\n      <svg class=\"w-12 h-12 text-red-500 mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z\" />\n      </svg>\n      <p class=\"text-red-400 text-sm mb-2\">{{ error }}</p>\n      <button @click=\"fetchUser\" class=\"px-4 py-2 text-sm bg-indigo-600/20 text-indigo-300 hover:bg-indigo-600/30 rounded-lg transition\">\n        {{ $t('users.details.retry') }}\n      </button>\n    </div>\n\n    <!-- Content -->\n    <template v-else-if=\"user\">\n      <!-- Header -->\n      <div class=\"mb-8\">\n        <button\n          @click=\"goBack\"\n          class=\"inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-white transition mb-4\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n          </svg>\n          {{ $t('users.details.back') }}\n        </button>\n\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-4\">\n            <div\n              class=\"w-12 h-12 rounded-xl flex items-center justify-center text-lg font-bold text-white\"\n              :class=\"getInitialsColor(userDisplayName)\"\n            >\n              {{ getInitials(userDisplayName) }}\n            </div>\n            <div>\n              <div class=\"flex items-center gap-3\">\n                <h1 class=\"text-2xl font-bold text-white\">{{ userDisplayName }}</h1>\n                <span\n                  class=\"inline-flex items-center px-3 py-1 rounded-full text-xs font-medium\"\n                  :class=\"statusBadgeClass\"\n                >\n                  <span class=\"w-1.5 h-1.5 rounded-full mr-1.5\" :class=\"statusDotClass\"></span>\n                  {{ statusLabel }}\n                </span>\n                <span\n                  v-if=\"user.is_vip\"\n                  class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-500/10 text-yellow-400\"\n                >\n                  <svg class=\"w-3 h-3 mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" />\n                  </svg>\n                  VIP\n                </span>\n              </div>\n              <p class=\"text-sm text-slate-400 mt-0.5\">\n                {{ user.email }}\n                <span v-if=\"user.person?.phone\" class=\"ml-2 text-slate-500\">· {{ user.person.phone }}</span>\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-3\">\n            <button\n              v-if=\"hasEditPermission\"\n              @click=\"openEditModal\"\n              class=\"inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium bg-indigo-600/20 text-indigo-300 hover:bg-indigo-600/30 rounded-lg transition\"\n            >\n              <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\" />\n              </svg>\n              {{ $t('users.details.edit') }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Tab Navigation -->\n      <div class=\"border-b border-slate-700 mb-6\">\n        <nav class=\"flex gap-6\">\n          <button\n            v-for=\"tab in tabs\"\n            :key=\"tab.key\"\n            @click=\"activeTab = tab.key\"\n            class=\"pb-3 text-sm font-medium transition border-b-2 -mb-px\"\n            :class=\"activeTab === tab.key\n              ? 'text-indigo-400 border-indigo-400'\n              : 'text-slate-400 border-transparent hover:text-slate-300'\"\n          >\n            {{ $t(tab.label) }}\n          </button>\n        </nav>\n      </div>\n\n      <!-- ============================================================ -->\n      <!-- Profile Tab                                                   -->\n      <!-- ============================================================ -->\n      <div v-if=\"activeTab === 'profile'\" class=\"space-y-6\">\n        <!-- User Account Info Card -->\n        <div class=\"bg-slate-800/50 border border-slate-700 rounded-xl p-6\">\n          <div class=\"flex items-center gap-3 mb-5\">\n            <div class=\"p-2 rounded-lg bg-indigo-500/10 text-indigo-400\">\n              <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n              </svg>\n            </div>\n            <h3 class=\"text-base font-semibold text-white\">{{ $t('users.details.account_info') }}</h3>\n          </div>\n\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.user_id') }}</label>\n              <p class=\"text-sm text-white font-mono\">{{ user.id }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.email') }}</label>\n              <p class=\"text-sm text-white\">{{ user.email }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.role') }}</label>\n              <span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\" :class=\"roleBadgeClass(user.role)\">\n                {{ roleLabel(user.role) }}\n              </span>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.registration_date') }}</label>\n              <p class=\"text-sm text-white\">{{ formatDate(user.created_at) }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.last_login') }}</label>\n              <p class=\"text-sm text-white\">{{ formatDate(user.last_login_at) || '—' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.ui_mode') }}</label>\n              <p class=\"text-sm text-white capitalize\">{{ user.ui_mode || 'personal' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.language') }}</label>\n              <p class=\"text-sm text-white uppercase\">{{ user.preferred_language || '—' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.region') }}</label>\n              <p class=\"text-sm text-white\">{{ user.region_code || '—' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.currency') }}</label>\n              <p class=\"text-sm text-white\">{{ user.preferred_currency || '—' }}</p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Subscription Info Card -->\n        <div class=\"bg-slate-800/50 border border-slate-700 rounded-xl p-6\">\n          <div class=\"flex items-center gap-3 mb-5\">\n            <div class=\"p-2 rounded-lg bg-emerald-500/10 text-emerald-400\">\n              <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n              </svg>\n            </div>\n            <h3 class=\"text-base font-semibold text-white\">{{ $t('users.details.subscription_info') }}</h3>\n          </div>\n\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.package') }}</label>\n              <span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\" :class=\"planBadgeClass(user.subscription_plan)\">\n                {{ user.subscription_plan || '—' }}\n              </span>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.subscription_expires') }}</label>\n              <p class=\"text-sm text-white\">{{ formatDate(user.subscription_expires_at) || '—' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.scope_level') }}</label>\n              <p class=\"text-sm text-white\">{{ user.scope_level || 'individual' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.max_vehicles') }}</label>\n              <p class=\"text-sm text-white\">{{ user.max_vehicles }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.max_garages') }}</label>\n              <p class=\"text-sm text-white\">{{ user.max_garages }}</p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Person Details Card (if exists) -->\n        <div v-if=\"user.person\" class=\"bg-slate-800/50 border border-slate-700 rounded-xl p-6\">\n          <div class=\"flex items-center gap-3 mb-5\">\n            <div class=\"p-2 rounded-lg bg-cyan-500/10 text-cyan-400\">\n              <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n              </svg>\n            </div>\n            <h3 class=\"text-base font-semibold text-white\">{{ $t('users.details.personal_info') }}</h3>\n          </div>\n\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.last_name') }}</label>\n              <p class=\"text-sm text-white\">{{ user.person.last_name || '—' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.first_name') }}</label>\n              <p class=\"text-sm text-white\">{{ user.person.first_name || '—' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.phone') }}</label>\n              <p class=\"text-sm text-white\">{{ user.person.phone || '—' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.birth_place') }}</label>\n              <p class=\"text-sm text-white\">{{ user.person.birth_place || '—' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.birth_date') }}</label>\n              <p class=\"text-sm text-white\">{{ formatDate(user.person.birth_date) || '—' }}</p>\n            </div>\n            <div>\n              <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.mothers_name') }}</label>\n              <p class=\"text-sm text-white\">{{ [user.person.mothers_last_name, user.person.mothers_first_name].filter(Boolean).join(' ') || '—' }}</p>\n            </div>\n          </div>\n\n          <!-- Address sub-card -->\n          <div v-if=\"user.person.address\" class=\"mt-6 pt-6 border-t border-slate-700\">\n            <h4 class=\"text-sm font-semibold text-slate-300 mb-3\">{{ $t('users.details.address') }}</h4>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n              <div>\n                <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.zip') }}</label>\n                <p class=\"text-sm text-white\">{{ user.person.address.address_zip || '—' }}</p>\n              </div>\n              <div>\n                <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.city') }}</label>\n                <p class=\"text-sm text-white\">{{ user.person.address.address_city || '—' }}</p>\n              </div>\n              <div>\n                <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.street') }}</label>\n                <p class=\"text-sm text-white\">{{ [user.person.address.address_street_type, user.person.address.address_street_name].filter(Boolean).join(' ') || '—' }}</p>\n              </div>\n              <div>\n                <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('users.details.house_number') }}</label>\n                <p class=\"text-sm text-white\">{{ user.person.address.address_house_number || '—' }}</p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- No Person record -->\n        <div v-else class=\"bg-slate-800/50 border border-slate-700 rounded-xl p-6 text-center\">\n          <svg class=\"w-10 h-10 text-slate-600 mx-auto mb-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n          </svg>\n          <p class=\"text-sm text-slate-400\">{{ $t('users.details.no_person_record') }}</p>\n        </div>\n      </div>\n\n      <!-- ============================================================ -->\n      <!-- Memberships Tab                                               -->\n      <!-- ============================================================ -->\n      <div v-if=\"activeTab === 'memberships'\" class=\"space-y-6\">\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"p-2 rounded-lg bg-purple-500/10 text-purple-400\">\n              <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2M10 8.5a.5.5 0 11-1 0 .5.5 0 011 0zm5 5a.5.5 0 11-1 0 .5.5 0 011 0z\" />\n              </svg>\n            </div>\n            <div>\n              <h3 class=\"text-base font-semibold text-white\">{{ $t('users.details.memberships') }}</h3>\n              <p class=\"text-xs text-slate-400 mt-0.5\">{{ $t('users.details.memberships_count', { count: memberships.length }) }}</p>\n            </div>\n          </div>\n        </div>\n\n        <div v-if=\"membershipsLoading\" class=\"flex items-center justify-center py-12\">\n          <svg class=\"w-6 h-6 text-indigo-400 animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\" />\n          </svg>\n        </div>\n\n        <div v-else-if=\"memberships.length === 0\" class=\"bg-slate-800/50 border border-slate-700 rounded-xl p-12 text-center\">\n          <svg class=\"w-10 h-10 text-slate-600 mx-auto mb-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z\" />\n          </svg>\n          <p class=\"text-sm text-slate-400\">{{ $t('users.details.no_memberships') }}</p>\n        </div>\n\n        <div v-else class=\"bg-slate-800/50 border border-slate-700 rounded-xl overflow-hidden\">\n          <div class=\"overflow-x-auto\">\n            <table class=\"w-full text-sm\">\n              <thead>\n                <tr class=\"border-b border-slate-700\">\n                  <th class=\"text-left px-4 py-3 text-xs font-medium text-slate-400 uppercase tracking-wider\">{{ $t('users.details.org_name') }}</th>\n                  <th class=\"text-left px-4 py-3 text-xs font-medium text-slate-400 uppercase tracking-wider\">{{ $t('users.details.org_role') }}</th>\n                  <th class=\"text-left px-4 py-3 text-xs font-medium text-slate-400 uppercase tracking-wider\">{{ $t('users.details.member_status') }}</th>\n                  <th class=\"text-left px-4 py-3 text-xs font-medium text-slate-400 uppercase tracking-wider\">{{ $t('users.details.joined_at') }}</th>\n                  <th class=\"text-left px-4 py-3 text-xs font-medium text-slate-400 uppercase tracking-wider\">{{ $t('users.details.verified') }}</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr v-for=\"m in memberships\" :key=\"m.id\" class=\"border-b border-slate-700/50 last:border-b-0 hover:bg-slate-700/30 transition\">\n                  <td class=\"px-4 py-3\">\n                    <NuxtLink\n                      :to=\"'/garages/' + m.organization_id\"\n                      class=\"text-sm font-medium text-white hover:text-indigo-400 hover:underline transition-colors\"\n                    >\n                      {{ m.organization_display_name || m.organization_name }}\n                    </NuxtLink>\n                  </td>\n                  <td class=\"px-4 py-3\">\n                    <span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium\" :class=\"roleBadgeClass(m.role)\">\n                      {{ orgRoleLabel(m.role) }}\n                    </span>\n                  </td>\n                  <td class=\"px-4 py-3\">\n                    <span class=\"inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium\" :class=\"memberStatusBadgeClass(m.status)\">\n                      <span class=\"w-1.5 h-1.5 rounded-full\" :class=\"memberStatusDotClass(m.status)\"></span>\n                      {{ memberStatusLabel(m.status) }}\n                    </span>\n                  </td>\n                  <td class=\"px-4 py-3 text-slate-300 text-xs\">{{ formatDate(m.joined_at) || '—' }}</td>\n                  <td class=\"px-4 py-3\">\n                    <span v-if=\"m.is_verified\" class=\"inline-flex items-center gap-1 text-xs text-emerald-400\">\n                      <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n                      </svg>\n                      {{ $t('users.details.verified_yes') }}\n                    </span>\n                    <span v-else class=\"text-xs text-slate-500\">{{ $t('users.details.verified_no') }}</span>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n\n      <!-- ============================================================ -->\n      <!-- Edit Modal                                                    -->\n      <!-- ============================================================ -->\n      <div\n        v-if=\"showEditModal\"\n        class=\"fixed inset-0 z-50 flex items-center justify-center p-4\"\n      >\n        <!-- Backdrop -->\n        <div class=\"absolute inset-0 bg-black/60 backdrop-blur-sm\" @click=\"closeEditModal\"></div>\n\n        <!-- Modal -->\n        <div class=\"relative w-full max-w-2xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl max-h-[90vh] overflow-hidden flex flex-col\">\n          <!-- Header -->\n          <div class=\"px-6 py-4 border-b border-slate-700 flex items-center justify-between flex-shrink-0\">\n            <h3 class=\"text-lg font-semibold text-white\">{{ $t('users.details.edit_user') }}</h3>\n            <button @click=\"closeEditModal\" class=\"p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition\">\n              <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n\n          <!-- Scrollable Body -->\n          <div class=\"flex-1 overflow-y-auto p-6 space-y-5\">\n            <!-- Account Fields -->\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <div>\n                <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.email') }}</label>\n                <input\n                  v-model=\"editForm.email\"\n                  type=\"email\"\n                  class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                />\n              </div>\n              <div>\n                <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.preferred_language') }}</label>\n                <select\n                  v-model=\"editForm.preferred_language\"\n                  class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                >\n                  <option value=\"hu\">HU</option>\n                  <option value=\"en\">EN</option>\n                  <option value=\"de\">DE</option>\n                  <option value=\"ro\">RO</option>\n                </select>\n              </div>\n            </div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <div>\n                <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.region') }}</label>\n                <input\n                  v-model=\"editForm.region_code\"\n                  type=\"text\"\n                  maxlength=\"5\"\n                  class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                />\n              </div>\n              <div>\n                <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.currency') }}</label>\n                <input\n                  v-model=\"editForm.preferred_currency\"\n                  type=\"text\"\n                  maxlength=\"3\"\n                  class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                />\n              </div>\n            </div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <div>\n                <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.package') }}</label>\n                <select\n                  v-model=\"editForm.subscription_plan\"\n                  class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                >\n                  <option value=\"FREE\">FREE</option>\n                  <option value=\"PREMIUM\">PREMIUM</option>\n                  <option value=\"ENTERPRISE\">ENTERPRISE</option>\n                </select>\n              </div>\n              <div>\n                <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.subscription_expires') }}</label>\n                <input\n                  v-model=\"editForm.subscription_expires_at\"\n                  type=\"datetime-local\"\n                  class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                />\n              </div>\n            </div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <div>\n                <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.scope_level') }}</label>\n                <select\n                  v-model=\"editForm.scope_level\"\n                  class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                >\n                  <option value=\"individual\">individual</option>\n                  <option value=\"organization\">organization</option>\n                  <option value=\"group\">group</option>\n                </select>\n              </div>\n              <div>\n                <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.scope_id') }}</label>\n                <input\n                  v-model=\"editForm.scope_id\"\n                  type=\"text\"\n                  class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                />\n              </div>\n            </div>\n\n            <div class=\"flex items-center gap-6 pt-2\">\n              <label class=\"flex items-center gap-2 cursor-pointer\">\n                <input\n                  v-model=\"editForm.is_active\"\n                  type=\"checkbox\"\n                  class=\"rounded border-slate-600 bg-slate-700 text-indigo-600 focus:ring-indigo-500/50\"\n                />\n                <span class=\"text-sm text-slate-300\">{{ $t('users.details.is_active') }}</span>\n              </label>\n              <label class=\"flex items-center gap-2 cursor-pointer\">\n                <input\n                  v-model=\"editForm.is_vip\"\n                  type=\"checkbox\"\n                  class=\"rounded border-slate-600 bg-slate-700 text-indigo-600 focus:ring-indigo-500/50\"\n                />\n                <span class=\"text-sm text-slate-300\">{{ $t('users.details.is_vip') }}</span>\n              </label>\n            </div>\n\n            <!-- Person Fields -->\n            <div class=\"border-t border-slate-700 pt-5\">\n              <h4 class=\"text-sm font-semibold text-white mb-4\">{{ $t('users.details.personal_info') }}</h4>\n              <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                <div>\n                  <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.last_name') }}</label>\n                  <input\n                    v-model=\"editForm.person_last_name\"\n                    type=\"text\"\n                    class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                  />\n                </div>\n                <div>\n                  <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.first_name') }}</label>\n                  <input\n                    v-model=\"editForm.person_first_name\"\n                    type=\"text\"\n                    class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                  />\n                </div>\n                <div>\n                  <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.phone') }}</label>\n                  <input\n                    v-model=\"editForm.person_phone\"\n                    type=\"text\"\n                    class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                  />\n                </div>\n                <div>\n                  <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.mothers_name') }}</label>\n                  <input\n                    v-model=\"editForm.person_mothers_last_name\"\n                    type=\"text\"\n                    placeholder=\"Last name\"\n                    class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                  />\n                </div>\n                <div>\n                  <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.mothers_first_name') }}</label>\n                  <input\n                    v-model=\"editForm.person_mothers_first_name\"\n                    type=\"text\"\n                    placeholder=\"First name\"\n                    class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                  />\n                </div>\n                <div>\n                  <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.birth_place') }}</label>\n                  <input\n                    v-model=\"editForm.person_birth_place\"\n                    type=\"text\"\n                    class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                  />\n                </div>\n                <div>\n                  <label class=\"block text-xs font-medium text-slate-400 mb-1.5\">{{ $t('users.details.birth_date') }}</label>\n                  <input\n                    v-model=\"editForm.person_birth_date\"\n                    type=\"date\"\n                    class=\"w-full px-3 py-2 text-sm bg-slate-700/50 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Footer -->\n          <div class=\"px-6 py-4 border-t border-slate-700 flex items-center justify-end gap-3 flex-shrink-0\">\n            <button\n              @click=\"closeEditModal\"\n              class=\"px-4 py-2 text-sm font-medium text-slate-300 hover:text-white bg-slate-700/50 hover:bg-slate-700 rounded-lg transition\"\n            >\n              {{ $t('users.details.cancel') }}\n            </button>\n            <button\n              @click=\"saveEdit\"\n              :disabled=\"saving\"\n              class=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-500 rounded-lg transition disabled:opacity-50\"\n            >\n              <svg v-if=\"saving\" class=\"w-4 h-4 animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\" />\n              </svg>\n              {{ saving ? $t('users.details.saving') : $t('users.details.save') }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- ============================================================ -->\n      <!-- Notification Toast                                             -->\n      <!-- ============================================================ -->\n      <div\n        v-if=\"notification.show\"\n        class=\"fixed bottom-6 right-6 z-50 px-5 py-3 rounded-xl shadow-2xl text-sm font-medium transition-all\"\n        :class=\"notification.type === 'success' ? 'bg-emerald-600 text-white' : 'bg-red-600 text-white'\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <svg v-if=\"notification.type === 'success'\" class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n          </svg>\n          <svg v-else class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n          </svg>\n          {{ notification.message }}\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue'\nimport { useRoute, useRouter } from 'vue-router'\nimport { useAuthStore } from '~/stores/auth'\n\nconst route = useRoute()\nconst router = useRouter()\nconst auth = useAuthStore()\n\nconst userId = route.params.id as string\n\n// State\nconst loading = ref(true)\nconst error = ref<string | null>(null)\nconst user = ref<any>(null)\nconst memberships = ref<any[]>([])\nconst membershipsLoading = ref(false)\nconst activeTab = ref('profile')\n\n// Edit Modal\nconst showEditModal = ref(false)\nconst saving = ref(false)\nconst editForm = ref({\n  email: '',\n  preferred_language: '',\n  region_code: '',\n  preferred_currency: '',\n  subscription_plan: '',\n  subscription_expires_at: '',\n  scope_level: '',\n  scope_id: '',\n  is_active: true,\n  is_vip: false,\n  person_last_name: '',\n  person_first_name: '',\n  person_phone: '',\n  person_mothers_last_name: '',\n  person_mothers_first_name: '',\n  person_birth_place: '',\n  person_birth_date: '',\n})\n\n// Notification\nconst notification = ref({ show: false, type: 'success' as 'success' | 'error', message: '' })\n\n// Tab definitions\nconst tabs = [\n  { key: 'profile', label: 'users.details.profile_tab' },\n  { key: 'memberships', label: 'users.details.memberships_tab' },\n]\n\n// Computed\nconst userDisplayName = computed(() => {\n  if (!user.value) return ''\n  const p = user.value.person\n  if (p?.last_name || p?.first_name) {\n    return [p.last_name, p.first_name].filter(Boolean).join(' ')\n  }\n  return user.value.email || 'User #' + user.value.id\n})\n\nconst statusLabel = computed(() => {\n  if (!user.value) return ''\n  const map: Record<string, string> = {\n    active: 'Active',\n    inactive: 'Inactive',\n    deleted: 'Deleted',\n    banned: 'Banned',\n  }\n  return map[user.value.status?.toLowerCase()] || user.value.status || 'Active'\n})\n\nconst statusBadgeClass = computed(() => {\n  if (!user.value) return ''\n  const map: Record<string, string> = {\n    active: 'bg-emerald-500/10 text-emerald-400',\n    inactive: 'bg-slate-500/10 text-slate-400',\n    deleted: 'bg-red-500/10 text-red-400',\n    banned: 'bg-red-500/10 text-red-400',\n  }\n  return map[user.value.status?.toLowerCase()] || 'bg-emerald-500/10 text-emerald-400'\n})\n\nconst statusDotClass = computed(() => {\n  if (!user.value) return ''\n  const map: Record<string, string> = {\n    active: 'bg-emerald-400',\n    inactive: 'bg-slate-400',\n    deleted: 'bg-red-400',\n    banned: 'bg-red-400',\n  }\n  return map[user.value.status?.toLowerCase()] || 'bg-emerald-400'\n})\n\nconst hasEditPermission = computed(() => {\n  if (auth.isAdmin) return true\n  return !!auth.user?.system_capabilities?.['users:edit']\n})\n\n// API calls\nasync function fetchUser() {\n  loading.value = true\n  error.value = null\n  try {\n    const tokenCookie = useCookie('access_token')\n    const token = (tokenCookie.value || auth.token || '').trim()\n    const headers: Record<string, string> = {\n      'Authorization': `Bearer ${token}`,\n      'Content-Type': 'application/json',\n    }\n\n    const res = await fetch(`/api/v1/admin/users/${userId}`, { headers })\n    if (!res.ok) {\n      if (res.status === 404) throw new Error('User not found')\n      if (res.status === 403) throw new Error('Access denied')\n      throw new Error(`Failed to fetch user: ${res.status}`)\n    }\n\n    const data = await res.json()\n    user.value = data\n\n    // Fetch memberships after user loads\n    fetchMemberships()\n  } catch (e: any) {\n    error.value = e.message || 'Failed to load user details'\n  } finally {\n    loading.value = false\n  }\n}\n\nasync function fetchMemberships() {\n  membershipsLoading.value = true\n  try {\n    const tokenCookie = useCookie('access_token')\n    const token = (tokenCookie.value || auth.token || '').trim()\n    const headers: Record<string, string> = {\n      'Authorization': `Bearer ${token}`,\n      'Content-Type': 'application/json',\n    }\n\n    const res = await fetch(`/api/v1/admin/users/${userId}/memberships`, { headers })\n    if (!res.ok) throw new Error(`Failed to fetch memberships: ${res.status}`)\n\n    const data = await res.json()\n    memberships.value = Array.isArray(data) ? data : (data.memberships || [])\n  } catch (e: any) {\n    console.error('Memberships fetch error:', e)\n    memberships.value = []\n  } finally {\n    membershipsLoading.value = false\n  }\n}\n\n// Edit Modal\nfunction openEditModal() {\n  if (!user.value) return\n  const u = user.value\n  const p = u.person || {}\n  editForm.value = {\n    email: u.email || '',\n    preferred_language: u.preferred_language || '',\n    region_code: u.region_code || '',\n    preferred_currency: u.preferred_currency || '',\n    subscription_plan: u.subscription_plan || '',\n    subscription_expires_at: u.subscription_expires_at\n      ? u.subscription_expires_at.slice(0, 16)\n      : '',\n    scope_level: u.scope_level || '',\n    scope_id: u.scope_id || '',\n    is_active: u.status === 'active',\n    is_vip: u.is_vip || false,\n    person_last_name: p.last_name || '',\n    person_first_name: p.first_name || '',\n    person_phone: p.phone || '',\n    person_mothers_last_name: p.mothers_last_name || '',\n    person_mothers_first_name: p.mothers_first_name || '',\n    person_birth_place: p.birth_place || '',\n    person_birth_date: p.birth_date ? p.birth_date.slice(0, 10) : '',\n  }\n  showEditModal.value = true\n}\n\nfunction closeEditModal() {\n  showEditModal.value = false\n}\n\nasync function saveEdit() {\n  saving.value = true\n  try {\n    const tokenCookie = useCookie('access_token')\n    const token = (tokenCookie.value || auth.token || '').trim()\n    const headers: Record<string, string> = {\n      'Authorization': `Bearer ${token}`,\n      'Content-Type': 'application/json',\n    }\n\n    const payload: Record<string, any> = {\n      email: editForm.value.email || undefined,\n      preferred_language: editForm.value.preferred_language || undefined,\n      region_code: editForm.value.region_code || undefined,\n      preferred_currency: editForm.value.preferred_currency || undefined,\n      subscription_plan: editForm.value.subscription_plan || undefined,\n      subscription_expires_at: editForm.value.subscription_expires_at\n        ? new Date(editForm.value.subscription_expires_at).toISOString()\n        : null,\n      scope_level: editForm.value.scope_level || undefined,\n      scope_id: editForm.value.scope_id ? Number(editForm.value.scope_id) : undefined,\n      is_active: editForm.value.is_active,\n      is_vip: editForm.value.is_vip,\n    }\n\n    // Only include person fields if any are filled\n    const hasPersonData = editForm.value.person_last_name || editForm.value.person_first_name ||\n      editForm.value.person_phone || editForm.value.person_mothers_last_name ||\n      editForm.value.person_mothers_first_name || editForm.value.person_birth_place ||\n      editForm.value.person_birth_date\n\n    if (hasPersonData) {\n      payload.person = {\n        last_name: editForm.value.person_last_name || undefined,\n        first_name: editForm.value.person_first_name || undefined,\n        phone: editForm.value.person_phone || undefined,\n        mothers_last_name: editForm.value.person_mothers_last_name || undefined,\n        mothers_first_name: editForm.value.person_mothers_first_name || undefined,\n        birth_place: editForm.value.person_birth_place || undefined,\n        birth_date: editForm.value.person_birth_date\n          ? new Date(editForm.value.person_birth_date).toISOString()\n          : undefined,\n      }\n    }\n\n    // Clean undefined values\n    Object.keys(payload).forEach(key => {\n      if (payload[key] === undefined) delete payload[key]\n    })\n    if (payload.person) {\n      Object.keys(payload.person).forEach(key => {\n        if (payload.person[key] === undefined) delete payload.person[key]\n      })\n      if (Object.keys(payload.person).length === 0) delete payload.person\n    }\n\n    const res = await fetch(`/api/v1/admin/users/${userId}`, {\n      method: 'PATCH',\n      headers,\n      body: JSON.stringify(payload),\n    })\n\n    if (!res.ok) {\n      const errData = await res.json().catch(() => ({}))\n      throw new Error(errData.detail || `Save failed: ${res.status}`)\n    }\n\n    const result = await res.json()\n    user.value = result\n    closeEditModal()\n    showNotification('success', 'User updated successfully')\n  } catch (e: any) {\n    showNotification('error', e.message || 'Failed to save')\n  } finally {\n    saving.value = false\n  }\n}\n\n// Notification helper\nfunction showNotification(type: 'success' | 'error', message: string) {\n  notification.value = { show: true, type, message }\n  setTimeout(() => {\n    notification.value.show = false\n  }, 4000)\n}\n\n// Navigation\nfunction goBack() {\n  router.push('/users')\n}\n\n// Helpers\nfunction getInitials(name: string): string {\n  if (!name) return '?'\n  return name.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2)\n}\n\nfunction getInitialsColor(name: string): string {\n  const colors = [\n    'bg-red-500', 'bg-yellow-500', 'bg-green-500', 'bg-blue-500',\n    'bg-indigo-500', 'bg-purple-500', 'bg-pink-500', 'bg-teal-500',\n  ]\n  let hash = 0\n  for (let i = 0; i < (name || '').length; i++) {\n    hash = name.charCodeAt(i) + ((hash << 5) - hash)\n  }\n  return colors[Math.abs(hash) % colors.length]\n}\n\nfunction formatDate(date: string | null | undefined): string {\n  if (!date) return ''\n  try {\n    return new Date(date).toLocaleDateString('en-GB', {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    })\n  } catch {\n    return String(date)\n  }\n}\n\nfunction roleLabel(role: string): string {\n  const map: Record<string, string> = {\n    admin: 'Admin',\n    user: 'User',\n    staff: 'Staff',\n    superadmin: 'Superadmin',\n  }\n  return map[role?.toLowerCase()] || role || 'User'\n}\n\nfunction roleBadgeClass(role: string): string {\n  const map: Record<string, string> = {\n    admin: 'bg-purple-500/10 text-purple-400',\n    user: 'bg-blue-500/10 text-blue-400',\n    staff: 'bg-cyan-500/10 text-cyan-400',\n    superadmin: 'bg-amber-500/10 text-amber-400',\n  }\n  return map[role?.toLowerCase()] || 'bg-slate-500/10 text-slate-400'\n}\n\nfunction planBadgeClass(plan: string): string {\n  const map: Record<string, string> = {\n    FREE: 'bg-slate-500/10 text-slate-400',\n    PREMIUM: 'bg-emerald-500/10 text-emerald-400',\n    ENTERPRISE: 'bg-amber-500/10 text-amber-400',\n  }\n  return map[plan?.toUpperCase()] || 'bg-slate-500/10 text-slate-400'\n}\n\nfunction orgRoleLabel(role: string): string {\n  const map: Record<string, string> = {\n    admin: 'Admin',\n    manager: 'Manager',\n    member: 'Member',\n    owner: 'Owner',\n  }\n  return map[role?.toLowerCase()] || role || 'Member'\n}\n\nfunction memberStatusLabel(status: string): string {\n  const map: Record<string, string> = {\n    active: 'Active',\n    invited: 'Invited',\n    suspended: 'Suspended',\n    inactive: 'Inactive',\n  }\n  return map[status?.toLowerCase()] || status || 'Unknown'\n}\n\nfunction memberStatusBadgeClass(status: string): string {\n  const map: Record<string, string> = {\n    active: 'bg-emerald-500/10 text-emerald-400',\n    invited: 'bg-blue-500/10 text-blue-400',\n    suspended: 'bg-red-500/10 text-red-400',\n    inactive: 'bg-slate-500/10 text-slate-400',\n  }\n  return map[status?.toLowerCase()] || 'bg-slate-500/10 text-slate-400'\n}\n\nfunction memberStatusDotClass(status: string): string {\n  const map: Record<string, string> = {\n    active: 'bg-emerald-400',\n    invited: 'bg-blue-400',\n    suspended: 'bg-red-400',\n    inactive: 'bg-slate-400',\n  }\n  return map[status?.toLowerCase()] || 'bg-slate-400'\n}\n\n// Lifecycle\nonMounted(() => {\n  fetchUser()\n})\n</script>\n"],"version":3}