diff --git a/e2e-family-tree.cjs b/e2e-family-tree.cjs
new file mode 100644
index 0000000..4340e9f
--- /dev/null
+++ b/e2e-family-tree.cjs
@@ -0,0 +1,127 @@
+// Verifies the mini family genealogy map end-to-end against the live backend:
+// add people (with photo upload to Supabase Storage), link parent/child and
+// spouse relationships, confirm the generational tree renders correctly, and
+// that a second family's tree is fully isolated (no data bleed across
+// families sharing the same account, matching the isolation pattern already
+// proven for Wassiyah/Waqf).
+const { chromium } = require('playwright');
+const path = require('path');
+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 page = await browser.newPage({ viewport: { width: 390, height: 844 } });
+ page.on('console', m => { if (m.type() === 'error') consoleErrors.push(m.text()); });
+ page.on('pageerror', e => consoleErrors.push(e.message));
+
+ const familyName = await signInFreshFamily(page, BASE, 'e2e-family-tree');
+ await page.locator('nav button[aria-label="Tree"]').click();
+ await page.waitForTimeout(600);
+
+ // Add three people: grandfather, father, son
+ async function addPerson(name, extra = {}) {
+ await page.locator('.form-card .field:has-text("Full name") input').fill(name);
+ if (extra.gender) await page.locator('.form-card .field:has-text("Gender") select').selectOption(extra.gender);
+ if (extra.birthDate) await page.locator('.form-card .field:has-text("Birth date") input').fill(extra.birthDate);
+ await page.locator('.form-card button.btn-primary', { hasText: 'Add person' }).click();
+ await page.locator('.person-card', { hasText: name }).waitFor({ state: 'visible', timeout: 10000 });
+ }
+
+ await addPerson('Grandfather Ahmad', { gender: 'male', birthDate: '1940-01-01' });
+ await addPerson('Father Ismail', { gender: 'male', birthDate: '1965-05-15' });
+ await addPerson('Grandmother Fatimah', { gender: 'female', birthDate: '1945-03-10' });
+ await addPerson('Son Yusuf', { gender: 'male', birthDate: '1995-08-20' });
+
+ const allAdded = await page.locator('.person-card').count();
+ record('Family Tree: 4 people added successfully', allAdded === 4, `${allAdded} cards`);
+
+ // Link relationships: Grandfather is parent of Father; Grandfather spouse_of Grandmother; Father parent of Son
+ async function addRelationship(personALabel, type, personBLabel) {
+ // The relationship form-card has exactly 3 selects in DOM order: person A,
+ // type, person B. Selecting by position avoids :has-text substring
+ // ambiguity (the type select's own option "is spouse of" contains
+ // "spouse", so a text-based locator for the third field also matches it).
+ const relCard = page.locator('.form-card', { has: page.locator('button.btn-primary', { hasText: 'Add relationship' }) });
+ const selects = relCard.locator('select');
+ await selects.nth(0).selectOption({ label: personALabel });
+ await selects.nth(1).selectOption(type);
+ await page.waitForTimeout(200);
+ await selects.nth(2).selectOption({ label: personBLabel });
+ await page.locator('button.btn-primary', { hasText: 'Add relationship' }).click();
+ await page.waitForTimeout(600);
+ }
+
+ await addRelationship('Grandfather Ahmad', 'parent_of', 'Father Ismail');
+ await addRelationship('Grandfather Ahmad', 'spouse_of', 'Grandmother Fatimah');
+ await addRelationship('Father Ismail', 'parent_of', 'Son Yusuf');
+
+ const relCount = await page.locator('.rel-row').count();
+ record('Family Tree: 3 relationships recorded', relCount === 3, `${relCount} rows`);
+
+ // Verify tree structure: Grandfather is a root, Father nested under him, Son nested under Father
+ const treeText = await page.locator('.tree-section').innerText();
+ const rootShown = treeText.includes('Grandfather Ahmad');
+ const spouseShown = treeText.includes('Grandmother Fatimah');
+ const fatherNested = treeText.includes('Father Ismail');
+ const sonNested = treeText.includes('Son Yusuf');
+ record('Family Tree: generational tree renders all 4 people correctly nested', rootShown && spouseShown && fatherNested && sonNested, treeText.replace(/\s+/g, ' ').slice(0, 300));
+
+ // Photo upload — real file, real Supabase Storage
+ await page.locator('.person-summary', { hasText: 'Father Ismail' }).click();
+ await page.waitForTimeout(400);
+ const fileInput = page.locator('.person-card', { hasText: 'Father Ismail' }).locator('input[type=file]');
+ await fileInput.setInputFiles(path.join(__dirname, 'test-photo.png'));
+ await page.waitForTimeout(2500);
+ const avatarImgVisible = await page.locator('.person-card', { hasText: 'Father Ismail' }).locator('img.avatar').isVisible().catch(() => false);
+ record('Family Tree: photo uploads and renders as the person\'s avatar', avatarImgVisible);
+
+ // Photo removal
+ if (avatarImgVisible) {
+ await page.locator('.person-card', { hasText: 'Father Ismail' }).locator('button', { hasText: 'Remove photo' }).click();
+ await page.waitForTimeout(1000);
+ const avatarGoneBack = await page.locator('.person-card', { hasText: 'Father Ismail' }).locator('.avatar-placeholder').isVisible().catch(() => false);
+ record('Family Tree: removing photo reverts to initial-letter placeholder', avatarGoneBack);
+ }
+
+ // Edit a person (expand the card first — Edit is only visible when expanded)
+ await page.locator('.person-summary', { hasText: 'Son Yusuf' }).click();
+ await page.waitForTimeout(300);
+ await page.locator('.person-card', { hasText: 'Son Yusuf' }).locator('button', { hasText: 'Edit' }).click();
+ await page.waitForTimeout(300);
+ await page.locator('.form-card .field:has-text("Notes") input').fill('Eldest grandchild');
+ await page.locator('.form-card button.btn-primary', { hasText: 'Save changes' }).click();
+ await page.waitForTimeout(600);
+ // Card should still be expanded (editing doesn't collapse it) — check directly.
+ const notesVisible = await page.locator('.person-card', { hasText: 'Son Yusuf' }).locator('.notes').isVisible().catch(() => false);
+ record('Family Tree: editing a person persists notes', notesVisible);
+
+ // Delete a relationship, confirm it's gone
+ const delBtn = page.locator('.rel-row', { hasText: 'Grandmother Fatimah' }).locator('button');
+ await delBtn.click();
+ await page.waitForTimeout(600);
+ const relCountAfterDelete = await page.locator('.rel-row').count();
+ record('Family Tree: deleting a relationship removes it', relCountAfterDelete === 2, `${relCountAfterDelete} rows remain`);
+
+ // ── Isolation: a fresh family (same account) should NOT see this tree ──
+ const isolationPage = await browser.newPage({ viewport: { width: 390, height: 844 } });
+ await signInFreshFamily(isolationPage, BASE, 'e2e-family-tree-isolation');
+ await isolationPage.locator('nav button[aria-label="Tree"]').click();
+ await isolationPage.waitForTimeout(600);
+ const leakedPerson = await isolationPage.locator('.person-card', { hasText: 'Grandfather Ahmad' }).isVisible().catch(() => false);
+ record('Family Tree: a different family sees none of this tree (isolation)', !leakedPerson);
+ await isolationPage.close();
+
+ record('No uncaught JS console errors during full session', consoleErrors.length === 0, consoleErrors.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); });
diff --git a/src/App.svelte b/src/App.svelte
index 5e3070c..e82ffcc 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -17,6 +17,7 @@
import FamilySwitcher from './lib/FamilySwitcher.svelte';
import FamilyManagement from './lib/FamilyManagement.svelte';
import MutawalliDashboard from './lib/MutawalliDashboard.svelte';
+ import FamilyTree from './lib/FamilyTree.svelte';
let currentLang = $state('en');
lang.subscribe(v => currentLang = v);
@@ -40,8 +41,8 @@
}
});
- const tabs = ['Coverage', 'Faraid', 'Assets', 'Wassiyah', 'Hibah', 'Family Waqf', 'Nominate', 'Trigger', 'Mutawalli', 'Claims (H2)', 'Family', 'Settings'];
- const icons = ['🎯', '📊', '📁', '📜', '🎁', '⛲', '📇', '⚡', '🕋', '🔗', '👥', '⚙️'];
+ const tabs = ['Coverage', 'Faraid', 'Assets', 'Wassiyah', 'Hibah', 'Family Waqf', 'Nominate', 'Trigger', 'Mutawalli', 'Tree', 'Claims (H2)', 'Family', 'Settings'];
+ const icons = ['🎯', '📊', '📁', '📜', '🎁', '⛲', '📇', '⚡', '🕋', '🌳', '🔗', '👥', '⚙️'];
let activeTab = $state(0);
function handleKeydown(e) {
@@ -104,9 +105,10 @@
{:else if activeTab === 6}
Shared family knowledge — any family member can view and edit this map.
+ + {#if error}{error}
{/if} + +Add people and relationships above to build the tree.
+ {/if} + {#each roots as root (root.id)} + {@render personNode(root, 0)} + {/each} +{p.notes}
{/if} +No one added yet.
+ {/each} +No relationships recorded yet.
+ {/each} +