@7365admin1/layer-common 4.95.0 → 4.96.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @iservice365/layer-common
 
+## 4.96.0
+
+### Minor Changes
+
+- 8fae702: Inventory: requested stock is set aside at once (Available / set aside for requests), Received / Not received after approval, write-offs (used up, spoilt, damaged, lost, other), holder-started returns, draft take-over and "Also attended", low-stock acknowledge with PO number and reminder setting, Reconciliation report with Excel export, Written off columns, and a "Switch property" hint for people who work at several sites. Screens hide the new actions when the API does not have them yet. Technicians see colleagues' open jobs in My Stock with Take over, and approved / confirm-received notifications open that exact request.
+
+### Patch Changes
+
+- 7b70ce1: Inventory wording and setup fixes from the store keeper walk: store setup names the property instead of its id, quantities read "1 pc" / "2 pcs", "(asked N)" only when less was handed over than asked, a shelf write-off starts with no reason chosen, form errors only after a field is left or the button is pressed, no empty box under "Give to", Receive dialog titled by type (PO / DO / cash purchase), and the reminder setting says "0 = no reminders".
+
 ## 4.95.0
 
 ### Minor Changes
@@ -2066,11 +2076,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                                    GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                                    GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                                      GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                                      GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                                    owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                                    staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                                      owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                                      staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/InventoryHistoryDialog.vue

@@ -24,7 +24,7 @@
             <tbody>
               <tr v-for="h in holdings" :key="h._id">
                 <td>{{ h.itemName }}</td>
-                <td class="text-right">{{ h.qty }} {{ h.unit }}</td>
+                <td class="text-right">{{ qtyUnit(h.qty, h.unit) }}</td>
                 <td class="text-right">{{ h.inDrafts || "—" }}</td>
                 <td class="text-right">{{ h.usedThisMonth ?? 0 }}</td>
               </tr>
@@ -58,13 +58,18 @@
           <template #item.date="{ value }">{{ standardFormatDateTime(value) }}</template>
           <template #item.what="{ item }">{{ historyText(item) }}</template>
           <template #item.person="{ item }">{{ item.holderLabel || item.holderName || "—" }}</template>
-          <template #item.qty="{ item }">{{ item.qty }} {{ item.unit }}</template>
+          <template #item.qty="{ item }">{{ qtyUnit(item.qty, item.unit) }}</template>
           <template #item.where="{ item }">{{ whereText(item.location) || (item.type === "handover" ? item.remarks : "") || "—" }}</template>
           <template #item.reference="{ item }">{{ item.type === "handover" ? "—" : item.reference || "—" }}</template>
           <template #item.photos="{ item }">
             <InventoryPhotoThumbs :photos="item.photos" :before-at="item.photosBeforeAt" :after-at="item.photosAfterAt" />
           </template>
-          <template #item.by="{ item }">{{ item.createdByLabel || item.createdByName }}</template>
+          <template #item.by="{ item }">
+            {{ item.createdByLabel || item.createdByName }}
+            <div v-if="item.attendedWith" class="text-caption text-medium-emphasis">Also attended: {{ item.attendedWith }}</div>
+            <div v-if="item.startedByName" class="text-caption text-medium-emphasis">Started by {{ item.startedByName }}</div>
+            <div v-if="item.type === 'write_off' && item.remarks" class="text-caption text-medium-emphasis">"{{ item.remarks }}"</div>
+          </template>
           <template #item.holderBalance="{ value }">{{ value ?? "—" }}</template>
         </v-data-table-server>
       </v-card-text>
@@ -77,6 +82,7 @@ import useInventory from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
 import useLocalAuth from "../composables/useLocalAuth";
 import { historyText, whereText } from "../utils/inventory-usage";
