User Portal

Hyper-M_User_Portal/src/app/app-routing.module.ts

@@ -0,0 +1,414 @@
+//common//
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuardService } from '../app/core/services/auth-guard.service';
+//Pages//
+import { LandingComponent } from './common/landing/landing.component';
+import { EmicalculatorComponent } from './common/emicalculator/emicalculator.component';
+import { LoginComponent } from './common/login/login.component';
+import { SetPasswwordComponent } from './common/set-passwword/set-passwword.component';
+import { UserProfileComponent } from './common/user-profile/user-profile.component';
+import { MytrainingComponent } from './sales_executive/mytraining/mytraining.component';
+import { MycontentComponent } from './sales_executive/mycontent/mycontent.component';
+import { MyassessmentComponent } from './sales_executive/myassessment/myassessment.component';
+import { AssessmentQuestionComponent } from './sales_executive/assessment-question/assessment-question.component';
+import { LederboardComponent } from './sales_executive/lederboard/lederboard.component';
+import { FeedbackComponent } from './sales_executive/feedback/feedback.component';
+import { FeedbackSurveyComponent } from './sales_executive/feedback-survey/feedback-survey.component';
+import { BulletinComponent } from './sales_executive/bulletin/bulletin.component';
+import { WalletComponent } from './sales_executive/wallet/wallet.component';
+import { WalletCatComponent } from './sales_executive/wallet/wallet_cat.component';
+import { WalletProductListComponent } from './sales_executive/wallet/product_list.component';
+import { WalletProductDescComponent } from './sales_executive/wallet/product_description';
+import { AboutComponent } from './sales_executive/about/about.component';
+import { FaqComponent } from './sales_executive/faq/faq.component';
+import { SalesReportComponent } from './manager/sales-report/sales-report.component';
+import { DseReportComponent } from './manager/dse-report/dse-report.component';
+import { AssessmentReportComponent } from './manager/assessment-report/assessment-report.component';
+import { AnaliticalReportComponent } from './manager/analitical-report/analitical-report.component';
+import { LeaderboardReportComponent } from './manager/leaderboard-report/leaderboard-report.component';
+import { LeaderboardAssessmentComponent } from './manager/leaderboard-assessment/leaderboard-assessment.component';
+import { CourseReportComponent } from './manager/course-report/course-report.component';
+import { FeedbackReportComponent } from './manager/feedback-report/feedback-report.component';
+import { SetsalesReportComponent } from './manager/setsales-report/setsales-report.component';
+import { RewardReportComponent } from './manager/reward-report/reward-report.component';
+import { TrainerComponent } from './trainersite/trainer/trainer.component';
+import { TrainingcourseComponent } from './trainersite/trainingcourse/trainingcourse.component';
+import { ConfirmpopComponent } from './trainersite/confirmpop/confirmpop.component';
+import { ConfirmPopupComponent } from './sales_executive/confirm-popup/confirm-popup.component';
+import { LaunchThreesixtyDashboardComponent } from './launch-threesixty-dashboard/launch-threesixty-dashboard.component';
+import { LauchThreesixtyComponent } from './launch-threesixty-dashboard/lauch-threesixty/lauch-threesixty.component';
+import { LauchThreesixtyComparisonComponent } from './launch-threesixty-dashboard/lauch-threesixty-comparison/lauch-threesixty-comparison.component';
+import { LaunchSalesComponent } from './launch-threesixty-dashboard/launch-sales/launch-sales.component';
+import { LaunchPersonalizeComponent } from './launch-threesixty-dashboard/launch-personalize/launch-personalize.component';
+import { LauchEnquiryComponent } from './launch-threesixty-dashboard/lauch-enquiry/lauch-enquiry.component';
+import { LaunchBrochureComponent } from './launch-threesixty-dashboard/launch-brochure/launch-brochure.component';
+import { LeaderboardRankingComponent } from './manager/leaderboard-ranking/leaderboard-ranking.component';
+import { SetsalesTargetReportComponent } from './manager/setsalestarget-report/setsalestarget-report.component';
+import { ProductVideosComponent } from './launch-threesixty-dashboard/product-videos/product-videos.component';
+import { AddTrainingComponent } from './trainersite/addtraining/addtraining.component';
+import { AddbatchComponent } from './trainersite/addbatch/addbatch.component';
+import { MySchedulesComponent } from './trainersite/myschedule/myschedule.component';
+import { MyEnquiriesComponent } from './leadmodule/my-enquiries/my-enquiries.component';
+import { MyTrainingsComponent } from './leadmodule/my-trainings/my-trainings.component';
+
+import { TodaysTaskComponent } from './leadmodule/todays-task/todays-task.component';
+import { ActionHistoryComponent } from './leadmodule/action-history/action-history.component';
+import { NonsyncenquiryComponent } from './leadmodule/nonsyncenquiry/nonsyncenquiry.component';
+
+import { MyusersComponent } from './sales_executive/myusers/myusers.component';
+import { HoSchedulesComponent } from './trainersite/hoschedule/hoschedule.component';
+import { AddHoTrainingComponent } from './trainersite/hoaddtraining/hoaddtraining.component';
+import { TestrideComponent } from './leadmodule/testride/testride.component';
+import { IlearnReportsComponent } from './manager/ilearn-reports/ilearn-reports.component';
+import { AddClsTrainingComponent } from './trainersite/addclstraining/addclstraining.component';
+import { ViewClsTrainingComponent } from './trainersite/viewclstrainingdetails/viewclstrainingdetails.component';
+import { EditClsTrainingComponent } from './trainersite/editclstraining/editclstraining.component';
+import { TrainingNotificationComponent } from './trainersite/trainingnotification/trainingnotification.component';
+import { WebcamComponent } from './trainersite/webcam/webcam.component';
+import { NewCreateClsTrainingComponent } from './trainersite/newcreateclstraining/newcreateclstraining.component';
+import { NewEditClsTrainingComponent } from './trainersite/neweditclstraining/neweditclstraining.component';
+import { DseTrainingFeedbackComponent } from './trainersite/dsetrainingfeedback/dsetrainingfeedback.component';
+import { AllTrainingFeedbackComponent } from './trainersite/alltrainingfeedback/alltrainingfeedback.component';
+import { CreateenquiryComponent } from './leadmodule/createenquiry/createenquiry.component';
+import { ActivityPlannerComponent } from './leadmodule/activity-planner/activity-planner.component';
+import { EnquiryProcessComponent } from './leadmodule/enquiry-process/enquiry-process.component';
+import { EnquiryStatusComponent } from './leadmodule/enquiry-status/enquiry-status.component';
+import { EnquiryStageComponent } from './leadmodule/enquiry-stage/enquiry-stage.component';
+import { EnquiryProfileComponent } from './leadmodule/enquiry-profile/enquiry-profile.component';
+import { QuotationComponent } from './leadmodule/quotation/quotation.component';
+import { PriceListComponent } from './leadmodule/price-list/price-list.component';
+import { AddPlanComponent } from './leadmodule/add-plan/add-plan.component';
+import { EmiCalulatorComponent } from './leadmodule/emi-calulator/emi-calulator.component';
+
+import { ActivitydaylistComponent } from './leadmodule/activitydaylist/activitydaylist.component';
+
+import { ActivitydaylistDealerComponent } from './leadmoduledealer/activitydaylist-dealer/activitydaylist-dealer.component';
+// import { ActivityPlannerDealerComponent } from './leadmoduledealer/activity-planner-dealer/activity-planner-dealer.component';
+// import { AddPlanDealerComponent } from './leadmoduledealer/add-plan-dealer/add-plan-dealer.component';
+// import { CreateenquiryDealerComponent } from './leadmoduledealer/createenquiry-dealer/createenquiry-dealer.component';
+// import { EmiCalulatorDealerComponent } from './leadmoduledealer/emi-calulator-dealer/emi-calulator-dealer.component';
+import { EnquirypopupDealerComponent } from './leadmoduledealer/enquirypopup-dealer/enquirypopup-dealer.component';
+// import { EnquiryProcessDealerComponent } from './leadmoduledealer/enquiry-process-dealer/enquiry-process-dealer.component';
+import { EnquiryProfileDealerComponent } from './leadmoduledealer/enquiry-profile-dealer/enquiry-profile-dealer.component';
+import { EnquiryStageDealerComponent } from './leadmoduledealer/enquiry-stage-dealer/enquiry-stage-dealer.component';
+
+import { EnquiryStatusDealerComponent } from './leadmoduledealer/enquiry-status-dealer/enquiry-status-dealer.component';
+import { MyEnquiriesDealerComponent } from './leadmoduledealer/my-enquiries-dealer/my-enquiries-dealer.component';
+// import { MyTrainingsDealerComponent } from './leadmoduledealer/my-trainings-dealer/my-trainings-dealer.component';
+import { NonsyncenquiryDealerComponent } from './leadmoduledealer/nonsyncenquiry-dealer/nonsyncenquiry-dealer.component';
+// import { PendingTaskDealerComponent } from './leadmoduledealer/pending-task-dealer/pending-task-dealer.component';
+import { PriceListDealerComponent } from './leadmoduledealer/price-list-dealer/price-list-dealer.component';
+// import { QuotationDealerComponent } from './leadmoduledealer/quotation-dealer/quotation-dealer.component';
+import { TaskstatusDealerComponent } from './leadmoduledealer/taskstatus-dealer/taskstatus-dealer.component';
+import { CreateEnquiryDealerComponent } from './leadmoduledealer/create-enquiry-dealer/create-enquiry-dealer.component';
+import { TestrideDealerComponent } from './leadmoduledealer/testride-dealer/testride-dealer.component';
+import { TodaysTaskDealerComponent } from './leadmoduledealer/todays-task-dealer/todays-task-dealer.component';
+import { SalesDseComponent } from './leadmodule/sales-dse/sales-dse.component';
+import { EnquiryDseComponent } from './leadmodule/enquiry-dse/enquiry-dse.component';
+import { ActionHistoryDealerComponent } from './leadmoduledealer/action-history-dealer/action-history-dealer.component';
+
+import { ActivityPlannerDealerComponent } from './leadmoduledealer/activity-planner-dealer/activity-planner-dealer.component';
+import { EnquiryDealerComponent } from './leadmoduledealer/enquiry-dealer/enquiry-dealer.component';
+import { SalesDealerComponent } from './leadmoduledealer/sales-dealer/sales-dealer.component';
+
+import { QuotationDealerComponent } from './leadmoduledealer/quotation-dealer/quotation-dealer.component';
+import { EmiCalculatorDealerComponent } from './leadmoduledealer/emi-calculator-dealer/emi-calculator-dealer.component';
+import { UserlistComponent } from './leadmoduledealer/userlist/userlist.component';
+import { DashboardComponent } from './leadmodulemanager/dashboard/dashboard.component';
+import { TodayTaskManagerComponent } from './leadmodulemanager/today-task-manager/today-task-manager.component';
+import { TaskstatusManagerComponent } from './leadmodulemanager/taskstatus-manager/taskstatus-manager.component';
+import { TestrideManagerComponent } from './leadmodulemanager/testride-manager/testride-manager.component';
+import { EnquiryStatusManagerComponent } from './leadmodulemanager/enquiry-status-manager/enquiry-status-manager.component';
+import { EnquiryStageManagerComponent } from './leadmodulemanager/enquiry-stage-manager/enquiry-stage-manager.component';
+import { DashboardRegionalManagerComponent } from './leadmodulemanager/dashboard-regional-manager/dashboard-regional-manager.component';
+import { DashboardZonalManagerComponent } from './leadmodulemanager/dashboard-zonal-manager/dashboard-zonal-manager.component';
+import { EnquiryReportComponent } from './leadmodule/enquiry-report/enquiry-report.component';
+import { EnquiryReportDealerComponent } from './leadmoduledealer/enquiry-report-dealer/enquiry-report-dealer.component';
+import { ActionHistoryManagerComponent } from './leadmodulemanager/action-history-manager/action-history-manager.component';
+
+import { EnquiryProfileManagerComponent } from './leadmodulemanager/enquiry-profile-manager/enquiry-profile-manager.component';
+import { ManagerSalesComponent } from './leadmodulemanager/manager-sales/manager-sales.component';
+import { ActivityPlannerManagerComponent } from './leadmodulemanager/activity-planner-manager/activity-planner-manager.component';
+import { ActivitydaylistManagerComponent } from './leadmodulemanager/activitydaylist-manager/activitydaylist-manager.component';
+import { EnquiryManagerComponent } from './leadmodulemanager/enquiry-manager/enquiry-manager.component';
+import { ManagerDselistComponent } from './leadmodulemanager/manager-dselist/manager-dselist.component';
+import { AreaEnquiryReportComponent } from './leadmodulemanager/area-enquiry-report/area-enquiry-report.component';
+import { RegionalEnquiryReportComponent } from './leadmodulemanager/regional-enquiry-report/regional-enquiry-report.component';
+import { ZoneEnquiryReportComponent } from './leadmodulemanager/zone-enquiry-report/zone-enquiry-report.component';
+import { DashboardHoComponent } from './leadmodulemanager/dashboard-ho/dashboard-ho.component';
+import { DashboardTrainerComponent } from './leadmodulemanager/dashboard-trainer/dashboard-trainer.component';
+import { HoEnquiryReportComponent } from './leadmodulemanager/ho-enquiry-report/ho-enquiry-report.component';
+import { TrainerEnquiryReportComponent } from './leadmodulemanager/trainer-enquiry-report/trainer-enquiry-report.component';
+import { ClassroomReportsComponent } from './trainersite/trainingreports/classroom-reports/classroom-reports.component';
+import { TrainingFeedbackReportsComponent } from './trainersite/trainingreports/training-feedback-reports/training-feedback-reports.component';
+import { TrainingIlearnReportsComponent } from './trainersite/trainingreports/training-ilearn-reports/training-ilearn-reports.component';
+import { TrainingDeclineReportsComponent } from './trainersite/trainingreports/training-decline-reports/training-decline-reports.component';
+import { TrainingAbsentReportComponent } from './trainersite/trainingreports/training-absent-report/training-absent-report.component';
+import { TrainingClosureReportComponent } from './trainersite/trainingreports/training-closure-report/training-closure-report.component';
+import { TrainingDseFeedbackReportComponent } from './trainersite/trainingreports/training-dse-feedback-report/training-dse-feedback-report.component';
+import { TrainingManualAttendanceReportComponent } from './trainersite/trainingreports/training-manual-attendance-report/training-manual-attendance-report.component';
+import { TrainingVariousComponent } from './trainersite/trainingreports/training-various/training-various.component';
+
+//Path//
+export const routes: Routes = [
+
+  // { path: '', component: LoginComponent  },
+  // { path: 'dashboard', component: LandingComponent,canActivate: [AuthGuardService] },
+  // { path: 'mytraining', component: MytrainingComponent,canActivate: [AuthGuardService] },
+  // { path: 'mycontent', component: MycontentComponent,
+  //   children: [
+  //     { path: '', component: MytrainingComponent  },
+  //     { path: 'details/:id', component: MycontentComponent }
+  //   ], canActivate: [AuthGuardService]
+  // }
+  { path: '', component: LoginComponent },
+  { path: 'mytraining', component: MytrainingComponent, canActivate: [AuthGuardService] },
+  { path: 'mycontent', component: MycontentComponent, canActivate: [AuthGuardService] },
+  { path: 'mycontent/:id', component: MycontentComponent,canActivate: [AuthGuardService]  },
+  { path: 'myassessment', component: MyassessmentComponent,canActivate: [AuthGuardService] },
+  { path: 'emicalculator', component: EmicalculatorComponent,canActivate: [AuthGuardService] },
+  { path: 'assessment/:id', component: AssessmentQuestionComponent,canActivate: [AuthGuardService]},
+  { path: 'dashboard', component: LandingComponent,canActivate: [AuthGuardService]  },
+  { path: 'threesixty-dashboard', component: LaunchThreesixtyDashboardComponent,canActivate: [AuthGuardService]  },
+  { path: 'launch-threesixty', component: LauchThreesixtyComponent,canActivate: [AuthGuardService]  },
+  { path: 'launch-comparison', component: LauchThreesixtyComparisonComponent,canActivate: [AuthGuardService]  },
+  { path: 'product-vidoes', component: ProductVideosComponent,canActivate: [AuthGuardService]  },
+  { path: 'launch-sales', component: LaunchSalesComponent,canActivate: [AuthGuardService]  },
+  { path: 'launch-personalise', component: LaunchPersonalizeComponent,canActivate: [AuthGuardService]  },
+  { path: 'launch-enquiry', component: LauchEnquiryComponent,canActivate: [AuthGuardService]  },
+  { path: 'download_brouchure/:model/:varient/:token', component: LaunchBrochureComponent   },
+  { path: 'userprofile', component: UserProfileComponent,canActivate: [AuthGuardService]  },
+  { path: 'setpassword', component: SetPasswwordComponent },
+  { path: 'setpassword/:type', component: SetPasswwordComponent },
+  { path: 'myusers', component: MyusersComponent,canActivate: [AuthGuardService] },
+  { path: 'leaderboard', component: LederboardComponent,canActivate: [AuthGuardService] },
+  { path: 'leaderboard-ranking', component: LeaderboardRankingComponent,canActivate: [AuthGuardService] },
+  { path: 'leaderboard-teamranking', component: LeaderboardRankingComponent,canActivate: [AuthGuardService] },
+  { path: 'feedback', component: FeedbackComponent,canActivate: [AuthGuardService] },
+  { path: 'feedback/:id', component: FeedbackSurveyComponent,canActivate: [AuthGuardService] },
+  { path: 'bulletin', component: BulletinComponent,canActivate: [AuthGuardService] } ,
+  { path: 'about', component: AboutComponent,canActivate: [AuthGuardService] } ,
+  { path: 'faq', component: FaqComponent,canActivate: [AuthGuardService] } ,
+  { path: 'wallet', component: WalletComponent,canActivate: [AuthGuardService] } ,
+  { path: 'wallet/category_list', component: WalletCatComponent,canActivate: [AuthGuardService] } ,
+  { path: 'wallet/product_list/:id', component: WalletProductListComponent,canActivate: [AuthGuardService] } ,
+  { path: 'wallet/category_list/:id', component: WalletProductDescComponent,canActivate: [AuthGuardService] } ,
+  { path: 'salesreport', component: SalesReportComponent } ,
+  { path: 'salesreport/:type/:email/:zmmail/:rmmail/:ammail/:mob_tempmth/:mob_tempyr/:id', component: SalesReportComponent } ,
+  { path: 'dsereport', component: DseReportComponent } ,
+  { path: 'dsereport/:type/:email/:zmmail/:rmmail/:ammail/:id', component: DseReportComponent } ,
+  { path: 'assessmentreport', component: AssessmentReportComponent } ,
+  { path: 'assessmentreport/:type/:email/:zmmail/:rmmail/:ammail/:id', component: AssessmentReportComponent } ,
+  { path: 'analyticalreport', component: AnaliticalReportComponent } ,
+  { path: 'analyticalreport/:type/:email/:zmmail/:rmmail/:ammail/:id', component: AnaliticalReportComponent } ,
+  { path: 'leaderboardreport', component: LeaderboardReportComponent } ,
+  { path: 'leaderboardreport/:type/:email/:zmmail/:rmmail/:ammail/:id', component: LeaderboardReportComponent } ,
+  { path: 'asessmentleaderboardreport', component: LeaderboardAssessmentComponent } ,
+  { path: 'asessmentleaderboardreport/:type/:email/:zmmail/:rmmail/:ammail/:id', component: LeaderboardAssessmentComponent } ,
+  { path: 'coursereport', component: CourseReportComponent } ,
+  { path: 'coursereport/:type/:email/:zmmail/:rmmail/:ammail/:id', component: CourseReportComponent } ,
+  { path: 'setsalestergetreport', component: SetsalesTargetReportComponent } ,
+  // { path: 'coursereport/:type/:email/:zmmail/:rmmail/:ammail/:id', component: CourseReportComponent } ,
+  { path: 'feedbackreport', component: FeedbackReportComponent } ,
+  { path: 'feedbackreport/:type/:email/:zmmail/:rmmail/:ammail/:id', component: FeedbackReportComponent } ,
+  { path: 'rewardreport', component: RewardReportComponent } ,
+  { path: 'rewardreport/:type/:id', component: RewardReportComponent } ,
+  { path: 'setsalesreport', component: SetsalesReportComponent } ,
+  { path: 'setsalesreport/:type/:email/:zmmail/:rmmail/:ammail/:id', component: SetsalesReportComponent } ,
+  { path: 'trainer', component: TrainerComponent },
+  { path: 'trainer/:type/:email/:id', component: TrainerComponent },
+  { path: 'trainingcourse/:id', component: TrainingcourseComponent },
+  { path: 'trainingfeedback/:id', component: DseTrainingFeedbackComponent },
+  { path: 'allfeedback/:id', component: AllTrainingFeedbackComponent },
+  { path: 'trainingcourse/:id/:type/:email/:token', component: TrainingcourseComponent },
+  { path: 'addtraining', component: AddTrainingComponent },
+  { path: 'hoaddtraining', component: AddHoTrainingComponent },
+  { path: 'addclstraining', component: AddClsTrainingComponent },
+  { path: 'newcreationtraining', component: NewCreateClsTrainingComponent },
+  { path: 'newedittraining/:id', component: NewEditClsTrainingComponent },
+  { path: 'editclstraining/:id', component: EditClsTrainingComponent },
+  { path: 'addbatch', component: AddbatchComponent },
+  { path: 'confirmpop', component: ConfirmpopComponent },
+  { path: 'viewtraining/:id', component: ViewClsTrainingComponent },
+  { path: 'myschedules', component: MySchedulesComponent,canActivate: [AuthGuardService] } ,
+  { path: 'ilearning', component: HoSchedulesComponent,canActivate: [AuthGuardService] } ,
+  { path: 'myenquiries', component: MyEnquiriesComponent },
+  { path: 'create-enquiry', component: CreateenquiryComponent,canActivate: [AuthGuardService] },
+  { path: 'create-enquiry/:back', component: CreateenquiryComponent,canActivate: [AuthGuardService] },
+  
+  { path: 'activityplanner', component: ActivityPlannerComponent },  
+  { path: 'nonsyncenquiry', component: NonsyncenquiryComponent,canActivate: [AuthGuardService]},  
+  { path: 'enquiry-status', component: EnquiryStatusComponent,canActivate: [AuthGuardService]},  
+  
+  { path: 'myenquiries', component: MyEnquiriesComponent,canActivate: [AuthGuardService]  },
+
+  
+  { path: 'mytrainings', component: MyTrainingsComponent },
+  { path: 'notificationtraining/:id', component: TrainingNotificationComponent },
+  { path: 'task/:id', component: TodaysTaskComponent },
+  { path: 'action-history', component: ActionHistoryComponent },
+  { path: 'enquiry-profile', component: EnquiryProfileComponent },
+  
+  { path: 'quotation', component: QuotationComponent},
+  { path: 'quotation/:type', component: QuotationComponent},
+  { path: 'quotation/:type/:userid/:customername/:email/:model/:variant/:color/:contactno/:dealername/:dealeraddress/:dealermobile/:dealeremail/:tokenvalue', component: QuotationComponent },
+
+  { path: 'quotation/:type/:direct/:dealername/:dealeraddress/:dealermobile/:dealeremail/:tokenvalue', component: QuotationComponent},
+
+  { path: 'emi-calculator', component: EmiCalulatorComponent },
+  { path: 'emi-calculator/:type', component: EmiCalulatorComponent },
+  { path: 'emi-calculator/:type/:userid/:model/:variant/:color/:tokenvalue', component: EmiCalulatorComponent },
+  { path: 'emi-calculator/:type/:direct/:model/:variant/:color/:tokenvalue', component: EmiCalulatorComponent },  
+  { path: 'emi-calculator/:type/:direct/:tokenvalue', component: EmiCalulatorComponent},
+
+  // Dealer EMI AND CALCULATION
+  { path: 'dealer-quotation', component: QuotationDealerComponent},
+  { path: 'dealer-quotation/:type', component: QuotationDealerComponent},
+  { path:'dealer-quotation/:type/:smpin/:userid/:customername/:email/:model/:variant/:color/:contactno/:dealername/:dealermobile/:dealeremail/:tokenvalue', component: QuotationDealerComponent },
+
+  { path: 'training-feedback-reports', component: TrainingFeedbackReportsComponent},
+  { path: 'training-ilearn-reports', component: TrainingIlearnReportsComponent},
+  { path: 'training-decline-reports', component: TrainingDeclineReportsComponent},
+  { path: 'training-absent-reports', component: TrainingAbsentReportComponent},
+  { path: 'training-closure-reports', component: TrainingClosureReportComponent},
+  { path: 'training-dse-feedback-reports', component: TrainingDseFeedbackReportComponent},
+  { path: 'training-manual-attendance-reports', component: TrainingManualAttendanceReportComponent},
+  { path: 'training-various-reports', component: TrainingVariousComponent},
+
+ 
+
+
+  { path: 'dealer-quotation/:type/:direct/:smpin/:tokenvalue', component: QuotationDealerComponent},
+  
+  { path: 'dealer-emi-calculator', component: EmiCalculatorDealerComponent },
+  { path: 'dealer-emi-calculator/:type', component: EmiCalculatorDealerComponent },
+  { path: 'dealer-emi-calculator/:type/:smpin/:userid/:model/:variant/:color/:tokenvalue', component: EmiCalculatorDealerComponent }, 
+  { path: 'dealer-emi-calculator/:type/:smpin/:direct/:tokenvalue', component: EmiCalculatorDealerComponent},
+  { path: 'dealer-emi-calculator/:type/:direct/:tokenvalue', component: EmiCalculatorDealerComponent},
+  { path: 'dealer-emi-calculator/:type/:smpin/:direct/:model/:variant/:color/:tokenvalue', component: EmiCalculatorDealerComponent },
+  
+
+ 
+
+
+  
+
+
+
+
+
+
+  { path: 'activity-list/:id', component: ActivitydaylistComponent ,canActivate: [AuthGuardService] }, 
+  
+  
+  { path: 'ilearn-reports', component: IlearnReportsComponent },
+  { path: 'webcam', component: WebcamComponent},
+  { path: 'enquiry-process', component: EnquiryProcessComponent},
+  { path: 'testride', component: TestrideComponent},
+  { path: 'enquiry-status/:id', component: EnquiryStatusComponent,canActivate: [AuthGuardService]},
+  { path: 'enquiry-stage/:id', component: EnquiryStageComponent,canActivate: [AuthGuardService]},
+  { path: 'price-list', component: PriceListComponent,canActivate: [AuthGuardService]},  
+  { path: 'enquiry-report', component: EnquiryReportComponent,canActivate: [AuthGuardService]},  
+
+
+
+  
+  { path: 'sales-dse', component: SalesDseComponent,canActivate: [AuthGuardService]},  
+  { path: 'enquiry-dse', component: EnquiryDseComponent,canActivate: [AuthGuardService]},  
+
+  { path: 'add-plan', component: AddPlanComponent,canActivate: [AuthGuardService]},
+  
+  // Lead Module Dealer
+  { path: 'dealer-action-history', component: ActionHistoryDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-activityday-link/:id', component: ActivitydaylistDealerComponent,canActivate: [AuthGuardService]},
+  // { path: 'dealer-activity-planner', component: ActivityPlannerDealerComponent,canActivate: [AuthGuardService]},
+  // { path: 'dealer-addplan', component: AddPlanDealerComponent,canActivate: [AuthGuardService]},
+  // { path: 'dealer-create-enquiry', component: CreateenquiryDealerComponent,canActivate: [AuthGuardService]},
+  // { path: 'dealer-emi-calculator', component: EmiCalulatorDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-enquiry-popup', component: EnquirypopupDealerComponent,canActivate: [AuthGuardService]},
+  // { path: 'dealer-enquiry-process', component: EnquiryProcessDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-enquiry-profile', component: EnquiryProfileDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-enquiry-stage/:id', component: EnquiryStageDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-enquiry-status/:id', component: EnquiryStatusDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-myenquiries', component: MyEnquiriesDealerComponent,canActivate: [AuthGuardService]},
+  // { path: 'dealer-mytrainings', component: MyTrainingsDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-nonsyncenquiry', component: NonsyncenquiryDealerComponent,canActivate: [AuthGuardService]},
+  // { path: 'dealer-pendingtask', component: PendingTaskDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-pricelist', component: PriceListDealerComponent,canActivate: [AuthGuardService]},
+  // { path: 'dealer-quotation', component: QuotationDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-taskstatus', component: TaskstatusDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-create-enquiry', component: CreateEnquiryDealerComponent,canActivate: [AuthGuardService]},  
+  { path: 'dealer-create-enquiry/:back', component: CreateEnquiryDealerComponent,canActivate: [AuthGuardService]},  
+
+
+  { path: 'dealer-activity-planner', component: ActivityPlannerDealerComponent,canActivate: [AuthGuardService]},  
+  
+ 
+  { path: 'dse-user-list', component: UserlistComponent,canActivate: [AuthGuardService]  },
+
+  { path: 'dealer-testride', component: TestrideDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-task/:id', component: TodaysTaskDealerComponent,canActivate: [AuthGuardService]},
+
+  { path: 'dealer-enquiry', component: EnquiryDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-sales', component: SalesDealerComponent,canActivate: [AuthGuardService]},
+  { path: 'dealer-enquiry-report', component: EnquiryReportDealerComponent},
+  { path: 'dealer-enquiry-report/:type/:tokenvalue', component: EnquiryReportDealerComponent},
+
+
+  
+  { path: 'manager-enquiry', component: DashboardComponent,canActivate: [AuthGuardService]},
+  { path: 'manager-task/:id', component: TodayTaskManagerComponent,canActivate: [AuthGuardService]},
+  { path: 'manager-taskstatus', component: TodayTaskManagerComponent,canActivate: [AuthGuardService]},
+
+  { path: 'manager-testride', component: TestrideManagerComponent,canActivate: [AuthGuardService]},
+  { path: 'manager-enquiry-status/:id', component: EnquiryStatusManagerComponent,canActivate: [AuthGuardService]},
+  { path: 'manager-enquiry-stage/:id', component: EnquiryStageManagerComponent,canActivate: [AuthGuardService]},
+
+
+  { path: 'manager-enquiry-profile', component: EnquiryProfileManagerComponent,canActivate: [AuthGuardService]},
+  { path: 'manager-sales', component: ManagerSalesComponent,canActivate: [AuthGuardService]},
+
+
+  { path: 'regional-enquiry', component: DashboardRegionalManagerComponent,canActivate: [AuthGuardService]},
+  { path: 'zonal-enquiry', component: DashboardZonalManagerComponent,canActivate: [AuthGuardService]},
+  { path: 'manager-action-history', component: ActionHistoryManagerComponent,canActivate: [AuthGuardService]},
+  { path: 'manager-activity-planner', component: ActivityPlannerManagerComponent,canActivate: [AuthGuardService]},  
+  { path: 'manager-activityday-list/:id', component: ActivitydaylistManagerComponent,canActivate: [AuthGuardService]},  
+  { path: 'manager-enquiries', component: EnquiryManagerComponent,canActivate: [AuthGuardService]},  
+  { path: 'manager-dselist', component: ManagerDselistComponent,canActivate: [AuthGuardService]},  
+  
+
+  { path: 'area-enquiry-report', component: AreaEnquiryReportComponent,canActivate: [AuthGuardService]},
+  { path: 'area-enquiry-report/:type/:tokenvalue', component: AreaEnquiryReportComponent},
+
+
+  { path: 'region-enquiry-report', component: RegionalEnquiryReportComponent,canActivate: [AuthGuardService]},
+  { path: 'region-enquiry-report/:type/:tokenvalue', component: RegionalEnquiryReportComponent},
+
+
+  { path: 'zone-enquiry-report', component: ZoneEnquiryReportComponent,canActivate: [AuthGuardService]},
+  { path: 'zone-enquiry-report/:type/:tokenvalue', component: RegionalEnquiryReportComponent},
+  { path: 'ho-enquiry', component: DashboardHoComponent},
+  { path: 'trainer-enquiry', component: DashboardTrainerComponent},
+
+  { path: 'ho-enquiry-report', component: HoEnquiryReportComponent},
+  { path: 'ho-enquiry-report/:type/:tokenvalue', component: HoEnquiryReportComponent},
+
+  { path: 'trainer-enquiry-report', component: TrainerEnquiryReportComponent},
+  { path: 'trainer-enquiry-report/:type/:tokenvalue', component: TrainerEnquiryReportComponent},
+  { path: 'training-classroom-reports', component: ClassroomReportsComponent},
+
+
+
+
+  { path: '**', pathMatch: 'full', redirectTo: '' } // catch any unfound routes and redirect to ford landing page ActionHistoryManagerComponent
+
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+
+export class AppRoutingModule {}

Hyper-M_User_Portal/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

Hyper-M_User_Portal/src/app/app.component.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});

Hyper-M_User_Portal/src/app/app.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { LocalStorage } from "./core/services/local_storage.service"
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  constructor() {
+    if (LocalStorage.isSetJWT()) {
+        LocalStorage.loadJWT();
+        // if (LocalStorage.getValue('loggedIn') == true || LocalStorage.getValue('loggedIn') == 'true') { }
+    } else {
+        LocalStorage.createJWT();
+    }
+}
+}

Hyper-M_User_Portal/src/app/common/custom.datepipe.ts

@@ -0,0 +1,92 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import * as moment from 'moment';
+   
+   @Pipe({
+     name: 'customDate'
+   })
+   export class CustomDatePipe extends 
+                DatePipe implements PipeTransform {
+
+    minutes:any;
+    hour:any;
+    firstvalue:any;
+    secondvalue:any;
+    resultvalue:any;
+    dayscaluclation:any;
+    minscaluclation:any;
+  
+
+
+     transform(value: any, args?: any): any {
+      //  this.today;
+      let currentdatevalue = Date.now();
+    
+      let d1 = new Date(currentdatevalue); let d2 = new Date(value);
+    
+      let giventimestamp = moment(value).unix(); // 1318874398
+      let currenttimestamp=moment(currentdatevalue).unix();
+    //   alert(currenttimestamp);
+    //  console.log("giventimestamp-->"+giventimestamp)
+    //  console.log("currenttimestamp-->"+currenttimestamp)
+     
+    //    if(Number(giventimestamp) >= currentdatevalue){
+       // console.log("d1--currenttime"+d1)
+     //   console.log("d2--giventime"+d2)
+        if (d2 > d1) {
+            
+      //  console.log(this.resultvalue)
+        this.firstvalue=giventimestamp;
+        this.secondvalue=currenttimestamp;
+        this.resultvalue='Overdue';
+      //  console.log(this.resultvalue)
+      }else{
+        
+        this.firstvalue=currenttimestamp;
+        this.secondvalue=giventimestamp;
+        this.resultvalue='to go';
+     //   console.log(this.resultvalue)
+      }
+    
+      
+      let differencetime=Number(this.firstvalue) - Number(this.secondvalue);
+
+    //   console.log("giventimestamp_timestamp-->"+giventimestamp_timestamp);
+    //   console.log("currenttimestamp-->"+currenttimestamp);
+    //   console.log("differencetime-->"+differencetime);
+      
+         this.minutes = "0" + Math.floor(differencetime / 60);
+        //  get minutes
+        let seconds = "0" + Math.floor(differencetime - this.minutes * 60);
+        // get seconds
+         this.hour = "0" + Math.floor(differencetime / 3600);
+        //get hour
+        if ( this.hour > 1 ) { 
+            if(this.hour.substr(-2) >24){
+                var temp=Math.round(this.hour/24);
+               
+                this.dayscaluclation=temp;
+
+                // if(this.minutes.substr(-2) >30){
+                //     this.minscaluclation=.5;
+                // }else{
+                //     this.minscaluclation='';
+                // }
+
+            }else{
+
+            }
+            // return this.hour.substr(-2) + ":" + this.minutes.substr(-2) + ":" + seconds.substr(-2);
+            return this.dayscaluclation + "days"+ this.resultvalue ;
+        } else {
+            // return this.minutes.substr(-2) + ":" + seconds.substr(-2);
+            // if(this.minutes.substr(-2) >30){
+            //     this.minscaluclation=.5;
+            // }else{
+            //     this.minscaluclation='';
+            // }
+            // return this.minutes.substr(-2) + ":" + seconds.substr(-2);
+        }
+       //return differencetime;
+     }
+   }

Hyper-M_User_Portal/src/app/common/dashboard-am-details/dashboard-am-details.component.html

@@ -0,0 +1,119 @@
+<div class="bottom_content">
+        <div class="main_dropdown" *ngIf="user_role<7">
+                <div class="zmdropdown" *ngIf="user_role<4">
+                        <label>Zonal Manager</label>
+                        <select [(ngModel)]="zm_email" (ngModelChange)='zmChange($event)'>
+                                <option value="all">All</option>
+                                <option *ngFor="let zm of zmuser_list" [ngValue]="zm">{{zm.name}}</option>
+                        </select>
+                </div>
+                <div class="rmdropdown" *ngIf="user_role<6 && !rmInactive">
+                        <label>Regional Manager</label>
+                        <select [(ngModel)]="rm_email" [ngClass]="rmInactive ?'disabled':''" (ngModelChange)='rmChange($event)' [disabled]="rmInactive">
+                                <option value="all">All</option>
+                                <option *ngFor="let rm of rmuser_list" [ngValue]="rm.email">{{rm.name}}</option>
+                        </select>
+                </div>
+                <div class="amdropdown" *ngIf="user_role<7 && !amInactive">
+                        <label>Area Manager</label>
+                        <select [(ngModel)]="am_email" [ngClass]="amInactive ?'disabled':''" (ngModelChange)='amChange($event)' [disabled]="amInactive">
+                                <option value="all">All</option>
+                                <option *ngFor="let am of amuser_list" [ngValue]="am.email">{{am.name}}</option>
+                        </select>
+                </div>
+        </div>
+        <div class="row">
+                <div class="col" *ngIf="user_dashboard!=undefined">
+                        <h6 class="title" (click)="viewSalesReport()">SALES</h6>
+                        <div class="box_left" (click)="viewSalesReport()">
+                                <circle-progress [percent]="percentage" [radius]="60" [space]="-10" [outerStrokeWidth]="10" [outerStrokeColor]="'#28a8e0'"
+                                        [innerStrokeColor]="'#e7e8ea'" [innerStrokeWidth]="10" [title]="user_dashboard.sales.achieved"
+                                        [showSubtitle]="false" [animateTitle]="false" [animationDuration]="1500" [showUnits]="false"
+                                        [showBackground]="false"></circle-progress>
+                                <div class="load_content" (click)="viewSalesReport()">
+                                        <h6>SALES PERFORMANCE</h6>
+                                        <p *ngIf="user_dashboard!=undefined">{{user_dashboard.sales.achieved}} / {{user_dashboard.sales.target}} TARGETED SALES</p>
+                                </div>
+                        </div>
+                        <div class="box_right">
+                                <img src="assets/img/up_arrow.svg " (click)="decreasMonth()" />
+                                <p>{{sales_date}}</p>
+                                <img src="assets/img/down_arrow.svg" [ngClass]="sales_date!=date_now?'':'disable_arrow'" (click)="increasMonth()" />
+                        </div>
+                </div>
+                <div class="col" *ngIf="user_dashboard==undefined">
+                        <h6 class="title">SALES</h6>
+                        <div class="box_left">
+                                <p>No data found</p>
+                                <div class="load_content">
+                                        <h6>SALES PERFORMANCE</h6>
+                                        <p>No data found</p>
+                                </div>
+                        </div>
+                        <div class="box_right">
+                                <p>No data found</p>
+                        </div>
+                </div>
+                <div class="col">
+                        <div class="chart_box" (click)="viewDseReport()" *ngIf="barChartData.length > 0">
+                                <h6 class="title">CERTIFIED DSE
+                                        <span>Total DSE: {{total_user}}</span>
+                                </h6>
+                                <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
+                                        [colors]="barcolors" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
+                                </canvas>
+                        </div>
+                        <div class="chart_box" (click)="viewDseReport()" *ngIf="barChartData.length == 0">
+                                <h6 class="title">CERTIFIED DSE
+                                        <span>Total DSE: 0</span>
+                                </h6>
+                                <p>No data found</p>
+                        </div>
+                </div>
+                <div class="col">
+                        <div class="chart_box" (click)="viewAssessmentReport()">
+                                <h6 class="title">ASSESSMENT</h6>
+                                <canvas baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels" [legend]="true" [colors]="colors" [chartType]="doughnutChartType"
+                                        (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
+                                </canvas>
+                        </div>
+                </div>
+                <div class="col">
+                        <h6 class="title">RANKING</h6>
+                        <div class="leader_box">
+                                <!--single column-->
+                                <div class="single" (click)="viewAssessmentleaderBoard()" *ngIf="user_role==3  || user_role==14">
+                                        <h6 class="text-center">Team Ranking</h6>
+                                        <div class="lead_section">
+                                                <div class="lead">
+                                                        <div class="img_sec">
+                                                                <img src="assets/img/assessment.png" />
+                                                        </div>
+                                                </div>
+                                        </div>
+
+                                </div>
+                                <!--single column-->
+                                <div class="leader_left" (click)="viewSalesleaderBoard()" *ngIf="user_role!=3 && user_role!=14">
+                                        <h6>My Ranking</h6>
+                                        <div class="lead_section">
+                                                <div class="lead">
+                                                        <div class="img_sec">
+                                                                <img src="assets/img/sales.png" />
+                                                        </div>
+                                                </div>
+                                        </div>
+                                </div>
+                                <div class="leader_right" (click)="viewAssessmentleaderBoard()" *ngIf="user_role!=3  && user_role!=14">
+                                        <h6>Team Ranking</h6>
+                                        <div class="lead_section">         <div class="lead">
+                                                        <div class="img_sec">
+                                                                <img src="assets/img/assessment.png" />
+                                                        </div>
+                                                </div>
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+
+        </div>

Hyper-M_User_Portal/src/app/common/dashboard-am-details/dashboard-am-details.component.scss

@@ -0,0 +1,267 @@
+.bottom_content {
+    //width: calc(100% - 10px);
+    width:100%;
+    height: 200px;
+    float: left;
+    //  padding: 10px;
+    //  margin: 45px 5px;
+       padding: 0px;
+    margin: 0px;
+    .main_dropdown {
+        // position: absolute;
+        width: 100%;
+        // bottom: 200px;
+        // top: 94px;
+        right: 0;
+        padding: 5px;
+        background-color: #28a8e0;
+        box-shadow: 0 0 1px 1px #ccc;
+        float: left;
+        .zmdropdown, .rmdropdown, .amdropdown{
+            float: left;
+            width: 33.3%;
+            label{
+                width: 140px;
+                margin-top: 6px;
+                margin-bottom: 0;
+                text-align: right;
+                color: #fff;
+            }
+        }
+        .zmdropdown, .rmdropdown{
+            padding-right: 20px;
+        }
+        select {
+            float: right;
+            padding: 5px;
+            border: none;
+            color: #333;
+            box-shadow: 0 0 1px 1px #ccc;
+            background-color: rgba(255, 255, 255, 1);
+            width: calc(100% - 150px);
+        }
+    }
+    .row{
+        .col{
+            cursor: pointer;
+            height: auto;
+            margin: 0 5px;  
+            .box_left{
+                svg{
+                    width: 80px !important;
+                    height: 80px !important;
+                }
+                .load_content{
+                    h6{
+                        font-size: 12px;
+                    }
+                    p{
+                        font-size: 11px;
+                    }
+                }
+            }
+            .box_right{
+                width: 74px;
+                padding: 2px !important;
+                p{
+                    padding:20px 0;
+                }
+            }
+         
+            .title span {
+                float: right;
+                font-size: 12px;
+                color: #333;
+            }
+            .chart_box{
+                canvas{
+                    position: absolute;
+                    bottom: 10px;
+                    height: calc(100% - 50px) !important;
+                    width: auto !important;
+                    left: 0;
+                    right: 0;
+                    margin: auto;
+                }
+            }
+            .leader_box {
+                width: 100%;
+                height: calc(100% - 20px);
+                float: left;
+                .leader_left {
+                    width: 50%;
+                    float: left;
+                    text-align: center;
+                    border-right: 1px solid #ccc;
+                    height: 100%;
+                    position: relative;
+                    .lead h6{
+                        position: absolute;
+                        bottom: 43px;
+                        margin: auto;
+                        height: 20px;
+                        left: 0;
+                        right: 0;
+                    }
+                }
+                .leader_right {
+                    width: 50%;
+                    float: left;
+                    text-align: center;
+                    height: 100%;
+                    position: relative;
+                    .lead h6{
+                        position: absolute;
+                        bottom: 43px;
+                        margin: auto;
+                        height: 20px;
+                        left: 0;
+                        right: 0;
+                    }
+                }
+                .lead_section {
+                    width: 100%;
+                    float: left;
+                    height: auto;
+                    position: absolute;
+                    bottom: 0;
+                    // bottom: 25px;
+                    .lead {
+                        width: 100%;
+                        float: left;
+                        height: 100%;
+                        margin-top: 6px;
+                        position: relative;
+                        .img_sec {
+                            width: 51px;
+                            // float: left;
+                            height: auto;
+                            position: relative;
+                            margin: auto; 
+                            img{
+                                // background-color: #28a8e0;
+                                width: 65px;
+                                // border-radius: 50%;
+                                height: 63px;
+                                // border: 1px dotted #28a8e0;
+                            }
+                            span {
+                                position: absolute;
+                                right: 0;
+                                background-color: #fff;
+                                -webkit-box-shadow: 0 0 1px 1px #ccc;
+                                box-shadow: 0 0 1px 1px #ccc;
+                                border-radius: 50%;
+                                padding: 0;
+                                width: 18px;
+                                height: 18px;
+                                font-size: 12px;
+                                font-weight: bold;
+                            }
+                        }
+                        p{
+                            font-size: 10px;
+                            font-weight: bold;
+                            color: #666;
+                            margin-bottom: 0;
+                        }
+                    }
+                    .lead.lead1{
+                        margin-top: 0;
+                        .img_sec{
+                            img{
+                                width: 40px;
+                                border-radius: 50%;
+                                height: 40px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 1024px) {
+    .bottom_content{
+        height: 330px;
+        .main_dropdown{
+            bottom: none;
+        }
+        .row{
+            .col{
+                margin: 5px 5px;
+                width: 332px;
+                height: 170px !important;
+            }
+        }
+    }
+}
+@media screen and (max-width: 768px) {
+    .bottom_content{
+        height: auto;
+        padding: 0;
+        .row{
+            margin: 0;
+            .col{
+                height: auto;
+                width: 100%;
+                flex-basis: auto!important;
+                height: 200px;
+                margin: 10px;
+                .box_right{
+                    p{
+                        line-height: 1.8;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.bottom_content .row {
+    height: auto  !important;
+    width: 100% !important;
+    margin: 0px auto!important;
+    padding: 8px 18px 0px 18px !important;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    /* IE10+ CSS styles go here */
+    .chart_box {
+        canvas{
+        bottom:-30px!important;
+    }
+}
+}
+@supports (-ms-accelerator:true) {
+    /* IE Edge 12+ CSS styles go here */ 
+    .chart_box{
+     canvas{
+        bottom:-30px!important;
+    }
+    }
+}
+
+.bottom_content .row .col .leader_box .single .lead_section{
+    position: inherit;
+}
+
+@media screen and (min-width: 481px) and (max-width: 768px) {
+    .bottom_content .main_dropdown .zmdropdown, .bottom_content .main_dropdown .rmdropdown, .bottom_content .main_dropdown .amdropdown {
+        float: left;
+        width: 100% !important;
+    }
+    .bottom_content .main_dropdown select{
+        margin: 5px 0px !important;
+    }
+}
+
+
+@media screen and (min-width: 320px) and (max-width: 480px) {
+    .bottom_content .main_dropdown .zmdropdown, .bottom_content .main_dropdown .rmdropdown, .bottom_content .main_dropdown .amdropdown {
+        float: left;
+        width: 100% !important;
+    }
+    .bottom_content .main_dropdown select{
+        margin: 5px 0px !important;
+    }
+}

Hyper-M_User_Portal/src/app/common/dashboard-am-details/dashboard-am-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardAmDetailsComponent } from './dashboard-am-details.component';
+
+describe('DashboardAmDetailsComponent', () => {
+  let component: DashboardAmDetailsComponent;
+  let fixture: ComponentFixture<DashboardAmDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardAmDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardAmDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/dashboard-am-details/dashboard-am-details.component.ts

@@ -0,0 +1,439 @@
+import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
+import { HyperService } from '../../core/services/http.service';
+import { Router ,ActivatedRoute} from "@angular/router";
+import { BarChart } from '../../core/services/bar_chart';
+import { LocalStorage } from '../../core/services/local_storage.service';
+import { CONFIG } from '../../config';
+
+@Component({
+    selector: 'app-dashboard-am-details',
+    templateUrl: './dashboard-am-details.component.html',
+    styleUrls: ['./dashboard-am-details.component.scss']
+})
+export class DashboardAmDetailsComponent implements OnInit {
+
+    sales_date: any;
+    userData: any = {};
+    user_dashboard: any;
+    percentage: any;
+    user_type: any;
+    certified_dse: any;
+    assessment_data: any;
+    barChartDataa: any = [];
+    leader_board: any;
+    access_token: any
+    barchart_data: any = [];
+    total_dse:any;
+    total_user:any;
+    user_role:number;
+    amuser_list: any = [];
+    rmuser_list: any = [];
+    zmuser_list: any = [];
+    am_email: string='';
+    rm_email: string='';
+    zm_email: string='';
+    zm_zone:string;
+    zm_zonename:string;
+    sub: any;
+    type: any;
+    zmmail: string = '';
+    rmmail: string = '';
+    ammail: string = '';
+    cont: boolean;
+    am_cont: boolean;
+    previousUrl: string;
+    rmInactive: boolean;
+    amInactive: boolean;
+    zmEmail: any;
+    zmData:any;
+    rmData:any;
+    amData:any;
+    date_now: any;
+    constructor(private route: ActivatedRoute,private server: HyperService, private router: Router) {
+        // console.log(this.barChartData)
+        this.sub = this.route.params.subscribe(params => {
+            this.type = params['type'];
+            this.rmmail = params['rmmail'];
+            this.ammail = params['ammail'];
+        });
+        CONFIG.page_change = false;
+        CONFIG.am_page_change = false;
+        console.log(this.user_role,LocalStorage.getValue('signup_user').emailid,this.type,this.ammail,"hello")
+    }
+    ngOnInit() {
+        LocalStorage.setValue('zmmail',{})
+        LocalStorage.setValue('zmdata','')
+        LocalStorage.setValue('rmdata','')
+        LocalStorage.setValue('amdata','')
+        this.access_token = LocalStorage.getValue('token')
+        this.sales_date = moment().format("MMM YYYY") //current month and year
+        this.date_now = moment(this.sales_date, "MMM YYYY").format("MMM YYYY");
+        let m = moment(this.sales_date, "MMM YYYY").format("MM");
+        let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+
+        let val = {
+            "data": [],
+            "label": ''
+        }
+        this.barChartDataa.push(val)
+        console.log(this.barChartDataa[0])
+        if(LocalStorage.getValue('user_data')!=undefined){
+            this.userData = LocalStorage.getValue('user_data');
+            this.user_role = LocalStorage.getValue('user_data').role;
+            if(this.user_role!=undefined && this.user_role<4){
+                this.zm_email = "all";
+                this.rmmail = "all";
+                this.ammail = "all";
+                this.zmmail = "all";
+                this.getZm();
+            }else if(this.user_role!=undefined && this.user_role<6){
+                this.rm_email = "all";
+                this.am_email = "all";
+                this.getRm();
+            }else if(this.user_role!=undefined && this.user_role<7  ){
+                this.am_email = "all";
+                this.getAm();
+
+            }else{
+                if(this.user_role==14){
+                    this.getLeaderBoard(LocalStorage.getValue('user_data').dealer.am_email);
+                    this.am_email = LocalStorage.getValue('user_data').dealer.am_email;
+                }else{
+                    this.getLeaderBoard(LocalStorage.getValue('user_data').emailid);
+                    this.am_email = LocalStorage.getValue('user_data').emailid;
+                }
+
+                if (this.zm_email != undefined && this.zm_email != '' && this.rm_email == 'all' && this.am_email == 'all') {
+                    this.dashboarAm(y, m,"zm"); //Manager Dashboard details
+                } else if (this.rm_email != undefined && this.rm_email != '' && this.am_email == 'all') {
+                    this.dashboarAm(y, m,"rm");
+                } else if (this.am_email != undefined && this.zm_email != 'all' && this.rm_email != 'all' && this.am_email != 'all') {
+                    this.dashboarAm(y, m,"am");
+                }
+            }
+        }
+
+    }
+    //HO LOGGED
+    getZm(){
+        this.rmInactive = true;
+        this.amInactive = true;
+        this.server.post("manager/zone", {})
+            .then((data) => {
+                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                    this.zmuser_list = data.result.data;
+                    this.zmChange("all")
+                } else if (data.result.status == 401 && data.result.response == 'failed') {
+                    this.router.navigateByUrl('');
+                }
+            });
+    }
+    zmChange(event){
+        console.log(event)
+        this.rm_email = "all";
+        this.am_email = "all";
+        if (event == "all") {
+            this.rmInactive = true;
+            this.amInactive = true;
+            this.zm_email = "all";
+            // LocalStorage.setValue("zmmail", this.zm_email)
+        } else {
+            console.log('else')
+            LocalStorage.setValue('zmdata',event);
+            this.rmInactive = false;
+            this.amInactive = true;
+            this.zm_email = event;
+            // LocalStorage.setValue("zmmail", this.zm_email)
+            // this.cont = (CONFIG.page_change) ? false : true;
+            this.zm_zone = event.zone;
+            this.zm_zonename = event.email;
+            this.getRm();
+
+        }
+        if (this.zm_email == 'all') {
+            this.zmEmail = 'all';
+          } else {
+            this.zmEmail = this.zm_zonename;
+          }
+
+
+        let m = moment(this.sales_date, "MMM YYYY").format("MM");
+        let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+        this.dashboarAm(y, m, "zm");
+    }
+    // ZM LOGGED
+    getRm(){
+        console.log(this.user_role>3 && this.user_role!=5)
+        this.server.post("manager/region", {
+            zone : (this.user_role>3 && this.user_role!=5) ? LocalStorage.getValue('signup_user').emailid : this.zm_zonename,
+            zonename : (this.user_role>3 && this.user_role==5) ? LocalStorage.getValue('signup_user').zone : this.zm_zone
+        })
+            .then((data) => {
+                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                   console.log(data.result.data)
+                   this.rmuser_list = data.result.data;
+                   if (this.user_role != undefined && this.user_role==4 || this.user_role==5) {
+                    this.zmEmail = this.userData.emailid;
+                    this.rmChange("all")
+                  }
+                } else if (data.result.status == 401 && data.result.response == 'failed') {
+                    this.router.navigateByUrl('');
+                }
+            });
+    }
+    rmChange(event){
+        this.am_email = "all"
+        if (event == "all") {
+            this.amInactive = true;
+
+        } else {
+            LocalStorage.setValue('rmdata',event);
+            this.amInactive = false;
+            this.rm_email = event;
+            // LocalStorage.setValue("rmmail", this.rm_email)
+            // this.am_cont = (CONFIG.am_page_change) ? false : true;
+            this.getAm();
+        }
+        let m = moment(this.sales_date, "MMM YYYY").format("MM");
+        let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+        this.dashboarAm(y, m, "rm");
+    }
+
+    // RM LOGGED
+    getAm(){
+
+        this.server.post("manager/area", {
+            region : ((this.user_role<7 || this.user_role==14) && this.user_role!=6) ? this.rm_email : LocalStorage.getValue('signup_user').emailid
+        })
+            .then((data) => {
+                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                   console.log(data.result.data)
+                   this.amuser_list = data.result.data;
+                   if (this.user_role != undefined && this.user_role==6) {
+                    this.rm_email = this.userData.emailid;
+                    this.amChange("all")
+                  }
+
+                } else if (data.result.status == 401 && data.result.response == 'failed') {
+                    this.router.navigateByUrl('');
+                }
+            });
+    }
+    amChange(event){
+        LocalStorage.setValue('amdata',event);
+        this.am_email = event;
+        // LocalStorage.setValue("ammail",this.am_email)
+        let m = moment(this.sales_date, "MMM YYYY").format("MM");
+        let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+        this.dashboarAm(y, m,"am");
+        // this.getLeaderBoard(this.am_email);
+    }
+    dashboarAm(year, month, role){
+        LocalStorage.setValue("temp_mth",month)
+        LocalStorage.setValue("temp_yr",year)
+        this.server.post("dashboard/newareamanagerdashboard/" + year + "/" + month +  "/" + role +"", {
+            zmemail: this.zmEmail,
+            rmemail: this.rm_email,
+            amemail: (this.user_role < 7) ? this.am_email : (this.user_role == 14) ? this.userData.dealer.am_email : this.userData.emailid
+        })
+            .then((data) => {
+                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                    this.user_dashboard = data.result.data;
+                    this.getPercentage();
+                    this.getDonutValues();
+                    this.getbarValues();
+                    this.total_dse = this.user_dashboard['learning'].total
+                    this.total_user = this.user_dashboard['learning'].user_total
+                    console.log(this.total_dse,this.total_user)
+                    console.log(this.user_dashboard['learning'].total)
+                } else if (data.result.status == 401 && data.result.response == 'failed') {
+                    this.router.navigateByUrl('');
+                }
+            });
+
+    }
+    //AM LOGGED
+    dashboardDetails(year, month) {
+        LocalStorage.setValue("temp_mth",month)
+        LocalStorage.setValue("temp_yr",year)
+        this.server.get("dashboard/managerdashboard/" + year + "/" + month + "")
+            .then((data) => {
+                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                    this.user_dashboard = data.result.data;
+                    this.getPercentage();
+                    this.getDonutValues();
+                    this.getbarValues();
+                    this.total_dse = this.user_dashboard['learning'].total
+                    this.total_user = this.user_dashboard['learning'].user_total
+                    // console.log(this.user_dashboard['learning'].total)
+                } else if (data.result.status == 401 && data.result.response == 'failed') {
+                    this.router.navigateByUrl('');
+                }
+            });
+    }
+
+    getLeaderBoard(username) {
+        this.server.post("dashboard/dashboardleaderboard", {
+            area: username
+        })
+            .then((data) => {
+                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                    this.leader_board = data.result.data;
+
+                } else if (data.result.status == 401 && data.result.response == 'failed') {
+                    this.router.navigateByUrl('');
+                }
+            });
+    }
+
+    public barChartOptions: any ;
+
+    ////BAR CHART PROPERTIES???//////
+
+    public barChartLabels: string[] = ['BASE', 'BRONZE', 'SILVER', 'GOLD']; //X Asix Label
+    public barChartType: string = 'bar'; //Chart Type
+    public barChartLegend: boolean = false; //Show Legend
+    public barChartData: any = []
+
+    getbarValues(){
+
+        setTimeout(() => {
+            this.barChartOptions =  {
+                scaleShowVerticalLines: false,
+                responsive: true,
+                scaleShowValues: true,
+                tooltips: false,
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero:true,
+                            // max: Number(this.user_dashboard['learning'].total),
+                        }
+                    }]
+                },
+                animation: {
+                    onComplete: function () {
+                        var chartInstance = this.chart,
+                            ctx = chartInstance.ctx;
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'bottom';
+                        this.data.datasets.forEach(function (dataset, i) {
+                            var meta = chartInstance.controller.getDatasetMeta(i);
+                            meta.data.forEach(function (bar, index) {
+                                var data = dataset.data[index];
+                                ctx.fillText(data, bar._model.x, bar._model.y - 5);
+                            });
+                        });
+                    }
+                }
+            };
+            this.barChartData=[{
+            data: [this.user_dashboard['learning'].basic, this.user_dashboard['learning'].bronze, this.user_dashboard['learning'].silver, this.user_dashboard['learning'].gold],
+            label: ''
+            }];
+        }, 100);
+    }
+
+    public doughnutChartLabels: string[] = ['PUBLISHED', 'ACTIVE', 'EXPIRED'];
+    // public doughnutChartData: number[] = [50, 22, 28];
+    public doughnutChartData: any=[];
+    public doughnutChartType: string = 'doughnut';
+    getDonutValues(){
+
+        this.doughnutChartData =   [this.user_dashboard['assessment'].published, this.user_dashboard['assessment'].active, this.user_dashboard['assessment'].expired]
+    }
+
+    public colors = [{
+        backgroundColor: [
+            '#ffc266',
+            '#a6ff4d',
+            '#e6e600'
+
+        ]
+    }];
+
+    public barcolors = [{
+        backgroundColor: [
+            '#475729',
+            '#C46C53',
+            '#AAAAAA',
+            '#E2BB4D'
+        ]
+    }];
+    public chartClicked(e: any): void {
+        console.log("here")
+        console.log(e);
+    }
+
+    public chartHovered(e: any): void {
+        console.log(e);
+    }
+
+    decreasMonth() {
+        console.log('Decreasse')
+        this.sales_date = moment(this.sales_date, "MMM YYYY").add(-1, 'months').format("MMM YYYY"); //- one month
+        setTimeout(() => {
+            let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+            let m = moment(this.sales_date, "MMM YYYY").format("MM");
+            if (this.zm_email != undefined && this.zm_email != '' && this.rm_email == 'all' && this.am_email == 'all') {
+                this.dashboarAm(y, m, "zm")
+            } else if (this.rm_email != undefined && this.rm_email != '' && this.am_email == 'all') {
+                this.dashboarAm(y, m, "rm")
+            } else if (this.am_email != undefined && this.zm_email != 'all' && this.rm_email != 'all' && this.am_email != 'all') {
+                this.dashboarAm(y, m, "am")
+            }
+        }, 1200);
+    }
+
+    increasMonth() {
+        let now = moment(this.sales_date, "MMM YYYY").format("YYYY-MM-DD");
+        let tdyDate = moment(new Date()).format('YYYY-MM-DD');
+        if (moment(now).isSame(tdyDate, 'month') == false && moment(now).isSameOrBefore(tdyDate, 'year') == true) {
+            this.sales_date = moment(this.sales_date, "MMM YYYY").add(1, 'months').format("MMM YYYY"); //+ one month
+            let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+            let m = moment(this.sales_date, "MMM YYYY").format("MM");
+            if (this.zm_email != undefined && this.zm_email != '' && this.rm_email == 'all' && this.am_email == 'all') {
+                this.dashboarAm(y, m, "zm")
+            } else if (this.rm_email != undefined && this.rm_email != '' && this.am_email == 'all') {
+                this.dashboarAm(y, m, "rm")
+            } else if (this.am_email != undefined && this.zm_email != 'all' && this.rm_email != 'all' && this.am_email != 'all') {
+                this.dashboarAm(y, m, "am")
+            }
+        }
+    }
+
+    getPercentage() {
+        this.percentage = Math.floor(this.user_dashboard.sales.achieved / this.user_dashboard.sales.target * 100);
+        console.log(this.percentage)
+    }
+
+    viewSalesReport() {
+        console.log('sales')
+        this.router.navigateByUrl('salesreport');
+        // this.router.navigateByUrl('salesreport/mobile/'+this.access_token);
+    }
+
+    viewDseReport() {
+        console.log('dse')
+        this.router.navigateByUrl('dsereport');
+        // this.router.navigateByUrl('dsereport/mobile/'+this.access_token);
+
+    }
+
+    viewAssessmentReport() {
+        console.log('assessment')
+        this.router.navigateByUrl('assessmentreport');
+        // this.router.navigateByUrl('assessmentreport/mobile/'+this.access_token);
+    }
+
+    viewSalesleaderBoard() {
+      this.router.navigateByUrl('leaderboard-ranking');
+    }
+
+    viewAssessmentleaderBoard() {
+      this.router.navigateByUrl('leaderboard-teamranking');
+    }
+
+
+}

Hyper-M_User_Portal/src/app/common/dashboard-bigbikes-details/dashboard-bigbikes-details.component.html

@@ -0,0 +1,35 @@
+ 
+<div class="bottom_content">
+  <div class="row align-items-center">
+    <div class="col point"   [routerLink]="['/mytraining']" >
+      <div class="box_left" *ngIf="user_dashboard!=undefined"  >
+         <img src="assets/img/my_learning.png " class="bigbike_imgs"/>
+         <div class="load_content"  >
+          <h6 class="bigbike_title"> 
+            MY LEARNING</h6> 
+         </div>
+      </div>
+       
+    </div>
+    <div class="col point"   [routerLink]="['/myassessment']" >
+      <div class="box_left" *ngIf="user_dashboard!=undefined"  >
+        <img src="assets/img/my_asessments.png " class="bigbike_imgs ass_wid"/>
+         <div class="load_content"  >
+          <h6 class="bigbike_title"> 
+            MY ASSESSMENT </h6>
+         </div>
+      </div>
+       
+    </div>
+    <div class="col point" [routerLink]="['/leaderboard']"  >
+      <div class="box_left" *ngIf="user_dashboard!=undefined"  >
+        <img src="assets/img/my_ranking.png " class="bigbike_imgs"/>
+         <div class="load_content"  >
+          <h6 class="bigbike_title">  
+             MY RANKING </h6>
+         </div>
+      </div>
+       
+    </div>
+  </div>
+</div>

Hyper-M_User_Portal/src/app/common/dashboard-bigbikes-details/dashboard-bigbikes-details.component.scss

@@ -0,0 +1,23 @@
+.point{
+    cursor:pointer;
+}
+.box_left{
+    width:100%!important;
+}
+.bigbike_imgs{
+    width: 28%;
+    float: left; 
+}
+.bigbike_title{
+    font-size: 16px!important;
+    font-weight: bold;
+    vertical-align: middle;
+    padding-left: 50px!important;
+    padding-top: 5%;
+}
+.ass_wid{
+    width: 20%;
+}
+a.nav-link {
+    color: #28a8e0!important;
+}

Hyper-M_User_Portal/src/app/common/dashboard-bigbikes-details/dashboard-bigbikes-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardBigBikesDetailsComponent } from './dashboard-bigbikes-details.component';
+
+describe('DashboardBigBikesDetailsComponent', () => {
+  let component: DashboardBigBikesDetailsComponent;
+  let fixture: ComponentFixture<DashboardBigBikesDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardBigBikesDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardBigBikesDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/dashboard-bigbikes-details/dashboard-bigbikes-details.component.ts

@@ -0,0 +1,95 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import * as moment from 'moment';
+import { HyperService } from '../../core/services/http.service';
+import { Router } from "@angular/router";
+import { LocalStorage } from '../../core/services/local_storage.service';
+import { DashboardPopupComponent } from '../../sales_executive/dashboard-popup/dashboard-popup.component';
+import { CONFIG } from '../../config';
+//import { $ } from 'protractor';
+declare var $: any;
+@Component({
+  selector: 'app-dashboard-bigbikes-details',
+  templateUrl: './dashboard-bigbikes-details.component.html',
+  styleUrls: ['./dashboard-bigbikes-details.component.scss']
+})
+
+export class DashboardBigBikesDetailsComponent implements OnInit {
+  imageSources = [];
+  sales_date: any;
+  user_dashboard: any;
+  percentage: any;
+  user_type: any;
+  access_token: any;
+  title:any;
+  min_point:any;
+ 
+  @ViewChild(DashboardPopupComponent) content_modal: DashboardPopupComponent;
+  constructor(private server: HyperService, private router: Router) { 
+    this.min_point=LocalStorage.getValue('user_data').min_redeem_point;
+  //     this.sub = this.route.params.subscribe(params => {
+  //     this.type = params['type'];
+  //     this.rmmail = params['rmmail'];
+  //     this.ammail = params['ammail'];
+  // });
+  }
+
+  ngOnInit() {
+    this.sales_date = moment().format("MMM YYYY")//current month and year
+    let m = moment(this.sales_date, "MMM YYYY").format("MM");
+    let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+    this.dashboardDetails(y, m);
+    this.access_token = LocalStorage.getValue('token')
+  }
+
+  decreasMonth() {
+    this.sales_date = moment(this.sales_date, "MMM YYYY").add(-1, 'months').format("MMM YYYY"); //- one month
+    setTimeout(() => {
+      let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+      let m = moment(this.sales_date, "MMM YYYY").format("MM");
+      this.dashboardDetails(y, m)
+    }, 1200);
+  }
+
+  increasMonth() {
+    let now = moment(this.sales_date, "MMM YYYY").format("YYYY-MM-DD");
+    let tdyDate = moment(new Date()).format('YYYY-MM-DD');
+    if (moment(now).isSame(tdyDate, 'month') == false && moment(now).isSameOrBefore(tdyDate, 'year') == true) {
+      this.sales_date = moment(this.sales_date, "MMM YYYY").add(1, 'months').format("MMM YYYY"); //+ one month
+      let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+      let m = moment(this.sales_date, "MMM YYYY").format("MM");
+      this.dashboardDetails(y, m)
+    }
+  }
+
+  dashboardDetails(year, month) {
+    LocalStorage.setValue("temp_mth",month)
+    LocalStorage.setValue("temp_yr",year)
+    this.server.get("dashboard/" + year + "/" + month + "")
+      .then((data) => {
+        if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+          this.user_dashboard = data.result.data;
+          this.getPercentage();
+        } else if (data.result.status == 401 && data.result.response == 'failed') {
+          this.router.navigateByUrl('');
+        } else {
+          // this.imageSources = [];
+        }
+      });
+  }
+
+  getPercentage() {
+    this.percentage = Math.floor(this.user_dashboard.sales.achieved / this.user_dashboard.sales.target * 100);
+    this.title = this.user_dashboard.sales.achieved + "/" + this.user_dashboard.sales.target;
+  }
+
+  showDetails(val) {
+    let sendData:any={};
+    sendData.date= this.sales_date;
+    sendData.type=val;
+    sendData.data_as_on=this.user_dashboard.sales_last_update
+    this.content_modal.showcontentrModal('Result', {sendData}, (data) => {
+    })
+    // this.router.navigateByUrl('redeem');
+  }
+
+}

Hyper-M_User_Portal/src/app/common/dashboard-dse-details/dashboard-dse-details.component.html

@@ -0,0 +1,102 @@
+<app-dashboard-popup></app-dashboard-popup>
+<div class="bottom_content" style="display: none;">
+  <div class="row align-items-center">
+    <div class="col point"   >
+        <h6 class="title" (click)="showDetails(1)">PERFORMANCE </h6>
+      <div class="box_left" *ngIf="user_dashboard!=undefined" (click)="showDetails(1)">
+        <circle-progress
+          [percent]="percentage"
+          [radius]="60"
+          [space]="-10" 
+          [outerStrokeWidth]="10" 
+          [outerStrokeColor]="'#28a8e0 '"
+          [innerStrokeColor]="'#e7e8ea'"
+          [innerStrokeWidth]="10"
+          [title]="title"
+          [showSubtitle]="false"
+          [animateTitle]="false"
+          [animationDuration]="1500"
+          [showUnits]="false"
+          [showBackground]="false" 
+        ></circle-progress>
+          
+        <div class="load_content" (click)="showDetails(1)">
+          <h6>MY PERFORMANCE</h6>
+        </div>
+      </div>
+      <div class="box_right">
+        <img src="assets/img/up_arrow.svg " (click)="decreasMonth()" />
+        <p>{{sales_date}}</p>
+        <img src="assets/img/down_arrow.svg"  [ngClass]="sales_date!=date_now?'':'disable_arrow'" (click)="increasMonth()" />
+      </div>
+    </div>
+    <div class="col point" (click)="showDetails(2)" *ngIf="user_dashboard!=undefined">
+      <h6 class="title">MY LEARNING PATH</h6>
+      <div class="path">
+        <div class="pointer" [ngClass]="{'fullred': user_dashboard.learning.basic==2,'orange':user_dashboard.learning.basic==3, 'grey':user_dashboard.learning.basic==0 || user_dashboard.learning.basic==7 || user_dashboard.learning.basic==4 || user_dashboard.learning.basic==1 || user_dashboard.learning.basic==6}">
+          <div class="poly">
+            <p class="types">B</p>
+            <svg>
+              <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
+              <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
+            </svg>
+          </div>
+        </div>
+
+        <div class="pointer" [ngClass]="{'fullred':  user_dashboard.learning.bronze==2, 'orange':user_dashboard.learning.bronze==3, 'grey':user_dashboard.learning.bronze==0 || user_dashboard.learning.bronze==7 || user_dashboard.learning.bronze==1 || user_dashboard.learning.bronze==4 || user_dashboard.learning.bronze==6 }">
+            <div class="poly">
+              <p class="types">B</p>
+              <svg>
+                <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
+                <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
+              </svg>
+            </div>
+          </div>
+
+          <div class="pointer" [ngClass]="{'grey' : user_dashboard.learning.silver==0 || user_dashboard.learning.silver==1,'greenred': user_dashboard.learning.silver==2, 'orange':user_dashboard.learning.silver==3,'redgrey':user_dashboard.learning.silver==6,'greengrey': user_dashboard.learning.silver==7 || user_dashboard.learning.silver==4}">
+            <div class="poly">
+              <p class="types">S</p>
+              <svg>
+                <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
+                <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
+              </svg>
+            </div>
+          </div>
+          
+          <div class="pointer" [ngClass]="{'grey' : user_dashboard.learning.gold==0 || user_dashboard.learning.gold==1,'greenred': user_dashboard.learning.gold==2, 'orange':user_dashboard.learning.gold==3,'redgrey':user_dashboard.learning.gold==6,'greengrey': user_dashboard.learning.gold==7 || user_dashboard.learning.gold==4}">
+            <div class="poly">
+              <p class="types">G</p>
+              <svg>
+                <!-- <polygon points="50,10 75,25 75,50 50,65 25,50 25,25 " style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" /> -->
+                <polygon points="25,0 50,15 50,35 25,50 0,35 0,15" style="fill:rgba(255, 0, 0, 0);stroke:#ccc;stroke-width:2;" />
+              </svg>
+            </div>
+          </div>
+          <div class="type_name">
+            <p>BASE</p>
+            <p>BRONZE</p>
+            <p>SILVER</p>
+            <p>GOLD</p>
+          </div>
+      </div>
+    </div>
+    <div class="col learning"   (click)="showDetails(3)" style="cursor:pointer"> 
+        <h6 class="title">MY REWARD POINTS</h6>
+      <div class="box_left">
+        <div class="load_content">
+          <h1  *ngIf="user_dashboard!=undefined">{{user_dashboard.earning}}<span> POINTS</span></h1>
+          <h6 > Your passport to competitive learning</h6>
+        </div>
+      </div>
+      <div class="box_right">
+        <img src="assets/img/rewards.png " />
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="col-sm-12 sos-sec">
+  <button class="btn btn-primary sos">
+    <img src="../../../assets/images/sos-icon.png"> SOS
+  </button>
+</div>

Hyper-M_User_Portal/src/app/common/dashboard-dse-details/dashboard-dse-details.component.scss

@@ -0,0 +1,104 @@
+.point{
+    cursor:pointer;
+}
+.bottom_content .row .col .box_right p{
+    // width: 90px !important;
+    font-size: 18px !important;
+}
+.bottom_content .pointer.green{
+    background-color: #71d300;
+}
+.bottom_content .pointer.green:before{
+    background-color: #71d300;
+    border-left: 3px solid #71d300;
+}
+.bottom_content .pointer.green:after {
+    border-top: 10px solid #71d300;
+}
+
+.bottom_content .pointer.orange{
+    background-color: #7bb928;
+}
+.bottom_content .pointer.orange:before {
+    background-color: #7bb928;
+    border-left: 3px solid #7bb928;
+}
+.bottom_content .pointer.orange:after {
+    border-top: 10px solid #7bb928;
+}
+
+.bottom_content .pointer.fullred{
+    background-color: #e51521;
+}
+.bottom_content .pointer.fullred:before {
+    background-color: #e51521;
+    border-left: 3px solid #e51521;
+}
+.bottom_content .pointer.fullred:after {
+    border-top: 10px solid #e51521;
+}
+.bottom_content .pointer.grey:before{
+    background-color: #dad7d7;
+}
+
+.bottom_content .pointer.greengrey{
+    background: linear-gradient(220deg, #7bb928 43%, rgba(0, 0, 0, 0) 44%),linear-gradient(147deg, #7bb928 41%, #dad7d7 49%);
+}
+.bottom_content .pointer.greengrey:before {
+    background-color: #7bb928;
+    border-left: 3px solid #7bb928;
+}
+.bottom_content .pointer.greengrey:after {
+    border-top: 10px solid #dad7d7;
+}
+
+.bottom_content .pointer.greenred{
+    background: linear-gradient(220deg, #7bb928 43%, transparent 44%), linear-gradient(147deg, #7bb928 41%, #e51521 49%);
+}
+.bottom_content .pointer.greenred:before {
+    background-color: #7bb928;
+    border-left: 3px solid #7bb928;
+}
+.bottom_content .pointer.greenred:after {
+    border-top: 10px solid #e51521;
+}
+
+.bottom_content .pointer.redgrey{
+    background: linear-gradient(220deg, #e51521 43%, transparent 44%), linear-gradient(147deg, #e51521 41%, #dad7d7 46%)
+}
+.bottom_content .pointer.redgrey:before {
+    background-color: #e51521;
+    border-left: 3px solid #e51521;
+}
+.bottom_content .pointer.redgrey:after {
+    border-top: 10px solid #dad7d7;
+}
+
+// .bottom_content .pointer.greenGrey{
+//     background: linear-gradient(220deg, #7bb928 43%, transparent 44%), linear-gradient(147deg, #7bb928 41%, #e51521 49%);
+// }
+// .bottom_content .pointer.greenGrey:before {
+//     background-color: #7bb928;
+//     border-left: 3px solid #7bb928;
+// }
+// .bottom_content .pointer.greenGrey:after {
+//     border-top: 10px solid #e51521;
+// }
+
+.sos-sec{
+    margin: 0px auto;
+    text-align: center;
+    .btn.btn-primary.sos{
+        width: auto;
+        padding: 0 40px;
+        border-color: red;
+        background: red;
+        border-color: red;
+        color: #fff;
+        font-size: 14px;
+        img{
+            max-width: 32px;
+            padding-right: 10px;
+        }
+    }
+}

Hyper-M_User_Portal/src/app/common/dashboard-dse-details/dashboard-dse-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardDseDetailsComponent } from './dashboard-dse-details.component';
+
+describe('DashboardDseDetailsComponent', () => {
+  let component: DashboardDseDetailsComponent;
+  let fixture: ComponentFixture<DashboardDseDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardDseDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardDseDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/dashboard-dse-details/dashboard-dse-details.component.ts

@@ -0,0 +1,95 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import * as moment from 'moment';
+import { HyperService } from '../../core/services/http.service';
+import { Router } from "@angular/router";
+import { LocalStorage } from '../../core/services/local_storage.service';
+import { DashboardPopupComponent } from '../../sales_executive/dashboard-popup/dashboard-popup.component';
+import { CONFIG } from '../../config';
+//import { $ } from 'protractor';
+declare var $: any;
+@Component({
+  selector: 'app-dashboard-dse-details',
+  templateUrl: './dashboard-dse-details.component.html',
+  styleUrls: ['./dashboard-dse-details.component.scss']
+})
+
+export class DashboardDseDetailsComponent implements OnInit {
+  imageSources = [];
+  sales_date: any;
+  user_dashboard: any;
+  percentage: any;
+  user_type: any;
+  access_token: any;
+  title:any;
+  min_point:any;
+  date_now: any;
+  @ViewChild(DashboardPopupComponent) content_modal: DashboardPopupComponent;
+  constructor(private server: HyperService, private router: Router) { 
+    this.min_point=LocalStorage.getValue('user_data').min_redeem_point;
+  //     this.sub = this.route.params.subscribe(params => {
+  //     this.type = params['type'];
+  //     this.rmmail = params['rmmail'];
+  //     this.ammail = params['ammail'];
+  // });
+  }
+
+  ngOnInit() {
+    this.sales_date = moment().format("MMM YYYY")//current month and year
+    this.date_now = moment(this.sales_date, "MMM YYYY").format("MMM YYYY");
+    let m = moment(this.sales_date, "MMM YYYY").format("MM");
+    let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+    this.dashboardDetails(y, m);
+    this.access_token = LocalStorage.getValue('token')
+  }
+
+  decreasMonth() {
+    this.sales_date = moment(this.sales_date, "MMM YYYY").add(-1, 'months').format("MMM YYYY"); //- one month
+    setTimeout(() => {
+      let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+      let m = moment(this.sales_date, "MMM YYYY").format("MM");
+      this.dashboardDetails(y, m)
+    }, 1200);
+  }
+
+  increasMonth() {
+    let now = moment(this.sales_date, "MMM YYYY").format("YYYY-MM-DD");
+    let tdyDate = moment(new Date()).format('YYYY-MM-DD');
+    if (moment(now).isSame(tdyDate, 'month') == false && moment(now).isSameOrBefore(tdyDate, 'year') == true) {
+      this.sales_date = moment(this.sales_date, "MMM YYYY").add(1, 'months').format("MMM YYYY"); //+ one month
+      let y = moment(this.sales_date, "MMM YYYY").format("YYYY");
+      let m = moment(this.sales_date, "MMM YYYY").format("MM");
+      this.dashboardDetails(y, m)
+    }
+  }
+
+  dashboardDetails(year, month) {
+    LocalStorage.setValue("temp_mth",month)
+    LocalStorage.setValue("temp_yr",year)
+    this.server.get("dashboard/" + year + "/" + month + "")
+      .then((data) => {
+        if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+          this.user_dashboard = data.result.data;
+          this.getPercentage();
+        } else if (data.result.status == 401 && data.result.response == 'failed') {
+          this.router.navigateByUrl('');
+        } else {
+          // this.imageSources = [];
+        }
+      });
+  }
+
+  getPercentage() {
+    this.percentage = Math.floor(this.user_dashboard.sales.achieved / this.user_dashboard.sales.target * 100);
+    this.title = this.user_dashboard.sales.achieved + "/" + this.user_dashboard.sales.target;
+  }
+
+  showDetails(val) {
+    let sendData:any={};
+    sendData.date= this.sales_date;
+    sendData.type=val;
+    sendData.data_as_on=this.user_dashboard.sales_last_update
+    this.content_modal.showcontentrModal('Result', {sendData}, (data) => {
+    })
+    // this.router.navigateByUrl('redeem');
+  }
+}

Hyper-M_User_Portal/src/app/common/emicalculator/emicalculator.component.html

@@ -0,0 +1,4 @@
+<app-main-header></app-main-header>
+<div class="emicalculator">
+  <iframe width="100%" height="400" [src]="url"></iframe>
+</div>

Hyper-M_User_Portal/src/app/common/emicalculator/emicalculator.component.scss

@@ -0,0 +1,4 @@
+.emicalculator{
+    margin-top: 2%;
+    padding: 10px;
+}

Hyper-M_User_Portal/src/app/common/emicalculator/emicalculator.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmicalculatorComponent } from './emicalculator.component';
+
+describe('EmicalculatorComponent', () => {
+  let component: EmicalculatorComponent;
+  let fixture: ComponentFixture<EmicalculatorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EmicalculatorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmicalculatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/emicalculator/emicalculator.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-emicalculator',
+  templateUrl: './emicalculator.component.html',
+  styleUrls: ['./emicalculator.component.scss']
+})
+export class EmicalculatorComponent implements OnInit {
+  url;
+  constructor(public sanitizer: DomSanitizer) { }
+
+  ngOnInit() {
+    this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://hyper-m.cygnusa.in/emicalculator/');
+  }
+}

Hyper-M_User_Portal/src/app/common/forgot-password/forgot-password.component.html

@@ -0,0 +1,49 @@
+<div class="modal" id="fogotexampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="fogotexampleModalCenterTitle" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <div class="row align-items-center">
+                        <div class="col col-sm-4 logo">
+                            <img src="assets/img/otp.png" />
+                        </div>
+                        <div class="main_content" *ngIf="!otp_sucess">
+                            <div class="col col-sm-8 content section1">
+                                <h2>OTP Sent</h2>
+                                <p *ngIf="forgot_user!=undefined">Your OTP have been sent to your <span id="userMobile">{{mobileno_start}}XXXXXX{{mobileno_end}}</span></p>
+                                <div class="input_left">
+                                    <form [formGroup]="otpform" (keyup.enter)="onSubmitOtp()">
+                                        <div class="form-group box">
+                                            <input type="tel" id="forgot_otp1" (input)="onInputChange()" class="form-control password" maxlength="1" [(ngModel)]="forgot_otp1"   onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null" formControlName="forgot_otp1" autocomplete="off" required>
+                                            <input type="tel" id="forgot_otp2" (input)="onInputChange()" class="form-control password" maxlength="1" [(ngModel)]="forgot_otp2"  onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null" formControlName="forgot_otp2" autocomplete="off" required>
+                                            <input type="tel" id="forgot_otp3" (input)="onInputChange()" class="form-control password" maxlength="1" [(ngModel)]="forgot_otp3"  onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null" formControlName="forgot_otp3" autocomplete="off" required>
+                                            <input type="tel" id="forgot_otp4" (input)="onInputChange()" class="form-control password" maxlength="1" [(ngModel)]="forgot_otp4"  onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null" formControlName="forgot_otp4" autocomplete="off" required>
+                                            <div class="color_error shake" *ngIf="otp_error!=undefined && otp_error!=''">
+                                                <a class="text-left shake">
+                                                    <img *ngIf="otp_error!=''" src="assets/img/error.png" />{{otp_error}} </a>
+                                            </div>
+                                            <div class="color_error shake" *ngIf="otp_error=='' && !otpform.controls['forgot_otp1'].valid && !otpform.controls['forgot_otp2'].valid && !otpform.controls['forgot_otp3'].valid && !otpform.controls['forgot_otp4'].valid">
+                                                    <a class="text-left shake">
+                                                        <img *ngIf="otp_error=='' && !otpform.controls['forgot_otp1'].valid && !otpform.controls['forgot_otp2'].valid && !otpform.controls['forgot_otp3'].valid && !otpform.controls['forgot_otp4'].valid" src="assets/img/error.png" />Please Enter Valid OTP</a>
+                                                </div>
+                                        </div>
+                                    </form>
+                                    <div class="resent" *ngIf="resend_enable"><a (click)="resendOtp()">Resend OTP</a></div>
+                                </div>
+                                <h6 *ngIf="!resend_enable && countdown=='1:0'">OTP Expires in 00:60 Sec</h6>
+                                <h6 *ngIf="!resend_enable && countdown!='1:0'">OTP Expires in {{countdown}} Sec</h6>
+                                <button class="btn primary fixed float-right" (click)="onSubmitOtp()">Submit</button>
+                                <button class="btn primary fixed float-right" (click)="onCancelOtp()">Cancel</button>
+                            </div>
+                        </div>
+                        <!-- <div class="main_content" *ngIf="otp_sucess">
+                            <div class="col col-sm-8 content success">
+                                <img src="assets/img/success.gif" />
+                                <h2>OTP Verified successfully</h2>
+                                <button class="btn primary fixed float-right" (click)="gotoChangePassword()" data-dismiss="modal" aria-label="Close">continue</button>
+                            </div>
+                        </div> -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>

Hyper-M_User_Portal/src/app/common/forgot-password/forgot-password.component.scss

@@ -0,0 +1,341 @@
+.modal-dialog{
+    max-width: 800px;
+    .modal-content{
+        .modal-header{
+            
+        }
+        .modal-body{
+            .form-group.box{
+                background-color: transparent;
+                width: 100%;
+                height: 50px;
+                cursor: pointer;
+                webkit-box-shadow: none; 
+                box-shadow: none; 
+                padding: 0; 
+                .form-control {
+                    border: none;
+                    border: 2px solid #28a8e0;
+                    border-radius: 0;
+                    -webkit-box-shadow: none;
+                    height: 50px;
+                    font-size: 16px;
+                    color: #28a8e0 !important;
+                    font-weight: bold;
+                    padding: .375rem 0;
+                    height: 50px;
+                    border-radius: 0;
+                    background-color: transparent;
+                    padding-left: 70px;
+                    padding-top: 20px;
+                    background-size: 30px;
+                    background-repeat: no-repeat;
+                    background-position: 30px center;
+                    width: 60px;
+                    background-image: none !important;
+                    padding: 0;
+                    font-size: 24px;
+                    /* line-height: 1; */
+                    text-align: center;
+                }
+                input{
+                    float: left;
+                    margin: 5px;
+                }
+                input[type=number]::-webkit-inner-spin-button, 
+                input[type=number]::-webkit-outer-spin-button { 
+                -webkit-appearance: none; 
+                margin: 0; 
+                }
+            }
+            .row {
+                height:300px;
+                .col{
+                    height:100%;
+                }
+                .logo{
+                    border-right:1px solid #ccc;
+                    padding: 2px 25px;
+                    text-align: center;
+                    img{
+                        width:150px;
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        bottom: 0;
+                        margin: auto;
+                    }
+                }
+                .main_content{
+                    float: left;
+                    max-width: 66.666667%;
+                    height: 100%;
+                    width: 100%;
+                    overflow: hidden;
+                    position: relative;
+                    .content{
+                        padding: 30px;
+                        position: absolute;
+                        width: 100%;
+                        max-width: 100%;
+                        h2{
+                            color:#28a8e0;
+                            font-size: 28px;
+                        }
+                        p{
+                            font-size: 16px;
+                        }
+                        h6{
+                            font-size: 16px;
+                            color:#28a8e0;
+                            font-style: italic;
+                        }
+                        .input_left {
+                            height: 90px;
+                            width: 100%;
+                            form{
+                                width: 70%;
+                                float: left;
+                            }
+                            .resent{
+                                width:30%;
+                                float: left;
+                                text-align: center;
+                                margin-top: 20px;
+                                a{
+                                    text-decoration: underline;
+                                    cursor: pointer;
+                                }
+                            }
+                        }
+                        .btn_center {
+                            width: 340px;
+                            margin: auto;
+                        }
+                    }
+                    .success{
+                        text-align: center;
+                        img{
+                            width: 100px;
+                            margin: 20px;
+                        }
+                        h2{
+                            color:green;
+                        }
+                    }
+                    .otp {
+                        color: darkgray;
+                        border-style: none;
+                        width: 60px;
+                        height: 60px;
+                        font-size: 50px;
+                      }
+                      
+                      td {
+                        border: 2px solid darkgray
+                      }
+                      
+                      table {
+                        border-collapse: collapse;
+                      }
+                }
+                
+                .section1{
+                    left: 0;
+                }
+                .section2{
+                    left: 100%;
+                }
+                .section3{
+                    left: 100%;
+                }
+                .section1.section_close{
+                    left:-100%;
+                }
+                .section2.section_open{
+                    left:0;
+                }
+                .section3.section_open{
+                    left:0;
+                }
+
+                .section_open {
+                    /* for chrome and safari*/
+                    -webkit-animation-duration: 1s;
+                    -webkit-animation-name: sectionin;
+                  
+                    /*for firefox*/
+                    -moz-animation-duration: 1s;
+                    -moz-animation-name: sectionin;
+                  
+                      /* for opera*/
+                    -o-animation-duration: 1s;
+                    -o-animation-name: sectionin;
+                  
+                      /* Standard syntax*/
+                    animation-duration: 1s;
+                    animation-name: sectionin;
+                  }
+                
+                
+                  @-webkit-keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+                  
+                  @-moz-keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+                  @-o-keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+                  @keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+
+
+                  .section_close {
+                    /* for chrome and safari*/
+                    -webkit-animation-duration: 1s;
+                    -webkit-animation-name: sectionout;
+                  
+                    /*for firefox*/
+                    -moz-animation-duration: 1s;
+                    -moz-animation-name: sectionout;
+                  
+                      /* for opera*/
+                    -o-animation-duration: 1s;
+                    -o-animation-name: sectionout;
+                  
+                      /* Standard syntax*/
+                    animation-duration: 1s;
+                    animation-name: sectionout;
+                  }
+                
+                
+                  @-webkit-keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 80%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+                  
+                  @-moz-keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 80%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+                  @-o-keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+                  @keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 80%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 550px) {
+    .modal-dialog{
+        .modal-content{
+            .modal-body{
+                padding-top:0;
+                .row{
+                    height: 370px;
+                    .logo{
+                        border-bottom: 1px solid #ccc;
+                        border-right: 0;
+                        height: 100px;
+                        img{
+                            width:90px;
+                        }
+                    }
+                    .main_content{
+                        max-width: 100%;
+                        .success{
+                            img{
+                                width: 80px;
+                                margin: 0px;
+                            }
+                            h2{
+                                font-size: 20px;
+                            }
+                        }
+                        .content{
+                            position: inherit;
+                            .input_left{
+                                form{
+                                    width:100%;
+                                }
+                                .resent{
+                                    margin-bottom: 20px;
+                                    width:100%;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

Hyper-M_User_Portal/src/app/common/forgot-password/forgot-password.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForgotPasswordComponent } from './forgot-password.component';
+
+describe('ForgotPasswordComponent', () => {
+  let component: ForgotPasswordComponent;
+  let fixture: ComponentFixture<ForgotPasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ForgotPasswordComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ForgotPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/forgot-password/forgot-password.component.ts

@@ -0,0 +1,227 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { HyperService } from './../../core/services/http.service';
+import { LocalStorage } from './../../core/services/local_storage.service';
+import { Router } from "@angular/router";
+import { timer } from 'rxjs/observable/timer';
+import { take, map } from 'rxjs/operators';
+import { Observable } from "rxjs/Observable";
+import "rxjs/add/observable/timer";
+import "rxjs/add/operator/finally";
+import "rxjs/add/operator/takeUntil";
+import "rxjs/add/operator/map";
+import { Subscription } from "rxjs";
+import { TimerObservable } from "rxjs/observable/TimerObservable";
+import { ViewChild, AfterViewInit, Renderer } from '@angular/core';
+import { CONFIG } from '../../config';
+
+declare var $: any;
+@Component({
+    selector: 'app-forgot-password',
+    templateUrl: './forgot-password.component.html',
+    styleUrls: ['./forgot-password.component.scss']
+})
+export class ForgotPasswordComponent implements OnInit {
+    stream$
+    sub: Subscription
+    otp_error: string;
+    otp_sucess: boolean = false;
+    otpform: FormGroup;
+    forgot_otp: string = '';
+    forgot_otp1: any;
+    forgot_otp2: any;
+    forgot_otp3: any;
+    forgot_otp4: any;
+    resend: boolean = false;
+    resend_enable: boolean = false;
+    forgot_user: any;
+    countdown: any;
+    loader_timing: any;
+    loader_delay: any;
+    isTimerRunning: boolean = false;
+    otp_expiry:number;
+    mobileno_start:any;
+    mobileno_end:any;
+    constructor(public renderer: Renderer,private formBuilder: FormBuilder, private server: HyperService, private router: Router) {
+        //this.TimeSet(5)
+
+     }
+
+    ngOnInit() {
+
+        this.formBuild();
+        this.forgot_otp1='';
+        this.forgot_otp2='';
+        this.forgot_otp3='';
+        this.forgot_otp4='';
+        // this.otp_error='';
+
+    }
+
+    callInitViews(){
+        this.countdown = ''
+        if(LocalStorage.getValue('forgot_data')!=undefined){
+            this.forgot_user = LocalStorage.getValue('forgot_data');
+            this.mobileno_start = this.forgot_user.data.substring(0, 2)
+            this.mobileno_end = this.forgot_user.data.substring(8, 11)
+            this.otp_expiry = this.forgot_user.otp_expiry;
+        }
+        if(CONFIG.forgot_cont==true){
+            this.isTimerRunning = false
+            this.TimeSet(this.otp_expiry)
+        }
+    }
+
+    ngAfterContentChecked(){
+        if(CONFIG.forgot_cont==true){
+            if (!this.isTimerRunning && LocalStorage.getValue('forgot_data') != undefined){
+                this.callInitViews()
+                this.isTimerRunning = true
+            }
+        }
+    }
+
+    formBuild() {
+        this.otpform = this.formBuilder.group({
+            forgot_otp1: [null, Validators.compose([Validators.required])],
+            forgot_otp2: [null, Validators.compose([Validators.required])],
+            forgot_otp3: [null, Validators.compose([Validators.required])],
+            forgot_otp4: [null, Validators.compose([Validators.required])]
+        });
+    }
+
+    resendOtp() {
+        this.resend = true;
+        this.resend_enable = false;
+        this.forgot_otp1='';
+        this.forgot_otp2='';
+        this.forgot_otp3='';
+        this.forgot_otp4='';
+        this.otp_error='';
+        this.forgotOtp();
+    }
+
+
+    forgotOtp() {
+        let pin=LocalStorage.getValue('smpin');
+        if (pin == undefined || pin == '' || pin == null) return;
+        this.server.post("user/forgot_password", {
+            username: pin
+        }).then((data) => {
+            LocalStorage.setValue('forgot_data', data);
+            if (data.status == 200 && data.result.response == "success") {
+                this.resend_enable=false;
+                this.TimeSet(data.result.otp_expiry)
+            } else if (data.result.response == "failed") {
+
+            }
+        })
+    }
+
+    TimeSet(Time) {
+        this.loader_timing = Time * 60;
+        this.loader_delay = this.loader_timing / 2;
+        const interval = 1000;
+        const duration = 10 * 6000 * Time;
+        this.stream$ = Observable.timer(0, interval)
+            .finally(() => this.onclose())
+            .takeUntil(Observable.timer(duration + interval))
+            .map(value => duration - value * interval);
+            this.sub = this.stream$.subscribe(value => this.formatMin(value));
+    }
+
+    onclose() {
+        this.countdown = ''
+        this.resend_enable = true;
+
+    }
+    onInputChange(){
+        $('input.password').on('keyup', function(e) {
+            if($(this).val()!='' && e.keyCode != 8){
+            if ($(this).val()) {
+                console.log($(this).val(),"$(this).val()")
+                $(this).next().focus();
+            }
+        }else{
+            if(e.keyCode == 8){
+            // console.log($(this).val(),"$(this).val()sdf")
+            $(this).prev().focus();
+        }
+        }
+
+        });
+    }
+    onSubmitOtp() {
+        LocalStorage.removeValue('token')
+        console.log(this.otpform.valid)
+        if (this.otpform.valid) {
+            this.server.post("user/otp_validation", {
+                otp: (this.forgot_otp1.toString())+(this.forgot_otp2.toString())+(this.forgot_otp3.toString())+(this.forgot_otp4.toString()),
+                type: 'forgot_password',
+                username: LocalStorage.getValue('smpin')
+            }).then((data) => {
+                if (data.status == 200 && data.result.response == "success") {
+                    this.otp_sucess = true;
+                    LocalStorage.setValue('token', data.result.access_token);
+                    LocalStorage.setValue('forgot', 'change');
+                    $("#fogotexampleModalCenter").modal('hide');
+                    this.router.navigateByUrl('setpassword');
+                } else if (data.result.response == "failed") {
+                    this.otp_error =  data.result.message;
+                }
+            })
+        } else {
+            this.otp_error = '';
+            this.validateAllFormFields(this.otpform);
+        }
+    }
+
+    formatMin(s) {
+        let ms = s % 1000;
+        s = (s - ms) / 1000;
+        let secs = s % 60;
+
+        s = (s - secs) / 60;
+        let mins = s % 60;
+        let hrs = (s - mins) / 60;
+        if (hrs > 0) {
+            this.countdown = hrs + ':' + mins + ':' + secs;
+        } else {
+            this.countdown = mins + ':' + secs;
+        }
+    }
+
+    validateAllFormFields(formGroup: FormGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
+            const control = formGroup.get(field);
+            if (control instanceof FormControl) {
+                control.markAsTouched({
+                    onlySelf: true
+                });
+            } else if (control instanceof FormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+
+    // gotoChangePassword() {
+    //     this.router.navigateByUrl('setpassword/2');
+    // }
+    onCancelOtp(){
+        $("#fogotexampleModalCenter").modal('hide');
+        this.forgot_otp = '';
+        this.countdown = '';
+        this.otpform.markAsUntouched();
+        CONFIG.forgot_cont = false;
+        this.sub.unsubscribe()
+        this.sub = this.stream$.subscribe(0 , this.formatMin(0));
+        this.isTimerRunning = false;
+        this.forgot_otp1='';
+        this.forgot_otp2='';
+        this.forgot_otp3='';
+        this.forgot_otp4='';
+        this.otp_error='';
+        this.resend_enable = false;
+    }
+
+}

Hyper-M_User_Portal/src/app/common/landing/landing.component.html

@@ -0,0 +1,66 @@
+<app-main-header></app-main-header>
+<app-dashboard-popup></app-dashboard-popup>
+<div class="dashboard" [ngClass]="user_type==0?'dse':''">
+  
+ <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000"> 
+        <ol class="carousel-indicators">
+            <li data-target="#myCarousel" *ngFor="let banner of imageSources;let i=index" [attr.data-slide-to]="i" [ngClass]="{active:activeBanner===i}"></li>
+            <!-- <li data-target="#myCarousel" data-slide-to="1"></li>
+            <li data-target="#myCarousel" data-slide-to="2"></li> -->
+          </ol>
+        <div class="carousel-inner">
+          <div *ngFor="let banner of imageSources;let i=index" class="carousel-item" [ngClass]="{active:activeBanner===i}">
+            <img [src]="banner" class="d-block w-100" alt="...">
+          </div>
+          <!-- <div class="carousel-item">
+            <img src="https://hyper-m.cygnusa.in/upload/banner/web_7.jpg" class="d-block w-100" alt="...">
+          </div>
+          <div class="carousel-item">
+            <img src="https://hyper-m.cygnusa.in/upload/banner/web_8.jpg" class="d-block w-100" alt="...">
+          </div> -->
+        </div>
+        <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="sr-only">Previous</span>
+        </a>
+        <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="sr-only">Next</span>
+        </a>
+      </div> 
+   <!-- <slideshow  [autoPlay]="true" [showArrows]="true" [imageUrls]="imageSources" [lazyLoad]="imageSources?.length > 1" [autoPlayInterval]="5000" [autoPlayWaitForLazyLoad]="true" [showDots]="true" [stopAutoPlayOnSlide]="false">
+  </slideshow>  -->
+
+  <!-- <app-dashboard-dse-details *ngIf="user_type==0 && user_role!=15"></app-dashboard-dse-details> -->
+  <app-dashboard-bigbikes-details *ngIf="user_type==0 && user_role==15"></app-dashboard-bigbikes-details>
+  <app-dashboard-am-details *ngIf="user_type==1" ></app-dashboard-am-details>
+  <!-- <app-dashboard-am-details></app-dashboard-am-details> -->
+  <div class="welcome-section container">
+    <h5>Welcome!</h5>
+    <div class="row">
+      <div class="col-sm-3">
+        <div class="s1 sec" [routerLink]="['/mytraining']"></div>
+      </div>
+      <div class="col-sm-3">
+        <div class="s2 sec" [routerLink]="['/myassessment']"></div>
+      </div>
+      <div class="col-sm-3">
+        <div class="s3 sec" [routerLink]="['/leaderboard']"></div>
+      </div>
+      <div class="col-sm-3">
+        <div class="s4 sec" [routerLink]="['/feedback']"></div>
+      </div>
+      <div class="col-sm-12 ">
+        <div class="rewards" [routerLink]="['/bulletin']"></div>
+      </div>
+      <div class="col-sm-12 sos-sec">
+        <button class="btn btn-primary sos">
+          <img src="../../../assets/images/sos-icon.png"> SOS
+        </button>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+

Hyper-M_User_Portal/src/app/common/landing/landing.component.scss

@@ -0,0 +1,488 @@
+.dashboard.dse{
+    slideshow{
+        height: calc(100% - 200px);
+    }
+}
+
+.dashboard{
+    width: 100%;
+    height:calc(100% - 85px);
+    slideshow {
+        width: 100%;
+        height: calc(100% - 243px);
+        float: left;
+    }
+    .bottom_content{
+        width:100%;
+        height:200px;
+        float: left;
+        // background-color: #ccc;
+        padding:0 80px;
+        .row{
+            // width: 1000px;
+            // margin: auto;
+            height:100%;          
+          
+            .col{
+                width: 300px;
+                height:170px;
+                margin:0 20px; 
+                border-radius:10px;
+                box-shadow: 0px 0px 9px 3px #e2dede;
+                background-color: #fff;
+                padding: 20px;
+                .title{
+                    font-size: 14px;
+                    color:#333;
+                    float: left;
+                    width:100%;
+                }
+                .box_left{
+                    width:calc(100% - 57px);
+                    margin-top: 15px;
+                    float: left;
+                    position: relative;
+                    svg {
+                        width: 100px;
+                        float: left;
+                        top: 0;
+                        height: 100px;
+                    }
+                    // .timer {
+                    //     position: absolute;
+                    //     top: 0;
+                    //     left: 0;
+                    //     bottom: 0;
+                    //     left: 5px;
+                    //     width: 70px;
+                    //     height: 55px;
+                    //     margin: auto;
+                    //     font-size: 36px;
+                    //     color: #28a8e0 ;
+                    //     text-align: center;
+                    // }
+                    .load_content{
+                        float: left;
+                        margin-top: 20px;
+                        margin-left: 10px;
+                        h6{
+                            font-size: 14px;
+                            color: #28a8e0 ;
+                        }
+                        p{
+                            font-size: 12px;
+                            color: #28a8e0 ;
+                        }
+                    }
+                }
+                .box_right{
+                    background-color: #28a8e0 ;
+                    width: 120px;
+                    height: 100%;
+                    float: right;
+                    position: absolute;
+                    right:0;
+                    top:0;
+                    border-bottom-right-radius: 10px;
+                    border-top-right-radius: 10px;
+                    padding: 10px;
+                    text-align: center;
+                    img{
+                        width: 30px;
+                        cursor: pointer;
+                    }
+                    p{
+                        color:#fff;
+                        font-size: 24px;
+                        margin: 0;
+                        padding: 10px 0;
+                    }
+                }
+            }
+            .learning{
+                .box_left{
+                    margin: 0;
+                    position: relative;
+                    height: 42%;
+                    .load_content{
+                        margin:auto;
+                        position: absolute;
+                        width: 200px;
+                        height: 65px;
+                        left:0;
+                        right:0;
+                        top:0;
+                        bottom: 0;
+                        text-align: center;
+                        h1{
+                            font-size: 50px;
+                            span{
+                                font-size: 30px;
+                            }
+                        }
+                    }
+                }
+                .box_right{
+                    img{
+                        width: 70px;
+                        margin-top: 40px;
+                    }
+                }
+            }
+        }
+        .loader {
+        border: 5px solid #ccc;
+        border-radius: 50%;
+        border-top: 5px solid #28a8e0 ;
+        width: 80px;
+        height: 80px;
+        // -webkit-animation: spin 2s linear infinite; /* Safari */
+        // animation: spin 2s linear infinite;
+        float: left;
+        }
+        
+        /* Safari */
+        // @-webkit-keyframes spin {
+        // 0% { -webkit-transform: rotate(0deg); }
+        // 100% { -webkit-transform: rotate(360deg); }
+        // }
+        
+        // @keyframes spin {
+        // 0% { transform: rotate(0deg); }
+        // 100% { transform: rotate(360deg); }
+        // }
+        .path:after {
+            width: 92%;
+            height: 2px;
+            background-color: transparent;
+            content: "";
+            left: 5%;
+            z-index: -1;
+            position: absolute;
+            top: 8px;
+            box-shadow: 0 -4px 5px 1px #d0cece;
+        }
+        .pointer:before {
+            width: 8px;
+            height: 8px;
+            content: "";
+            // background-color: #999;
+            position: absolute;
+            right: -5px;
+            border-top-left-radius: 50%;
+            // border-left: 3px solid #dad7d7;
+            border-top-right-radius: 50%;
+        }
+        .path{
+            width: 242px;
+            margin: auto;
+            height: 75px;
+            /* position: relative; */
+            position: absolute;
+            z-index: 99;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            .type_name{
+                width: 100%;
+                float: left;
+                p{
+                    float: left;
+                    width: 24.5%;
+                    text-align: center;
+                    font-size: 12px;
+                    font-weight: bold;
+                    font-style: italic;
+                    margin-top: 10px;
+                }
+            }
+        }
+        .pointer.grey{
+            background-color: #dad7d7;
+        }
+        .pointer.grey:before{
+            background-color: #dad7d7;
+            border-left: 3px solid #dad7d7;
+        }
+        .pointer.grey:after{
+            border-top: 10px solid #dad7d7;
+        }
+        .pointer.orange{
+            background-color: orange;
+        }
+        .pointer.orange:before{
+            background-color: #cc8504;
+            border-left: 3px solid orange;
+        }
+        .pointer.orange:after{
+            border-top: 10px solid orange;
+        }
+        .pointer.green{
+            background-color: green;
+        }
+        .pointer.green:before{
+            background-color: #036303;
+            border-left: 3px solid green;
+        }
+        .pointer.green:after{
+            border-top: 10px solid green;
+        }
+        .pointer.red{
+            background-color: red;
+        }
+        .pointer.red:before{
+            background-color: #a90606;
+            border-left: 3px solid red;
+        }
+        .pointer.red:after{
+            border-top: 10px solid red;
+        }
+        .pointer {
+            width: 35px;
+            height: 80px;
+            position: relative;
+            // background: red;
+            border-top-left-radius: 4px;
+            float: left;
+            margin: 0 5%;
+            // .poly{
+            //     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+            // }
+            .poly {
+                width: 50px;
+                height: 50px;
+                background: transparent;
+                float: left;
+                position: absolute;
+                bottom: -5px;
+                z-index: 99;
+                left: -8px;
+                svg{
+                    float: left;
+                    margin: 0;
+                    width: 100%;
+                    height: 100%;
+                }
+                .types{
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    margin: auto;
+                    width: 40px;
+                    height: 50px;
+                    left: 0;
+                    right: 0;
+                    text-align: center;
+                    font-size: 30px;
+                }
+            }
+            // .poly:before {
+            //     content: "";
+            //     position: absolute;
+            //     top: -15px;
+            //     left: 0;
+            //     width: 0;
+            //     height: 0;
+            //     border-left: 30px solid transparent;
+            //     border-right: 30px solid transparent;
+            //     border-bottom: 15px solid blue;
+            // }
+            // .poly:after {
+            //     content: "";
+            //     position: absolute;
+            //     bottom: -15px;
+            //     left: 0;
+            //     width: 0;
+            //     height: 0;
+            //     border-left: 30px solid transparent;
+            //     border-right: 30px solid transparent;
+            //     border-top: 15px solid blue;
+            // }
+          }
+          .pointer:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 0;
+            height: 0;
+            border-left: 17px solid white;
+            border-top: 10px solid red;
+            border-right: 18px solid white;
+          }
+        //   .pointer:before {
+        //     content: "";
+        //     position: absolute;
+        //     right: -20px;
+        //     bottom: 0;
+        //     width: 0;
+        //     height: 0;
+        //     border-left: 20px solid transparent;
+        //     border-top: 20px solid transparent;
+        //     border-bottom: 20px solid red;
+        //   }
+    }
+}
+@media screen and (max-width: 768px) {
+    .dashboard{
+        width: 100%;
+        height: auto;
+        margin-top: 0px;
+        overflow: scroll;
+        slideshow{
+            height: 300px;
+        }
+    }
+}
+@media screen and (max-width: 1024px) {
+    .dashboard.dse{
+        slideshow{
+            height: calc(100% - 170px);
+        }
+        .bottom_content {
+            background-color: red;
+            .row {
+                .learning {
+                    .box_right {
+                        img {
+                            width: 60px;
+                        }
+                    } 
+                } 
+            } 
+        } 
+    }
+    .dashboard{
+        height: calc(100% - 60px);
+        slideshow{
+            height: calc(100% - 420px);
+        }
+        .bottom_content{
+            height: 330px;
+            .main_dropdown{
+                bottom: 374px;
+            }
+            .row{
+                .col{
+                    margin: 5px 5px;
+                    width: 332px;
+                    height: 170px !important;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 768px) {
+    .dashboard {
+        height: 100%;
+        float: left;
+        // padding-top: 53px;
+        overflow-y: scroll;
+        slideshow{
+            height: 200px;
+        }
+    }
+}
+.carousel-indicators {
+
+    bottom: 16px !important;
+}
+.carousel-indicators li {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin: 3px;
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: #000;
+    background-color: rgba(0,0,0,0);
+    border: 1px solid #28a8e0 ;
+    border-radius: 10px;
+}
+.carousel-indicators .active {
+    width: 12px;
+    height: 12px;
+    margin: 3;
+    background-color: #28a8e0 ;
+}
+
+.carousel-control-next-icon, .carousel-control-prev-icon{
+    background-color: #333;
+}
+.carousel-control-prev {
+    left: -65px;
+}
+
+.carousel-control-next {
+    right: -65px;
+}
+
+.carousel-control-prev-icon {
+    width: 22%;
+    height: 12%;
+    background-size: 21px;
+}
+.carousel-control-next-icon{
+    width: 22%;
+    height: 12%;
+    background-size: 21px;
+}
+
+.welcome-section.container{
+    max-width: 900px;
+    h5{
+        font-size: 20px;
+        color: #000;
+        margin: 10px 0;
+    }
+    .sec{
+        background-size: cover;
+        border: 1px solid #28a8e0;
+        background-position: bottom;
+        min-height: 180px;
+        cursor: pointer;
+        border-radius: 3px;
+    }
+    .s1{
+        background-image: url(../../../assets/images/Dashboard-image1.png);
+    }
+    .s2{
+        background-image: url(../../../assets/images/Dashboard-image2.png);
+    }
+    .s3{
+        background-image: url(../../../assets/images/Dashboard-image3.png);
+    }
+    .s4{
+        background-image: url(../../../assets/images/Dashboard-image4.png);
+    }
+    .rewards{
+        background-size: cover;
+        border: 1px solid #28a8e0;
+        background-position: bottom;
+        min-height: 200px;
+        background-image: url(../../../assets/images/My-Rewards.png);
+        margin-top: 10px;
+        cursor: pointer;
+        border-radius: 3px;
+    }
+    .sos-sec{
+        margin: 0px auto;
+        text-align: center;
+        .btn.btn-primary.sos{
+            width: auto;
+            padding: 0 40px;
+            border-color: red;
+            background: red;
+            border-color: red;
+            color: #fff;
+            font-size: 14px;
+            img{
+                max-width: 32px;
+                padding-right: 10px;
+            }
+        }
+        margin-bottom: 10px;
+    }
+
+}

Hyper-M_User_Portal/src/app/common/landing/landing.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingComponent } from './landing.component';
+
+describe('LandingComponent', () => {
+  let component: LandingComponent;
+  let fixture: ComponentFixture<LandingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LandingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LandingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/landing/landing.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { LocalStorage } from "../../core/services/local_storage.service"
+import { HyperService } from '../../core/services/http.service';
+import { Router } from "@angular/router";
+import * as moment from 'moment'; 
+
+@Component({
+  selector: 'app-landing',
+  templateUrl: './landing.component.html',
+  styleUrls: ['./landing.component.scss']
+})
+export class LandingComponent implements OnInit {
+
+  imageSources = []; //Slider image array 
+  user_type: any; //User Am or DSE 
+ user_role:any;
+ activeBanner:number;
+  constructor(private server: HyperService, private router: Router) {}
+
+  ngOnInit() {
+      LocalStorage.setValue('is_firsttime', false);
+      this.user_role=LocalStorage.getValue('user_data').role ;
+      if (LocalStorage.getValue('user_data').role != 7 && LocalStorage.getValue('user_data').role > 7 && LocalStorage.getValue('user_data').role != 14) {
+          this.user_type = 0; //Sales Ex
+      } else if (LocalStorage.getValue('user_data') != undefined &&( LocalStorage.getValue('user_data').role <= 7 || LocalStorage.getValue('user_data').role ==14)) {
+       
+          this.user_type = 1; //Manager 
+      } 
+     // console.log(this.user_type,LocalStorage.getValue('user_data').role)
+      this.getBanner(); //get banner details 
+      this.activeBanner=0;
+  }
+
+  getBanner() {
+      this.server.get("banner")
+          .then((data) => {
+              if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                  for (let i = 0; i < data.result.data.length; i++) {
+                      this.imageSources.push(data.result.data[i].image);
+                      this.activeBanner = i;
+                    //  console.log(this.activeBanner)
+                  }
+                  this.activeBanner = 0;
+              } else if (data.result.status == 401 && data.result.response == 'failed') {
+                  this.router.navigateByUrl('');
+              } else {
+                  this.imageSources = [];
+              }
+          });
+  }
+}

Hyper-M_User_Portal/src/app/common/login/login.component.html

@@ -0,0 +1,136 @@
+<!-- <app-main-header></app-main-header> -->
+<app-signup-modal *ngIf="show_div"></app-signup-modal>
+<app-forgot-password *ngIf="show_div"></app-forgot-password>
+<div class="login">
+    <div class="left-part">
+        <h4><span>HYPER- M </span>
+            AI based Ecosystem Addresses Children Digital Risk</h4>
+        <img src="assets/img/Hyper-M-Web_bg.png" alt="">
+    </div>
+    <div class="right-part">
+        <div class="login_box">
+            <div class="star_logo" *ngIf="!viewForgot">
+                <!-- <h3>Welcome to </h3>
+                <h1>
+                    <span class="primary_color">Hyper-M</span></h1> -->
+                    <img class="star_img" src="assets/img/star_logo.png">
+            </div>
+            <div *ngIf="viewForgot">
+                <div class="top_icon">
+                    <img src="assets/img/setpassword.png">
+                </div>
+                <div>
+                    <h1 class="text-center sub">
+                        <span class="">FORGOT PASSWORD</span>
+                    </h1>
+                </div>
+            </div>
+            <form [formGroup]="lform" class="form1" [ngClass]="viewSignUp==true||viewForgot==true ?'sliding_close':viewSignIn==true ?'sliding_open':''">
+                <div class="form-group">
+                    <input type="text" id="smpin"  class="form-control user" [(ngModel)]="smpin" [maxlength]="20" formControlName="smpin" autocomplete="off"
+                        required>
+                    <label for="smpin" class="control-label form-control-placeholder">Username</label>
+                    <div class="color_error shake" *ngIf="!lform.controls['smpin'].valid &&signIn_click&&signin_error==''">
+                        <a class="text-left shake">
+                            <img src="assets/img/error.png" />Please enter the Username</a>
+                    </div>
+                    <div class="info" (click)="showInfo()">
+                        <img src="assets/img/info.png" />
+                        <div class="info_box" *ngIf="show_info">
+                            <p>
+                                <b>Username:</b>
+                            </p>
+                            <p class="info_point">If you are dealer staff enter the SMPIN for registering and logging into the system. </p>
+                            <p class="info_point">If you are Hyper-M staff enter your Employee ID for registering and logging into the system.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <input type="{{type}}" id="password" class="form-control password" [(ngModel)]="password" [maxlength]="20" formControlName="password"
+                        autocomplete="off" required>
+                    <label for="password" class="control-label form-control-placeholder">Password</label>
+                    <div class="color_error shake" *ngIf="!lform.controls['password'].valid&&signIn_click&&signin_error==''">
+                        <a class="text-left shake">
+                            <img src="assets/img/error.png" />Please enter the password</a>
+                    </div>
+                    <div class="color_error shake" *ngIf="signin_error!=''">
+                        <a class="text-left shake">
+                            <img src="assets/img/error.png" />{{signin_error}} </a>
+                    </div>
+                    <div class="view_eye" *ngIf="type=='text'" (click)="toggleShow()">
+                        <img src="assets/img/show.png" />
+                    </div>
+                    <div class="hide_eye" *ngIf="type=='password'" (click)="toggleShow()">
+                        <img src="assets/img/hide.png" />
+                    </div>
+                </div>
+                <div class="forgot text-right">
+                    <a (click)="onForgotPassword()">Forgot Password?</a>
+                </div>
+                <button type="submit" class="btn primary" (click)="onSignIn()">LOGIN</button>
+                <div class="instuction text-center">
+                    Not Yet Registered?
+                    <a>
+                        <span (click)="goToSingUp()">Signup</span>
+                    </a>
+                </div>
+            </form>
+            <form (keyup.enter)="onSignIn()" class="form2" [ngClass]="viewSignUp==true ?'sliding_open':viewSignIn==true ?'sliding_close':''">
+                <div class="form-group">
+                    <input type="text" id="smpinid" class="form-control user"  [maxlength]="10" [(ngModel)]="smpinid" name="smpinid" autocomplete="off"
+                        required>
+                    <label for="smpinid" class="control-label form-control-placeholder">Username</label>
+                    <div class="color_error shake" *ngIf="signUpSubmit && smpinid==''&&signup_error==''">
+                        <a class="text-left shake">
+                            <img src="assets/img/error.png" />Please enter the Username</a>
+                    </div>
+                    <div class="color_error shake" *ngIf="signup_error!=''">
+                        <a class="text-left shake">
+                            <img src="assets/img/error.png" />{{signup_error}} </a>
+                    </div>
+                </div>
+                <button type="submit" class="btn primary" (click)="onSignUp()">SIGN UP</button>
+                <div class="instuction text-center">
+                    Already Registered?
+                    <a>
+                        <span (click)="goToLogin()">Login</span>
+                    </a>
+                </div>
+            </form>
+    
+            <form class="form3 form_2" [ngClass]="viewForgot==true ?'sliding_open':viewSignIn==true ?'sliding_close':''">
+                <div class="form-group user">
+                    <input type="text" id="smpin_forgot" class="form-control"  [maxlength]="10" [(ngModel)]="smpin_forgot" name="smpin_forgot"
+                        autocomplete="off" required>
+                    <label for="smpin_forgot" class="control-label form-control-placeholder">Username</label>
+                    <div class="info" (click)="showInfo()">
+                        <img src="assets/img/info.png" />
+                        <div class="info_box" *ngIf="show_info">
+                            <p>
+                                <b>Username:</b>
+                            </p>
+                            <p class="info_point">If you are dealer staff enter the SMPIN for registering and logging into the system </p>
+                            <p class="info_point">If you are Hyper-M staff enter your Employee ID for registering and logging into the system</p>
+                        </div>
+                    </div>
+                    <div class="color_error shake" *ngIf="forgot_Submit&& smpin_forgot==''&&forgot_error==''">
+                        <a class="text-left shake">
+                            <img src="assets/img/error.png" />Please enter the Username</a>
+                    </div>
+                    <div class="color_error shake" *ngIf="forgot_error!=''">
+                        <a class="text-left shake">
+                            <img src="assets/img/error.png" />{{forgot_error}} </a>
+                    </div>
+                </div>
+                <button type="submit" class="btn primary" (click)="forgotSubmit()">GET OTP</button>
+                <div class="instuction text-center">
+                    Already Registered?
+                    <a>
+                        <span (click)="backToLogin()">Login</span>
+                    </a>
+                </div>
+            </form>
+        </div>
+    </div>
+
+</div>

Hyper-M_User_Portal/src/app/common/login/login.component.scss

@@ -0,0 +1,216 @@
+.login {
+    width: 100%;
+    height: 100%;
+    // background-image: url("assets/img/slider2.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: relative;
+    background: #28a8e0;
+    .left-part{
+        width: 50%;
+        position: relative;
+        float: left;
+        padding: 2rem 2rem;
+        text-align: center;
+        h4{
+            font-size: 26px;
+            color: #fff;
+            text-align: center;
+            margin-bottom: 25px;
+            span{
+                font-size: 40px;
+                padding-bottom: 10px;
+                display: block;
+            }
+        }
+        img{
+            max-width: 100%; 
+        }
+    }
+    .right-part{
+        width: 50%;
+        float: left;
+        padding: 5rem;
+        margin: 0px auto;
+        height: 100%;
+    
+        .login_box {
+            // width: 100%;
+            // position: relative;
+            // float: left;
+            // height: auto;
+            // background-color: #fff;
+            // margin: 22px auto;
+            // padding: 30px 50px;
+            // overflow: hidden;
+            // box-shadow: 3px 3px 6px 3px #888888;
+
+            position: relative;
+            height: auto;
+            background-color: #fff;
+            overflow: hidden;
+            padding: 20px 0 30px 0;
+            display: inline-block;
+            min-width: 500px;
+            border-radius: 5px;
+            .top_icon {
+                width: 100%;
+                float: left;
+                text-align: center;
+                margin-bottom: 24px;
+                margin-top: 44px;
+                img {
+                    width: 20%;
+                    margin-bottom: 10px;
+                }
+            }
+            .sub {
+                font-size: 20px;
+            }
+            h1 {
+                color: #333;
+                margin-bottom: 20px;
+                font-size: 24px;
+                span {
+                    font-size: 24px;
+                }
+                .primary_color {
+                    font-weight: bold;
+                }
+            }
+            h3 {
+                color: #666;
+                font-weight: 400;
+                font-size: 18px;
+            }
+            .star_img {
+                width: 40%;
+                margin-bottom: 10px;
+            }
+            .star_logo {
+                text-align: center;
+            }
+            // form{
+            //     .form-control{
+            //         height: 50px;
+            //         border-radius: 50px;
+            //         background-color: #ccc;
+            //     }
+            //     .form-control:focus{
+            //         border-color: #ccc;
+            //         box-shadow: 0 0 0 0.2rem rgba(0,0,0,.25);
+            //     }
+            //     .form-control::placeholder{
+            //         color:#333;
+            //     }
+            // }
+            .info {
+                width: 30px;
+                position: absolute;
+                top: 15px;
+                margin: 0;
+                right: 15px;
+                background-color: transparent;
+                img {
+                    width: 100%
+                }
+                .info_box {
+                    background-color: #fff;
+                    width: auto;
+                    position: absolute;
+                    top: 40px;
+                    width: 200px;
+                    right: -48px;
+                    z-index: 999;
+                    padding: 15px;
+                    box-shadow: 0 0 2px 2px #ccc;
+                    border-radius: 3px;
+                }
+                .info_box::before {
+                    width: 10px;
+                    height: 10px;
+                    position: absolute;
+                    content: "";
+                    background-color: #fff;
+                    top: -5px;
+                    right: 58px;
+                    transform: rotate(45deg);
+                }
+            }
+            .form-group{
+                .form-control{
+                    border-radius: 5px;
+                    -webkit-border-radius: 5px;
+                    -moz-border-radius: 5px;
+                    -ms-border-radius: 5px;
+                    -o-border-radius: 5px;
+                    background-color: #f2f2f2;
+}
+            }
+        }
+    }
+}
+
+.login:before {
+    position: absolute;
+    width: 100%;
+    content: "";
+    height: 100%;
+    // background-color: rgba(70, 70, 70, 0.5);
+    top: 0;
+    left: 0;
+}
+
+.info_point {
+    font-size: 12px;
+    color: #666
+}
+
+@media screen and (max-width: 1024px) {
+    .login {
+        height: calc(100% - 60px);
+        .login_box {
+            height: 100%;
+            margin: auto;
+            width: 65%;
+        }
+    }
+}
+
+@media screen and (max-width: 550px) {
+    .login {
+        height: calc(100% - 53px);
+        .login_box {
+            width: 90% !important;
+            top: 75px;
+            height: calc(100% - 15px) !important;
+            .top_icon {
+                img {
+                    width: 50px;
+                }
+            }
+            h1 {
+                span {
+                    font-size: 18px;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .login{
+        height: 100% !important;
+        .left-part{
+            display: none;
+        }
+        .right-part{
+            width: 100%;
+            padding: 0;
+            .login_box{
+                top: 0;
+                min-width: 100%;
+            }
+        }
+    }
+}

Hyper-M_User_Portal/src/app/common/login/login.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/login/login.component.ts

@@ -0,0 +1,254 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { HyperService } from './../../core/services/http.service';
+import { Router } from "@angular/router";
+import { LocalStorage } from './../../core/services/local_storage.service';
+import { CONFIG } from '../../config';
+import { ForgotPasswordComponent } from '../forgot-password/forgot-password.component';
+
+declare var $: any;
+
+@Component({
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.scss'],
+    host: {
+        '(document:click)': 'onClick($event)',
+      }
+})
+export class LoginComponent implements OnInit { 
+    fogotexampleModalCenter;
+    lform: FormGroup;
+    smpin: any;
+    smpinid: any = '';
+    password: any;
+    signin_error: string = '';
+    signup_error: string = '';
+    forgot_error: string = '';
+    viewSignUp: boolean = false;
+    viewSignIn: boolean;
+    signUpSubmit: boolean = false;
+    user_mobile: any = {};
+    viewForgot: boolean = false;
+    smpin_forgot: any = '';
+    forgot_Submit: boolean = false;
+    show_info: boolean = false;
+    type = "password";
+    show = false;
+    signIn_click:boolean=false;
+    show_div: boolean;
+    
+    constructor(private formBuilder: FormBuilder, private server: HyperService, private router: Router) { 
+        this.onClear()
+        // this.getBanner()
+    }
+
+    ngOnInit() {
+        this.onClear()
+        this.formBuild();
+        LocalStorage.setValue('loggedIn', false);
+    }
+    onClick(event) {
+        if (event.target.className=='login' || event.target.className=='login_box' || event.target.className=='form-group' || event.target.className=='top_icon' || event.target.className=='form-control'|| event.target.className=='form3' || event.target.className=='star_logo' || event.target.className=='form1'){
+           this.show_info=false;
+       }
+    }
+    onClear() {
+        LocalStorage.createJWT(); 
+    }
+
+    formBuild() {
+        this.lform = this.formBuilder.group({
+            smpin: [null, Validators.compose([Validators.required])],
+            password: [null, Validators.compose([Validators.required])]
+        });
+    }
+
+    goToSingUp() {
+        this.viewSignUp = true;
+        this.signUpSubmit = false;
+        this.signin_error = '';
+        this.signIn_click=false;
+    }
+
+    goToLogin() {
+        this.formBuild();
+        this.viewSignUp = false;
+        this.viewSignIn = true;
+        this.signup_error = '';
+        this.smpinid = '';
+    }
+
+    backToLogin() {
+        this.formBuild();
+        this.viewForgot = false;
+        this.viewSignIn = true;
+        this.signup_error = '';
+        this.smpin_forgot = '';
+        this.forgot_Submit = false;
+        this.forgot_error = '';
+    }
+
+    toggleShow() {
+        //show view password toggle icon
+        this.show = !this.show;
+        if (this.show) {
+            this.type = "text";
+        } else {
+            this.type = "password";
+        }
+    }
+
+    showInfo() {
+        this.show_info = !this.show_info;
+    }
+
+    onSignUp() {
+        this.signUpSubmit = true;
+        CONFIG.forgot_cont = true;
+        this.show_div = CONFIG.forgot_cont;
+        if (this.smpinid == undefined || this.smpinid == '' || this.smpinid == null) return;
+        this.server.post("user/signup", {
+            username: this.smpinid
+        }).then((data) => {
+            if (data.status == 200 && data.result.response == "success") {
+                LocalStorage.setValue('signup_user', data.result.data);
+              
+                let mobileno_start = data.result.data.mobile.substring(0, 3)
+                let mobileno_end = data.result.data.mobile.substring(7, 11)
+                setTimeout(() => {
+                    // $('#exampleModalCenter').modal({
+                    //     keyboard: false,
+                    // });
+                    $("#exampleModalCenter").modal('show');
+                    $("#userMobile").text(mobileno_start + 'xxxx' + mobileno_end);
+                }, 200);
+            } else if(data.status == 406 ) {
+                this.signup_error = data.result.message;
+            }
+        })
+    }
+
+    onSignIn() {
+        this.signIn_click=true; 
+        if (this.lform.valid) {
+            this.server.post("user/signin", {
+                username: this.smpin.trim(),
+                password: this.password
+            }).then((data) => {
+                    if (data.status == 200 && data.result.response == "success") {
+
+                        console.log("data.result.data---->",data.result);
+                        LocalStorage.setValue('pinvalue','');
+                          LocalStorage.setValue('enquirymodulestatus', data.result.data.is_enquirymodule);
+                    //    LocalStorage.setValue('enquirymodulestatus', '1');
+                        
+                        LocalStorage.setValue('selecteduseremail', data.result.data.dealer.email);
+                        LocalStorage.setValue('selecteduseraddress', data.result.data.dealer.address);
+
+
+
+                        LocalStorage.setValue('selecteduserrole', data.result.data.role);
+                        LocalStorage.setValue('selecteddsename', data.result.data.dealer.dealer_name);
+                        LocalStorage.setValue('selecteddsephone', data.result.data.dealer.phone);
+                        LocalStorage.setValue('selecteddsecity', data.result.data.dealer.city);
+                        LocalStorage.setValue('selecteddsecountry', data.result.data.dealer.country);
+                        LocalStorage.setValue('selecteddsestate', data.result.data.dealer.state);
+                        LocalStorage.setValue('selecteddealercode', data.result.data.dealer.dealer_code);
+                        console.log("data.result.data.dealer.dealer_code",data.result.data.dealer.dealer_code);
+
+                      //  console.log("data---->",data);
+                        LocalStorage.setValue('token', data.result.access_token);
+                        LocalStorage.setValue('user_data', data.result.data);
+                     //   console.log(LocalStorage.getValue('user_data'))
+                        LocalStorage.setValue('signup_user', data.result.data);
+                        LocalStorage.setValue('wallet_pin', data.result.data.mpin);
+                        LocalStorage.setValue('enquiry_pin', data.result.data.epin);
+                        // console.log('wallet_pin',data.result.data.mpin,LocalStorage.getValue('wallet_pin'))
+                        LocalStorage.setValue('loggedIn', true);
+                        if (data.result.data.is_profile_updated == 0) {
+                            LocalStorage.setValue('is_firsttime', true);
+                            this.router.navigateByUrl('userprofile');
+                        }
+                        else if (data.result.data.is_profile_updated == 1) {
+                            this.router.navigateByUrl('dashboard');
+                        }
+                    } 
+                    else if (data.result.response == "failed") {
+                        this.signin_error = data.result.message;
+                    }
+                })
+        } 
+        else {
+            this.validateAllFormFields(this.lform);
+            this.signin_error = '';
+        }
+    }
+
+    validateAllFormFields(formGroup: FormGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
+            const control = formGroup.get(field);
+            if (control instanceof FormControl) {
+                control.markAsTouched({
+                    onlySelf: true
+                });
+            } else if (control instanceof FormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+
+    onForgotPassword() {
+        this.signin_error=''
+        this.viewForgot = true;
+        this.signIn_click=false; 
+    }
+
+    forgotSubmit() { 
+        CONFIG.forgot_cont = true;
+        this.show_div = CONFIG.forgot_cont;
+        LocalStorage.setValue('smpin', this.smpin_forgot); 
+        this.forgot_Submit = true;
+        if (this.smpin_forgot == undefined || this.smpin_forgot == '' || this.smpin_forgot == null) return;
+        this.server.post("user/forgot_password", {
+            username: this.smpin_forgot
+        }).then((data) => {
+            if (data.status == 200 && data.result.response == "success") {
+                LocalStorage.setValue('forgot_data', data.result);
+                let mobileno_start = data.result.data.substring(0, 2)
+                let mobileno_end = data.result.data.substring(8, 11)
+                CONFIG.forgot_user = LocalStorage.getValue('forgot_data');
+                this.forgot_error='';
+                if(CONFIG.forgot_user!=undefined){
+                    setTimeout(() => {
+                    $('#fogotexampleModalCenter').modal(ForgotPasswordComponent,{
+                        backdrop: 'static',
+                        keyboard: false,
+                    });
+                    
+                    $("#fogotexampleModalCenter").modal('show');
+                    
+                    
+                },1000)
+            }
+                
+            } else if (data.result.response == "failed") {
+                this.forgot_error = data.result.message
+            }
+        })
+    }
+   
+    getBanner() {
+      //  console.log("ernwlek")
+        this.server.get("comments")
+            .then((data) => {
+                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                    
+                } else if (data.result.status == 401 && data.result.response == 'failed') {
+                    
+                } else {
+                     
+                }
+            });
+    }
+}

Hyper-M_User_Portal/src/app/common/main-header/main-header.component.html

@@ -0,0 +1,786 @@
+<app-confirm-popup></app-confirm-popup>
+<nav class="navbar navbar-expand-lg navbar-light" *ngIf="logged_in">
+    <a class="navbar-brand" [routerLink]="['/dashboard']">
+        <img src="assets/img/logo.png" />
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <!-- <span class="navbar-toggler-icon"></span> -->
+        <img src="assets/img/menu.png" />
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent" *ngIf="logged_in">
+        <!-- //////////////User Type Sales Executive////////////////////////-->
+
+        <ul class="navbar-nav mr-auto" *ngIf="user_type==0">
+            <li class="nav-item" *ngIf="!is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/dashboard']">
+                    <!-- <img src="assets/img/home.png"/> -->
+                    HOME
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li>
+
+            <!-- <li class="nav-item" *ngIf="!is_firsttime" 
+            [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link" [routerLink]="['/myschedules']"> -->
+                <!-- <img src="assets/img/my_assessment.png"/>  -->
+                <!-- LIVE SESSION</a>
+        </li>
+        <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link"> -->
+                <!-- <img src="assets/img/my_assessment.png"/> -->
+                <!-- LIVE SESSION</a>
+        </li> -->
+
+
+            <!-- <li class="nav-item"
+                *ngIf="(user_role==5 || user_role==10 || user_role == 4 || user_role == 6|| user_role == 7|| user_role == 14)"
+                [ngClass]="menu_item==14?'active':''" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/myschedules']">
+                    I-LEARN SCHEDULES1</a>
+            </li> -->
+            <!-- <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">
+                    I-LEARN SCHEDULES</a>
+            </li> -->
+
+            <!-- <li class="nav-item" *ngIf="!is_firsttime && (user_role==3)" [ngClass]="menu_item==14?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/ilearning']">
+                    I-LEARN SCHEDULES2</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">
+                    I-LEARN SCHEDULES3</a>
+            </li> -->
+
+               <!-- Enquiry Module -->
+               <!-- <li class="dropdown nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link dropdown-toggle" id="dropdownMenu12" data-toggle="dropdown"
+                    [routerLink]="['/myenquiries']" aria-haspopup="true" aria-expanded="true">MY 
+                    ENQUIRIES<span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu sub-items" aria-labelledby="dropdownMenu12">
+                    <li  [ngClass]="menu_item==6?'active':''"
+                        [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" [routerLink]="['/task/today-visit']">
+                            TODAYS TASK</a>
+                    </li>
+
+                    <li *ngIf="(user_role == 4 || user_role == 6 || user_role == 7 || user_role == 10 || user_role == 14)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link"  [routerLink]="['/task/pending-visit']">PENDING TASK</a>
+                    </li>
+
+                    <li *ngIf="(user_role == 4 || user_role == 6 || user_role == 7 || user_role == 10 || user_role == 14)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" [routerLink]="['/enquiry-status/hot']">ENQUIRY
+                            STATUS</a>
+                    </li>
+
+                    <li *ngIf="(user_role == 4 || user_role == 6 || user_role == 7 || user_role == 10 || user_role == 14)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" [routerLink]="['/testride']">TEST
+                            RIDE</a>
+                    </li>
+
+                    <li *ngIf="(user_role == 4 || user_role == 6 || user_role == 7 || user_role == 10 || user_role == 14)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/quotation']">
+                        <a class="nav-link" >QUOTATION</a>
+                    </li>
+
+
+                    <li *ngIf="(user_role == 4 || user_role == 6 || user_role == 7 || user_role == 10 || user_role == 14)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']" [routerLink]="['/price-list']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" >PRICE
+                            LIST</a>
+                    </li>
+
+
+                    <li *ngIf="(user_role == 14)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" >ENQUIRY
+                            REPORTS</a>
+                    </li>
+                    <li *ngIf="is_firsttime && (user_role == 4 || user_role == 6 || user_role == 7 || user_role == 10 ||user_role == 14 )"
+                        [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link">ENQUIRY REPORTS
+                            <span class="sr-only">(current)</span>
+                        </a>
+                    </li>
+
+                    <li *ngIf="(user_role == 4 || user_role == 6 || user_role == 7 || user_role == 10 || user_role == 14)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link"  [routerLink]="['/activityplanner']">MY
+                            ACTIVITY PLANNER</a>
+                    </li>
+                    <li *ngIf="(user_role == 4 || user_role == 6 || user_role == 7 || user_role == 10 || user_role == 14)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link"  [routerLink]="['/emi-calculator']">EMI CALCULATOR</a>
+                    </li>
+                </ul>
+            </li> -->
+
+            <li class="nav-item" *ngIf="!is_firsttime" [ngClass]="menu_item == 1 ? 'active' : '' "
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/mytraining']">
+                    <!-- <img src="assets/img/my_training.png"/> -->
+                    MY LEARNING</a>
+            </li>
+            <li class="nav-item" *ngIf="!is_firsttime" 
+            [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link" [routerLink]="['/myschedules']">
+                MY TRAININGS</a>
+        </li>
+
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">
+                    <!-- <img src="assets/img/home.png"/> HOME -->
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li>
+            <li class="nav-item" *ngIf="!is_firsttime" [ngClass]="menu_item==2?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/myassessment']">
+                    <!-- <img src="assets/img/my_assessment.png"/>  -->
+                    MY ASSESSMENTS</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">
+                    <!-- <img src="assets/img/my_assessment.png"/> -->
+                    MY ASSESSMENTS</a>
+            </li>
+
+            <li class="nav-item" *ngIf="!is_firsttime && user_type==0" [ngClass]="menu_item==3?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/leaderboard']">
+                    <!-- <img src="assets/img/leaderboard.png"/> -->
+                    MY CERTIFICATIONS</a>
+            </li>
+            <li class="nav-item" *ngIf="!is_firsttime && user_type==1" [ngClass]="menu_item==3?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/leaderboard']">
+                    <!-- <img src="assets/img/leaderboard.png"/> -->
+                    MY CERTIFICATIONS</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">
+                    <!-- <img src="assets/img/leaderboard.png"/>  -->
+                    MY DISCUSSIONS</a>
+            </li>
+
+            <li class="nav-item" *ngIf="!is_firsttime" [ngClass]="menu_item==4?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/feedback']">
+                    <!-- <img src="assets/img/feedback.png"/>  -->
+                    MY DISCUSSIONS</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">
+                    <!-- <img src="assets/img/feedback.png"/> -->
+                    MY DISCUSSIONS</a>
+            </li>
+
+            <li class="nav-item" *ngIf="!is_firsttime" [ngClass]="menu_item==5?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/bulletin']">
+                    <!-- <img src="assets/img/bulletin.png"/> -->
+                    MY REWARDS</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">
+                    <!-- <img src="assets/img/bulletin.png"/> -->
+                    MY REWARDS</a>
+            </li>
+
+            <!-- <li class="nav-item 1" *ngIf="!is_firsttime && (user_role == 10)" [ngClass]="menu_item== 13 ?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/trainer']">
+                    TRAINING</a>
+            </li> -->
+            <!-- <li class="nav-item 2" *ngIf="is_firsttime && (user_role == 10)" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">TRAINING
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li> -->
+
+            <!-- newly added emi calculator -->
+            <!-- <li class="nav-item" *ngIf="!is_firsttime && show_emi_calculator" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/emicalculator']">
+                
+                    EMI CALCULATOR</a>
+            </li> -->
+            <!-- <li class="nav-item"   [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                    <a class="nav-link" [routerLink]="['/myenquiries']">
+                      
+                        MY ENQUIRIES</a>
+                </li> -->
+            <!-- <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                    <a class="nav-link">
+                        EMI CALCULATOR</a>
+                </li> -->
+            <!-- (click)="goToSpecificUrl(item.link)" -->
+            <!-- <li class="dropdown nav-item">
+                <a class="nav-link dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
+                    aria-expanded="true">MORE<span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu sub-items" aria-labelledby="dropdownMenu2">
+                    <li *ngIf="!is_firsttime && user_role!=15" [ngClass]="menu_item==6?'active':''"
+                        [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" [routerLink]="['/wallet']">
+                            MY WALLET</a>
+                    </li>
+                    <li *ngIf="is_firsttime && user_role!=15" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link">
+                            MY WALLET</a>
+                    </li>
+                    <li *ngIf="!is_firsttime && (user_role == 4 || user_role == 6 || user_role == 7 || user_role == 10 || user_role == 14)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" (click)='gotoThreesixty()' [routerLink]="['/threesixty-dashboard']">PRODUCT
+                            EXPERIENCE</a>
+                    </li>
+                    <li *ngIf="is_firsttime && (user_role == 4 || user_role == 6 || user_role == 7 || user_role == 10 ||user_role == 14 )"
+                        [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link">PRODUCT EXPERIENCE
+                            <span class="sr-only">(current)</span>
+                        </a>
+                    </li>
+                </ul>
+            </li> -->
+
+         
+
+
+
+
+        </ul>
+        <!-- //////////////User Type Manager////////////////////////-->
+        <ul class="navbar-nav mr-auto" *ngIf="user_type==1">
+            <li class="nav-item" *ngIf="!is_firsttime" [ngClass]="menu_item==1?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/dashboard']">HOME</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">HOME
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li>
+
+            <!-- new menu -->
+            <li class="nav-item"
+                *ngIf="!is_firsttime && (user_role==5 || user_role==10 || user_role == 4 || user_role == 6|| user_role == 7|| user_role == 14)"
+                [ngClass]="menu_item==5?'active':''" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/myschedules']">I-LEARN SCHEDULES</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">I-LEARN SCHEDULES</a>
+            </li>
+
+            <li class="nav-item" *ngIf="!is_firsttime && (user_role==3)" [ngClass]="menu_item==5?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/ilearning']">I-LEARN SCHEDULES</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">I-LEARN SCHEDULES</a>
+            </li>
+            <!-- Enquiry Module Dealer -->
+<li class="dropdown nav-item" *ngIf="(user_role == 14)" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+    <!-- <a class="nav-link dropdown-toggle" id="dropdownMenu12" data-toggle="dropdown"
+        [routerLink]="['/dealer-myenquiries']" aria-haspopup="true" aria-expanded="true">MY ENQUIRIES1<span
+            class="caret"></span>
+    </a> -->
+    <a class="nav-link dropdown-toggle" id="dropdownMenu12" data-toggle="dropdown"
+        [routerLink]="['/dealer-myenquiries']" aria-haspopup="true" aria-expanded="true">MY ENQUIRIES<span
+            class="caret"></span>
+    </a>
+    <ul class="dropdown-menu sub-items" aria-labelledby="dropdownMenu12">
+        <!-- <li  [ngClass]="menu_item==6?'active':''"
+            [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link" [routerLink]="['/dealer-task/today-visit']">
+                TODAYS TASK</a>
+        </li>
+       
+
+        <li *ngIf="(user_role == 14)"
+            [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link"  [routerLink]="['/dealer-task/pending-visit']">PENDING TASK</a>
+        </li>
+     
+
+        <li *ngIf="(user_role == 14)"
+            [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link" [routerLink]="['/dealer-enquiry-status/hot']">ENQUIRY
+                STATUS</a>
+        </li> -->
+       
+
+        <!-- <li *ngIf="(user_role == 14)"
+            [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link" [routerLink]="['/enquiry-process']">ENQUIRY
+                PROCESS</a>
+        </li> -->
+      
+        <!-- <li *ngIf="(user_role == 14)"
+            [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link" [routerLink]="['/dealer-testride']">TEST
+                RIDE</a>
+        </li> -->
+       
+
+        <li *ngIf="(user_role == 14)"
+            [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/dealer-quotation']">
+            <a class="nav-link" >QUOTATION</a>
+        </li>
+      
+
+        <li *ngIf="(user_role == 14)"
+            [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']" [routerLink]="['/dealer-pricelist']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link" >PRICE
+                LIST</a>
+        </li>
+       
+
+        <li *ngIf="(user_role == 14)"
+            [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']" [routerLink]="['/dealer-enquiry-report']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link" >ENQUIRY
+                REPORTS</a>
+        </li>
+       
+
+        <!-- <li *ngIf="user_role == 14"
+            [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link"  [routerLink]="['/dealer-activity-planner']">MY
+                ACTIVITY PLANNER</a>
+        </li> -->
+
+        <li *ngIf="user_role == 14"
+            [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link"  [routerLink]="['/dse-user-list']">MY DSE LIST</a>
+        </li>
+
+        <li *ngIf="(user_role == 14)"
+            [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link"  [routerLink]="['/dealer-emi-calculator']">EMI CALCULATOR</a>
+        </li>
+        
+    </ul>
+</li>
+            <li class="nav-item" *ngIf="!is_firsttime && (user_role!=3 && user_role!=14 )"
+                [ngClass]="menu_item==1?'active':''" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/mytraining']">MY LEARNING</a>
+            </li>
+
+            <li class="nav-item" *ngIf="is_firsttime && user_role!=3" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li>
+            <!-- <li class="nav-item" *ngIf="!is_firsttime && user_role!=3 && user_role<=7"
+            [ngClass]="menu_item==2?'active':''" [routerLinkActive]="['active']"
+            [routerLinkActiveOptions]="{exact:true}">
+            <a class="nav-link" [routerLink]="['/myassessment']">
+              
+                </a>
+            </li> -->           
+
+            <!-- AM MY ENQUIRIES-->
+            <li class="dropdown nav-item"  *ngIf="user_role==7"  [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link dropdown-toggle" id="dropdownMenu12" data-toggle="dropdown"
+                    [routerLink]="['/manager-enquiry']" aria-haspopup="true" aria-expanded="true">MY ENQUIRIES<span
+                        class="caret"></span>
+                </a>
+                <ul class="dropdown-menu sub-items" aria-labelledby="dropdownMenu12">
+                    <li *ngIf="(user_role == 7)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/area-enquiry-report']">
+                        <a class="nav-link" >ENQUIRY REPORT</a>
+                    </li>
+                    <li *ngIf="(user_role == 7)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/manager-dselist']">
+                        <a class="nav-link" >DSE LIST</a>
+                    </li>
+                </ul>
+            
+            </li>
+
+            <!-- RM MY ENQUIRIES-->
+            <li class="dropdown nav-item"  *ngIf="user_role==6"  [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link dropdown-toggle" id="dropdownMenu12" data-toggle="dropdown"
+                    [routerLink]="['/regional-enquiry']" aria-haspopup="true" aria-expanded="true">MY ENQUIRIES<span
+                        class="caret"></span>
+                </a>
+                <ul class="dropdown-menu sub-items" aria-labelledby="dropdownMenu12">
+                    <li *ngIf="(user_role == 6)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/region-enquiry-report']">
+                        <a class="nav-link" >ENQUIRY REPORT</a>
+                    </li>
+                </ul>
+            </li>
+             <!-- ZM MY ENQUIRIES-->
+             <li class="dropdown nav-item"  *ngIf="user_role==4"  [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link dropdown-toggle" id="dropdownMenu12" data-toggle="dropdown"
+                    [routerLink]="['/zonal-enquiry']" aria-haspopup="true" aria-expanded="true">MY ENQUIRIES<span
+                        class="caret"></span>
+                </a>
+                <ul class="dropdown-menu sub-items" aria-labelledby="dropdownMenu12">
+                    <li *ngIf="(user_role == 4)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/zone-enquiry-report']">
+                        <a class="nav-link" >ENQUIRY REPORT</a>
+                    </li>
+                </ul>
+            </li>
+
+            <li class="nav-item" *ngIf="!is_firsttime && user_role!=3 && user_role<=7"
+                [ngClass]="menu_item==2?'active':''" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/myassessment']">
+                    <!-- <img src="assets/img/my_assessment.png"/>  -->
+                    MY ASSESSMENT</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime && user_role!=3 && user_role<=7" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">
+                    <!-- <img src="assets/img/my_assessment.png"/> -->
+                    MY ASSESSMENT</a>
+            </li>
+
+            <li class="nav-item" *ngIf="!is_firsttime && (user_role==7 || user_role==14 )"
+                [ngClass]="menu_item==10?'active':''" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/setsalesreport']">SET SALES TARGET</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime && (user_role==7  || user_role==14 )"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">SET SALES TARGET
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li>
+
+
+            <li class="nav-item" *ngIf="!is_firsttime" [ngClass]="menu_item==6?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/analyticalreport']">USER REPORTS</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">USER REPORTS
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li>
+
+            <!-- <li class="nav-item" *ngIf="!is_firsttime" [ngClass]="menu_item==7?'active':''" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                    <a class="nav-link" [routerLink]="['/rewardreport']">REWARD POINT REPORTS</a>
+                </li>
+                <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                    <a class="nav-link">REWARD POINT REPORTS
+                                    <span class="sr-only">(current)</span>
+                                </a>
+                </li> -->
+
+            <li class="nav-item" *ngIf="!is_firsttime" [ngClass]="menu_item==8?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/coursereport']">COURSE COMPLETION REPORTS</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">COURSE COMPLETION REPORTS
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li>
+
+            <!-- added setsalestarget report -->
+            <li class="nav-item"
+                *ngIf="!is_firsttime && (user_role==3 || user_role==4 || user_role==6 || user_role==7 || user_role==14)"
+                [ngClass]="menu_item==8?'active':''" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/setsalestergetreport']">SET SALES TARGET REPORTS</a>
+            </li>
+            <li class="nav-item"
+                *ngIf="is_firsttime && (user_role==3 || user_role==4 || user_role==6 || user_role==7 || user_role==14)"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">SET SALES TARGET REPORTS
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li>
+            <li class="nav-item" *ngIf="user_role==3" [ngClass]="menu_item==9?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/feedbackreport']">FEEDBACK REPORTS</a>
+            </li>
+            <!-- <li class="nav-item" *ngIf="user_role==3" [ngClass]="menu_item==9?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/ho-enquiry-report']">ENQUIRY REPORTS</a>
+            </li> -->
+            <li class="dropdown nav-item"  *ngIf="user_role==3"  [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link dropdown-toggle" id="dropdownMenu12" data-toggle="dropdown"
+                    [routerLink]="['/ho-enquiry']" aria-haspopup="true" aria-expanded="true">MY ENQUIRIES<span
+                        class="caret"></span>
+                </a>
+                <ul class="dropdown-menu sub-items" aria-labelledby="dropdownMenu12">
+                    <li *ngIf="(user_role == 3)"
+                        [ngClass]="menu_item==9?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/ho-enquiry-report']">
+                        <a class="nav-link" >ENQUIRY REPORT</a>
+                    </li>
+                </ul>
+            
+            </li>
+
+            <li class="nav-item" *ngIf="user_role==3" [ngClass]="menu_item==9?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/ilearn-reports']">I-LEARN REPORTS</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">FEEDBACK REPORTS
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li>
+
+            <li class="dropdown nav-item"  *ngIf="user_role==5"  [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link dropdown-toggle" id="dropdownMenu12" data-toggle="dropdown"
+                    [routerLink]="['/trainer-enquiry']" aria-haspopup="true" aria-expanded="true">MY ENQUIRIES<span
+                        class="caret"></span>
+                </a>
+                <!-- <ul class="dropdown-menu sub-items" aria-labelledby="dropdownMenu12">
+                    <li *ngIf="(user_role == 5)"
+                        [ngClass]="menu_item==9?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/trainer-enquiry-report']">
+                        <a class="nav-link" >ENQUIRY REPORT</a>
+                    </li>
+                </ul> -->
+            
+            </li>
+
+            <li class="nav-item" *ngIf="user_role==5" [ngClass]="menu_item==9?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/trainer-enquiry-report']">ENQUIRY REPORTS</a>
+            </li>
+            <li class="nav-item" *ngIf="!is_firsttime && (user_role == 14)" [ngClass]="menu_item==12?'active':''"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <!-- <a class="nav-link" (click)='gotoThreesixty()' [routerLink]="['/threesixty-dashboard']">MY PRODUCTS</a> -->
+                <a class="nav-link" (click)='gotoThreesixty()' [routerLink]="['/threesixty-dashboard']">PRODUCT
+                    EXPERIENCE</a>
+            </li>
+            <li class="nav-item" *ngIf="is_firsttime && (user_role == 14)" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <!-- <a class="nav-link">MY PRODUCTS
+                        <span class="sr-only">(current)</span>
+                    </a> -->
+                <a class="nav-link">PRODUCT EXPERIENCE
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li>
+
+            <!-- <li class="nav-item" *ngIf="!is_firsttime && (user_role==7 || user_role==4 || user_role==6 || user_role==14 )" [ngClass]="menu_item==10?'active':''" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                    <a class="nav-link" [routerLink]="['/setsalesreport']">SET SALES TARGET</a>
+                </li>
+                <li class="nav-item" *ngIf="is_firsttime && (user_role==7  || user_role==4 || user_role==6 || user_role==14 )" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                    <a class="nav-link">SET SALES TARGET
+                                                <span class="sr-only">(current)</span>
+                                            </a>
+                </li> -->
+
+            <!-- <li class="nav-item 1"
+                *ngIf="!is_firsttime && (user_role==5 || user_role==4 || user_role == 6 || user_role == 7 || user_role == 14 || user_role == 3)"
+                [ngClass]="menu_item== 13 ?'active':''" [routerLinkActive]="['active']"
+                [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" [routerLink]="['/trainer']">
+                    TRAINING</a>
+            </li>
+            <li class="nav-item 2"
+                *ngIf="is_firsttime && (user_role==5  || user_role==4 || user_role == 6 || user_role == 7 || user_role == 14 || user_role == 3)"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link">TRAINING
+                    <span class="sr-only">(current)</span>
+                </a>
+            </li> -->
+
+
+            
+            <!-- <li class="nav-item" *ngIf="!is_firsttime && user_role == 14" [ngClass]="menu_item==5?'active':''" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" [routerLink]="['/myusers']">MY USERS</a>
+                    </li>
+                <li class="nav-item" *ngIf="is_firsttime" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link">MY USERS</a>
+                </li> -->
+
+            <!--360 view-->
+            <!-- <li class="nav-item" *ngIf="!is_firsttime && (user_role>7 && user_role!=14 )" [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                    <a class="nav-link" [routerLink]="['/threesixty-dashboard']">360 View</a>
+                </li>
+                <li class="nav-item" *ngIf="is_firsttime && (user_role==7 && user_role==14 )" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                    <a class="nav-link">360 View
+                        <span class="sr-only">(current)</span>
+                    </a>
+                </li> -->
+
+
+            <!-- <li class="dropdown nav-item" *ngIf="user_role!=3 && user_role!=14">
+                <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
+                    aria-expanded="true">MORE<span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu sub-items" aria-labelledby="dropdownMenu1">
+                    <li *ngIf="!is_firsttime && (user_role!=3 && user_role!=14 )" [ngClass]="menu_item==5?'active':''"
+                        [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" [routerLink]="['/bulletin']">
+                            BULLETIN</a>
+                    </li>
+                    <li *ngIf="is_firsttime" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link">BULLETIN</a>
+                    </li>
+                    <li *ngIf="!is_firsttime && (user_role!=3 && user_role!=4 && user_role!=5 && user_role!=6 && user_role!=7 && user_role!=14 )"
+                        [ngClass]="menu_item==9?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" [routerLink]="['/feedbackreport']">FEEDBACK REPORTS</a>
+                    </li>
+                    <li *ngIf="is_firsttime" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link">FEEDBACK REPORTS
+                            <span class="sr-only">(current)</span>
+                        </a>
+                    </li>
+
+                    <li *ngIf="!is_firsttime && user_role==5" [ngClass]="menu_item==8?'active':''"
+                        [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" [routerLink]="['/setsalestergetreport']">SET SALES TARGET REPORTS</a>
+                    </li>
+                    <li *ngIf="is_firsttime && user_role==5" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link">SET SALES TARGET REPORTS
+                            <span class="sr-only">(current)</span>
+                        </a>
+                    </li>
+
+                    <li *ngIf="!is_firsttime && (user_role == 4 || user_role==5 || user_role == 6 || user_role == 7 || user_role == 10 || user_role == 14)"
+                        [ngClass]="menu_item==12?'active':''" [routerLinkActive]="['active']"
+                        [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link" (click)='gotoThreesixty()' [routerLink]="['/threesixty-dashboard']">PRODUCT
+                            EXPERIENCE</a>
+                    </li>
+                    <li *ngIf="is_firsttime && (user_role == 4 || user_role==5 || user_role == 6 || user_role == 7 || user_role == 10 ||user_role == 14 )"
+                        [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                        <a class="nav-link">PRODUCT EXPERIENCE
+                            <span class="sr-only">(current)</span>
+                        </a>
+                    </li>
+
+
+                  <li *ngIf="!is_firsttime && (user_role!=3 && user_role!=14 )"  [ngClass]="menu_item==1?'active':''" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                                    <a class="nav-link" [routerLink]="['/mytraining']">
+                                        MY LEARNING</a>
+                            </li> 
+
+                </ul>
+            </li> -->
+            <!-- <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
+                    <a class="nav-link" [routerLink]="['/leadmodule']">
+                        MY ENQUIRIES</a>
+                </li> -->
+        </ul>
+        <div class="head_right">
+
+            <div class="head_pro dropdown">
+                <p class="dropdown-toggle" id="sdds" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <!-- <img src="{{userData.profile_photo}}" /> -->
+                    <img src="assets/img/user.png" />
+                    {{userData.fname}}
+                    <img class="left_arrow" src="assets/img/arrow.png">
+                </p>
+                <div class="dropdown-menu" aria-labelledby="sdds">
+                    <a class="dropdown-item bbottom" [routerLink]="['/userprofile']">Profile
+                        <img src="assets/img/user.png" /> </a>
+                    <a class="dropdown-item bbottom" [routerLink]="['/setpassword/2']">Change Password
+                        <img src="assets/img/password_1.png" /> </a>
+                    <!-- <a class="dropdown-item">
+                            <img src="assets/img/settings.png" /> Settings
+                        </a> -->
+                    <a class="dropdown-item bbottom" [routerLink]="['/faq']">FAQs
+                        <img src="assets/img/faqs.png" />
+                    </a>
+                    <a class="dropdown-item bbottom" [routerLink]="['/about']">About
+                        <img src="assets/img/info.png" />
+                    </a>
+                    <a class="dropdown-item" (click)="onLogOut()">Logout
+                        <img src="assets/img/logout.png" /> </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="head_note dropdown" *ngIf="logged_in">
+        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+            aria-haspopup="true" aria-expanded="false">
+            <img src="assets/img/notification.svg">
+            <span class="badge_count " *ngIf="badge>0">{{badge}}</span>
+        </button>
+        <div class="dropdown-menu" (click)="$event.stopPropagation()" aria-labelledby="dropdownMenuButton">
+            <div class="inner_note">
+                <div class="no_notification" *ngIf="notification_total==0">
+                    No notification(s) available
+                </div>
+                <a class="dropdown-item" *ngIf="notification_total>0">
+                    <div class="box assessment_box" *ngFor="let list of notification_data; let i = index">
+                        <div class="outer_div" (click)="viewNotification(list,i)">
+                            <div class="card_img">
+                                <div class="over_img">
+                                    <img src="assets/img/bell.png">
+                                </div>
+                                <p class="status" [ngClass]="{'':list.status!=0, 'red':list.status==0}"></p>
+                            </div>
+                            <div class="card_cont">
+                                <h3>{{list.notificationtitle}}</h3>
+                                <p>{{list.notificationtext}}</p>
+                                <div class="note">Published On: {{list.created_on | date: 'dd-MMM-yyy'}}</div>
+                            </div>
+                            <div class="next">
+                                <img src="assets/img/note_arrow.png">
+                            </div>
+                        </div>
+                        <div class="delete" (click)="deleteNotification(list,i)">
+                            <img src="assets/img/delete.png">
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+</nav>

Hyper-M_User_Portal/src/app/common/main-header/main-header.component.scss

@@ -0,0 +1,576 @@
+nav.navbar{
+    box-shadow: 0 0 1px 1px #ccc;
+    padding: 0 0;
+    background-color: #fff !important;
+    .navbar-brand{
+        padding: 0;
+        margin: 0 5px 0 0;
+        img{
+            width: 170px;
+        }
+    }
+    .collapse.navbar-collapse{
+        .navbar-nav {
+            .nav-item{
+                padding: 23px 0px;  
+                cursor:auto !important;
+                .nav-link{
+                    color: #28a8e0 ;
+                    font-weight: 700;
+                    font-size:11.5px;
+                }
+            }
+            li.nav-item.active {
+                border-bottom: 5px solid #28a8e0 ;
+            }
+        }
+        
+        .dropdown-menu::before {
+            width: 10px;
+            height: 10px;
+            content: "";
+            background-color: #fff;
+            -webkit-box-shadow: 0 0 1px 1px #ccc;
+            box-shadow: -2px -2px 0px -1px #ccc;
+            position: absolute;
+            top: -3px;
+            margin: auto;
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+            
+        }
+        
+    }
+    .dropdown-item {
+        padding: .45rem 1rem !important;
+        margin: 0px 0 !important;
+        width: calc(100% - 0px) !important;
+        font-size: 12px;
+    }
+    .inner_note{
+        .dropdown-item {
+            padding: 0 .5rem 0 .5rem !important;
+            .assessment_box{
+                margin-bottom: 0;
+            }
+        }
+    }
+    .bottom{
+        border-bottom: 1px solid #dcdcdc;
+       
+    }
+    .head_note.dropdown{
+        float: right;
+        cursor: pointer;
+        .btn {
+            width: 54px;
+            background-color: transparent;
+            border: none;
+            margin: 0 10px;
+            text-align: center;
+            position: relative;
+            img{
+                width: 30px;
+            }
+        }
+        .btn:focus{
+            box-shadow: none;
+        }
+        
+        .dropdown-menu{
+            left: -430px;
+            width: 500px;
+            max-height: 500px;
+            overflow-y: scroll;
+            // overflow: hidden;
+            min-height: auto;
+            height: auto;
+            .inner_note {
+                width: 100%;
+                height: -webkit-fill-available;
+                overflow: hidden;
+                overflow-y: scroll;
+            }
+            .dropdown-item{
+                padding: .25rem .7rem;
+            }
+            .box {
+                height: 100px;
+                background-color: #fff;
+                position: relative;
+                margin-bottom: 10px;
+                .card_img{
+                    height: 80px;
+                    width: 90px;
+                    .over_img{
+                        width: 70px;
+                        height: 70px;
+                        background-color: #28a8e0 ;
+                        img{
+                            width: 40px;
+                            height: 40px;
+                        }
+                    }
+                    p.status {
+                        position: absolute;
+                        width: 10px;
+                        height: 10px;
+                        right: 10px;
+                        // background-color: #000;
+                        border-radius: 50%;
+                        right: 27px;
+                        bottom: 10px;
+                        margin: auto;
+                    }
+                    p.status.green{
+                        background-color: green;
+                    }
+                    p.status.red{
+                        background-color: red;
+                    }
+                }
+                .card_cont{
+                    overflow: hidden;
+                    width: calc(100% - 120px);
+                    .note{
+                        width: 133px;
+                    }
+                    h3{
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                        font-size: 14px;
+                        width: 100%;
+                    }
+                    p{
+                        white-space: normal;
+                    }
+                }
+                .delete {
+                    position: absolute;
+                    width: 20px;
+                    bottom: 5px;
+                    right: 5px;
+                    img{
+                        width: 100%;
+                    }
+                }
+                .next {
+                    position: absolute;
+                    width: 8px;
+                    bottom: 35px;
+                    right: 10px;
+                    img{
+                        width: 100%;
+                    }
+                }
+            }
+        }
+        .dropdown-menu::before {
+            right: 25px;
+        }
+    }
+    .head_pro {
+        float: right;
+        width: 250px;
+        cursor: pointer;
+        p{
+            margin: 5px 0;
+            border-left:1px solid #ccc;
+            border-right:1px solid #ccc;
+            font-weight: 700 ;
+            color: #28a8e0 ;
+            font-size: 16px;
+            img{
+                width:50px;
+                height:50px;
+                border-radius: 50%;
+                background-color: whitesmoke;
+                border:1px solid #ccc;
+                margin: 0 10px;
+            }
+        }
+        .dropdown-menu{
+            // left:90px;
+            img{
+                width: 20px;
+                vertical-align: sub;
+               /* margin-right: 10px;*/
+                float: right;
+                margin-left: 22px;
+            }
+        }
+        .dropdown-menu::before {
+            left: 0;
+            right: 0;
+        }
+        .dropdown-toggle::after{
+            display: none;
+        }
+    }
+    .left_arrow{
+        display: none;
+    }
+    li.dropdown.nav-item a{
+        border: none;
+        cursor: pointer;
+    }
+    .dropdown-menu.open{
+        display: block;
+    }
+    .dropdown-menu.sub-items{
+        min-width: 200px;
+        width: 100%;
+        left: 50%;
+        margin-left: -100px;
+        padding: 8px;
+        margin-top: 0;
+        li{
+            text-align: left;
+            a{
+                padding-left: 18px;
+                color: #28a8e0 ;
+                font-weight: 700;
+                font-size: 12px;
+                text-transform: uppercase;
+                position: relative;
+                transition: all 0.2s linear;
+            }
+            a:hover{
+                text-decoration: none;
+                    margin-left: 8px;
+            }
+            a:before{
+                position: absolute;
+                left: 5px;
+                top: 8px;
+                content: "\f054";
+                width: 16px;
+                height: 16px;
+                color: #28a8e0 ;
+                font-family: "FontAwesome";
+            }
+        }
+        li:focus{
+            outline: none;
+        }
+    } 
+    .dropdown-menu.sub-items::before{
+        left: 50%;
+    }
+}
+@media screen and (max-width: 1024px) {
+    nav.navbar{
+        padding: 0px;
+        .navbar-brand{
+            margin: 0 5px 0 0 ;
+            img{
+                width: 120px;
+            }
+        }
+        .collapse.navbar-collapse{
+            .navbar-nav{
+                .nav-item {
+                    padding: 10px 5px;
+                    .nav-link{
+                        font-size: 10px;
+                        padding: 10px 5px;
+                    }
+                }
+            }
+            .head_note.dropdown{
+                .btn{
+                    margin: 0 10px;
+                }
+            }
+            .head_pro{
+                p{
+                    img{
+                        width: 45px;
+                        height: 45px;
+                    }
+                }
+            }
+        }
+    }
+}
+// @media screen and (max-width: 768px) {
+//     nav.navbar .head_note.dropdown{
+//         margin-right: 60px;
+//     }
+// }
+@media screen and (min-width: 769px) and (max-width: 1000px) {
+    nav.navbar.navbar-expand-lg.navbar-light {
+        // position: fixed;
+        width: 100%;
+        z-index: 999;
+        background-color: #fff;
+        height: 53px;
+        top: 0;
+        .navbar-brand{
+            img{
+                width: 100px;
+            }
+        }
+    }
+    div#navbarSupportedContent {
+        max-width: 250px;
+        width: 100%;
+        background-color: #28a8e0 ;
+        float: right;
+        position: absolute;
+        top: 53px;
+        right: 0;
+        padding: 0;
+        ul.navbar-nav.mr-auto {
+            padding-top: 120px;
+            padding-bottom: 20px;
+            li.nav-item{
+                text-align: center;
+                a.nav-link{
+                    color: #fff;
+                    text-align: left;
+                    font-size: 14px;
+                    font-weight: bold;
+                    padding: 5px 5px 5px 35px;
+                    img{
+                        height: 25px;
+                        margin-right: 10px; 
+                    }
+                }
+            }
+            li.nav-item.active{
+                // background-color: rgba(0, 51, 76, 0.5);
+                background-color: #0c3e55;
+            }
+        }
+        .head_right{
+            .head_pro{
+                float: right;
+                width: 100%;
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                padding: 20px;
+                border: 0;
+                p{
+                    border-left: 0;
+                    border-right: 0;
+                    color: #fff;
+                    border-bottom: 1px solid #ffff;
+                    padding-bottom: 20px;
+                    position: relative;
+                    .left_arrow{
+                        width: 15px;
+                        height: 15px;
+                        float: right;
+                        border: none;
+                        box-shadow: none;
+                        background-color: transparent;
+                        border-radius: 0;
+                        position: absolute;
+                        top: 20px;
+                        margin: auto;
+                        right: 0;
+                    }
+                    img{
+                        width: 50px;
+                        height: 50px;
+                        border: 5px solid #28a8e0 ;
+                        box-shadow: 0 0 2px 2px #666;
+                    }
+                }
+                .dropdown-menu{
+                    left: 35px;
+                    top: 86px;
+                }
+            }
+        }
+    }
+    .head_note.dropdown{
+        margin-right: 60px;
+        .badge_count{
+            right: 8px;
+            top: 8px;
+        }
+        .dropdown-menu{
+            left: -173px !important;
+            width: 300px !important;
+            top: 60px;
+        }
+    }
+    .navbar-toggler:not(:disabled):not(.disabled){
+        position: absolute;
+        right: 8px;
+        border: none !important;
+        img{
+            width: 25px;
+        }
+    }
+    .navbar-toggler{
+        outline:none;
+    }
+}
+@media screen and (max-width: 768px) {
+    nav.navbar.navbar-expand-lg.navbar-light {
+        // position: fixed;
+        width: 100%;
+        z-index: 999;
+        background-color: #fff;
+        height: 53px;
+        top: 0;
+        .navbar-brand{
+            img{
+                width: 100px;
+            }
+        }
+    }
+    div#navbarSupportedContent {
+        max-width: 250px;
+        width: 100%;
+        background-color: #28a8e0 ;
+        float: right;
+        position: absolute;
+        top: 53px;
+        right: 0;
+        padding: 0;
+        ul.navbar-nav.mr-auto {
+            padding-top: 120px;
+            padding-bottom: 20px;
+            li.nav-item{
+                text-align: center;
+                a.nav-link{
+                    color: #fff;
+                    text-align: left;
+                    font-size: 14px;
+                    font-weight: bold;
+                    padding: 5px 5px 5px 35px;
+                    img{
+                        height: 25px;
+                        margin-right: 10px; 
+                    }
+                }
+            }
+            li.nav-item.active{
+                // background-color: rgba(0, 51, 76, 0.5);
+                background-color: #0c3e55;
+            }
+        }
+        .head_right{
+            .head_pro{
+                float: right;
+                width: 100%;
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                padding: 20px;
+                border: 0;
+                p{
+                    border-left: 0;
+                    border-right: 0;
+                    color: #fff;
+                    border-bottom: 1px solid #ffff;
+                    padding-bottom: 20px;
+                    position: relative;
+                    .left_arrow{
+                        width: 15px;
+                        height: 15px;
+                        float: right;
+                        border: none;
+                        box-shadow: none;
+                        background-color: transparent;
+                        border-radius: 0;
+                        position: absolute;
+                        top: 20px;
+                        margin: auto;
+                        right: 0;
+                    }
+                    img{
+                        width: 50px;
+                        height: 50px;
+                        border: 5px solid #28a8e0 ;
+                        box-shadow: 0 0 2px 2px #666;
+                    }
+                }
+                .dropdown-menu{
+                    left: 35px;
+                    top: 86px;
+                }
+            }
+        }
+    }
+    .head_note.dropdown{
+        margin-right: 60px;
+        .badge_count{
+            right: 8px;
+            top: 8px;
+        }
+        .dropdown-menu{
+            left: -173px !important;
+            width: 300px !important;
+            top: 60px;
+        }
+    }
+    .navbar-toggler:not(:disabled):not(.disabled){
+        position: absolute;
+        right: 8px;
+        border: none !important;
+        img{
+            width: 25px;
+        }
+    }
+    .navbar-toggler{
+        outline:none;
+    }
+}
+@media screen and (max-width: 550px) {
+    nav.navbar.navbar-expand-lg.navbar-light{
+        display: none;
+    }
+    nav.navbar .navbar-brand{
+        img{
+            width: 100px;
+        }
+    }
+}
+.badge_count{
+    background-color: red;
+    padding: 3px;
+    width: 24px;
+    height: 22px;
+    position: absolute;
+    right: 0px;
+    top: 12px;
+    text-align: center;
+    border-radius: 50%;
+    font-size: 11px;
+    color: #fff;
+}
+.outer_div{
+    width: 100%;
+    /* float: left; */
+    position: absolute;
+    top: 0;
+    left: 0; 
+    padding: 10px;
+    height: 100%;
+}
+.box .card_cont .note { 
+    top: -3px; 
+}
+.no_notification{
+    height: 220px;
+text-align: center;
+cursor:auto;
+p{
+     margin-top: 15px;
+}
+}
+li{
+    cursor: pointer;
+    text-align: center;
+}
+
+a:not([href]):not([tabindex]){
+    background: #fff !important;
+    outline: none !important;
+}

Hyper-M_User_Portal/src/app/common/main-header/main-header.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainHeaderComponent } from './main-header.component';
+
+describe('MainHeaderComponent', () => {
+  let component: MainHeaderComponent;
+  let fixture: ComponentFixture<MainHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/set-passwword/set-passwword.component.html

@@ -0,0 +1,145 @@
+<app-main-header></app-main-header>
+<app-signup-modal></app-signup-modal>
+<app-forgot-password></app-forgot-password>
+<div class="login">
+    <div class="login_box">
+        <!-- <h3>Welcome to </h3> -->
+        <div class="top_icon"><img src="assets/img/setpassword.png"></div>
+       <div *ngIf="type==2"> <h1 class="text-center" ><span class="" >CHANGE PASSWORD</span></h1></div>
+        <div  *ngIf="type!=2"><h1 class="text-center" ><span class="">RESET PASSWORD</span></h1></div>
+        <div *ngIf="type!=2">
+                <form [formGroup]="setform"   class="form_2">
+                    <div class="form-group password">
+                        <input type="{{new_type}}" id="newpassword" class="form-control"   [maxlength]="25" [(ngModel)]="newpassword" formControlName="newpassword" autocomplete="off"
+                            required>
+                        <label for="newpassword" class="control-label form-control-placeholder">New Password</label>
+                        <div class="color_error shake" *ngIf="!setform.controls['newpassword'].valid && setform.controls['newpassword'].touched&&password_error==''&&newpassword!=''">
+                            <a class="text-left shake">
+                                <img src="assets/img/error.png" />Please enter a valid password</a>
+                        </div>
+                        <div class="color_error shake" *ngIf="newpassword==''&&password_error==''&& setform.controls['newpassword'].touched">
+                            <a class="text-left shake">
+                                <img src="assets/img/error.png" />Please enter the password </a>
+                        </div>
+                        <div class="view_eye" *ngIf="new_type=='password'" (click)="toggleShow(1)"><img src="assets/img/show.png" />
+                        </div>
+                        <div class="hide_eye" *ngIf="new_type=='text'" (click)="toggleShow(1)"><img src="assets/img/hide.png" />
+                        </div>
+                     </div>
+                    <div class="form-group password">
+                        <input type="{{repassword_type}}" id="confirmpassword"   class="form-control " [maxlength]="25" [(ngModel)]="repassword" formControlName="repassword" autocomplete="off"
+                            required>
+                        <label for="confirmpassword" class="control-label form-control-placeholder">Confirm Password</label>
+                        <div class="color_error shake" *ngIf="!setform.controls['repassword'].valid && setform.controls['repassword'].touched&&password_error==''">
+                            <a class="text-left shake" >
+                                <img src="assets/img/error.png"/>Please confirm the password</a>
+                        </div>
+                        <div class="color_error shake" *ngIf="password_error!=''&&password_sucess==''">
+                            <a class="text-left shake">
+                                <img src="assets/img/error.png" />{{password_error}} </a>
+                        </div>
+                        <div class="color_error shake" *ngIf="password_sucess!=''">
+                            <a class="text-left shake">
+                                <img src="assets/img/checked.png" />{{password_sucess}} </a>
+                        </div>
+                        <div class="view_eye" *ngIf="repassword_type=='password'" (click)="toggleShow(2)"><img src="assets/img/show.png" />
+                        </div>
+                        <div class="hide_eye" *ngIf="repassword_type=='text'" (click)="toggleShow(2)"><img src="assets/img/hide.png" />
+                        </div>
+                    </div>
+                    <div class="forgot text-center">
+                        The password must have at least 8 characters, and its alphanumeric.
+                    </div>
+                    <button type="submit" class="btn primary" (click)="onSetPassword()">Continue</button>
+                </form>
+        </div>
+        <div *ngIf="type==2">
+                <form [formGroup]="setchangeform"   class="form_2">
+                        <div *ngIf="type==2" class="form-group password">
+                                <input type="{{old_type}}" id="oldpassword" class="form-control"   [maxlength]="25" [(ngModel)]="oldpassword" formControlName="oldpassword" autocomplete="off"
+                                    required>
+                                <label for="oldpassword" class="control-label form-control-placeholder">Old Password</label>
+                                <div class="color_error shake" *ngIf="!setchangeform.controls['oldpassword'].valid && setchangeform.controls['oldpassword'].touched&&password_error==''&&oldpassword!=''">
+                                    <a class="text-left shake">
+                                        <img src="assets/img/error.png" />Please enter a valid password</a>
+                                </div>
+                                <div class="color_error shake" *ngIf="oldpassword==''&&password_error==''&& setchangeform.controls['oldpassword'].touched">
+                                    <a class="text-left shake">
+                                        <img src="assets/img/error.png" />Please enter the password </a>
+                                </div>
+                                <div class="view_eye" *ngIf="old_type=='password'" (click)="toggleShow(3)"><img src="assets/img/show.png" />
+                                </div>
+                                <div class="hide_eye" *ngIf="old_type=='text'" (click)="toggleShow(3)"><img src="assets/img/hide.png" />
+                                </div>
+                             </div>
+                    <div class="form-group password">
+                        <input type="{{new_type}}" id="newpassword" class="form-control"   [maxlength]="25" [(ngModel)]="newpassword" formControlName="newpassword" autocomplete="off"
+                            required>
+                        <label for="newpassword" class="control-label form-control-placeholder">New Password</label>
+                        <div class="color_error shake" *ngIf="!setchangeform.controls['newpassword'].valid && setchangeform.controls['newpassword'].touched&&password_error==''&&newpassword!=''">
+                            <a class="text-left shake">
+                                <img src="assets/img/error.png" />Please enter a valid password</a>
+                        </div>
+                        <div class="color_error shake" *ngIf="newpassword==''&&password_error==''&& setchangeform.controls['newpassword'].touched">
+                            <a class="text-left shake">
+                                <img src="assets/img/error.png" />Please enter the password </a>
+                        </div>
+                        <div class="view_eye" *ngIf="new_type=='password'" (click)="toggleShow(1)"><img src="assets/img/show.png" />
+                        </div>
+                        <div class="hide_eye" *ngIf="new_type=='text'" (click)="toggleShow(1)"><img src="assets/img/hide.png" />
+                        </div>
+                     </div>
+                    <div class="form-group password">
+                        <input type="{{repassword_type}}" id="confirmpassword"   class="form-control " [maxlength]="25" [(ngModel)]="repassword" formControlName="repassword" autocomplete="off"
+                            required>
+                        <label for="confirmpassword" class="control-label form-control-placeholder">Confirm Password</label>
+                        <div class="color_error shake" *ngIf="!setchangeform.controls['repassword'].valid && setchangeform.controls['repassword'].touched&&password_error==''">
+                            <a class="text-left shake" >
+                                <img src="assets/img/error.png"/>Please confirm the password</a>
+                        </div>
+                        <div class="color_error shake" *ngIf="password_error!=''&&password_sucess==''">
+                            <a class="text-left shake">
+                                <img src="assets/img/error.png" />{{password_error}} </a>
+                        </div>
+                        <div class="color_error shake" *ngIf="password_sucess!=''">
+                            <a class="text-left shake">
+                                <img src="assets/img/checked.png" />{{password_sucess}} </a>
+                        </div>
+                        <div class="view_eye" *ngIf="repassword_type=='password'" (click)="toggleShow(2)"><img src="assets/img/show.png" />
+                        </div>
+                        <div class="hide_eye" *ngIf="repassword_type=='text'" (click)="toggleShow(2)"><img src="assets/img/hide.png" />
+                        </div>
+                    </div>
+                    <div class="forgot text-center">
+                        The password must have at least 8 characters, and its alphanumeric.
+                    </div>
+                    <button type="submit" class="btn primary" (click)="onSetPassword()">Continue</button>
+                </form>
+        </div>
+       
+     </div>
+</div>
+<!-- Modal -->
+<div class="modal" id="mandatory" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+          <div class="modal-content">
+                <div class="modal-body">
+                    <div class="row align-items-center" >
+                        <div class="main_content">
+                            <div class="col col-sm-12 content">
+                            <div class="col col-sm-4 logo">
+                                <img src="assets/img/chat.png" />
+                            </div>
+                            <div class="col col-sm-8">
+                                <h2 class="header_fields">Fill in the mandatory fields</h2> 
+                               <p class="text-center">You are one step closer to complete the registration </p>
+                            <div class="text-center"><button class="btn primary fixed text-center" data-dismiss="modal" aria-label="Close" (click)="isSubmit()">ok</button></div>
+                            </div>
+                            </div>
+                      </div>
+
+                      </div>
+                      </div>
+          </div>
+        </div>
+      </div>

Hyper-M_User_Portal/src/app/common/set-passwword/set-passwword.component.scss

@@ -0,0 +1,349 @@
+.login{
+    width: 100%;
+    height:calc(100% - 85px);
+    background-image: url("assets/img/slider2.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: relative;
+    .login_box{
+        width: 35%;
+        position: absolute;
+        height:93%;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        margin: auto;
+        padding: 10px 50px;
+        background-color: rgba(255, 255, 255, 0.9);
+        overflow: hidden;
+        box-shadow: 3px 3px 6px 3px #191313;
+        .form_2{
+            .form-group{
+                margin-bottom: 24px;
+            }
+            .forgot{
+                font-size: 15px;
+            }
+            .btn{
+                margin-top: 10px;
+            }
+        }
+        .top_icon{
+            width: 100%;
+            float: left;
+            text-align: center;
+            margin-bottom: 0px;
+            img{
+                width: 15%;
+                margin-bottom: 10px;
+            }
+        }
+        h1{
+            color:#333;
+            margin-bottom: 0;
+            font-size: 20px;
+            span{
+                font-size: 24px;
+            }
+        }
+        h3{
+            color:#666;
+            font-weight: 400;
+            font-size: 18px;
+        }
+        // form{
+        //     .form-control{
+        //         height: 50px;
+        //         border-radius: 50px;
+        //         background-color: #ccc;
+        //     }
+        //     .form-control:focus{
+        //         border-color: #ccc;
+        //         box-shadow: 0 0 0 0.2rem rgba(0,0,0,.25);
+        //     }
+        //     .form-control::placeholder{
+        //         color:#333;
+        //     }
+        // }
+    }
+}
+#mandatory{
+    background: rgba(0,0,0,.5);
+}
+.login:before{
+    position: absolute;
+    width:100%;
+    content:"";
+    height:100%;
+    background-color: rgba(17, 17, 17, 0.8);
+    top:0;
+    left:0;
+}
+
+
+
+.modal-dialog{
+    max-width: 800px;
+    .modal-content{
+        .modal-header{
+
+        }
+        .modal-body{
+
+            .row {
+                height:250px;
+                .col{
+                    height:100%;
+                    float: left;
+                }
+                .logo{
+                    border-right:1px solid #ccc;
+                    padding: 2px 25px;
+                    text-align: center;
+                    img{
+                        width:150px;
+                    }
+                }
+                .main_content{
+                    float: left;
+                    max-width: 100%;
+                    height: 100%;
+                    width: 100%;
+                    overflow: hidden;
+                    position: relative;
+                    .content{
+                        padding: 30px;
+                        position: absolute;
+                        width: 100%;
+                        max-width: 100%;
+                        .header_fields{
+                            font-weight: 700;
+                            text-align: center !important;
+                        }
+                        h2{
+                            color:#28a8e0;
+                            font-size: 28px;
+                        }
+                        p{
+                            font-size: 22px;
+                        }
+                        h6{
+                            font-size: 18px;
+                            color: #28a8e0;
+                            // font-style: italic;
+                        }
+                        .input_left {
+                            height: 90px;
+                            width: 100%;
+                            form{
+                                width: 70%;
+                                float: left;
+                            }
+                            .resent{
+                                width:30%;
+                                float: left;
+                                text-align: center;
+                                margin-top: 20px;
+                                a{
+                                    text-decoration: underline;
+                                    cursor: pointer;
+                                }
+                            }
+                        }
+                        .btn_center {
+                            width: 340px;
+                            margin: auto;
+                        }
+                    }
+                    .success{
+                        text-align: center;
+                        img{
+                            width: 100px;
+                            margin: 20px;
+                        }
+                        h2{
+                            color:green;
+                        }
+                    }
+                }
+                .end_success{
+                    padding: 30px;
+                    .logo{
+                        // padding: 75px 25px;
+                    }
+                }
+
+                .section1{
+                    left: 0;
+                }
+                .section2{
+                    left: 100%;
+                }
+                .section3{
+                    left: 100%;
+                }
+                .section1.section_close{
+                    left:-100%;
+                }
+                .section2.section_open{
+                    left:0;
+                }
+                .section3.section_open{
+                    left:0;
+                }
+
+                .section_open {
+                    /* for chrome and safari*/
+                    -webkit-animation-duration: 1s;
+                    -webkit-animation-name: sectionin;
+
+                    /*for firefox*/
+                    -moz-animation-duration: 1s;
+                    -moz-animation-name: sectionin;
+
+                      /* for opera*/
+                    -o-animation-duration: 1s;
+                    -o-animation-name: sectionin;
+
+                      /* Standard syntax*/
+                    animation-duration: 1s;
+                    animation-name: sectionin;
+                  }
+
+
+                  @-webkit-keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+
+                  @-moz-keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+                  @-o-keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+                  @keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+
+
+                  .section_close {
+                    /* for chrome and safari*/
+                    -webkit-animation-duration: 1s;
+                    -webkit-animation-name: sectionout;
+
+                    /*for firefox*/
+                    -moz-animation-duration: 1s;
+                    -moz-animation-name: sectionout;
+
+                      /* for opera*/
+                    -o-animation-duration: 1s;
+                    -o-animation-name: sectionout;
+
+                      /* Standard syntax*/
+                    animation-duration: 1s;
+                    animation-name: sectionout;
+                  }
+
+
+                  @-webkit-keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 80%;
+                    }
+
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+
+                  @-moz-keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 80%;
+                    }
+
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+                  @-o-keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+                  @keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 80%;
+                    }
+
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 550px) {
+    .login{
+        height: calc(100% - 53px);
+        margin-top: 53px;
+        .login_box{
+            width:90%;
+            .top_icon{
+                img{
+                    width: 50px;
+                }
+            }
+            h1{
+                span{
+                    font-size: 18px;
+                }
+            }
+        }
+    }
+}

Hyper-M_User_Portal/src/app/common/set-passwword/set-passwword.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SetPasswwordComponent } from './set-passwword.component';
+
+describe('SetPasswwordComponent', () => {
+  let component: SetPasswwordComponent;
+  let fixture: ComponentFixture<SetPasswwordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SetPasswwordComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SetPasswwordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/set-passwword/set-passwword.component.ts

@@ -0,0 +1,200 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { HyperService } from './../../core/services/http.service';
+import { LocalStorage } from './../../core/services/local_storage.service';
+import { Router } from "@angular/router";
+import { ActivatedRoute } from '@angular/router';
+declare var $: any;
+@Component({
+    selector: 'app-set-passwword',
+    templateUrl: './set-passwword.component.html',
+    styleUrls: ['./set-passwword.component.scss']
+})
+export class SetPasswwordComponent implements OnInit {
+    setform: FormGroup;
+    setchangeform: FormGroup;
+    newpassword: any = '';
+    repassword: any = '';
+    oldpassword: any = '';
+    password_error: string = '';
+    passwordPattern = "^(?=.*?[a-z])(?=.*?[0-9]).{8,}$";
+    type: any;
+    sub: any;
+    password_sucess: string = '';
+    new_type = "password";
+    repassword_type = "password";
+    old_type = "password";
+    show_textbox1 = false;
+    show_textbox2 = false;
+    show_textbox3 = false;
+    set_from:string;
+    constructor(private formBuilder: FormBuilder, private server: HyperService, private router: Router, private route: ActivatedRoute) {
+        this.sub = this.route.params.subscribe(params => {
+            this.type = params['type'];
+            console.log('Type', this.type)
+        });
+    }
+    ngOnInit() {
+        this.sub = this.route.params.subscribe(params => {
+            this.type = params['type'];
+            console.log('Type', this.type)
+        });
+        if(this.type!=2){
+            this.formBuild()
+        }else{
+            this.formChangeBuild()
+        }
+        if(LocalStorage.getValue('forgot')!=undefined) {
+            this.set_from = LocalStorage.getValue('forgot')
+        }
+    }
+    formChangeBuild(){
+        this.setchangeform = this.formBuilder.group({
+            oldpassword: [null, Validators.compose([Validators.required, Validators.pattern(this.passwordPattern)])],
+            newpassword: [null, Validators.compose([Validators.required, Validators.pattern(this.passwordPattern)])],
+            repassword: [null, Validators.compose([Validators.required])]
+        });
+    }
+    formBuild() {
+        this.setform = this.formBuilder.group({
+            // oldpassword: [null, Validators.compose([Validators.required, Validators.pattern(this.passwordPattern)])],
+            newpassword: [null, Validators.compose([Validators.required, Validators.pattern(this.passwordPattern)])],
+            repassword: [null, Validators.compose([Validators.required])]
+        });
+    }
+
+    onSetPassword() {
+        if ((this.newpassword != this.repassword) && this.repassword!='') {
+            this.password_error = "Password and confirm password not matching";
+        } else {
+            this.password_error=''
+            this.onSet(this.type)
+        }
+    }
+
+
+    toggleShow(textbox) {
+        if (textbox == 1) {
+            this.show_textbox1 = !this.show_textbox1;
+            if (this.show_textbox1) {
+                this.new_type = "text";
+            } else {
+                this.new_type = "password";
+            }
+        } else if(textbox == 2){
+            this.show_textbox2 = !this.show_textbox2;
+            if (this.show_textbox2) {
+                this.repassword_type = "text";
+            } else {
+                this.repassword_type = "password";
+            }
+
+        }else{
+            this.show_textbox3 = !this.show_textbox3;
+            if (this.show_textbox3) {
+                this.old_type = "text";
+            } else {
+                this.old_type = "password";
+            }
+        }
+
+    }
+
+    onSet(type) {
+
+        console.log('type', type)
+        if (type == 2) {
+            if (this.setchangeform.valid) {
+                console.log('1')
+                let user_name;
+                if(LocalStorage.getValue('signup_user')!=undefined){
+                    user_name=LocalStorage.getValue('signup_user').username
+                }else{
+                    user_name=LocalStorage.getValue('smpin') 
+                }
+                this.server.post("user/change_password", {
+                    new_password: this.newpassword,
+                    current_password:this.oldpassword,
+                    type: 'old',
+                    username:user_name
+                }).then((data) => {
+                    console.log(data)
+                    if (data.status == 200 && data.result.response == "success") {
+                        this.password_sucess = data.result.message
+                        setTimeout(() => {
+                            this.router.navigateByUrl('');
+                        }, 700);
+                    }else if(data.status == 401 && data.result.response == "failed"){
+                        this.router.navigateByUrl('');
+                    } else if (data.result.response == "failed") {
+                        this.password_error = data.result.message;
+                    }
+                })
+            } else {
+                this.validateAllFormFields(this.setchangeform);
+            }
+        } else if (type != 2) {
+            console.log('2')
+            let user_name;
+                if(LocalStorage.getValue('signup_user')!=undefined){
+                    user_name=LocalStorage.getValue('signup_user').username
+                }else{
+                    user_name=LocalStorage.getValue('smpin') 
+                }
+            if (this.setform.valid) {
+                this.server.post("user/change_password", {
+                    new_password: this.newpassword,
+                    type: this.set_from,
+                    username: user_name
+                }).then((data) => {
+                    if (data.status == 200 && data.result.response == "success") {
+                        this.password_sucess = data.result.message;
+                        if(this.set_from=='register') {
+                            setTimeout(() => {
+                                $('#mandatory').modal({
+                                    backdrop: 'static',
+                                    keyboard: false,
+                                });
+                                $("#mandatory").modal('show');
+                            }, 200);
+                        }else{
+                            setTimeout(() => {
+                                this.router.navigateByUrl('');
+                            }, 700);
+                        }
+                        LocalStorage.setValue('user_data', data.result.data);
+                        LocalStorage.setValue('token', data.result.access_token);
+                    } else if (data.result.response == "failed") {
+                        this.password_error = data.result.message;
+                    }
+                })
+            } else {
+                this.validateAllFormFields(this.setform);
+            }
+        }
+
+    }
+
+    isSubmit() {
+        LocalStorage.setValue('loggedIn', true);
+        LocalStorage.setValue('is_firsttime', true);
+        setTimeout(() => {
+            this.router.navigateByUrl('userprofile');
+        }, 700);
+    }
+
+
+    validateAllFormFields(formGroup: FormGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
+            const control = formGroup.get(field);
+            if (control instanceof FormControl) {
+                control.markAsTouched({
+                    onlySelf: true
+                });
+            } else if (control instanceof FormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+
+}

Hyper-M_User_Portal/src/app/common/signup-modal/signup-modal.component.html

@@ -0,0 +1,137 @@
+<!-- Button trigger modal -->
+
+<!-- Modal -->
+<div class="modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <!-- <button class="btn btn-primary close" data-dismiss="modal" aria-label="Close" (click)="modelClose()" ><img src="assets/img/close_btn.png"></button> -->
+            <div class="modal-body">
+
+                <div class="row align-items-center">
+
+
+                    <div class="main_content col-sm-12" *ngIf="!otp_sucess">
+                        <!-- First  -->
+                        <div class="col  content section1" [ngClass]="section==1||section==2 ?'section_close':''">
+                            <div class="col col-sm-4 logo">
+                                <img src="assets/img/shield.png" />
+                            </div>
+                            <div class="col col-sm-8">
+                                <h2>Confirmation</h2>
+                                <p>Your Registered Mobile Number</p>
+                                <h5 id="userMobile"></h5>
+                                <div class="btn_center text-center">
+                                    <button class="btn primary fixed float-left" (click)="reject()">No</button>
+                                    <button class="btn primary fixed float-right" (click)="accept()">yes</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Second  -->
+                        <div class="col col-sm-12 content section2" [ngClass]="section==1 ?'section_open':''">
+
+                            <div class="col col-sm-4 logo">
+                                <img src="assets/img/otp.png" />
+                            </div>
+                            <div class="col col-sm-8">
+                                <h2>OTP Sent</h2>
+                                <p>Your OTP have been sent to your
+                                    <span id="userMobile">
+                                        <b>{{user_mobile}}</b>
+                                    </span>
+                                </p>
+                                <div class="input_left">
+                                    <form [formGroup]="otpform" (keyup.enter)="onSubmitOtp()">
+                                        <div class="form-group box">
+                                            <input type="password" id="otp1" (input)="onInputChange()" class="form-control password" [maxlength]="1" [(ngModel)]="otp1" onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"
+                                                formControlName="otp1" autocomplete="off" required>
+                                            <input type="password" id="otp2" (input)="onInputChange()" class="form-control password" [maxlength]="1" [(ngModel)]="otp2" onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"
+                                                formControlName="otp2" autocomplete="off" required>
+                                            <input type="password" id="otp3" (input)="onInputChange()" class="form-control password" [maxlength]="1" [(ngModel)]="otp3" onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"
+                                                formControlName="otp3" autocomplete="off" required>
+                                            <input type="password" id="otp4" (input)="onInputChange()" class="form-control password" [maxlength]="1" [(ngModel)]="otp4" onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"
+                                                formControlName="otp4" autocomplete="off" required>
+                                            <div class="color_error shake" *ngIf="otp_error!=''">
+                                                <a class="text-left shake">
+                                                    <img src="assets/img/error.png" />{{otp_error}} </a>
+                                            </div>
+                                        </div>
+                                    </form>
+
+
+                                    <!-- <form [formGroup]="otpform" (keyup.enter)="onSubmitOtp()">
+                          <div class="form-group">
+                              <input type="password" id="otp" class="form-control password" [maxlength]="4" [(ngModel)]="otp" formControlName="otp" autocomplete="off" required>
+                              <label for="otp" class="control-label form-control-placeholder">Enter OTP</label>
+                              <div class="color_error shake" *ngIf="!otpform.controls['otp'].valid && otpform.controls['otp'].touched&&!otp_error!=''&&resend!">
+                                  <a class="text-left shake">
+                                      <img src="assets/img/error.png" />Enter the SM PIN</a>
+                              </div>
+                              <div class="color_error shake" *ngIf="otp_error!=''">
+                                  <a class="text-left shake">
+                                      <img src="assets/img/error.png" />{{otp_error}} </a>
+                              </div>
+                              
+                          </div>
+                          </form> -->
+
+                                    <div class="resent" *ngIf="resend_enable">
+                                        <a (click)="resendOtp()">Resent OTP</a>
+                                    </div>
+
+
+
+                                </div>
+                                <!-- <h6 *ngIf="!resend_enable">OTP Expires in {{countdown}} Sec</h6>
+                  <button class="btn primary clear fixed float-right" (click)="onSubmitOtp()">Submit</button>
+             -->
+
+
+                                <h6 *ngIf="!resend_enable  && countdown!='1:0'">OTP Expires in {{countdown}} Sec</h6>
+                                <button class="btn primary fixed float-right" (click)="onSubmitOtp()">Submit</button>
+                                <button class="btn primary fixed float-right" (click)="onCancelOtp()">Cancel</button>
+                            </div>
+                            <div class="main_content" *ngIf="otp_sucess">
+                                <div class="col col-sm-8 content success">
+                                    <img src="assets/img/success.gif" />
+                                    <h2>OTP Verified successfully</h2>
+                                    <button class="btn primary fixed float-right" (click)="gotoChangePassword()" data-dismiss="modal" aria-label="Close">continue</button>
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <!-- Third  -->
+                        <div class="col col-sm-12 content section3" [ngClass]="section==2 ?'section_open':''">
+                            <div class="col col-sm-4 logo">
+                                <img src="assets/img/chat.png" />
+                            </div>
+                            <div class="col col-sm-8 mt34">
+                                <h2>Simple Step to Register Your Mobile number</h2>
+                                <ul class="left72">
+                                    <li>Contact your dealer to update your mobile number</li>
+                                    <li>Contact your AM to approve in the DMS</li>
+                                    <li>After 24 hours try again</li>
+                                </ul>
+                                <button class="btn primary fixed float-right" data-dismiss="modal" aria-label="Close" (click)="contactDealer()">ok</button>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div class="main_content end_success" *ngIf="otp_sucess">
+                        <div class="col col-sm-4 logo">
+                            <img src="assets/img/otp.png" />
+                        </div>
+                        <div class="col col-sm-8 success">
+                            <img src="assets/img/success.gif" />
+                            <h2>OTP Verified successfully</h2>
+                            <button class="btn primary fixed float-right" (click)="gotoSetPassword()" data-dismiss="modal" aria-label="Close">continue</button>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Hyper-M_User_Portal/src/app/common/signup-modal/signup-modal.component.scss

@@ -0,0 +1,301 @@
+.modal-dialog{
+    max-width: 800px;
+    .modal-content{
+        .modal-header{
+            
+        }
+        .modal-body{
+            padding:0 !important;
+            .form-group.box{
+                background-color: transparent;
+                width: 100%;
+                height: 50px;
+                cursor: pointer;
+                webkit-box-shadow: none; 
+                box-shadow: none; 
+                padding: 0; 
+                .form-control {
+                    border: none;
+                    border: 2px solid #28a8e0;
+                    border-radius: 0;
+                    -webkit-box-shadow: none;
+                    height: 50px;
+                    font-size: 16px;
+                    color: #28a8e0 !important;
+                    font-weight: bold;
+                    padding: .375rem 0;
+                    height: 50px;
+                    border-radius: 0;
+                    background-color: transparent;
+                    padding-left: 70px;
+                    padding-top: 20px;
+                    background-size: 30px;
+                    background-repeat: no-repeat;
+                    background-position: 30px center;
+                    width: 60px;
+                    background-image: none !important;
+                    padding: 0;
+                    font-size: 24px;
+                    /* line-height: 1; */
+                    text-align: center;
+                }
+                input{
+                    float: left;
+                    margin: 5px;
+                }
+                input[type=number]::-webkit-inner-spin-button, 
+                input[type=number]::-webkit-outer-spin-button { 
+                -webkit-appearance: none; 
+                margin: 0; 
+                }
+            }
+            .row {
+                height: 290px;
+                .col{
+                    height:100%;
+                    float: left;
+                }
+                .logo{
+                    border-right:1px solid #ccc;
+                    padding: 25px 25px;
+                    text-align: center;
+                    img{
+                        width:150px;
+                    }
+                }
+                .main_content{
+                    float: left;
+                    max-width: 100%;
+                    height: 100%;
+                    width: 100%;
+                    overflow: hidden;
+                    position: relative;
+                    .content{
+                        padding: 30px;
+                        position: absolute;
+                        width: 100%;
+                        max-width: 100%;
+                        h2{
+                            color:#28a8e0;
+                            font-size: 18px;
+                            padding-left: 40px;
+                        }
+                        p{
+                            font-size: 16px;
+                            padding-left: 40px;
+                        }
+                        h6{
+                            font-size: 16px;
+                            padding-left: 40px;
+                            color: #28a8e0;
+                            // font-style: italic;
+                        }
+                        h5{
+                            font-size: 28px;
+                            padding-left: 40px;
+                            color: #28a8e0;
+                            // font-style: italic;
+                        }
+                        .input_left {
+                            height: 90px;
+                            width: 100%;
+                            padding-left: 40px;
+                            form{
+                                width: 70%;
+                                float: left;
+                            }
+                            .resent{
+                                width:30%;
+                                float: left;
+                                text-align: center;
+                                margin-top: 20px;
+                                a{
+                                    text-decoration: underline;
+                                    cursor: pointer;
+                                }
+                            }
+                        }
+                        .btn_center {
+                            width: 373px;
+                           /* margin: auto;*/
+                            padding-left: 32px;
+                            margin-top: 28px;
+                        }
+                    }
+                    .success{
+                        text-align: center;
+                        img{
+                            width: 100px;
+                            margin: 20px;
+                        }
+                        h2{
+                            color:green;
+                        }
+                    }
+                }
+                .end_success{
+                    padding: 30px;
+                    .logo{
+                        // padding: 75px 25px;
+                    }
+                }
+                
+                .section1{
+                    left: 0;
+                }
+                .section2{
+                    left: 100%;
+                }
+                .section3{
+                    left: 100%;
+                }
+                .section1.section_close{
+                    left:-100%;
+                }
+                .section2.section_open{
+                    left:0;
+                }
+                .section3.section_open{
+                    left:0;
+                }
+
+                .section_open {
+                    /* for chrome and safari*/
+                    -webkit-animation-duration: 1s;
+                    -webkit-animation-name: sectionin;
+                  
+                    /*for firefox*/
+                    -moz-animation-duration: 1s;
+                    -moz-animation-name: sectionin;
+                  
+                      /* for opera*/
+                    -o-animation-duration: 1s;
+                    -o-animation-name: sectionin;
+                  
+                      /* Standard syntax*/
+                    animation-duration: 1s;
+                    animation-name: sectionin;
+                  }
+                
+                
+                  @-webkit-keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+                  
+                  @-moz-keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+                  @-o-keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+                  @keyframes sectionin {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 100%;
+                    }
+                  }
+
+
+                  .section_close {
+                    /* for chrome and safari*/
+                    -webkit-animation-duration: 1s;
+                    -webkit-animation-name: sectionout;
+                  
+                    /*for firefox*/
+                    -moz-animation-duration: 1s;
+                    -moz-animation-name: sectionout;
+                  
+                      /* for opera*/
+                    -o-animation-duration: 1s;
+                    -o-animation-name: sectionout;
+                  
+                      /* Standard syntax*/
+                    animation-duration: 1s;
+                    animation-name: sectionout;
+                  }
+                
+                
+                  @-webkit-keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 80%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+                  
+                  @-moz-keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 80%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+                  @-o-keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 100%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+                  @keyframes sectionout {
+                    from {
+                        margin-left: 100%;
+                        width: 80%;
+                    }
+                  
+                    to {
+                        margin-left: 0%;
+                        width: 80%;
+                    }
+                  }
+            }
+        }
+    }
+}
+.left72{
+    padding-left: 72px;
+}
+.mt34{
+    margin-top: 34px;
+}

Hyper-M_User_Portal/src/app/common/signup-modal/signup-modal.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignupModalComponent } from './signup-modal.component';
+
+describe('SignupModalComponent', () => {
+  let component: SignupModalComponent;
+  let fixture: ComponentFixture<SignupModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SignupModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SignupModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/signup-modal/signup-modal.component.ts

@@ -0,0 +1,215 @@
+import { Component, OnInit } from '@angular/core';
+import { LocalStorage } from './../../core/services/local_storage.service';
+import { CONFIG } from '../../config';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { HyperService } from './../../core/services/http.service';
+import { timer } from 'rxjs/observable/timer';
+import { take, map } from 'rxjs/operators';
+import { Observable } from "rxjs/Observable";
+import "rxjs/add/observable/timer";
+import "rxjs/add/operator/finally";
+import "rxjs/add/operator/takeUntil";
+import "rxjs/add/operator/map";
+import { Subscription } from "rxjs";
+import { TimerObservable } from "rxjs/observable/TimerObservable";
+import { Router } from "@angular/router";
+import { ViewChild, ElementRef } from '@angular/core';
+
+declare var $: any;
+
+@Component({
+    selector: 'app-signup-modal',
+    templateUrl: './signup-modal.component.html',
+    styleUrls: ['./signup-modal.component.scss']
+})
+export class SignupModalComponent implements OnInit {
+    @ViewChild('closeBtn') closeBtn: ElementRef;
+    otpform: FormGroup;
+    otp:any;
+    otp1: any;
+    otp2: any;
+    otp3: any;
+    otp4: any;
+    section: number;
+    user_mobile: any;
+    countdown: string;
+    loader_timing: any;
+    loader_delay: any;
+    otp_error: string = '';
+    otp_sucess: boolean = false;
+    resend:boolean=false;
+    resend_enable:boolean=false;
+    sub: Subscription;
+    stream$;
+    isTimerRunning: boolean = false;
+    constructor(private formBuilder: FormBuilder, private server: HyperService, private router: Router) {
+        console.log("here")
+    }
+
+    ngOnInit() {
+        // $('#fogotexampleModalCenter').modal({
+        //     backdrop: 'static',
+        //     keyboard: false
+        // })
+        this.formBuild();
+    }
+    
+    formBuild() {
+        this.otpform = this.formBuilder.group({
+            otp1: [null, Validators.compose([Validators.required])],
+            otp2: [null, Validators.compose([Validators.required])],
+            otp3: [null, Validators.compose([Validators.required])],
+            otp4: [null, Validators.compose([Validators.required])]   
+        });
+    }
+
+    accept() {
+        this.section = 1;
+        console.log(this.section)
+        this.signUpOtp();
+    }
+
+    reject() {
+        this.section=null;
+        $("#exampleModalCenter").modal('hide');
+        this.countdown = '';
+        this.otpform.markAsUntouched();
+        CONFIG.forgot_cont = false;
+        console.log(CONFIG.forgot_cont)
+        this.resend_enable=false;
+        this.otp_error = '';
+        this.otp1 = ''
+        this.otp2=""
+        this.otp3=""
+        this.otp4=""
+    }
+
+    modelClose(){
+        this.countdown=''
+        this.section =null;
+    }
+
+    resendOtp() {
+        this.resend=true;
+        this.resend_enable=false;
+        this.signUpOtp();
+    }
+
+    contactDealer(){
+        this.section =null;
+    }
+
+    signUpOtp() {
+        this.server.post("user/signup_otp", {
+            username: LocalStorage.getValue('signup_user').username
+        }).then((data) => {
+            console.log(data)
+            if (data.status == 200 && data.result.response == "success") {
+                let user_data = LocalStorage.getValue('signup_user');
+                console.log(user_data.mobile,user_data.mobile.substring(0, 2)),user_data.mobile.substring(7, 10)
+                this.user_mobile = user_data.mobile.substring(0, 3) + 'xxxx' + user_data.mobile.substring(7, 10);
+                this.TimeSet(data.result.data.otp_expiry)
+            } else if (data.result.response == "failed") {
+
+            }
+        })
+    }
+
+    TimeSet(Time) {
+        this.loader_timing = Time * 60;
+        this.loader_delay = this.loader_timing / 2;
+        console.log('Testarstars', this.loader_timing)
+        console.log('Testarstars', this.loader_delay)
+        const interval = 1000;
+        const duration = 10 * 6000 * Time;
+        this.stream$ = Observable.timer(0, interval)
+            .finally(() => this.onclose())
+            .takeUntil(Observable.timer(duration + interval))
+            .map(value => duration - value * interval);
+            this.sub = this.stream$.subscribe(value => this.formatMin(value));
+    }
+
+    onclose() {
+        this.countdown=''
+        this.resend_enable=true;
+    }
+
+    formatMin(s) {
+        let ms = s % 1000;
+        s = (s - ms) / 1000;
+        let secs = s % 60;
+
+        s = (s - secs) / 60;
+        let mins = s % 60;
+        let hrs = (s - mins) / 60;
+        if (hrs > 0) {
+            this.countdown = hrs + ':' + mins + ':' + secs;
+        } else {
+            this.countdown = mins + ':' + secs;
+        }
+    }
+    onInputChange(){
+        console.log("here1111")
+        $('input.password').on('keyup', function() {
+            if ($(this).val()) {
+                $(this).next().focus();
+            }
+        });
+    }
+    onSubmitOtp() {
+        if (this.otpform.valid) {
+            this.server.post("user/otp_validation", {
+                otp: (this.otp1.toString())+(this.otp2.toString())+(this.otp3.toString())+(this.otp4.toString()),
+                type: 'register',
+                username: LocalStorage.getValue('signup_user').username
+            }).then((data) => {
+                console.log(data)
+                if (data.status == 200 && data.result.response == "success") {
+                    console.log('OTP VERIFIED')
+                    this.otp_sucess = true;
+                    LocalStorage.setValue('token', data.result.access_token); 
+                    LocalStorage.setValue('forgot', 'register'); 
+                } else if (data.result.response == "failed") {
+                    console.log('OTP not VERIFIED'+data.result.message)
+                    this.otp_error =  data.result.message;
+                }
+            })
+        } else {
+            this.validateAllFormFields(this.otpform);
+        }
+    }
+
+    gotoSetPassword() {
+        this.router.navigateByUrl('setpassword');
+    }
+
+    validateAllFormFields(formGroup: FormGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
+            console.log(field);
+            const control = formGroup.get(field);
+            if (control instanceof FormControl) {
+                control.markAsTouched({
+                    onlySelf: true
+                });
+            } else if (control instanceof FormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+    onCancelOtp(){
+        this.section=null;
+        $("#exampleModalCenter").modal('hide');
+        this.countdown = '';
+        this.otpform.markAsUntouched();
+        CONFIG.forgot_cont = false;
+        console.log(CONFIG.forgot_cont)
+        this.sub.unsubscribe()
+        this.sub = this.stream$.subscribe(0 , this.formatMin(0));
+        this.resend_enable=false;
+        this.otp_error = '';
+        this.otp1 = ''
+        this.otp2=""
+        this.otp3=""
+        this.otp4=""
+    }
+}

Hyper-M_User_Portal/src/app/common/user-profile/user-profile.component.html

@@ -0,0 +1,122 @@
+<app-main-header></app-main-header>
+<div class="profile">
+    <div class="profile_bg">
+        <div class="container-fluid pro_head">
+            <div class="text-center">
+                <p>SET PROFILE</p>
+            </div>
+            <div class="row align-items-center">
+                <div class="col-sm-2 pro text-center">
+                    <div class="profile_img">
+                        <img class="pro_img" src="assets/img/user_vc.png" />
+                        <!-- <img class="pro_img" *ngIf="!croper_image.image" src="{{userData.profile_photo}}" />
+                        <img class="pro_img" *ngIf="croper_image.image" [src]='croper_image.image' />
+                        <img class="profile_cam" [ngClass]="is_edit ?'browser_disble':''" (click)="onFileBrowse()" src="assets/img/camera.png" /> -->
+                        <div style="display:none!important;">
+                            <input type="file" accept="image/*" (change)="onFileBrowserChange($event)" id='file_browser' #file_browser>
+                        </div>
+                        <div class='col-md-12 float pad-0 text-center' *ngIf="show_croper" style="display:none!important;">
+                            <img-cropper style="position:absolute" class="col-md-12 crop_popup" #cropper [image]="croper_image" [settings]="cropperSettings"
+                                (onCrop)="onImageCroped($event)"></img-cropper>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-9 nopadding">
+                    <h2>{{userData.fname}}</h2>
+                    <h4>{{userData.rolename}}</h4>
+                </div>
+                <div class="col-sm-1 edit text-center" (click)="edit()">
+                    <img src="assets/img/edit.png" />EDIT
+                </div>
+            </div>
+        </div>
+        <div class="container-fluid form_bg">
+            <form class="row form_2">
+                <!-- <div class="form-group col-sm-6 user_p disable">
+                    <input type="text" id="fname" class="form-control" [(ngModel)]="userData.fname" name="fname" autocomplete="off" required
+                        disabled>
+                    <label for="fname" class="control-label form-control-placeholder">First Name</label>
+                </div> -->
+                <!-- <div class="form-group col-sm-6 user_p disable">
+                    <input type="text" id="lname" class="form-control" [(ngModel)]="userData.lname" name="lname" autocomplete="off" required
+                        disabled>
+                    <label for="lname" class="control-label form-control-placeholder">Last Name</label>
+                </div> -->
+                <div class="form-group col-sm-6 phone disable">
+                    <input type="text" id="mobileno" class="form-control" [(ngModel)]="userData.mobileno" name="mobileno" autocomplete="off"
+                        required disabled>
+                    <label for="mobileno" class="control-label form-control-placeholder">Mobile Number</label>
+                </div>
+                <div class="form-group col-sm-6 email" [ngClass]="is_edit ?'disable':'over'">
+                    <input type="text" *ngIf="is_edit" id="email" class="form-control" [(ngModel)]="userData.emailid" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
+                        name="email" autocomplete="off" disabled >
+                    <input type="text" *ngIf="!is_edit" id="email" class="form-control" [(ngModel)]="userData.emailid" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
+                        name="email" autocomplete="off" required>
+                    <label for="email" class="control-label form-control-placeholder">Email Address</label>
+                    <div class="color_error shake" *ngIf="message_email!=''">
+                        <img src="assets/img/error.png" /> {{message_email}} </div>
+
+                </div>
+                <div class="form-group col-sm-6 dob" [ngClass]="is_edit ?'disable':'over'">
+                    <ng-datepicker *ngIf="!is_edit"  [(ngModel)]="dob" [options]="options" name="dob" class="form-control" ></ng-datepicker>
+                    <ng-datepicker *ngIf="is_edit" [(ngModel)]="dob" [options]="options"  name="dob" class="form-control" ></ng-datepicker>
+
+                    <label for="dob" class="control-label form-control-placeholder">Date of birth</label>
+                </div>
+                <div class="form-group col-sm-6 designation disable">
+                    <input type="text" id="salesconsultant" class="form-control" [(ngModel)]="userData.rolename" name="salesconsultant" autocomplete="salesconsultant"
+                        required disabled>
+                    <label for="salesconsultant" class="control-label form-control-placeholder">Designation</label>
+                </div>
+                <!-- <div class="form-group col-sm-6 date_oj" [ngClass]="is_edit ?'disable':'over'">
+                    <ng-datepicker *ngIf="is_edit" [(ngModel)]="doj" name="doj" class="form-control"></ng-datepicker>
+                    <ng-datepicker *ngIf="!is_edit" [(ngModel)]="doj" name="doj" class="form-control"></ng-datepicker>
+                    <label for="doj" class="control-label form-control-placeholder">Date of joining</label>
+                </div> -->
+                <!-- <div class="form-group col-sm-6 date_oj disable" >
+                        <ng-datepicker  [(ngModel)]="doj" name="doj" class="form-control" disabled></ng-datepicker>
+                        <label for="doj" class="control-label form-control-placeholder">Date of joining</label>
+                    </div>
+                <div class="form-group col-sm-6 dealer disable">
+                    <input type="text" id="abt" class="form-control" [(ngModel)]="dear_code" name="abt" autocomplete="off" required disabled>
+                    <label for="abt" class="control-label form-control-placeholder">Dealer</label>
+                </div>
+                <div class="form-group col-sm-6 location disable">
+                    <input type="text" id="zone" class="form-control" [(ngModel)]="userData.zone" name="zone" autocomplete="off" required disabled>
+                    <label for="zone" class="control-label form-control-placeholder">Zone</label>
+                </div>
+                <div class="form-group col-sm-6 location disable">
+                    <input type="text" id="state" class="form-control" [(ngModel)]="userData.state" name="state" autocomplete="off" required
+                        disabled>
+                    <label for="state" class="control-label form-control-placeholder">State</label>
+                </div>
+                <div class="form-group col-sm-6 location disable">
+                    <input type="text" id="city" class="form-control" [(ngModel)]="userData.city" name="city" autocomplete="off" required
+                        disabled>
+                    <label for="city" class="control-label form-control-placeholder">City</label>
+                </div>
+                <div class="col-sm-6 box_check">
+                    <div class="v-center">
+                        <div class="check mx-auto d-block" [ngClass]="{'disable':is_edit}">
+                            <input type="checkbox" *ngIf="!is_edit" id="3dCheck" name="is_married" (change)="marriedCheck()" [checked]="userData.is_married==1"
+                            />
+                            <input type="checkbox" *ngIf="is_edit" id="3dCheck" name="is_married" (change)="marriedCheck()" [checked]="userData.is_married==1"
+                                disabled />
+                            <label for="3dCheck">Are you Married?</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group col-sm-6 wedding" *ngIf="userData.is_married==1" [ngClass]="is_edit ?'disable':'over'">
+                    <ng-datepicker *ngIf="is_edit" [(ngModel)]="marriage_date" [options]="options" name="marriage_date" class="form-control"></ng-datepicker>
+                    <ng-datepicker *ngIf="!is_edit" [(ngModel)]="marriage_date" [options]="options" name="marriage_date" class="form-control"></ng-datepicker>
+                    <label for="marriage_date" class="control-label form-control-placeholder">Wedding Anniversary Date</label>
+                </div> -->
+                <div class="col-sm-12 text-center ">
+                    <button type="submit" class="btn primary fixed" (click)="resetProfile()">Cancel</button>
+                    <button type="submit" *ngIf="!is_edit" class="btn primary fixed" (click)="updateUserProfile()">Submit</button>
+                    <button type="submit" *ngIf="is_edit" class="btn primary fixed" disabled>Submit</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

Hyper-M_User_Portal/src/app/common/user-profile/user-profile.component.scss

@@ -0,0 +1,147 @@
+.profile{
+    width: 100%;
+    height:calc(100% - 85px);
+    // background-image: url("assets/img/profile_bg.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: relative;
+    background-color: #f7f7f7;
+    overflow: hidden;
+    overflow-y: scroll;
+    .profile_bg{
+        width: 950px;
+        margin:auto;
+        position: absolute;
+        top:40px;
+        left:0;
+        right:0;
+        background-color: #fff;
+        height: calc(100% - 40px);
+        .pro_head {
+            background-color: #28a8e0 ;
+            padding: 10px;
+            color:#fff;
+            .pro{
+                .profile_img{
+                    width: 100px;
+                    height: 100px;
+                    margin: auto;
+                    .pro_img{
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 50%;
+                        // border: 1px solid #fff;
+                        box-shadow: 0 0 6px 6px #333;
+                    }
+                }
+
+            }
+            .edit{
+                cursor: pointer;
+                img{
+                    width: 30px;
+                }
+            }
+            h2{
+                font-size: 24px;
+            }
+            h4{
+                font-size: 20px;
+            }
+            p{
+                margin: 0 !important;
+            }
+        }
+        .form_bg{
+            background-color: #fff;
+            padding: 30px;
+        }
+        .box_check{
+            height: 70px;
+            margin-bottom: 30px
+        }
+        .view_eye, .hide_eye{
+            top:40%;
+        }
+        .view_eye img, .hide_eye img{
+            width: 20px;
+        }
+        .view_eye{
+            right: 50px;
+        }
+        .form_2 .form-group{
+            max-width: 375px !important;
+            margin: 0 auto 30px;
+            .form-control{
+                width:100%;
+            }
+        }
+        .pull-left{
+            float: left;
+            margin: 0 20px 30px !important;
+        }
+        .disable .form-control, .disable label{
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .disable .form-control-placeholder{
+            font-size: 75%;
+            -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+            opacity: 1;
+            top: 25px;
+            opacity: 0.5;
+        }
+        .over .form-control-placeholder{
+            font-size: 75%;
+            -webkit-transform: translate3d(0, -100%, 0);
+            transform: translate3d(0, -100%, 0);
+            opacity: 1;
+            top: 25px;
+            opacity: 1;
+        }
+
+    }
+}
+.profile_cam {
+    position: absolute;
+    width: 40px !important;
+    height: 40px;
+    bottom: 0;
+    right: 25px;
+    cursor: pointer;
+  }
+  .browser_disble{
+    display: none;
+}
+
+  .input-group-btn{
+      img{
+        width:25px;
+      }
+  }
+  .form-group.disable{
+    opacity: 0.4;
+  }
+  .color_error{
+    top: 72px;
+  }
+
+// .profile:before{
+//     position: absolute;
+//     width:100%;
+//     content:"";
+//     height:100%;
+//     background-color: rgba(255, 255, 255, 0.5);
+//     top:0;
+//     left:0;
+// }
+
+
+.col-sm-2.pro.text-center {
+    padding-right: 0px;
+    /* padding-left: 0px; */
+}
+.nopadding{
+    padding:0px;
+}

Hyper-M_User_Portal/src/app/common/user-profile/user-profile.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserProfileComponent } from './user-profile.component';
+
+describe('UserProfileComponent', () => {
+  let component: UserProfileComponent;
+  let fixture: ComponentFixture<UserProfileComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserProfileComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/common/user-profile/user-profile.component.ts

@@ -0,0 +1,224 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { LocalStorage } from '../../core/services/local_storage.service';
+import { HyperService } from '../../core/services/http.service';
+import { ImageCropperComponent, CropperSettings } from 'ng2-img-cropper';
+import { LandingComponent } from '../landing/landing.component';
+import { Router } from "@angular/router";
+import { INgxMyDpOptions, IMyDateModel } from 'ngx-mydatepicker';
+import { DatepickerOptions } from 'ng2-datepicker';
+import {NgbModule, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
+import * as enLocale from 'date-fns/locale/en';
+import * as frLocale from 'date-fns/locale/fr';
+import * as moment from 'moment';
+
+declare var $: any;
+const now = new Date();
+@Component({
+    selector: 'app-user-profile',
+    templateUrl: './user-profile.component.html',
+    styleUrls: ['./user-profile.component.scss']
+})
+export class UserProfileComponent implements OnInit {
+    userData: any;
+    profile_data: any = {};
+    browser_element: any;
+    show_croper: boolean = false;
+    croper_image: any = {};
+    cropperSettings: any;
+    image_croped_cords: string = "";
+    calendar_option_to: any = {};
+    error: string = '';
+    start_date: string = '';
+    is_edit: boolean = true;
+    doj: any;
+    dob: any;
+    marriage_date: any;
+    message_email: string = ""
+    message_dob: string = ""
+    message_doj: string = ""
+    dear_code: any;
+
+    options: DatepickerOptions = {
+        minYear: 1900,
+        maxYear: 2030,
+        displayFormat: 'DD-MMM-YYYY',
+        barTitleFormat: 'MMMM YYYY',
+        dayNamesFormat: 'dd',
+        firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
+        locale: enLocale,
+        minDate: new Date("Sun Dec 31 1899 17:58:53 GMT+0530 (India Standard Time)"), // Minimal selectable date
+        maxDate: new Date(Date.now()),  // Maximal selectable date
+        barTitleIfEmpty: 'Click to select a date',
+        
+        
+    };
+    @ViewChild('cropper', undefined) cropper: ImageCropperComponent;
+    constructor(private server: HyperService, private router: Router) {
+        this.cropperSettings = new CropperSettings();
+        var today = new Date()
+        console.log(today)
+    }
+
+    ngOnInit() {
+        this.userData = LocalStorage.getValue('user_data');
+        this.dear_code = this.userData.dealer.dealer_code + "-" + this.userData.dealer.dealer_name
+        console.log(LocalStorage.getValue('user_data').dob)
+        // console.log(moment(LocalStorage.getValue('user_data').dob,'YYYY-MM-DD').format("DD-MM-YYYY"))
+        let date =moment(LocalStorage.getValue('user_data').dob,'YYYY-MM-DD').format("DD-MM-YYYY")
+        this.dob = (LocalStorage.getValue('user_data').dob == '0000-00-00' ? new Date() : LocalStorage.getValue('user_data').dob)
+        this.doj = (LocalStorage.getValue('user_data').doj == '0000-00-00' ? new Date() : LocalStorage.getValue('user_data').doj)
+        this.marriage_date = (LocalStorage.getValue('user_data').marriage_date == '0000-00-00' ? new Date() : LocalStorage.getValue('user_data').marriage_date)
+       
+    }
+    open(content) {
+        
+      }
+    
+      private getDismissReason(reason: any): string {
+        if (reason === ModalDismissReasons.ESC) {
+          return 'by pressing ESC';
+        } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+          return 'by clicking on a backdrop';
+        } else {
+          return  `with: ${reason}`;
+        }
+      }
+    edit() {
+        this.is_edit = !this.is_edit;  
+        console.log(this.is_edit)
+
+    }
+
+    onDateChanged(event: IMyDateModel): void {
+        // date selected
+    }
+
+    marriedCheck() {
+        if (this.userData.is_married == 1) {
+            this.userData.is_married = 0
+        } else if (this.userData.is_married == 0) {
+            this.userData.is_married = 1
+        }
+        console.log(this.userData.is_married)
+    }
+
+    clearValidateMessages() {
+        this.message_email = "";
+        this.message_dob = "";
+        this.message_doj = "";
+    }
+
+    isLoginValidated() {
+        let isValid = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/.test(this.userData.emailid); 
+        console.log(isValid)
+        this.clearValidateMessages();
+        if(this.userData.emailid == ''){
+            this.message_email =   'Email should not be empty';
+        }else if(!isValid){
+            this.message_email =   'Email should be valid';
+        }else{
+            this.message_email = ''
+        }
+        
+        this.message_dob = (this.userData.dob == '') ? 'Select DOB' : '';
+        this.message_doj = (this.userData.doj == '') ? 'Select DOJ' : '';
+        return (this.message_email == '' && this.message_dob == '' && this.message_doj == '') ? true : false;
+    }
+
+    updateUserProfile() {
+        this.clearValidateMessages();
+        console.log(this.isLoginValidated())
+        if (this.isLoginValidated()) {
+            console.log(moment(this.dob).format("YYYY-MM-DD"))
+            
+            if (confirm("Are you sure to update your profile details ?")) {
+                let send_data: any = {
+                    dob: (this.dob == '' ? '0000-00-00' : moment(this.dob).format("YYYY-MM-DD")),
+                    email: this.userData.emailid,
+                    is_married: this.userData.is_married,
+                    marriage_date: (this.marriage_date == '' ? '0000-00-00' : moment(this.marriage_date).format("YYYY-MM-DD")),
+                    doj: (this.doj == '' ? '0000-00-00' : moment(this.doj).format("YYYY-MM-DD")),
+                }
+                console.log('Send DataImg', send_data);
+                if (this.profile_data.profile_image != undefined && this.profile_data.profile_image != null && this.profile_data.profile_image != '') {
+                    send_data.file = this.profile_data.profile_image;
+                    console.log('Send DataImg', send_data.file);
+                }
+                this.server.fileUpload("user/profile", send_data, true, (data) => {
+                    setTimeout(() => {
+                        this.getUserDetails();
+                    }, 1000);
+                    LocalStorage.setValue('loggedIn', true);
+                })
+            }
+        }
+    }
+
+    getUserProfile() {
+        this.server.get("user/profile").then((data) => {
+            if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                this.userData = data.result.data;
+                LocalStorage.setValue('userData', this.userData)
+            }
+            else if (data.result.status == 401 && data.result.response == 'failed') {
+                this.router.navigateByUrl('');
+            }
+            else {
+                alert("Oops something happened!");
+            }
+        })
+
+    }
+
+    resetProfile() {
+        // this.getUserProfile()
+        this.router.navigateByUrl('/dashboard');
+        // setTimeout(() => {
+        //     this.userData = LocalStorage.getValue('user_data'); 
+        // }, 70   );
+    }
+
+    getUserDetails() {
+        console.log('UserProfileCalled')
+        this.userData = []
+        this.server.get("user/profile")
+            .then((data) => {
+                if (data.status == 200 && data.result.response == "success") {
+                    this.userData = data.result.data
+                    LocalStorage.setValue('user_data', this.userData);
+                    this.router.navigateByUrl('dashboard');
+
+                } else if (data.result.response == "failed") {
+
+                }
+
+            })
+    }
+
+    onFileBrowse() {
+        console.log("Profile")
+        document.getElementById('file_browser').click();
+    }
+
+    onFileBrowserChange(event) {
+        this.browser_element = event.target;
+        this.profile_data.profile_image = event.target.files[0];
+        console.log(event.target.files[0])
+        let image: any = new Image();
+        let reader = new FileReader();
+        let that = this;
+        this.show_croper = true;
+        reader.onload = (e) => {
+            let current_file: any = e.target;
+            image.src = current_file.result;
+            that.cropper.setImage(image);
+        }
+        reader.readAsDataURL(this.profile_data.profile_image);
+
+    }
+
+
+    private onImageCroped(data) {
+        this.image_croped_cords = data.left + "|" + data.top + "|" + data.width + "|" + data.height;
+    }
+}

Hyper-M_User_Portal/src/app/config.ts

@@ -0,0 +1,70 @@
+import RtmClient from 'assets/js/rtm-client.js';
+export class CONFIG {
+    // For Developemet version
+        public static domainUrl: string = "https://hyper-m.cygnusa.in/";
+
+    public static _url: string = CONFIG.domainUrl+"_api/web/en_us/";
+
+    //Common variables//
+    public static _loggedIn: boolean;
+    public static _user_mobile: any='';
+    public static _active_url:any='';
+    public static forgot_cont:boolean = false;
+    public static forgot_user:any;
+    public static forgot_mobile_no:any;
+    public static configyearval:any='';
+    public static configmonthval:any='';
+    public static configtempval:any='';
+
+    public static selecteddsename:any='';
+    public static selecteddsecity:any='';
+    public static page_change:boolean;
+    public static am_page_change:boolean;
+    
+    // messages
+    public static enter_new_password: string = "Please fill the new password";
+    public static image360Sources:any=[];
+    
+    public  static rtcobj = {
+      client: null,
+      joined: false,
+      published: false,
+      localStream: null,
+      screenStream:null,
+      remoteStreams: [],
+      params: {},
+      role : 'host',
+      isPresentSomeOne : false,
+      isScreenshare : false
+    };
+    public  static share_enable = {
+      "canPresent": 6,
+      "date": '',
+      "id": 'All',
+      "isRequesPresent": false,
+      "isRequesProfile": false,
+      "isRequest": false,
+      "isResponse": true,
+      "isResponsePresent": true,
+      "isResponseProfile": false,
+      "message": "",
+      "name": '',
+      "profile": ''
+    }
+    public  static share_disable = {
+      "canPresent": 7,
+      "date": '',
+      "id": 'All',
+      "isRequesPresent": false,
+      "isRequesProfile": false,
+      "isRequest": false,
+      "isResponse": true,
+      "isResponsePresent": true,
+      "isResponseProfile": false,
+      "message": "",
+      "name": '',
+      "profile": ''
+    }
+    public static rtm = new RtmClient();
+    constructor() { }
+}

Hyper-M_User_Portal/src/app/core/services/auth-guard.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, CanActivateChild, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { LocalStorage } from './local_storage.service';
+import { CONFIG } from '../../config';
+@Injectable()
+export class AuthGuardService implements CanActivate, CanActivateChild {
+
+    constructor(private router: Router) {
+    }
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        let url: string = state.url; 
+       // console.log('url',url)
+        CONFIG._active_url = url;
+        if (LocalStorage.getValue('loggedIn')) {
+            return true;
+        }
+        this.router.navigate(['/']);
+        return false;
+    }
+
+    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        // let loggedInUser = this.authService.getLoggedInUser();
+        if (LocalStorage.getValue('loggedIn').role === 'ADMIN') {
+            return true;
+        } else {
+            return false;
+        }
+    }
+} 

Hyper-M_User_Portal/src/app/core/services/bar_chart.ts

@@ -0,0 +1,50 @@
+export class BarChart {
+
+    public barChartOptions: any = {
+        scaleShowVerticalLines: false,
+        responsive: true,
+        scaleShowValues: true,
+        tooltips: false,
+        scales: {
+            yAxes: [{
+                ticks: {
+                    max: 15,
+                }
+            }]
+        },
+        animation: {
+            onComplete: function() {
+                var chartInstance = this.chart,
+                    ctx = chartInstance.ctx;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'bottom';
+                this.data.datasets.forEach(function(dataset, i) {
+                    var meta = chartInstance.controller.getDatasetMeta(i);
+                    meta.data.forEach(function(bar, index) {
+                        var data = dataset.data[index];
+                        ctx.fillText(data, bar._model.x, bar._model.y - 5);
+                    });
+                });
+            }
+        }
+    };
+  
+    ////BAR CHART PROPERTIES???//////
+  
+    public barChartLabels: string[] = ['BASE', 'BRONZE', 'SILVER', 'GOLD']; //X Asix Label
+    public barChartType: string = 'bar'; //Chart Type
+    public barChartLegend: boolean = false; //Show Legend 
+    
+    
+    public chartClicked(e: any): void {
+        console.log(e);
+    }
+  
+    public chartHovered(e: any): void {
+        console.log(e);
+    } 
+    
+    constructor (public data:any){
+    console.log(data)
+      }
+  }

Hyper-M_User_Portal/src/app/core/services/http.service.ts

@@ -0,0 +1,267 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/Rx';
+import { LocalStorage } from "./local_storage.service";
+import { CONFIG } from '../../../app/config';
+import { Http, Response, RequestOptions, Headers, Request, RequestMethod } from '@angular/http';
+import { Router } from "@angular/router";
+
+@Injectable()
+
+export class HyperService {
+    private BASE_URL: string = '';
+    private local_jwt: any = {}
+    private header_token: string;
+    private user_role: string;
+
+    constructor(public http: Http, public router: Router) {
+        this.http = http;
+    }
+
+    //GET METHOD//
+    get(endPoint: string) {
+        let headers: Headers = new Headers();
+        let requestoptions: RequestOptions;
+        headers.append("Cache-Control", 'no-cache');
+        headers.append("Pragma", 'no-cache');
+        headers.append("Content-Type", 'application/json');
+        headers.append("Authorization", 'Bearer ' + LocalStorage.getValue('token'));
+        headers.append('Access-Control-Allow-Origin', '*');
+        requestoptions = new RequestOptions({
+            method: RequestMethod.Get,
+            url: CONFIG._url + endPoint,
+            headers: headers
+        })
+        return this.http.request(new Request(requestoptions))
+            .toPromise()
+            .then((res) => {
+                return {
+                    status: res.status,
+                    result: res.json()
+                }
+            }, (err) => {
+                if (err.status == 401) {
+                    // let msg = err.json();
+                    // alert(msg.result.message)
+                    return {
+                        status: err.status,
+                        result: err.json()
+                    }
+                } else {
+                    return {
+                        status: err.status,
+                        result: err.json()
+                    };
+                }
+
+            })
+    }
+     //GET METHOD//
+     getBrochure(endPoint: string) {
+        let headers: Headers = new Headers();
+        let requestoptions: RequestOptions;
+        headers.append("Cache-Control", 'no-cache');
+        headers.append("Pragma", 'no-cache');
+        headers.append("Content-Type", 'application/json');
+        headers.append("Authorization", 'Bearer ' + LocalStorage.getValue('brochure_token'));
+        headers.append('Access-Control-Allow-Origin', '*');
+        requestoptions = new RequestOptions({
+            method: RequestMethod.Get,
+            url: CONFIG._url + endPoint,
+            headers: headers
+        })
+        return this.http.request(new Request(requestoptions))
+            .toPromise()
+            .then((res) => {
+                return {
+                    status: res.status,
+                    result: res.json()
+                }
+            }, (err) => {
+                if (err.status == 401) {
+                    // let msg = err.json();
+                    // alert(msg.result.message)
+                    return {
+                        status: err.status,
+                        result: err.json()
+                    }
+                } else {
+                    return {
+                        status: err.status,
+                        result: err.json()
+                    };
+                }
+
+            })
+    }
+
+    //POST METHOD//
+    post(endPoint: string, data: any, isJSON: boolean = true): any {
+        let headers: Headers = new Headers();
+        let requestoptions: RequestOptions;
+        let theBody: any;
+        if (isJSON) {
+            theBody = JSON.stringify(data);
+        } else {
+            theBody = data
+        }
+        headers.append("Content-Type", 'application/json');
+        headers.append("Authorization", 'Bearer ' + LocalStorage.getValue('token'));
+        headers.append('Access-Control-Allow-Origin', '*');
+        requestoptions = new RequestOptions({
+            method: RequestMethod.Post,
+            url: CONFIG._url + endPoint,
+            headers: headers,
+            body: theBody
+        })
+        return this.http.request(new Request(requestoptions))
+            .toPromise()
+            .then((res) => {
+                return {
+                    status: res.status,
+                    result: res.json()
+                }
+            }, (err) => {
+                if (err.status == 401) {
+                    return {
+                        status: err.status,
+                        result: err.json()
+                    };
+                } else {
+                    return {
+                        status: err.status,
+                        result: err.json()
+                    };
+                }
+
+            })
+    }
+
+    fileUpload(endPoint: string, data, tokenRequired, finalCallBack) {
+        var xhr;
+        if (XMLHttpRequest) {
+            xhr = new XMLHttpRequest();
+        }
+
+        var formData = new FormData();
+        if (data != undefined && data != '') {
+            for (var key in data) {
+                formData.append(key, data[key]);
+            }
+
+        }
+        xhr.upload.addEventListener("progress", function (e) {
+            if (e.lengthComputable) {
+                let percentage = Math.round((e.loaded * 100) / e.total);
+                // console.log(percentage);
+                //progressCallBack(percentage);
+            }
+        }, false);
+        xhr.upload.addEventListener("loadstart", function (e) {
+        }, false);
+        xhr.upload.addEventListener("load", function (e) {
+        }, false);
+        xhr.upload.addEventListener('error', function (e) {
+        }, false);
+        xhr.onreadystatechange = function (e) {
+            setTimeout(() => {
+                if (finalCallBack != undefined) finalCallBack(xhr.responseText);
+            }, 2000);
+        };
+        xhr.open('post', CONFIG._url + endPoint, true);
+        if (tokenRequired) xhr.setRequestHeader("Authorization", 'Bearer ' + LocalStorage.getValue('token'));
+        xhr.send(formData);
+    }
+
+
+    //DELETE METHOD//
+    delete(endPoint: string, data: any = undefined, isJSON: boolean = true): any {
+        let headers: Headers = new Headers();
+        let requestoptions: RequestOptions;
+        let theBody = {};
+        if (data != undefined) {
+            theBody = (isJSON) ? JSON.stringify(data) : data;
+        }
+        headers.append("Content-Type", 'application/json');
+        headers.append("Authorization", 'Bearer ' + LocalStorage.getValue('token'));
+        headers.append('Access-Control-Allow-Origin', '*');
+        requestoptions = new RequestOptions({
+            method: RequestMethod.Delete,
+            url: CONFIG._url + endPoint,
+            headers: headers,
+            body: theBody
+        })
+        return this.http.request(new Request(requestoptions))
+            .toPromise()
+            .then((res) => {
+                return {
+                    status: res.status,
+                    result: res.json()
+                }
+            }, (err) => {
+                if (err.status == 401) {
+                    this.logOut();
+                } else {
+                    return {
+                        status: err.status,
+                        result: err.json()
+                    };
+                }
+
+            })
+    }
+
+    //EDIT METHOD//
+    edit(endPoint: string, data: any, isJSON: boolean = true) {
+        let headers: Headers = new Headers();
+        let requestoptions: RequestOptions;
+        let theBody: any;
+        if (isJSON) {
+            theBody = JSON.stringify(data);
+        } else {
+            theBody = data
+        }
+        headers.append("Content-Type", 'application/json');
+        headers.append("Authorization", 'Bearer ' + LocalStorage.getValue('token'));
+        headers.append('Access-Control-Allow-Origin', '*');
+        requestoptions = new RequestOptions({
+            method: RequestMethod.Post,
+            url: CONFIG._url + endPoint,
+            headers: headers,
+            body: theBody
+        })
+
+        return this.http.request(new Request(requestoptions))
+            .toPromise()
+            .then((res) => {
+                return {
+                    status: res.status,
+                    result: res.json()
+                }
+            }, (err) => {
+                if (err.status == 401) {
+                    this.logOut();
+                } else {
+                    return {
+                        status: err.status,
+                        result: err.json()
+                    };
+                }
+
+            })
+    }
+
+    // HTTP ERROR HANDLE //
+    handleError(error) {
+        return Observable.throw(error.json().error || 'Server error');
+    }
+
+    //CLEAR DATA //
+    logOut() {
+        LocalStorage.removeValue('userData');
+        LocalStorage.createJWT();
+        this.router.navigate(['']);
+        //CONFIG.GET_APP.getRootNav().setRoot(SignIn);
+    }
+
+}

Hyper-M_User_Portal/src/app/core/services/local_storage.service.ts

@@ -0,0 +1,68 @@
+export class LocalStorage{
+	
+	//USED SESSION  STORAGE
+
+	private static jwtString:string='';
+	private static local_json=null;
+
+	static isSetJWT(){
+		var val = sessionStorage.getItem('jwt');
+		if(val==null || val==undefined || val=='') return false;
+		return true;
+	}
+
+	static createJWT(){
+		this.local_json = {};
+		this.saveJWT();
+	}
+
+	static loadJWT(){
+		this.jwtString = sessionStorage.getItem('jwt');
+		try{
+			this.local_json = JSON.parse(this.jwtString);
+		}catch(e){
+			console.log('jwt parse error ' + e.message);
+		}
+	}
+
+	static saveJWT(){
+		sessionStorage.setItem('jwt', JSON.stringify(this.local_json));
+	}
+
+	static getJSONValue(itm:string){
+		if( this.local_json!=undefined && this.local_json != null ){
+			return (this.local_json[itm]!=undefined) ? JSON.parse(this.local_json[itm]) : null;
+		}else{
+			console.log('LocalStorage.getValue('+itm+') is called when local_json is empty');
+			return null;
+		}
+	}
+
+	static getValue(itm:string){
+		if( this.local_json != null ){
+			return this.local_json[itm];
+		}else{
+			console.log('LocalStorage.getValue('+itm+') is called when local_json is empty');
+			return null;
+		}
+	}
+
+	static setValue(itm:string, val){
+		if( this.local_json != null ) {
+			this.local_json[itm] = val;	
+			this.saveJWT();
+		}else{
+			console.log('LocalStorage.setValue('+itm+','+val+') is called when local_json is empty');
+		};
+	}
+
+	static removeValue(itm:string){
+		if( this.local_json != null ) {
+			delete this.local_json[itm] ;	
+			this.saveJWT();
+		}else{
+			console.log('LocalStorage.removeValue('+itm+') is called when local_json is empty');
+		};
+	}	
+
+}

Hyper-M_User_Portal/src/app/core/services/toaster.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { Toast } from 'app/trainersite/toaster/toast.interface';
+
+@Injectable()
+export class ToasterService {
+  subject: BehaviorSubject<Toast>;
+  toast$;
+
+  constructor() {
+    this.subject = new BehaviorSubject<Toast>(null);
+    this.toast$ = this.subject.asObservable()
+      .pipe(filter(toast => toast !== null));
+  }
+
+  show(body?: string, delay?: number) {
+    this.subject.next({body, delay });
+  }
+}

Hyper-M_User_Portal/src/app/filter.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FilterPipe } from './filter.pipe';
+
+describe('FilterPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/filter.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter',
+  pure : false
+})
+export class FilterPipe implements PipeTransform {
+  result:any = [];
+  transform(items: any[], filter: any): any {
+    if (!items || !filter) {
+        return items;
+    }
+    // filter items array, items which match and return true will be
+    // kept, false will be filtered out
+    this.result = items.filter(item => item.smpin.indexOf(filter) !== -1)
+    if(this.result.length != 0){
+      return this.result;
+    }else{
+      return items.filter(item => item.name.indexOf(filter.toUpperCase()) !== -1);
+    }
+  }
+
+}

Hyper-M_User_Portal/src/app/footer/footer.component.html

@@ -0,0 +1,21 @@
+<div class="footer">
+  <div class="container">
+    <ul class="footer_class">
+      <li>
+        <a routerLink="/launch-threesixty" routerLinkActive="active">360&#176; View </a>
+      </li>
+      <li>
+        <a routerLink="/launch-sales" routerLinkActive="active">5 Step Demo</a>
+      </li>
+      <li>
+        <a routerLink="/launch-personalise" routerLinkActive="active">Personalization</a>
+      </li>
+      <li>
+        <a routerLink="/launch-comparison" routerLinkActive="active">Comparisons</a>
+      </li>
+      <li>
+        <a routerLink="/product-vidoes" routerLinkActive="active">Product Videos</a>
+      </li>
+    </ul>
+  </div>
+</div>

Hyper-M_User_Portal/src/app/footer/footer.component.scss

@@ -0,0 +1,41 @@
+
+/*next step*/
+
+.footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #393939;
+      color: white;
+      z-index: 99999;
+   
+ }
+ 
+ .footer_class{
+     list-style-type: none;
+     display: inline-flex;
+     margin: 12px 0px;
+     width: 100%;
+     float: left;
+ }
+ .footer_class li{
+    // padding: 0px 90px;
+     border-right: 1px solid #fff;
+     font-size: 14px;
+     width: 25%;
+     text-align: center;
+     float: left;
+     
+ }
+ .footer_class li a{
+     text-decoration:none;
+     color:#fff;
+     cursor: pointer !important;
+ }
+ .footer_class li:last-child{
+    border-right: none !important;
+}
+.active {
+    color: #37b1ec !important;
+}

Hyper-M_User_Portal/src/app/footer/footer.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/footer/footer.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from "@angular/router";
+ 
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor(private router:Router ) { }
+
+  ngOnInit() {
+  }
+ 
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/custom-threesixty.ts

@@ -0,0 +1,78 @@
+// export interface IImage {
+//     url: string | null;
+//     href?: string;
+//     clickAction?: Function;
+//     caption?: string;
+//     title?: string;
+//     backgroundSize?: string;
+//     backgroundPosition?: string;
+//     backgroundRepeat?: string;
+// }
+// import { Http, Response, RequestOptions, Headers, Request, RequestMethod } from '@angular/http';
+import { CONFIG } from '../../app/config';
+declare var $:any;
+
+export class ImageClass{
+    constructor( ){
+        // this.http = http;
+        
+    }
+    loaded(){
+        $.getScript("assets/js/jquery.threesixty.js")
+        var  hotspotList=[];
+        setTimeout(() => {
+        var $threeSixty = $('.threesixty');
+        var wid = 806/100;
+		var hei = 520/100;
+		var img_arr = [];
+       
+        var newx,newY,contentTitle,contentDescription,contentFile;
+        for(var i=0;i<CONFIG.image360Sources.length;i++){
+            img_arr.push(CONFIG.image360Sources[i].image_url)
+            hotspotList[i] = []
+            for(var j=0;j<CONFIG.image360Sources[i].hotspot.length;j++){
+                
+                // hotspotList[i].push(CONFIG.image360Sources[i].hotspot[j].point_arr)
+                newx = wid*((CONFIG.image360Sources[i].hotspot[j].point_arr.x / 1024)*100);
+                newY = hei*((CONFIG.image360Sources[i].hotspot[j].point_arr.y / 660)*100);
+                var obj={
+                    x:newx,y:newY,contentTitle:CONFIG.image360Sources[i].hotspot[j].title,contentDescription:CONFIG.image360Sources[i].hotspot[j].description,contentFile:CONFIG.image360Sources[i].hotspot[j].thumb_image_url
+                };
+                hotspotList[i].push(obj)
+            }
+        }
+        
+        $threeSixty.threeSixty({
+            dragDirection: 'horizontal',
+            useKeys: true,
+            draggable: false,
+            imagearray: img_arr,
+            hotspotArray:hotspotList,
+            speed:100
+        });
+         $('.next').click(function () {
+            $threeSixty.nextFrame();
+        });
+      
+        $('.prev').click(function () {
+            $threeSixty.prevFrame();
+        });
+       
+        $threeSixty.on('down', function () {
+            $('.ui, h1, h2, .label, .examples').stop().animate({ opacity: 0 }, 300);
+        });
+
+        $threeSixty.on('up', function () {
+            
+            $('.ui, h1, h2, .label, .examples').stop().animate({ opacity: 1 }, 500);
+        });
+        
+            $('.threesixty').on('move', function(){
+            
+            })
+   
+        
+    }, 500);
+ 
+}
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-enquiry/lauch-enquiry.component.html

@@ -0,0 +1,120 @@
+<app-main-header></app-main-header>
+<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
+<div class="col-md-12">
+  <div class="row">
+    <div class="col-md-3">
+      <a  (click)='goBack()' class="wid3_font">
+        <img src="assets/images/back.png" class="wid3"> <span class="span_img">Enquiry Form</span>
+      </a>
+    </div>
+   </div>
+   <div class="left_card" *ngIf="loader">
+    <div class="inner_load"  >
+      <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+        <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      <p>Just a moment...</p>
+    </div>
+  </div>
+  <div class="row" *ngIf="!loader">
+    <div class="col-md-12 mt_50">
+      <div class="col-md-6 float-left">
+      <h4 class="text-center mg_10 head_text">Select Model</h4>
+
+      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
+          <div class="carousel-inner">
+             <div class="carousel-item h-100" [ngClass]="{active:activeBanner===i}" data-id="{{i}}" *ngFor="let image of imageSources;let i=index;">
+              <img class="d-block" src={{image.model_brochure_image_url}} alt="Second slide">
+              <p style="display: none;">{{i+1}}</p>
+            </div>
+
+          </div>
+          <a class="left carousel-control" href="#carouselExampleControls" role="button" data-slide="prev" (click)="setIndex()">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">Previous</span>
+          </a>
+          <a class="right carousel-control" href="#carouselExampleControls" role="button" data-slide="next" (click)="setIndex()">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">Next</span>
+          </a>
+        </div>
+        <div class="col-md-12">
+            <label for="sel1" class="font_color"> Model</label>
+              <select class="form-control" id="sel1" (change)="selectVarient($event.target.value)"  [(ngModel)]="varient_id">
+              <option *ngFor="let item of varient_list;let i=index" value={{item.id}}> {{item.title}}</option>
+              </select>
+              <!-- <p *ngIf="varient_list!=undefined">{{varient_list[0].title}}</p> -->
+          </div>
+      </div>
+      <div class="col-md-1 float-left">
+        <div class="line"></div>
+      </div>
+      <div class="col-md-5 float-right">
+        <div  [formGroup]="lform">
+          <div class="form-group">
+          <label for="name" class="font_form control-label  italic label_style form-control-placeholder">Customer Name*</label>
+          <input id="name" class="font_form form-control" [(ngModel)]="contact.customer_name" formControlName="name"
+          autocomplete="off" placeholder="Enter the full name">
+          <div class="color_error shake" *ngIf="!lform.controls['name'].valid && lform.controls['name'].touched">
+            <a class="text-left shake">
+              <img src="assets/img/error.png" />Field should not be empty </a>
+          </div>
+          </div>
+
+          <div class="form-group">
+            <label for="phone" class="font_form control-label  italic label_style form-control-placeholder">Phone*</label>
+            <input type="text" id="phone" placeholder="XXX XXX XXX" name="phone" [(ngModel)]="contact.customer_phone"
+            formControlName="phone" onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"
+              class="input_box form-control"   autocomplete="off"  maxlength="10" required>
+              <div class="color_error shake wid_error"  *ngIf="!lform.controls['phone'].valid && lform.controls['phone'].touched ">
+                <a class="text-left shake">
+                  <img src="assets/img/error.png" />Field should not be empty </a>
+              </div>
+          </div>
+          <div class="form-group">
+             <label for="location" class=" font_form  control-label  italic label_style form-control-placeholder">Email ID*</label>
+              <input type="email" class="" id="location" class="form-control" [(ngModel)]="contact.customer_email" formControlName="location"
+                pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" autocomplete="off" placeholder="Enter the valid Email ID">
+              <div *ngIf="lform.controls['location'].errors && (lform.controls['location'].dirty || lform.controls['location'].touched)">
+                <div class="color_error shake" *ngIf="lform.controls['location'].errors.required  && lform.controls['location'].touched">
+                  <a class="text-left shake">
+                    <img src="assets/img/error.png" /> Field should not be empty</a>
+                </div>
+                <div class="color_error shake" *ngIf="lform.controls['location'].hasError('pattern')&&lform.controls['location'].touched ">
+                  <a class="text-left shake">
+                    <img src="assets/img/error.png" />Please provide a valid email address </a>
+                </div>
+              </div>
+
+          </div>
+          <div class="checkbox check_box_center">
+          <label><input type="checkbox" id="brochure" [(ngModel)]="brochure" [ngModelOptions]="{standalone: true}"><span class="checkmark"></span><span class="font_normal">Send brochure to e-mail</span></label>
+          </div>
+          <button type="submit" class="btn btn-primary btn_font btn-primary_right" *ngIf="is_btn" (click)="editSuccess()">Save & Send</button>
+          <button type="submit" class="btn btn-primary btn_font btn-primary_right not_alwd" *ngIf="!is_btn" >Save & Send</button>
+        </div>
+        <!-- Modal -->
+        <div id="myModal" class="modal" role="dialog">
+            <div class="modal-dialog">
+                              <!-- Modal content-->
+              <div class="modal-content">
+                <div class="modal-body">
+                  <p class="text-center">Enquiry form submitted successfully</p>
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn_close btn-default " data-dismiss="modal">OK</button>
+                </div>
+              </div>
+
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<app-footer></app-footer>

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-enquiry/lauch-enquiry.component.scss

@@ -0,0 +1,803 @@
+body{
+	font-family:calibri;
+	overflow-x: hidden;
+}
+.mt_50{
+	// margin-top:15px;
+}
+.line{
+	 border-left: 1px solid #888;
+    height: 400px;
+    position: absolute;
+    left: 50%;
+    margin-left: -3px;
+    top: 0;
+}
+
+.mg_10{
+	margin-bottom: 25px;
+}
+.mt_25{
+	margin-top:15px;
+}
+.wid3{
+	width: 5.4%;
+margin-top: 8px;
+
+}
+.wid3_font{
+	font-size:24px;
+}
+
+.padding{
+	padding:0px;
+	margin:12px 0px;
+	color: #888;
+}
+.form-control{
+	border: 1px solid #191818 !important;
+	margin-bottom: 5px;
+	border-radius: 0px !important;
+}
+.btn-primary_right{
+	width: 30% !important;
+    font-size: 12px;
+	height: 42px;
+	margin: 20px auto !important;
+    border-radius: 16px !important;
+    outline: none;
+    border: #28a8e0 !important;
+
+
+    display: block;
+}
+
+.btn:focus {
+	-webkit-box-shadow: none;
+box-shadow: none;
+}
+
+.btn-primary:not(:disabled):not(.disabled):active:focus{
+	box-shadow: none !important;
+	outline: none !important;
+}
+.mt0{
+	margin-top:0px;
+}
+
+.mg_bt62{
+	margin-bottom: 62px;
+}
+
+
+/*next step*/
+
+.footer {
+   position: fixed;
+   left: 0;
+   bottom: 0;
+   width: 100%;
+   background-color: #393939;
+	 color: white;
+	 z-index: 99999;
+
+}
+
+.footer_class{
+	list-style-type: none;
+	display: inline-flex;
+	margin: 20px 0px;
+}
+.footer_class li{
+	padding:0px 95px;
+	border-right: 1px solid #fff;
+	font-size:18px;
+
+}
+.footer_class li a{
+	text-decoration:none;
+	color:#fff;
+}
+
+.footer_class li a:active{
+	 border-bottom:5px solid  blue;
+}
+
+
+
+/*sick*/
+html, body {
+	margin: 0;
+	padding: 0;
+  }
+
+  * {
+	box-sizing: border-box;
+  }
+
+
+.slick-list {
+	padding:0px !important;
+}
+  .slider {
+	  /* width: 50%;
+	  margin: 100px auto; */
+  }
+
+  .slick-slide {
+	margin: 0px 20px;
+  }
+
+  .slick-slide img {
+	width: 100%;
+	height: 400px;
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+	color: black;
+  }
+
+
+  .slick-slide {
+	transition: all ease-in-out .3s;
+	opacity: .2;
+  }
+
+  .slick-active {
+	opacity: .5;
+  }
+
+  .slick-current {
+	opacity: 1;
+  }
+
+  .big_button1{
+	border-color: #49494a !important;
+	margin: 0px 20px !important;
+	border-radius: 28px !important;
+	background-color: #49494a !important;
+  }
+  .mt_100 {
+	  margin-top:100px !important;
+  }
+
+
+  #content {
+	margin: 40px auto;
+	text-align: center;
+	width: 100%;
+  }
+  #content h1 {
+	text-transform: uppercase;
+	font-weight: 700;
+	margin: 0 0 40px 0;
+	font-size: 25px;
+	line-height: 30px;
+  }
+  .circle {
+	width: 60px;
+	height: 60px;
+	line-height: 60px;
+	border-radius: 50%; /* the magic */
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	text-align: center;
+	color: white;
+	font-size: 16px;
+	text-transform: uppercase;
+	font-weight: 700;
+	margin: 0 auto 40px;
+	cursor: pointer;
+  }
+
+  .blue {
+	background-color: #3498db;
+	}
+	.blue_5 {
+		background-color: #3498db;
+		}
+  .green {
+	background-color: #16a085;
+  }
+  .red {
+	background-color: #e74c3c;
+  }
+  .black{
+	background-color: #49494a;
+  }
+
+.big_button{
+	display: inline-block;
+	padding: 6px 12px 6px 38px;
+	margin-bottom: 0;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.42857143;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: middle;
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+	cursor: pointer;
+	color: #fff;
+	border-color: #49494a !important;
+	margin: 15px 30px !important;
+	border-radius: 28px !important;
+	position: absolute;
+	z-index: -1;
+	display: none;
+
+  }
+
+  .big_button_1 {
+	background-color: #3498db !important;
+  }
+  .big_button_2 {
+	background-color: #16a085  !important;
+  }
+  .big_button_3 {
+	background-color: #e74c3c  !important;
+  }
+  .big_button_4{
+	background-color: #49494a  !important;
+  }
+
+	.big_button_5{
+		background-color: #3498db !important;
+		}
+
+  .circle:hover .big_button_1 {
+display: block;
+
+  }
+  .circle:hover .big_button_2 {
+	display: block;
+
+	  }
+	  .circle:hover  .big_button_3 {
+		display: block;
+
+		  }
+		  .circle:hover .big_button_4{
+			display: block;
+
+				}
+
+
+.wid66{
+	width:66%;
+	margin: auto;
+	display: block;
+}
+
+
+
+
+
+
+				/*slider*/
+
+				.hero {
+					position: absolute;
+					top: 85%;
+					left: 47%;
+					z-index: 0;
+				}
+
+				.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
+					left: 50%;
+					margin-left: -10px;
+					top: 88% !important;
+					background-color: #333;
+    			width: 20%;
+					padding: 5px 0px;
+					height: auto !important;
+			}
+			.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next{
+				top: 88% !important;
+				background-color: #333;
+    		width: 20%;
+				padding: 5px 0px;
+    		height: auto !important;
+			}
+
+			.mg_bt{
+				margin-bottom: 65px;
+			}
+
+			button.btn.btn-primary.btn-lg{
+				background-color: #28a8e0 !important;
+			}
+.btn-primary{
+	background-color: #28a8e0 !important;
+}
+
+/******************* Accordion Demo - 4 *****************/
+#accordion4 .panel{
+	border: none;
+	border-radius: 0;
+	box-shadow: none;
+	/* margin: 0 0 10px; */
+	overflow: hidden;
+	position: relative;
+}
+#accordion4 .panel-heading{
+	padding: 0;
+	border: none;
+	border-radius: 0;
+	/* margin-bottom: 10px; */
+	z-index: 1;
+	/* position: relative; */
+}
+#accordion4 .panel-heading:before,
+#accordion4 .panel-heading:after{
+	content: "";
+	width: 50%;
+	height: 20%;
+	box-shadow: 0 15px 5px rgba(0, 0, 0, 0.4);
+	position: absolute;
+	bottom: 15px;
+	left: 10px;
+	transform: rotate(-3deg);
+	z-index: -1;
+}
+#accordion4 .panel-heading:after{
+	left: auto;
+	right: 10px;
+	transform: rotate(3deg);
+}
+h4.panel-title{}
+#accordion4 .panel-title a{
+	display: block;
+	padding: 15px 70px 15px 70px;
+	margin: 0;
+	background: #337ab7;
+	font-size: 18px;
+	font-weight: 500;
+	letter-spacing: 1px;
+	color: #fff;
+	border-radius: 0;
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+	position: relative;
+}
+
+#accordion4 .panel-title a:hover,a:focus{
+text-decoration: none !important;
+}
+#accordion4 .panel-title a:before,
+#accordion4 .panel-title a.collapsed:before{
+	content: "\f106";
+	font-family: "Font Awesome 5 Free";
+	font-weight: 900;
+	width: 55px;
+	height: 100%;
+	text-align: center;
+	line-height: 50px;
+
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+#accordion4 .panel-title a.collapsed:before{ content: "\f107"; }
+#accordion4 .panel-title a .icon{
+	display: inline-block;
+	width: 55px;
+	height: 100%;
+
+	font-size: 20px;
+	color: rgba(0,0,0,0.7);
+	line-height: 50px;
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+#accordion4 .panel-body{
+	padding: 10px 15px;
+	/* margin: 0 0 20px; */
+	border: 1px solid #ccc;
+	border-top: 1px solid #ccc !important;
+	border-top: none;
+	background: #fff;
+	font-size: 15px;
+	color: #333;
+	line-height: 27px;
+}
+
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  border: 1px solid #ccc;
+}
+
+th, td {
+  text-align: left;
+	padding: 8px;
+	width:20%;
+}
+
+#filedrag
+{
+	display: none;
+	font-weight: bold;
+	text-align: center;
+	padding: 1em 0;
+	margin: 1em 0;
+	color: #555;
+	border: 2px dashed #555;
+	border-radius: 7px;
+	cursor: default;
+}
+
+#filedrag.hover
+{
+	color: #f00;
+	border-color: #f00;
+	border-style: solid;
+	box-shadow: inset 0 3px 4px #888;
+}
+
+				/*sales*/
+				.circle_sales:hover .big_button_5{
+					display: block;
+
+						}
+						.circle_sales:hover{
+							background-color: #3498db;
+						}
+
+
+				.circle_sales {
+					width: 60px;
+					height: 60px;
+					line-height: 60px;
+					border-radius: 50%; /* the magic */
+					-moz-border-radius: 50%;
+					-webkit-border-radius: 50%;
+					text-align: center;
+					color: white;
+					font-size: 16px;
+					text-transform: uppercase;
+					font-weight: 700;
+					margin: 0 auto 40px;
+					cursor: pointer;
+					}
+				.big_button_1 {
+					background-color: #3498db !important;
+					}
+
+					.big_button_back {
+						display: inline-block;
+						padding: 6px 12px 6px 38px;
+						margin-bottom: 0;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 1.42857143;
+						text-align: center;
+						white-space: nowrap;
+						vertical-align: middle;
+						-ms-touch-action: manipulation;
+						touch-action: manipulation;
+						cursor: pointer;
+						color: #fff;
+						border-color: #49494a !important;
+						margin: -46px 30px !important;
+						border-radius: 28px !important;
+						position: absolute;
+						z-index: -1;
+						display: none;
+				}
+
+
+				/*main*/
+				.carousel, .carousel-inner {height: auto !important;}
+				.carousel-control_1.left {
+					background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
+					background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
+					background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
+					background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
+					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
+					background-repeat: repeat-x;
+			}
+			.carousel-control_1.right {
+				right: 0;
+				left: auto;
+				background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
+				background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
+				background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
+				background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
+				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
+				background-repeat: repeat-x;
+		}
+			.carousel-control_1 {
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					left: 0;
+					width: 15%;
+					font-size: 20px;
+					color: #fff;
+					text-align: center;
+					text-shadow: 0 1px 2px rgba(0,0,0,.6);
+					background-color: rgba(0,0,0,0);
+					filter: alpha(opacity=50);
+					opacity: .5;
+			}
+
+			.carousel-control_1 .glyphicon-chevron-left, .carousel-control .icon-prev {
+				/* left: 50%; */
+				margin-left: -10px;
+				top: 50%;
+
+				width: 20%;
+				padding: 5px 0px;
+				height: auto !important;
+		}
+
+		.carousel-control_1 .glyphicon-chevron-right, .carousel-control .icon-next {
+
+			top: 50%;
+			width: 20%;
+			padding: 5px 0px;
+			height: auto !important;
+	}
+	.hide{
+		display:none;
+        }
+
+        // janani
+
+
+        .color_error{
+            position: inherit!important;
+				}
+
+				.font_color{
+					margin: 12px 0px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #28a8e0;
+				}
+
+				.btn_font{
+					font-size: 16px;
+					padding: 5px;
+				}
+
+				.font_form{
+					font-size: 12px;
+					font-weight: bold;
+					color: #28a8e0
+				}
+				.font_normal{
+					font-size: 12px;
+					font-weight: bold;
+					color: #28a8e0;
+					margin-left:10px;
+				}
+				.check_box_center{
+
+    margin-bottom: 39px;
+				}
+
+				.form-group {
+					margin-bottom: 1rem;
+				}
+
+				.check_box_center {
+
+					padding-left: 10px;
+
+
+				  }
+
+				  /* Hide the browser's default checkbox */
+				  .check_box_center input {
+					// position: absolute;
+					// opacity: 0;
+					// cursor: pointer;
+					// height: 0;
+					// width: 0;
+				  }
+
+				  /* Create a custom checkbox */
+				  .checkmark {
+					position: absolute;
+					//top: 0;
+					left: 15px;
+					height: 25px;
+					width: 25px;
+					background-color: #ccc;
+				  }
+
+				  /* On mouse-over, add a grey background color */
+				  .check_box_center:hover input ~ .checkmark {
+					background-color: #ccc;
+				  }
+
+				  /* When the checkbox is checked, add a blue background */
+				  .check_box_center input:checked ~ .checkmark {
+					background-color: #28a8e0;
+				  }
+
+				  /* Create the checkmark/indicator (hidden when not checked) */
+				  .checkmark:after {
+					content: "";
+					position: absolute;
+					display: none;
+				  }
+
+				  /* Show the checkmark when checked */
+				  .check_box_center input:checked ~ .checkmark:after {
+					display: block;
+				  }
+
+				  /* Style the checkmark/indicator */
+				  .check_box_center .checkmark:after {
+						left: 11px;
+						top: 3px;
+						width: 6px;
+						height: 15px;
+						border: solid white;
+						border-width: 0 3px 3px 0;
+						-webkit-transform: rotate(45deg);
+						transform: rotate(45deg);
+					}
+
+
+
+
+				/*main*/
+
+				.carousel-control_1.left {
+					background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
+					background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
+					background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
+					background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
+					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
+					background-repeat: repeat-x;
+			}
+			.carousel-control_1.right {
+				right: 0;
+				left: auto;
+				background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
+				background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
+				background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
+				background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
+				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
+				background-repeat: repeat-x;
+		}
+			.carousel-control_1 {
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					left: 0;
+					width: 15%;
+					font-size: 20px;
+					color: #fff;
+					text-align: center;
+					text-shadow: 0 1px 2px rgba(0,0,0,.6);
+					background-color: rgba(0,0,0,0);
+					filter: alpha(opacity=50);
+					opacity: .5;
+			}
+
+			.carousel-control_1 .glyphicon-chevron-left, .carousel-control .icon-prev {
+				/* left: 50%; */
+				margin-left: -10px;
+				top: 50%;
+
+				width: 20%;
+				padding: 5px 0px;
+				height: auto !important;
+		}
+
+		.carousel-control_1 .glyphicon-chevron-right, .carousel-control .icon-next {
+
+			top: 50%;
+			width: 20%;
+			padding: 5px 0px;
+			height: auto !important;
+    }
+
+	.span_img{
+		position: absolute;
+    right: 0px;
+    float: left;
+    left: 44px;
+    top: 6px;
+    width:120px;
+    cursor: pointer;
+	}
+
+	.wid3_font {
+		font-size: 20px;
+		color: #333;
+	}
+	.wid3 {
+		width: 27px !important;
+	    margin-top: 8px !important;
+	position: relative;
+	cursor: pointer;
+	}
+	.wid3_font:hover{
+	text-decoration: none !important;
+	}
+	.d-block{
+		width: 465px;
+		margin: 0px auto;
+	}
+
+	.carousel-inner{
+		height: 320px !important;
+
+	}
+
+
+
+	.carousel-control-next-icon, .carousel-control-prev-icon {
+		background-color: #28a8e0;
+		width: 20px;
+		background-size: 45% 100%;
+	}
+
+
+
+
+	span.carousel-control-next-icon{
+		right: -32px;
+	}
+	span.carousel-control-next-icon,span.carousel-control-prev-icon {
+		position: absolute;
+	 	top: 128px;
+		bottom: 0;
+		display: -ms-flexbox;
+		display: flex;
+		-ms-flex-align: center;
+		align-items: center;
+		-ms-flex-pack: center;
+		justify-content: center;
+		width: 3%;
+		height:24px;
+		color: #fff;
+		text-align: center;
+		padding: 18px;
+
+	}
+
+
+
+	.left_card {
+		position: inherit;
+		top: 193px;
+	}
+	.fade:not(.show) {
+		opacity: 1!important;
+		background-color: rgba(0,0,0,0.5);
+	}
+	.modal-dialog {
+		max-width: 500px;
+		margin: 1.75rem auto;
+		margin-top: 213px;
+	}
+	.btn_close{
+		width: 100px;
+		text-align: center;
+		margin: 0 auto;
+		background-color: rgba(0,0,0,0.5);
+	}
+	.h-100{
+		width: 100%;
+		height:100%;
+	}
+	.head_text{
+		font-size: 17px;
+    	font-style: italic;
+	}
+	.not_alwd{
+    cursor:not-allowed!important;
+    opacity:0.5;
+  }

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-enquiry/lauch-enquiry.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LauchEnquiryComponent } from './lauch-enquiry.component';
+
+describe('LauchEnquiryComponent', () => {
+  let component: LauchEnquiryComponent;
+  let fixture: ComponentFixture<LauchEnquiryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LauchEnquiryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LauchEnquiryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-enquiry/lauch-enquiry.component.ts

@@ -0,0 +1,150 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl, FormsModule } from '@angular/forms';
+import { LocalStorage } from "../../core/services/local_storage.service"
+import { HyperService } from '../../core/services/http.service';
+import { Router } from "@angular/router";
+import { SidemenuComponent } from '../../sidemenu/sidemenu.component';
+import {Location} from '@angular/common';
+declare var $:any;
+@Component({
+  selector: 'app-lauch-enquiry',
+  templateUrl: './lauch-enquiry.component.html',
+  styleUrls: ['./lauch-enquiry.component.scss']
+})
+export class LauchEnquiryComponent implements OnInit {
+  lform: FormGroup;
+  contact:any={};
+  activeBanner:number;
+  url:number;
+  varient_list:any=[];
+  imageSources = [];
+  model_id:number=1;
+  varient_id:number=1;
+  brochure:boolean=true;
+  loader:boolean=false;
+  temp_model_id:number;
+  is_btn:boolean=true;
+  constructor(private formBuilder: FormBuilder, private server: HyperService, private router: Router,private loc:Location) {
+    this.getBanner()
+   }
+
+  ngOnInit() {
+    this.formBuild();
+    this.getVarient(LocalStorage.getValue('set_model_id'));
+  }
+  formBuild() {
+    this.lform = this.formBuilder.group({
+      name: [null, Validators.compose([Validators.required])],
+      location: [null, Validators.compose([Validators.required, Validators.email])],
+      phone:  [null, Validators.compose([Validators.required,Validators.minLength(10)])],
+    });
+  }
+  validateAllFormFields(formGroup: FormGroup) {
+    Object.keys(formGroup.controls).forEach(field => {
+      // console.log(field);
+      const control = formGroup.get(field);
+      if (control instanceof FormControl) {
+        control.markAsTouched({
+          onlySelf: true
+        });
+      } else if (control instanceof FormGroup) {
+        this.validateAllFormFields(control);
+      }
+    });
+  }
+  editSuccess(){
+     this.loader=true;
+    if (this.lform.valid) {
+      let model_id;
+      if(this.temp_model_id!=undefined){
+        model_id=this.temp_model_id
+      }else{
+        model_id=LocalStorage.getValue('set_model_id')
+      }
+      console.log(this.temp_model_id,'this.temp_model_id')
+      this.server.post("explore/enquiry/"+model_id,{variant_id:this.varient_id,name:this.contact.customer_name,mobile:this.contact.customer_phone,email:this.contact.customer_email,is_brochure:(this.brochure==false?0:1)})
+        .then((data) => {
+            if (data.result.status == 200 ) {
+              this.loader=false;
+              // $('#myModal').modal('show');
+                 this.contact.customer_name='';
+                this.contact.customer_phone='';
+                this.contact.customer_email='';
+                this.brochure=true;
+                this.lform.markAsUntouched();
+            } else if (data.result.status == 401 && data.result.response == 'failed') {
+            this.loader=false;
+             } else {
+              this.loader=false;
+             }
+        });
+    }else{
+      this.loader=false;
+    this.validateAllFormFields(this.lform);
+    }
+  }
+  isActive(url) {
+    this.url = url;
+}
+show(){
+  // console.log("innn")
+
+}
+  getBanner() {
+    this.loader=true;
+    this.server.get("explore/model")
+        .then((data) => {
+            if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+              this.loader=false;
+                for (let i = 0; i < data.result.data.length; i++) {
+                  this.imageSources=data.result.data;
+                  if(this.imageSources[i].model_id == LocalStorage.getValue('set_model_id')){
+                    this.activeBanner = i;
+                  }
+                    // this.imageSources.push(data.result.data[i].model_image_url);
+
+                    // console.log(this.activeBanner)
+                }
+                // this.activeBanner = 0;
+            } else if (data.result.status == 401 && data.result.response == 'failed') {
+                this.router.navigateByUrl('');
+            } else {
+                this.imageSources = [];
+                alert(data.result.message)
+                this.loader=false;
+            }
+        });
+}
+
+setIndex(){
+  this.is_btn=false;
+  setTimeout(() => {
+     this.model_id=$('.carousel-inner').find('.active').text() ;
+    console.log(this.model_id);
+    this.temp_model_id=this.imageSources[Number($.trim(this.model_id))-1].model_id;
+    this.getVarient(this.temp_model_id);
+  }, 1000);
+}
+getVarient(id){
+  this.server.get("explore/variant/"+id)
+  .then((data) => {
+      if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+          this.is_btn=true;
+          this.varient_list=data.result.data;
+          this.varient_id=this.varient_list[0].id;
+          console.log(this.is_btn)
+          // console.log(this.varient_list,"this.varient_list",this.varient_id)
+       } else if (data.result.status == 401 && data.result.response == 'failed') {
+        this.is_btn=false;
+       } else {
+        this.is_btn=true;
+       }
+  });
+}
+selectVarient(id){
+  this.varient_id=id;
+}
+goBack(){
+  this.loc.back();
+}
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-threesixty-comparison/lauch-threesixty-comparison.component.html

@@ -0,0 +1,163 @@
+<!-- <div  id="div1"
+ (drop)="drop($event)"
+ (dragover)="allowDrop($event)">
+
+ <img
+ src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350"
+ draggable="true"
+ (dragstart)="drag($event)"
+ id="drag1"
+ width="88"
+ height="31">
+</div>
+
+<div id="div2"
+(drop)="drop($event)"
+(dragover)="allowDrop($event)">
+</div> -->
+<app-main-header></app-main-header>
+<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
+<body class="col-md-12 float-left body_cls">
+    <div class="container mt-10 col-md-12 float-left body_cls">
+        <div class="col-md-12  rel_cls">
+
+
+            <div class=" float-left padr-0 drop_box" id="div2" (drop)="drop1($event)" (dragover)="allowDrop1($event)">
+                    <img  class="drop_img" src="assets/img/drop.png" alt="" />
+            </div>
+
+            <div class="col-md-12 float-right padl_0 scroll_topbox ht_cls comp-head" style="position:relative;">
+                <div class="col-md-4 float-left padr-0 ht_cls">
+                    <div class="top_image_header">
+                        <a  class="wid3_font col-md-12">
+                            <img src="assets/images/back.png" routerLink="/threesixty-dashboard" class="wid3"><span class="span_img" routerLink="/threesixty-dashboard"><b>{{main_model_name}}</b></span>
+                            <img class="bot_img_cls_1" src={{main_model_image}} alt="" />
+                        </a>
+
+                    </div>
+                </div>
+                <div class="col-md-3 right-content float-left padr-0 ht_cls" *ngFor="let drop_item of droped_list;let k=index;" >
+                    <div class="top_image_header">
+                        <h4 class="close_mark" (click)="removeDragItem(k,drop_list_image[k].model_id)">X</h4>
+                        <img src={{drop_list_image[k].model_image_url}} class="bot_img_cls" style="float:right">
+                        <span class="mod_nme_cls" style="width:auto;">
+                            <h6 class="title_cls">{{drop_list_image[k].model_name}} </h6>
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-12 float-right padl_0 scroll_topbox ht_cls" style="position:relative;">
+                    <div class="col-md-4 float-left padr-0 ht_cls">
+                            <!-- <div class="top_image_header">
+                                <a  class="wid3_font col-md-12">
+                                    <img src="assets/images/back.png" routerLink="/threesixty-dashboard" class="wid3"><span class="span_img" routerLink="/threesixty-dashboard"><b>{{main_model_name}}</b></span>
+                                    <img class="bot_img_cls_1" src={{main_model_image}} alt="" />
+                                </a>
+
+                            </div> -->
+                            <div class="panel-group ht_cls" id="accordion4" role="tablist" aria-multiselectable="true">
+                                <div class="panel panel-default" style="width: 100%;">
+                                    <div class="panel-heading" role="tab" id="headingOne4" *ngFor="let item of compare_title;let i=index">
+                                        <h4 class="panel-title panel_line" (click)="clickColapse(i)">
+                                            <a class="title-hide" id="btn_{{i}} title_arrow">
+                                                {{item.title}}
+                                            </a>
+                                        </h4>
+                                        <div class="elements_{{i}}">
+                                            <div class="panel-body">
+                                                <div class="table-responsive">
+                                                    <table class="table" *ngFor="let item of compare_title[i].fields;let j=index">
+                                                        <thead>
+                                                            <tr>
+                                                                <th> {{item.title}}</th>
+                                                                <td> {{item.value}} </td>
+                                                            </tr>
+                                                        </thead>
+                                                    </table>
+                                                 </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </div>
+                <div class="col-md-3 right-content float-left padr-0 ht_cls" *ngFor="let drop_item of droped_list;let k=index;" >
+                    <!-- <div class="top_image_header">
+                        <h4 class="close_mark" (click)="removeDragItem(k,drop_list_image[k].model_id)">X</h4>
+                        <img src={{drop_list_image[k].model_image_url}} class="bot_img_cls" style="float:right">
+                        <span class="mod_nme_cls" style="width:auto;">
+                            <h6 class="title_cls">{{drop_list_image[k].model_name}} </h6>
+                        </span>
+                    </div> -->
+                    <div class="panel-group ht_cls" id="accordion4" role="tablist" aria-multiselectable="true">
+                        <div class="panel panel-default" style="width: 100%;">
+                            <div class="panel-heading" role="tab" id="headingOne4" *ngFor="let item of compare_title;let i=index">
+                                <h4 class="panel-title panel_line " (click)="clickColapse(i)">
+                                    <a class="title-hide" id="btn_{{i}} title_arrow">
+
+                                    </a>
+                                </h4>
+                                <div class="elements_{{i}} ">
+                                    <div class="panel-body">
+                                        <div class="table-responsive">
+                                            <table class="table" *ngFor="let item of drop_item[i].fields;let j=index">
+                                                <thead>
+                                                    <tr>
+                                                        <!-- <td *ngIf="item.is_equal!=1 && item.value!=''"> {{item.value}} </td>
+                                                        <td *ngIf="item.is_equal!=1 && item.value==''"> <img class="checked24" src="assets/img/cancel.png">  </td>
+                                                        <td *ngIf="item.is_equal==1"> <img class="checked24" src="assets/img/checked-icon.png"> </td> -->
+                                                        <td>{{item.value}}</td>
+                                                        <!-- <td *ngIf="item.is_equal!=1 || item.value=='' || item.value=='-'"> - </td> -->
+                                                    </tr>
+                                                </thead>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+
+                    </div>
+                </div>
+
+            </div>
+            <!-- <div class="col-md-4 float-right padl_0 scroll_bottombox" style="overflow:hidden">
+            </div> -->
+            <div class="col-md-12 float-right padl_0 scroll_bottombox table-responsive">
+                <div class="image_arr_box">
+                <div *ngFor="let item of compare_model_arr;let i=index;" class="img_drag_box" [ngClass]="{'grey_img_box':!item.model.value}">
+                    <!-- <img (drop)="drop($event)" style="position:absolute;left:0" (dragover)="allowDrop($event)" draggable="true" (dragstart)="drag($event)"
+                        id="{{i}}" src={{item.model.model_image_url}} class="bot_img_cls" *ngIf="item.model.value"> (click)="addCompareModel(i)" -->
+                     <div *ngIf="item.model.value" (click)="addCompareModel(i)" >
+                        <img src={{item.model.model_image_url}} class="bot_img_cls drag_fixed_img" >
+                        <span class="mod_nme_cls">
+                            <h6>{{item.model.model_name}} </h6>
+                        </span>
+                     </div>
+                     <div *ngIf="!item.model.value" class="grey_img_box">
+                            <img src={{item.model.model_image_url}} class="bot_img_cls drag_fixed_img" >
+                            <span  class="mod_nme_cls grey_img_box" >
+                                <h6>{{item.model.model_name}} </h6>
+                            </span>
+                         </div>
+                </div>
+                </div>
+
+             </div>
+             <!-- <div>
+                    <h4 class='info_txt'>Click to compare model</h4>
+            </div> -->
+            <!-- <div class="col-md-4 float-right padl_0 scroll_bottombox" style="overflow:hidden">
+
+            </div> -->
+        </div>
+    </div>
+
+</body>
+
+<app-footer></app-footer>
+<app-sidemenu></app-sidemenu>

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-threesixty-comparison/lauch-threesixty-comparison.component.scss

@@ -0,0 +1,902 @@
+.list-sorted{
+    flex-direction: inherit;
+    overflow:scroll;
+    width: 100%;
+}
+body{
+	font-family:calibri;
+	overflow-x: hidden;
+}
+.mt_50{
+	margin-top:15px;
+}
+.line{
+	 border-left: 1px solid #888;
+    height: 400px;
+    position: absolute;
+    left: 50%;
+    margin-left: -3px;
+    top: 0;
+}
+
+.mg_10{
+	margin-bottom: 25px;
+}
+.mt_25{
+	margin-top:15px;
+}
+.wid3{
+	width: 13.4%;
+	margin-top: 18px;
+
+}
+.wid3_font{
+	font-size:24px;
+}
+
+.padding{
+	padding:0px;
+	font-size: 22px;
+	color: #888;
+}
+.form-control{
+	border: 1px solid #191818 !important;
+	margin-bottom: 44px;
+	border-radius: 0px !important;
+}
+.btn-primary_right{
+	float:right;
+}
+.mt0{
+	margin-top:0px;
+}
+
+.mg_bt62{
+	margin-bottom: 62px;
+}
+
+
+/*next step*/
+
+.footer {
+   position: fixed;
+   left: 0;
+   bottom: 0;
+   width: 100%;
+   background-color: #393939;
+	 color: white;
+	 z-index: 99999;
+
+}
+
+.footer_class{
+	list-style-type: none;
+	display: inline-flex;
+	margin: 20px 0px;
+}
+.footer_class li{
+	padding:0px 95px;
+	border-right: 1px solid #fff;
+	font-size:18px;
+
+}
+.footer_class li a{
+	text-decoration:none;
+	color:#fff;
+}
+
+.footer_class li a:active{
+	 border-bottom:5px solid  blue;
+}
+
+
+
+/*sick*/
+html, body {
+	margin: 0;
+	padding: 0;
+  }
+
+  * {
+	box-sizing: border-box;
+  }
+
+
+.slick-list {
+	padding:0px !important;
+}
+  .slider {
+	  /* width: 50%;
+	  margin: 100px auto; */
+  }
+
+  .slick-slide {
+	margin: 0px 20px;
+  }
+
+  .slick-slide img {
+	width: 100%;
+	height: 400px;
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+	color: black;
+  }
+
+
+  .slick-slide {
+	transition: all ease-in-out .3s;
+	opacity: .2;
+  }
+
+  .slick-active {
+	opacity: .5;
+  }
+
+  .slick-current {
+	opacity: 1;
+  }
+
+  .big_button1{
+	border-color: #49494a !important;
+	margin: 0px 20px !important;
+	border-radius: 28px !important;
+	background-color: #49494a !important;
+  }
+  .mt_100 {
+	  margin-top:100px !important;
+  }
+
+
+  #content {
+	margin: 40px auto;
+	text-align: center;
+	width: 100%;
+  }
+  #content h1 {
+	text-transform: uppercase;
+	font-weight: 700;
+	margin: 0 0 40px 0;
+	font-size: 25px;
+	line-height: 30px;
+  }
+  .circle {
+	width: 60px;
+	height: 60px;
+	line-height: 60px;
+	border-radius: 50%; /* the magic */
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	text-align: center;
+	color: white;
+	font-size: 16px;
+	text-transform: uppercase;
+	font-weight: 700;
+	margin: 0 auto 40px;
+	cursor: pointer;
+  }
+
+  .blue {
+	background-color: #3498db;
+	}
+	.blue_5 {
+		background-color: #3498db;
+		}
+  .green {
+	background-color: #16a085;
+  }
+  .red {
+	background-color: #e74c3c;
+  }
+  .black{
+	background-color: #49494a;
+  }
+
+.big_button{
+	display: inline-block;
+	padding: 6px 12px 6px 38px;
+	margin-bottom: 0;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.42857143;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: middle;
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+	cursor: pointer;
+	color: #fff;
+	border-color: #49494a !important;
+	margin: 15px 30px !important;
+	border-radius: 28px !important;
+	position: absolute;
+	z-index: -1;
+	display: none;
+
+  }
+
+  .big_button_1 {
+	background-color: #3498db !important;
+  }
+  .big_button_2 {
+	background-color: #16a085  !important;
+  }
+  .big_button_3 {
+	background-color: #e74c3c  !important;
+  }
+  .big_button_4{
+	background-color: #49494a  !important;
+  }
+
+	.big_button_5{
+		background-color: #3498db !important;
+		}
+
+  .circle:hover .big_button_1 {
+display: block;
+
+  }
+  .circle:hover .big_button_2 {
+	display: block;
+
+	  }
+	  .circle:hover  .big_button_3 {
+		display: block;
+
+		  }
+		  .circle:hover .big_button_4{
+			display: block;
+
+				}
+
+
+.wid66{
+	width:66%;
+	margin: auto;
+	display: block;
+}
+
+
+
+
+
+
+				/*slider*/
+
+				.hero {
+					position: absolute;
+					top: 85%;
+					left: 47%;
+					z-index: 0;
+				}
+
+				.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
+					left: 50%;
+					margin-left: -10px;
+					top: 88% !important;
+					background-color: #333;
+    			width: 20%;
+					padding: 5px 0px;
+					height: auto !important;
+			}
+			.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next{
+				top: 88% !important;
+				background-color: #333;
+    		width: 20%;
+				padding: 5px 0px;
+    		height: auto !important;
+			}
+
+			.mg_bt{
+				margin-bottom: 65px;
+			}
+
+			button.btn.btn-primary.btn-lg{
+				background-color: #28a8e0 !important;
+			}
+
+
+/******************* Accordion Demo - 4 *****************/
+#accordion4 .panel{
+	border: none;
+	border-radius: 0;
+	box-shadow: none;
+	/* margin: 0 0 10px; */
+	overflow: hidden;
+	position: relative;
+	border-right: 1px solid #eeeeee;
+}
+#accordion4 .panel-heading{
+	padding: 0;
+	border: none;
+	// border: 1px solid #fff;
+	border-radius: 0;
+	/* margin-bottom: 10px; */
+	z-index: 1;
+	/* position: relative; */
+}
+#accordion4 .panel-heading:before,
+#accordion4 .panel-heading:after{
+	content: "";
+	width: 50%;
+	height: 20%;
+	box-shadow: 0 15px 5px rgba(0, 0, 0, 0.4);
+	position: absolute;
+	bottom: 15px;
+	left: 10px;
+	transform: rotate(-3deg);
+	z-index: -1;
+}
+#accordion4 .panel-heading:after{
+	left: auto;
+	right: 10px;
+	transform: rotate(3deg);
+}
+h4.panel-title{}
+#accordion4 .panel-title a{
+	display: block;
+	padding: 11px 60px 12px 6px;
+	margin: 0;
+	background: #28a8e0;
+	font-size: 12px;
+	font-weight: 500;
+	letter-spacing: 1px;
+	color: #fff;
+	border-radius: 0;
+	// box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+	-webkit-box-shadow: 1px 8px 4px 6px #fff8f8;
+	position: relative;
+}
+
+#accordion4 .panel-title a:hover,a:focus{
+text-decoration: none !important;
+}
+#accordion4 .panel-title a:before,
+#accordion4 .panel-title a.collapsed:before{
+	content: "\f105";
+	visibility: hidden;
+  font-family: "Font Awesome 5 Free";
+	font-weight: 900;
+	width: 55px;
+	height: 100%;
+	text-align: center;
+	line-height: 50px;
+  font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: inherit;
+/*--adjust as necessary--*/
+    color: #fff;
+    font-size: 18px;
+    padding-right: 0.5em;
+    position: absolute;
+    top: 10px;
+    right: 0;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+#accordion4 .panel-title a:before,
+#accordion4 .panel-title a.collapsed:after{ content: "\f107"; }
+#accordion4 .panel-title a .icon{
+	display: inline-block;
+	width: 55px;
+	height: 100%;
+
+	font-size: 20px;
+	color: rgba(0,0,0,0.7);
+	line-height: 50px;
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+#accordion4 .panel-body{
+	padding: 0px;
+	/* margin: 0 0 20px; */
+	border: 1px solid #ccc;
+	border-top: 1px solid #ccc !important;
+	border-top: none;
+	background: #fff;
+	font-size: 15px;
+	color: #333;
+	line-height: 27px;
+}
+
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  border: 1px solid #ccc;
+  margin-bottom: 0px;
+}
+
+th, td {
+  text-align: left;
+	padding: 8px;
+	width:20%;
+}
+
+#filedrag
+{
+	display: none;
+	font-weight: bold;
+	text-align: center;
+	padding: 1em 0;
+	margin: 1em 0;
+	color: #555;
+	border: 2px dashed #555;
+	border-radius: 7px;
+	cursor: default;
+}
+
+#filedrag.hover
+{
+	color: #f00;
+	border-color: #f00;
+	border-style: solid;
+	box-shadow: inset 0 3px 4px #888;
+}
+
+				/*sales*/
+				.circle_sales:hover .big_button_5{
+					display: block;
+
+						}
+						.circle_sales:hover{
+							background-color: #3498db;
+						}
+
+
+				.circle_sales {
+					width: 60px;
+					height: 60px;
+					line-height: 60px;
+					border-radius: 50%; /* the magic */
+					-moz-border-radius: 50%;
+					-webkit-border-radius: 50%;
+					text-align: center;
+					color: white;
+					font-size: 16px;
+					text-transform: uppercase;
+					font-weight: 700;
+					margin: 0 auto 40px;
+					cursor: pointer;
+					}
+				.big_button_1 {
+					background-color: #3498db !important;
+					}
+
+
+					.big_button_back {
+						display: inline-block;
+						padding: 6px 12px 6px 38px;
+						margin-bottom: 0;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 1.42857143;
+						text-align: center;
+						white-space: nowrap;
+						vertical-align: middle;
+						-ms-touch-action: manipulation;
+						touch-action: manipulation;
+						cursor: pointer;
+						color: #fff;
+						border-color: #49494a !important;
+						margin: -46px 30px !important;
+						border-radius: 28px !important;
+						position: absolute;
+						z-index: -1;
+						display: none;
+				}
+
+
+				/*main*/
+
+				.carousel-control_1.left {
+					background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
+					background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
+					background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
+					background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
+					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
+					background-repeat: repeat-x;
+			}
+			.carousel-control_1.right {
+				right: 0;
+				left: auto;
+				background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
+				background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
+				background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
+				background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
+				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
+				background-repeat: repeat-x;
+		}
+			.carousel-control_1 {
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					left: 0;
+					width: 15%;
+					font-size: 20px;
+					color: #fff;
+					text-align: center;
+					text-shadow: 0 1px 2px rgba(0,0,0,.6);
+					background-color: rgba(0,0,0,0);
+					filter: alpha(opacity=50);
+					opacity: .5;
+			}
+
+			.carousel-control_1 .glyphicon-chevron-left, .carousel-control .icon-prev {
+				/* left: 50%; */
+				margin-left: -10px;
+				top: 50%;
+
+				width: 20%;
+				padding: 5px 0px;
+				height: auto !important;
+		}
+
+		.carousel-control_1 .glyphicon-chevron-right, .carousel-control .icon-next {
+
+			top: 50%;
+			width: 20%;
+			padding: 5px 0px;
+			height: auto !important;
+    }
+
+.padl_0{
+    padding-left:0px!important;
+}
+.padr-0{
+	padding-right: 0px;
+	padding-left: 0px;
+}
+.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
+    padding: 4px;
+    font-size: 12px;
+}
+/* ///example */
+
+.example-list {
+    width: 500px;
+    max-width: 100%;
+    border: solid 1px #ccc;
+    min-height: 60px;
+    display: block;
+    background: white;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .example-box {
+    padding: 20px 10px;
+    border-bottom: solid 1px #ccc;
+    color: rgba(0, 0, 0, 0.87);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    cursor: move;
+    background: white;
+    font-size: 14px;
+  }
+
+  .cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+                0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .example-box:last-child {
+    border: none;
+  }
+
+  .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+	/* johnji */
+
+	.body_cls{
+		position: absolute;
+		width:100%;
+		height: 86%;
+		background: #eee;
+	}
+	.rel_cls{
+		position: relative;
+		width:100%;
+		height: 100%;
+	}
+	.ht_cls{
+		position: relative;
+		 height: 86%;
+		 /* top: 23%; */
+	}
+	.scroll_topbox{
+		// height: 83%; height:103.7%;
+    position: relative;
+		// overflow-x: scroll;
+		overflow-x: scroll;
+    overflow-y: scroll;
+		display: flex;
+		bottom:2%;
+		top:0%;
+	}
+	.scroll_bottombox{
+	//	margin-top:2%;
+	// 	position: relative;
+  //   bottom: 137px;
+  //   text-align: center;
+	// 	margin: 0 auto;
+	// 	height: auto;
+	display: -webkit-inline-box;
+	// overflow-x: scroll;
+	margin-top: 6px;
+	}
+	.bot_img_cls{
+		width: 85px;
+    // height: 100px;
+    // float: left;
+    // margin-right: 1px;
+	}
+	h4.panel-title-hide  {
+    background: #337ab7;
+}
+#accordion4[_ngcontent-c0] .panel-title[_ngcontent-c0] a.title-hide{
+	visibility: hidden;
+}
+.panel-group-width{
+	width:277px;
+
+}
+.table>thead>tr>th{
+border-top:0px;
+border-bottom:0px!important;
+}
+*::-webkit-scrollbar{
+	width: 5px;
+	height: 5px;
+}
+*::-webkit-scrollbar-thumb {
+	background-color: #28a8e0;
+}
+#div1 {
+	float: left;
+	width: 100px;
+	height: 35px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid black;
+}
+
+.drop_img{
+	margin: 60px auto;
+	display: block;
+	width: 150px;
+}
+/* .drop_box{
+	position: fixed;
+    left: 34%;
+    height: 66%;
+    background: #fff;
+    z-index: 999;
+    border: 2px dotted #000;
+} */
+  #div2 {
+	float: left;
+	position: fixed;
+	/* width: 200px; */
+	left: 34%;
+	background: #fff;
+	z-index: 999;
+	height:350px;
+	margin: 10px;
+	padding: 10px;
+	display: none;
+	border: 1px dotted #000;
+}
+.img_drag_box{
+    min-width: 125px;
+    max-width: 125px;
+    min-height: 98px;
+    text-align: center;
+    display: table-cell;
+}
+/* .drag_fixed_img{
+opacity:0.3;
+}   */
+.top_image_header{
+	h4{
+		position: absolute;
+	}
+	width: 100%;
+	/* float: right; */
+	position: absolute;
+	display: block;
+	background: #fff;
+	border-right: 2px solid #eee;
+	top:1%;
+}
+
+.mod_nme_cls{
+	/* position: relative; */
+	// position: absolute;
+	// bottom: 0px;
+  //   right: 31px;
+	// 	top: 40px;
+		width: 100%;
+    float: left;
+		h6{
+			font-size: 12px;
+		}
+}
+
+
+.close_mark{
+	position: absolute;
+	right: 3px;
+	top: 2px;
+	background: #252323;
+	color: #fff;
+	/* padding: 2px; */
+	font-size: 10px;
+	border-radius: 100%;
+	cursor: pointer;
+	width: 15px;
+	height: 15px;
+	text-align: center;
+	line-height: 15px;
+}
+// #accordion4[_ngcontent-c1] .panel-title[_ngcontent-c1] a[_ngcontent-c1]{
+//     z-index: -1;
+//     background: #000;
+// }
+
+.middle{
+	margin: 0px auto;
+	display: block;
+
+}
+
+.demo-problem, .demo-solution {
+	font-size: 1.5rem;
+}
+
+.demo-solution--flexbox {
+	display: flex;
+	margin-left: 34%;
+  align-items: center;
+
+  img {
+    padding: 10px;
+    transition: margin 300ms;
+  }
+
+
+}
+
+.bot_img_cls_1 {
+	width: 83.5px;
+	float: right;
+	margin-right: 10px;
+}
+.title-hide{
+ 	height:37px;
+
+}
+#accordion4:last-child a#title-arrow:before{
+	content: "\f105";
+	display:block;
+}
+#accordion4:last-child  {
+	visibility: visible;
+}
+.wid3_font {
+	font-size: 20px;
+	color: #333;
+}
+.wid3 {
+	width: 27px !important;
+	margin-top: 15px !important;
+  position: absolute;
+  cursor:pointer;
+}
+.wid3_font:hover{
+text-decoration: none !important;
+}
+.span_img{
+	position: relative;
+	right: 0px;
+	float: left;
+	left: 48px;
+  top: 11px;
+  cursor:pointer;
+}
+.hide {
+	display: none!important;
+}
+
+.panel_line{
+	margin-bottom: 0em !important;
+    // border: 0.5px solid #fff;
+}
+.left_card {
+	position: inherit;
+}
+.img_drag_box{
+	border: 1px solid #ccc;
+	position: relative;
+	cursor: pointer;
+}
+.image_arr_box{
+	background:#fff;
+	margin:0 auto;
+	text-align:center;
+	display: table;
+}
+.grey_img_box{
+	background: #cecece;
+ cursor: not-allowed;
+}
+.table-responsive .table thead{
+	background:transparent!important;
+}
+th,td{
+	line-height: 11px;
+	height: 30px;
+	vertical-align: top;
+	padding-left: 5px;
+}
+.table-responsive .table thead tr th{
+	vertical-align: top;
+	text-align: left;
+}
+.title_cls{
+	font-size: 14px !important;
+	font-weight: bold;
+	vertical-align: middle;
+	margin: 0 auto;
+	position: absolute;
+	top: 17px;
+	text-transform: uppercase;
+	padding-left: 25px;
+	width: 218px;
+}
+.info_txt{
+	font-size: 14px;
+	text-align: center;
+	font-weight: bold;
+	font-size: italic;
+}
+.checked24{
+	height: 20px;
+}
+.right-content{
+	max-width: 22.5%;
+}
+
+// 10-11-2020
+.comp-head{
+    height: 60.3px !important;
+    overflow: inherit;
+}
+.ht_cls{
+	height: calc(100vh - 305px);
+	.ht_cls{
+		height: 100%;
+	}
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-threesixty-comparison/lauch-threesixty-comparison.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LauchThreesixtyComparisonComponent } from './lauch-threesixty-comparison.component';
+
+describe('LauchThreesixtyComparisonComponent', () => {
+  let component: LauchThreesixtyComparisonComponent;
+  let fixture: ComponentFixture<LauchThreesixtyComparisonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LauchThreesixtyComparisonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LauchThreesixtyComparisonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-threesixty-comparison/lauch-threesixty-comparison.component.ts

@@ -0,0 +1,126 @@
+import { Component, ChangeDetectorRef  } from '@angular/core';
+import { LocalStorage } from "../../core/services/local_storage.service"
+import { HyperService } from '../../core/services/http.service';
+import {Location} from '@angular/common';
+ 
+declare var $:any;
+
+@Component({
+  selector: 'app-lauch-threesixty-comparison',
+  templateUrl: './lauch-threesixty-comparison.component.html',
+  styleUrls: ['./lauch-threesixty-comparison.component.scss']
+})
+export class LauchThreesixtyComparisonComponent  {
+  drop_list_image:any=[];
+  temp_item2:any=[]
+  compare_title:any=[];
+  compare_model_list:any=[];
+  compare_list:any=[]
+  compare_model_arr:any=[];
+  droped_list:any=[];
+  drag_id:number=0;
+  main_model_name:string='';main_model_image:string='';
+  loader:boolean=false;
+  model_name:string;
+  modelClick:any=[];
+  constructor(private cdr: ChangeDetectorRef,private server: HyperService,private loc:Location) {
+    // window.location.reload()
+    this.model_name =  LocalStorage.getValue('model_name')
+    this.getComparison()
+    
+   }
+   drop(ev) {
+    //  console.log("1")
+    ev.preventDefault();
+    var data = ev.dataTransfer.getData("text");
+    ev.target.appendChild(document.getElementById(data));
+    $("#div2").css({"width":"0%","display":"none"});
+   
+  }
+  goBack(){
+    this.loc.back();
+  }
+  allowDrop(ev) {
+    console.log("2")
+     ev.preventDefault();
+    $("#div2").css({"width":"34%","display":"block"});
+  }
+  drop1(ev) {
+    console.log("3")
+     ev.preventDefault();
+    var data = ev.dataTransfer.getData("text");
+    ev.target.appendChild(document.getElementById(data));
+    $("#div2").css({"width":"0%","display":"none"});
+    for(let i=0;i<=this.compare_title.length;i++){
+      $(".elements_"+i).addClass('hide');
+    }
+    // this.clickColapse(i);
+    this.compare_model_arr[this.drag_id].model.value=false;
+    this.droped_list.push(this.compare_model_arr[this.drag_id].category);
+    this.drop_list_image.push(this.compare_model_arr[this.drag_id].model)
+   }
+   addCompareModel(index){
+     this.drag_id=index;
+     console.log(this.drag_id)
+    console.log(this.droped_list.length)
+    
+    if(this.droped_list.length>2){
+      alert("Maximum 3 models to compare")
+    }else{
+      this.compare_model_arr[this.drag_id].model.value=false;
+      this.droped_list.push(this.compare_model_arr[this.drag_id].category);
+      this.drop_list_image.push(this.compare_model_arr[this.drag_id].model)
+    }
+    console.log(this.droped_list,this.compare_title)
+   }
+  allowDrop1(ev) {
+    console.log("1")
+    ev.preventDefault();
+ }
+ 
+  drag(ev) {
+    console.log("1")
+     this.drag_id=ev.target.id;
+     $("#div2").css({"width":"200px","display":"block"});
+    ev.dataTransfer.setData("text", ev.target.id);
+  }
+   
+  
+  getComparison() {
+    this.server.get("explore/comparison/"+LocalStorage.getValue('set_model_id'))
+        .then((data) => {
+            if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                this.compare_list=data.result.data;
+                this.main_model_name=this.compare_list.model.model_name;
+                this.main_model_image=this.compare_list.model.model_image_url;
+                this.compare_title=this.compare_list.category;
+                this.compare_model_arr=this.compare_list.compare_model;
+                this.compare_model_arr.forEach((element,index) => {
+                  element.model.value=true;
+                 });
+           } else if (data.result.status == 401 && data.result.response == 'failed') {
+             } else {
+             }
+        });
+  }
+  clickColapse(i){
+     $(".elements_"+i).toggleClass('show');
+  }
+  removeDragItem(i,item){
+    this.droped_list.splice(i,1)
+    this.drop_list_image.splice(i,1);
+    this.compare_model_arr.forEach((element,index) => {
+      if(item==element.model.model_id){
+       setTimeout(() => {
+        element.model.value=true;
+        }, 500);
+      }
+   });
+  }
+   
+  
+
+
+
+
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-threesixty/lauch-threesixty.component.html

@@ -0,0 +1,78 @@
+<app-main-header></app-main-header>
+<style>
+  .dropdown-menu {
+    min-width: none !important;
+    padding: .5rem 10px !important;
+  }
+
+  .dropdown-item {
+    width: none !important;
+    padding: 0px !important;
+    white-space: normal !important;
+
+
+  }
+
+  .dropdown-item h4 {
+    font-size: 11px !important;
+    font-weight: bold !important;
+  }
+
+  .dropdown-item p {
+    font-size: 10px !important;
+  }
+</style>
+<div class="col-md-12">
+  <div class="row">
+    <div class="col-md-12 mt_25">
+      <a routerLink="/threesixty-dashboard" class="wid3_font">
+        <img src="assets/images/back.png" class="wid3">
+        <span>{{model_name}}</span>
+
+      </a>
+    </div>
+  </div>
+  <div class="left_card" *ngIf="loader">
+    <div class="inner_load">
+      <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+        <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      <p>Just a moment...</p>
+    </div>
+  </div>
+  <div class="row degree_top" *ngIf="!loader">
+    <!-- <div class="col-md-2">
+        <div id="content">
+          <div class="circle_sales black">1
+            <div class="big_button_back big_button_5">LEFT</div>
+          </div>
+          <div class="circle_sales black">2
+            <div class="big_button_back big_button_5">RIGHT</div>
+          </div>
+
+        </div>
+      </div> -->
+    <div class="col-md-12">
+      <div id="quotescointainer">
+        <div id="quotescenter" class="flex flex-center">
+          <div class="threesixty" data-count="24">
+            <div class="ui-spinner">
+              <span class="side side-left">
+                <span class="fill"></span>
+              </span>
+              <span class="side side-right">
+                <span class="fill"></span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<app-footer></app-footer>
+<app-sidemenu></app-sidemenu>

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-threesixty/lauch-threesixty.component.scss

@@ -0,0 +1,564 @@
+.dashboard.dse{
+    slideshow{
+        height: calc(100% - 200px);
+    }
+}
+.dashboard{
+    width: 100%;
+    height:calc(100% - 85px);
+    slideshow {
+        width: 100%;
+        height: calc(100% - 253px);
+        float: left;
+    }
+    .bottom_content{
+        width:100%;
+        height:200px;
+        float: left;
+        // background-color: #ccc;
+        padding:0 80px;
+        .row{
+            // width: 1000px;
+            // margin: auto;
+            height:100%;
+            .col{
+                width: 300px;
+                height:170px;
+                margin:0 20px; 
+                border-radius:10px;
+                box-shadow: 0px 0px 9px 3px #e2dede;
+                background-color: #fff;
+                padding: 20px;
+                .title{
+                    font-size: 14px;
+                    color:#333;
+                    float: left;
+                    width:100%;
+                }
+                .box_left{
+                    width:calc(100% - 57px);
+                    margin-top: 15px;
+                    float: left;
+                    position: relative;
+                    svg {
+                        width: 100px;
+                        float: left;
+                        top: 0;
+                        height: 100px;
+                    }
+                    // .timer {
+                    //     position: absolute;
+                    //     top: 0;
+                    //     left: 0;
+                    //     bottom: 0;
+                    //     left: 5px;
+                    //     width: 70px;
+                    //     height: 55px;
+                    //     margin: auto;
+                    //     font-size: 36px;
+                    //     color: #28a8e0;
+                    //     text-align: center;
+                    // }
+                    .load_content{
+                        float: left;
+                        margin-top: 20px;
+                        margin-left: 10px;
+                        h6{
+                            font-size: 14px;
+                            color: #28a8e0;
+                        }
+                        p{
+                            font-size: 12px;
+                            color: #28a8e0;
+                        }
+                    }
+                }
+                .box_right{
+                    background-color: #28a8e0;
+                    width: 120px;
+                    height: 100%;
+                    float: right;
+                    position: absolute;
+                    right:0;
+                    top:0;
+                    border-bottom-right-radius: 10px;
+                    border-top-right-radius: 10px;
+                    padding: 10px;
+                    text-align: center;
+                    img{
+                        width: 30px;
+                        cursor: pointer;
+                    }
+                    p{
+                        color:#fff;
+                        font-size: 24px;
+                        margin: 0;
+                        padding: 10px 0;
+                    }
+                }
+            }
+            .learning{
+                .box_left{
+                    margin: 0;
+                    position: relative;
+                    height: 42%;
+                    .load_content{
+                        margin:auto;
+                        position: absolute;
+                        width: 200px;
+                        height: 65px;
+                        left:0;
+                        right:0;
+                        top:0;
+                        bottom: 0;
+                        text-align: center;
+                        h1{
+                            font-size: 50px;
+                            span{
+                                font-size: 30px;
+                            }
+                        }
+                    }
+                }
+                .box_right{
+                    img{
+                        width: 70px;
+                        margin-top: 40px;
+                    }
+                }
+            }
+        }
+        .loader {
+        border: 5px solid #ccc;
+        border-radius: 50%;
+        border-top: 5px solid #28a8e0;
+        width: 80px;
+        height: 80px;
+        // -webkit-animation: spin 2s linear infinite; /* Safari */
+        // animation: spin 2s linear infinite;
+        float: left;
+        }
+        
+        /* Safari */
+        // @-webkit-keyframes spin {
+        // 0% { -webkit-transform: rotate(0deg); }
+        // 100% { -webkit-transform: rotate(360deg); }
+        // }
+        
+        // @keyframes spin {
+        // 0% { transform: rotate(0deg); }
+        // 100% { transform: rotate(360deg); }
+        // }
+        .path:after {
+            width: 92%;
+            height: 2px;
+            background-color: transparent;
+            content: "";
+            left: 5%;
+            z-index: -1;
+            position: absolute;
+            top: 8px;
+            box-shadow: 0 -4px 5px 1px #d0cece;
+        }
+        .pointer:before {
+            width: 8px;
+            height: 8px;
+            content: "";
+            // background-color: #999;
+            position: absolute;
+            right: -5px;
+            border-top-left-radius: 50%;
+            // border-left: 3px solid #dad7d7;
+            border-top-right-radius: 50%;
+        }
+        .path{
+            width: 242px;
+            margin: auto;
+            height: 75px;
+            /* position: relative; */
+            position: absolute;
+            z-index: 99;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            .type_name{
+                width: 100%;
+                float: left;
+                p{
+                    float: left;
+                    width: 24.5%;
+                    text-align: center;
+                    font-size: 12px;
+                    font-weight: bold;
+                    font-style: italic;
+                    margin-top: 10px;
+                }
+            }
+        }
+        .pointer.grey{
+            background-color: #dad7d7;
+        }
+        .pointer.grey:before{
+            background-color: #999;
+            border-left: 3px solid #dad7d7;
+        }
+        .pointer.grey:after{
+            border-top: 10px solid #dad7d7;
+        }
+        .pointer.orange{
+            background-color: orange;
+        }
+        .pointer.orange:before{
+            background-color: #cc8504;
+            border-left: 3px solid orange;
+        }
+        .pointer.orange:after{
+            border-top: 10px solid orange;
+        }
+        .pointer.green{
+            background-color: green;
+        }
+        .pointer.green:before{
+            background-color: #036303;
+            border-left: 3px solid green;
+        }
+        .pointer.green:after{
+            border-top: 10px solid green;
+        }
+        .pointer.red{
+            background-color: red;
+        }
+        .pointer.red:before{
+            background-color: #a90606;
+            border-left: 3px solid red;
+        }
+        .pointer.red:after{
+            border-top: 10px solid red;
+        }
+        .pointer {
+            width: 35px;
+            height: 80px;
+            position: relative;
+            // background: red;
+            border-top-left-radius: 4px;
+            float: left;
+            margin: 0 5%;
+            // .poly{
+            //     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+            // }
+            .poly {
+                width: 50px;
+                height: 50px;
+                background: transparent;
+                float: left;
+                position: absolute;
+                bottom: -5px;
+                z-index: 99;
+                left: -8px;
+                svg{
+                    float: left;
+                    margin: 0;
+                    width: 100%;
+                    height: 100%;
+                }
+                .types{
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    margin: auto;
+                    width: 40px;
+                    height: 50px;
+                    left: 0;
+                    right: 0;
+                    text-align: center;
+                    font-size: 30px;
+                }
+            }
+            // .poly:before {
+            //     content: "";
+            //     position: absolute;
+            //     top: -15px;
+            //     left: 0;
+            //     width: 0;
+            //     height: 0;
+            //     border-left: 30px solid transparent;
+            //     border-right: 30px solid transparent;
+            //     border-bottom: 15px solid blue;
+            // }
+            // .poly:after {
+            //     content: "";
+            //     position: absolute;
+            //     bottom: -15px;
+            //     left: 0;
+            //     width: 0;
+            //     height: 0;
+            //     border-left: 30px solid transparent;
+            //     border-right: 30px solid transparent;
+            //     border-top: 15px solid blue;
+            // }
+          }
+          .pointer:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 0;
+            height: 0;
+            border-left: 17px solid white;
+            border-top: 10px solid red;
+            border-right: 18px solid white;
+          }
+        //   .pointer:before {
+        //     content: "";
+        //     position: absolute;
+        //     right: -20px;
+        //     bottom: 0;
+        //     width: 0;
+        //     height: 0;
+        //     border-left: 20px solid transparent;
+        //     border-top: 20px solid transparent;
+        //     border-bottom: 20px solid red;
+        //   }
+    }
+}
+@media screen and (max-width: 768px) {
+    .dashboard{
+        width: 100%;
+        height: auto;
+        margin-top: 53px;
+        overflow: scroll;
+        slideshow{
+            height: 300px;
+        }
+    }
+}
+@media screen and (max-width: 768px) {
+    .dashboard {
+        height: 100%;
+        float: left;
+        padding-top: 53px;
+        overflow-y: scroll;
+        slideshow{
+            height: 200px;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+				/*sales*/
+				.circle_sales .big_button_5{
+					display: block;
+                    width: 60%;
+                    cursor: pointer;
+						}
+						.circle_sales:hover{
+							background-color: #49494a;  
+						}
+
+
+				.circle_sales {
+					width: 60px;
+					height: 60px;
+					line-height: 60px;
+					border-radius: 50%; /* the magic */
+					-moz-border-radius: 50%;
+					-webkit-border-radius: 50%;
+					text-align: center;
+					color: white;
+					font-size: 16px;
+					text-transform: uppercase;
+					font-weight: 700;
+					margin: 0 auto 40px;
+                    cursor: pointer;             
+                    margin: 0px auto 33px;
+					}
+				.big_button_1 {
+					background-color: #3498db !important;  
+					}
+
+					.big_button_back {
+						display: inline-block;
+						padding: 6px 12px 6px 38px;
+						margin-bottom: 0;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 1.42857143;
+						text-align: center;
+						white-space: nowrap;
+						vertical-align: middle;
+						-ms-touch-action: manipulation;
+						touch-action: manipulation;
+						cursor: pointer;
+						color: #fff;
+						border-color: #49494a !important;
+						margin: -46px 30px !important;
+						border-radius: 28px !important;
+						position: absolute;
+						z-index: -1;
+						display: none;
+				}
+
+
+	.hide{
+		display:none;
+        }
+        
+// jannai
+
+        .varient_box{
+            float: right;
+            right: 59px;
+            position: absolute;
+            bottom: 64px;
+				}
+			
+        button.btn.btn-primary.big_button1{
+					background-color: #28a8e0!important;
+					width: 30% !important;
+					font-size: 12px;;
+					height: 42px;					
+					margin: 20px 4px !important;
+					border-radius: 16px !important;
+			}
+        .big_button.big_button_1.active {
+            display: block;
+        }
+
+        .black{
+            background-color: #49494a;
+          }
+        
+        .big_button{	
+            display: inline-block;
+            padding: 6px 12px 6px 38px;
+            margin-bottom: 0;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 1.42857143;
+            text-align: center;
+            white-space: nowrap;
+            vertical-align: middle;
+            -ms-touch-action: manipulation;
+            touch-action: manipulation;
+            cursor: pointer;
+            color: #fff;
+            border-color: #49494a !important;
+            margin: 15px 30px !important;
+            border-radius: 28px !important;
+            position: absolute;
+            z-index: -1;
+            display: none;
+        
+          }
+         
+      
+            .big_button_5{
+                background-color: #49494a !important;  
+                }
+            
+          .circle .big_button_1 .active{
+        display: block;
+        
+          }
+          .circle:hover .big_button_2 {
+            display: block;
+            
+              }
+              .circle:hover  .big_button_3 {
+                display: block;
+                
+                  }
+                  .circle:hover .big_button_4{
+                    display: block;
+                    
+                        }
+        
+                        .mt_25 {
+                            margin-top: 15px;
+                        }           
+        .wid66{
+            width: 50%;
+            margin: auto;
+            display: block;
+        }
+        
+        .padding {
+            padding: 0px;
+            margin: 19px 0px;
+            color: #888;
+        }
+
+        .wid3_font {
+            font-size: 20px;
+            color: #333;
+        }
+        .wid3 {
+            width: 38px !important;
+            margin-top: 0px !important;
+        }
+.wid3_font:hover{
+    text-decoration: none !important;
+}
+        #content {
+            margin: 40px auto;
+            text-align: center;
+            width: 100%;
+        }
+        
+        .degree_top{
+            top: 5px;
+            position: absolute;           
+            left: 262px;
+        }
+        .left_card {
+            position: inherit;
+            top: 193px;
+
+        }
+        //////// spinner ///////////
+        .ui-spinner {
+            position: relative;
+            border-radius: 100%;
+        
+            .side {
+                width: 50%;
+                height: 100%;
+                overflow: hidden;
+                position: absolute;
+        
+               .fill {
+                    border-radius: 999px;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                   
+                }
+            }
+        
+            .side-left {
+                left: 0;
+        
+                .fill {
+                    left: 100%;
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+                    
+                }
+            }
+        
+            .side-right {
+                left: 50%;
+        
+                
+            }
+        }

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-threesixty/lauch-threesixty.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LauchThreesixtyComponent } from './lauch-threesixty.component';
+
+describe('LauchThreesixtyComponent', () => {
+  let component: LauchThreesixtyComponent;
+  let fixture: ComponentFixture<LauchThreesixtyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LauchThreesixtyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LauchThreesixtyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/lauch-threesixty/lauch-threesixty.component.ts

@@ -0,0 +1,78 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { LocalStorage } from "../../core/services/local_storage.service"
+import { HyperService } from '../../core/services/http.service';
+import { Router } from "@angular/router";
+import * as moment from 'moment';
+import { ImageClass } from '../custom-threesixty';
+import {Location} from '@angular/common';
+ 
+import $ from 'jquery'
+declare var $: $
+import { CONFIG } from '../../../app/config';
+@Component({
+  selector: 'app-lauch-threesixty',
+  templateUrl: './lauch-threesixty.component.html',
+  styleUrls: ['./lauch-threesixty.component.scss']
+})
+export class LauchThreesixtyComponent  {
+    itemList: any = []
+    variantColors: any = []
+    loader:boolean=false;
+    model_name:string;
+    constructor(private server: HyperService, private router: Router, private icls: ImageClass,private loc:Location) {
+        this.icls.loaded();
+    }
+
+    ngOnInit() {
+       this.model_name =  LocalStorage.getValue('model_name')
+       this.get360Images()
+    }
+    goBack(){
+        this.loc.back();
+    }
+    get360Images() {
+        this.loader=true;
+        this.server.get("explore/newimages360/"+LocalStorage.getValue('set_model_id'))
+            .then((data) => {
+                // console.log(data.result.data)
+                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                    this.variantColors = data.result.data;
+                    this.loader=false;
+                   this.colorVariant(this.variantColors[0])
+                    // let height = $(".threesixty").height();
+                    // let newWidth = (height / 100) * 155;
+                    // console.log(newWidth)
+                    // $('.threesixty').css({
+                    //     width:newWidth+'%',height:height+'%'
+                    // });
+                    // let wid = newWidth/ 100;
+                    // let hei = height/ 100.0;
+                    // console.log(wid,hei)
+                    
+
+                    // imageurl = data.result.data.zip.substr(0, data.result.data.zip.lastIndexOf('/'))
+                   
+                } else if (data.result.status == 401 && data.result.response == 'failed') {
+                    this.router.navigateByUrl('');
+                } else {
+                    this.loader=false;
+                    alert(data.result.message)
+                    CONFIG.image360Sources = [];
+                    this.router.navigateByUrl('threesixty-dashboard')
+                }
+            });
+    }
+    colorVariant(clrValue){
+        let imageurl: string;
+        let itemList:any=[]
+        CONFIG.image360Sources = [];
+        // console.log(clrValue)
+        itemList = clrValue.imagelist
+        // console.log(itemList.length)
+        for(let i=0;i<itemList.length;i++){
+            imageurl = itemList[i]
+            CONFIG.image360Sources.push(imageurl)
+        }
+        // console.log(CONFIG.image360Sources)
+    }
+  }

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-brochure/launch-brochure.component.html

@@ -0,0 +1,21 @@
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<div class="enquiry" [ngStyle]="{background: 'url(' + image  + ') no-repeat center  center'}" >
+
+<div class="container-fluid no-padding">
+    <div class="left_card" *ngIf="loader">
+        <div class="inner_load"  >
+          <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+            <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+              <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"
+              />
+            </path>
+          </svg>
+          <p>Just a moment...</p>
+        </div>
+      </div>
+
+    <button type="button" class="btn-primary btn_bg" (click)="clickExcelDownloadpdf(brochure_pdf)"><i class="fa fa-download" aria-hidden="true" ></i> Download brochure</button>
+  </div>
+</div>
+<iframe width="0" height="0" [src]="excelExport()"></iframe>

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-brochure/launch-brochure.component.scss

@@ -0,0 +1,35 @@
+.no-padding {
+    padding-left: 0;
+    padding-right: 0;
+  }
+.wid{
+    width:auto;
+    height:60%;
+    margin: 0px auto;
+    display: block
+}
+.btn_bg{
+    border-radius: 12px;
+    padding: 5px;
+    position: absolute;
+    top: 86%;
+    right: 20px;
+    width: 12%;
+    font-size: 12px;
+}
+.home{
+    position: absolute;
+    top: 6px;
+    left: 102px;
+}
+.left_card {
+    position: inherit;
+    top: 193px;
+}
+
+.enquiry{
+  background-size: cover;
+  float: left;
+  width: 100%;
+  height: 100%;
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-brochure/launch-brochure.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LaunchBrochureComponent } from './launch-brochure.component';
+
+describe('LaunchBrochureComponent', () => {
+  let component: LaunchBrochureComponent;
+  let fixture: ComponentFixture<LaunchBrochureComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LaunchBrochureComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LaunchBrochureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-brochure/launch-brochure.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+import { LocalStorage } from "../../core/services/local_storage.service"
+import { HyperService } from '../../core/services/http.service';
+import { Router,ActivatedRoute } from "@angular/router";
+import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
+import * as moment from 'moment';
+@Component({
+  selector: 'app-launch-brochure',
+  templateUrl: './launch-brochure.component.html',
+  styleUrls: ['./launch-brochure.component.scss']
+})
+export class LaunchBrochureComponent implements OnInit {
+  sub: any;
+  model:any;
+  varient:any;
+  token:any;
+  image:string='';
+  brochure_pdf:any;
+  loader:boolean=false;
+  constructor(private route: ActivatedRoute,private server: HyperService, private router: Router, private sanitizer: DomSanitizer) {
+    this.sub = this.route.params.subscribe(params => {
+      this.model = params['model'];
+      this.varient = params['varient'];
+      this.token = params['token'];
+
+      // console.log(this.token,"this.token")
+  });
+  LocalStorage.setValue('brochure_token',this.token)
+  // console.log(this.model,this.varient,this.token)
+   }
+
+  ngOnInit() {
+    this.getComparison()
+  }
+  getComparison() {
+    this.loader=true;
+    this.server.getBrochure("explore/model")
+        .then((data) => {
+            if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+              this.loader=false;
+
+                data.result.data.forEach(element => {
+                  if(this.model==element.model_id){
+                    this.image=element.model_banner_image_url;
+                    this.brochure_pdf=element.model_brochure;
+                  }
+                });
+                // setTimeout(() => this.brochure_pdf = "", 1000);
+                // this.excelExport();
+              } else if (data.result.status == 401 && data.result.response == 'failed') {
+                this.loader=false;
+             } else {
+              this.loader=false;
+              alert(data.result.message)
+             }
+        });
+  }
+  clickExcelDownloadpdf(brochure_pdf){
+    // this.brochure_pdf=this.brochure_pdf;
+    // setTimeout(() => this.brochure_pdf = "", 1000);
+    // this.excelExport();
+    window.open(brochure_pdf, '_blank')
+  }
+  excelExport() {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(this.brochure_pdf);
+  }
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-personalize/launch-personalize.component.html

@@ -0,0 +1,243 @@
+<app-main-header></app-main-header>
+<div class="col-md-12 set_window">
+  <div class="row">
+    <div class="col-md-12 mt_25">
+      <div class="col-md-6 float-left pad-l0" >
+        <a routerLink="/threesixty-dashboard" class="wid3_font">
+          <img src="assets/images/back.png" class="wid3">
+          <span class="capi">{{model_name}}</span>
+        </a>
+      </div>
+      <!-- <div class="box_panel text-center big_button big_button_1" [ngStyle]="{'background-color':color.color}" [ngClass]="(is_selected_color[j]=='selected')?'active':'' " *ngFor="let color of color_list;let j=index"> {{color.color_title}}</div>-->
+      <div class="col-md-6 float-left">
+        <div class="tab">
+          <ul class="tab_list">
+            <li [ngClass]="{'active_tab':selectedId==1}">
+              <a  (click)="setTab('1')">Color</a>
+            </li>
+            <li [ngClass]="{'active_tab':selectedId==2}">
+              <a  (click)="setTab('2')"> Accessories</a>
+            </li>
+          </ul>
+        </div>
+        <div class="zmdropdown">
+          <select [(ngModel)]="vehicle_name" (ngModelChange)='vehicleChange($event)'>
+            <!-- <option value="all">All</option> -->
+            <option *ngFor="let varient of varient_list;let i = index;" [ngValue]="i">{{varient.title}}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="left_card" *ngIf="loader">
+    <div class="inner_load">
+      <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+        <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      <p>Just a moment...</p>
+    </div>
+  </div>
+  <div class="row" *ngIf="!loader && selectedId==1 " >
+    <div class="col-md-4 mt_50 new_category">
+      <div id="content">
+        <div class="circle" *ngFor="let color of color_list;let j=index" [ngStyle]="{'background-color':color.color}" (click)="clickColor(j,color)">
+          <div class="circle_inner " [ngStyle]="{'background-color':color.color}" [ngClass]="(is_selected_color[j]=='selected')?'active':'' ">
+          </div>
+          <!-- <div class="hover_title" [ngClass]="(is_selected_color[j]=='selected')?'active':'' " [ngStyle]="{'background-color':color.color}"> -->
+              <div class="hover_title active" style="background-color: white">
+            <p>{{color.color_title}}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-8 mt_50" *ngIf="color_list.length>0">
+      <div class="img_height">
+        <img src={{image_url}} alt="{{model_name}}" class="lg-image" title="{{model_name}}">
+      </div>
+      <!-- <div class='text-center'><p class="model-name">{{model_name}} </p></div>    -->
+    </div>
+
+  </div>
+  <div class="row" id="accessories" *ngIf="!loader && selectedId==2 ">
+    <div class="col-md-12">
+      <div class="row">
+        <div class="col-md-6 float-left">
+
+          <div class="accessories">
+            <ul class="accessories_list">
+              <li [ngClass]="{'active_accessories':selected_accessories==1}">
+                <a (click)="setInnerTab('1')">Vehicle</a>
+              </li>
+              <li [ngClass]="{'active_accessories':selected_accessories==2}">
+                <a (click)="setInnerTab('2')"> Riders</a>
+              </li>
+            </ul>
+
+          </div>
+        </div>
+        <div class="col-md-6 float-left" *ngIf="selected_accessories==2">
+          <select class="form-control category_select" id="sel1" (change)="selectCategory($event.target.value)"  [(ngModel)]="category_id">
+            <option *ngFor="let category of ridersDataCategory;let i=index" value={{category.id}}> {{category.cat_title}}</option>
+            </select>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-12" *ngIf="!loader && selected_accessories==1 && bikersPreviewImage.length>0">
+      <div class="biker">
+        <div class="col-md-12 outer_margin">
+          <div class="col-md-6 access_center">
+            <div class="access_right">
+              <div class="access_img">
+                <img src={{bikersPreviewImage[0].image_url}} class="img-responsive" alt="Skid_plate" title="Skid_plate">
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6 float-left">
+            <div class="content_data">
+            <p class="product_name">{{bikersPreviewImage[0].title}}</p>
+            <!-- <p class="product_no">{{bikersPreviewImage[0].description}}</p>
+            <h4 class="product_price">INR {{bikersPreviewImage[0].price}}/-</h4> -->
+          </div>
+          </div>
+        </div>
+        <div class="col-md-12 float-left">
+          <!-- Top content -->
+          <div class="top-content">
+            <div class="container-fluid top_outer">
+              <div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="false">
+                <div class="carousel-inner row" role="listbox">
+                  <div class="carousel-item scroll_img" *ngFor="let bikes of bikersData;let i=index;" [ngClass]="{'active':bikes.id==activeSlide}">
+                    <img src={{bikes.image_url}} class="img-fluid mx-auto d-block" alt="{{bikes.image}}" (click)=loadPreview(bikes)>
+                  </div>
+                </div>
+                <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev" *ngIf="bikersData.length>4">
+                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                  <span class="sr-only">Previous</span>
+                </a>
+                <a class="carousel-control-next"  href="#carousel-example" role="button" data-slide="next" *ngIf="bikersData.length>4">
+                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                  <span class="sr-only">Next</span>
+                </a>
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+    <div class="col-md-12 float-left" *ngIf="bikersPreviewImage.length==0 && selected_accessories==1">
+
+        <div class="no_record">
+            <div class="col-md-12 float-left">
+                <img src="assets/images/warning.png" alt="No Record" title="No Record">
+            </div>
+            <div class="col-md-12 float-left">
+                <p>No Records Found</p>
+            </div>
+
+
+
+
+
+      </div>
+    </div>
+    <div class="col-md-12" *ngIf="!loader && selected_accessories==2 && ridersPreviewImage.length>0">
+
+      <div class="rider">
+
+          <div class="col-md-12 outer_margin">
+              <div class="col-md-6 access_center">
+                <div class="access_right">
+                  <div class="access_img">
+                    <img src={{ridersPreviewImage[0].image_url}} class="img-responsive" alt="Skid_plate" title="Skid_plate">
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6 float-left">
+                <div class="content_data">
+                <p class="product_name">{{ridersPreviewImage[0].title}}</p>
+                <!-- <p class="product_no">{{ridersPreviewImage[0].description}}</p>
+                <h4 class="product_price">INR {{ridersPreviewImage[0].price}}/-</h4> -->
+              </div>
+              </div>
+            </div>
+
+
+
+            <div class="col-md-12 float-left">
+                <!-- Top content -->
+                <div class="top-content">
+                  <div class="container-fluid top_outer">
+                    <div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="false">
+                      <div class="carousel-inner row" role="listbox">
+                        <div class="carousel-item scroll_img" *ngFor="let riders of ridersImage;let i=index;" [ngClass]="{'active':riders.id==activeInSlide}" (click)="ridersPreview(riders)">
+                          <img src={{riders.image_url}} class="img-fluid mx-auto d-block" >
+                        </div>
+                      </div>
+                      <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev" *ngIf="ridersImage.length>4">
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Previous</span>
+                      </a>
+                      <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next" *ngIf="ridersImage.length>4">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Next</span>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+      </div>
+    </div>
+    <div *ngIf="ridersPreviewImage.length==0 && selected_accessories==2">
+        <div class="no_record">
+            <div class="col-md-12 float-left">
+                <img src="assets/images/warning.png" alt="No Record" title="No Record">
+            </div>
+            <div class="col-md-12 float-left">
+                <p>No Records Found</p>
+            </div>
+
+
+
+
+
+      </div>
+    </div>
+  </div>
+
+</div>
+<!-- <div class="col-md-12  text-center mt_100"> -->
+<!-- <button type="button" class="btn btn-primary big_button1" *ngFor="let varient of varient_list;let i=index" (click)="clickVarient(i)" [ngClass]="(is_selected[i]=='selected')?'active':'' "> {{varient.title}}</button> -->
+<!-- <button type="button" class="btn btn-primary big_button1 active"  > {{varient_list[0].title}}</button>  -->
+<!-- <button type="button" class="btn btn-primary big_button1 active"  > Bikers</button>
+    <button type="button" class="btn btn-primary big_button1 active"  > Riders</button>  -->
+<!-- </div> -->
+<!-- <div class="col-md-12 float-right padl_0 scroll_bottombox">
+  <div class="image_arr_box">
+    <div class="img_drag_box">
+      <img class="bot_img_cls drag_fixed_img" src="https://hyper-m.cygnusa.in/explore_assets/model/web/02_Yamaha-FZ-S-Ver.-3.png">
+      <span class="mod_nme_cls">
+        <h6>Bikers </h6>
+      </span>
+
+    </div>
+    <div class="img_drag_box">
+      <img class="bot_img_cls drag_fixed_img" src="https://hyper-m.cygnusa.in/explore_assets/model/web/02_Yamaha-FZ-S-Ver.-3.png">
+      <span class="mod_nme_cls">
+        <h6>Riders </h6>
+      </span>
+
+
+    </div>
+  </div>
+
+</div> -->
+
+<app-footer></app-footer>
+<app-sidemenu></app-sidemenu>

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-personalize/launch-personalize.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LaunchPersonalizeComponent } from './launch-personalize.component';
+
+describe('LaunchPersonalizeComponent', () => {
+  let component: LaunchPersonalizeComponent;
+  let fixture: ComponentFixture<LaunchPersonalizeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LaunchPersonalizeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LaunchPersonalizeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-personalize/launch-personalize.component.ts

@@ -0,0 +1,232 @@
+import { Component, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { LocalStorage } from "../../core/services/local_storage.service"
+import { HyperService } from '../../core/services/http.service';
+import { Location } from '@angular/common';
+declare var $: any;
+
+@Component({
+  selector: 'app-launch-personalize',
+  templateUrl: './launch-personalize.component.html',
+  styleUrls: ['./launch-personalize.component.scss']
+})
+export class LaunchPersonalizeComponent {
+  varient_list: any = [];
+  color_list: any = [];
+  image_url: string = '';
+  is_selected: any = [];
+  is_selected_color: any = [];
+  loader: boolean = false;
+  model_name: string;
+  selectedId: any;
+  selected_accessories: any;
+  images: any = [];
+  bikersData: any = [];
+  ridersData:any=[];
+  ridersDataCategory:any=[]
+  activeSlide: number = 1;
+  activeInSlide: number = 1;
+  category_id:number;
+  ridersImage:any=[];
+  ridersPreviewImage:any=[];
+  bikersPreviewImage:any=[]
+  load_bike_preview:string='';
+  vehicle_name;
+  constructor(private server: HyperService, private loc: Location, private elementRef: ElementRef) {
+   
+  }
+  ngOnInit() {
+    $('#carousel-example').on('slide.bs.carousel', function (e) {
+      console.log("here")
+      var $e = $(e.relatedTarget);
+      var idx = $e.index();
+      var itemsPerSlide = 5;
+      var totalItems = $('.carousel-item').length;
+      console.log(totalItems.length)
+      console.log(idx)
+      if (idx >= totalItems - (itemsPerSlide - 1)) {
+
+        var it = itemsPerSlide - (totalItems - idx);
+        for (var i = 0; i < it; i++) {
+          // append slides to end
+          if (e.direction == "left") {
+            $('.carousel-item').eq(i).appendTo('.carousel-inner');
+          }
+          else {
+            $('.carousel-item').eq(0).appendTo('.carousel-inner');
+          }
+        }
+      }
+    });
+    this.getPersonalise();
+    // this.clickVarient(0);
+    this.is_selected[0] = "selected";
+    this.is_selected_color[0] = 'selected';
+    this.model_name = LocalStorage.getValue('model_name')
+    this.setTab('1')
+    this.selected_accessories = 1;
+    // this.activeSlide = 1;
+    // this.activeInSlide =1;
+  }
+
+  getPersonalise() {
+    this.loader = true;
+    this.server.get("explore/variant/" + LocalStorage.getValue('set_model_id'))
+      .then((data) => {
+        if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+          this.loader = false;
+          this.varient_list = data.result.data;
+          this.clickVarient(0);
+          this.vehicle_name = 0;
+          console.log(this.vehicle_name)
+        } else if (data.result.status == 401 && data.result.response == 'failed') {
+
+        } else {
+          this.loader = false;
+          alert(data.result.message)
+        }
+      });
+  }
+
+
+  hitAnchor1(e) {
+    console.log("Events", e);
+    alert("You have clicked the anchor-1 tag");
+
+  }
+  hitAnchor2(e) {
+    console.log("Events", e);
+    alert("You have clicked the anchor-2 tag");
+  }
+
+  vehicleChange(e){
+    console.log(e)
+    this.clickVarient(e);
+  }
+  clickVarient(i) {
+    // 
+    setTimeout(() => {
+      // for (let i = 0; i <= this.varient_list.length; i++) {
+      //   this.is_selected[i] = ""
+      // }
+      this.is_selected[i] = "selected"
+      this.color_list = this.varient_list[i].color;
+      console.log(this.color_list)
+      this.clickColor(0, this.color_list[0])
+    }, 500)
+
+  }
+  clickColor(i, color) {
+    for (let i = 0; i <= this.color_list.length; i++) {
+      this.is_selected_color[i] = ""
+    }
+    this.is_selected_color[i] = "selected"
+    this.image_url = color.image_url;
+  }
+  goBack() {
+    this.loc.back();
+  }
+  setTab(id) {
+    this.selectedId = id;
+    if (this.selectedId == 2) {
+      this.getBikersData()
+    }
+
+  }
+
+
+  getBikersData() {
+    this.server.get("explore/accessories_bikes/" + LocalStorage.getValue('set_model_id'))
+      .then((data) => {
+        console.log(data)
+        if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+          this.bikersData = data.result.data.data;
+          for (let i = 0; i < this.bikersData.length; i++) {
+            this.activeSlide = this.bikersData[i].id
+          }
+          this.activeSlide = this.bikersData[0].id;
+          console.log(this.activeSlide)
+          this.loadPreview(this.bikersData[0])
+        } else if (data.result.status == 401 && data.result.response == 'failed') {
+
+        } else {
+        }
+      });
+  }
+  setInnerTab(id) {
+    this.selected_accessories = id;
+    if (this.selected_accessories == 1) {
+      this.getBikersData()
+     }else if (this.selected_accessories == 2) {
+      this.getRidersData()
+      this.category_id=1;
+    }
+  }
+  getRidersData() {
+    this.server.get("explore/accessories_riders")
+    .then((data) => {
+      console.log(data)
+      if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+        this.ridersData = data.result.data.data;
+        this.ridersDataCategory = data.result.data.category;
+        this.selectCategory()
+      } else if (data.result.status == 401 && data.result.response == 'failed') {
+
+      } else {
+      }
+    });
+  }
+
+  selectCategory(){
+    console.log(this.category_id)
+    this.ridersImage=[];
+    for (let i = 0; i < this.ridersData.length; i++) {
+      if(this.ridersData[i].cat_id==this.category_id){
+        
+        let obj:any={};
+        obj.image_url = this.ridersData[i].image_url;
+        obj.id = this.ridersData[i].id;
+        obj.title = this.ridersData[i].title;
+        obj.price = this.ridersData[i].price;
+        obj.description = this.ridersData[i].description;
+        this.ridersImage.push(obj);
+      }
+      
+    }
+    console.log(this.ridersImage)
+    for (let j = 0; j < this.ridersImage.length; j++) {
+      this.activeSlide = this.ridersImage[j].id
+    }
+    this.activeInSlide = this.ridersImage[0].id;
+    this.ridersPreview(this.ridersImage[0])
+  }
+  ridersPreview(item){
+    console.log(item)
+    this.ridersPreviewImage=[];
+    for(let i=0;i<this.ridersImage.length;i++){
+      if(this.ridersImage[i].id==item.id){
+        let obj:any={};
+        obj.image_url = this.ridersImage[i].image_url;
+        obj.id = this.ridersImage[i].id;
+        obj.title = this.ridersImage[i].title;
+        obj.price = this.ridersImage[i].price;
+        obj.description = this.ridersImage[i].description;
+        this.ridersPreviewImage.push(obj);
+      }
+    }
+    console.log(this.ridersPreviewImage)
+  }
+  loadPreview(bike){
+    this.bikersPreviewImage=[];
+  for(let i=0;i<this.bikersData.length;i++){
+    if(this.bikersData[i].id==bike.id){
+      let obj:any={};
+      obj.image_url = this.bikersData[i].image_url;
+        obj.id = this.bikersData[i].id;
+        obj.title = this.bikersData[i].title;
+        obj.price = this.bikersData[i].price;
+        obj.description = this.bikersData[i].description;
+        this.bikersPreviewImage.push(obj);
+    }
+  }
+ }
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-sales/launch-sales.component.html

@@ -0,0 +1,107 @@
+<app-main-header></app-main-header>
+<div class="col-md-12">
+  <div class="row">
+    <div class="col-md-12 mt_25">
+
+        <a routerLink="/threesixty-dashboard" class="wid3_font">
+          <img src="assets/images/back.png" class="wid3"> <span>{{model_name}}</span>
+
+        </a>
+
+    </div>
+  </div>
+  <div class="left_card" *ngIf="loader">
+      <div class="inner_load"  >
+        <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+          viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+          <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"
+            />
+          </path>
+        </svg>
+        <p>Just a moment...</p>
+      </div>
+    </div>
+  <div class="row" *ngIf="!loader">
+    <div class="col-md-2">
+      <div id="content">
+          <div class="circle_sales black" *ngFor="let sales of salesList;let i=index"  (click)="rotateImage(sales)">{{i+1}}
+              <div class="big_button_back big_button_5" [ngClass]="imageID==sales.id?'highlight':''">{{sales.title}}</div>
+            </div>
+        <!-- <div class="circle_sales black" (click)="rotateImage('2')">2
+          <div class="big_button_back big_button_5">RIGHT</div>
+        </div>
+        <div class="circle_sales black" (click)="rotateImage('3')">3
+          <div class="big_button_back big_button_5">FRONT</div>
+        </div>
+        <div class="circle_sales black" (click)="rotateImage('4')">4
+          <div class="big_button_back big_button_5">REAR</div>
+        </div>
+        <div class="circle_sales black" (click)="rotateImage('5')">5
+          <div class="big_button_back big_button_5">TOP</div>
+        </div> -->
+      </div>
+    </div>
+    <div class="col-md-10 degree_top">
+      <div class="lg-container" *ngIf="salesList.length>0">
+        <div class="img_height" *ngIf="activeClass">
+          <img class="lg-image wid66" src={{imageUrl}}>
+          <!-- <img src="../.assets/images/back.png" class="wid3 col-md-2 img-responsive"> -->
+          <div *ngFor="let hotspot of imageHotspot;let j=index" [ngStyle]="{'top':hotspot.y+'px','left':hotspot.x+'px'}"  class="lg-hotspot bottom-left" (click)="hotspotPoint($event,j)">
+            <div class="lg-hotspot-button active-content{{j}}" ></div>
+            <div class="lg-hotspot-label">
+              <h4 class="content-title">{{hotspot.contentTitle}}</h4>
+              <img class="content-image" src={{hotspot.contentUrl}} width="auto" height="100px">
+              <p class="content-description">{{hotspot.contentDescription}}</p>
+            </div>
+          </div>
+
+          <!-- <div style="top: 21%; left: 88%;" class="lg-hotspot top-right">
+            <div class="lg-hotspot-button"></div>
+            <div class="lg-hotspot-label">
+              <h4>Rocket ship</h4>
+              <p>Rocket ships can be great for business. Although they cost a lot of money, they can generate ideas and take
+                your business to new heights.</p>
+            </div>
+          </div>
+
+          <div style="top: 45%; left: 15%;" class="lg-hotspot top-left">
+            <div class="lg-hotspot-button"></div>
+            <div class="lg-hotspot-label">
+              <h4>Cashbook</h4>
+              <p>What could be better than a book of cash?</p>
+            </div>
+          </div>
+
+          <div style="top: 45.5%; left: 62%;" class="lg-hotspot top-right">
+            <div class="lg-hotspot-button"></div>
+            <div class="lg-hotspot-label">
+              <h4>Gears</h4>
+              <p>Gears are used in a lot of situations, but here they're probably being used metaphorically.</p>
+            </div>
+          </div>
+
+          <div style="top: 83%; left: 20%;" class="lg-hotspot bottom-left">
+            <div class="lg-hotspot-button"></div>
+            <div class="lg-hotspot-label">
+              <h4>Notes</h4>
+              <p>Always take notes!</p>
+            </div>
+          </div>
+
+          <div style="top: 85%; left: 91%;" class="lg-hotspot bottom-right">
+            <div class="lg-hotspot-button"></div>
+            <div class="lg-hotspot-label">
+              <p>This is a label without a title.</p>
+            </div>
+          </div> -->
+        </div>
+      </div>
+      <div *ngIf="salesList.length==0">
+        No Record Found
+      </div>
+    </div>
+  </div>
+</div>
+<app-sidemenu></app-sidemenu>
+<app-footer></app-footer>

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-sales/launch-sales.component.scss

@@ -0,0 +1,605 @@
+$buttonRadius: 24px;
+$labelPaddingX: $buttonRadius*1;
+$labelBorderRadius: 2px;
+$labelFade: 0.1s;
+$colorButton: #ffc107;
+$colorHoverAdd: #11174c;
+$colorText: #333;
+$colorHeadingBackground: #555;
+body{
+	font-family:calibri;
+	overflow-x: hidden;
+}
+.mt_50{
+	margin-top:15px;
+}
+.line{
+	 border-left: 1px solid #888;
+    height: 400px;
+    position: absolute;
+    left: 50%;
+    margin-left: -3px;
+    top: 0;
+}
+
+.mg_10{
+	margin-bottom: 25px;
+}
+.mt_25{
+	margin-top:15px;
+}
+.wid3{
+	width: 5.4%;
+margin-top: 8px;
+
+}
+.wid3_font{
+	font-size:24px;
+}
+
+.padding{
+	padding:0px;
+	margin: 19px 0px;
+	color: #888;
+}
+.form-control{
+	border: 1px solid #191818 !important;
+	margin-bottom: 44px;
+	border-radius: 0px !important;
+}
+.btn-primary_right{
+	float:right;
+}
+.mt0{
+	margin-top:0px;
+}
+
+.mg_bt62{
+	margin-bottom: 62px;
+}
+
+
+/*next step*/
+
+.footer {
+   position: fixed;
+   left: 0;
+   bottom: 0;
+   width: 100%;
+   background-color: #393939;
+	 color: white;
+	 z-index: 99999;
+
+}
+
+.footer_class{
+	list-style-type: none;
+	display: inline-flex;
+	margin: 20px 0px;
+}
+.footer_class li{
+	padding:0px 95px;
+	border-right: 1px solid #fff;
+	font-size:18px;
+
+}
+.footer_class li a{
+	text-decoration:none;
+	color:#fff;
+}
+
+.footer_class li a:active{
+	 border-bottom:5px solid  blue;
+}
+
+
+
+/*sick*/
+html, body {
+	margin: 0;
+	padding: 0;
+  }
+
+  * {
+	box-sizing: border-box;
+  }
+
+
+.slick-list {
+	padding:0px !important;
+}
+  .slider {
+	  /* width: 50%;
+	  margin: 100px auto; */
+  }
+
+  .slick-slide {
+	margin: 0px 20px;
+  }
+
+  .slick-slide img {
+	width: 100%;
+	height: 400px;
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+	color: black;
+  }
+
+
+  .slick-slide {
+	transition: all ease-in-out .3s;
+	opacity: .2;
+  }
+
+  .slick-active {
+	opacity: .5;
+  }
+
+  .slick-current {
+	opacity: 1;
+  }
+
+  .big_button1{
+	border-color: #49494a !important;
+	margin: 0px 20px !important;
+	border-radius: 28px !important;
+    background-color: #49494a !important;
+    width:Auto !important;
+  }
+  .mt_100 {
+	//   margin-top:100px !important;
+  }
+
+
+  #content {
+	margin: 23px auto;
+	text-align: center;
+	width: 100%;
+  }
+  #content h1 {
+	text-transform: uppercase;
+	font-weight: 700;
+	margin: 0 0 40px 0;
+	font-size: 25px;
+	line-height: 30px;
+  }
+  .circle {
+	width: 60px;
+	height: 60px;
+	line-height: 60px;
+	border-radius: 50%; /* the magic */
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	text-align: center;
+	color: white;
+	font-size: 16px;
+	text-transform: uppercase;
+	font-weight: 700;
+	margin: 0 auto 40px;
+	cursor: pointer;
+  }
+
+  .blue {
+	background-color: #3498db;
+	}
+	.blue_5 {
+		background-color: #3498db;
+		}
+  .green {
+	background-color: #16a085;
+  }
+  .red {
+	background-color: #e74c3c;
+  }
+  .black{
+	background-color: #49494a;
+  }
+
+.big_button{
+	display: inline-block;
+	padding: 6px 12px 6px 38px;
+	margin-bottom: 0;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.42857143;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: middle;
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+	cursor: pointer;
+	color: #fff;
+	border-color: #49494a !important;
+	margin: 15px 30px !important;
+	border-radius: 28px !important;
+	position: absolute;
+	z-index: -1;
+	display: none;
+
+  }
+
+  .big_button_1 {
+	background-color: #3498db !important;
+  }
+  .big_button_2 {
+	background-color: #16a085  !important;
+  }
+  .big_button_3 {
+	background-color: #e74c3c  !important;
+  }
+  .big_button_4{
+	background-color: #49494a  !important;
+  }
+
+	.big_button_5{
+		background-color: #49494a !important;
+		}
+
+  .circle .big_button_1 .active{
+display: block;
+
+  }
+  .circle:hover .big_button_2 {
+	display: block;
+
+	  }
+	  .circle:hover  .big_button_3 {
+		display: block;
+
+		  }
+		  .circle:hover .big_button_4{
+			display: block;
+
+				}
+
+
+.wid66{
+	width: 50%;
+	margin: auto;
+	display: block;
+}
+
+
+
+
+
+
+				/*slider*/
+
+				.hero {
+					position: absolute;
+					top: 85%;
+					left: 47%;
+					z-index: 0;
+				}
+
+				.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
+					left: 50%;
+					margin-left: -10px;
+					top: 88% !important;
+					background-color: #333;
+    			width: 20%;
+					padding: 5px 0px;
+					height: auto !important;
+			}
+			.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next{
+				top: 88% !important;
+				background-color: #333;
+    		width: 20%;
+				padding: 5px 0px;
+    		height: auto !important;
+			}
+
+			.mg_bt{
+				margin-bottom: 65px;
+			}
+
+			button.btn.btn-primary.btn-lg{
+				background-color: #28a8e0 !important;
+			}
+
+
+
+
+				/*sales*/
+				.circle_sales .big_button_5{
+					display: block;
+                    width: 60%;
+                    cursor: pointer;
+						}
+						.circle_sales:hover{
+							background-color: #49494a;
+						}
+
+
+				.circle_sales {
+					width: 60px;
+					height: 60px;
+					line-height: 60px;
+					border-radius: 50%; /* the magic */
+					-moz-border-radius: 50%;
+					-webkit-border-radius: 50%;
+					text-align: center;
+					color: white;
+					font-size: 16px;
+					text-transform: uppercase;
+					font-weight: 700;
+					margin: 0 auto 40px;
+                    cursor: pointer;
+                    margin: 0px auto 33px;
+					}
+				.big_button_1 {
+					background-color: #3498db !important;
+					}
+
+					.big_button_back {
+						display: inline-block;
+						padding: 6px 12px 6px 38px;
+						margin-bottom: 0;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 1.42857143;
+						text-align: center;
+						white-space: nowrap;
+						vertical-align: middle;
+						-ms-touch-action: manipulation;
+						touch-action: manipulation;
+						cursor: pointer;
+						color: #fff;
+						border-color: #49494a !important;
+						margin: -46px 30px !important;
+						border-radius: 28px !important;
+						position: absolute;
+						z-index: -1;
+						display: none;
+				}
+
+
+	.hide{
+		display:none;
+        }
+
+// jannai
+
+        .varient_box{
+            float: right;
+            right: 59px;
+            position: absolute;
+            bottom: 64px;
+				}
+
+        button.btn.btn-primary.big_button1{
+					background-color: #28a8e0!important;
+					width: 30% !important;
+					font-size: 12px;;
+					height: 42px;
+					margin: 20px 4px !important;
+					border-radius: 16px !important;
+			}
+        .big_button.big_button_1.active {
+            display: block;
+				}
+
+/////////////////////////// custom css//////////////////
+
+
+
+
+.lg-container {
+	width: 790px;
+	height: 100%;
+  position: relative;
+	padding: 0;
+	margin: auto;
+}
+.img_height{
+	height: 100%;
+	width: 100%;
+}
+
+.lg-image {
+  display: block;
+  width: 100%;
+	object-fit: scale-down;
+	max-width: 100%;
+    max-height: 100%;
+}
+
+.lg-hotspot {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  transform: translate(-50%, -50%);
+  z-index: 0;
+  &:hover, &:active {
+  //  z-index: 999;
+    .lg-hotspot-button {
+				border-color: $colorButton + $colorHoverAdd;
+				cursor:pointer;
+      &:after {
+				background-color: #08ff14;
+				cursor:pointer;
+      }
+    }
+  }
+}
+
+.lg-hotspot-button {
+  height: $buttonRadius*2;
+  width: $buttonRadius*2;
+  padding: 0px;
+  border-radius: 100%;
+  //border: 1px solid $colorButton;
+ // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 999;
+  animation: button-pulse 7s ease-in-out infinite;
+  &:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    content: "";
+    display: block;
+    height: $buttonRadius*0.7;
+    width: $buttonRadius*0.7;
+    border-radius: 100%;
+    border: 3px solid white;
+    background-color: $colorButton;
+    transition: border-color 1s linear;
+
+  }
+}
+.lg-hotspot-button:nth-of-type(n) {
+  // height: $buttonRadius*2;
+  // width: $buttonRadius*2;
+  height: $buttonRadius ;
+  width: $buttonRadius ;
+  padding: 0px;
+  border-radius: 100%;
+  // border: 1px solid $colorButton;
+	 //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 999;
+  animation: button-pulse 7s ease-in-out infinite;
+  &:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    content: "";
+    display: block;
+    height: 19px;
+    width: 19px;
+    // height: $buttonRadius*0.7;
+    // width: $buttonRadius*0.7;
+    border-radius: 100%;
+    border: 0px solid white;
+    background-color: #08ff14;
+    transition: border-color 1s linear;
+
+  }
+}
+.lg-hotspot-label {
+  position: absolute;
+  padding: 0 0 1.1em 0;
+  width: 16em;
+  background-color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14.5px;
+  line-height: 1.45em;
+  z-index: -1;
+  pointer-events: none;
+  border-radius: $labelBorderRadius;
+  user-select: none;
+  display: none;
+  transition: all $labelFade linear;
+  h4 {
+    margin: 0;
+    padding: 0.65em $labelPaddingX;
+    background-color: $colorHeadingBackground;
+    font-size: 1.1em;
+    font-weight: normal;
+    letter-spacing: 0.02em;
+    color: white;
+    border-radius: $labelBorderRadius $labelBorderRadius 0 0;
+  }
+  p {
+    margin: 0;
+    padding: 1.1em $labelPaddingX 0 $labelPaddingX;
+    color: $colorText;
+  }
+}
+
+.top-left .lg-hotspot-label {
+  top: $buttonRadius;
+  right: auto;
+  bottom: auto;
+  left: $buttonRadius;
+}
+
+.top-right .lg-hotspot-label {
+  top: $buttonRadius;
+  right: $buttonRadius;
+  bottom: auto;
+  left: auto;
+}
+
+.bottom-right .lg-hotspot-label {
+  top: auto;
+  right: $buttonRadius;
+  bottom: $buttonRadius;
+  left: auto;
+}
+
+.bottom-left .lg-hotspot-label {
+  // top: auto;
+  // right: auto;
+  // bottom: $buttonRadius;
+	// left: $buttonRadius;
+	top: auto;
+	right: auto;
+	bottom: -80px;
+	left: 36px;
+}
+.content-title{
+	font-size: 12px !important;
+  font-weight: bold !important;
+}
+.content-image{
+	margin: 10px auto;
+  display: block;
+}
+.content-description{
+	font-size: 12px;
+	line-height: 18px;
+	text-align: left;
+}
+@keyframes button-pulse {
+  0% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+  30% {
+    transform: scale(1.1, 1.1);
+    opacity: 1;
+  }
+  60% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+.highlight{
+	background-color: #003D58 !important;
+
+}
+.wid3_font {
+font-size: 20px;
+color: #333;
+}
+.wid3 {
+width: 38px !important;
+margin-top: 0px !important;
+}
+.wid3_font:hover{
+text-decoration: none !important;
+}
+
+.degree_top{
+	position: absolute;
+	left: 200px;
+	top: 0px;
+	margin-bottom: 50px;
+	height: 100%;
+}
+.left_card {
+	position: inherit;
+	top: 193px;
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-sales/launch-sales.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LaunchSalesComponent } from './launch-sales.component';
+
+describe('LaunchSalesComponent', () => {
+  let component: LaunchSalesComponent;
+  let fixture: ComponentFixture<LaunchSalesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LaunchSalesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LaunchSalesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-sales/launch-sales.component.ts

@@ -0,0 +1,106 @@
+import { Component, OnInit } from '@angular/core';
+import { HyperService } from '../../core/services/http.service';
+import { LocalStorage } from "../../core/services/local_storage.service"
+import { Router } from "@angular/router";
+import {Location} from '@angular/common';
+import $ from 'jquery'
+declare var $: $
+@Component({
+  selector: 'app-launch-sales',
+  templateUrl: './launch-sales.component.html',
+  styleUrls: ['./launch-sales.component.scss']
+})
+export class LaunchSalesComponent implements OnInit {
+  salesList:any=[];
+  imageID:number;
+  imageUrl:any;
+  imageHotspot:any=[];
+  activeClass:boolean=false;
+  xValue:number;
+  yValue:number;
+  loader:boolean=false;
+  model_name:string;
+  constructor(private server: HyperService, private router: Router,private loc:Location) { }
+
+  ngOnInit() {
+    this.model_name =  LocalStorage.getValue('model_name')
+    $(".lg-hotspot-label").show("fast");
+    $(".lg-hotspot-label").hide();
+    
+    $(".lg-hotspot-button").click(function () {
+      var thisLabel = $(this).siblings(".lg-hotspot-label");
+      var thisLabelState = thisLabel.css("display");
+      // console.log(thisLabel)
+      $(".lg-hotspot-label").fadeOut(0).parent().css("z-index", "0");
+      if (thisLabelState == "none") {
+        thisLabel.fadeIn(0);
+        $(this).parent().css("z-index", "999");
+      }
+    });
+    this.salesProcess()
+  }
+  salesProcess(){
+    this.loader=true;
+    this.server.get("explore/salesprocess/"+LocalStorage.getValue('set_model_id'))
+    .then((data) => {
+        if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+          this.loader=false;
+            // console.log(data.result.data)
+            this.salesList = data.result.data
+            this.rotateImage(this.salesList[0])
+        } else if (data.result.status == 401 && data.result.response == 'failed') {
+            
+        } else {
+          this.loader=false;
+          alert(data.result.message)
+        }
+    });
+}
+rotateImage(item){
+  var wid = 806/100;
+		var hei = 520/100;
+  // console.log(item)
+  for(let i=0;i<this.salesList.length;i++){
+    if(this.salesList[i].id == item.id){
+      this.activeClass = true;
+      this.imageID =item.id;
+      this.imageUrl =item.image.image_url;
+      this.imageHotspot=[]
+      for(let j=0;j<item.image.hotspot.length;j++){
+        // this.xValue = item.image.hotspot[j].point_arr.x;
+        // this.yValue = item.image.hotspot[j].point_arr.x;
+       let newx = wid*((item.image.hotspot[j].point_arr.x / 1024)*100);
+       let newY = hei*((item.image.hotspot[j].point_arr.y / 660)*100);
+       let contentTitle = item.image.hotspot[j].title;
+       let contentUrl = item.image.hotspot[j].file_url;
+       let contentDescription = item.image.hotspot[j].description;
+        let obj:any={
+            x:newx,y:newY,contentTitle:contentTitle,contentUrl:contentUrl,contentDescription:contentDescription
+        };
+        this.imageHotspot.push(obj);
+        console.log( this.imageHotspot)
+        $('body').click(function(){
+          $(".lg-hotspot-label").hide();
+        })
+      }
+    }else{
+      
+    }
+  }
+}
+
+  hotspotPoint(e,index){
+    e.stopPropagation();
+    var thisLabel = $(".active-content"+index).siblings(".lg-hotspot-label");
+    var thisLabelState = thisLabel.css("display");
+    $(".lg-hotspot-label").fadeOut(0).parent().css("z-index", "0");
+    $(".active-content"+index).parent().css("z-index", "9999999");
+    if (thisLabelState == "none") {
+      thisLabel.fadeIn(0);
+      $(".active-content").parent().css("z-index", "999");
+    }
+  }
+  goBack(){
+    this.loc.back();
+  }
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-threesixty-dashboard.component.html

@@ -0,0 +1,51 @@
+<app-main-header></app-main-header>
+
+<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
+<div class=" ">
+  <div class="left_card" *ngIf="loader">
+    <div class="inner_load"  >
+      <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+        <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      <p>Just a moment...</p>
+    </div>
+  </div>
+
+  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false" *ngIf="!loader">
+    <div class="carousel-inner">
+      <div class="carousel-item h-100"   *ngFor="let image of imageSources;let i=index" [ngStyle]="{background: 'url(' + image.model_banner_image_url + ') no-repeat center  center'}" [ngClass]="{active:activeBanner===image.model_id}">
+          <!-- <div class="carousel-item h-100"    [ngStyle]="{background: 'url(assets/images/Gixxer_SF.jpg) no-repeat center  center'}" > -->
+        <!-- <img class="d-block w-100 h-100" src={{image.model_banner_image_url}} alt="First slide"> -->
+        {{image.model_id}}
+      </div>
+      <div class="hero">
+          <!-- <h4 class="title_name">{{model_name}}</h4> -->
+        <button class="btn btn-primary btn-lg"  role="button" (click)="explore()">Explore</button>
+
+      </div>
+
+    </div>
+    <a class="left carousel-control" href="#carouselExampleControls" role="button" data-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true" (click)="getModelName()"></span>
+      <span class="sr-only">Previous</span>
+    </a>
+    <a class="right carousel-control" href="#carouselExampleControls" role="button" data-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true" (click)="getModelName()"></span>
+      <span class="sr-only">Next</span>
+    </a>
+    <!-- <a class="left carousel-control" href="#carouselExampleControls" role="button" data-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true" (click)="goToPrev()"></span>
+      <span class="sr-only">Previous</span>
+    </a>
+    <a class="right carousel-control" href="#carouselExampleControls" role="button" data-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true" (click)="goToNext()"></span>
+      <span class="sr-only">Next</span>
+    </a> -->
+  </div>
+
+</div>
+<app-sidemenu></app-sidemenu>

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-threesixty-dashboard.component.scss

@@ -0,0 +1,532 @@
+.dashboard.dse{
+    slideshow{
+        height: calc(100% - 200px);
+    }
+}
+
+.dashboard{
+    width: 100%;
+    height:calc(100% - 85px);
+    slideshow {
+        width: 100%;
+        height: calc(100% - 243px);
+        float: left;
+    }
+    .bottom_content{
+        width:100%;
+        height:200px;
+        float: left;
+        // background-color: #ccc;
+        padding:0 80px;
+        .row{
+            // width: 1000px;
+            // margin: auto;
+            height:100%;          
+          
+            .col{
+                width: 300px;
+                height:170px;
+                margin:0 20px; 
+                border-radius:10px;
+                box-shadow: 0px 0px 9px 3px #e2dede;
+                background-color: #fff;
+                padding: 20px;
+                .title{
+                    font-size: 14px;
+                    color:#333;
+                    float: left;
+                    width:100%;
+                }
+                .box_left{
+                    width:calc(100% - 57px);
+                    margin-top: 15px;
+                    float: left;
+                    position: relative;
+                    svg {
+                        width: 100px;
+                        float: left;
+                        top: 0;
+                        height: 100px;
+                    }
+                    // .timer {
+                    //     position: absolute;
+                    //     top: 0;
+                    //     left: 0;
+                    //     bottom: 0;
+                    //     left: 5px;
+                    //     width: 70px;
+                    //     height: 55px;
+                    //     margin: auto;
+                    //     font-size: 36px;
+                    //     color: #28a8e0;
+                    //     text-align: center;
+                    // }
+                    .load_content{
+                        float: left;
+                        margin-top: 20px;
+                        margin-left: 10px;
+                        h6{
+                            font-size: 14px;
+                            color: #28a8e0;
+                        }
+                        p{
+                            font-size: 12px;
+                            color: #28a8e0;
+                        }
+                    }
+                }
+                .box_right{
+                    background-color: #28a8e0;
+                    width: 120px;
+                    height: 100%;
+                    float: right;
+                    position: absolute;
+                    right:0;
+                    top:0;
+                    border-bottom-right-radius: 10px;
+                    border-top-right-radius: 10px;
+                    padding: 10px;
+                    text-align: center;
+                    img{
+                        width: 30px;
+                        cursor: pointer;
+                    }
+                    p{
+                        color:#fff;
+                        font-size: 24px;
+                        margin: 0;
+                        padding: 10px 0;
+                    }
+                }
+            }
+            .learning{
+                .box_left{
+                    margin: 0;
+                    position: relative;
+                    height: 42%;
+                    .load_content{
+                        margin:auto;
+                        position: absolute;
+                        width: 200px;
+                        height: 65px;
+                        left:0;
+                        right:0;
+                        top:0;
+                        bottom: 0;
+                        text-align: center;
+                        h1{
+                            font-size: 50px;
+                            span{
+                                font-size: 30px;
+                            }
+                        }
+                    }
+                }
+                .box_right{
+                    img{
+                        width: 70px;
+                        margin-top: 40px;
+                    }
+                }
+            }
+        }
+        .loader {
+        border: 5px solid #ccc;
+        border-radius: 50%;
+        border-top: 5px solid #28a8e0;
+        width: 80px;
+        height: 80px;
+        // -webkit-animation: spin 2s linear infinite; /* Safari */
+        // animation: spin 2s linear infinite;
+        float: left;
+        }
+        
+        /* Safari */
+        // @-webkit-keyframes spin {
+        // 0% { -webkit-transform: rotate(0deg); }
+        // 100% { -webkit-transform: rotate(360deg); }
+        // }
+        
+        // @keyframes spin {
+        // 0% { transform: rotate(0deg); }
+        // 100% { transform: rotate(360deg); }
+        // }
+        .path:after {
+            width: 92%;
+            height: 2px;
+            background-color: transparent;
+            content: "";
+            left: 5%;
+            z-index: -1;
+            position: absolute;
+            top: 8px;
+            box-shadow: 0 -4px 5px 1px #d0cece;
+        }
+        .pointer:before {
+            width: 8px;
+            height: 8px;
+            content: "";
+            // background-color: #999;
+            position: absolute;
+            right: -5px;
+            border-top-left-radius: 50%;
+            // border-left: 3px solid #dad7d7;
+            border-top-right-radius: 50%;
+        }
+        .path{
+            width: 242px;
+            margin: auto;
+            height: 75px;
+            /* position: relative; */
+            position: absolute;
+            z-index: 99;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            .type_name{
+                width: 100%;
+                float: left;
+                p{
+                    float: left;
+                    width: 24.5%;
+                    text-align: center;
+                    font-size: 12px;
+                    font-weight: bold;
+                    font-style: italic;
+                    margin-top: 10px;
+                }
+            }
+        }
+        .pointer.grey{
+            background-color: #dad7d7;
+        }
+        .pointer.grey:before{
+            background-color: #999;
+            border-left: 3px solid #dad7d7;
+        }
+        .pointer.grey:after{
+            border-top: 10px solid #dad7d7;
+        }
+        .pointer.orange{
+            background-color: orange;
+        }
+        .pointer.orange:before{
+            background-color: #cc8504;
+            border-left: 3px solid orange;
+        }
+        .pointer.orange:after{
+            border-top: 10px solid orange;
+        }
+        .pointer.green{
+            background-color: green;
+        }
+        .pointer.green:before{
+            background-color: #036303;
+            border-left: 3px solid green;
+        }
+        .pointer.green:after{
+            border-top: 10px solid green;
+        }
+        .pointer.red{
+            background-color: red;
+        }
+        .pointer.red:before{
+            background-color: #a90606;
+            border-left: 3px solid red;
+        }
+        .pointer.red:after{
+            border-top: 10px solid red;
+        }
+        .pointer {
+            width: 35px;
+            height: 80px;
+            position: relative;
+            // background: red;
+            border-top-left-radius: 4px;
+            float: left;
+            margin: 0 5%;
+            // .poly{
+            //     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+            // }
+            .poly {
+                width: 50px;
+                height: 50px;
+                background: transparent;
+                float: left;
+                position: absolute;
+                bottom: -5px;
+                z-index: 99;
+                left: -8px;
+                svg{
+                    float: left;
+                    margin: 0;
+                    width: 100%;
+                    height: 100%;
+                }
+                .types{
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    margin: auto;
+                    width: 40px;
+                    height: 50px;
+                    left: 0;
+                    right: 0;
+                    text-align: center;
+                    font-size: 30px;
+                }
+            }
+            // .poly:before {
+            //     content: "";
+            //     position: absolute;
+            //     top: -15px;
+            //     left: 0;
+            //     width: 0;
+            //     height: 0;
+            //     border-left: 30px solid transparent;
+            //     border-right: 30px solid transparent;
+            //     border-bottom: 15px solid blue;
+            // }
+            // .poly:after {
+            //     content: "";
+            //     position: absolute;
+            //     bottom: -15px;
+            //     left: 0;
+            //     width: 0;
+            //     height: 0;
+            //     border-left: 30px solid transparent;
+            //     border-right: 30px solid transparent;
+            //     border-top: 15px solid blue;
+            // }
+          }
+          .pointer:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 0;
+            height: 0;
+            border-left: 17px solid white;
+            border-top: 10px solid red;
+            border-right: 18px solid white;
+          }
+        //   .pointer:before {
+        //     content: "";
+        //     position: absolute;
+        //     right: -20px;
+        //     bottom: 0;
+        //     width: 0;
+        //     height: 0;
+        //     border-left: 20px solid transparent;
+        //     border-top: 20px solid transparent;
+        //     border-bottom: 20px solid red;
+        //   }
+    }
+}
+@media screen and (max-width: 768px) {
+    .dashboard{
+        width: 100%;
+        height: auto;
+        margin-top: 53px;
+        overflow: scroll;
+        slideshow{
+            height: 300px;
+        }
+    }
+}
+@media screen and (max-width: 1024px) {
+    .dashboard.dse{
+        slideshow{
+            height: calc(100% - 170px);
+        }
+        .bottom_content {
+            background-color: red;
+            .row {
+                .learning {
+                    .box_right {
+                        img {
+                            width: 60px;
+                        }
+                    } 
+                } 
+            } 
+        } 
+    }
+    .dashboard{
+        height: calc(100% - 60px);
+        slideshow{
+            height: calc(100% - 420px);
+        }
+        .bottom_content{
+            height: 330px;
+            .main_dropdown{
+                bottom: 374px;
+            }
+            .row{
+                .col{
+                    margin: 5px 5px;
+                    width: 332px;
+                    height: 170px !important;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 768px) {
+    .dashboard {
+        height: 100%;
+        float: left;
+        padding-top: 53px;
+        overflow-y: scroll;
+        slideshow{
+            height: 200px;
+        }
+    }
+}
+
+ 
+.carousel-item{
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    color: transparent;
+}
+.w-100{
+    height:500px;
+    width: auto !important;
+    display: block;
+    margin: 0px auto;
+}
+ 
+button.btn.btn-primary.btn-lg {
+    background-color: #28a8e0 !important;
+}
+.btn-primary{
+    background-color: #28a8e0!important;
+    font-size: 12px;
+    height: 42px;
+    margin: 6px auto !important;
+    border-radius: 16px !important;
+    outline: none;
+    border: #28a8e0 !important;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    padding: 0px 33px;
+
+}
+.btn:focus {
+    -webkit-box-shadow: none;
+box-shadow: none;
+}
+
+.btn-primary:not(:disabled):not(.disabled):active:focus{
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+                /*slider*/
+                #myCarousel{
+                    width: 100%;
+                    float: left;
+                }
+                .carousel {
+                    position: absolute;
+                }
+                .carousel-inner {
+                    position: absolute !important;
+                }
+                .carousel,.carousel-inner {
+                    height: 100% !important;
+                    width: 100%;
+                    }
+            
+                .carousel-inner>.item>img, .carousel-inner>.item>a>img {
+                    display: block;
+                    height: auto;
+                    max-width: 100%;
+                    line-height: 1;
+                    // width: 100%; // Add this
+                    margin: 0px auto;
+                
+                    }
+
+				.hero {
+					position: absolute;
+					// top: 78%;
+					left: 47%;
+                    z-index: 0;
+                    bottom: 100px;
+                    h4{
+                        font-size: 14px;
+                        text-align: center;
+                        
+                    }
+                }
+               
+				.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
+					left: 50%;
+					margin-left: -10px;
+					top: 88% !important;
+					background-color: #333;
+    			width: 20%;  
+					padding: 5px 0px;
+					height: auto !important;
+			}
+			.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next{
+				top: 88% !important;
+				background-color: #333;
+    		width: 20%;   
+				padding: 5px 0px;
+    		height: auto !important;
+            }
+            
+
+            .carousel-control-next-icon {
+                width: 4%;
+                height: 12%;
+                background-size: 21px;
+                float: right;
+            }
+
+            .carousel-control-prev-icon{
+                width: 4%;
+                height: 12%;
+                background-size: 22px;
+            }
+
+            .carousel-control-next-icon, .carousel-control-prev-icon {
+                background-color: #28a8e0;
+            }
+            span.carousel-control-next-icon{
+                right: -32px;
+            }
+            span.carousel-control-next-icon,span.carousel-control-prev-icon {
+                position: absolute;
+                // top: 505px;
+                bottom: 100px;
+                display: -ms-flexbox;
+                display: flex;
+                -ms-flex-align: center;
+                align-items: center;
+                -ms-flex-pack: center;
+                justify-content: center;
+                width: 4%;
+                height:42px;
+                margin-right:30px;
+                color: #fff;
+                text-align: center;
+           
+            }
+            .left_card {
+                position: inherit;
+            }
+        h-100{
+            width: 100%!important;
+            height:100%!important;
+        }
+        .title_name{
+            background-color:#000;
+            color:#fff;
+            padding:10px;
+        }

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-threesixty-dashboard.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LaunchThreesixtyDashboardComponent } from './launch-threesixty-dashboard.component';
+
+describe('LaunchThreesixtyDashboardComponent', () => {
+  let component: LaunchThreesixtyDashboardComponent;
+  let fixture: ComponentFixture<LaunchThreesixtyDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LaunchThreesixtyDashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LaunchThreesixtyDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/launch-threesixty-dashboard.component.ts

@@ -0,0 +1,133 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { LocalStorage } from "../core/services/local_storage.service"
+import { HyperService } from '../core/services/http.service';
+import { Router, NavigationEnd, RoutesRecognized } from "@angular/router";
+import * as moment from 'moment';
+import { Local } from 'protractor/built/driverProviders';
+import { filter, pairwise } from 'rxjs/operators';
+declare var $:any;
+@Component({
+  selector: 'app-launch-threesixty-dashboard',
+  templateUrl: './launch-threesixty-dashboard.component.html',
+  styleUrls: ['./launch-threesixty-dashboard.component.scss']
+
+})
+export class LaunchThreesixtyDashboardComponent implements OnInit {
+  imageSources = []; //Slider image array
+  user_type: any; //User Am or DSE
+ user_role:any;
+ activeBanner:string;
+ model_id:any;
+ model_name:string='';
+ loader:boolean=false;
+ previousUrl: string;
+  constructor(private server: HyperService, private router: Router) {
+
+  }
+
+  ngOnInit() {
+    this.router.events
+      .pipe(filter((e: any) => e instanceof RoutesRecognized),
+        pairwise()
+      ).subscribe((e: any) => {
+        console.log(e[0].urlAfterRedirects);
+        this.previousUrl = e[0].urlAfterRedirects// previous url
+      });
+      LocalStorage.setValue('is_firsttime', false);
+      this.user_role=LocalStorage.getValue('user_data').role ;
+      if (LocalStorage.getValue('user_data').role != 7 && LocalStorage.getValue('user_data').role > 7 && LocalStorage.getValue('user_data').role != 14) {
+          this.user_type = 0; //Sales Ex
+      } else if (LocalStorage.getValue('user_data') != undefined &&( LocalStorage.getValue('user_data').role <= 7 || LocalStorage.getValue('user_data').role ==14)) {
+
+          this.user_type = 1; //Manager
+      }
+    //   console.log(this.user_type,LocalStorage.getValue('user_data').role)
+      this.getBanner(); //get banner details
+
+
+  }
+
+  getBanner() {
+    this.loader=true;
+      this.server.get("explore/model")
+          .then((data) => {
+              if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
+                this.loader=false;
+                this.imageSources=data.result.data;
+                setTimeout(() => {
+                  this.activeBanner=LocalStorage.getValue("set_model_id" );
+                  if(LocalStorage.getValue("from_menu" )==true){
+                     this.activeBanner=this.imageSources[0].model_id;
+                     LocalStorage.setValue("set_model_id",  this.imageSources[0].model_id )
+                  }else{
+                     this.activeBanner=LocalStorage.getValue("set_model_id" );
+                  }
+                  console.log(this.activeBanner,LocalStorage.getValue("set_model_id" ))
+                }, 100);
+
+                console.log(this.activeBanner,LocalStorage.getValue("set_model_id" ))
+                  for (let i = 0; i < this.imageSources.length; i++) {
+                      if(this.activeBanner==this.imageSources[i].model_id){
+                        this.activeBanner = this.imageSources[i].model_id;
+                      }
+
+                  }
+                  // this.activeBanner ==1
+                  // if(this.router.url=="url /threesixty-dashboard"){
+                  //   this.activeBanner = this.imageSources[0].model_id;
+                    // LocalStorage.setValue("set_model_id",  this.imageSources[0].model_id );
+                    // LocalStorage.setValue("temp_set_model_id",  this.imageSources[0].model_id );
+                  // }else if(this.previousUrl!="url /threesixty-dashboard"){
+
+                  //   this.activeBanner=LocalStorage.getValue("set_model_id" );
+                  // }else{
+                  //   this.activeBanner =1
+                  // }
+                  // LocalStorage.setValue("set_model_id",  this.imageSources[0].model_id );
+                   setTimeout(() => {
+                   this.model_name=this.imageSources[0].model_name;
+                }, 100);
+
+              } else if (data.result.status == 401 && data.result.response == 'failed') {
+                  this.router.navigateByUrl('');
+              } else {
+                  this.imageSources = [];
+                  this.loader=false;
+                  alert(data.result.message)
+              }
+          });
+  }
+
+  explore() {
+    LocalStorage.setValue("from_menu", false);
+    setTimeout(() => {
+      this.model_id = $('.carousel-inner').find('.active').text();
+      let temp_model = $.trim(this.model_id);
+      for (let i = 0; i < this.imageSources.length; i++) {
+        if (temp_model == this.imageSources[i].model_id) {
+          this.model_name = this.imageSources[i].model_name;
+          LocalStorage.setValue("model_name", this.model_name);
+          LocalStorage.setValue("set_model_id", temp_model);
+        }
+      }
+      this.router.navigateByUrl('/launch-threesixty')
+    }, 1000);
+  }
+  getModelName() {
+    setTimeout(() => {
+      this.model_id = $('.carousel-inner').find('.active').text();
+      console.log(this.model_id)
+      let temp_model = $.trim(this.model_id);
+      for (let i = 0; i < this.imageSources.length; i++) {
+        if (temp_model == this.imageSources[i].model_id) {
+          this.model_name = this.imageSources[i].model_name;
+          LocalStorage.setValue("model_name", this.model_name);
+          LocalStorage.setValue("set_model_id", temp_model);
+        }
+      }
+    }, 1000);
+  }
+  goToPrev(){
+
+  }
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/product-videos/product-videos.component.html

@@ -0,0 +1,56 @@
+<app-main-header></app-main-header>
+<div class="col-md-12 set_window">
+  <div class="row">
+    <div class="col-md-12 mt_25">
+      <div class="row col-md-6 float-left pad-l0">
+        <a routerLink="/threesixty-dashboard" class="wid3_font">
+          <img src="assets/images/back.png" class="wid3">
+          <span class="capi">{{model_name}}</span>
+        </a>
+      </div>
+    </div>
+    <div class="col-md-12 mt_25">
+      <ul class="list-unstyled video-list-thumbs row">
+        <li class="col-lg-12 col-sm-12 col-xs-12" *ngIf="data_check">
+            <!-- <img src="assets/images/no-video.gif"> -->
+            <p class="text-center">Videos are Current Not Available</p>
+          </li>
+        <li class="col-lg-2 col-sm-4 col-xs-6" *ngFor="let videos of video;let j=index;">
+          <div class="video_box">
+            <div class="img">
+              <img src="{{videos.thumb_url}}" data-toggle="modal"  [attr.data-target]= "'#videoModal_' + videos.contentid" alt="Barca" class="img-responsive"
+                />
+            </div>
+            
+           
+            <h2>{{videos.title}}</h2>
+            <!-- Modal -->
+            <div id="videoModal_{{videos.contentid}}" data-backdrop="static" class="modal fade" role="dialog">
+              <div class="modal-dialog">
+
+                <!-- Modal content-->
+                <div class="modal-content">
+                    <div class="container">
+                  <div class="col-md-10 float-left p0"><h2>{{videos.title}}</h2></div>  
+                  <div class="col-md-2 float-right p0"> <button type="button" class="close" data-dismiss="modal" (click) ="closeVideo(videos.contentid)">&times;</button>
+                      </div>  
+                    </div>                
+                  <div class="modal-body">
+                   <video controls #videoplayer id="videoplayers_{{videos.contentid}}">
+                     <source src="{{videos.file_url}}" type="video/mp4" id="cartoonVideo">
+                   </video>
+                  </div>
+                
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </li>
+
+      </ul>
+    </div>
+  </div>
+</div>
+<app-footer></app-footer>
+<app-sidemenu></app-sidemenu>

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/product-videos/product-videos.component.scss

@@ -0,0 +1,128 @@
+.wid3_font {
+	font-size: 20px;
+	color: #333;
+	width: auto;
+	float: left;
+}
+.wid3_font:hover{
+    text-decoration: none;
+}
+.wid3 {
+    width: 38px !important;
+    margin-top: 0px !important;
+}
+.mt_25{
+    margin-top: 15px;
+}
+.video_box{
+    border: 1px solid #ccc;
+    box-shadow: 0 0 2px 2px #f2f2f2;
+    background-color: #f7f7f7;
+    padding: 10px;
+    width: 100%;
+    float: left;
+}
+.video_box .img{
+    max-width: 250px;
+    max-height: 250px;
+}
+.img img{
+    width: 100%;
+    height:100%;
+    float: left;
+}
+.p0{
+    padding: 4px 0px !important;
+}
+.close{
+    background: #000 !important;
+    color: #fff !important;
+    width: 30px !important;
+    height: 30px !important;
+    font-size: 22px !important;
+    line-height: 1 !important;
+    float:right !important;
+}
+@media (min-width: 576px){
+    .modal-dialog {
+        max-width: 595px !important;
+    }
+}
+
+/*--------------------videos--------------------------*/
+.video-list-thumbs{
+    margin-top: 8px;
+    height: calc(100vh - 220px);
+    overflow: auto;
+}
+.video-list-thumbs > li{
+    margin-bottom:12px;
+}
+.video-list-thumbs > li:last-child{}
+.video-list-thumbs > li > a{
+	display:block;
+	position:relative;
+    background-color: #fff;
+    color: #000;
+    box-shadow: 0px 0px 2px 0px #000;
+	padding: 8px;
+
+}
+// .video-list-thumbs > li > a:hover{
+// 	box-shadow:0 2px 5px rgba(0,0,0,.3);
+// 	text-decoration:none
+// }
+.video-list-thumbs h2{
+	bottom: 0;
+	font-size: 14px;
+	// height: 33px;
+    margin: 8px 0 ;
+    width: 100%;
+    float: left;
+}
+.modal-body video{
+    max-width: 100%;
+}
+.video-list-thumbs .glyphicon-play-circle{
+    font-size: 60px;
+    opacity: 0.6;
+    position: absolute;
+    right: 39%;
+    top: 31%;
+    text-shadow: 0 1px 3px rgba(0,0,0,.5);
+    transition:all 500ms ease-in-out;
+}
+.video-list-thumbs > li > a:hover .glyphicon-play-circle{
+	color:#fff;
+	opacity:1;
+	text-shadow:0 1px 3px rgba(0,0,0,.8);
+}
+.video-list-thumbs .duration{
+	background-color: rgba(0, 0, 0, 0.4);
+	border-radius: 2px;
+	color: #fff;
+	font-size: 11px;
+	font-weight: bold;
+	left: 12px;
+	line-height: 13px;
+	padding: 2px 3px 1px;
+	position: absolute;
+	top: 12px;
+    transition:all 500ms ease;
+}
+.video-list-thumbs > li > a:hover .duration{
+	background-color:#000;
+}
+@media (min-width:320px) and (max-width: 480px) { 
+	.video-list-thumbs .glyphicon-play-circle{
+    font-size: 35px;
+    right: 36%;
+    top: 27%;
+	}
+	.video-list-thumbs h2{
+		bottom: 0;
+		font-size: 12px;
+		height: 22px;
+		margin: 8px 0 0;
+	}
+}

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/product-videos/product-videos.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductVideosComponent } from './product-videos.component';
+
+describe('ProductVideosComponent', () => {
+  let component: ProductVideosComponent;
+  let fixture: ComponentFixture<ProductVideosComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductVideosComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductVideosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Hyper-M_User_Portal/src/app/launch-threesixty-dashboard/product-videos/product-videos.component.ts

@@ -0,0 +1,52 @@
+import { Component,  ChangeDetectorRef, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { LocalStorage } from "../../core/services/local_storage.service"
+import { HyperService } from '../../core/services/http.service';
+import { Location } from '@angular/common';
+declare var $;
+
+@Component({
+  selector: 'app-product-videos',
+  templateUrl: './product-videos.component.html',
+  styleUrls: ['./product-videos.component.scss']
+})
+export class ProductVideosComponent implements OnInit {
+video:any;
+model_name:any;
+data_check:boolean=false;
+@ViewChild('videoplayer') videoplayer: ElementRef;
+  constructor(private server: HyperService, private loc: Location, private elementRef: ElementRef) { 
+    this.model_name =  LocalStorage.getValue('model_name')
+    this.getContent()
+  }
+  
+  ngOnInit() {
+
+  }
+  getContent(){
+    this.server.get("explore/contentlist/" +LocalStorage.getValue('set_model_id')+ "?page=0&limit=10").then((data)=>{
+     
+      if (data.status == 200 && data.result.response != 'failed' && data.result.data != null){
+        console.log(data.result.data);
+        if(data.result.data.length==0){
+          this.data_check=true;
+          console.log(this.data_check)
+      }else{
+        this.video=data.result.data
+        console.log(data.result.data);
+        this.data_check=false;
+      }
+      
+      }
+        
+    })
+  }
+
+  closeVideo(id) {
+    console.log(id)
+    $('#videoModal_'+id).on('hidden.bs.modal', function (event) {
+      $('#videoplayers_'+id)[0].pause();
+    });
+    // this.videoplayer.nativeElement.pause();
+  }
+
+}

Hyper-M_User_Portal/src/app/leadmodule/action-history/action-history.component.html

@@ -0,0 +1,323 @@
+<app-main-header></app-main-header>
+<app-confirm-popup (sendCount)='sendtolist($event)'></app-confirm-popup>
+<div class="section task-section">
+  <div class="top-section row">
+
+    <div class="w100 col-sm-12 row">
+      <div class="col-sm-5">
+        <p class="back" (click)="backactionhistory()">
+          <img src="assets/img/arrow_blue_left.png "> BACK
+        </p>
+      </div>
+      <div class="col-sm-3">
+        <div class="monthly-det">
+          <img src="assets/img/arrow_blue_left.png ">
+          <p>{{sales_date}}</p>
+          <img src="assets/img/arrow_blue_right.png">
+        </div>
+      </div>
+      <div class="col-sm-4 p0">
+        <button class="btn btns blue" (click)="createtestride()">CREATE ENQUIRY</button>
+      </div>
+    </div>
+
+    <div class="col-sm-8 col-12">
+      <div class="left_card" *ngIf="loader">
+        <div class="inner_load inner_edit-load">
+          <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+            x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+            <path fill="#28a8e0"
+              d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+              <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50"
+                to="360 50 50" repeatCount="indefinite" />
+            </path>
+          </svg>
+          <p>Just a moment...</p>
+        </div>
+      </div>
+      <div class="w100 sec-head">
+        <ul class="default top-menu">
+          <li>
+            <a routerLink="/action-history" routerLinkActive="active">Action History</a>
+          </li>
+          <li>
+            <a routerLink="/enquiry-profile" routerLinkActive="active"> Enquiry Profile</a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="top-section w100" *ngIf="!loader">
+        <div class="box-type task-left">
+          <div class="action">
+            <div class="col-sm-12">
+              <div class="row">
+                <div class="col-sm-6">
+                  <div class="col-left">
+                    <h4>{{enquirydata.first_name}}</h4>
+                    <p>Enquiry ID: <span>{{enquirydata.enq_num}}</span></p>
+                    <p>Model Name: <span>{{enquirydata.variant_name}}</span></p>
+                    <h4 class="throug"> Enquired Through
+                      <span *ngIf="enquirydata.enq_through == 'Star App'" class="star">{{enquirydata.enq_through}}
+                        <img src="assets/img/icon_logo.png" alt="Star App">
+                      </span>
+                      <span *ngIf="enquirydata.enq_through == 'DMS'" class="dms">{{enquirydata.enq_through}}
+                        <img src="assets/img/Icon_DMS.png" alt="DMS">
+                      </span>
+                    </h4>
+                  </div>
+                </div>
+                <div class="col-sm-6 pad0 history-right">
+                  <!-- <span class="starus">{{enquirydata.enquiry_str}}</span> -->
+                  <!-- <span class="status"  *ngIf="enquirydata.status=='H'">Hot</span>
+                  <span class="status warm"  *ngIf="enquirydata.status == 'W'">Warm</span>.status.warm{
+                    background: #3AB54B;
+                }
+                .status.cold{
+                    background: #F6941C;
+                }
+                  <span class="status cold"  *ngIf="enquirydata.status == 'P'">Cold</span> -->
+                  <span class="starus" *ngIf="enquirydata.status=='H'">Hot</span>
+                  <span class="starus warm" *ngIf="enquirydata.status == 'W'">Warm</span>
+                  <span class="starus cold" *ngIf="enquirydata.status == 'P'">Cold</span>
+                  <span class="starus post" *ngIf="enquirydata.status == 'E'">Postponed</span>
+                  <span class="starus lost" *ngIf="enquirydata.status == 'L'">Lost</span>
+                  <div class="col-right">
+                    <div class="follow-up">
+
+                      <p>Next Follow up:
+                        <span *ngIf="enquirydata.newvechicledate != ''">{{enquirydata.newvechicledate |date: 'dd-MMM-yyy'}}</span>
+                      </p>
+                      <p>Created Date:
+                        <span *ngIf="enquirydata.created_on != ''">{{enquirydata.created_on |date: 'dd-MMM-yyy'}}</span>
+                      </p>
+                      <p>Mobile: <span>{{enquirydata.custmobile}}</span></p>
+                    </div>
+                    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 513.64 513.64"
+                      style="enable-background:new 0 0 513.64 513.64;" xml:space="preserve">
+                      <g>
+                        <g>
+                          <path d="M499.66,376.96l-71.68-71.68c-25.6-25.6-69.12-15.359-79.36,17.92c-7.68,23.041-33.28,35.841-56.32,30.72
+                                c-51.2-12.8-120.32-79.36-133.12-133.12c-7.68-23.041,7.68-48.641,30.72-56.32c33.28-10.24,43.52-53.76,17.92-79.36l-71.68-71.68
+                                c-20.48-17.92-51.2-17.92-69.12,0l-48.64,48.64c-48.64,51.2,5.12,186.88,125.44,307.2c120.32,120.32,256,176.641,307.2,125.44
+                                l48.64-48.64C517.581,425.6,517.581,394.88,499.66,376.96z" />
+                        </g>
+                      </g>
+
+                    </svg>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="action_list">
+
+            <div class="history w100">
+              <div class="steps success" *ngFor="let slist of enquirylist">
+                <div class="imgcircle" [style.background-color]="slist.colorcode">
+                </div>
+                <span class="line" [style.background-color]="slist.colorcode"></span>
+                <p>{{slist.title}}</p>
+                <p>
+                  <span *ngIf="slist.status!=''">Status: <b>{{slist.status}}</b></span>
+                  <span *ngIf="slist.stage!=''">Stage: <b>{{slist.stage}}</b></span>
+                  <span *ngIf="slist.type!=''">Type: <b>{{slist.type}}</b></span>
+                </p>
+                <span class="cnt" *ngIf="slist.remarks!=''">Remarks: <b>{{slist.remarks}}</b></span>
+                <span class="cnt" *ngIf="slist.remarks==''">Remarks: <b>-</b></span>
+                <i>Date: {{slist.created_on_str}}</i>
+              </div>
+            </div>
+
+            <div class="w100 mb20 text-center" *ngIf="statuscheckvalue !='L'">
+              <button class="btn btns" data-target="#follow-modal" (click)="updateclick()"
+                data-toggle="modal">Update</button>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="col-sm-4 col-12 task-right">
+      <app-taskstatus></app-taskstatus>
+    </div>
+  </div>
+</div>
+
+
+<!-- Follow Up Modal -->
+<div class="modal fade" id="follow-modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
+  <form [formGroup]="followupform">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-sm-12">
+              <h5>Follow Up </h5>
+            </div>
+
+            <div class="col-sm-12">
+              <div class="form-group m0">
+                <label>Select status</label>
+              </div>
+            </div>
+
+            <div class="col-sm-12">
+              <div class="form-group schl-btn">
+                <button class="btn btns hot" [ngClass]="{'hot_active': statuscheck === 'H'}"
+                  (click)="statusclick('hot')">HOT</button>
+                <button class="btn btns warm" [ngClass]="{'warm_active': statuscheck === 'W'}"
+                  (click)="statusclick('warm')">WARM</button>
+                <button class="btn btns cold" [ngClass]="{'cold_active': statuscheck === 'P'}"
+                  (click)="statusclick('cold')">COLD</button>
+                  <button class="btn btns post" [ngClass]="{'post_active': statuscheck === 'E'}"
+                  (click)="statusclick('postponed')">POSTPONED</button>
+                <button class="btn btns lost " [ngClass]="{'lost_active': statuscheck === 'L'}"
+                  (click)="statusclick('lost')">LOST</button>
+              </div>
+            </div>
+
+            <div class="col-sm-6" [ngClass]="{'col-sm-12': statuscheck=='E'}"
+            *ngIf="statuscheck == 'L' || statuscheck == 'E'">
+             <div class="form-group">
+               
+               <label *ngIf="statuscheck == 'L'">Lost Reason </label>
+               <label *ngIf="statuscheck == 'E'">Postponed Reason </label>
+               <select class="form-control" formControlName="reason" (change)="selectreason($event.target.value)">
+                 <option selected="selected" disabled="disabled" value="">--Select--</option>
+                 <option *ngFor="let zm of selectedtypearr" [value]="zm.title_code">{{zm.title}}</option>
+               </select>
+             </div>
+             <div class="color_error shake" *ngIf="followupform.controls['reason'].value =='' && submittedvalue && (statuscheck=='L' || statuscheck=='E')  ">
+                 <a class="text-left shake">
+                   <img src="assets/img/error.png" />Please select a reason</a>
+               </div>
+           </div>
+           
+            <div class="col-sm-12" *ngIf="statuscheck !='L'">
+              <div class="form-group">
+                <label>Next Follow Up</label>
+                <select class="form-control" formControlName="modeofcontact"
+                  (change)="selectpurpose($event.target.value)" >
+                  <option selected="selected" disabled="disabled" value="">--Select--</option>
+                  <option *ngFor="let zm of purposearr" [value]="zm.title_code">{{zm.title}}</option>
+                </select>
+              </div>
+              <div class="color_error shake" *ngIf="statuscheck !='L' && followupform.controls['modeofcontact'].value =='' && submittedvalue">
+                <a class="text-left shake">
+                  <img src="assets/img/error.png" />Please select next follow up</a>
+              </div>
+            </div>
+
+            
+            <div class="col-sm-12" *ngIf="statuscheck !='L'">
+              <div class="form-group">
+
+                <label>Mode of Contact</label>
+                <select class="form-control" formControlName="nextfollowup"
+                  (change)="selectmodeofcontact($event.target.value)" >
+                  <option selected="selected" disabled="disabled" value="">--Select--</option>
+                  <option *ngFor="let zm of modeofcontactarr" [value]="zm.title_code">{{zm.title}}</option>
+                </select>
+              </div>
+              <div class="color_error shake" *ngIf="followupform.controls['nextfollowup'].value =='' && submittedvalue ">
+                <a class="text-left shake">
+                  <img src="assets/img/error.png" />Please select mode of contact </a>
+              </div>
+            </div>
+         
+
+          
+
+              <div class="col-sm-6" *ngIf="statuscheck == 'L'">
+                <div class="form-group">
+                  <label>Sub Reason</label>
+                  <select class="form-control" formControlName="subreason" (change)="selectsubreason($event.target.value)">
+                    <option selected="selected" disabled="disabled" value="">--Select--</option>
+                    <option *ngFor="let zm of subreasonarr" [value]="zm.title_code">{{zm.title}}</option>
+                  </select>
+                </div>
+                <div class="color_error shake" *ngIf="followupform.controls['subreason'].value =='' && submittedvalue &&  statuscheck=='L'   ">
+                  <a class="text-left shake">
+                    <img src="assets/img/error.png" />Please select a sub reason</a>
+                </div>
+            </div>
+
+            <div class="col-sm-6" *ngIf="statuscheck == 'L' && (followupform.controls['reason'].value =='MR1'||followupform.controls['reason'].value =='MR2') ">
+              <div class="form-group">
+                <label>Dealer</label>
+                <input type="text" class="form-control" placeholder="Enter Dealer Name" formControlName="dealervalue">
+              </div>
+              <div class="color_error shake" *ngIf="followupform.controls['dealervalue'].value ==''">
+                <a class="text-left shake">
+                  <img src="assets/img/error.png" />Please enter a dealer</a>
+              </div>
+            </div>
+
+              <div class="col-sm-6" *ngIf="statuscheck == 'L' && (followupform.controls['reason'].value =='MR1'||followupform.controls['reason'].value =='MR2') ">
+                <div class="form-group">
+                  <label>Model</label>
+                  <select class="form-control" formControlName="allmodel" required>
+                    <option selected="selected" disabled="disabled" value="">--Select--</option>
+                    <option *ngFor="let zm of lostmodelarr" [value]="zm.title_code">{{zm.title}}</option>
+                  </select>
+                </div>
+                <div class="color_error shake" *ngIf="followupform.controls['allmodel'].value ==''">
+                  <a class="text-left shake">
+                    <img src="assets/img/error.png" />Please select mode of contact</a>
+                </div>
+            </div>
+            <div class="col-sm-6 float-left" *ngIf="statuscheck != 'L'">            
+              <div class="form-group sch_date">
+                <label>Schedule Date</label>
+                <ng-datepicker formControlName="followupdatefm" [(ngModel)]="followupdate" [options]="options"
+                  name="followupdate" class="form-control custom-date"></ng-datepicker>
+              </div>
+            </div>
+
+            <div class="col-sm-6 float-left" *ngIf="statuscheck != 'L'">
+              <div class="form-group">
+                <label>Time</label>
+                <select class="form-control" formControlName="timeval" (change)="selecttime($event.target.value)"
+                  required>
+                  <option selected="selected" disabled="disabled" value="">--Select--</option>
+                  <option *ngFor="let zm of timearr" [value]="zm.title_code">{{zm.title}}</option>
+                </select>
+              </div>
+              <div class="color_error shake" *ngIf="followupform.controls['timeval'].value =='' && submittedvalue  ">
+                <a class="text-left shake">
+                  <img src="assets/img/error.png" />Please select time</a>
+              </div>
+            </div>
+
+
+
+
+            <div class="col-sm-12">
+              <div class="form-group">
+                <label>Remarks</label>
+                <textarea placeholder="Write Remarks" class="form-control" formControlName="remarks"></textarea>
+              </div>
+              <!-- <div class="color_error shake top_86" *ngIf="followupform.controls['remarks'].invalid && submittedvalue  ">
+                <a class="text-left shake">
+                  <img src="assets/img/error.png" />Please enter remarks</a>
+              </div> -->
+            </div>
+
+
+
+
+            <div class="col-sm-12 mt20 text-center">
+              <button class="btn btns" (click)="clear_insert()" data-dismiss="modal">Cancel</button>
+              <button class="btn btns" *ngIf="submittedvalue == false"  (click)="insertfollowup()">Submit</button>
+              <button class="btn btns" *ngIf="submittedvalue == true" disabled  >Submit</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>

Hyper-M_User_Portal/src/app/leadmodule/action-history/action-history.component.scss

@@ -0,0 +1,520 @@
+.section{
+    padding: 0 20px;
+    .sec-head{
+        margin: 10px 0;
+    }
+    .w100{
+        float: left;
+        width: 100%;
+        .back{
+            display: inline-block;
+            cursor: pointer;
+            margin: 0;
+            img{
+                width: 14px;
+                padding-right: 5px;
+            }
+        }
+        .back:hover, .back:focus, .back:active{
+            outline: none;
+        }
+        .monthly-det{
+            float: right;
+            margin: 0 10px 15px 10px;
+            img{
+                width: 12px;
+                cursor: no-drop;
+                opacity: 0.4;
+            }
+            p{
+                margin: 0;
+                display: inline-block;
+                padding: 0 5px;
+                min-width: 120px;
+                text-align: center;
+            }
+        }
+    }
+}
+
+.btns{
+    width: auto;
+    border-radius: 3px;
+    margin: 0;
+    padding: 6px 40px;
+    font-size: 14px;
+    height: auto;
+    font-weight: 500;
+    background: #28a8e0;
+    color: #fff;
+    border: none;
+}
+.btns.blue{
+    color: #ffffff !important;
+    border: 2px solid #28a8e0;
+    float: right;
+}
+ul.default{
+    list-style: none;
+    margin:0;
+    padding: 0;
+}
+
+.m0{
+    margin: 0 !important;
+}
+.mt20{
+    margin-top: 20px;
+}
+.mb20{
+    margin-bottom: 20px;
+}
+.top-menu{
+    li{
+        float: left;
+        a{
+            color: #28a8e0;
+            font-weight: 700;
+            text-transform: uppercase;
+            padding: 10px;
+            font-size: 12px;
+            text-decoration: none;
+            margin-right: 10px;
+        }
+        a:hover,a.active{
+            border-bottom: 2px solid #28a8e0;
+        }
+    }
+}
+
+.top-section{
+    padding: 15px 0 0 0;
+    .box-type{
+        box-shadow: 0 0px 8px rgba(0, 0, 0, 0.3);
+        border-radius: 5px;
+        // padding: 15px;
+        float: left;
+        width: 100%;
+        margin-bottom: 15px;
+        background: #fff;
+        h5{
+            font-size: 14px;
+        }
+
+        ul.stat_ul{
+            li{
+                padding: 10px 0;
+                border-bottom: 1px solid #d5d5d5;
+                float: left;
+                width: 100%;
+                svg{
+                    width: 24px;
+                    fill: #28a8e0;
+                    margin: 0 30px;
+                }
+                span{
+                    font-size: 16px;
+                    font-weight: 500;                    
+                }
+                b{
+                    margin: 0 30px;
+                    float: right;
+                    font-size: 24px;
+                    line-height: 24px;
+                    color: #1D1D1D;
+                }
+            }
+            li:last-child{
+                border: none;
+                padding-bottom: 0;
+            }
+        }
+        ul.stat_ul.pending{
+            li{
+                svg{
+                    fill: #9e0c0f;
+                }
+            }
+        }
+        ul.clr-stat{
+            li{
+                width: 33.33%; float: left; padding: 10px;
+                .clr-box{
+                    padding: 24px 20px;
+                    font-size: 24px;
+                    color: #fff;
+                    text-align: center;
+                    font-weight: bold;
+                }
+            }
+            li:nth-child(1){
+                .clr-box{
+                    background: #005826;
+                }
+            }
+            li:nth-child(2){
+                .clr-box{
+                    background: #00A652;
+                }
+            }
+            li:nth-child(3){
+                .clr-box{
+                    background: #F7941D;
+                }
+            }
+            li:first-child{
+                padding-left: 0;
+            }
+            li:last-child{
+                padding-right: 0;
+            }
+        }
+        ul.enq-ul{
+            li{
+                width: 25%;
+                float: left;
+                padding: 10px;
+                .enq-detail{
+                    border: 1px solid #AFAFAF;
+                    padding: 10px;
+                    float: left;
+                    width: 100%;
+                    img{
+                        padding: 4px 0;
+                    }
+                    p{
+                        width: 50%;
+                        text-align: center;
+                        float: right;
+                        margin:0;
+                        span{
+                            display: block;
+                            color: #000;
+                            font-weight: 500;
+                            line-height: 20px;
+                        }
+                        b{
+                            font-size: 20px;
+                            font-weight: bold;
+                            display: block;
+                            color: #00334E;
+                            line-height: 16px;
+                        }
+                    }
+                }
+            }
+            li:first-child{
+                padding-left: 0;
+            }
+            li:last-child{
+                padding-right: 0;
+            }
+        }
+        p.enq-txt{
+            color: #00344C;
+            font-size: 14px;
+            margin: 0;
+            width: auto;
+            display: inline-block;
+            span{
+                opacity: 0.8;
+            }
+        }
+    }
+    .task-left{
+        height: calc(100vh - 224px);
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+
+.action{
+    background: #eee;
+    float: left;
+    width: 100%;
+}
+.col-left{
+    float: left;
+    width:100%;
+    margin:10px 0;
+    .throug{
+        font-size: 16px;
+        margin-top: 1px;
+        margin-bottom: 0px;
+    span{
+           color: #9e0c0f; 
+    }
+    img{
+        width: 20px;
+    }
+    }
+    h4{
+        color: #28a8e0;
+        margin-bottom: 5px;
+        font-size: 16px;
+        font-weight: 700;
+        text-transform: capitalize;
+    }
+    p{
+        color: #000;
+        font-size: 14px;
+        margin-bottom: 5px;
+        span{
+            font-weight: bold;
+        }
+    }
+}
+.col-right{
+    float: left;
+    width: 100%;
+    .follow-up{
+        width: 70%;
+        float: left;
+        h4{
+            color: #28a8e0;
+            margin-bottom: 5px;
+            font-size: 16px;
+            font-weight: 700;
+        }
+        p{
+            color: #000;
+            font-size: 14px;
+            margin-bottom: 5px;
+            span{
+                font-weight: bold;
+            }
+        }
+    }   
+  
+}
+
+.pad0{
+    padding: 0;
+}
+.history-right{
+    .starus{
+        background: #005826;
+        float: right;
+        color: #fff;
+        width: auto;
+        text-align: center;
+        border-radius: 6px;
+        padding: 0 4px;
+    }
+    .starus.warm{
+        background: #3AB54B;
+    }
+    .starus.cold{
+        background: #F6941C;
+    }
+    .starus.lost{
+        background: #dc3545;
+    }
+    .starus.post{
+        background: #ffc107;
+    }
+    svg{
+        width: 22%;
+        float: right;
+        fill: limegreen;
+        text-align: right;
+        padding: 20px;
+    }
+}
+
+.action_list{
+    width:100%;
+    float: left;
+    ul{
+        li{
+            list-style: none;
+        }
+    }
+}
+
+.history{
+    padding: 20px 80px;
+    .steps{
+        width: 100%;
+        position: relative;
+        float: left;
+        min-height: 75px;
+        p{
+            width: 100%;
+            padding: 0 0 0 40px;
+            font-size: 16px;
+            font-weight: 500;
+            margin: 0;
+            span{
+                border-right: 1px solid #ccc;
+                font-weight: normal;
+                font-size: 13px;
+                padding-right: 10px;
+                margin-right: 10px;
+            }
+            span:last-child{
+                border: none;
+                padding: 0;
+                margin: 0;
+            }
+        }
+        .imgcircle {
+            height: 20px;
+            width: 20px;
+            border-radius: 50%;
+            position: relative;
+            float: left;
+            box-shadow: 0 5px 6px #777;
+            z-index: 1;
+        }
+        i{
+            position: absolute;
+            right: 15px;
+            top: 0;
+            font-style: normal;
+            font-size: 14px;
+            font-weight: 600;
+        }
+        span.line {
+            width: 4px;
+            height: 100%;
+            position: absolute;
+            bottom: 0;
+            left: 8px;
+            z-index: 0;
+        }
+        .cnt{
+            padding: 5px 15px 15px 40px;
+            font-size: 13px;
+            display: block;
+            font-weight: normal;
+        }
+        i.green{
+            color:#138D00;
+        }
+        i.red{
+            color:#ff0000;
+        }
+    }
+    .steps:last-child{
+        .line{
+            height: 0;
+        }
+    }
+
+    .success{
+        .imgcircle, span.line {
+            background-color:#138D00;
+        }
+    }
+    .warning{
+        .imgcircle, span.line {
+            background: #FFFF00;
+        }
+    }
+    .info{
+        .imgcircle, span.line {
+            background: #F8941C;
+        }
+    }
+}
+
+
+.modal{
+    .modal-content{
+        padding: 30px;
+    }
+    .modal-header{
+        border: none;
+        padding: 0;
+        padding-bottom: 20px;
+        h5, p{
+            color: #28a8e0;
+        }
+    }
+    .modal-body{
+        padding: 0;
+        .form-group{
+            margin-bottom: 15px;
+            label{
+                font-size: 14px;
+                font-weight: 500;
+            }
+            .form-control{
+                display: block;
+                // width: 100% !important;
+                height: calc(1.5em + .75rem + 2px);
+                padding: .375rem .75rem!important;
+                font-size: 12px !important;
+                font-weight: 500 !important;
+                line-height: 1.5 !important;
+                color: #495057 !important;
+                background-color: #fff  !important;
+                background-clip: padding-box  !important;
+                border: 1px solid #ced4da  !important;
+                border-radius: .25rem  !important;
+            }
+            textarea{
+                height: 50px !important;
+            }
+        }
+        .schl-btn{
+            .btn{
+                background:#aaa;
+                margin-bottom: 10px;
+            }
+            .btn.hot:hover{
+                background: #005826;
+            }
+            .btn.warm:hover{
+                background: #00A652;
+            }
+            .btn.cold:hover{
+                background: #F7941D;
+            }
+            .btn.lost:hover{
+                background: #dc3545;
+            }
+            .btn.post:hover{
+                background: #ffc107;
+            }
+        }
+    }
+    .btn{
+        margin: 0;
+        background: #28a8e0;
+        padding: 8px 18px;
+        width: auto;
+        height: auto;
+    }
+}
+
+
+.ngx-datepicker-container .ngx-datepicker-input {  
+    font-size: 14px;
+   
+    outline: 0;
+    border: 1px solid #dfe3e9;
+}
+
+.hot_active{
+    background: #005826 !important;
+}
+.warm_active{
+    background: #00A652 !important;
+}
+.cold_active{
+    background: #F7941D !important;
+}
+.lost_active{
+    background: #dc3545 !important;
+}
+.post_active{
+    background: #ffc107 !important;
+}
+.top_86{
+    top: 86px !important;
+}
+.p0{
+    padding: 0;
+}

Hyper-M_User_Portal/src/app/leadmodule/action-history/action-history.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionHistoryComponent } from './action-history.component';
+
+describe('ActionHistoryComponent', () => {
+  let component: ActionHistoryComponent;
+  let fixture: ComponentFixture<ActionHistoryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActionHistoryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});