chore: Update the usage with camel case

app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue

@@ -28,27 +28,18 @@ const confirmDeleteContactDialogRef = ref(null);
 const selectedContactData = computed(() => {
   if (!props.selectedContact) return {};
 
-  const {
-    phone_number: phoneNumber = {},
-    additional_attributes: additionalAttributes = {},
-  } = props.selectedContact;
-
-  return {
-    ...props.selectedContact,
-    phoneNumber,
-    additionalAttributes,
-  };
+  return props.selectedContact;
 });
 
 const createdAt = computed(() => {
-  return props.selectedContact?.created_at
-    ? dynamicTime(props.selectedContact.created_at)
+  return props.selectedContact?.createdAt
+    ? dynamicTime(props.selectedContact.createdAt)
     : '';
 });
 
 const lastActivityAt = computed(() => {
-  return props.selectedContact?.last_activity_at
-    ? dynamicTime(props.selectedContact.last_activity_at)
+  return props.selectedContact?.lastActivityAt
+    ? dynamicTime(props.selectedContact.lastActivityAt)
     : '';
 });
 

app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue';
+
 import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
 
 defineProps({
@@ -26,8 +27,8 @@ const toggleExpanded = id => {
       :name="contact.name"
       :email="contact.email"
       :thumbnail="contact.thumbnail"
-      :phone-number="contact.phone_number"
-      :additional-attributes="contact.additional_attributes"
+      :phone-number="contact.phoneNumber"
+      :additional-attributes="contact.additionalAttributes"
       :is-expanded="expandedCardId === contact.id"
       @toggle="toggleExpanded(contact.id)"
     />