Servis Gönderim Formu · ${esc(a.name)}

e.stopPropagation()} style={{ background: c.card, borderRadius: 16, width: isMobile ? '100%' : 560, maxWidth: '100%', maxHeight: '92vh', overflowY: 'auto', border: `1px solid ${c.border}` }}>

Servise Gönder · {a.name}

Seri No: {a.seriNo || '—'} · zimmet sahibi {a.ownerName}

Gönderici

Gönderici firma setSender(e.target.value)} style={inp} />

Gönderici adresi

setSenderAddr(e.target.value)} rows={2} style={{ ...inp, resize: 'vertical' }} /></div>
          <div><label style={lbl}>Yetkili / iletişim</label><input value={senderContact} onChange={(e) => setSenderContact(e.target.value)} style={inp} /></div>

<div style={{ fontSize: 12, fontWeight: 700, color: c.text, textTransform: 'uppercase', letterSpacing: '0.04em', marginTop: 4 }}>Alıcı (Servis Firması)</div>
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <label style={lbl}>Servis firması *</label>
              <button type="button" onClick={() => setManualFirm((m) => !m)} style={linkBtn}>{manualFirm ? '↩ Tedarikçiden seç' : '✏️ Listede yok? elle gir'}</button>
            </div>
            {manualFirm
              ? <input value={receiver} onChange={(e) => setReceiver(e.target.value)} style={inp} placeholder="örn. Dell Yetkili Teknik Servis" />
              : <SearchPicker c={c} options={supplierOpts} value={supplierId} onChange={pickSupplier} placeholder="Tedarikçi ara / seç…" />}
          </div>
          <div><label style={lbl}>Adres</label><textarea value={receiverAddr} onChange={(e) => setReceiverAddr(e.target.value)} rows={2} style={{ ...inp, resize: 'vertical' }} placeholder="Servis firması teslim adresi" /></div>
          <div><label style={lbl}>Telefon</label><input value={receiverPhone} onChange={(e) => setReceiverPhone(e.target.value)} style={inp} placeholder="+90 ..." /></div>

<div><label style={lbl}>Arıza / gönderim açıklaması *</label><textarea value={faultNote} onChange={(e) => setFaultNote(e.target.value)} rows={3} style={{ ...inp, resize: 'vertical' }} placeholder="örn. Açılmıyor, şarj tutmuyor; garanti kapsamında onarım." /></div>
          <div style={{ fontSize: 11.5, color: c.subtle }}>Seri No, fatura/sipariş ve garanti bilgisi kargo formuna otomatik eklenir.</div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, padding: '16px 22px', borderTop: `1px solid ${c.border}` }}>
          <button onClick={onClose} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: `1px solid ${c.border}`, background: 'transparent', color: c.muted, fontSize: 13, fontWeight: 600, padding: '10px 16px', borderRadius: 10 }}>Vazgeç</button>
          <button onClick={submit} disabled={!valid} style={{ appearance: 'none', cursor: valid ? 'pointer' : 'default', fontFamily: 'inherit', border: 'none', background: valid ? '#C2410C' : c.border, color: '#fff', fontSize: 13, fontWeight: 700, padding: '10px 18px', borderRadius: 10, opacity: valid ? 1 : 0.7 }}>🖨️ Servise gönder ve yazdır</button>
        </div>
      </div>
    </div>
  );
}

// Servisten dönüş formu (Faz 7.4b eki): onarım notu + servis raporu/formu dosya yükleme.
function ServiceReturnModal({ a, c, onClose }) {
  const isMobile = useIsMobile();
  const [note, setNote] = React.useState('');
  const [docDataUrl, setDocDataUrl] = React.useState('');
  const [docName, setDocName] = React.useState('');
  const onFile = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    if (f.size > 4 * 1024 * 1024) { alert('Dosya 4 MB\'tan küçük olmalı.'); return; }
    const r = new FileReader();
    r.onload = () => { setDocDataUrl(r.result); setDocName(f.name); };
    r.readAsDataURL(f);
  };
  const submit = () => {
    window.__assets && window.__assets.returnFromService && window.__assets.returnFromService(a.id, { note: note.trim(), docDataUrl });
    onClose();
  };
  const lbl = { fontSize: 12, fontWeight: 600, color: c.muted, display: 'block', marginBottom: 6 };
  const inp = { width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 10, border: `1px solid ${c.border}`, background: c.inputBg || c.surface, color: c.text, fontSize: 13.5, fontFamily: 'inherit' };
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: 16 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: c.card, borderRadius: 16, width: isMobile ? '100%' : 500, maxWidth: '100%', maxHeight: '92vh', overflowY: 'auto', border: `1px solid ${c.border}` }}>
        <div style={{ padding: '18px 22px', borderBottom: `1px solid ${c.border}` }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: c.text }}>Servisten Döndü · {a.name}</div>
          <div style={{ fontSize: 12.5, color: c.muted, marginTop: 3 }}>{(a.service && a.service.receiver) || 'Servis'} · Seri No: {a.seriNo || '—'}</div>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div><label style={lbl}>Onarım özeti / not</label><textarea value={note} onChange={(e) => setNote(e.target.value)} rows={3} style={{ ...inp, resize: 'vertical' }} placeholder="örn. Anakart değişti, garanti kapsamında onarıldı." /></div>
          <div>
            <label style={lbl}>Servis formu / raporu <span style={{ color: c.subtle, fontWeight: 400 }}>(opsiyonel)</span></label>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <label style={{ cursor: 'pointer', fontSize: 12.5, fontWeight: 600, color: c.primary, border: `1px solid ${c.border}`, borderRadius: 10, padding: '9px 14px' }}>
                📎 Dosya seç
                <input type="file" accept="image/*,.pdf" onChange={onFile} style={{ display: 'none' }} />
              </label>
              {docName && <span style={{ fontSize: 12, color: c.muted }}>{docName} <button onClick={() => { setDocDataUrl(''); setDocName(''); }} style={{ appearance: 'none', border: 'none', background: 'transparent', color: c.danger, cursor: 'pointer', fontWeight: 700 }}>✕</button></span>}
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, padding: '16px 22px', borderTop: `1px solid ${c.border}` }}>
          <button onClick={onClose} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: `1px solid ${c.border}`, background: 'transparent', color: c.muted, fontSize: 13, fontWeight: 600, padding: '10px 16px', borderRadius: 10 }}>Vazgeç</button>
          <button onClick={submit} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: 'none', background: c.success, color: '#fff', fontSize: 13, fontWeight: 700, padding: '10px 18px', borderRadius: 10 }}>↩️ Servisten döndü olarak işaretle</button>
        </div>
      </div>
    </div>
  );
}

