@7365admin1/layer-common 4.109.0 → 4.110.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.110.0
+
+### Minor Changes
+
+- a2575af: Occupancy & tenancies (1PAM): new UnitTenancies screen (ending within 30/60/90 days or ended; Renew; End tenancy with a checked per-tenant access list), composable calls, "Tenancy Ending" notifications open Occupancy Mgmt > Tenancies; Edit Unit tab "Tenancy & Documents" with optional, ordered tenancy dates and plain help text; menu/dashboard label "Occupancy Mgmt/Management".
+
+## 4.109.1
+
+### Patch Changes
+
+- 518f053: Task Calendar: the dashboard panel "Upcoming Events" is now "Task Calendar" (property apps); the sidebar groups the renamed menu item under PROPERTY.
+
 ## 4.109.0
 
 ### Minor Changes

package/components/BuildingUnitFormEdit.vue

@@ -11,7 +11,7 @@
         <v-tab value="residents">Residents/Tenants</v-tab>
         <v-tab value="vehicles">Vehicles</v-tab>
         <v-tab value="management">Management</v-tab>
-        <v-tab value="others">Others</v-tab>
+        <v-tab value="others">Tenancy &amp; Documents</v-tab>
       </v-tabs>
     </v-toolbar>
     <v-card-text style="max-height: 100vh; min-height: 60svh; overflow-y: auto">
@@ -193,10 +193,9 @@
             <v-row>
               <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel class="text-capitalize" title="Company Name" required />
+                  <InputLabel class="text-capitalize" title="Company Name (commercial units)" />
                   <v-col cols="12">
-                    <v-text-field v-model="buildingUnit.companyName" density="comfortable"
-                      :rules="[requiredRule]"></v-text-field>
+                    <v-text-field v-model="buildingUnit.companyName" density="comfortable"></v-text-field>
                   </v-col>
                 </v-row>
               </v-col>
@@ -213,21 +212,26 @@
           </v-col>
 
           <v-col cols="12">
+            <p class="text-body-2 text-medium-emphasis mb-0">
+              If the unit is rented out, enter the tenancy dates from the tenancy agreement. You are reminded 30 days
+              and 7 days before the tenancy ends, and on the day, and can renew or end it under Occupancy Mgmt &gt;
+              Tenancies. Leave both empty for an owner-occupied unit.
+            </p>
             <v-row>
               <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel class="text-capitalize" title="Lease Start" required />
+                  <InputLabel class="text-capitalize" title="Tenancy Start" />
                   <v-col cols="12">
-                    <InputDateTimePicker ref="startDateRef" v-model="buildingUnit.leaseStart" :rules="[requiredRule]" />
+                    <InputDateTimePicker ref="startDateRef" v-model="buildingUnit.leaseStart" />
                   </v-col>
                 </v-row>
               </v-col>
 
               <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel class="text-capitalize" title="Lease End" required />
+                  <InputLabel class="text-capitalize" title="Tenancy End" />
                   <v-col cols="12">
-                    <InputDateTimePicker ref="endDateRef" v-model="buildingUnit.leaseEnd" :rules="[requiredRule]" />
+                    <InputDateTimePicker ref="endDateRef" v-model="buildingUnit.leaseEnd" />
                   </v-col>
                 </v-row>
               </v-col>
