1 line
56 KiB
JSON
1 line
56 KiB
JSON
{"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} |