628 lines
39 KiB
HTML
628 lines
39 KiB
HTML
<section class="prescriptions-section">
|
|
<!-- Header -->
|
|
<div class="section-header">
|
|
<div>
|
|
<h2 class="section-title">Prescription Management</h2>
|
|
<p class="section-description">Manage prescriptions for your patients</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="secondary-button" (click)="showPrescriptionAnalytics = !showPrescriptionAnalytics">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M3 3V21H21M7 18L12 8L16 13L21 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Analytics
|
|
</button>
|
|
<button class="secondary-button" (click)="exportPrescriptions()">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15M17 8L12 3M12 3L7 8M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Export
|
|
</button>
|
|
<button class="primary-button" (click)="openCreatePrescription()">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Create Prescription
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analytics Dashboard -->
|
|
<div class="prescription-analytics" *ngIf="showPrescriptionAnalytics">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon total">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3>{{ getPrescriptionStatistics().total }}</h3>
|
|
<p>Total Prescriptions</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon active">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3>{{ getPrescriptionStatistics().active }}</h3>
|
|
<p>Active</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon completed">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.7088 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.7649 14.1003 1.98232 16.07 2.85999" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M22 4L12 14.01L9 11.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3>{{ getPrescriptionStatistics().completed }}</h3>
|
|
<p>Completed</p>
|
|
<small>{{ getPrescriptionStatistics().completionRate }}% completion rate</small>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon recent">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3>{{ getPrescriptionStatistics().recent }}</h3>
|
|
<p>Last 30 Days</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon eprescription">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4 22H20C20.5304 22 21.0391 21.7893 21.4142 21.4142C21.7893 21.0391 22 20.5304 22 20V4C22 3.46957 21.7893 2.96086 21.4142 2.58579C21.0391 2.21071 20.5304 2 20 2H4C3.46957 2 2.96086 2.21071 2.58579 2.58579C2.21071 2.96086 2 3.46957 2 4V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M7 8H17M7 12H17M7 16H13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3>{{ getPrescriptionStatistics().ePrescriptionsSent }}</h3>
|
|
<p>E-Prescriptions Sent</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div class="error-message" *ngIf="error" role="alert" aria-live="assertive">
|
|
<div class="error-content">
|
|
<svg class="error-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<div class="error-text">
|
|
<strong>Error:</strong> {{ error }}
|
|
</div>
|
|
</div>
|
|
<button type="button" (click)="error = null" aria-label="Close error message" class="error-close">×</button>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div class="loading-overlay" *ngIf="loading" aria-live="polite" aria-busy="true">
|
|
<div class="loading-spinner">
|
|
<svg class="spinner" viewBox="0 0 50 50">
|
|
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="4"></circle>
|
|
</svg>
|
|
<p class="loading-text">Loading prescriptions...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters and Controls -->
|
|
<div class="prescription-controls">
|
|
<div class="controls-left">
|
|
<div class="search-box">
|
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
|
|
<path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<input
|
|
type="text"
|
|
[(ngModel)]="prescriptionSearchTerm"
|
|
(ngModelChange)="onPrescriptionFilterChange()"
|
|
placeholder="Search prescriptions..."
|
|
aria-label="Search prescriptions"
|
|
class="search-input">
|
|
<button
|
|
type="button"
|
|
class="clear-search"
|
|
*ngIf="prescriptionSearchTerm"
|
|
(click)="prescriptionSearchTerm = ''; onPrescriptionFilterChange()"
|
|
aria-label="Clear search">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<select [(ngModel)]="prescriptionStatusFilter" (ngModelChange)="onPrescriptionFilterChange()" class="filter-select">
|
|
<option value="all">All Status</option>
|
|
<option value="ACTIVE">Active</option>
|
|
<option value="COMPLETED">Completed</option>
|
|
<option value="CANCELLED">Cancelled</option>
|
|
<option value="DISCONTINUED">Discontinued</option>
|
|
</select>
|
|
<select [(ngModel)]="prescriptionDateFilter" (ngModelChange)="onPrescriptionFilterChange()" class="filter-select">
|
|
<option value="all">All Dates</option>
|
|
<option value="today">Today</option>
|
|
<option value="week">Last 7 Days</option>
|
|
<option value="month">Last 30 Days</option>
|
|
<option value="year">Last Year</option>
|
|
<option value="custom">Custom Range</option>
|
|
</select>
|
|
<div class="date-range" *ngIf="prescriptionDateFilter === 'custom'">
|
|
<input type="date" [(ngModel)]="prescriptionDateFrom" (ngModelChange)="onPrescriptionFilterChange()">
|
|
<span>to</span>
|
|
<input type="date" [(ngModel)]="prescriptionDateTo" (ngModelChange)="onPrescriptionFilterChange()">
|
|
</div>
|
|
</div>
|
|
<div class="controls-right">
|
|
<div class="view-toggle">
|
|
<button class="toggle-btn" [class.active]="prescriptionViewMode === 'card'" (click)="prescriptionViewMode = 'card'" title="Card View">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="3" y="3" width="7" height="7" stroke="currentColor" stroke-width="2"/>
|
|
<rect x="14" y="3" width="7" height="7" stroke="currentColor" stroke-width="2"/>
|
|
<rect x="3" y="14" width="7" height="7" stroke="currentColor" stroke-width="2"/>
|
|
<rect x="14" y="14" width="7" height="7" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</button>
|
|
<button class="toggle-btn" [class.active]="prescriptionViewMode === 'table'" (click)="prescriptionViewMode = 'table'" title="Table View">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V9M9 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V9M9 3V21M3 9V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V9M3 9H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<button class="secondary-button" (click)="toggleRecordsView()">
|
|
{{ showAllRecords ? 'Show Patient Specific' : 'Show All Prescriptions' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulk Actions Bar -->
|
|
<div class="bulk-actions-bar" *ngIf="selectedPrescriptions.length > 0">
|
|
<span class="selection-count">{{ selectedPrescriptions.length }} prescription(s) selected</span>
|
|
<div class="bulk-actions">
|
|
<button class="secondary-button" (click)="bulkUpdatePrescriptionStatus('ACTIVE')">Mark Active</button>
|
|
<button class="secondary-button" (click)="bulkUpdatePrescriptionStatus('COMPLETED')">Mark Completed</button>
|
|
<button class="secondary-button" (click)="bulkUpdatePrescriptionStatus('CANCELLED')">Cancel</button>
|
|
<button class="secondary-button" (click)="bulkUpdatePrescriptionStatus('DISCONTINUED')">Discontinue</button>
|
|
<button class="secondary-button" (click)="selectedPrescriptions = []">Clear Selection</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patient Selection -->
|
|
<div class="card" *ngIf="!showAllRecords && !selectedPatientId">
|
|
<h3>View Patient Prescriptions</h3>
|
|
<select [(ngModel)]="selectedPatientId" (change)="selectPatient(selectedPatientId!)">
|
|
<option value="">Select Patient</option>
|
|
<option *ngFor="let patient of patients" [value]="patient.id">
|
|
{{ patient.firstName }} {{ patient.lastName }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Create Prescription Form -->
|
|
<div class="card create-form-card" *ngIf="showCreatePrescription" [attr.aria-expanded]="showCreatePrescription">
|
|
<div class="card-header">
|
|
<div class="header-content">
|
|
<h3>Create New Prescription</h3>
|
|
<p class="card-subtitle">Fill in the medication details below</p>
|
|
</div>
|
|
<button type="button" class="close-button" (click)="showCreatePrescription = false" aria-label="Close form">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="debug-toggle" *ngIf="showPrescriptionDebug">
|
|
<button class="secondary-button" type="button" (click)="showPrescriptionDebug = !showPrescriptionDebug">
|
|
{{ showPrescriptionDebug ? 'Hide' : 'Show' }} Debug
|
|
</button>
|
|
</div>
|
|
<pre *ngIf="showPrescriptionDebug" class="debug-pre">{{ prescriptionDebug | json }}</pre>
|
|
<form (ngSubmit)="createPrescription()" novalidate>
|
|
<div class="form-group">
|
|
<label class="form-label" for="patient-select">Patient <span class="required-asterisk" aria-label="required">*</span></label>
|
|
<div class="input-wrapper">
|
|
<svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<select [(ngModel)]="newPrescription.patientId" name="patientId" id="patient-select" required (ngModelChange)="onPatientSelectionChange($event)" class="form-input">
|
|
<option [value]="''">Select Patient</option>
|
|
<option *ngFor="let patient of patients" [value]="patient.id">
|
|
{{ patient.firstName }} {{ patient.lastName }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="medication-name">Medication Name <span class="required-asterisk" aria-label="required">*</span></label>
|
|
<div class="input-wrapper">
|
|
<svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M9 8H15M9 12H15M9 16H13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<input type="text" [(ngModel)]="newPrescription.medicationName" name="medicationName" id="medication-name" required class="form-input" placeholder="e.g., Amoxicillin 500mg">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Dosage</label>
|
|
<input type="text" [(ngModel)]="newPrescription.dosage" name="dosage" required class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Frequency</label>
|
|
<input type="text" [(ngModel)]="newPrescription.frequency" name="frequency" required class="form-input">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Quantity</label>
|
|
<input type="number" [(ngModel)]="newPrescription.quantity" name="quantity" required class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Refills</label>
|
|
<input type="number" [(ngModel)]="newPrescription.refills" name="refills" class="form-input">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Instructions</label>
|
|
<textarea [(ngModel)]="newPrescription.instructions" name="instructions" class="form-input form-textarea"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Start Date</label>
|
|
<input type="date" [(ngModel)]="newPrescription.startDate" name="startDate" required class="form-input">
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" (click)="showCreatePrescription = false" class="cancel-button">Cancel</button>
|
|
<button type="submit" [disabled]="loading" class="submit-button">
|
|
<span *ngIf="!loading">Create Prescription</span>
|
|
<span *ngIf="loading" class="loading-content">
|
|
<svg class="spinner-small" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="32" stroke-dashoffset="32">
|
|
<animate attributeName="stroke-dasharray" dur="2s" values="0 32;16 16;0 32;0 32" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-dashoffset" dur="2s" values="0;-16;-32;-32" repeatCount="indefinite"/>
|
|
</circle>
|
|
</svg>
|
|
Creating...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Prescriptions Table View -->
|
|
<div class="card prescription-table-container" *ngIf="prescriptionViewMode === 'table' && (filteredPrescriptions.length > 0 || (showAllRecords ? allPrescriptions.length : prescriptions.length) > 0)">
|
|
<div class="table-header">
|
|
<h3>Prescriptions ({{ filteredPrescriptions.length > 0 ? filteredPrescriptions.length : (showAllRecords ? allPrescriptions.length : prescriptions.length) }})</h3>
|
|
</div>
|
|
<table class="prescription-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="checkbox-column">
|
|
<input type="checkbox" [checked]="selectedPrescriptions.length === (filteredPrescriptions.length > 0 ? filteredPrescriptions : (showAllRecords ? allPrescriptions : prescriptions)).length && (filteredPrescriptions.length > 0 ? filteredPrescriptions : (showAllRecords ? allPrescriptions : prescriptions)).length > 0" (change)="toggleSelectAllPrescriptions()">
|
|
</th>
|
|
<th (click)="togglePrescriptionSort('prescriptionNumber')" class="sortable">
|
|
Prescription #
|
|
<span *ngIf="prescriptionSortBy === 'prescriptionNumber'" class="sort-indicator">
|
|
{{ prescriptionSortOrder === 'asc' ? '↑' : '↓' }}
|
|
</span>
|
|
</th>
|
|
<th (click)="togglePrescriptionSort('medicationName')" class="sortable">
|
|
Medication
|
|
<span *ngIf="prescriptionSortBy === 'medicationName'" class="sort-indicator">
|
|
{{ prescriptionSortOrder === 'asc' ? '↑' : '↓' }}
|
|
</span>
|
|
</th>
|
|
<th (click)="togglePrescriptionSort('patientName')" class="sortable">
|
|
Patient
|
|
<span *ngIf="prescriptionSortBy === 'patientName'" class="sort-indicator">
|
|
{{ prescriptionSortOrder === 'asc' ? '↑' : '↓' }}
|
|
</span>
|
|
</th>
|
|
<th>Dosage</th>
|
|
<th>Frequency</th>
|
|
<th>Quantity</th>
|
|
<th>Refills</th>
|
|
<th (click)="togglePrescriptionSort('status')" class="sortable">
|
|
Status
|
|
<span *ngIf="prescriptionSortBy === 'status'" class="sort-indicator">
|
|
{{ prescriptionSortOrder === 'asc' ? '↑' : '↓' }}
|
|
</span>
|
|
</th>
|
|
<th (click)="togglePrescriptionSort('startDate')" class="sortable">
|
|
Start Date
|
|
<span *ngIf="prescriptionSortBy === 'startDate'" class="sort-indicator">
|
|
{{ prescriptionSortOrder === 'asc' ? '↑' : '↓' }}
|
|
</span>
|
|
</th>
|
|
<th>E-Prescription</th>
|
|
<th class="actions-column">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let prescription of (filteredPrescriptions.length > 0 ? filteredPrescriptions : (showAllRecords ? allPrescriptions : prescriptions))" [class.selected]="selectedPrescriptions.includes(prescription.id)">
|
|
<td class="checkbox-column">
|
|
<input type="checkbox" [checked]="selectedPrescriptions.includes(prescription.id)" (change)="togglePrescriptionSelection(prescription.id)">
|
|
</td>
|
|
<td class="prescription-number-cell">
|
|
<strong>#{{ prescription.prescriptionNumber }}</strong>
|
|
</td>
|
|
<td>{{ prescription.medicationName }}</td>
|
|
<td>{{ prescription.patientName || prescription.patientId }}</td>
|
|
<td>{{ prescription.dosage }}</td>
|
|
<td>{{ prescription.frequency }}</td>
|
|
<td>{{ prescription.quantity }}</td>
|
|
<td>{{ prescription.refills || 0 }}</td>
|
|
<td>
|
|
<span class="prescription-status" [class]="'status-' + prescription.status.toLowerCase()">
|
|
{{ prescription.status }}
|
|
</span>
|
|
</td>
|
|
<td>{{ formatDate(prescription.startDate) }}</td>
|
|
<td>
|
|
<span *ngIf="prescription.ePrescriptionSent" class="e-prescription-badge">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Sent
|
|
</span>
|
|
<span *ngIf="!prescription.ePrescriptionSent" class="not-sent">—</span>
|
|
</td>
|
|
<td class="actions-column">
|
|
<div class="table-actions">
|
|
<button class="icon-button" (click)="printPrescription(prescription)" title="Print">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6 9V2H18V9M6 18H4C3.46957 18 2.96086 17.7893 2.58579 17.4142C2.21071 17.0391 2 16.5304 2 16V11C2 10.4696 2.21071 9.96086 2.58579 9.58579C2.96086 9.21071 3.46957 9 4 9H20C20.5304 9 21.0391 9.21071 21.4142 9.58579C21.7893 9.96086 22 10.4696 22 11V16C22 16.5304 21.7893 17.0391 21.4142 17.4142C21.0391 17.7893 20.5304 18 20 18H18M6 14H18V22H6V14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
<button class="icon-button" (click)="selectPatient(prescription.patientId); editPrescription(prescription)" title="Edit">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button class="icon-button" title="Status">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 15V17M12 9V13M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<button *ngIf="prescription.status !== 'ACTIVE'" (click)="updatePrescriptionStatus(prescription.id, 'ACTIVE')">Mark Active</button>
|
|
<button *ngIf="prescription.status !== 'COMPLETED'" (click)="updatePrescriptionStatus(prescription.id, 'COMPLETED')">Mark Completed</button>
|
|
<button *ngIf="prescription.status !== 'CANCELLED'" (click)="updatePrescriptionStatus(prescription.id, 'CANCELLED')">Cancel</button>
|
|
<button *ngIf="prescription.status !== 'DISCONTINUED'" (click)="updatePrescriptionStatus(prescription.id, 'DISCONTINUED')">Discontinue</button>
|
|
<button *ngIf="!prescription.ePrescriptionSent" (click)="markEPrescriptionSent(prescription.id)">Mark E-Prescription Sent</button>
|
|
</div>
|
|
</div>
|
|
<button class="icon-button delete-button" (click)="deletePrescription(prescription.id)" title="Delete">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Prescriptions Card View -->
|
|
<div class="card" *ngIf="prescriptionViewMode === 'card' && (filteredPrescriptions.length > 0 || (showAllRecords ? allPrescriptions.length : prescriptions.length) > 0)">
|
|
<div class="prescription-list-header">
|
|
<h3>{{ showAllRecords ? 'All My Prescriptions' : 'Patient Prescriptions' }} ({{ filteredPrescriptions.length > 0 ? filteredPrescriptions.length : (showAllRecords ? allPrescriptions.length : prescriptions.length) }})</h3>
|
|
</div>
|
|
<div class="prescription-grid">
|
|
<div *ngFor="let prescription of (filteredPrescriptions.length > 0 ? filteredPrescriptions : (showAllRecords ? allPrescriptions : prescriptions))" class="prescription-card" [class.selected]="selectedPrescriptions.includes(prescription.id)">
|
|
<div class="prescription-card-checkbox">
|
|
<input type="checkbox" [checked]="selectedPrescriptions.includes(prescription.id)" (change)="togglePrescriptionSelection(prescription.id)">
|
|
</div>
|
|
<div class="prescription-header">
|
|
<div>
|
|
<h3>{{ prescription.medicationName }}</h3>
|
|
<p class="prescription-number">#{{ prescription.prescriptionNumber }}</p>
|
|
<p *ngIf="showAllRecords"><strong>Patient:</strong> {{ prescription.patientName || prescription.patientId }}</p>
|
|
</div>
|
|
<div class="prescription-header-right">
|
|
<span class="prescription-status" [class]="'status-' + prescription.status.toLowerCase()">
|
|
{{ prescription.status }}
|
|
</span>
|
|
<div class="prescription-actions">
|
|
<button class="icon-button" (click)="printPrescription(prescription)" title="Print">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6 9V2H18V9M6 18H4C3.46957 18 2.96086 17.7893 2.58579 17.4142C2.21071 17.0391 2 16.5304 2 16V11C2 10.4696 2.21071 9.96086 2.58579 9.58579C2.96086 9.21071 3.46957 9 4 9H20C20.5304 9 21.0391 9.21071 21.4142 9.58579C21.7893 9.96086 22 10.4696 22 11V16C22 16.5304 21.7893 17.0391 21.4142 17.4142C21.0391 17.7893 20.5304 18 20 18H18M6 14H18V22H6V14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
<button class="icon-button" (click)="selectPatient(prescription.patientId); editPrescription(prescription)" title="Edit">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button class="icon-button" title="Update Status">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 15V17M12 9V13M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<button *ngIf="prescription.status !== 'ACTIVE'" (click)="updatePrescriptionStatus(prescription.id, 'ACTIVE')">Mark Active</button>
|
|
<button *ngIf="prescription.status !== 'COMPLETED'" (click)="updatePrescriptionStatus(prescription.id, 'COMPLETED')">Mark Completed</button>
|
|
<button *ngIf="prescription.status !== 'CANCELLED'" (click)="updatePrescriptionStatus(prescription.id, 'CANCELLED')">Cancel</button>
|
|
<button *ngIf="prescription.status !== 'DISCONTINUED'" (click)="updatePrescriptionStatus(prescription.id, 'DISCONTINUED')">Discontinue</button>
|
|
<button *ngIf="!prescription.ePrescriptionSent" (click)="markEPrescriptionSent(prescription.id)">Mark E-Prescription Sent</button>
|
|
</div>
|
|
</div>
|
|
<button class="icon-button delete-button" (click)="deletePrescription(prescription.id)" title="Delete">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="prescription-details">
|
|
<div class="detail-row">
|
|
<span class="detail-label">Dosage:</span>
|
|
<span class="detail-value">{{ prescription.dosage }}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Frequency:</span>
|
|
<span class="detail-value">{{ prescription.frequency }}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Quantity:</span>
|
|
<span class="detail-value">{{ prescription.quantity }}</span>
|
|
</div>
|
|
<div class="detail-row" *ngIf="prescription.refills && prescription.refills > 0">
|
|
<span class="detail-label">Refills:</span>
|
|
<span class="detail-value">{{ prescription.refills }}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Start Date:</span>
|
|
<span class="detail-value">{{ formatDate(prescription.startDate) }}</span>
|
|
</div>
|
|
<div class="detail-row" *ngIf="prescription.endDate">
|
|
<span class="detail-label">End Date:</span>
|
|
<span class="detail-value">{{ formatDate(prescription.endDate) }}</span>
|
|
</div>
|
|
<div class="detail-row" *ngIf="prescription.instructions">
|
|
<span class="detail-label">Instructions:</span>
|
|
<span class="detail-value instructions-text">{{ prescription.instructions }}</span>
|
|
</div>
|
|
<div class="detail-row" *ngIf="prescription.pharmacyName">
|
|
<span class="detail-label">Pharmacy:</span>
|
|
<span class="detail-value">{{ prescription.pharmacyName }}</span>
|
|
</div>
|
|
<div class="detail-row" *ngIf="prescription.ePrescriptionSent" class="e-prescription-sent">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
E-Prescription Sent {{ prescription.ePrescriptionSentAt ? '(' + formatDate(prescription.ePrescriptionSentAt) + ')' : '' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div class="card empty-state-card" *ngIf="filteredPrescriptions.length === 0 && (showAllRecords ? allPrescriptions.length : prescriptions.length) === 0 && !showCreatePrescription && !showUpdatePrescription && !loading">
|
|
<div class="empty-state">
|
|
<div class="empty-icon-wrapper">
|
|
<svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="empty-content">
|
|
<h3>No Prescriptions Found</h3>
|
|
<p *ngIf="!selectedPatientId">Select a patient or create a new prescription to get started.</p>
|
|
<p *ngIf="selectedPatientId && prescriptionSearchTerm">No prescriptions match your search criteria. Try adjusting your filters.</p>
|
|
<p *ngIf="selectedPatientId && !prescriptionSearchTerm">No prescriptions found for this patient. Create their first prescription to get started.</p>
|
|
</div>
|
|
<div class="empty-actions" *ngIf="selectedPatientId">
|
|
<button class="primary-button" (click)="openCreatePrescription()">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Create First Prescription
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Update Prescription Form -->
|
|
<div class="card update-form-card" *ngIf="showUpdatePrescription && selectedPrescription" [attr.aria-expanded]="showUpdatePrescription">
|
|
<div class="card-header">
|
|
<div class="header-content">
|
|
<h3>Update Prescription</h3>
|
|
<p class="card-subtitle">Modify prescription details</p>
|
|
</div>
|
|
<button type="button" class="close-button" (click)="showUpdatePrescription = false; selectedPrescription = null" aria-label="Close form">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form (ngSubmit)="updatePrescription()">
|
|
<div class="form-group">
|
|
<label class="form-label">Patient</label>
|
|
<input type="text" [value]="selectedPrescription.patientName || selectedPrescription.patientId" disabled class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Medication Name</label>
|
|
<input type="text" [(ngModel)]="newPrescription.medicationName" name="medicationName" required class="form-input">
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Dosage</label>
|
|
<input type="text" [(ngModel)]="newPrescription.dosage" name="dosage" required class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Frequency</label>
|
|
<input type="text" [(ngModel)]="newPrescription.frequency" name="frequency" required class="form-input">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Quantity</label>
|
|
<input type="number" [(ngModel)]="newPrescription.quantity" name="quantity" required class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Refills</label>
|
|
<input type="number" [(ngModel)]="newPrescription.refills" name="refills" class="form-input">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Instructions</label>
|
|
<textarea [(ngModel)]="newPrescription.instructions" name="instructions" class="form-input form-textarea"></textarea>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Start Date</label>
|
|
<input type="date" [(ngModel)]="newPrescription.startDate" name="startDate" required class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">End Date</label>
|
|
<input type="date" [(ngModel)]="newPrescription.endDate" name="endDate" class="form-input">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Pharmacy Name</label>
|
|
<input type="text" [(ngModel)]="newPrescription.pharmacyName" name="pharmacyName" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Pharmacy Address</label>
|
|
<input type="text" [(ngModel)]="newPrescription.pharmacyAddress" name="pharmacyAddress" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Pharmacy Phone</label>
|
|
<input type="text" [(ngModel)]="newPrescription.pharmacyPhone" name="pharmacyPhone" class="form-input">
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" (click)="showUpdatePrescription = false; selectedPrescription = null" class="cancel-button">Cancel</button>
|
|
<button type="submit" [disabled]="loading" class="submit-button">
|
|
<span *ngIf="!loading">Update Prescription</span>
|
|
<span *ngIf="loading" class="loading-content">
|
|
<svg class="spinner-small" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="32" stroke-dashoffset="32">
|
|
<animate attributeName="stroke-dasharray" dur="2s" values="0 32;16 16;0 32;0 32" repeatCount="indefinite"/>
|
|
<animate attributeName="stroke-dashoffset" dur="2s" values="0;-16;-32;-32" repeatCount="indefinite"/>
|
|
</circle>
|
|
</svg>
|
|
Updating...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|