30 Günlük Projeksiyon
{pending.length} bekleyen işlem
{pending.length === 0 ? (
Bekleyen işlem yok
) : (
<>
{fmtM(expInc)}
Beklenen Gelir
{fmtM(expExp)}
Beklenen Gider
= 0 ? '#16a34a' : '#dc2626' }}>
{netP >= 0 ? '+' : ''}{fmtM(netP)}
Net Projeksiyon
Gelir {incPct}%
Gider {expPct}%
{sorted.length > 0 && (
{sorted.map(t => {
const due = t.dueDate || t.date;
const d = diffDays(due);
const lbl = d < 0 ? Math.abs(d) + 'g gecikmiş' : d === 0 ? 'Bugün' : d === 1 ? 'Yarın' : d + 'g';
const overdue = d < 0;
const proj = projById[t.projectId];
return (
{t.description}
{proj && {proj.name}}
{t.type === 'income' ? '+' : '-'}{fmtM(t.amount)}
{lbl}
);
})}
)}
{overdueIncluded > 0 && (
⚠ {fmtM(overdueIncluded)} vadesi geçmiş işlem dahil
)}
)}
);
}
// ── Kâr Marjı Trendi ─────────────────────────────────────────
function MarjTrend({ monthlyData }) {
const [hovIdx, setHovIdx] = React.useState(null);
const pts = monthlyData.filter(m => m.inc > 0 || m.exp > 0);
if (pts.length < 2) return null;
const margins = pts.map(m => m.inc > 0 ? Math.round((m.inc-m.exp)/m.inc*100) : 0);
const W = 400, H = 60;
const minM = Math.min(...margins, -10), maxM = Math.max(...margins, 30);
const range = maxM - minM || 1;
const step = W / (pts.length - 1);
const path = margins.map((v, i) => `${i===0?'M':'L'}${(i*step).toFixed(1)},${(H - ((v-minM)/range)*H).toFixed(1)}`).join(' ');
const lastM = margins[margins.length-1];
const color = lastM >= 0 ? '#16a34a' : '#dc2626';
const zeroY = H - ((0-minM)/range)*H;
const TIP_W = 90, TIP_H = 30;
return (
{/* ── Header ──────────────────────────────────────────── */}
{/* Cetvel imzası */}
{/* ── KPI Kartları — gerçekleşen / beklenen / gecikmiş ── */}
{/* Gerçekleşen Gelir */}
Tahsil Edilen
{fmtM(realizedInc)}
{expectedInc > 0 &&
+ {fmtM(expectedInc)} bekleniyor
}
{prevKpi &&
}
{/* Gerçekleşen Gider */}
Ödenen
{fmtM(realizedExp)}
{expectedExp > 0 &&
+ {fmtM(expectedExp)} bekliyor
}
{prevKpi &&
}
{/* Net Gerçek */}
= 0 ? 'net-pos' : 'net-neg'}`}>
Net Gerçek
= 0 ? 'inc' : 'exp'}`}>
{netRealized < 0 ? '-' : ''}{fmtM(Math.abs(netRealized))}
{(expectedInc > 0 || expectedExp > 0) && (
Proj: {(netRealized + expectedInc - expectedExp) >= 0 ? '+' : ''}{fmtM(netRealized + expectedInc - expectedExp)}
)}
{prevKpi &&
}
{/* Gecikmiş */}
0 ? 'net-neg' : 'neutral'}`}>
Gecikmiş
0 ? 'exp' : ''}`} style={overdueList.length === 0 ? {color:'var(--text-faint)'} : {}}>
{overdueList.length > 0 ? fmtM(overdueAmt) : 'Yok'}
{overdueList.length > 0
?
{overdueList.length} işlem
:
Her şey vadesinde ✓
}
{/* İşlem sayısı / ort. gelir */}
Ort. Aylık Gelir (tüm zamanlar)
{transactions.length ? fmtM(avgIncome) : '—'}
{txCount} işlem
{/* ── Gelir Hedefi Şeridi ─────────────────────────────── */}
0 ? '' : ' fn-goal-strip--empty'}`}
onClick={() => { setGoalDraft(incomeGoal > 0 ? String(incomeGoal) : ''); setEditGoal(true); }}>
0 ? 'var(--accent)' : 'var(--text-faint)' }} />
Gelir Hedefi
{incomeGoal > 0 ? (
<>
= 100 ? '#22c55e' : goalPct >= 75 ? '#f59e0b' : 'var(--accent)',
}} />
= 100 ? '#22c55e' : goalPct >= 75 ? '#f59e0b' : 'var(--accent)' }}>
{goalPct}%
{fmtM(realizedInc)} / {fmtM(incomeGoal)}
) : (
Tıkla ve hedef belirle
)}
{/* ── KDV Özeti ──────────────────────────────────────── */}
{hasVat && (
KDV Özeti (seçili dönem):
Hesaplanan {fmtM(vatCollected)}
İndirilecek {fmtM(vatPaid)}
Fark = 0 ? NET_NEG : NET_POS }}>{fmtM(vatCollected - vatPaid)}
)}
{/* ── Yaklaşan Ödemeler ──────────────────────────────── */}
{/* ── Grafik + Kategori ───────────────────────────────── */}
{/* Nakit akış grafiği */}
Son 12 Ay — Nakit Akışı
Gelir
Gider
Net
{transactions.length > 0
?
:
Henüz veri yok
}
{bestMonth && (bestMonth.inc > 0 || bestMonth.exp > 0) && (
En iyi ay: {bestMonth.lbl} — net {fmtM(bestMonth.inc - bestMonth.exp)}
)}
{/* Nakit tahmini */}
{/* Kategori dağılımı */}
Kategori Dağılımı
{catTab === 'expense' && (
)}
{catTab === 'expense' && budgetRows.length > 0 && (
Bu Ay — Bütçe Hedefleri
{budgetRows.map(({ cat, limit, spent, pct }) => {
const over = spent > limit;
const warn = !over && pct >= 80;
return (
{cat}
{fmtM(spent, true)} / {fmtM(limit, true)}{over ? ' ⚠' : ''}
);
})}
)}
Firma Kâr & Zarar
{period === 'all' ? 'Tüm zamanlar' : 'Seçili dönem'}
)}
{/* ── İşlem Listesi ───────────────────────────────────── */}
{/* Filtre çubuğu */}
setSearch(e.target.value)}
/>
{search && }
{[{id:'all',label:'Tümü'},{id:'income',label:'Gelirler'},{id:'expense',label:'Giderler'}].map(t => (
))}
{allCats.length > 0 && (
)}
{filtered.length} kayıt
{/* Gruplu liste */}
{filtered.length === 0 ? (
{transactions.length === 0 ? 'Henüz kayıt yok' : 'Filtre kriterlerine uyan kayıt bulunamadı'}
{transactions.length === 0 && (
)}
) : (
{txGroups.map(g => (
{g.label}
{g.inc > 0 && +{fmtM(g.inc)}}
{g.exp > 0 && -{fmtM(g.exp)}}
= 0 ? 'pos' : 'neg'}`}>
Net: {(g.inc - g.exp) < 0 ? '-' : ''}{fmtM(Math.abs(g.inc - g.exp))}
{g.items.map(t => {
const proj = projById[t.projectId];
return (
{t.description}
{t.invoiceNo && (
#{t.invoiceNo}
)}
cycleStatus(t)}
title="Tıkla: durumu değiştir"
>
{fnIsOverdue(t) ? 'Gecikmiş' : (t.status && t.status !== 'done' ? TX_STATUSES[t.status]?.short : null)}
{t.category}
{t.vat > 0 && <>·KDV %{t.vat}}
{t.recurrence && <>· Aylık}
{proj && (
<>·{proj.name}
)}
·
{fmtDate(t.date)}
{t.dueDate && t.dueDate !== t.date && (
<>·
Vade: {fmtDate(t.dueDate)}
)}
{t.notes && (
<>·
📝 {t.notes.slice(0, 40)}{t.notes.length > 40 ? '…' : ''}
)}
{t.type === 'income' ? '+' : '-'}{fmtM(t.amount)}
{t.receipt && (
)}
);
})}
))}
)}
setEditGoal(false)}>
e.stopPropagation()}>
Aylık Gelir Hedefi
Seçili dönemde tahsil edilen gelirle karşılaştırılır.
setGoalDraft(e.target.value)}
autoFocus
onKeyDown={e => {
if (e.key === 'Enter') {
const v = parseFloat(String(goalDraft).replace(',', '.'));
onSetCategoryBudget('__income_goal__', v > 0 ? v : null);
setEditGoal(false);
}
if (e.key === 'Escape') setEditGoal(false);
}}
/>
{incomeGoal > 0 && (
)}
setDelConfirm(null)}>
e.stopPropagation()}>
Kayıt silinsin mi?
Bu işlem geri alınamaz.
);
}
// ── Yeni Kayıt / Düzenleme Modalı ────────────────────────────
function AddTransactionModal({ state, initialType, editingTx, onSave, onClose, onAddCustomCategory }) {
const isEdit = !!editingTx;
const [type, setType] = React.useState(editingTx?.type || initialType || 'income');
const [amount, setAmount] = React.useState(editingTx ? String(editingTx.amount) : '');
const [description, setDescription] = React.useState(editingTx?.description || '');
const [invoiceNo, setInvoiceNo] = React.useState(editingTx?.invoiceNo || '');
const [notes, setNotes] = React.useState(editingTx?.notes || '');
const [category, setCategory] = React.useState(
editingTx?.category || fnGetCats(state, initialType === 'expense' ? 'expense' : 'income')[0]
);
const [projectId, setProjectId] = React.useState(editingTx?.projectId || state.activeProjectId || '');
const [date, setDate] = React.useState(editingTx?.date || new Date().toISOString().slice(0, 10));
const [status, setStatus] = React.useState(editingTx?.status || 'done');
const [dueDate, setDueDate] = React.useState(editingTx?.dueDate || '');
const [vat, setVat] = React.useState(editingTx?.vat ? String(editingTx.vat) : '');
const [recurring, setRecurring] = React.useState(!!editingTx?.recurrence);
const [installments,setInstallments]= React.useState(1);
const [receipt, setReceipt] = React.useState(editingTx?.receipt || null);
const [newCatMode, setNewCatMode] = React.useState(false);
const [newCatName, setNewCatName] = React.useState('');
const [fileError, setFileError] = React.useState('');
React.useEffect(() => {
if (!isEdit) setCategory(fnGetCats(state, type)[0]);
}, [type]);
const handleFile = (e) => {
const f = e.target.files?.[0];
if (!f) return;
setFileError('');
if (f.size > 1.5 * 1024 * 1024) { setFileError('Dosya 1,5 MB\'tan büyük olamaz.'); return; }
const reader = new FileReader();
reader.onload = () => setReceipt({ name: f.name, data: reader.result });
reader.readAsDataURL(f);
};
const addNewCat = () => {
const name = newCatName.trim();
if (!name) return;
onAddCustomCategory?.(type, name);
setCategory(name);
setNewCatMode(false); setNewCatName('');
};
React.useEffect(() => {
const fn = e => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', fn);
return () => window.removeEventListener('keydown', fn);
}, [onClose]);
const save = () => {
const amt = parseFloat(String(amount).replace(',', '.'));
if (!amt || amt <= 0 || !description.trim()) return;
const vatNum = parseFloat(String(vat).replace(',', '.')) || null;
const base = {
type, amount: amt,
description: description.trim(),
invoiceNo: invoiceNo.trim() || null,
notes: notes.trim() || null,
category,
projectId: projectId || null,
date,
status,
dueDate: (status !== 'done' && status !== 'cancelled' && dueDate) ? dueDate : null,
vat: vatNum && vatNum > 0 ? vatNum : null,
recurrence: !isEdit && recurring ? { type: 'monthly' } : (isEdit && editingTx.recurrence && recurring ? editingTx.recurrence : null),
receipt,
};
// Taksitlendirme — ilk taksit seçilen tarih/durumla, kalanlar aylık vadeli
if (!isEdit && !recurring && installments > 1) {
const per = Math.floor((amt / installments) * 100) / 100;
const first = Math.round((amt - per * (installments - 1)) * 100) / 100;
const list = [];
let d = date;
for (let i = 0; i < installments; i++) {
list.push({
...base,
amount: i === 0 ? first : per,
description: `${base.description} (${i + 1}/${installments})`,
date: d,
status: i === 0 ? status : 'deferred',
dueDate: i === 0 ? base.dueDate : d,
receipt: i === 0 ? receipt : null,
});
d = fnNextMonth(d);
}
onSave(list);
return;
}
onSave(base);
};
const isValid = parseFloat(String(amount).replace(',', '.')) > 0 && description.trim();
const cats = fnGetCats(state, type);
const borderColor = type === 'income' ? INC_COLOR : EXP_COLOR;
return (
e.stopPropagation()}>
{isEdit ? 'Kaydı Düzenle' : (type === 'income' ? 'Gelir Ekle' : 'Gider Ekle')}
);
}
window.FinanceView = FinanceView;
console.log('[finance.jsx] loaded, FinanceView=', typeof window.FinanceView);