Deneyim: Butonlu Resimli Envanter Dashboard

Butonlu Resimli Envanter Dashboard

Bu çalışma, Tüm Excel çalışmalarını hızlıca filtreleme ve kolayca aranan bilgiye erişebilmek için yapılan, uzun soluklu bir çalışmadır.

Raporlama ve Analiz. Bu iki kavram etkin rapor sunmayla varlığını sürdürmektedir. Bu aşamada ise en önemli kısım hızdır. Farklı listeler üzerinde analizler söz konusu olduğunda, elimde bir tool olsa oradan hızlıca filtreleyip hızlıca sonuca varabilsem düşüncesinin bir sonucu olarak ortaya çıkan bir üründür.

HTML kod olarak hazırlanan çalışma, sayfa sonunda yer almaktadır. Bir not defteri açıp kodu not alanına yapıştırın. Dosya ismi verip, uzantıyı ".html" olarak kaydetmeniz yeterli. sonrasında, çift tıklayarak çalıştırın.

Bu çalışma ile, "Dosya Seç" ile dosya okuma sağlandıktan sonra; Başlıklara basarak, başlık içinde yer alan farklı ifadelere göre dilimleyici butonlar oluşması, butonlara tıklama ile, filtre ve birden fazla butona basılması ile, filtre içinde filtrelemeye imkan sunmaktadır. Tüm başlıkların sütun içeriklerinde ise, yukarıdaki arama alanında yazarken filtrelemeye imkan sunmaktadır.

Kodda yapılan çalışmalarla, nihai sonuçtaki kazanımlar; başlık alanında "Envanter" ibaresi alanındaki ifade, dosya ismi olacak şekilde düzenlendi. Ayrıca varsayılan olarak atanan tüm ibareler, HELDESK KOORDİNATÖRLÜĞÜ" ve "MYO MÜDÜRLÜĞÜ" alanlarına seri olarak 5 defa art arda basılmasıyla başlıkta değişime izin verildi.

Birde resim alanına 5 defa art arda basılmasıyla, resimin eşleşeceği sütun bilgisi ataması yapabilirsiniz. (Örneğin default olarak "D" sütunu atandı. Excelinizde resim içermesini istediğiniz ürün modelini "D" sütununa denk gelecek şekilde koyabilir veya 5 kez peş peşe basarak sütun harfi atayabilirsiniz. "C" atayabilirsiniz. (Resmin görünebilmesi için, html dosyanın bulunduğu yerde "Resim" isminde klasör olmalı. Bu klasörün içinde, tablodan eşleşmesini istediğiniz tüm ürünlerle aynı isim ve uzantılı resimler ".jpg" uzantılı olmalı. Örneğin: "ThinkPad E14.jpg" ve "WorkCentre 3025.jpg" gibi.

Uygulama adımları 1:

Resim alanına 5 defa art arda basılmasıyla, resimin eşleşeceği sütun bilgisi ataması yapabilirsiniz. (Örneğin default olarak "D" sütunu atandı. Excelinizde resim içermesini istediğiniz ürün modelini "D" sütununa denk gelecek şekilde koyabilir veya 5 kez peş peşe basarak sütun harfi atayabilirsiniz. "C" atayabilirsiniz.

Uygulama adımları 2:

HELDESK KOORDİNATÖRLÜĞÜ" alanına seri olarak 5 defa art arda basılmasıyla başlıkta değişim.

Uygulama adımları 3:

"MYO MÜDÜRLÜĞÜ" alanlarına seri olarak 5 defa art arda basılmasıyla başlıkta değişim gerçekleşmektedir.

Başlıklara tıklayarak oluşturulan butonlar, istenirse oluşan satırdaki "Kaldır" butonuna basılarak kaldırılabilir. "Filtreleri Sıfırla" butonuna basarak tüm filtreler toplu olarak kaldırılabilir.

İçeri aktarılan tablodan, başlıklardan hangisine tıklarsanız, dilimleme başlıkları ve içeriğine göre butonlar oluşacaktır.

Butonlara basarak filtreleme işlemlerini gerçekleştirebilirsiniz. Başlık alanında orta kısımda, tablodaki toplam satır sayısı, filtre durumunda bulunan sonuca göre oranı ve bulunan filtre adeti bu alana yansımaktadır.

Arama penceresi ile tüm sütunlarda alfa numerik olarak arama gerçekleştirebilirsiniz. "Ara Temizle" ile aramayı temizleyebilirsiniz. ("Sayfa Yenile" basıldığında, ilk çalıştığı ana döner, başlıklar üzerinde yapılan değişiklik, varsayılan ifadelere döner) PDF olarak sunma düşüncesi, kurumsal bir form kazandırılması, Telefonlardan da tam net görünüm sağlanması içindir. Html sayfanın çalıştırıldığı konumda "logo.jpg" isminde kurumsal logonuzun olması yeterli. Böylelikle başlıkta logonuz yer alır.

Filtreleme sonrası, Filtrelenen Excel dosyasını indirebilir ve PDF olarak kaydedebilir yazdırabilirsiniz.

Yazdırabilir, PDF olarak kaydedebilirsiniz.

Kodda iyileştirme ve uyumluluk çalışması yaptım. Böylelikle, Envanter Dashboard uygulamanızın Excel + LibreOffice Calc uyumlu, tamamen çevrimdışı çalışan sürümü oluştu.

Yeni arayüzün açılış görünümü:

HTML Kod:

<!DOCTYPE html>

<head>

<title>Resimli Envanter Dashboard</title>

/*!

JSZip v3.10.1 - A JavaScript class for generating and reading zip files

<http://stuartk.com/jszip>

Dual licenced under the MIT license or GPLv3. See https://raw.github.com/Stuk/jszip/main/LICENSE.markdown.

JSZip uses the library pako released under the MIT license :

https://github.com/nodeca/pako/blob/main/LICENSE

</script>

<style>

/* --- TEMEL DEĞİŞKENLER VE SIFIRLAMALAR --- */

:root {

--bg: #f0f2f5;

--shadow: 0 8px 24px rgba(0,0,0,.05);

--radius: 10px;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Segoe UI", system-ui, Arial, sans-serif;

}

body {

background: var(--bg);

padding: 20px;

}

/* --- BAŞLIK ALANI STİLLERİ (SABİT) --- */

.header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px 20px;

background: #fff;

border: 1px solid #e1e4e8;

border-radius: var(--radius);

box-shadow: 0 4px 20px rgba(0,0,0,0.06);

margin-bottom: 25px;

gap: 15px;

position: sticky;

top: 20px;

z-index: 1000;

}

.header .left {

display: flex;

align-items: center;

gap: 15px;

width: 30%;

}

.header .logo img {

height: 50px;

}

.header .title1 {

font-size: 22px;

font-weight: 800;

color: #1a1e23;

letter-spacing: -0.5px;

cursor: pointer;

user-select: none;

}

.header .title2 {

font-size: 12px;

color: #6a737d;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.5px;

cursor: pointer;

user-select: none;

}

/* --- ESTETİK VE TEKNOLOJİK GRAFİK BÖLÜMÜ (HUD STİLİ) --- */

.header .center-title {

flex-grow: 1;

display: flex;

flex-direction: column;

align-items: center;

gap: 15px;

}

.gauges-wrapper {

display: flex;

gap: 30px;

background: #fafbfc;

border: 1px solid #eef0f3;

padding: 12px 30px;

border-radius: 50px;

box-shadow: inset 0 2px 4px rgba(0,0,0,0.02), 0 4px 10px rgba(0,0,0,0.03);

align-items: center;

}

.tech-gauge {

display: flex;

flex-direction: column;

align-items: center;

width: 100px;

position: relative;

}

.tg-label {

font-size: 11px;

font-weight: 800;

color: #586069;

text-transform: uppercase;

letter-spacing: 1px;

margin-bottom: -2px;

display: flex;

align-items: center;

gap: 5px;

white-space: nowrap;

}

.tg-label.total::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00c6ff; box-shadow: 0 0 6px #00c6ff; }

.tg-label.percent::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ff416c; box-shadow: 0 0 6px #ff416c; }

.tg-label.filtered::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #11998e; box-shadow: 0 0 6px #11998e; }

.tech-gauge svg {

width: 100%;

overflow: visible;

filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.1));

}

