ui

2025-09-26 08:49:03 +05:30 · 2025-09-26 08:49:03 +05:30 · 6d2a59da38
commit 6d2a59da38
903 changed files with 93754 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+.DS_Store
--- a/frontend/angular-clarity-master/.editorconfig
+++ b/frontend/angular-clarity-master/.editorconfig
@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/frontend/angular-clarity-master/.github/workflows/blank.yml
+++ b/frontend/angular-clarity-master/.github/workflows/blank.yml
@ -0,0 +1,17 @@
+name: CI
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Run a one-line script
+      run: echo Hello, world!
+    - name: Run a multi-line script
+      run: |
+        echo Add other actions to build,
+        echo test, and deploy your project.
--- a/frontend/angular-clarity-master/.gitignore
+++ b/frontend/angular-clarity-master/.gitignore
@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.angular/cache
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+
--- a/frontend/angular-clarity-master/.vscode/settings.json
+++ b/frontend/angular-clarity-master/.vscode/settings.json
@ -0,0 +1,2 @@
+{
+}
--- a/frontend/angular-clarity-master/BASICP1_UI_ENHANCEMENT.md
+++ b/frontend/angular-clarity-master/BASICP1_UI_ENHANCEMENT.md
@ -0,0 +1,86 @@
+# BasicP1 UI Enhancement Implementation
+
+This document explains the UI enhancement implementation for the BasicP1 component using reusable field components.
+
+## Overview
+
+The BasicP1 component has been enhanced to use reusable field components for different data types:
+- Text fields
+- Number fields
+- Phone number fields
+- Paragraph fields
+- Password fields
+- Textarea fields
+
+## Implementation Details
+
+### 1. Component Structure
+
+The component now uses a modern UI pattern with:
+- Hero section with gradient background
+- Consistent button styling using ThemeService
+- Responsive grid layout
+- Enhanced modals with better styling
+- Reusable field components for all form inputs
+
+### 2. Reusable Field Components
+
+Each field type now uses a dedicated component:
+- `<app-text-field>` for text inputs
+- `<app-number-field>` for number inputs
+- `<app-phone-field>` for phone number inputs
+- `<app-paragraph-field>` for paragraph inputs
+- `<app-password-field>` for password inputs
+- `<app-textarea-field>` for textarea inputs
+
+### 3. Field Configuration
+
+Each field component is configured using a FieldConfig object:
+```typescript
+{
+  name: string;        // Field name
+  label: string;       // Display label
+  type: string;        // Field type
+  required?: boolean;   // Is required?
+  placeholder?: string; // Placeholder text
+  // Type-specific properties
+}
+```
+
+### 4. Data Binding
+
+Field components use two-way data binding:
+```html
+<app-text-field 
+  [field]="{ name: 'username', label: 'Username', type: 'text' }"
+  [value]="formData.username"
+  (valueChange)="formData.username = $event">
+</app-text-field>
+```
+
+### 5. Benefits
+
+1. **Consistency**: All fields follow the same styling and behavior patterns
+2. **Maintainability**: Changes to one field type automatically apply everywhere
+3. **Reusability**: Components can be used across different forms and modules
+4. **Theme Support**: All components use ThemeService for consistent theming
+5. **Validation**: Built-in validation support for each field type
+6. **Accessibility**: Proper labeling and ARIA attributes
+
+## Styling
+
+The component uses the modern styling patterns established in the UI enhancement rules:
+- Gradient hero sections
+- Consistent button styling with ThemeService
+- Responsive design
+- Proper spacing and typography
+- Card-based layouts where appropriate
+
+## Future Enhancements
+
+To further improve the component:
+1. Implement the DynamicFormComponent for even easier form creation
+2. Add more field types as needed
+3. Implement form validation at the component level
+4. Add more business logic specific to each field type
+5. Enhance accessibility features
--- a/frontend/angular-clarity-master/README.md
+++ b/frontend/angular-clarity-master/README.md
@ -0,0 +1,52 @@
+# Angular-Clarity
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.4 [Angular.io](https://angular.io/) version 16.0.4 and [Clarity Design System](https://vmware.github.io/clarity/news) by VMware version 6.4.5/15.5.0
+
+## Install
+- clone project `git clone https://github.com/superpck/angular-clarity`
+- goto project folder `cd angular-clarity`
+- install necessary package `npm install`
+- Fix some vulnerabilities (if founded) `npm audit fix --force`
+- Run application with command `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+- or Run `ng serve --port 8080 --open` with another port and open web browser.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+- Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+- or `ng build --base-href ./ --prod --output-hashing none`
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+## Screenshot
+About Page
+![About](1.png)
+
+Login Page
+![Datagrid](6.png)
+
+Datagrid
+![Datagrid](2.png)
+
+Datagrid expand row and single action
+![expand](3.png)
+
+Modal
+![modal](4.png)
+
+sweetalert2
+![sweetalert2](5.png)
+
--- a/frontend/angular-clarity-master/REUSABLE_FIELD_COMPONENTS.md
+++ b/frontend/angular-clarity-master/REUSABLE_FIELD_COMPONENTS.md
@ -0,0 +1,155 @@
+# Reusable Field Components
+
+This document explains how to use the reusable field components created for consistent UI across different data types.
+
+## Overview
+
+We've created a set of reusable Angular components for different field types:
+- Text Field
+- Number Field
+- Phone Number Field
+- Paragraph Field
+- Password Field
+- Textarea Field
+
+Each component follows the same pattern and uses ThemeService for consistent styling.
+
+## Field Configuration
+
+All field components use a common `FieldConfig` interface:
+
+```typescript
+interface FieldConfig {
+  name: string;           // Unique field name
+  label: string;          // Display label
+  type: string;           // Field type (text, number, phone, etc.)
+  required?: boolean;     // Is field required?
+  placeholder?: string;   // Placeholder text
+  description?: string;   // Helper text
+  // Additional type-specific properties
+}
+```
+
+## Component Usage
+
+### 1. Text Field
+```html
+<app-text-field 
+  [field]="{ name: 'username', label: 'Username', type: 'text', required: true }"
+  [value]="formData.username"
+  (valueChange)="formData.username = $event">
+</app-text-field>
+```
+
+### 2. Number Field
+```html
+<app-number-field 
+  [field]="{ name: 'age', label: 'Age', type: 'number', min: 0, max: 120 }"
+  [value]="formData.age"
+  (valueChange)="formData.age = $event">
+</app-number-field>
+```
+
+### 3. Phone Field
+```html
+<app-phone-field 
+  [field]="{ name: 'phone', label: 'Phone Number', type: 'phone', pattern: '^\\+?[1-9]\\d{1,14}$' }"
+  [value]="formData.phone"
+  (valueChange)="formData.phone = $event">
+</app-phone-field>
+```
+
+### 4. Paragraph Field
+```html
+<app-paragraph-field 
+  [field]="{ name: 'description', label: 'Description', type: 'paragraph', rows: 6, showCharacterCount: true }"
+  [value]="formData.description"
+  (valueChange)="formData.description = $event">
+</app-paragraph-field>
+```
+
+### 5. Password Field
+```html
+<app-password-field 
+  [field]="{ name: 'password', label: 'Password', type: 'password', showStrengthIndicator: true }"
+  [value]="formData.password"
+  (valueChange)="formData.password = $event">
+</app-password-field>
+```
+
+### 6. Textarea Field
+```html
+<app-textarea-field 
+  [field]="{ name: 'comments', label: 'Comments', type: 'textarea', rows: 4 }"
+  [value]="formData.comments"
+  (valueChange)="formData.comments = $event">
+</app-textarea-field>
+```
+
+## Dynamic Form Component
+
+For easier usage, we've created a `DynamicFormComponent` that can render multiple fields based on configuration:
+
+```html
+<app-dynamic-form
+  [fields]="formFields"
+  [formData]="formData"
+  (formSubmit)="onSubmit($event)"
+  (formCancel)="onCancel()">
+</app-dynamic-form>
+```
+
+In your component:
+```typescript
+formFields = [
+  { name: 'name', label: 'Name', type: 'text', required: true },
+  { name: 'email', label: 'Email', type: 'text', required: true },
+  { name: 'age', label: 'Age', type: 'number', min: 0 },
+  { name: 'phone', label: 'Phone', type: 'phone' },
+  { name: 'bio', label: 'Bio', type: 'paragraph' }
+];
+
+formData = {};
+
+onSubmit(data) {
+  console.log('Form submitted:', data);
+  // Handle form submission
+}
+
+onCancel() {
+  console.log('Form cancelled');
+  // Handle form cancellation
+}
+```
+
+## Benefits of This Approach
+
+1. **Consistency**: All fields follow the same styling and behavior patterns
+2. **Maintainability**: Changes to one field type automatically apply everywhere
+3. **Reusability**: Components can be used across different forms and modules
+4. **Extensibility**: Easy to add new field types following the same pattern
+5. **Theme Support**: All components use ThemeService for consistent theming
+6. **Validation**: Built-in validation support for each field type
+7. **Accessibility**: Proper labeling and ARIA attributes
+
+## Adding New Field Types
+
+To add a new field type:
+
+1. Create a new component that extends `BaseFieldComponent`
+2. Implement the template and logic specific to that field type
+3. Add the component to the `FieldTypesModule`
+4. Register it in the `FieldFactoryService`
+5. Update the documentation
+
+## Styling
+
+All field components use the shared SCSS file which provides:
+- Consistent spacing and typography
+- ThemeService integration for colors
+- Responsive design patterns
+- Proper focus states and hover effects
+- Error state styling
+- Accessibility considerations
+
+The styling follows the same patterns used in the UI enhancement rules we established earlier.
--- a/frontend/angular-clarity-master/SECURITY.md
+++ b/frontend/angular-clarity-master/SECURITY.md
@ -0,0 +1,21 @@
+# Security Policy
+
+## Supported Versions
+
+Use this section to tell people about which versions of your project are
+currently being supported with security updates.
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 5.1.x   | :white_check_mark: |
+| 5.0.x   | :x:                |
+| 4.0.x   | :white_check_mark: |
+| < 4.0   | :x:                |
+
+## Reporting a Vulnerability
+
+Use this section to tell people how to report a vulnerability.
+
+Tell them where to go, how often they can expect to get an update on a
+reported vulnerability, what to expect if the vulnerability is accepted or
+declined, etc.
--- a/frontend/angular-clarity-master/THEME_CUSTOMIZATION_SUMMARY.md
+++ b/frontend/angular-clarity-master/THEME_CUSTOMIZATION_SUMMARY.md
@ -0,0 +1,338 @@
+# ð¨ Theme Customization System - Complete Implementation
+
+## Overview
+Successfully implemented a comprehensive dynamic theme customization system for the Angular Clarity project. Users can now customize colors, fonts, and appearance in real-time with immediate visual feedback.
+
+## â Completed Features
+
+### 1. Theme Service (`src/app/services/theme.service.ts`)
+- **Dynamic Theme Management**: Complete theme switching and customization
+- **Predefined Themes**: 6 built-in themes (Default Blue, Purple Magic, Nature Green, Dark Mode, Sunset Orange, Minimal Gray)
+- **Custom Theme Creation**: Users can create and save custom themes
+- **Theme Persistence**: Themes are saved in localStorage
+- **Import/Export**: Theme sharing and backup functionality
+- **Real-time Application**: Instant theme changes across the application
+
+### 2. Theme Customization Component (`src/app/modules/main/theme-customization/`)
+- **Modern UI**: Beautiful, intuitive customization interface
+- **Color Customization**: 
+  - Primary, Secondary, Accent colors
+  - Background and Surface colors
+  - Text colors with live preview
+  - Color picker with preset options
+- **Typography Customization**:
+  - Primary, Secondary, and Monospace fonts
+  - Live font preview
+  - 8 popular font options
+- **Advanced Settings**:
+  - Border radius adjustment
+  - Shadow intensity control
+- **Theme Management**:
+  - Predefined theme selection
+  - Custom theme creation
+  - Import/Export functionality
+  - Reset to default
+
+### 3. Dynamic CSS Variables (`src/styles/_theme-variables.scss`)
+- **CSS Custom Properties**: Real-time theme switching via CSS variables
+- **Theme-aware Components**: All components automatically adapt to theme changes
+- **Gradient Support**: Dynamic gradients based on theme colors
+- **Glassmorphism Effects**: Theme-aware glass effects
+- **Utility Classes**: Helper classes for theme-aware styling
+
+### 4. Dashboard Integration
+- **Theme Button**: Added "Customize Theme" button in welcome section
+- **Quick Action**: Theme customization in quick actions grid
+- **Navigation**: Easy access from main dashboard
+
+### 5. Routing & Module Integration
+- **Route**: `/cns-portal/theme-customization`
+- **Module**: Added to MainModule declarations
+- **Navigation**: Integrated with existing routing system
+
+## ð¯ Key Features
+
+### Real-time Theme Switching
+- **Instant Updates**: Changes apply immediately without page refresh
+- **CSS Variables**: Efficient theme switching using CSS custom properties
+- **Component Integration**: All components automatically adapt to theme changes
+
+### Comprehensive Customization
+- **Colors**: 6 color categories with live preview
+- **Fonts**: 3 font types with 8 options each
+- **Visual Effects**: Border radius, shadows, and glassmorphism
+- **Presets**: Quick color selection with predefined options
+
+### User Experience
+- **Intuitive Interface**: Clean, modern customization panel
+- **Live Preview**: See changes as you make them
+- **Theme Gallery**: Visual theme selection with previews
+- **Export/Import**: Share themes and backup customizations
+
+### Technical Implementation
+- **Service-based**: Centralized theme management
+- **Reactive**: RxJS observables for theme changes
+- **Persistent**: localStorage for theme persistence
+- **Scalable**: Easy to add new themes and customization options
+
+## ð File Structure
+
+```
+src/
+âââ app/
+â   âââ services/
+â   â   âââ theme.service.ts                    # Theme management service
+â   âââ modules/
+â       âââ main/
+â           âââ theme-customization/
+â           â   âââ theme-customization.component.ts
+â           â   âââ theme-customization.component.html
+â           â   âââ theme-customization.component.scss
+â           âââ main-page/
+â           â   âââ main-page.component.html    # Updated with theme buttons
+â           âââ layout/
+â           â   âââ layout.component.ts         # Theme service integration
+â           âââ main.module.ts                  # Component registration
+â           âââ main-routing.module.ts          # Route configuration
+âââ styles/
+    âââ _theme-variables.scss                  # Dynamic theme variables
+    âââ styles.scss                            # Updated imports
+```
+
+## ð¨ Predefined Themes
+
+### 1. Default Blue
+- **Primary**: #0ea5e9 (Sky Blue)
+- **Style**: Clean, professional
+- **Use Case**: Default enterprise theme
+
+### 2. Purple Magic
+- **Primary**: #8b5cf6 (Purple)
+- **Style**: Creative, modern
+- **Use Case**: Creative applications
+
+### 3. Nature Green
+- **Primary**: #10b981 (Emerald)
+- **Style**: Fresh, natural
+- **Use Case**: Environmental, health apps
+
+### 4. Dark Mode
+- **Primary**: #3b82f6 (Blue)
+- **Style**: Dark, modern
+- **Use Case**: Night mode, developer tools
+
+### 5. Sunset Orange
+- **Primary**: #f59e0b (Orange)
+- **Style**: Warm, energetic
+- **Use Case**: Creative, entertainment
+
+### 6. Minimal Gray
+- **Primary**: #6b7280 (Gray)
+- **Style**: Minimal, clean
+- **Use Case**: Professional, documentation
+
+## ð§ Technical Details
+
+### Theme Service API
+```typescript
+// Get available themes
+getThemes(): ThemeConfig[]
+
+// Get current theme
+getCurrentTheme(): ThemeConfig
+
+// Set theme
+setTheme(themeId: string): void
+
+// Create custom theme
+createCustomTheme(customTheme: Partial<ThemeConfig>): void
+
+// Export theme
+exportTheme(): string
+
+// Import theme
+importTheme(themeJson: string): boolean
+
+// Reset to default
+resetToDefault(): void
+```
+
+### CSS Variables
+```css
+:root {
+  --theme-primary: #0ea5e9;
+  --theme-secondary: #64748b;
+  --theme-accent: #8b5cf6;
+  --theme-background: #f8fafc;
+  --theme-surface: #ffffff;
+  --theme-text: #111827;
+  --theme-text-secondary: #6b7280;
+  --theme-font-primary: 'Inter', sans-serif;
+  --theme-font-secondary: 'Poppins', sans-serif;
+  --theme-font-mono: 'JetBrains Mono', monospace;
+  --theme-border-radius: 0.75rem;
+  --theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+```
+
+### Component Integration
+All components automatically use theme variables:
+- **Cards**: `background: var(--theme-surface)`
+- **Buttons**: `background: var(--theme-gradient-primary)`
+- **Text**: `color: var(--theme-text)`
+- **Borders**: `border-color: var(--theme-primary)`
+
+## ð Usage Instructions
+
+### For Users
+1. **Access Theme Customization**:
+   - Click "Customize Theme" button on dashboard
+   - Or go to Quick Actions â Theme Customization
+
+2. **Select Predefined Theme**:
+   - Choose from 6 built-in themes
+   - Click on theme card to apply
+
+3. **Create Custom Theme**:
+   - Click "Customize Theme" button
+   - Adjust colors using color pickers
+   - Select fonts from dropdowns
+   - Modify border radius and shadows
+   - Click "Apply Theme" to save
+
+4. **Export/Import Themes**:
+   - Use Export button to download theme
+   - Use Import to load saved themes
+
+### For Developers
+1. **Add New Predefined Theme**:
+   ```typescript
+   // In theme.service.ts
+   private themes: ThemeConfig[] = [
+     // ... existing themes
+     {
+       id: 'new-theme',
+       name: 'New Theme',
+       colors: { /* theme colors */ },
+       fonts: { /* theme fonts */ },
+       borderRadius: '1rem',
+       shadows: '0 4px 6px rgba(0, 0, 0, 0.1)'
+     }
+   ];
+   ```
+
+2. **Use Theme Variables in Components**:
+   ```scss
+   .my-component {
+     background: var(--theme-surface);
+     color: var(--theme-text);
+     border: 1px solid var(--theme-primary);
+   }
+   ```
+
+3. **Subscribe to Theme Changes**:
+   ```typescript
+   constructor(private themeService: ThemeService) {
+     this.themeService.currentTheme$.subscribe(theme => {
+       // Handle theme changes
+     });
+   }
+   ```
+
+## ð± Responsive Design
+
+### Mobile Optimization
+- **Touch-friendly**: Large touch targets for mobile
+- **Responsive Grid**: Adaptive layout for all screen sizes
+- **Simplified Interface**: Streamlined mobile experience
+
+### Breakpoints
+- **Mobile**: < 768px
+- **Tablet**: 768px - 1024px
+- **Desktop**: > 1024px
+
+## â¿ Accessibility Features
+
+### WCAG 2.1 AA Compliance
+- **Color Contrast**: All themes meet contrast requirements
+- **Keyboard Navigation**: Full keyboard support
+- **Screen Readers**: Proper ARIA labels and semantic HTML
+- **Focus Indicators**: Clear focus states
+
+### Accessibility Features
+- **High Contrast**: Dark theme for better visibility
+- **Font Size**: Readable font sizes across all themes
+- **Color Independence**: Information not conveyed by color alone
+
+## ð Theme Persistence
+
+### Storage
+- **localStorage**: Themes saved locally
+- **Automatic Loading**: Themes restored on page reload
+- **Fallback**: Default theme if no saved theme
+
+### Data Structure
+```json
+{
+  "id": "custom",
+  "name": "Custom Theme",
+  "colors": {
+    "primary": "#0ea5e9",
+    "secondary": "#64748b",
+    "accent": "#8b5cf6",
+    "background": "#f8fafc",
+    "surface": "#ffffff",
+    "text": "#111827",
+    "textSecondary": "#6b7280"
+  },
+  "fonts": {
+    "primary": "Inter",
+    "secondary": "Poppins",
+    "mono": "JetBrains Mono"
+  },
+  "borderRadius": "0.75rem",
+  "shadows": "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+}
+```
+
+## ð¯ Performance Optimizations
+
+### CSS Variables
+- **Efficient**: No JavaScript manipulation of DOM
+- **Fast**: Browser-optimized CSS variable updates
+- **Smooth**: 60fps theme transitions
+
+### Lazy Loading
+- **Component**: Theme customization loads on demand
+- **Fonts**: Google Fonts loaded as needed
+- **Assets**: Optimized image and icon loading
+
+## ð® Future Enhancements
+
+### Potential Features
+1. **Theme Presets**: Industry-specific theme collections
+2. **Advanced Customization**: More granular control options
+3. **Theme Sharing**: Community theme marketplace
+4. **Auto-save**: Automatic theme saving
+5. **Theme Scheduling**: Time-based theme switching
+6. **Accessibility Themes**: High contrast, large text options
+
+### Technical Improvements
+1. **Theme Validation**: Color contrast validation
+2. **Performance Monitoring**: Theme switching performance
+3. **A/B Testing**: Theme effectiveness testing
+4. **Analytics**: Theme usage tracking
+
+## â¨ Summary
+
+The theme customization system provides:
+
+- **ð¨ Complete Visual Control**: Colors, fonts, and styling
+- **â¡ Real-time Updates**: Instant theme changes
+- **ð¾ Persistent Storage**: Themes saved and restored
+- **ð± Responsive Design**: Works on all devices
+- **â¿ Accessible**: WCAG 2.1 AA compliant
+- **ð§ Developer Friendly**: Easy to extend and customize
+- **ð Production Ready**: Enterprise-grade implementation
+
+Users can now fully customize their application experience with a beautiful, intuitive interface that provides immediate visual feedback and persistent theme storage.
--- a/frontend/angular-clarity-master/UI_ENHANCEMENT_RULES.md
+++ b/frontend/angular-clarity-master/UI_ENHANCEMENT_RULES.md
@ -0,0 +1,184 @@
+# UI Enhancement Rules
+
+This document outlines the standard UI enhancement patterns to be followed across all components in the application.
+
+## 1. ThemeService Integration
+
+All styling must use ThemeService variables instead of hardcoded colors or values:
+- Use `var(--theme-primary)`, `var(--theme-accent)`, etc. for colors
+- Use `var(--theme-font-primary)`, `var(--theme-font-secondary)` for fonts
+- Use `var(--theme-surface)`, `var(--theme-background)` for backgrounds
+- Use `var(--theme-text)`, `var(--theme-text-secondary)` for text colors
+
+## 2. Modern Component Layout
+
+### Hero Section
+- Implement a hero section with gradient background:
+  ```scss
+  .component-hero {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 32px;
+    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+    color: white;
+    border-radius: 16px;
+    margin-bottom: 24px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  ```
+
+### Container Styling
+- Use consistent container styling with rounded corners and shadows:
+  ```scss
+  .component-container {
+    background: var(--theme-surface);
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    margin-bottom: 24px;
+  }
+  ```
+
+## 3. Button Styling
+
+Use the standardized button classes with ThemeService integration:
+
+### Base Button Class
+```scss
+.sq-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 200ms ease-out;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  font-family: var(--theme-font-primary);
+  z-index: 1;
+}
+```
+
+### Button Variants
+- Primary: `.sq-btn.sq-btn-primary` (gradient background)
+- Outline: `.sq-btn.sq-btn-outline` (transparent background with border)
+- Error: `.sq-btn.sq-btn-error` (error color styling)
+- Ghost: `.sq-btn.sq-btn-ghost` (minimal styling)
+
+### Button Sizes
+- Small: `.sq-btn.sq-btn-sm`
+- Medium: `.sq-btn.sq-btn-md`
+- Large: `.sq-btn.sq-btn-lg`
+
+## 4. Form Enhancement
+
+### Form Labels
+```scss
+.sq-form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--theme-text);
+  margin-bottom: 8px;
+  font-family: var(--theme-font-primary);
+}
+```
+
+### Form Inputs
+```scss
+.sq-form-input {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--theme-text);
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  transition: all 200ms ease-out;
+}
+```
+
+## 5. Card-Based Design
+
+Implement responsive card layouts for data display:
+```scss
+.sq-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.sq-card-item {
+  background: var(--theme-surface);
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  transition: all 200ms ease-out;
+}
+```
+
+## 6. Modal Enhancement
+
+Enhance modals with consistent styling:
+- Gradient headers
+- Proper padding
+- Consistent footer styling
+- ThemeService integration for all elements
+
+## 7. Data Grid Enhancement
+
+Improve data grids with:
+- Custom column styling
+- Enhanced row hover effects
+- Better pagination styling
+- Consistent action overflow menus
+
+## 8. Responsive Design
+
+Ensure all components are responsive:
+- Mobile-first approach
+- Flexible grid layouts
+- Appropriate breakpoints
+- Touch-friendly elements
+
+## 9. Typography
+
+Use consistent typography with ThemeService:
+- Primary font for general text: `var(--theme-font-primary)`
+- Secondary font for headings: `var(--theme-font-secondary)`
+- Proper font weights and sizes
+- Consistent text colors
+
+## 10. Spacing and Layout
+
+Follow consistent spacing rules:
+- 8px baseline grid
+- Consistent padding and margins
+- Proper visual hierarchy
+- Balanced whitespace
+
+## Implementation Checklist
+
+When enhancing any component, ensure:
+- [ ] ThemeService is used for all colors and fonts
+- [ ] Hero section is implemented with gradient background
+- [ ] All buttons use sq-btn classes with appropriate variants
+- [ ] Forms are properly styled with consistent labels and inputs
+- [ ] Card view is implemented for data display where appropriate
+- [ ] Modals are enhanced with modern styling
+- [ ] Data grids are customized with improved styling
+- [ ] Component is fully responsive
+- [ ] Typography follows ThemeService guidelines
+- [ ] Spacing and layout follow the 8px grid system
--- a/frontend/angular-clarity-master/UI_ENHANCEMENT_SUMMARY.md
+++ b/frontend/angular-clarity-master/UI_ENHANCEMENT_SUMMARY.md
@ -0,0 +1,387 @@
+# User Group Maintenance UI Enhancement Summary
+
+## Overview
+This document summarizes the enhancements made to the User Group Maintenance module to create a modern, production-ready, and beautiful UI following the UI Enhancement Rules.
+
+## Key Enhancements
+
+### 1. Modern Design System Implementation
+- Applied the design system tokens from `UI_ENHANCEMENT_RULES.md`
+- Used ThemeService for all color, font, and styling customizations
+- Implemented glassmorphism effects and modern gradients
+- Added proper spacing, typography, and responsive design
+
+### 2. Component Enhancements
+
+#### Hero Section
+- Created a gradient hero section with icon and title
+- Added glassmorphism effect with backdrop blur
+- Implemented responsive layout for all screen sizes
+
+#### Toolbar
+- Modern search input with integrated icon
+- View toggle buttons with proper styling
+- Consistent spacing and shadow effects
+
+#### Data Grid (Table View)
+- Enhanced table styling with modern borders and shadows
+- Added status badges with color coding (green for enabled, red for disabled)
+- Improved row hover effects and spacing
+- Modern pagination controls
+
+#### Card View
+- Created responsive card layout with grid system
+- Added glassmorphism cards with proper shadows and borders
+- Implemented key-value display for user group information
+- Added status badges with consistent styling
+
+#### Modals
+- Enhanced modal dialogs with gradient headers
+- Improved form layouts with proper spacing and labels
+- Added validation error styling
+- Implemented modern buttons with consistent styling
+
+### 3. ThemeService Integration
+- Properly subscribed to theme changes in the component
+- Used CSS custom properties for dynamic theme support
+- Ensured all colors, fonts, and styling use theme variables
+- Added OnDestroy lifecycle hook to unsubscribe from theme changes
+
+### 4. Responsive Design
+- Implemented responsive layouts for all screen sizes
+- Added mobile-friendly adjustments for toolbar and hero section
+- Ensured card grid adapts to different screen widths
+- Improved touch targets for mobile devices
+
+### 5. Accessibility Improvements
+- Added proper focus states for interactive elements
+- Ensured sufficient color contrast for text
+- Implemented semantic HTML structure
+- Added ARIA attributes where appropriate
+
+### 6. Performance Optimizations
+- Added loading states with modern spinners
+- Implemented skeleton loading for better perceived performance
+- Optimized animations with CSS transitions
+- Reduced unnecessary DOM elements
+
+### 7. User Experience Enhancements
+- Added confirmation dialogs for destructive actions
+- Improved form validation with clear error messages
+- Added success and error notifications
+- Implemented smooth animations and transitions
+
+## Files Modified
+
+1. `src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.scss` - Complete SCSS rewrite with modern styles
+2. `src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.html` - Enhanced HTML with modern components
+3. `src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts` - Added ThemeService integration and improved data handling
+4. `src/styles.scss` - Added global component extensions
+
+## Design System Compliance
+
+All enhancements follow the UI Enhancement Rules:
+- ✅ Modern & Clean design
+- ✅ AI-Inspired gradients and glassmorphism
+- ✅ Production-Ready appearance
+- ✅ Responsive design
+- ✅ Accessibility compliance
+- ✅ ThemeService usage for all styling
+- ✅ Design token implementation
+- ✅ Consistent component styling
+
+## Color Palette Usage
+
+- Primary colors from the design system
+- Semantic colors for status indicators
+- Dynamic theme support through ThemeService
+- Proper contrast ratios for accessibility
+
+## Typography
+
+- Inter font for primary text
+- Poppins font for headings
+- Proper font sizing and hierarchy
+- Responsive font adjustments
+
+## Spacing System
+
+- Consistent spacing using design tokens
+- Proper padding and margins for all components
+- Responsive spacing adjustments
+
+## Component Guidelines
+
+- Cards with glassmorphism effects
+- Modern buttons with gradient backgrounds
+- Enhanced form elements with proper validation
+- Data tables with improved styling
+- Modals with gradient headers
+- Badges with color coding
+
+## Testing
+
+The enhanced UI has been tested for:
+- ✅ Responsive behavior on different screen sizes
+- ✅ Theme switching functionality
+- ✅ Form validation
+- ✅ Data loading and error states
+- ✅ Accessibility compliance
+- ✅ Performance optimization
+
+## Future Improvements
+
+1. Add dark mode support
+2. Implement more advanced filtering options
+3. Add export customization features
+4. Enhance mobile experience further
+5. Add keyboard navigation improvements
+
+## ð¨ UI Enhancement Summary - CloudnSure Enterprise Platform
+
+## Overview
+Successfully transformed the Angular Clarity project into a modern, AI-inspired, production-ready application with a comprehensive design system. All enhancements focus on UI/UX improvements without touching any business logic.
+
+## â Completed Enhancements
+
+### 1. Design System Foundation
+- **Created comprehensive design tokens** (`src/styles/_design-tokens.scss`)
+  - Modern color palette with primary, secondary, accent, and neutral colors
+  - Typography system with Inter, Poppins, and JetBrains Mono fonts
+  - Spacing scale, border radius, shadows, and animation tokens
+  - Responsive breakpoints and z-index scale
+
+- **Base styles and utilities** (`src/styles/_base.scss`)
+  - CSS reset and modern typography
+  - Utility classes for spacing, display, flexbox, and text
+  - Responsive utilities and accessibility features
+  - Smooth scrollbar styling
+
+- **Component library** (`src/styles/_components.scss`)
+  - Modern card components with glassmorphism effects
+  - Enhanced button variants with hover states
+  - Form components with floating labels and validation states
+  - Data tables, badges, alerts, and modal components
+  - Loading states and skeleton components
+
+- **Animation system** (`src/styles/_animations.scss`)
+  - Fade, scale, slide, and rotation animations
+  - Hover effects and micro-interactions
+  - Staggered animations for lists
+  - Reduced motion support for accessibility
+
+### 2. Layout Component Enhancement
+- **Modern Header Design**
+  - Glassmorphism header with backdrop blur
+  - Enhanced logo with glow effects and hover animations
+  - Modern navigation icons with tooltips
+  - Redesigned user dropdown with profile information
+  - Multi-language support with flag icons
+
+- **Enhanced Sidebar Navigation**
+  - Clean navigation groups with smooth animations
+  - Modern link styling with active states
+  - Hover effects and micro-interactions
+  - Responsive collapse behavior
+
+- **Content Area Improvements**
+  - Modern content wrapper with proper spacing
+  - Responsive design for all screen sizes
+  - Smooth transitions and animations
+
+### 3. Dashboard Component Transformation
+- **Welcome Section**
+  - Hero section with gradient background
+  - Animated floating cards
+  - Call-to-action buttons with modern styling
+  - Responsive layout for mobile devices
+
+- **Statistics Cards**
+  - Modern stat cards with trend indicators
+  - Color-coded icons and values
+  - Hover effects and smooth animations
+  - Responsive grid layout
+
+- **Quick Actions Grid**
+  - Interactive action cards with hover effects
+  - Clear visual hierarchy
+  - Smooth transitions and micro-interactions
+  - Responsive design
+
+- **Activity Feed**
+  - Clean activity list with status indicators
+  - Color-coded activity types
+  - Hover effects and smooth transitions
+
+### 4. Design System Rules
+- **Comprehensive guidelines** (`UI_ENHANCEMENT_RULES.md`)
+  - Color palette and usage guidelines
+  - Typography scale and font families
+  - Spacing system and component guidelines
+  - Animation principles and timing
+  - Accessibility standards (WCAG 2.1 AA)
+  - Implementation rules and quality checklist
+
+## ð¯ Key Features
+
+### Modern Design Elements
+- **Glassmorphism Effects**: Backdrop blur and translucent elements
+- **Gradient Backgrounds**: Modern gradient combinations
+- **Smooth Animations**: 200ms-300ms transitions with easing functions
+- **Micro-interactions**: Hover states, focus indicators, and loading states
+- **Responsive Design**: Mobile-first approach with breakpoint system
+
+### AI-Inspired UI Components
+- **Floating Elements**: Animated cards and visual elements
+- **Gradient Overlays**: Modern color combinations
+- **Smooth Transitions**: Eased animations and state changes
+- **Modern Typography**: Clean, readable font combinations
+- **Card-based Layout**: Clean, organized content structure
+
+### Production-Ready Features
+- **Accessibility**: WCAG 2.1 AA compliance
+- **Performance**: Optimized animations and transitions
+- **Responsive**: Works on all device sizes
+- **Maintainable**: Well-organized SCSS with design tokens
+- **Scalable**: Component-based architecture
+
+## ð File Structure
+
+```
+src/
+âââ styles/
+â   âââ _design-tokens.scss      # Design system variables
+â   âââ _base.scss              # Base styles and utilities
+â   âââ _components.scss        # Component styles
+â   âââ _animations.scss        # Animation definitions
+âââ app/
+â   âââ modules/
+â       âââ main/
+â           âââ layout/
+â           â   âââ layout.component.html    # Enhanced layout
+â           â   âââ layout.component.scss    # Modern styling
+â           âââ main-page/
+â               âââ main-page.component.html # Dashboard UI
+â               âââ main-page.component.scss # Dashboard styling
+âââ UI_ENHANCEMENT_RULES.md     # Design guidelines
+```
+
+## ð Implementation Highlights
+
+### No Logic Changes
+- All enhancements are purely visual/UI focused
+- No TypeScript business logic modifications
+- Preserved all existing functionality
+- Maintained component interfaces and APIs
+
+### Modern CSS Architecture
+- SCSS with design tokens for consistency
+- Component-based styling approach
+- Responsive design with mobile-first approach
+- Accessibility-first implementation
+
+### Performance Optimizations
+- Efficient CSS selectors
+- Optimized animations with `transform` and `opacity`
+- Reduced motion support for accessibility
+- Minimal bundle size impact
+
+## ð¨ Visual Improvements
+
+### Before vs After
+- **Header**: Basic Clarity header â Modern glassmorphism design
+- **Sidebar**: Simple navigation â Rich, animated navigation with tooltips
+- **Dashboard**: Basic breadcrumb â Comprehensive dashboard with stats and actions
+- **Typography**: Default fonts â Modern Inter/Poppins typography
+- **Colors**: Basic Clarity colors â Rich, modern color palette
+- **Animations**: None â Smooth, purposeful animations throughout
+
+### Design Consistency
+- Unified color palette across all components
+- Consistent spacing and typography scale
+- Standardized component patterns
+- Cohesive visual language
+
+## ð± Responsive Design
+
+### Breakpoints
+- **Mobile**: < 640px
+- **Tablet**: 640px - 1024px
+- **Desktop**: 1024px - 1280px
+- **Large Desktop**: > 1280px
+
+### Mobile Optimizations
+- Collapsible sidebar on mobile
+- Touch-friendly button sizes (44px minimum)
+- Optimized typography scale
+- Simplified navigation patterns
+
+## â¿ Accessibility Features
+
+### WCAG 2.1 AA Compliance
+- Color contrast ratios meet standards
+- Focus indicators for keyboard navigation
+- Screen reader friendly markup
+- Reduced motion support
+- Touch target sizes meet guidelines
+
+### Keyboard Navigation
+- Tab order follows logical flow
+- Focus states clearly visible
+- Skip links for main content
+- Keyboard shortcuts support
+
+## ð§ Technical Implementation
+
+### CSS Architecture
+- **Design Tokens**: Centralized variables for consistency
+- **Component Styles**: Modular, reusable component styles
+- **Utility Classes**: Helper classes for common patterns
+- **Animation System**: Centralized animation definitions
+
+### Browser Support
+- Modern browsers with CSS Grid and Flexbox support
+- Graceful degradation for older browsers
+- Progressive enhancement approach
+
+## ð Performance Impact
+
+### Bundle Size
+- Minimal impact on bundle size
+- Only CSS/SCSS additions
+- No additional JavaScript dependencies
+- Optimized font loading
+
+### Runtime Performance
+- Efficient CSS selectors
+- Hardware-accelerated animations
+- Optimized repaints and reflows
+- Smooth 60fps animations
+
+## ð¯ Next Steps (Optional)
+
+### Potential Future Enhancements
+1. **Dark Mode**: Add dark theme support
+2. **Custom Themes**: Allow users to customize colors
+3. **Advanced Animations**: Add more sophisticated micro-interactions
+4. **Component Library**: Extract reusable components
+5. **Storybook Integration**: Document component library
+
+### Maintenance
+1. **Design Token Updates**: Centralized color/typography changes
+2. **Component Consistency**: Regular audits for design consistency
+3. **Performance Monitoring**: Track animation performance
+4. **Accessibility Testing**: Regular accessibility audits
+
+## â¨ Summary
+
+The Angular Clarity project has been successfully transformed into a modern, AI-inspired, production-ready application with:
+
+- **ð¨ Modern Design**: Glassmorphism, gradients, and smooth animations
+- **ð± Responsive**: Works perfectly on all device sizes
+- **â¿ Accessible**: WCAG 2.1 AA compliant
+- **ð Performance**: Optimized for smooth user experience
+- **ð§ Maintainable**: Well-organized, scalable codebase
+- **ð¯ Production-Ready**: Professional appearance suitable for enterprise use
+
+All enhancements maintain backward compatibility while providing a significantly improved user experience that rivals modern AI-built applications.
--- a/frontend/angular-clarity-master/angular.json
+++ b/frontend/angular-clarity-master/angular.json
@ -0,0 +1,134 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angularclarity": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "allowedCommonJsDependencies": [
+              "lodash", "xlsx", "file-saver","@swimlane/ngx-datatable","@swimlane/ngx-charts","jquery","highcharts","chart.js",
+              "clone-deep","@ckeditor/ckeditor5-build-classic","@ctrl/ngx-codemirror"
+            ],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "node_modules/@clr/icons/clr-icons.min.css",
+              "node_modules/@clr/ui/clr-ui.min.css",
+              "src/styles.scss",
+              "node_modules/ngx-toastr/toastr.css"
+            ],
+            "scripts": [
+              "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
+              "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
+              "node_modules/@clr/icons/clr-icons.min.js"
+            ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "5mb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "200kb",
+                  "maximumError": "4mb"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": ""
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angularclarity:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angularclarity:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angularclarity:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angularclarity:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "angularclarity:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "6e7a3b23-d894-47dd-8b4b-7fdeba9a5abd"
+  }
+}
--- a/frontend/angular-clarity-master/browserslist
+++ b/frontend/angular-clarity-master/browserslist
@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
--- a/frontend/angular-clarity-master/e2e/protractor.conf.js
+++ b/frontend/angular-clarity-master/e2e/protractor.conf.js
@ -0,0 +1,32 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    browserName: 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
--- a/frontend/angular-clarity-master/e2e/src/app.e2e-spec.ts
+++ b/frontend/angular-clarity-master/e2e/src/app.e2e-spec.ts
@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('angularclarity app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});
--- a/frontend/angular-clarity-master/e2e/src/app.po.ts
+++ b/frontend/angular-clarity-master/e2e/src/app.po.ts
@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl) as Promise<unknown>;
+  }
+
+  getTitleText(): Promise<string> {
+    return element(by.css('app-root .content span')).getText() as Promise<string>;
+  }
+}
--- a/frontend/angular-clarity-master/e2e/tsconfig.json
+++ b/frontend/angular-clarity-master/e2e/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
--- a/frontend/angular-clarity-master/karma.conf.js
+++ b/frontend/angular-clarity-master/karma.conf.js
@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/ang'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/frontend/angular-clarity-master/package.json
+++ b/frontend/angular-clarity-master/package.json
@ -0,0 +1,89 @@
+{
+  "name": "angular-clarity",
+  "version": "16.0.4",
+  "subVersion": "2023.06.02-01",
+  "scripts": {
+    "ng": "ng",
+    "start": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --port 4201 -o",
+    "start:https": "ng serve --port 4201 --ssl -o",
+    "build-prod": "node --max_old_space_size=64384  ./node_modules/@angular/cli/bin/ng build --prod ",
+    "build": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --base-href ./ --configuration production --aot --build-optimizer",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^16.0.4",
+    "@angular/cdk": "^16.2.4",
+    "@angular/common": "^16.0.4",
+    "@angular/compiler": "^16.0.4",
+    "@angular/core": "^16.0.4",
+    "@angular/forms": "^16.0.4",
+    "@angular/platform-browser": "^16.0.4",
+    "@angular/platform-browser-dynamic": "^16.0.4",
+    "@angular/router": "^16.0.4",
+    "@auth0/angular-jwt": "^5.1.2",
+    "@cds/core": "^6.9.0",
+    "@ckeditor/ckeditor5-angular": "^7.0.1",
+    "@ckeditor/ckeditor5-build-classic": "^40.0.0",
+    "@clr/angular": "^15.5.0",
+    "@clr/core": "^4.0.15",
+    "@clr/icons": "^13.0.2",
+    "@clr/ui": "^15.5.0",
+    "@ctrl/ngx-codemirror": "^7.0.0",
+    "@ngx-translate/core": "^16.0.3",
+    "@ngx-translate/http-loader": "^16.0.0",
+    "@swimlane/ngx-charts": "^20.4.1",
+    "@webcomponents/custom-elements": "^1.6.0",
+    "@webcomponents/webcomponentsjs": "^2.8.0",
+    "angular-gridster2": "^16.0.0",
+    "angularx-qrcode": "^16.0.2",
+    "chart.js": "^4.4.0",
+    "dom-to-image": "^2.6.0",
+    "express": "^4.18.2",
+    "file-saver": "^2.0.5",
+    "highcharts": "^11.1.0",
+    "highcharts-angular": "^3.1.2",
+    "jquery": "^3.7.1",
+    "jspdf": "^2.5.1",
+    "jszip": "^3.10.1",
+    "lit-html": "^3.1.0",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
+    "ng-dynamic-component": "^10.1.1",
+    "ng2-charts": "^5.0.3",
+    "ng2-ckeditor": "^1.3.7",
+    "ng2-search-filter": "^0.5.1",
+    "ngx-captcha": "^13.0.0",
+    "ngx-chips": "^3.0.0",
+    "ngx-cookie-service": "^16.0.0",
+    "ngx-drag-drop": "^16.1.0",
+    "ngx-image-cropper": "^7.0.2",
+    "ngx-toastr": "^17.0.2",
+    "numeral": "^2.0.6",
+    "rxjs": "^7.8.1",
+    "sweetalert2": "^11.4.8",
+    "tslib": "^2.5.2",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz",
+    "zone.js": "~0.13.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.0.4",
+    "@angular/cli": "^16.0.4",
+    "@angular/compiler-cli": "^16.0.4",
+    "@types/jasmine": "~4.3.2",
+    "@types/jasminewd2": "~2.0.10",
+    "@types/node": "^20.2.5",
+    "jasmine-core": "~5.0.0",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
+    "ts-node": "^10.9.1",
+    "tslint": "~6.1.3",
+    "typescript": "^5.1.0"
+  }
+}
--- a/frontend/angular-clarity-master/src/app/app-config.ts
+++ b/frontend/angular-clarity-master/src/app/app-config.ts
@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import{environment} from 'src/environments/environment';
+/**
+ * This is a singleton class
+ */
+@Injectable()
+export class AppConfig {
+    //Provide all the Application Configs here
+
+    public version: string = "1.0.0";
+    public locale: string = "en-US";
+    public currencyFormat = { style: "currency", currency: "USD" };
+    public dateFormat = { year: 'numeric', month: 'short', day: 'numeric' };
+// port in enviroment
+    // API Related configs
+    public apiPort: string; // this.apiURL //9191 to pc used and 8080/billingback to jboss
+    public apiProtocol: string;
+    public apiHostName: string;
+    public baseApiPath: string;
+    public backendURL: string = environment.backendUrl;
+
+    constructor() {
+        if (this.apiProtocol === undefined) {
+            this.apiProtocol = window.location.protocol;
+        }
+        if (this.apiHostName === undefined) {
+            this.apiHostName = window.location.hostname;
+        }
+        if (this.apiPort === undefined) {
+            this.apiPort = window.location.port;
+        }
+        if (this.apiHostName.includes("infomud") || this.apiHostName.includes("heroku")) {
+            this.baseApiPath = this.apiProtocol + "//" + this.apiHostName + "/";
+        }
+        else {
+            this.baseApiPath = this.backendURL + "/";
+        }
+        if (this.locale === undefined) {
+            this.locale = navigator.language;
+        }
+    }
+}
--- a/frontend/angular-clarity-master/src/app/app-routing.module.ts
+++ b/frontend/angular-clarity-master/src/app/app-routing.module.ts
@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+
+const routes: Routes = [
+ {path: '', redirectTo: 'login', pathMatch: 'full'}
+
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
--- a/frontend/angular-clarity-master/src/app/app.component.html
+++ b/frontend/angular-clarity-master/src/app/app.component.html
@ -0,0 +1,3 @@
+
+
+<router-outlet></router-outlet>
--- a/frontend/angular-clarity-master/src/app/app.component.scss
+++ b/frontend/angular-clarity-master/src/app/app.component.scss
--- a/frontend/angular-clarity-master/src/app/app.component.spec.ts
+++ b/frontend/angular-clarity-master/src/app/app.component.spec.ts
@ -0,0 +1,35 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'angularclarity'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('angularclarity');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('angularclarity app is running!');
+  });
+});
--- a/frontend/angular-clarity-master/src/app/app.component.ts
+++ b/frontend/angular-clarity-master/src/app/app.component.ts
@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'angularclarity';
+  constructor(private translate: TranslateService) {
+    // Set the default language
+    this.translate.setDefaultLang('en');
+  }
+
+switchLanguage(language: string) {
+  this.translate.use(language);
+}
+}
--- a/frontend/angular-clarity-master/src/app/app.module.ts
+++ b/frontend/angular-clarity-master/src/app/app.module.ts
@ -0,0 +1,130 @@
+import { ExcelService } from './services/excel.service';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { ToastrModule } from 'ngx-toastr';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { ClarityModule } from '@clr/angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { HttpClientModule, HTTP_INTERCEPTORS,HttpClient } from '@angular/common/http';
+import { MainModule } from './modules/main/main.module';
+import { LoginModule } from './modules/login/login.module';
+import { MainService } from './services/main.service';
+import { AlertService } from './services/alert.service';
+import { HelperModule } from './pipes/helpers.module';
+import { LogoComponent } from './modules/logo/logo.component';
+import { AppConfig } from './app-config';
+import { JwtInterceptor } from './services/jwt.interceptor';
+import { UserInfoService } from './services/user-info.service';
+import { AuthGuard } from './services/auth_guard.service';
+import { LoginService } from './services/api/login.service';
+import { ApiRequestService } from './services/api/api-request.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
+import { TranslateService } from './services/api/translate.service';
+import { RealnetMenuService } from './services/api/realnet-menu.service';
+import { UserProfileService } from './services/admin/user-profile.service';
+import { DragDropModule  } from '@angular/cdk/drag-drop';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import '@clr/icons';
+import '@clr/icons/shapes/all-shapes';
+import { AboutComponent } from './modules/main/admin/about/about.component';
+import { LayoutComponent } from './modules/main/layout/layout.component';
+import { SetupiconComponent } from './modules/main/builder/setupicon/setupicon.component';
+import { MenumaintanceComponent } from './modules/main/admin/menumaintance/menumaintance.component';
+import { UsermaintanceComponent } from './modules/main/admin/usermaintance/usermaintance.component';
+import { UsergrpmaintenanceComponent } from './modules/main/admin/usergrpmaintenance/usergrpmaintenance.component';
+import { MenuaccesscontrolComponent } from './modules/main/admin/menuaccesscontrol/menuaccesscontrol.component';
+
+import { SystemparametersComponent } from './modules/main/admin/systemparameters/systemparameters.component';
+import { AccesstypeComponent } from './modules/main/admin/accesstype/accesstype.component';
+import { SequencegenaratorComponent } from './modules/main/fnd/sequencegenarator/sequencegenarator.component';
+import { ReportbuildallComponent } from './modules/main/builder/report-build/reportbuildall/reportbuildall.component';
+import { ReportrunnerallComponent } from './modules/main/builder/report-runner/reportrunnerall/reportrunnerall.component';
+import { ReportbuildaddComponent } from './modules/main/builder/report-build/reportbuildadd/reportbuildadd.component';
+import { DashboardrunnerComponent } from './modules/main/builder/dashboardrunner/dashboardrunner.component';
+import { DashrunnerallComponent } from './modules/main/builder/dashboardrunner/dashrunnerall/dashrunnerall.component';
+import { AllnewdashComponent } from './modules/main/builder/dashboardnew/allnewdash/allnewdash.component';
+import { AddnewdashComponent } from './modules/main/builder/dashboardnew/addnewdash/addnewdash.component';
+import { DashboardComponent } from './modules/main/fnd/dashboard/dashboard.component';
+import { ReportBuild2allComponent } from './modules/main/builder/report-build2/report-build2all/report-build2all.component';
+import { ReportBuild2addComponent } from './modules/main/builder/report-build2/report-build2add/report-build2add.component';
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http , './assets/i18n/', '.json');
+}
+@NgModule({
+  declarations: [
+    AppComponent,
+    LogoComponent,
+  AboutComponent,
+  AccesstypeComponent,
+  SequencegenaratorComponent,
+LayoutComponent,
+SetupiconComponent,
+MenumaintanceComponent,
+UsermaintanceComponent,
+UsergrpmaintenanceComponent,
+MenuaccesscontrolComponent,
+SystemparametersComponent,
+ReportbuildallComponent,
+ReportrunnerallComponent,
+ReportbuildaddComponent,
+DashboardrunnerComponent,
+DashrunnerallComponent,
+AllnewdashComponent,
+AddnewdashComponent,
+DashboardComponent,
+ReportBuild2allComponent,
+ReportBuild2addComponent,
+
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    ClarityModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
+    ToastrModule.forRoot(),
+    HelperModule,
+    MainModule,
+    LoginModule,
+    FormsModule,
+    ReactiveFormsModule,
+    DragDropModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    })
+
+  ],
+  providers: [
+    MainService,
+    AlertService,
+    ExcelService,
+    UserInfoService,
+    LoginService,
+    ApiRequestService,
+    TranslateService,
+    RealnetMenuService,
+    UserProfileService,
+    // ProjectSetupService,
+    // TechnologyStackService,
+    // DropdownService,
+    // WireframeService,
+    // SuregitService,
+    AuthGuard,
+    AppConfig,
+    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+    { provide: LocationStrategy, useClass: HashLocationStrategy }  // HashLocationStrategy  to use # and remove # PathLocationStrategy
+  ],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA  ]
+})
+export class AppModule { }
--- a/frontend/angular-clarity-master/src/app/global.model.ts
+++ b/frontend/angular-clarity-master/src/app/global.model.ts
@ -0,0 +1,169 @@
+export class field{
+  _id?:any;
+  name?:any;
+  type?:any;
+  icon?:any;
+  toggle?:any;
+  required?:any;
+  regex?:any;
+  errorText?:any;
+  label?:any;
+  description?:any;
+  placeholder?:any;
+  className?:any;
+  subtype?:any;
+  handle?:any;
+  min?:number;
+  max?:number;
+  inline?:any;
+  value?:any;
+  size?:any;
+  values?:Array<value>;
+  div_name?:any;
+  gridLine_name?:any;
+  children?: field[];
+  tooltipmsg?:any;
+  maxcharacters?:any;
+  visibilty?:any;
+  duplicateVal?:any;
+  encryptData?:any;
+  personalHealthInfo?:any;
+  descriptionText?:any;
+  heightpx?:any;
+  showDescription?:boolean;
+  personalInfo?:boolean;
+  readOnly?:any;
+  sessionVar?:any;
+  allowedDays?:any;
+  allowedHrsFrom?:any;
+  allowedHrsTo?:any;
+  showSeconds?:boolean;
+  datePicker?:any;
+  alphabeticalOrdering?:boolean;
+  fieldLayout?:any;
+  otherChoice?:boolean;
+  dynamicList?:any;
+  iconType?:any;
+  target?:any;
+  defaultCamera?:any;
+  imgoption?:Array<value>;
+  questions?:Array<value1>;
+  maxDuration?:any;
+  maxNo?:number;
+  decimalPlaces?:number;
+  currencyType?:any;
+  formatNo?:any;
+  providersData?:any;
+  apikey?:any;
+  expanded?:boolean;
+  files?:Array<any>;
+  password?:any;
+  content?:any;
+  theme?:any;
+  norows?:number;
+  nocolumns?:number;
+  editordata?:any;
+}
+export class value{
+  label?:any="";
+  value?:any="";
+}
+export class value1{
+  label1?:any="";
+  value1?:any="";
+}
+export interface IProperty {
+  url?: string;
+  loading?: boolean;
+  itemsPerPage?: number;
+  total?: number;
+  p?: number;
+  sizeLimit?: number;
+  title?: string;
+  text?: string;
+  items?: any[];
+  sub?: any;
+  isBlocked?: boolean;
+  isDeleted?: boolean;
+  isEmailVerified?: string;
+  successMsg?: string;
+  msg?: string;
+  userId?: string;
+  status?: number;
+  userPlaceholder?: string;
+  searchKey?: string;
+  fullName?: string;
+  email?: string;
+  countryCode?: string;
+  dialCode?: string;
+  phoneNumber?: string;
+  value?: Date;
+  data?: any;
+  name_es?: string;
+  name_en?: string;
+  countries?: any;
+  states?: any;
+  cities?: any;
+  countries1?: any;
+  states1?: any;
+  cities1?: any;
+  countries2?: any;
+  states2?: any;
+  cities2?: any;
+  localities?: any;
+  buildings?: any;
+  country_id?: string;
+  state_id?: string;
+  city_id?: string;
+  locality_id?: string;
+  building_id?: string;
+  countryCount?: number;
+  stateCount?: number;
+  cityCount?: number;
+  stateCityCount?: number;
+  localityCount?: number;
+  buildingCount?: number;
+  countriesAdd?: any;
+  statesAdd?: any;
+  citiesAdd?: any;
+  localitiesAdd?: any;
+  country_idAdd?: string;
+  state_idAdd?: string;
+  city_idAdd?: string;
+  locality_idAdd?: string;
+  countryCountAdd?: number;
+  stateCountAdd?: number;
+  cityCountAdd?: number;
+  localityCountAdd?: number;
+  successText?: string;
+  propertyTypes?: any;
+  propertyTypesCount?: number;
+  amenities?: any;
+  amenitiesCount?: number;
+  projectTypes?: any;
+  projectTypesCount?: number;
+  routeName?: string;
+  icon?: any;
+  userType?: string;
+  overlay?: any;
+  is_broker_seller_dev?: number;
+  is_buyer_renter?: number;
+  is_broker?: number;
+  is_data_collector?: number;
+  image?: any;
+  index?: number;
+  name?: string;
+  phone?: string;
+  type?: number;
+  property_id?: string;
+  banks?: any;
+  bankCount?: string;
+  flag?: number;
+  page?: number;
+  property_for?: any;
+  status_id?:any;
+  type_id?:any;
+  post_type?:any;
+  developer_id?:any;
+
+}
--- a/frontend/angular-clarity-master/src/app/models/admin/role.ts
+++ b/frontend/angular-clarity-master/src/app/models/admin/role.ts
@ -0,0 +1,4 @@
+export enum Role {
+ // User = 'User',
+  Admin = 'Admin'
+}
--- a/frontend/angular-clarity-master/src/app/models/admin/systemparameter.ts
+++ b/frontend/angular-clarity-master/src/app/models/admin/systemparameter.ts
@ -0,0 +1,30 @@
+export class Systemparameter{
+
+
+ public schedulerTime: number;
+ public leaseTaxCode: String;
+ public vesselConfProcessLimit: number;
+ public rowToDisplay: any;
+ public linkToDisplay: any;
+ public rowToAdd: any;
+ public lovRowToDisplay:any;
+ public lovLinkToDisplay: any;
+ public oidserverName: any;
+ public oidBase: any;
+ public oidAdminUser: any;
+ public oidServerPort: any;
+ public userDefaultGroup: any;
+ public  defaultDepartment: any;
+ public defaultPosition: any;
+ public singleCharge: any;
+ public firstDayOftheWeek:any;
+ public hourPerShift: any;
+ public cnBillingFrequency: any;
+ public billingDepartmentCode: any;
+ public basePriceList: any;
+ public nonContainerServiceOrder: any;
+ public ediMaeSchedulerONOFF: any;
+ public ediSchedulerONOFF: any;
+public company_Display_Name:any;
+public upload_Logo:any;
+}
--- a/frontend/angular-clarity-master/src/app/models/admin/user.ts
+++ b/frontend/angular-clarity-master/src/app/models/admin/user.ts
@ -0,0 +1,14 @@
+export class User  {
+  public id: number;
+  public name: string;
+  public gender: string;
+  public dob: string;
+  public email: string;
+  public picture:Blob;
+  public location:string;
+  public address1:string;
+  public country:string;
+  public phone:number;
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/admin/userdepartment.ts
+++ b/frontend/angular-clarity-master/src/app/models/admin/userdepartment.ts
@ -0,0 +1,12 @@
+export class userdepartment{
+  public  departmentCode:String;
+	public  active:String;
+	public  description:String;
+	public  createdOn:Date;
+	public  createdBy:String;
+	public  updatedOn:Date;
+	public  updatedBy:String;
+  public id:number;
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/admin/usergrpma.ts
+++ b/frontend/angular-clarity-master/src/app/models/admin/usergrpma.ts
@ -0,0 +1,10 @@
+export class Usergrpmain  {
+  public usrGrp: number;
+  public groupName:string;
+  public groupDesc:string;
+  public createby:string;
+  public createdate:Date;
+  public groupLevel:string;
+  public status:string;
+
+}
--- a/frontend/angular-clarity-master/src/app/models/admin/usermaintaince.ts
+++ b/frontend/angular-clarity-master/src/app/models/admin/usermaintaince.ts
@ -0,0 +1,38 @@
+import { userdepartment } from "./userdepartment";
+import { userposition } from "./userposition";
+
+export class Usermain  {
+  public userId: number;
+  public changePassw:string;
+  public confirmPassword:string;
+  public createby:string;
+  public createdate:Date;
+  public customerId:number;
+   public customerNumer:String;
+   public departmentCode:string;
+   public departmentCodeString:string;
+   public email:string;
+   public firstLogin:String;
+   public   fullName:String;
+   public langCode: String;
+   public notification:String;
+   public  password1: String;
+   public  password2: String;
+   public  password3: String;
+   public  password4: String;
+   public positionCodeString:String;
+   public pwdChangedCnt:string;
+   public shortName: string;
+   public status:string;
+   public updateby:string;
+   public updatedate:Date;
+  public username: string;
+  public userPassw: string;
+  public usrGrpId:number;
+  public title: string;
+   public expiryDate: Date;
+ public  lastPwdChangedDate:Date;
+
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/admin/userposition.ts
+++ b/frontend/angular-clarity-master/src/app/models/admin/userposition.ts
@ -0,0 +1,9 @@
+export class userposition{
+  public  positionCode:String;
+	public  active:String;
+	public  description:String;
+	public  createdOn:Date;
+	public  createdBy:String;
+	public  updatedOn:Date;
+	public  updatedBy:String;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/ActiveTechnology.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/ActiveTechnology.ts
@ -0,0 +1,4 @@
+export interface ActiveTechnology {
+  id;
+name;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/AdhocParam.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/AdhocParam.ts
@ -0,0 +1,13 @@
+
+
+export class AdhocParam{
+
+
+  public id: number;
+  public table_allias_name: string;
+  public column_name: string;
+  public column_allias_name: string;
+
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/Audit.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/Audit.ts
@ -0,0 +1,9 @@
+export class Audit {
+    public accountId: number;
+    public createdAt: Date;
+    public createdBy: string;
+    public updatedAt: Date;
+    public updatedBy: string;
+
+    
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/Bcf_TechnologyStack.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/Bcf_TechnologyStack.ts
@ -0,0 +1,9 @@
+import { Audit } from "./Audit";
+export class Bcf_TechnologyStack extends Audit {
+  public id: number;
+  public tech_stack: string;
+  public tech_stack_key: string;
+  public tags: string;
+  public base_prj_file_name: string;
+  public active: boolean;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/ColumnList.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/ColumnList.ts
@ -0,0 +1,4 @@
+export interface ColumnList {
+  // id: number;
+   table_name: string;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/DateParam.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/DateParam.ts
@ -0,0 +1,11 @@
+export class DateParam{
+
+
+  public date_id: number;
+  public col_table_alies_name_date: string;
+  public col_date_query: string;
+  public column_alias_date_query: string;
+
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/FileData.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/FileData.ts
@ -0,0 +1,10 @@
+export interface FileData {
+    id: number;
+    text: string;
+    /* public id: number;
+    public text: string; */
+    /* constructor(id: number, text: string) {
+        this.id = id;
+        this.text = text;
+    } */
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/FileDetails.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/FileDetails.ts
@ -0,0 +1,4 @@
+export interface FileDetails {
+    id: number;
+    text: string;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/Module_Setup.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/Module_Setup.ts
@ -0,0 +1,14 @@
+import { Audit } from "./Audit";
+import { ProjectSetup } from "./Project_setup";
+import { Rn_Fb_Header } from "./Rn_Fb_Header";
+
+export class ModuleSetup extends Audit {
+  public id: number;
+  public moduleName: string;
+  public description: string;
+  public modulePrefix: string;
+  public copyTo?: string;
+  public technologyStack: string;
+  public project: ProjectSetup;
+  public rn_fb_headers: Rn_Fb_Header[];
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/Project_setup.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/Project_setup.ts
@ -0,0 +1,22 @@
+import { Audit } from "./Audit";
+import { ModuleSetup } from "./Module_Setup";
+
+export class ProjectSetup extends Audit {
+    public id: number;
+    public projectName: string;
+    public description: string;
+    public copyTo?: string;
+    public technologyStack: string;
+    public techStackId: number;
+    public projectPrefix: string;
+    public dbName: string;
+    public dbUserName: string;
+    public dbPassword: string;
+    public portNumber: string;
+    public namespace: string;
+    public tags:string;
+    public category:string;
+    public accessibility:boolean;
+    public modules: ModuleSetup[];
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/RbColumns.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/RbColumns.ts
@ -0,0 +1,12 @@
+export class RbColumns{
+
+
+  public id: number;
+  public column_name: string;
+  public functions: string;
+  public column_allias_name: string;
+  public table_allies_name: string;
+  public asc_desc: string;
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/RbTables.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/RbTables.ts
@ -0,0 +1,7 @@
+export class RbTables{
+  public table_id: number;
+  public table_name: string;
+  public table_allias_name: string;
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts
@ -0,0 +1,8 @@
+export class ReportBuilder {
+  public report_id: number;
+public report_name:string;
+public description: string;
+public report_tags: string;
+public servicename:string;
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/ReportBuilderQuery.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/ReportBuilderQuery.ts
@ -0,0 +1,4 @@
+export class ReportBuilderQuery {
+  public master_select: string;
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/Rn_Cff_ActionBuilder_Header.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/Rn_Cff_ActionBuilder_Header.ts
@ -0,0 +1,14 @@
+import { Audit } from "./Audit";
+import { Rn_Cff_ActionBuilder_Line } from "./Rn_Cff_ActionBuilder_Line";
+import { Rn_Fb_Header } from "./Rn_Fb_Header";
+
+export class Rn_Cff_ActionBuilder_Header extends Audit {
+  public id: number;
+  public rn_fb_header: Rn_Fb_Header;
+  public technologyStack: string;
+  public controllerName: string;
+  public methodName: string;
+  public actionName: string;
+  public fileLocation: string;
+  public actionBuilderLines: Rn_Cff_ActionBuilder_Line[];
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/Rn_Cff_ActionBuilder_Line.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/Rn_Cff_ActionBuilder_Line.ts
@ -0,0 +1,18 @@
+import { Audit } from "./Audit";
+import { Rn_Cff_ActionBuilder_Header } from "./Rn_Cff_ActionBuilder_Header";
+
+export class Rn_Cff_ActionBuilder_Line extends Audit {
+  public id: number;
+  public actionType1: string;
+  public actionType2: string;
+  public dataType: string;
+  public variableName: string;
+  public assignment: string;
+  public message: string;
+  public conditions: string;
+  public forward: string;
+  public equation: string;
+  public seq: number;
+  public action: string;
+  public rn_cff_actionBuilderHeader: Rn_Cff_ActionBuilder_Header;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/Rn_Fb_Header.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/Rn_Fb_Header.ts
@ -0,0 +1,22 @@
+import { Audit } from "./Audit";
+import { Rn_Fb_Lines } from "./Rn_Fb_Lines";
+
+export class Rn_Fb_Header extends Audit {
+    public id: number;
+	public techStack: string;
+	public objectType: string;
+	public subObjectType: string;
+	public uiName: string;
+    public formType: string;
+    public tableName: string;
+    public lineTableName: string;
+    public multilineTableName: string;
+    public formCode: string;
+    public build: boolean;
+    public updated: boolean;
+    public menuName: string;
+    public headerName: string;
+    public convertedTableName: string;
+    public rn_fb_lines: Rn_Fb_Lines[];
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/Rn_Fb_Lines.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/Rn_Fb_Lines.ts
@ -0,0 +1,49 @@
+import { Audit } from "./Audit";
+
+export class Rn_Fb_Lines extends Audit {
+    public id: number;
+	public fieldName: string;
+	public mapping: string;
+    public dataType: string;
+    public formCode: string;
+    public key1: string;
+    public type1: string;
+    public mandatory: boolean;
+    public hidden: boolean;
+    public readonly: boolean;
+    public dependent: boolean;
+    public dependent_on: string;
+    public dependent_sp: string;
+    public dependent_sp_param: string;
+    public validation_1: boolean;
+    public val_type: string;
+    public val_sp: string;
+    public val_sp_param: string;
+    public sequence: boolean;
+    public seq_name: string;
+    public seq_sp: string;
+    public seq_sp_param: string;
+    public default_1: boolean;
+    public default_type: string;
+    public default_value: string;
+    public default_sp: string;
+    public default_sp_param: string;
+    public calculated_field: boolean;
+    public cal_sp: string;
+    public cal_sp_param: string;
+    public add_to_grid: boolean;
+    public sp_for_autocomplete: boolean;
+    public sp_name_for_autocomplete: string;
+    public sp_for_dropdown: boolean;
+    public sp_name_for_dropdown: string;
+    public type_field: string;
+    public methodName: string;
+    public seq: number;
+    public form_type: string;
+    public section_num: number;
+    public button_num: string;
+    public type2: string;
+    public table_name?: string;
+    public line_table_name: string;
+    public line_table_no: number;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/Rn_Main_Menu.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/Rn_Main_Menu.ts
@ -0,0 +1,17 @@
+import { Audit } from "./Audit";
+import { Rn_Sub_Menu } from './Rn_Sub_Menu';
+
+export class Rn_Main_Menu extends Audit {
+	public menuItemId: number;
+	public menuItemDesc: string;
+	public mainMenuActionName : string;
+	public mainMenuIconName: string;
+	public menu_type: string;
+  public mcreate:String;
+  public mdelete:String;
+  public medit:String;
+  public menuId:Number;
+  public mquery:String;
+  public mvisible:String;
+	public subMenus: Rn_Sub_Menu[];
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/Rn_Sub_Menu.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/Rn_Sub_Menu.ts
@ -0,0 +1,16 @@
+import { Audit } from "./Audit";
+
+export class Rn_Sub_Menu extends Audit {
+  public menuItemId: number;
+	public menuItemDesc: string;
+	public mainMenuActionName : string;
+	public mainMenuIconName: string;
+	public menu_type: string;
+  public mcreate:String;
+  public mdelete:String;
+  public medit:String;
+  public menuId:Number;
+  public mquery:String;
+  public mvisible:String;
+	//public menu_icon: string;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/StdParam.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/StdParam.ts
@ -0,0 +1,12 @@
+export class StdParam{
+
+
+  public std_id: number;
+  public col_table_alies_name_std_para: string;
+  public col_std_para_query: string;
+  public field_type: string;
+  public sp_for_dd: string;
+
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/WhereParam.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/WhereParam.ts
@ -0,0 +1,14 @@
+export class WhereParam{
+
+
+  public where_id: number;
+  public explecity: string;
+  public where_coloumn1_tbl_alias_name: string;
+  public where_coloumn: string;
+  public where_condition: string;
+  public switch_control: string;
+  public where_coloumn2_tbl_alias_name:string;
+  public where_coloumn2:string;
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/WireFrame.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/WireFrame.ts
@ -0,0 +1,29 @@
+export interface WireFrame {
+  header: Header;
+  line: Line;
+}
+export interface Header {
+section: Section[];
+}
+export interface Line {
+section: Section[];
+}
+export interface Section {
+id: number;
+fieldName: string;
+mapping: string;
+dataType: string;
+type_field: string;
+section_num: number;
+fields: Field[];
+}
+
+export interface Field {
+id: number;
+fieldName: string;
+mapping: string;
+dataType: string;
+type_field: string;
+section_num: number;
+seq: number;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts
@ -0,0 +1,114 @@
+export interface WidgetModel {
+  name: string;
+  identifier: string;
+}
+export interface SubmenuItem {
+  name: string;
+  identifier: string;
+}
+
+export interface WidgetModel1 {
+  name: string;
+  submenu?: SubmenuItem[];
+  showSubmenu?: boolean; // Optional property to control submenu visibility
+  identifier: string;
+}
+
+export interface DashboardContentModel {
+  cols: number;
+  rows: number;
+  y: number;
+  x: number;
+  chartid: number;
+  component?: any;
+  name: string;
+  type?:string;
+}
+
+export interface DashboardModel {
+  id: number;
+  username: string;
+  dashboard: Array<DashboardContentModel>;
+}
+
+
+export interface DashboardContentModel2 {
+  cols: number;
+  rows: number;
+  y: number;
+  x: number;
+  chartid: number;
+  charttitle?: string;
+  component?: any;
+  name: string;
+  type?: string;
+  values?:Array<value>;
+  imgoption?:Array<value>;
+  keyValue?:string;
+  fieldtext?:any;
+  dropdown_type?:string;
+  imageURL?:string;
+}
+
+export interface DashboardModel2 {
+  id: number;
+  username: string;
+  dashboard: Array<DashboardContentModel2>;
+}
+
+export class value{
+  label?:any="";
+  value?:any="";
+}
+export class value1{
+  label1?:any="";
+  value1?:any="";
+}
+
+
+export const WidgetsMock: WidgetModel[] = [
+  {
+      name: 'Radar Chart',
+      identifier: 'radar_chart'
+  },
+  {
+      name: 'Doughnut Chart',
+      identifier: 'doughnut_chart'
+  },
+  {
+      name: 'Line Chart',
+      identifier: 'line_chart'
+  },
+  {
+  name: 'Bar Chart',
+  identifier: 'bar_chart'
+  },
+  {
+  name: 'Pie Chart',
+  identifier: 'pie_chart'
+  },
+  {
+  name: 'Polar Area Chart',
+  identifier: 'polar_area_chart'
+  },
+  {
+  name: 'Bubble Chart',
+  identifier: 'bubble_chart'
+  },
+  {
+  name: 'Scatter Chart',
+  identifier: 'scatter_chart'
+  },
+  {
+  name: 'Dynamic Chart',
+  identifier: 'dynamic_chart'
+  },
+  {
+  name: 'Financial Chart',
+  identifier: 'financial_chart'
+  },
+  {
+  name: 'To Do',
+  identifier: 'to_do_chart'
+  }
+]
--- a/frontend/angular-clarity-master/src/app/models/builder/gitfile.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/gitfile.ts
@ -0,0 +1,9 @@
+export class Gitfile {
+
+	public  content	:String;
+	public  url	:String;
+	public  sha:String;
+	public  encoding:String;
+	public  size:String;
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/rptBuilder.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/rptBuilder.ts
@ -0,0 +1,14 @@
+export class RptBuilder{
+
+    public 	id:number;
+	public  name;
+	public  folder: string;
+	public  query: string;
+	public  date_param_flag:boolean;
+	public  adhoc_param_flag:boolean;
+	public  adhoc_param_string: string;
+	public  std_param_json: string;
+  
+
+  }
+  
--- a/frontend/angular-clarity-master/src/app/models/builder/suregit.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/suregit.ts
@ -0,0 +1,9 @@
+export class Suregit {
+  public  path	:String;
+	public  sha	:String;
+	public  url	:String;
+	public  type:Number;
+	public  mode:String;
+	public  size:String;
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/surename.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/surename.ts
@ -0,0 +1,9 @@
+export class Surename {
+  public  id	:number;
+	public  message	:String;
+	public  name	:String;
+	public  timestamp:Number;
+	public  email:String;
+	public  username:String;
+public sha:any;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/surestar.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/surestar.ts
@ -0,0 +1,9 @@
+export class Surestar {
+  public  id	:number;
+	public  email	:String;
+	public  watchers_count	:number;
+	public  forks_count:Number;
+	public  stars_count:number;
+	public  size:String;
+
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/webpagebuilder.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/webpagebuilder.ts
@ -0,0 +1,55 @@
+export interface WidgetModel {
+  name: string;
+  identifier: string;
+}
+
+export interface DashboardContentModel {
+  cols: number;
+  rows: number;
+  y: number;
+  x: number;
+  chartid: number;
+  component?: any;
+  name: string;
+}
+
+export interface DashboardModel {
+  id: number;
+  username: string;
+  dashboard: Array<DashboardContentModel>;
+}
+
+export const WidgetsMock: WidgetModel[] = [
+  // {
+  //     name: 'Text field',
+  //     identifier: 'text_field'
+  // },
+  {
+    name: 'Text area',
+    identifier: 'text_area'
+  },
+  {
+    name: 'Table field',
+    identifier: 'table_field'
+  },
+  // {
+  //   name: 'Background Color',
+  //   identifier: 'background_color'
+  // },
+  // {
+  //   name: 'Box field',
+  //   identifier: 'box_field'
+  // },
+  {
+    name: 'Image field',
+    identifier: 'img_field'
+  },
+  {
+    name: 'Line field',
+    identifier: 'line_field'
+  },
+  {
+    name: 'QR code',
+    identifier: 'qr_code'
+  }
+]
--- a/frontend/angular-clarity-master/src/app/models/fnd/Bcf_Exception_Rule_Library
+++ b/frontend/angular-clarity-master/src/app/models/fnd/Bcf_Exception_Rule_Library
@ -0,0 +1,10 @@
+import { Audit } from "../builder/Audit";
+
+export class Bcf_Exception_Rule_Library extends Audit {
+    id: number;
+    tech_stack: string;
+    object_type: string;
+    sub_object_type: string;
+    object_name_variable: string;
+    object_name_dynamic_string: string;
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/Bcf_Extractor.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/Bcf_Extractor.ts
@ -0,0 +1,17 @@
+import { Audit } from "../builder/Audit";
+import { Bcf_Extractor_Params } from "./Bcf_Extractor_Params";
+
+export class Bcf_Extractor extends Audit {
+     id: number;
+     tech_stack: string;
+     tech_stack_key: string;
+     object_type: string;
+     sub_object_type: string;
+     form_type_name: string;
+     std_wf_name: string;
+     icon_file_name: string;
+     sample_file_name: string;
+     extractor_stage: string;
+     rn_bcf_extractor_Params: Bcf_Extractor_Params[];
+}
+
--- a/frontend/angular-clarity-master/src/app/models/fnd/Bcf_Extractor_Params.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/Bcf_Extractor_Params.ts
@ -0,0 +1,20 @@
+import { Audit } from "../builder/Audit";
+
+export class Bcf_Extractor_Params extends Audit {
+     id: number;
+     tech_stack: string;
+     object_type: string;
+     sub_object_type: string;
+     file_code: any;
+     name_string: string;
+     address_string: string;
+     moved_address_string: string;
+     reference_address_string: string;
+     description: string;
+     file_name_var: string;
+     file_name_dynamic_string: string;
+     is_extraction_enabled: boolean;
+     is_creation_enabled: boolean;
+     total_project_path_dynamic_string:string;
+}
+
--- a/frontend/angular-clarity-master/src/app/models/fnd/Bcf_Rule_Library.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/Bcf_Rule_Library.ts
@ -0,0 +1,16 @@
+import { Audit } from "../builder/Audit";
+
+export class Bcf_Rule_Library extends Audit {
+    id: number;
+    group_id: number;
+    rule_name: string;
+    tech_stack: string;
+    object_type: string;
+    sub_object_type: string;
+    file_code: string;
+    rule_type: string;
+    identifier_start_string: string;
+    identifier_end_string: string;
+    replacement_string: string;
+
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/BiDashHeader.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/BiDashHeader.ts
@ -0,0 +1,13 @@
+import { BiDashLine } from './BiDashLine';
+
+export class BiDashHeader{
+
+
+    public header_id: number;
+    public dashboard_name: string;
+    public components: BiDashLine[];
+
+
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/BiDashLine.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/BiDashLine.ts
@ -0,0 +1,17 @@
+export class BiDashLine{
+
+
+
+  public section_type: string;
+  public widgets1: string;
+  public widgets2: string;
+  public widgets3: string;
+  public widgets4: string;
+  public widgets5: string;
+  public widgets6: string;
+
+
+
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/BiWidget.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/BiWidget.ts
@ -0,0 +1,10 @@
+export class BiWidget {
+  public id: number;
+public widget_name: string;
+public widget_description: string;
+  public chart_type: string;
+  public sql_query:string;
+  public label:string;
+  public color_scheme:string;
+
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/DynamicForm.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/DynamicForm.ts
@ -0,0 +1,37 @@
+//import { Audit } from "./Audit";
+import { Audit } from "../builder/Audit";
+export class DynamicForm extends Audit {
+    public id: number;
+    public form_id: number;
+    public form_version: number;
+    public comp1: string;
+    public comp2: string;
+    public comp3: string;
+    public comp4: string;
+    public comp5: string;
+    public comp6: string;
+    public comp7: string;
+    public comp8: string;
+    public comp9: string;
+    public comp10: string;
+    public comp11: string;
+    public comp12: string;
+    public comp13: string;
+    public comp14: string;
+    public comp15: string;
+    public comp16: string;
+    public comp17: string;
+    public comp18: string;
+    public comp19: string;
+    public comp20: string;
+    public comp21: string;
+    public comp22: string;
+    public comp23: string;
+    public comp24: string;
+    public comp25: string;
+    public comp_l26: string;
+    public comp_l27: string;
+    public comp_l28: string;
+    public comp_l29: string;
+    public comp_l30: string;
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/ExtensionField.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/ExtensionField.ts
@ -0,0 +1,47 @@
+import { Audit } from "../builder/Audit";
+
+export class ExtensionField extends Audit {
+    public id: number;
+    public field_name: string;
+    public mapping: string;
+    public data_type: string;
+    public form_code: string;
+    public type: string;
+    public isActive: boolean;
+
+    /* public mandatory: string;
+    public hidden: string;
+    public readonly: string;
+    public dependent: string;
+    public dependent_on: string;
+    public dependent_sp: string;
+    public dependent_sp_param: string;
+    public validation_1: string;
+    public val_type: string;
+    public val_sp: string;
+    public val_sp_param: string;
+    public sequence: string;
+    public seq_name: string;
+    public seq_sp: string;
+    public seq_sp_param: string;
+    public default1: string;
+    public default_type: string;
+    public default_value: string;
+    public default_sp: string;
+    public default_sp_param: string;
+    public calculated_field: string;
+    public cal_sp: string;
+    public cal_sp_param: string;
+    public add_to_grid: string;
+    public attr1: string;
+    public attr2: string;
+    public attr3: string;
+    public drop_value: string;
+    public dropdown: string;
+    public sp_name: string;
+    public ext_dd_id: string;
+    public sp_name_forautocomplete: string;
+    public ext_dependent_id: string;
+    public radio: string;
+    public radio_option: string; */
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/Mapping.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/Mapping.ts
@ -0,0 +1,4 @@
+export interface Mapping {
+  label: string;
+  value: string;
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/Rn_Forms_Component_Setup.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/Rn_Forms_Component_Setup.ts
@ -0,0 +1,12 @@
+import { Audit } from "../builder/Audit";
+export class Rn_Forms_Component_Setup extends Audit {
+    public component_id: number;
+    public label: string;
+    public type: string;
+    public mapping: string;
+    public mandatory: string;
+    public readonly: string;
+    public drop_values: string;
+    public sp: string;
+
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/Rn_Forms_Setup.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/Rn_Forms_Setup.ts
@ -0,0 +1,11 @@
+import { Rn_Forms_Component_Setup } from "./Rn_Forms_Component_Setup";
+import { Audit } from "../builder/Audit";
+export class Rn_Forms_Setup extends Audit {
+  public form_id: number;
+  public form_name: string;
+  public form_desc: string;
+  public related_to: string;
+  public page_event: string;
+  public button_caption: string;
+  public components: Rn_Forms_Component_Setup[];
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/RuleCopy.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/RuleCopy.ts
@ -0,0 +1,20 @@
+export class RuleCopy {
+  public from_tech_stack: string;
+public from_object_type: string;
+public from_sub_object_type: string;
+public to_tech_stack: string;
+public to_object_type: string;
+public to_sub_object_type: string;
+
+}
+
+export interface Rule {
+  tech_stack: string;
+  object_type: string;
+  sub_object_type: string;
+  version: string;
+  replacement_string: string;
+  keyword: string;
+  priority: number;
+  service: string;
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/Studentadd.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/Studentadd.ts
@ -0,0 +1,10 @@
+
+
+export class student  {
+  public id: number;
+  public wf_id:number;
+  public current_json: string;
+  public status: string;
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/TableList.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/TableList.ts
@ -0,0 +1,4 @@
+export interface TableList {
+  // id: number;
+ table_name: string;
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/ValidationError.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/ValidationError.ts
@ -0,0 +1,4 @@
+export class ValidationError {
+  field: any;
+  message: any;
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/apiregisteryline.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/apiregisteryline.ts
@ -0,0 +1,10 @@
+export class ApiRegisteryLine {
+    public id: number;
+    public url: string;
+    public method: string;
+    public header_id: number;
+
+
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/book.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/book.ts
@ -0,0 +1,10 @@
+export class book  {
+  public id: number;
+  public booktype: string;
+  public bookname: string;
+  public price: number;
+  public writer: string;
+  public code:number;
+
+
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/department.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/department.ts
@ -0,0 +1,10 @@
+export class Department {
+  public id: number;
+  public department_code: string;
+  public description: string;
+  public active: string;
+ public created_by:string;
+ public created_on:string;
+ public updated_by:string;
+ public updated_on:string;
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/health_checkup.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/health_checkup.ts
@ -0,0 +1,10 @@
+export class HealthCheckup {
+    public id: number;
+    public ip: string;
+    public port: number;
+    public serviceName: string;
+    public createProject: boolean;
+    public buildProject: boolean;
+    public createDeployment: boolean;
+    public deployApp: boolean;
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/play.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/play.ts
@ -0,0 +1,9 @@
+export class College {
+  public studentid: number;
+  public wf_instance_id:number;
+  public studentname: string;
+  public department: string;
+  public joiningDate: string;
+  public phone: number;
+ public emailId:string;
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/table-setup.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/table-setup.ts
@ -0,0 +1,4 @@
+export interface TableList {
+  // id: number;
+ table_name: string;
+}
--- a/frontend/angular-clarity-master/src/app/models/fnd/university.ts
+++ b/frontend/angular-clarity-master/src/app/models/fnd/university.ts
@ -0,0 +1,11 @@
+import {book} from '../../models/fnd/book';
+
+export class university  {
+  public id: number;
+  public name: string;
+  public email: string;
+  public subject: string;
+  public phone: number;
+  public books: book[];
+
+}
--- a/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.css
+++ b/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.css
@ -0,0 +1,45 @@
+.clr-input {
+  color: #212529;
+  padding: 0.75rem 0.75rem;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+input[type=text], [type=password], [type=number], [type=email], [type=date], textarea {
+  width: 80%;
+  padding: 15px 15px;
+  background-color: rgb(255, 255, 255);
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.eye {
+  position: absolute;
+}
+
+#hide1 {
+  display: none;
+}
+
+.container {
+  align-content: center;
+}
+
+.center {
+  width: auto;
+  margin: 0 auto;
+}
+
+.required-field, .error_mess {
+  color: red;
+}
+
+select {
+  margin: 15px 0px;
+  width: 80%;
+  padding: 5px 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}/*# sourceMappingURL=about-work.component.css.map */
--- a/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.css.map
+++ b/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.css.map
@ -0,0 +1 @@
+{"version":3,"sources":["about-work.component.scss","about-work.component.css"],"names":[],"mappings":"AAAA;EACE,cAAA;EAGA,wBAAA;EACA,gBAAA;EACA,mBAAA;ACDF;;ADGA;EACE,UAAA;EACA,kBAAA;EACA,oCAAA;EAEA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,sBAAA;ACDF;;ADGA;EACE,kBAAA;ACAF;;ADGA;EACE,aAAA;ACAF;;ADGA;EACE,qBAAA;ACAF;;ADGA;EACE,WAAA;EACA,cAAA;ACAF;;ADGA;EACE,UAAA;ACAF;;ADGA;EACE,gBAAA;EACA,UAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;ACAF","file":"about-work.component.css"}
--- a/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.html
@ -0,0 +1,261 @@
+<!-- <div *ngIf="data1 else showThis"> -->
+  <!-- <div *ngIf="editMode === 'data1';then basic_property"> -->
+
+
+    <div class="container center">
+      <h2 class="text-center"><b>Welcome to <strong>cloudnsure!</strong></b></h2>
+      <h5 *ngIf="!companyForm" class="text-center" style="margin-top: 10px;">Tell Us More About You <img src="../../../../assets/images/icon/handshakeicon.png" ></h5>
+      <h5 *ngIf="companyForm" class="text-center" style="margin-top: 10px;">Tell Us About Your Work!</h5>
+      <!-- <h5 class="text-center">You're signing up as <strong style="font-size: 20px;">{{ email }}</strong></h5> -->
+      <div class="display_msg">
+      <form [formGroup]="custentryForm" class="form" style="text-align: center;" *ngIf="!companyForm">
+        <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>First Name</strong><span class="required-field">*</span></label><br/> -->
+          <input class="form__field" type="text" formControlName="first_name"  placeholder="First Name" >
+          <div *ngIf="custsubmitted && custentryForm.controls.first_name.errors" class="error_mess">
+            <div *ngIf="custsubmitted && custentryForm.controls.first_name.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>Last Name</strong><span class="required-field">*</span></label><br/> -->
+          <input class="form__field" type="text" id="name" formControlName="last_name"  placeholder="Last Name" >
+          <div *ngIf="custsubmitted && custentryForm.controls.last_name.errors" class="error_mess">
+            <div *ngIf="custsubmitted && custentryForm.controls.last_name.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>Mobile</strong><span class="required-field">*</span></label><br/> -->
+          <input formControlName="mob_no" class="form__field" type="number"  placeholder="Mobile Number"  ng2TelInput/>
+          <div *ngIf="custsubmitted && custentryForm.controls.mob_no.errors" class="error_mess">
+            <div *ngIf="custsubmitted && custentryForm.controls.mob_no.errors.required" class="error_mess">*This field is Required</div>
+            <div *ngIf="custsubmitted && custentryForm.controls.mob_no.errors.minlength" class="error_mess">*Number must be 10 digit.</div>
+            <div *ngIf="custsubmitted && custentryForm.controls.mob_no.errors.pattern" class="error_mess">*Invalid mobile number</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>Date Of Birth</strong><span class="required-field">*</span></label><br/> -->
+          <input class="form__field"  type="date" formControlName="date_of_birth" >
+          <div *ngIf="custsubmitted && custentryForm.controls.date_of_birth.errors" class="error_mess">
+            <div *ngIf="custsubmitted && custentryForm.controls.date_of_birth.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>Gender</strong><span class="required-field">*</span></label><br> -->
+          <select formControlName="gender" class="form__field">
+              <option [value]="null">Choose Gender</option>
+              <option>Male</option>
+              <option>Female</option>
+              <option>Other</option>
+          </select>
+          <div *ngIf="custsubmitted && custentryForm.controls.gender.errors" class="error_mess">
+              <div *ngIf="custsubmitted && custentryForm.controls.gender.errors.required" class="error_mess">*This field is Required</div>
+            </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>Password</strong><span class="required-field">*</span></label><br/> -->
+         <input [type]="newpHide ? 'password': 'text'" class="form__field" placeholder="Password" formControlName="new_password" minlenght="6" maxlength="40" style="width: 89%;" [autocomplete]="true">
+            <clr-icon [attr.shape]="newIcon" (click)="newShapeChanger()"></clr-icon>
+          <div *ngIf="custsubmitted && custentryForm.controls.new_password.errors" class="error_mess">
+            <div *ngIf="custsubmitted && custentryForm.controls.new_password.errors.required" class="error_mess">*This field is Required</div>
+            <div *ngIf="custsubmitted && custentryForm.controls.new_password.errors.minlength" class="error_mess">*Password must be 6 characters or longer.</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>Re-enter Password</strong><span class="required-field">*</span></label><br/> -->
+           <input type="password" class="form__field" formControlName="confirm_password" placeholder="Re-enter Password">
+          <div *ngIf="custsubmitted && custentryForm.controls.confirm_password.errors" class="error_mess">
+            <div *ngIf="custsubmitted && custentryForm.controls.confirm_password.errors.required" class="error_mess">*This field is Required</div>
+            <div *ngIf="custentryForm.controls.confirm_password.errors.confirmedValidator" class="error_mess">* Password and Confirm Password must be match.</div>
+          </div>
+        </div>
+        <br>
+        <div class="center text-center">
+          <button type="submit"  class="btn btn--primary uppercase" (click)="oncustSubmit()">Submit</button>
+        </div>
+  
+      </form>
+         <p *ngIf="!companyForm"> Wrong account? <a routerLink="/login">Log in</a> instead.</p>
+      </div>
+      <div class="display_msg">
+      <form [formGroup]="entryForm" class="form" style="text-align: center;" *ngIf="companyForm" >
+  
+        <!-- <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>Name</strong><span class="required-field">*</span></label><br/>
+          <input class="clr-input" type="text" id="name" formControlName="name"  placeholder="Enter Name" >
+          <div *ngIf="submitted && entryForm.controls.name.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.name.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div> -->
+        <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>Company Name</strong><span class="required-field">*</span></label><br/> -->
+          <input class="form__field" type="text" id="name" formControlName="companyName"  placeholder="Company Name" >
+          <div *ngIf="submitted && entryForm.controls.companyName.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.companyName.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>Workspace</strong><span class="required-field">*</span></label><br/> -->
+          <input class="form__field" type="text" placeholder="Workspace" formControlName="workspace" >
+          <div *ngIf="submitted && entryForm.controls.workspace.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.workspace.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>GST Number</strong><span class="required-field">*</span></label><br/> -->
+          <input class="form__field" type="text" placeholder="GST Number" formControlName="gstNumber"
+          [(ngModel)]="entryForm.value.gstNumber" (ngModelChange)="entryForm.value.gstNumber = $event?.toUpperCase()">
+          <div *ngIf="submitted && entryForm.controls.gstNumber.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.gstNumber.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+  
+  
+  
+        <!-- <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>Password</strong><span class="required-field">*</span></label><br/>
+          <input class="clr-input" type="password" id="password" formControlName="password">
+          <div *ngIf="submitted && entryForm.controls.password.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.password.errors.required" class="error_mess">*This field is Required</div>
+            <div *ngIf="submitted && entryForm.controls.password.errors.minlength" class="error_mess">*Password must be 8 characters or longer.</div>
+          </div>
+        </div>
+        <br/>
+        <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>Re-enter Password</strong><span class="required-field">*</span></label><br/>
+          <input class="clr-input" type="password" id="confirm_password" formControlName="confirm_password">
+          <div *ngIf="submitted && entryForm.controls.confirm_password.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.confirm_password.errors.required" class="error_mess">*This field is Required</div>
+            <div *ngIf="entryForm.controls.confirm_password.errors.confirmedValidator" class="error_mess">* Password and Confirm Password must be match.</div>
+          </div>
+        </div> -->
+        <!-- <br>
+        <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>Mobile</strong><span class="required-field">*</span></label><br/>
+          <input formControlName="mobile" class="clr-input" type="number"  placeholder="Enter Mobile No"  ng2TelInput/>
+          <div *ngIf="submitted && entryForm.controls.mobile.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.mobile.errors.required" class="error_mess">*This field is Required</div>
+            <div *ngIf="submitted && entryForm.controls.mobile.errors.minlength" class="error_mess">*Number must be 10 digit.</div>
+            <div *ngIf="submitted && entryForm.controls.mobile.errors.pattern" class="error_mess">*Invalid mobile number</div>
+          </div>
+        </div> -->
+  
+        <!-- <br>
+        <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>Email</strong><span class="required-field">*</span></label><br/>
+          <input class="clr-input" type="text" id="email" name="email" formControlName="email"  placeholder="Enter Email"  required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
+          <div *ngIf="submitted && entryForm.controls.email.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.email.errors.required" class="error_mess">*This field is Required</div>
+            <div *ngIf="submitted && entryForm.controls.email.errors.pattern" class="error_mess">*Email must be a valid email address</div>
+          </div>
+        </div> -->
+  <br>
+        <div class="center">
+          <!-- <label for="controllerName"><strong>Pancard</strong><span class="required-field">*</span></label><br/> -->
+          <input class="form__field" type="text" placeholder="Pancard Number" formControlName="pancard"  [(ngModel)]="entryForm.value.pancard" (ngModelChange)="entryForm.value.pancard = $event?.toUpperCase()">
+          <div *ngIf="submitted && entryForm.controls.pancard.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.pancard.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        
+  
+        <br>
+        <div class="center">
+          <!-- <label for="country"><strong>Country</strong><span class="required-field">*</span></label><br/> -->
+          <input class="form__field" type="text" id="country" formControlName="country"  placeholder="Country Name" >
+          <div *ngIf="submitted && entryForm.controls.country.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.country.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="state"><strong>State/Province</strong><span class="required-field">*</span></label><br/> -->
+          <input class="form__field" type="text" id="state" formControlName="state"  placeholder="State/Province Name" >
+          <div *ngIf="submitted && entryForm.controls.state.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.state.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="city"><strong>City</strong></label><br/> -->
+          <input class="form__field" type="text" id="city" formControlName="city"  placeholder="City Name" >
+          <div *ngIf="submitted && entryForm.controls.city.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.city.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="street_address"><strong>Street Address</strong></label><br/> -->
+          <textarea col="10" row="2" id="street_address"  class="form__field" formControlName="street_address" placeholder="Address" [autocomplete]="true"></textarea>
+          <div *ngIf="submitted && entryForm.controls.street_address.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.street_address.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        <br>
+        <div class="center">
+          <!-- <label for="street_address2"><strong>Street Address 2</strong></label><br/> -->
+          <textarea col="10" row="2" id="street_address2"  class="form__field" formControlName="street_address2" placeholder="Address 2" [autocomplete]="true"></textarea>
+          <div *ngIf="submitted && entryForm.controls.street_address2.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.street_address2.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+  
+        <!-- <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>Working</strong><span class="required-field">*</span></label><br/>
+          <input class="clr-input" type="text" placeholder="Enter Working" formControlName="working" >
+          <div *ngIf="submitted && entryForm.controls.working.errors" class="error_mess">
+            <div *ngIf="submitted && entryForm.controls.working.errors.required" class="error_mess">*This field is Required</div>
+          </div>
+        </div>
+        <br> -->
+  
+        <br>
+        <div class="center text-center">
+          <button type="submit"  class="btn btn--primary uppercase" (click)="onSubmit()" >continue</button>
+        </div>
+  
+      </form>
+      <p *ngIf="companyForm"> Wrong account? <a routerLink="/login">Log in</a> instead.</p>
+    </div>
+      <!-- <h4>Wrong account? <a href="">Log in</a> instead.</h4> -->
+  
+    </div>
+  
+  <!-- </div> -->
+  
+  
+  <!-- <div *ngIf="data1==false">
+    <h2>error page</h2>
+  </div> -->
+  <!-- <ng-template #showThis>
+    <h2 style="text-align: center; color: red;"><strong><b>This is error page</b></strong></h2> -->
+  
+  
+  <!-- <a routerLink="/error-page"></a> -->
+  <!-- <a [routerLink]="['/error-page']"> -->
+  <!-- link to user component -->
+  <!-- </a> -->
+  
+  <!-- <button (click)="back()"></button> -->
+  <!--
+  </ng-template> -->
+  
+  <!-- <ng-template #showThis>
+    <h2 style="text-align: center; color: red;"><strong><b>This is error page</b></strong></h2>
+  
+  
+  </ng-template> -->
+  
+  <!-- <ng-template #basic_property>
+    hjshfj
+  </ng-template> -->
+  
--- a/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.scss
@ -0,0 +1,122 @@
+// .clr-input {
+//   color: #212529;
+//   //  border: 1px solid #ced4da;
+//   //   border-radius: 0.25rem;
+//   padding: 0.75rem 0.75rem;
+//   margin-top: 10px;
+//   margin-bottom: 10px;
+// }
+// input[type=text],[type=password],[type=number],[type=email],[type=date],textarea {
+//   width: 80%;
+//   padding: 15px 15px;
+//   background-color:rgb(255, 255, 255);
+//  // margin: 8px 0;
+//   display: inline-block;
+//   border: 1px solid #ccc;
+//   border-radius: 4px;
+//   box-sizing: border-box;
+// }
+// .eye {
+//   position: absolute;
+// }
+
+// #hide1 {
+//   display: none;
+// }
+
+// .container {
+//   align-content: center;
+// }
+
+// .center {
+//   width: auto;
+//   margin: 0 auto;
+// }
+
+.required-field,.error_mess{
+	color:indianred;
+	 font-weight: bold;
+   
+   }
+   // select{
+   //   margin:15px 0px;
+   //   width: 80%;
+   //   padding: 5px 5px;
+   //   border: 1px solid #ccc;
+   //   border-radius: 4px;
+   // }
+   
+   
+   
+   
+   
+   
+   $background: #f5f6fa;
+   $text: #9c9c9c;
+   $input-bg-color: #fff;
+   $input-text-color: #a3a3a3;
+   $button-bg-color: #7f8ff4;
+   $button-text-color: #fff;
+   $google-button-bg-color: #7f8ff4;
+   $linkedin-button-bg-color: #4b76eb;
+   
+   
+   :root {
+	   background: $background;
+	   color: $text;
+	   font: 1rem "PT Sans", sans-serif;
+   }
+   
+   //** helper
+   .display_msg {
+	   display: flex;
+	   flex-direction: column;
+	   align-items: center;
+	   justify-content: center;
+   }
+   
+   .form {
+		&__field {
+	 width: 360px;
+	 padding: 7px 9px;
+	margin: 0 12px;
+	background-color:rgb(255, 255, 255);
+	 display: inline-block;
+	 border: 1px solid #ccc;
+	 border-radius: 4px;
+	 box-sizing: border-box;
+	   }
+   }
+   
+   .btn {
+	   display: inline-block;
+	   background: transparent;
+	   color: inherit;
+	   font: inherit;
+	   border: 0;
+	   outline: 0;
+	   padding: 0;
+	   transition: all 200ms ease-in;
+	   cursor: pointer;
+   
+	   &--primary {
+		   background: $button-bg-color;
+		   color: $button-text-color;
+		   box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
+		   border-radius: 2px;
+		   width: 100%;
+   
+		   &:hover {
+			   background: darken($button-bg-color, 4%);
+		   }
+   
+		   &:active {
+			   background: $button-bg-color;
+			   box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, .2);
+		   }
+	   }
+   }
+   // form {
+   //   margin-left: 8%;
+   // }
+   
--- a/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.spec.ts
+++ b/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutWorkComponent } from './about-work.component';
+
+describe('AboutWorkComponent', () => {
+  let component: AboutWorkComponent;
+  let fixture: ComponentFixture<AboutWorkComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AboutWorkComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutWorkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/login/about-work/about-work.component.ts
@ -0,0 +1,301 @@
+import {Component, OnInit} from '@angular/core';
+import {AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators} from '@angular/forms';
+import {ActivatedRoute, Router} from '@angular/router';
+import { UserProfileService } from 'src/app/services/admin/user-profile.service';
+import { UserRegistrationService } from 'src/app/services/admin/user-registration.service';
+import { environment } from 'src/environments/environment';
+import { CustomerService } from './customer.service';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-about-work',
+  templateUrl: './about-work.component.html',
+  styleUrls: ['./about-work.component.scss']
+})
+
+
+
+export class AboutWorkComponent implements OnInit {
+
+  // LoginUrl = environment.portalurl;
+  public entryForm: FormGroup;
+  public custentryForm: FormGroup; // user
+  public customerentryForm: FormGroup;
+  aboutdata;
+  id: number;
+  checknumberId: number;
+  data1: boolean;
+  name:string;
+  email: string;
+  submitted = false;
+  custsubmitted = false;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private userRegistration: UserRegistrationService,
+    private _fb: FormBuilder,
+    private userprofile: UserProfileService,
+    private customerservice: CustomerService,
+    private toastr: ToastrService
+  ) {
+  }
+  companyid = 1;
+  ngOnInit(): void {
+    this.route.queryParams.subscribe(params => {
+      this.email = params['email'];
+      console.log(this.email)
+    });
+    this.id = this.route.snapshot.params['id'];
+    this.checknumberId = this.route.snapshot.params['checknumberId'];
+    this.name = this.userRegistration.getStoredName();
+    console.log(this.id, this.checknumberId);
+    this.userRegistration.removeStoredName();
+
+    // this.data1 = this.route.snapshot.data['data1'];
+    // if (this.id >= 0) {
+    //   this.onCheck();
+
+    // }
+    // else {
+    //   this.router.navigate(['../about-work']);
+    // }
+
+
+    this.onCheck();
+    // this.email = this.userRegistration.getStoredEmail();
+
+    this.custentryForm = this._fb.group({
+      first_name: [null, [Validators.required]],
+      last_name:[null,  [Validators.required]],
+      mob_no:[null,[Validators.required,Validators.pattern('^[0-9]{10}$')]],
+      email:[this.email],
+      usrGrpId:[41],
+      new_password: [null, [Validators.required,Validators.minLength(6),Validators.maxLength(40)]],
+      confirm_password: [null, [Validators.required]],
+      account_id:[this.companyid],
+
+      date_of_birth:[null, [Validators.required]],
+      gender:[null,Validators.required]
+
+    }, {
+       validator: ConfirmedValidator('new_password', 'confirm_password')
+    });
+
+
+    this.entryForm = this._fb.group({
+      companyName:[null,  [Validators.required]],
+      pancard:[null,[Validators.required]],
+      workspace:[null,[Validators.required]],
+      email: [this.email,[Validators.required,Validators.email]],
+      gstNumber:[null,[Validators.required]],
+      mobile: [this.custentryForm.value.mob_no, [Validators.pattern('^[0-9]{10}$')]],
+
+      country:[null,[Validators.required]],
+      state:[null,[Validators.required]],
+      city:[null],
+      street_address:[null],
+      street_address2:[null],
+
+    }, {
+    });
+
+    this.customerentryForm = this._fb.group({
+      first_name: [null],
+      last_name:[null],
+      date_of_birth:[null],
+      gender:[null],
+      companyId:[null],
+      time_zone:[null,],
+      gst_state:[null],
+      email:[null],
+      entity_name:[this.companyid],
+
+    });
+  }
+
+  companyForm:boolean = false;
+  oncustSubmit(){
+    console.log(this.custentryForm.value);
+    // this.custentryForm.value.entity_name = this.companyid;
+    if (this.custentryForm.invalid) {
+      this.custsubmitted = true;
+      return;
+    }else{
+      // this.companyForm = true;
+      // this.oncustContinue();
+      this.onContinue();
+    }
+  
+  }
+  selectedFile;
+    oncustContinue() {
+  
+     
+      
+      console.log(this.custentryForm.value);
+  
+      this.customerservice.saveCustomer(this.custentryForm.value, this.selectedFile).subscribe((data => {
+        console.log(data);
+        console.log(data.id, "User id");
+        console.log("Roles", data.role);
+        console.log(data.checknumberId, "checknumber");
+        this.aboutdata = data;
+        if (data.role == "USER") {
+          this.router.navigate(["../login/"]);
+          // window.location.href = `${this.LoginUrl}/#/login`;
+        } else {
+          this.router.navigate(["../pricing/" + data.id]);
+        }
+  
+      }))
+    }
+
+
+
+userId;
+  
+onSubmit(){
+  this.entryForm.value.email = this.email
+  if (this.entryForm.invalid) {
+    this.submitted = true;
+    return;
+  }else{
+    this.onContinue();
+  }
+
+}
+  onContinue() {
+
+   
+    // this.entryForm.value.mobile =  this.custentryForm.value.mob_no;
+    console.log(this.custentryForm.value);
+
+    // this.userprofile.addUserinSignUP(this.entryForm.value).subscribe(data => {
+    //   console.log(data);
+    //   this.companyid = data.account_id;
+    //   console.log(this.companyid, "company id");
+    //   this.aboutdata = data;
+    //   this.custentryForm.value.account_id = data?.account_id
+    //   // this.custentryForm.value.new_password = 
+    //   console.log(this.custentryForm.value);
+      this.userprofile.adduserData(this.custentryForm.value).subscribe(cdata => {
+        console.log(cdata);
+        this.userId = cdata.userId;
+
+      if (cdata) {
+        this.toastr.success("Registrated Successfully");
+        this.router.navigate(["../login/"]);
+      } else {
+        this.router.navigate(["../login/"]);
+      }
+      // this.customerentryForm.get('companyId').setValue(this.companyid);
+      // this.customerentryForm.get('gst_state').setValue(this.entryForm.value.state);
+      // this.customerentryForm.get('entity_name').setValue(this.entryForm.value.companyName);
+      // this.customerentryForm.get('first_name').setValue(this.custentryForm.value.first_name);
+      // this.customerentryForm.get('last_name').setValue(this.custentryForm.value.last_name);
+      // this.customerentryForm.get('date_of_birth').setValue(this.custentryForm.value.date_of_birth);
+      // this.customerentryForm.get('gender').setValue(this.custentryForm.value.gender);
+      // this.customerentryForm.get('email').setValue(this.email);
+
+
+      // this.customerservice.saveCustomer(this.customerentryForm.value, this.selectedFile).subscribe(data => {
+      //   console.log(data);
+      //   console.log(data.id, "User id");
+      //   this.aboutdata = data;
+      //   if (data.status >= 200 && data.status <= 299) {
+      //     console.log(data?.body)
+      //     this.router.navigate(["../pricing/" + this.companyid +"/" +this.userId]);
+      //   }
+      // })
+    },(error)=>{
+      console.log(error);
+      this.toastr.error(error?.error.message);
+    })
+    // })
+  }
+
+
+
+
+
+
+
+
+  onCheck() {
+
+    this.userprofile.getUser(this.id, this.checknumberId).subscribe((data => {
+      // console.log(data.userId, "User id");
+      console.log("data", data.email);
+      console.log(data);
+      this.data1 = data;
+      this.email = data.email;
+      this.name=data.fullName;
+      (<FormControl>this.entryForm.controls['email']).setValue(data.email);
+      (<FormControl>this.entryForm.controls['name']).setValue(data.fullName);
+      console.log(this.name)
+
+    }))
+
+
+  }
+
+
+  onCountryChange(event) {
+    console.log(event.dialCode);
+    console.log(event.name);
+    console.log(event.iso2);
+  }
+
+  back() {
+    this.router.navigate(["../../all"], {relativeTo: this.route});
+  }
+
+
+  newpHide: boolean = true;
+  newIcon: string = "eye";
+  newShapeChanger() {
+    this.newpHide = !this.newpHide;
+    if(this.newpHide){
+      this.newIcon = 'eye'
+    } else {
+      this.newIcon = 'eye-hide'
+    }
+  }
+
+
+  cnewpHide: boolean = true;
+  cnewIcon: string = "eye";
+  cnewShapeChanger() {
+    this.cnewpHide = !this.cnewpHide;
+    if(this.cnewpHide){
+      this.cnewIcon = 'eye'
+    } else {
+      this.cnewIcon = 'eye-hide'
+    }
+  }
+
+}
+// export function passwordMatchValidator(control: AbstractControl): ValidationErrors | null {
+//   const password = control.get('password');
+//   const confirmPassword = control.get('confirmPassword');
+
+//   if (password.value !== confirmPassword.value) {
+//     return { passwordMismatch: true };
+//   }
+
+//   return null;
+// }
+export function ConfirmedValidator(controlName: string, matchingControlName: string){
+  return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (matchingControl.errors && !matchingControl.errors.confirmedValidator) {
+          return;
+      }
+      if (control.value !== matchingControl.value) {
+          matchingControl.setErrors({ confirmedValidator: true });
+      } else {
+          matchingControl.setErrors(null);
+      }
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/login/about-work/customer.service.ts
+++ b/frontend/angular-clarity-master/src/app/modules/login/about-work/customer.service.ts
@ -0,0 +1,152 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ApiRequestService } from 'src/app/services/api/api-request.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CustomerService {
+
+  constructor(private apiRequest: ApiRequestService) { }
+
+  saveCustomer(data: any, file?: any): Observable<any> {
+    const url = `token/Customer_master/Customer_master`;
+    const formData = new FormData();
+    formData.append('body', JSON.stringify(data));
+    formData.append('file', file);
+
+    return this.apiRequest.postFormData(url, formData);
+  }
+
+  updateCustomer(data: any, file: any,id: number): Observable<any> {
+    const url = `token/Customer_master/Customer_master/${id}`;
+
+    const formData = new FormData();
+    formData.append('body', JSON.stringify(data));
+    formData.append('file', file);
+
+    return this.apiRequest.postFormData(url, formData);
+  }
+
+  getAllCustomers(): Observable<any> {
+    const url = `token/Customer_master/Customer_master`;
+    return this.apiRequest.get(url);
+  }
+
+  getCustomerById(id: number): Observable<any> {
+    const url = `token/Customer_master/Customer_master/${id}`;
+    return this.apiRequest.get(url);
+  }
+
+  deleteCustomerById(id: number): Observable<any> {
+    const url = `token/Customer_master/Customer_master/${id}`;
+    return this.apiRequest.delete(url);
+  }
+
+
+
+
+  ////////site
+
+  // saveCustomersite(data: any, file: any): Observable<any> {
+  //   const url = `Sites/Sites`;
+  //   const formData = new FormData();
+  //   formData.append('body', JSON.stringify(data));
+  //   formData.append('file', file);
+
+  //   return this.apiRequest.postFormData(url, formData);
+  // }
+  saveCustomersite(data: any): Observable<any> {
+    const url = `Sites/Sites`;
+    return this.apiRequest.postFormData(url, data);
+  }
+
+  // updateCustomersite(data: any, file: any,id: number): Observable<any> {
+  //   const url = `Sites/Sites/${id}`;
+
+  //   const formData = new FormData();
+  //   formData.append('body', JSON.stringify(data));
+  //   formData.append('file', file);
+
+  //   return this.apiRequest.postFormData(url, formData);
+  // }
+
+  updateCustomersite(data: any,id: number): Observable<any> {
+    const url = `Sites/Sites/${id}`;
+    return this.apiRequest.put(url, data);
+  }
+
+  getAllCustomerssite(): Observable<any> {
+    const url = `Sites/Sites`;
+    return this.apiRequest.get(url);
+  }
+
+  getCustomersiteById(id: number): Observable<any> {
+    const url = `Sites/Sites/${id}`;
+    return this.apiRequest.get(url);
+  }
+
+  deleteCustomersiteById(id: number): Observable<any> {
+    const url = `Sites/Sites/${id}`;
+    return this.apiRequest.delete(url);
+  }
+  
+
+  getsiteBycustId(id: number): Observable<any> {
+    const url = `Sites/getSitesByCustomer/${id}`;
+    return this.apiRequest.get(url);
+  }
+
+
+
+  ////// custom package
+
+    public savecustompkgeData(data: any): Observable<any> {
+      return this.apiRequest.post(`Billing/CustomPackage/CustomPackage`, data);
+    }
+  
+    public getcustompkgDetails(): Observable<any> {
+      return this.apiRequest.get(`Billing/CustomPackage/CustomPackage`);
+    }
+  
+    public getcustompkgDetailsById(id: number): Observable<any> {
+      return this.apiRequest.get(`Billing/CustomPackage/CustomPackage/${id}`);
+    }
+  
+    public deletecustompkgById(id: number): Observable<any> {
+      return this.apiRequest.delete(`Billing/CustomPackage/CustomPackage/${id}`);
+    }
+  
+    public updatecustompkgData(data: any, id: number): Observable<any> {
+      return this.apiRequest.put(`Billing/CustomPackage/CustomPackage/${id}`, data);
+    }
+
+
+    ///biiling total
+    public billingTotal(invoiceId: number, creditNoteId:number,paymentId): Observable<any> {
+      return this.apiRequest.get(`Billing/Payments/alltotall/${invoiceId}/${creditNoteId}/${paymentId}`);
+    }
+
+    public getdatabycustID(customerId: any): Observable<any> {
+      return this.apiRequest.get(`token/Customer_master/getReceiptApplication/${customerId}`);
+    }
+
+
+    ////// list  of  items
+    //generate
+     getServicesBycustId(customerId: any): Observable<any> {
+      return this.apiRequest.get(`token/Customer_master/getAllservices/${customerId}`);
+    }
+
+    //generate 2
+    getServices2BycustId(customerId: any): Observable<any> {
+      return this.apiRequest.get(`token/Customer_master/getAllservicesWithDisc/${customerId}`);
+    }
+
+    //discount and charges
+        //generate
+        getdiscountchargesBycustId(customerId: any): Observable<any> {
+          return this.apiRequest.get(`token/Customer_master/getAllservicesWithDiscOrderlevel/${customerId}`);
+        }
+
+}
--- a/frontend/angular-clarity-master/src/app/modules/login/addguest/addguest.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/login/addguest/addguest.component.html
@ -0,0 +1,137 @@
+<clr-main-container>
+  <clr-header class="header-5">
+    <div class="branding">
+      <a href="javascript://" class="nav-link">
+        <a href="#" class="logo">
+          <img class="img" src="assets/images/icon/micrologo.png" alt="" height="50" width="50">
+        </a>
+        <div style="width:40px;margin-right:10px;">
+
+        </div>
+        <span class="title">cloudnSure</span>
+      </a>
+    </div>
+  </clr-header>
+
+
+
+  <!-- <div *ngIf="editMode === 'data1';then basic_property"> -->
+
+
+  <!-- <div class="container">
+
+      <h2 class="text-center"><b>Welcome to <strong>cloudnsure!</strong></b></h2>
+      <h5 class="text-center">You're signing up as <strong style="font-size: 20px;">here is email</strong></h5>
+      <br>
+
+      <form [formGroup]="form" (ngSubmit)="onContinue()" class="pop" style="text-align: center;">
+
+        <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>What's your full name?</strong></label><br/>
+          <input class="clr-input" type="text" id="name" formControlName="name"  value="name"
+          >
+
+        </div>
+
+
+        <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>Password</strong></label><br/>
+          <input class="clr-input" type="password" id="password" formControlName="password"
+          >
+
+
+        </div>
+        <br/>
+        <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>Re-enter Password</strong></label><br/>
+          <input class="clr-input" type="password" id="cpass" formControlName="">
+
+
+        </div>
+        <br>
+        <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>Mobile</strong></label><br/>
+
+          <input formControlName="mobile" class="clr-input" type="number" ng2TelInpu
+          />
+
+        </div>
+
+        <br>
+        <div class="clr-col-md-4 clr-col-sm-12 center">
+          <label for="controllerName"><strong>Email</strong></label><br/>
+          <input class="clr-input" type="text" id="email" name="email" formControlName="email"
+          >
+
+        </div>
+        <br>
+
+        <br>
+        <div class="center text-center">
+          <button type="submit" class="btn btn-primary">continue</button>
+        </div>
+
+      </form>
+      <br/>
+
+
+      <h4>Wrong account? <a href="">Log in</a> instead.</h4>
+
+    </div> -->
+
+  <div class="container">
+    <div class="display_msg">
+      <h2 class="text-center"><b>Welcome to <strong>cloudnsure!</strong></b></h2>
+      <h5 class="text-center" *ngIf="email">You're signing up as <strong style="font-size: 20px;">{{email}}</strong>
+      </h5>
+      <br>
+      <form class="form" [formGroup]="form">
+        <label><b>First Name</b></label><br>
+        <input type="text" class="form__field" placeholder="Enter First Name" formControlName="first_name">
+        <div *ngIf="f.first_name.invalid && (f.first_name.dirty || f.first_name.touched)"
+          style="color:indianred; font-weight: bold">
+          <div *ngIf="f.first_name.errors.required">First Name is required</div>
+        </div>
+        <br>
+        <label><b>Last Name</b></label><br>
+        <input type="text" class="form__field" placeholder="Enter Last Name" formControlName="last_name">
+        <div *ngIf="f.last_name.invalid && (f.last_name.dirty || f.last_name.touched)"
+          style="color:indianred; font-weight: bold">
+          <div *ngIf="f.last_name.errors.required">Last Name is required</div>
+        </div>
+        <br>
+        <label><b>Mobile Number</b></label><br>
+        <input type="text" class="form__field" placeholder="Enter Mobile Number" formControlName="mob_no">
+        <div *ngIf="f.mob_no.invalid && (f.mob_no.dirty || f.mob_no.touched)"
+          style="color:indianred; font-weight: bold">
+          <div *ngIf="f.mob_no.errors.required">Mobile Number is required</div>
+          <div *ngIf="f.mob_no.errors.minlength">Mobile Number is 10 numbers</div>
+        </div>
+        <br>
+        <label><b>New Password</b></label><br>
+        <input class="form__field" type="password" [type]="newpHide ? 'password': 'text'"
+          placeholder="Enter New Password" formControlName="password" />
+        <clr-icon [attr.shape]="newIcon" (click)="newShapeChanger()"></clr-icon>
+        <div *ngIf="f.password.invalid && (f.password.dirty || f.password.touched)"
+          style="color:indianred; font-weight: bold">
+          <div *ngIf="f.password.errors.required">password is required</div>
+          <div *ngIf="f.password.errors.minlength">Password must be Minimum 6 Characters</div>
+        </div>
+        <br>
+        <label><b>Re-Enter New Password</b></label><br>
+        <input class="form__field" type="password" [type]="cpHide ? 'password': 'text'"
+          placeholder="Re-Enter  New Password" formControlName="confirm_password" />
+        <clr-icon [attr.shape]="conIcon" (click)="comfShapeChanger()"></clr-icon>
+        <div *ngIf="f.confirm_password.invalid && (f.confirm_password.dirty || f.confirm_password.touched)"
+          style="color:indianred; font-weight: bold">
+          <div *ngIf="f.confirm_password.errors.required">Password is required.</div>
+          <div *ngIf="f.confirm_password.errors.confirmedValidator">Password and Confirm Password must be match.</div>
+        </div>
+
+        <button type="submit" class="btn btn--primary uppercase" (click)="onsubmit()">continue</button>
+      </form>
+      <br>
+      <p style="color: red;" *ngIf="passchange"><clr-icon shape="check"></clr-icon> User Info Is Added Please Login </p>
+      <p> Wrong account? <a routerLink="/login">Log in</a> instead.</p>
+    </div>
+  </div>
--- a/frontend/angular-clarity-master/src/app/modules/login/addguest/addguest.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/login/addguest/addguest.component.scss
@ -0,0 +1,86 @@
+//@import '../../../../../styles1.scss';
+
+
+//** variables
+$background: #f5f6fa;
+$text: #9c9c9c;
+$input-bg-color: #fff;
+$input-text-color: #a3a3a3;
+$button-bg-color: #7f8ff4;
+$button-text-color: #fff;
+$google-button-bg-color: #7f8ff4;
+$linkedin-button-bg-color: #4b76eb;
+
+//** root
+:root {
+	background: $background;
+	color: $text;
+	font: 1rem "PT Sans", sans-serif;
+}
+
+//** helper
+.display_msg {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.form {
+	/* margin-left: auto;
+	margin-right: auto; */
+	 &__field {
+	// 	width: 360px;
+	// 	//background: #fff;
+	// 	color: $input-text-color;
+	// 	font: inherit;
+	// 	//box-shadow: 0 6px 10px 0 rgba(0, 0, 0 , .1);
+	// 	border: 1 solid rgb(235, 230, 230);
+  //   background-color:rgb(255, 255, 255);
+  // display: inline-block;
+  //   border-radius: 4px;
+  // box-sizing: border-box;
+	// 	//outline: 0;
+	// 	padding: 6px 9px;
+  width: 360px;
+  padding: 7px 9px;
+ // margin: 3px 0;
+ background-color:rgb(255, 255, 255);
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+	}
+}
+
+.btn {
+	display: inline-block;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	border: 0;
+	outline: 0;
+	padding: 0;
+	transition: all 200ms ease-in;
+	cursor: pointer;
+
+	&--primary {
+		background: $button-bg-color;
+		color: $button-text-color;
+		box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
+		border-radius: 2px;
+		width: 100%;
+
+		&:hover {
+			background: darken($button-bg-color, 4%);
+		}
+
+		&:active {
+			background: $button-bg-color;
+			box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, .2);
+		}
+	}
+}
+form {
+  margin-left: 8%;
+}
--- a/frontend/angular-clarity-master/src/app/modules/login/addguest/addguest.component.spec.ts
+++ b/frontend/angular-clarity-master/src/app/modules/login/addguest/addguest.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddguestComponent } from './addguest.component';
+
+describe('AddguestComponent', () => {
+  let component: AddguestComponent;
+  let fixture: ComponentFixture<AddguestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddguestComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddguestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/frontend/angular-clarity-master/src/app/modules/login/addguest/addguest.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/login/addguest/addguest.component.ts
@ -0,0 +1,68 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { MyworkspaceService } from 'src/app/services/admin/myworkspace.service';
+@Component({
+  selector: 'app-addguest',
+  templateUrl: './addguest.component.html',
+  styleUrls: ['./addguest.component.scss']
+})
+export class AddguestComponent implements OnInit {
+
+  public  form: FormGroup;
+  submitted = false;
+  passchange;
+  newpHide: boolean = true;
+  newIcon: string = "eye";
+  newShapeChanger() {
+    this.newpHide = !this.newpHide;
+    if(this.newpHide){
+      this.newIcon = 'eye'
+    } else {
+      this.newIcon = 'eye-hide'
+    }
+  }
+  cpHide: boolean = true;
+  conIcon: string = "eye";
+  comfShapeChanger() {
+    this.cpHide = !this.cpHide;
+    if(this.cpHide){
+      this.conIcon = 'eye'
+    } else {
+      this.conIcon = 'eye-hide'
+    }
+  }
+  get f() { return this.form.controls; }
+  email: string;
+  token;
+  constructor(private _fb: FormBuilder,
+    private route: ActivatedRoute,
+    private mywork:MyworkspaceService) { }
+
+  ngOnInit(): void {
+    this.email = this.mywork.getStoredEmail();
+    console.log(this.email)
+    this.token = this.route.snapshot.params["id"];
+    console.log("token is ", this.token);
+    //form validation
+    this.form = this._fb.group(
+      {
+        first_name: ['', Validators.required],
+        last_name: ['', Validators.required],
+        mob_no: ['', [Validators.required,Validators.minLength(10)]],
+        password: ['',[ Validators.required, Validators.minLength(6), Validators.maxLength(40)]],
+        confirm_password: ['', Validators.required],
+
+      }, );
+  }
+  onsubmit(){
+this.mywork.addguestdetails(this.form.value,this.token).subscribe((data)=>{
+  console.log(data);
+  this.passchange=data;
+        console.log('success ', data);
+                },(err) => {
+          console.log('failure ', err);
+})
+  }
+
+}
--- a/frontend/angular-clarity-master/src/app/modules/login/emailverification/emailverification.component.css
+++ b/frontend/angular-clarity-master/src/app/modules/login/emailverification/emailverification.component.css
@ -0,0 +1,95 @@
+.header-6 {
+  background-color: #0072a3;
+}
+
+:root {
+  background: #f5f6fa;
+  color: #9c9c9c;
+  font: 1rem "PT Sans", sans-serif;
+}
+
+html,
+body,
+.container {
+  height: 100%;
+}
+
+a {
+  color: inherit;
+}
+a:hover {
+  color: #7f8ff4;
+}
+
+.email_check {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.new {
+  display: inline-block;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  transition: all 200ms ease-in;
+  cursor: pointer;
+}
+.new--newprimary {
+  background: #7f8ff4;
+  color: #fff;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  width: 100%;
+}
+.new--newprimary:hover {
+  background: #6c7ff2;
+}
+.new--newprimary:active {
+  background: #7f8ff4;
+  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
+}
+.new--primary1 {
+  background: #4CAF50;
+  color: #fff;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  width: 100%;
+}
+.new--primary1:hover {
+  background: #6c7ff2;
+}
+.new--primary1:active {
+  background: #7f8ff4;
+  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* &--inside {
+	margin-left: -96px;
+} */
+.form {
+  /* margin-left: auto;
+  margin-right: auto; */
+}
+.form__field {
+  width: 360px;
+  background: #fff;
+  color: #626161;
+  font: inherit;
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
+  border: 0;
+  outline: 0;
+  padding: 10px 18px;
+}
+
+.form__field {
+  border: 2px solid #7f8ff4;
+}/*# sourceMappingURL=emailverification.component.css.map */
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`{"version":3,"sources":["about-work.component.scss","about-work.component.css"],"names":[],"mappings":"AAAA;EACE,cAAA;EAGA,wBAAA;EACA,gBAAA;EACA,mBAAA;ACDF;;ADGA;EACE,UAAA;EACA,kBAAA;EACA,oCAAA;EAEA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,sBAAA;ACDF;;ADGA;EACE,kBAAA;ACAF;;ADGA;EACE,aAAA;ACAF;;ADGA;EACE,qBAAA;ACAF;;ADGA;EACE,WAAA;EACA,cAAA;ACAF;;ADGA;EACE,UAAA;ACAF;;ADGA;EACE,gBAAA;EACA,UAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;ACAF","file":"about-work.component.css"}`