// Requests Page — Sayfa 5 // Liste + tıklanınca detay (timeline + ürün listesi + çıkarılan ürünler) // State: selectedId; null = liste, set = detay // ─────────── Data ─────────── const REQUEST_STATUSES = { draft: { label: 'Taslak', color: '#64748B', bg: 'rgba(100,116,139,0.10)', dot: '#94A3B8' }, pending: { label: 'Onay Bekliyor', color: '#B45309', bg: 'rgba(245,158,11,0.12)', dot: '#F59E0B' }, approved: { label: 'Onaylandı', color: '#047857', bg: 'rgba(16,185,129,0.12)', dot: '#10B981' }, rejected: { label: 'Reddedildi', color: '#B91C1C', bg: 'rgba(239,68,68,0.12)', dot: '#EF4444' }, completed: { label: 'Tamamlandı', color: '#1D4ED8', bg: 'rgba(37,99,235,0.12)', dot: '#3B82F6' }, }; const REQUEST_STEPS = ['Yöneticim', 'Üst Yönetim', 'IT Onayı', 'Satınalma']; const REQUESTS = [ { id: '#IT-2026-00135', date: '21 May 2026', submittedAt: null, status: 'draft', netSubtotal: 18500, items: [ { name: 'Dell UltraSharp U2723QE 27"', imgKind: 'monitor' }, ], currentStep: -1, }, { id: '#IT-2026-00123', date: '12 May 2026', submittedAt: '12 May 2026, 14:32', status: 'pending', netSubtotal: 49200, // 45000+4200 (M365 çıkarıldıktan sonra) originalSubtotal: 54120, items: [ { id: 'p01', name: 'Dell Latitude 5550 Business Laptop', brand: 'Dell', model: 'Latitude 5550', imgKind: 'laptop', qty: 1, priceNet: 45000, justification: 'Mevcut Dell Latitude 5400 cihazım 2019 model. Power BI ve Excel modelleri üzerinde çalışırken sürekli takılıyor.', state: 'approved' }, { id: 'p07', name: 'Logitech MX Keys S Kablosuz Klavye', brand: 'Logitech', model: 'MX Keys S', imgKind: 'keyboard', qty: 1, priceNet: 4200, justification: 'Mevcut klavyemde W ve E tuşları sıkışıyor, yazı yazma hızım düştü.', state: 'approved' }, { id: 'p13', name: 'Microsoft 365 Business Standard', brand: 'Microsoft', model: 'M365 BS', imgKind: 'software-ms', qty: 1, priceNet: 4920, priceUnit: 'yıllık/kullanıcı', justification: 'Outlook + Teams için lisans yenilenmesi gerekiyor.', state: 'removed', removalReason: 'Mevcut M365 lisansınız 2026 Q3 sonuna kadar geçerli. Bu kalemi Q3 yenilemesinde toplu satınalma ile birleştireceğim.' }, ], currentStep: 1, // 0 done, 1 pending timeline: [ { kind: 'submitted', actor: 'Ayşe Kaya', role: 'Talebi oluşturan', time: '12 May 2026, 14:32' }, { kind: 'approved', actor: 'Mehmet Demir', role: 'Yöneticim', time: '13 May 2026, 09:15', note: 'Onaylandı, devam edebilir. M365 lisans kalemini Q3 satınalmaya taşıdım — şu an mevcut lisans geçerli.' }, { kind: 'removed', actor: 'Mehmet Demir', role: 'Yöneticim', time: '13 May 2026, 09:15', note: '1 ürün talepten çıkarıldı: Microsoft 365 Business Standard.' }, { kind: 'pending', actor: 'Üst Yönetim', role: 'Departman Direktörü', time: null }, { kind: 'queued', actor: 'IT Onayı', role: 'Teknik uygunluk', time: null }, { kind: 'queued', actor: 'Satınalma', role: 'Sipariş & teslim', time: null }, ], }, { id: '#IT-2026-00118', date: '02 May 2026', submittedAt: '02 May 2026, 11:08', status: 'completed', netSubtotal: 28500, items: [ { name: 'Dell OptiPlex 7020 Micro', imgKind: 'desktop' }, ], currentStep: 4, timeline: [ { kind: 'submitted', actor: 'Ayşe Kaya', role: 'Talebi oluşturan', time: '02 May 2026, 11:08' }, { kind: 'approved', actor: 'Mehmet Demir', role: 'Yöneticim', time: '02 May 2026, 14:20', note: 'Eski masaüstü yenileme talebi standartlara uygun, onaylıyorum.' }, { kind: 'approved', actor: 'Elif Yılmaz', role: 'Departman Direktörü', time: '03 May 2026, 10:45', note: 'Departman bütçesi uygun.' }, { kind: 'approved', actor: 'Ahmet Kara', role: 'IT Onayı', time: '03 May 2026, 16:12', note: 'Donanım envantere uyumlu, teknik onay verildi.' }, { kind: 'completed', actor: 'Satınalma', role: 'Sipariş & teslim', time: '06 May 2026, 09:30', note: 'Sipariş verildi, kullanıcıya teslim edildi.' }, ], }, { id: '#IT-2026-00115', date: '28 Nis 2026', submittedAt: '28 Nis 2026, 16:40', status: 'rejected', netSubtotal: 124000, items: [ { name: 'Network Danışmanlığı — 10 günlük paket', imgKind: 'service' }, ], currentStep: 1, rejectedAt: 1, // Üst Yönetim rejectionReason: 'Q1\'de aynı danışmanlık için bütçe ayrıldı ve henüz tüketilmedi. Yeni talep Q3\'te değerlendirilebilir.', timeline: [ { kind: 'submitted', actor: 'Ayşe Kaya', role: 'Talebi oluşturan', time: '28 Nis 2026, 16:40' }, { kind: 'approved', actor: 'Mehmet Demir', role: 'Yöneticim', time: '29 Nis 2026, 10:15', note: 'Yöneticim onayı verildi, bütçe değerlendirmesi için Üst Yönetime sevk edildi.' }, { kind: 'rejected', actor: 'Elif Yılmaz', role: 'Departman Direktörü', time: '30 Nis 2026, 11:20', note: 'Q1\'de aynı danışmanlık için bütçe ayrıldı ve henüz tüketilmedi. Yeni talep Q3\'te değerlendirilebilir.' }, ], }, { id: '#IT-2026-00099', date: '15 Nis 2026', submittedAt: '15 Nis 2026, 10:22', status: 'pending', netSubtotal: 25000, items: [ { name: 'Dell UltraSharp U2723QE', imgKind: 'monitor' }, { name: 'Jabra Evolve2 65', imgKind: 'headset' }, ], currentStep: 3, // Satınalma aşaması timeline: [ { kind: 'submitted', actor: 'Ayşe Kaya', role: 'Talebi oluşturan', time: '15 Nis 2026, 10:22' }, { kind: 'approved', actor: 'Mehmet Demir', role: 'Yöneticim', time: '16 Nis 2026, 08:45', note: 'Hibrit çalışma kurulumu için onaylıyorum.' }, { kind: 'approved', actor: 'Elif Yılmaz', role: 'Departman Direktörü', time: '17 Nis 2026, 14:10', note: 'Departman bütçesi uygun.' }, { kind: 'approved', actor: 'Ahmet Kara', role: 'IT Onayı', time: '18 Nis 2026, 11:30', note: 'Teknik özellikler uyumlu, sipariş için onay verildi.' }, { kind: 'pending', actor: 'Satınalma', role: 'Sipariş & teslim', time: null, note: 'Tedarikçiden teslim tarihi bekleniyor.' }, ], }, { id: '#IT-2026-00087', date: '08 Nis 2026', submittedAt: '08 Nis 2026, 14:05', status: 'completed', netSubtotal: 4200, items: [ { name: 'Logitech MX Keys S', imgKind: 'keyboard' }, ], currentStep: 4, timeline: [ { kind: 'submitted', actor: 'Ayşe Kaya', role: 'Talebi oluşturan', time: '08 Nis 2026, 14:05' }, { kind: 'approved', actor: 'Mehmet Demir', role: 'Yöneticim', time: '09 Nis 2026, 09:20', note: 'Klavye yenileme talebi onaylandı.' }, { kind: 'approved', actor: 'Elif Yılmaz', role: 'Departman Direktörü', time: '09 Nis 2026, 15:40' }, { kind: 'approved', actor: 'Ahmet Kara', role: 'IT Onayı', time: '10 Nis 2026, 10:05', note: 'Standart aksesuar talebi, onaylandı.' }, { kind: 'completed', actor: 'Satınalma', role: 'Sipariş & teslim', time: '12 Nis 2026, 14:30', note: 'Ürün teslim edildi.' }, ], }, { id: '#IT-2026-00076', date: '01 Nis 2026', submittedAt: '01 Nis 2026, 09:40', status: 'rejected', netSubtotal: 58900, items: [ { name: 'MacBook Air M3 13"', imgKind: 'laptop' }, ], currentStep: 0, rejectedAt: 0, // Yöneticim rejectionReason: 'Mevcut Dell Latitude cihazınız standart iş yüklerine yeterli. macOS\'a geçiş için pre-approval ve teknik gereklilik dokümantasyonu gerekli.', timeline: [ { kind: 'submitted', actor: 'Ayşe Kaya', role: 'Talebi oluşturan', time: '01 Nis 2026, 09:40' }, { kind: 'rejected', actor: 'Mehmet Demir', role: 'Yöneticim', time: '01 Nis 2026, 17:15', note: 'Mevcut Dell Latitude cihazınız standart iş yüklerine yeterli. macOS\'a geçiş için pre-approval ve teknik gereklilik dokümantasyonu gerekli.' }, ], }, ]; // ─────────── Görsel eşleştirici ─────────── // Talep kalemleri bazen sadece isim içerir; CATALOG_PRODUCTS üzerinden imgFolder'ı bulur. function resolveRequestItemImg(item) { if (!item) return null; if (item.imgFolder) return { folder: item.imgFolder, ext: item.imgExt || 'jpg' }; const list = window.CATALOG_PRODUCTS || []; let cp = null; if (item.id) cp = list.find((p) => p.id === item.id); if (!cp && item.name) { cp = list.find((p) => p.name === item.name) || list.find((p) => p.name.startsWith(item.name)) || list.find((p) => item.name.startsWith(p.name)); } if (!cp || !cp.imgFolder) return null; return { folder: cp.imgFolder, ext: cp.imgExt || 'jpg' }; } function requestItemImgSrc(item) { const r = resolveRequestItemImg(item); return r ? `images/products/${r.folder}/1.${r.ext}` : null; } // ─────────── Status badge & mini progress ─────────── function StatusBadge({ status, c, size = 'md' }) { const s = REQUEST_STATUSES[status]; const padding = size === 'sm' ? '4px 9px' : '5px 11px'; const fontSize = size === 'sm' ? 11 : 12; return ( {s.label} ); } function MiniProgress({ req, c }) { // 4 dots in a row connected by lines // states: done (green check), current-pending (amber pulse), current-rejected (red x), queued (gray) return (
{REQUEST_STEPS.map((step, i) => { let kind = 'queued'; if (req.status === 'completed') kind = 'done'; else if (req.status === 'rejected') { if (i < req.rejectedAt) kind = 'done'; else if (i === req.rejectedAt) kind = 'rejected'; } else if (req.status === 'pending') { if (i < req.currentStep) kind = 'done'; else if (i === req.currentStep) kind = 'pending'; } else if (req.status === 'draft') { kind = 'queued'; } const colors = { done: { bg: c.success, fg: '#fff', line: c.success }, pending: { bg: '#F59E0B', fg: '#fff', line: c.borderSoft }, rejected: { bg: c.danger, fg: '#fff', line: c.borderSoft }, queued: { bg: c.borderSoft, fg: c.muted, line: c.borderSoft }, }[kind]; return (
{kind === 'done' && ( )} {kind === 'rejected' && ( )} {(kind === 'queued' || kind === 'pending') && {i + 1}}
{i < REQUEST_STEPS.length - 1 && (
)} ); })}
); } // ─────────── List row card ─────────── function RequestRow({ req, c, onOpen }) { const [hover, setHover] = React.useState(false); const status = REQUEST_STATUSES[req.status]; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: c.card, border: `1px solid ${c.border}`, borderRadius: 14, padding: 18, display: 'grid', gridTemplateColumns: '210px 1fr 240px 130px', gap: 24, alignItems: 'center', transition: 'border-color 160ms, box-shadow 160ms', borderColor: hover ? c.primary + '55' : c.border, boxShadow: hover ? `0 4px 14px -6px rgba(15,23,42,0.10)` : 'none', }}> {/* Left: ID + date + status */}
{req.id}
{req.submittedAt ? req.submittedAt : 'Henüz gönderilmedi'}
{req.kind === 'custom' && ( Özel Talep )}
{/* Middle: product thumbs + count + amount */}
{req.items.slice(0, 4).map((it, i) => (
))} {req.items.length > 4 && (
+{req.items.length - 4}
)}
{req.items.length} ürün · {formatTL(req.netSubtotal)} KDV hariç
{/* Progress */}
{req.status === 'draft' ? (
Onaya gönderilmedi · taslak
) : ( {req.status === 'pending' && (
Aşama: {REQUEST_STEPS[req.currentStep]}
)} {req.status === 'rejected' && (
Aşamada reddedildi: {REQUEST_STEPS[req.rejectedAt]}
)} {req.status === 'completed' && (
Tüm aşamalar tamamlandı
)} )}
{/* Right: button */}
); } // ─────────── List filter bar ─────────── function ListFilterBar({ c, statusFilter, setStatusFilter, search, setSearch, requests }) { const all = requests || []; const tabs = [ { v: 'all', label: 'Tümü', count: all.length }, { v: 'pending', label: 'Onay Bekliyor', count: all.filter((r) => r.status === 'pending').length }, { v: 'approved', label: 'Onaylandı', count: 0 }, { v: 'rejected', label: 'Reddedildi', count: all.filter((r) => r.status === 'rejected').length }, { v: 'completed', label: 'Tamamlandı', count: all.filter((r) => r.status === 'completed').length }, { v: 'draft', label: 'Taslak', count: all.filter((r) => r.status === 'draft').length }, ]; return (
{tabs.map((t) => { const active = statusFilter === t.v; return ( ); })}
{/* Search */}
{UIIcons.search} setSearch(e.target.value)} placeholder="Talep numarası veya ürün adı ile ara..." style={{ width: '100%', boxSizing: 'border-box', padding: '9px 14px 9px 38px', background: c.inputBg, color: c.text, border: `1px solid ${c.border}`, borderRadius: 10, fontSize: 13, fontFamily: 'inherit', outline: 'none', }} />
{/* Date range */}
); } // ─────────── List view ─────────── function RequestsListView({ c, onOpen, requests }) { const [statusFilter, setStatusFilter] = React.useState('all'); const [search, setSearch] = React.useState(''); const filtered = (requests || []).filter((r) => { if (statusFilter !== 'all' && r.status !== statusFilter) return false; if (search.trim()) { const q = search.trim().toLowerCase(); if (!r.id.toLowerCase().includes(q) && !r.items.some((it) => it.name.toLowerCase().includes(q))) return false; } return true; }); return (