// Hurdaya ayırma formu (Faz 9): gerekçe (zorunlu) + opsiyonel tutanak/foto.
function ScrapModal({ a, c, onClose }) {
  const isMobile = useIsMobile();
  const [reason, setReason] = React.useState('');
  const [docDataUrl, setDocDataUrl] = React.useState('');
  const [docName, setDocName] = React.useState('');
  const onFile = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    if (f.size > 4 * 1024 * 1024) { alert('Dosya 4 MB\'tan küçük olmalı.'); return; }
    const r = new FileReader();
    r.onload = () => { setDocDataUrl(r.result); setDocName(f.name); };
    r.readAsDataURL(f);
  };
  const valid = reason.trim();
  const submit = () => {
    if (!valid) { alert('Hurda gerekçesi zorunludur.'); return; }
    window.__assets && window.__assets.scrap && window.__assets.scrap(a.id, { reason: reason.trim(), docDataUrl });
    onClose();
  };
  const lbl = { fontSize: 12, fontWeight: 600, color: c.muted, display: 'block', marginBottom: 6 };
  const inp = { width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 10, border: `1px solid ${c.border}`, background: c.inputBg || c.surface, color: c.text, fontSize: 13.5, fontFamily: 'inherit' };
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: 16 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: c.card, borderRadius: 16, width: isMobile ? '100%' : 500, maxWidth: '100%', maxHeight: '92vh', overflowY: 'auto', border: `1px solid ${c.border}` }}>
        <div style={{ padding: '18px 22px', borderBottom: `1px solid ${c.border}` }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: c.text }}>Hurdaya Gönder · {a.name}</div>
          <div style={{ fontSize: 12.5, color: c.muted, marginTop: 3 }}>Seri No: {a.seriNo || '—'} · zimmet sahibi {a.ownerName}</div>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ fontSize: 12.5, color: '#B45309', background: 'rgba(245,158,11,0.10)', border: '1px solid rgba(245,158,11,0.30)', borderRadius: 10, padding: '10px 12px' }}>
            Tamir edilemeyen / kullanım dışı ekipman hurdaya ayrılır. Hurda kalemi, İSG & Çevre biriminin satış/imha sürecine düşer.
          </div>
          <div><label style={lbl}>Hurda gerekçesi *</label><textarea value={reason} onChange={(e) => setReason(e.target.value)} rows={3} style={{ ...inp, resize: 'vertical' }} placeholder="örn. Tamir edilemiyor, ekonomik ömrü doldu, fiziksel hasar." /></div>
          <div>
            <label style={lbl}>Tutanak / fotoğraf <span style={{ color: c.subtle, fontWeight: 400 }}>(opsiyonel)</span></label>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <label style={{ cursor: 'pointer', fontSize: 12.5, fontWeight: 600, color: c.primary, border: `1px solid ${c.border}`, borderRadius: 10, padding: '9px 14px' }}>
                📎 Dosya seç
                <input type="file" accept="image/*,.pdf" onChange={onFile} style={{ display: 'none' }} />
              </label>
              {docName && <span style={{ fontSize: 12, color: c.muted }}>{docName} <button onClick={() => { setDocDataUrl(''); setDocName(''); }} style={{ appearance: 'none', border: 'none', background: 'transparent', color: c.danger, cursor: 'pointer', fontWeight: 700 }}>✕</button></span>}
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, padding: '16px 22px', borderTop: `1px solid ${c.border}` }}>
          <button onClick={onClose} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: `1px solid ${c.border}`, background: 'transparent', color: c.muted, fontSize: 13, fontWeight: 600, padding: '10px 16px', borderRadius: 10 }}>Vazgeç</button>
          <button onClick={submit} disabled={!valid} style={{ appearance: 'none', cursor: valid ? 'pointer' : 'default', fontFamily: 'inherit', border: 'none', background: valid ? '#6B7280' : c.border, color: '#fff', fontSize: 13, fontWeight: 700, padding: '10px 18px', borderRadius: 10, opacity: valid ? 1 : 0.7 }}>🗑️ Hurdaya gönder</button>
        </div>
      </div>
    </div>
  );
}

// İade teslim alma (Faz 8.2): depo sorumlusu iadeyi teslim alır → durumunu değerlendirip
// HAVUZA ekler (yeniden kullanılabilir) ya da doğrudan HURDAYA yönlendirir (bozuk/eski).
function ReturnReceiveModal({ a, c, onScrap, onClose }) {
  const isMobile = useIsMobile();
  const [note, setNote] = React.useState('');
  const r = a.return || {};
  const toPool = () => {
    window.__assets && window.__assets.receiveReturn && window.__assets.receiveReturn(a.id, { note: note.trim() });
    onClose();
  };
  const row = (k, v) => (
    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 13, padding: '6px 0' }}>
      <span style={{ color: c.muted }}>{k}</span>
      <span style={{ color: c.text, fontWeight: 600, textAlign: 'right' }}>{v}</span>
    </div>
  );
  const lbl = { fontSize: 12, fontWeight: 600, color: c.muted, display: 'block', marginBottom: 6 };
  const inp = { width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 10, border: `1px solid ${c.border}`, background: c.inputBg || c.surface, color: c.text, fontSize: 13.5, fontFamily: 'inherit', resize: 'vertical' };
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: 16 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: c.card, borderRadius: 16, width: isMobile ? '100%' : 520, maxWidth: '100%', maxHeight: '92vh', overflowY: 'auto', border: `1px solid ${c.border}` }}>
        <div style={{ padding: '18px 22px', borderBottom: `1px solid ${c.border}` }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: c.text }}>İade Teslim Al · {a.name}</div>
          <div style={{ fontSize: 12.5, color: c.muted, marginTop: 3 }}>Ekipmanın durumunu değerlendirip havuza ekleyin ya da hurdaya yönlendirin.</div>
        </div>
        <div style={{ padding: 22 }}>
          <div style={{ background: c.surface, border: `1px solid ${c.borderSoft}`, borderRadius: 12, padding: '12px 16px', marginBottom: 16 }}>
            {row('Ekipman', a.name)}
            {row('Adet', a.qty + ' adet')}
            {a.seriNo && row('Seri No', a.seriNo)}
            {row('İade eden', (r.fromOwnerName || a.ownerName || '—') + (r.fromOwnerDept ? ' · ' + r.fromOwnerDept : ''))}
            {r.offboarding && row('Sebep', 'Personel ayrılışı')}
            {r.reason && row('Not', r.reason)}
          </div>
          <label style={lbl}>Durum / teslim notu <span style={{ color: c.subtle, fontWeight: 400 }}>(opsiyonel)</span></label>
          <textarea value={note} onChange={(e) => setNote(e.target.value)} rows={2} style={inp} placeholder="örn. çalışır durumda, kutusuyla teslim alındı / küçük çizik var" />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, padding: '16px 22px', borderTop: `1px solid ${c.border}`, flexWrap: 'wrap' }}>
          <button onClick={onClose} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: `1px solid ${c.border}`, background: 'transparent', color: c.muted, fontSize: 13, fontWeight: 600, padding: '10px 16px', borderRadius: 10 }}>Vazgeç</button>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button onClick={onScrap} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: `1px solid ${c.border}`, background: 'transparent', color: '#6B7280', fontSize: 13, fontWeight: 700, padding: '10px 16px', borderRadius: 10 }}>🗑️ Hurdaya yönlendir</button>
            <button onClick={toPool} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: 'none', background: '#0369A1', color: '#fff', fontSize: 13, fontWeight: 700, padding: '10px 18px', borderRadius: 10 }}>♻️ Havuza al</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Yeniden atama (Faz 8.3): depo sorumlusu havuzdaki ekipmanı yeni personele atar → 'received'.
