Proctu Documentation
Proctu is a premium admin dashboard template built with TypeScript on top of Angular, which was styled using Bootstrap 5 and SCSS. The template includes many handcrafted components, UI elements, and ready-to-use views and pages, and was initially designed with a Hospital Admin in mind. The product is fully responsive and was tested in all modern browsers and devices.
These documentation pages describe the structure and content of the template and help to customize and configure the product according to one’s needs. Please go over the information before starting to build your application. The best results would be achieved if one has a basic understanding of TypeScript, Sass, CSS, HTML, Bootstrap 5, and Angular.
The product can be used for building a medical administration panel, doctor and patient database interface, SaaS dashboard, internal administration panel for an e-commerce, or other similar projects. The code base is well-organized and ready to be explored, forked, or used as is – without having to waste time searching for specific files.
What is Proctu?
Proctu was initially conceived as a Hospital Admin template. The theme contains dedicated pages for Doctor and Patient lists and overview, a hospital dashboard, and a general layout that is suitable for everyday hospital administration tasks. However, if you take a closer look, you will see that it is actually a collection of Angular components organized with Bootstrap 5.
You can utilize Proctu’s flexibility to build a SaaS dashboard, a custom admin interface, hospital management solution, e-commerce, or any other application that involves backend administration. The folder structure is organized in a common way so that you can quickly locate the files that you need to customize or implement.
Built for Hospital Admin, but Not Locked to It
The Doctor and Patient modules are obvious choices for a healthcare product, but the sidebar, tables, forms and charts don't care what data you throw at them — teams have used the same building blocks for plenty of other admin panels.
Hospital Admin
Track doctors, patients, appointments and the day-to-day numbers a hospital runs on, all from one screen.
SaaS Dashboard
Borrow the widgets, charts and tables and turn them into the admin panel your SaaS product needs.
Custom Admin Panel
Delete the pages you don't want, keep the layout and components, and build out your own screens.
E-commerce Panel
The tables, invoice and pricing pages give you a decent head start on an orders-and-catalog backend.
Built With
Proctu is implemented in a small set of carefully maintained open-source libraries, all of which are up-to-date and do not contain any abandoned dead ends. The only framework used is Angular. Below are versions taken straight from package.json.
Browser Support
Proctu has been tested on modern desktop and mobile browsers (Chrome, Firefox, Safari, Edge) and works great on all these platforms. Thanks to Bootstrap 5's responsive design, the interface is optimized for small mobile screens as well as large desktop displays. The application's layout, typography, and all components are thoroughly tested to ensure they appear and behave consistently across different devices and screen resolutions.
Getting Started
All you need is Node.js version 18 or newer and Angular CLI. There is no backend or database to install. Everything is built to be used against local fake data until you are ready to connect to your own API.
Open the project folder
Unzip / navigate into proctu-angular-22.
cd proctu-angular-22
Install dependencies
Installs every runtime and dev dependency listed in package.json.
npm install
Run the dev server
Open http://localhost:4200 in your browser.
npm start
Build for production
Outputs an optimized, production-ready bundle to dist/.
npm run build
Folder Structure
Every single screen and shared element in the UI is placed exactly where one would expect to find it. Feature pages are organized by domain and layout chrome (sidebar, topbar, menu) is separated from the page content to let a new contributor know where a particular one belongs at first glance.
├── account/ # Login, signup, password reset, error pages
├── core/ # Guards, interceptors, models, services
│ ├── guards/ # Route guards
│ ├── helpers/ # HTTP interceptors
│ └── services/ # AuthService and friends
├── layouts/ # Vertical layout, sidebar, topbar, menu
│ └── shared/menu/menu.ts # Sidebar menu definition
├── pages/ # All feature pages (lazy-loaded)
│ ├── dashboards/ # Multi-purpose hospital dashboard
│ ├── doctor/ # Doctor list & overview
│ ├── patient/ # Patient list & overview
│ ├── apps/ # Calendar, Chat, Email, File Manager, Invoice, Pricing
│ ├── components/ # Bootstrap UI building blocks
│ ├── advanced/ # Drag & drop, nestable, sweet alert, alertify…
│ ├── forms/ # Elements, layouts, validation, editor, upload
│ ├── tables/ # Basic, advanced, sort, export
│ ├── charts/ # ApexCharts, Chart.js, ECharts
│ └── icons/ # Boxicons, Feather, MDI, Font Awesome
├── shared/ # Directives, pipes, widgets, fake data
└── types/ # Ambient type declarations
Colors & SCSS Variables
The theme colors in Proctu are implemented as Bootstrap 5 Sass variables, which live in src/assets/scss/_variables.scss.
Modify the values there, and all buttons, badges, charts, alerts, and the rest of the components will update automatically, because everything is built dynamically from these variables.
Editing a color
$blue: #7888fc; // used as $primary
$purple: #9c6efc; // used as $secondary
$green: #34c38f; // used as $success
The default font is set to the browser’s system font stack via $font-family-sans-serif variable ( system-ui, -apple-system, "Segoe UI", Roboto…), which is good for performance. No Google Font requests = happy Core Web Vitals.
Layout & Sidebar Menu
Proctu has a single layout — a vertical sidebar collapsed on small screens, a topbar with a search field, notifications, and user dropdown, and a main content area, which displays the active route. Less code is better, so we’ve only implemented one cohesive layout, rather then multiple poor-mans-layouts.
Adding a menu item
The sidebar is built from a single object configuration array — edit src/app/layouts/shared/menu/menu.ts and sidebar updates itself on the fly, including the sub-items collapse/expand functionality via MetisMenu.
label: 'Doctor',
icon: 'bx bx-user',
link: 'javascript:void(0)',
subItems: [
{ label: 'List', link: 'doctor/list' },
{ label: 'Overview', link: 'doctor/overview/D-00001' }
]
}
Pages & Modules
Every page below is in fact a working Angular Standalone Component — there is no mockups here. Preview all of them live on the preview page.
🏥 Hospital Admin
📦 Apps
🔐 Authentication
📝 Forms
📊 Tables & Charts
🎨 Icons
UI Components
A complete Bootstrap 5 component set plus advanced widgets for real admin workflows, each of which is a standalone Angular component that can be plugged directly into a new page.
Dependencies
The packages Proctu is built upon, pulled directly from this project's package.json.
Runtime dependencies
| Package | Used for |
|---|---|
| @angular/core | Angular framework core |
| @angular/common, forms, router, animations, platform-browser | Angular framework modules |
| @angular/localize | i18n support |
| @angular-slider/ngx-slider | Range slider component |
| @ng-bootstrap/ng-bootstrap | Angular-native Bootstrap widgets |
| bootstrap | CSS / layout framework |
| @ckeditor/ckeditor5-angular | Rich text editor |
| @fullcalendar/angular, core, bootstrap5 | Calendar app |
| apexcharts / ng-apexcharts | Charts |
| chart.js | Charts |
| echarts / ngx-echarts | Charts |
| feather-icons | Icon set |
| flatpickr / angularx-flatpickr | Date & time picker |
| file-saver | Client-side file downloads |
| metismenujs | Collapsible sidebar menu |
| moment | Date handling |
| ng-click-outside | Click-outside directive |
| ng2-nouislider / nouislider | Range slider |
| ngx-dropzone | Drag & drop file upload |
| ngx-owl-carousel-o | Carousel |
| pdfmake | PDF table export |
| xlsx | Excel table export |
| photoswipe | Image gallery / lightbox |
| session-expiration-alert | Session timeout warning |
| smooth-scrollbar | Custom scrollbar |
| sortablejs | Drag & drop lists (Advanced UI) |
| sweetalert2 | Alert / confirm dialogs |
| alertifyjs | Toast notifications |
| rxjs | Reactive extensions (Angular core) |
| tslib | TypeScript runtime helpers |
Dev dependencies
| Package | Used for |
|---|---|
| @angular/cli | Project tooling & CLI |
| @angular/build | Angular's esbuild-based builder |
| @angular/compiler-cli | AOT compilation |
| typescript | Language / type checking |
| prettier | Code formatting |
| vitest | Unit testing |
| jsdom | DOM environment for tests |
src/assets/vendors/ rather than npm packages — no extra install step needed. Frequently Asked Questions
These are the questions that are asked over and over again by people who are interested in using Proctu. If your question is not listed here, the section it would be placed in (linked from the sidebar on the left) is likely the next best place to look.
General
What is Proctu, exactly?
Who is this template actually built for?
Which Angular version does Proctu run on?
/#/doctor/list rather than /doctor/list). TypeScript 6 and the newer @angular/build tooling are used for the build itself, so you shouldn't need any extra config to get it running. Does it actually work well on phones and tablets, or just "technically" respond?
Installation & Setup
What do I need installed before I start?
Do I have to use npm, or can I use something else?
npm@11.13.0 as its package manager, and that's what we'd recommend sticking with. pnpm and Yarn generally work too, but you'll likely need to delete package-lock.json first so they don't fight over the lockfile format. How do I actually get it running on my machine?
npm install which runs just once to install the project dependencies and the second is npm start that is used to launch the dev server and has the project open at http://localhost:4200 with hot reload What about deploying it — how do I build for production?
npm run build is all it takes. Angular's build tooling takes care of the minification, tree-shaking and bundling, and leaves you a deployable output in dist/. From there you can push it to any static host — Netlify, S3, Nginx, whatever you're already using.
Customization
I want to change the brand color. Where do I actually do that?
src/assets/scss/_variables.scss and change the $blue (primary) or $purple (secondary) variables — see Colors & SCSS above for the exact lines. Since the entire templates compile from these Sass variables, making just one change there causes buttons, badges, charts and alerts to update without you have to touch a single component file. How do I add a brand new page that isn't in the template already?
src/app/pages/, hook up its route in that feature's routing file, and then add a corresponding entry to src/app/layouts/shared/menu/menu.ts. Once that menu entry is present, the sidebar picks it up on its own, without any further ceremony. Can I rearrange or rename items in the sidebar?
menu.ts. Reorder the objects, rename labels, nest a subItems array under any entry and MetisMenu (the library used to drive the sidebar interactions) will take care of the rest automatically. What if I don't need half of these pages — can I just delete them?
src/app/pages/ with its own routing file, so deleting a folder, its route entry and its line in menu.ts is a clean removal, that won't leave anything broken elsewhere in the app. Components, Data & Charts
Which charting library should I use — and why are there three?
Is the data on the Doctor and Patient pages real, or just placeholders?
src/app/shared/fakedata, so no API calls take place anywhere in the project. This allows you to freely explore all pages with populated data before writing any backend requests. Licensing & Support
Can I actually sell or ship a commercial product built on Proctu?
I'm stuck on something — where do I go for help?
Support
Stuck on something not covered here? Try the inline comments in the relevant component first — most pages have a small note at the top of the .ts file with a few usage notes. For license- or purchase-related questions, use the support channel listed on the product page.
Ready to Build Your Hospital Admin?
Get full access to Proctu's source code, every page, and future updates.