feat: add Khairat, emergency-contact auto-notify, and 5 lifestyle-companion tabs

Big round covering two different asks: Khairat/emergency infrastructure
(tightly coupled to what's already built) and a Muslim-lifestyle
companion surface (a genuinely different product, added at the user's
explicit request after being offered a smaller scope).

Khairat & emergency contacts:
- nf_khairat_memberships (per-member scheme membership) + nf_emergency_fund
  (per-family shared reserve tracker) — records intent/contacts only,
  never holds or moves real money.
- nf_trusted_contacts gains category (mosque/police/ambulance/hospital/
  khairat/family/other) and email columns.
- New notify-emergency-contacts Edge Function, auto-invoked the moment a
  mutawalli fires a member's death trigger (the one place in this app
  where auto-send-on-trigger is actually correct), alongside — not
  instead of — the existing heir notification. Verified with a live fire
  end-to-end (e2e-emergency-notify.cjs, 5/5).

Lifestyle-companion tabs — all computed/searched live, nothing fabricated:
- Qibla: pure great-circle bearing math to the Kaaba from geolocation,
  no API/key. Verified against Kuala Lumpur (293°, matches expected ~292°).
- Prayer Times: client-side astronomical calculation (single-pass solar
  position, MWL angles), sanity-checked against known KL/London times
  before shipping.
- Locate: mosque/halal/cemetery search via the free, keyless OpenStreetMap
  Overpass API — real community-sourced results only, honest empty state
  when nothing's mapped nearby.
- Quran: Surah list + Arabic/translation via the free alquran.cloud API,
  fetched fresh each time, nothing stored in this app's own database.
- Neighbourhood: a join-by-code community announcement board — a
  genuinely separate multi-tenant concept from the estate-planning family
  structure, scoped to the user account. Found and fixed a real UX gap
  during testing: the create/join form was only reachable with zero
  existing neighbourhoods, with no way to join a second one.

Also found and fixed a real bug: the heir-notify and emergency-notify
status messages shared the same CSS class, breaking any script (including
the pre-existing e2e-per-member.cjs) that targeted '.notify-status'
without further filtering — gave each its own distinguishing class.

