@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/HidIntercomManagement.vue

@@ -1,40 +1,26 @@
+<!--
+  HID INTERCOM MANAGEMENT - the readers' door intercoms and their contact list.
+
+  The largest of the six panels, and it was a private copy of the standard
+  table: an above-card toolbar, a `v-tabs` strip, a raw `v-table` with TWO
+  column sets, a refresh strip with a pager, a SECOND pager in the footer, an
+  empty state and its own chip palette - in about a hundred and forty literal
+  hexes. Those literals are why it had no dark theme: `#1f2937` on the dark
+  card measures 1.13:1, `white on #a7a7a7` 2.41:1 and the "Intercom" tab label
+  2.54:1.
+
+  It is the design's standard table screen with tabs, so it is drawn with the
+  shared one: `TableMain` supplies the heading, the card, the in-card toolbar,
+  the `app-tab` strip, the header row, the rows and ONE pager. The two column
+  sets stay two column sets - `tableHeaders` and `visibleRows` switch on the
+  active tab exactly as the two `<thead>` blocks did.
+
+  Every dialog, handler, SIP call and web-phone control is unchanged. Only the
+  chrome and the colours move; no call, connect, hangup or device path is
+  touched.
+-->
 <template>
   <section class="hid-intercom-management">
-    <div class="top-bar">
-      <v-btn
-        v-if="activeTab === 'contacts'"
-        rounded="xl"
-        class="text-none add-button"
-        variant="flat"
-        prepend-icon="mdi-plus"
-        @click="openContactDialog()"
-      >
-        Add Contacts
-      </v-btn>
-
-      <div v-else class="top-placeholder" />
-
-      <div class="toolbar-spacer" />
-
-      <v-text-field
-        v-model="search"
-        placeholder="Search"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="search-input"
-      />
-
-      <v-select
-        v-model="statusFilter"
-        :items="statusOptions"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="status-input"
-      />
-    </div>
-
     <v-alert
       v-if="message.text"
       :type="message.type"
@@ -45,108 +31,153 @@
       {{ message.text }}
     </v-alert>
 
-    <v-card flat border class="table-card">
-      <div class="table-refresh">
-        <v-btn icon="mdi-refresh" variant="text" density="comfortable" :loading="loading" @click="reload" />
-        <div class="toolbar-spacer" />
-        <span>{{ pageRange }}</span>
-        <v-btn icon="mdi-chevron-left" variant="text" density="compact" :disabled="page <= 1" @click="page--" />
-        <v-btn icon="mdi-chevron-right" variant="text" density="compact" :disabled="page >= pages" @click="page++" />
-      </div>
-
-      <v-tabs v-model="activeTab" class="intercom-tabs" density="compact">
-        <v-tab value="intercom" class="text-none">Intercom</v-tab>
-        <v-tab value="contacts" class="text-none">Intercom Contacts</v-tab>
-      </v-tabs>
-
-      <div class="table-body">
-        <v-table>
-          <thead>
-            <tr v-if="activeTab === 'intercom'">
-              <th>Name</th>
-              <th>Location</th>
-              <th>SIP Server Address</th>
-              <th>Operating Mode</th>
-              <th>Dial Code</th>
-              <th>SIP Status</th>
-              <th class="text-right"></th>
-            </tr>
-            <tr v-else>
-              <th>Name</th>
-              <th>Location</th>
-              <th>SIP Server Address</th>
-              <th>Dial Code</th>
-              <th class="text-right"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <template v-if="activeTab === 'intercom'">
-              <tr v-for="row in paginatedIntercomRows" :key="row.reader._id">
-                <td>{{ row.name }}</td>
-                <td>{{ row.location }}</td>
-                <td>
-                  <span :class="{ 'link-text': row.serverAddress !== 'N/A' }">{{ row.serverAddress }}</span>
-                </td>
-                <td>{{ row.operatingMode }}</td>
-                <td>{{ row.dialCode }}</td>
-                <td>
-                  <v-chip size="small" variant="flat" :class="getStatusClass(row.status)">
-                    {{ row.status }}
-                  </v-chip>
-                </td>
-                <td class="text-right">
-                  <v-menu location="bottom end">
-                    <template #activator="{ props: menuProps }">
-                      <v-btn v-bind="menuProps" icon="mdi-dots-vertical" variant="text" density="comfortable" />
-                    </template>
-                    <v-list density="compact" class="row-menu">
-                      <v-list-item title="View" @click="openViewDialog(row)" />
-                      <v-list-item title="SIP Settings" @click="openSipDialog(row)" />
-                      <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>
-                  </v-menu>
-                </td>
-              </tr>
-            </template>
-
-            <template v-else>
-              <tr v-for="contact in paginatedContacts" :key="contact._rowKey">
-                <td>{{ contact.name }}</td>
-                <td>{{ contact.location }}</td>
-                <td>
-                  <span :class="{ 'link-text': contact.serverAddress !== 'N/A' }">{{ contact.serverAddress }}</span>
-                </td>
-                <td>{{ contact.dialCode }}</td>
-                <td class="text-right">
-                  <v-menu location="bottom end">
-                    <template #activator="{ props: menuProps }">
-                      <v-btn v-bind="menuProps" icon="mdi-dots-vertical" variant="text" density="comfortable" />
-                    </template>
-                    <v-list density="compact" class="row-menu">
-                      <v-list-item title="View" @click="openContactView(contact)" />
-                      <v-list-item title="Edit" @click="openContactDialog(contact)" />
-                      <v-list-item title="Delete" @click="openDeleteContact(contact)" />
-                    </v-list>
-                  </v-menu>
-                </td>
-              </tr>
-            </template>
-          </tbody>
-        </v-table>
-
-        <div v-if="!visibleRows.length" class="empty-state">
-          No intercom records found.
+    <TableMain
+      title="Intercom"
+      :headers="tableHeaders"
+      :items="visiblePageRows"
+      :loading="loading"
+      :items-per-page="-1"
+      :page="page"
+      :pages="pages"
+      :page-range="pageRange"
+      item-value="_rowKey"
+      show-header
+      @refresh="reload"
+      @update:page="page = $event"
+    >
+      <!-- The action swaps with the tab, as it did in the old top bar. -->
+      <template #actions>
+        <AppButton
+          v-if="activeTab === 'contacts'"
+          icon="mdi-plus"
+          @click="openContactDialog()"
+        >
+          Add Contacts
+        </AppButton>
+        <AppButton
+          v-else
+          icon="mdi-phone-in-talk-outline"
+          class="web-call-button"
+          :class="webPhoneButtonClass"
+          @click="openWebPhoneDialog()"
+        >
+          {{ webPhone.callState.value === 'incoming' ? 'Incoming Call' : 'Web Call' }}
+        </AppButton>
+      </template>
+
+      <!-- Was `v-tabs`/`v-tab`, whose selected state is drawn from Vuetify's
+           `on-surface`. `.app-tab` is the shared strip. -->
+      <template #tabs>
+        <button
+          v-for="tab in tabOptions"
+          :key="tab.value"
+          type="button"
+          role="tab"
+          class="app-tab"
+          :class="{ 'app-tab--active': activeTab === tab.value }"
+          :aria-selected="activeTab === tab.value"
+          @click="selectTab(tab.value)"
+        >
+          {{ tab.label }}
+        </button>
+      </template>
+
+      <template #extension>
+        <div class="app-filter-row hid-intercom-filters">
+          <!-- Staging (1e6224e) added a reader picker here and filters both
+               tabs by it; it keeps that job, drawn as the shared select. -->
+          <AppSelect
+            v-if="readers.length"
+            v-model="selectedReaderId"
+            class="reader-select"
+            :items="readerOptions"
+            @update:model-value="page = 1"
+          />
+          <AppField v-model="search" search placeholder="Search" />
+          <AppSelect
+            v-model="statusFilter"
+            :items="statusOptions"
+            placeholder="Status"
+            clearable
+          />
         </div>
