feat: add Zakat calculator (per-member, Nisab + 2.5% rate)
Closes the Zakat gap identified in the competitive benchmark against Rafiq. Per-member module (nf_zakat_records, same author-owns/family-reads RLS pattern as Insurance/Wassiyah/Waqf) computing 2.5% due on zakatable wealth (cash, gold, silver, business assets, investments) once above a user-entered Nisab threshold, minus deductible short-term liabilities. Manual entry only, matching the app's existing philosophy — no live gold price feed. Covered by e2e-zakat.cjs (7/7).
This commit is contained in:
@@ -0,0 +1,105 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { activeFamilyId } from './family.js';
|
||||
import { session } from './auth.js';
|
||||
import { getZakatRecord, upsertZakatRecord } from './db.js';
|
||||
import { zakatableWealth, zakatDue, meetsNisab } from './calc/zakat.js';
|
||||
import Disclaimer from './Disclaimer.svelte';
|
||||
import InfoPanel from './InfoPanel.svelte';
|
||||
|
||||
let familyId = $state(null);
|
||||
activeFamilyId.subscribe(v => familyId = v);
|
||||
// Live off the session store, not a one-time snapshot — same fix as every
|
||||
// other per-member module (Wassiyah, Waqf, Insurance): this component
|
||||
// remounts on tab switch, and a stale null captured once at mount would
|
||||
// silently break every write until the next remount.
|
||||
let memberId = $state(null);
|
||||
session.subscribe(v => memberId = v?.user?.id ?? null);
|
||||
|
||||
const DEFAULT_NISAB = 24000; // rough 85g-gold-equivalent placeholder in RM; user should override with today's value
|
||||
|
||||
let fields = $state(emptyFields());
|
||||
let loaded = $state(false);
|
||||
|
||||
function emptyFields() {
|
||||
return { cash: '', gold: '', silver: '', businessAssets: '', investments: '', otherZakatable: '', deductibleLiabilities: '', nisabThreshold: String(DEFAULT_NISAB) };
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
if (!familyId || !memberId) return;
|
||||
const record = await getZakatRecord(familyId, memberId);
|
||||
fields = record
|
||||
? { cash: String(record.cash), gold: String(record.gold), silver: String(record.silver), businessAssets: String(record.businessAssets), investments: String(record.investments), otherZakatable: String(record.otherZakatable), deductibleLiabilities: String(record.deductibleLiabilities), nisabThreshold: String(record.nisabThreshold) }
|
||||
: emptyFields();
|
||||
loaded = true;
|
||||
}
|
||||
|
||||
onMount(refresh);
|
||||
$effect(() => { familyId; memberId; refresh(); });
|
||||
|
||||
let saveTimer;
|
||||
function scheduleSave() {
|
||||
clearTimeout(saveTimer);
|
||||
saveTimer = setTimeout(() => { upsertZakatRecord(familyId, memberId, fields); }, 500);
|
||||
}
|
||||
|
||||
const wealth = $derived(zakatableWealth(fields));
|
||||
const due = $derived(zakatDue(fields));
|
||||
const meets = $derived(meetsNisab(fields));
|
||||
</script>
|
||||
|
||||
<div class="module">
|
||||
<div class="module-header">
|
||||
<h2>Zakat</h2>
|
||||
<InfoPanel
|
||||
title="Zakat"
|
||||
what="Your annual Zakat obligation — 2.5% of qualifying wealth (cash, gold, silver, business assets, investments) held for a full lunar year (haul), once it's above the Nisab threshold. This is a personal obligation, separate from Faraid and Wassiyah, which only apply after death."
|
||||
how="Enter your zakatable wealth by category, subtract any short-term deductible liabilities, and set today's Nisab value (85g gold or 595g silver equivalent — check a current gold price, this app doesn't fetch it live). Figures autosave as you type."
|
||||
fields={[
|
||||
{ label: 'Zakatable wealth', hint: 'Cash, gold, silver, business inventory, investments — anything held for a full lunar year.' },
|
||||
{ label: 'Deductible liabilities', hint: 'Short-term debts due, subtracted before checking against Nisab.' },
|
||||
{ label: 'Nisab threshold', hint: 'The minimum wealth level before Zakat is due — varies with the current gold/silver price.' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<p class="sub">Your own Zakat calculation — a personal, ongoing obligation, not tied to death or inheritance.</p>
|
||||
|
||||
{#if loaded}
|
||||
<div class="form-card">
|
||||
<label class="field"><span>Cash & bank balances</span><input type="number" min="0" bind:value={fields.cash} oninput={scheduleSave} /></label>
|
||||
<label class="field"><span>Gold (current market value)</span><input type="number" min="0" bind:value={fields.gold} oninput={scheduleSave} /></label>
|
||||
<label class="field"><span>Silver (current market value)</span><input type="number" min="0" bind:value={fields.silver} oninput={scheduleSave} /></label>
|
||||
<label class="field"><span>Business assets / inventory</span><input type="number" min="0" bind:value={fields.businessAssets} oninput={scheduleSave} /></label>
|
||||
<label class="field"><span>Investments / shares / digital assets</span><input type="number" min="0" bind:value={fields.investments} oninput={scheduleSave} /></label>
|
||||
<label class="field"><span>Other zakatable wealth</span><input type="number" min="0" bind:value={fields.otherZakatable} oninput={scheduleSave} /></label>
|
||||
<label class="field"><span>Deductible liabilities (due within the year)</span><input type="number" min="0" bind:value={fields.deductibleLiabilities} oninput={scheduleSave} /></label>
|
||||
<label class="field"><span>Nisab threshold (today's value)</span><input type="number" min="0" bind:value={fields.nisabThreshold} oninput={scheduleSave} /></label>
|
||||
</div>
|
||||
|
||||
<div class="result-card" class:due={meets}>
|
||||
<div class="result-row"><span>Zakatable wealth</span><strong>{wealth.toLocaleString()}</strong></div>
|
||||
<div class="result-row"><span>Nisab threshold</span><strong>{(Number(fields.nisabThreshold) || 0).toLocaleString()}</strong></div>
|
||||
<div class="result-row main"><span>{meets ? 'Zakat due (2.5%)' : 'Below Nisab — no Zakat due'}</span><strong>{due.toLocaleString()}</strong></div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Disclaimer text="Manual entry only — Nisab is not fetched from a live gold/silver price feed. Confirm today's threshold and consult a scholar for madhab-specific rulings (this uses a single standard 2.5%/85g-gold ruleset)." />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.module { padding: 4px 0 40px; }
|
||||
.module-header { display: flex; align-items: center; margin-bottom: 4px; }
|
||||
h2 { font-family: 'DM Serif Display', serif; font-size: 24px; color: #E8E4DC; margin-bottom: 0; }
|
||||
.sub { font-size: 13px; color: #8A8478; margin-bottom: 16px; }
|
||||
.form-card { background: rgba(255,255,255,0.03); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
|
||||
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
|
||||
.field span { font-size: 12px; color: #B8B2A6; }
|
||||
.field input { background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.2); border-radius: 8px; padding: 10px 12px; color: #E8E4DC; font-size: 14px; width: 100%; }
|
||||
.result-card { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.25); border-radius: 12px; padding: 16px; margin-bottom: 18px; }
|
||||
.result-card.due { background: rgba(46,204,113,0.08); border-color: rgba(46,204,113,0.3); }
|
||||
.result-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 13px; color: #B8B2A6; }
|
||||
.result-row strong { color: #E8E4DC; font-size: 14px; }
|
||||
.result-row.main { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 6px; padding-top: 12px; }
|
||||
.result-row.main span { color: #C9A84C; font-weight: 600; }
|
||||
.result-row.main strong { color: #2ECC71; font-size: 20px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user