Deneyim: Yıllık Faaliyet Raporu

Dönem olarak hazırlayacağınız Raporlarda, kurumsal ciddiyet içeren bir form ile sunmak amacıyla yapılan çalışmadır. Not defterine ".html" uzantılı olarak kaydedilmesi yeterlidir.

Şirket logosu "logo.jpg" ismiyle aynı klasörde yer almalıdır. Başlıklardaki içerikleri (Tarih aralığı, Kurum ismi veya Dapartman, Müdürlük, Başkanlık) gibi ifadeleri "Mevcuttaki kayıtlarda görünenleri "Ctrl+F" ile aratıp kalıcı olarak düzenleyebilirsiniz.

Form açıldığında, içerik boş gelecek şekilde hazırlanmıştır. İçerisine ekleyebileceğiniz data, Örnek olması ve üzerinde, Ekleme, Silme, Değişiklik yapabilmeniz için kodun içine gömülmüştür.

"Şablon" butonuna bastığınızda, Kod için gömülü dosya bilgisayarınıza inecektir.

Excel dosyasını çalıştırdığınızda Örnek içerik aşağıdaki gibi görünecektir. Dört grup olarak lan yer almaktadır. İlgili Alanlarda, düzenleme, ekleme, çıkarma ile dosyayı kaydedin.

"Excel Yükle" butonuna basarak, faaliyetinizle ilgili olarak düzenlediğiniz dosyayı seçin. Prestijli, tek sayfalık özet raporunuz hazır olacaktır.

"Yazdır" butonuna basarak "PDF" formatında kaydedip, dijital olarak "mail, Whatsapp" ile paylaşabilir, sonrasında yazdırabilirsiniz

HTML Kod:

<!DOCTYPE html>

<head>

<title>2025-2026 Yıllık Faaliyet Raporu</title>

<style>

