Demostration/Showcase of Proctu - React Next.js Admin Dashboard Template is built through SSG(Static Site Generation). We are not using Node server to demonstrate. You can use Proctu for your project, it compatible with Both SSR & SSG.
This code is created using Next.js App Router. More info visit https://nextjs.org/docs/app

Overview and Introduction

Template Name: Proctu - React Next.js Admin Dashboard Template

Version: 2.0.0

Created On: 07 May 2025

Updated On: 07 May 2025

Author: LettstartDesign

Email:support@lettstartdesign.com

Proctu is a versatile, powerful, and modern admin dashboard template designed to meet the needs of developers looking to create high-performance web applications. Built using modern technologies likeNext.js,Bootstrap 5,React, andAngular, Proctu provides a fully-featured, customizable, and scalable solution for building admin panels, dashboards, CRM systems, SaaS applications, eCommerce backends, and more.

What is Proctu?

Proctu is not just another admin dashboard template; it’s an all-in-one solution for creating fully functional, responsive, and interactive admin interfaces. With Proctu, developers can quickly build admin panels with clean code, modular components, and an intuitive user interface. It’s designed with an emphasis on performance, flexibility, and ease of use, making it ideal for both small projects and large enterprise applications.

One of the most significant features of Proctu is itsNext.js Admin Dashboard Template, which combines the power ofNext.jsfor server-side rendering (SSR) with an organized file-based routing system and a modular component structure. This enables developers to create faster, SEO-friendly applications with minimal setup.

Why Choose Proctu?

  • Optimized Performance:WithNext.js, Proctu ensures that pages load fast by utilizing features likestatic site generation (SSG)andincremental static regeneration (ISR). These technologies help optimize SEO and speed, making Proctu an ideal choice for performance-driven web applications.
  • Server-Side Rendering (SSR):SSR is supported out of the box, allowing developers to build dynamic pages that are fully rendered on the server before being sent to the client, improving load times and SEO.
  • Modular and Reusable Components:The ProctuNext.js Admin Dashboardis built with a modular architecture, where UI components are reusable and customizable, making it easy to create different types of pages like analytics dashboards, eCommerce admin panels, user management interfaces, and more.
  • Seamless Integration with Other Frameworks:In addition to theNext.js Admin Panel, Proctu offers templates inBootstrap 5,React, andAngular, giving you the flexibility to choose the best version for your tech stack.
  • Developer-Focused:The Proctu codebase is structured for developers by following best practices for scalability, maintainability, and collaboration. Whether you're a solo developer or part of a team, Proctu’s well-organized code helps streamline development and reduces the complexity of building robust applications.
  • Responsive Design:Proctu comes with built-in responsiveness, ensuring your admin dashboard looks and works perfectly across devices, from desktops to mobile phones. The template includes various layout options, all of which are mobile-friendly and customizable.
  • Extensive Documentation:Proctu includes detailed documentation, complete with setup instructions, code samples, customization guides, and troubleshooting tips. This makes it easier for developers to get up to speed and start building projects quickly.

What’s Inside the Proctu Dashboard?

Proctu comes with a variety of pre-designed pages and features that cater to a wide range of admin applications:

  • Dashboard Overview:A general-purpose dashboard with graphs, charts, and key metrics to give users quick access to important information.
  • Charts and Data Visualizations:Proctu includes various types of charts and visual components to display data, such as bar charts, line charts, pie charts, and more.
  • Tables and Data Grids:Proctu’s table component supports sorting, pagination, and custom styling, making it easy to display large sets of data in a user-friendly manner.
  • User Management:Features such as user registration, login, profile management, and password reset, all built into the template.
  • Forms and Inputs:Various forms for user input, including validation, checkboxes, radio buttons, and input fields.
  • UI Elements:Includes buttons, cards, icons, badges, and other essential UI elements to create a clean and interactive admin interface.
  • App Features:Proctu also caters to modern application needs by including ready-to-use app interfaces like:
    • Email Application:A built-in email client UI with inbox, read, and compose views, mimicking a real-world webmail experience.
    • Chat Application:A sleek chat interface with contact lists, conversation threads, and responsive design for collaboration tools or support systems.
    • Calendar App:A full-featured calendar for managing events and tasks, complete with month, week, and day views.
    • File Manager:Allows browsing, uploading, and managing files in a cloud-like UI, ideal for admin tools that require document handling.
  • Pre-Built Medical Dashboard Pages:Proctu is specifically designed with healthcare and medical admin systems in mind. It includes essential pages for managing hospital or clinic operations efficiently:
    • Patient List:View and manage a comprehensive list of patients with filtering, sorting, and action controls.
    • Patient Detail:Detailed profile page for each patient, showing personal information, medical history, visits, prescriptions, and more.
    • Doctor List:A complete directory of doctors with specialization, availability, and contact details.
    • Doctor Detail:In-depth view of doctor profiles including qualifications, experience, assigned patients, and schedules.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to use a component that can be helpful when you need to create something on the fly.

