accounting fixes

public/js/views/accounting-view.js

@@ -84,7 +84,25 @@ function showLoading(slotId, message = 'Loading…') {
             <span>${escapeHtml(message)}</span>
         </div>`;
 }
+function makeCollapsible(headerText, contentId, startCollapsed = false) {
+    return `
+        <div class="flex items-center gap-2 cursor-pointer select-none mb-2" 
+             onclick="window.accountingView.toggleSection('${contentId}', this)">
+            <svg class="w-4 h-4 text-gray-500 transition-transform ${startCollapsed ? '' : 'rotate-90'}" 
+                 fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+            <h3 class="text-base font-semibold text-gray-800">${escapeHtml(headerText)}</h3>
+        </div>`;
+}
 
+export function toggleSection(contentId, headerEl) {
+    const content = document.getElementById(contentId);
+    if (!content) return;
+    const isHidden = content.classList.toggle('hidden');
+    const arrow = headerEl.querySelector('svg');
+    if (arrow) arrow.classList.toggle('rotate-90', !isHidden);
+}
 // ────────────────────────────────────────────────────────────────────
 // Toolbar
 // ────────────────────────────────────────────────────────────────────
@@ -243,6 +261,8 @@ export function injectRegisterControls() {
     if (!registerEndDate)   registerEndDate   = todayISO();
 
     c.innerHTML = `
+        ${makeCollapsible('Register', 'register-section-body')}
+        <div id="register-section-body">
             <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>
@@ -263,7 +283,8 @@ export function injectRegisterControls() {
                     Load Register
                 </button>
             </div>
-        <div id="accounting-register-table"></div>`;
+            <div id="accounting-register-table"></div>
+        </div>`;
 }
 
 export function selectRegisterAccount(accountId) {
@@ -366,7 +387,16 @@ function renderRegisterRow(r) {
 }
 
 function renderSplitCell(r) {
-    if (!r.splits || !r.splits.length) return `<span class="text-gray-500 italic">-Split-</span>`;
+    if (!r.splits || !r.splits.length) {
+        const type = (r.type || '').toLowerCase();
+        if (type.includes('tax payment')) {
+            return `<span class="text-gray-500 italic" title="Sales Tax remittance — see Memo for period">-Split- (Sales Tax)</span>`;
+        }
+        if (type.includes('paycheck') || type.includes('payroll')) {
+            return `<span class="text-gray-500 italic" title="Payroll transaction">-Split- (Payroll)</span>`;
+        }
+        return `<span class="text-gray-500 italic">-Split-</span>`;
+    }
     const lines = r.splits.map(s => `
         <div class="flex justify-between gap-3 text-xs">
             <span class="text-gray-700">${escapeHtml(s.account || '?')}</span>
@@ -387,6 +417,8 @@ export function injectReportsControls() {
     if (!bsAsOfDate)  bsAsOfDate  = todayISO();
 
     c.innerHTML = `
+        ${makeCollapsible('Reports', 'reports-section-body')}
+        <div id="reports-section-body">
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                 <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 &amp; Loss</h3></div>
@@ -422,6 +454,7 @@ export function injectReportsControls() {
                         <div id="bs-result"></div>
                     </div>
                 </div>
+            </div>
         </div>`;
 }
 
@@ -514,6 +547,8 @@ export function injectExpensesSection() {
     if (!expEndDate)   expEndDate   = todayISO();
 
     c.innerHTML = `
+        ${makeCollapsible('Expenses', 'expenses-section-body')}
+        <div id="expenses-section-body">
             <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                 <div class="px-4 py-3 border-b bg-gray-50 flex flex-wrap items-end gap-3">
                     <div>
@@ -541,6 +576,7 @@ export function injectExpensesSection() {
                     </div>
                 </div>
                 <div id="accounting-expenses-table"></div>
+            </div>
         </div>`;
 }