Hospital_Management/angular/src/app/appointment/view-appointment/view-appointment.component.html

<div>
  <p-table
    #dt2
    dataKey="id"
    [value]="appointments"
    [paginator]="true"
    [rows]="10"
    [rowsPerPageOptions]="[10, 20, 50]"
  >
    <ng-template pTemplate="caption">
      <div class="flex align-items-center justify-content-between mb-3 gap-3">
        <!-- Left: Title -->
        <h2 class="m-0">Appointment List</h2>

        <!-- Center: Search Bar with Icon Inside -->
        <div class="flex-grow-1 flex justify-content-center">
          <span class="p-input-icon-left w-50">
            <i class="pi pi-search"></i>
            <input
              pInputText
              type="text"
              [(ngModel)]="globalFilter"
              placeholder="Search Appointments"
              (input)="dt2.filterGlobal(globalFilter, 'contains')"
              class="w-full"
            />
          </span>
        </div>

        <!-- Right: Add Button -->
        <div>
          <button
            *ngIf="createPermission"
            pButton
            class="p-button-rounded p-button-success"
            (click)="openNewAppointmentDialog()"
            pTooltip="Add Appointment"
            tooltipPosition="left"
          >
            <i class="pi pi-plus-circle"></i>
          </button>
        </div>
      </div>
    </ng-template>

    <ng-template pTemplate="header">
      <tr>
        <th pSortableColumn="name">Name <p-sortIcon field="name" /></th>
        <th pSortableColumn="doctor">Doctor <p-sortIcon field="doctor" /></th>
        <th pSortableColumn="date">Date <p-sortIcon field="date" /></th>
        <th pSortableColumn="Time">Time<p-sortIcon field="Time" /></th>
        <th pSortableColumn="mobile">Mobile No<p-sortIcon field="mobile" /></th>
        <th pSortableColumn="status">Appointment Status<p-sortIcon field="status" /></th>
        <th pSortableColumn="visitType">Visit Type<p-sortIcon field="visitType" /></th>
        <th>Actions</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-appointment>
      <tr>
        <td>{{ appointment.name }}</td>
        <td>{{ appointment.doctor }}</td>
        <td>{{ appointment.date | date }}</td>
        <td>{{ appointment.time }}</td>
        <td>{{ appointment.mobile }}</td>
        <td>{{ appointment.status }}</td>
        <td>{{ appointment.visitType }}</td>
        <td>
          <button class="btn btn-warning btn-sm ml-1" (click)="editAppointment(appointment)">
            <i class="pi pi-pencil"></i>
          </button>
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>

<p-dialog
  header="{{ isEditing ? 'Edit Appointment' : 'New Appointment' }}"
  [(visible)]="appointmentDialog"
  [modal]="true"
  [closable]="true"
  [style]="{ width: '80%' }"
>
  <form #appointmentForm="ngForm" (ngSubmit)="saveAppointment(appointmentForm)">
    <div class="p-fluid grid justify-content-center">
      
      <div class="field col-md-5">
        <label for="fname">First Name</label>
        <span class="p-input-icon-left">
          <i class="pi pi-user"></i>
          <input pInputText id="fname" name="fname" [(ngModel)]="appointment.firstname" required />
        </span>
      </div>
      <div class="field col-md-1"></div>

      <div class="field col-md-5">
        <label for="lname">Last Name</label>
        <span class="p-input-icon-left">
          <i class="pi pi-user"></i>
          <input pInputText id="lname" name="lname" [(ngModel)]="appointment.lastname" required />
        </span>
      </div>

      <div class="field col-md-5">
        <label>Gender</label>
        <div class="flex align-items-center">
          <p-radioButton name="gender" value="Male" [(ngModel)]="appointment.gender" inputId="male" required></p-radioButton>
          <label for="male" class="ml-2 mr-3">Male</label>
          <p-radioButton name="gender" value="Female" [(ngModel)]="appointment.gender" inputId="female" required></p-radioButton>
          <label for="female" class="ml-2">Female</label>
        </div>
      </div>
      <div class="field col-md-1"></div>
      
      <div class="field col-md-5">
        <label for="mobile">Mobile No</label>
        <span class="p-input-icon-left">
          <i class="pi pi-phone"></i>
          <input pInputText id="mobile" name="mobile" [(ngModel)]="appointment.mobile" required />
        </span>
      </div>
      <div class="field col-md-11">
        <label for="mobile">Address</label>
        <span class="p-input-icon-left">
          <i class="pi pi-map-marker"></i>
          <input pInputText id="Address" name="Address" [(ngModel)]="appointment.Address" required />
        </span>
      </div>
      <div class="field col-md-5">
        <label for="email">Email ID</label>
        <span class="p-input-icon-left">
          <i class="pi pi-envelope"></i>
          <input pInputText id="email" name="email" [(ngModel)]="appointment.email" required email />
        </span>
      </div>
