@7365admin1/layer-common 3.2.8-staging.202 → 3.2.8-staging.204

package/components/ClientMain.vue

@@ -37,19 +37,6 @@
               </svg>
             </div>
 
-            <div class="filter-field">
-              <label>Filter by plan type</label>
-              <select v-model="filterPlan" @change="handleFilterChange">
-                <option value="">All</option>
-                <option v-for="app in APP_LIST" :key="app.value" :value="app.value">
-                  {{ app.title }}
-                </option>
-              </select>
-              <svg class="chevron" viewBox="0 0 10 6" fill="none">
-                <path d="M1 1l4 4 4-4" stroke="#6B7280" stroke-width="1.4" stroke-linecap="round"/>
-              </svg>
-            </div>
-
             <div class="filter-field">
               <label>Filter by billing cycle</label>
               <select v-model="filterBilling" @change="handleFilterChange">
@@ -69,6 +56,11 @@
       <div class="table-card">
 
         <!-- Toolbar row -->
+        <div v-if="savedNote" class="saved-note" role="status">
+          {{ savedNote }}
+          <button class="saved-note-close" @click="savedNote = ''">&times;</button>
+        </div>
+
         <div class="toolbar">
           <div class="toolbar-left">
             <button class="refresh-btn" :class="{ spinning: loading }" @click="handleRefresh">
@@ -111,10 +103,10 @@
                 <th>Organization Name</th>
                 <th>Email</th>
                 <th>Sites</th>
-                <th>Plan Type</th>
+                <th>Subscription</th>
                 <th>Billing Cycle</th>
-                <th>Subscription Start</th>
-                <th>Subscription End</th>
+                <th>Start Date</th>
+                <th>End Date</th>
                 <th>Status</th>
                 <th>Actions</th>
               </tr>
@@ -129,28 +121,46 @@
                 <td>
                   <span class="sites-badge">{{ item.sites }}</span>
                 </td>
-                <td>{{ item.planType }}</td>
-                <td class="td-muted">{{ item.billingCycle }}</td>
-                <td>
-                  <span class="date-cell">
-                    <svg viewBox="0 0 16 16" fill="none" width="13" height="13">
-                      <rect x="1" y="3" width="14" height="12" rx="2" stroke="#9CA3AF" stroke-width="1.3"/>
-                      <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3"/>
-                      <path d="M5 1v3M11 1v3" stroke="#9CA3AF" stroke-width="1.3" stroke-linecap="round"/>
-                    </svg>
-                    {{ item.subscriptionStart }}
-                  </span>
-                </td>
-                <td>
-                  <span class="date-cell">
-                    <svg viewBox="0 0 16 16" fill="none" width="13" height="13">
-                      <rect x="1" y="3" width="14" height="12" rx="2" stroke="#9CA3AF" stroke-width="1.3"/>
-                      <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3"/>
-                      <path d="M5 1v3M11 1v3" stroke="#9CA3AF" stroke-width="1.3" stroke-linecap="round"/>
-                    </svg>
-                    {{ item.subscriptionEnd }}
-                  </span>
+                <!--
+                  A client nobody has set up yet used to print four dashes here,
+                  which reads as a broken screen. It is one ordinary state, so it
+                  is said once, in words.
+                -->
+                <td v-if="item.sub.state === 'none'" colspan="4" class="sub-none">
+                  No subscription set up
+                  <button class="sub-setup-btn" @click="openSubscription(item)">
+                    Set up subscription
+                  </button>
                 </td>
