507 lines
18 KiB
PHP
507 lines
18 KiB
PHP
<?php
|
||
require_once "config/session.php";
|
||
|
||
if (!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true) {
|
||
header("location: index.php");
|
||
exit;
|
||
}
|
||
|
||
|
||
include('navbar.php');
|
||
?>
|
||
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>ANJUMA • Finanzen</title>
|
||
|
||
<!-- Bootstrap 5 + DataTables via CDN (sicher, keine 404) -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.10/css/dataTables.bootstrap5.min.css">
|
||
|
||
<style>
|
||
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
||
.kpi-card { min-height: 92px; }
|
||
.dt-nowrap td { white-space: nowrap; }
|
||
|
||
@media (max-width: 576px) {
|
||
#kpiIncomeHint, #kpiExpensesHint { display:none; }
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.dt-nowrap td { white-space: normal !important; }
|
||
}
|
||
|
||
|
||
</style>
|
||
</head>
|
||
<body class="bg-light">
|
||
|
||
<div class="container-fluid py-4">
|
||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||
<div>
|
||
<h3 class="mb-0">Finanzen</h3>
|
||
</div>
|
||
<div class="d-flex gap-2">
|
||
<button id="btnRefresh" class="btn btn-outline-secondary btn-sm">↻ Refresh</button>
|
||
<button id="btnAddExpense" class="btn btn-primary btn-sm">+ Ausgabe</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Filter -->
|
||
<div class="card shadow-sm mb-3">
|
||
<div class="card-body">
|
||
<div class="row g-2 align-items-end">
|
||
<div class="col-12 col-md-3">
|
||
<label class="form-label mb-1">Von</label>
|
||
<input type="date" class="form-control" id="fromDate">
|
||
</div>
|
||
<div class="col-12 col-md-3">
|
||
<label class="form-label mb-1">Bis</label>
|
||
<input type="date" class="form-control" id="toDate">
|
||
</div>
|
||
<div class="col-12 col-md-6 d-flex gap-2">
|
||
<button id="btnThisMonth" class="btn btn-outline-primary">Dieser Monat</button>
|
||
<button id="btnLastMonth" class="btn btn-outline-primary">Letzter Monat</button>
|
||
<button id="btnThisYear" class="btn btn-outline-primary">Dieses Jahr</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI -->
|
||
<div class="row g-3 mb-3">
|
||
<div class="col-12 col-md-4">
|
||
<div class="card shadow-sm kpi-card">
|
||
<div class="card-body">
|
||
<div class="text-muted small">Einnahmen</div>
|
||
<div class="fs-3 fw-semibold" id="kpiIncome">–</div>
|
||
<div class="text-muted small" id="kpiIncomeHint">–</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<div class="card shadow-sm kpi-card">
|
||
<div class="card-body">
|
||
<div class="text-muted small">Ausgaben</div>
|
||
<div class="fs-3 fw-semibold" id="kpiExpenses">–</div>
|
||
<div class="text-muted small" id="kpiExpensesHint">–</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<div class="card shadow-sm kpi-card">
|
||
<div class="card-body">
|
||
<div class="text-muted small">Netto</div>
|
||
<div class="fs-3 fw-semibold" id="kpiNet">–</div>
|
||
<div class="text-muted small">Einnahmen − Ausgaben</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tabs -->
|
||
<ul class="nav nav-tabs" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabIncome" type="button" role="tab">Einnahmen (Termine)</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabExpenses" type="button" role="tab">Ausgaben</button>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="tab-content">
|
||
<!-- Income -->
|
||
<div class="tab-pane fade show active" id="tabIncome" role="tabpanel">
|
||
<div class="card shadow-sm border-top-0 rounded-top-0">
|
||
<div class="card-body">
|
||
<table id="tblIncome" class="table table-striped table-hover align-middle dt-nowrap w-100">
|
||
<thead>
|
||
<tr>
|
||
<th>Datum</th>
|
||
<th>Zeit</th>
|
||
<th>Location</th>
|
||
<th>Gage</th>
|
||
<th>Notiz</th>
|
||
<th>ID</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
<div class="text-muted small mt-2" id="incomeInfo"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Expenses -->
|
||
<div class="tab-pane fade" id="tabExpenses" role="tabpanel">
|
||
<div class="card shadow-sm border-top-0 rounded-top-0">
|
||
<div class="card-body">
|
||
<table id="tblExpenses" class="table table-striped table-hover align-middle dt-nowrap w-100">
|
||
<thead>
|
||
<tr>
|
||
<th>Datum</th>
|
||
<th>Kategorie</th>
|
||
<th>Titel</th>
|
||
<th>Betrag</th>
|
||
<th>Methode</th>
|
||
<th>Notiz</th>
|
||
<th>Aktion</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
<div class="text-muted small mt-2" id="expensesInfo"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Expense Modal -->
|
||
<div class="modal fade" id="expenseModal" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<form class="modal-content" id="expenseForm">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="expenseModalTitle">Ausgabe</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="expId" name="id" value="">
|
||
|
||
<div class="row g-2">
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label mb-1">Datum</label>
|
||
<input type="date" class="form-control" id="expDate" name="date" required>
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label mb-1">Betrag (EUR)</label>
|
||
<input type="number" class="form-control" id="expAmount" name="amount_eur" min="1" step="1" required>
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label mb-1">Kategorie</label>
|
||
<input type="text" class="form-control" id="expCategory" name="category" placeholder="equipment / fuel_travel / marketing ..." required>
|
||
</div>
|
||
<div class="col-12 col-md-6">
|
||
<label class="form-label mb-1">Methode</label>
|
||
<select class="form-select" id="expMethod" name="method">
|
||
<option value="bank">Bank</option>
|
||
<option value="cash">Cash</option>
|
||
<option value="paypal">PayPal</option>
|
||
<option value="card">Karte</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12">
|
||
<label class="form-label mb-1">Titel</label>
|
||
<input type="text" class="form-control" id="expTitle" name="title" required>
|
||
</div>
|
||
<div class="col-12">
|
||
<label class="form-label mb-1">Notiz</label>
|
||
<textarea class="form-control" id="expNotes" name="notes" rows="3"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alert alert-warning mt-3 mb-0 small">
|
||
Tipp: Kategorien konsistent halten (z.B. <span class="mono">equipment</span>, <span class="mono">fuel_travel</span>, <span class="mono">marketing</span>), dann sind Auswertungen später easy.
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
||
<button type="submit" class="btn btn-primary" id="btnSaveExpense">Speichern</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Delete Confirm Modal -->
|
||
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Ausgabe löschen</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
|
||
</div>
|
||
<div class="modal-body" id="deleteBody">Wirklich löschen?</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
||
<button type="button" class="btn btn-danger" id="btnDoDelete">Löschen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast -->
|
||
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1080">
|
||
<div id="toast" class="toast align-items-center text-bg-dark border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
||
<div class="d-flex">
|
||
<div class="toast-body" id="toastBody">...</div>
|
||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/datatables.net@1.13.10/js/jquery.dataTables.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.10/js/dataTables.bootstrap5.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<script>
|
||
const API_INCOME = '/api/finance_income.php';
|
||
const API_EXP_LIST = '/api/finance_expenses_list.php';
|
||
const API_EXP_SAVE = '/api/finance_expenses_save.php';
|
||
const API_EXP_DEL = '/api/finance_expenses_delete.php';
|
||
|
||
let dtIncome, dtExpenses;
|
||
let deleteId = null;
|
||
|
||
const toast = new bootstrap.Toast(document.getElementById('toast'), { delay: 3500 });
|
||
function showToast(msg) {
|
||
document.getElementById('toastBody').textContent = msg;
|
||
toast.show();
|
||
}
|
||
|
||
function eur(n) {
|
||
const v = Number(n) || 0;
|
||
return v.toLocaleString('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 });
|
||
}
|
||
|
||
function fmtDateDE(iso) {
|
||
if (!iso) return '';
|
||
const [y, m, d] = iso.split('-');
|
||
return `${d}.${m}.${y}`;
|
||
}
|
||
|
||
|
||
function todayISO() {
|
||
const d = new Date();
|
||
const m = String(d.getMonth()+1).padStart(2,'0');
|
||
const day = String(d.getDate()).padStart(2,'0');
|
||
return `${d.getFullYear()}-${m}-${day}`;
|
||
}
|
||
|
||
function setRange(from, to) {
|
||
document.getElementById('fromDate').value = from;
|
||
document.getElementById('toDate').value = to;
|
||
}
|
||
|
||
function isoLocal(dateObj) {
|
||
const y = dateObj.getFullYear();
|
||
const m = String(dateObj.getMonth() + 1).padStart(2, '0');
|
||
const d = String(dateObj.getDate()).padStart(2, '0');
|
||
return `${y}-${m}-${d}`;
|
||
}
|
||
|
||
function thisMonthRange() {
|
||
const d = new Date();
|
||
const from = new Date(d.getFullYear(), d.getMonth(), 1);
|
||
const to = new Date(d.getFullYear(), d.getMonth() + 1, 0);
|
||
return [isoLocal(from), isoLocal(to)];
|
||
}
|
||
|
||
function lastMonthRange() {
|
||
const d = new Date();
|
||
const from = new Date(d.getFullYear(), d.getMonth() - 1, 1);
|
||
const to = new Date(d.getFullYear(), d.getMonth(), 0);
|
||
return [isoLocal(from), isoLocal(to)];
|
||
}
|
||
|
||
function thisYearRange() {
|
||
const d = new Date();
|
||
const from = new Date(d.getFullYear(), 0, 1);
|
||
const to = new Date(d.getFullYear(), 11, 31);
|
||
return [isoLocal(from), isoLocal(to)];
|
||
}
|
||
|
||
|
||
function getFilterQS() {
|
||
const from = document.getElementById('fromDate').value;
|
||
const to = document.getElementById('toDate').value;
|
||
const qs = new URLSearchParams({ from, to });
|
||
return qs.toString();
|
||
}
|
||
|
||
async function fetchJSON(url) {
|
||
const res = await fetch(url, { cache: 'no-store' });
|
||
const json = await res.json();
|
||
if (!json.ok) throw new Error(json.error || 'API error');
|
||
return json;
|
||
}
|
||
|
||
async function refreshAll() {
|
||
try {
|
||
const qs = getFilterQS();
|
||
|
||
const [income, expenses] = await Promise.all([
|
||
fetchJSON(`${API_INCOME}?${qs}`),
|
||
fetchJSON(`${API_EXP_LIST}?${qs}`),
|
||
]);
|
||
|
||
// KPI
|
||
const inc = Number(income.sum_eur || 0);
|
||
const exp = Number(expenses.sum_eur || 0);
|
||
document.getElementById('kpiIncome').textContent = eur(inc);
|
||
document.getElementById('kpiExpenses').textContent = eur(exp);
|
||
document.getElementById('kpiNet').textContent = eur(inc - exp);
|
||
|
||
document.getElementById('kpiIncomeHint').textContent = `${income.items.length} abgeschlossene Termine`;
|
||
document.getElementById('kpiExpensesHint').textContent = `${expenses.items.length} Ausgaben`;
|
||
|
||
// Tables
|
||
dtIncome.clear().rows.add(income.items || []).draw(false);
|
||
dtExpenses.clear().rows.add(expenses.items || []).draw(false);
|
||
|
||
document.getElementById('incomeInfo').textContent =
|
||
`Zeitraum ${income.from} bis ${income.to} • Summe: ${eur(inc)}`;
|
||
|
||
document.getElementById('expensesInfo').textContent =
|
||
`Zeitraum ${expenses.from} bis ${expenses.to} • Summe: ${eur(exp)}`;
|
||
|
||
} catch (e) {
|
||
showToast('Fehler: ' + e.message);
|
||
}
|
||
}
|
||
|
||
function expenseActions(row) {
|
||
const encoded = encodeURIComponent(JSON.stringify(row));
|
||
return `
|
||
<div class="btn-group btn-group-sm" role="group">
|
||
<button class="btn btn-outline-secondary btnEditExpense" data-row="${encoded}">Edit</button>
|
||
<button class="btn btn-outline-danger btnDeleteExpense" data-id="${row.id}" data-title="${encodeURIComponent(row.title)}">Delete</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function openExpenseModal(row=null) {
|
||
document.getElementById('expenseModalTitle').textContent = row ? 'Ausgabe bearbeiten' : 'Neue Ausgabe';
|
||
document.getElementById('expId').value = row ? row.id : '';
|
||
document.getElementById('expDate').value = row ? row.date : todayISO();
|
||
document.getElementById('expCategory').value = row ? row.category : '';
|
||
document.getElementById('expTitle').value = row ? row.title : '';
|
||
document.getElementById('expAmount').value = row ? row.amount_eur : '';
|
||
document.getElementById('expMethod').value = row ? row.method : 'bank';
|
||
document.getElementById('expNotes').value = row ? (row.notes || '') : '';
|
||
|
||
new bootstrap.Modal(document.getElementById('expenseModal')).show();
|
||
}
|
||
|
||
function openDeleteModal(id, title) {
|
||
deleteId = id;
|
||
const t = title ? decodeURIComponent(title) : '';
|
||
document.getElementById('deleteBody').innerHTML =
|
||
`Ausgabe <b>${t}</b> (ID <span class="mono">${id}</span>) wirklich löschen?`;
|
||
new bootstrap.Modal(document.getElementById('deleteModal')).show();
|
||
}
|
||
|
||
document.getElementById('btnRefresh').addEventListener('click', refreshAll);
|
||
|
||
document.getElementById('btnThisMonth').addEventListener('click', () => {
|
||
const [f,t] = thisMonthRange(); setRange(f,t); refreshAll();
|
||
});
|
||
document.getElementById('btnLastMonth').addEventListener('click', () => {
|
||
const [f,t] = lastMonthRange(); setRange(f,t); refreshAll();
|
||
});
|
||
document.getElementById('btnThisYear').addEventListener('click', () => {
|
||
const [f,t] = thisYearRange(); setRange(f,t); refreshAll();
|
||
});
|
||
|
||
document.getElementById('btnAddExpense').addEventListener('click', () => openExpenseModal(null));
|
||
|
||
document.getElementById('expenseForm').addEventListener('submit', async (ev) => {
|
||
ev.preventDefault();
|
||
try {
|
||
const fd = new FormData(ev.target);
|
||
const res = await fetch(API_EXP_SAVE, { method: 'POST', body: fd });
|
||
const json = await res.json();
|
||
if (!json.ok) throw new Error(json.error || 'Save failed');
|
||
|
||
showToast('Gespeichert ✅');
|
||
bootstrap.Modal.getInstance(document.getElementById('expenseModal'))?.hide();
|
||
await refreshAll();
|
||
} catch (e) {
|
||
showToast('Fehler: ' + e.message);
|
||
}
|
||
});
|
||
|
||
document.getElementById('btnDoDelete').addEventListener('click', async () => {
|
||
try {
|
||
const fd = new FormData();
|
||
fd.append('id', deleteId);
|
||
const res = await fetch(API_EXP_DEL, { method: 'POST', body: fd });
|
||
const json = await res.json();
|
||
if (!json.ok) throw new Error(json.error || 'Delete failed');
|
||
|
||
showToast('Gelöscht 🗑️');
|
||
bootstrap.Modal.getInstance(document.getElementById('deleteModal'))?.hide();
|
||
deleteId = null;
|
||
await refreshAll();
|
||
} catch (e) {
|
||
showToast('Fehler: ' + e.message);
|
||
}
|
||
});
|
||
|
||
// Delegated events for table buttons
|
||
document.addEventListener('click', (ev) => {
|
||
const editBtn = ev.target.closest('.btnEditExpense');
|
||
if (editBtn) {
|
||
const row = JSON.parse(decodeURIComponent(editBtn.dataset.row));
|
||
openExpenseModal(row);
|
||
return;
|
||
}
|
||
|
||
const delBtn = ev.target.closest('.btnDeleteExpense');
|
||
if (delBtn) {
|
||
openDeleteModal(delBtn.dataset.id, delBtn.dataset.title);
|
||
return;
|
||
}
|
||
});
|
||
|
||
// Init
|
||
$(function() {
|
||
// Default range: this month
|
||
const [f,t] = thisMonthRange();
|
||
setRange(f,t);
|
||
|
||
dtIncome = $('#tblIncome').DataTable({
|
||
pageLength: 10,
|
||
order: [[0,'desc']],
|
||
columns: [
|
||
{ data: 'date', className: 'mono', render: (d)=>fmtDateDE(d) },
|
||
{ data: 'time', className: 'mono' },
|
||
{ data: 'location' },
|
||
{ data: 'gage', className: 'mono', render: (d)=>eur(d) },
|
||
{ data: 'desc', render: (d)=>(d||'').toString().slice(0,80) },
|
||
{ data: 'id', className: 'mono' },
|
||
],
|
||
columnDefs: [
|
||
{ targets: [1,4,5], visible: window.matchMedia("(max-width: 576px)").matches ? false : true },
|
||
],
|
||
});
|
||
|
||
|
||
dtExpenses = $('#tblExpenses').DataTable({
|
||
pageLength: 10,
|
||
order: [[0,'desc']],
|
||
columns: [
|
||
{ data: 'date', className: 'mono', render: (d)=>fmtDateDE(d) },
|
||
{ data: 'category', className: 'mono' },
|
||
{ data: 'title' },
|
||
{ data: 'amount_eur', className: 'mono', render: (d)=>eur(d) },
|
||
{ data: 'method', className: 'mono' },
|
||
{ data: 'notes', render: (d)=>(d||'').toString().slice(0,80) },
|
||
{ data: null, orderable:false, searchable:false, render:(row)=>expenseActions(row) },
|
||
],
|
||
columnDefs: [
|
||
{ targets: [1,4,5], visible: window.matchMedia("(max-width: 576px)").matches ? false : true },
|
||
],
|
||
});
|
||
|
||
|
||
refreshAll();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|