feat: standardize contact formatting

app/components/sites/SiteCard.vue

@@ -18,7 +18,7 @@
 
         <div class="flex items-center gap-2 text-gray-600">
           <IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
-          <span>{{ site.contactPhone }}</span>
+          <span>{{ formattedContactPhone }}</span>
         </div>
 
         <div class="flex items-start gap-2 text-gray-600">
@@ -53,6 +53,7 @@ import IconLucideFactory from '~icons/lucide/factory'
 import IconLucideMapPin from '~icons/lucide/map-pin'
 import IconLucidePhone from '~icons/lucide/phone'
 import IconLucideUser from '~icons/lucide/user'
+import { formatPhone } from '~/utils/formatters/phone'
 
 const props = defineProps({
   site: {
@@ -64,4 +65,9 @@ const props = defineProps({
 const emit = defineEmits(['edit', 'delete'])
 
 const machineCount = computed(() => props.site?.machines?.length || 0)
+const formattedContactPhone = computed(() => {
+  const value = props.site?.contactPhone ?? ''
+  const formatted = formatPhone(value)
+  return formatted || value || '—'
+})
 </script>