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

Инструкции

Ваш код

Живой просмотр