163 lines
7.7 KiB
Svelte
163 lines
7.7 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { createFamily, listMyFamilies, listPendingInvites, acceptInvite, activeFamilyId } from './family.js';
|
|
import { currentUser, signOut } from './auth.js';
|
|
|
|
let families = $state([]);
|
|
let invites = $state([]);
|
|
let newFamilyName = $state('');
|
|
let searchQuery = $state('');
|
|
let loading = $state(true);
|
|
let error = $state('');
|
|
|
|
async function refresh() {
|
|
loading = true;
|
|
try {
|
|
families = await listMyFamilies();
|
|
invites = await listPendingInvites();
|
|
} catch (e) {
|
|
error = e.message;
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
onMount(refresh);
|
|
|
|
async function handleCreate() {
|
|
if (!newFamilyName) return;
|
|
try {
|
|
await createFamily(newFamilyName);
|
|
newFamilyName = '';
|
|
await refresh();
|
|
} catch (e) { error = e.message; }
|
|
}
|
|
|
|
async function handleAccept(inv) {
|
|
try {
|
|
await acceptInvite(inv.membershipId);
|
|
await refresh();
|
|
activeFamilyId.set(inv.familyId);
|
|
} catch (e) { error = e.message; }
|
|
}
|
|
|
|
function selectFamily(id) {
|
|
activeFamilyId.set(id);
|
|
}
|
|
|
|
const isAgentForMultiple = $derived(families.filter(f => f.role === 'agent').length > 1);
|
|
const filteredFamilies = $derived(families.filter(f => f.name.toLowerCase().includes(searchQuery.toLowerCase())));
|
|
</script>
|
|
|
|
<div class="switcher-screen">
|
|
<div class="header-brand">
|
|
<div class="brand-line brand-line-first">Nur</div>
|
|
<div class="brand-line brand-line-second">Falah</div>
|
|
</div>
|
|
<span class="header-tagline">ESTATE & WAQF SUITE</span>
|
|
<div class="header-divider"></div>
|
|
|
|
<div class="user-row">
|
|
<span>Signed in as {currentUser()?.email}</span>
|
|
<button class="signout-btn" onclick={signOut}>Sign out</button>
|
|
</div>
|
|
|
|
{#if error}<p class="error-text">{error}</p>{/if}
|
|
|
|
{#if loading}
|
|
<p class="loading">Loading your families…</p>
|
|
{:else}
|
|
<div class="section">
|
|
<h3>Start your own family estate</h3>
|
|
<p class="hint">If you're the head of family setting this up for the first time, create your family here. You can invite an estate agent to help manage it once it's set up.</p>
|
|
<label class="field"><span>Family name</span><input type="text" bind:value={newFamilyName} placeholder="e.g. The Ismail Family" /></label>
|
|
<button class="btn-primary" onclick={handleCreate}>Create family</button>
|
|
</div>
|
|
|
|
{#if invites.length}
|
|
<div class="section">
|
|
<h3>Pending invitations</h3>
|
|
{#each invites as inv}
|
|
<div class="invite-row card-layout">
|
|
<div class="card-info">
|
|
<span class="card-title">{inv.familyName}</span>
|
|
<span class="card-meta">Role: <strong>{inv.role}</strong></span>
|
|
</div>
|
|
<button class="btn-small" onclick={() => handleAccept(inv)}>Accept</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if families.length}
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h3>{isAgentForMultiple ? 'Your assigned families' : 'Your families'}</h3>
|
|
<input type="text" class="search-input" bind:value={searchQuery} placeholder="Search families..." />
|
|
</div>
|
|
<div class="cards-grid">
|
|
{#each filteredFamilies as f}
|
|
<button class="family-card" onclick={() => selectFamily(f.id)}>
|
|
<div class="card-top">
|
|
<span class="card-title">{f.name}</span>
|
|
<span class="role-badge" class:owner={f.role === 'owner'}>{f.role}</span>
|
|
</div>
|
|
<div class="card-bottom">
|
|
<span class="status-indicator">Active</span>
|
|
<span class="action-hint">Manage estate →</span>
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
{#if filteredFamilies.length === 0}
|
|
<p class="empty-state">No families found matching "{searchQuery}"</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.switcher-screen { max-width: 440px; margin: 0 auto; padding: 24px 16px; }
|
|
.header-brand { display: flex; justify-content: center; gap: 8px; }
|
|
.brand-line { font-family: 'DM Serif Display', serif; font-size: 30px; }
|
|
.brand-line-first { color: #E8E4DC; }
|
|
.brand-line-second { color: #C9A84C; }
|
|
.header-tagline { display: block; text-align: center; font-size: 10px; letter-spacing: 2px; color: #8A8478; }
|
|
.header-divider { height: 2px; width: 40px; background: #C9A84C; margin: 10px auto 24px; border-radius: 2px; }
|
|
.user-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #8A8478; margin-bottom: 20px; }
|
|
.signout-btn { background: none; border: none; color: #C9A84C; cursor: pointer; font-size: 12px; }
|
|
.loading { text-align: center; color: #8A8478; font-size: 13px; }
|
|
.section { margin-bottom: 24px; }
|
|
.section h3 { font-size: 14px; color: #C9A84C; margin-bottom: 10px; }
|
|
.hint { font-size: 11.5px; color: #8A8478; line-height: 1.5; margin-bottom: 12px; }
|
|
.invite-row { display: flex; justify-content: space-between; align-items: center; background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.25); border-radius: 10px; padding: 12px; margin-bottom: 8px; font-size: 13px; color: #E8E4DC; }
|
|
.btn-small { background: #C9A84C; color: #070A0D; border: none; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
|
|
|
|
.section-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
|
|
.search-input { background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.2); border-radius: 8px; padding: 8px 12px; color: #E8E4DC; font-size: 13px; width: 100%; outline: none; transition: border-color 0.2s; }
|
|
.search-input:focus { border-color: #C9A84C; }
|
|
|
|
.cards-grid { display: flex; flex-direction: column; gap: 10px; }
|
|
.family-card { width: 100%; display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; font-size: 14px; color: #E8E4DC; cursor: pointer; text-align: left; transition: all 0.2s; }
|
|
.family-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(201,168,76,0.3); transform: translateY(-1px); }
|
|
.card-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
|
|
.card-bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 11px; color: #8A8478; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; }
|
|
.card-title { font-weight: 600; font-size: 15px; }
|
|
.status-indicator { display: flex; align-items: center; gap: 4px; }
|
|
.status-indicator::before { content: ''; width: 6px; height: 6px; background: #2ECC71; border-radius: 50%; }
|
|
.action-hint { color: #C9A84C; opacity: 0; transition: opacity 0.2s; }
|
|
.family-card:hover .action-hint { opacity: 1; }
|
|
|
|
.empty-state { text-align: center; color: #8A8478; font-size: 13px; padding: 20px 0; font-style: italic; }
|
|
|
|
.role-badge { font-size: 10px; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.1); color: #B8B2A6; }
|
|
.role-badge.owner { background: rgba(201,168,76,0.15); color: #C9A84C; }
|
|
.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%; }
|
|
.btn-primary { width: 100%; padding: 12px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; background: #C9A84C; color: #070A0D; transition: opacity 0.2s; }
|
|
.btn-primary:hover { opacity: 0.9; }
|
|
.error-text { color: #EF4444; font-size: 12.5px; margin-bottom: 12px; }
|
|
</style>
|