@@ -507,6 +511,21 @@ const hasChanges = computed(() => {
 });
 
 async function submit() {
+  message.value = "";
+  // Tenancy dates are optional (an owner-occupied unit has none), but an end
+  // before its start, or a start with no end, would never remind anyone.
+  const leaseStart = String(buildingUnit.value.leaseStart || "");
+  const leaseEnd = String(buildingUnit.value.leaseEnd || "");
+  if (leaseStart && !leaseEnd) {
+    message.value = "Enter the tenancy end date, or clear the start date.";
+    tab.value = "others";
+    return;
+  }
+  if (leaseStart && leaseEnd && leaseEnd <= leaseStart) {
+    message.value = "The tenancy end date must be after the start date.";
+    tab.value = "others";
+    return;
+  }
   disable.value = true;
   try {
 

package/components/DashboardMain.vue

@@ -676,7 +676,7 @@
       <v-col v-if="isWidgetVisible('upcomingEvents')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>Upcoming Events</h2>
+            <h2>Task Calendar</h2>
             <button
               class="figma-panel-action"
               type="button"
@@ -2167,8 +2167,8 @@ const customizeWidgets = computed(() => {
       },
       {
         key: "upcomingEvents",
-        title: "Upcoming Events",
-        description: "Quick view of scheduled events happening soon.",
+        title: "Task Calendar",
+        description: "Upcoming tasks and dates on your management team's calendar.",
       },
       {
         key: "todayReminders",
@@ -2928,9 +2928,9 @@ const printTableSections = computed<PrintTableSection[]>(() => {
     sections.push(
       {
         key: "upcomingEvents",
-        title: "Upcoming Events",
+        title: "Task Calendar",
         columns: [
-          { key: "title", label: "Event Title", width: "40%", strong: true },
+          { key: "title", label: "Title", width: "40%", strong: true },
           { key: "subtitle", label: "Description / Subtitle", width: "60%" },
         ],
         rows: upcomingEvents.value,
@@ -3873,9 +3873,9 @@ async function exportDashboard(format: "PDF" | "Word") {
       }
 
       if (isPropertyMode.value) {
-        wordHtml += `<div class="section-title">Upcoming Events</div>`;
+        wordHtml += `<div class="section-title">Task Calendar</div>`;
         wordHtml += `<table class="data-table">`;
-        wordHtml += `<thead><tr><th>Event Title</th><th>Description / Subtitle</th></tr></thead><tbody>`;
+        wordHtml += `<thead><tr><th>Title</th><th>Description / Subtitle</th></tr></thead><tbody>`;
         if (upcomingEvents.value.length > 0) {
           upcomingEvents.value.forEach((item) => {
             wordHtml += `<tr>

package/components/UnitTenancies.vue

@@ -0,0 +1,291 @@
+<template>
+  <!--
+    Tenancies (owner request, 1PAM meeting 2026-09-22 / build 2026-10-07).
+
+    Units whose tenancy ends soon or has ended, from the Lease Start / End on
+    the unit. The managing agent is reminded 30 days and 7 days before, and on
+    the day; from here a tenancy is renewed (new dates) or ended - ending first
+    shows exactly what access each tenant still has, and nothing is removed
+    until the MA confirms. Who may do this is decided by the server.
+  -->
+  <v-row no-gutters>
+    <v-col cols="12">
+      <PageHeader title="Tenancies" />
+      <p class="tn-intro">
+        Units whose tenancy ends within the period you choose, or has already ended. You are reminded 30 days and
+        7 days before, and on the day. <strong>Renew</strong> sets new tenancy dates. <strong>End tenancy</strong>
+        shows the tenants' access at this estate (resident app, door access, access cards, vehicles) and removes it
+        after you confirm. Tenancy dates are set on each unit (Occupancy Mgmt &gt; Units &gt; unit &gt; Tenancy &amp; Documents).
+      </p>
+    </v-col>
+
+    <v-col cols="12">
+      <AppCard class="pa-4">
+        <div class="d-flex align-center flex-wrap ga-2 mb-3">
+          <v-btn-toggle v-model="days" mandatory density="comfortable" variant="outlined" divided data-test="tn-days" @update:model-value="load">
+            <v-btn :value="30" class="text-none">Next 30 days</v-btn>
+            <v-btn :value="60" class="text-none">Next 60 days</v-btn>
+            <v-btn :value="90" class="text-none">Next 90 days</v-btn>
+          </v-btn-toggle>
+          <v-spacer />
+          <v-btn variant="text" icon="mdi-refresh" aria-label="Refresh" :loading="loading" @click="load" />
+        </div>
+
+        <v-alert v-if="error" type="error" variant="tonal" density="compact" class="mb-3">{{ error }}</v-alert>
+
+        <div v-if="!loading && !items.length && !error" class="tn-empty" data-test="tn-empty">
+          No tenancy ends in the next {{ days }} days, and none has ended without being renewed or closed.
+        </div>
+
+        <div v-for="item in items" :key="item._id" class="tn-row" data-test="tn-row">
+          <div class="tn-row__main">
+            <div class="tn-row__unit">{{ item.unit }}</div>
+            <div class="tn-sub">
+              Tenancy {{ item.startLabel ? `${item.startLabel} - ` : "ends " }}{{ item.endLabel }}
+            </div>
+            <div class="tn-sub">
+              Tenants:
+              <template v-if="item.tenants.length">{{ item.tenants.map((t: any) => t.name).join(", ") }}</template>
+              <template v-else>none registered</template>
+            </div>
+          </div>
+          <v-chip size="small" :color="chip(item).color" variant="tonal" class="mr-2" data-test="tn-chip">{{ chip(item).text }}</v-chip>
+          <div class="tn-row__actions">
+            <v-btn size="small" variant="outlined" class="text-none" data-test="tn-renew" @click="openRenew(item)">Renew</v-btn>
+            <v-btn size="small" variant="flat" color="error" class="text-none" data-test="tn-end" @click="openEnd(item)">End tenancy</v-btn>
+          </div>
+        </div>
+      </AppCard>
+    </v-col>
+  </v-row>
+
+  <!-- Renew -->
+  <v-dialog v-model="renewOpen" max-width="520" persistent>
+    <v-card class="screen-modal" data-test="tn-renew-dialog">
+      <v-card-title class="d-flex align-center">
+        Renew tenancy - {{ current?.unit }}
+        <v-spacer />
+        <v-btn variant="text" icon="mdi-close" class="screen-modal__close" aria-label="Close" :disabled="saving" @click="renewOpen = false" />
+      </v-card-title>
+      <v-card-text class="screen-modal__body">
+        <p class="tn-intro">
+          Current tenancy ends {{ current?.endLabel }}. Enter the new tenancy dates from the renewed agreement. The
+          tenants keep their access, and the reminders start again for the new end date.
+        </p>
+        <label class="tn-label" for="tn-start">New tenancy start (optional)</label>
+        <input id="tn-start" v-model="renewStart" type="date" class="tn-date" data-test="tn-start" />
+        <label class="tn-label" for="tn-end">New tenancy end</label>
+        <input id="tn-end" v-model="renewEnd" type="date" class="tn-date" :min="tomorrow" data-test="tn-end-date" />
+        <div v-if="renewError" class="tn-error">{{ renewError }}</div>
+      </v-card-text>
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" :disabled="saving" @click="renewOpen = false">Cancel</v-btn>
+        <v-btn class="screen-btn-primary" variant="flat" :loading="saving" :disabled="!renewEnd" data-test="tn-renew-confirm" @click="confirmRenew">
+          Save new dates
+        </v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+
+  <!-- End tenancy -->
+  <v-dialog v-model="endOpen" max-width="640" persistent>
+    <v-card class="screen-modal" data-test="tn-end-dialog">
+      <v-card-title class="d-flex align-center">
+        End tenancy - {{ current?.unit }}
+        <v-spacer />
+        <v-btn variant="text" icon="mdi-close" class="screen-modal__close" aria-label="Close" :disabled="saving" @click="endOpen = false" />
+      </v-card-title>
+      <v-card-text class="screen-modal__body">
+        <p class="tn-intro">
+          Ending the tenancy removes each tenant's access at this estate only. Their account, and anything at other
+          estates, is not touched. The unit's owner is not affected.
+        </p>
+        <div v-if="previewLoading" class="tn-sub">Checking the tenants' access...</div>
+        <div v-else-if="previewError" class="tn-error">{{ previewError }}</div>
+        <template v-else-if="preview">
+          <div v-if="!preview.access.length" class="tn-sub">
+            No tenants are registered on this unit. Ending clears the tenancy dates only.
+          </div>
+          <div v-for="a in preview.access" :key="a.person._id" class="tn-tenant" data-test="tn-tenant">
+            <div class="tn-row__unit">{{ a.person.name }}</div>
+            <ul class="tn-list">
+              <li>Registration for this unit{{ a.appAccess ? " and resident app access" : "" }} - removed</li>
+              <li v-if="a.keepsOtherUnitHere">Also lives in another unit here - keeps resident app sign-in, door access and cards</li>
+              <li v-else-if="a.doorAccess">Door access (face / QR): {{ a.doorAccess }} - removed from the readers</li>
+              <li v-if="!a.keepsOtherUnitHere && a.accessCards">Access cards: {{ a.accessCards }} - deactivated (collect the physical card)</li>
+              <li v-if="a.vehicles.length">Vehicles: {{ a.vehicles.join(", ") }} - removed (and from the car park cameras)</li>
+            </ul>
+          </div>
+          <v-checkbox v-model="understood" density="compact" hide-details class="mt-2" data-test="tn-understood"
+            label="I have checked the list above. Remove this access and end the tenancy." />
+        </template>
+        <div v-if="endResult" class="tn-result" data-test="tn-end-result">
+          <div>{{ endResult.summary }}</div>
+          <ul v-if="endResult.failures.length" class="tn-list tn-error">
+            <li v-for="f in endResult.failures" :key="f">{{ f }} - please remove it by hand or try again.</li>
+          </ul>
+        </div>
+      </v-card-text>
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" :disabled="saving" @click="endOpen = false">{{ endResult ? "Close" : "Cancel" }}</v-btn>
+        <v-btn v-if="!endResult" color="error" variant="flat" class="text-none" :loading="saving" :disabled="!preview || !understood" data-test="tn-end-confirm" @click="confirmEnd">
+          End tenancy
+        </v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+
+  <Snackbar v-model="snack" :text="snackText" :color="snackColor" />
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  siteId: { type: String, required: true },
+});
+
+const { getTenancies, renewTenancy, getEndTenancyPreview, endTenancy } = useBuildingUnit();
+
+const days = ref(60);
+const items = ref<Record<string, any>[]>([]);
+const loading = ref(false);
+const error = ref("");
+const current = ref<Record<string, any> | null>(null);
+const saving = ref(false);
+
+const renewOpen = ref(false);
+const renewStart = ref("");
+const renewEnd = ref("");
+const renewError = ref("");
+
+const endOpen = ref(false);
+const preview = ref<Record<string, any> | null>(null);
+const previewLoading = ref(false);
+const previewError = ref("");
+const understood = ref(false);
+const endResult = ref<{ summary: string; failures: string[] } | null>(null);
+
+const snack = ref(false);
+const snackText = ref("");
+const snackColor = ref("success");
+
+const tomorrow = computed(() => new Date(Date.now() + 864e5).toISOString().slice(0, 10));
+
+const message = (e: any, fallback: string) => e?.data?.message || e?.response?._data?.message || fallback;
+
+function chip(item: Record<string, any>) {
+  if (item.stage === "ended") return { text: "Ended", color: "error" };
+  const d = Number(item.daysLeft);
+  if (d <= 7) return { text: d <= 0 ? "Ends today" : `Ends in ${d} day${d === 1 ? "" : "s"}`, color: "warning" };
+  return { text: `Ends in ${d} days`, color: "info" };
+}
+
+async function load() {
+  if (!props.siteId) return;
+  loading.value = true;
+  error.value = "";
+  try {
+    const res = await getTenancies(props.siteId, days.value);
+    items.value = res?.items ?? [];
+  } catch (e: any) {
+    items.value = [];
+    error.value = message(e, "Tenancies could not be loaded. Please try again.");
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openRenew(item: Record<string, any>) {
+  current.value = item;
+  renewStart.value = "";
+  renewEnd.value = "";
+  renewError.value = "";
+  renewOpen.value = true;
+}
+
+async function confirmRenew() {
+  if (!current.value) return;
+  renewError.value = "";
+  if (renewStart.value && renewEnd.value <= renewStart.value) {
+    renewError.value = "The tenancy end date must be after the start date.";
+    return;
+  }
+  saving.value = true;
+  try {
+    // Stored like the Edit Unit form stores them (local date-time, the site's time): the tenancy runs to the end of its last day.
+    await renewTenancy(current.value._id, {
+      ...(renewStart.value ? { leaseStart: `${renewStart.value}T00:00` } : {}),
+      leaseEnd: `${renewEnd.value}T23:59`,
+    });
+    renewOpen.value = false;
+    say(`Tenancy for ${current.value.unit} renewed to ${renewEnd.value}.`);
+    await load();
+  } catch (e: any) {
+    renewError.value = message(e, "The tenancy could not be renewed. Please try again.");
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function openEnd(item: Record<string, any>) {
+  current.value = item;
+  preview.value = null;
+  previewError.value = "";
+  understood.value = false;
+  endResult.value = null;
+  endOpen.value = true;
+  previewLoading.value = true;
+  try {
+    preview.value = await getEndTenancyPreview(item._id);
+  } catch (e: any) {
+    previewError.value = message(e, "The tenants' access could not be checked. Please try again.");
+  } finally {
+    previewLoading.value = false;
+  }
+}
+
+async function confirmEnd() {
+  if (!current.value) return;
+  saving.value = true;
+  try {
+    const r = await endTenancy(current.value._id);
+    const parts = [
+      `${r.tenants} tenant${r.tenants === 1 ? "" : "s"} removed from ${r.unit}`,
+      r.doorAccess ? `${r.doorAccess} door access` : "",
+      r.accessCards ? `${r.accessCards} access card${r.accessCards === 1 ? "" : "s"} deactivated` : "",
+      r.vehicles ? `${r.vehicles} vehicle${r.vehicles === 1 ? "" : "s"} removed` : "",
+    ].filter(Boolean);
+    endResult.value = { summary: `Tenancy ended. ${parts.join(", ")}.`, failures: r.failures ?? [] };
+    if (!endResult.value.failures.length) say(endResult.value.summary);
+    await load();
+  } catch (e: any) {
+    previewError.value = message(e, "The tenancy could not be ended. Nothing was changed. Please try again.");
+  } finally {
+    saving.value = false;
+  }
+}
+
+function say(text: string, color = "success") {
+  snackText.value = text;
+  snackColor.value = color;
+  snack.value = true;
+}
+
+watch(() => props.siteId, load, { immediate: true });
+</script>
+
+<style scoped>
+.tn-intro { margin: 0 0 12px; color: var(--muted, inherit); }
+.tn-label { display: block; font-weight: 600; margin: 10px 0 4px; }
+.tn-date { border: 1px solid var(--line, #ccc); border-radius: 6px; padding: 8px 10px; color: inherit; background: transparent; }
+.tn-sub { color: var(--muted, inherit); font-size: 14px; margin-top: 2px; }
+.tn-error { color: var(--err, #b00020); margin-top: 6px; }
+.tn-empty { padding: 24px 8px; text-align: center; color: var(--muted, inherit); }
+.tn-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line, #eee); }
+.tn-row__main { flex: 1 1 260px; min-width: 0; }
+.tn-row__unit { font-weight: 600; }
+.tn-row__actions { display: flex; gap: 8px; }
+.tn-tenant { padding: 10px 0; border-bottom: 1px solid var(--line, #eee); }
+.tn-list { margin: 4px 0 0 18px; padding: 0; }
+.tn-list li { margin: 3px 0; }
+.tn-result { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line, #ddd); border-radius: 8px; }
+</style>

package/composables/useBuildingUnit.ts

@@ -102,7 +102,28 @@ export default function useBuildingUnit() {
     directorName: "",
   });
 
+  // Unit tenancies (2026-10-07): the Tenancies list, Renew and End tenancy.
+  function getTenancies(site: string, days = 60) {
+    return useNuxtApp().$api<Record<string, any>>("/api/building-units/tenancies", {
+      method: "GET",
+      query: { site, days },
+    });
+  }
+  function renewTenancy(id: string, body: { leaseStart?: string; leaseEnd: string }) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/building-units/${id}/tenancy/renew`, { method: "POST", body });
+  }
+  function getEndTenancyPreview(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/building-units/${id}/tenancy/end-preview`, { method: "GET" });
+  }
+  function endTenancy(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/building-units/${id}/tenancy/end`, { method: "POST" });
+  }
+
   return {
+    getTenancies,
+    renewTenancy,
+    getEndTenancyPreview,
+    endTenancy,
     categories,
     region,
     getAll,

package/composables/useDashboardData.ts

@@ -59,7 +59,7 @@ const dashboardDataMap: Record<string, ModuleData> = {
         color: '#FFA726',
       },
       {
-        title: 'Building Management',
+        title: 'Occupancy Management',
         value: 35,
         percentage: 15.4,
         isPositive: true,
@@ -95,7 +95,7 @@ const dashboardDataMap: Record<string, ModuleData> = {
       'Feedback',
       'Work Orders',
       'Vehicle Management',
-      'Building Management',
+      'Occupancy Management',
       'Visitor Management',
       'Incident Reports',
       'Guest Management',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.109.0",
+  "version": "4.110.0",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/nav-sections.ts

@@ -57,6 +57,9 @@ export const NAV_SECTIONS: Record<string, string> = {
 
   // PROPERTY
   "Vehicle Mgmt": "PROPERTY",
+  // Renamed "Occupancy Mgmt" for the client (1PAM, 2026-10-07); the old title
+  // stays mapped so an app still pinned to an older menu groups the same.
+  "Occupancy Mgmt": "PROPERTY",
   "Building Mgmt": "PROPERTY",
   "Visitor Mgmt": "PROPERTY",
   "Pass & Key Mgmt": "PROPERTY",
@@ -65,6 +68,7 @@ export const NAV_SECTIONS: Record<string, string> = {
   "Document Mgmt": "PROPERTY",
   "Access Mgmt": "PROPERTY",
   "Event Mgmt": "PROPERTY",
+  "Task Calendar": "PROPERTY",
   "Emergency Contacts": "PROPERTY",
   "Online Billing": "PROPERTY",
   "SOA Mgmt": "PROPERTY",

package/utils/notification-target.ts

@@ -188,6 +188,7 @@ const SITE_PAGES: Record<string, TSitePage[]> = {
   facilityBooking: [{ apps: ["property-management"], page: () => "facility-booking" }],
   onlineForm: [{ apps: ["property-management"], page: () => "online-forms" }],
   documentExpiry: [{ apps: ["property-management"], page: () => "document-mgmt" }],
+  tenancyExpiry: [{ apps: ["property-management"], page: () => "building-mgmt/tenancies" }],
   emergencyContact: [{ apps: ["property-management"], page: () => "emergency-contacts" }],
   incidentReport: [{ apps: ["security", "property-management"], page: withId("incident-reports") }],
   visitors: [