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

package/components/HidIntercomManagement.vue

@@ -12,7 +12,17 @@
         Add Contacts
       </v-btn>
 
-      <div v-else class="top-placeholder" />
+      <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 class="toolbar-spacer" />
 
@@ -105,6 +115,7 @@
                       <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>
@@ -223,6 +234,13 @@
             <v-radio label="UDP" value="UDP" />
             <v-radio label="TCP" value="TCP" />
           </v-radio-group>
+          <div class="sip-switch-row sip-section-switch">
+            <div>
+              <span>Enable video</span>
+              <small>Allow this reader to send its camera feed during SIP intercom calls.</small>
+            </div>
+            <v-switch v-model="sipForm.videoEnabled" :disabled="!sipForm.enabled" color="success" density="compact" hide-details />
+          </div>
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
           <v-btn class="text-none action-cancel" variant="flat" height="44" @click="sipDialog = false">Cancel</v-btn>
@@ -231,36 +249,6 @@
       </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>
@@ -350,10 +338,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">Address to dial</div>
+            <div class="call-label">Extension, SIP address, or peer IP</div>
             <v-text-field
               v-model="makeCallForm.target"
-              placeholder="Enter extension, address, or contact"
+              placeholder="7100 or user@example.com"
               variant="outlined"
               density="compact"
               hide-details="auto"
@@ -388,12 +376,190 @@
           </div>
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
-          <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-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>
+          <div class="web-phone-title-actions">
+            <v-chip size="small" variant="flat" :class="webPhoneStatusClass">
+              {{ webPhoneStatusLabel }}
+            </v-chip>
+            <v-btn
+              icon="mdi-close"
+              size="small"
+              variant="text"
+              title="Close Web Call"
+              aria-label="Close Web Call"
+              @click="webPhoneDialog = false"
+            />
+          </div>
+        </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 v-if="sipAccountLoading" class="sip-account-state">
+              <v-progress-circular indeterminate color="primary" size="30" width="3" />
+              <span>Preparing your private SIP account...</span>
+            </div>
+            <div v-else-if="sipAccountError" class="sip-account-state is-error">
+              <v-icon icon="mdi-alert-circle-outline" size="28" />
+              <span>{{ sipAccountError }}</span>
+              <v-btn
+                class="text-none sip-account-retry"
+                variant="outlined"
+                prepend-icon="mdi-refresh"
+                @click="loadSipAccount"
+              >
+                Retry
+              </v-btn>
+            </div>
+            <div v-else-if="sipAccount" class="sip-account-summary">
+              <div>
+                <span class="sip-account-label">Assigned extension</span>
+                <strong class="sip-account-extension">{{ sipAccount.extension }}</strong>
+              </div>
+              <span class="sip-account-address">{{ sipAccount.sipAddress }}</span>
+            </div>
+            <div class="call-toggle-row web-video-toggle">
+              <div>
+                <span>Receive HID video</span>
+                <small>Show the HID camera feed without sharing this device's camera.</small>
+              </div>
+              <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"
+              :disabled="!sipAccount || sipAccountLoading"
+              @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',
+                'has-remote-video': webPhone.remoteVideoAvailable.value,
+              }"
+            >
+              <video ref="remoteVideoEl" autoplay playsinline class="remote-video" />
+              <audio ref="remoteAudioEl" autoplay />
+              <div
+                v-if="!webPhoneForm.video || webPhone.callState.value !== 'active' || !webPhone.remoteVideoAvailable.value"
+                class="audio-call-state"
+              >
+                <v-icon size="54">{{ webPhoneCallIcon }}</v-icon>
+                <strong>{{ webPhoneCallLabel }}</strong>
+                <span v-if="webPhone.currentTarget.value">{{ webPhone.currentTarget.value }}</span>
+                <span v-if="webPhoneForm.video && webPhone.callState.value === 'active' && !webPhone.remoteVideoAvailable.value">
+                  Waiting for video from the HID device
+                </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="toggleWebMute"
+                />
+                <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>
+    </v-dialog>
+
     <v-dialog v-model="contactDialog" max-width="360" persistent>
       <v-card class="form-dialog" rounded="lg">
         <v-card-title class="dialog-title">{{ contactForm.id ? 'Edit Contact' : 'Add Contact' }}</v-card-title>
