Periogram Design Specification

Periogram Design Specification

Date: 2026-06-29 Topic: Periodontogram Contextual UI & Architecture

1. Overview

The Periogram feature upgrades the dental charting experience with a “WOW factor” modern UI. Instead of a standard boring spreadsheet, it uses an interactive anatomical dial for rapid, touch-friendly contextual data entry, accompanied by a real-time, industry-standard summary table below the visual chart.

2. Brand Consistency (Strict Constraints)

• Tokenized UI: Every border, background, and text color must use the ClinicFlow Tailwind token system (e.g., bg-background/80, text-muted-foreground, border-border).
• Glassmorphism: Overlays and popovers will use backdrop-blur-md mixed with semi-transparent background tokens (bg-background/80).
• No Generic Colors: Except for semantic clinical indicators (like crimson for Bleeding and amber for Plaque, which will be defined via custom utility classes or explicit safe hexes mapped to clinical significance, similar to the Odontogram colors).

3. Data Architecture (LATAM Standard)

A robust TypeScript model will hold the session’s periodontal state.

Per-Tooth Metrics

• Mobility (Movilidad): 0, 1, 2, or 3
• Furcation (Furca): 0, 1, 2, or 3

Per-Site Metrics (6 Sites per tooth: Vestibular M/C/D, Lingual M/C/D)

• Recession (Margen Gingival): integer (mm)
• Pocket Depth (Profundidad de Bolsa): integer (mm)
• CAL (Nivel de Inserción Clínica): Auto-calculated (Recession + Pocket Depth)
• Bleeding (Sangrado): boolean
• Plaque (Placa): boolean

4. Component Architecture

1. Periogram.tsx (Main Orchestrator)

   • Manages the PeriogramState.
   • Renders the interactive visual Odontogram chart (configured for periogram mode).
   • Renders the PeriogramDataTable below the chart.
   • Renders the PeriogramDial in a Radix Popover/Dialog when a tooth is clicked.

2. PeriogramDial.tsx (The WOW Factor)

   • A glassmorphic overlay focusing on the selected tooth.
   • Central stylized tooth vector.
   • 6 SiteCluster UI nodes floating around the tooth.
   • Includes a sleek on-screen Numpad for entering depth values instantly without physical keyboard typing.

3. SiteCluster.tsx

   • Displays the current Recession and Pocket values.
   • Includes micro-animated toggles for Bleeding (blood drop icon, subtle crimson glow) and Plaque (amber glow).

4. PeriogramDataTable.tsx

   • A classic, dense, industry-standard grid summarizing the entire mouth.
   • Read-only; it updates in real-time as the dentist uses the Dial.

5. User Flow

1. Dentist clicks the “Periodontograma” tab.
2. The UI switches to the periogram view.
3. Dentist clicks Tooth 16 on the graphical chart.
4. The PeriogramDial pops up.
5. Dentist taps the Mesial-Vestibular node, taps “3” on the numpad for Pocket, taps “Bleeding”.
6. Values instantly reflect in the dial, and in the background, the PeriogramDataTable updates.
7. Dentist closes the dial or clicks “Next Tooth” to rapidly continue.