+
+                <template v-else>
+                  <td>
+                    <span class="sub-label" :class="{ 'needs-attention': item.sub.needsAttention }">
+                      {{ item.sub.label }}
+                    </span>
+                  </td>
+                  <td class="td-muted">{{ item.sub.billingCycle }}</td>
+                  <td>
+                    <span class="date-cell">
+                      <svg viewBox="0 0 16 16" fill="none" width="13" height="13">
+                        <rect x="1" y="3" width="14" height="12" rx="2" stroke="#9CA3AF" stroke-width="1.3"/>
+                        <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3"/>
+                        <path d="M5 1v3M11 1v3" stroke="#9CA3AF" stroke-width="1.3" stroke-linecap="round"/>
+                      </svg>
+                      {{ item.sub.start }}
+                    </span>
+                  </td>
+                  <td>
+                    <span class="date-cell" :class="{ 'needs-attention': item.sub.needsAttention }">
+                      <svg viewBox="0 0 16 16" fill="none" width="13" height="13">
+                        <rect x="1" y="3" width="14" height="12" rx="2" stroke="#9CA3AF" stroke-width="1.3"/>
+                        <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3"/>
+                        <path d="M5 1v3M11 1v3" stroke="#9CA3AF" stroke-width="1.3" stroke-linecap="round"/>
+                      </svg>
+                      {{ item.sub.end }}
+                    </span>
+                  </td>
+                </template>
                 <td>
                   <span :class="['status-chip', item.status]">{{ item.status }}</span>
                 </td>
@@ -210,9 +220,24 @@
         :client="selectedClient"
         @cancel="cancelView"
         @submit="submitClient"
+        @manage-subscription="openSubscription(selectedClient)"
       />
     </div>
 
+    <!--
+      SET UP OR CHANGE A CLIENT'S SUBSCRIPTION. Opened from the row that has
+      none, from the row menu, or from the client's own drawer - all three land
+      here, so there is one form and one set of rules behind them.
+    -->
+    <ClientSubscriptionForm
+      v-if="subscriptionClient"
+      :org-id="subscriptionClient._id"
+      :client-name="subscriptionClient.name"
+      :site-count="subscriptionClient.sites"
+      @cancel="subscriptionClient = null"
+      @saved="onSubscriptionSaved"
+    />
+
     <div v-if="dialog" class="overlay" @click.self="dialog = false">
       <div class="dialog-box">
         <InvitationClientForm title="Invite Client" @success="handleSuccess" @cancel="dialog = false" />
@@ -245,6 +270,9 @@
         <button class="dd-item" @click="viewClient(activeMenuItem)">
           View Organization
         </button>
+        <button class="dd-item" @click="openSubscription(activeMenuItem)">
+          {{ activeMenuItem?.sub?.state === 'none' ? 'Set up subscription' : 'Edit subscription' }}
+        </button>
         <button
           v-if="activeMenuItem?.status === 'suspended'"
           class="dd-item"
@@ -271,8 +299,9 @@ import useVerification from '../composables/useVerification'
 import useRole from '../composables/useRole'
 import InvitationClientForm from './InvitationClientForm.vue'
 import ClientDetailForm from './ClientDetailForm.vue'
+import ClientSubscriptionForm from './ClientSubscriptionForm.vue'
 import useCustomerSite from '../composables/useCustomerSite'
-import useSubscription from '../composables/useSubscription'
+import { describeClientSubscription } from '../utils/client-subscription'
 
 
 /* ── TYPES ── */
@@ -282,7 +311,6 @@ type TabStatus = 'active' | 'suspended' | 'pending'
 const { getOrganizationsWithSubscription, updateStatus } = useOrg()
 const { getVerifications, cancelUserInvitation } = useVerification()
 const { getCustomerSites: getCustomerSitesByOrgId } = useCustomerSite()
-const { getByOrgId: getSubscriptionByOrgId } = useSubscription()
 const { getRoleById } = useRole()
 
 /* ── CONSTANTS ── */
@@ -306,7 +334,6 @@ const tableScrollEl   = ref<HTMLElement | null>(null)
 
 // filterStatus
 const filterStatus    = ref<'active' | 'suspended'>('active')
-const filterPlan      = ref('')   // '' = All | any APP_LIST value
 const filterBilling   = ref('')   // '' = All | 'monthly' | 'yearly'
 
 const items           = ref<any[]>([])
@@ -321,6 +348,10 @@ const roleCache       = ref<Record<string, string>>({})
 const viewMode        = ref<'table' | 'detail'>('table')
 const selectedClient  = ref<any>(null)
 
+/* subscription set-up / edit */
+const subscriptionClient = ref<any>(null)
+const savedNote          = ref('')
+
 /* suspend confirmation */
 const confirmSuspendItem    = ref<any>(null)
 const confirmSuspendLoading = ref(false)
@@ -338,21 +369,6 @@ const activeMenuItem = computed(() =>
 )
 
 /* ── HELPERS ── */
