Skip to main content
BarberApp maintains a complete medical history for each client, recording every completed appointment with diagnosis information. This guide explains how to view, add, and export medical records.

​
Understanding medical records

A medical record in BarberApp consists of:
  • Appointment history: All completed appointments for a specific client
  • Diagnosis information: Details and notes added by the specialist
  • Metadata: Date, time, specialty, and specialist information
  • Optional metrics: Height and weight updates (if recorded)
Data model (diagnosis.model.ts): 
interface Diagnosis {
  details: string;          // Required summary
  anotations?: string;      // Optional additional notes
}

​
For clients: Viewing your history

​
Accessing your medical history

1

Navigate to your history

From your client dashboard, find and click the “Historial de Turnos” (Appointment History) option.
2

View your records

The page displays all your completed appointments in a grid layout.
3

Open specific records

Click “Ver Diagnóstico” (View Diagnosis) on any appointment card to see full details.
Page component: UserMedicalRecordPageComponent (user-record-page.component.ts:33)

​
What you’ll see

Each appointment entry displays:

Service information

  • Specialty icon and name
  • Example: “Haircut”, “Beard Trim”, etc.

Specialist details

  • Specialist’s first and last name
  • Who performed the service

Date

  • When the appointment took place
  • Formatted as localized date

Time

  • Time of the appointment
  • Formatted as localized time
Implementation: user-record-page.component.html:24-55

​
Viewing diagnosis details

Clicking “Ver Diagnóstico” (View Diagnosis) opens a dialog showing:
  • Title: “Resumen” (Summary)
  • Subtitle with full context:
    • Specialist who provided the service
    • Service type
    • Exact date of appointment
Dialog configuration (user-record-page.component.ts:91-121):
  • Uses AppointmentInformDialogComponent
  • Displays diagnosis details and annotations
  • Read-only view for clients

​
Empty state

If you have no completed appointments:
  • Message displayed: “No hay entradas en la historia para mostrar.” (No history entries to display)
  • The grid remains empty until appointments are completed
Implementation: user-record-page.component.html:56-59

​
For specialists: Adding diagnoses

​
When to add a diagnosis

Specialists add diagnosis information when completing an appointment. This happens after the appointment service is finished.
1

Navigate to pending appointment

Go to your appointments list and find a pending appointment.
2

Click 'Completar Turno'

Click the “Completar Turno” (Complete Appointment) button.Component: AppointmentActionsComponent (appointment-actions.component.ts:73-90)
3

Fill diagnosis form

A dialog appears with required and optional fields.
4

Submit the diagnosis

Click “Confirmar” to save the diagnosis and mark the appointment as completed.

​
Diagnosis form fields

The completion dialog (CompleteAppointmentDialogComponent) contains:

​
Required fields

​
details
string
required
Detalle general (General details)
  • Main diagnosis summary
  • Minimum 12 characters
  • Maximum 255 characters
  • Character counter displayed
  • Placeholder: “Completar con el detalle general del resumen.”
Validation: Validators.required, Validators.minLength(12) (complete-appointment-dialog.component.ts:59)

​
Optional fields

​
anotations
string
Otras anotaciones (Other notes)
  • Additional observations or notes
  • Maximum 145 characters
  • Character counter displayed
  • Placeholder: “Completar con anotaciones extras.”
  • Stored as undefined if left empty
​
height
number
Actualizar Altura (Update height)
  • Optional height in centimeters
  • Range: 100-250 cm
  • Used to track client metrics over time
  • Stored as null if not provided
​
weight
number
Actualizar Peso (Update weight)
  • Optional weight in kilograms
  • Range: 30-250 kg
  • Used to track client metrics over time
  • Stored as null if not provided
Form structure (complete-appointment-dialog.component.html:28-115):
  • Responsive layout with proper spacing
  • Real-time character counting
  • Height and weight fields side-by-side

​
Form validation

The completion form validates: ✅ Submit button enabled when:
  • Details field has at least 12 characters
  • Form is valid
❌ Submit button disabled when:
  • Details field is empty or too short
  • Form has validation errors
Implementation (complete-appointment-dialog.component.ts:58-63): 
this.form = this.fb.group({
  details: ['', [Validators.required, Validators.minLength(12)]],
  anotations: [''],
  height: [''],
  weight: [''],
});

​
Data processing