-      </div>
-
-      <div class="table-footer">
-        <span>{{ pageRange }}</span>
-        <v-btn icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="page--" />
-        <v-btn icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= pages" @click="page++" />
-      </div>
-    </v-card>
+      </template>
+
+      <template #[`item.name`]="{ item }">
+        <span class="app-cell--strong">{{ item.name }}</span>
+      </template>
+
+      <template #[`item.location`]="{ item }">
+        <span class="app-cell--muted">{{ item.location }}</span>
+      </template>
+
+      <template #[`item.serverAddress`]="{ item }">
+        <span :class="item.serverAddress !== 'N/A' ? 'link-text' : 'app-cell--muted'">
+          {{ item.serverAddress }}
+        </span>
+      </template>
+
+      <template #[`item.operatingMode`]="{ item }">
+        <span class="app-cell--muted">{{ item.operatingMode }}</span>
+      </template>
+
+      <template #[`item.dialCode`]="{ item }">
+        <span class="app-cell--num">{{ item.dialCode }}</span>
+      </template>
+
+      <!-- The shared chip. This screen's `getStatusClass` was another private
+           copy of the status-to-colour map. -->
+      <template #[`item.status`]="{ item }">
+        <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 }">
+            <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" />
+          </template>
+          <v-list v-if="activeTab === 'intercom'" density="compact" class="row-menu">
+            <v-list-item title="View" @click="openViewDialog(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)" />
+          </v-list>
+        </v-menu>
+      </template>
+
+      <!-- The screen's own sentence, kept. -->
+      <template #no-data>
+        <div class="table-card__empty">
+          <v-icon icon="mdi-deskphone" size="32" />
+          <span>No intercom records found.</span>
+        </div>
+      </template>
+    </TableMain>
 
     <v-dialog v-model="viewDialog" max-width="360">
       <v-card class="detail-dialog" rounded="lg">
@@ -176,43 +207,53 @@
         <v-card-text class="dialog-body">
           <div class="sip-switch-row">
             <span>Enable / Disable SIP</span>
-            <v-switch v-model="sipForm.enabled" color="success" density="compact" hide-details />
+            <v-switch v-model="sipForm.enabled" class="app-switch" density="compact" hide-details />
           </div>
           <div class="sip-label">Server Address <span>*</span></div>
-          <v-text-field v-model="sipForm.serverIp" :disabled="!sipForm.enabled" placeholder="SIP server address" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+          <AppField v-model="sipForm.serverIp" :disabled="!sipForm.enabled" placeholder="SIP server address" class="sip-input" />
           <div class="sip-label">Port <span>*</span></div>
-          <v-text-field v-model="sipForm.serverPort" :disabled="!sipForm.enabled" placeholder="0000" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+          <AppField v-model="sipForm.serverPort" :disabled="!sipForm.enabled" placeholder="0000" class="sip-input" />
           <div class="form-two-col">
             <div>
               <div class="sip-label">Initial RTP Port <span>*</span></div>
-              <v-text-field v-model="sipForm.initialRtpPort" :disabled="!sipForm.enabled" placeholder="0000" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+              <AppField v-model="sipForm.initialRtpPort" :disabled="!sipForm.enabled" placeholder="0000" class="sip-input" />
             </div>
             <div>
               <div class="sip-label">Final RTP Port <span>*</span></div>
-              <v-text-field v-model="sipForm.finalRtpPort" :disabled="!sipForm.enabled" placeholder="0000" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+              <AppField v-model="sipForm.finalRtpPort" :disabled="!sipForm.enabled" placeholder="0000" class="sip-input" />
             </div>
           </div>
           <div class="sip-switch-row sip-section-switch">
             <span>Numeric Extension</span>
-            <v-switch v-model="sipForm.numericExtension" :disabled="!sipForm.enabled" color="success" density="compact" hide-details />
+            <v-switch v-model="sipForm.numericExtension" :disabled="!sipForm.enabled" class="app-switch" density="compact" hide-details />
           </div>
           <div class="sip-label">Extension <span>*</span></div>
