add fixes to claims and seasons
This commit is contained in:
JCEEE
@@ -1,37 +1,226 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
import { enhance } from '$app/forms';
|
||||
import { ViewHeader, CardGrid, Card, Button } from '$lib/components';
|
||||
|
||||
let { data, form } = $props();
|
||||
</script>
|
||||
|
||||
<h1>Super Admin</h1>
|
||||
{#if !data.authenticated}
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h1>Platform Admin</h1>
|
||||
<p class="subtitle">Sign in to access the admin dashboard</p>
|
||||
|
||||
<div class="stats">
|
||||
<div class="card"><strong>{data.totalFams}</strong> Families</div>
|
||||
<div class="card"><strong>{data.totalMembers}</strong> Members</div>
|
||||
<div class="card"><strong>{data.totalRewards}</strong> Rewards</div>
|
||||
</div>
|
||||
{#if form?.error}
|
||||
<p class="error">{form.error}</p>
|
||||
{/if}
|
||||
|
||||
<h2>Families</h2>
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Slug</th><th>Members</th><th>Rewards</th><th>Invite Code</th></tr></thead>
|
||||
<tbody>
|
||||
{#each data.fams as fam}
|
||||
<tr>
|
||||
<td><a href="/{fam.slug}/admin">{fam.name}</a></td>
|
||||
<td>{fam.slug}</td>
|
||||
<td>{fam.memberCount}</td>
|
||||
<td>{fam.claimedRewards}/{fam.totalRewards}</td>
|
||||
<td><code>{fam.inviteCode}</code></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<form method="POST" action="?/login" use:enhance>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required />
|
||||
</div>
|
||||
<Button type="submit" variant="primary" size="lg">Sign In</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<ViewHeader title="Platform Admin" subtitle="Manage families and platform settings" />
|
||||
|
||||
<CardGrid>
|
||||
<Card cols={1} title="Overview" accent="#6366f1">
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<span class="stat-value">{data.totalFams}</span>
|
||||
<span class="stat-label">Families</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-value">{data.totalMembers}</span>
|
||||
<span class="stat-label">Members</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-value">{data.totalRewards}</span>
|
||||
<span class="stat-label">Rewards</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card cols={2} title="Families" accent="#059669">
|
||||
<table class="fam-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parent</th>
|
||||
<th>Members</th>
|
||||
<th>Claims</th>
|
||||
<th>Debug</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.fams as fam}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/{fam.slug}/admin">{fam.name}</a>
|
||||
<span class="slug">/{fam.slug}</span>
|
||||
</td>
|
||||
<td>{fam.parentEmail || '—'}</td>
|
||||
<td>{fam.memberCount}</td>
|
||||
<td>
|
||||
{#if fam.requestedRewards > 0}
|
||||
<span class="badge pending">{fam.requestedRewards} pending</span>
|
||||
{:else}
|
||||
<span class="badge none">None</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<form method="POST" action="?/toggleFeatureFlag" use:enhance>
|
||||
<input type="hidden" name="famId" value={fam.id} />
|
||||
<input type="hidden" name="flag" value="debugMode" />
|
||||
<button
|
||||
type="submit"
|
||||
class="toggle-btn"
|
||||
class:active={fam.featureFlags?.debugMode}
|
||||
>
|
||||
{fam.featureFlags?.debugMode ? 'ON' : 'OFF'}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/{fam.slug}/admin" class="link">Dashboard</a>
|
||||
<a href="/{fam.slug}" class="link">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
<form method="POST" action="?/logout" class="logout-form">
|
||||
<Button type="submit" variant="ghost" size="sm">Sign Out</Button>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.stats { display: flex; gap: 1rem; margin: 1rem 0; }
|
||||
.card { padding: 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; flex: 1; text-align: center; }
|
||||
.card strong { font-size: 1.5rem; display: block; }
|
||||
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
|
||||
th, td { padding: 0.5rem; border: 1px solid #e5e7eb; text-align: left; }
|
||||
th { background: #f9fafb; font-weight: 600; }
|
||||
code { background: #eee; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.85em; }
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
.login-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
.login-card h1 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.subtitle {
|
||||
color: #6b7280;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.error {
|
||||
color: #dc2626;
|
||||
background: #fef2f2;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
.stat {
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 0.85rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
.fam-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.fam-table th, .fam-table td {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
text-align: left;
|
||||
}
|
||||
.fam-table th {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
.slug {
|
||||
color: #9ca3af;
|
||||
font-size: 0.8rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.badge.pending { background: #fef3c7; color: #92400e; }
|
||||
.badge.none { background: #f3f4f6; color: #6b7280; }
|
||||
.toggle-btn {
|
||||
background: #e5e7eb;
|
||||
border: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.toggle-btn.active {
|
||||
background: #059669;
|
||||
color: white;
|
||||
}
|
||||
.link {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
margin-right: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.link:hover { text-decoration: underline; }
|
||||
.logout-form {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user