// admin-panel.jsx — Süper Admin Yönetim Paneli (Faz 3 / Parça 3.1: temel iskelet) // Ayrı kurumsal layout: sol menü + bölümler. Bu parçada Genel Bakış gerçek özet gösterir; // diğer bölümler (Kategoriler, Ürünler, Kullanıcılar, Raporlar, Sistem/LDAP) sonraki // parçalarda doldurulacak placeholder'lardır. const ADMIN_ICONS = { overview: , categories: , products: , users: , reports: , system: , }; const ADMIN_SECTIONS = [ { id: 'overview', label: 'Genel Bakış' }, { id: 'categories', label: 'Kategoriler' }, { id: 'products', label: 'Ürünler' }, { id: 'users', label: 'Kullanıcılar & Yetkiler' }, { id: 'reports', label: 'Raporlar' }, { id: 'system', label: 'Sistem & LDAP' }, ]; // Bölüm placeholder'ları için açıklama (sonraki parçalarda neyin geleceği) const ADMIN_SECTION_INTRO = { categories: { title: 'Kategori Yönetimi', desc: 'Ana kategori ve alt kategori ekleme/düzenleme/silme. Katalogda anında yansır.', soon: 'Hazır ✓' }, products: { title: 'Ürün Yönetimi', desc: 'Ürün ekleme/düzenleme/pasifleştirme, görsel ekleme, fiyat/gider türü.', soon: 'Hazır ✓' }, users: { title: 'Kullanıcılar & Yetkiler', desc: 'Kullanıcı listesi, modül bazlı rol atama, kategori-bazlı yetki.', soon: 'Hazır ✓' }, reports: { title: 'Raporlar', desc: 'Harcama, onay süreleri, red analizi, bütçe kullanımı; departman/kategori kırılımı, grafikler, dışa aktarma.', soon: 'Parça 3.5' }, system: { title: 'Sistem & LDAP', desc: 'On-prem AD/LDAP bağlantısı (LDAPS adres/port, bind hesabı, base DN), AD grubu → uygulama rolü eşlemesi, onay eşikleri.', soon: 'Parça 3.6' }, }; // ─────────── Hızlı erişim kısayolları (Bildirim / Sepet / Onay Kutusu / Taleplerim) ─────────── // Süper Admin de aynı zamanda talep eden + onaycı olabilir; yönetim ekranından bu sayfalara // hızlıca geçebilsin diye katalog header'ındaki ikonların bir kopyası. // İkon + isim + sayı rozeti taşıyan kısayol düğmesi function AdminNavBtn({ c, label, badge, badgeColor, onClick, children }) { const Pill = window.CountPill; return ( ); } function AdminQuickNav({ c }) { const Ic = window.UIIcons || {}; const go = (p) => window.__navigate && window.__navigate(p); const currentUser = window.useCurrentUser ? window.useCurrentUser() : (window.__user || null); const notifs = window.useNotifSnapshot ? window.useNotifSnapshot() : []; const cart = window.useCartSnapshot ? window.useCartSnapshot() : []; const approvals = window.useApprovalsSnapshot ? window.useApprovalsSnapshot() : []; const suppliers = window.useSuppliersSnapshot ? window.useSuppliersSnapshot() : []; const usersAll = window.useUsersSnapshot ? window.useUsersSnapshot() : []; const notifCount = notifs.filter((n) => !n.read).length; const cartCount = cart.length; const canApprove = !!(window.can && currentUser && window.can.approve(currentUser, 'it')); // Onay Kutusu sayacı: bu kullanıcının onayındaki talepler + tedarikçi kart + profil değişiklikleri const reqApprovals = currentUser ? approvals.filter((r) => r.status === 'pending' && r.stage === 'approval' && r.approverId === currentUser.id).length : 0; const supChanges = currentUser ? suppliers.filter((s) => s.pendingEdit && s.pendingEdit.status === 'pending' && (s.pendingEdit.approverId === currentUser.id || currentUser.superAdmin)).length : 0; const profChanges = currentUser ? usersAll.filter((u) => u.pendingProfileEdit && u.pendingProfileEdit.status === 'pending' && (u.pendingProfileEdit.approverId === currentUser.id || currentUser.superAdmin)).length : 0; const myApprovalCount = reqApprovals + supChanges + profChanges; return (
go('notifications')}>{Ic.bell} go('cart')}>{Ic.cart} {canApprove && ( go('approvals')}> )} go('requests')}>
); } // ─────────── Sol menü (masaüstü) ─────────── function AdminSidebar({ c, section, setSection, user, dark, setDark }) { return (
Yönetim Paneli
IT Talep Sistemi
{user ? user.initials : 'FY'}
{user ? user.name : 'Ferhat YILDIZ'}
{user ? user.roleLabel : 'Süper Admin'}
); } function adminGhost(c) { return { appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 8, padding: '9px 12px', borderRadius: 10, background: 'transparent', color: c.text, border: `1px solid ${c.border}`, fontSize: 12.5, fontWeight: 500, }; } function adminSolid(bg) { return { appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: 'none', display: 'inline-flex', alignItems: 'center', gap: 7, padding: '9px 14px', borderRadius: 10, background: bg, color: '#fff', fontSize: 12.5, fontWeight: 600, }; } function adminInput(c) { return { boxSizing: 'border-box', padding: '9px 12px', background: c.inputBg, color: c.text, border: `1px solid ${c.border}`, borderRadius: 10, fontSize: 13, fontFamily: 'inherit', outline: 'none', }; } // ─────────── Kategori ikon seçici ─────────── const CAT_ICON_OPTIONS = ['monitor', 'disc', 'wrench', 'microsoft', 'remote', 'grid']; function IconPicker({ value, onChange, c }) { const icons = window.CatIcons || {}; return (
{CAT_ICON_OPTIONS.map((k) => { const active = value === k; return ( ); })}
); } // ─────────── Kategori Yönetimi (Faz 3 / Parça 3.2) ─────────── function AdminCategories({ c }) { const isMobile = useIsMobile(); const cats = useCategoriesSnapshot(); const products = window.CATALOG_PRODUCTS || []; const M = window.__categories || {}; const [adding, setAdding] = React.useState(false); const [newName, setNewName] = React.useState(''); const [newIcon, setNewIcon] = React.useState('grid'); const [editId, setEditId] = React.useState(null); const [editName, setEditName] = React.useState(''); const [editIcon, setEditIcon] = React.useState('grid'); const [subDraft, setSubDraft] = React.useState({}); // {groupId: text} const groupCount = (gid) => products.filter((p) => p.group === gid).length; const subCount = (gid, sub) => products.filter((p) => p.group === gid && p.sub === sub).length; function addGroup() { if (!newName.trim()) { alert('Kategori adı zorunlu.'); return; } if (M.addGroup) M.addGroup({ name: newName, iconKey: newIcon }); setNewName(''); setNewIcon('grid'); setAdding(false); } function startEdit(g) { setEditId(g.id); setEditName(g.name); setEditIcon(g.iconKey || 'grid'); } function saveEdit() { if (!editName.trim()) { alert('Kategori adı zorunlu.'); return; } if (M.updateGroup) M.updateGroup(editId, { name: editName.trim(), iconKey: editIcon }); setEditId(null); } function delGroup(g) { const n = groupCount(g.id); const msg = n > 0 ? `"${g.name}" kategorisinde ${n} ürün var. Kategoriyi silerseniz bu ürünler kategorisiz kalır. Silinsin mi?` : `"${g.name}" kategorisi silinsin mi?`; if (window.confirm(msg) && M.removeGroup) M.removeGroup(g.id); } function addSub(gid) { const v = (subDraft[gid] || '').trim(); if (!v) return; if (M.addSub) M.addSub(gid, v); setSubDraft((p) => ({ ...p, [gid]: '' })); } function delSub(gid, sub) { const n = subCount(gid, sub); const msg = n > 0 ? `"${sub}" alt kategorisinde ${n} ürün var. Silinsin mi?` : `"${sub}" silinsin mi?`; if (window.confirm(msg) && M.removeSub) M.removeSub(gid, sub); } return (
{/* Üst aksiyon */}
{cats.length} ana kategori · {cats.reduce((s, g) => s + g.subs.length, 0)} alt kategori
{!adding && }
{/* Yeni kategori formu */} {adding && (
Yeni ana kategori
setNewName(e.target.value)} placeholder="Kategori adı (örn. Ağ & Güvenlik)" autoFocus style={{ ...adminInput(c), flex: isMobile ? '1 1 100%' : '1 1 240px' }} onKeyDown={(e) => e.key === 'Enter' && addGroup()} />
İkon
)} {/* Kategori kartları */}
{cats.map((g) => { const editing = editId === g.id; return (
{/* Başlık satırı */}
{(window.CatIcons || {})[g.iconKey] || (window.CatIcons || {}).grid} {editing ? ( setEditName(e.target.value)} style={{ ...adminInput(c), flex: 1 }} onKeyDown={(e) => e.key === 'Enter' && saveEdit()} /> ) : (
{g.name}
{groupCount(g.id)} ürün · {g.subs.length} alt kategori
)} {!editing && (
)}
{editing && (
İkon
)} {/* Alt kategoriler */}
{g.subs.length === 0 && Henüz alt kategori yok.} {g.subs.map((sub) => ( {sub} {subCount(g.id, sub)} ))}
{/* Alt kategori ekle */}
setSubDraft((p) => ({ ...p, [g.id]: e.target.value }))} placeholder="Alt kategori ekle..." style={{ ...adminInput(c), flex: 1, padding: '8px 11px' }} onKeyDown={(e) => e.key === 'Enter' && addSub(g.id)} />
); })}
); } // ─────────── Üst sekme şeridi (mobil) ─────────── function AdminMobileBar({ c, section, setSection, dark, setDark }) { return (
Yönetim Paneli
{ADMIN_SECTIONS.map((s) => { const active = section === s.id; return ( ); })}
); } // ─────────── Genel Bakış (gerçek özet) ─────────── function AdminOverview({ c }) { const isMobile = useIsMobile(); const products = window.CATALOG_PRODUCTS || []; const cats = window.CATALOG_CATEGORIES || []; const subCount = cats.reduce((s, g) => s + ((g.subs && g.subs.length) || 0), 0); const users = window.DEMO_USERS || []; const allApprovals = useApprovalsSnapshot(); const pendingApprovals = allApprovals.filter((r) => r.status === 'pending').length; const stats = [ ['Toplam ürün', String(products.length), c.primary], ['Kategori', `${cats.length} ana · ${subCount} alt`, c.text], ['Kullanıcı', String(users.length), c.text], ['Bekleyen onay', String(pendingApprovals), pendingApprovals > 0 ? '#B45309' : c.text], ]; return (
{stats.map(([label, val, color]) => (
{label}
{val}
))}
Yönetim Paneline hoş geldiniz
Buradan katalog (kategori & ürün), kullanıcı/yetki, raporlar ve sistem ayarlarını yöneteceksiniz. Soldaki menüden ilgili bölüme geçin. Bölümler sırayla devreye alınıyor:
{ADMIN_SECTIONS.filter((s) => s.id !== 'overview').map((s) => { const intro = ADMIN_SECTION_INTRO[s.id]; return (
{ADMIN_ICONS[s.id]}
{s.label}
{intro ? intro.desc : ''}
{intro ? intro.soon : ''}
); })}
); } // ─────────── Placeholder bölüm ─────────── function AdminPlaceholder({ c, section }) { const intro = ADMIN_SECTION_INTRO[section] || { title: 'Bölüm', desc: '', soon: '' }; return (
{ADMIN_ICONS[section]}
{intro.title}
{intro.desc}
Bu bölüm sıradaki adımda eklenecek · {intro.soon}
); } // ─────────── Ürün ekleme/düzenleme formu ─────────── const PRODUCT_IMG_KINDS = ['laptop', 'desktop', 'monitor', 'keyboard', 'mouse', 'headset', 'webcam', 'dock', 'speaker', 'software', 'server', 'service']; function ProductForm({ c, cats, initial, onSave, onCancel }) { const isMobile = useIsMobile(); const [name, setName] = React.useState(initial ? initial.name : ''); const [brand, setBrand] = React.useState(initial ? (initial.brand || '') : ''); const [model, setModel] = React.useState(initial ? (initial.model || '') : ''); const [group, setGroup] = React.useState(initial ? initial.group : (cats[0] && cats[0].id) || ''); const [sub, setSub] = React.useState(initial ? (initial.sub || '') : ''); const [priceNet, setPriceNet] = React.useState(initial ? String(initial.priceNet || '') : ''); const [priceUnit, setPriceUnit] = React.useState(initial ? (initial.priceUnit || '') : ''); const [expenseType, setExpenseType] = React.useState(initial ? (initial.expenseType || 'auto') : 'auto'); const [imgKind, setImgKind] = React.useState(initial ? (initial.imgKind || 'service') : 'service'); const [desc, setDesc] = React.useState(initial ? (initial.desc || '') : ''); const [imgDataUrl, setImgDataUrl] = React.useState(initial ? (initial.imgDataUrl || '') : ''); const groupObj = cats.find((g) => g.id === group); const subs = (groupObj && groupObj.subs) || []; const previewSrc = imgDataUrl || (initial ? window.productImgSrc(initial) : null); function onFile(e) { const file = e.target.files && e.target.files[0]; if (!file) return; if (!file.type.startsWith('image/')) { alert('Lütfen bir görsel dosyası seçin.'); return; } if (file.size > 3 * 1024 * 1024) { alert('Görsel 3 MB\'tan küçük olmalı.'); return; } const reader = new FileReader(); reader.onload = () => setImgDataUrl(reader.result); reader.readAsDataURL(file); } function save() { if (!name.trim()) { alert('Ürün adı zorunlu.'); return; } if (!group) { alert('Kategori seçin.'); return; } const price = parseInt(String(priceNet).replace(/[^\d]/g, ''), 10) || 0; if (price <= 0) { alert('Geçerli bir net fiyat girin.'); return; } const data = { name: name.trim(), brand: brand.trim(), model: model.trim(), group, sub: sub || (subs[0] || ''), priceNet: price, priceUnit: priceUnit.trim() || null, imgKind, desc: desc.trim(), imgDataUrl: imgDataUrl || undefined, }; if (expenseType !== 'auto') data.expenseType = expenseType; onSave(data); } const lbl = { fontSize: 11.5, color: c.muted, marginBottom: 6, display: 'block' }; const col = { display: 'flex', flexDirection: 'column' }; return (
{initial ? 'Ürünü düzenle' : 'Yeni ürün'}
setName(e.target.value)} style={adminInput(c)} placeholder="örn. Dell UltraSharp U2723QE 27 4K" />
setBrand(e.target.value)} style={adminInput(c)} />
setModel(e.target.value)} style={adminInput(c)} />
setPriceNet(e.target.value)} style={adminInput(c)} placeholder="18500" inputMode="numeric" />
setPriceUnit(e.target.value)} style={adminInput(c)} placeholder="örn. yıllık/kullanıcı" />