@7365admin1/layer-common 3.1.4-staging.53 → 3.2.0

package/components/HidIntercomManagement.vue

@@ -12,17 +12,7 @@
         Add Contacts
       </v-btn>
 
-      <v-btn
-        v-else
-        rounded="xl"
-        class="text-none web-call-button"
-        :class="{ 'is-connected': webPhone.isRegistered.value, 'has-incoming-call': webPhone.callState.value === 'incoming' }"
-        variant="flat"
-        prepend-icon="mdi-phone-in-talk-outline"
-        @click="openWebPhoneDialog()"
-      >
-        {{ webPhone.callState.value === 'incoming' ? 'Incoming Call' : 'Web Call' }}
-      </v-btn>
+      <div v-else class="top-placeholder" />
 
       <div class="toolbar-spacer" />
 
@@ -115,7 +105,6 @@
                       <v-list-item title="Call Settings" @click="openCallDialog(row)" />
                       <v-list-item title="Dial Code" @click="openDialCodeDialog(row)" />
                       <v-list-item title="Make a call" @click="openMakeCallDialog(row)" />
-                      <v-list-item title="Web call" @click="openWebPhoneDialog(row)" />
                     </v-list>
                   </v-menu>
                 </td>
@@ -242,6 +231,36 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog v-model="rebootConfirmDialog" max-width="700" persistent>
+      <v-card class="reboot-dialog" rounded="0">
+        <button class="reboot-close" type="button" aria-label="Close" @click="rebootConfirmDialog = false">
+          <v-icon icon="mdi-close" />
+        </button>
+        <v-card-title class="reboot-title">Reboot is needed</v-card-title>
+        <v-card-text class="reboot-message">
+          It is necessary to restart the device after applying the configurations. Do you want to proceed?
+        </v-card-text>
+        <v-card-actions class="reboot-actions">
+          <v-btn class="text-none reboot-cancel" variant="text" @click="rebootConfirmDialog = false">
+            Cancel
+          </v-btn>
+          <v-btn class="text-none reboot-ok" variant="flat" @click="startRebootWait">
+            OK
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="rebootingDialog" max-width="900" persistent>
+      <v-card class="rebooting-card" rounded="0">
+        <div class="wait-word">Wait!</div>
+        <div class="rebooting-copy">
+          <h3>Rebooting Equipment</h3>
+          <p>Wait {{ rebootCountdown }} seconds for the equipment to reboot.</p>
+        </div>
+      </v-card>
+    </v-dialog>
+
     <v-dialog v-model="callDialog" max-width="360" persistent>
       <v-card class="form-dialog call-dialog" rounded="lg">
         <v-card-title class="dialog-title">Call Settings</v-card-title>
@@ -331,10 +350,10 @@
         <v-card-title class="dialog-title">Make a Call</v-card-title>
         <v-card-text class="dialog-body make-call-body">
           <div class="make-call-field">
-            <div class="call-label">IP address to dial</div>
+            <div class="call-label">Address to dial</div>
             <v-text-field
               v-model="makeCallForm.target"
-              placeholder="000.000.0.0"
+              placeholder="Enter extension, address, or contact"
               variant="outlined"
               density="compact"
               hide-details="auto"