.tg-value {

font-size: 22px;

font-weight: 900;

fill: #24292e;

font-family: "Courier New", Courier, monospace;

}

.profile-photo-box {

width: 360px;

height: 200px;

border-radius: 8px;

background: #fff;

border: 1px solid #eef0f3;

box-shadow: 0 4px 10px rgba(0,0,0,0.03);

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

cursor: pointer;

user-select: none;

}

.profile-photo-box img {

width: 100%;

height: 100%;

object-fit: contain;

display: none;

}

.header .right {

width: 30%;

font-size: 13px;

font-weight: 800;

text-align: right;

color: #24292e;

letter-spacing: 0.5px;

cursor: pointer;

user-select: none;

}

/* --- KONTROL & DOSYA YÜKLEME PANELİ --- */

.controls {

display: flex;

flex-direction: column;

gap: 15px;

background: #fff;

padding: 15px;

border-radius: var(--radius);

box-shadow: var(--shadow);

margin-bottom: 15px;

border-left: 5px solid #00c6ff;

position: sticky;

top: 365px;

z-index: 999;

}

.controls-top {

display: flex;

gap: 15px;

align-items: center;

width: 100%;

}

input[type="file"], input[type="text"], button, select {

padding: 8px 15px;

border: 1px solid #d1d5da;

border-radius: 6px;

font-size: 13px;

outline: none;

}

/* DAİMİ ODAKLI GENEL ARAMA ALANI */

#globalSearch {

flex-grow: 1;

margin: 0 10px 0 0;

padding: 10px 15px;

border-radius: 8px;

font-size: 14px;

border: 1px solid #00c6ff !important;

box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.15) !important;

color: #24292e;

transition: 0.3s;

}

#globalSearch::placeholder {

color: #a0aab5;

}

.btn-primary {

background: linear-gradient(135deg, #007bff, #0056b3);

color: white; border: none; cursor: pointer; font-weight: bold; transition: 0.3s;

box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);

}

.btn-primary:hover { box-shadow: 0 6px 15px rgba(0, 123, 255, 0.5); transform: translateY(-1px); }

.btn-danger {

background: linear-gradient(135deg, #dc3545, #a71d2a);

color: white; border: none; cursor: pointer; font-weight: bold; transition: 0.3s;

box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);

}

.btn-danger:hover { box-shadow: 0 6px 15px rgba(220, 53, 69, 0.5); transform: translateY(-1px); }

.btn-success {

background: linear-gradient(135deg, #28a745, #218838);

color: white; border: none; cursor: pointer; font-weight: bold; transition: 0.3s;

box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);

}

.btn-success:hover { box-shadow: 0 6px 15px rgba(40, 167, 69, 0.5); transform: translateY(-1px); }

