@7365admin1/layer-common 3.2.2-staging.91 → 3.2.2-staging.93

package/components/InvitationMain.vue

@@ -1,69 +1,45 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          class="text-none mr-2 screen-btn-primary"
-          variant="flat"
-          @click="inviteMember()"
-          v-if="props.inviteMember"
-        >
-          Invite member
-        </v-btn>
-      </v-row>
-    </v-col>
+  <div>
+    <!-- The design's page scaffold: a title with the action on the right of
+         that line, then ONE row inside the card - the two tabs on the left,
+         refresh, the range and the pager on the right. The tabs route exactly
+         as they did; only where they sit has changed. -->
+    <PageHeader title="Invitations">
+      <template v-if="props.inviteMember" #actions>
+        <AppButton @click="inviteMember()">Invite member</AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <v-col cols="12">
-      <v-card width="100%" variant="flat" class="table-card">
-        <v-toolbar
-          density="compact"
-          color="transparent"
-          class="table-card__toolbar"
-        >
-          <template #prepend>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
-              @click="getVerifications()"
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #tabs>
+            <NuxtLink
+              v-for="tab in invitationTabs"
+              :key="tab.status"
+              class="app-tab"
+              :class="{ 'app-tab--active': props.status === tab.status }"
+              :to="{ name: props.route, params: { status: tab.status } }"
             >
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 table-card__range">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="getVerifications"
-              />
-            </v-row>
+              {{ tab.label }}
+            </NuxtLink>
           </template>
 
-          <template #extension>
-            <v-tabs>
-              <v-tab
-                :to="{
-                  name: props.route,
-                  params: { status: 'pending' },
-                }"
-              >
-                Pending
-              </v-tab>
-              <v-tab
-                :to="{
-                  name: props.route,
-                  params: { status: 'expired' },
-                }"
-              >
-                Expired
-              </v-tab>
-            </v-tabs>
+          <template #right>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
+              @click="getVerifications()"
+            />
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="getVerifications"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -105,7 +81,7 @@
             {{ formatStatus(value) }}
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
 
     <ConfirmDialog
@@ -155,10 +131,17 @@
         :app="props.app"
       />
     </v-dialog>