// Yeni sahip Zimmetlerim'den dijital zimmet formunu imzalayınca tekrar kullanıma geçer.
function ReassignModal({ a, c, onClose }) {
  const isMobile = useIsMobile();
  const users = (typeof useUsersSnapshot === 'function' ? useUsersSnapshot() : ((window.__users && window.__users.items) || (window.DEMO_USERS || [])));
  const options = users.filter((u) => u.active !== false).map((u) => ({ value: u.id, label: u.name, sub: [u.department, u.email].filter(Boolean).join(' · ') }));
  const [sel, setSel] = React.useState('');
  const Picker = window.SearchPicker;
  const submit = () => {
    const u = users.find((x) => x.id === sel);
    if (!u) { alert('Lütfen ekipmanı atayacağınız personeli seçin.'); return; }
    window.__assets && window.__assets.reassign && window.__assets.reassign(a.id, { id: u.id, name: u.name, dept: u.department || '' });
    onClose();
  };
  const row = (k, v) => (
    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 13, padding: '6px 0' }}>
      <span style={{ color: c.muted }}>{k}</span>
      <span style={{ color: c.text, fontWeight: 600, textAlign: 'right' }}>{v}</span>
    </div>
  );
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: 16 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: c.card, borderRadius: 16, width: isMobile ? '100%' : 520, maxWidth: '100%', maxHeight: '92vh', overflowY: 'auto', border: `1px solid ${c.border}` }}>
        <div style={{ padding: '18px 22px', borderBottom: `1px solid ${c.border}` }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: c.text }}>Havuzdan Yeniden Ata · {a.name}</div>
          <div style={{ fontSize: 12.5, color: c.muted, marginTop: 3 }}>Ekipmanı yeni personele atayın; kişi Zimmetlerim'den imzalayınca kullanıma geçer.</div>
        </div>
        <div style={{ padding: 22 }}>
          <div style={{ background: c.surface, border: `1px solid ${c.borderSoft}`, borderRadius: 12, padding: '12px 16px', marginBottom: 16 }}>
            {row('Ekipman', a.name)}
            {row('Adet', a.qty + ' adet')}
            {a.seriNo && row('Seri No', a.seriNo)}
            {a.pool && a.pool.fromOwnerName && row('Önceki sahip', a.pool.fromOwnerName + (a.pool.fromOwnerDept ? ' · ' + a.pool.fromOwnerDept : ''))}
          </div>
          <label style={{ fontSize: 12, fontWeight: 600, color: c.muted, display: 'block', marginBottom: 6 }}>Yeni personel *</label>
          {Picker
            ? <Picker c={c} options={options} value={sel} onChange={setSel} placeholder="Personel arayın…" />
            : <select value={sel} onChange={(e) => setSel(e.target.value)} style={{ width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 10, border: `1px solid ${c.border}`, background: c.surface, color: c.text, fontSize: 13.5, fontFamily: 'inherit' }}>
                <option value="">Personel seçin…</option>
                {options.map((o) => <option key={o.value} value={o.value}>{o.label}{o.sub ? ` — ${o.sub}` : ''}</option>)}
              </select>}
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, padding: '16px 22px', borderTop: `1px solid ${c.border}` }}>
          <button onClick={onClose} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: `1px solid ${c.border}`, background: 'transparent', color: c.muted, fontSize: 13, fontWeight: 600, padding: '10px 16px', borderRadius: 10 }}>Vazgeç</button>
          <button onClick={submit} disabled={!sel} style={{ appearance: 'none', cursor: sel ? 'pointer' : 'default', fontFamily: 'inherit', border: 'none', background: sel ? '#0369A1' : c.border, color: '#fff', fontSize: 13, fontWeight: 700, padding: '10px 18px', borderRadius: 10, opacity: sel ? 1 : 0.7 }}>♻️ Ata ve imzaya gönder</button>
        </div>
      </div>
    </div>
  );
}

// ─────────── Zimmetlerim / Sanal Depom (Faz 7.3) — kullanıcı tarafı ───────────
// Kullanıcı deposundaki (received) ekipmanı dijital zimmet formuyla imzalayıp teslim alır
// (in_use). Üzerindeki tüm zimmetli ekipmanı burada görür.
function MyAssetsPage({ initialDark = false, user }) {
  const [dark, setDark] = React.useState(initialDark);
  React.useEffect(() => { setDark(initialDark); }, [initialDark]);
  const c = catalogTheme(dark);
  const isMobile = useIsMobile();
  const cart = useCartSnapshot();
  const assets = useAssetsSnapshot();
  const me = useCurrentUser();

const mine = assets.filter((a) => me && a.ownerId === me.id);
  const awaiting = mine.filter((a) => a.status === 'received');   // imza bekleyen
  const inUse = mine.filter((a) => a.status === 'in_use' || a.status === 'in_service' || a.status === 'scrap_pending' || a.status === 'return_pending');  // üzerimde (serviste/hurda/iade sürecinde dahil)
  const [tab, setTab] = React.useState('awaiting');
  const [signTarget, setSignTarget] = React.useState(null);
  const [returnTarget, setReturnTarget] = React.useState(null);
  React.useEffect(() => { if (awaiting.length === 0 && tab === 'awaiting') setTab('mine'); }, [awaiting.length]);  // imza biterse otomatik geç
  const shown = tab === 'awaiting' ? awaiting : inUse;

const tabBtn = (key, label, count) => (
    <button onClick={() => setTab(key)} style={{
      appearance: 'none', cursor: 'pointer', fontFamily: 'inherit',
      padding: '9px 14px', borderRadius: 999, border: `1px solid ${tab === key ? c.primary : c.border}`,
      background: tab === key ? c.primary : 'transparent', color: tab === key ? '#fff' : c.muted,
      fontSize: 13, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 7,
    }}>
      {label}
      {count > 0 && <span style={{ fontSize: 11, fontWeight: 700, padding: '1px 7px', borderRadius: 999, background: tab === key ? 'rgba(255,255,255,0.25)' : c.chipBg, color: tab === key ? '#fff' : c.muted }}>{count}</span>}
    </button>
  );

return (
    <div style={{ minHeight: '100%', background: c.bg, fontFamily: 'Inter, system-ui, sans-serif' }}>
      {signTarget && <HandoverModal a={signTarget} c={c} me={me} onClose={() => setSignTarget(null)} />}
      {returnTarget && <ReturnModal a={returnTarget} c={c} me={me} onClose={() => setReturnTarget(null)} />}
      <CatalogHeader c={c} dark={dark} onToggleDark={() => setDark((x) => !x)} cartCount={cart.length} notifCount={0} />

<div style={{ maxWidth: 880, margin: '0 auto', padding: isMobile ? '18px 16px 40px' : '28px 28px 56px' }}>
        <div style={{ marginBottom: 16 }}>
          <h1 style={{ margin: 0, fontSize: isMobile ? 20 : 23, fontWeight: 700, color: c.text, letterSpacing: '-0.015em' }}>Zimmetlerim</h1>
          <div style={{ fontSize: 13, color: c.muted, marginTop: 4 }}>
            Üzerinize zimmetli ekipman · {awaiting.length > 0 ? `${awaiting.length} kalem imzanızı bekliyor` : 'imza bekleyen yok'}
          </div>
        </div>

<div style={{ display: 'flex', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
          {tabBtn('awaiting', 'İmza Bekleyenler', awaiting.length)}
          {tabBtn('mine', 'Zimmetimdekiler', inUse.length)}
        </div>

{shown.length === 0 ? (
          <div style={{ background: c.card, border: `1px dashed ${c.border}`, borderRadius: 16, padding: 48, textAlign: 'center', color: c.muted }}>
            <div style={{ fontSize: 15, fontWeight: 600, color: c.text, marginBottom: 6 }}>
              {tab === 'awaiting' ? 'İmza bekleyen ekipman yok' : 'Üzerinize zimmetli ekipman yok'}
            </div>
            {tab === 'awaiting' ? 'Depo ekipmanı teslim alıp size haber verdiğinde burada imzalayabilirsiniz.' : 'Zimmet formunu imzaladığınız ekipmanlar burada listelenir.'}
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {shown.map((a) => <MyAssetCard key={a.id} a={a} c={c} isMobile={isMobile} onSign={() => setSignTarget(a)} onReturn={() => setReturnTarget(a)} />)}
          </div>
        )}
      </div>
    </div>
  );
}

// Dijital zimmet/teslim formu — kullanıcı onay kutusunu işaretleyip imzalar (in_use'a geçer).
function HandoverModal({ a, c, me, onClose }) {
  const isMobile = useIsMobile();
  const [accepted, setAccepted] = React.useState(false);
  const sign = () => {
    if (!accepted) return;
    window.__assets && window.__assets.sign && window.__assets.sign(a.id, me ? me.name : a.ownerName);
    onClose();
  };
  const row = (k, v) => (
    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 13, padding: '6px 0' }}>
      <span style={{ color: c.muted }}>{k}</span>
      <span style={{ color: c.text, fontWeight: 600, textAlign: 'right' }}>{v}</span>
    </div>
  );
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: 16 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: c.card, borderRadius: 16, width: isMobile ? '100%' : 520, maxWidth: '100%', maxHeight: '92vh', overflowY: 'auto', border: `1px solid ${c.border}` }}>
        <div style={{ padding: '18px 22px', borderBottom: `1px solid ${c.border}` }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: c.text }}>Dijital Zimmet / Teslim Formu</div>
          <div style={{ fontSize: 12.5, color: c.muted, marginTop: 3 }}>Ekipmanı teslim aldığınızı onaylıyorsunuz; sorumluluğu üzerinize geçer.</div>
        </div>
        <div style={{ padding: 22 }}>
          <div style={{ background: c.surface, border: `1px solid ${c.borderSoft}`, borderRadius: 12, padding: '12px 16px', marginBottom: 16 }}>
            {row('Ekipman', a.name)}
            {row('Adet', a.qty + ' adet')}
            {a.seriNo && row('Seri No', a.seriNo)}
            {(() => { const w = warrantyInfo(a); if (!w) return null; return row('Garanti', w.none ? (w.label || 'Garantisiz') : (w.until ? `${w.until}${w.expired ? ' · doldu' : ''}` : (w.label || '—'))); })()}
            {row('Zimmet sahibi', (me ? me.name : a.ownerName) + (a.ownerDept ? ' · ' + a.ownerDept : ''))}
            {row('Depo', depotModuleLabel(a.module))}
            {row('Sipariş', a.poNo + (a.supplier ? ' · ' + a.supplier : ''))}
            {row('Teslim eden', a.receivedBy || '—')}
          </div>
          <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', cursor: 'pointer', fontSize: 13, color: c.text, lineHeight: 1.5 }}>
            <input type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} style={{ marginTop: 3, width: 16, height: 16, accentColor: c.primary }} />
            <span><b>{a.name}</b> ekipmanını eksiksiz ve çalışır durumda teslim aldığımı, korunması ve iadesinden sorumlu olduğumu kabul ederim. (Elektronik imza · {me ? me.name : a.ownerName} · {new Date().toLocaleDateString('tr-TR')})</span>
          </label>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, padding: '16px 22px', borderTop: `1px solid ${c.border}` }}>
          <button onClick={onClose} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: `1px solid ${c.border}`, background: 'transparent', color: c.muted, fontSize: 13, fontWeight: 600, padding: '10px 16px', borderRadius: 10 }}>Vazgeç</button>
          <button onClick={sign} disabled={!accepted} style={{ appearance: 'none', cursor: accepted ? 'pointer' : 'default', fontFamily: 'inherit', border: 'none', background: accepted ? c.success : c.border, color: '#fff', fontSize: 13, fontWeight: 700, padding: '10px 18px', borderRadius: 10, opacity: accepted ? 1 : 0.7 }}>✍️ İmzala ve teslim al</button>
        </div>
      </div>
    </div>
  );
}