-          <v-text-field v-model="sipForm.extension" :disabled="areSipCredentialFieldsDisabled" placeholder="0000" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+          <AppField v-model="sipForm.extension" :disabled="areSipCredentialFieldsDisabled" placeholder="0000" class="sip-input" />
           <div class="sip-label">Login <span>*</span></div>
-          <v-text-field v-model="sipForm.login" :disabled="areSipCredentialFieldsDisabled" placeholder="Enter username" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+          <AppField v-model="sipForm.login" :disabled="areSipCredentialFieldsDisabled" placeholder="Enter username" class="sip-input" />
           <div class="sip-label">Password <span>*</span></div>
-          <v-text-field
+          <!-- The reveal eye moves into `AppField`'s `trailing` slot - the same
+               slot panel 4's access PIN uses, which is why it is a shared slot
+               rather than a private hack in two screens. -->
+          <AppField
             v-model="sipForm.password"
+            :disabled="areSipCredentialFieldsDisabled"
             placeholder="Enter password"
             :type="showSipPassword ? 'text' : 'password'"
-            :disabled="areSipCredentialFieldsDisabled"
-            variant="outlined"
-            density="compact"
-            hide-details="auto"
+            autocomplete="new-password"
             class="sip-input"
-            :append-inner-icon="showSipPassword ? 'mdi-eye-off' : 'mdi-eye'"
-            @click:append-inner="showSipPassword = !showSipPassword"
-          />
+          >
+            <template #trailing>
+              <button
+                type="button"
+                class="app-field__trailing"
+                :aria-label="showSipPassword ? 'Hide SIP password' : 'Show SIP password'"
+                @click="showSipPassword = !showSipPassword"
+              >
+                <v-icon :icon="showSipPassword ? 'mdi-eye-off' : 'mdi-eye'" size="18" />
+              </button>
+            </template>
+          </AppField>
           <div class="sip-label">Operating Mode <span>*</span></div>
           <v-btn-toggle v-model="sipForm.operatingMode" :disabled="!sipForm.enabled" mandatory divided class="mode-toggle">
             <v-btn value="sip-client" class="text-none">SIP Client</v-btn>
@@ -223,6 +264,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" class="app-switch" 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 +279,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>
@@ -273,37 +291,37 @@
           </v-radio-group>
           <div class="call-toggle-row">
             <span>Automatic Answering</span>
-            <v-switch v-model="callForm.autoAnswer" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.autoAnswer" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-label">Automatic answering delay (seconds)</div>
-          <v-text-field v-model="callForm.autoAnswerDelay" :disabled="!callForm.autoAnswer" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input" />
+          <AppField v-model="callForm.autoAnswerDelay" :disabled="!callForm.autoAnswer" placeholder="0" class="call-input" />
           <div class="form-two-col call-two-col">
             <div>
               <div class="call-label">Registration time (seconds)</div>
-              <v-text-field v-model="callForm.registrationTime" :disabled="!callForm.autoAnswer" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input" />
+              <AppField v-model="callForm.registrationTime" :disabled="!callForm.autoAnswer" placeholder="0" class="call-input" />
             </div>
             <div>
               <div class="call-label">Keep-alive (seconds)</div>
-              <v-text-field v-model="callForm.keepAlive" :disabled="!callForm.autoAnswer" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input" />
+              <AppField v-model="callForm.keepAlive" :disabled="!callForm.autoAnswer" placeholder="0" class="call-input" />
             </div>
           </div>
           <div class="call-label">Maximum call time (seconds)</div>
-          <v-text-field v-model="callForm.maxCallTime" :disabled="!callForm.autoAnswer" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input" />
+          <AppField v-model="callForm.maxCallTime" :disabled="!callForm.autoAnswer" placeholder="0" class="call-input" />
           <div class="call-toggle-row">
             <span>Dial Button</span>
-            <v-switch v-model="callForm.dialButton" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.dialButton" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-toggle-row">
             <span>External Dial Button</span>
-            <v-switch v-model="callForm.externalDialButton" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.externalDialButton" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-toggle-row">
             <span>Facial identification during the call</span>
-            <v-switch v-model="callForm.faceDuringCall" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.faceDuringCall" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-toggle-row">
             <span>Custom Icon</span>
-            <v-switch v-model="callForm.customIcon" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.customIcon" class="app-switch" density="compact" hide-details />
           </div>
           <div class="upload-row call-upload-row">
             <div class="upload-drop" :class="{ 'is-disabled': !callForm.customIcon }"><v-icon size="16">mdi-cloud-upload-outline</v-icon> Drag and drop files here</div>
@@ -315,10 +333,10 @@
           </div>
           <div class="call-toggle-row">
             <span>Automatic Call with unknown contact</span>
-            <v-switch v-model="callForm.unknownContact" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.unknownContact" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-label">Call after (seconds)</div>
-          <v-text-field v-model="callForm.callAfter" :disabled="!callForm.unknownContact" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input" />
+          <AppField v-model="callForm.callAfter" :disabled="!callForm.unknownContact" placeholder="0" class="call-input" />
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
           <v-btn class="text-none action-cancel" variant="flat" height="44" @click="callDialog = false">Cancel</v-btn>
@@ -333,10 +351,10 @@
         <v-card-text class="dialog-body">
           <div class="call-toggle-row dial-toggle-row">
             <span>Dial Code</span>
-            <v-switch v-model="dialForm.enabled" color="success" density="compact" hide-details />
+            <v-switch v-model="dialForm.enabled" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-label">Dial code to unlock</div>
-          <v-text-field v-model="dialForm.code" :disabled="!dialForm.enabled" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input dial-input" />
+          <AppField v-model="dialForm.code" :disabled="!dialForm.enabled" placeholder="0" class="call-input dial-input" />
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
           <v-btn class="text-none action-cancel" variant="flat" height="44" @click="dialCodeDialog = false">Cancel</v-btn>
@@ -350,16 +368,8 @@
         <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>
