@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/CreateSubsciptionPlan.vue

@@ -1,29 +1,15 @@
 <template>
-  <v-card class="pa-2">
+  <v-card class="screen-modal">
     <!-- Header -->
-    <v-card-title class="d-flex align-center justify-space-between pb-2">
-      <span class="text-h6 font-weight-bold">
-        {{ isEditing ? "Edit Plan" : "Create New Plan" }}
-      </span>
-
-      <v-btn
-        icon="mdi-close"
-        variant="text"
-        density="comfortable"
-        aria-label="Close"
-        @click="$emit('cancel')"
-      />
+    <v-card-title>
+      {{ isEditing ? "Edit Plan" : "Create New Plan" }}
     </v-card-title>
 
-    <v-divider />
-
     <!-- Form Content -->
-    <v-form ref="formRef" class="my-4" @submit.prevent="submit">
-      <v-card-text class="pa-2 max-h-70vh overflow-y-auto">
+    <v-form ref="formRef" @submit.prevent="submit">
+      <v-card-text class="screen-modal__body px-6 pt-4">
         <!-- Plan Details Section -->
-        <div class="text-subtitle-2 font-weight-bold mb-3 text-grey-darken-3">
-          Plan Details
-        </div>
+        <div class="plan-form__section">Plan Details</div>
 
         <!-- Plan Name -->
         <v-text-field
@@ -32,8 +18,8 @@
           placeholder="e.g., Business"
           variant="outlined"
           density="compact"
+          class="filter-field mb-3"
           :error-messages="errors.name"
-          class="mb-3"
           required
         >
           <template #label>
@@ -48,9 +34,9 @@
           placeholder="Enter description"
           variant="outlined"
           density="compact"
+          class="filter-field mb-3"
           rows="2"
           auto-grow
-          class="mb-3"
         />
 
         <!-- Max Seats -->
@@ -60,7 +46,7 @@
           min="0"
           variant="outlined"
           density="compact"
-          class="mb-4"
+          class="filter-field mb-4"
           required
         >
           <template #label>
@@ -68,12 +54,8 @@
           </template>
         </v-text-field>
 
-        <v-divider class="my-4" />
-
         <!-- Pricing Section -->
-        <div class="text-subtitle-2 font-weight-bold mb-3 text-grey-darken-3">
-          Pricing
-        </div>
+        <div class="plan-form__section">Pricing</div>
 
         <!-- Plan Type -->
         <v-select
@@ -81,7 +63,7 @@
           :items="planTypeOptions"
           variant="outlined"
           density="compact"
-          class="mb-3"
+          class="filter-field mb-3"
         >
           <template #label>
             Subscription plan type <span class="text-error">*</span>
@@ -96,7 +78,7 @@
           placeholder="Select billing cycle"
           variant="outlined"
           density="compact"
-          class="mb-3"
+          class="filter-field mb-3"
         >
           <template #label>
             Billing cycle <span class="text-error">*</span>
@@ -105,25 +87,23 @@
 
         <!-- Bundle Applications (Chip Toggle) -->
         <div v-if="form.planType !== 'custom_apps'" class="mb-4">
-          <div class="text-caption font-weight-medium text-grey-darken-2 mb-2">
-            Included Applications
-          </div>
+          <div class="plan-form__label mb-2">Included Applications</div>
 
           <v-chip-group
             v-model="form.bundleApps"
             column
             multiple
-            selected-class="bg-grey-darken-3 text-white"
+            selected-class="plan-form__chip--on"
           >
             <v-chip
-              v-for="app in AVAILABLE_APPLICATIONS"
-              :key="app.id"
-              :value="app.id"
+              v-for="app in APP_LIST"
+              :key="app.value"
+              :value="app.value"
               filter
               variant="outlined"
               size="small"
             >
-              {{ app.name }}
+              {{ app.title }}
             </v-chip>
           </v-chip-group>
         </div>
@@ -139,7 +119,7 @@
           :suffix="form.billingCycle === 'annually' ? '/yr' : '/mo'"
           variant="outlined"
           density="compact"
-          class="mb-3"
+          class="filter-field mb-3"
         >
           <template #label>
             Price <span class="text-error">*</span>
@@ -148,53 +128,60 @@
 
         <!-- Custom Applications (List Checkbox) -->
         <div v-if="form.planType === 'custom_apps'" class="mb-4">
-          <div class="text-caption font-weight-medium text-grey-darken-2 mb-1">
+          <div class="plan-form__label mb-1">
             Included Applications <span class="text-error">*</span>
           </div>
 
           <v-card variant="outlined" class="pa-1 mb-3">
             <v-list density="compact" class="py-0">
               <v-list-item
-                v-for="app in AVAILABLE_APPLICATIONS"
-                :key="app.id"
+                v-for="app in APP_LIST"
+                :key="app.value"
                 class="px-2"
               >
                 <template #prepend>
                   <v-checkbox-btn
-                    :model-value="form.customApps.includes(app.id)"
+                    :model-value="form.customApps.includes(app.value)"
                     density="compact"
