clqms-fe1/src/routes/(app)/visits/VisitCard.svelte

<script>
  import { Calendar, MapPin, User, Clock, FileText, Activity, History, Edit2, Trash2 } from 'lucide-svelte';
  import { formatDate, formatDateTime } from '$lib/utils/patients.js';

  /**
   * @typedef {Object} Visit
   * @property {string} InternalPVID
   * @property {string} [PVID]
   * @property {string} [PatientID]
   * @property {string} [PVCreateDate]
   * @property {string} [PVACreateDate]
   * @property {string} [ADTCode]
   * @property {string} [LocCode]
   * @property {string} [LocationID]
   * @property {string} [AttDoc]
   * @property {string} [AdmDoc]
   * @property {string} [RefDoc]
   * @property {string} [CnsDoc]
   * @property {string} [DiagCode]
   * @property {string} [Diagnosis]
   * @property {string} [EndDate]
   * @property {string} [ArchivedDate]
   */

  /** @type {{ 
   *   visit: Visit, 
   *   onEdit: () => void,
   *   onDelete: () => void,
   *   onViewHistory: () => void,
   *   onDischarge: () => void
   * }} */
  let { 
    visit, 
    onEdit,
    onDelete,
    onViewHistory,
    onDischarge
  } = $props();

  let isActive = $derived(!visit.EndDate && !visit.ArchivedDate);
  let visitDate = $derived(visit.PVACreateDate || visit.PVCreateDate);
</script>

<div class="card bg-base-100 shadow-sm border border-base-200 hover:shadow-md transition-shadow">
  <div class="card-body p-3 compact-y">
    <div class="flex items-start justify-between gap-2">
      <div class="flex-1 min-w-0">
        <!-- Header -->
        <div class="flex items-center gap-2 mb-2">
          <Calendar class="w-4 h-4 text-primary" />
          <span class="font-semibold text-sm">{formatDate(visitDate)}</span>
          {#if isActive}
            <span class="badge badge-sm badge-success">Active</span>
          {:else}
            <span class="badge badge-sm badge-ghost">Closed</span>
          {/if}
        </div>

        <!-- Visit Details -->
        <div class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-gray-600">
          {#if visit.ADTCode}
            <div>
              <span class="text-gray-400">Type:</span>
              <span class="ml-1 font-medium">{visit.ADTCode}</span>
            </div>
          {/if}
          
          {#if visit.LocCode || visit.LocationID}
            <div class="flex items-center gap-1">
              <MapPin class="w-3 h-3 text-gray-400" />
              <span class="text-gray-400">Loc:</span>
              <span class="ml-1">{visit.LocCode || visit.LocationID || '-'}</span>
            </div>
          {/if}
          
          {#if visit.AttDoc || visit.AdmDoc || visit.RefDoc || visit.CnsDoc}
            <div class="flex items-center gap-1">
              <User class="w-3 h-3 text-gray-400" />
              <span class="text-gray-400">Dr:</span>
              <span class="ml-1 truncate">{visit.AttDoc || visit.AdmDoc || visit.RefDoc || visit.CnsDoc || '-'}</span>
            </div>
          {/if}
          
          {#if visitDate}
            <div class="flex items-center gap-1">
              <Clock class="w-3 h-3 text-gray-400" />
              <span class="text-gray-400">Time:</span>
              <span class="ml-1">{formatDateTime(visitDate)}</span>
            </div>
          {/if}
        </div>

        <!-- Diagnosis -->
        {#if visit.DiagCode || visit.Diagnosis}
          <div class="mt-2 pt-2 border-t border-base-200">
            <div class="flex items-start gap-2">
              <FileText class="w-3 h-3 text-gray-400 mt-0.5" />
              <div class="text-xs">
                <span class="text-gray-400">Dx:</span>
                <span class="ml-1">{visit.DiagCode || ''}</span>
                {#if visit.Diagnosis}
                  <p class="mt-0.5 text-gray-500 truncate">{visit.Diagnosis}</p>
                {/if}
              </div>
            </div>
          </div>
        {/if}
        
        <div class="mt-1 text-xs text-gray-400">
          ID: {visit.PVID || visit.InternalPVID || '-'}
        </div>
      </div>

      <!-- Actions -->
      <div class="flex flex-col gap-1">
        {#if isActive}
          <button
            class="btn btn-xs btn-ghost text-warning"
            title="Discharge"
            onclick={onDischarge}
          >
            <Activity class="w-3 h-3" />
          </button>
        {/if}
        <button
          class="btn btn-xs btn-ghost"
          title="View ADT History"
          onclick={onViewHistory}
        >
          <History class="w-3 h-3" />
        </button>
        <button
          class="btn btn-xs btn-ghost"
          title="Edit"
          onclick={onEdit}
        >
          <Edit2 class="w-3 h-3" />
        </button>
        <button
          class="btn btn-xs btn-ghost text-error"
          title="Delete"
          onclick={onDelete}
        >
          <Trash2 class="w-3 h-3" />
        </button>
      </div>
    </div>
  </div>
</div>