Filtering and live reports

متوسّط~35 د0/4 خطوات

Derive a report from the ledger

A report should be derived from source data every time—not maintained as a second, conflicting copy. The selected category determines a filtered view; reduce produces the KPIs; sort makes the audit table predictable.

The practice dataset is visibly labeled. Replace it with your own entries after the exercise.

التعليمات

Create getVisibleTransactions using filter and selectedCategory.

تلميح: Keep every item when selectedCategory is all.

Sort visible rows by date without changing the source array.

Create calculateReport(items) with reduce.

Listen for filter changes and render the report again.

الكود الخاص بك

html

9 أسطر

<!DOCTYPE html>
<html lang="he" dir="rtl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Smart Ledger · מודול 7</title><script src="https://cdn.tailwindcss.com"></script></head><body class="min-h-screen bg-stone-100 p-6"><main class="mx-auto max-w-4xl"><p class="text-xs font-bold text-rose-800">נתוני תרגול בלבד</p><div class="mt-2 flex items-center justify-between"><h1 class="text-3xl font-black">דוח תזרים</h1><select id="category-filter" class="rounded-lg border p-2"><option value="all">כל הקטגוריות</option><option value="sales">מכירות</option><option value="office">משרד</option></select></div><div id="kpis" class="mt-6 grid grid-cols-3 gap-3"></div><ul id="report-rows" class="mt-5 space-y-2"></ul></main><script>
  const DEMO_TRANSACTIONS = [
    { id: 1, date: '2026-08-01', description: 'מכירת תרגול', category: 'sales', type: 'income', amountAgorot: 240000 },
    { id: 2, date: '2026-08-02', description: 'ציוד תרגול', category: 'office', type: 'expense', amountAgorot: 45000 }
  ];
  let selectedCategory = 'all';
  // Build getVisibleTransactions(), calculateReport(), and renderReport().
</script></body></html>

Filtering and live reports

Derive a report from the ledger

التعليمات

الكود الخاص بك

معاينة مباشرة