# Angular Clarity Boilerplate

This project is an Angular boilerplate application that uses the [Clarity Design System](https://clarity.design/) by VMware. It serves as a starter template for building modern, responsive, and feature-rich web applications.

This boilerplate is pre-configured with a standard project structure and includes essential modules and components to kickstart your development process.

---

## 🚀 Features

* **Angular:** The latest version of the Angular framework.
* **Clarity Design System:** A comprehensive set of UX guidelines, HTML/CSS components, and Angular components.
* **Responsive Layout:** A responsive navigation and layout structure.
* **Scalable Architecture:** A well-organized and scalable project structure.
* **Theming:** Easily customizable themes (light and dark).

---

## 🛠️ Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

### Prerequisites

Make sure you have [Node.js](https://nodejs.org/) and the [Angular CLI](https://angular.io/cli) installed on your system.

```bash
npm install -g @angular/cli

## Installation

Install the dependencies:
npm install

Running the Application
Run the following command to start the development server:
ng serve

The app will automatically reload if you change any of the source files.


## DEPENDENCIES

This project includes the following main dependencies:

@angular/animations: The Angular animations library.
@angular/common: Commonly needed services, pipes, and directives.
@angular/compiler: The Angular template compiler.
@angular/core: Core Angular framework.
@angular/forms: Angular's form validation and handling library.
@angular/platform-browser: Everything needed to run Angular in a web browser.
@angular/router: The Angular router for navigation.
@cds/core: Clarity Design System core components.
@clr/angular: Angular components for Clarity.
@clr/ui: HTML/CSS components for Clarity.
rxjs: Reactive extensions for JavaScript.
zone.js: A signaling mechanism for Angular that allows it to detect when to run change detection.


📂 Project Structure
/
├── .vscode/                 # VSCode settings
├── node_modules/            # Node.js modules
├── src/                     # Application source code
│   ├── app/                 # Application components and modules
│   │   ├── core/            # Core module (singleton services, guards, etc.)
│   │   ├── shared/          # Shared module (common components, pipes, etc.)
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   └── app.module.ts
│   ├── assets/              # Static assets (images, icons, etc.)
│   ├── environments/        # Environment-specific configuration
│   ├── index.html           # Main HTML file
│   ├── main.ts              # Main entry point
│   └── styles.scss          # Global styles
├── .editorconfig            # Editor configuration
├── .gitignore               # Git ignore file
├── angular.json             # Angular CLI configuration
├── package.json             # Project dependencies and scripts
├── README.md                # This README file
└── tsconfig.json            # TypeScript configuration


---

## ✅ What’s already built in this codebase (with file locations)

### Authentication & Login
- Login page (UI + logic):
  - src/app/modules/login/login-page/login-page.component.html
  - src/app/modules/login/login-page/login-page.component.ts
  - src/app/modules/login/login-page/login-page.component.spec.ts
- Login routing + module:
  - src/app/modules/login/login-routing.module.ts
  - src/app/modules/login/login.module.ts
- Auth services:
  - src/app/services/api/login.service.ts
  - src/app/services/auth_guard.service.ts
  - src/app/services/jwt.interceptor.ts
- Account flows:
  - Forgot/reset password: src/app/modules/login/forgotresetpassword/forgotresetpassword.component.html
  - Forgot/reset password (alt): src/app/modules/login/forgotresetpassword1/forgotresetpassword1.component.html
  - Email verification: src/app/modules/login/emailverification/emailverification.component.{ts,html}
  - Add guest: src/app/modules/login/addguest/addguest.component.html
  - About work: src/app/modules/login/about-work/about-work.component.{ts,html}

### Shell, Layout, Navigation (Menus/Sidebar/Topbar)
- Application shell and layout (includes navbar/sidebar containers):
  - src/app/modules/main/layout/layout.component.{ts,html,scss}
- Main module + routing:
  - src/app/modules/main/main.module.ts
  - src/app/modules/main/main-routing.module.ts
- Menu models and admin menu management:
  - Models: src/app/models/builder/Rn_Main_Menu.ts, src/app/models/builder/Rn_Sub_Menu.ts, src/app/models/builder/Rn_Fb_Header.ts
  - Services: src/app/services/admin/menu-register.service.ts, src/app/services/admin/menu-group.service.ts, src/app/services/admin/menumaintance.service.ts
  - Components (CRUD):
    - src/app/modules/main/admin/menu-register/* (add/edit/all/readonly)
    - src/app/modules/main/admin/menu-group/* (all/edit/read-only)
    - src/app/modules/main/admin/menumaintance/menumaintance.component.{ts,html}
    - src/app/modules/main/admin/submenu/submenu.component.{ts,html}
    - src/app/services/api/realnet-menu.service.ts

### User & Access Management
- User management (list/add/edit/profile/settings, groups):
  - src/app/modules/main/admin/user/user.component.{ts,html}
  - src/app/modules/main/admin/usermaintance/usermaintance.component.{ts,html}
  - src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.{ts,html}
  - src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.{ts,html}
  - src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts
  - src/app/modules/main/admin/profile-setting/profile-setting.component.html
  - Services: src/app/services/admin/usermaintance.service.ts, src/app/services/admin/usergrpmaintaince.service.ts, src/app/services/admin/user-profile.service.ts, src/app/services/admin/user-registration.service.ts
- Access types / permissions:
  - src/app/modules/main/admin/accesstype/accesstype.component.{ts,html}
  - src/app/services/admin/accesstype.service.ts
  - Guard: src/app/services/auth_guard.service.ts

### System Administration & Configuration
- System parameters, health, logs, connectors, webhooks:
  - System parameters: src/app/modules/main/admin/systemparameters/systemparameters.component.html; service: src/app/services/admin/sysparameter.service.ts
  - Health checkup: src/app/services/admin/health-checkup.service.ts
  - Session logger UI: src/app/modules/main/admin/sessionlogger/sessionlogger.component.html; service: src/app/services/admin/sessionlogger.service.ts
  - Connectors & mapping: src/app/services/admin/sure-connector.service.ts, src/app/services/admin/connector-mapping.service.ts
  - Outgoing webhooks: src/app/services/admin/outgoingwebhook.service.ts
  - Audit reporting: src/app/services/admin/auditreport.service.ts; API: src/app/services/api/audittrail.service.ts
  - Deployment profile: src/app/services/admin/deploymentprofile.service.ts

### Foundation (FND) and Data Management
- Token registry:
  - src/app/modules/main/fnd/Token_registery/Token_registery.component.{ts,html}
  - src/app/modules/main/fnd/Token_registery/Token_registery.service.ts
- API registry (CRUD + lines):
  - src/app/modules/main/fnd/apiregistery/apiregistery.component.{ts,html}
  - src/app/modules/main/fnd/apiregistery/allapiregistery/allapiregistery.component.{ts,html}
  - src/app/modules/main/fnd/apiregistery/Apiregisteryline/Apiregisteryline.component.{ts,html}
- Sequence generator:
  - src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.{ts,html}
- Extensions:
  - src/app/modules/main/fnd/extension/* (add/edit/all/components)
- Document master:
  - src/app/modules/main/admin/documentmaster/documentmaster.component.{ts,html}
- Data management (bulk import, mapping rules):
  - Bulk import: src/app/modules/main/datamanagement/bulkimport/**/*.{ts,html}
  - Mapping rules: src/app/modules/main/datamanagement/mappingrule/**/*.{ts,html}
  - Services: src/app/services/fnd/bulkimport.service.ts, src/app/services/fnd/datamanagement.service.ts

### Reporting & Dashboards
- Report builder and runner (multiple generations):
  - Builder: src/app/modules/main/builder/report-build/**/*.{ts,html}
  - Builder v2: src/app/modules/main/builder/report-build2/**/*.{ts,html}
  - Runner: src/app/modules/main/builder/report-runner/**/*.{ts,html}
  - Dashboard (new + runner): src/app/modules/main/builder/dashboardnew/**/*, src/app/modules/main/builder/dashboardrunner/**/*
  - Services: src/app/services/api/report-builder.service.ts, src/app/services/builder/*.ts

### Query (Super Admin)
- Query management:
  - src/app/modules/main/superadmin/query/**/*.{ts,html}
  - src/app/modules/main/superadmin/queryadd/queryadd.component.ts
  - src/app/modules/main/superadmin/queryedit/queryedit.component.ts
  - API: src/app/services/api/query-runner.service.ts

### Shared Utilities
- Pipes:
  - src/app/pipes/*.ts (e.g., search-filter.pipe.ts, thai-date*.pipe.ts, time-pipe.pipe.ts, sanitize.pipe.ts)
- Notifications/Alerts services:
  - src/app/services/notification.service.ts, src/app/services/alerts.service.ts, src/app/services/fnd/alerts.service.ts
- CSV/Excel helpers:
  - src/app/services/csv.service.ts, src/app/services/excel.service.ts
- i18n assets:
  - src/assets/i18n/en.json, src/assets/i18n/hi.json
- App-level routing + module:
  - src/app/app-routing.module.ts
  - src/app/app.module.ts

---

## Quick Start (recap)
1. npm install -g @angular/cli
2. npm install
3. ng serve

This project already includes: authentication flow, guarded routes, admin menus and access, user and group management, system configuration screens, FND (token/api registry, sequences, extensions), data management (bulk import, mapping rules), reporting and dashboards, super-admin queries, shared utilities (pipes, alerts, CSV/Excel), i18n scaffolding, and a Clarity-based layout and navigation.