// İADE formu (Faz 8.1) — kullanıcı kendi zimmetini iade eder (in_use → return_pending).
// Ekipman, ürünün modülünün deposuna döner; depo teslim alıp havuza/hurdaya yönlendirir (F8.2).
function ReturnModal({ a, c, me, onClose }) {
  const isMobile = useIsMobile();
  const [reason, setReason] = React.useState('');
  const [accepted, setAccepted] = React.useState(false);
  const submit = () => {
    if (!accepted) return;
    window.__assets && window.__assets.initiateReturn && window.__assets.initiateReturn(a.id, { reason: reason.trim() });
    onClose();
  };
  const row = (k, v) => (
    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 13, padding: '6px 0' }}>
      <span style={{ color: c.muted }}>{k}</span>
      <span style={{ color: c.text, fontWeight: 600, textAlign: 'right' }}>{v}</span>
    </div>
  );
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: 16 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: c.card, borderRadius: 16, width: isMobile ? '100%' : 520, maxWidth: '100%', maxHeight: '92vh', overflowY: 'auto', border: `1px solid ${c.border}` }}>
        <div style={{ padding: '18px 22px', borderBottom: `1px solid ${c.border}` }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: c.text }}>Ekipman İadesi</div>
          <div style={{ fontSize: 12.5, color: c.muted, marginTop: 3 }}>Ekipman ilgili depoya iade edilecek; teslim alınınca zimmetinizden düşer.</div>
        </div>
        <div style={{ padding: 22 }}>
          <div style={{ background: c.surface, border: `1px solid ${c.borderSoft}`, borderRadius: 12, padding: '12px 16px', marginBottom: 16 }}>
            {row('Ekipman', a.name)}
            {row('Adet', a.qty + ' adet')}
            {a.seriNo && row('Seri No', a.seriNo)}
            {row('İade edilecek depo', depotModuleLabel(a.module))}
            {row('Zimmet sahibi', (me ? me.name : a.ownerName))}
          </div>
          <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: c.muted, marginBottom: 6 }}>İade gerekçesi (opsiyonel)</label>
          <textarea value={reason} onChange={(e) => setReason(e.target.value)} rows={3} placeholder="Örn. yenisiyle değiştirildi, arızalı, artık kullanılmıyor…" style={{ width: '100%', boxSizing: 'border-box', resize: 'vertical', fontFamily: 'inherit', fontSize: 13, color: c.text, background: c.surface, border: `1px solid ${c.border}`, borderRadius: 10, padding: '10px 12px', marginBottom: 16 }} />
          <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', cursor: 'pointer', fontSize: 13, color: c.text, lineHeight: 1.5 }}>
            <input type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} style={{ marginTop: 3, width: 16, height: 16, accentColor: '#7C3AED' }} />
            <span><b>{a.name}</b> ekipmanını iade etmek istediğimi onaylıyorum. (Elektronik onay · {me ? me.name : a.ownerName} · {new Date().toLocaleDateString('tr-TR')})</span>
          </label>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, padding: '16px 22px', borderTop: `1px solid ${c.border}` }}>
          <button onClick={onClose} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: `1px solid ${c.border}`, background: 'transparent', color: c.muted, fontSize: 13, fontWeight: 600, padding: '10px 16px', borderRadius: 10 }}>Vazgeç</button>
          <button onClick={submit} disabled={!accepted} style={{ appearance: 'none', cursor: accepted ? 'pointer' : 'default', fontFamily: 'inherit', border: 'none', background: accepted ? '#7C3AED' : c.border, color: '#fff', fontSize: 13, fontWeight: 700, padding: '10px 18px', borderRadius: 10, opacity: accepted ? 1 : 0.7 }}>↩️ İade et</button>
        </div>
      </div>
    </div>
  );
}

