}
{hasCaries &&
{hasCaries &&
}
);
}
// Occlusal view content (premolars + molars only; placeholder for others to keep alignment)
let occlEl;
if (!os) {
occlEl = mkCard(, true);
} else if (base === 'missing' || base === 'extracted') {
occlEl = mkCard();
} else if (base === 'implant') {
occlEl = mkCard(
);
} else {
occlEl = mkCard(
}
{fillClr && tooth.filling!=='none' &&
}
{crownClr &&
}
);
}
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{cursor:'pointer',userSelect:'none'}}>
{isUpper && numEl}
{!isUpper && occlEl}
{lateralEl}
{isUpper && occlEl}
{!isUpper && numEl}
);
}
// ── Section + Surface buttons ─────────────────────────────────────
function OdoSection({ title, open, onToggle, children }) {
return (
{open &&
);
}
function SurfBtns({ surfaces, activeArr, onChange }) {
return (
{children}
}
{surfaces.map(s => {
const on = activeArr && activeArr.includes(s);
return (
);
})}
);
}
// ── Controls panel ────────────────────────────────────────────────
function OdoControls({ teeth, selected, onSetSelected, onUpdateTooth, onApplyGroup }) {
const [openSections, setOpenSections] = React.useState({status:true,detail:true,caries:true,fill:true,root:true,other:false});
const [groupAdd, setGroupAdd] = React.useState(_GROUP_ADD[0].v);
const toggle = (k) => setOpenSections(s => ({...s,[k]:!s[k]}));
const activeNum = selected.length === 1 ? selected[0] : null;
const tooth = activeNum ? (teeth[activeNum] || _odoDefault()) : null;
const multi = selected.length > 1;
const upd = (k, v) => { if (selected.length === 0) return; onUpdateTooth(selected, k, v); };
const toggleSurf = (k, surf) => { if (selected.length === 0) return; onUpdateTooth(selected, k, null, surf); };
const groupBtns = [
{l:'Tümü',g:'all',nums:_ALL},{l:'Üst',g:'upper',nums:_UPPER},{l:'Alt',g:'lower',nums:_LOWER},
{l:'Üst Ön',g:'uf',nums:_UF},{l:'Üst Azı',g:'um',nums:_UM},
{l:'Alt Ön',g:'lf',nums:_LF},{l:'Alt Azı',g:'lm',nums:_LM},
];
const handleGroupAdd = () => {
const v = groupAdd;
let nums = [], props = {};
if (v === 'uf-zirconia') { nums = _UF; props = {crown:'zirconia'}; }
else if (v === 'ua-zirconia') { nums = _UPPER; props = {crown:'zirconia'}; }
else if (v === 'lf-zirconia') { nums = _LF; props = {crown:'zirconia'}; }
else if (v === 'uf-pfm') { nums = _UF; props = {crown:'pfm'}; }
else if (v === 'ua-canal') { nums = _UPPER; props = {root:'canal'}; }
else if (v === 'la-canal') { nums = _LOWER; props = {root:'canal'}; }
Object.entries(props).forEach(([k,val]) => onUpdateTooth(nums, k, val));
};
const CS = {label:{fontSize:11,fontWeight:600,color:'var(--text-mute)',display:'block',marginBottom:4}};
const SC = {card:{flex:'1 1 210px',minWidth:190,maxWidth:360}};
const SEL = {width:'100%',padding:'6px 8px',border:'1px solid var(--line)',borderRadius:7,fontSize:12,fontFamily:'inherit',background:'var(--surface)',color:'var(--text)'};
const isImplant = tooth?.base === 'implant';
return (
{/* Header bar */}
);
}
// ── Modal ─────────────────────────────────────────────────────────
function OdontogramModal({ patient, onUpdate, onClose }) {
const initTeeth = () => {
const saved = patient.odontogram || {};
const res = {};
_ALL.forEach(n => { res[n] = {..._odoDefault(), ...(saved[String(n)] || {})}; });
return res;
};
const [teeth, setTeeth] = React.useState(initTeeth);
const [selected, setSelected] = React.useState([]);
React.useEffect(() => {
const h = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', h);
return () => document.removeEventListener('keydown', h);
}, [onClose]);
const handleSelect = (num, e) => {
if (e.ctrlKey || e.metaKey) {
setSelected(prev => prev.includes(num) ? prev.filter(n => n !== num) : [...prev, num]);
} else {
setSelected(prev => prev.length === 1 && prev[0] === num ? [] : [num]);
}
};
const handleUpdateTooth = (nums, key, value, surfToggle) => {
setTeeth(prev => {
const next = {...prev};
nums.forEach(n => {
const t = {...(next[n] || _odoDefault())};
if (surfToggle !== undefined) {
const arr = [...(t[key] || [])];
const idx = arr.indexOf(surfToggle);
if (idx >= 0) arr.splice(idx, 1); else arr.push(surfToggle);
t[key] = arr;
} else { t[key] = value; }
next[n] = t;
});
return next;
});
};
const handleApplyGroup = (action) => {
setTeeth(prev => {
const next = {...prev};
if (action === 'reset') { _ALL.forEach(n => { next[n] = _odoDefault(); }); }
else if (action === 'milk') { _ALL.forEach(n => { next[n] = {...(next[n]||_odoDefault()), base:'milk'}; }); }
else if (action === 'mixed') {
_UPPER.forEach(n => { next[n] = {...(next[n]||_odoDefault()), base:'permanent'}; });
_LOWER.forEach(n => { next[n] = {...(next[n]||_odoDefault()), base:'milk'}; });
} else if (action === 'edentulous') { _ALL.forEach(n => { next[n] = {...(next[n]||_odoDefault()), base:'missing'}; }); }
return next;
});
};
const handleSave = () => {
const out = {};
Object.entries(teeth).forEach(([k, v]) => { out[k] = v; });
const note = _buildNote(patient.odontogram || {}, teeth);
const notes = (patient.notes || '') + (note || ('\n[' + new Date().toLocaleDateString('tr-TR',{day:'2-digit',month:'2-digit',year:'numeric'}) + '] Odontogram görüntülendi.'));
onUpdate({ odontogram: out, notes });
onClose();
};
const renderRow = (leftTeeth, rightTeeth, isUpper) => (
Kontroller
{/* Sections row */}
Aktif:
{selected.length === 0 && —}
{selected.length === 1 && {selected[0]}}
{selected.length > 1 && {selected.length} diş}
{groupBtns.map(b => (
))}
{/* Durumlar */}
toggle('status')}>
{/* Diş Detayı */}
toggle('detail')}>
{!tooth && !multi &&
{isImplant ? (
{/* Çürük */}
toggle('caries')}>
{!tooth && !multi ? toggleSurf('caries', s)}/>
)}
{/* Dolgu */}
toggle('fill')}>
{!tooth && !multi ? toggleSurf('fillingSurfaces', s)}/>
)}
)}
{/* Kök */}
toggle('root')}>
{!tooth && !multi ?
{/* Periodontoloji */}
toggle('other')}>
{!tooth && !multi ?
{[{k:'fissureSealing',l:'Fissür Sealant'},{k:'pulpInflam',l:'Pulpa İltihap'},{k:'bruxism',l:'Bruksizm Aşınması'}].map(item => (
{/* Legend */}
{[{l:'Sıfırla',a:'reset'},{l:'Süt Dişleri',a:'milk'},{l:'Karışık Dişlenme',a:'mixed'},{l:'Dişsiz',a:'edentulous'}].map(b => (
))}
Bir diş seçin.
} {(tooth || multi) && ( <>
{tooth?.implantCrown && _IMPL_CLR[tooth.implantCrown] && (
) : (
{_IMPL_CROWN_OPTS.find(o=>o.v===tooth.implantCrown)?.l}
)}
{tooth?.crown && _CROWN_CLR[tooth.crown] && (
)}
)}
{_CROWN_OPTS.find(o=>o.v===tooth.crown)?.l}
)}
Bir diş seçin.
: ( <>Çürük yüzey seçin
Bir diş seçin.
: ( <> {tooth?.filling && tooth.filling !== 'none' && ( <>Bir diş seçin.
: ( )}Bir diş seçin.
: ( <>
{item.l}
))}
)}
Renk Göstergesi
{[
{c:'#ef4444',l:'Çürük'},{c:'#3b82f6',l:'Kompozit'},{c:'#64748b',l:'Amalgam'},
{c:'#a78bfa',l:'Seramik'},{c:'#f59e0b',l:'Tam Kron'},{c:'#2B47E8',l:'Zirkonyum/İmplant'},
{c:'#8b5cf6',l:'PFM/Locator'},{c:'#10b981',l:'Fissür'},
].map(i => (
{i.l}
))}
{leftTeeth.map(num => (
handleSelect(num, e)}/>
))}
{rightTeeth.map(num => (
handleSelect(num, e)}/>
))}
);
return (
e.target === e.currentTarget && onClose()}>
);
}
// ── Inline chart (desktop split panel) ───────────────────────────
function OdontogramChart({ patient, onUpdate }) {
const initTeeth = () => {
const saved = patient.odontogram || {};
const res = {};
_ALL.forEach(n => { res[n] = {..._odoDefault(), ...(saved[String(n)] || {})}; });
return res;
};
const [teeth, setTeeth] = React.useState(initTeeth);
const [selected, setSelected] = React.useState([]);
const handleSelect = (num, e) => {
if (e.ctrlKey || e.metaKey) {
setSelected(prev => prev.includes(num) ? prev.filter(n => n !== num) : [...prev, num]);
} else {
setSelected(prev => prev.length === 1 && prev[0] === num ? [] : [num]);
}
};
const handleUpdateTooth = (nums, key, value, surfToggle) => {
setTeeth(prev => {
const next = {...prev};
nums.forEach(n => {
const t = {...(next[n] || _odoDefault())};
if (surfToggle !== undefined) {
const arr = [...(t[key] || [])];
const idx = arr.indexOf(surfToggle);
if (idx >= 0) arr.splice(idx, 1); else arr.push(surfToggle);
t[key] = arr;
} else { t[key] = value; }
next[n] = t;
});
return next;
});
};
const handleApplyGroup = (action) => {
setTeeth(prev => {
const next = {...prev};
if (action === 'reset') { _ALL.forEach(n => { next[n] = _odoDefault(); }); }
else if (action === 'milk') { _ALL.forEach(n => { next[n] = {...(next[n]||_odoDefault()), base:'milk'}; }); }
else if (action === 'mixed') {
_UPPER.forEach(n => { next[n] = {...(next[n]||_odoDefault()), base:'permanent'}; });
_LOWER.forEach(n => { next[n] = {...(next[n]||_odoDefault()), base:'milk'}; });
} else if (action === 'edentulous') { _ALL.forEach(n => { next[n] = {...(next[n]||_odoDefault()), base:'missing'}; }); }
return next;
});
};
const handleSave = () => {
const out = {};
Object.entries(teeth).forEach(([k, v]) => { out[k] = v; });
const note = _buildNote(patient.odontogram || {}, teeth);
const notes = (patient.notes || '') + (note || ('\n[' + new Date().toLocaleDateString('tr-TR',{day:'2-digit',month:'2-digit',year:'numeric'}) + '] Odontogram görüntülendi.'));
onUpdate({ odontogram: out, notes });
};
const renderRow = (leftTeeth, rightTeeth, isUpper) => (
);
}
function OdontogramTab({ patient, onUpdate }) {
return (
);
}
Dental Harita
{patient.name}
Ctrl+click çoklu seçim
Üst Çene
{renderRow(_UR, _UL, true)}
Alt Çene
{renderRow(_LR, _LL, false)}
{leftTeeth.map(num => (
handleSelect(num, e)}/>
))}
{rightTeeth.map(num => (
handleSelect(num, e)}/>
))}
);
return (
Ctrl+click çoklu seçim
Üst Çene
{renderRow(_UR, _UL, true)}
Alt Çene
{renderRow(_LR, _LL, false)}
Dental harita modal olarak açılır.