Thank you so much for choosing this template. Your comments and ratings would be highly appreciated. You have purchased this template so, you will get full support from us. We will update this template from time to time and we want to hear from you for future updates or complete new templates. If you have any questions that are beyond the scope of this document, feel free to raise a ticket at the Marketplace support portal.

By purchasing this template, you are assured with detailed documentation along with 1 Year Premium Support by our dedicated support team.


Dependencies

  • Node.js
  • Next.js
  • React Bootstrap
  • SaSS
  • Typescript

Key Features

  • Built with Next.js:Supports server-side rendering (SSR) and static site generation (SSG) for SEO-friendly and fast applications.
  • Fully Responsive:Mobile-first design, ensuring that the dashboard works smoothly across all screen sizes.
  • Modular and Scalable:Components are modular, reusable, and easy to extend for different use cases.
  • Customizable:Fully customizable design using Tailwind CSS (or SCSS in some versions) and multiple theme options.
  • Comprehensive Documentation:Step-by-step setup guides and detailed documentation for easy configuration.
  • Multiple Page Layouts:Proctu offers a variety of pre-designed pages such as dashboards, login forms, error pages, and more, all with a clean and modern layout.
  • UI Kit:Proctu comes with a complete UI kit, including buttons, cards, tables, modals, tooltips, and more, to quickly build and customize your admin interface.
  • Cross-Browser Compatibility:Works seamlessly across all modern browsers, including Chrome, Firefox, Safari, and Edge.
  • Security Features:Built-in authentication modules and protected routes, allowing you to quickly implement secure admin panels and dashboards.

Robust UI Components & Pages in Proctu

Proctu offers a rich set of40+ UI componentsand25+ pre-built pagestailored for enterprise dashboards and admin panels. Whether you are building a healthcare, SaaS, CRM, or analytics dashboard, Proctu provides everything you need out-of-the-box.

  • Fully functional sidebar navigation with nested menus
  • Top navbar featuring search, user menu, and notifications
  • Integrated chart libraries (ApexCharts, Chart.js) for beautiful data visualization
  • Advanced data tables with pagination, sorting, and filtering
  • Authentication pages: login, register, forgot password, reset password
  • Reusable form elements including input fields, dropdowns, toggles, and more
  • Essential UI elements: alerts, modals, tooltips, badges, progress bars, cards
  • Pre-built dashboard variations and multiple layout options

These elements help developers save development time and create robust, responsive admin interfaces without writing boilerplate code. The component library is fully responsive, modular, and optimized for modern frontend workflows.


Developer-Friendly Codebase

Built with developers in mind, Proctu offers:

  • Modular folder structure
  • SCSS-based styling for flexibility
  • Component reusability
  • Hook-based functional components (React/Next.js)
  • SEO-ready metadata structure

Performance & Optimization

In the Next.js version, Proctu benefits from:

  • Automatic code splitting
  • Static site generation (SSG)
  • Server-side rendering (SSR)
  • Fast refresh
  • Optimized images withnext/image
  • Built-in SEO optimization via<Head>

All of this ensures a fast, scalable, and production-ready admin dashboard.

Getting Started with Proctu Admin Dashboard

Getting started with the Proctu template is seamless. After downloading your preferred version—such as the Next.js Admin Dashboard Template—you’ll receive a full development environment structured for modern frontend workflows. Installation is straightforward and tailored to your tech stack.

Setup (Next.js Version)

  1. Install Node.js:Make sureNode.jsis installed on your system.
  2. Extract the Template Files:Unzip the package to your desired project directory.
  3. Navigate to Project Folder:
    cd proctu-nextjs-admin-dashboard
  4. Install Dependencies:
    npm install
    If there any vunerability issues. Ideally, it should not be, because we have fixed it otherwise Please runnpm audit fixor contact support team.
  5. Run Development Server:
    npm run dev

Now, your Next.js admin panel is live at http://localhost:3000.

This setup provides a live reload environment so changes you make to components are instantly reflected in the browser.

Project Structure – Proctu Next.js Admin Dashboard