-  </v-row>
+    </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">
+/** The same two tabs, same labels, same routes. */
+const invitationTabs = [
+  { status: "pending", label: "Pending" },
+  { status: "expired", label: "Expired" },
+];
+
 const props = defineProps({
   app: {
     type: String,

package/components/Layout/Header.vue

@@ -126,7 +126,18 @@ const { currentUser } = useLocalAuth();
  */
 const { site } = useSite();
 
-const siteName = computed(() => String(site.value?.name ?? "").trim());
+/**
+ * The shared `site` state is only populated by the screens that load a site
+ * document, so on most screens - the dashboard included - the bar had no name
+ * to print. `SwitchContext` mirrors the label it is ALREADY showing in the
+ * rail into this state, so the bar falls back to the very name the user can
+ * see two inches to the left. Still no request from this component.
+ */
+const shellSiteName = useState<string>("shell-context-site-name", () => "");
+
+const siteName = computed(() =>
+  String(site.value?.name || shellSiteName.value || "").trim()
+);
 
 const route = useRoute();
 
@@ -188,8 +199,11 @@ const name = computed(() => {
 
   if(full) return full;
 
+  /* A member invited by email has no name stored yet, which left the avatar's
+     initials empty and the circle blank. The address is what the product shows
+     that member everywhere else, so it stands in here too. */
   const alternative = user?.name?.trim();
-  return alternative || ""
+  return alternative || user?.email?.trim() || ""
 
 })
 

package/components/Layout/NavigationDrawer.vue

@@ -283,9 +283,10 @@ const handleClick = (item: any) => {
   font-weight: var(--fw-card-title);
   line-height: 1.2;
   color: var(--text);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  /* The design prints the application's name in full ("Property Management").
+     Truncating it to "Property Managem…" in a 252px rail loses the word that
+     tells the user which product they are in, so it wraps instead. */
+  overflow-wrap: anywhere;
   text-transform: capitalize;
 }
 

package/components/ServiceProviderMain.vue

@@ -1,108 +1,91 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-3">
-      <v-row no-gutters align="center" justify="space-between">
-        <div class="d-flex flex-wrap align-center">
-          <v-btn
-            v-if="showAddButton && canAddServiceProvider"
-            class="text-none mr-2 screen-btn-primary"
-            variant="flat"
-            @click="(createDialog = true), setServiceProvider({ mode: 'add' })"
-          >
-            Add
-          </v-btn>
-          <v-btn
-            v-if="canInviteServiceProvider"
-            class="text-none mr-2 screen-btn-primary"
-            variant="flat"
-            @click="
-              (createInviteDialog = true),
-                setServiceProvider({ mode: 'invite' })
-            "
-          >
-            Invite
-          </v-btn>
-          <v-btn
-            v-if="showBillingButton"
-            class="text-none mr-2 screen-btn-primary"
-            variant="flat"
-            @click="
-              useRouter().push({
-                name: 'org-site-service-provider-mgmt-billing',
-              })
-            "
-          >
-            Billing
-          </v-btn>
-        </div>
-
-        <v-text-field
-          v-model="searchText"
-          placeholder="Search"
-          variant="outlined"
-          density="comfortable"
-          clearable
-          hide-details
-          prepend-inner-icon="mdi-magnify"
-          class="ml-2"
-          style="max-width: 280px"
-        />
-      </v-row>
-    </v-col>
-
-    <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="flat"
-        class="table-card"
-        :loading="loading"
-      >
-        <div class="sp-table-header">
-          <!-- No fixed colour: `grey-lighten-4` is a light-mode grey in both
-               themes, which is what made this strip a white slab in dark
-               mode. `transparent` lets the themed .sp-table-header show. -->
-          <v-toolbar
-            density="compact"
-            color="transparent"
-            flat
-            class="sp-toolbar-top px-2"
-          >
-            <v-btn
-              icon
-              variant="text"
-              density="comfortable"
-              @click="loadList()"
-            >
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-
-            <v-spacer />
-
-            <template v-if="canViewServiceProviders">
-              <span class="mr-2 text-caption text-medium-emphasis">{{
-                pageRange
-              }}</span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="loadList()"
-              />
-            </template>
-          </v-toolbar>
-
-          <v-tabs
-            v-model="listTab"
-            color="primary"
-            density="comfortable"
-            class="sp-tabs screen-tabs"
-            align-tabs="start"
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD (same shape as Members).
+
+      The screen had no title at all, its primary actions sat top-LEFT, the
+      search box floated outside the card, and the refresh + pager sat on one
+      row with the tabs stacked on a second row below. The design draws a 22px
+      title with the actions on the right of that line, then ONE row inside the
+      card: tabs left, search / refresh / count / pager right.
+
+      Placement only. The same buttons open the same dialogs under the same
+      permission conditions, the same three tabs load the same three lists, the
+      same search feeds the same debounced `loadList()`, and the table, its
+      columns and its row menu are untouched.
+    -->
+    <PageHeader title="Service Providers">
+      <template #actions>
+        <AppButton
+          v-if="showBillingButton"
+          variant="ghost"
+          @click="
+            useRouter().push({
+              name: 'org-site-service-provider-mgmt-billing',
+            })
+          "
+        >
+          Billing
+        </AppButton>
+        <AppButton
+          v-if="showAddButton && canAddServiceProvider"
+          variant="ghost"
+          @click="(createDialog = true), setServiceProvider({ mode: 'add' })"
+        >
+          Add
+        </AppButton>
+        <AppButton
+          v-if="canInviteServiceProvider"
+          @click="
+            (createInviteDialog = true), setServiceProvider({ mode: 'invite' })
+          "
+        >
+          Invite
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <CardToolbar :count="canViewServiceProviders ? pageRange : ''">
+        <template #tabs>
+          <button
+            v-for="tab in listTabs"
+            :key="tab.value"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': listTab === tab.value }"
+            :aria-selected="listTab === tab.value"
+            @click="listTab = tab.value"
           >
-            <v-tab value="active" class="text-none">Service Providers</v-tab>
-            <v-tab value="pending" class="text-none">Pending</v-tab>
-            <v-tab value="inactive" class="text-none">In-Active</v-tab>
-          </v-tabs>
-        </div>
-
+            {{ tab.label }}
+          </button>
+        </template>
+
+        <template #right>
+          <AppField
+            v-model="searchText"
+            search
+            compact
+            placeholder="Search"
+            klass="app-toolbar__search"
+          />
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="loadList()"
+          />
+          <local-pagination
+            v-if="canViewServiceProviders"
+            v-model="page"
+            :length="pages"
+            @update:value="loadList()"
+          />
+        </template>
+      </CardToolbar>
+
+      <div class="app-table-scroll">
         <v-data-table
           v-if="canViewServiceProviders"
           :headers="headers"
@@ -111,6 +94,7 @@
           :items-per-page="pageSize"
           fixed-header
           hide-default-footer
+          :loading="loading"
           class="sp-table"
           style="max-height: calc(100vh - 280px)"
         >
@@ -222,12 +206,16 @@
             </v-menu>
           </template>
         </v-data-table>
-        <v-card-text v-else class="text-body-2 text-medium-emphasis">
-          You do not have permission to view service providers.
-        </v-card-text>
-      </v-card>
-    </v-col>
-  </v-row>
+      </div>
+
+      <div
+        v-if="!canViewServiceProviders"
+        class="pa-4 text-body-2 text-medium-emphasis"
+      >
+        You do not have permission to view service providers.
+      </div>
+    </AppCard>
+  </div>
 
   <v-dialog v-model="viewDialog" max-width="514">
     <v-card rounded="lg" class="sp-members-card">
@@ -791,6 +779,12 @@ const { requiredRule, emailRule, debounce } = useUtils();
 const { getUserByEmail } = useUser();
 
 const listTab = ref<ListTab>("active");
+/** The same three tabs, in the same order, with the same labels. */
+const listTabs: Array<{ value: ListTab; label: string }> = [
+  { value: "active", label: "Service Providers" },
+  { value: "pending", label: "Pending" },
+  { value: "inactive", label: "In-Active" },
+];
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
@@ -1489,32 +1483,8 @@ async function submitServiceProviderInvite() {
 </script>
 
 <style scoped>
-.sp-toolbar-top {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 4px;
-}
-
-.sp-table-header {
-  /* Was a hardcoded #f5f5f5 with a black border: in dark mode the tab strip
-     became a white slab and the tab labels and the page range disappeared
-     into it. These take the colour of whichever theme they are in. */
-  background: rgb(var(--v-theme-surface-light, var(--v-theme-surface)));
-  border-bottom: 1px solid
-    rgba(var(--v-border-color), var(--v-border-opacity));
-}
-
-.sp-tabs {
-  width: 100%;
-  min-height: 40px;
-}
-
-.sp-tabs :deep(.v-tab) {
-  min-width: 120px;
-  justify-content: flex-start;
-  text-transform: none;
-}
+/* The tab strip's own theming went with the strip: the tabs are the card's
+   first row now and take `.app-tab` from the shared primitives. */
 
 .sp-col-company {
   max-width: 220px;

package/components/SwitchContext.vue

@@ -15,7 +15,10 @@
           :to="props.route"
           class="text-subtitle-2 font-weight-bold"
         >
-          <v-list-item-title class="text-truncate">
+          <!-- The design prints the organisation and site names in full.
+               Vuetify's list-item title truncates by default, which cut them
+               to "Property Managem…" / "Seventh Cond…" in the 252px rail. -->
+          <v-list-item-title class="switch-context__name">
             {{ name || `Select ${prop.title}` }}
           </v-list-item-title>
         </v-list-item>
@@ -100,9 +103,38 @@ const name = computed(() => {
   return prop.items.find((item) => item.value === selected.value)?.text ?? "";
 });
 
+/**
+ * THE BREADCRUMB'S SITE HALF.
+ *
+ * The top bar draws `Site name / Page`, but the site's NAME is only ever
+ * resolved here - each application loads its own site list and hands it to
+ * this selector, so the bar had nothing to print and showed the page alone.
+ * The label already on screen is mirrored into shared state for the bar to
+ * read. It is a label: no request is made, and what the selector selects is
+ * untouched.
+ */
+const shellSiteName = useState<string>("shell-context-site-name", () => "");
+
+watchEffect(() => {
+  if (prop.title?.toLowerCase() === "site" && name.value) {
+    shellSiteName.value = name.value;
+  }
+});
+
 const selectItem = (value: string) => {
   selected.value = value;
   menu.value = false;
   emit("select", value);
 };
 </script>
+
+<style scoped>
+/* Wrap onto a second line instead of truncating - the design shows the full
+   organisation and site names. */
+.switch-context__name {
+  white-space: normal;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  line-height: 1.25;
+}
+</style>

package/components/WorkOrder/Main.vue

@@ -1,58 +1,47 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center" justify="space-between">
-        <v-btn
-          class="text-none text-capitalize"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="(showCreateDialog = true), (isEditMode = false)"
-          v-if="canCreateWorkOrder"
-        >
+  <div>
+    <!--
+      The design's page scaffold. The screen had no heading, its Create button
+      sat top-left and the search floated top-right outside the card, with
+      refresh and the pager stacked on their own bar above the table. Same
+      button, same dialog, same permission, same debounced search, same pager.
+    -->
+    <PageHeader title="Work Orders">
+      <template v-if="canCreateWorkOrder" #actions>
+        <AppButton @click="(showCreateDialog = true), (isEditMode = false)">
           Create Work Order
-        </v-btn>
-
-        <v-text-field
-          v-model="searchText"
-          placeholder="Search work order..."
-          variant="outlined"
-          density="comfortable"
-          clearable
-          hide-details
-          class="ml-2"
-          style="max-width: 250px"
-        />
-      </v-row>
-    </v-col>
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="updatePage(1)">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
+              @click="updatePage(1)"
+            />
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="updatePage"
-              />
-            </v-row>
+          <template #right>
+            <AppField
+              v-model="searchText"
+              search
+              compact
+              placeholder="Search work order..."
+              klass="app-toolbar__search"
+            />
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="updatePage"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -62,6 +51,7 @@
           fixed-header
           hide-default-footer
           :hide-default-header="false"
+          :loading="loading"
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))"
         >
@@ -69,9 +59,10 @@
             {{ formatDateDDMMYYYYLocal(item.createdAt) }}
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
-  </v-row>
+    </v-row>
+  </div>
 
   <WorkOrderCreate
     v-model="showCreateDialog"

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.91",
+  "version": "3.2.2-staging.93",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {