PAGO Admin Dashboard
PAGO is the nerve center of the entire TecSolPro operation. Built with the latest Next.js 15 and React 19, it gives platform administrators a single interface to manage every aspect of the ecosystem: users, products, orders, sellers, vendors, courses, webinars, job listings, payments, and reports. We used Turbopack for fast builds, TanStack Query v5 for server state, Zustand for client state, and TanStack Table for high-performance data grids. The dashboard supports real-time updates via Socket.io and has deep analytics with ApexCharts. It's the most technically current project in the stack.
The Result
The operational backbone of the TecSolPro ecosystem, consolidating management of 28+ platform modules into a single, high-performance admin interface.
Tech Stack
6
Modules
9
Technologies
5
Highlights
Applications in This Project.
This project is built as 2 interconnected applications, each with a distinct responsibility.
PAGO
Next.js 15Admin dashboard frontend
pago-quize
NestJS / GraphQLQuiz engine backend
What It Does.
Next.js 15 + React 19 with Turbopack builds
TanStack Table for high-performance data grids
Real-time data updates via Socket.io
How It's Built.
Frontend
Services & Infra
Under the Hood.
Every module shipped in PAGO Admin Dashboard — what it does and the features it covers.
User & Role Management
Full user administration with role assignment, suspension, and activity tracking across all TecSolPro platforms.
What's Included
- User CRUD across all platforms
- Role assignment
- Account suspension / ban
- Activity log tracking
- Profile management
Products & Orders
Unified product catalog and order management across every marketplace — filterable, exportable, and linked to seller profiles.
What's Included
- Product approval queue
- Order lifecycle management
- Refund & cancellation processing
- Invoice management
- Exportable order reports
Sellers & Vendors
Seller registration approvals, commission config, payout records, and performance dashboards.
What's Included
- Seller registration approval
- Commission configuration per seller
- Payout record management
- Seller performance metrics
Analytics & Reports
ApexCharts and Recharts dashboards covering platform KPIs, revenue trends, user growth, and cohort data.
What's Included
- Revenue by period charts
- User growth metrics
- Top products & sellers
- Customer cohort data
- Exportable financial reports
Content Management
Manage courses, webinars, jobs, blog posts, and platform content from a single admin interface.
What's Included
- Course & webinar management
- Job board moderation
- Blog/news content CRUD
- Media library
- SEO settings (meta, sitemap)
Real-Time Dashboard
Socket.io-powered live updates across all dashboard modules — no page refresh needed.
What's Included
- Live order notifications
- Real-time user activity
- Socket.io-client v4 integration
- Framer Motion page transitions
The Interesting Parts.
Key architectural decisions, patterns, and technical details worth knowing.
Next.js 15 + React 19 with Turbopack — the most technically current project in the entire platform
TanStack Table v8 powers high-performance data grids capable of handling thousands of records with virtual scrolling
TanStack Query v5 for server state + Zustand for client state — clear separation of data responsibilities
ApexCharts and Recharts for deep analytics across users, orders, revenue, and platform KPIs
Framer Motion page transitions and Socket.io real-time updates keep the dashboard live without refresh
Key Pages & Routes.
The main routes built in the application.
/(auth)/loginAdmin login page
/(auth)/forgot-passwordPassword reset
/(dashboard)Main dashboard overview
/(dashboard)/usersUser management
/(dashboard)/productsProduct management
/(dashboard)/ordersOrder management
/(dashboard)/sellersSeller management
/(dashboard)/coursesCourse management
/(dashboard)/jobsJob board management
/(dashboard)/paymentsPayment records
/(dashboard)/reportsAnalytics & reports
Want Something Like This?
We've built systems like this before — we know the pitfalls, the patterns that work, and how to scope it correctly from day one.