Below is the folder structure you’ll find inside theproctu-nextjs-admin-dashboardtemplate. It’s organized for scalability and easy navigation.

proctu-nextjs-admin-dashboard/
├──	src/
│	│
│	├── app/
│	│   ├── chat/ (folder)
│	│   │   └── page.tsx              # Chat Page
│	│   ├── calendar/ (folder)
│	│   │   └── page.tsx              # Calendar Page
│	│   ├── ...                       # Other Feature Pages
│	│   ├── page.tsx                  # Dashboard Home Page
│	│   ├── layout.tsx                # Global Layout Wrapper
│	│   ├── authGuard.tsx             # Auth Guard for Protected Routes
│	│   └── api/
│	│       ├── appointment/route.ts  # Appointment API Route
│	│       ├── home/.../route.ts     # Home API Routes
│	│       └── email/route.ts        # Email API Route
│	│
│	├── components/
│	│   ├── shared/                   # Shared UI Components
│	│   ├── home/                     # Components for Home/Dashboard
│	│   ├── email/                    # Components for Email Module
│	│   └── ...                       # Other Feature-based Components
│	│
│	├── data/
│	│   └── [Fake Data Files]         # All Static/Fake Data Files
│	│
│	├── helpers/
│	│   ├── axios/                    # Axios Helper Functions
│	│   ├── jwt/                      # JWT Helper (not used in project)
│	│   └── fake-backend/             # Simulated Backend (for reference only)
│	│
│	├── interfaces/
│	│   └── *.ts                      # All TypeScript Interface Definitions
│	│
│	├── store/
│	│   ├── reducers/
│	│   │   ├── appointment.ts
│	│   │   ├── assignDoctor.ts
│	│   │   ├── ...
│	│   ├  └── email.ts
│	│   ├── combineReducer.ts
│	│   └── store.ts                  # Redux Toolkit Configuration
│	
├── public/                         # Static Files (images, assets)
│   └── styles/                     # Global & Module Stylesheets
└── next.config.js                  # Next.js Configuration
												

Theme Colors

$blue: #7888FC;
$indigo: #564ab1;
$purple: #9C6EFC;
$pink: #e83e8c;
$red: #EE6E83;
$orange: #FF4D00;
$yellow: #ffaf0f;
$green: #007A64;
$teal: #1ce1ac;
$cyan: #25c2e3;

Libraries

  • @ckeditor/ckeditor5-build-classic
  • @ckeditor/ckeditor5-react
  • @fullcalendar/bootstrap5
  • @fullcalendar/common
  • @fullcalendar/daygrid
  • @fullcalendar/interaction
  • @fullcalendar/list
  • @fullcalendar/react
  • @fullcalendar/timegrid
  • @hookform/resolvers
  • @reduxjs/toolkit
  • alertifyjs
  • apexcharts
  • axios
  • axios-mock-adapter
  • bootstrap
  • chart.js
  • dragula
  • echarts-for-react
  • formik
  • jspdf
  • jspdf-autotable
  • metismenujs
  • moment
  • next
  • photoswipe
  • react
  • react-apexcharts
  • react-bootstrap
  • react-bootstrap-daterangepicker
  • react-csv
  • react-data-table-component
  • react-date-range
  • react-datepicker
  • react-dom
  • react-draggable
  • react-dragula
  • react-dropzone
  • react-feather
  • react-hook-form
  • react-idle-timer
  • react-nestable
  • react-range-slider-input
  • react-redux
  • react-select
  • react-toastify
  • redux
  • redux-persist
  • redux-thunk
  • smooth-scrollbar
  • smooth-scrollbar-react
  • sweetalert2
  • swr
  • uuid
  • yup
Change Log

2.0- 20 April, 2025

  • New implementation using Next.js 15.2.0
  • Change into Bootstrap version 5.3.0
  • Changed to latest React-Bootstrap
  • Bug Fixes

1.1- 2 September, 2022

  • Chat and Calendar Pages Added
  • Change into Bootstrap version 5.2.0
  • Changed to latest React-Bootstrap
  • Replaced Redux Saga With Redux Thunk

1.0- 11 October, 2021

  • Initial release

Support

We are committed to our customers and support is at up most priority. If you have any question, issue withHUGO, please feel free to contact us via emailsupport@lettstartdesign.comor generate ticket on our portal.

What's includes
  • Answering your questions or problems regarding the template.
  • Giving or Solving bugs report by you.
What's not includes
  • Customization Work
  • Support for third party plugins.
  • Support or guide how to integrate with backend technologies(like php, java, .net, etc).