ashwin/nxtgauge-admin-solid
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(admin): align role/runtime/onboarding detail screens with Next UI

Browse source
This commit is contained in:
Ashwin Kumar 2026-03-19 13:56:41 +01:00
parent 09894af444
commit 0e509713f5
4 changed files with 54 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/routes/admin/onboarding-schemas/[schemaId].tsx
View file

@ -1,4 +1,4 @@
import { useNavigate, useParams } from '@solidjs/router'; import { A, useNavigate, useParams } from '@solidjs/router';
import { createEffect, createMemo, createResource, createSignal, For, Show } from 'solid-js'; import { createEffect, createMemo, createResource, createSignal, For, Show } from 'solid-js';
import AdminShell from '~/components/AdminShell'; import AdminShell from '~/components/AdminShell';
@ -140,12 +140,23 @@ export default function EditOnboardingFlowPage() {
return ( return (
<AdminShell> <AdminShell>
<div class="page-actions"> <nav class="admin-link-tabs" aria-label="Onboarding Management Navigation">
<A class="admin-link-tab active" href="/admin/onboarding-schemas">Onboarding Schemas</A>
<A class="admin-link-tab" href="/admin/runtime-roles">External Runtime Roles</A>
<A class="admin-link-tab" href="/admin/roles">Internal Roles</A>
</nav>
<div class="page-hero-card page-actions">
<div> <div>
<h1 class="page-title">Edit Onboarding Flow</h1> <h1 class="page-title">Onboarding Management</h1>
<p class="page-subtitle">Update the onboarding flow details, steps, and fields.</p> <p class="page-subtitle">Open one flow at a time, then update role mapping, steps, fields, and final submission message.</p>
</div>
<div class="actions" style="margin-top:0">
<button class="btn" type="button" disabled={saving()} onClick={() => handleSubmit(data()?.is_active ? 'draft' : 'published')}>
{data()?.is_active ? 'Unpublish' : 'Publish'}
</button>
<A class="btn" href="/admin/onboarding-schemas">Back to Onboarding</A>
</div> </div>
<a class="btn" href="/admin/onboarding-schemas">Back to Onboarding</a>
</div> </div>
<Show when={data.loading}> <Show when={data.loading}>

12
src/routes/admin/roles/[id]/edit.tsx
View file

@ -1,4 +1,4 @@
import { useNavigate, useParams } from '@solidjs/router'; import { A, useNavigate, useParams } from '@solidjs/router';
import { createEffect, createMemo, createResource, createSignal, Show } from 'solid-js'; import { createEffect, createMemo, createResource, createSignal, Show } from 'solid-js';
import AdminShell from '~/components/AdminShell'; import AdminShell from '~/components/AdminShell';
@ -111,14 +111,20 @@ export default function EditInternalRolePage() {
return ( return (
<AdminShell> <AdminShell>
<div class="page-actions"> <div class="page-hero-card page-actions">
<div> <div>
<h1 class="page-title">Edit Internal Role</h1> <h1 class="page-title">Edit Internal Role</h1>
<p class="page-subtitle">Update role name, module access, and permissions.</p> <p class="page-subtitle">Update role name, module access, and permissions.</p>
</div> </div>
<a class="btn" href={`/admin/roles/${params.id}`}>Back to Role</a> <A class="btn" href={`/admin/roles/${params.id}`}>Back to Role</A>
</div> </div>
<nav class="admin-link-tabs" aria-label="Role Management Navigation">
<A class="admin-link-tab active" href="/admin/roles">Internal Roles</A>
<A class="admin-link-tab" href="/admin/runtime-roles">External Runtime Roles</A>
<A class="admin-link-tab" href="/admin/onboarding-schemas">Onboarding Schemas</A>
</nav>
<Show when={data.loading}> <Show when={data.loading}>
<div class="card"><p class="notice">Loading role...</p></div> <div class="card"><p class="notice">Loading role...</p></div>
</Show> </Show>

8
src/routes/admin/roles/[id]/index.tsx
View file

@ -43,7 +43,7 @@ export default function RoleDetailPage() {
return ( return (
<AdminShell> <AdminShell>
<div class="page-actions"> <div class="page-hero-card page-actions">
<div> <div>
<h1 class="page-title">Role Details</h1> <h1 class="page-title">Role Details</h1>
<p class="page-subtitle">View role information and assigned permissions.</p> <p class="page-subtitle">View role information and assigned permissions.</p>
@ -56,6 +56,12 @@ export default function RoleDetailPage() {
</div> </div>
</div> </div>
<nav class="admin-link-tabs" aria-label="Role Management Navigation">
<A class="admin-link-tab active" href="/admin/roles">Internal Roles</A>
<A class="admin-link-tab" href="/admin/runtime-roles">External Runtime Roles</A>
<A class="admin-link-tab" href="/admin/onboarding-schemas">Onboarding Schemas</A>
</nav>
<Show when={data.loading}> <Show when={data.loading}>
<div class="card"> <div class="card">
<p class="notice">Loading role details...</p> <p class="notice">Loading role details...</p>

28
src/routes/admin/runtime-roles/[roleKey].tsx
View file

@ -1,4 +1,4 @@
import { useNavigate, useParams } from '@solidjs/router'; import { A, useNavigate, useParams } from '@solidjs/router';
import { createEffect, createResource, createSignal, Show } from 'solid-js'; import { createEffect, createResource, createSignal, Show } from 'solid-js';
import AdminShell from '~/components/AdminShell'; import AdminShell from '~/components/AdminShell';
@ -105,14 +105,23 @@ export default function EditExternalRolePage() {
return ( return (
<AdminShell> <AdminShell>
<div class="page-actions"> <div class="page-hero-card page-actions">
<div> <div>
<h1 class="page-title">Edit Runtime Role</h1> <h1 class="page-title">External Role Management</h1>
<p class="page-subtitle">Update this external runtime role configuration.</p> <p class="page-subtitle">Manage one external role in detail, including modules, onboarding assignment, and approval gates.</p>
</div>
<div class="actions" style="margin-top:0">
<A class="btn" href={`/admin/role-ui-configs?roleKey=${encodeURIComponent(params.roleKey)}`}>Open Inspector</A>
<A class="btn" href="/admin/runtime-roles">Back to Runtime Roles</A>
</div> </div>
<a class="btn" href="/admin/runtime-roles">Back to Runtime Roles</a>
</div> </div>
<nav class="admin-link-tabs" aria-label="External Management Navigation">
<A class="admin-link-tab active" href="/admin/runtime-roles">External Runtime Roles</A>
<A class="admin-link-tab" href="/admin/onboarding-schemas">Onboarding Schemas</A>
<A class="admin-link-tab" href="/admin/roles">Internal Roles</A>
</nav>
<Show when={data.loading}> <Show when={data.loading}>
<div class="card"><p class="notice">Loading role...</p></div> <div class="card"><p class="notice">Loading role...</p></div>
</Show> </Show>
@ -130,9 +139,16 @@ export default function EditExternalRolePage() {
</Show> </Show>
<Show when={!data.loading && config()}> <Show when={!data.loading && config()}>
<section class="card" style="margin-bottom:16px">
<h2 style="margin-bottom:6px">Publishing Model</h2>
<p class="notice" style="margin:0">
Changes on this screen update the published runtime role config through the admin API.
</p>
</section>
<div class="grid"> <div class="grid">
<section class="card external-role-form"> <section class="card external-role-form">
<h2>Role Builder</h2> <h2>External Role Builder</h2>
<div class="field"> <div class="field">
<label>Role Key <span style="color:#ef4444">*</span></label> <label>Role Key <span style="color:#ef4444">*</span></label>