Adding contacts from the phone to the customer list

apps/web/src/views/ContactsView.vue

@@ -6,6 +6,7 @@ import { api } from '@/lib/api';
 import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
 import CustomerMoodFace from '@/components/CustomerMoodFace.vue';
 import ExcelImportFlow from '@/components/ExcelImportFlow.vue';
+import PhoneContactsImport from '@/components/PhoneContactsImport.vue';
 import {
   UiButton,
   UiModal,
@@ -213,6 +214,31 @@ async function onImportDone(data: ImportContactsResult) {
   await load();
 }
 
+function onPhoneImportStart() {
+  busy.value = true;
+  importMsg.value = '';
+  error.value = '';
+}
+
+async function onPhoneImportDone(data: {
+  created: number;
+  skipped: number;
+  failed: number;
+}) {
+  importMsg.value = `از گوشی وارد شد: ${toFaDigits(data.created)} · تکراری: ${toFaDigits(data.skipped)}${
+    data.failed ? ` · ناموفق: ${toFaDigits(data.failed)}` : ''
+  }`;
+  await load();
+}
+
+function onPhoneImportFail(message: string) {
+  error.value = message;
+}
+
+function onPhoneImportSettled() {
+  busy.value = false;
+}
+
 function onImportFail(message: string) {
   error.value = message;
 }
@@ -257,6 +283,20 @@ onMounted(load);
             <span class="btn-short">ورود</span>
           </UiButton>
         </ExcelImportFlow>
+        <PhoneContactsImport
+          v-if="tab === 'people'"
+          :disabled="busy"
+          @start="onPhoneImportStart"
+          @done="onPhoneImportDone"
+          @fail="onPhoneImportFail"
+          @settled="onPhoneImportSettled"
+        >
+          <UiButton variant="ghost" size="sm" :disabled="busy">
+            <UiIcon name="phone" :size="15" />
+            <span class="btn-full">از مخاطبین گوشی</span>
+            <span class="btn-short">گوشی</span>
+          </UiButton>
+        </PhoneContactsImport>
         <UiButton
           variant="primary"
           @click="contactModal = tab === 'companies' ? 'company' : 'person'"
@@ -1023,19 +1063,14 @@ strong.newcomer {
     align-items: center;
   }
 
-  .actions .excel-btn .btn-full {
+  :deep(.actions) .btn-full {
     display: none;
   }
 
-  .actions .excel-btn .btn-short {
+  :deep(.actions) .btn-short {
     display: inline;
   }
 
-  .actions .excel-btn {
-    padding-inline: 0.7rem;
-    font-size: 0.82rem;
-  }
-
   .add-btn {
     width: var(--control-h);
     height: var(--control-h);