-                    @update:model-value="toggleApp(form.customApps, app.id)"
+                    @update:model-value="toggleApp(form.customApps, app.value)"
                   />
                 </template>
 
                 <v-list-item-title class="text-body-2">
-                  {{ app.name }}
+                  {{ app.title }}
                 </v-list-item-title>
 
                 <template #append>
-                  <span class="text-caption text-grey">
-                    ${{ form.billingCycle === 'annually' ? app.yearlyPrice : app.monthlyPrice }}/{{ form.billingCycle === 'annually' ? 'yr' : 'mo' }}
-                  </span>
+                  <div class="d-flex align-center" style="gap: 4px">
+                    <span class="plan-form__unit">$</span>
+                    <v-text-field
+                      v-model.number="form.customAppPrices[app.value]"
+                      type="number"
+                      min="0"
+                      density="compact"
+                      variant="outlined"
+                      hide-details
+                      style="width: 84px"
+                      :disabled="!form.customApps.includes(app.value)"
+                    />
+                    <span class="plan-form__unit">/{{ form.billingCycle === 'annually' ? 'yr' : 'mo' }}</span>
+                  </div>
                 </template>
               </v-list-item>
             </v-list>
           </v-card>
 
           <!-- Custom Total Price Display -->
-          <v-sheet
-            color="grey-lighten-4"
-            rounded
-            class="pa-3 d-flex align-center justify-space-between mb-1"
-          >
-            <span class="text-caption text-grey-darken-2">
+          <div class="plan-form__total mb-1">
+            <span class="plan-form__label">
               Total price {{ form.billingCycle === 'annually' ? '/ year' : '/ month' }}
             </span>
-            <span class="text-subtitle-1 font-weight-bold">
+            <span class="plan-form__total-value">
               ${{ customTotalPrice.toLocaleString() }}
             </span>
-          </v-sheet>
+          </div>
 
-          <p class="text-caption text-grey">
+          <p class="plan-form__unit">
             Calculated automatically from the selected applications.
           </p>
         </div>
@@ -211,27 +198,20 @@
         </v-alert>
       </v-card-text>
 
-      <v-divider />
-
       <!-- Footer Buttons -->
-      <v-card-actions class="pt-3 px-2">
-        <v-btn
-          variant="outlined"
-          color="grey-darken-1"
-          class="flex-1 text-none"
-          @click="$emit('cancel')"
-        >
-          Cancel
-        </v-btn>
-
-        <v-btn
-          type="submit"
-          color="grey-darken-4"
-          variant="flat"
-          class="flex-1 text-none"
-        >
-          {{ isEditing ? "Save Changes" : "Create Plan" }}
-        </v-btn>
+      <v-card-actions class="screen-modal__footer">
+        <v-row no-gutters>
+          <v-col cols="6" class="pr-2">
+            <v-btn block variant="outlined" class="text-none screen-btn-ghost" @click="$emit('cancel')">
+              Cancel
+            </v-btn>
+          </v-col>
+          <v-col cols="6" class="pl-2">
+            <v-btn block type="submit" variant="flat" class="text-none screen-btn-primary">
+              {{ isEditing ? "Save Changes" : "Create Plan" }}
+            </v-btn>
+          </v-col>
+        </v-row>
       </v-card-actions>
     </v-form>
   </v-card>
@@ -241,7 +221,9 @@
 import { reactive, computed, watch } from "vue";
 
 import {
-  AVAILABLE_APPLICATIONS,
+  APP_LIST,
+  STATIC_APP_MONTHLY_PRICE,
+  STATIC_APP_YEARLY_PRICE,
   type PlanFormState,
   type SubscriptionPlan,
 } from "../types/subscription";
