✨ Render Circular Odontogram teeth with dynamic Quadrant matching colors

toothmap_frontend/src/App.jsx

@@ -57,6 +57,17 @@ function getRadialStyle(index, isUpper) {
   };
 }
 
+function getToothClasses(fdi, isUpper) {
+  const quad = Math.floor(fdi / 10);
+  switch (quad) {
+    case 1: return `text-blue-300 border-blue-500/60 shadow-[0_0_15px_rgba(59,130,246,0.3)] ${isUpper ? 'bg-gradient-to-b from-blue-500/20 to-blue-500/40' : 'bg-gradient-to-t from-blue-500/20 to-blue-500/40'}`;
+    case 2: return `text-green-300 border-green-500/60 shadow-[0_0_15px_rgba(34,197,94,0.3)] ${isUpper ? 'bg-gradient-to-b from-green-500/20 to-green-500/40' : 'bg-gradient-to-t from-green-500/20 to-green-500/40'}`;
+    case 3: return `text-amber-300 border-amber-500/60 shadow-[0_0_15px_rgba(245,158,11,0.3)] ${isUpper ? 'bg-gradient-to-b from-amber-500/20 to-amber-500/40' : 'bg-gradient-to-t from-amber-500/20 to-amber-500/40'}`;
+    case 4: return `text-red-300 border-red-500/60 shadow-[0_0_15px_rgba(239,68,68,0.3)] ${isUpper ? 'bg-gradient-to-b from-red-500/20 to-red-500/40' : 'bg-gradient-to-t from-red-500/20 to-red-500/40'}`;
+    default: return 'text-purple-300 border-purple-500/60 shadow-[0_0_15px_rgba(168,85,247,0.3)] bg-purple-500/20';
+  }
+}
+
 function computeIoU(b1, b2) {
   const ix = Math.max(b1[0], b2[0]), iy = Math.max(b1[1], b2[1]);
   const iw = Math.min(b1[2], b2[2]) - ix, ih = Math.min(b1[3], b2[3]) - iy;
@@ -331,10 +342,10 @@ export default function App() {
                         return (
                           <div key={t} 
                                style={styleNode.wrapper}
-                               className={`w-9 h-12 rounded-t-sm rounded-b-[16px] flex items-center justify-center text-sm font-bold transition-all shadow-lg ${
+                               className={`w-9 h-12 rounded-t-sm rounded-b-[16px] flex items-center justify-center text-sm font-bold transition-all shadow-lg border ${
                                  uniquePipelineResults.some(r => r.fdi === t) 
-                                 ? 'bg-gradient-to-b from-green-500/20 to-green-500/40 text-green-300 border border-green-500/60 shadow-[0_0_15px_rgba(34,197,94,0.3)]' 
-                                 : 'bg-zinc-800 text-zinc-500 border border-zinc-700/50'
+                                 ? getToothClasses(t, true)
+                                 : 'bg-zinc-800 text-zinc-500 border-zinc-700/50'
                                }`}>
                             <span style={styleNode.text}>{t}</span>
                           </div>
@@ -348,10 +359,10 @@ export default function App() {
                         return (
                           <div key={t} 
                                style={styleNode.wrapper}
-                               className={`w-9 h-12 rounded-b-sm rounded-t-[16px] flex items-center justify-center text-sm font-bold transition-all shadow-lg ${
+                               className={`w-9 h-12 rounded-b-sm rounded-t-[16px] flex items-center justify-center text-sm font-bold transition-all shadow-lg border ${
                                  uniquePipelineResults.some(r => r.fdi === t) 
-                                 ? 'bg-gradient-to-t from-green-500/20 to-green-500/40 text-green-300 border border-green-500/60 shadow-[0_0_15px_rgba(34,197,94,0.3)]' 
-                                 : 'bg-zinc-800 text-zinc-500 border border-zinc-700/50'
+                                 ? getToothClasses(t, false)
+                                 : 'bg-zinc-800 text-zinc-500 border-zinc-700/50'
                                }`}>
                             <span style={styleNode.text}>{t}</span>
                           </div>
@@ -366,9 +377,14 @@ export default function App() {
                   </div>
                   
                   {/* Legend below chart */}
-                  <div className="flex justify-center gap-8 mt-4 text-sm text-zinc-400 font-medium">
-                    <div className="flex items-center gap-2">
-                      <span className="w-4 h-4 rounded-md bg-green-500/30 border-2 border-green-500/60 shadow-[0_0_8px_rgba(34,197,94,0.4)]"></span> 
+                  <div className="flex justify-center gap-10 mt-4 text-sm text-zinc-400 font-medium">
+                    <div className="flex items-center gap-3">
+                      <div className="flex align-center -space-x-1.5 opacity-90">
+                        <span className="w-4 h-4 rounded-full bg-gradient-to-bl from-blue-400 to-blue-600 border border-zinc-900 shadow-sm relative z-40"></span> 
+                        <span className="w-4 h-4 rounded-full bg-gradient-to-bl from-green-400 to-green-600 border border-zinc-900 shadow-sm relative z-30"></span> 
+                        <span className="w-4 h-4 rounded-full bg-gradient-to-bl from-amber-400 to-amber-600 border border-zinc-900 shadow-sm relative z-20"></span> 
+                        <span className="w-4 h-4 rounded-full bg-gradient-to-bl from-red-400 to-red-600 border border-zinc-900 shadow-sm relative z-10"></span> 
+                      </div>
                       Detected Tooth
                     </div>
                     <div className="flex items-center gap-2">