.btn-secondary {

background: linear-gradient(135deg, #e9ecef, #dee2e6);

color: #212529; border: 1px solid #ced4da; cursor: pointer; font-weight: bold; transition: 0.3s;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}

.btn-secondary:hover { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); transform: translateY(-1px); background: linear-gradient(135deg, #dee2e6, #ced4da); }

progress { width: 150px; height: 18px; display: none; border-radius: 10px; }

progress::-webkit-progress-bar { background-color: #f0f2f5; border-radius: 10px; }

progress::-webkit-progress-value { background: linear-gradient(90deg, #00c6ff, #0072ff); border-radius: 10px; }

/* SEKME (SHEET) LİSTESİ STİLLERİ */

#sheetListContainer {

display: none;

gap: 10px;

flex-wrap: wrap;

padding-top: 10px;

border-top: 1px dashed #e1e4e8;

width: 100%;

}

.sheet-btn {

padding: 6px 15px;

border: 1px solid #00c6ff;

background: #fff;

color: #007bff;

border-radius: 6px;

cursor: pointer;

font-size: 13px;

font-weight: bold;

transition: 0.3s;

}

.sheet-btn.active {

background: linear-gradient(135deg, #00c6ff, #0072ff);

color: white;

border-color: transparent;

box-shadow: 0 4px 10px rgba(0, 198, 255, 0.3);

}

.sheet-btn:hover:not(.active) {

background: #e6f2ff;

}

/* --- EXCEL DİLİMLEYİCİ (SLICER) ALANI YENİ TASARIM --- */

.slicer-container {

background: #f8f9fc;

padding: 20px;

border-radius: var(--radius);

box-shadow: var(--shadow);

margin-bottom: 20px;

border: 1px solid #e1e4e8;

}

.slicer-header-bar {

display: flex;

align-items: center;

gap: 15px;

margin-bottom: 15px;

}

.slicer-area {

display: flex;

flex-direction: column;

gap: 15px;

}

.slicer-row {

display: flex;

align-items: center;

background: #fff;

padding: 15px;

border-radius: 8px;

border: 1px solid #e1e4e8;

box-shadow: 0 4px 10px rgba(0,0,0,0.04);

width: 100%;

}

.slicer-row-header {

flex: 0 0 250px;

display: flex;

flex-direction: column;

border-right: 1px solid #e1e4e8;

margin-right: 15px;

padding-right: 15px;

}

.slicer-row-title { font-size: 14px; font-weight: 800; color: #1a1e23; margin-bottom: 5px; }

.slicer-row-stats {

font-size: 11px;

color: #6a737d;

font-weight: 600;

}

.slicer-remove-link {

color: #ff6b6b;

cursor: pointer;

font-weight: 800;

text-decoration: none;

transition: 0.2s;

margin-left: 2px;

}

.slicer-remove-link:hover {

color: #e63946;

text-decoration: underline;

}

.slicer-row-buttons {

display: flex;

flex-wrap: wrap;

gap: 8px;

flex: 1;

}

.slicer-btn {

padding: 6px 14px;

border-radius: 6px;

font-size: 12px;

font-weight: 600;

border: 1px solid rgba(255,255,255,0.2);

cursor: pointer;

transition: all 0.2s ease;

/* İÇİNDE VERİ OLAN - CANLI CAM SİYAH */

background: rgba(0, 0, 0, 0.85);

color: #fff;

backdrop-filter: blur(5px);

box-shadow: 0 4px 6px rgba(0,0,0,0.2);

}

/* SEÇİLİ OLAN (TIKLANAN) */

.slicer-btn.selected {

background: #000;

border: 1px solid #00c6ff;

box-shadow: 0 0 10px rgba(0, 198, 255, 0.6);

transform: scale(1.05);

}

.slicer-btn:hover:not(.disabled-slicer) {

transform: translateY(-2px);

background: #000;

}

/* PASİF OLAN - AÇIK GRİ */

.slicer-btn.disabled-slicer {

background: #e9ecef !important;

color: #adb5bd !important;

border: 1px solid #dee2e6 !important;

box-shadow: none !important;

cursor: not-allowed;

backdrop-filter: none;

transform: none !important;

}

/* --- TABLO STİLLERİ --- */

.table-container {

width: 100%;

max-height: 65vh;

overflow: auto;

background: #fff;

border-radius: var(--radius);

box-shadow: var(--shadow);

position: relative;

}

table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }

th, td { border-bottom: 1px solid #e1e4e8; border-right: 1px solid #e1e4e8; padding: 12px; text-align: left; font-size: 13px; white-space: nowrap; }

th:first-child, td:first-child { border-left: 1px solid #e1e4e8; }

thead {

position: sticky;

top: 0;

z-index: 20;

background: #fff;

box-shadow: 0 4px 6px rgba(0,0,0,0.06);

}

thead th.main-header {

background: #1a1e23 !important;

color: white !important;

font-weight: bold;

border-top: 1px solid #1a1e23;

cursor: pointer;

user-select: none;

transition: background 0.2s;

}

thead th.main-header:hover {

background: #2c3238 !important;

}

tbody tr:nth-child(even) { background-color: #f8f9fc; }

tbody tr:hover { background-color: #e6f2ff; }

/* Eşleşen Metin Vurgusu (Açık Yeşil) */

.search-highlight {

background-color: #a5d6a7 !important;

color: #000 !important;

border-radius: 3px;

padding: 1px 2px;

font-weight: bold;

}

/* --- SAYFALAMA (PAGINATION) STİLLERİ --- */

.pagination-container {

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px;

background: #fff;

border-radius: var(--radius);

box-shadow: var(--shadow);

margin-top: 15px;

}

.pagination-controls button { margin: 0 5px; }

/* --- YAZDIRMA (PRINT) VE PDF STİLLERİ --- */

@media print {

.no-print { display: none !important; }

body { background: white; padding: 0; margin: 0; }

.header { box-shadow: none; border-color: #000; margin-bottom: 20px; position: static; }

.table-container { box-shadow: none; border-radius: 0; overflow: visible; max-height: none; }

table { width: 100%; max-width: 100%; font-size: 10px; }

th, td { white-space: nowrap !important; padding: 6px; }

thead { position: static; box-shadow: none; }

thead th.main-header { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

.search-highlight {

background-color: transparent !important;

color: inherit !important;

padding: 0 !important;

font-weight: normal !important;

}

@page { size: landscape; margin: 10mm; @bottom-right { content: "Sayfa " counter(page) " / " counter(pages); font-size: 10px; } }

}

/* Çevrimdışı Calc desteği, fotoğraf durumu ve küçük ekran iyileştirmeleri */

.header .left{min-width:0}.header .title1{overflow-wrap:anywhere}.header .right{overflow-wrap:anywhere}

.profile-photo-box{position:relative;max-width:100%;flex-shrink:0}

.profile-empty{font-size:12px;font-weight:600;color:#94a3b8;text-align:center;padding:14px;max-width:95%;overflow-wrap:anywhere}

.profile-photo-box img{z-index:1;background:#fff}

.controls{top:365px}

.controls-top{flex-wrap:wrap;gap:10px}

.controls-top #globalSearch{flex:1 1 175px;min-width:160px}

.controls-top .export-actions{margin-left:0!important;flex:0 0 auto}

.slicer-remove-link{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;font-size:11px!important}

#excelFile{max-width:260px}

.btn-calc{background:linear-gradient(135deg,#16885f,#086342);color:#fff;border:0;cursor:pointer;font-weight:bold;box-shadow:0 4px 10px rgba(13,128,79,.25)}

.btn-calc:hover{filter:brightness(1.06);transform:translateY(-1px)}

.export-actions{flex-wrap:wrap}

.status-text{font-size:11px;font-weight:600;color:#64748b;min-height:15px}

.status-text.success{color:#147d51}.status-text.error{color:#b91c1c}

.empty-note{text-align:center;padding:24px;color:#64748b;font-size:14px}

.pagination-container button:disabled{opacity:.5;cursor:not-allowed}

.slicer-btn:disabled{pointer-events:none}

button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #0284c7;outline-offset:2px}

@media(max-width:1100px){

.header{flex-wrap:wrap;position:static}

.header .left,.header .right{width:auto;flex:1 1 35%}

.header .center-title{order:3;flex:1 1 100%}

.controls{position:static}

.controls-top{gap:8px}

.slicer-row{align-items:flex-start;flex-wrap:wrap}

.slicer-row-header{flex:1 1 100%;border-right:0;border-bottom:1px solid #e1e4e8;padding-bottom:8px;margin-bottom:8px}

.slicer-row-buttons{width:100%}

}

@media(max-width:650px){

body{padding:9px}

.header{padding:12px;margin-bottom:10px;gap:9px}

.header .title1{font-size:18px}.header .right{font-size:11px}

.header .center-title{gap:8px}

.gauges-wrapper{gap:10px;padding:8px 12px;max-width:100%}

.tech-gauge{width:80px}.tg-value{font-size:17px}

.profile-photo-box{width:100%;max-width:360px;height:180px}

.controls{padding:10px;margin-bottom:10px}

.controls-top{gap:8px}

#globalSearch{flex:1 1 100%;min-width:0;margin:0}

.slicer-container{padding:10px}.slicer-row{padding:10px}

.pagination-container{flex-wrap:wrap;gap:10px;justify-content:center}

}

@media print {

.header,.controls{position:static!important;top:auto!important}

.header{break-inside:avoid;page-break-inside:avoid;margin-bottom:6mm;box-shadow:none}

.header .center-title{gap:4px}.profile-photo-box{width:180px;height:100px}

.gauges-wrapper{gap:8px;padding:5px 10px}.tech-gauge{width:75px}

.profile-empty{font-size:9px}

.table-container{overflow:visible!important;max-height:none!important}

table{width:100%;max-width:100%;table-layout:auto}

th,td{font-size:9px!important;padding:5px!important;white-space:normal!important;overflow-wrap:anywhere}

thead{display:table-header-group}tbody tr{break-inside:avoid;page-break-inside:avoid}

.empty-note{display:none}

@page{size:landscape;margin:10mm;@bottom-right{content:"Sayfa " counter(page) " / " counter(pages);font-size:9px}}

}

</style>

</head>

<body>

<defs>

</linearGradient>

</linearGradient>

</linearGradient>

</defs>

</svg>

<div>

<div class="title1" id="mainTitle" title="Değiştirmek için 5 kez peş peşe tıklayın">Envanter</div>

<div class="title2" id="subTitle" title="Değiştirmek için 5 kez peş peşe tıklayın">Helpdesk Koordinatörlüğü</div>

</div>

</svg>

</div>

</svg>

</div>

<div class="tg-label filtered">Filtre Adet</div>

</svg>

</div>

<span id="profileEmpty" class="profile-empty">Fotoğraf önizlemesi</span>

</div>

<div class="right" id="rightTitle" title="Değiştirmek için 5 kez peş peşe tıklayın">MYO MÜDÜRLÜĞÜ</div>

</div>

<button class="btn-secondary" type="button" id="resetPageBtn" title="Sayfayı Yenile">Sayfa Yenile</button>

<button class="btn-danger" type="button" id="clearSearchBtn" title="Aramayı Temizle">Ara Temizle</button>

<button class="btn-success" type="button" id="exportXlsxBtn">📥 Excel İndir</button>

<button class="btn-calc" type="button" id="exportOdsBtn">📥 Calc İndir</button>

<button class="btn-primary" type="button" id="printBtn">🖨️ PDF / Yazdır</button>

</div>

</div>

<button class="btn-danger" id="btnClearSlicers">✖ Tüm Filtreleri Temizle</button>

<span style="font-size: 10px; color: #ced4da; margin-top: 5px; font-weight: 600; letter-spacing: 0.5px;">AI Web Designer: Muhammed Yusuf OLGUN</span>

</div>

</div>

</table>

<div id="emptyNote" class="empty-note">Excel veya LibreOffice Calc dosyası seçerek başlayın.</div>

</div>

<button class="btn-primary" id="prevBtn">Önceki</button>

<button class="btn-primary" id="nextBtn">Sonraki</button>

</div>

<div>

<option value="50">Sayfada 50 Kayıt</option>

<option value="100" selected>Sayfada 100 Kayıt</option>

<option value="500">Sayfada 500 Kayıt</option>

<option value="1000">Sayfada 1000 Kayıt</option>

</select>

</div>

'use strict';

// Geçmişteki çevrimdışı envanter uygulaması ile aynı yerel ODS/XLS/XLSX okuma-yazma çekirdeği.

const $=id=>document.getElementById(id);

const PATH_LENGTH=125.6;

const MAX_INPUT_BYTES=65*1024*1024, MAX_ZIP_UNCOMPRESSED=230*1024*1024, MAX_ROWS=160000, MAX_COLS=500;

function escapeXML(value){return String(value??'').replace(/[&<>"']/g,ch=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[ch]))}

function display(v){return v&&typeof v==='object'&&'v'in v ? String(v.v??'') : String(v??'')}

function makeCell(v,t='s'){return {v:String(v??''),t}}

function children(node,local){return Array.from(node?.children||[]).filter(el=>el.localName===local)}

function first(node,local){return children(node,local)[0]||null}

function descendants(node,local){return node ? Array.from(node.getElementsByTagName('*')).filter(el=>el.localName===local) : []}

function attr(node,name){if(!node)return null;const direct=node.getAttribute(name);if(direct!==null)return direct;for(const a of Array.from(node.attributes||[]))if(a.localName===name.split(':').pop())return a.value;return null}

function parseXML(txt){const doc=new DOMParser().parseFromString(txt,'application/xml');if(doc.getElementsByTagName('parsererror').length)throw new Error('Dosyanın XML yapısı okunamadı.');return doc}

function sheetSafeName(name){return String(name||'Veriler').replace(/[\\\[\]/*?:]/g,'_').slice(0,31)||'Veriler'}

function cleanFilename(name){return String(name||'Envanter').replace(/[\\/:*?"<>|\x00-\x1f]/g,'_').slice(0,85)}

function colFromRef(ref){let n=0;for(const c of (ref.match(/^[A-Z]+/i)||['A'])[0].toUpperCase())n=n*26+c.charCodeAt(0)-64;return n-1}

function colToRef(col){let r='';for(let x=col+1;x>0;x=Math.floor((x-1)/26))r=String.fromCharCode(65+(x-1)%26)+r;return r}

function excelSerialAsDate(n,time=false){const millis=Math.round((Number(n)-25569)*86400000);const d=new Date(millis);if(isNaN(d))return String(n);const iso=d.toISOString();return time?iso.substring(0,19).replace('T',' '):iso.slice(0,10)}

function isDateFormat(fmt){return /(?:y{2,4}|d{1,4}|h{1,2}|s{1,2})/i.test(String(fmt||'').replace(/"[^"]*"|\[[^\]]*\]|\\./g,''))}

let workbook=null,workbookFileName='',currentSheetName='';

let excelData=[], actualHeaders={}, headerKeys=[], currentFilteredData=[];

let currentPage=1, rowsPerPage=100, activeSlicerCols=[], slicerSelections=new Map();

let printAll=false, imageColumnKey='D';

function status(msg,type=''){

const el=$('statusText');el.textContent=msg;el.className='status-text '+type;

}

function getSetting(key,fallback){try{return localStorage.getItem(key)||fallback}catch(_){return fallback}}

function setSetting(key,value){try{localStorage.setItem(key,value)}catch(_){/* Dosya protokolünde depolama engellenmiş olabilir. */}}

$('rightTitle').textContent=getSetting('resimliHeaderRightText','MYO MÜDÜRLÜĞÜ');

$('subTitle').textContent=getSetting('resimliHeaderSubTitle','Helpdesk Koordinatörlüğü');

const savedPhotoKey=getSetting('resimliProfileImageCol','D').toUpperCase();

if(/^[A-Z]{1,3}$/.test(savedPhotoKey))imageColumnKey=savedPhotoKey;

function attachFiveClickEditor(id,key,message){

const el=$(id);let clicks=0,timer;

el.addEventListener('click',()=>{

clicks++;clearTimeout(timer);

if(clicks>=5){clicks=0;const val=prompt(message,el.textContent.trim());if(val!==null&&val.trim()){

el.textContent=val.trim();if(key)setSetting(key,val.trim());

}}else timer=setTimeout(()=>clicks=0,2000);

});

}

attachFiveClickEditor('mainTitle',null,'Yeni başlığı girin:');

attachFiveClickEditor('subTitle','resimliHeaderSubTitle','Alt başlığı girin:');

attachFiveClickEditor('rightTitle','resimliHeaderRightText','Sağ başlığı girin:');

let photoClicks=0,photoTimer;

$('profileBox').addEventListener('click',()=>{

photoClicks++;clearTimeout(photoTimer);

if(photoClicks>=5){photoClicks=0;

const val=prompt('Fotoğrafı eşleştireceğiniz sütunun harfini girin (örn. D, E, F):',imageColumnKey);

if(val!==null){const key=val.trim().toUpperCase();

if(!/^[A-Z]{1,3}$/.test(key)||colFromRef(key+'1')>=MAX_COLS)alert('Geçerli bir sütun harfi girin (A–SF).');

else{imageColumnKey=key;setSetting('resimliProfileImageCol',key);updateProfileImage(currentFilteredData);status('Resim eşleştirme sütunu: '+key,'success')}

}

}else photoTimer=setTimeout(()=>photoClicks=0,2000);

});

$('profileImage').addEventListener('load',()=>{$('profileImage').style.display='block';$('profileEmpty').style.display='none'});

$('profileImage').addEventListener('error',()=>{$('profileImage').style.display='none';$('profileEmpty').style.display='block';$('profileEmpty').textContent='Resim klasöründe fotoğraf bulunamadı'});

function updateProfileImage(rows){

const photo=$('profileImage'),placeholder=$('profileEmpty');

photo.style.display='none';photo.removeAttribute('src');placeholder.style.display='block';

if(!rows||!rows.length){placeholder.textContent='Fotoğraf önizlemesi';return}

let name=display(rows[0][imageColumnKey]).trim();

if(!name){placeholder.textContent='Seçilen kayıtta fotoğraf bilgisi bulunmuyor ('+imageColumnKey+')';return}

// URL, ağ adresi veya ../ ile dizin dışına çıkışı kabul etme; yalnızca Resim/ içindeki yerel dosyalar.

if(name.length>180||name.startsWith('.')||name.includes('..')||!(/^[\p{L}\p{N}_(). -]+$/u).test(name)){

placeholder.textContent='Geçersiz fotoğraf dosyası adı';return;

}

if(!/\.(jpe?g|png|webp)$/i.test(name))name+='.jpg';

placeholder.textContent='Resim yükleniyor…';

photo.src='Resim/'+encodeURIComponent(name);

}

$('resetPageBtn').addEventListener('click',()=>location.reload());

$('clearSearchBtn').addEventListener('click',()=>{$('globalSearch').value='';applyFiltersAndSlicers()});

$('globalSearch').addEventListener('input',applyFiltersAndSlicers);

$('rowsPerPage').addEventListener('change',()=>{rowsPerPage=Number($('rowsPerPage').value)||100;currentPage=1;renderPagination()});

$('btnClearSlicers').addEventListener('click',()=>{activeSlicerCols=[];slicerSelections.clear();$('slicerArea').replaceChildren();$('globalSearch').value='';applyFiltersAndSlicers()});

$('exportXlsxBtn').addEventListener('click',()=>exportTable('xlsx'));

$('exportOdsBtn').addEventListener('click',()=>exportTable('ods'));

$('printBtn').addEventListener('click',()=>{if(!headerKeys.length){alert('Önce bir dosya yükleyin.');return}window.print()});

$('prevBtn').addEventListener('click',()=>changePage(-1));

$('nextBtn').addEventListener('click',()=>changePage(1));

window.addEventListener('beforeprint',()=>{if(headerKeys.length){printAll=true;renderPagination()}});

window.addEventListener('afterprint',()=>{if(headerKeys.length){printAll=false;renderPagination()}});

$('excelFile').addEventListener('change',async event=>{

const file=event.target.files?.[0];if(!file)return;

const ext=(file.name.split('.').pop()||'').toLowerCase();

if(!['xlsx','xls','xlsm','ods','ots','fods'].includes(ext)){status('Dosya biçimi desteklenmiyor.','error');event.target.value='';return}

if(file.size>MAX_INPUT_BYTES){alert('Dosya boyutu 65 MB sınırını aşıyor.');event.target.value='';return}

const pb=$('progressBar'),oldWorkbook=workbook,oldName=workbookFileName;

pb.style.display='block';pb.value=12;status(file.name+' dosyası çevrimdışı açılıyor…');

try{

await new Promise(resolve=>setTimeout(resolve,0));

const bytes=await file.arrayBuffer();pb.value=40;

const parsed=ext==='xls'?parseXLS(bytes):ext==='fods'?parseFODS(new TextDecoder('utf-8').decode(bytes)):await parseZipWorkbook(bytes,ext);

if(!parsed.SheetNames.length)throw new Error('Çalışma sayfası bulunamadı.');

workbook=parsed;workbookFileName=file.name.replace(/\.[^.]+$/,'');

$('mainTitle').textContent=workbookFileName||'Envanter';

pb.value=85;renderSheetTabs(parsed.SheetNames);loadSheet(parsed.SheetNames[0]);pb.value=100;

status(file.name+' · '+parsed.SheetNames.length+' sayfa · Çevrimdışı yüklendi','success');

}catch(error){workbook=oldWorkbook;workbookFileName=oldName;status('Dosya okunamadı: '+error.message,'error');alert('Dosya okunamadı: '+error.message)}

finally{setTimeout(()=>pb.style.display='none',450);event.target.value=''}

});

async function parseZipWorkbook(ab,ext){const zip=await JSZip.loadAsync(ab,{checkCRC32:false});let size=0;for(const e of Object.values(zip.files)){if(!e.dir){size+=e._data?.uncompressedSize||0;if(size>MAX_ZIP_UNCOMPRESSED)throw new Error('Güvenlik sınırı: sıkıştırılmış dosya açıldığında çok büyüyor.')}}

if(ext==='ods'||ext==='ots')return parseODS(await zipText(zip,'content.xml',true));

return await parseXLSX(zip)}

async function zipText(zip,name,required=false){const entry=zip.file(name);if(!entry){if(required)throw new Error('Dosyanın '+name+' bileşeni bulunamadı.');return ''}return await entry.async('string')}

function parseFODS(text){return parseODS(text)}

function parseODS(text){const doc=parseXML(text), tables=descendants(doc,'table').filter(n=>n.namespaceURI?.includes('opendocument:xmlns:table'));const wb={SheetNames:[],Sheets:{}};

for(const tbl of tables){let name=attr(tbl,'table:name')||'Sayfa '+(wb.SheetNames.length+1);if(wb.Sheets[name])name+='_'+wb.SheetNames.length;const rows=[];const bodies=[];

function collectRows(node){for(const c of Array.from(node.children||[])){if(c.localName==='table-row')bodies.push(c);else if(['table-header-rows','table-row-group','table-rows'].includes(c.localName))collectRows(c)}}collectRows(tbl);

for(const xmlRow of bodies){if(rows.length>=MAX_ROWS)throw new Error('Çok fazla satır: 160.000 sınırı aşıldı.');const cells=[];let col=0;let hasData=false;

for(const c of Array.from(xmlRow.children||[])){if(!['table-cell','covered-table-cell'].includes(c.localName))continue;const rep=Math.min(Number(attr(c,'table:number-columns-repeated')||1),MAX_COLS);const typ=attr(c,'office:value-type')||'';let val='';if(typ==='float'||typ==='currency'||typ==='percentage'){val=attr(c,'office:value')||''}else if(typ==='boolean'){val=attr(c,'office:boolean-value')==='true'?'DOĞRU':'YANLIŞ'}else if(typ==='date'){val=attr(c,'office:date-value')||''}else if(typ==='time'){val=attr(c,'office:time-value')||''}

const paras=descendants(c,'p');let textVal=paras.map(p=>p.textContent||'').join('\n');if(textVal&&(!val||typ==='string'))val=textVal;const cell=makeCell(val,['float','currency','percentage'].includes(typ)?'n':'s');

for(let i=0;i<rep&&col<MAX_COLS;i++,col++){if(val!==''){cells[col]=cell;hasData=true}}if(col>=MAX_COLS)break}

const repRows=Math.min(Number(attr(xmlRow,'table:number-rows-repeated')||1),MAX_ROWS-rows.length);

if(hasData){for(let r=0;r<repRows;r++)rows.push(cells.slice())}else if(repRows<10000){for(let r=0;r<repRows;r++)rows.push([])}

}

wb.SheetNames.push(name);wb.Sheets[name]=rows}

return wb}

function normalizedPart(parent,target){if(target.startsWith('/'))return target.slice(1);const parts=(parent.slice(0,parent.lastIndexOf('/')+1)+target).split('/');const out=[];for(const part of parts){if(!part||part==='.')continue;if(part==='..')out.pop();else out.push(part)}return out.join('/')}

async function parseXLSX(zip){const wbDoc=parseXML(await zipText(zip,'xl/workbook.xml',true)), relDoc=parseXML(await zipText(zip,'xl/_rels/workbook.xml.rels',true));

const rels=new Map();for(const node of descendants(relDoc,'Relationship')){rels.set(attr(node,'Id'),attr(node,'Target'))}

const names=[];for(const s of descendants(wbDoc,'sheet')){const relId=attr(s,'r:id');const target=rels.get(relId);if(target)names.push({name:attr(s,'name')||'Sayfa '+(names.length+1),path:normalizedPart('xl/workbook.xml',target)})}

let strings=[];const sxml=await zipText(zip,'xl/sharedStrings.xml');if(sxml){const sd=parseXML(sxml);strings=descendants(sd,'si').map(si=>descendants(si,'t').map(t=>t.textContent||'').join(''))}

const formats=new Map();const stylesText=await zipText(zip,'xl/styles.xml');let xfs=[];if(stylesText){const stylesDoc=parseXML(stylesText);for(const n of descendants(stylesDoc,'numFmt'))formats.set(Number(attr(n,'numFmtId')),attr(n,'formatCode')||'');const cellXfs=first(stylesDoc.documentElement,'cellXfs');xfs=children(cellXfs,'xf').map(n=>Number(attr(n,'numFmtId')||0))}

const isDate=(ix)=>{const id=xfs[ix]||0;return (id>=14&&id<=22)||(id>=45&&id<=47)||isDateFormat(formats.get(id))};

const isDateTime=ix=>{const id=xfs[ix]||0;return [18,19,20,21,22,45,46,47].includes(id)||/[hs]/i.test(formats.get(id)||'')};

if(out.Sheets[meta.name])meta.name+='_'+out.SheetNames.length;out.SheetNames.push(meta.name);out.Sheets[meta.name]=rows}return out}

/* XLS (Excel 97–2003) için çevrimdışı OLE2 / BIFF8 tablo okuyucu. Makrolar çalıştırılmaz. */

function parseXLS(ab){const b=new Uint8Array(ab),dv=new DataView(ab);const magic=[0xd0,0xcf,0x11,0xe0,0xa1,0xb1,0x1a,0xe1];if(magic.some((x,i)=>b[i]!==x))throw new Error('Geçerli bir .xls (BIFF/OLE2) dosyası değil. Lütfen Calc üzerinden .xlsx veya .ods olarak kaydedin.');

const u16=(a)=>dv.getUint16(a,true),u32=(a)=>dv.getUint32(a,true), secSize=1<<u16(30), miniSize=1<<u16(32),END=0xfffffffe,FREE=0xffffffff;

if(secSize!==512&&secSize!==4096)throw new Error('Desteklenmeyen XLS dosya yapısı.');

const getSector=id=>{const offset=512+id*secSize;if(id>=0xfffffffc||offset+secSize>b.length)throw new Error('XLS dosyasının sektör yapısı bozuk.');return b.subarray(offset,offset+secSize)};

let fatSectors=[];for(let i=0;i<109;i++){const id=u32(76+4*i);if(id!==FREE)fatSectors.push(id)}let difatId=u32(68),difatCount=u32(72);

for(let d=0;d<difatCount&&difatId!==END&&difatId!==FREE&&d<10000;d++){const s=getSector(difatId),v=new DataView(s.buffer,s.byteOffset,s.byteLength);for(let i=0;i<secSize/4-1;i++){const id=v.getUint32(i*4,true);if(id!==FREE)fatSectors.push(id)}difatId=v.getUint32(secSize-4,true)}

const fat=[];for(const id of fatSectors){const s=getSector(id),v=new DataView(s.buffer,s.byteOffset,s.byteLength);for(let i=0;i<secSize;i+=4)fat.push(v.getUint32(i,true))}

function chainIds(start,lookup,max=200000){const ids=[],visited=new Set();let id=start;while(id!==END&&id!==FREE&&id<0xfffffffc&&ids.length<max){if(visited.has(id)||id>=lookup.length)throw new Error('Bozuk XLS sektör zinciri.');visited.add(id);ids.push(id);id=lookup[id]}return ids}

function readBig(start,size){const ids=chainIds(start,fat),out=new Uint8Array(Math.min(size,MAX_INPUT_BYTES));let off=0;for(const id of ids){if(off>=out.length)break;const s=getSector(id),count=Math.min(s.length,out.length-off);out.set(s.subarray(0,count),off);off+=count}return out.subarray(0,off)}

const dirBytes=readBig(u32(48),Math.max(secSize,Math.min(b.length,2*1024*1024))),dirs=[];

for(let p=0;p+128<=dirBytes.length;p+=128){const dl=new DataView(dirBytes.buffer,dirBytes.byteOffset+p,128),len=dl.getUint16(64,true);let name='';if(len>=2&&len<=64)name=new TextDecoder('utf-16le').decode(dirBytes.subarray(p,p+len-2));dirs.push({name,type:dirBytes[p+66],start:dl.getUint32(116,true),size:dl.getUint32(120,true)})}

const root=dirs.find(x=>x.type===5),book=dirs.find(x=>x.type===2&&/^(Workbook|Book)$/i.test(x.name));if(!root||!book)throw new Error('XLS çalışma kitabı akışı bulunamadı.');

let data;if(book.size<u32(56)){

const mfIds=chainIds(u32(60),fat);const miniFat=[];for(const id of mfIds){const sb=getSector(id),view=new DataView(sb.buffer,sb.byteOffset,sb.length);for(let i=0;i<sb.length;i+=4)miniFat.push(view.getUint32(i,true))}

const rootData=readBig(root.start,root.size),miniIds=chainIds(book.start,miniFat);data=new Uint8Array(book.size);let off=0;for(const id of miniIds){const part=rootData.subarray(id*miniSize,id*miniSize+miniSize);const len=Math.min(part.length,data.length-off);data.set(part.subarray(0,len),off);off+=len;if(off>=data.length)break}

}else data=readBig(book.start,book.size);

const v=new DataView(data.buffer,data.byteOffset,data.byteLength),r16=p=>v.getUint16(p,true),r32=p=>v.getUint32(p,true);

const records=[];for(let p=0;p+4<=data.length;){const id=r16(p),len=r16(p+2);if(p+4+len>data.length)break;records.push({id,p:p+4,len});p+=4+len}

const decodeUnicode=(p,count,wide)=>wide?new TextDecoder('utf-16le').decode(data.subarray(p,p+count*2)):new TextDecoder('windows-1252').decode(data.subarray(p,p+count));

let sst=[],bookSheets=[],xfFormats=[],userFormats=new Map(),date1904=false;

for(let i=0;i<records.length;i++){const r=records[i],p=r.p;

if(r.id===0x0085&&r.len>=8){const chars=data[p+6],wide=!!(data[p+7]&1);bookSheets.push({pos:r32(p),name:decodeUnicode(p+8,chars,wide),kind:data[p+5]})}

else if(r.id===0x00e0&&r.len>=4)xfFormats.push(r16(p+2));

else if(r.id===0x041e&&r.len>=5){const fmtId=r16(p),cch=r16(p+2),wide=!!(data[p+4]&1);userFormats.set(fmtId,decodeUnicode(p+5,cch,wide))}

else if(r.id===0x0022&&r.len>=2)date1904=r16(p)===1;

else if(r.id===0x00fc){const segments=[data.subarray(p,p+r.len)];while(records[i+1]?.id===0x003c){const rr=records[++i];segments.push(data.subarray(rr.p,rr.p+rr.len))}

const word=()=>byte()|(byte()<<8),dword=()=>word()+(word()*65536);dword();const count=Math.min(dword(),MAX_ROWS*MAX_COLS);

for(let q=0;q<count;q++){const cch=word(),flags=byte(),rich=flags&8?word():0,ext=flags&4?dword():0;let wide=!!(flags&1),str='';for(let k=0;k<cch;k++){

if(sr.i<segments.length&&sr.off>=segments[sr.i].length){sr.i++;sr.off=0;if(sr.i<segments.length)wide=!!(byte()&1)}

const ch=wide?word():byte();str+=String.fromCharCode(ch)}

for(let k=0;k<rich*4+ext;k++)byte();sst.push(str)}

}

const isXlsDate=(xf)=>{const fmt=xfFormats[xf]||0;return (fmt>=14&&fmt<=22)||(fmt>=45&&fmt<=47)||isDateFormat(userFormats.get(fmt))};

const formatNum=(n,xf)=>{if(isXlsDate(xf))return makeCell(excelSerialAsDate(Number(n)+(date1904?1462:0),true),'s');return makeCell(n,'n')};

const sheets={SheetNames:[],Sheets:{}};

for(const meta of bookSheets.filter(x=>x.kind===0)){let name=meta.name||'Sayfa '+(sheets.SheetNames.length+1);if(sheets.Sheets[name])name+='_'+sheets.SheetNames.length;const grid=[],pos=records.findIndex(r=>r.p-4===meta.pos);if(pos<0)continue;

const put=(row,col,val)=>{if(row>=MAX_ROWS||col>=MAX_COLS)return;if(!grid[row])grid[row]=[];grid[row][col]=val};

for(let i=pos+1;i<records.length;i++){const r=records[i],p=r.p;if(r.id===0x000a)break;if(r.len<6)continue;const row=r16(p),col=r16(p+2),xf=r16(p+4);if(row>=MAX_ROWS||col>=MAX_COLS)continue;

if(r.id===0x00fd&&r.len>=10)put(row,col,makeCell(sst[r32(p+6)]||''));

else if(r.id===0x0203&&r.len>=14)put(row,col,formatNum(v.getFloat64(p+6,true),xf));

else if(r.id===0x027e&&r.len>=10)put(row,col,formatNum(decodeRK(r32(p+6)),xf));

else if(r.id===0x00bd&&r.len>=12){let cc=col;for(let k=p+4;k+6<=p+r.len-2;k+=6,cc++){const x=v.getUint16(k,true),rk=v.getUint32(k+2,true);put(row,cc,formatNum(decodeRK(rk),x))}}

else if(r.id===0x0205&&r.len>=8)put(row,col,makeCell(data[p+6]===1?'DOĞRU':data[p+6]===0?'YANLIŞ':''));

else if(r.id===0x0204&&r.len>=9){const cch=r16(p+6),wide=!!(data[p+8]&1);put(row,col,makeCell(decodeUnicode(p+9,cch,wide)))}

else if(r.id===0x0006&&r.len>=20){if(r16(p+12)!==0xffff)put(row,col,formatNum(v.getFloat64(p+6,true),xf));else if(data[p+6]===1)put(row,col,makeCell(data[p+8]===1?'DOĞRU':'YANLIŞ'))}

}

sheets.SheetNames.push(name);sheets.Sheets[name]=grid}if(!sheets.SheetNames.length)throw new Error('XLS dosyasında okunabilir BIFF8 çalışma sayfası bulunamadı.');return sheets}

function decodeRK(rk){let val;if(rk&2)val=rk>>2;else{const b=new ArrayBuffer(8),v=new DataView(b);v.setUint32(0,0,true);v.setUint32(4,rk&~3,true);val=v.getFloat64(0,true)}return rk&1?val/100:val}

function renderSheetTabs(names){

const cont=$('sheetListContainer');cont.replaceChildren();cont.style.display=names.length>1?'flex':'none';

for(const name of names){const btn=document.createElement('button');btn.type='button';btn.className='sheet-btn';btn.textContent=name;btn.onclick=()=>loadSheet(name);cont.appendChild(btn)}

}

function loadSheet(name){

if(!workbook?.Sheets[name])return;

currentSheetName=name;

for(const btn of $('sheetListContainer').children)btn.classList.toggle('active',btn.textContent===name);

const rows=workbook.Sheets[name];

const headerIndex=0; // İlk satır sütun başlıklarını içerir.

const hdr=rows[headerIndex]||[];

actualHeaders={};headerKeys=[];

for(let i=0;i<hdr.length&&i<MAX_COLS;i++){

const value=display(hdr[i]).trim();if(!value)continue;

const key=colToRef(i);actualHeaders[key]=value;headerKeys.push(key);

}

excelData=[];

for(let i=headerIndex+1;i<rows.length;i++){

const source=rows[i]||[],r={};let hasValues=false;

for(const key of headerKeys){const cell=source[colFromRef(key+'1')]||makeCell('');r[key]=cell;if(display(cell).trim())hasValues=true}

if(hasValues)excelData.push(r);

}

currentPage=1;activeSlicerCols=[];slicerSelections.clear();

$('slicerArea').replaceChildren();$('globalSearch').value='';

currentFilteredData=excelData;

renderHeaders();renderPagination();updateGauges(excelData.length,excelData.length);updateProfileImage(currentFilteredData);

status(name+' · '+excelData.length.toLocaleString('tr-TR')+' kayıt · '+headerKeys.length+' sütun','success');

if(!headerKeys.length)status('Başlık bulunamadı. Dosyanın ilk satırında sütun başlıkları bulunduğundan emin olun.','error');

}

function renderHeaders(){

const head=$('tableHead');head.replaceChildren();if(!headerKeys.length)return;

const row=document.createElement('tr');

for(const key of headerKeys){const th=document.createElement('th');th.className='main-header';th.textContent=actualHeaders[key];th.title='Veri dilimleyici oluşturmak için tıklayın';

th.onclick=()=>createSlicer(key);row.appendChild(th)}head.appendChild(row);

}

function highlightedText(value,find){

const fragment=document.createDocumentFragment(),text=display(value),term=String(find||'').trim();

if(!term){fragment.appendChild(document.createTextNode(text));return fragment}

const lower=text.toLocaleLowerCase('tr-TR'),needle=term.toLocaleLowerCase('tr-TR');let start=0,ix;

while((ix=lower.indexOf(needle,start))>=0){fragment.appendChild(document.createTextNode(text.slice(start,ix)));

const mark=document.createElement('span');mark.className='search-highlight';mark.textContent=text.slice(ix,ix+term.length);fragment.appendChild(mark);start=ix+term.length;

}

fragment.appendChild(document.createTextNode(text.slice(start)));return fragment;

}

function renderPagination(){

const tbody=$('tableBody');tbody.replaceChildren();

const total=currentFilteredData.length,headers=headerKeys.length>0;

$('emptyNote').style.display=total&&headers?'none':'block';

$('emptyNote').textContent=!headers?'Excel veya LibreOffice Calc dosyası seçin; ilk satırdaki sütun başlıklarını kontrol edin.':'Bu filtreye uygun kayıt bulunamadı.';

$('paginationContainer').style.display=total&&!printAll?'flex':'none';

if(!total)return;

const totalPages=Math.max(1,Math.ceil(total/rowsPerPage));currentPage=Math.max(1,Math.min(totalPages,currentPage));

const from=printAll?0:(currentPage-1)*rowsPerPage,to=printAll?total:Math.min(from+rowsPerPage,total);

const fragment=document.createDocumentFragment(),search=printAll?'':$('globalSearch').value;

for(let index=from;index<to;index++){

const tr=document.createElement('tr');for(const key of headerKeys){const td=document.createElement('td');td.appendChild(highlightedText(currentFilteredData[index][key],search));tr.appendChild(td)}fragment.appendChild(tr);

}

tbody.appendChild(fragment);

$('pageInfo').textContent='Toplam '+total.toLocaleString('tr-TR')+' kayıttan '+(from+1)+' - '+to+' arası gösteriliyor.';

$('pageIndicator').textContent='Sayfa '+currentPage+' / '+totalPages;

$('prevBtn').disabled=currentPage<=1;$('nextBtn').disabled=currentPage>=totalPages;

}

function changePage(direction){

currentPage+=direction;renderPagination();$('tableContainer').scrollTo({top:0,behavior:'smooth'});

}

function createSlicer(key){

if(!headerKeys.includes(key)||activeSlicerCols.includes(key))return;

activeSlicerCols.push(key);slicerSelections.set(key,new Set());renderSlicerStructure();applyFiltersAndSlicers();

}

function renderSlicerStructure(){

const cont=$('slicerArea');cont.replaceChildren();

for(const col of activeSlicerCols){

const vals=[...new Set(excelData.map(r=>display(r[col]).trim()))].sort((a,b)=>a.localeCompare(b,'tr-TR',{numeric:true}));

const box=document.createElement('div');box.className='slicer-row slicer-box';box.dataset.col=col;box.id='slicer_'+col;

const info=document.createElement('div');info.className='slicer-row-header';

const title=document.createElement('div');title.className='slicer-row-title';title.textContent=actualHeaders[col];

const stats=document.createElement('div');stats.className='slicer-row-stats';

const labels={};for(const label of ['Toplam','Seçilen','Aktif']){

const el=document.createElement('span');el.textContent=label+': 0';el.dataset.counter=label;labels[label]=el;

stats.appendChild(el);stats.appendChild(document.createTextNode(' | '));

}

const remove=document.createElement('button');remove.type='button';remove.className='slicer-remove-link';remove.textContent='Kaldır';remove.onclick=()=>removeSlicer(col);

stats.appendChild(remove);info.append(title,stats);

const buttons=document.createElement('div');buttons.className='slicer-row-buttons';

for(const val of vals){const btn=document.createElement('button');btn.type='button';btn.className='slicer-btn';btn.textContent=val||'(Boş Kayıtlar)';btn.title=val||'(Boş Kayıtlar)';btn.dataset.val=val;

btn.onclick=()=>toggleSlicerValue(col,val);buttons.appendChild(btn);

}

box.slicerData={vals,labels,buttons};box.append(info,buttons);cont.appendChild(box);

}

function removeSlicer(col){

activeSlicerCols=activeSlicerCols.filter(c=>c!==col);slicerSelections.delete(col);renderSlicerStructure();applyFiltersAndSlicers();

}

function toggleSlicerValue(col,value){

const selected=slicerSelections.get(col);if(selected.has(value))selected.delete(value);else selected.add(value);applyFiltersAndSlicers();

}

function rowMatchesSearch(row,text){return !text||headerKeys.some(key=>display(row[key]).toLocaleLowerCase('tr-TR').includes(text))}

function applyFiltersAndSlicers(){

const find=$('globalSearch').value.trim().toLocaleLowerCase('tr-TR');

currentFilteredData=excelData.filter(row=>{

for(const col of activeSlicerCols){const selected=slicerSelections.get(col);if(selected?.size&&!selected.has(display(row[col]).trim()))return false}

return rowMatchesSearch(row,find);

});

currentPage=1;updateSlicerUIs(find);renderPagination();updateGauges(excelData.length,currentFilteredData.length);updateProfileImage(currentFilteredData);

}

function updateSlicerUIs(find){

for(const box of $('slicerArea').children){

const col=box.dataset.col,selected=slicerSelections.get(col)||new Set(),available=new Set();

for(const row of excelData){if(!rowMatchesSearch(row,find))continue;let okay=true;

for(const other of activeSlicerCols){if(other===col)continue;const set=slicerSelections.get(other);

if(set?.size&&!set.has(display(row[other]).trim())){okay=false;break}

}

if(okay)available.add(display(row[col]).trim());

}

const data=box.slicerData;

data.labels.Toplam.textContent='Toplam: '+data.vals.length;

data.labels.Seçilen.textContent='Seçilen: '+selected.size;

data.labels.Aktif.textContent='Aktif: '+available.size;

for(const btn of data.buttons.children){const val=btn.dataset.val,isSelected=selected.has(val),valid=available.has(val);

btn.className='slicer-btn'+(isSelected?' selected':valid?'':' disabled-slicer');

btn.disabled=!valid&&!isSelected;btn.setAttribute('aria-pressed',String(isSelected));

}

function updateGauges(total,filtered){

const percent=total?Math.round(filtered/total*100):0;

$('gTotal').textContent=total.toLocaleString('tr-TR');

$('gPercent').textContent='%'+percent;

$('gFiltered').textContent=filtered.toLocaleString('tr-TR');

$('pathTotal').style.strokeDashoffset=total?0:PATH_LENGTH;

$('pathPercent').style.strokeDashoffset=PATH_LENGTH*(1-percent/100);

$('pathFiltered').style.strokeDashoffset=PATH_LENGTH*(1-percent/100);

}

function downloadBlob(data,name,mime){const blob=new Blob([data],{type:mime}),url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download=name;document.body.appendChild(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(url),15000)}

function rowsToExport(){return [headerKeys.map(k=>makeCell(actualHeaders[k])),...currentFilteredData.map(r=>headerKeys.map(k=>r[k]||makeCell('')))]}

async function exportTable(format){if(!headerKeys.length||!currentFilteredData.length){alert('Dışa aktarılacak veri bulunamadı.');return}status((format==='ods'?'LibreOffice Calc':'Excel')+' dosyası hazırlanıyor...');try{const rows=rowsToExport(),zip=new JSZip(),fileName=cleanFilename(workbookFileName||'Envanter')+'_'+cleanFilename(currentSheetName||'Filtrelenmis')+'.'+format;let bytes;if(format==='ods')bytes=await writeODS(zip,rows,currentSheetName);else bytes=await writeXLSX(zip,rows,currentSheetName);downloadBlob(bytes,fileName,format==='ods'?'application/vnd.oasis.opendocument.spreadsheet':'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');status(`${currentFilteredData.length.toLocaleString('tr-TR')} filtrelenmiş kayıt ${format.toUpperCase()} olarak indirildi.`,'success')}catch(err){status('Dışa aktarma hatası: '+err.message,'error');alert('Dosya oluşturulamadı: '+err.message)}}

async function writeXLSX(zip,rows,sheetName){const name=escapeXML(sheetSafeName(sheetName)),xmlRows=[];for(let ri=0;ri<rows.length;ri++){const cells=[];for(let ci=0;ci<rows[ri].length;ci++){const item=rows[ri][ci];if(!item||display(item)==='')continue;const ref=colToRef(ci)+(ri+1),v=display(item);if(item.t==='n'&&Number.isFinite(Number(v))&&v.trim())cells.push(`<c r="${ref}"><v>${escapeXML(v)}</v></c>`);else cells.push(`<c r="${ref}" t="inlineStr"><is><t xml:space="preserve">${escapeXML(v)}</t></is></c>`)}xmlRows.push(`<row r="${ri+1}">${cells.join('')}</row>`)}

zip.file('[Content_Types].xml','<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/><Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/><Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/></Types>');

zip.file('_rels/.rels','<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/></Relationships>');

zip.file('xl/workbook.xml',`<?xml version="1.0" encoding="UTF-8" standalone="yes"?><workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><sheets><sheet name="${name}" sheetId="1" r:id="rId1"/></sheets></workbook>`);

zip.file('xl/_rels/workbook.xml.rels','<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/><Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/></Relationships>');

zip.file('xl/styles.xml','<?xml version="1.0" encoding="UTF-8" standalone="yes"?><styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><fonts count="1"><font><sz val="11"/><name val="Calibri"/></font></fonts><fills count="2"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/></cellXfs></styleSheet>');

zip.file('xl/worksheets/sheet1.xml',`<?xml version="1.0" encoding="UTF-8" standalone="yes"?><worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheetData>${xmlRows.join('')}</sheetData></worksheet>`);return await zip.generateAsync({type:'uint8array',compression:'DEFLATE',compressionOptions:{level:5}})}

async function writeODS(zip,rows,sheetName){const name=escapeXML(sheetName||'Veriler');zip.file('mimetype','application/vnd.oasis.opendocument.spreadsheet',{compression:'STORE'});const xmlRows=[];

for(const row of rows){const cs=[];for(const obj of row){const v=display(obj),num=obj?.t==='n'&&Number.isFinite(Number(v))&&v.trim();cs.push(num?`<table:table-cell office:value-type="float" office:value="${escapeXML(v)}"><text:p>${escapeXML(v)}</text:p></table:table-cell>`:`<table:table-cell office:value-type="string"><text:p>${escapeXML(v)}</text:p></table:table-cell>`)}xmlRows.push(`<table:table-row>${cs.join('')}</table:table-row>`)}

zip.file('content.xml',`<?xml version="1.0" encoding="UTF-8"?><office:document-content xmlns:office="urn:oasis:names:tc:opendocument:xmlns:office:1.0" xmlns:table="urn:oasis:names:tc:opendocument:xmlns:table:1.0" xmlns:text="urn:oasis:names:tc:opendocument:xmlns:text:1.0" office:version="1.2"><office:body><office:spreadsheet><table:table table:name="${name}">${xmlRows.join('')}</table:table></office:spreadsheet></office:body></office:document-content>`);

zip.file('styles.xml','<?xml version="1.0" encoding="UTF-8"?><office:document-styles xmlns:office="urn:oasis:names:tc:opendocument:xmlns:office:1.0" office:version="1.2"><office:styles/></office:document-styles>');

zip.file('META-INF/manifest.xml','<?xml version="1.0" encoding="UTF-8"?><manifest:manifest xmlns:manifest="urn:oasis:names:tc:opendocument:xmlns:manifest:1.0" manifest:version="1.2"><manifest:file-entry manifest:full-path="/" manifest:media-type="application/vnd.oasis.opendocument.spreadsheet"/><manifest:file-entry manifest:full-path="content.xml" manifest:media-type="text/xml"/><manifest:file-entry manifest:full-path="styles.xml" manifest:media-type="text/xml"/></manifest:manifest>');return await zip.generateAsync({type:'uint8array',compression:'DEFLATE',compressionOptions:{level:5}})}

</script>

</body>

</html>