:root { --primary: #1a365d; --bg: #f4f7f9; --text: #2d3748; --accent: #2b6cb0; }

* { box-sizing: border-box; }

body {

background-color: var(--bg); color: var(--text); padding: 10px; margin: 0;

font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 12px;

}

.container { max-width: 1100px; margin: 0 auto; }

/* BAŞLIK ALANI */

.header {

display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;

background: #fff; padding: 12px 15px; margin-bottom: 20px; border-radius: 4px;

border-bottom: 3px solid var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}

.header-left { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

.style-bold-big { font-size: 0.85rem; font-weight: 800; color: var(--primary); }

.style-small-light { font-size: 0.7rem; color: #666; font-weight: normal; }

.header-right { font-size: 0.8rem; font-weight: 800; color: var(--primary); white-space: nowrap; text-align: right; }

.logo { height: 30px; }

/* GRID VE KART YAPISI */

.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.col { display: flex; flex-direction: column; gap: 15px; }

.card { background: white; padding: 12px; border-radius: 4px; border: 1px solid #e2e8f0; min-height: 100px; }

.card-title {

font-size: 0.8rem; font-weight: 800; color: var(--primary);

margin-bottom: 15px; border-bottom: 1px solid #edf2f7; padding-bottom: 8px; text-transform: uppercase;

}

.data-row { display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 8px; }

/* Sayı ve değerler alanı kalın ve siyah */

.data-val { font-weight: 800; color: #000000; }

.item-text { font-size: 0.75rem; margin-bottom: 8px; padding: 4px 0; border-bottom: 1px dashed #f1f5f9; }

/* Progress Bar */

.progress-bar {

height: 8px;

background: #edf2f7;

border-radius: 4px;

margin: 4px 0 10px 0;

overflow: hidden;

border: 1px solid #cbd5e1;

}

.progress-fill {

height: 100%;

background: var(--accent);

transition: width 0.5s ease;

}

.toolbar { display: flex; gap: 5px; margin-bottom: 10px; justify-content: flex-end; }

button { padding: 4px 10px; cursor: pointer; border: 1px solid var(--primary); background: white; font-size: 10px; border-radius: 3px; }

@media print {

@page { size: A4 landscape; margin: 5mm; }

html, body {

background: white;

-webkit-print-color-adjust: exact !important;

print-color-adjust: exact !important;

}

* {

-webkit-print-color-adjust: exact !important;

print-color-adjust: exact !important;

}

.toolbar { display: none !important; }

.container { width: 100%; }

.card { break-inside: avoid; }

}

</style>

</head>

<body>

<button onclick="document.getElementById('fileInput').click()">📥 Excel Yükle</button>

<button onclick="App.downloadSampleExcel()">📝 Şablon</button>

<button onclick="window.print()">🖨️ Yazdır</button>

</div>

<div>

<div class="style-small-light">(Temmuz 2025 – Temmuz 2026)</div>

<div class="style-bold-big">YILLIK FAALİYET RAPORU</div>

</div>

<div class="style-bold-big">Kullanıcı Destek Koordinatörlüğü</div>

<div class="header-right">TEKNİK İŞLETME MÜDÜRLÜĞÜ</div>

</header>

</div>

const App = {

embeddedData: [

[1, "1. YAPILAN İŞLER", "Kullanıcı Çağrılarına, Çözüm desteği sağlandı.", "3.750 Adet"],

[1, "1. YAPILAN İŞLER", "Bilgisayar Kurulum Tamamlandı", "850 Adet"],

[1, "1. YAPILAN İŞLER", "Tüm Kameraların yazılımları güncellendi.", "90%"],

[1, "1. YAPILAN İŞLER", "Akıllı Form ve Dokümantasyon Çalışmaları yapıldı", "70%"],

[1, "1. YAPILAN İŞLER", "Kurumdaki; VIP, Personel ve Toplantı odalarına Bakım ve Toplantı desteği sağlandı.", "80%"],

[1, "1. YAPILAN İŞLER", "Yazıcı ve Projeksiyonlar için Arıza tespit çalışmaları yapıldı. (Baskı adeti ve Ampul saati)", "100%"],

[2, "2. KURUMA SAĞLANAN KATKILAR", "Kamera sisteminde oluşan yoğun kesintiler, minimum seviyeye indirildi.", "nan"],

[2, "2. KURUMA SAĞLANAN KATKILAR", "Kurumsal yapıdaki formlarla, çalışmalarda bir düzen sağlandı.", "nan"],

[2, "2. KURUMA SAĞLANAN KATKILAR", "Koordinatörlüğün iş ve kapsam sınırları belirlendi.", "nan"],

[2, "2. KURUMA SAĞLANAN KATKILAR", "Ortak Yazıcılarda sık arızaya geçme durumları, yazlım ve donanımsal bakımlarla azaltıldı.", "nan"],

[3, "3. ÇALIŞMALARIN İLERLEME DURUMU", "Koordinatörlük kapsamındaki işlerle ilgili dokümantasyon çalışmaları", "15%"],

[3, "3. ÇALIŞMALARIN İLERLEME DURUMU", "Kameraların Avigilon yazılımına geçme sonrası, yapılandırma işlemleri", "60%"],

[3, "3. ÇALIŞMALARIN İLERLEME DURUMU", 'Mevcut eski kameraların "150 adet" 1/3 yeni kameralarla değişimi', "1%"],

[4, "4. GELECEK DÖNEM HEDEFLERİ", "Kameralar için Bakım anlaşması", "nan"],

[4, "4. GELECEK DÖNEM HEDEFLERİ", "Karel Santral için, Bakım anlaşması", "nan"],

[4, "4. GELECEK DÖNEM HEDEFLERİ", "Tüm Yazıcılar için yer değişikliği çalışması", "nan"],

[4, "4. GELECEK DÖNEM HEDEFLERİ", "Tüm Projeksiyonlar için yer değişikliği çalışması", "nan"],

buildDashboard(data) {

const container = document.getElementById('dashboard');

const groups = { 1:[], 2:[], 3:[], 4:[] };

data.forEach(row => {

if(groups[row[0]]) {

let rawVal = row[3];

let val = String(rawVal);

if (val === 'nan' || val === 'null' || val === 'undefined' || val.trim() === '') val = '';

let percentVal = 0;

if (row[0] == 3 && val !== '') {

if (typeof rawVal === 'number') {

percentVal = rawVal <= 1 ? rawVal * 100 : rawVal;

val = Math.round(percentVal) + '%';

} else {

percentVal = parseFloat(val.replace(',', '.').replace('%', '').trim()) || 0;

}

groups[row[0]].push({title: row[2], val: val, percent: percentVal});

}

});

container.innerHTML = `

<div class="card-title">1. YAPILAN İŞLER</div>

${groups[1].map(i => `<div class="data-row"><span>${i.title}</span><span class="data-val">${i.val}</span></div>`).join('')}

</div>

<div class="card-title">2. KURUMA SAĞLANAN KATKILAR</div>

${groups[2].map(i => `<div class="item-text">✓ ${i.title}</div>`).join('')}

</div>

<div class="card-title">3. ÇALIŞMALARIN İLERLEME DURUMU</div>

${groups[3].map(i => `

<div>

<div class="data-row"><span>${i.title}</span><span class="data-val">${i.val}</span></div>

</div>

`).join('')}

</div>

<div class="card-title">4. GELECEK DÖNEM HEDEFLERİ</div>

${groups[4].map(i => `<div class="item-text">🎯 ${i.title}</div>`).join('')}

</div>

handleFile(e) { const reader = new FileReader(); reader.onload = (evt) => { const wb = XLSX.read(evt.target.result, { type: 'array' }); const json = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 }); this.buildDashboard(json.slice(1).filter(r => r[0])); }; reader.readAsArrayBuffer(e.target.files[0]); },

downloadSampleExcel() { const ws = XLSX.utils.aoa_to_sheet([["No", "Bölüm", "Başlık", "Değer"], ...this.embeddedData]); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Veri"); XLSX.writeFile(wb, "Faaliyet_Raporu.xlsx"); }

};

// Açılışta boş gelmesi için [] gönderildi

window.addEventListener('DOMContentLoaded', () => App.buildDashboard([]));

</script>

</body>

</html>