Interactive Tablet Tooth Chart

Our web-based tooth chart needs a full redesign so dentists can record treatment details in seconds, even while holding a tablet with gloved hands. The refreshed interface should feel intuitive on both iPads and Android tablets, with finger-friendly hit areas, smooth drag-and-tap gestures, and zero lag.

Core actions to support
• Instantly mark tooth conditions—decay, missing teeth, fillings, etc.—with a single tap or swipe.
• Add or update planned treatments directly on the chart and have those changes autosave.

Key expectations
• Responsive layout that adapts fluidly from 8-inch Android devices up to 13-inch iPad Pros.
• Works flawlessly in Safari on iPadOS and Chrome on Android without installing extra apps.
• Clear visual cues (colors, icons, tooltips) so dentists always know which condition or treatment is active.
• Lightweight code (preferably modern JavaScript/TypeScript with SVG or Canvas) to keep load times under two seconds.
• Internationalisation ready: labels pulled from a locale file, no text baked into graphics.

Acceptance criteria
1. Touch interaction passes a gloved-finger usability test on current iPad and Samsung Tab models.
2. All chart edits persist via our existing REST endpoints; no console errors allowed.
3. Accessibility audit scores 90+ in Lighthouse for both mobile and desktop views.
4. Delivered as a pull request to our GitHub repo with clear setup notes and component-level unit tests.

Hand-over includes the full source, build scripts, and a concise README outlining dependencies and deployment steps.