78 lines
2.9 KiB
TypeScript
78 lines
2.9 KiB
TypeScript
|
import { A, useParams } from '@solidjs/router';
|
||
|
|
import { createMemo, createResource, Show } from 'solid-js';
|
||
|
|
import AdminShell from '~/components/AdminShell';
|
||
|
|
|
||
|
|
const API = '/api/gateway';
|
||
|
|
|
||
|
|
type Photographer = {
|
||
|
|
id: string;
|
||
|
|
name?: string;
|
||
|
|
full_name?: string;
|
||
|
|
email?: string;
|
||
|
|
phone?: string;
|
||
|
|
status?: string;
|
||
|
|
created_at?: string;
|
||
|
|
createdAt?: string;
|
||
|
|
city?: string;
|
||
|
|
state?: string;
|
||
|
|
experience?: string;
|
||
|
|
portfolio_url?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
async function fetchPhotographer(id: string): Promise<Photographer | null> {
|
||
|
|
try {
|
||
|
|
const res = await fetch(`${API}/api/admin/users/${id}`);
|
||
|
|
if (res.ok) return res.json();
|
||
|
|
const fallback = await fetch(`${API}/api/users/${id}`);
|
||
|
|
if (!fallback.ok) return null;
|
||
|
|
return fallback.json();
|
||
|
|
} catch {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function PhotographerDetailPage() {
|
||
|
|
const params = useParams();
|
||
|
|
const [profile] = createResource(() => params.id, fetchPhotographer);
|
||
|
|
|
||
|
|
const name = createMemo(() => profile()?.name || profile()?.full_name || 'Photographer');
|
||
|
|
const created = createMemo(() => profile()?.createdAt || profile()?.created_at || '');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AdminShell>
|
||
|
|
<div class="page-hero-card page-actions">
|
||
|
|
<div>
|
||
|
|
<h1 class="page-title">Photographer Detail</h1>
|
||
|
|
<p class="page-subtitle">View profile snapshot and account metadata for one photographer.</p>
|
||
|
|
</div>
|
||
|
|
<div class="page-actions-right">
|
||
|
|
<A class="btn" href="/admin/photographer">Back to Photographer List</A>
|
||
|
|
<A class="btn" href={`/admin/users/details/${params.id}`}>Open User Detail</A>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Show when={profile.loading}>
|
||
|
|
<div class="card"><p class="notice">Loading photographer...</p></div>
|
||
|
|
</Show>
|
||
|
|
<Show when={!profile.loading && !profile()}>
|
||
|
|
<div class="card"><p class="notice">Photographer not found.</p></div>
|
||
|
|
</Show>
|
||
|
|
|
||
|
|
<Show when={profile()}>
|
||
|
|
<section class="card">
|
||
|
|
<div class="field-grid-2">
|
||
|
|
<p class="notice" style="margin:0"><strong>Name:</strong> {name()}</p>
|
||
|
|
<p class="notice" style="margin:0"><strong>Email:</strong> {profile()!.email || '—'}</p>
|
||
|
|
<p class="notice" style="margin:0"><strong>Phone:</strong> {profile()!.phone || '—'}</p>
|
||
|
|
<p class="notice" style="margin:0"><strong>Status:</strong> {profile()!.status || '—'}</p>
|
||
|
|
<p class="notice" style="margin:0"><strong>City/State:</strong> {[profile()!.city, profile()!.state].filter(Boolean).join(', ') || '—'}</p>
|
||
|
|
<p class="notice" style="margin:0"><strong>Experience:</strong> {profile()!.experience || '—'}</p>
|
||
|
|
<p class="notice" style="margin:0"><strong>Created:</strong> {created() ? new Date(created()).toLocaleString() : '—'}</p>
|
||
|
|
<p class="notice" style="margin:0"><strong>Portfolio:</strong> {profile()!.portfolio_url || '—'}</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</Show>
|
||
|
|
</AdminShell>
|
||
|
|
);
|
||
|
|
}
|