| Merkez Bankası Döviz Kuru | |||
| ALIŞ | SATIŞ | ||
| USD | 0 | 0 | |
| EURO | 0 | 0 | |
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Gelir Gider Takip</title>
<!-- PDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
<style>
body { font-family: Arial; background:#f4f6f8; padding:20px; }
h2 { margin-top:40px; }
table {
width:100%;
border-collapse:collapse;
background:white;
}
th,td {
border:1px solid #ccc;
padding:6px;
text-align:center;
}
th { background:#e9ecef; }
input { width:100%; box-sizing:border-box; }
button { padding:5px 10px; cursor:pointer; margin:2px; }
.green { background:#d4edda; color:#155724; }
.red { background:#f8d7da; color:#721c24; }
.summary {
width:40%;
margin-left:auto;
background:white;
padding:10px;
border:1px solid #ccc;
}
.summary div {
display:flex;
justify-content:space-between;
font-weight:bold;
margin-bottom:5px;
}
</style>
</head>
<body>
<!-- ================= GİDERLER ================= -->
<h2>GİDERLER</h2>
<table id="giderTablo">
<thead>
<tr>
<th>Tarih</th>
<th>Açıklama</th>
<th>Tutar (?)</th>
<th>Sil</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button onclick="giderEkle()">+ Gider Ekle</button>
<!-- ================= GELİRLER ================= -->
<h2>GELİRLER</h2>
<select onchange="filtreGelir(this.value)">
<option value="all">TÜMÜ</option>
<option value="green">?? 1200 TL</option>
<option value="red">?? 1200 TL Dışı</option>
</select>
<button onclick="pdfOlustur()">?? GELİRLER PDF</button>
<table id="gelirTablo">
<thead>
<tr>
<th>Tarih</th>
<th>Açıklama</th>
<th>Tutar (?)</th>
<th>İşlem</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button onclick="gelirEkle()">+ Gelir Ekle</button>
<!-- ================= ÖZET ================= -->
<h2>ÖZET</h2>
<div class="summary">
<div><span>GELİRLER TOPLAMI</span><span id="gelirToplam">0 ?</span></div>
<div><span>GİDERLER TOPLAMI</span><span id="giderToplam">0 ?</span></div>
<div style="border-top:1px solid #ccc;padding-top:5px;">
<span>KALAN / DEVREDEN</span>
<span id="kalan">0 ?</span>
</div>
</div>
<script>
/* ========== GİDERLER ========== */
function giderEkle(){
const tbody=document.querySelector("#giderTablo tbody");
const tr=document.createElement("tr");
tr.innerHTML=`
<td><input type="date"></td>
<td><input></td>
<td><input type="number" oninput="hesapla()"></td>
<td><button onclick="this.parentElement.parentElement.remove();hesapla()">X</button></td>`;
tbody.appendChild(tr);
}
/* ========== GELİRLER ========== */
let gelirler=[];
let filtre="all";
function gelirEkle(){
gelirler.push({tarih:"",aciklama:"",tutar:"",kilit:false});
goster();
}
function kaydet(i){ gelirler[i].kilit=true; goster(); }
function duzenle(i){ gelirler[i].kilit=false; goster(); }
function silGelir(i){ gelirler.splice(i,1); goster(); }
function guncelle(i,a,v){ gelirler[i][a]=v; hesapla(); }
function filtreGelir(f){ filtre=f; goster(); }
function goster(){
const tbody=document.querySelector("#gelirTablo tbody");
tbody.innerHTML="";
gelirler.forEach((g,i)=>{
if(filtre==="green" && Number(g.tutar)!==1200) return;
if(filtre==="red" && (!g.tutar || Number(g.tutar)===1200)) return;
let renk=Number(g.tutar)===1200?"green":(g.tutar?"red":"");
let dis=g.kilit?"disabled":"";
tbody.innerHTML+=`
<tr>
<td><input type="date" ${dis} value="${g.tarih}"
onchange="guncelle(${i},'tarih',this.value)"></td>
<td><input ${dis} value="${g.aciklama}"
onchange="guncelle(${i},'aciklama',this.value)"></td>
<td><input ${dis} type="number" class="${renk}" value="${g.tutar}"
onchange="guncelle(${i},'tutar',this.value)"></td>
<td>
${g.kilit
? `<button onclick="duzenle(${i})">Düzenle</button>`
: `<button onclick="kaydet(${i})">Kaydet</button>`}
<button onclick="silGelir(${i})">Sil</button>
</td>
</tr>`;
});
hesapla();
}
/* ========== HESAP ========== */
function hesapla(){
let gelirToplam=gelirler.reduce((t,g)=>t+(Number(g.tutar)||0),0);
let giderToplam=0;
document.querySelectorAll("#giderTablo input[type=number]")
.forEach(i=>giderToplam+=Number(i.value)||0);
document.getElementById("gelirToplam").innerText=
gelirToplam.toLocaleString("tr-TR")+" ?";
document.getElementById("giderToplam").innerText=
giderToplam.toLocaleString("tr-TR")+" ?";
document.getElementById("kalan").innerText=
(gelirToplam-giderToplam).toLocaleString("tr-TR")+" ?";
}
/* ========== PDF ========== */
function pdfOlustur(){
const { jsPDF } = window.jspdf;
const doc=new jsPDF("p","mm","a4");
doc.text("GELİRLER LİSTESİ",14,15);
doc.autoTable({
startY:25,
head:[["Tarih","Açıklama","Tutar"]],
body:gelirler.map(g=>[g.tarih,g.aciklama,g.tutar]),
didParseCell:data=>{
if(data.column.index===2){
let v=Number(data.cell.raw);
if(v===1200){
data.cell.styles.fillColor=[212,237,218];
data.cell.styles.textColor=[21,87,36];
} else if(v>0){
data.cell.styles.fillColor=[248,215,218];
data.cell.styles.textColor=[114,28,36];
}
}
}
});
doc.save("gelirler.pdf");
}
/* başlangıç */
giderEkle();
gelirEkle();
</script>
</body>
</html>
