// Sidebar + Topbar + small UI primitives shared across views const useT = () => React.useContext(window.DentI18n); const DEFAULT_PROFILE = (() => { const meta = window._dentUser?.user_metadata || {}; return { name: meta.full_name || "Dr. Mehmet Aydın", specialty: meta.specialty || "Diş Hekimi", email: window._dentUser?.email || "", phone: "" }; })(); function getProfile() { try { return JSON.parse(localStorage.getItem("df_profile_" + (window._dentUser?.id || ""))) || DEFAULT_PROFILE; } catch(e) { return DEFAULT_PROFILE; } } function initials(name) { return (name || "").split(" ").filter(Boolean).map(w => w[0]).slice(0, 2).join("").toUpperCase() || "DR"; } function useProfile() { const [profile, setProfile] = React.useState(getProfile); React.useEffect(() => { const handler = () => setProfile(getProfile()); window.addEventListener("df_profile_updated", handler); return () => window.removeEventListener("df_profile_updated", handler); }, []); return profile; } function Sidebar({ active, onNav, theme, badges = {}, isOpen, onClose, isCollapsed, onToggleCollapse }) { const t = useT(); const I = window.DentIcons; const profile = useProfile(); const trialEnd = new Date(window._dentUser?.user_metadata?.trial_end_date); const daysLeft = Math.ceil((trialEnd - new Date()) / 86400000); const groups = [ { title: t.nav.workspace, items: [ { id: "dashboard", label: t.nav.dashboard, icon: I.Dashboard }, { id: "patients", label: t.nav.patients, icon: I.Patient }, { id: "schedule", label: t.nav.schedule, icon: I.Calendar }, { id: "treatments", label: t.nav.treatments, icon: I.Tooth }, { id: "stock", label: t.nav.stock, icon: I.Stock }, ], }, { title: t.nav.operations, items: [ { id: "clinics", label: t.nav.clinics, icon: I.Clinic }, { id: "finance", label: t.nav.finance, icon: I.Money }, { id: "reports", label: t.nav.reports, icon: I.Chart }, ], }, { title: t.nav.settings, items: [ { id: "settings", label: t.nav.preferences, icon: I.Settings }, { id: "help", label: t.nav.help, icon: I.Help }, ], }, ]; const handleNav = (id) => { onNav(id); if (onClose) onClose(); }; return ( ); } function NotifPanel({ onClose, onNav, notifications, readIds = new Set(), onMarkRead }) { const I = window.DentIcons; const typeIcon = { payment: "₺", appointment: "📅", alert: "⚠" }; const typeColor = { payment: "var(--mint)", appointment: "var(--accent)", alert: "var(--coral)" }; React.useEffect(() => { const handler = (e) => { if (!e.target.closest(".notif-panel") && !e.target.closest(".icon-btn--notif")) onClose(); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); React.useEffect(() => { if (notifications.length > 0 && onMarkRead) { const timer = setTimeout(() => onMarkRead(notifications.map(n => n.id)), 1500); return () => clearTimeout(timer); } }, []); const unreadCount = notifications.filter(n => !readIds.has(n.id)).length; const handleClick = (n) => { if (onMarkRead) onMarkRead([n.id]); if (n.nav) onNav(n.nav); onClose(); }; const markAll = () => { if (onMarkRead) onMarkRead(notifications.map(n => n.id)); }; return (
Bildirimler {unreadCount > 0 ? {unreadCount} yeni : Tümü okundu }
{notifications.length === 0 && (
Bildirim yok
)} {notifications.map(n => { const isUnread = !readIds.has(n.id); return (
handleClick(n)} style={{cursor: n.nav ? "pointer" : "default"}}>
{typeIcon[n.type]}
{n.title}
{n.body}
{n.time}
{isUnread && }
); })}
{unreadCount > 0 && ( )}
); } function ProfileSettingsModal({ onClose }) { const [tab, setTab] = React.useState("info"); const [saved, setSaved] = React.useState(""); const showSaved = (msg) => { setSaved(msg); setTimeout(() => setSaved(""), 2500); }; // --- Profil Bilgileri --- const defaultInfo = DEFAULT_PROFILE; const [info, setInfo] = React.useState(() => { try { return JSON.parse(localStorage.getItem("df_profile_" + (window._dentUser?.id || ""))) || defaultInfo; } catch { return defaultInfo; } }); const setInfoF = (k, v) => setInfo(f => ({ ...f, [k]: v })); // --- Şifre --- const [pwd, setPwd] = React.useState({ current: "", next: "", confirm: "" }); const [pwdErr, setPwdErr] = React.useState(""); const [pwdLoading, setPwdLoading] = React.useState(false); const setPwdF = (k, v) => setPwd(f => ({ ...f, [k]: v })); // --- Bildirimler --- const defaultNotifs = { payment: true, appointment: true, balance: true, weekly: false, sms: false }; const [notifs, setNotifs] = React.useState(() => { try { return JSON.parse(localStorage.getItem("df_notifs")) || defaultNotifs; } catch { return defaultNotifs; } }); const toggleNotif = (k) => setNotifs(f => ({ ...f, [k]: !f[k] })); const handleInfoSave = (e) => { e.preventDefault(); localStorage.setItem("df_profile_" + (window._dentUser?.id || ""), JSON.stringify(info)); window.dispatchEvent(new Event("df_profile_updated")); showSaved("Profil bilgileri kaydedildi."); }; const handlePwdSave = async (e) => { e.preventDefault(); setPwdErr(""); if (pwd.next.length < 8) return setPwdErr("Yeni şifre en az 8 karakter olmalı."); if (!/[A-Z]/.test(pwd.next)) return setPwdErr("Yeni şifre en az bir büyük harf içermeli."); if (!/[0-9]/.test(pwd.next)) return setPwdErr("Yeni şifre en az bir rakam içermeli."); if (pwd.next !== pwd.confirm) return setPwdErr("Şifreler eşleşmiyor."); setPwdLoading(true); const email = window._dentUser?.email; const { error: authErr } = await window._sb.auth.signInWithPassword({ email, password: pwd.current }); if (authErr) { setPwdErr("Mevcut şifre hatalı."); setPwdLoading(false); return; } const { error } = await window._sb.auth.updateUser({ password: pwd.next }); setPwdLoading(false); if (error) return setPwdErr("Şifre güncellenemedi: " + error.message); setPwd({ current: "", next: "", confirm: "" }); showSaved("Şifre başarıyla değiştirildi."); }; const handleNotifSave = (e) => { e.preventDefault(); localStorage.setItem("df_notifs", JSON.stringify(notifs)); showSaved("Bildirim tercihleri kaydedildi."); }; const tabs = [ { id: "info", label: "Profil Bilgileri" }, { id: "password", label: "Şifre" }, { id: "notifs", label: "Bildirimler" }, ]; return (
e.target === e.currentTarget && onClose()}>
Profil Ayarları
{tabs.map(t => ( ))}
{tab === "info" && (
MA
{info.name}
{info.specialty}
setInfoF("name", e.target.value)} required/>
setInfoF("specialty", e.target.value)}/>
setInfoF("email", e.target.value)}/>
setInfoF("phone", e.target.value)}/>
{saved &&
{saved}
}
)} {tab === "password" && (
setPwdF("current", e.target.value)} placeholder="••••••••" required/>
setPwdF("next", e.target.value)} placeholder="••••••••" required/>
setPwdF("confirm", e.target.value)} placeholder="••••••••" required/>
{pwdErr &&
{pwdErr}
}
{saved &&
{saved}
}
)} {tab === "notifs" && (
{[ { key:"payment", label:"Ödeme bildirimleri", desc:"Bekleyen ve geciken ödemeler" }, { key:"appointment", label:"Randevu hatırlatıcıları", desc:"Günlük ve yaklaşan randevular" }, { key:"balance", label:"Kalan bakiye uyarıları", desc:"Yüksek bakiyeli hastalar" }, { key:"weekly", label:"Haftalık özet e-postası", desc:"Her Pazartesi gönderilir" }, { key:"sms", label:"SMS bildirimleri", desc:"Kritik uyarılar için SMS" }, ].map(n => (
{n.label}
{n.desc}
))}
{saved &&
{saved}
}
)}
); } function ProfileMenu({ onClose, onSettings }) { const I = window.DentIcons; const profile = useProfile(); React.useEffect(() => { const handler = (e) => { if (!e.target.closest(".profile-menu") && !e.target.closest(".topbar__profile")) onClose(); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); return (
{initials(profile.name)}
{profile.name || DEFAULT_PROFILE.name}
{profile.specialty || DEFAULT_PROFILE.specialty}
); } function Topbar({ active, onSearch, query, onNav, onQuickAdd, onExport, onToggleSidebar, notifications = [], readNotifIds = new Set(), onMarkNotifsRead }) { const t = useT(); const I = window.DentIcons; const profile = useProfile(); const [showNotif, setShowNotif] = React.useState(false); const [showProfile, setShowProfile] = React.useState(false); const [showProfileSettings, setShowProfileSettings] = React.useState(false); const [searchExpanded, setSearchExpanded] = React.useState(false); const searchInputRef = React.useRef(null); React.useEffect(() => { if (searchExpanded && searchInputRef.current) searchInputRef.current.focus(); }, [searchExpanded]); const crumbMap = { dashboard: [t.nav.workspace, t.nav.dashboard], patients: [t.nav.workspace, t.nav.patients], schedule: [t.nav.workspace, t.nav.schedule], treatments: [t.nav.workspace, t.nav.treatments], stock: [t.nav.workspace, t.nav.stock], clinics: [t.nav.operations, t.nav.clinics], finance: [t.nav.operations, t.nav.finance], reports: [t.nav.operations, t.nav.reports], settings: [t.nav.settings, t.nav.preferences], help: [t.nav.settings, t.nav.help], }; const crumb = crumbMap[active] || []; return (
{crumb.map((c, i) => ( {c} {i < crumb.length - 1 && /} ))}
setSearchExpanded(true) : undefined} style={!searchExpanded ? {cursor: "pointer"} : {}} > onSearch(e.target.value)} placeholder={t.topbar.search} onKeyDown={(e) => e.key === "Escape" && (setSearchExpanded(false), onSearch(""))} /> {searchExpanded ? : ⌘K }
{showNotif && setShowNotif(false)} onNav={onNav} notifications={notifications} readIds={readNotifIds} onMarkRead={onMarkNotifsRead}/>}
setShowProfile(v => !v)} style={{cursor:"pointer"}}>
{initials(profile.name)}
{profile.name || DEFAULT_PROFILE.name}
{t.topbar.today}, {new Date().toLocaleDateString("tr-TR", { day:"numeric", month:"long", year:"numeric" })}
{showProfile && setShowProfile(false)} onSettings={() => setShowProfileSettings(true)}/>} {showProfileSettings && setShowProfileSettings(false)}/>}
); } // ──── Small primitives ──── const fmtTRY = (n, opts = {}) => new Intl.NumberFormat("tr-TR", { style: "currency", currency: "TRY", maximumFractionDigits: 0, ...opts }).format(n); const fmtDate = (d, locale = "tr") => { const date = typeof d === "string" ? new Date(d) : d; const months = locale === "tr" ? ["Oca", "Şub", "Mar", "Nis", "May", "Haz", "Tem", "Ağu", "Eyl", "Eki", "Kas", "Ara"] : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`; }; const daysFromToday = (d) => { const today = new Date(); today.setHours(0,0,0,0); const target = new Date(d + "T00:00:00"); return Math.round((target - today) / 86400000); }; function Tag({ color = "neutral", children, dot = false }) { return ( {dot && } {children} ); } function Card({ children, className = "", padding = 22, style = {} }) { return
{children}
; } function StatusPill({ status }) { const t = useT(); const map = { "Devam ediyor": { color: "blue", label: t.statuses.active }, "Tamamlandı": { color: "green", label: t.statuses.done }, "Planlandı": { color: "amber", label: t.statuses.planned }, "Bekliyor": { color: "amber", label: t.statuses.waiting }, }; const s = map[status] || { color: "neutral", label: status }; return {s.label}; } function Avatar({ name, size = 32, clinicColor }) { const ini = name.split(" ").map(s => s[0]).slice(0,2).join("").toUpperCase(); const colors = ["#5B8DEF","#3FB893","#A78BFA","#F59E64","#EC6F8E","#3DD6D0"]; const c = clinicColor || colors[ini.charCodeAt(0) % colors.length]; return (
{ini}
); } function ConfirmModal({ title, message, confirmLabel = "Tamam", danger = false, onConfirm, onCancel }) { return (
e.target === e.currentTarget && onCancel()}>
{title}

{message}

); } window.DentUI = { Sidebar, Topbar, Tag, Card, StatusPill, Avatar, fmtTRY, fmtDate, daysFromToday, useT, ConfirmModal };