When the form is submitted (complete-appointment-dialog.component.ts:82-98):
  1. Form values are validated
  2. Empty optional fields are converted:
    • Empty anotations → undefined
    • Empty height → null
    • Empty weight → null
  3. Data is emitted to the parent component
  4. Appointment status changes to “completed”
  5. Dialog closes with animation

​
After completion

Once an appointment is marked as completed:
  • It appears in the client’s medical history
  • The diagnosis can be viewed but not edited
  • The appointment can no longer be canceled
  • Clients can rate the appointment (see Ratings & Reviews)

​
Viewing client history (specialists)

Specialists can access any client’s complete medical history:
1

Navigate from appointment

From an appointment details page, click “Ver Historia” (View History).Handler: medicalRecordHandler (appointment-actions.component.ts:145-148)
2

View complete history

You’ll see all completed appointments for that specific client.
3

Review diagnoses

Click any diagnosis to view the full details you or other specialists recorded.
Navigation (appointment-actions.component.ts:145-148): 
this.router.navigate([
  `/dashboard/user-record/${this.appointment.clientId}`
]);

​
PDF generation

​
Downloading appointment receipts

Both clients and specialists can download appointment information as PDF.
PDF generation uses the jsPDF library (appointment-actions.component.ts:26, package.json:33).

​
What’s included in the PDF

The generated PDF contains: Header section:
  • “BarberApp” title (centered, 20pt font)
  • “Comprobante de Turno” (Appointment Receipt) subtitle (16pt)
  • Generation date and preamble text (10pt)
Appointment information:
  • Appointment ID
  • Client full name
  • Specialist full name
  • Service/specialty name
  • Date (localized format)
  • Time (localized format)
  • Current status (Pending/Completed/Canceled)
Footer:
  • Notice recommending arrival 15 minutes early
  • Reference to BarberApp portal for management
Implementation (appointment-actions.component.ts:168-205)

​
Generating the PDF

1

Click 'Descargar en PDF'

From appointment details, click “Descargar en PDF” (Download as PDF).
2

PDF is generated

The system:
  • Creates a new jsPDF document
  • Formats all appointment data
  • Applies proper styling and layout
  • Generates appointment status labels
3

File downloads

The PDF automatically downloads with filename: turno-{appointment-id}.pdf
Code structure (appointment-actions.component.ts:168-216): 
downloadPdfHandler = (): void => {
  const doc = new jsPDF();
  // Add title, description, appointment info
  // Format and layout content
  doc.save(`turno-${appointment.id}.pdf`);
};

​
PDF formatting

The PDF uses a structured layout:
  • Page margins: 20 units from left edge
  • Line spacing: 10 units between fields
  • Text alignment: Centered headers, left-aligned content
  • Font sizes: 20pt (title), 16pt (subtitle), 12pt (content), 10pt (notes)
Helper method (appointment-actions.component.ts:207-216): 
private generatePdfLine(doc: any, y: number, label: string, value: string): number {
  doc.text(label, 20, y);    // Label at x=20
  doc.text(value, 70, y);     // Value at x=70
  return y;                   // Return y position for next line
}

​
Data loading and states

​
Loading medical records

When accessing a client’s medical history:
  1. Route parameter extraction: Client ID from URL (user-record-page.component.ts:78)
  2. Data fetching: Load completed appointments via appointmentFacade.loadCompletedAppointmentsByClientId()
  3. Minimum display time: 1-second minimum to prevent flickering (user-record-page.component.ts:86-88)
  4. Loading indicator: Spinner with “Cargando información…” text
Implementation (user-record-page.component.ts:77-89): 
async ngOnInit() {
  const clientId = this.route.snapshot.paramMap.get('id');
  if (clientId) {
    await this.appointmentFacade.loadCompletedAppointmentsByClientId(clientId);
  }
  setTimeout(() => this.minTimePassed.set(true), 1000);
}

​
Empty vs loading states

  • Shows spinner animation
  • Text: “Cargando información…”
  • Displayed while data is being fetched

​
Back navigation

The medical records page includes smart back navigation (user-record-page.component.ts:56-74):
  • From appointment detail: Returns to “Turno” (Appointment)
  • From client list: Returns to “Turno” (Appointment)
  • From dashboard: Returns to “Perfil” (Profile)
  • Role-specific: Navigates to client or specialist dashboard based on user role

Build docs developers (and LLMs) love

Get started for freeTalk to us