Taleplerim

Aktif ve geçmiş tüm IT taleplerinizi buradan takip edin.

{filtered.length === 0 ? (
Bu filtreye uygun talep bulunamadı.
) : ( filtered.map((r) => ( onOpen(r.id)} /> )) )}
); } // ─────────── Detail view ─────────── function RequestDetailView({ req, c, onBack }) { if (!req) return null; const removedItems = req.items ? req.items.filter((x) => x.state === 'removed') : []; const keptItems = req.items ? req.items.filter((x) => x.state !== 'removed') : (req.items || []); const status = REQUEST_STATUSES[req.status]; return (
{/* Back + header */}

{req.id}

{req.kind === 'custom' && ( Özel Talep )}
{req.submittedAt ? `Gönderildi: ${req.submittedAt}` : `Oluşturuldu: ${req.date}`} {req.status === 'pending' && ( {' · '}{REQUEST_STEPS[req.currentStep]} aşamasında )}
{req.status === 'pending' && req.currentStep === 0 && ( )}
{/* Rejection banner */} {req.status === 'rejected' && (
{REQUEST_STEPS[req.rejectedAt]} aşamasında reddedildi
{req.rejectionReason}
)} {/* Main grid: timeline + items */}
{/* Timeline */}

Onay zaman çizelgesi