@@ -369,192 +388,8 @@
           </div>
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
-          <v-btn class="text-none action-submit full-action" variant="flat" height="44" @click="makeCallDialog = false">Close</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <v-dialog v-model="webPhoneDialog" max-width="820" persistent eager>
-      <v-card class="web-phone-dialog" rounded="lg">
-        <v-card-title class="dialog-title web-phone-title">
-          <span>Web Call</span>
-          <v-chip size="small" variant="flat" :class="webPhoneStatusClass">
-            {{ webPhoneStatusLabel }}
-          </v-chip>
-        </v-card-title>
-
-        <v-card-text class="web-phone-body">
-          <div class="web-phone-settings">
-            <div class="web-phone-section-title">SIP Account</div>
-            <div class="call-label">WebSocket Server <span>*</span></div>
-            <v-text-field
-              v-model="webPhoneForm.webSocketServer"
-              placeholder="wss://sip.example.com/ws"
-              variant="outlined"
-              density="compact"
-              hide-details="auto"
-              class="call-input"
-              :disabled="webPhone.isRegistered.value"
-            />
-            <div class="call-label">SIP Address <span>*</span></div>
-            <v-text-field
-              v-model="webPhoneForm.aor"
-              placeholder="operator@example.com"
-              variant="outlined"
-              density="compact"
-              hide-details="auto"
-              class="call-input"
-              :disabled="webPhone.isRegistered.value"
-            />
-            <div class="form-two-col">
-              <div>
-                <div class="call-label">Username <span>*</span></div>
-                <v-text-field
-                  v-model="webPhoneForm.username"
-                  placeholder="Username"
-                  variant="outlined"
-                  density="compact"
-                  hide-details="auto"
-                  class="call-input"
-                  :disabled="webPhone.isRegistered.value"
-                />
-              </div>
-              <div>
-                <div class="call-label">Password <span>*</span></div>
-                <v-text-field
-                  v-model="webPhoneForm.password"
-                  placeholder="Password"
-                  :type="showWebPhonePassword ? 'text' : 'password'"
-                  :append-inner-icon="showWebPhonePassword ? 'mdi-eye-off' : 'mdi-eye'"
-                  variant="outlined"
-                  density="compact"
-                  hide-details="auto"
-                  class="call-input"
-                  :disabled="webPhone.isRegistered.value"
-                  @click:append-inner="showWebPhonePassword = !showWebPhonePassword"
-                />
-              </div>
-            </div>
-            <div class="call-toggle-row web-video-toggle">
-              <span>Enable video</span>
-              <v-switch
-                v-model="webPhoneForm.video"
-                color="success"
-                density="compact"
-                hide-details
-                :disabled="webPhone.isRegistered.value"
-              />
-            </div>
-            <v-btn
-              v-if="!webPhone.isRegistered.value"
-              block
-              class="text-none web-phone-connect"
-              variant="flat"
-              prepend-icon="mdi-lan-connect"
-              :loading="webPhoneConnecting"
-              @click="connectWebPhone"
-            >
-              Connect Web Phone
-            </v-btn>
-            <v-btn
-              v-else
-              block
-              class="text-none web-phone-disconnect"
-              variant="outlined"
-              prepend-icon="mdi-lan-disconnect"
-              :loading="webPhoneConnecting"
-              :disabled="webPhone.hasCall.value"
-              @click="disconnectWebPhone"
-            >
-              Disconnect
-            </v-btn>
-          </div>
-
-          <div class="web-phone-console">
-            <div class="web-phone-media" :class="{ 'has-video': webPhoneForm.video && webPhone.callState.value === 'active' }">
-              <video ref="remoteVideoEl" autoplay playsinline class="remote-video" />
-              <video ref="localVideoEl" autoplay muted playsinline class="local-video" />
-              <audio ref="remoteAudioEl" autoplay />
-              <div v-if="!webPhoneForm.video || webPhone.callState.value !== 'active'" class="audio-call-state">
-                <v-icon size="54">{{ webPhoneCallIcon }}</v-icon>
-                <strong>{{ webPhoneCallLabel }}</strong>
-                <span v-if="webPhone.currentTarget.value">{{ webPhone.currentTarget.value }}</span>
-              </div>
-            </div>
-
-            <div v-if="webPhone.callState.value === 'incoming'" class="incoming-call-actions">
-              <v-btn
-                class="text-none answer-call"
-                variant="flat"
-                prepend-icon="mdi-phone"
-                :loading="webPhoneActionLoading"
-                @click="answerWebCall"
-              >
-                Answer
-              </v-btn>
-              <v-btn
-                class="text-none reject-call"
-                variant="flat"
-                prepend-icon="mdi-phone-hangup"
-                :disabled="webPhoneActionLoading"
-                @click="declineWebCall"
-              >
-                Decline
-              </v-btn>
-            </div>
-
-            <template v-else>
-              <div class="call-label">Extension or SIP Address</div>
-              <div class="web-phone-dial-row">
-                <v-text-field
-                  v-model="webPhoneForm.destination"
-                  placeholder="1001 or device@example.com"
-                  variant="outlined"
-                  density="compact"
-                  hide-details="auto"
-                  class="call-input mb-0"
-                  :disabled="!webPhone.isRegistered.value || webPhone.hasCall.value"
-                  @keyup.enter="startWebCall"
-                />
-                <v-btn
-                  icon="mdi-phone"
-                  class="start-web-call"
-                  variant="flat"
-                  :loading="webPhoneActionLoading && webPhone.callState.value === 'calling'"
-                  :disabled="!webPhone.isRegistered.value || webPhone.hasCall.value || !webPhoneForm.destination.trim()"
-                  @click="startWebCall"
-                />
-              </div>
-
-              <div v-if="webPhone.hasCall.value" class="active-call-controls">
-                <v-btn
-                  :icon="webPhone.muted.value ? 'mdi-microphone-off' : 'mdi-microphone'"
-                  variant="outlined"
-                  :disabled="webPhone.callState.value !== 'active'"
-                  :title="webPhone.muted.value ? 'Unmute' : 'Mute'"
-                  @click="webPhone.toggleMute"
-                />
-                <v-btn
-                  icon="mdi-phone-hangup"
-                  class="hangup-web-call"
-                  variant="flat"
-                  :loading="webPhoneActionLoading && webPhone.callState.value === 'ending'"
-                  title="End call"
-                  @click="hangupWebCall"
-                />
-              </div>
-            </template>
-
-            <v-alert v-if="webPhone.errorMessage.value" type="error" variant="tonal" density="compact" class="web-phone-error">
-              {{ webPhone.errorMessage.value }}
-            </v-alert>
-          </div>
-        </v-card-text>
-
-        <v-card-actions class="dialog-actions pa-0">
-          <v-btn class="text-none action-submit full-action" variant="flat" height="44" @click="webPhoneDialog = false">
-            Close
-          </v-btn>
+          <v-btn class="text-none action-cancel" variant="flat" height="44" @click="makeCallDialog = false">Cancel</v-btn>
+          <v-btn class="text-none action-submit" variant="flat" height="44" @click="makeCallDialog = false">Close</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -696,25 +531,21 @@ const limit = 20;
 const selectedRow = ref<IntercomRow | null>(null);
 const selectedContact = ref<ContactRow | null>(null);
 const showSipPassword = ref(false);