@@ -448,6 +614,10 @@
 
 <script setup lang="ts">
 const props = defineProps({
+  org: {
+    type: String,
+    required: true,
+  },
   site: {
     type: String,
     required: true,
@@ -466,6 +636,19 @@ type ContactRow = {
   dialCode: string;
 };
 
+type SipAccount = {
+  orgId: string;
+  site: string;
+  userId: string;
+  extension: string;
+  username: string;
+  password: string;
+  sipAddress: string;
+  websocketUrl: string;
+  status: "active";
+  provisionedAt: string;
+};
+
 type DetailItem = {
   label: string;
   value?: string | number | boolean;
@@ -474,7 +657,7 @@ type DetailItem = {
 };
 
 type IntercomRow = {
-  reader: Record<string, any>;
+  reader: Record<string, unknown>;
   name: string;
   location: string;
   serverAddress: string;
@@ -490,6 +673,7 @@ type IntercomRow = {
   password: string;
   operatingMode: string;
   protocol: string;
+  videoEnabled: boolean;
   dialMode: string;
   dialModeLabel: string;
   dialCode: string;
@@ -502,7 +686,7 @@ type IntercomRow = {
   externalDialButton: boolean;
   unknownContact: boolean;
   callAfter: string;
-  pjsip: Record<string, any>;
+  pjsip: Record<string, unknown>;
 };
 
 const {
@@ -513,6 +697,7 @@ const {
   getIntercomStatus,
   makeIntercomCall,
   finalizeIntercomCall,
+  ensureSipAccount,
 } = useHidAmico();
 
 const activeTab = ref<IntercomTab>("intercom");
@@ -531,21 +716,26 @@ const limit = 20;
 const selectedRow = ref<IntercomRow | null>(null);
 const selectedContact = ref<ContactRow | null>(null);
 const showSipPassword = ref(false);
+const webPhoneConnecting = ref(false);
+const webPhoneActionLoading = ref(false);
+const sipAccount = ref<SipAccount | null>(null);
+const sipAccountLoading = ref(false);
+const sipAccountError = ref("");
+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"];
 
@@ -582,13 +772,14 @@ const sipForm = reactive({
   serverIp: "",
   serverPort: "5060",
   initialRtpPort: "10000",
-  finalRtpPort: "1000",
+  finalRtpPort: "10100",
   numericExtension: false,
   extension: "",
   login: "",
   password: "",
   operatingMode: "sip-client",
   protocol: "UDP",
+  videoEnabled: false,
 });
 
 const callForm = reactive({
@@ -617,6 +808,11 @@ const makeCallForm = reactive({
   statusType: "info" as MessageType,
 });
 
+const webPhoneForm = reactive({
+  destination: "",
+  video: false,
+});
+
 const contactForm = reactive({
   id: undefined as number | undefined,
   readerId: "",
@@ -694,6 +890,7 @@ const intercomDetailSections = computed(() => {
       items: [
         { label: "Operating Mode", value: row?.operatingMode },
         { label: "Protocol", value: row?.protocol },
+        { label: "Video", value: row?.videoEnabled ? "Enabled" : "Disabled" },
       ],
     },
     {
@@ -717,10 +914,45 @@ 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,
-  () => reload(),
+  [() => props.org, () => props.site],
+  () => {
+    if (webPhone.isRegistered.value) void webPhone.disconnect();
+    sipAccount.value = null;
+    sipAccountError.value = "";
+    webPhoneForm.destination = "";
+    void reload();
+  },
   { immediate: true },
 );
 
@@ -732,9 +964,12 @@ watch(pages, () => {
   if (page.value > pages.value) page.value = pages.value;
 });
 
-onUnmounted(() => {
-  clearRebootTimer();
-});
+watch(
+  () => webPhone.callState.value,
+  (state) => {
+    if (state === "incoming") webPhoneDialog.value = true;
+  },
+);
 
 async function reload() {
   if (!props.site) return;
@@ -798,19 +1033,27 @@ function paginate<T>(items: T[]) {
   return items.slice(start, start + limit);
 }
 
-function toIntercomRow(reader: Record<string, any>, pjsip: Record<string, any>, status: string): IntercomRow {
+function toIntercomRow(reader: Record<string, unknown>, pjsip: Record<string, unknown>, 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,
-    name: reader.name || reader.deviceId || "HID Reader",
-    location: reader.location || "N/A",
+    name: toText(reader.name || reader.deviceId, "HID Reader"),
+    location: toText(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: 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",
+    initialRtpPort,
+    finalRtpPort,
+    monitorPath: toText(reader.monitorPath, "N/A"),
     status,
     sipEnabled: toFlag(getPjsipValue(pjsip, ["enabled"])) === "1",
     numericExtension: toFlag(getPjsipValue(pjsip, ["numeric_branch_enabled", "numericExtension", "numericExtensionEnabled"])) === "1",
@@ -819,6 +1062,7 @@ function toIntercomRow(reader: Record<string, any>, pjsip: Record<string, any>,
     password: toText(getPjsipValue(pjsip, ["password"]), ""),
     operatingMode: peerToPeer ? "Peer-to-Peer" : "SIP Client",
     protocol: toText(getPjsipValue(pjsip, ["protocol"]), "UDP"),
+    videoEnabled: toFlag(getPjsipValue(pjsip, ["video_enabled", "videoEnabled"])) === "1",
     dialMode,
     dialModeLabel: getDialModeLabel(dialMode),
     dialCode: toText(getPjsipValue(pjsip, ["open_door_command", "dialCode"]), "N/A"),
@@ -835,7 +1079,7 @@ function toIntercomRow(reader: Record<string, any>, pjsip: Record<string, any>,
   };
 }
 
-function normalizePjsip(...sources: Record<string, any>[]) {
+function normalizePjsip(...sources: Record<string, unknown>[]) {
   for (const source of sources) {
     const candidate = findPjsipCandidate(source);
     if (candidate) return candidate;
@@ -843,45 +1087,46 @@ function normalizePjsip(...sources: Record<string, any>[]) {
   return {};
 }
 
-function findPjsipCandidate(source: Record<string, any> | undefined): Record<string, any> | undefined {
+function findPjsipCandidate(source: Record<string, unknown> | undefined): Record<string, unknown> | undefined {
   if (!source || typeof source !== "object") return undefined;
   const candidates = [
     source.pjsip,
-    source.configuration?.pjsip,
-    source.result?.pjsip,
-    source.result?.configuration?.pjsip,
-    source.data?.pjsip,
-    source.data?.configuration?.pjsip,
-    source.data?.result?.pjsip,
-    source.data?.result?.configuration?.pjsip,
-    source.data?.data?.pjsip,
-    source.data?.data?.configuration?.pjsip,
-    source.configuration,
-    source.data?.configuration,
-    source.data?.data?.configuration,
+    toRecord(source.pjsip),
+    toRecord(toRecord(source.configuration).pjsip),
+    toRecord(toRecord(source.result).pjsip),
+    toRecord(toRecord(toRecord(source.result).configuration).pjsip),
+    toRecord(toRecord(source.data).pjsip),
+    toRecord(toRecord(toRecord(source.data).configuration).pjsip),
+    toRecord(toRecord(toRecord(source.data).result).pjsip),
+    toRecord(toRecord(toRecord(toRecord(source.data).result).configuration).pjsip),
+    toRecord(toRecord(toRecord(source.data).data).pjsip),
+    toRecord(toRecord(toRecord(toRecord(source.data).data).configuration).pjsip),
+    toRecord(source.configuration),
+    toRecord(toRecord(source.data).configuration),
+    toRecord(toRecord(toRecord(source.data).data).configuration),
     source,
   ];
 
   return candidates.find((candidate) => isPjsipCandidate(candidate));
 }
 
-function isPjsipCandidate(value: unknown): value is Record<string, any> {
+function isPjsipCandidate(value: unknown): value is Record<string, unknown> {
   if (!value || typeof value !== "object" || Array.isArray(value)) return false;
   return pjsipKeys.some((key) => Object.prototype.hasOwnProperty.call(value, key)) ||
     ["serverAddress", "serverIp", "serverPort", "extension", "peerToPeerEnabled"].some((key) => Object.prototype.hasOwnProperty.call(value, key));
 }
 
-function getPjsipValue(source: Record<string, any>, keys: string[]) {
+function getPjsipValue(source: Record<string, unknown>, keys: string[]) {
   for (const key of keys) {
     if (source?.[key] !== undefined && source?.[key] !== null && source?.[key] !== "") return source[key];
   }
   return undefined;
 }
 
-function normalizeStatus(response: Record<string, any>, pjsip: Record<string, any>) {
+function normalizeStatus(response: Record<string, unknown>, pjsip: Record<string, unknown>) {
   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";
@@ -911,13 +1156,14 @@ 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" ? "1000" : row.finalRtpPort;
+  sipForm.finalRtpPort = row.finalRtpPort === "N/A" ? "10100" : row.finalRtpPort;
   sipForm.numericExtension = row.numericExtension;
   sipForm.extension = row.extension === "N/A" ? "" : row.extension;
   sipForm.login = row.login === "N/A" ? "" : row.login;
   sipForm.password = row.password;
   sipForm.operatingMode = row.operatingMode === "Peer-to-Peer" ? "peer-to-peer" : "sip-client";
   sipForm.protocol = row.protocol || "UDP";
+  sipForm.videoEnabled = row.videoEnabled;
   sipDialog.value = true;
 }
 
@@ -943,12 +1189,140 @@ function openDialCodeDialog(row: IntercomRow) {
   dialCodeDialog.value = true;
 }
 
-function openMakeCallDialog(row: IntercomRow) {
+async function openMakeCallDialog(row: IntercomRow) {
   selectedRow.value = row;
-  makeCallForm.target = row.extension !== "N/A" ? row.extension : "";
+  makeCallForm.target = sipAccount.value?.extension || "";
   makeCallForm.status = "";
   makeCallForm.statusType = "info";
   makeCallDialog.value = true;
+  if (!sipAccount.value && !sipAccountLoading.value) {
+    await loadSipAccount();
+    if (makeCallDialog.value && !makeCallForm.target) {
+      makeCallForm.target = sipAccount.value?.extension || "";
+    }
+  }
+}
+
+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;
+      webPhoneForm.video = activeRow.videoEnabled;
+    }
+  }
+  webPhoneDialog.value = true;
+  if (!sipAccount.value && !sipAccountLoading.value) void loadSipAccount();
+}
+
+async function loadSipAccount() {
+  if (!props.org || !props.site) return;
+
+  sipAccountLoading.value = true;
+  sipAccountError.value = "";
+  try {
+    const response = await ensureSipAccount(props.site, props.org);
+    sipAccount.value = normalizeSipAccount(response);
+  } catch (error: unknown) {
+    sipAccount.value = null;
+    sipAccountError.value = getErrorMessage(error);
+  } finally {
+    sipAccountLoading.value = false;
+  }
+}
+
+async function connectWebPhone() {
+  const account = sipAccount.value;
+  if (!account) {
+    await loadSipAccount();
+    if (!sipAccount.value) return;
+  }
+
+  const activeAccount = sipAccount.value;
+  if (!activeAccount) return;
+
+  webPhoneConnecting.value = true;
+  try {
+    await webPhone.connect({
+      webSocketServer: activeAccount.websocketUrl,
+      aor: activeAccount.sipAddress,
+      authorizationUsername: activeAccount.username,
+      authorizationPassword: activeAccount.password,
+      displayName: "iService365 Web",
+      video: webPhoneForm.video,
+    }, {
+      remoteVideo: remoteVideoEl.value,
+      remoteAudio: remoteAudioEl.value,
+    });
+    showMessage("Web phone connected and ready to receive calls.", "success");
+  } catch (error: unknown) {
+    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: unknown) {
+    showMessage(getErrorMessage(error), "error");
+  } finally {
+    webPhoneActionLoading.value = false;
+  }
+}
+
+async function answerWebCall() {
+  webPhoneActionLoading.value = true;
+  try {
+    await webPhone.answer();
+  } catch (error: unknown) {
+    showMessage(getErrorMessage(error), "error");
+  } finally {
+    webPhoneActionLoading.value = false;
+  }
+}
+
+async function declineWebCall() {
+  webPhoneActionLoading.value = true;
+  try {
+    await webPhone.decline();
+  } catch (error: unknown) {
+    showMessage(getErrorMessage(error), "error");
+  } finally {
+    webPhoneActionLoading.value = false;
+  }
+}
+
+async function hangupWebCall() {
+  webPhoneActionLoading.value = true;
+  try {
+    await webPhone.hangup();
+  } catch (error: unknown) {
+    showMessage(getErrorMessage(error), "error");
+  } finally {
+    webPhoneActionLoading.value = false;
+  }
+}
+
+function toggleWebMute() {
+  try {
+    webPhone.toggleMute();
+  } catch (error: unknown) {
+    showMessage(getErrorMessage(error), "error");
+  }
 }
 
 function openContactDialog(contact?: ContactRow) {
@@ -974,21 +1348,35 @@ 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: sipForm.initialRtpPort,
-    server_outbound_port_range: sipForm.finalRtpPort,
+    server_outbound_port: String(initialRtpPort),
+    server_outbound_port_range: String(finalRtpPort - initialRtpPort),
     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 });
+    video_enabled: sipForm.videoEnabled ? "1" : "0",
+  });
   if (saved) {
     sipDialog.value = false;
-    rebootConfirmDialog.value = true;
   }
 }
 
@@ -1020,7 +1408,13 @@ async function runMakeCall() {
   if (!selectedRow.value) return;
   const target = makeCallForm.target.trim();
   if (!target) {
-    makeCallForm.status = "Please enter an address to dial.";
+    makeCallForm.status = "Please enter an extension, SIP address, or peer IP.";
+    makeCallForm.statusType = "warning";
+    return;
+  }
+
+  if (!isSipCallTarget(target)) {
+    makeCallForm.status = "Enter a valid extension, SIP address, or IPv4 address.";
     makeCallForm.statusType = "warning";
     return;
   }
@@ -1042,6 +1436,10 @@ async function runMakeCall() {
   }
 }
 
+function isSipCallTarget(value = "") {
+  return /^(?:sip:)?[A-Za-z0-9_.+-]+(?:@[A-Za-z0-9.-]+(?::\d{1,5})?)?$/.test(value.trim());
+}
+
 async function runHangupCall() {
   if (!selectedRow.value) return;
   hangingUp.value = true;
@@ -1078,30 +1476,6 @@ 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");
@@ -1182,8 +1556,42 @@ function showMessage(text: string, type: MessageType = "info") {
   message.type = type;
 }
 
-function getErrorMessage(error: any) {
-  return error?.data?.message || error?.response?._data?.message || error?.message || "HID intercom request failed.";
+function normalizeSipAccount(response: unknown): SipAccount {
+  const responseRecord = toRecord(response);
+  const payload = toRecord(responseRecord.data || responseRecord);
+  const requiredFields = ["extension", "username", "password", "sipAddress", "websocketUrl"] as const;
+
+  if (requiredFields.some((field) => !toText(payload[field]))) {
+    throw new Error("The SIP account response is incomplete. Please try again.");
+  }
+
+  return {
+    orgId: toText(payload.orgId, props.org),
+    site: toText(payload.site, props.site),
+    userId: toText(payload.userId),
+    extension: toText(payload.extension),
+    username: toText(payload.username),
+    password: toText(payload.password),
+    sipAddress: toText(payload.sipAddress),
+    websocketUrl: toText(payload.websocketUrl),
+    status: "active",
+    provisionedAt: toText(payload.provisionedAt),
+  };
+}
+
+function getErrorMessage(error: unknown) {
+  const errorRecord = toRecord(error);
+  const data = toRecord(errorRecord.data);
+  const response = toRecord(errorRecord.response);
+  const responseData = toRecord(response._data);
+  return toText(data.message)
+    || toText(responseData.message)
+    || toText(errorRecord.message)
+    || "HID intercom request failed.";
+}
+
+function toRecord(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
 }
 
 function toText(value: unknown, fallback = "") {
@@ -1259,6 +1667,23 @@ 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;
@@ -1468,6 +1893,20 @@ export default {
   margin-bottom: 12px;
 }
 
+.sip-section-switch > div {
+  display: flex;
+  min-width: 0;
+  padding: 8px 12px 8px 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sip-section-switch small {
+  color: #667085;
+  font-size: 10px;
+  line-height: 1.4;
+}
+
 .sip-switch-row :deep(.v-switch) {
   flex: 0 0 auto;
 }
@@ -1630,98 +2069,6 @@ 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;
 }
@@ -1931,6 +2278,274 @@ export default {
   line-height: 1.45;
 }
 
+.web-phone-dialog {
+  display: flex;
+  width: 820px;
+  max-height: min(90vh, 760px);
+  max-width: 94vw;
+  overflow: hidden;
+  background: #fff;
+  flex-direction: column;
+}
+
+.web-phone-title {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.web-phone-title-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.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;
+  overflow: auto;
+  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;
+}
+
+.sip-account-state {
+  display: flex;
+  min-height: 126px;
+  align-items: center;
+  justify-content: center;
+  padding: 18px;
+  border: 1px solid #dce2e8;
+  border-radius: 6px;
+  color: #5d6673;
+  flex-direction: column;
+  font-size: 12px;
+  gap: 12px;
+  text-align: center;
+}
+
+.sip-account-state.is-error {
+  border-color: #f0c7c7;
+  background: #fff8f8;
+  color: #a92222;
+}
+
+.sip-account-retry {
+  min-width: 104px;
+  border-color: #aeb8c2;
+  color: #344054;
+}
+
+.sip-account-summary {
+  display: grid;
+  min-height: 96px;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid #dce2e8;
+  border-radius: 6px;
+  background: #f8fafc;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 18px;
+}
+
+.sip-account-summary > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sip-account-label {
+  color: #667085;
+  font-size: 11px;
+}
+
+.sip-account-extension {
+  color: #0d1720;
+  font-size: 24px;
+  line-height: 1.1;
+}
+
+.sip-account-address {
+  max-width: 170px;
+  overflow: hidden;
+  color: #536273;
+  font-size: 11px;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.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-remote-video .remote-video {
+  display: block;
+}
+
+.web-phone-media.has-remote-video .audio-call-state {
+  display: none;
+}
+
+.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;
 }
@@ -2064,13 +2679,21 @@ export default {
     max-width: none;
   }
 
-  .rebooting-card {
-    grid-template-columns: 1fr;
-    padding: 28px;
+  .web-call-button {
+    width: 100%;
+  }
+
+  .web-phone-body {
+    grid-template-columns: minmax(0, 1fr);
+    min-height: 0;
   }
 
-  .wait-word {
-    font-size: 80px;
+  .web-phone-settings {
+    padding-right: 0;
+    padding-bottom: 20px;
+    border-right: 0;
+    border-bottom: 1px solid #e5e7eb;
   }
+
 }
 </style>