Phase 1: accounting
This commit is contained in:
@@ -24,6 +24,7 @@ import { initInvoiceModal, loadLaborRate } from './modals/invoice-modal.js';
|
||||
import './modals/payment-modal.js';
|
||||
import './modals/email-modal.js';
|
||||
import { setDefaultDate } from './utils/helpers.js';
|
||||
import { renderAccountingView } from './views/accounting-view.js';
|
||||
|
||||
// ============================================================
|
||||
// Tab Management
|
||||
@@ -48,7 +49,9 @@ function showTab(tabName) {
|
||||
renderCustomerView();
|
||||
} else if (tabName === 'settings') {
|
||||
checkCurrentLogo();
|
||||
}
|
||||
} else if (tabName === 'accounting') {
|
||||
renderAccountingView();
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
@@ -73,7 +76,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Hash-based navigation (e.g. after OAuth redirect /#settings)
|
||||
if (window.location.hash) {
|
||||
const hashTab = window.location.hash.replace('#', '');
|
||||
if (['quotes', 'invoices', 'customers', 'settings'].includes(hashTab)) {
|
||||
if (['quotes', 'invoices', 'customers', 'accounting', 'settings'].includes(hashTab)) {
|
||||
showTab(hashTab);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -115,6 +115,32 @@ const API = {
|
||||
syncPayments: () => fetch('/api/qbo/sync-payments', { method: 'POST' }).then(r => r.json()),
|
||||
auth: () => window.location.href = '/auth/qbo'
|
||||
},
|
||||
|
||||
// Accounting API (Phase 1 — read-only)
|
||||
accounting: {
|
||||
getAccounts: (type = null, activeOnly = true) => {
|
||||
const params = new URLSearchParams();
|
||||
if (type) params.set('type', type);
|
||||
if (!activeOnly) params.set('activeOnly', 'false');
|
||||
const qs = params.toString();
|
||||
return fetch('/api/accounting/accounts' + (qs ? '?' + qs : '')).then(r => r.json());
|
||||
},
|
||||
syncAccounts: () => fetch('/api/accounting/sync-accounts', { method: 'POST' }).then(r => r.json()),
|
||||
getRegister: (accountId, startDate, endDate) => {
|
||||
const params = new URLSearchParams({ accountId });
|
||||
if (startDate) params.set('startDate', startDate);
|
||||
if (endDate) params.set('endDate', endDate);
|
||||
return fetch('/api/accounting/register?' + params.toString()).then(r => r.json());
|
||||
},
|
||||
getProfitAndLoss: (startDate, endDate, accountingMethod = 'Accrual') => {
|
||||
const params = new URLSearchParams({ startDate, endDate, accountingMethod });
|
||||
return fetch('/api/accounting/reports/profit-loss?' + params.toString()).then(r => r.json());
|
||||
},
|
||||
getBalanceSheet: (asOfDate, accountingMethod = 'Accrual') => {
|
||||
const params = new URLSearchParams({ asOfDate, accountingMethod });
|
||||
return fetch('/api/accounting/reports/balance-sheet?' + params.toString()).then(r => r.json());
|
||||
}
|
||||
},
|
||||
|
||||
// Settings API
|
||||
settings: {
|
||||
|
||||
551
public/js/views/accounting-view.js
Normal file
551
public/js/views/accounting-view.js
Normal file
@@ -0,0 +1,551 @@
|
||||
/**
|
||||
* accounting-view.js — Phase 1, read-only
|
||||
*
|
||||
* Drei Bereiche:
|
||||
* 1) Accounts Overview — Cards mit Bank- und Credit-Card-Balances
|
||||
* 2) Register — read-only Liste der Transaktionen für ein Konto
|
||||
* 3) Reports — Profit & Loss + Balance Sheet
|
||||
*/
|
||||
|
||||
import { formatDate } from '../utils/helpers.js';
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// State (modul-lokal)
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
|
||||
let allAccounts = []; // alle aktiven Accounts (gesamt, für Dropdown)
|
||||
let registerAccountId = null; // aktuell ausgewählter Account fürs Register
|
||||
let registerStartDate = null;
|
||||
let registerEndDate = null;
|
||||
|
||||
// Reports
|
||||
let plStartDate = null;
|
||||
let plEndDate = null;
|
||||
let plAccountingMethod = 'Accrual';
|
||||
|
||||
let bsAsOfDate = null;
|
||||
let bsAccountingMethod = 'Accrual';
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// Helpers
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function fmtMoney(n) {
|
||||
if (n == null || isNaN(n)) return '';
|
||||
return n.toLocaleString('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
}
|
||||
|
||||
function todayISO() {
|
||||
return new Date().toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
function firstOfMonthISO() {
|
||||
const d = new Date();
|
||||
return new Date(d.getFullYear(), d.getMonth(), 1).toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
function firstOfYearISO() {
|
||||
const d = new Date();
|
||||
return new Date(d.getFullYear(), 0, 1).toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
if (s == null) return '';
|
||||
return String(s)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function showError(slotId, message) {
|
||||
const el = document.getElementById(slotId);
|
||||
if (!el) return;
|
||||
el.innerHTML = `
|
||||
<div class="p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
<p class="font-semibold text-red-800">QBO Error</p>
|
||||
<p class="text-sm text-red-600 mt-1">${escapeHtml(message)}</p>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function showLoading(slotId, message = 'Loading…') {
|
||||
const el = document.getElementById(slotId);
|
||||
if (!el) return;
|
||||
el.innerHTML = `
|
||||
<div class="flex items-center gap-3 p-4 text-gray-500">
|
||||
<svg class="animate-spin h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
||||
</svg>
|
||||
<span>${escapeHtml(message)}</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// Toolbar (top-of-tab heading + sync button)
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function injectToolbar() {
|
||||
const c = document.getElementById('accounting-toolbar');
|
||||
if (!c) return;
|
||||
c.innerHTML = `
|
||||
<div class="flex items-center gap-3 mb-4 p-4 bg-white rounded-lg shadow-sm border border-gray-200">
|
||||
<h2 class="text-lg font-semibold text-gray-800">Accounting</h2>
|
||||
<span class="text-sm text-gray-400">read-only</span>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<button onclick="window.accountingView.refreshAll()"
|
||||
class="px-3 py-1.5 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700">
|
||||
↻ Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// Accounts Overview
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export async function loadAccountsOverview() {
|
||||
const slot = 'accounting-accounts';
|
||||
showLoading(slot, 'Loading accounts from QBO…');
|
||||
|
||||
try {
|
||||
// Wir laden alle aktiven Accounts in einem Rutsch und filtern client-seitig.
|
||||
const accounts = await window.API.accounting.getAccounts(null, true);
|
||||
|
||||
if (accounts.error) {
|
||||
showError(slot, accounts.error);
|
||||
return;
|
||||
}
|
||||
|
||||
allAccounts = accounts;
|
||||
|
||||
// Bank/Credit Card Cards rendern
|
||||
const cards = accounts.filter(a =>
|
||||
a.accountType === 'Bank' || a.accountType === 'Credit Card'
|
||||
);
|
||||
|
||||
const el = document.getElementById(slot);
|
||||
if (!cards.length) {
|
||||
el.innerHTML = `
|
||||
<div class="p-4 bg-gray-50 border border-gray-200 rounded-lg text-gray-600">
|
||||
No bank or credit card accounts found in QBO.
|
||||
</div>`;
|
||||
} else {
|
||||
el.innerHTML = `
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
${cards.map(a => renderAccountCard(a)).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Register-Dropdown füttern (nur Bank + Credit Card)
|
||||
populateRegisterAccountDropdown(cards);
|
||||
|
||||
} catch (err) {
|
||||
console.error('Accounts load failed:', err);
|
||||
showError(slot, err.message || 'Failed to load accounts');
|
||||
}
|
||||
}
|
||||
|
||||
function renderAccountCard(a) {
|
||||
const isBank = a.accountType === 'Bank';
|
||||
const accent = isBank ? 'border-blue-200 bg-blue-50' : 'border-purple-200 bg-purple-50';
|
||||
const label = isBank ? 'Bank' : 'Credit Card';
|
||||
const labelColor = isBank ? 'text-blue-700' : 'text-purple-700';
|
||||
const bal = a.currentBalance;
|
||||
const balText = bal != null ? fmtMoney(bal) : '—';
|
||||
// Bei Credit Cards ist ein positiver CurrentBalance i.d.R. eine Schuld; nur Hinweis, keine Vorzeichenakrobatik.
|
||||
return `
|
||||
<div class="rounded-lg border ${accent} p-4 cursor-pointer hover:shadow-md transition"
|
||||
onclick="window.accountingView.selectRegisterAccount('${a.id}')">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide ${labelColor}">${label}</span>
|
||||
<span class="text-xs text-gray-400">#${a.id}</span>
|
||||
</div>
|
||||
<div class="text-base font-semibold text-gray-900 mb-2">${escapeHtml(a.name)}</div>
|
||||
<div class="text-2xl font-bold text-gray-900">${balText}</div>
|
||||
${a.accountSubType ? `<div class="text-xs text-gray-500 mt-1">${escapeHtml(a.accountSubType)}</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// Register
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function populateRegisterAccountDropdown(bankCardAccounts) {
|
||||
const sel = document.getElementById('reg-account');
|
||||
if (!sel) return;
|
||||
|
||||
const current = registerAccountId || sel.value;
|
||||
sel.innerHTML = `<option value="">— Select account —</option>` +
|
||||
bankCardAccounts.map(a =>
|
||||
`<option value="${a.id}">${escapeHtml(a.name)} (${a.accountType})</option>`
|
||||
).join('');
|
||||
|
||||
if (current && bankCardAccounts.find(a => a.id === current)) {
|
||||
sel.value = current;
|
||||
}
|
||||
}
|
||||
|
||||
export function injectRegisterControls() {
|
||||
const c = document.getElementById('accounting-register-controls');
|
||||
if (!c) return;
|
||||
|
||||
if (!registerStartDate) registerStartDate = firstOfMonthISO();
|
||||
if (!registerEndDate) registerEndDate = todayISO();
|
||||
|
||||
c.innerHTML = `
|
||||
<div class="flex flex-wrap items-end gap-3 mb-3 p-4 bg-white rounded-lg shadow-sm border border-gray-200">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">Account</label>
|
||||
<select id="reg-account" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm w-72">
|
||||
<option value="">— Loading accounts —</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">Start Date</label>
|
||||
<input type="date" id="reg-start" value="${registerStartDate}"
|
||||
class="px-3 py-1.5 border border-gray-300 rounded-md text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">End Date</label>
|
||||
<input type="date" id="reg-end" value="${registerEndDate}"
|
||||
class="px-3 py-1.5 border border-gray-300 rounded-md text-sm">
|
||||
</div>
|
||||
<button onclick="window.accountingView.loadRegister()"
|
||||
class="px-4 py-1.5 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700">
|
||||
Load Register
|
||||
</button>
|
||||
</div>
|
||||
<div id="accounting-register-table"></div>`;
|
||||
}
|
||||
|
||||
export function selectRegisterAccount(accountId) {
|
||||
registerAccountId = accountId;
|
||||
const sel = document.getElementById('reg-account');
|
||||
if (sel) sel.value = accountId;
|
||||
loadRegister();
|
||||
}
|
||||
|
||||
export async function loadRegister() {
|
||||
const sel = document.getElementById('reg-account');
|
||||
const start = document.getElementById('reg-start');
|
||||
const end = document.getElementById('reg-end');
|
||||
|
||||
if (!sel || !sel.value) {
|
||||
const slot = document.getElementById('accounting-register-table');
|
||||
if (slot) slot.innerHTML = `<p class="text-sm text-gray-500 px-4 py-3">Select an account to view the register.</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
registerAccountId = sel.value;
|
||||
registerStartDate = start.value;
|
||||
registerEndDate = end.value;
|
||||
|
||||
const slot = 'accounting-register-table';
|
||||
showLoading(slot, 'Loading register from QBO…');
|
||||
|
||||
try {
|
||||
const result = await window.API.accounting.getRegister(
|
||||
registerAccountId, registerStartDate, registerEndDate
|
||||
);
|
||||
|
||||
if (result.error) {
|
||||
showError(slot, result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
renderRegisterTable(result);
|
||||
} catch (err) {
|
||||
console.error('Register load failed:', err);
|
||||
showError(slot, err.message || 'Failed to load register');
|
||||
}
|
||||
}
|
||||
|
||||
function renderRegisterTable(result) {
|
||||
const el = document.getElementById('accounting-register-table');
|
||||
if (!el) return;
|
||||
|
||||
const rows = result.rows || [];
|
||||
const meta = result.meta || {};
|
||||
|
||||
if (!rows.length) {
|
||||
el.innerHTML = `
|
||||
<div class="p-4 bg-gray-50 border border-gray-200 rounded-lg text-gray-600">
|
||||
No transactions in selected range.
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const tbody = rows.map(r => `
|
||||
<tr class="border-t hover:bg-gray-50">
|
||||
<td class="px-3 py-2 text-sm whitespace-nowrap">${escapeHtml(r.date || '')}</td>
|
||||
<td class="px-3 py-2 text-sm">${escapeHtml(r.type || '')}</td>
|
||||
<td class="px-3 py-2 text-sm">${escapeHtml(r.docNum || '')}</td>
|
||||
<td class="px-3 py-2 text-sm">${escapeHtml(r.payee || '')}</td>
|
||||
<td class="px-3 py-2 text-sm text-gray-600">${escapeHtml(r.splitAccount || '')}</td>
|
||||
<td class="px-3 py-2 text-sm text-gray-500" title="${escapeHtml(r.memo || '')}">${escapeHtml((r.memo || '').slice(0, 60))}</td>
|
||||
<td class="px-3 py-2 text-sm text-right whitespace-nowrap ${r.amount < 0 ? 'text-red-600' : 'text-gray-900'}">
|
||||
${r.amount != null ? fmtMoney(r.amount) : ''}
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="px-4 py-2 border-b bg-gray-50 text-xs text-gray-500">
|
||||
${escapeHtml(meta.reportName || 'Transaction List')}
|
||||
${meta.startPeriod ? '— ' + escapeHtml(meta.startPeriod) : ''}
|
||||
${meta.endPeriod ? ' to ' + escapeHtml(meta.endPeriod) : ''}
|
||||
· ${rows.length} rows
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left font-medium text-gray-700">Date</th>
|
||||
<th class="px-3 py-2 text-left font-medium text-gray-700">Type</th>
|
||||
<th class="px-3 py-2 text-left font-medium text-gray-700">No.</th>
|
||||
<th class="px-3 py-2 text-left font-medium text-gray-700">Payee</th>
|
||||
<th class="px-3 py-2 text-left font-medium text-gray-700">Split / Category</th>
|
||||
<th class="px-3 py-2 text-left font-medium text-gray-700">Memo</th>
|
||||
<th class="px-3 py-2 text-right font-medium text-gray-700">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${tbody}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// Reports — P&L + Balance Sheet
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function injectReportsControls() {
|
||||
const c = document.getElementById('accounting-reports');
|
||||
if (!c) return;
|
||||
|
||||
if (!plStartDate) plStartDate = firstOfYearISO();
|
||||
if (!plEndDate) plEndDate = todayISO();
|
||||
if (!bsAsOfDate) bsAsOfDate = todayISO();
|
||||
|
||||
c.innerHTML = `
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<!-- P&L -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
|
||||
<div class="px-4 py-3 border-b bg-gray-50">
|
||||
<h3 class="font-semibold text-gray-800">Profit & Loss</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-wrap items-end gap-3 mb-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">Start</label>
|
||||
<input type="date" id="pl-start" value="${plStartDate}"
|
||||
class="px-3 py-1.5 border border-gray-300 rounded-md text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">End</label>
|
||||
<input type="date" id="pl-end" value="${plEndDate}"
|
||||
class="px-3 py-1.5 border border-gray-300 rounded-md text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">Method</label>
|
||||
<select id="pl-method" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm">
|
||||
<option value="Accrual" ${plAccountingMethod === 'Accrual' ? 'selected' : ''}>Accrual</option>
|
||||
<option value="Cash" ${plAccountingMethod === 'Cash' ? 'selected' : ''}>Cash</option>
|
||||
</select>
|
||||
</div>
|
||||
<button onclick="window.accountingView.loadProfitLoss()"
|
||||
class="px-3 py-1.5 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700">
|
||||
Run
|
||||
</button>
|
||||
</div>
|
||||
<div id="pl-result"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Balance Sheet -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
|
||||
<div class="px-4 py-3 border-b bg-gray-50">
|
||||
<h3 class="font-semibold text-gray-800">Balance Sheet</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-wrap items-end gap-3 mb-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">As of</label>
|
||||
<input type="date" id="bs-asof" value="${bsAsOfDate}"
|
||||
class="px-3 py-1.5 border border-gray-300 rounded-md text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">Method</label>
|
||||
<select id="bs-method" class="px-3 py-1.5 border border-gray-300 rounded-md text-sm">
|
||||
<option value="Accrual" ${bsAccountingMethod === 'Accrual' ? 'selected' : ''}>Accrual</option>
|
||||
<option value="Cash" ${bsAccountingMethod === 'Cash' ? 'selected' : ''}>Cash</option>
|
||||
</select>
|
||||
</div>
|
||||
<button onclick="window.accountingView.loadBalanceSheet()"
|
||||
class="px-3 py-1.5 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700">
|
||||
Run
|
||||
</button>
|
||||
</div>
|
||||
<div id="bs-result"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
export async function loadProfitLoss() {
|
||||
plStartDate = document.getElementById('pl-start').value;
|
||||
plEndDate = document.getElementById('pl-end').value;
|
||||
plAccountingMethod = document.getElementById('pl-method').value;
|
||||
|
||||
showLoading('pl-result', 'Loading P&L from QBO…');
|
||||
try {
|
||||
const data = await window.API.accounting.getProfitAndLoss(
|
||||
plStartDate, plEndDate, plAccountingMethod
|
||||
);
|
||||
if (data.error) return showError('pl-result', data.error);
|
||||
document.getElementById('pl-result').innerHTML = renderQboReport(data);
|
||||
} catch (err) {
|
||||
showError('pl-result', err.message || 'Failed to load P&L');
|
||||
}
|
||||
}
|
||||
|
||||
export async function loadBalanceSheet() {
|
||||
bsAsOfDate = document.getElementById('bs-asof').value;
|
||||
bsAccountingMethod = document.getElementById('bs-method').value;
|
||||
|
||||
showLoading('bs-result', 'Loading Balance Sheet from QBO…');
|
||||
try {
|
||||
const data = await window.API.accounting.getBalanceSheet(
|
||||
bsAsOfDate, bsAccountingMethod
|
||||
);
|
||||
if (data.error) return showError('bs-result', data.error);
|
||||
document.getElementById('bs-result').innerHTML = renderQboReport(data);
|
||||
} catch (err) {
|
||||
showError('bs-result', err.message || 'Failed to load Balance Sheet');
|
||||
}
|
||||
}
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// Generic QBO Report Renderer (P&L + Balance Sheet)
|
||||
// QBO Reports haben rekursive Section/Row-Bäume mit Summary-Zeilen.
|
||||
// Wir rendern sie als verschachtelte HTML-Tabelle.
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function renderQboReport(report) {
|
||||
if (!report || !report.Header) {
|
||||
return `<p class="text-sm text-gray-500">No report data.</p>`;
|
||||
}
|
||||
|
||||
const cols = (report.Columns && report.Columns.Column) || [];
|
||||
const colCount = cols.length;
|
||||
|
||||
let body = '';
|
||||
if (report.Rows && report.Rows.Row) {
|
||||
body = renderReportRows(report.Rows.Row, 0, colCount);
|
||||
}
|
||||
|
||||
const headerRow = cols.map(c =>
|
||||
`<th class="px-3 py-2 text-right font-medium text-gray-700 first:text-left">${escapeHtml(c.ColTitle || '')}</th>`
|
||||
).join('');
|
||||
|
||||
return `
|
||||
<div class="text-xs text-gray-500 mb-2">
|
||||
${escapeHtml(report.Header.ReportName || '')}
|
||||
${report.Header.StartPeriod ? '· ' + escapeHtml(report.Header.StartPeriod) + ' – ' + escapeHtml(report.Header.EndPeriod) : ''}
|
||||
${report.Header.ReportBasis ? '· ' + escapeHtml(report.Header.ReportBasis) : ''}
|
||||
</div>
|
||||
<div class="overflow-x-auto border border-gray-200 rounded">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-gray-50 border-b">
|
||||
<tr>${headerRow}</tr>
|
||||
</thead>
|
||||
<tbody>${body}</tbody>
|
||||
</table>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderReportRows(rows, depth, colCount) {
|
||||
if (!rows) return '';
|
||||
const arr = Array.isArray(rows) ? rows : [rows];
|
||||
let html = '';
|
||||
|
||||
for (const row of arr) {
|
||||
const isSection = row.type === 'Section' || row.Rows || row.Summary;
|
||||
const indentPx = depth * 16;
|
||||
|
||||
if (row.Header && row.Header.ColData) {
|
||||
// Section header row
|
||||
const headerCells = row.Header.ColData.map((c, i) => {
|
||||
if (i === 0) {
|
||||
return `<td class="px-3 py-1.5 font-semibold text-gray-800" style="padding-left:${12 + indentPx}px">${escapeHtml(c.value || '')}</td>`;
|
||||
}
|
||||
return `<td class="px-3 py-1.5 text-right text-gray-500"></td>`;
|
||||
}).join('');
|
||||
html += `<tr class="bg-gray-50">${headerCells}</tr>`;
|
||||
}
|
||||
|
||||
if (isSection && row.Rows && row.Rows.Row) {
|
||||
html += renderReportRows(row.Rows.Row, depth + 1, colCount);
|
||||
}
|
||||
|
||||
if (row.Summary && row.Summary.ColData) {
|
||||
const sumCells = row.Summary.ColData.map((c, i) => {
|
||||
if (i === 0) {
|
||||
return `<td class="px-3 py-1.5 font-semibold text-gray-700 border-t" style="padding-left:${12 + indentPx}px">${escapeHtml(c.value || '')}</td>`;
|
||||
}
|
||||
return `<td class="px-3 py-1.5 text-right font-semibold text-gray-900 border-t">${escapeHtml(c.value || '')}</td>`;
|
||||
}).join('');
|
||||
html += `<tr>${sumCells}</tr>`;
|
||||
}
|
||||
|
||||
if (!isSection && row.ColData) {
|
||||
// Plain data row
|
||||
const cells = row.ColData.map((c, i) => {
|
||||
if (i === 0) {
|
||||
return `<td class="px-3 py-1.5" style="padding-left:${12 + indentPx}px">${escapeHtml(c.value || '')}</td>`;
|
||||
}
|
||||
return `<td class="px-3 py-1.5 text-right">${escapeHtml(c.value || '')}</td>`;
|
||||
}).join('');
|
||||
html += `<tr>${cells}</tr>`;
|
||||
}
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
// Init / Public Entry Points
|
||||
// ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function renderAccountingView() {
|
||||
injectToolbar();
|
||||
injectRegisterControls();
|
||||
injectReportsControls();
|
||||
loadAccountsOverview();
|
||||
}
|
||||
|
||||
export function refreshAll() {
|
||||
loadAccountsOverview();
|
||||
if (registerAccountId) loadRegister();
|
||||
}
|
||||
|
||||
// Expose for onclick handlers
|
||||
window.accountingView = {
|
||||
renderAccountingView,
|
||||
refreshAll,
|
||||
loadAccountsOverview,
|
||||
loadRegister,
|
||||
selectRegisterAccount,
|
||||
loadProfitLoss,
|
||||
loadBalanceSheet
|
||||
};
|
||||
Reference in New Issue
Block a user