@@ -284,6 +266,14 @@ const form = reactive<PlanFormState>({
     props.initialPlan?.planType === "custom_apps"
       ? [...(props.initialPlan?.applicationIds ?? [])]
       : [],
+  customAppPrices: Object.fromEntries(
+    APP_LIST.map((app) => [
+      app.value,
+      props.initialPlan?.billingCycle === "annually"
+        ? STATIC_APP_YEARLY_PRICE
+        : STATIC_APP_MONTHLY_PRICE,
+    ])
+  ),
 });
 
 const errors = reactive({
@@ -304,6 +294,29 @@ watch(
   }
 );
 
+function staticPriceForCycle(cycle: typeof form.billingCycle) {
+  return cycle === "annually" ? STATIC_APP_YEARLY_PRICE : STATIC_APP_MONTHLY_PRICE;
+}
+
+/*
+ * Keep custom app prices in sync with the billing cycle, but only for
+ * apps still sitting at the previous cycle's default (leave manual edits alone)
+ */
+watch(
+  () => form.billingCycle,
+  (newCycle, oldCycle) => {
+    const oldDefault = staticPriceForCycle(oldCycle);
+    const newDefault = staticPriceForCycle(newCycle);
+    if (oldDefault === newDefault) return;
+
+    for (const app of APP_LIST) {
+      if (form.customAppPrices[app.value] === oldDefault) {
+        form.customAppPrices[app.value] = newDefault;
+      }
+    }
+  }
+);
+
 /*
  * Toggle application selection helper
  */
@@ -320,15 +333,10 @@ function toggleApp(list: string[], id: string) {
  * Custom app total price calculation
  */
 const customTotalPrice = computed(() => {
-  return form.customApps.reduce((total, id) => {
-    const app = AVAILABLE_APPLICATIONS.find((item) => item.id === id);
-    if (!app) return total;
-
-    return (
-      total +
-      (form.billingCycle === "annually" ? app.yearlyPrice : app.monthlyPrice)
-    );
-  }, 0);
+  return form.customApps.reduce(
+    (total, value) => total + (form.customAppPrices[value] ?? 0),
+    0
+  );
 });
 
 /*
@@ -340,6 +348,11 @@ function validate(): boolean {
 
   if (form.planType !== "free_bundle" && !form.billingCycle) {
     errors.pricing = "Please select a billing cycle.";
+  } else if (
+    (form.planType === "free_bundle" || form.planType === "paid_bundle") &&
+    form.bundleApps.length === 0
+  ) {
+    errors.pricing = "Select at least one application.";
   } else if (
     form.planType === "paid_bundle" &&
     (!form.bundlePrice || form.bundlePrice <= 0)
@@ -370,7 +383,53 @@ function submit() {
 </script>
 
 <style scoped>
-.max-h-70vh {
-  max-height: 70vh;
+/* The design's section label: the same all-caps rule the rest of the estate
+   uses, instead of Vuetify's `text-subtitle-2 text-grey-darken-3`, which is a
+   fixed grey that does not follow the theme. */
+.plan-form__section {
+  font-size: var(--fs-section-label);
+  font-weight: var(--fw-section-label);
+  letter-spacing: var(--ls-section-label);
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-bottom: 12px;
+}
+
+.plan-form__label {
+  font-size: var(--fs-cell-dense);
+  font-weight: 600;
+  color: var(--text2);
+}
+
+.plan-form__unit {
+  font-size: var(--fs-chip-lg);
+  font-weight: 600;
+  color: var(--muted);
+}
+
+/* Was `<v-sheet color="grey-lighten-4">`, a light-theme-only grey that stayed
+   light in dark mode. */
+.plan-form__total {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border-radius: var(--r-inner);
+  background: var(--hover);
+}
+
+.plan-form__total-value {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+}
+
+/* The selected application chip. The handoff draws no chip GROUP, so this is
+   the estate's soft-accent selected tone rather than an invented one - it
+   replaces `bg-grey-darken-3 text-white`, which was a fixed dark grey. */
+.plan-form__chip--on {
+  background: var(--accent-soft) !important;
+  color: var(--accent-text) !important;
+  border-color: var(--accent) !important;
 }
 </style>

package/components/DashboardEmptyState.vue

@@ -1,10 +1,28 @@
+<!--
+  "No data to display" and "we could not fetch it" are not the same sentence.
+
+  This component drew the first one for both, because every dashboard request
+  defaulted a rejection to an empty list. `error` splits them: a genuine zero
+  keeps the neutral wording, a failed request says so in the error tone and
+  tells the reader the figure is missing rather than nil.
+-->
 <template>
   <div
-    class="d-flex flex-column align-center justify-center text-center text-blue-grey-lighten-1"
+    class="d-flex flex-column align-center justify-center text-center dashboard-empty"
+    :class="{ 'dashboard-empty--error': error }"
     :style="{ minHeight: compact ? '72px' : '140px', gap: '8px' }"
+    role="status"
   >
-    <v-icon icon="mdi-database-search-outline" size="28" />
-    <span class="text-caption font-weight-bold">No data to display</span>
+    <v-icon
+      :icon="error ? 'mdi-cloud-alert-outline' : 'mdi-database-search-outline'"
+      size="28"
+    />
+    <span class="text-caption font-weight-bold">
+      {{ error ? "Couldn't load this data" : "No data to display" }}
+    </span>
+    <span v-if="error" class="text-caption dashboard-empty__hint">
+      The request failed — this is not a zero. Refresh to try again.
+    </span>
   </div>
 </template>
 
@@ -14,5 +32,32 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  /** The request behind this panel failed - say so instead of showing "none". */
+  error: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
+
+<style scoped>
+/* Was `text-blue-grey-lighten-1`, a fixed Vuetify grey that measured 2.4:1 in
+   LIGHT mode - the empty state was the hardest thing on the page to read. The
+   muted token is the design's own and follows the theme. */
+.dashboard-empty {
+  font-family: var(--font-sans);
+  color: var(--muted);
+}
+
+/* `--err` is the design's own error tone and is AA in both themes; the hint
+   line stays on `--text2` so the explanation is never the palest thing here
+   (a dimmed explanation is the one line that must stay readable). */
+.dashboard-empty--error {
+  color: var(--err);
+}
+
+.dashboard-empty__hint {
+  color: var(--text2);
+  max-width: 34ch;
+}
+</style>