Covered by e2e-khairat-lifestyle.cjs (13/13) and e2e-emergency-notify.cjs
(5/5). Full regression: 316/316 across all suites (several transient
flakes under heavy mail-relay load during the sweep, all confirmed clean
on rerun — one led to the real class-collision fix above).
This commit is contained in:
2026-08-14 14:25:26 +08:00
parent 7ce1121b94
commit 2549e9de0c
15 changed files with 1339 additions and 24 deletions
+148
View File
@@ -0,0 +1,148 @@
// Verifies the Khairat/emergency-contacts round and the lifestyle-companion
// tabs (Qibla, Prayer Times, Locate, Quran, Neighbourhood) against the live
// backend. Geolocation-dependent tabs use Playwright's mocked geolocation
// (Kuala Lumpur coordinates) rather than the real device.
const { chromium } = require('playwright');
const { signInFreshFamily } = require('./e2e-auth-helper.cjs');
const BASE = 'https://moslem04.falahos.my/';
const results = [];
const consoleErrors = [];
function record(name, pass, detail = '') { results.push({ name, pass, detail }); console.log(`${pass ? 'PASS' : 'FAIL'} ${name}${detail ? ' — ' + detail : ''}`); }
async function main() {
const browser = await chromium.launch();
const context = await browser.newContext({
viewport: { width: 390, height: 844 },
geolocation: { latitude: 3.1390, longitude: 101.6869 }, // Kuala Lumpur
permissions: ['geolocation']
});
const page = await context.newPage();
page.on('console', m => { if (m.type() === 'error') consoleErrors.push(m.text()); });
page.on('pageerror', e => consoleErrors.push(e.message));
await signInFreshFamily(page, BASE, 'e2e-khairat');
// ── Khairat ──
await page.locator('nav button[aria-label="Khairat"]').click();
await page.waitForTimeout(600);
await page.locator('.field:has-text("Scheme name") input').fill('Kariah Khairat Kematian Masjid Al-Falah');
await page.locator('.field:has-text("Organization") input').fill('Masjid Al-Falah');
await page.locator('button.btn-primary', { hasText: 'Add khairat membership' }).click();
await page.waitForTimeout(1000);
const khairatRowVisible = await page.locator('.khairat-row', { hasText: 'Kariah Khairat Kematian' }).isVisible().catch(() => false);
record('Khairat: membership added and listed', khairatRowVisible);
await page.locator('.fund-card .field:has-text("Target amount") input').fill('5000');
await page.locator('.fund-card .field:has-text("Current balance") input').fill('1250');
await page.waitForTimeout(1000);
const fundProgressVisible = await page.locator('.fund-progress-label', { hasText: '25%' }).isVisible().catch(() => false);
record('Khairat: emergency fund progress bar computes correctly (1250/5000 = 25%)', fundProgressVisible);
// ── Trusted contacts with category + email ──
await page.locator('nav button[aria-label="Assets"]').click();
await page.waitForTimeout(500);
await page.locator('.contacts-section .field:has-text("Name") input').fill('Masjid Al-Falah Office');
await page.locator('.contacts-section .field:has-text("Category") select').selectOption('mosque');
await page.locator('.contacts-section .field:has-text("Email") input').fill('office@example-mosque.test');
await page.locator('.contacts-section button.btn-secondary', { hasText: 'Add trusted contact' }).click();
await page.waitForTimeout(1000);
const contactCategoryVisible = await page.locator('.contact-row', { hasText: 'Masjid Al-Falah Office' }).locator('.contact-category', { hasText: 'mosque' }).isVisible().catch(() => false);
record('Trusted Contacts: category badge shows on the new contact', contactCategoryVisible);
// ── Qibla ──
await page.locator('nav button[aria-label="Qibla"]').click();
await page.waitForTimeout(500);
await page.locator('button.btn-primary', { hasText: 'Find Qibla direction' }).click();
await page.waitForTimeout(2000);
const bearingVisible = await page.locator('.bearing-readout strong').isVisible().catch(() => false);
const bearingText = bearingVisible ? await page.locator('.bearing-readout strong').textContent() : '';
record('Qibla: computes a bearing from Kuala Lumpur (expect ~292° toward Makkah)', bearingVisible && /29[0-5]°/.test(bearingText), bearingText);
const distanceVisible = await page.locator('.distance-note', { hasText: 'km to Makkah' }).isVisible().catch(() => false);
record('Qibla: shows distance to Makkah', distanceVisible);
// ── Prayer Times ──
await page.locator('nav button[aria-label="Prayer Times"]').click();
await page.waitForTimeout(500);
await page.locator('button.btn-primary', { hasText: "Calculate today's prayer times" }).click();
await page.waitForTimeout(2000);
const fajrVisible = await page.locator('.time-row', { hasText: 'Fajr' }).locator('.time-value').isVisible().catch(() => false);
const timesInOrder = await page.locator('.times-list').innerText();
record('Prayer Times: computes all 6 times for Kuala Lumpur', fajrVisible && /Fajr[\s\S]*Sunrise[\s\S]*Dhuhr[\s\S]*Asr[\s\S]*Maghrib[\s\S]*Isha/.test(timesInOrder), timesInOrder.replace(/\n/g, ' '));
// ── Locate (mosque search via live OpenStreetMap Overpass) ──
await page.locator('nav button[aria-label="Locate"]').click();
await page.waitForTimeout(500);
await page.locator('button.btn-primary', { hasText: 'Search nearby' }).click();
await page.waitForTimeout(8000); // live Overpass API call
const locateResultOrEmpty = await page.locator('.results-list, .empty').isVisible().catch(() => false);
record('Locate: mosque search completes (real results or honest empty state)', locateResultOrEmpty);
// ── Quran ──
await page.locator('nav button[aria-label="Quran"]').click();
await page.waitForTimeout(2000);
const surahListVisible = await page.locator('.surah-row', { hasText: 'Al-Faatiha' }).isVisible().catch(() => false);
record('Quran: Surah list loads from the public API (Al-Faatiha present)', surahListVisible);
if (surahListVisible) {
await page.locator('.surah-row', { hasText: 'Al-Faatiha' }).click();
await page.waitForTimeout(2000);
const ayahVisible = await page.locator('.ayah-row').first().isVisible().catch(() => false);
const arabicVisible = await page.locator('.ayah-arabic').first().isVisible().catch(() => false);
record('Quran: opening a Surah loads Arabic text and translation', ayahVisible && arabicVisible);
}
// ── Neighbourhood board ──
// Neighbourhoods are scoped to the user account, not the family — the
// shared e2e owner account may already belong to one from a prior run,
// in which case the create/join form is behind the "add another" toggle.
await page.locator('nav button[aria-label="Neighbourhood"]').click();
await page.waitForTimeout(600);
const addToggleVisible = await page.locator('.add-toggle').isVisible().catch(() => false);
if (addToggleVisible) await page.locator('.add-toggle').click();
await page.waitForTimeout(300);
const nName = `Kariah Test ${Date.now()}`;
await page.locator('.form-card .field:has-text("Name") input').fill(nName);
await page.locator('button.btn-primary', { hasText: 'Create & get a join code' }).click();
await page.waitForTimeout(1000);
const joinCodeVisible = await page.locator('.join-code', { hasText: 'Join code:' }).isVisible().catch(() => false);
record('Neighbourhood: creating one generates a join code', joinCodeVisible);
await page.locator('.form-card .field:has-text("Title") input').fill('Friday khutbah reminder');
await page.locator('button.btn-primary', { hasText: 'Post announcement' }).click();
await page.waitForTimeout(1000);
const postVisible = await page.locator('.post-row', { hasText: 'Friday khutbah reminder' }).isVisible().catch(() => false);
record('Neighbourhood: posting an announcement shows it in the board', postVisible);
// Join-by-code isolation: a second account joining via the real code should see the same post
const joinCodeText = await page.locator('.join-code').textContent();
const code = joinCodeText.replace('Join code:', '').trim();
// signInFreshFamily always signs in as the same fixed e2e owner account
// (just a new family) — since neighbourhoods are user-scoped, this "second
// account" already belongs to the neighbourhood created above, so the
// join form is behind the same toggle as before.
const secondContext = await browser.newContext({ viewport: { width: 390, height: 844 } });
const secondPage = await secondContext.newPage();
await signInFreshFamily(secondPage, BASE, 'e2e-khairat-neighbour2');
await secondPage.locator('nav button[aria-label="Neighbourhood"]').click();
await secondPage.waitForTimeout(600);
const secondAddToggleVisible = await secondPage.locator('.add-toggle').isVisible().catch(() => false);
if (secondAddToggleVisible) await secondPage.locator('.add-toggle').click();
await secondPage.waitForTimeout(300);
await secondPage.locator('.form-card .field:has-text("Join code") input').fill(code);
await secondPage.locator('button.btn-secondary', { hasText: 'Join' }).click();
await secondPage.waitForTimeout(1000);
const secondSeesPost = await secondPage.locator('.post-row', { hasText: 'Friday khutbah reminder' }).isVisible().catch(() => false);
record('Neighbourhood: a second account joining by code sees the same posts', secondSeesPost);
await secondContext.close();
record('No uncaught JS console errors during full session', consoleErrors.length === 0, consoleErrors.slice(0, 5).join(' || '));
await browser.close();
const passCount = results.filter(r => r.pass).length;
const failCount = results.length - passCount;
console.log(`\n${passCount} passed, ${failCount} failed, ${results.length} total`);
if (failCount > 0) results.filter(r => !r.pass).forEach(r => console.log(` - ${r.name}: ${r.detail}`));
process.exit(failCount > 0 ? 1 : 0);
}
main().catch(e => { console.error('SCRIPT ERROR:', e); process.exit(2); });