<!--       
      <div class="field col-md-5">
        <label for="dob">Date of Birth</label>
        <p-calendar id="dob" name="dob" [(ngModel)]="appointment.dob" [showIcon]="true" required></p-calendar>
      </div> -->
      <div class="field col-md-1"></div>
      
      <div class="field col-md-5">
        <label for="doctor">Consulting Doctor</label>
        <p-dropdown id="doctor" name="doctor" [(ngModel)]="appointment.doctor" [options]="doctorOptions" placeholder="Select Doctor" optionLabel="label" optionValue="value" required></p-dropdown>
      </div>
      
      <div class="field col-md-5">
        <label for="date">Date of Appointment</label>
        <p-calendar id="date" name="date" [(ngModel)]="appointment.date" [showIcon]="true" required></p-calendar>
      </div>
      <div class="field col-md-1"></div>
      
      <div class="field col-md-5">
        <label for="time">Time Of Appointment</label>
        <span class="p-input-icon-left">
          <i class="pi pi-clock"></i>
          <input pInputText id="time" name="time" type="time" [(ngModel)]="appointment.time" required />
        </span>
      </div>

      <!-- Injury (Full Width) -->
      <div class="field col-11">
        <label for="injury">Injury/Condition</label>
        <span class="p-input-icon-left">
          <i class="pi pi-exclamation-triangle"></i>
          <input pInputText id="injury" name="injury" [(ngModel)]="appointment.injury" />
        </span>
      </div>
<!-- 
      <div class="field col-md-5">
        <label for="insurance">Insurance Provider</label>
        <span class="p-input-icon-left">
          <i class="pi pi-credit-card"></i>
          <input pInputText id="insurance" name="insuranceProvider" [(ngModel)]="appointment.insuranceProvider" />
        </span>
      </div>
       -->
      <!-- <div class="field col-md-5">
        <label for="status">Appointment Status</label>
        <p-dropdown id="status" name="status" [(ngModel)]="appointment.status" [options]="appointmentStatuses" placeholder="Select Status" required></p-dropdown>
      </div>
      
      <div class="field col-md-5">
        <label for="visitType">Visit Type</label>
        <p-dropdown id="visitType" name="visitType" [(ngModel)]="appointment.visitType" [options]="visitTypes" placeholder="Select Visit Type" required></p-dropdown>
      </div>
      
      <div class="field col-md-5">
        <label for="paymentStatus">Payment Status</label>
        <p-dropdown id="paymentStatus" name="paymentStatus" [(ngModel)]="appointment.paymentStatus" [options]="paymentStatuses" placeholder="Select Payment Status" required></p-dropdown>
      </div> -->
      
      <!-- Notes (Full Width) -->
      <div class="field col-11">
        <label for="notes">Notes</label>
        <textarea id="notes" name="notes" [(ngModel)]="appointment.notes" rows="5"cols="30"pInputTextarea></textarea>
      

    </div>
      
      <div class="field col-11 flex justify-content-end">
        <button pButton type="submit" label="Save" class="p-button-success" [disabled]="appointmentForm.invalid"></button>
        <button pButton type="button" label="Cancel" class="p-button-secondary ml-2" (click)="closeDialog()"></button>
      </div>
    </div>
  </form>
</p-dialog>