simrsx-fe/app/components/app/initial-nursing/preview.vue

<script setup lang="ts">
const data = {
  jamTanggal: '14 Desember 2025, 12.00',
  keluhan:
    'Pasien mengeluh nyeri perut bagian kanan bawah sejak 2 hari yang lalu, disertai mual dan penurunan nafsu makan.',
  alergiObat: {
    nama: 'antibiotik',
    sebutkan: 'Amoxicilin, Sulfametoksazol, Gentamicin sulfate',
    reaksi: 'gatal-gatal dan ruam di kulit',
  },
  alergiMakanan: {
    nama: 'Seafood',
    sebutkan: 'Udang, Cumi',
    reaksi: 'gatal dan bengkak',
  },
  alergiLain: {
    nama: '-',
    sebutkan: '-',
    reaksi: '-',
  },
  kajianNyeri: {
    ada: 'Ya',
    skala: 'Ringan',
    waktu: 'Hilang Timbul',
    durasi: '5 - 15 menit',
    frekuensi: 'sekitar 3–4 kali dalam sehari',
    lokasi: 'Tangan',
  },
  skriningNutrisi:
    'Nafsu makan menurun 3 hari terakhir, asupan makan hanya setengah porsi biasa. Berat badan turun 1 kg dalam 1 minggu terakhir.',
  psikoSosial:
    'Pasien tampak cemas terhadap kondisi penyakitnya. Didampingi oleh suami. Komunikasi baik dan kooperatif. Tidak ada pantangan budaya khusus. Pasien rutin berdoa dan merasa lebih tenang setelah ibadah.',

  objektif: {
    keadaanUmum:
      'Pasien tampak sadar, compos mentis, tampak lemas, dengan ekspresi nyeri ringan. TTV: TD 110/70 mmHg, Nadi 84x/menit, RR 20x/menit, Suhu 37.8°C.',
    penunjang:
      'Hasil lab: Leukosit meningkat (12.500/µL), Hb 13 g/dL. USG abdomen menunjukkan tanda-tanda apendisitis ringan. Tidak ada kelainan pada organ lain.',
    risikoJatuh: 'Ya',
    gelangRisikoJatuh: 'Ya',
    gelangAlergi: 'Ya',
  },
}
</script>

<template>
  <div class="p-1 text-sm">
    <!-- JAM TANGGAL -->
    <div class="mb-4 flex gap-3">
      <span class="w-40 font-semibold">Jam Tanggal</span>
      <span>: {{ data.jamTanggal }}</span>
    </div>

    <hr class="my-4" />

    <!-- A. DATA SUBYEKTIF -->
    <h2 class="mb-3 font-semibold">A. Data Subyektif</h2>

    <div class="space-y-3">
      <!-- Keluhan -->
      <div class="flex">
        <span class="w-40 font-medium">Keluhan Pasien</span>
        <span>: {{ data.keluhan }}</span>
      </div>

      <!-- Riwayat Alergi -->
      <div>
        <div class="flex">
          <span class="w-40 font-medium">Riwayat Alergi dan Reaksi</span>
          <span>:</span>
        </div>

        <!-- Alergi Obat -->
        <div class="mt-1 space-y-1 pl-10">
          <div class="flex">
            <span class="w-28">a. Obat</span>
            <span>: {{ data.alergiObat.nama }}</span>
            <span class="ml-6 w-20">Sebutkan</span>
            <span>: {{ data.alergiObat.sebutkan }}</span>
            <span class="ml-6 w-16">Reaksi</span>
            <span>: {{ data.alergiObat.reaksi }}</span>
          </div>

          <!-- Alergi makanan -->
          <div class="flex">
            <span class="w-28">b. Makanan</span>
            <span>: {{ data.alergiMakanan.nama }}</span>
            <span class="ml-6 w-20">Sebutkan</span>
            <span>: {{ data.alergiMakanan.sebutkan }}</span>
            <span class="ml-6 w-16">Reaksi</span>
            <span>: {{ data.alergiMakanan.reaksi }}</span>
          </div>

          <!-- Alergi lain -->
          <div class="flex">
            <span class="w-28">c. Lain-lain</span>
            <span>: {{ data.alergiLain.nama }}</span>
            <span class="ml-6 w-20">Sebutkan</span>
            <span>: {{ data.alergiLain.sebutkan }}</span>
            <span class="ml-6 w-16">Reaksi</span>
            <span>: {{ data.alergiLain.reaksi }}</span>
          </div>
        </div>
      </div>

      <!-- Kajian Nyeri -->
      <div class="flex">
        <span class="w-40 font-medium">Kajian Nyeri</span>
        <span>: {{ data.kajianNyeri.ada }}</span>
      </div>

      <div class="flex">
        <span class="w-40">Skala Nyeri</span>
        <span>: {{ data.kajianNyeri.skala }}</span>
      </div>
      <div class="flex">
        <span class="w-40">Waktu Nyeri</span>
        <span>: {{ data.kajianNyeri.waktu }}</span>
      </div>
      <div class="flex">
        <span class="w-40">Durasi Nyeri</span>
        <span>: {{ data.kajianNyeri.durasi }}</span>
      </div>
      <div class="flex">
        <span class="w-40">Frekwensi Nyeri</span>
        <span>: {{ data.kajianNyeri.frekuensi }}</span>
      </div>
      <div class="flex">
        <span class="w-40">Lokasi</span>
        <span>: {{ data.kajianNyeri.lokasi }}</span>
      </div>

      <!-- Skrining Nutrisi -->
      <div class="flex">
        <span class="w-40 font-medium">Skrining Nutrisi</span>
        <span>: {{ data.skriningNutrisi }}</span>
      </div>

      <!-- Psiko Sosio -->
      <div class="flex">
        <span class="w-40 font-medium">Kajian psiko-sosio-kultural-spiritual</span>
        <span>: {{ data.psikoSosial }}</span>
      </div>
    </div>

    <hr class="my-4" />

    <!-- B. DATA OBYEKTIF -->
    <h2 class="mb-3 font-semibold">B. Data Obyektif</h2>

    <div class="space-y-3">
      <div class="flex">
        <span class="w-40 font-medium">Keadaan Umum</span>
        <span>: {{ data.objektif.keadaanUmum }}</span>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Pemeriksaan Penunjang</span>
        <span>: {{ data.objektif.penunjang }}</span>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Risiko Jatuh</span>
        <span>: {{ data.objektif.risikoJatuh }}</span>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Pemakaian Gelang Risiko Jatuh</span>
        <span>: {{ data.objektif.gelangRisikoJatuh }}</span>
      </div>

      <div class="flex">
        <span class="w-40 font-medium">Pasang Gelang Alergi</span>
        <span>: {{ data.objektif.gelangAlergi }}</span>
      </div>
    </div>
  </div>
</template>