-const showWebPhonePassword = ref(false);
-const webPhoneConnecting = ref(false);
-const webPhoneActionLoading = ref(false);
-const localVideoEl = ref<HTMLVideoElement | null>(null);
-const remoteVideoEl = ref<HTMLVideoElement | null>(null);
-const remoteAudioEl = ref<HTMLAudioElement | null>(null);
-const webPhone = useSipWebPhone();
 
 const viewDialog = ref(false);
 const sipDialog = ref(false);
+const rebootConfirmDialog = ref(false);
+const rebootingDialog = ref(false);
 const callDialog = ref(false);
 const dialCodeDialog = ref(false);
 const makeCallDialog = ref(false);
-const webPhoneDialog = ref(false);
 const contactDialog = ref(false);
 const contactViewDialog = ref(false);
 const deleteContactDialog = ref(false);
 
 const message = reactive<{ type: MessageType; text: string }>({ type: "info", text: "" });
+const rebootCountdown = ref(59);
+let rebootTimer: ReturnType<typeof setInterval> | undefined;
 
 const statusOptions = ["Status", "Connected", "Not connected", "Connecting", "Disabled", "Failed"];
 
@@ -751,7 +582,7 @@ const sipForm = reactive({
   serverIp: "",
   serverPort: "5060",
   initialRtpPort: "10000",
-  finalRtpPort: "10100",
+  finalRtpPort: "1000",
   numericExtension: false,
   extension: "",
   login: "",
@@ -786,15 +617,6 @@ const makeCallForm = reactive({
   statusType: "info" as MessageType,
 });
 
-const webPhoneForm = reactive({
-  webSocketServer: "",
-  aor: "",
-  username: "",
-  password: "",
-  destination: "",
-  video: false,
-});
-
 const contactForm = reactive({
   id: undefined as number | undefined,
   readerId: "",
@@ -895,35 +717,6 @@ const contactDetailRows = computed<DetailItem[]>(() => [
   { label: "Server Address", value: selectedContact.value?.serverAddress, link: true },
   { label: "Location", value: selectedContact.value?.location },
 ]);
-const webPhoneStatusLabel = computed(() => {
-  if (webPhone.callState.value === "incoming") return "Incoming call";
-  if (webPhone.callState.value === "calling") return "Calling";
-  if (webPhone.callState.value === "active") return "In call";
-  if (webPhone.callState.value === "ending") return "Ending call";
-  if (webPhone.connectionState.value === "connecting") return "Connecting";
-  if (webPhone.connectionState.value === "registered") return "Ready";
-  if (webPhone.connectionState.value === "error") return "Connection failed";
-  return "Disconnected";
-});
-const webPhoneStatusClass = computed(() => {
-  if (webPhone.callState.value === "incoming") return "web-phone-status incoming";
-  if (webPhone.callState.value === "active" || webPhone.connectionState.value === "registered") return "web-phone-status ready";
-  if (webPhone.connectionState.value === "error") return "web-phone-status failed";
-  return "web-phone-status idle";
-});
-const webPhoneCallLabel = computed(() => {
-  if (webPhone.callState.value === "incoming") return "Incoming call";
-  if (webPhone.callState.value === "calling") return "Calling...";
-  if (webPhone.callState.value === "active") return "Call connected";
-  if (webPhone.callState.value === "ending") return "Ending call...";
-  return webPhone.isRegistered.value ? "Ready to call" : "Connect a SIP account";
-});
-const webPhoneCallIcon = computed(() => {
-  if (webPhone.callState.value === "incoming") return "mdi-phone-incoming";
-  if (webPhone.callState.value === "calling") return "mdi-phone-outgoing";
-  if (webPhone.callState.value === "active") return "mdi-phone-in-talk";
-  return "mdi-phone-outline";
-});
 
 watch(
   () => props.site,
@@ -939,12 +732,9 @@ watch(pages, () => {
   if (page.value > pages.value) page.value = pages.value;
 });
 
-watch(
-  () => webPhone.callState.value,
-  (state) => {
-    if (state === "incoming") webPhoneDialog.value = true;
-  },
-);
+onUnmounted(() => {
+  clearRebootTimer();
+});
 
 async function reload() {
   if (!props.site) return;
@@ -1011,14 +801,6 @@ function paginate<T>(items: T[]) {
 function toIntercomRow(reader: Record<string, any>, pjsip: Record<string, any>, status: string): IntercomRow {
   const peerToPeer = toFlag(getPjsipValue(pjsip, ["peer_to_peer_enabled", "peerToPeerEnabled"])) === "1";
   const dialMode = toText(getPjsipValue(pjsip, ["dialing_display_mode", "dialingDisplayMode"]), "0");
-  const initialRtpPort = toText(getPjsipValue(pjsip, ["server_outbound_port", "initialRtpPort", "initial_rtp_port"]), "N/A");
-  const rtpPortRange = getPjsipValue(pjsip, ["server_outbound_port_range"]);
-  const explicitFinalRtpPort = getPjsipValue(pjsip, ["finalRtpPort", "final_rtp_port"]);
-  const initialRtpPortNumber = Number(initialRtpPort);
-  const rtpPortRangeNumber = Number(rtpPortRange);
-  const finalRtpPort = rtpPortRange !== undefined && Number.isFinite(initialRtpPortNumber) && Number.isFinite(rtpPortRangeNumber)
-    ? String(initialRtpPortNumber + rtpPortRangeNumber)
-    : toText(explicitFinalRtpPort, "N/A");
 
   return {
     reader,
@@ -1026,8 +808,8 @@ function toIntercomRow(reader: Record<string, any>, pjsip: Record<string, any>,
     location: reader.location || "N/A",
     serverAddress: toText(getPjsipValue(pjsip, ["server_ip", "serverAddress", "server_address", "serverIp"]), "N/A"),
     serverPort: toText(getPjsipValue(pjsip, ["server_port", "serverPort", "port"]), "N/A"),
-    initialRtpPort,
-    finalRtpPort,
+    initialRtpPort: toText(getPjsipValue(pjsip, ["server_outbound_port", "initialRtpPort", "initial_rtp_port"]), "N/A"),
+    finalRtpPort: toText(getPjsipValue(pjsip, ["server_outbound_port_range", "finalRtpPort", "final_rtp_port"]), "N/A"),
     monitorPath: reader.monitorPath || "N/A",
     status,
     sipEnabled: toFlag(getPjsipValue(pjsip, ["enabled"])) === "1",
@@ -1098,8 +880,8 @@ function getPjsipValue(source: Record<string, any>, keys: string[]) {
 
 function normalizeStatus(response: Record<string, any>, pjsip: Record<string, any>) {
   const status = Number(response?.status);
-  if (toFlag(pjsip.enabled) === "0" || status === -1) return "Disabled";
   if (status === 200) return "Connected";
+  if (status === -1 || toFlag(pjsip.enabled) === "0") return "Disabled";
   if (status === 0 || status === 100) return "Connecting";
   if ([401, 403, 408, 503].includes(status)) return "Failed";
   return "Not connected";
@@ -1129,7 +911,7 @@ function openSipDialog(row: IntercomRow) {
   sipForm.serverIp = row.serverAddress === "N/A" ? "" : row.serverAddress;
   sipForm.serverPort = row.serverPort === "N/A" ? "5060" : row.serverPort;
   sipForm.initialRtpPort = row.initialRtpPort === "N/A" ? "10000" : row.initialRtpPort;
-  sipForm.finalRtpPort = row.finalRtpPort === "N/A" ? "10100" : row.finalRtpPort;
+  sipForm.finalRtpPort = row.finalRtpPort === "N/A" ? "1000" : row.finalRtpPort;
   sipForm.numericExtension = row.numericExtension;
   sipForm.extension = row.extension === "N/A" ? "" : row.extension;
   sipForm.login = row.login === "N/A" ? "" : row.login;
@@ -1163,100 +945,12 @@ function openDialCodeDialog(row: IntercomRow) {
 
 function openMakeCallDialog(row: IntercomRow) {
   selectedRow.value = row;
-  makeCallForm.target = isIpAddress(row.serverAddress) ? row.serverAddress : "";
+  makeCallForm.target = row.extension !== "N/A" ? row.extension : "";
   makeCallForm.status = "";
   makeCallForm.statusType = "info";
   makeCallDialog.value = true;
 }
 
-function openWebPhoneDialog(row?: IntercomRow) {
-  const activeRow = row || selectedRow.value || intercomRows.value[0];
-  if (activeRow) {
-    selectedRow.value = activeRow;
-    if (!webPhone.isRegistered.value && activeRow.extension !== "N/A") {
-      webPhoneForm.destination = activeRow.extension;
-    }
-  }
-  webPhoneDialog.value = true;
-}
-
-async function connectWebPhone() {
-  webPhoneConnecting.value = true;
-  try {
-    await webPhone.connect({
-      webSocketServer: webPhoneForm.webSocketServer,
-      aor: webPhoneForm.aor,
-      authorizationUsername: webPhoneForm.username,
-      authorizationPassword: webPhoneForm.password,
-      displayName: "iService365 Web",
-      video: webPhoneForm.video,
-    }, {
-      localVideo: localVideoEl.value,
-      remoteVideo: remoteVideoEl.value,
-      remoteAudio: remoteAudioEl.value,
-    });
-    showMessage("Web phone connected and ready to receive calls.", "success");
-  } catch (error: any) {
-    showMessage(getErrorMessage(error), "error");
-  } finally {
-    webPhoneConnecting.value = false;
-  }
-}
-
-async function disconnectWebPhone() {
-  webPhoneConnecting.value = true;
-  try {
-    await webPhone.disconnect();
-    showMessage("Web phone disconnected.", "info");
-  } finally {
-    webPhoneConnecting.value = false;
-  }
-}
-
-async function startWebCall() {
-  webPhoneActionLoading.value = true;
-  try {
-    await webPhone.call(webPhoneForm.destination);
-  } catch (error: any) {
-    showMessage(getErrorMessage(error), "error");
-  } finally {
-    webPhoneActionLoading.value = false;
-  }
-}
-
-async function answerWebCall() {
-  webPhoneActionLoading.value = true;
-  try {
-    await webPhone.answer();
-  } catch (error: any) {
-    showMessage(getErrorMessage(error), "error");
-  } finally {
-    webPhoneActionLoading.value = false;
-  }
-}
-
-async function declineWebCall() {
-  webPhoneActionLoading.value = true;
-  try {
-    await webPhone.decline();
-  } catch (error: any) {
-    showMessage(getErrorMessage(error), "error");
-  } finally {
-    webPhoneActionLoading.value = false;
-  }
-}
-
-async function hangupWebCall() {
-  webPhoneActionLoading.value = true;
-  try {
-    await webPhone.hangup();
-  } catch (error: any) {
-    showMessage(getErrorMessage(error), "error");
-  } finally {
-    webPhoneActionLoading.value = false;
-  }
-}
-
 function openContactDialog(contact?: ContactRow) {
   selectedContact.value = contact || null;
   contactForm.id = contact?.id;
@@ -1280,34 +974,21 @@ function openDeleteContact(contact: ContactRow) {
 async function saveSipSettings() {
   if (!selectedRow.value) return;
   const isPeerToPeer = sipForm.operatingMode === "peer-to-peer";
-  const initialRtpPort = Number(sipForm.initialRtpPort);
-  const finalRtpPort = Number(sipForm.finalRtpPort);
-
-  if (
-    !Number.isInteger(initialRtpPort) ||
-    !Number.isInteger(finalRtpPort) ||
-    initialRtpPort < 1 ||
-    finalRtpPort > 65535 ||
-    finalRtpPort <= initialRtpPort
-  ) {
-    showMessage("Final RTP Port must be greater than Initial RTP Port and both ports must be between 1 and 65535.", "warning");
-    return;
-  }
-
   const saved = await savePjsip(selectedRow.value.reader._id, {
     enabled: sipForm.enabled ? "1" : "0",
     server_ip: sipForm.serverIp,
     server_port: sipForm.serverPort,
-    server_outbound_port: String(initialRtpPort),
-    server_outbound_port_range: String(finalRtpPort - initialRtpPort),
+    server_outbound_port: sipForm.initialRtpPort,
+    server_outbound_port_range: sipForm.finalRtpPort,
     numeric_branch_enabled: sipForm.numericExtension ? "1" : "0",
     branch: isPeerToPeer ? "" : sipForm.extension,
     login: isPeerToPeer ? "" : sipForm.login,
     password: isPeerToPeer ? "" : sipForm.password,
     peer_to_peer_enabled: isPeerToPeer ? "1" : "0",
-  });
+  }, { showSuccessMessage: false });
   if (saved) {
     sipDialog.value = false;
+    rebootConfirmDialog.value = true;
   }
 }
 
@@ -1339,13 +1020,7 @@ async function runMakeCall() {
   if (!selectedRow.value) return;
   const target = makeCallForm.target.trim();
   if (!target) {
-    makeCallForm.status = "Please enter an IP address to dial.";
-    makeCallForm.statusType = "warning";
-    return;
-  }
-
-  if (!isIpAddress(target)) {
-    makeCallForm.status = "Address to dial must be an IP address.";
+    makeCallForm.status = "Please enter an address to dial.";
     makeCallForm.statusType = "warning";
     return;
   }
@@ -1367,15 +1042,6 @@ async function runMakeCall() {
   }
 }
 
-function isIpAddress(value = "") {
-  const parts = value.trim().split(".");
-  return parts.length === 4 && parts.every((part) => {
-    if (!/^\d{1,3}$/.test(part)) return false;
-    const value = Number(part);
-    return value >= 0 && value <= 255;
-  });
-}
-
 async function runHangupCall() {
   if (!selectedRow.value) return;
   hangingUp.value = true;
@@ -1412,6 +1078,30 @@ async function savePjsip(readerId: string, payload: Record<string, string>, opti
   }
 }
 
+function startRebootWait() {
+  rebootConfirmDialog.value = false;
+  rebootCountdown.value = 59;
+  rebootingDialog.value = true;
+  clearRebootTimer();
+
+  rebootTimer = setInterval(() => {
+    rebootCountdown.value -= 1;
+    if (rebootCountdown.value <= 0) {
+      clearRebootTimer();
+      rebootingDialog.value = false;
+      showMessage("Equipment reboot wait completed.", "success");
+      reload();
+    }
+  }, 1000);
+}
+
+function clearRebootTimer() {
+  if (rebootTimer) {
+    clearInterval(rebootTimer);
+    rebootTimer = undefined;
+  }
+}
+
 async function saveContact() {
   if (!contactForm.readerId || !contactForm.name.trim() || !contactForm.serverAddress.trim()) {
     showMessage("Please complete the required contact fields.", "warning");
@@ -1569,23 +1259,6 @@ export default {
   width: 160px;
 }
 
-.web-call-button {
-  min-width: 160px;
-  background: #e5e7eb;
-  color: #0b2c40;
-  font-size: 12px;
-}
-
-.web-call-button.is-connected {
-  background: #d9f2e1;
-  color: #16743a;
-}
-
-.web-call-button.has-incoming-call {
-  background: #1769aa;
-  color: #fff;
-}
-
 .add-button {
   min-width: 160px;
   background: #dedede;
@@ -1957,6 +1630,98 @@ export default {
   overflow: hidden;
 }
 
+.reboot-dialog {
+  position: relative;
+  min-height: 220px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.reboot-close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  display: grid;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  place-items: center;
+  background: transparent;
+  color: #c7c7c7;
+  cursor: pointer;
+}
+
+.reboot-title {
+  padding: 24px 20px 12px;
+  color: #111;
+  font-size: 28px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.2;
+}
+
+.reboot-message {
+  padding: 24px 20px 28px;
+  color: #222;
+  font-size: 17px;
+  line-height: 1.45;
+}
+
+.reboot-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 20px;
+  padding: 0 20px 20px;
+}
+
+.reboot-cancel {
+  color: #075fb7;
+  font-size: 16px;
+  letter-spacing: 0;
+}
+
+.reboot-ok {
+  min-width: 64px;
+  border-radius: 5px;
+  background: #062f4d;
+  color: #fff;
+  font-size: 16px;
+  letter-spacing: 0;
+}
+
+.rebooting-card {
+  display: grid;
+  min-height: 240px;
+  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
+  align-items: center;
+  gap: 24px;
+  padding: 20px 54px;
+  background: #fff;
+}
+
+.wait-word {
+  color: #347bd6;
+  font-size: 120px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 0.95;
+}
+
+.rebooting-copy h3 {
+  margin: 0 0 18px;
+  color: #000;
+  font-size: 30px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.rebooting-copy p {
+  margin: 0;
+  color: #000;
+  font-size: 16px;
+}
+
 .call-dialog .dialog-body {
   padding: 18px 24px 24px;
 }
@@ -2166,209 +1931,6 @@ export default {
   line-height: 1.45;
 }
 
-.web-phone-dialog {
-  width: 820px;
-  max-width: 94vw;
-  overflow: hidden;
-  background: #fff;
-}
-
-.web-phone-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.web-phone-status {
-  min-width: 92px;
-  justify-content: center;
-  font-size: 10px;
-}
-
-.web-phone-status.ready {
-  background: #d9f2e1;
-  color: #16743a;
-}
-
-.web-phone-status.incoming {
-  background: #dcecff;
-  color: #125c9a;
-}
-
-.web-phone-status.failed {
-  background: #fce2e2;
-  color: #a92222;
-}
-
-.web-phone-status.idle {
-  background: #e5e7eb;
-  color: #5d6673;
-}
-
-.web-phone-body {
-  display: grid;
-  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
-  gap: 24px;
-  min-height: 440px;
-  padding: 22px 24px 24px;
-}
-
-.web-phone-settings {
-  padding-right: 24px;
-  border-right: 1px solid #e5e7eb;
-}
-
-.web-phone-section-title {
-  margin-bottom: 14px;
-  color: #0d1720;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.web-video-toggle {
-  margin-top: 12px;
-}
-
-.web-phone-connect {
-  min-height: 42px;
-  margin-top: 14px;
-  background: #082b40;
-  color: #fff;
-}
-
-.web-phone-disconnect {
-  min-height: 42px;
-  margin-top: 14px;
-  border-color: #aeb8c2;
-  color: #344054;
-}
-
-.web-phone-console {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-}
-
-.web-phone-media {
-  position: relative;
-  display: grid;
-  min-height: 260px;
-  overflow: hidden;
-  place-items: center;
-  border: 1px solid #d7dde4;
-  border-radius: 6px;
-  background: #102a3b;
-}
-
-.remote-video {
-  display: none;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.web-phone-media.has-video .remote-video {
-  display: block;
-}
-
-.local-video {
-  position: absolute;
-  right: 12px;
-  bottom: 12px;
-  display: none;
-  width: 108px;
-  aspect-ratio: 3 / 4;
-  border: 2px solid #fff;
-  border-radius: 4px;
-  background: #263b49;
-  object-fit: cover;
-}
-
-.web-phone-media.has-video .local-video {
-  display: block;
-}
-
-.audio-call-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 28px;
-  color: #fff;
-  flex-direction: column;
-  gap: 10px;
-  text-align: center;
-}
-
-.audio-call-state strong {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.audio-call-state span {
-  max-width: 100%;
-  overflow: hidden;
-  color: #c9d7e1;
-  font-size: 11px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.web-phone-dial-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 42px;
-  gap: 8px;
-  align-items: start;
-}
-
-.start-web-call,
-.hangup-web-call {
-  width: 42px;
-  height: 38px;
-  border-radius: 4px;
-  background: #2a9b50;
-  color: #fff;
-}
-
-.hangup-web-call,
-.reject-call {
-  background: #c9293d;
-}
-
-.incoming-call-actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-  margin-top: 14px;
-}
-
-.answer-call,
-.reject-call {
-  min-height: 42px;
-  color: #fff;
-}
-
-.answer-call {
-  background: #2a9b50;
-}
-
-.active-call-controls {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  margin-top: 16px;
-}
-
-.active-call-controls .v-btn {
-  width: 46px;
-  height: 46px;
-}
-
-.web-phone-error {
-  margin-top: 14px;
-  font-size: 11px;
-}
-
 .call-two-col {
   gap: 12px;
 }
@@ -2502,22 +2064,13 @@ export default {
     max-width: none;
   }
 
-  .web-call-button {
-    width: 100%;
-  }
-
-  .web-phone-body {
-    grid-template-columns: minmax(0, 1fr);
-    max-height: 78vh;
-    overflow: auto;
+  .rebooting-card {
+    grid-template-columns: 1fr;
+    padding: 28px;
   }
 
-  .web-phone-settings {
-    padding-right: 0;
-    padding-bottom: 20px;
-    border-right: 0;
-    border-bottom: 1px solid #e5e7eb;
+  .wait-word {
+    font-size: 80px;
   }
-
 }
 </style>