feat(patient): enhance patient detail view with accordion and timezone support

- Add date-fns-tz for timezone-aware date formatting
- Refactor patient detail view to use accordion components
- Improve date display formatting with locale support
- Update navigation handling for edit and back actions
- Extend ClickType enum to include 'edit' action

app/components/content/patient/detail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { withBase } from '~/models/_base'
 import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
-import type { Patient } from '~/models/patient'
+import type { PatientEntity } from '~/models/patient'
 import type { Person } from '~/models/person'
 
 // Components
@@ -18,7 +18,7 @@ const props = defineProps<{
 
 // #region State & Computed
 const patient = ref(
-  withBase<Patient>({
+  withBase<PatientEntity>({
     person: {} as Person,
     personAddresses: [],
     personContacts: [],
@@ -47,19 +47,19 @@ onMounted(async () => {
 // #endregion region
 
 // #region Utilities & event handlers
-function handleAction(type: string) {
-  switch (type) {
-    case 'edit':
-      // TODO: Handle edit action
-      console.log('editing data')
-      break
-
-    case 'cancel':
-      navigateTo({
-        name: 'client-patient',
-      })
-      break
-  }
+async function onBack() {
+  await navigateTo({
+    name: 'client-patient',
+  })
+}
+async function onEdit() {
+  console.log(props.patientId)
+  await navigateTo({
+    name: 'client-patient-id-edit',
+    params: {
+      id: props.patientId,
+    },
+  })
 }
 // #endregion
 
@@ -68,13 +68,19 @@ function handleAction(type: string) {
 </script>
 
 <template>
-  <Header
-    :prep="headerPrep"
-    :ref-search-nav="headerPrep.refSearchNav"
-  />
+  <div
+    v-if="patient"
+    :key="patient.id"
+  >
+    <Header
+      :prep="headerPrep"
+      :ref-search-nav="headerPrep.refSearchNav"
+    />
 
-  <AppPatientPreview
-    :patient="patient"
-    @click="handleAction"
-  />
+    <AppPatientPreview
+      :patient="patient"
+      @back="onBack"
+      @edit="onEdit"
+    />
+  </div>
 </template>