clqms-fe1/src/routes/(app)/patients/PatientDetailModal.svelte

<script>
  import { User, MapPin, Activity, FileText } from 'lucide-svelte';
  import Modal from '$lib/components/Modal.svelte';

  /** @type {{ open: boolean, patient: any | null }} */
  let { open = $bindable(false), patient = null } = $props();
</script>

<Modal bind:open title="Patient Details" size="xl">
  {#if patient}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="card bg-base-100 shadow border border-base-200">
        <div class="card-body">
          <h3 class="card-title text-lg flex items-center gap-2">
            <User class="w-5 h-5 text-primary" />
            Basic Information
          </h3>
          <div class="space-y-3 mt-4">
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">Patient ID</span>
              <span class="font-medium">{patient.PatientID}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">Full Name</span>
              <span class="font-medium">
                {[patient.Prefix, patient.NameFirst, patient.NameMiddle, patient.NameLast, patient.Suffix]
                  .filter(Boolean)
                  .join(' ')}
              </span>
            </div>
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">Sex</span>
              <span class="font-medium">{patient.Sex === '1' ? 'Female' : patient.Sex === '2' ? 'Male' : '-'}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">Birthdate</span>
              <span class="font-medium">{patient.Birthdate ? new Date(patient.Birthdate).toLocaleDateString() : '-'}</span>
            </div>
            <div class="flex justify-between py-2">
              <span class="text-gray-500">Citizenship</span>
              <span class="font-medium">{patient.Citizenship || '-'}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="card bg-base-100 shadow border border-base-200">
        <div class="card-body">
          <h3 class="card-title text-lg flex items-center gap-2">
            <MapPin class="w-5 h-5 text-primary" />
            Address
          </h3>
          <div class="space-y-3 mt-4">
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">Street</span>
              <span class="font-medium text-right">
                {[patient.Street_1, patient.Street_2, patient.Street_3].filter(Boolean).join(', ') || '-'}
              </span>
            </div>
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">City</span>
              <span class="font-medium">{patient.City || '-'}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">Province</span>
              <span class="font-medium">{patient.Province || '-'}</span>
            </div>
            <div class="flex justify-between py-2">
              <span class="text-gray-500">ZIP</span>
              <span class="font-medium">{patient.ZIP || '-'}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="card bg-base-100 shadow border border-base-200">
        <div class="card-body">
          <h3 class="card-title text-lg flex items-center gap-2">
            <Activity class="w-5 h-5 text-primary" />
            Contact
          </h3>
          <div class="space-y-3 mt-4">
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">Phone</span>
              <span class="font-medium">{patient.Phone || '-'}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">Mobile</span>
              <span class="font-medium">{patient.MobilePhone || '-'}</span>
            </div>
            <div class="flex justify-between py-2">
              <span class="text-gray-500">Email</span>
              <span class="font-medium">{patient.EmailAddress1 || '-'}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="card bg-base-100 shadow border border-base-200">
        <div class="card-body">
          <h3 class="card-title text-lg flex items-center gap-2">
            <FileText class="w-5 h-5 text-primary" />
            Additional
          </h3>
          <div class="space-y-3 mt-4">
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">Marital Status</span>
              <span class="font-medium">{patient.MaritalStatus || '-'}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-base-200">
              <span class="text-gray-500">Religion</span>
              <span class="font-medium">{patient.Religion || '-'}</span>
            </div>
            <div class="flex justify-between py-2">
              <span class="text-gray-500">Race</span>
              <span class="font-medium">{patient.Race || '-'}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  {/if}

  {#snippet footer()}
    <button class="btn btn-ghost" onclick={() => (open = false)} type="button">Close</button>
  {/snippet}
</Modal>