188 lines
7.1 KiB
TypeScript
188 lines
7.1 KiB
TypeScript
import { A, useLocation, useNavigate } from '@solidjs/router';
|
|
import { createMemo, createSignal, onMount, type JSX } from 'solid-js';
|
|
import AdminSidebar from './AdminSidebar';
|
|
import { clearAdminSession, hasAdminSession } from '~/lib/admin-session';
|
|
import { sidebarCollapsed } from '~/lib/sidebar-state';
|
|
|
|
type Tab = { href: string; label: string; exact?: boolean };
|
|
|
|
const TAB_SETS: Array<{ prefixes: string[]; tabs: Tab[] }> = [
|
|
{
|
|
prefixes: ['/admin/roles'],
|
|
tabs: [
|
|
{ href: '/admin/roles', label: 'Internal Roles', exact: true },
|
|
{ href: '/admin/roles/create', label: 'Create Role' },
|
|
{ href: '/admin/roles/templates', label: 'Role Templates' },
|
|
],
|
|
},
|
|
{
|
|
prefixes: ['/admin/runtime-roles'],
|
|
tabs: [
|
|
{ href: '/admin/runtime-roles', label: 'External Roles', exact: true },
|
|
{ href: '/admin/runtime-roles/new', label: 'Create External Role' },
|
|
],
|
|
},
|
|
{
|
|
prefixes: ['/admin/onboarding-schemas'],
|
|
tabs: [
|
|
{ href: '/admin/onboarding-schemas', label: 'Onboarding Flows', exact: true },
|
|
{ href: '/admin/onboarding-schemas/new', label: 'Create Flow' },
|
|
],
|
|
},
|
|
{
|
|
prefixes: ['/admin/internal-dashboard-management'],
|
|
tabs: [
|
|
{ href: '/admin/internal-dashboard-management', label: 'Internal Dashboards' },
|
|
],
|
|
},
|
|
{
|
|
prefixes: ['/admin/external-dashboard-management'],
|
|
tabs: [
|
|
{ href: '/admin/external-dashboard-management', label: 'External Dashboards' },
|
|
],
|
|
},
|
|
{
|
|
prefixes: ['/admin/role-ui-configs'],
|
|
tabs: [
|
|
{ href: '/admin/role-ui-configs', label: 'Config Inspector', exact: true },
|
|
{ href: '/admin/role-ui-configs/new', label: 'Create Config' },
|
|
],
|
|
},
|
|
];
|
|
|
|
const PAGE_TITLES: Array<{ prefix: string; title: string }> = [
|
|
{ prefix: '/admin/workspace', title: 'Dashboard Workspace' },
|
|
{ prefix: '/admin/settings', title: 'Settings' },
|
|
{ prefix: '/admin/role-modules', title: 'Role Modules' },
|
|
{ prefix: '/admin/modules', title: 'Module Management' },
|
|
{ prefix: '/admin/responses', title: 'Lead Responses' },
|
|
{ prefix: '/admin/applications', title: 'Applications' },
|
|
{ prefix: '/admin/financial', title: 'Financial Management' },
|
|
{ prefix: '/admin/help', title: 'Support Management' },
|
|
{ prefix: '/admin/verification-status', title: 'Verification Status' },
|
|
{ prefix: '/admin/verification', title: 'Verification Review' },
|
|
{ prefix: '/admin/approval', title: 'Approval Management' },
|
|
{ prefix: '/admin/users', title: 'External User Management' },
|
|
{ prefix: '/admin/company', title: 'Company Management' },
|
|
{ prefix: '/admin/customer', title: 'Customer Management' },
|
|
{ prefix: '/admin/candidate', title: 'Candidate Management' },
|
|
{ prefix: '/admin/photographer', title: 'Photographer Management' },
|
|
{ prefix: '/admin/makeup-artist', title: 'Makeup Artist Management' },
|
|
{ prefix: '/admin/tutors', title: 'Tutor Management' },
|
|
{ prefix: '/admin/developers', title: 'Developer Management' },
|
|
{ prefix: '/admin/jobs', title: 'Jobs Management' },
|
|
{ prefix: '/admin/leads', title: 'Leads Management' },
|
|
{ prefix: '/admin/pricing', title: 'Pricing Management' },
|
|
{ prefix: '/admin/invoice', title: 'Invoice Management' },
|
|
{ prefix: '/admin/credit', title: 'Credit Management' },
|
|
{ prefix: '/admin/ledger', title: 'Ledger Management' },
|
|
{ prefix: '/admin/report', title: 'Report Management' },
|
|
{ prefix: '/admin/roles', title: 'Internal Role Management' },
|
|
{ prefix: '/admin/external-role-management', title: 'External Role Management' },
|
|
{ prefix: '/admin/internal-role-management', title: 'Internal Role Management' },
|
|
{ prefix: '/admin/runtime-roles', title: 'External Role Management' },
|
|
{ prefix: '/admin/onboarding-management', title: 'Onboarding Management' },
|
|
{ prefix: '/admin/onboarding-schemas', title: 'Onboarding Management' },
|
|
{ prefix: '/admin', title: 'Dashboard' },
|
|
];
|
|
|
|
export default function AdminShell(props: { children: JSX.Element }) {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const [checkedSession, setCheckedSession] = createSignal(false);
|
|
|
|
const tabs = createMemo<Tab[]>(() => {
|
|
const path = location.pathname;
|
|
for (const set of TAB_SETS) {
|
|
if (set.prefixes.some((p) => path === p || path.startsWith(`${p}/`))) {
|
|
return set.tabs;
|
|
}
|
|
}
|
|
return [];
|
|
});
|
|
|
|
const isTabActive = (tab: Tab) => {
|
|
if (tab.exact) return location.pathname === tab.href;
|
|
return location.pathname === tab.href || location.pathname.startsWith(`${tab.href}/`);
|
|
};
|
|
|
|
const pageTitle = createMemo(() => {
|
|
const path = location.pathname;
|
|
for (const item of PAGE_TITLES) {
|
|
if (path === item.prefix || path.startsWith(`${item.prefix}/`)) return item.title;
|
|
}
|
|
return 'Dashboard';
|
|
});
|
|
|
|
onMount(() => {
|
|
if (!hasAdminSession()) {
|
|
const from = encodeURIComponent(location.pathname + location.search);
|
|
navigate(`/login?from=${from}`, { replace: true });
|
|
return;
|
|
}
|
|
setCheckedSession(true);
|
|
});
|
|
|
|
const onLogout = () => {
|
|
clearAdminSession();
|
|
navigate('/login', { replace: true });
|
|
};
|
|
|
|
return (
|
|
<div class="admin-root">
|
|
<header class="admin-header">
|
|
<div class="admin-header-inner">
|
|
<div class="admin-header-left">
|
|
<div class="admin-brand">
|
|
<img src="/nxtgauge-logo.png" alt="NXTGAUGE" />
|
|
</div>
|
|
<h1 class="admin-page-heading">{pageTitle()}</h1>
|
|
</div>
|
|
<div class="admin-header-actions">
|
|
<p class="admin-role-chip">Super Admin</p>
|
|
<button class="admin-avatar-btn" type="button" aria-label="Admin profile">
|
|
<span class="admin-avatar">A</span>
|
|
<span class="admin-avatar-meta">
|
|
<span class="admin-avatar-name">Admin</span>
|
|
<span class="admin-avatar-role">Super Admin</span>
|
|
</span>
|
|
</button>
|
|
<button class="admin-logout-btn" type="button" onClick={onLogout} aria-label="Logout">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H9m4 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{checkedSession() ? (
|
|
<div class={`shell${sidebarCollapsed() ? ' sidebar-collapsed' : ''}`}>
|
|
<AdminSidebar />
|
|
<main class="main">
|
|
{tabs().length > 0 ? (
|
|
<div class="admin-tab-wrap">
|
|
<nav class="admin-tabs">
|
|
{tabs().map((tab) => (
|
|
<A href={tab.href} class={`admin-tab ${isTabActive(tab) ? 'active' : ''}`}>
|
|
{tab.label}
|
|
</A>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
) : null}
|
|
<div class="main-inner">{props.children}</div>
|
|
</main>
|
|
</div>
|
|
) : (
|
|
<div class="shell">
|
|
<main class="main">
|
|
<div class="card">
|
|
<p class="notice">Checking session...</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|