simrsx-fe/app/components/app/action-report/preview.vue

<script setup lang="ts">
import { format } from 'date-fns'
import { id } from 'date-fns/locale'

// type
import { type ProcedureSrc } from '~/models/procedure-src'
import { type ActionReportFormData } from '~/schemas/action-report.schema'

// componenets
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/pub/ui/accordion'
import * as DE from '~/components/pub/my-ui/doc-entry'
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue'

// #region Props & Emits
const props = defineProps<{
  data: ActionReportFormData
}>()

const emit = defineEmits<{
  (e: 'back'): void
  (e: 'edit'): void
}>()

// #endregion

// #region State & Computed
const { operatorTeam, procedures, operationExecution, bloodInput, implant, specimen, tissueNotes = [] } = props.data

const procedureSampleData = procedures as unknown as ProcedureSrc[]
// #region Lifecycle Hooks
// #endregion

// #region Functions

// #endregion region
// #region Utilities & event handlers
function onNavigate(type: string) {
  if (type == 'back') emit('back')
  if (type == 'edit') emit('edit')
}
// #endregion

// #region Watchers
// #endregion
</script>

<template>
  <DetailRow label="Tanggal Laporan">
    {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
  </DetailRow>

  <Accordion
    type="multiple"
    class="w-full"
    collapsible
    :default-value="['section-1', 'section-2', 'section-3']"
  >
    <AccordionItem value="section-1">
      <AccordionTrigger>Tim Pelaksanaan Tindakan</AccordionTrigger>
      <AccordionContent>
        <DE.Block
          :cell-flex="false"
          :col-count="2"
        >
          <DE.Cell>
            <DetailRow label="DPJP">dr. Marcell Galliard Sp.Gr</DetailRow>
            <DetailRow label="Operator">Sumitro</DetailRow>
            <DetailRow label="Asisten Operator">Alexis Lewis Carol</DetailRow>
            <DetailRow label="Instrumentir">Mikel Arteta</DetailRow>
            <DetailRow label="Tanggal Pembedahan">
              {{ format(new Date(), 'd MMMM yyyy', { locale: id }) }}
            </DetailRow>
            <DetailRow label="Diagnosa Tindakan">{{ operatorTeam?.actionDiagnosis || '-' }}</DetailRow>
            <DetailRow label="Perawat Pasca Bedah">Cak Armuji</DetailRow>
          </DE.Cell>
        </DE.Block>
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="section-2">
      <AccordionTrigger>Tindakan Operatif / Non Operatif Lain</AccordionTrigger>
      <AccordionContent>
        <DE.Block
          :cell-flex="false"
          :col-count="2"
        >
          <DE.Cell>
            <ArrangementProcedurePicker
              field-name="procedures"
              title="List Prosedur"
              sub-title="Pilih Prosedur"
              :mode="'preview'"
              :sample-items="procedureSampleData"
            />
          </DE.Cell>
        </DE.Block>
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="section-3">
      <AccordionTrigger>Data Pelaksanaan Tindakan</AccordionTrigger>
      <AccordionContent>
        <DE.Block
          :cell-flex="false"
          :col-count="2"
        >
          <DE.Cell>
            <DetailRow label="Jenis Operasi">dr. Marcell Galliard Sp.Gr</DetailRow>
            <DetailRow label="Kode Billing">GCASH1128190</DetailRow>
            <DetailRow label="Sistem Operasi">Alexis Lewis Carol</DetailRow>
            <DetailRow label="Operasi Mulai">
              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
            </DetailRow>
            <DetailRow label="Operasi Selesai">
              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
            </DetailRow>
            <DetailRow label="Lama Operasi">5 menit</DetailRow>
            <DetailRow label="Pembiusan Mulai">
              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
            </DetailRow>
            <DetailRow label="Pembiusan Selesai">
              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
            </DetailRow>
            <DetailRow label="Lama Pembiusan">5 menit</DetailRow>

            <DetailRow label="PRC">300 CC</DetailRow>
            <DetailRow label="FPP">-</DetailRow>
            <DetailRow label="WB">-</DetailRow>
            <DetailRow label="TC">-</DetailRow>
            <DetailRow label="Merk">-</DetailRow>
            <DetailRow label="Nama Implant">-</DetailRow>
            <DetailRow label="Sticker / Nomor Register Implant">-</DetailRow>
            <DetailRow label="Nama Pendamping Implant">-</DetailRow>
          </DE.Cell>
          <DE.Cell>
            <DetailRow label="Jenis Pembedahan">Bersih</DetailRow>
            <DetailRow label="Operasi ke">1 (Satu)</DetailRow>
            <DetailRow label="Keterangan Lahir">Lahir Hidup</DetailRow>
            <DetailRow label="Ket. Tempat Lahir">RSSA</DetailRow>
            <DetailRow label="Berat Badan">18 gram</DetailRow>
            <DetailRow label="Ket. Saat Lahir">Normal dan sehat</DetailRow>
            <DetailRow label="Uraian Operasi">-</DetailRow>
            <DetailRow label="Jumlah Pendarahan">300 CC</DetailRow>
            <DetailRow label="Specimen / Jaringan dikirim ke">PA</DetailRow>
            <DetailRow label="Keterangan Jaringan">
              <ul
                class="list-disc space-y-1 pl-5 text-sm"
                v-if="tissueNotes.length > 0"
                v-for="item in tissueNotes"
              >
                <li>{{ item.note }}</li>
              </ul>
              <span v-else>-</span>
            </DetailRow>
          </DE.Cell>
        </DE.Block>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
  <div class="my-2 flex justify-end py-2">
    <PubMyUiNavFooterBaEd @click="onNavigate" />
  </div>
</template>

<style scoped></style>