admin

Please wait...

App Folder Structure

folder_open Project Structure Overview

Understanding the folder structure is key to effectively working with MediDash. The project is organized into logical modules and directories to ensure clarity, scalability, and ease of maintenance. Below is a detailed breakdown of the app folder in the starter template.

  • folder src/
    • folder app/
      • folder admin/ - Contains components, services, and routing for the admin module.
      • folder authentication/ - Handles authentication-related pages and logic.
      • folder config/ - Contains theme configuration services.
      • folder core/ - Includes core services, guards, and models shared across the application.
      • folder doctor/ - Contains components, services, and routing for the doctor module.
      • folder layout/ - Defines the main layout components like header, sidebar, and footer.
      • folder patient/ - Contains components, services, and routing for the patient module.
      • folder shared/ - Includes shared components, directives, and pipes used across modules.
      • code app.component.html - The main HTML template for the root component.
      • style app.component.scss - The main SCSS stylesheet for the root component.
      • description app.component.ts - The root component that bootstraps the entire application.
      • settings app.config.ts - The main application configuration file.
      • settings app.routes.ts - Defines the main application routes.
info
Architectural Insight: Each feature module (admin, doctor, patient) is designed to be self-contained and lazy-loaded, which improves the application's performance and scalability.

info_outline Module Descriptions

  • folder_special
    Admin Module

    This module contains all the pages and functionalities exclusive to the administrator role. It is a self-contained module with its own routing and components.

  • folder_special
    Doctor Module

    This module is dedicated to the doctor role and includes all doctor-specific pages, components, and functionalities. It is also a self-contained module.

  • folder_special
    Patient Module

    This module caters to the patient role, providing all patient-related pages and functionalities in an organized and self-contained manner.

  • security
    Authentication Module

    This module handles all aspects of user authentication, including sign-in, sign-up, password reset, and other related pages.

  • settings_applications
    Config Module

    This module contains the theme configuration service, allowing you to easily customize the look and feel of the template, such as switching between light and dark modes.

  • layers_clear
    Core Module

    The Core Module is where you define common services, models, interceptors, and guards that are shared across the entire application. Services provided here are instantiated only once.

Config Folder

settings Theme Configuration

All theme-related configuration changes can be made in a single file: config.service.ts, located in the config folder.

warning
Important: Theme-related data is stored in the browser's localStorage. After making changes to the config file, please clear your browser data first.
Configuration Structure

this.configData = {
    layout: {
        variant: 'light', // options: light | dark
        theme_color: 'white', // options: white, cyan, black, purple, orange, green, red
        sidebar: {
            collapsed: false, // options: true | false
            backgroundColor: 'light', // options: light | dark
        },
    },
};
Configuration Options
Option Description
variant Set to light for light template layout or dark for dark template layout.
theme_color Choose from multiple theme options: white, black, purple, blue, cyan, green, orange, red.
collapsed Set to true for collapsed sidebar or false for expanded sidebar.
backgroundColor Set sidebar background color to light for white background or dark for dark background.

Core Folder

layers Core Module Structure

The Core Module contains common services, models, interceptors, and guards. Services defined in this module are instantiated once and shared across the application.

Folder Structure
core/
guard/
interceptor/
models/
service/
index.ts
Component Descriptions
Component Description
guard Contains authentication and import guards. Files include auth.guard.ts and module-import.guard.ts.
interceptor Contains interceptor files for error handling, JWT authentication, and a fake-backend.ts file for dummy data.
models Contains all enum and class files for USER, ROLE, and CONFIG entities.
service Contains all singleton services that are instantiated once and shared across the application.

Layout Folder

dashboard Layout Module Structure

The Layout Module contains all components related to the application's user interface structure, including headers, footers, sidebars, and loading indicators.

Folder Structure
layout/
app-layout/
footer/
header/
page-loader/
right-sidebar/
sidebar/
Component Descriptions
Component Description
app-layout Used to separate authentication pages from main content pages. Contains auth-layout and main-layout components.
footer Contains the footer component code for the application.
header Contains the header or navbar component code for the application.
page-loader Contains the loading spinner component code. Uses ngx-spinner for loading indicators.
right-sidebar Contains the configuration sidebar component code.
sidebar Contains the main sidebar menu component code.

Folder Structure

folder Module Folder Structures

Each module in the application has its own specific folder structure to organize related components and functionality.

person Admin Module

admin/
accounts/
ambulance/
appointment/
audit-logs/
blood-bank/
dashboard/
departments/
discharge/
doctors/
documents-consent/
emr/
equipment/
feedback-complaints/
human-resources/
insurance/
inventory/
laboratory/
notifications/
operation-theatre/
ot-inventory/
patient-transfer/
patients/
payroll/
pharmacy/
quality-compliance/
radiology/
records/
reports-analytics/
roles-permissions/
room/
staff/
system-settings/
telemedicine/
user-management/
visitor-management/
waste-management/
admin.routes.ts

local_hospital Doctor Module

doctor/
analytics/
appointments/
billing/
certificates/
consultations/
doc-dashboard/
doctors/
inventory-requests/
lab-reports/
patient-records/
patients/
prescriptions/
referrals/
settings/
surgeries/
tasks/
telemedicine/
doctor.routes.ts

accessible Patient Module

patient/
appointments/
billing/
documents/
emergency/
family-members/
feedback/
health-monitoring/
health-plans/
insurance/
lab-reports/
lifestyle/
medical-records/
notifications/
patient-dashboard/
prescriptions/
settings/
telemedicine/
vaccinations/
patient.routes.ts

code Project Root Structure

The project root contains all essential configuration files and the main source code directory.

Src Folder Structure
src/
app/
app.component.html
app.component.scss
app.component.spec.ts
app.component.ts
app.config.ts
app.routes.ts
assets/
.gitkeep
environments/
environment.prod.ts
environment.ts
favicon.ico
index.html
karma.conf.js
main.ts
polyfills.ts
styles.css
test.ts
tsconfig.app.json
tsconfig.spec.json
tslint.json
Root Folder Structure
main/
e2e/
src/
app.e2e-spec.ts
app.po.ts
protractor.conf.js
tsconfig.e2e.json
node_modules/...
src/...
.editorconfig
angular.json
browserlist
package.json
package-lock.json
README.md
tsconfig.json
tslint.json

style SCSS Folder Structure

The SCSS folder contains all styling resources organized in a modular structure for maintainability.

scss/
components/
fonts/
layouts/
override/
skins/
_components.scss
_custom.scss
_helpers.scss
_mixin.scss
_variable.scss
style.scss