Editing Super Admin permissions and visual changes

apps/web/src/views/adm/AdmUsersView.vue

@@ -158,10 +158,7 @@ onMounted(() => {
 <template>
   <div class="page">
     <header class="head">
-      <div>
-        <h1>کاربران</h1>
-        <p>فعال/غیرفعال حساب، نقش عضویت و ریست رمز عبور.</p>
-      </div>
+      <p class="lead">اشتراک مالک، نقش عضویت و ریست رمز.</p>
       <form class="search" @submit.prevent="load">
         <input v-model="query" type="search" placeholder="نام، ایمیل یا موبایل" />
         <button class="btn" type="submit" :disabled="loading">جستجو</button>
@@ -230,15 +227,15 @@ onMounted(() => {
         </form>
 
         <div v-if="openId === user.id" class="detail">
-          <div class="billing">
-            <strong>اشتراک</strong>
+          <div v-if="user.isBillingOwner" class="billing">
+            <strong>اشتراک مالک</strong>
             <p v-if="user.billing" class="muted">
               {{ BILLING_PLAN_LABELS[user.billing.planCode] }}
               · {{ user.billing.status }}
               · {{ toFaDigits(user.billing.daysRemaining) }} روز
               · سقف محیط {{ toFaDigits(user.billing.maxOrganizations) }}
             </p>
-            <p v-else class="muted">هنوز اشتراک ثبت نشده — با اعمال پلن ساخته می‌شود.</p>
+            <p v-else class="muted">هنوز پلن ندارد — یکی از پلن‌ها را اعمال کنید.</p>
             <div class="plan-row">
               <button
                 v-for="code in BILLING_PLAN_CODES.filter((c) => c !== 'custom')"
@@ -252,6 +249,9 @@ onMounted(() => {
               </button>
             </div>
           </div>
+          <p v-else class="muted billing-skip">
+            این کاربر عضو زیرمجموعه است و اشتراک جدا ندارد؛ اشتراک روی مالک محیط است.
+          </p>
 
           <p v-if="!user.memberships.length" class="muted">عضو هیچ محیطی نیست.</p>
           <ul v-else>
@@ -298,44 +298,50 @@ onMounted(() => {
 <style scoped>
 .page {
   display: grid;
-  gap: 1rem;
-  max-width: 1040px;
+  gap: 0.95rem;
+  max-width: 1080px;
 }
 
 .head {
   display: flex;
   justify-content: space-between;
-  gap: 1rem;
+  gap: 0.85rem;
   flex-wrap: wrap;
+  align-items: center;
 }
 
-.head h1 {
-  margin: 0 0 0.3rem;
-}
-
+.lead,
 .head p,
 .muted {
   margin: 0;
   color: var(--muted);
+  font-size: 0.88rem;
 }
 
 .search {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.45rem;
+  padding: 0.25rem;
+  border-radius: 14px;
+  background: #fff;
+  border: 1px solid var(--line-light);
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
 }
 
 .search input,
 .reset-panel input,
 .member-actions select {
   border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.65rem 0.8rem;
+  border-radius: 12px;
+  padding: 0.6rem 0.75rem;
   font: inherit;
   background: #fff;
 }
 
 .search input {
-  min-width: 220px;
+  min-width: 180px;
+  border: 0;
+  box-shadow: none;
 }
 
 .error {
@@ -356,11 +362,12 @@ onMounted(() => {
 .row {
   background: #fff;
   border: 1px solid #eef2f7;
-  border-radius: 14px;
-  padding: 0.85rem 1rem;
+  border-radius: 18px;
+  padding: 0.95rem 1rem;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.7rem 1rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
 }
 
 .row-main {
@@ -480,6 +487,10 @@ onMounted(() => {
   gap: 0.4rem;
 }
 
+.billing-skip {
+  margin: 0 0 0.75rem;
+}
+
 .member-actions {
   display: flex;
   gap: 0.45rem;