@7365admin1/layer-common 3.2.1 → 3.2.2-staging.101

package/components/InvitationMain.vue

@@ -1,67 +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"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @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="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <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>
+              {{ tab.label }}
+            </NuxtLink>
           </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="getVerifications"
-              />
-            </v-row>
-          </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"
@@ -77,7 +55,7 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ value.length }}</v-chip>
+            <StatusChip :dot="false" tone="info" :label="String(value.length)" />
           </template>
           <template #item.createdAt="{ item }">
             {{ item.createdAt ? formatDate(item.createdAt) : "" }}
@@ -103,7 +81,7 @@
             {{ formatStatus(value) }}
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
 
     <ConfirmDialog
@@ -153,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

@@ -1,43 +1,87 @@
 <template>
-  <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
+  <!--
+    PHASE 2 - THE 58px TOP BAR.
+
+    Same bar, same hamburger, same theme toggle, same profile menu with the
+    same two actions. What changes is its height (the design's 58px), the
+    breadcrumb it now carries, and the shape of the menu it opens.
+
+    The breadcrumb READS state that is already in the page - the site the
+    application has loaded and the route the router is on. It fetches nothing
+    and navigates nowhere; it is a label.
+  -->
+  <v-app-bar
+    :height="58"
+    flat
+    scroll-behavior="elevate"
+    scroll-threshold="200"
+    class="app-topbar-shell"
+  >
     <v-app-bar-nav-icon v-if="!props.hideNavIcon" @click="drawer = !drawer"></v-app-bar-nav-icon>
 
+    <div class="app-topbar-shell__crumb">
+      <span v-if="siteName" class="app-topbar-shell__site">{{ siteName }}</span>
+      <span v-if="siteName && moduleName" class="app-topbar-shell__sep">/</span>
+      <span class="app-topbar-shell__module">{{ moduleName }}</span>
+    </div>
+
     <template #append>
-      <v-btn icon="mdi-theme-light-dark" variant="text" class="mx-2" @click="toggleTheme" />
+      <!--
+        The icon now says which theme you would GET, and the choice is
+        remembered - see `composables/useThemePreference.ts`. Same button, same
+        place, same one click.
+      -->
+      <!-- The design's 36px bordered icon button. Same one click, same icon. -->
+      <v-btn
+        :icon="current === 'dark' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
+        :aria-label="current === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'"
+        variant="text"
+        size="36"
+        class="app-topbar-shell__icon-btn ms-2"
+        @click="toggleTheme"
+      />
 
       <v-menu offset="10px" :close-on-content-click="false">
         <template #activator="{ props }">
-          <v-btn fab variant="text" icon v-bind="props" class="mx-2">
+          <v-btn fab variant="text" icon v-bind="props" class="ms-2 me-1">
             <AvatarMain :image-src="currentUser?.profile" :name="name" />
           </v-btn>
         </template>
 
-        <v-card width="350" max-height="600px" elevation="2" rounded="xl" class="pa-4">
-          <v-row no-gutters>
-            <v-col cols="12">
-              <v-row no-gutters justify="center">
-               <AvatarMain :image-src="currentUser?.profile" :name="name" />
-              </v-row>
-            </v-col>
-
-            <v-col cols="12" class="text-center mt-2 mb-4">
-              {{ name }}
-            </v-col>
-
-            <v-col cols="12" class="mb-3">
-              <v-btn v-if="APP_NAME.toLowerCase() !== 'account'" block rounded="xl" variant="tonal" size="x-large"
-                class="text-none text-subtitle-1 font-weight-regular" @click="redirect(APP_ACCOUNT, 'home')">
-                Manage Account
-              </v-btn>
-            </v-col>
-
-            <v-col cols="12">
-              <v-btn block rounded="xl" variant="tonal" size="x-large"
-                class="text-none text-subtitle-1 font-weight-regular" @click="logout()">
-                Logout
-              </v-btn>
-            </v-col>
-          </v-row>
+        <!--
+          240px, 14px radius and the design's menu shadow. The two actions and
+          the condition on the first are exactly as they were.
+        -->
+        <v-card :width="240" elevation="0" class="app-profile-menu">
+          <div class="app-profile-menu__head">
+            <AvatarMain :image-src="currentUser?.profile" :name="name" />
+
+            <div class="app-profile-menu__who">
+              <div class="app-profile-menu__name">{{ name }}</div>
+              <div v-if="siteName" class="app-profile-menu__site">{{ siteName }}</div>
+            </div>
+          </div>
+
+          <div class="app-profile-menu__rows">
+            <button
+              v-if="APP_NAME.toLowerCase() !== 'account'"
+              type="button"
+              class="app-profile-menu__row"
+              @click="redirect(APP_ACCOUNT, 'home')"
+            >
+              <v-icon icon="mdi-account-cog-outline" size="18" />
+              Manage Account
+            </button>
+
+            <button
+              type="button"
+              class="app-profile-menu__row app-profile-menu__row--danger"
+              @click="logout()"
+            >
+              <v-icon icon="mdi-logout" size="18" />
+              Logout
+            </button>
+          </div>
         </v-card>
       </v-menu>
     </template>
@@ -45,8 +89,6 @@
 </template>
 
 <script setup lang="ts">
-import { useTheme } from "vuetify";
-
 const props = defineProps({
   hideNavIcon: {
     type: Boolean,
@@ -64,14 +106,76 @@ const { redirect } = useUtils();
 
 const { APP_ACCOUNT, APP_MAIN, APP_NAME } = useRuntimeConfig().public;
 
-const theme = useTheme();
-
-function toggleTheme() {
-  theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
-}
+/**
+ * This used to be `theme.global.name.value = ...` and nothing else, so the
+ * choice was gone on the next reload - and, because these are eleven separate
+ * applications, gone again on every hop between them. The composable writes the
+ * layer's shared `theme` cookie, and `plugins/vuetify.ts` boots on it.
+ */
+const { current, toggleTheme } = useThemePreference();
 
 const { currentUser } = useLocalAuth();
 
+/**
+ * THE BREADCRUMB: `Site name / Current module`.
+ *
+ * Both halves are read from what the page already holds - the shared `site`
+ * state the applications populate, and the router's own current route. NO
+ * request is made from this component; if the site has not been loaded on a
+ * given screen the site half is simply omitted and the module stands alone.
+ */
+const { site } = useSite();
+
+/**
+ * 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();
+
+/**
+ * The module's name comes off the route name, which the applications build
+ * from their own folder structure: `org-site-work-orders` is Work Orders.
+ * Leading parameter segments (`org`, `site`) are skipped and the name stops at
+ * the first one that follows, so a detail route (`...-feedbacks-id`) and a
+ * status route (`...-members-status`) both name their module rather than their
+ * argument.
+ */
+const ACRONYMS: Record<string, string> = {
+  cctv: "CCTV",
+  hid: "HID",
+  dob: "DOB",
+  anpr: "ANPR",
+  nfc: "NFC",
+  qr: "QR",
+  soa: "SOA",
+  sp: "SP",
+  id: "ID",
+};
+
+const moduleName = computed(() => {
+  const segments = String(route.name ?? "").split("-").filter(Boolean);
+  const params = new Set(Object.keys(route.params ?? {}));
+
+  let i = 0;
+  while (i < segments.length && params.has(segments[i])) i++;
+
+  const words: string[] = [];
+  while (i < segments.length && !params.has(segments[i])) words.push(segments[i++]);
+
+  return words
+    .map((w) => ACRONYMS[w] ?? w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+});
+
 const profile = computed(() => {
   return `/api/public/${currentUser.value?.profile}`;
 });
@@ -95,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() || ""
 
 })
 
@@ -105,6 +212,151 @@ const { getNameInitials } = useUtils();
 </script>
 
 <style scoped>
+/* ---------------------------------------------------------------- */
+/* The top bar.                                                      */
+/* ---------------------------------------------------------------- */
+
+/**
+ * The design's bar is 58px INCLUDING its rule. A real `border-bottom` is added
+ * to the 58px Vuetify lays out, so the bar measures 59 and every page below it
+ * starts a pixel low; an inset shadow draws the same 1px line inside the 58.
+ */
+.app-topbar-shell,
+.app-profile-menu {
+  /* The shell is the first surface to wear the design's typeface - see the
+     note in NavigationDrawer.vue. */
+  font-family: var(--font-sans);
+}
+
+.app-topbar-shell {
+  box-shadow: inset 0 -1px 0 var(--border);
+}
+
+.app-topbar-shell__crumb {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-breadcrumb);
+  /* Truncates rather than wraps: two lines would break a 58px bar, and the
+     site name is the half worth losing first. */
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.app-topbar-shell__site,
+.app-topbar-shell__sep {
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-topbar-shell__module {
+  color: var(--text);
+  font-weight: 700;
+  flex: 0 0 auto;
+}
+
+/**
+ * THE TOP-BAR AVATAR is the design's accent-soft circle with accent-text
+ * initials, and only this one. `AvatarMain` gives every person a colour of
+ * their own from their name, which is right in a list of people - it is how
+ * you tell two rows apart - and wrong for the one avatar that is always the
+ * same person. `!important` because that per-person colour arrives as an
+ * inline style, and the rule is confined to the bar and its own menu.
+ */
+.app-topbar-shell :deep(.v-avatar),
+.app-profile-menu :deep(.v-avatar) {
+  background-color: var(--accent-soft) !important;
+  /* The initials' colour arrives inline as well, and in dark mode it is the
+     per-person colour ON a blue wash: 1.26:1, invisible. */
+  color: var(--accent-text) !important;
+  font-weight: 800;
+}
+
+/* 36px, 1px border, 10px radius - the design's icon button. */
+.app-topbar-shell__icon-btn {
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+}
+
+/* ---------------------------------------------------------------- */
+/* The 240px profile menu.                                           */
+/* ---------------------------------------------------------------- */
+
+.app-profile-menu {
+  border-radius: var(--r-menu);
+  box-shadow: var(--shadow-menu);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.app-profile-menu__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.app-profile-menu__who {
+  min-width: 0;
+}
+
+.app-profile-menu__name {
+  font-size: 13.5px;
+  font-weight: 800;
+  line-height: 1.3;
+  color: var(--text);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.app-profile-menu__site {
+  font-size: 11.5px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--muted);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.app-profile-menu__rows {
+  padding: 6px;
+}
+
+.app-profile-menu__row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: var(--r-inner-sm);
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn);
+  color: var(--text2);
+  text-align: start;
+  cursor: pointer;
+  background: transparent;
+}
+
+.app-profile-menu__row:hover {
+  background: var(--hover);
+}
+
+/* Logout is the design's red row: the colour lives on the label, and the
+   soft error background is what the hover paints. */
+.app-profile-menu__row--danger {
+  color: var(--err);
+}
+
+.app-profile-menu__row--danger:hover {
+  background: var(--err-bg);
+}
+
 .APP_NAME {
   display: inline-block;
   word-wrap: break-word;