-            <v-text-field
-              v-model="makeCallForm.target"
-              placeholder="Enter extension, address, or contact"
-              variant="outlined"
-              density="compact"
-              hide-details="auto"
-              class="call-input"
-              @keyup.enter="runMakeCall"
-            />
+            <div class="call-label">Extension, SIP address, or peer IP</div>
+            <AppField v-model="makeCallForm.target" placeholder="7100 or user@example.com" @keyup.enter="runMakeCall" class="call-input" />
           </div>
           <div class="make-call-actions">
             <v-btn
@@ -388,22 +398,195 @@
           </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"
+                class="app-switch"
+                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">
+                <AppField v-model="webPhoneForm.destination" :disabled="!webPhone.isRegistered.value || webPhone.hasCall.value" placeholder="1001 or device@example.com" @keyup.enter="startWebCall" class="call-input mb-0" />
+                <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>
         <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 />
-          <v-text-field v-model="contactForm.name" placeholder="Enter name" variant="outlined" density="compact" hide-details="auto" />
-          <FieldLabel text="Location" />
-          <v-text-field v-model="contactForm.location" placeholder="Location" variant="outlined" density="compact" hide-details="auto" />
-          <FieldLabel text="Server Address" required />
-          <v-text-field v-model="contactForm.serverAddress" placeholder="192.168.1.1" variant="outlined" density="compact" hide-details="auto" />
+          <AppField v-model="contactForm.name" placeholder="Enter name" />
+          <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>
@@ -448,6 +631,10 @@
 
 <script setup lang="ts">
 const props = defineProps({
+  org: {
+    type: String,
+    required: true,
+  },
   site: {
     type: String,
     required: true,
@@ -466,6 +653,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 +674,7 @@ type DetailItem = {
 };
 
 type IntercomRow = {
-  reader: Record<string, any>;
+  reader: Record<string, unknown>;
   name: string;
   location: string;
   serverAddress: string;
@@ -490,6 +690,7 @@ type IntercomRow = {
   password: string;
   operatingMode: string;
   protocol: string;
+  videoEnabled: boolean;
   dialMode: string;
   dialModeLabel: string;
   dialCode: string;
@@ -502,7 +703,7 @@ type IntercomRow = {
   externalDialButton: boolean;
   unknownContact: boolean;
   callAfter: string;
-  pjsip: Record<string, any>;
+  pjsip: Record<string, unknown>;
 };
 
 const {
@@ -513,41 +714,52 @@ const {
   getIntercomStatus,
   makeIntercomCall,
   finalizeIntercomCall,
+  ensureSipAccount,
 } = useHidAmico();
 
 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);
 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"];
+const statusOptions = ["Connected", "Not connected", "Connecting", "Disabled", "Failed"];
 
 const pjsipKeys = [
   "enabled",
@@ -582,13 +794,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 +830,11 @@ const makeCallForm = reactive({
   statusType: "info" as MessageType,
 });
 
+const webPhoneForm = reactive({
+  destination: "",
+  video: false,
+});
+
 const contactForm = reactive({
   id: undefined as number | undefined,
   readerId: "",
@@ -625,6 +843,11 @@ const contactForm = reactive({
   serverAddress: "",
 });
 
+const readerOptions = computed(() => readers.value.map((reader) => ({
+  title: `${reader.name || reader.deviceId || reader._id} — ${reader.portalName || "Portal not configured"}`,
+  value: reader._id,
+})));
+
 const visibleRows = computed(() => activeTab.value === "intercom" ? filteredIntercomRows.value : filteredContacts.value);
 const pages = computed(() => Math.max(1, Math.ceil(visibleRows.value.length / limit)));
 const pageRange = computed(() => {
@@ -638,6 +861,7 @@ const pageRange = computed(() => {
 const filteredIntercomRows = computed(() => {
   const query = search.value.trim().toLowerCase();
   return intercomRows.value.filter((row) => {
+    const matchesReader = !selectedReaderId.value || row.reader._id === selectedReaderId.value;
     const matchesSearch = !query || [
       row.name,
       row.location,
@@ -646,23 +870,83 @@ const filteredIntercomRows = computed(() => {
       row.dialCode,
       row.status,
     ].some((value) => String(value || "").toLowerCase().includes(query));
-    const matchesStatus = statusFilter.value === "Status" || row.status === statusFilter.value;
-    return matchesSearch && matchesStatus;
+    const matchesStatus = !statusFilter.value || row.status === statusFilter.value;
+    return matchesReader && matchesSearch && matchesStatus;
   });
 });
 
 const filteredContacts = computed(() => {
   const query = search.value.trim().toLowerCase();
-  return contacts.value.filter((contact) => !query || [
-    contact.name,
-    contact.location,
-    contact.serverAddress,
-    contact.dialCode,
-  ].some((value) => String(value || "").toLowerCase().includes(query)));
+  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));
+    const matchesStatus = !statusFilter.value || readerStatus === statusFilter.value;
+    return matchesReader && matchesSearch && matchesStatus;
+  });
 });
 
 const paginatedIntercomRows = computed(() => paginate(filteredIntercomRows.value));
 const paginatedContacts = computed(() => paginate(filteredContacts.value));
+
+/**
+ * The two tabs, as data rather than two `v-tab` elements, so the shared
+ * `app-tab` strip can render them. Same values, same order.
+ */
+const tabOptions: Array<{ label: string; value: IntercomTab }> = [
+  { label: "Intercom", value: "intercom" },
+  { label: "Intercom Contacts", value: "contacts" },
+];
+
+/**
+ * The screen has TWO column sets, and it keeps them - this is the same pair the
+ * two `<thead>` blocks drew. `sortable: false` preserves the raw `v-table`'s
+ * behaviour, and no `weight` is set, so the layout is `TableMain`'s automatic
+ * one: the handoff draws no HID table and states no proportions.
+ */
+const tableHeaders = computed(() =>
+  activeTab.value === "intercom"
+    ? [
+        { title: "Name", value: "name", sortable: false },
+        { title: "Location", value: "location", sortable: false },
+        { title: "SIP Server Address", value: "serverAddress", sortable: false },
+        { title: "Operating Mode", value: "operatingMode", sortable: false },
+        { title: "Dial Code", value: "dialCode", sortable: false },
+        { title: "SIP Status", value: "status", sortable: false },
+        { title: "", value: "action-table", sortable: false },
+      ]
+    : [
+        { title: "Name", value: "name", sortable: false },
+        { title: "Location", value: "location", sortable: false },
+        { title: "SIP Number / Address", value: "serverAddress", sortable: false },
+        { title: "Reader SIP Status", value: "contactStatus", sortable: false },
+        { title: "", value: "action-table", sortable: false },
+      ]
+);
+
+/**
+ * `TableMain` takes ONE item list, so the two `v-for` blocks become one. The
+ * intercom rows are keyed on their reader id (they have no `_rowKey` of their
+ * own, where contacts do), so one is supplied for the table's `item-value`.
+ */
+const visiblePageRows = computed(() =>
+  activeTab.value === "intercom"
+    ? paginatedIntercomRows.value.map((row) => ({ ...row, _rowKey: row.reader?._id }))
+    : paginatedContacts.value
+);
+
+/** The web-call button turns green when registered and amber on an incoming
+    call - the same two states the old `.web-call-button` modifiers drew. */
+const webPhoneButtonClass = computed(() => ({
+  "is-connected": webPhone.isRegistered.value,
+  "has-incoming-call": webPhone.callState.value === "incoming",
+}));
 const isPeerToPeerMode = computed(() => sipForm.operatingMode === "peer-to-peer");
 const areSipCredentialFieldsDisabled = computed(() => !sipForm.enabled || isPeerToPeerMode.value);
 const intercomDetailSections = computed(() => {
@@ -694,6 +978,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 +1002,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 +1052,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;
@@ -742,8 +1065,12 @@ async function reload() {
   try {
     const response = await getReaders({ site: props.site, page: 1, limit: 100 });
     readers.value = response?.items ?? response?.data?.items ?? response?.data?.readers ?? [];
-    await loadIntercomRows();
-    await loadContacts();
+    if (!readers.value.some((reader) => reader._id === selectedReaderId.value)) {
+      selectedReaderId.value = readers.value[0]?._id || "";
+    }
+    intercomLoaded.value = false;
+    contactsLoaded.value = false;
+    await loadActiveTab();
   } catch (error: any) {
     showMessage(getErrorMessage(error), "error");
   } finally {
@@ -751,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(),
+  ]);
+}
+
+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;
+  }
+}
 
-  for (const reader of readers.value) {
+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),
@@ -766,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",
@@ -783,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[]) {
@@ -798,19 +1152,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 +1181,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 +1198,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 +1206,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 +1275,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,20 +1308,149 @@ 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) {
   selectedContact.value = contact || null;
   contactForm.id = contact?.id;
-  contactForm.readerId = contact?.readerId || readers.value[0]?._id || "";
+  contactForm.readerId = contact?.readerId || selectedReaderId.value || readers.value[0]?._id || "";
   contactForm.name = contact?.name === "N/A" ? "" : contact?.name || "";
-  contactForm.location = contact?.location === "N/A" ? "" : contact?.location || readers.value[0]?.location || "";
+  const selectedReader = readers.value.find((reader) => reader._id === contactForm.readerId);
+  contactForm.location = contact?.location === "N/A" ? "" : contact?.location || selectedReader?.location || "";
   contactForm.serverAddress = contact?.serverAddress === "N/A" ? "" : contact?.serverAddress || "";
   contactDialog.value = true;
 }
@@ -966,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;
@@ -974,21 +1501,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 +1561,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 +1589,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;
@@ -1061,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 {
@@ -1078,36 +1675,17 @@ 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");
     return;
   }
 
+  if (!isSipCallTarget(contactForm.serverAddress)) {
+    showMessage("Enter a valid extension, SIP address, or IPv4 address.", "warning");
+    return;
+  }
+
   contactsSaving.value = true;
   try {
     if (contactForm.id) {
@@ -1159,13 +1737,6 @@ async function deleteContact() {
   }
 }
 
-function getStatusClass(status: string) {
-  if (status === "Connected") return "status-success";
-  if (status === "Disabled" || status === "Not connected") return "status-muted";
-  if (status === "Failed") return "status-error";
-  return "status-warning";
-}
-
 function getDialModeLabel(value: string) {
   if (value === "1") return "From the contact list";
   if (value === "2") return "Numeric Keypad + Contacts";
@@ -1182,8 +1753,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 = "") {
@@ -1225,7 +1830,7 @@ export default {
           <span>{{ label }}</span>
           <v-switch
             :model-value="modelValue"
-            color="success"
+            class="app-switch"
             density="compact"
             hide-details
             @update:model-value="$emit('update:modelValue', $event)"
@@ -1244,116 +1849,66 @@ export default {
   padding: 12px;
 }
 
-.top-bar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
 
 .toolbar-spacer {
   flex: 1 1 auto;
 }
 
-.top-placeholder {
-  width: 160px;
-}
 
-.add-button {
-  min-width: 160px;
-  background: #dedede;
-  color: #0b2c40;
-  font-size: 12px;
+/*
+  The filter row sits INSIDE the card's extension, so it needs the card's own
+  side padding rather than the row's default bottom margin - same block as
+  panels 2, 4 and 5.
+*/
+.hid-intercom-filters {
+  margin: 0;
+  padding: 10px 14px;
 }
 
-.search-input {
-  max-width: 220px;
+.hid-intercom-filters :deep(.app-field) {
+  max-width: 240px;
 }
 
-.status-input {
-  max-width: 160px;
+/* The reader option now reads "Reader - Portal", so it needs more room than
+   the other filters. `AppSelect`'s root class IS `app-field`, so this has to
+   be more specific than the rule above rather than a `.app-select` one. */
+.hid-intercom-filters :deep(.app-field.reader-select) {
+  max-width: 320px;
 }
 
-.table-card {
-  display: flex;
-  flex-direction: column;
-  min-height: 520px;
-  overflow: hidden;
-  background: #fff;
-  border-color: #e2e5e9;
-  border-radius: 6px;
+/*
+  The web-call button is the card's PRIMARY action, so its resting state is
+  `AppButton`'s own accent - it was a flat `#e5e7eb` grey, which read as
+  disabled next to every other screen's primary. Only the two STATE colours
+  are the screen's own, because the handoff draws no such states.
+*/
+.web-call-button {
+  min-width: 160px;
 }
 
-.table-refresh {
-  display: flex;
-  align-items: center;
-  min-height: 42px;
-  padding: 0 12px;
-  background: #f6f6f6;
-  color: #0b2c40;
-  font-size: 12px;
+.web-call-button.is-connected {
+  background: var(--ok);
+  color: var(--on-accent-strong);
 }
 
-.intercom-tabs {
-  border-bottom: 1px solid #e5e7eb;
+.web-call-button.has-incoming-call {
+  background: var(--warn);
+  color: var(--on-accent-strong);
 }
 
-.intercom-tabs :deep(.v-tab) {
-  flex: 1 1 0;
-  min-width: 0;
-  font-size: 12px;
-  text-transform: none;
-}
 
-.intercom-tabs :deep(.v-tab--selected) {
-  color: #0b4ea2;
-}
 
-.table-body {
-  position: relative;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-}
 
-.table-body :deep(table) {
-  table-layout: fixed;
-  min-width: 840px;
-}
 
-.table-body :deep(th) {
-  height: 48px;
-  color: #0b2c40;
-  font-size: 12px;
-  font-weight: 500;
-}
 
-.table-body :deep(td) {
-  height: 54px;
-  color: #1f2937;
-  font-size: 12px;
-}
 
-.table-footer {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 4px;
-  min-height: 42px;
-  padding: 0 12px;
-  background: #f6f6f6;
-  color: #0b2c40;
-  font-size: 12px;
-}
 
-.empty-state {
-  display: grid;
-  min-height: 180px;
-  place-items: center;
-  color: #667085;
-  font-size: 13px;
-}
+
+
+
+
+
+
 
 .row-menu {
   min-width: 160px;
@@ -1361,37 +1916,21 @@ export default {
 }
 
 .link-text {
-  color: #1565c0;
+  color: var(--accent-text);
 }
 
 .success-text {
-  color: #2faf4a;
+  color: var(--ok);
 }
 
-.status-success {
-  background: #46b85a;
-  color: #fff;
-}
 
-.status-muted {
-  background: #a7a7a7;
-  color: #fff;
-}
 
-.status-warning {
-  background: #fff2cc;
-  color: #8a5b00;
-}
 
-.status-error {
-  background: #f9d0d0;
-  color: #991b1b;
-}
 
 .form-dialog,
 .detail-dialog {
   overflow: hidden;
-  background: #fff;
+  background: var(--card);
 }
 
 .sip-settings-dialog {
@@ -1402,8 +1941,8 @@ export default {
 .dialog-title {
   min-height: 48px;
   padding: 14px 16px;
-  background: #f4f4f4;
-  color: #0d1720;
+  background: var(--thead);
+  color: var(--text);
   font-size: 14px;
   font-weight: 700;
 }
@@ -1424,13 +1963,13 @@ export default {
 
 .field-label {
   margin: 12px 0 7px;
-  color: #344054;
+  color: var(--text2);
   font-size: 10px;
   font-weight: 500;
 }
 
 .field-label span {
-  color: #d92d20;
+  color: var(--err);
 }
 
 .sip-settings-dialog .field-label {
@@ -1439,14 +1978,14 @@ export default {
 
 .sip-label {
   margin: 12px 0 6px;
-  color: #263542;
+  color: var(--text);
   font-size: 10px;
   font-weight: 500;
   line-height: 1.2;
 }
 
 .sip-label span {
-  color: #e5484d;
+  color: var(--err);
 }
 
 .sip-switch-row {
@@ -1456,10 +1995,10 @@ export default {
   min-height: 40px;
   margin-bottom: 12px;
   padding: 0 12px;
-  border: 1px solid #dfe3e8;
+  border: 1px solid var(--border);
   border-radius: 3px;
-  background: #fff;
-  color: #25313b;
+  background: var(--card);
+  color: var(--text);
   font-size: 12px;
 }
 
@@ -1468,39 +2007,26 @@ export default {
   margin-bottom: 12px;
 }
 
-.sip-switch-row :deep(.v-switch) {
-  flex: 0 0 auto;
+.sip-section-switch > div {
+  display: flex;
+  min-width: 0;
+  padding: 8px 12px 8px 0;
+  flex-direction: column;
+  gap: 2px;
 }
 
-.sip-switch-row :deep(.v-selection-control) {
-  min-height: 32px;
+.sip-section-switch small {
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.4;
 }
 
-.sip-switch-row :deep(.v-selection-control__wrapper) {
-  height: 28px;
-}
 
-.sip-switch-row :deep(.v-switch__track) {
-  height: 24px;
-  min-width: 42px;
-  opacity: 1;
-}
 
-.sip-switch-row :deep(.v-switch__thumb) {
-  background-color: #fff !important;
-  color: #fff !important;
-  height: 20px;
-  width: 20px;
-}
 
-.sip-switch-row :deep(.v-selection-control--dirty .v-switch__thumb) {
-  background-color: #fff !important;
-  color: #fff !important;
-}
 
-.sip-switch-row :deep(.v-selection-control--dirty .v-switch__thumb::before) {
-  background-color: #fff !important;
-}
+
+
 
 .toggle-field {
   display: flex;
@@ -1509,27 +2035,27 @@ export default {
   min-height: 38px;
   margin-bottom: 8px;
   padding: 0 10px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border);
   border-radius: 3px;
-  color: #344054;
+  color: var(--text2);
   font-size: 12px;
 }
 
 .sip-input :deep(.v-field) {
   min-height: 40px;
   border-radius: 3px;
-  background: #fff;
+  background: var(--card);
   font-size: 12px;
   box-shadow: none;
 }
 
 .sip-input :deep(.v-field__outline) {
   --v-field-border-opacity: 1;
-  color: #dfe3e8;
+  color: var(--border);
 }
 
 .sip-input :deep(.v-field--focused .v-field__outline) {
-  color: #9db7d1;
+  color: var(--border);
 }
 
 .sip-input :deep(.v-field__outline__start),
@@ -1542,28 +2068,28 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   padding-inline: 12px;
-  color: #4a5562;
+  color: var(--text2);
   font-size: 12px;
 }
 
 .sip-input :deep(.v-field__append-inner) {
   min-height: 40px;
-  color: #697586;
+  color: var(--muted);
 }
 
 .sip-input :deep(.v-field--disabled) {
-  background: #f7f8fa;
+  background: var(--hover);
   opacity: 1;
 }
 
 .sip-input :deep(.v-field--disabled .v-field__input),
 .sip-input :deep(.v-field--disabled input::placeholder) {
-  color: #98a2b3;
+  color: var(--muted);
   opacity: 1;
 }
 
 .sip-input :deep(input::placeholder) {
-  color: #697586;
+  color: var(--muted);
   opacity: 1;
 }
 
@@ -1578,7 +2104,7 @@ export default {
   width: 100%;
   grid-template-columns: 1fr 1fr;
   margin-bottom: 6px;
-  border: 1px solid #dfe3e8;
+  border: 1px solid var(--border);
   border-radius: 3px;
   overflow: hidden;
 }
@@ -1587,20 +2113,20 @@ export default {
   min-width: 0;
   min-height: 40px;
   border-radius: 0;
-  color: #667085;
+  color: var(--muted);
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0;
 }
 
 .mode-toggle :deep(.v-btn--active) {
-  background: #082b40;
-  color: #fff;
+  background: var(--text);
+  color: var(--card);
 }
 
 .mode-toggle :deep(.v-btn--disabled) {
-  background: #f7f8fa;
-  color: #98a2b3;
+  background: var(--hover);
+  color: var(--muted);
   opacity: 1;
 }
 
@@ -1608,13 +2134,9 @@ export default {
   margin-top: 0;
 }
 
-.sip-settings-dialog :deep(.v-selection-control-group--inline) {
-  gap: 34px;
-  min-height: 34px;
-}
 
 .sip-settings-dialog :deep(.v-radio .v-label) {
-  color: #344054;
+  color: var(--text2);
   font-size: 12px;
 }
 
@@ -1630,112 +2152,20 @@ 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;
 }
 
 .call-label {
   margin: 8px 0 6px;
-  color: #1f2937;
+  color: var(--text);
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0;
 }
 
 .call-label span {
-  color: #d92d20;
+  color: var(--err);
 }
 
 .call-radio-list {
@@ -1746,29 +2176,12 @@ export default {
   width: 100%;
 }
 
-.call-radio-list :deep(.v-selection-control-group) {
-  gap: 8px;
-}
 
-.call-radio-list :deep(.v-selection-control) {
-  min-height: 36px;
-  margin-bottom: 0;
-  padding: 0 10px;
-  border: 1px solid #dfe3e8;
-  border-radius: 3px;
-  background: #fff;
-}
 
-.call-radio-list :deep(.v-selection-control__wrapper) {
-  width: 24px;
-}
 
-.call-radio-list :deep(.v-selection-control__input) {
-  transform: scale(0.9);
-}
 
 .call-radio-list :deep(.v-label) {
-  color: #475467;
+  color: var(--text2);
   font-size: 11px;
   letter-spacing: 0;
   opacity: 1;
@@ -1781,34 +2194,17 @@ export default {
   min-height: 36px;
   margin-bottom: 10px;
   padding: 0 10px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border);
   border-radius: 3px;
-  background: #fff;
-  color: #1f2937;
+  background: var(--card);
+  color: var(--text);
   font-size: 11px;
   letter-spacing: 0;
 }
 
-.call-toggle-row :deep(.v-selection-control) {
-  min-height: 28px;
-}
 
-.call-toggle-row :deep(.v-selection-control__wrapper) {
-  height: 28px;
-}
 
-.call-toggle-row :deep(.v-switch__track) {
-  height: 22px;
-  min-width: 40px;
-  opacity: 1;
-}
 
-.call-toggle-row :deep(.v-switch__thumb) {
-  width: 18px;
-  height: 18px;
-  background-color: #fff !important;
-  color: #fff !important;
-}
 
 .call-input {
   margin-bottom: 8px;
@@ -1817,13 +2213,13 @@ export default {
 .call-input :deep(.v-field) {
   min-height: 38px;
   border-radius: 3px;
-  background: #fff;
+  background: var(--card);
   box-shadow: none;
 }
 
 .call-input :deep(.v-field__outline) {
   --v-field-border-opacity: 1;
-  color: #cfd5dc;
+  color: var(--border);
 }
 
 .call-input :deep(.v-field__input) {
@@ -1831,19 +2227,19 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   padding-inline: 12px;
-  color: #4a4f55;
+  color: var(--text2);
   font-size: 12px;
   letter-spacing: 0;
 }
 
 .call-input :deep(.v-field--disabled) {
-  background: #f7f8fa;
+  background: var(--hover);
   opacity: 1;
 }
 
 .call-input :deep(.v-field--disabled .v-field__input),
 .call-input :deep(.v-field--disabled input::placeholder) {
-  color: #98a2b3;
+  color: var(--muted);
   opacity: 1;
 }
 
@@ -1885,17 +2281,17 @@ export default {
 .make-call-danger {
   min-height: 46px;
   border-radius: 0;
-  color: #fff;
+  color: var(--card);
   font-size: 14px;
   letter-spacing: 0;
 }
 
 .make-call-primary {
-  background: #06324f;
+  background: var(--text);
 }
 
 .make-call-danger {
-  background: #d91345;
+  background: var(--err);
 }
 
 .make-call-status {
@@ -1906,31 +2302,299 @@ export default {
 }
 
 .make-call-status.is-success {
-  background: #e7f7ec;
-  color: #17833b;
+  background: var(--ok-bg);
+  color: var(--ok);
 }
 
 .make-call-status.is-warning {
-  background: #fff7db;
-  color: #8a5b00;
+  background: var(--warn-bg);
+  color: var(--warn);
 }
 
 .make-call-status.is-error {
-  background: #fde8e8;
-  color: #b42318;
+  background: var(--err-bg);
+  color: var(--err);
 }
 
 .make-call-status.is-info {
-  background: #edf4ff;
-  color: #075fb7;
+  background: var(--accent-soft);
+  color: var(--accent-text);
 }
 
 .make-call-note {
-  color: #5d6673;
+  color: var(--text2);
   font-size: 13px;
   line-height: 1.45;
 }
 
+.web-phone-dialog {
+  display: flex;
+  width: 820px;
+  max-height: min(90vh, 760px);
+  max-width: 94vw;
+  overflow: hidden;
+  background: var(--card);
+  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: var(--ok-bg);
+  color: var(--ok);
+}
+
+.web-phone-status.incoming {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+}
+
+.web-phone-status.failed {
+  background: var(--err-bg);
+  color: var(--err);
+}
+
+.web-phone-status.idle {
+  background: var(--border);
+  color: var(--text2);
+}
+
+.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 var(--border);
+}
+
+.web-phone-section-title {
+  margin-bottom: 14px;
+  color: var(--text);
+  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 var(--border);
+  border-radius: 6px;
+  color: var(--text2);
+  flex-direction: column;
+  font-size: 12px;
+  gap: 12px;
+  text-align: center;
+}
+
+.sip-account-state.is-error {
+  border-color: var(--err-bg);
+  background: var(--err-bg);
+  color: var(--err);
+}
+
+.sip-account-retry {
+  min-width: 104px;
+  border-color: var(--muted);
+  color: var(--text2);
+}
+
+.sip-account-summary {
+  display: grid;
+  min-height: 96px;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--hover);
+  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: var(--muted);
+  font-size: 11px;
+}
+
+.sip-account-extension {
+  color: var(--text);
+  font-size: 24px;
+  line-height: 1.1;
+}
+
+.sip-account-address {
+  max-width: 170px;
+  overflow: hidden;
+  color: var(--text2);
+  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: var(--text);
+  color: var(--card);
+}
+
+.web-phone-disconnect {
+  min-height: 42px;
+  margin-top: 14px;
+  border-color: var(--muted);
+  color: var(--text2);
+}
+
+.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 var(--border);
+  border-radius: 6px;
+  background: var(--text);
+}
+
+.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: var(--card);
+  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: var(--border);
+  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: var(--ok);
+  color: var(--card);
+}
+
+.hangup-web-call,
+.reject-call {
+  background: var(--err);
+}
+
+.incoming-call-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.answer-call,
+.reject-call {
+  min-height: 42px;
+  color: var(--card);
+}
+
+.answer-call {
+  background: var(--ok);
+}
+
+.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;
 }
@@ -1953,28 +2617,28 @@ export default {
   justify-content: center;
   gap: 6px;
   min-height: 38px;
-  border: 1px dashed #c9d2dc;
-  color: #475467;
+  border: 1px dashed var(--border);
+  color: var(--text2);
   font-size: 11px;
   letter-spacing: 0;
 }
 
 .upload-drop.is-disabled {
-  background: #fafafa;
-  color: #98a2b3;
+  background: var(--thead);
+  color: var(--muted);
 }
 
 .upload-button {
   width: 40px;
   height: 38px;
   border-radius: 3px;
-  background: #1976d2;
-  color: #fff;
+  background: var(--accent-text);
+  color: var(--card);
 }
 
 .upload-button.v-btn--disabled {
-  background: #eceff3;
-  color: #c0c6cf;
+  background: var(--hover);
+  color: var(--border);
   opacity: 1;
 }
 
@@ -1984,7 +2648,7 @@ export default {
   justify-content: space-between;
   min-height: 32px;
   margin: 0 0 10px;
-  color: #475467;
+  color: var(--text2);
   font-size: 11px;
 }
 
@@ -1995,12 +2659,12 @@ export default {
 }
 
 .call-file-name .v-icon {
-  color: #2fb344;
+  color: var(--ok);
 }
 
 .detail-section-title {
   margin: 14px 0 8px;
-  color: #0d1720;
+  color: var(--text);
   font-size: 13px;
   font-weight: 700;
 }
@@ -2015,12 +2679,12 @@ export default {
   justify-content: space-between;
   gap: 16px;
   min-height: 26px;
-  color: #667085;
+  color: var(--muted);
   font-size: 11px;
 }
 
 .detail-row strong {
-  color: #101828;
+  color: var(--text);
   font-weight: 500;
   text-align: right;
 }
@@ -2028,22 +2692,25 @@ export default {
 .dialog-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--border);
 }
 
 .sip-settings-dialog .dialog-actions {
   min-height: 46px;
 }
 
+/* The split footer bar, as panels 2, 4 and 5 keep it: the SHAPE is the
+   screen's own (the handoff draws no such bar); only the colours change. The
+   navy was a fixed hex that sat on the dark card unchanged. */
 .action-cancel {
-  background: #fff;
-  color: #0d1720;
+  background: var(--card);
+  color: var(--text2);
   border-radius: 0;
 }
 
 .action-submit {
-  background: #082b40;
-  color: #fff;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
   border-radius: 0;
 }
 
@@ -2052,25 +2719,27 @@ export default {
 }
 
 @media (max-width: 900px) {
-  .top-bar {
-    align-items: stretch;
-    flex-direction: column;
+  .hid-intercom-filters :deep(.app-field),
+  .hid-intercom-filters :deep(.app-select) {
+    width: 100%;
+    max-width: none;
   }
 
-  .top-placeholder,
-  .search-input,
-  .status-input {
+  .web-call-button {
     width: 100%;
-    max-width: none;
   }
 
-  .rebooting-card {
-    grid-template-columns: 1fr;
-    padding: 28px;
+  .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 var(--border);
   }
+
 }
 </style>