// PERSONEL AYRILIŞI / TOPLU İADE (Faz 8.1) — yönetici/İK bir kişinin TÜM zimmetlerini tek seferde
// iadeye çıkarır. Admin panel kullanıcı listesinden açılır. user: { id, name, department }
function OffboardModal({ user, c, me, onClose }) {
  const isMobile = useIsMobile();
  const assets = (typeof useAssetsSnapshot === 'function' ? useAssetsSnapshot() : ((window.__assets && window.__assets.items) || []));
  const mine = assets.filter((a) => a.ownerId === user.id && a.status === 'in_use');
  const [reason, setReason] = React.useState('');
  const [confirmed, setConfirmed] = React.useState(false);
  const submit = () => {
    if (!mine.length || !confirmed) return;
    window.__assets && window.__assets.offboardUser && window.__assets.offboardUser(user.id, { reason: reason.trim() || 'Personel ayrılışı' });
    onClose();
  };
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: 16 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: c.card, borderRadius: 16, width: isMobile ? '100%' : 560, maxWidth: '100%', maxHeight: '92vh', overflowY: 'auto', border: `1px solid ${c.border}` }}>
        <div style={{ padding: '18px 22px', borderBottom: `1px solid ${c.border}` }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: c.text }}>Personel Ayrılışı · Zimmet İadesi</div>
          <div style={{ fontSize: 12.5, color: c.muted, marginTop: 3 }}><b>{user.name}</b>{user.department ? ` · ${user.department}` : ''} üzerindeki tüm zimmetler iadeye çıkarılır.</div>
        </div>
        <div style={{ padding: 22 }}>
          {mine.length === 0 ? (
            <div style={{ background: c.surface, border: `1px dashed ${c.border}`, borderRadius: 12, padding: 28, textAlign: 'center', color: c.muted, fontSize: 13 }}>
              Bu kullanıcının üzerinde kullanımda (zimmetli) ekipman bulunmuyor.
            </div>
          ) : (
            <React.Fragment>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: c.muted, marginBottom: 8 }}>{mine.length} ekipman iadeye çıkarılacak:</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
                {mine.map((a) => (
                  <div key={a.id} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center', background: c.surface, border: `1px solid ${c.borderSoft}`, borderRadius: 10, padding: '9px 13px' }}>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: c.text }}>{a.name}</div>
                      <div style={{ fontSize: 11.5, color: c.subtle }}>{a.qty} adet · {depotModuleLabel(a.module)}{a.seriNo ? ` · Seri ${a.seriNo}` : ''}</div>
                    </div>
                    <span style={{ fontSize: 11, fontWeight: 700, color: '#7C3AED', background: 'rgba(124,58,237,0.12)', padding: '2px 8px', borderRadius: 999, whiteSpace: 'nowrap' }}>↩️ İade</span>
                  </div>
                ))}
              </div>
              <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: c.muted, marginBottom: 6 }}>Ayrılış gerekçesi / not (opsiyonel)</label>
              <textarea value={reason} onChange={(e) => setReason(e.target.value)} rows={2} placeholder="Örn. istifa, sözleşme bitişi…" style={{ width: '100%', boxSizing: 'border-box', resize: 'vertical', fontFamily: 'inherit', fontSize: 13, color: c.text, background: c.surface, border: `1px solid ${c.border}`, borderRadius: 10, padding: '10px 12px', marginBottom: 16 }} />
              <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', cursor: 'pointer', fontSize: 13, color: c.text, lineHeight: 1.5 }}>
                <input type="checkbox" checked={confirmed} onChange={(e) => setConfirmed(e.target.checked)} style={{ marginTop: 3, width: 16, height: 16, accentColor: '#7C3AED' }} />
                <span><b>{user.name}</b> ayrılıyor; yukarıdaki {mine.length} ekipmanı iadeye çıkardığımı onaylıyorum.</span>
              </label>
            </React.Fragment>
          )}
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, padding: '16px 22px', borderTop: `1px solid ${c.border}` }}>
          <button onClick={onClose} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: `1px solid ${c.border}`, background: 'transparent', color: c.muted, fontSize: 13, fontWeight: 600, padding: '10px 16px', borderRadius: 10 }}>{mine.length === 0 ? 'Kapat' : 'Vazgeç'}</button>
          {mine.length > 0 && <button onClick={submit} disabled={!confirmed} style={{ appearance: 'none', cursor: confirmed ? 'pointer' : 'default', fontFamily: 'inherit', border: 'none', background: confirmed ? '#7C3AED' : c.border, color: '#fff', fontSize: 13, fontWeight: 700, padding: '10px 18px', borderRadius: 10, opacity: confirmed ? 1 : 0.7 }}>↩️ {mine.length} ekipmanı iadeye çıkar</button>}
        </div>
      </div>
    </div>
  );
}

// ─────────── İSG & Çevre · Hurda Yönetimi (Faz 9) ───────────
// Onaylı hurdalar (scrapped) burada birikir; İSG & Çevre görevlisi belirli dönemlerde hurdacıya
// toptan satar (sold:true + alıcı + tutar + tutanak → arşiv). Org genelinde (modüle bağlı değil).
const fmtTRY = (n) => (Number(n) || 0).toLocaleString('tr-TR') + ' ₺';

function HsePanel({ initialDark = false, user }) {
  const [dark, setDark] = React.useState(initialDark);
  React.useEffect(() => { setDark(initialDark); }, [initialDark]);
  const c = catalogTheme(dark);
  const isMobile = useIsMobile();
  const assets = useAssetsSnapshot();
  const scrapped = assets.filter((a) => a.status === 'scrapped');
  const unsold = scrapped.filter((a) => !(a.scrap && a.scrap.sold));
  const sold = scrapped.filter((a) => a.scrap && a.scrap.sold);
  const [tab, setTab] = React.useState('pending');
  const [sel, setSel] = React.useState(() => new Set());
  const [q, setQ] = React.useState('');
  const [saleOpen, setSaleOpen] = React.useState(false);

const ql = q.trim().toLowerCase();
  const match = (a) => !ql || [a.name, a.seriNo, a.pool && a.pool.fromOwnerName, a.ownerName, a.poNo, depotModuleLabel(a.module)].filter(Boolean).join(' ').toLowerCase().includes(ql);
  const shownPending = unsold.filter(match);
  const shownSold = sold.filter(match);

const toggle = (id) => setSel((prev) => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; });
  const allShownIds = shownPending.map((a) => a.id);
  const allSelected = allShownIds.length > 0 && allShownIds.every((id) => sel.has(id));
  const toggleAll = () => setSel(() => allSelected ? new Set() : new Set(allShownIds));
  const selectedAssets = unsold.filter((a) => sel.has(a.id));

// Arşiv: satış (saleId) bazında grupla
  const sales = {};
  sold.forEach((a) => { const sid = (a.scrap.sale && a.scrap.sale.saleId) || 'tek'; (sales[sid] = sales[sid] || { sale: a.scrap.sale || {}, items: [] }).items.push(a); });
  const filteredSales = Object.keys(sales).map((sid) => sales[sid]).filter((g) => g.items.some(match)).sort((a, b) => (b.sale.soldAt || '').localeCompare(a.sale.soldAt || ''));

const tabBtn = (key, label, count) => (
    <button onClick={() => setTab(key)} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', padding: '9px 14px', borderRadius: 999, border: `1px solid ${tab === key ? c.primary : c.border}`, background: tab === key ? c.primary : 'transparent', color: tab === key ? '#fff' : c.muted, fontSize: 13, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 7 }}>
      {label}{count > 0 && <span style={{ fontSize: 11, fontWeight: 700, padding: '1px 7px', borderRadius: 999, background: tab === key ? 'rgba(255,255,255,0.25)' : c.chipBg, color: tab === key ? '#fff' : c.muted }}>{count}</span>}
    </button>
  );

const archiveSum = Object.keys(sales).reduce((s, sid) => s + (Number(sales[sid].sale.amount) || 0), 0);