{/* Items */}

Talep edilen ürünler · {keptItems.length} kalem

{keptItems.map((it) => ( ))}
{removedItems.length > 0 && (

Yönetici tarafından çıkarılan ürünler · {removedItems.length} kalem

{removedItems.map((it) => ( ))}
)} {/* Totals */}
Talep tutarı (KDV hariç)
{req.originalSubtotal && (
Orijinal: {formatTL(req.originalSubtotal)}
)}
{formatTL(req.netSubtotal)}
); } function cancelBtn(c) { return { appearance: 'none', cursor: 'pointer', padding: '9px 14px', borderRadius: 10, background: 'transparent', color: c.danger, border: `1px solid ${c.danger}55`, fontSize: 12.5, fontWeight: 600, fontFamily: 'inherit', }; } function primaryGhost(c) { return { appearance: 'none', cursor: 'pointer', padding: '9px 14px', borderRadius: 10, background: 'transparent', color: c.text, border: `1px solid ${c.border}`, fontSize: 12.5, fontWeight: 500, fontFamily: 'inherit', }; } // ─────────── Timeline ─────────── function Timeline({ events, c }) { return (
    {/* connecting line */}
    {events.map((e, i) => ( ))}
); } function TimelineEvent({ event, c }) { const styles = { submitted: { bg: c.selectedBg, color: c.selectedText, icon: 'send' }, approved: { bg: 'rgba(16,185,129,0.14)', color: c.success, icon: 'check' }, removed: { bg: 'rgba(245,158,11,0.14)', color: '#B45309', icon: 'minus' }, pending: { bg: 'rgba(245,158,11,0.14)', color: '#B45309', icon: 'clock' }, queued: { bg: c.borderSoft, color: c.muted, icon: 'dot' }, rejected: { bg: 'rgba(239,68,68,0.14)', color: c.danger, icon: 'x' }, }[event.kind] || { bg: c.borderSoft, color: c.muted, icon: 'dot' }; const isPending = event.kind === 'pending'; const isQueued = event.kind === 'queued'; return (
  • {event.kind === 'submitted' && 'Talep oluşturuldu'} {event.kind === 'approved' && `${event.actor} tarafından onaylandı`} {event.kind === 'removed' && `${event.actor} ürün çıkardı`} {event.kind === 'pending' && `${event.actor} onayı bekleniyor`} {event.kind === 'queued' && `${event.actor}`} {event.kind === 'rejected' && `${event.actor} reddetti`}
    {event.role && {event.role} · } {event.time || 'Henüz başlamadı'}
    {event.note && (
    "{event.note}"
    )}
    • ); } function TimelineIcon({ name }) { const props = { width: 12, height: 12, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2.4, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (name === 'check') return ; if (name === 'x') return ; if (name === 'clock') return ; if (name === 'send') return ; if (name === 'minus') return ; return ; } // ─────────── Detail item card ─────────── function DetailItemCard({ item, c, removed }) { return (
    {/* Removed strikethrough overlay accent */} {removed && (
    )}
    {(item.brand || item.model) ? ( {[item.brand, item.model].filter(Boolean).join(' · ')} ) : ( Katalog dışı )} {removed && ( Çıkarıldı )}
    {item.name}
    "{item.justification}"
    {(item.link || item.budget) && (
    {item.link && ( Referans linki )} {item.budget && ( Tahmini bütçe: {item.budget} )}
    )} {removed && item.removalReason && (
    Yönetici notu
    {item.removalReason}
    )}
    {item.qty} adet
    {formatTL((item.priceNet || 0) * (item.qty || 1))}
    {item.priceUnit && (
    / {item.priceUnit}
    )}
    ); } // ─────────── MAIN PAGE ─────────── function RequestsPage({ initialDark = false, initialDetailId = null }) { const [dark, setDark] = React.useState(initialDark); React.useEffect(() => { setDark(initialDark); }, [initialDark]); const [selectedId, setSelectedId] = React.useState(initialDetailId); const [headerSearch, setHeaderSearch] = React.useState(''); const c = catalogTheme(dark); const requests = useRequestsSnapshot(); const selected = requests.find((r) => r.id === selectedId); return (
    setDark((x) => !x)} search={headerSearch} setSearch={setHeaderSearch} cartCount={0} notifCount={3} />
    {selected ? setSelectedId(null)} /> : setSelectedId(id)} requests={requests} />}
    ); } Object.assign(window, { RequestsPage, REQUESTS, REQUEST_STATUSES, REQUEST_STEPS, StatusBadge, MiniProgress, RequestRow, ListFilterBar, RequestsListView, RequestDetailView, Timeline, TimelineEvent, DetailItemCard, });