-function formatDate(date?: string | Date) {
-  if (date == null || date === '') return '-'
-  const d = date instanceof Date ? date : new Date(date as string)
-  return isNaN(d.getTime()) ? '-' : d.toLocaleDateString('en-US')
-}
-
-function planTypeLabel(sub: Record<string, any>) {
-  if (!sub) return '-'
-  if (sub.paidType) return String(sub.paidType)
-  if (sub.type === 'organization') return 'Organization'
-  if (sub.type === 'affiliate')    return 'Affiliate'
-  const desc = String(sub.description || '').trim()
-  return desc ? (desc.length > 48 ? `${desc.slice(0, 45)}…` : desc) : '-'
-}
-
 async function resolveRoleName(id: string) {
   if (!id) return '-'
   if (roleCache.value[id]) return roleCache.value[id]
@@ -387,6 +403,30 @@ async function activateClient(item: any) {
   }
 }
 
+/* ── SUBSCRIPTION ── */
+function openSubscription(item: any) {
+  if (!item?._id) return
+  savedNote.value = ''
+  subscriptionClient.value = item
+  closeMenu()
+}
+
+async function onSubscriptionSaved(message: string) {
+  subscriptionClient.value = null
+  savedNote.value = message
+  // The list derives every subscription state from the record itself, so
+  // re-reading it is all that is needed for the row to tell the truth again.
+  await fetchData()
+
+  // The drawer reads the same row, so if it is open it has to be handed the
+  // refreshed one - otherwise it would still be showing what was true before
+  // the save.
+  if (selectedClient.value?._id) {
+    selectedClient.value =
+      items.value.find(i => i._id === selectedClient.value._id) ?? selectedClient.value
+  }
+}
+
 /* ── SUSPEND CONFIRMATION ── */
 function askSuspend(item: any) {
   confirmSuspendItem.value = item
@@ -418,7 +458,6 @@ async function fetchOrgs(status: 'active' | 'suspended') {
       search: search.value,
       limit: limit.value,
       status,
-      type: filterPlan.value,
       billingCycle: filterBilling.value,
     })
 
@@ -428,8 +467,6 @@ async function fetchOrgs(status: 'active' | 'suspended') {
 
     items.value = await Promise.all(
       orgs.map(async (org: any) => {
-        const sub = org?.subscription ?? {}
-
         let siteCount = siteCache[org._id]
 
         if (siteCount === undefined) {
@@ -444,18 +481,14 @@ async function fetchOrgs(status: 'active' | 'suspended') {
         }
 
         return {
-  ...org,
-
-  planType: planTypeLabel(sub),
+          ...org,
 
-  billingCycle: sub?.billingCycle ?? "-",
+          sub: describeClientSubscription(org),
 
-  subscriptionStart: formatDate(sub?.createdAt),
-
-  subscriptionEnd: formatDate(sub?.nextBillingDate),
-
-  sites: `${siteCount} Sites`,
-}
+          // The column header already says Sites, so the badge is the number.
+          // (It also used to read "1 Sites".)
+          sites: siteCount,
+        }
       })
     )
 
@@ -869,6 +902,50 @@ tbody tr:hover { background: var(--thead); }
 tbody td { vertical-align: middle; }
 
 .empty { text-align: center; color: var(--muted); padding: 48px 0 !important; }
+
+/* A client nobody has set up yet: plainly stated, not shouted, not a dash. */
+.sub-none { color: var(--text2); font-size: 13px; }
+/* The way in, said next to the state it fixes. It sits in a cell that already
+   spans four columns, so it adds no width to the table. */
+.sub-setup-btn {
+  margin-left: 10px;
+  padding: 3px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--card);
+  color: var(--accent-text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.sub-setup-btn:hover { background: var(--hover); }
+
+.saved-note {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 12px 16px 0;
+  padding: 9px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--ok-bg);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+}
+.saved-note-close {
+  border: none;
+  background: none;
+  color: var(--text2);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+.sub-label { font-size: 13px; }
+/* Owner decision 8: an end date has passed and somebody has to look at it. */
+.needs-attention { color: var(--warn); font-weight: 500; }
 .td-name { font-weight: 500; color: var(--text); }
 .td-muted { color: var(--muted); font-size: 13px; }