return (
    <div style={{ minHeight: '100%', background: c.bg, fontFamily: 'Inter, system-ui, sans-serif' }}>
      {saleOpen && <ScrapSaleModal ids={selectedAssets.map((a) => a.id)} items={selectedAssets} c={c} onClose={() => { setSaleOpen(false); setSel(new Set()); }} />}
      <CatalogHeader c={c} dark={dark} onToggleDark={() => setDark((x) => !x)} cartCount={0} notifCount={0} />

<div style={{ maxWidth: 920, margin: '0 auto', padding: isMobile ? '18px 16px 40px' : '28px 28px 56px' }}>
        <div style={{ marginBottom: 16 }}>
          <h1 style={{ margin: 0, fontSize: isMobile ? 20 : 23, fontWeight: 700, color: c.text, letterSpacing: '-0.015em' }}>İSG & Çevre · Hurda Yönetimi</h1>
          <div style={{ fontSize: 13, color: c.muted, marginTop: 4 }}>
            Onaylı hurda ekipmanın hurdacıya satış / imha sürecini yürütün · {unsold.length > 0 ? `${unsold.length} kalem satış bekliyor` : 'satış bekleyen hurda yok'}
          </div>
        </div>

{/* Özet kartları */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)', gap: 12, marginBottom: 18 }}>
          <StatCardLite c={c} label="Satış bekleyen" value={unsold.length} sub="kalem" color="#6B7280" />
          <StatCardLite c={c} label="Satılan / arşiv" value={sold.length} sub="kalem" color="#047857" />
          <StatCardLite c={c} label="Toplam satış geliri" value={fmtTRY(archiveSum)} sub={`${Object.keys(sales).length} satış`} color="#0369A1" />
        </div>

<div style={{ display: 'flex', gap: 8, marginBottom: 14, flexWrap: 'wrap' }}>
          {tabBtn('pending', 'Satış Bekleyenler', unsold.length)}
          {tabBtn('archive', 'Arşiv · Satılanlar', sold.length)}
        </div>

<div style={{ position: 'relative', marginBottom: 14 }}>
          <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: c.muted, fontSize: 14, pointerEvents: 'none' }}>🔍</span>
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Seri no, ürün, önceki sahip, alıcı ile ara…" style={{ width: '100%', boxSizing: 'border-box', padding: '10px 36px', borderRadius: 10, border: `1px solid ${c.border}`, background: c.inputBg || c.surface, color: c.text, fontSize: 13.5, fontFamily: 'inherit', outline: 'none' }} />
          {q && <button onClick={() => setQ('')} style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', appearance: 'none', border: 'none', background: 'transparent', cursor: 'pointer', color: c.muted, fontSize: 15, fontWeight: 700 }}>✕</button>}
        </div>

{tab === 'pending' ? (
          shownPending.length === 0 ? (
            <div style={{ background: c.card, border: `1px dashed ${c.border}`, borderRadius: 16, padding: 48, textAlign: 'center', color: c.muted }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: c.text, marginBottom: 6 }}>Satış bekleyen hurda yok</div>
              IT Müdürü hurda talebini onayladıkça ekipmanlar burada birikir; toplu olarak hurdacıya satabilirsiniz.
            </div>
          ) : (
            <React.Fragment>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, marginBottom: 12, flexWrap: 'wrap' }}>
                <label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, color: c.muted, cursor: 'pointer' }}>
                  <input type="checkbox" checked={allSelected} onChange={toggleAll} style={{ width: 16, height: 16, accentColor: c.primary }} />
                  Tümünü seç ({allShownIds.length})
                </label>
                <button onClick={() => setSaleOpen(true)} disabled={sel.size === 0} style={{ appearance: 'none', cursor: sel.size ? 'pointer' : 'default', fontFamily: 'inherit', border: 'none', background: sel.size ? '#0369A1' : c.border, color: '#fff', fontSize: 13, fontWeight: 700, padding: '10px 16px', borderRadius: 10, opacity: sel.size ? 1 : 0.7 }}>🤝 Hurdacıya sat ({sel.size})</button>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {shownPending.map((a) => <HseScrapCard key={a.id} a={a} c={c} isMobile={isMobile} selectable checked={sel.has(a.id)} onToggle={() => toggle(a.id)} />)}
              </div>
            </React.Fragment>
          )
        ) : (
          filteredSales.length === 0 ? (
            <div style={{ background: c.card, border: `1px dashed ${c.border}`, borderRadius: 16, padding: 48, textAlign: 'center', color: c.muted }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: c.text, marginBottom: 6 }}>Arşivde satış kaydı yok</div>
              Hurdacıya yapılan satışlar (alıcı, tutar, tarih) burada arşivlenir.
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {filteredSales.map((g, gi) => (
                <div key={gi} style={{ background: c.card, border: `1px solid ${c.border}`, borderRadius: 16, overflow: 'hidden' }}>
                  <div style={{ padding: isMobile ? '14px 16px' : '16px 20px', borderBottom: `1px solid ${c.borderSoft}`, background: c.surface }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
                      <div>
                        <div style={{ fontSize: 15, fontWeight: 700, color: c.text }}>🤝 {g.sale.buyer || 'Hurdacı'}</div>
                        <div style={{ fontSize: 12, color: c.muted, marginTop: 2 }}>{g.items.length} kalem · {g.sale.soldDate || g.sale.soldAt || '—'}{g.sale.soldByName ? ` · ${g.sale.soldByName}` : ''}</div>
                      </div>
                      <div style={{ textAlign: 'right' }}>
                        <div style={{ fontSize: 18, fontWeight: 800, color: '#047857' }}>{fmtTRY(g.sale.amount)}</div>
                        <div style={{ fontSize: 11, color: c.subtle }}>toptan satış bedeli</div>
                      </div>
                    </div>
                    {g.sale.note && <div style={{ fontSize: 12, color: c.muted, marginTop: 8 }}>Not: {g.sale.note}</div>}
                    {g.sale.docDataUrl && <a href={g.sale.docDataUrl} target="_blank" rel="noreferrer" style={{ fontSize: 12, fontWeight: 600, color: c.primary, textDecoration: 'none', display: 'inline-block', marginTop: 6 }}>📄 Satış tutanağı</a>}
                  </div>
                  <div style={{ padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {g.items.map((a) => <HseScrapCard key={a.id} a={a} c={c} isMobile={isMobile} compact />)}
                  </div>
                </div>
              ))}
            </div>
          )
        )}
      </div>
    </div>
  );
}

function StatCardLite({ c, label, value, sub, color }) {
  return (
    <div style={{ background: c.card, border: `1px solid ${c.border}`, borderRadius: 14, padding: '14px 16px' }}>
      <div style={{ fontSize: 11.5, fontWeight: 600, color: c.muted, textTransform: 'uppercase', letterSpacing: '0.03em' }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 800, color: color || c.text, marginTop: 4 }}>{value}</div>
      {sub && <div style={{ fontSize: 11.5, color: c.subtle, marginTop: 1 }}>{sub}</div>}
    </div>
  );
}

