Skip to main content

​
Overview

The Treatment Tracking system provides a complete catalog of dental procedures offered by the clinic. It includes categorization, pricing, duration tracking, and full CRUD operations for managing treatment options.

​
Treatment Data Model

Treatments are defined by the Tratamiento interface in src/app/services/treatment.service.ts: 
export interface Tratamiento {
  id: number;
  nombre: string;       // Treatment name
  categoria: string;    // Treatment category
  descripcion: string;  // Detailed description
  duracion: number;     // Duration in minutes
  precio: number;       // Price in currency units
}

​
Treatment Categories

The system organizes treatments into six main categories:

Preventiva

Preventive care and maintenance procedures

Ortodoncia

Orthodontic treatments and corrections

Cirugía

Surgical procedures and extractions

Estética

Cosmetic dental procedures

Conservadora

Restorative and conservative treatments

Todos

View all treatments across categories

​
Treatment Service

The TreatmentService provides all treatment-related operations:

​
Location

src/app/services/treatment.service.ts

​
Available Methods

getTratamientos()

Returns all treatments in the catalog

addTratamiento(tratamiento)

Adds a new treatment to the catalog

updateTratamiento(tratamiento)

Updates an existing treatment

deleteTratamiento(id)

Removes a treatment from the catalog

​
Service Implementation

@Injectable({
  providedIn: 'root'
})
export class TreatmentService {
  private tratamientos: Tratamiento[] = [
    { 
      id: 1, 
      nombre: 'Limpieza dental', 
      categoria: 'Preventiva', 
      descripcion: 'Limpieza profesional y eliminación de sarro.', 
      duracion: 45, 
      precio: 80 
    },
    { 
      id: 2, 
      nombre: 'Ortodoncia', 
      categoria: 'Ortodoncia', 
      descripcion: 'Corrección de la posición dental con brackets.', 
      duracion: 60, 
      precio: 150 
    },
    // ... more treatments
  ];

  getTratamientos(): Tratamiento[] {
    return this.tratamientos;
  }

  addTratamiento(tratamiento: Omit<Tratamiento, 'id'>) {
    const id = this.tratamientos.length > 0 
      ? Math.max(...this.tratamientos.map(t => t.id)) + 1 
      : 1;
    const newTratamiento = { ...tratamiento, id };
    this.tratamientos.push(newTratamiento);
    return newTratamiento;
  }

  updateTratamiento(tratamiento: Tratamiento) {
    const index = this.tratamientos.findIndex(t => t.id === tratamiento.id);
    if (index !== -1) {
      this.tratamientos[index] = tratamiento;
    }
  }

  deleteTratamiento(id: number) {
    this.tratamientos = this.tratamientos.filter(t => t.id !== id);
  }
}

​
Treatment Component

The main treatment management interface is in src/app/tratamientos/tratamientos.ts:

​
Component Structure

import { Component, inject, OnInit } from '@angular/core';
import { TreatmentService, Tratamiento } from '../services/treatment.service';

@Component({
  selector: 'app-tratamientos',
  imports: [FormsModule, CommonModule],
  templateUrl: './tratamientos.html',
  styleUrl: './tratamientos.css',
})
export class Tratamientos implements OnInit {
  private treatmentService = inject(TreatmentService);

  searchTerm = '';
  selectedCategory = 'Todos';
  categorias = [
    'Todos', 
    'Preventiva', 
    'Ortodoncia', 
    'Cirugía', 
    'Estética', 
    'Conservadora'
  ];

  tratamientos: Tratamiento[] = [];
  showForm = false;
  isEditing = false;
  currentTratamiento: Tratamiento = this.getEmptyTratamiento();

  ngOnInit() {
    this.cargarTratamientos();
  }
}
The component provides powerful filtering capabilities:

​
Combined Filter Implementation

