@7365admin1/layer-common 3.2.2-staging.181 → 3.2.2-staging.182

package/assets/css/primitives.css

@@ -631,19 +631,10 @@ button.app-btn--err {
   color: var(--text2);
 }
 
-/* A `<select>` keeps the native menu; only the chrome is ours. */
-select.app-field__input {
-  font-weight: 600;
-  font-size: var(--fs-nav);
-  appearance: none;
-  cursor: pointer;
-}
-
 /*
- * The MULTI select. Native has no dropdown for `multiple` - only an
- * always-open list box - so multi wears the same field chrome as a button and
- * opens a popover. The chosen values are `StatusChip pill tone-neutral`, the
- * soft pill the design already uses and the one whose contrast is measured.
+ * AppSelect wears the same field chrome as a button and opens a themed
+ * popover. Multi values are `StatusChip pill tone-neutral`, the soft pill the
+ * design already uses and the one whose contrast is measured.
  */
 .app-select {
   cursor: pointer;
@@ -655,6 +646,23 @@ select.app-field__input {
   opacity: 0.55;
 }
 
+.app-select--single {
+  min-width: 180px;
+  font-family: inherit;
+  text-align: left;
+}
+
+.app-select__single-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /*
  * The SAME step for the typed field, which never had one. `AppField` and
  * `AppDateField` both take a `disabled` prop and pass it to the native
@@ -666,8 +674,8 @@ select.app-field__input {
  * filter, on BOTH themes. The field was genuinely dead and read as live.
  *
  * Keyed off the input's own `:disabled` rather than a new modifier class, so
- * it covers `AppField`, `AppDateField` and the native path of `AppSelect`
- * without three templates having to remember to add it. 0.55 is
+ * it covers `AppField` and `AppDateField` without two templates having to
+ * remember to add it. 0.55 is
  * `.app-select--disabled`'s number, not a second one.
  */
 .app-field:has(.app-field__input:disabled) {
@@ -746,6 +754,16 @@ select.app-field__input {
   background: var(--hover);
 }
 
+.app-select__option--selected {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  font-weight: 600;
+}
+
+.app-select__option--selected:hover {
+  background: var(--accent-soft);
+}
+
 .app-select__box {
   color: var(--muted);
   flex: 0 0 auto;
@@ -756,6 +774,7 @@ select.app-field__input {
 }
 
 .app-select__option-text {
+  flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;

package/components/AppSelect.vue

@@ -2,10 +2,9 @@
   THE SELECT.
 
   The handoff draws it as the text field with the filter's name in muted 12px
-  on the left, the chosen value next to it and a chevron on the right. A native
-  `<select>` under our chrome: the option list, the keyboard and the mobile
-  wheel are the browser's, so there is no menu to build and nothing to get
-  wrong on a phone.
+  on the left, the chosen value next to it and a chevron on the right. Both
+  single and multiple values use the same themed popover, so the option list
+  does not fall back to the browser/OS styling.
 
   `multiple` is the ONE case where native is the wrong answer. A native
   `<select multiple>` is not a dropdown at all - it is an always-open scrolling
@@ -13,32 +12,62 @@
   and change how the staff work. So multi opens a POPOVER in the same field
   chrome, with the chosen values as the design's soft removable pills.
 
-  The single-value path below is byte-for-byte the one it has always been: a
-  consumer that passes neither `multiple` nor `return-object` still emits
-  exactly the `<select>` element's own string.
+  A single-value consumer that does not use `return-object` still emits the
+  same string that the old native `<select>` emitted.
 -->
 <template>
-  <label
+  <v-menu
     v-if="!multiple"
-    v-bind="$attrs"
-    class="app-field"
-    :class="{ 'app-field--compact': compact }"
+    :close-on-content-click="true"
+    :disabled="disabled"
+    location="bottom start"
+    offset="4"
   >
-    <span v-if="label" class="app-field__label">{{ label }}</span>
-    <select
-      class="app-field__input"
-      :value="singleValue"
-      :disabled="disabled"
-      @change="onNativeChange"
-    >
-      <!-- `clearable` on a native select is the empty option, not an x. -->
-      <option v-if="clearable" value="">{{ placeholder }}</option>
-      <option v-for="opt in normalized" :key="String(opt.value)" :value="opt.value">
-        {{ opt.title }}
-      </option>
-    </select>
-    <v-icon class="app-field__icon" icon="mdi-chevron-down" size="17" />
-  </label>
+    <template #activator="{ props: activator }">
+      <div
+        v-bind="{ ...activator, ...$attrs }"
+        class="app-field app-select app-select--single"
+        :class="{ 'app-field--compact': compact, 'app-select--disabled': disabled }"
+        role="button"
+        :aria-disabled="disabled"
+        :tabindex="disabled ? -1 : 0"
+      >
+        <span v-if="label" class="app-field__label">{{ label }}</span>
+        <span
+          class="app-select__single-value"
+          :class="{ 'app-select__placeholder': !hasSingleValue }"
+        >
+          {{ singleDisplay }}
+        </span>
+        <button
+          v-if="clearable && hasSingleValue"
+          type="button"
+          class="app-select__clear"
+          aria-label="Clear"
+          @click.stop="clearSingle"
+        >
+          <v-icon icon="mdi-close-circle" size="15" />
+        </button>
+        <v-icon class="app-field__icon" icon="mdi-chevron-down" size="17" />
+      </div>
+    </template>
+
+    <div class="app-select__menu" role="listbox">
+      <button
+        v-for="opt in normalized"
+        :key="String(opt.value)"
+        type="button"
+        class="app-select__option"
+        :class="{ 'app-select__option--selected': isSingleOn(opt) }"
+        role="option"
+        :aria-selected="isSingleOn(opt)"
+        @click="selectSingle(opt)"
+      >
+        <span class="app-select__option-text">{{ opt.title }}</span>
+        <v-icon v-if="isSingleOn(opt)" icon="mdi-check" size="17" />
+      </button>
+    </div>
+  </v-menu>
 
   <v-menu
     v-else
@@ -114,9 +143,8 @@
 </template>
 
 <script setup lang="ts">
-/* `v-menu` has no single root node, so a class on `<AppSelect multiple>` has
-   to be put on the activator by hand. The single branch lands where it always
-   did - on the `<label>`. */
+/* `v-menu` has no single root node, so attributes and classes have to be put
+   on each activator by hand. */
 defineOptions({ inheritAttrs: false });
 
 /*
@@ -157,15 +185,31 @@ const keyOf = (v: any) =>
 
 /* ---- single ---------------------------------------------------------- */
 
-const singleValue = computed(() =>
-  props.returnObject ? keyOf(model.value) : model.value
+const hasSingleValue = computed(
+  () => model.value !== "" && model.value !== null && model.value !== undefined
+);
+
+const selectedSingleOption = computed(() =>
+  normalized.value.find((opt) => String(opt.value) === keyOf(model.value))
+);
+
+const singleDisplay = computed(() =>
+  hasSingleValue.value
+    ? selectedSingleOption.value?.title ?? keyOf(model.value)
+    : props.placeholder
 );
 
-function onNativeChange(event: Event) {
-  const value = (event.target as HTMLSelectElement).value;
-  model.value = props.returnObject
-    ? normalized.value.find((o) => String(o.value) === value)?.raw ?? value
-    : value;
+const isSingleOn = (opt: any) =>
+  hasSingleValue.value && String(opt.value) === keyOf(model.value);
+
+function selectSingle(opt: any) {
+  if (props.disabled) return;
+  model.value = props.returnObject ? opt.raw : String(opt.value);
+}
+
+function clearSingle() {
+  if (props.disabled) return;
+  model.value = "";
 }
 
 /* ---- multiple -------------------------------------------------------- */

package/components/HidAccessLogDashboard.vue

@@ -65,7 +65,18 @@
             @update:model-value="loadDashboard"
           />
           <AppField v-model="search" search placeholder="Search" />
-          <AppSelect v-model="status" :items="statusOptions" />
+          <AppSelect
+            v-model="status"
+            :items="statusOptions"
+            placeholder="Status"
+            clearable
+          />
+          <AppSelect
+            v-model="accessMethod"
+            :items="accessMethodFilterOptions"
+            placeholder="Access Method"
+            clearable
+          />
         </div>
       </template>
 
@@ -253,6 +264,7 @@
             :items="statusOptions"
             aria-label="Status"
             placeholder="Select"
+            clearable
           />
         </v-card-text>
 
@@ -323,7 +335,8 @@ const userImages = ref<Record<string, string>>({});
 const selectedReaderId = ref("");
 const activeTab = ref<AccessTab>("resident");
 const search = ref("");
-const status = ref("Status");
+const status = ref("");
+const accessMethod = ref("");
 const page = ref(1);
 const limit = 10;
 const loading = ref(false);
@@ -338,11 +351,12 @@ const exportForm = reactive({
   users: [] as string[],
   accessMethod: "All",
   readerLocation: "All",
-  status: "Status",
+  status: "",
 });
 
-const statusOptions = ["Status", "Authorized", "Not Authorized", "Unknown"];
-const accessMethodOptions = ["All", "Facial", "QR Code", "ID and Password", "PIN", "Card"];
+const statusOptions = ["Authorized", "Not Authorized", "Unknown"];
+const accessMethodFilterOptions = ["Facial", "QR Code", "ID and Password", "PIN", "Card"];
+const accessMethodOptions = ["All", ...accessMethodFilterOptions];
 
 const readerOptions = computed(() =>
   readers.value.map((reader) => ({
@@ -442,9 +456,10 @@ const filteredRows = computed(() => {
       row.status,
     ].some((value) => String(value ?? "").toLowerCase().includes(query));
 
-    const matchesStatus = status.value === "Status" || row.status === status.value;
+    const matchesStatus = !status.value || row.status === status.value;
+    const matchesMethod = !accessMethod.value || row.method === accessMethod.value;
 
-    return matchesSearch && matchesStatus;
+    return matchesSearch && matchesStatus && matchesMethod;
   });
 });
 
@@ -497,7 +512,7 @@ const exportRowsData = computed(() =>
     const matchesUsers = !selectedUsers.length || selectedUsers.includes(row.key) || selectedUsers.includes(row.identityKey);
     const matchesMethod = exportForm.accessMethod === "All" || row.method === exportForm.accessMethod;
     const matchesLocation = exportForm.readerLocation === "All" || row.readerLocation === exportForm.readerLocation;
-    const matchesStatus = exportForm.status === "Status" || row.status === exportForm.status;
+    const matchesStatus = !exportForm.status || row.status === exportForm.status;
     const matchesDate = isWithinExportRange(row.lastAccessDate);
 
     return matchesUsers && matchesMethod && matchesLocation && matchesStatus && matchesDate;
@@ -510,7 +525,7 @@ watch(
   { immediate: true },
 );
 
-watch([search, status, activeTab], () => {
+watch([search, status, accessMethod, activeTab], () => {
   page.value = 1;
 });
 

package/components/HidEnabledGate.vue

@@ -45,7 +45,11 @@ const props = withDefaults(
 const { getSiteById } = useSiteSettings();
 const { getHidServiceEnabled } = useOptionalServices();
 
-const { data: siteData } = await useLazyAsyncData(
+// Do not await this request during route setup. Every HID page uses this gate;
+// awaiting it makes Nuxt Suspense keep rendering the previous page until the
+// site request finishes, so the URL changes while the visible module appears
+// frozen. The lazy request updates `siteData` reactively after navigation.
+const { data: siteData } = useLazyAsyncData(
   "hid-enabled-gate-site-" + props.site,
   () => getSiteById(props.site),
   {

package/components/HidIntercomManagement.vue

@@ -76,7 +76,7 @@
           class="app-tab"
           :class="{ 'app-tab--active': activeTab === tab.value }"
           :aria-selected="activeTab === tab.value"
-          @click="activeTab = tab.value"
+          @click="selectTab(tab.value)"
         >
           {{ tab.label }}
         </button>
@@ -94,7 +94,12 @@
             @update:model-value="page = 1"
           />
           <AppField v-model="search" search placeholder="Search" />
-          <AppSelect v-model="statusFilter" :items="statusOptions" />
+          <AppSelect
+            v-model="statusFilter"
+            :items="statusOptions"
+            placeholder="Status"
+            clearable
+          />
         </div>
       </template>
 
@@ -126,6 +131,18 @@
         <StatusChip :status="item.status" />
       </template>
 
+      <template #[`item.contactStatus`]="{ item }">
+        <v-btn
+          size="small"
+          variant="outlined"
+          class="text-none"
+          :loading="testingContactReaderId === item.readerId"
+          @click="testContactSipStatus(item)"
+        >
+          {{ getContactReaderStatus(item) }}
+        </v-btn>
+      </template>
+
       <template #[`item.action-table`]="{ item }">
         <v-menu location="bottom end">
           <template #activator="{ props: menuProps }">
@@ -133,13 +150,19 @@
           </template>
           <v-list v-if="activeTab === 'intercom'" density="compact" class="row-menu">
             <v-list-item title="View" @click="openViewDialog(item)" />
-            <v-list-item title="SIP Settings" @click="openSipDialog(item)" />
+            <v-list-item
+              title="Test Connection with SIP"
+              :disabled="testingSipReaderId === item.reader._id"
+              @click="testSipConnection(item)"
+            />
             <v-list-item title="Call Settings" @click="openCallDialog(item)" />
             <v-list-item title="Dial Code" @click="openDialCodeDialog(item)" />
             <v-list-item title="Make a call" @click="openMakeCallDialog(item)" />
             <v-list-item title="Web call" @click="openWebPhoneDialog(item)" />
           </v-list>
           <v-list v-else density="compact" class="row-menu">
+            <v-list-item title="Call" prepend-icon="mdi-phone" @click="openContactCall(item)" />
+            <v-list-item title="Check reader SIP status" prepend-icon="mdi-lan-check" @click="testContactSipStatus(item)" />
             <v-list-item title="View" @click="openContactView(item)" />
             <v-list-item title="Edit" @click="openContactDialog(item)" />
             <v-list-item title="Delete" @click="openDeleteContact(item)" />
@@ -554,12 +577,16 @@
       <v-card class="form-dialog" rounded="lg">
         <v-card-title class="dialog-title">{{ contactForm.id ? 'Edit Contact' : 'Add Contact' }}</v-card-title>
         <v-card-text class="dialog-body">
+          <FieldLabel text="HID Reader" required />
+          <AppSelect
+            v-model="contactForm.readerId"
+            :items="readerOptions"
+            :disabled="Boolean(contactForm.id)"
+          />
           <FieldLabel text="Name" required />
           <AppField v-model="contactForm.name" placeholder="Enter name" />
-          <FieldLabel text="Location" />
-          <AppField v-model="contactForm.location" placeholder="Location" />
-          <FieldLabel text="Server Address" required />
-          <AppField v-model="contactForm.serverAddress" placeholder="192.168.1.1" />
+          <FieldLabel text="SIP Number / Address" required />
+          <AppField v-model="contactForm.serverAddress" placeholder="7100 or user@example.com" />
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
           <v-btn class="text-none action-cancel" variant="flat" height="44" @click="contactDialog = false">Cancel</v-btn>
@@ -693,15 +720,19 @@ const {
 const activeTab = ref<IntercomTab>("intercom");
 const readers = ref<Record<string, any>[]>([]);
 const selectedReaderId = ref("");
+const testingSipReaderId = ref("");
+const testingContactReaderId = ref("");
 const intercomRows = ref<IntercomRow[]>([]);
 const contacts = ref<ContactRow[]>([]);
+const intercomLoaded = ref(false);
+const contactsLoaded = ref(false);
 const loading = ref(false);
 const saving = ref(false);
 const contactsSaving = ref(false);
 const calling = ref(false);
 const hangingUp = ref(false);
 const search = ref("");
-const statusFilter = ref("Status");
+const statusFilter = ref("");
 const page = ref(1);
 const limit = 20;
 const selectedRow = ref<IntercomRow | null>(null);
@@ -728,7 +759,7 @@ const deleteContactDialog = ref(false);
 
 const message = reactive<{ type: MessageType; text: string }>({ type: "info", text: "" });
 
-const statusOptions = ["Status", "Connected", "Not connected", "Connecting", "Disabled", "Failed"];
+const statusOptions = ["Connected", "Not connected", "Connecting", "Disabled", "Failed"];
 
 const pjsipKeys = [
   "enabled",
@@ -839,7 +870,7 @@ const filteredIntercomRows = computed(() => {
       row.dialCode,
       row.status,
     ].some((value) => String(value || "").toLowerCase().includes(query));
-    const matchesStatus = statusFilter.value === "Status" || row.status === statusFilter.value;
+    const matchesStatus = !statusFilter.value || row.status === statusFilter.value;
     return matchesReader && matchesSearch && matchesStatus;
   });
 });
@@ -848,13 +879,16 @@ const filteredContacts = computed(() => {
   const query = search.value.trim().toLowerCase();
   return contacts.value.filter((contact) => {
     const matchesReader = !selectedReaderId.value || contact.readerId === selectedReaderId.value;
+    const readerStatus = getContactReaderStatus(contact);
     const matchesSearch = !query || [
       contact.name,
       contact.location,
       contact.serverAddress,
       contact.dialCode,
+      readerStatus,
     ].some((value) => String(value || "").toLowerCase().includes(query));
-    return matchesReader && matchesSearch;
+    const matchesStatus = !statusFilter.value || readerStatus === statusFilter.value;
+    return matchesReader && matchesSearch && matchesStatus;
   });
 });
 
@@ -890,8 +924,8 @@ const tableHeaders = computed(() =>
     : [
         { title: "Name", value: "name", sortable: false },
         { title: "Location", value: "location", sortable: false },
-        { title: "SIP Server Address", value: "serverAddress", sortable: false },
-        { title: "Dial Code", value: "dialCode", sortable: false },
+        { title: "SIP Number / Address", value: "serverAddress", sortable: false },
+        { title: "Reader SIP Status", value: "contactStatus", sortable: false },
         { title: "", value: "action-table", sortable: false },
       ]
 );
@@ -1034,8 +1068,9 @@ async function reload() {
     if (!readers.value.some((reader) => reader._id === selectedReaderId.value)) {
       selectedReaderId.value = readers.value[0]?._id || "";
     }
-    await loadIntercomRows();
-    await loadContacts();
+    intercomLoaded.value = false;
+    contactsLoaded.value = false;
+    await loadActiveTab();
   } catch (error: any) {
     showMessage(getErrorMessage(error), "error");
   } finally {
@@ -1043,10 +1078,36 @@ async function reload() {
   }
 }
 
-async function loadIntercomRows() {
-  const rows: IntercomRow[] = [];
+async function loadActiveTab() {
+  if (activeTab.value === "intercom") {
+    await loadIntercomRows();
+    return;
+  }
+
+  await Promise.all([
+    intercomLoaded.value ? Promise.resolve() : loadIntercomRows(),
+    loadContacts(),
+  ]);
+}
 
-  for (const reader of readers.value) {
+async function selectTab(tab: IntercomTab) {
+  activeTab.value = tab;
+  page.value = 1;
+
+  if ((tab === "intercom" && intercomLoaded.value) || (tab === "contacts" && contactsLoaded.value)) return;
+
+  loading.value = true;
+  try {
+    await loadActiveTab();
+  } catch (error: unknown) {
+    showMessage(getErrorMessage(error), "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadIntercomRows() {
+  const rows = await Promise.all(readers.value.map(async (reader): Promise<IntercomRow> => {
     const [configurationResult, statusResult] = await Promise.allSettled([
       getReaderConfiguration(reader._id, { pjsip: pjsipKeys }),
       getIntercomStatus(reader._id),
@@ -1058,16 +1119,15 @@ async function loadIntercomRows() {
     const statusPayload = statusResponse?.data ?? statusResponse;
     const pjsip = normalizePjsip(configurationResponse, statusPayload);
     const status = normalizeStatus(statusPayload, pjsip);
-    rows.push(toIntercomRow(reader, pjsip, status));
-  }
+    return toIntercomRow(reader, pjsip, status);
+  }));
 
   intercomRows.value = rows;
+  intercomLoaded.value = true;
 }
 
 async function loadContacts() {
-  const rows: ContactRow[] = [];
-
-  for (const reader of readers.value) {
+  const readerContacts = await Promise.all(readers.value.map(async (reader): Promise<ContactRow[]> => {
     try {
       const response = await runObjectOperation(reader._id, {
         operation: "load",
@@ -1075,13 +1135,15 @@ async function loadContacts() {
         fields: ["id", "name", "number"],
         limit: 100,
       });
-      rows.push(...normalizeContacts(reader, response?.data ?? response));
+      return normalizeContacts(reader, response?.data ?? response);
     } catch {
       // Some firmware builds may not expose contacts until intercom is configured.
+      return [];
     }
-  }
+  }));
 
-  contacts.value = rows;
+  contacts.value = readerContacts.flat();
+  contactsLoaded.value = true;
 }
 
 function paginate<T>(items: T[]) {
@@ -1398,6 +1460,39 @@ function openContactView(contact: ContactRow) {
   contactViewDialog.value = true;
 }
 
+function getContactReaderStatus(contact: ContactRow) {
+  return intercomRows.value.find((row) => row.reader._id === contact.readerId)?.status || "Check status";
+}
+
+async function testContactSipStatus(contact: ContactRow) {
+  const reader = intercomRows.value.find((row) => row.reader._id === contact.readerId);
+  if (!reader) {
+    showMessage("The HID reader for this contact is not available.", "error");
+    return;
+  }
+
+  testingContactReaderId.value = contact.readerId;
+  try {
+    await testSipConnection(reader);
+  } finally {
+    testingContactReaderId.value = "";
+  }
+}
+
+function openContactCall(contact: ContactRow) {
+  const reader = intercomRows.value.find((row) => row.reader._id === contact.readerId);
+  if (!reader) {
+    showMessage("The HID reader for this contact is not available.", "error");
+    return;
+  }
+
+  selectedRow.value = reader;
+  makeCallForm.target = contact.serverAddress === "N/A" ? "" : contact.serverAddress;
+  makeCallForm.status = "";
+  makeCallForm.statusType = "info";
+  makeCallDialog.value = true;
+}
+
 function openDeleteContact(contact: ContactRow) {
   selectedContact.value = contact;
   deleteContactDialog.value = true;
@@ -1517,6 +1612,52 @@ async function runHangupCall() {
   }
 }
 
+async function testSipConnection(row: IntercomRow) {
+  const readerId = toText(row.reader._id);
+  if (!readerId || testingSipReaderId.value) return;
+
+  testingSipReaderId.value = readerId;
+  try {
+    const response = await getIntercomStatus(readerId);
+    const responseRecord = toRecord(response);
+    const statusPayload = toRecord(responseRecord.data || responseRecord);
+    const status = Number(statusPayload.status);
+
+    await reload();
+
+    if (status === 200) {
+      showMessage(`${row.name}: SIP is connected.`, "success");
+      return;
+    }
+    if (status === -1) {
+      showMessage(`${row.name}: SIP is disabled on the HID reader.`, "warning");
+      return;
+    }
+    if (status === 0 || status === 100) {
+      showMessage(`${row.name}: SIP is still connecting. Check the SIP settings on the HID reader.`, "warning");
+      return;
+    }
+    if (status === 401 || status === 403) {
+      showMessage(`${row.name}: SIP authentication failed. Check the account configured on the HID reader.`, "error");
+      return;
+    }
+    if (status === 408) {
+      showMessage(`${row.name}: The HID reader cannot reach the SIP server.`, "error");
+      return;
+    }
+    if (status === 503) {
+      showMessage(`${row.name}: The HID reader reported a SIP network failure.`, "error");
+      return;
+    }
+
+    showMessage(`${row.name}: SIP is not connected. Configure SIP on the HID reader and test again.`, "warning");
+  } catch (error: unknown) {
+    showMessage(getErrorMessage(error), "error");
+  } finally {
+    testingSipReaderId.value = "";
+  }
+}
+
 async function savePjsip(readerId: string, payload: Record<string, string>, options: { showSuccessMessage?: boolean } = {}) {
   saving.value = true;
   try {
@@ -1540,6 +1681,11 @@ async function saveContact() {
     return;
   }
 
+  if (!isSipCallTarget(contactForm.serverAddress)) {
+    showMessage("Enter a valid extension, SIP address, or IPv4 address.", "warning");
+    return;
+  }
+
   contactsSaving.value = true;
   try {
     if (contactForm.id) {