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

Update admin dashboard UI and add management route aliases

Browse source
This commit is contained in:
Ashwin Kumar 2026-03-25 23:01:42 +01:00
parent 3f20065257
commit 8e2b3c1a64
4 changed files with 140 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/AdminSidebar.tsx
View file

@ -85,7 +85,7 @@ export default function AdminSidebar(props: {
const location = useLocation(); const location = useLocation();
const isActive = (item: NavItem) => { const isActive = (item: NavItem) => {
if (location.pathname === '/admin') return item.href === '/admin/department'; if (location.pathname === '/admin') return item.href === '/admin';
if (item.href === '/admin') return false; if (item.href === '/admin') return false;
if (item.aliasPrefix && location.pathname.startsWith(item.aliasPrefix)) return true; if (item.aliasPrefix && location.pathname.startsWith(item.aliasPrefix)) return true;
return location.pathname === item.href || location.pathname.startsWith(`${item.href}/`); return location.pathname === item.href || location.pathname.startsWith(`${item.href}/`);

1
src/routes/admin/department-management.tsx Normal file
View file

@ -0,0 +1 @@
export { default } from './department';

1
src/routes/admin/designation-management.tsx Normal file
View file

@ -0,0 +1 @@
export { default } from './designation';

350
src/routes/admin/index.tsx
View file

@ -1,258 +1,160 @@
import { For, onCleanup, onMount } from 'solid-js'; import { For } from 'solid-js';
import { A } from '@solidjs/router';
import { Users, Building2, TrendingUp, CreditCard, Download, Eye, Pencil, Trash2 } from 'lucide-solid';
import AdminShell from '~/components/AdminShell'; import AdminShell from '~/components/AdminShell';
type StatDef = { const kpis = [
id: string; { title: 'Total Users', value: '12,458', delta: '+12.5%', note: '+1,245 from last month', tone: 'up' as const, icon: 'US' },
label: string; { title: 'Active Companies', value: '1,234', delta: '+8.2%', note: '+94 from last month', tone: 'up' as const, icon: 'CP' },
icon: any; { title: 'Open Leads', value: '847', delta: '-3.1%', note: '-27 from last month', tone: 'down' as const, icon: 'LD' },
value: string; { title: 'Credits Purchased', value: '$45,890', delta: '+18.7%', note: '+$7,234 from last month', tone: 'up' as const, icon: 'CR' },
delta: string;
deltaPositive?: boolean;
subtext: string;
};
const STAT_DEFS: StatDef[] = [
{
id: 'total-users',
label: 'Total Users',
icon: Users,
value: '12,458',
delta: '+12.5%',
deltaPositive: true,
subtext: '+1,245 from last month',
},
{
id: 'active-companies',
label: 'Active Companies',
icon: Building2,
value: '1,234',
delta: '+8.2%',
deltaPositive: true,
subtext: '+94 from last month',
},
{
id: 'open-leads',
label: 'Open Leads',
icon: TrendingUp,
value: '847',
delta: '-3.1%',
deltaPositive: false,
subtext: '-27 from last month',
},
{
id: 'credits-purchased',
label: 'Credits Purchased',
icon: CreditCard,
value: '$45,890',
delta: '+18.7%',
deltaPositive: true,
subtext: '+$7,234 from last month',
},
]; ];
type RecentLead = { const trendSeries = [62, 70, 81, 75, 88, 102];
title: string; const revSeries = [42000, 48000, 55000, 51000, 62000, 69000];
customer: string; const maxAmount = 80000;
category: string;
budget: string;
status: 'Active' | 'Pending' | 'Negotiating';
};
const RECENT_LEADS: RecentLead[] = [ const leadRows = [
{ title: 'Website Redesign Project', customer: 'TechCorp Inc.', category: 'Developers', budget: '$15,000', status: 'Active' }, { title: 'Corporate Event Photographer', customer: 'Bright Media', category: 'Photography', budget: '$3,500', status: 'New', priority: 'High' },
{ title: 'Corporate Event Photography', customer: 'EventMasters LLC', category: 'Photographer', budget: '$3,500', status: 'Pending' }, { title: 'Wedding Makeup Artist', customer: 'Aster Weddings', category: 'Makeup Artist', budget: '$1,800', status: 'In Review', priority: 'Medium' },
{ title: 'Marketing Campaign Design', customer: 'BrandHub Co.', category: 'Graphics Designer', budget: '$8,200', status: 'Active' }, { title: 'SAT Batch Tutor', customer: 'EduPath', category: 'Tutors', budget: '$2,300', status: 'Assigned', priority: 'Low' },
{ title: 'Social Media Management', customer: 'GrowthStart', category: 'Social Media Manager', budget: '$5,000', status: 'Negotiating' }, { title: 'Personal Fitness Trainer', customer: 'Core Fitness', category: 'Fitness', budget: '$2,900', status: 'Escalated', priority: 'High' },
{ title: 'Corporate Video Editor', customer: 'Pixel Forge', category: 'Video Editor', budget: '$4,200', status: 'New', priority: 'Critical' },
]; ];
function classForStatus(status: RecentLead['status']) {
if (status === 'Active') return 'bg-[rgba(250,80,20,0.1)] border-[rgba(250,80,20,0.2)] text-[#fa5014]';
if (status === 'Pending') return 'bg-[rgba(0,0,50,0.1)] border-[rgba(0,0,50,0.2)] text-[#000032]';
return 'bg-[#f9fafb] border-[#e5e7eb] text-[rgba(0,0,50,0.6)]';
}
function MiniChart(props: { type: 'line' | 'bar' }) {
let el!: HTMLDivElement;
let chart: any = null;
onCleanup(() => { chart?.destroy(); chart = null; });
onMount(async () => {
const { default: ApexCharts } = await import('apexcharts');
if (!el) return;
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
const isLine = props.type === 'line';
chart = new ApexCharts(el, {
chart: {
type: props.type,
height: 240,
toolbar: { show: false },
fontFamily: 'Exo 2, sans-serif',
},
grid: {
borderColor: '#e5e7eb',
strokeDashArray: 4,
xaxis: { lines: { show: false } },
},
xaxis: {
categories: months,
labels: { style: { colors: '#000032', fontSize: '11px', fontWeight: 700 } },
},
yaxis: {
labels: { style: { colors: '#000032', fontSize: '11px', fontWeight: 700 } },
},
tooltip: { theme: 'light' },
legend: { show: false },
dataLabels: { enabled: false },
...(isLine
? {
series: [{ name: 'Total Leads', data: [65, 75, 90, 80, 95, 110] }],
stroke: { width: 3, curve: 'smooth', colors: ['#000032'] },
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.2,
opacityTo: 0.01,
colorStops: [{ offset: 0, color: '#000032', opacity: 0.16 }, { offset: 100, color: '#000032', opacity: 0.01 }],
},
},
markers: { size: 0 },
colors: ['#000032'],
yaxis: { min: 0, max: 120, tickAmount: 4, labels: { style: { colors: '#000032', fontSize: '11px', fontWeight: 700 } } },
}
: {
series: [{ name: 'Revenue', data: [42000, 48000, 55000, 51000, 62000, 69000] }],
plotOptions: { bar: { columnWidth: '38%', borderRadius: 4 } },
colors: ['#000032'],
yaxis: { min: 0, max: 80000, tickAmount: 4, labels: { formatter: (v: number) => `${v}` } },
}),
});
await chart.render();
});
return <div ref={el!} />;
}
function StatCard(props: { def: StatDef }) {
const Icon = props.def.icon;
return (
<div class="rounded-2xl border-2 border-[#e5e7eb] bg-white px-[22px] pb-[22px] pt-[22px]">
<div class="mb-3 flex items-start justify-between">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[rgba(250,80,20,0.06)]">
<Icon size={22} class="text-[#fa5014]" />
</div>
<div class={`flex h-6 items-center gap-1 rounded-[10px] px-[10px] text-[12px] font-bold ${props.def.deltaPositive ? 'bg-[rgba(250,80,20,0.1)] text-[#fa5014]' : 'bg-[rgba(0,0,50,0.1)] text-[#000032]'}`}>
<span>{props.def.deltaPositive ? '↗' : '↘'}</span>
<span>{props.def.delta}</span>
</div>
</div>
<p class="text-[12px] font-medium leading-4 text-[rgba(0,0,50,0.6)]">{props.def.label}</p>
<p class="mt-1 text-[24px] font-bold leading-[32px] text-[#000032]">
{props.def.value}
</p>
<p class="text-[12px] leading-4 text-[rgba(0,0,50,0.5)]">{props.def.subtext}</p>
</div>
);
}
export default function AdminDashboard() { export default function AdminDashboard() {
const handleExport = () => window.print();
return ( return (
<AdminShell> <AdminShell>
<div class="space-y-6"> <div class="space-y-6">
<div class="flex items-center justify-between"> <section class="rounded-3xl border border-[#e3e5ec] bg-[#f7f7f8] px-6 py-5">
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div> <div>
<h1 class="text-[24px] font-bold leading-8 text-[#000032]">Dashboard Overview</h1> <h1 class="text-[40px] font-semibold leading-[1.1] text-[#050026]">Dashboard Overview</h1>
<p class="mt-1 text-[12px] leading-4 text-[rgba(0,0,50,0.6)]"> <p class="mt-1 text-[15px] text-[#7b8099]">Welcome back! Here&apos;s what&apos;s happening with your platform today.</p>
Welcome back! Here's what's happening with your platform today.
</p>
</div> </div>
<button <button class="inline-flex h-11 items-center rounded-2xl bg-[#050026] px-5 text-sm font-semibold text-white">
type="button"
onClick={handleExport}
class="inline-flex h-10 items-center gap-2 rounded-2xl bg-[#000032] px-5 text-[14px] font-medium text-white"
>
<Download size={16} />
Export Report Export Report
</button> </button>
</div> </div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
<For each={STAT_DEFS}>{(def) => <StatCard def={def} />}</For>
</div>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<section class="rounded-2xl border-2 border-[#e5e7eb] bg-white px-[22px] pb-[22px] pt-[22px] shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1),0px_1px_2px_0px_rgba(0,0,0,0.1)]">
<h2 class="text-[18px] font-bold leading-7 text-[#000032]">Leads Trend</h2>
<p class="text-[12px] leading-4 text-[rgba(0,0,50,0.6)]">Monthly leads performance overview</p>
<div class="mt-4">
<MiniChart type="line" />
</div>
</section> </section>
<section class="rounded-2xl border-2 border-[#e5e7eb] bg-white px-[22px] pb-[22px] pt-[22px] shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1),0px_1px_2px_0px_rgba(0,0,0,0.1)]"> <section class="grid gap-4 xl:grid-cols-4">
<h2 class="text-[18px] font-bold leading-7 text-[#000032]">Revenue Overview</h2> <For each={kpis}>
<p class="text-[12px] leading-4 text-[rgba(0,0,50,0.6)]">Monthly revenue vs expenses comparison</p> {(item) => (
<div class="mt-4"> <article class="rounded-3xl border border-[#d9dde6] bg-[#f7f7f8] p-5 shadow-[0_0_0_1px_rgba(0,0,0,0.01)]">
<MiniChart type="bar" /> <div class="flex items-center justify-between">
<div class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-[#fff1ea] text-xs font-bold text-[#fd6116]">{item.icon}</div>
<span
class={`inline-flex items-center rounded-xl px-2.5 py-1 text-xs font-semibold ${
item.tone === 'up' ? 'bg-[#ffe8dc] text-[#fd6116]' : 'bg-[#eceff6] text-[#383e5c]'
}`}
>
{item.delta}
</span>
</div> </div>
<p class="mt-5 text-[15px] text-[#747a93]">{item.title}</p>
<p class="mt-1 text-[44px] font-semibold leading-none text-[#050026]">{item.value}</p>
<p class="mt-1 text-[14px] text-[#8a90a8]">{item.note}</p>
</article>
)}
</For>
</section> </section>
</div>
<section class="overflow-hidden rounded-2xl border-2 border-[#e5e7eb] bg-white shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]"> <section class="grid gap-4 xl:grid-cols-2">
<div class="flex h-20 items-center justify-between border-b-2 border-[#e5e7eb] bg-gradient-to-r from-white to-[#f9fafb] px-6"> <article class="rounded-3xl border border-[#d9dde6] bg-[#f7f7f8] p-5">
<h2 class="text-[34px] font-semibold leading-[1.1] text-[#050026]">Leads Trend</h2>
<p class="mt-1 text-[14px] text-[#8087a0]">Monthly leads performance overview</p>
<div class="mt-5 rounded-2xl border border-[#e2e6ee] bg-[#f5f5f6] p-4">
<div class="relative h-52">
<div class="absolute inset-0">
<For each={[0, 1, 2, 3]}>{() => <div class="h-1/4 border-b border-dashed border-[#d9dde6]" />}</For>
</div>
<svg viewBox="0 0 100 40" class="relative h-full w-full overflow-visible" preserveAspectRatio="none" aria-hidden="true">
<defs>
<linearGradient id="trendFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fd6116" stop-opacity="0.28" />
<stop offset="100%" stop-color="#fd6116" stop-opacity="0.02" />
</linearGradient>
</defs>
<polyline
fill="none"
stroke="#050026"
stroke-width="1.1"
points={trendSeries.map((v, i) => `${i * 20},${40 - v / 3}`).join(' ')}
/>
<polygon
fill="url(#trendFill)"
points={`0,40 ${trendSeries.map((v, i) => `${i * 20},${40 - v / 3}`).join(' ')} 100,40`}
/>
</svg>
</div>
<div class="mt-1 grid grid-cols-6 text-center text-xs font-semibold text-[#3f4562]">
<For each={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}>{(month) => <span>{month}</span>}</For>
</div>
</div>
</article>
<article class="rounded-3xl border border-[#d9dde6] bg-[#f7f7f8] p-5">
<h2 class="text-[34px] font-semibold leading-[1.1] text-[#050026]">Revenue Overview</h2>
<p class="mt-1 text-[14px] text-[#8087a0]">Monthly revenue vs expenses comparison</p>
<div class="mt-5 rounded-2xl border border-[#e2e6ee] bg-[#f5f5f6] p-4">
<div class="relative h-52">
<div class="absolute inset-0">
<For each={[0, 1, 2, 3]}>{() => <div class="h-1/4 border-b border-dashed border-[#d9dde6]" />}</For>
</div>
<div class="relative flex h-full items-end gap-4 px-2">
<For each={revSeries}>
{(value) => (
<div class="flex h-full flex-1 items-end justify-center">
<div class="w-2.5 rounded-t bg-[#050026]" style={{ height: `${(value / maxAmount) * 100}%` }} />
</div>
)}
</For>
</div>
</div>
<div class="mt-1 grid grid-cols-6 text-center text-xs font-semibold text-[#3f4562]">
<For each={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}>{(month) => <span>{month}</span>}</For>
</div>
</div>
</article>
</section>
<section class="rounded-3xl border border-[#d9dde6] bg-[#f7f7f8] p-1">
<div class="flex flex-col gap-3 px-5 py-4 md:flex-row md:items-center md:justify-between">
<div> <div>
<h2 class="text-[18px] font-bold leading-7 text-[#000032]">Recent Leads</h2> <h2 class="text-[32px] font-semibold leading-[1.1] text-[#050026]">Recent Leads</h2>
<p class="text-[12px] leading-4 text-[rgba(0,0,50,0.6)]">Latest customer inquiries and opportunities</p> <p class="mt-1 text-[14px] text-[#8087a0]">Latest customer inquiries and opportunities</p>
</div> </div>
<A href="/admin/leads" class="inline-flex h-9 items-center rounded-2xl bg-[#000032] px-5 text-[12px] font-semibold text-white"> <button class="inline-flex h-10 items-center rounded-2xl border border-[#d9dde6] bg-white px-4 text-sm font-semibold text-[#050026]">
View All Leads View All Leads
</A> </button>
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto px-1 pb-1">
<table class="w-full min-w-[760px] border-collapse"> <table class="w-full min-w-[860px] border-collapse overflow-hidden rounded-2xl">
<thead> <thead>
<tr class="bg-[#f9fafb]"> <tr class="bg-[#eef1f7] text-left">
<th class="px-6 py-3 text-left text-[12px] font-bold uppercase tracking-[0.6px] text-[rgba(0,0,50,0.6)]">Lead Title</th> <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Lead Title</th>
<th class="px-6 py-3 text-left text-[12px] font-bold uppercase tracking-[0.6px] text-[rgba(0,0,50,0.6)]">Customer</th> <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Customer</th>
<th class="px-6 py-3 text-left text-[12px] font-bold uppercase tracking-[0.6px] text-[rgba(0,0,50,0.6)]">Category</th> <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Category</th>
<th class="px-6 py-3 text-left text-[12px] font-bold uppercase tracking-[0.6px] text-[rgba(0,0,50,0.6)]">Budget</th> <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Budget</th>
<th class="px-6 py-3 text-left text-[12px] font-bold uppercase tracking-[0.6px] text-[rgba(0,0,50,0.6)]">Status</th> <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Status</th>
<th class="px-6 py-3 text-left text-[12px] font-bold uppercase tracking-[0.6px] text-[rgba(0,0,50,0.6)]">Actions</th> <th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Priority</th>
<th class="px-5 py-3 text-[12px] font-semibold uppercase tracking-wide text-[#616985]">Action</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<For each={RECENT_LEADS}> <For each={leadRows}>
{(lead) => ( {(row) => (
<tr class="border-t border-[#e5e7eb]"> <tr class="border-t border-[#e1e6f0] bg-white">
<td class="px-6 py-4 text-[14px] font-semibold leading-5 text-[#000032]">{lead.title}</td> <td class="px-5 py-3 text-sm font-medium text-[#050026]">{row.title}</td>
<td class="px-6 py-4 text-[14px] text-[rgba(0,0,50,0.8)]">{lead.customer}</td> <td class="px-5 py-3 text-sm text-[#3c4260]">{row.customer}</td>
<td class="px-6 py-4 text-[14px] text-[rgba(0,0,50,0.6)]">{lead.category}</td> <td class="px-5 py-3 text-sm text-[#3c4260]">{row.category}</td>
<td class="px-6 py-4 text-[14px] font-bold text-[#000032]">{lead.budget}</td> <td class="px-5 py-3 text-sm font-semibold text-[#050026]">{row.budget}</td>
<td class="px-6 py-4"> <td class="px-5 py-3 text-sm text-[#3c4260]">{row.status}</td>
<span class={`inline-flex h-[30px] items-center rounded-[10px] border px-3 text-[12px] font-bold ${classForStatus(lead.status)}`}>{lead.status}</span> <td class="px-5 py-3 text-sm text-[#3c4260]">{row.priority}</td>
</td> <td class="px-5 py-3 text-sm">
<td class="px-6 py-4"> <button class="rounded-lg border border-[#d9dde6] bg-white px-3 py-1.5 font-medium text-[#050026] hover:bg-[#f8f9fc]">
<div class="flex items-center gap-1.5"> Open
<button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-[10px] text-[#71759a] hover:bg-[#f9fafb]" aria-label="View">
<Eye size={16} />
</button> </button>
<button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-[10px] text-[#71759a] hover:bg-[#f9fafb]" aria-label="Edit">
<Pencil size={16} />
</button>
<button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-[10px] text-[#71759a] hover:bg-[#f9fafb]" aria-label="Delete">
<Trash2 size={16} />
</button>
</div>
</td> </td>
</tr> </tr>
)} )}