diff --git a/src/components/AdminSidebar.tsx b/src/components/AdminSidebar.tsx index e03dd02..10298f3 100644 --- a/src/components/AdminSidebar.tsx +++ b/src/components/AdminSidebar.tsx @@ -85,7 +85,7 @@ export default function AdminSidebar(props: { const location = useLocation(); 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.aliasPrefix && location.pathname.startsWith(item.aliasPrefix)) return true; return location.pathname === item.href || location.pathname.startsWith(`${item.href}/`); diff --git a/src/routes/admin/department-management.tsx b/src/routes/admin/department-management.tsx new file mode 100644 index 0000000..9a55b5d --- /dev/null +++ b/src/routes/admin/department-management.tsx @@ -0,0 +1 @@ +export { default } from './department'; diff --git a/src/routes/admin/designation-management.tsx b/src/routes/admin/designation-management.tsx new file mode 100644 index 0000000..7f8f475 --- /dev/null +++ b/src/routes/admin/designation-management.tsx @@ -0,0 +1 @@ +export { default } from './designation'; diff --git a/src/routes/admin/index.tsx b/src/routes/admin/index.tsx index 20726e2..3c6772e 100644 --- a/src/routes/admin/index.tsx +++ b/src/routes/admin/index.tsx @@ -1,258 +1,160 @@ -import { For, onCleanup, onMount } from 'solid-js'; -import { A } from '@solidjs/router'; -import { Users, Building2, TrendingUp, CreditCard, Download, Eye, Pencil, Trash2 } from 'lucide-solid'; +import { For } from 'solid-js'; import AdminShell from '~/components/AdminShell'; -type StatDef = { - id: string; - label: string; - icon: any; - value: string; - 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', - }, +const kpis = [ + { title: 'Total Users', value: '12,458', delta: '+12.5%', note: '+1,245 from last month', tone: 'up' as const, icon: 'US' }, + { title: 'Active Companies', value: '1,234', delta: '+8.2%', note: '+94 from last month', tone: 'up' as const, icon: 'CP' }, + { title: 'Open Leads', value: '847', delta: '-3.1%', note: '-27 from last month', tone: 'down' as const, icon: 'LD' }, + { title: 'Credits Purchased', value: '$45,890', delta: '+18.7%', note: '+$7,234 from last month', tone: 'up' as const, icon: 'CR' }, ]; -type RecentLead = { - title: string; - customer: string; - category: string; - budget: string; - status: 'Active' | 'Pending' | 'Negotiating'; -}; +const trendSeries = [62, 70, 81, 75, 88, 102]; +const revSeries = [42000, 48000, 55000, 51000, 62000, 69000]; +const maxAmount = 80000; -const RECENT_LEADS: RecentLead[] = [ - { title: 'Website Redesign Project', customer: 'TechCorp Inc.', category: 'Developers', budget: '$15,000', status: 'Active' }, - { title: 'Corporate Event Photography', customer: 'EventMasters LLC', category: 'Photographer', budget: '$3,500', status: 'Pending' }, - { title: 'Marketing Campaign Design', customer: 'BrandHub Co.', category: 'Graphics Designer', budget: '$8,200', status: 'Active' }, - { title: 'Social Media Management', customer: 'GrowthStart', category: 'Social Media Manager', budget: '$5,000', status: 'Negotiating' }, +const leadRows = [ + { title: 'Corporate Event Photographer', customer: 'Bright Media', category: 'Photography', budget: '$3,500', status: 'New', priority: 'High' }, + { title: 'Wedding Makeup Artist', customer: 'Aster Weddings', category: 'Makeup Artist', budget: '$1,800', status: 'In Review', priority: 'Medium' }, + { title: 'SAT Batch Tutor', customer: 'EduPath', category: 'Tutors', budget: '$2,300', status: 'Assigned', priority: 'Low' }, + { 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
; -} - -function StatCard(props: { def: StatDef }) { - const Icon = props.def.icon; - - return ( -
-
-
- -
-
- {props.def.deltaPositive ? '↗' : '↘'} - {props.def.delta} -
-
-

{props.def.label}

-

- {props.def.value} -

-

{props.def.subtext}

-
- ); -} - export default function AdminDashboard() { - const handleExport = () => window.print(); - return (
-
-
-

Dashboard Overview

-

- Welcome back! Here's what's happening with your platform today. -

-
- -
- -
- {(def) => } -
- -
-
-

Leads Trend

-

Monthly leads performance overview

-
- -
-
- -
-

Revenue Overview

-

Monthly revenue vs expenses comparison

-
- -
-
-
- -
-
+
+
-

Recent Leads

-

Latest customer inquiries and opportunities

+

Dashboard Overview

+

Welcome back! Here's what's happening with your platform today.

- + +
+
+ +
+ + {(item) => ( +
+
+
{item.icon}
+ + {item.delta} + +
+

{item.title}

+

{item.value}

+

{item.note}

+
+ )} + +
+ +
+
+

Leads Trend

+

Monthly leads performance overview

+
+
+
+ {() =>
} +
+ +
+
+ {(month) => {month}} +
+
+
+ +
+

Revenue Overview

+

Monthly revenue vs expenses comparison

+
+
+
+ {() =>
} +
+
+ + {(value) => ( +
+
+
+ )} + +
+
+
+ {(month) => {month}} +
+
+
+
+ +
+
+
+

Recent Leads

+

Latest customer inquiries and opportunities

+
+
-
- +
+
- - - - - - - + + + + + + + + - - {(lead) => ( - - - - - - - + + + + + + + )}
Lead TitleCustomerCategoryBudgetStatusActions
Lead TitleCustomerCategoryBudgetStatusPriorityAction
{lead.title}{lead.customer}{lead.category}{lead.budget} - {lead.status} - -
- - - -
+ + {(row) => ( +
{row.title}{row.customer}{row.category}{row.budget}{row.status}{row.priority} +