✨ Implement Interactive Dental Odontogram FDI Chart

toothmap_frontend/src/App.jsx

@@ -16,6 +16,9 @@ const MODES = [
 // Distinct colours for FDI quadrants 1-4
 const QUADRANT_COLOURS = ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444'];
 
+const UPPER_TEETH = [18, 17, 16, 15, 14, 13, 12, 11, 21, 22, 23, 24, 25, 26, 27, 28];
+const LOWER_TEETH = [48, 47, 46, 45, 44, 43, 42, 41, 31, 32, 33, 34, 35, 36, 37, 38];
+
 function getColour(fdi) {
   if (!fdi || fdi < 0) return '#a855f7';
   const quad = Math.floor(fdi / 10) - 1;
@@ -230,6 +233,51 @@ export default function App() {
               )}
             </div>
           )}
+
+          {/* Dental FDI Chart (Odontogram) */}
+          {(pipelineResults && mode.includes('pipeline')) && (
+            <div className="bg-zinc-900/60 rounded-xl p-3 border border-zinc-800/80 shadow-inner">
+              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3 text-center">FDI Dental Chart</p>
+              <div className="flex flex-col gap-1.5">
+                {/* Upper Row */}
+                <div className="flex w-full justify-between gap-0.5">
+                  {UPPER_TEETH.map((t, idx) => {
+                    const isLeftQuad = idx < 8; // patient's right is visually on the left
+                    return (
+                    <div key={t} 
+                         className={`flex-1 aspect-[2/3] rounded-[2px] flex items-center justify-center text-[9px] font-bold transition-all ${
+                           pipelineResults.some(r => r.fdi === t) 
+                           ? 'bg-green-500/20 text-green-400 border border-green-500/40 shadow-[0_0_8px_rgba(34,197,94,0.15)]' 
+                           : 'bg-zinc-800 text-zinc-600 border border-zinc-700/40 opacity-70'
+                         } ${isLeftQuad && idx === 7 ? 'mr-1.5' : ''}`}>
+                      {t}
+                    </div>
+                  )})}
+                </div>
+                {/* Divider */}
+                <div className="h-px w-full bg-zinc-800/80" />
+                {/* Lower Row */}
+                <div className="flex w-full justify-between gap-0.5">
+                  {LOWER_TEETH.map((t, idx) => {
+                    const isLeftQuad = idx < 8;
+                    return (
+                    <div key={t} 
+                         className={`flex-1 aspect-[2/3] rounded-[2px] flex items-center justify-center text-[9px] font-bold transition-all ${
+                           pipelineResults.some(r => r.fdi === t) 
+                           ? 'bg-green-500/20 text-green-400 border border-green-500/40 shadow-[0_0_8px_rgba(34,197,94,0.15)]' 
+                           : 'bg-zinc-800 text-zinc-600 border border-zinc-700/40 opacity-70'
+                         } ${isLeftQuad && idx === 7 ? 'mr-1.5' : ''}`}>
+                      {t}
+                    </div>
+                  )})}
+                </div>
+              </div>
+              <div className="flex justify-center gap-4 mt-3 text-[10px] text-zinc-500">
+                <div className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm bg-green-500/20 border border-green-500/40"></span> Present</div>
+                <div className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm bg-zinc-800 border border-zinc-700/40"></span> Missing</div>
+              </div>
+            </div>
+          )}
         </aside>
 
         {/* Canvas */}