Interactive Odontogram

First digit = Quadrant (1-4 for adults)
  1 = Upper Right
  2 = Upper Left  
  3 = Lower Left
  4 = Lower Right

Second digit = Tooth position (1-8)
  1 = Central Incisor
  2 = Lateral Incisor
  3 = Canine
  4 = First Premolar
  5 = Second Premolar
  6 = First Molar
  7 = Second Molar
  8 = Third Molar (Wisdom Tooth)

CREATE TABLE odontograms (
    id INT AUTO_INCREMENT PRIMARY KEY,
    patient_id INT NOT NULL,
    tooth_number INT NOT NULL,
    state ENUM('healthy', 'caries', 'restored', 'extracted', 'crown', 'treatment') DEFAULT 'healthy',
    notes TEXT,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (patient_id) REFERENCES patients(id) ON DELETE CASCADE
);

src/lib/components/Odontogram.svelte

let {
  toothStates = $bindable({}),  // Object mapping tooth numbers to states
  readOnly = false,              // Disable editing for view-only mode
  onsubmitted = undefined        // Callback when changes are saved
} = $props();

src/lib/components/Odontology/ToothSVG.svelte

function handleToothClick(toothNumber) {
  if (readOnly) return;
  selectedTooth = toothNumber;
  // Open modal to set general tooth status
  showTreatmentModal = true;
}

function handleSurfaceClick(toothNumber, surface) {
  if (readOnly) return;
  selectedTooth = toothNumber;
  selectedSurface = surface;
  // Open modal with surface pre-selected
  showTreatmentModal = true;
}

{
  "general": "crown",
  "surfaces": {
    "mesial": "restored",
    "distal": "caries",
    "occlusal": "restored",
    "vestibular": "",
    "lingual": ""
  }
}

function parseToothState(stateString) {
  if (!stateString) return { general: '', surfaces: {} };
  
  if (stateString.startsWith('{')) {
    try {
      return JSON.parse(stateString);
    } catch (e) {
      return { general: stateString, surfaces: {} };
    }
  }
  
  // Legacy format: simple string
  return { general: stateString, surfaces: {} };
}

async function saveTreatment() {
  const finalState = JSON.stringify({
    general: treatmentData.generalState,
    surfaces: treatmentData.surfaces
  });
  
  await onsubmitted({
    tooth_number: selectedTooth,
    state: finalState,
    notes: treatmentData.notes
  });
  
  toothStates[selectedTooth] = finalState;
  showTreatmentModal = false;
}

GET /api/patients/{patientId}/odontogram

Response: {
  success: true,
  odontogram: [
    {
      tooth_number: 16,
      state: '{"general":"crown","surfaces":{"occlusal":"restored"}}',
      notes: 'Corona de porcelana colocada hace 2 años',
      updated_at: '2026-02-15T10:30:00Z'
    },
    ...
  ]
}

POST /api/patients/{patientId}/odontogram

Body: {
  tooth_number: number,
  state: string, // JSON string
  notes?: string
}

Response: {
  success: true,
  message: 'Tooth updated'
}

const surfaceColors = {
  '': '#f8fafc',        // Healthy: Very light gray
  'caries': '#fee2e2',  // Red tint
  'restored': '#dbeafe', // Blue tint  
  'sealant': '#fef3c7',  // Yellow tint
  'fracture': '#ffe4e6'  // Pink tint
};

<Odontogram 
  toothStates={patientOdontogram}
  readOnly={!$can('EDIT_ODONTOGRAM')}
/>

src/lib/components/patients/tabs/OdontogramTab.svelte

.odontogram-scroll-area {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.odontogram-canvas {
  min-width: 900px;
  padding: 20px;
}