// Hurdacıya toptan satış formu (Faz 9): seçili hurdaları tek alıcıya, toplu bedelle satar.
function ScrapSaleModal({ ids, items, c, onClose }) {
  const isMobile = useIsMobile();
  const today = new Date().toISOString().slice(0, 10);
  const [buyer, setBuyer] = React.useState('');
  const [amount, setAmount] = React.useState('');
  const [soldDate, setSoldDate] = React.useState(today);
  const [note, setNote] = React.useState('');
  const [docDataUrl, setDocDataUrl] = React.useState('');
  const [docName, setDocName] = React.useState('');
  const onFile = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    if (f.size > 4 * 1024 * 1024) { alert('Dosya 4 MB\'tan küçük olmalı.'); return; }
    const r = new FileReader();
    r.onload = () => { setDocDataUrl(r.result); setDocName(f.name); };
    r.readAsDataURL(f);
  };
  const valid = buyer.trim() && (Number(amount) || 0) > 0;
  const submit = () => {
    if (!valid) { alert('Alıcı (hurdacı) ve satış bedeli zorunludur.'); return; }
    window.__assets && window.__assets.sellScrap && window.__assets.sellScrap(ids, { buyer: buyer.trim(), amount: Number(amount) || 0, soldDate, docDataUrl, note: note.trim() });
    onClose();
  };
  const lbl = { fontSize: 12, fontWeight: 600, color: c.muted, display: 'block', marginBottom: 6 };
  const inp = { width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 10, border: `1px solid ${c.border}`, background: c.inputBg || c.surface, color: c.text, fontSize: 13.5, fontFamily: 'inherit' };
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: 16 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: c.card, borderRadius: 16, width: isMobile ? '100%' : 560, maxWidth: '100%', maxHeight: '92vh', overflowY: 'auto', border: `1px solid ${c.border}` }}>
        <div style={{ padding: '18px 22px', borderBottom: `1px solid ${c.border}` }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: c.text }}>Hurdacıya Toptan Satış</div>
          <div style={{ fontSize: 12.5, color: c.muted, marginTop: 3 }}>{(items || []).length} hurda kalemi tek alıcıya, toplu bedelle satılır ve arşivlenir.</div>
        </div>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ background: c.surface, border: `1px solid ${c.borderSoft}`, borderRadius: 12, padding: '10px 12px', maxHeight: 160, overflowY: 'auto' }}>
            {(items || []).map((a) => (
              <div key={a.id} style={{ fontSize: 12.5, color: c.text, padding: '4px 0', display: 'flex', justifyContent: 'space-between', gap: 10 }}>
                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.name}{a.seriNo ? ` · ${a.seriNo}` : ''}</span>
                <span style={{ color: c.muted, flexShrink: 0 }}>{depotModuleLabel(a.module)}</span>
              </div>
            ))}
          </div>
          <div><label style={lbl}>Alıcı · hurdacı firma *</label><input value={buyer} onChange={(e) => setBuyer(e.target.value)} style={inp} placeholder="örn. Öz Geri Dönüşüm Ltd. Şti." /></div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 }}>
            <div><label style={lbl}>Toptan satış bedeli (₺) *</label><input value={amount} onChange={(e) => setAmount(e.target.value)} inputMode="numeric" style={inp} placeholder="örn. 4500" /></div>
            <div><label style={lbl}>Satış tarihi</label><input type="date" value={soldDate} onChange={(e) => setSoldDate(e.target.value)} style={inp} /></div>
          </div>
          <div><label style={lbl}>Not <span style={{ color: c.subtle, fontWeight: 400 }}>(opsiyonel)</span></label><textarea value={note} onChange={(e) => setNote(e.target.value)} rows={2} style={{ ...inp, resize: 'vertical' }} placeholder="örn. kg üzerinden, tartı fişi ektedir." /></div>
          <div>
            <label style={lbl}>Satış tutanağı / fiş <span style={{ color: c.subtle, fontWeight: 400 }}>(opsiyonel)</span></label>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <label style={{ cursor: 'pointer', fontSize: 12.5, fontWeight: 600, color: c.primary, border: `1px solid ${c.border}`, borderRadius: 10, padding: '9px 14px' }}>📎 Dosya seç<input type="file" accept="image/*,.pdf" onChange={onFile} style={{ display: 'none' }} /></label>
              {docName && <span style={{ fontSize: 12, color: c.muted }}>{docName} <button onClick={() => { setDocDataUrl(''); setDocName(''); }} style={{ appearance: 'none', border: 'none', background: 'transparent', color: c.danger, cursor: 'pointer', fontWeight: 700 }}>✕</button></span>}
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, padding: '16px 22px', borderTop: `1px solid ${c.border}` }}>
          <button onClick={onClose} style={{ appearance: 'none', cursor: 'pointer', fontFamily: 'inherit', border: `1px solid ${c.border}`, background: 'transparent', color: c.muted, fontSize: 13, fontWeight: 600, padding: '10px 16px', borderRadius: 10 }}>Vazgeç</button>
          <button onClick={submit} disabled={!valid} style={{ appearance: 'none', cursor: valid ? 'pointer' : 'default', fontFamily: 'inherit', border: 'none', background: valid ? '#047857' : c.border, color: '#fff', fontSize: 13, fontWeight: 700, padding: '10px 18px', borderRadius: 10, opacity: valid ? 1 : 0.7 }}>🤝 Satışı kaydet</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DepotPanel, AssetCard, ReceiveModal, ServiceFormModal, ServiceReturnModal, ScrapModal, printServiceForm, COMPANY_INFO, WarrantyBadge, warrantyInfo, WARRANTY_OPTS, DEPOT_STATUS_META, depotModuleLabel, overseenDepotModules, MyAssetsPage, MyAssetCard, HandoverModal, ReturnModal, OffboardModal, ReturnReceiveModal, ReassignModal, HsePanel, ScrapSaleModal, HseScrapCard, StatCardLite, PoolInquiryCard });

📤 Gönderici

📥 Alıcı (Servis Firması)

💻 Ekipman Bilgileri

🔧 Arıza / Gönderim Açıklaması

{approverOnly ? 'Hurda Onayları' : 'Depo'}