feat: standardize contact formatting

app/pages/index.vue

@@ -151,7 +151,7 @@
                         class="w-4 h-4 text-secondary"
                         aria-hidden="true"
                       />
-                      <span>{{ site.contactPhone }}</span>
+                      <span>{{ formatPhoneDisplay(site.contactPhone) }}</span>
                     </div>
                     <div class="flex items-start gap-2">
                       <IconLucideMapPinned
@@ -465,6 +465,7 @@ import IconLucideMapPinned from '~icons/lucide/map-pinned'
 import IconLucideChevronDown from '~icons/lucide/chevron-down'
 import IconLucideSettings2 from '~icons/lucide/settings-2'
 import IconLucideTag from '~icons/lucide/tag'
+import { formatPhone } from '~/utils/formatters/phone'
 
 const { sites, loading, loadSites, createSite } = useSites()
 const { machineTypes, loadMachineTypes } = useMachineTypesApi()
@@ -516,6 +517,14 @@ const totalMachines = computed(() => {
   }, 0)
 })
 
+const formatPhoneDisplay = (value) => {
+  const formatted = formatPhone(value)
+  if (formatted) {
+    return formatted
+  }
+  return value || '—'
+}
+
 const filteredSites = computed(() => {
   let filtered = sites.value