@edvak99/voice-receptionist-widget 1.1.6 → 1.1.7

package/fesm2022/edvak99-voice-receptionist-widget-dashboard-page.component-E30a8p3d.mjs

@@ -0,0 +1,439 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, EventEmitter, signal, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { A as AiReceptionistApiService, t as toE164Phone, c as callerMetaLine, r as resultChipIcon, h as historyResultChips, a as historyResolutionLabel, b as historyResolution } from './edvak99-voice-receptionist-widget-ai-receptionist-api.service-DokIb-9r.mjs';
+import { L as LiveCallsListService, E as EdsPulseDotComponent } from './edvak99-voice-receptionist-widget-eds-pulse-dot.component-Ig0Eoq1z.mjs';
+import { i as isNeedsReview } from './edvak99-voice-receptionist-widget-call-review.util-Deh3jPgo.mjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Subject, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
+import { r as requiredFieldLabel, a as renderLiveOpeningPreview, f as formatOpeningTime, b as formatOpeningDate, p as purposeShowsCustomScript, i as isCustomScriptRequired, c as isPurposeFormValid } from './edvak99-voice-receptionist-widget-outbound-purpose.util-Bdh4QfFe.mjs';
+import { ToastService, EdsButtonComponent, EdsIconComponent } from './edvak99-voice-receptionist-widget.mjs';
+import { M as ModalComponent } from './edvak99-voice-receptionist-widget-modal.component-uYApl1KF.mjs';
+import { E as EdsAvatarComponent } from './edvak99-voice-receptionist-widget-eds-avatar.component-BJs_TH8X.mjs';
+import { E as EdsElapsedPipe } from './edvak99-voice-receptionist-widget-eds-elapsed.pipe-BFCiJOT3.mjs';
+
+const E164_PATTERN = /^\+[1-9]\d{6,14}$/;
+class OutboundDialModalComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.toast = inject(ToastService);
+        this.destroyRef = inject(DestroyRef);
+        this.open = false;
+        this.closed = new EventEmitter();
+        this.dialed = new EventEmitter();
+        this.purposes = signal([]);
+        this.loading = signal(true);
+        this.submitting = signal(false);
+        this.serverError = signal(null);
+        this.patientHits = signal([]);
+        this.searchingPatients = signal(false);
+        this.selectedPatient = signal(null);
+        this.appointments = signal([]);
+        this.loadingAppointments = signal(false);
+        this.selectedAppointmentId = signal(null);
+        this.showManualEntry = signal(false);
+        this.practiceName = signal('');
+        /** Bumps OnPush re-render when plain ngModel fields change. */
+        this.formEpoch = signal(0);
+        this.patientQuery = '';
+        this.phone = '';
+        this.name = '';
+        this.purposeId = '';
+        this.appointmentDate = '';
+        this.appointmentTime = '';
+        this.providerName = '';
+        this.customScript = '';
+        this.requiredFieldLabel = requiredFieldLabel;
+        this.search$ = new Subject();
+        this.search$
+            .pipe(debounceTime(280), distinctUntilChanged(), switchMap((q) => {
+            const query = q.trim();
+            if (query.length < 2) {
+                this.searchingPatients.set(false);
+                this.patientHits.set([]);
+                return of([]);
+            }
+            this.searchingPatients.set(true);
+            return this.api.searchPatientsForOutbound(query, 10).pipe(catchError(() => of([])));
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe((hits) => {
+            this.searchingPatients.set(false);
+            if (!this.selectedPatient()) {
+                this.patientHits.set(hits);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['open']?.currentValue) {
+            this.resetForm();
+            this.loadPurposes();
+            this.loadPracticeName();
+        }
+    }
+    get selectedPurpose() {
+        return this.purposes().find((p) => p.purposeId === this.purposeId) ?? null;
+    }
+    get selectedAppointment() {
+        const id = this.selectedAppointmentId();
+        if (!id)
+            return null;
+        return this.appointments().find((a) => a.appointmentId === id) ?? null;
+    }
+    get previewText() {
+        this.formEpoch(); // depend for CD when form fields change
+        const p = this.selectedPurpose;
+        if (!p)
+            return '—';
+        const appt = this.selectedAppointment;
+        const dateSource = appt?.startTime || this.appointmentDate;
+        const timeSource = appt?.startTime || this.appointmentTime;
+        return renderLiveOpeningPreview(p, {
+            patientName: this.name.trim() || this.selectedPatient()?.fullName || '',
+            appointmentDate: formatOpeningDate(dateSource),
+            appointmentTime: formatOpeningTime(this.appointmentTime || timeSource, appt?.startTime),
+            providerName: this.providerName.trim() || appt?.providerName || '',
+            practiceName: this.practiceName(),
+            locationName: appt?.locationName || '',
+            visitType: appt?.visitType || '',
+            customScript: this.customScript.trim(),
+        });
+    }
+    showsField(field) {
+        return this.selectedPurpose?.requiredFields.includes(field) ?? false;
+    }
+    showsCustomScript() {
+        const p = this.selectedPurpose;
+        return p ? purposeShowsCustomScript(p) : false;
+    }
+    customScriptRequired() {
+        const p = this.selectedPurpose;
+        return p ? isCustomScriptRequired(p) : false;
+    }
+    canPlaceCall() {
+        if (!E164_PATTERN.test(this.phone.trim()))
+            return false;
+        return isPurposeFormValid(this.selectedPurpose, {
+            phone: this.phone,
+            name: this.name,
+            appointmentDate: this.appointmentDate,
+            appointmentTime: this.appointmentTime,
+            providerName: this.providerName,
+            customScript: this.customScript,
+        });
+    }
+    touchForm() {
+        this.formEpoch.update((n) => n + 1);
+    }
+    onPatientQueryChange(value) {
+        this.patientQuery = value;
+        if (this.selectedPatient())
+            return;
+        this.search$.next(value);
+    }
+    selectPatient(patient) {
+        this.selectedPatient.set(patient);
+        this.patientHits.set([]);
+        this.patientQuery = patient.fullName;
+        this.name = patient.fullName;
+        this.phone = toE164Phone(patient.phone) || '';
+        this.showManualEntry.set(!this.phone);
+        this.selectedAppointmentId.set(null);
+        this.clearApptDerivedFields();
+        this.touchForm();
+        this.loadAppointments(patient.patientId);
+    }
+    clearPatient() {
+        this.selectedPatient.set(null);
+        this.patientQuery = '';
+        this.patientHits.set([]);
+        this.appointments.set([]);
+        this.selectedAppointmentId.set(null);
+        this.name = '';
+        this.phone = '';
+        this.clearApptDerivedFields();
+        this.touchForm();
+    }
+    selectAppointment(appt) {
+        this.selectedAppointmentId.set(appt?.appointmentId ?? null);
+        if (!appt) {
+            this.clearApptDerivedFields();
+            this.touchForm();
+            return;
+        }
+        this.applyAppointmentFields(appt);
+        this.preferAppointmentPurpose();
+        this.touchForm();
+    }
+    onPurposeChange() {
+        const appt = this.selectedAppointment;
+        if (appt) {
+            this.applyAppointmentFields(appt);
+        }
+        else {
+            this.clearApptDerivedFields();
+        }
+        this.customScript = '';
+        this.serverError.set(null);
+        this.touchForm();
+    }
+    close() {
+        this.closed.emit();
+    }
+    submit() {
+        this.serverError.set(null);
+        if (!this.canPlaceCall() || !this.selectedPurpose)
+            return;
+        this.submitting.set(true);
+        const patient = this.selectedPatient();
+        const apptId = this.selectedAppointmentId();
+        const body = {
+            phone: this.phone.trim(),
+            name: this.name.trim(),
+            purpose: this.purposeId,
+            ...(this.appointmentDate ? { appointmentDate: this.appointmentDate } : {}),
+            ...(this.appointmentTime ? { appointmentTime: this.appointmentTime } : {}),
+            ...(this.providerName ? { providerName: this.providerName.trim() } : {}),
+            ...(this.customScript ? { customScript: this.customScript.trim() } : {}),
+            ...(patient?.patientId ? { patientId: patient.patientId } : {}),
+            ...(apptId ? { appointmentId: apptId } : {}),
+        };
+        this.api.placeOutboundCall(body).subscribe({
+            next: (res) => {
+                this.submitting.set(false);
+                const msg = res.message ?? 'Outbound call started.';
+                this.toast.show(msg, 'success', 5000);
+                this.dialed.emit();
+                this.close();
+            },
+            error: (err) => {
+                this.submitting.set(false);
+                const msg = err?.message ?? 'Failed to place outbound call.';
+                this.serverError.set(msg);
+                this.toast.show(msg, 'error', 5000);
+            },
+        });
+    }
+    preferAppointmentPurpose() {
+        const current = this.selectedPurpose;
+        const needsAppt = !!current &&
+            (current.requiredFields.includes('appointmentDate') ||
+                current.requiredFields.includes('appointmentTime'));
+        if (needsAppt)
+            return;
+        const confirm = this.purposes().find((p) => p.isActive &&
+            p.requiredFields.includes('appointmentDate') &&
+            p.requiredFields.includes('appointmentTime')) ??
+            this.purposes().find((p) => p.isActive && /confirm/i.test(p.label + p.purposeId));
+        if (confirm) {
+            this.purposeId = confirm.purposeId;
+        }
+    }
+    applyAppointmentFields(appt) {
+        const start = appt.startTime ? new Date(appt.startTime) : null;
+        if (start && !Number.isNaN(start.getTime())) {
+            const y = start.getFullYear();
+            const m = String(start.getMonth() + 1).padStart(2, '0');
+            const d = String(start.getDate()).padStart(2, '0');
+            const hh = String(start.getHours()).padStart(2, '0');
+            const mm = String(start.getMinutes()).padStart(2, '0');
+            this.appointmentDate = `${y}-${m}-${d}`;
+            this.appointmentTime = `${hh}:${mm}`;
+        }
+        if (appt.providerName) {
+            this.providerName = appt.providerName;
+        }
+    }
+    clearApptDerivedFields() {
+        this.appointmentDate = '';
+        this.appointmentTime = '';
+        this.providerName = '';
+    }
+    loadAppointments(patientId) {
+        this.loadingAppointments.set(true);
+        this.appointments.set([]);
+        this.api.listPatientAppointmentsForOutbound(patientId, 20).subscribe({
+            next: (rows) => {
+                this.appointments.set(rows);
+                this.loadingAppointments.set(false);
+                if (rows.length === 1) {
+                    this.selectAppointment(rows[0]);
+                }
+            },
+            error: () => {
+                this.loadingAppointments.set(false);
+                this.appointments.set([]);
+            },
+        });
+    }
+    loadPracticeName() {
+        this.api.getSettings().subscribe({
+            next: ({ data }) => {
+                const name = String(data.general?.['practiceName'] ?? '').trim();
+                this.practiceName.set(name || 'our office');
+            },
+            error: () => this.practiceName.set('our office'),
+        });
+    }
+    resetForm() {
+        this.patientQuery = '';
+        this.phone = '';
+        this.name = '';
+        this.purposeId = '';
+        this.appointmentDate = '';
+        this.appointmentTime = '';
+        this.providerName = '';
+        this.customScript = '';
+        this.patientHits.set([]);
+        this.selectedPatient.set(null);
+        this.appointments.set([]);
+        this.selectedAppointmentId.set(null);
+        this.searchingPatients.set(false);
+        this.loadingAppointments.set(false);
+        this.showManualEntry.set(false);
+        this.serverError.set(null);
+        this.submitting.set(false);
+        this.formEpoch.set(0);
+    }
+    loadPurposes() {
+        this.loading.set(true);
+        this.api.getOutboundPurposes(false).subscribe({
+            next: ({ purposes }) => {
+                this.purposes.set(purposes);
+                if (purposes.length && !this.purposeId) {
+                    this.purposeId = purposes[0].purposeId;
+                }
+                this.loading.set(false);
+            },
+            error: () => {
+                this.loading.set(false);
+                this.serverError.set('Failed to load outbound purposes.');
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OutboundDialModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: OutboundDialModalComponent, isStandalone: true, selector: "eds-outbound-dial-modal", inputs: { open: "open" }, outputs: { closed: "closed", dialed: "dialed" }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\n  <app-modal\n    title=\"Outbound call\"\n    subtitle=\"Search a patient, pick an appointment, then dial\"\n    maxWidth=\"600px\"\n    (closed)=\"close()\"\n  >\n    @if (loading()) {\n      <p class=\"eds-body-sm\">Loading purposes\u2026</p>\n    } @else {\n      <form class=\"flex flex-col gap-3\" (ngSubmit)=\"submit()\" novalidate autocomplete=\"off\">\n        <div class=\"dial-form__field dial-form__typeahead relative flex flex-col gap-2\">\n          <span class=\"eds-label\">Patient <span class=\"text-[#dc2626]\">*</span></span>\n\n          @if (selectedPatient(); as patient) {\n            <div class=\"flex items-center justify-between gap-3 rounded-lg border border-[var(--eds-border-subtle,#e4e4e7)] bg-[var(--eds-surface-muted,#f8fafc)] px-3 py-3\">\n              <div class=\"flex min-w-0 flex-col gap-1\">\n                <strong>{{ patient.fullName }}</strong>\n                <span class=\"dial-form__chip-meta text-xs\">\n                  @if (patient.phone) {\n                    {{ patient.phone }}\n                  }\n                  @if (patient.dob) {\n                    \u00B7 DOB {{ patient.dob }}\n                  }\n                </span>\n              </div>\n              <button type=\"button\" class=\"dial-form__chip-clear shrink-0 cursor-pointer border-none bg-transparent p-1 text-[13px] font-[inherit]\" (click)=\"clearPatient()\">\n                Change\n              </button>\n            </div>\n          } @else {\n            <input\n              type=\"search\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [ngModel]=\"patientQuery\"\n              (ngModelChange)=\"onPatientQueryChange($event)\"\n              name=\"patientQuery\"\n              placeholder=\"Search by name or phone\"\n              autocomplete=\"off\"\n             />\n            @if (searchingPatients()) {\n              <span class=\"dial-form__hint text-xs\">Searching\u2026</span>\n            }\n            @if (patientHits().length) {\n              <ul class=\"dial-form__hits absolute left-0 right-0 top-[calc(100%+4px)] z-[5] max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\" role=\"listbox\">\n                @for (hit of patientHits(); track hit.patientId) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      class=\"dial-form__hit flex w-full cursor-pointer flex-col items-start gap-1 border-none border-b px-3 py-3 text-left font-[inherit] last:border-b-0\"\n                      role=\"option\"\n                      (click)=\"selectPatient(hit)\"\n                    >\n                      <span class=\"font-semibold\">{{ hit.fullName }}</span>\n                      <span class=\"dial-form__hit-meta text-xs\">\n                        {{ hit.phone || 'No phone' }}\n                        @if (hit.dob) {\n                          \u00B7 {{ hit.dob }}\n                        }\n                      </span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          }\n        </div>\n\n        @if (selectedPatient()) {\n          <div class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">Appointment</span>\n            @if (loadingAppointments()) {\n              <span class=\"dial-form__hint text-xs\">Loading appointments\u2026</span>\n            } @else if (!appointments().length) {\n              <span class=\"dial-form__hint text-xs\">No upcoming appointments \u2014 dial without one, or enter details below.</span>\n            } @else {\n              <ul class=\"max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\">\n                <li>\n                  <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\n                    <input\n                      type=\"radio\"\n                      name=\"appointmentId\"\n                      [checked]=\"!selectedAppointmentId()\"\n                      (change)=\"selectAppointment(null)\"\n                      autocomplete=\"off\"\n                     />\n                    <span>No appointment (purpose-only)</span>\n                  </label>\n                </li>\n                @for (appt of appointments(); track appt.appointmentId) {\n                  <li>\n                    <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\n                      <input\n                        type=\"radio\"\n                        name=\"appointmentId\"\n                        [checked]=\"selectedAppointmentId() === appt.appointmentId\"\n                        (change)=\"selectAppointment(appt)\"\n                        autocomplete=\"off\"\n                       />\n                      <span class=\"flex flex-col gap-1\">\n                        <strong>\n                          {{ appt.startTime ? (appt.startTime | date: 'medium') : 'TBD' }}\n                        </strong>\n                        <span class=\"dial-form__hit-meta text-xs\">\n                          {{ appt.providerName || 'Provider TBD' }}\n                          @if (appt.locationName) {\n                            \u00B7 {{ appt.locationName }}\n                          }\n                          @if (appt.visitType) {\n                            \u00B7 {{ appt.visitType }}\n                          }\n                          @if (appt.status) {\n                            \u00B7 {{ appt.status }}\n                          }\n                        </span>\n                      </span>\n                    </label>\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"dial-form__toggle self-start cursor-pointer border-none bg-transparent p-0 text-[13px] font-[inherit]\"\n          (click)=\"showManualEntry.set(!showManualEntry())\"\n        >\n          {{ showManualEntry() ? 'Hide' : 'Show' }} phone / name\n          @if (!selectedPatient()) {\n            (required if no patient selected)\n          }\n        </button>\n\n        @if (showManualEntry() || !selectedPatient()) {\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">Phone <span class=\"text-[#dc2626]\">*</span></span>\n            <input\n              type=\"tel\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [(ngModel)]=\"phone\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"phone\"\n              placeholder=\"+14155550100\"\n              autocomplete=\"off\"\n              required\n             />\n            <span class=\"dial-form__hint text-xs\">E.164 format, e.g. +14155550100</span>\n          </label>\n\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">Patient name <span class=\"text-[#dc2626]\">*</span></span>\n            <input\n              type=\"text\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [(ngModel)]=\"name\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"name\"\n              placeholder=\"Maria Garcia\"\n              required\n              autocomplete=\"off\"\n             />\n          </label>\n        }\n\n        <label class=\"flex flex-col gap-2\">\n          <span class=\"eds-label\">Purpose <span class=\"text-[#dc2626]\">*</span></span>\n          <select\n            class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n            [(ngModel)]=\"purposeId\"\n            name=\"purposeId\"\n            (ngModelChange)=\"onPurposeChange()\"\n            required\n            autocomplete=\"off\"\n          >\n            @for (p of purposes(); track p.purposeId) {\n              <option [value]=\"p.purposeId\">{{ p.label }}</option>\n            }\n          </select>\n        </label>\n\n        @if (showsField('appointmentDate') && !selectedAppointmentId()) {\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">{{ requiredFieldLabel('appointmentDate') }} <span class=\"text-[#dc2626]\">*</span></span>\n            <input\n              type=\"date\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [(ngModel)]=\"appointmentDate\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"appointmentDate\"\n              required\n              autocomplete=\"off\"\n             />\n          </label>\n        }\n\n        @if (showsField('appointmentTime') && !selectedAppointmentId()) {\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">{{ requiredFieldLabel('appointmentTime') }} <span class=\"text-[#dc2626]\">*</span></span>\n            <input\n              type=\"time\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [(ngModel)]=\"appointmentTime\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"appointmentTime\"\n              required\n              autocomplete=\"off\"\n             />\n          </label>\n        }\n\n        @if (showsField('providerName') && !selectedAppointmentId()) {\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">{{ requiredFieldLabel('providerName') }} <span class=\"text-[#dc2626]\">*</span></span>\n            <input\n              type=\"text\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [(ngModel)]=\"providerName\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"providerName\"\n              placeholder=\"Dr. Patel\"\n              required\n              autocomplete=\"off\"\n             />\n          </label>\n        }\n\n        @if (selectedAppointmentId() && (showsField('appointmentDate') || showsField('appointmentTime') || showsField('providerName'))) {\n          <p class=\"dial-form__hint text-xs\">\n            Date, time, and provider are taken from the selected appointment\n            @if (appointmentDate || appointmentTime || providerName) {\n              ({{ appointmentDate }}\n              @if (appointmentTime) {\n                {{ appointmentTime }}\n              }\n              @if (providerName) {\n                \u00B7 {{ providerName }}\n              })\n            }.\n          </p>\n        }\n\n        @if (showsCustomScript()) {\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">\n              Custom script\n              @if (customScriptRequired()) {\n                <span class=\"text-[#dc2626]\">*</span>\n              }\n            </span>\n            <textarea\n              class=\"dial-form__textarea resize-y rounded-lg border px-3 py-2 font-[inherit]\"\n              rows=\"4\"\n              [(ngModel)]=\"customScript\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"customScript\"\n              [required]=\"customScriptRequired()\"\n              placeholder=\"What should the agent say or do?\"\n              autocomplete=\"off\"\n            ></textarea>\n          </label>\n        }\n\n        <section class=\"dial-form__preview eds-card rounded-lg p-3 shadow-sm\">\n          <h3 class=\"eds-label\">Opening preview</h3>\n          <p class=\"dial-form__preview-text mt-2 whitespace-pre-wrap text-sm leading-normal\">{{ previewText }}</p>\n          @if (selectedAppointmentId()) {\n            <p class=\"dial-form__hint text-xs\">\n              Filled from the selected appointment and purpose template. Switch purpose to change the script.\n            </p>\n          } @else {\n            <p class=\"dial-form__hint text-xs\">\n              Select an appointment to fill date, time, and provider into this message.\n            </p>\n          }\n        </section>\n\n        @if (serverError()) {\n          <p class=\"m-0 text-[13px] text-[#b91c1c]\" role=\"alert\">{{ serverError() }}</p>\n        }\n\n        <footer class=\"mt-1 flex justify-end gap-2\">\n          <eds-button variant=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"submitting()\">\n            Cancel\n          </eds-button>\n          <eds-button variant=\"primary\" type=\"submit\" [disabled]=\"submitting() || !canPlaceCall()\">\n            {{ submitting() ? 'Dialing\u2026' : 'Place call' }}\n          </eds-button>\n        </footer>\n      </form>\n    }\n  </app-modal>\n}\n", styles: [".dial-form__input,.dial-form__textarea{border-color:var(--eds-border-subtle, #e4e4e7)}.dial-form__hint{color:var(--eds-text-secondary)}.dial-form__chip-clear{color:var(--eds-primary, #2563eb)}.dial-form__chip-meta,.dial-form__hit-meta{color:var(--eds-text-secondary)}.dial-form__hits,.dial-form__appts{list-style:none;margin:0;padding:0;border-color:var(--eds-border-subtle, #e4e4e7)}.dial-form__hits{background:var(--eds-surface, #fff);box-shadow:0 8px 24px #0f172a1f}.dial-form__hit{background:transparent;border-bottom-color:var(--eds-border-subtle, #f1f5f9)}.dial-form__hit:hover{background:var(--eds-surface-muted, #f8fafc)}.dial-form__appt{border-bottom-color:var(--eds-border-subtle, #f1f5f9)}.dial-form__toggle{color:var(--eds-primary, #2563eb)}.dial-form__preview{background:var(--eds-surface-muted, #f8fafc)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: EdsButtonComponent, selector: "eds-button", inputs: ["variant", "type", "disabled"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OutboundDialModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-outbound-dial-modal', imports: [FormsModule, ModalComponent, EdsButtonComponent, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n  <app-modal\n    title=\"Outbound call\"\n    subtitle=\"Search a patient, pick an appointment, then dial\"\n    maxWidth=\"600px\"\n    (closed)=\"close()\"\n  >\n    @if (loading()) {\n      <p class=\"eds-body-sm\">Loading purposes\u2026</p>\n    } @else {\n      <form class=\"flex flex-col gap-3\" (ngSubmit)=\"submit()\" novalidate autocomplete=\"off\">\n        <div class=\"dial-form__field dial-form__typeahead relative flex flex-col gap-2\">\n          <span class=\"eds-label\">Patient <span class=\"text-[#dc2626]\">*</span></span>\n\n          @if (selectedPatient(); as patient) {\n            <div class=\"flex items-center justify-between gap-3 rounded-lg border border-[var(--eds-border-subtle,#e4e4e7)] bg-[var(--eds-surface-muted,#f8fafc)] px-3 py-3\">\n              <div class=\"flex min-w-0 flex-col gap-1\">\n                <strong>{{ patient.fullName }}</strong>\n                <span class=\"dial-form__chip-meta text-xs\">\n                  @if (patient.phone) {\n                    {{ patient.phone }}\n                  }\n                  @if (patient.dob) {\n                    \u00B7 DOB {{ patient.dob }}\n                  }\n                </span>\n              </div>\n              <button type=\"button\" class=\"dial-form__chip-clear shrink-0 cursor-pointer border-none bg-transparent p-1 text-[13px] font-[inherit]\" (click)=\"clearPatient()\">\n                Change\n              </button>\n            </div>\n          } @else {\n            <input\n              type=\"search\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [ngModel]=\"patientQuery\"\n              (ngModelChange)=\"onPatientQueryChange($event)\"\n              name=\"patientQuery\"\n              placeholder=\"Search by name or phone\"\n              autocomplete=\"off\"\n             />\n            @if (searchingPatients()) {\n              <span class=\"dial-form__hint text-xs\">Searching\u2026</span>\n            }\n            @if (patientHits().length) {\n              <ul class=\"dial-form__hits absolute left-0 right-0 top-[calc(100%+4px)] z-[5] max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\" role=\"listbox\">\n                @for (hit of patientHits(); track hit.patientId) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      class=\"dial-form__hit flex w-full cursor-pointer flex-col items-start gap-1 border-none border-b px-3 py-3 text-left font-[inherit] last:border-b-0\"\n                      role=\"option\"\n                      (click)=\"selectPatient(hit)\"\n                    >\n                      <span class=\"font-semibold\">{{ hit.fullName }}</span>\n                      <span class=\"dial-form__hit-meta text-xs\">\n                        {{ hit.phone || 'No phone' }}\n                        @if (hit.dob) {\n                          \u00B7 {{ hit.dob }}\n                        }\n                      </span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          }\n        </div>\n\n        @if (selectedPatient()) {\n          <div class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">Appointment</span>\n            @if (loadingAppointments()) {\n              <span class=\"dial-form__hint text-xs\">Loading appointments\u2026</span>\n            } @else if (!appointments().length) {\n              <span class=\"dial-form__hint text-xs\">No upcoming appointments \u2014 dial without one, or enter details below.</span>\n            } @else {\n              <ul class=\"max-h-[220px] overflow-hidden overflow-y-auto rounded-lg border\">\n                <li>\n                  <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\n                    <input\n                      type=\"radio\"\n                      name=\"appointmentId\"\n                      [checked]=\"!selectedAppointmentId()\"\n                      (change)=\"selectAppointment(null)\"\n                      autocomplete=\"off\"\n                     />\n                    <span>No appointment (purpose-only)</span>\n                  </label>\n                </li>\n                @for (appt of appointments(); track appt.appointmentId) {\n                  <li>\n                    <label class=\"dial-form__appt flex cursor-pointer items-start gap-3 border-b px-3 py-3 last:border-b-0\">\n                      <input\n                        type=\"radio\"\n                        name=\"appointmentId\"\n                        [checked]=\"selectedAppointmentId() === appt.appointmentId\"\n                        (change)=\"selectAppointment(appt)\"\n                        autocomplete=\"off\"\n                       />\n                      <span class=\"flex flex-col gap-1\">\n                        <strong>\n                          {{ appt.startTime ? (appt.startTime | date: 'medium') : 'TBD' }}\n                        </strong>\n                        <span class=\"dial-form__hit-meta text-xs\">\n                          {{ appt.providerName || 'Provider TBD' }}\n                          @if (appt.locationName) {\n                            \u00B7 {{ appt.locationName }}\n                          }\n                          @if (appt.visitType) {\n                            \u00B7 {{ appt.visitType }}\n                          }\n                          @if (appt.status) {\n                            \u00B7 {{ appt.status }}\n                          }\n                        </span>\n                      </span>\n                    </label>\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"dial-form__toggle self-start cursor-pointer border-none bg-transparent p-0 text-[13px] font-[inherit]\"\n          (click)=\"showManualEntry.set(!showManualEntry())\"\n        >\n          {{ showManualEntry() ? 'Hide' : 'Show' }} phone / name\n          @if (!selectedPatient()) {\n            (required if no patient selected)\n          }\n        </button>\n\n        @if (showManualEntry() || !selectedPatient()) {\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">Phone <span class=\"text-[#dc2626]\">*</span></span>\n            <input\n              type=\"tel\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [(ngModel)]=\"phone\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"phone\"\n              placeholder=\"+14155550100\"\n              autocomplete=\"off\"\n              required\n             />\n            <span class=\"dial-form__hint text-xs\">E.164 format, e.g. +14155550100</span>\n          </label>\n\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">Patient name <span class=\"text-[#dc2626]\">*</span></span>\n            <input\n              type=\"text\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [(ngModel)]=\"name\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"name\"\n              placeholder=\"Maria Garcia\"\n              required\n              autocomplete=\"off\"\n             />\n          </label>\n        }\n\n        <label class=\"flex flex-col gap-2\">\n          <span class=\"eds-label\">Purpose <span class=\"text-[#dc2626]\">*</span></span>\n          <select\n            class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n            [(ngModel)]=\"purposeId\"\n            name=\"purposeId\"\n            (ngModelChange)=\"onPurposeChange()\"\n            required\n            autocomplete=\"off\"\n          >\n            @for (p of purposes(); track p.purposeId) {\n              <option [value]=\"p.purposeId\">{{ p.label }}</option>\n            }\n          </select>\n        </label>\n\n        @if (showsField('appointmentDate') && !selectedAppointmentId()) {\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">{{ requiredFieldLabel('appointmentDate') }} <span class=\"text-[#dc2626]\">*</span></span>\n            <input\n              type=\"date\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [(ngModel)]=\"appointmentDate\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"appointmentDate\"\n              required\n              autocomplete=\"off\"\n             />\n          </label>\n        }\n\n        @if (showsField('appointmentTime') && !selectedAppointmentId()) {\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">{{ requiredFieldLabel('appointmentTime') }} <span class=\"text-[#dc2626]\">*</span></span>\n            <input\n              type=\"time\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [(ngModel)]=\"appointmentTime\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"appointmentTime\"\n              required\n              autocomplete=\"off\"\n             />\n          </label>\n        }\n\n        @if (showsField('providerName') && !selectedAppointmentId()) {\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">{{ requiredFieldLabel('providerName') }} <span class=\"text-[#dc2626]\">*</span></span>\n            <input\n              type=\"text\"\n              class=\"dial-form__input rounded-lg border px-3 py-2 font-[inherit]\"\n              [(ngModel)]=\"providerName\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"providerName\"\n              placeholder=\"Dr. Patel\"\n              required\n              autocomplete=\"off\"\n             />\n          </label>\n        }\n\n        @if (selectedAppointmentId() && (showsField('appointmentDate') || showsField('appointmentTime') || showsField('providerName'))) {\n          <p class=\"dial-form__hint text-xs\">\n            Date, time, and provider are taken from the selected appointment\n            @if (appointmentDate || appointmentTime || providerName) {\n              ({{ appointmentDate }}\n              @if (appointmentTime) {\n                {{ appointmentTime }}\n              }\n              @if (providerName) {\n                \u00B7 {{ providerName }}\n              })\n            }.\n          </p>\n        }\n\n        @if (showsCustomScript()) {\n          <label class=\"flex flex-col gap-2\">\n            <span class=\"eds-label\">\n              Custom script\n              @if (customScriptRequired()) {\n                <span class=\"text-[#dc2626]\">*</span>\n              }\n            </span>\n            <textarea\n              class=\"dial-form__textarea resize-y rounded-lg border px-3 py-2 font-[inherit]\"\n              rows=\"4\"\n              [(ngModel)]=\"customScript\"\n              (ngModelChange)=\"touchForm()\"\n              name=\"customScript\"\n              [required]=\"customScriptRequired()\"\n              placeholder=\"What should the agent say or do?\"\n              autocomplete=\"off\"\n            ></textarea>\n          </label>\n        }\n\n        <section class=\"dial-form__preview eds-card rounded-lg p-3 shadow-sm\">\n          <h3 class=\"eds-label\">Opening preview</h3>\n          <p class=\"dial-form__preview-text mt-2 whitespace-pre-wrap text-sm leading-normal\">{{ previewText }}</p>\n          @if (selectedAppointmentId()) {\n            <p class=\"dial-form__hint text-xs\">\n              Filled from the selected appointment and purpose template. Switch purpose to change the script.\n            </p>\n          } @else {\n            <p class=\"dial-form__hint text-xs\">\n              Select an appointment to fill date, time, and provider into this message.\n            </p>\n          }\n        </section>\n\n        @if (serverError()) {\n          <p class=\"m-0 text-[13px] text-[#b91c1c]\" role=\"alert\">{{ serverError() }}</p>\n        }\n\n        <footer class=\"mt-1 flex justify-end gap-2\">\n          <eds-button variant=\"secondary\" type=\"button\" (click)=\"close()\" [disabled]=\"submitting()\">\n            Cancel\n          </eds-button>\n          <eds-button variant=\"primary\" type=\"submit\" [disabled]=\"submitting() || !canPlaceCall()\">\n            {{ submitting() ? 'Dialing\u2026' : 'Place call' }}\n          </eds-button>\n        </footer>\n      </form>\n    }\n  </app-modal>\n}\n", styles: [".dial-form__input,.dial-form__textarea{border-color:var(--eds-border-subtle, #e4e4e7)}.dial-form__hint{color:var(--eds-text-secondary)}.dial-form__chip-clear{color:var(--eds-primary, #2563eb)}.dial-form__chip-meta,.dial-form__hit-meta{color:var(--eds-text-secondary)}.dial-form__hits,.dial-form__appts{list-style:none;margin:0;padding:0;border-color:var(--eds-border-subtle, #e4e4e7)}.dial-form__hits{background:var(--eds-surface, #fff);box-shadow:0 8px 24px #0f172a1f}.dial-form__hit{background:transparent;border-bottom-color:var(--eds-border-subtle, #f1f5f9)}.dial-form__hit:hover{background:var(--eds-surface-muted, #f8fafc)}.dial-form__appt{border-bottom-color:var(--eds-border-subtle, #f1f5f9)}.dial-form__toggle{color:var(--eds-primary, #2563eb)}.dial-form__preview{background:var(--eds-surface-muted, #f8fafc)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], dialed: [{
+                type: Output
+            }] } });
+
+class DashboardPageComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.liveCallsList = inject(LiveCallsListService);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.data = signal(null);
+        this.loading = signal(true);
+        this.liveCalls = this.liveCallsList.calls;
+        this.liveCallsLoading = this.liveCallsList.loading;
+        this.liveCallsError = this.liveCallsList.error;
+        this.outboundOpen = signal(false);
+        this.statTiles = [
+            { key: 'activeCalls', label: 'Live calls', icon: 'graphic_eq' },
+            { key: 'answeredToday', label: 'Calls today', icon: 'call' },
+            { key: 'tasksCreated', label: 'Open tasks', icon: 'task_alt' },
+            {
+                key: 'appointmentsBooked',
+                label: 'Appointments booked',
+                icon: 'event_available',
+            },
+            { key: 'completionRate', label: 'AI handled', icon: 'trending_up', suffix: '%' },
+        ];
+        this.isNeedsReview = isNeedsReview;
+        this.callerMetaLine = callerMetaLine;
+        this.resultChipIcon = resultChipIcon;
+        this.historyResultChips = historyResultChips;
+        this.historyResolutionLabel = historyResolutionLabel;
+    }
+    ngOnInit() {
+        this.liveCallsList.start();
+        this.api.getDashboard().subscribe(({ data }) => {
+            this.data.set(data);
+            this.loading.set(false);
+        });
+    }
+    ngOnDestroy() {
+        this.liveCallsList.stop();
+    }
+    statValue(key) {
+        if (key === 'activeCalls') {
+            return this.liveCallsList.calls().length;
+        }
+        return this.data()?.stats[key] ?? 0;
+    }
+    statusTone(status) {
+        const normalized = status || 'ai';
+        const map = {
+            ai: 'brand',
+            'needs-help': 'notice',
+            'human-requested': 'violet',
+            urgent: 'neg',
+            takeover: 'violet',
+            transferring: 'notice',
+        };
+        return map[normalized] ?? 'brand';
+    }
+    statusLabel(status) {
+        return status || 'ai';
+    }
+    historyAvatarTone(row) {
+        if (!row.name?.trim() || /^unknown/i.test(row.name) || row.initials === '?')
+            return 'gray';
+        return 'brand';
+    }
+    resolutionOf(row) {
+        return historyResolution({ outcome: row.outcome, risk: row.risk });
+    }
+    formatDuration(sec) {
+        const m = Math.floor(sec / 60);
+        const s = sec % 60;
+        return `${m}:${s.toString().padStart(2, '0')}`;
+    }
+    exportCsv() {
+        // mock export
+    }
+    openOutboundDial() {
+        this.outboundOpen.set(true);
+    }
+    closeOutboundDial() {
+        this.outboundOpen.set(false);
+    }
+    openHistoryDetail(id) {
+        void this.router.navigate(['../history', id], { relativeTo: this.route });
+    }
+    callDetailLink(callId) {
+        return ['../history', callId];
+    }
+    appointmentDetailLink(callId) {
+        return callId ? ['../history', callId] : ['../history'];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DashboardPageComponent, isStandalone: true, selector: "eds-dashboard-page", ngImport: i0, template: "<div class=\"eds-page dashboard-page\">\n  <header class=\"mb-6 flex items-start justify-between gap-4\">\n    <div>\n      <h1 class=\"eds-h1\">Dashboard</h1>\n      <p class=\"eds-body-sm\">AI receptionist overview and live activity</p>\n    </div>\n    <div class=\"flex shrink-0 gap-2\">\n      <eds-button variant=\"secondary\" (click)=\"exportCsv()\">\n        <eds-icon name=\"download\" [size]=\"18\" /> Export\n      </eds-button>\n      <eds-button variant=\"primary\" (click)=\"openOutboundDial()\">\n        <eds-icon name=\"call_made\" [size]=\"18\" /> New outbound call\n      </eds-button>\n    </div>\n  </header>\n\n  @if (loading()) {\n    <p class=\"eds-body-sm\">Loading dashboard\u2026</p>\n  } @else if (data()) {\n    <section class=\"mb-5 grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5\">\n      @for (tile of statTiles; track tile.key) {\n        @if (tile.key === 'appointmentsBooked') {\n          <a routerLink=\"../appointments\" class=\"eds-card flex cursor-pointer flex-col gap-2 p-4 no-underline text-inherit transition-colors hover:border-blue-600 shadow-sm\">\n            <eds-icon [name]=\"tile.icon\" [size]=\"22\" />\n            <span class=\"eds-label\">{{ tile.label }}</span>\n            <span class=\"text-3xl font-semibold tracking-tight text-zinc-900\">\n              {{ statValue(tile.key) }}{{ tile.suffix ?? '' }}\n            </span>\n          </a>\n        } @else if (tile.key === 'activeCalls') {\n          <a routerLink=\"../live\" class=\"eds-card flex cursor-pointer flex-col gap-2 p-4 no-underline text-inherit transition-colors hover:border-blue-600 shadow-sm\">\n            <eds-icon [name]=\"tile.icon\" [size]=\"22\" />\n            <span class=\"eds-label\">{{ tile.label }}</span>\n            <span class=\"text-3xl font-semibold tracking-tight text-zinc-900\">\n              {{ statValue(tile.key) }}{{ tile.suffix ?? '' }}\n            </span>\n          </a>\n        } @else {\n          <article class=\"eds-card flex flex-col gap-2 p-4 shadow-sm\">\n            <eds-icon [name]=\"tile.icon\" [size]=\"22\" />\n            <span class=\"eds-label\">{{ tile.label }}</span>\n            <span class=\"text-3xl font-semibold tracking-tight text-zinc-900\">\n              {{ statValue(tile.key) }}{{ tile.suffix ?? '' }}\n            </span>\n          </article>\n        }\n      }\n    </section>\n\n    <section class=\"mb-5 grid grid-cols-1 gap-4 lg:grid-cols-3\">\n      <article class=\"eds-card p-4 shadow-sm\">\n        <header class=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 class=\"eds-h2\">Live calls</h2>\n          <eds-pulse-dot />\n        </header>\n        <ul class=\"m-0 flex list-none flex-col gap-2 p-0\">\n          @if (liveCallsError()) {\n            <li class=\"eds-body-sm\" role=\"alert\">{{ liveCallsError() }}</li>\n          }\n          @if (liveCallsLoading() && liveCalls().length === 0) {\n            <li class=\"eds-body-sm\">Loading live calls\u2026</li>\n          }\n          @for (call of liveCalls(); track call.id) {\n            <li>\n              <a [routerLink]=\"['../live', call.id]\" class=\"grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-md p-2 no-underline text-inherit hover:bg-zinc-50\">\n                <eds-avatar [initials]=\"call.initials\" tone=\"brand\" />\n                <div class=\"flex min-w-0 flex-col\">\n                  <span class=\"eds-body-sm-bold\">{{ call.name }}</span>\n                  <span class=\"eds-body-sm\">{{ call.reason }}</span>\n                </div>\n                <span class=\"eds-mono-sm\">{{ call.started | edsElapsed }}</span>\n              </a>\n            </li>\n          } @empty {\n            @if (!liveCallsLoading()) {\n              <li class=\"eds-body-sm\">No active calls right now.</li>\n            }\n          }\n        </ul>\n      </article>\n\n      <article class=\"eds-card p-4 shadow-sm\">\n        <header class=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 class=\"eds-h2\">Tasks created</h2>\n          <a routerLink=\"../tasks\" class=\"eds-body-sm\">View all</a>\n        </header>\n        <ul class=\"m-0 flex list-none flex-col gap-2 p-0\">\n          @for (task of data()!.latestTasks; track task.id) {\n            <li class=\"border-b border-zinc-200 last:border-b-0\">\n              <a\n                [routerLink]=\"task.callId ? callDetailLink(task.callId) : ['../tasks']\"\n                class=\"grid grid-cols-[1fr_auto] items-center gap-3 rounded-md p-2 no-underline text-inherit hover:bg-zinc-50\"\n                [attr.aria-label]=\"'View task: ' + task.title\"\n              >\n                <div>\n                  <span class=\"eds-body-sm-bold\">{{ task.title }}</span>\n                  <span class=\"eds-body-sm\">\n                    {{ task.patient }} \u00B7 {{ task.created | date: 'short' }}\n                  </span>\n                </div>\n                <eds-icon name=\"chevron_right\" [size]=\"20\" />\n              </a>\n            </li>\n          } @empty {\n            <li class=\"eds-body-sm\">No AI-created tasks yet.</li>\n          }\n        </ul>\n      </article>\n\n      <article class=\"eds-card p-4 shadow-sm\">\n        <header class=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 class=\"eds-h2\">Appointments created</h2>\n          <a routerLink=\"../appointments\" class=\"eds-body-sm\">View all</a>\n        </header>\n        <ul class=\"m-0 flex list-none flex-col gap-2 p-0\">\n          @for (appointment of data()!.latestAppointments; track appointment.id) {\n            <li class=\"border-b border-zinc-200 last:border-b-0\">\n              <a\n                [routerLink]=\"appointmentDetailLink(appointment.callId)\"\n                class=\"grid grid-cols-[1fr_auto] items-center gap-3 rounded-md p-2 no-underline text-inherit hover:bg-zinc-50\"\n                [attr.aria-label]=\"'View appointment for ' + appointment.patientName\"\n              >\n                <div>\n                  <span class=\"eds-body-sm-bold\">{{ appointment.patientName }}</span>\n                  <span class=\"eds-body-sm\">\n                    {{ appointment.providerName ?? 'Provider not assigned' }}\n                    \u00B7 {{ appointment.startTime ? (appointment.startTime | date: 'short') : 'Time pending' }}\n                  </span>\n                </div>\n                <eds-icon name=\"chevron_right\" [size]=\"20\" />\n              </a>\n            </li>\n          } @empty {\n            <li class=\"eds-body-sm\">No AI-booked appointments yet.</li>\n          }\n        </ul>\n      </article>\n\n    </section>\n\n    <article class=\"eds-card overflow-x-auto p-4 shadow-sm\">\n      <header class=\"mb-3 flex items-center justify-between gap-2\">\n        <h2 class=\"eds-h2\">Recent Call History</h2>\n        <a routerLink=\"../history\" class=\"eds-body-sm\">View all</a>\n      </header>\n      <div class=\"overflow-x-auto\">\n        <table class=\"w-full min-w-5xl border-collapse\">\n          <thead>\n            <tr>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Time</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Patient/Caller</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\"></th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Goal Timeline</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Handled By</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Resolution</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Result</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Duration</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Reviewed</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of data()!.recentHistory; track row.id) {\n              <tr\n                class=\"cursor-pointer hover:[&>td]:bg-zinc-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-600\"\n                [class.dashboard-page__history-row--needs-review]=\"isNeedsReview(row.review)\"\n                tabindex=\"0\"\n                role=\"link\"\n                [attr.aria-label]=\"'View call details for ' + row.name\"\n                (click)=\"openHistoryDetail(row.id)\"\n                (keyup.enter)=\"openHistoryDetail(row.id)\"\n              >\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <div class=\"flex flex-col gap-1 whitespace-nowrap\">\n                    @if (row.started) {\n                      <span class=\"text-sm font-semibold\">{{ row.started | date: 'shortTime' }}</span>\n                      <span class=\"text-xs text-zinc-500\">{{ row.started | date: 'MMM d, y' }}</span>\n                    } @else {\n                      <span class=\"text-sm font-semibold\">{{ row.whenLabel || '\u2014' }}</span>\n                    }\n                  </div>\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <div class=\"flex min-w-52 items-center gap-3\">\n                    <eds-avatar\n                      class=\"dashboard-page__avatar\"\n                      [initials]=\"row.initials || '?'\"\n                      [tone]=\"historyAvatarTone(row)\"\n                     />\n                    <div class=\"flex min-w-0 flex-col gap-1\">\n                      <span class=\"text-sm font-semibold text-zinc-900\">{{ row.name || 'Unknown Caller' }}</span>\n                      <span class=\"whitespace-nowrap text-xs text-zinc-500\">\n                        {{\n                          callerMetaLine({\n                            dob: row.dob,\n                            age: row.age,\n                            gender: row.gender,\n                            phone: row.phone,\n                            name: row.name,\n                          })\n                        }}\n                      </span>\n                    </div>\n                  </div>\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <span\n                    class=\"inline-flex h-7 w-7 items-center justify-center rounded-lg\"\n                    [class.bg-blue-50]=\"row.direction === 'inbound'\"\n                    [class.text-blue-600]=\"row.direction === 'inbound'\"\n                    [class.bg-violet-50]=\"row.direction === 'outbound'\"\n                    [class.text-violet-600]=\"row.direction === 'outbound'\"\n                    [attr.title]=\"row.direction === 'inbound' ? 'Inbound' : 'Outbound'\"\n                  >\n                    <eds-icon\n                      [name]=\"row.direction === 'inbound' ? 'call_received' : 'call_made'\"\n                      [size]=\"16\"\n                     />\n                  </span>\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <span class=\"text-sm text-zinc-700\">{{ row.reason || '\u2014' }}</span>\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <span\n                    class=\"inline-flex items-center rounded-md px-2 py-1 text-xs font-medium\"\n                    [class.bg-violet-50]=\"(row.handledBy || 'ai') === 'ai'\"\n                    [class.text-violet-600]=\"(row.handledBy || 'ai') === 'ai'\"\n                    [class.bg-blue-50]=\"row.handledBy === 'staff'\"\n                    [class.text-blue-600]=\"row.handledBy === 'staff'\"\n                  >\n                    {{ row.handledBy === 'staff' ? 'STAFF' : 'AI' }}\n                  </span>\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  @if (resolutionOf(row); as resolution) {\n                    <span\n                      class=\"inline-flex items-center whitespace-nowrap rounded-full px-3 py-1 text-xs font-medium\"\n                      [class.bg-emerald-50]=\"resolution === 'resolved'\"\n                      [class.text-emerald-700]=\"resolution === 'resolved'\"\n                      [class.bg-orange-50]=\"resolution === 'needs_attention'\"\n                      [class.text-orange-700]=\"resolution === 'needs_attention'\"\n                    >\n                      {{ historyResolutionLabel(resolution) }}\n                    </span>\n                  }\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <div class=\"flex max-w-64 flex-wrap gap-2\">\n                    @for (chip of historyResultChips(row.results, row.outcome); track chip) {\n                      <span class=\"inline-flex items-center gap-1 whitespace-nowrap rounded-md bg-zinc-100 px-2 py-1 text-xs font-medium text-zinc-600\">\n                        <eds-icon [name]=\"resultChipIcon(chip)\" [size]=\"14\" />\n                        {{ chip }}\n                      </span>\n                    } @empty {\n                      <span class=\"text-sm text-zinc-500\">\u2014</span>\n                    }\n                  </div>\n                </td>\n\n                <td class=\"whitespace-nowrap border-b border-slate-100 px-4 py-4 align-middle text-sm tabular-nums text-zinc-700\">\n                  {{ row.durationLabel ?? formatDuration(row.duration) }}\n                </td>\n\n                <td class=\"w-14 border-b border-slate-100 px-4 py-4 text-center align-middle text-sm text-zinc-900\">\n                  @if (row.review === 'reviewed') {\n                    <span class=\"inline-flex text-green-600\" title=\"Reviewed\">\n                      <eds-icon name=\"check_circle\" [size]=\"20\" />\n                    </span>\n                  }\n                </td>\n              </tr>\n            } @empty {\n              <tr>\n                <td colspan=\"9\" class=\"px-4 py-4 text-sm text-zinc-500\">No recent calls.</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </article>\n  }\n</div>\n\n<eds-outbound-dial-modal\n  [open]=\"outboundOpen()\"\n  (closed)=\"closeOutboundDial()\"\n  (dialed)=\"closeOutboundDial()\"\n/>\n", styles: [".dashboard-page__history-row--needs-review td:first-child{box-shadow:inset 3px 0 #f59e0b}.dashboard-page__avatar ::ng-deep .eds-avatar{width:36px;height:36px;border-radius:10px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: EdsAvatarComponent, selector: "eds-avatar", inputs: ["initials", "tone", "shape", "gradient"] }, { kind: "component", type: EdsButtonComponent, selector: "eds-button", inputs: ["variant", "type", "disabled"] }, { kind: "component", type: EdsIconComponent, selector: "eds-icon", inputs: ["name", "size", "fill", "weight"] }, { kind: "component", type: EdsPulseDotComponent, selector: "eds-pulse-dot" }, { kind: "pipe", type: EdsElapsedPipe, name: "edsElapsed" }, { kind: "component", type: OutboundDialModalComponent, selector: "eds-outbound-dial-modal", inputs: ["open"], outputs: ["closed", "dialed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-dashboard-page', imports: [
+                        RouterLink,
+                        DatePipe,
+                        EdsAvatarComponent,
+                        EdsButtonComponent,
+                        EdsIconComponent,
+                        EdsPulseDotComponent,
+                        EdsElapsedPipe,
+                        OutboundDialModalComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"eds-page dashboard-page\">\n  <header class=\"mb-6 flex items-start justify-between gap-4\">\n    <div>\n      <h1 class=\"eds-h1\">Dashboard</h1>\n      <p class=\"eds-body-sm\">AI receptionist overview and live activity</p>\n    </div>\n    <div class=\"flex shrink-0 gap-2\">\n      <eds-button variant=\"secondary\" (click)=\"exportCsv()\">\n        <eds-icon name=\"download\" [size]=\"18\" /> Export\n      </eds-button>\n      <eds-button variant=\"primary\" (click)=\"openOutboundDial()\">\n        <eds-icon name=\"call_made\" [size]=\"18\" /> New outbound call\n      </eds-button>\n    </div>\n  </header>\n\n  @if (loading()) {\n    <p class=\"eds-body-sm\">Loading dashboard\u2026</p>\n  } @else if (data()) {\n    <section class=\"mb-5 grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5\">\n      @for (tile of statTiles; track tile.key) {\n        @if (tile.key === 'appointmentsBooked') {\n          <a routerLink=\"../appointments\" class=\"eds-card flex cursor-pointer flex-col gap-2 p-4 no-underline text-inherit transition-colors hover:border-blue-600 shadow-sm\">\n            <eds-icon [name]=\"tile.icon\" [size]=\"22\" />\n            <span class=\"eds-label\">{{ tile.label }}</span>\n            <span class=\"text-3xl font-semibold tracking-tight text-zinc-900\">\n              {{ statValue(tile.key) }}{{ tile.suffix ?? '' }}\n            </span>\n          </a>\n        } @else if (tile.key === 'activeCalls') {\n          <a routerLink=\"../live\" class=\"eds-card flex cursor-pointer flex-col gap-2 p-4 no-underline text-inherit transition-colors hover:border-blue-600 shadow-sm\">\n            <eds-icon [name]=\"tile.icon\" [size]=\"22\" />\n            <span class=\"eds-label\">{{ tile.label }}</span>\n            <span class=\"text-3xl font-semibold tracking-tight text-zinc-900\">\n              {{ statValue(tile.key) }}{{ tile.suffix ?? '' }}\n            </span>\n          </a>\n        } @else {\n          <article class=\"eds-card flex flex-col gap-2 p-4 shadow-sm\">\n            <eds-icon [name]=\"tile.icon\" [size]=\"22\" />\n            <span class=\"eds-label\">{{ tile.label }}</span>\n            <span class=\"text-3xl font-semibold tracking-tight text-zinc-900\">\n              {{ statValue(tile.key) }}{{ tile.suffix ?? '' }}\n            </span>\n          </article>\n        }\n      }\n    </section>\n\n    <section class=\"mb-5 grid grid-cols-1 gap-4 lg:grid-cols-3\">\n      <article class=\"eds-card p-4 shadow-sm\">\n        <header class=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 class=\"eds-h2\">Live calls</h2>\n          <eds-pulse-dot />\n        </header>\n        <ul class=\"m-0 flex list-none flex-col gap-2 p-0\">\n          @if (liveCallsError()) {\n            <li class=\"eds-body-sm\" role=\"alert\">{{ liveCallsError() }}</li>\n          }\n          @if (liveCallsLoading() && liveCalls().length === 0) {\n            <li class=\"eds-body-sm\">Loading live calls\u2026</li>\n          }\n          @for (call of liveCalls(); track call.id) {\n            <li>\n              <a [routerLink]=\"['../live', call.id]\" class=\"grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-md p-2 no-underline text-inherit hover:bg-zinc-50\">\n                <eds-avatar [initials]=\"call.initials\" tone=\"brand\" />\n                <div class=\"flex min-w-0 flex-col\">\n                  <span class=\"eds-body-sm-bold\">{{ call.name }}</span>\n                  <span class=\"eds-body-sm\">{{ call.reason }}</span>\n                </div>\n                <span class=\"eds-mono-sm\">{{ call.started | edsElapsed }}</span>\n              </a>\n            </li>\n          } @empty {\n            @if (!liveCallsLoading()) {\n              <li class=\"eds-body-sm\">No active calls right now.</li>\n            }\n          }\n        </ul>\n      </article>\n\n      <article class=\"eds-card p-4 shadow-sm\">\n        <header class=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 class=\"eds-h2\">Tasks created</h2>\n          <a routerLink=\"../tasks\" class=\"eds-body-sm\">View all</a>\n        </header>\n        <ul class=\"m-0 flex list-none flex-col gap-2 p-0\">\n          @for (task of data()!.latestTasks; track task.id) {\n            <li class=\"border-b border-zinc-200 last:border-b-0\">\n              <a\n                [routerLink]=\"task.callId ? callDetailLink(task.callId) : ['../tasks']\"\n                class=\"grid grid-cols-[1fr_auto] items-center gap-3 rounded-md p-2 no-underline text-inherit hover:bg-zinc-50\"\n                [attr.aria-label]=\"'View task: ' + task.title\"\n              >\n                <div>\n                  <span class=\"eds-body-sm-bold\">{{ task.title }}</span>\n                  <span class=\"eds-body-sm\">\n                    {{ task.patient }} \u00B7 {{ task.created | date: 'short' }}\n                  </span>\n                </div>\n                <eds-icon name=\"chevron_right\" [size]=\"20\" />\n              </a>\n            </li>\n          } @empty {\n            <li class=\"eds-body-sm\">No AI-created tasks yet.</li>\n          }\n        </ul>\n      </article>\n\n      <article class=\"eds-card p-4 shadow-sm\">\n        <header class=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 class=\"eds-h2\">Appointments created</h2>\n          <a routerLink=\"../appointments\" class=\"eds-body-sm\">View all</a>\n        </header>\n        <ul class=\"m-0 flex list-none flex-col gap-2 p-0\">\n          @for (appointment of data()!.latestAppointments; track appointment.id) {\n            <li class=\"border-b border-zinc-200 last:border-b-0\">\n              <a\n                [routerLink]=\"appointmentDetailLink(appointment.callId)\"\n                class=\"grid grid-cols-[1fr_auto] items-center gap-3 rounded-md p-2 no-underline text-inherit hover:bg-zinc-50\"\n                [attr.aria-label]=\"'View appointment for ' + appointment.patientName\"\n              >\n                <div>\n                  <span class=\"eds-body-sm-bold\">{{ appointment.patientName }}</span>\n                  <span class=\"eds-body-sm\">\n                    {{ appointment.providerName ?? 'Provider not assigned' }}\n                    \u00B7 {{ appointment.startTime ? (appointment.startTime | date: 'short') : 'Time pending' }}\n                  </span>\n                </div>\n                <eds-icon name=\"chevron_right\" [size]=\"20\" />\n              </a>\n            </li>\n          } @empty {\n            <li class=\"eds-body-sm\">No AI-booked appointments yet.</li>\n          }\n        </ul>\n      </article>\n\n    </section>\n\n    <article class=\"eds-card overflow-x-auto p-4 shadow-sm\">\n      <header class=\"mb-3 flex items-center justify-between gap-2\">\n        <h2 class=\"eds-h2\">Recent Call History</h2>\n        <a routerLink=\"../history\" class=\"eds-body-sm\">View all</a>\n      </header>\n      <div class=\"overflow-x-auto\">\n        <table class=\"w-full min-w-5xl border-collapse\">\n          <thead>\n            <tr>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Time</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Patient/Caller</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\"></th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Goal Timeline</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Handled By</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Resolution</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Result</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Duration</th>\n              <th class=\"whitespace-nowrap border-b border-zinc-200 bg-zinc-100 px-4 py-3 text-left text-sm font-semibold text-zinc-600\">Reviewed</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of data()!.recentHistory; track row.id) {\n              <tr\n                class=\"cursor-pointer hover:[&>td]:bg-zinc-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-600\"\n                [class.dashboard-page__history-row--needs-review]=\"isNeedsReview(row.review)\"\n                tabindex=\"0\"\n                role=\"link\"\n                [attr.aria-label]=\"'View call details for ' + row.name\"\n                (click)=\"openHistoryDetail(row.id)\"\n                (keyup.enter)=\"openHistoryDetail(row.id)\"\n              >\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <div class=\"flex flex-col gap-1 whitespace-nowrap\">\n                    @if (row.started) {\n                      <span class=\"text-sm font-semibold\">{{ row.started | date: 'shortTime' }}</span>\n                      <span class=\"text-xs text-zinc-500\">{{ row.started | date: 'MMM d, y' }}</span>\n                    } @else {\n                      <span class=\"text-sm font-semibold\">{{ row.whenLabel || '\u2014' }}</span>\n                    }\n                  </div>\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <div class=\"flex min-w-52 items-center gap-3\">\n                    <eds-avatar\n                      class=\"dashboard-page__avatar\"\n                      [initials]=\"row.initials || '?'\"\n                      [tone]=\"historyAvatarTone(row)\"\n                     />\n                    <div class=\"flex min-w-0 flex-col gap-1\">\n                      <span class=\"text-sm font-semibold text-zinc-900\">{{ row.name || 'Unknown Caller' }}</span>\n                      <span class=\"whitespace-nowrap text-xs text-zinc-500\">\n                        {{\n                          callerMetaLine({\n                            dob: row.dob,\n                            age: row.age,\n                            gender: row.gender,\n                            phone: row.phone,\n                            name: row.name,\n                          })\n                        }}\n                      </span>\n                    </div>\n                  </div>\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <span\n                    class=\"inline-flex h-7 w-7 items-center justify-center rounded-lg\"\n                    [class.bg-blue-50]=\"row.direction === 'inbound'\"\n                    [class.text-blue-600]=\"row.direction === 'inbound'\"\n                    [class.bg-violet-50]=\"row.direction === 'outbound'\"\n                    [class.text-violet-600]=\"row.direction === 'outbound'\"\n                    [attr.title]=\"row.direction === 'inbound' ? 'Inbound' : 'Outbound'\"\n                  >\n                    <eds-icon\n                      [name]=\"row.direction === 'inbound' ? 'call_received' : 'call_made'\"\n                      [size]=\"16\"\n                     />\n                  </span>\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <span class=\"text-sm text-zinc-700\">{{ row.reason || '\u2014' }}</span>\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <span\n                    class=\"inline-flex items-center rounded-md px-2 py-1 text-xs font-medium\"\n                    [class.bg-violet-50]=\"(row.handledBy || 'ai') === 'ai'\"\n                    [class.text-violet-600]=\"(row.handledBy || 'ai') === 'ai'\"\n                    [class.bg-blue-50]=\"row.handledBy === 'staff'\"\n                    [class.text-blue-600]=\"row.handledBy === 'staff'\"\n                  >\n                    {{ row.handledBy === 'staff' ? 'STAFF' : 'AI' }}\n                  </span>\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  @if (resolutionOf(row); as resolution) {\n                    <span\n                      class=\"inline-flex items-center whitespace-nowrap rounded-full px-3 py-1 text-xs font-medium\"\n                      [class.bg-emerald-50]=\"resolution === 'resolved'\"\n                      [class.text-emerald-700]=\"resolution === 'resolved'\"\n                      [class.bg-orange-50]=\"resolution === 'needs_attention'\"\n                      [class.text-orange-700]=\"resolution === 'needs_attention'\"\n                    >\n                      {{ historyResolutionLabel(resolution) }}\n                    </span>\n                  }\n                </td>\n\n                <td class=\"border-b border-slate-100 px-4 py-4 align-middle text-sm text-zinc-900\">\n                  <div class=\"flex max-w-64 flex-wrap gap-2\">\n                    @for (chip of historyResultChips(row.results, row.outcome); track chip) {\n                      <span class=\"inline-flex items-center gap-1 whitespace-nowrap rounded-md bg-zinc-100 px-2 py-1 text-xs font-medium text-zinc-600\">\n                        <eds-icon [name]=\"resultChipIcon(chip)\" [size]=\"14\" />\n                        {{ chip }}\n                      </span>\n                    } @empty {\n                      <span class=\"text-sm text-zinc-500\">\u2014</span>\n                    }\n                  </div>\n                </td>\n\n                <td class=\"whitespace-nowrap border-b border-slate-100 px-4 py-4 align-middle text-sm tabular-nums text-zinc-700\">\n                  {{ row.durationLabel ?? formatDuration(row.duration) }}\n                </td>\n\n                <td class=\"w-14 border-b border-slate-100 px-4 py-4 text-center align-middle text-sm text-zinc-900\">\n                  @if (row.review === 'reviewed') {\n                    <span class=\"inline-flex text-green-600\" title=\"Reviewed\">\n                      <eds-icon name=\"check_circle\" [size]=\"20\" />\n                    </span>\n                  }\n                </td>\n              </tr>\n            } @empty {\n              <tr>\n                <td colspan=\"9\" class=\"px-4 py-4 text-sm text-zinc-500\">No recent calls.</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </article>\n  }\n</div>\n\n<eds-outbound-dial-modal\n  [open]=\"outboundOpen()\"\n  (closed)=\"closeOutboundDial()\"\n  (dialed)=\"closeOutboundDial()\"\n/>\n", styles: [".dashboard-page__history-row--needs-review td:first-child{box-shadow:inset 3px 0 #f59e0b}.dashboard-page__avatar ::ng-deep .eds-avatar{width:36px;height:36px;border-radius:10px;font-size:12px}\n"] }]
+        }] });
+
+export { DashboardPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-dashboard-page.component-E30a8p3d.mjs.map