+import { inventoryStepsLive, qtyUnit } from "../utils/inventory-ack";
 
 /**
  * History of stock (owner 2026-09-29, "where they used their stock"): one person's (`holder`, "me" =
@@ -116,6 +122,7 @@ const typeChoices = [
   { value: "issue", title: "Taken from store" },
   { value: "handover", title: "Hand-overs" },
   { value: "return", title: "Given back" },
+  ...(inventoryStepsLive(props.store) ? [{ value: "write_off", title: "Written off" }] : []),
 ];
 
 const intro = computed(() =>

package/components/InventoryItemDetail.vue

@@ -10,7 +10,9 @@
         <div class="d-flex flex-wrap ga-4 mb-4">
           <v-img v-if="item.photo" :src="getFileUrl(item.photo)" width="120" height="120" cover class="rounded flex-grow-0" />
           <div class="flex-grow-1">
-            <div class="text-h5 mb-1" :class="item.lowStock ? 'text-error' : ''">{{ item.onHand }} {{ item.unit }} in store</div>
+            <div class="text-h5 mb-1" :class="item.lowStock ? 'text-error' : ''">{{ qtyUnit(item.onHand, item.unit) }} in store</div>
+            <div v-if="item.reserved" class="text-body-2 mb-1">{{ availableText(item) }} (the rest is set aside for requests waiting for approval)</div>
+            <div v-if="item.lowStockAlert" class="text-body-2 text-error mb-1">{{ lowStockAlertText(item.lowStockAlert, standardFormatDate) }}</div>
             <div class="text-body-2 text-medium-emphasis">
               {{ [inventoryItemMeta(item), item.reorderLevel ? `Alert at ${item.reorderLevel}` : "", item.unitCost !== undefined ? `$${Number(item.unitCost).toFixed(2)} each` : ""].filter(Boolean).join(" · ") }}
             </div>
@@ -21,7 +23,18 @@
         <div class="d-flex flex-wrap ga-2 mb-4" v-if="ctl.editItem || ctl.count">
           <v-btn v-if="ctl.editItem" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-pencil-outline" @click="emit('edit', item)">Edit item</v-btn>
           <v-btn v-if="ctl.count" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-counter" @click="counting = !counting">Stock count</v-btn>
+          <v-btn v-if="ctl.count && stepsLive && item.onHand > 0" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-delete-alert-outline" @click="writingOff = true">Write off</v-btn>
         </div>
+        <InventoryWriteOffDialog
+          v-model="writingOff"
+          :store="store"
+          from="store"
+          :item="item._id"
+          :item-name="item.name"
+          :unit="item.unit"
+          :max="item.onHand"
+          @done="(show = false), emit('done')"
+        />
 
         <v-form v-if="counting" ref="countForm" class="mb-4">
           <AppCard class="pa-4">
@@ -80,6 +93,7 @@ import useUtils from "../composables/useUtils";
 import { inventoryItemMeta } from "../utils/inventory-store-label";
 import { inventoryControls } from "../utils/inventory-presets";
 import { receiptRefText } from "../utils/inventory-receiving";
+import { availableText, inventoryStepsLive, lowStockAlertText, qtyUnit, writeOffLabel } from "../utils/inventory-ack";
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({
@@ -103,6 +117,8 @@ const counted = ref<number | null>(null);
 const reason = ref("");
 const saving = ref(false);
 const countForm = ref();
+const writingOff = ref(false);
+const stepsLive = computed(() => inventoryStepsLive(props.store));
 
 const formatDate = (d: string) => standardFormatDate(d);
 
@@ -121,6 +137,7 @@ function describe(t: TInventoryTransaction) {
       t.reference || "",
     );
   if (t.type === "adjust") parts.push(t.remarks || "");
+  if (t.type === "write_off") parts.push(`${t.qty} ${writeOffLabel(t.writeOffReason).toLowerCase()}`, (t.holderChange ?? 0) < 0 ? `by ${who}` : "from the shelf", t.remarks || "");
   if (t.type === "opening") parts.push(t.supplier || "", t.reference ? `PO ${t.reference}` : "", t.receivedBy ? `received by ${t.receivedBy}` : "", t.remarks || "");
   return parts.filter(Boolean).join(" · ");
 }

package/components/InventoryItemDialog.vue

@@ -7,7 +7,7 @@
         <v-btn icon="mdi-close" variant="text" class="screen-modal__close" aria-label="Close" @click="show = false" />
       </v-card-title>
       <v-card-text class="screen-modal__body">
-        <v-form ref="form">
+        <v-form ref="form" validate-on="blur invalid-input">
           <InputLabel title="Item name" required class="mb-1" />
           <v-text-field v-model="f.name" :rules="[requiredRule]" density="comfortable" placeholder="e.g. Philips T8 2ft 9W LED Tube" />
           <v-row dense>

package/components/InventoryLinesDialog.vue

@@ -9,7 +9,8 @@
 
       <v-card-text class="screen-modal__body">
         <p class="text-body-2 text-medium-emphasis mb-4">{{ copy.help }}</p>
-        <v-form ref="form">
+        <!-- Errors once a field is left or the button is pressed, never from opening or resetting the form. -->
+        <v-form ref="form" validate-on="blur invalid-input">
           <template v-if="mode === 'receive'">
             <InputLabel title="How did this stock come in?" required class="mb-1" />
             <v-btn-toggle v-model="receivingType" mandatory divided variant="outlined" density="comfortable" class="mb-1 receiving-type">
@@ -40,7 +41,7 @@
               </template>
             </v-autocomplete>
             <v-alert v-if="usedByWarning" type="warning" variant="tonal" density="compact" class="mt-2">{{ usedByWarning }}</v-alert>
-            <v-text-field v-else :model-value="holderName" density="comfortable" readonly />
+            <v-text-field v-if="mode !== 'issue'" :model-value="holderName" density="comfortable" readonly />
           </template>
 
           <div class="text-subtitle-2 mb-2">Items</div>
@@ -170,6 +171,7 @@
 import useInventory, { pickedDate } from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
 import { normaliseUsedBy, usedByChips, usedByText } from "../utils/inventory-used-by";
+import { availableQty, availableText as availableTextOf, qtyUnit } from "../utils/inventory-ack";
 import { RECEIVING_TYPES, receivingFields, receivingProblem, type TReceivingType } from "../utils/inventory-receiving";
 
 type TMode = "receive" | "issue" | "request" | "return";
@@ -194,7 +196,7 @@ const notify = inject<(text: string, color?: string) => void>("inventoryNotify",
 const COPY: Record<TMode, { title: string; help: string; button: string; success: string }> = {
   receive: {
     title: "Receive Stock",
-    help: "Record a delivery from a supplier. The quantities are added to the store straight away.",
+    help: "The quantities are added to the store straight away.",
     button: "Add to store",
     success: "Stock received.",
   },
@@ -217,7 +219,27 @@ const COPY: Record<TMode, { title: string; help: string; button: string; success
     success: "Stock returned to the store.",
   },
 };
-const copy = computed(() => COPY[props.mode]);
+// The API sets requested stock aside at once (owner 2026-10-03) when its items carry `available`.
+const reserving = computed(() => itemChoices.value.some((i) => i.available !== undefined));
+const RECEIVE_TITLES: Record<TReceivingType, string> = { PO: "Record a delivery for a PO", DO: "Record a delivery order (DO)", CASH: "Record a cash purchase" };
+const copy = computed(() => {
+  const c = COPY[props.mode];
+  if (props.mode === "receive") return { ...c, title: RECEIVE_TITLES[receivingType.value] };
+  if (!reserving.value) return c;
+  if (props.mode === "request")
+    return {
+      ...c,
+      help: "Ask the store for what you need, up to what is available (shown under each item). The quantity is set aside for you as soon as you send it, so nobody else can take it. If the request is rejected or cancelled, it goes back to the store.",
+      success: "Request sent. The items are set aside for you until the store keeper approves. Then open My Requests and tap Received once you have them.",
+    };
+  if (props.mode === "issue")
+    return {
+      ...c,
+      help: "Hand stock to someone at the store counter. It leaves the store at once. They tap Received in their app to confirm they got it, and can use it after that.",
+      success: "Stock issued. The person is asked to tap Received to confirm they got it.",
+    };
+  return c;
+});
 
 const form = ref();
 const saving = ref(false);
@@ -254,12 +276,15 @@ const choices = computed<any[]>(() =>
 const siteChoices = computed(() => (props.sites.length ? props.sites : props.store.sites.map((_id) => ({ _id, name: _id === props.siteId ? "This property" : "Other property" }))));
 
 const unitOf = (id: string) => choices.value.find((c) => c._id === id)?.unit ?? "";
-const availableOf = (id: string) => choices.value.find((c) => c._id === id)?.onHand;
+const availableOf = (id: string) => {
+  const c = choices.value.find((x) => x._id === id);
+  return c && (props.mode === "request" || props.mode === "issue") ? availableQty(c) : c?.onHand;
+};
 
 function availableText(item: any) {
-  if (props.mode === "return") return `In hand: ${item.onHand} ${item.unit}`;
-  if (props.mode === "receive") return `In store: ${item.onHand} ${item.unit}`;
-  return `Available: ${item.onHand} ${item.unit}`;
+  if (props.mode === "return") return `In hand: ${qtyUnit(item.onHand, item.unit)}`;
+  if (props.mode === "receive") return `In store: ${qtyUnit(item.onHand, item.unit)}`;
+  return availableTextOf(item);
 }
 
 function qtyRule(line: TRow) {
@@ -270,7 +295,7 @@ function qtyRule(line: TRow) {
     const total = rows.value.filter((r) => r.item === line.item).reduce((s, r) => s + Number(r.qty || 0), 0);
     // Requests too (client 2026-10-02): nobody can ask for more than the store has; the server refuses it as well.
     if (available !== undefined && total > available)
-      return available > 0 ? `Only ${available} ${unitOf(line.item)} in the store — ask for ${available} or fewer` : "None left in the store";
+      return available > 0 ? `Only ${qtyUnit(available, unitOf(line.item))} available — ${props.mode === "request" ? "ask for" : "give"} ${available} or fewer` : "None available right now";
     return true;
   };
 }
@@ -364,6 +389,7 @@ async function submit() {
 
 watch(show, (open) => {
   if (!open) return;
+  form.value?.resetValidation();
   rows.value = [blank()];
   supplier.value = "";
   reference.value = "";

package/components/InventoryMain.vue

@@ -34,6 +34,22 @@
       Equipment is now in Inventory.
     </v-alert>
 
+    <!-- Client 2026-10-02 (Winsland): each property keeps its own stock, so say plainly whose stock this is. -->
+    <v-alert v-if="mySites.length > 1" type="info" variant="tonal" density="compact" class="mb-4" icon="mdi-office-building-marker-outline">
+      <div class="d-flex flex-wrap align-center ga-2">
+        <span>You are viewing <strong>{{ currentSiteName }}</strong>'s inventory.</span>
+        <v-spacer />
+        <v-menu>
+          <template #activator="{ props: menu }">
+            <v-btn v-bind="menu" size="small" variant="outlined" class="text-none" append-icon="mdi-chevron-down">Switch property</v-btn>
+          </template>
+          <v-list density="compact" max-height="320">
+            <v-list-item v-for="s in mySites" :key="s._id" :title="s.name" :active="s._id === siteId" @click="switchSite(s._id)" />
+          </v-list>
+        </v-menu>
+      </div>
+    </v-alert>
+
     <v-progress-linear v-if="loading" indeterminate color="primary" class="mb-4" />
 
     <AppCard v-else-if="loadError" class="pa-6">
@@ -62,7 +78,7 @@
           <InputLabel title="Properties this store supplies" required class="mb-1" />
           <v-select
             v-model="setup.sites"
-            :items="orgSites"
+            :items="setupSiteOptions"
             item-title="name"
             item-value="_id"
             multiple
@@ -99,6 +115,12 @@
           <v-btn size="small" variant="flat" color="warning" class="text-none" @click="tab = 'requests'">Review requests</v-btn>
         </div>
       </v-alert>
+      <v-alert v-if="toConfirm > 0 && tab !== 'mine'" type="warning" variant="tonal" density="compact" class="mb-4" icon="mdi-package-variant-closed-check">
+        <div class="d-flex align-center flex-wrap ga-2">
+          <span>{{ toConfirm === 1 ? "1 delivery is" : `${toConfirm} deliveries are` }} waiting for you to tap Received. You can use the items after that.</span>
+          <v-btn size="small" variant="flat" color="warning" class="text-none" @click="tab = 'mine'">Open My Stock</v-btn>
+        </div>
+      </v-alert>
       <v-tabs v-model="tab" color="primary" class="mb-4" show-arrows>
         <v-tab v-for="t in tabs" :key="t.value" :value="t.value" class="text-none">
           {{ t.label }}
@@ -114,7 +136,7 @@
           <InventoryMyStockTab :store="store" :site-id="siteId" :sites="storeSites" @changed="refreshCounts" />
         </v-window-item>
         <v-window-item v-if="ctl.tabs.requests" value="requests">
-          <InventoryRequestsTab :store="store" :site-id="siteId" @changed="refreshCounts" />
+          <InventoryRequestsTab :store="store" :site-id="siteId" :focus-request="focusRequest" @changed="refreshCounts" />
         </v-window-item>
         <v-window-item v-if="ctl.tabs.people" value="technicians">
           <InventoryTechniciansTab :store="store" @changed="refreshCounts" />
@@ -139,9 +161,12 @@
 import useInventory from "../composables/useInventory";
 import useWorkerTerm from "../composables/useWorkerTerm";
 import useSite from "../composables/useSite";
+import useCustomerSite from "../composables/useCustomerSite";
 import useUtils from "../composables/useUtils";
-import { inventoryManagedBy, inventoryStoreLabel, inventorySuppliesText } from "../utils/inventory-store-label";
+import { inventoryManagedBy, inventorySiteOptions, inventoryStoreLabel, inventorySuppliesText } from "../utils/inventory-store-label";
 import { inventoryControls } from "../utils/inventory-presets";
+import { inventoryStepsLive } from "../utils/inventory-ack";
+import useLocalAuth from "../composables/useLocalAuth";
 
 const props = defineProps({
   orgId: { type: String, required: true },
@@ -152,8 +177,10 @@ const movedFromEquipment = useRoute().query.moved === "equipment";
 // A notification link (`?storeId=&tab=`, NotificationBell): open that store on that tab, once.
 const linkQuery = useRoute().query;
 const linked = { storeId: String(linkQuery.storeId ?? ""), tab: String(linkQuery.tab ?? "") };
+// `?requestId=` (approved / confirm-received alerts): the Requests tab opens on that request.
+const focusRequest = String(linkQuery.requestId ?? "");
 
-const { getStores, createStore: apiCreateStore, getRequests, getReport } = useInventory();
+const { getHandovers, getStores, getStore, createStore: apiCreateStore, getRequests, getReport } = useInventory();
 const { getSites } = useSite();
 const { requiredRule } = useUtils();
 
@@ -217,7 +244,7 @@ const tabs = computed(() => {
     // Hide, never grey: each tab only for the job that uses it (API-core decides `access`).
     ...(ctl.value.tabs.mine ? [{ value: "mine", label: "My Stock" }] : []),
     ...(ctl.value.tabs.requests ? [{ value: "requests", label: a.canApprove ? "Requests" : "My Requests", badge: a.canApprove ? pendingCount.value : 0 }] : []),
-    ...(ctl.value.tabs.people ? [{ value: "technicians", label: worker.many }] : []),
+    ...(ctl.value.tabs.people ? [{ value: "technicians", label: worker.many, badge: returnsWaiting.value }] : []),
     ...(ctl.value.tabs.reports ? [{ value: "reports", label: a.canReports ? "Reports" : "Usage check" }] : []),
     ...(!ctl.value.tabs.reports && companyUsage.value ? [{ value: "reports", label: "Company usage" }] : []),
     ...(ctl.value.tabs.suppliers ? [{ value: "suppliers", label: "Suppliers" }] : []),
@@ -244,6 +271,7 @@ async function loadStores() {
     loading.value = false;
   }
   refreshCounts();
+  loadStoreDetail();
 }
 
 /**
@@ -265,7 +293,38 @@ async function probeCompanyUsage() {
   }
 }
 
+/** Stock issued to me that I have not confirmed yet (only where the API has the Received step). */
+const toConfirm = ref(0);
+const { currentUser } = useLocalAuth();
+async function refreshToConfirm() {
+  const s = store.value;
+  toConfirm.value = 0;
+  if (!s || !ctl.value.tabs.mine || !inventoryStepsLive(s)) return;
+  try {
+    const me = String(currentUser.value?._id ?? "");
+    const res = await getRequests(s._id, { status: "issued", limit: 100 });
+    toConfirm.value = res.items.filter((r) => String(r.requestedBy) === me && (r.ackStatus === "awaiting" || r.ackStatus === "not_received")).length;
+  } catch {
+    toConfirm.value = 0;
+  }
+}
+
+/** Returns started by holders, waiting for a store keeper (badge on the staff tab). */
+const returnsWaiting = ref(0);
+async function refreshReturns() {
+  const s = store.value;
+  returnsWaiting.value = 0;
+  if (!s || !ctl.value.takeReturn || !inventoryStepsLive(s)) return;
+  try {
+    returnsWaiting.value = (await getHandovers(s._id, { status: "pending", limit: 1 }))?.returnsWaiting ?? 0;
+  } catch {
+    returnsWaiting.value = 0;
+  }
+}
+
 async function refreshCounts() {
+  refreshToConfirm();
+  refreshReturns();
   if (!store.value?.access.canApprove) return (pendingCount.value = 0);
   try {
     pendingCount.value = (await getRequests(store.value._id, { status: "pending", limit: 1 }))?.pendingCount ?? 0;
@@ -274,6 +333,47 @@ async function refreshCounts() {
   }
 }
 
+/** The properties this person works at in this organisation (the same list as the site switcher). */
+const { getAll: getCustomerSites } = useCustomerSite();
+const mySites = ref<{ _id: string; name: string }[]>([]);
+// The property being viewed may be one the organisation serves, not owns: name it, never show its id.
+const setupSiteOptions = computed(() =>
+  inventorySiteOptions(orgSites.value, { sites: setup.sites, siteNames: [...mySites.value, { _id: props.siteId, name: currentSiteName.value }] }),
+);
+const currentSiteName = computed(() => mySites.value.find((s) => s._id === props.siteId)?.name || storeSites.value.find((s) => s._id === props.siteId)?.name || "this property");
+async function loadMySites() {
+  try {
+    const res = await getCustomerSites({ org: props.orgId, limit: 100 });
+    const seen = new Set<string>();
+    mySites.value = (res?.items ?? [])
+      .map((i: any) => ({ _id: String(i.site ?? ""), name: String(i.name ?? "") }))
+      .filter((s: { _id: string }) => s._id && !seen.has(s._id) && seen.add(s._id));
+  } catch {
+    mySites.value = [];
+  }
+}
+const route = useRoute();
+function switchSite(site: string) {
+  if (site === props.siteId) return;
+  navigateTo({ name: route.name as string, params: { ...route.params, site } });
+}
+
+/** The store's own settings (the reminder interval also tells the screens the new steps exist on the server). */
+async function loadStoreDetail() {
+  const s = store.value;
+  if (!s) return;
+  try {
+    const full = await getStore(s._id);
+    if (typeof full?.lowStockReminderDays === "number") {
+      s.lowStockReminderDays = full.lowStockReminderDays;
+      refreshToConfirm();
+      refreshReturns();
+    }
+  } catch {
+    /* the list's copy is enough to work with */
+  }
+}
+
 async function loadOrgSites() {
   try {
     const res = await getSites({ orgId: props.orgId, limit: 100 });
@@ -307,11 +407,13 @@ watch(storeId, () => {
   tab.value = wanted && tabs.value.some((t) => t.value === wanted) ? wanted : "stock";
   refreshCounts();
   probeCompanyUsage();
+  loadStoreDetail();
 });
 watch(() => props.siteId, loadStores);
 
 onMounted(() => {
   loadStores();
   loadOrgSites();
+  loadMySites();
 });
 </script>