get tratamientosFiltrados(): Tratamiento[] {
  return this.tratamientos.filter(t => {
    const matchSearch = (
      t.nombre?.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      t.descripcion?.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
    const matchCategory = 
      this.selectedCategory === 'Todos' || 
      t.categoria === this.selectedCategory;
    return matchSearch && matchCategory;
  });
}
1

Text Search

Search across treatment names and descriptions
2

Category Filter

Filter by specific treatment category or view all
3

Combined Filtering

Both filters work together for precise results
4

Real-time Updates

Results update instantly as filters change
The filtering is case-insensitive and searches both the treatment name and description fields simultaneously.

​
Managing Treatments

​
Creating New Treatments

getEmptyTratamiento(): Tratamiento {
  return {
    id: 0,
    nombre: '',
    categoria: 'Preventiva',
    descripcion: '',
    duracion: 30,
    precio: 0
  };
}

abrirFormulario(tratamiento?: Tratamiento) {
  if (tratamiento) {
    this.isEditing = true;
    this.currentTratamiento = { ...tratamiento };
  } else {
    this.isEditing = false;
    this.currentTratamiento = this.getEmptyTratamiento();
  }
  this.showForm = true;
}

​
Saving Treatments

guardar() {
  if (this.isEditing) {
    this.treatmentService.updateTratamiento(this.currentTratamiento);
  } else {
    this.treatmentService.addTratamiento(this.currentTratamiento);
  }
  this.cargarTratamientos();
  this.cerrarFormulario();
}

​
Editing Treatments

editar(tratamiento: Tratamiento) {
  this.abrirFormulario(tratamiento);
}

​
Deleting Treatments

eliminar(id: number) {
  if (confirm('¿Estás seguro de que deseas eliminar este tratamiento?')) {
    this.treatmentService.deleteTratamiento(id);
    this.cargarTratamientos();
  }
}
Treatment deletion requires confirmation to prevent accidental data loss. Consider implementing soft deletes for historical records.

​
Default Treatment Catalog

The system comes pre-loaded with common dental treatments:

​
Sample Treatments

[
  { 
    id: 1, 
    nombre: 'Limpieza dental', 
    categoria: 'Preventiva', 
    descripcion: 'Limpieza profesional y eliminación de sarro.', 
    duracion: 45, 
    precio: 80 
  },
  { 
    id: 2, 
    nombre: 'Ortodoncia', 
    categoria: 'Ortodoncia', 
    descripcion: 'Corrección de la posición dental con brackets.', 
    duracion: 60, 
    precio: 150 
  },
  { 
    id: 3, 
    nombre: 'Blanqueamiento', 
    categoria: 'Estética', 
    descripcion: 'Blanqueamiento dental profesional en clínica.', 
    duracion: 90, 
    precio: 200 
  },
  { 
    id: 4, 
    nombre: 'Implante dental', 
    categoria: 'Cirugía', 
    descripcion: 'Colocación de implante de titanio.', 
    duracion: 120, 
    precio: 1200 
  },
  { 
    id: 5, 
    nombre: 'Extracción', 
    categoria: 'Cirugía', 
    descripcion: 'Extracción dental simple o quirúrgica.', 
    duracion: 30, 
    precio: 100 
  }
]

​
Treatment Duration

Duration is tracked in minutes and helps with:
  • Appointment scheduling
  • Resource allocation
  • Time management
  • Patient expectations
Treatment TypeTypical Duration
Limpieza dental45 minutes
Ortodoncia revisión60 minutes
Blanqueamiento90 minutes
Implante dental120 minutes
Extracción simple30 minutes

​
Pricing Management

Treatment prices are stored in the catalog for:
  • Quick appointment estimates
  • Billing preparation
  • Insurance documentation
  • Patient cost transparency
Prices are stored as numeric values without currency symbols, allowing for flexible display formatting based on locale.

​
Routing Configuration

Treatment routes in src/app/app.routes.ts: 
{ 
  path: 'tratamientos', 
  component: Tratamientos, 
  data: { title: 'Gestión de Tratamientos' } 
}

​
Usage Examples

​
Get All Treatments

import { TreatmentService } from './services/treatment.service';

constructor(private treatmentService: TreatmentService) {}

ngOnInit() {
  const allTreatments = this.treatmentService.getTratamientos();
  console.log(`Available treatments: ${allTreatments.length}`);
}

​
Add New Treatment

const newTreatment = {
  nombre: 'Endodoncia',
  categoria: 'Conservadora',
  descripcion: 'Tratamiento de conducto radicular',
  duracion: 90,
  precio: 250
};

this.treatmentService.addTratamiento(newTreatment);

​
Update Treatment Pricing

const treatment = this.treatmentService.getTratamientos()
  .find(t => t.id === 1);

if (treatment) {
  treatment.precio = 90; // Update price
  this.treatmentService.updateTratamiento(treatment);
}

​
Filter by Category

const surgeries = this.treatmentService.getTratamientos()
  .filter(t => t.categoria === 'Cirugía');

console.log(`Surgical procedures available: ${surgeries.length}`);

​
Calculate Total Treatment Cost

const treatmentIds = [1, 3, 5]; // Treatment IDs for a patient
const treatments = this.treatmentService.getTratamientos()
  .filter(t => treatmentIds.includes(t.id));

const totalCost = treatments.reduce((sum, t) => sum + t.precio, 0);
console.log(`Total treatment cost: €${totalCost}`);

​
Integration with Other Features

​
With Appointment Scheduling

  • Treatment duration informs appointment length
  • Treatment names auto-complete in appointment forms
  • Treatment catalog ensures consistent naming

​
With Patient Management

  • Patient treatment history references catalog
  • Treatment descriptions help with patient communication
  • Pricing aids in billing and estimates

​
With Calendar

  • Treatment duration helps visualize appointment blocks
  • Category colors can differentiate appointment types
  • Scheduling conflicts can be detected based on duration

​
Form State Management

// State tracking
showForm = false;              // Controls form visibility
isEditing = false;             // Differentiates create vs update
currentTratamiento: Tratamiento; // Current treatment being edited

// Form lifecycle
abrirFormulario(tratamiento?: Tratamiento) { /* Opens form */ }
cerrarFormulario() { /* Closes and resets form */ }
guardar() { /* Saves treatment */ }

​
Best Practices

Clear Descriptions

Write detailed treatment descriptions for patient understanding

Accurate Duration

Set realistic durations including preparation and cleanup time

Competitive Pricing

Research market rates when setting treatment prices

Regular Updates

Keep catalog current with new procedures and price changes

​
Future Enhancements

  • Multi-language treatment descriptions
  • Treatment procedure images and diagrams
  • Required equipment tracking
  • Staff skill requirements
  • Insurance code mapping
  • Treatment success rate tracking
  • Before/after photo galleries
  • Treatment plan templates
  • Discount and package management
  • Seasonal pricing adjustments

​
Data Persistence

The current implementation uses in-memory storage. For production:
  • Implement backend API integration
  • Add database persistence
  • Include data validation
  • Add error handling
  • Implement data backup

Build docs developers (and LLMs) love

Get started for freeTalk to us