Merge pull request #3 from girik21/feat/user-details-FE-BE

Feat/user details fe be

src/app/@theme/components/header/header.component.html

@@ -3,24 +3,37 @@
     <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
       <nb-icon icon="menu-2-outline"></nb-icon>
     </a>
-    <a class="logo" href="#" (click)="navigateHome()"><span><img src="assets/images/thread.png" alt="My Logo"></span>Resume Tailor</a>
+    <a class="logo" href="#" (click)="navigateHome()"
+      ><span><img src="assets/images/thread.png" alt="My Logo" /></span>Resume
+      Tailor</a
+    >
   </div>
-  <div class="spc"> </div>
+  <div class="spc"></div>
-  <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
+  <nb-select
-    <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
+    [selected]="currentTheme"
+    (selectedChange)="changeTheme($event)"
+    status="primary"
+  >
+    <nb-option *ngFor="let theme of themes" [value]="theme.value">
+      {{ theme.name }}</nb-option
+    >
   </nb-select>
 </div>
 
 <div class="header-container">
   <nb-actions size="small">
-
     <nb-action class="control-item">
       <nb-search type="rotate-layout"></nb-search>
     </nb-action>
     <nb-action class="control-item" icon="email-outline"></nb-action>
     <nb-action class="control-item" icon="bell-outline"></nb-action>
     <nb-action class="user-action" *nbIsGranted="['view', 'user']">
-      <nb-user [nbContextMenu]="userMenu" [onlyPicture]="userPictureOnly" [name]="user?.name" [picture]="user?.picture">
+      <nb-user
+        [nbContextMenu]="userMenu"
+        [onlyPicture]="userPictureOnly"
+        [name]="user?.name"
+        [picture]="user?.picture"
+      >
       </nb-user>
     </nb-action>
   </nb-actions>

src/app/@theme/components/header/header.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
+import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService, NbMenuItem } from '@nebular/theme';
 
 import { UserData } from '../../../@core/data/users';
 import { LayoutService } from '../../../@core/utils';
 import { map, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { AuthService } from '../../../service/auth.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'ngx-header',
@@ -26,14 +28,14 @@ export class HeaderComponent implements OnInit, OnDestroy {
       value: 'dark',
       name: 'Dark',
     },
-    {
+    // {
-      value: 'cosmic',
+    //   value: 'cosmic',
-      name: 'Cosmic',
+    //   name: 'Cosmic',
-    },
+    // },
-    {
+    // {
-      value: 'corporate',
+    //   value: 'corporate',
-      name: 'Corporate',
+    //   name: 'Corporate',
-    },
+    // },
   ];
 
   currentTheme = 'default';
@@ -45,7 +47,9 @@ export class HeaderComponent implements OnInit, OnDestroy {
               private themeService: NbThemeService,
               private userService: UserData,
               private layoutService: LayoutService,
-              private breakpointService: NbMediaBreakpointsService) {
+              private breakpointService: NbMediaBreakpointsService,
+              private authService: AuthService,
+              private router: Router) {
   }
 
   ngOnInit() {
@@ -69,6 +73,14 @@ export class HeaderComponent implements OnInit, OnDestroy {
         takeUntil(this.destroy$),
       )
       .subscribe(themeName => this.currentTheme = themeName);
+
+    this.menuService.onItemClick().subscribe((event: { item: NbMenuItem }) => {
+      if (event.item.title === 'Log out') {
+        this.logout();
+      } else if (event.item.title === 'Profile') {
+        this.router.navigate(['/pages/layout/stepper/profile']); // Redirect to profile page
+      }
+    });
   }
 
   ngOnDestroy() {
@@ -91,4 +103,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.menuService.navigateHome();
     return false;
   }
+
+  logout(): void {
+    this.authService.logout();
+  }
 }

src/app/app.module.ts

@@ -11,6 +11,7 @@ import {
   NbSidebarModule,
   NbToastrModule,
   NbWindowModule,
+  NbCheckboxModule
 } from '@nebular/theme';
 import { environment } from '../environments/environment';
 import { CoreModule } from './@core/core.module';
@@ -41,6 +42,7 @@ import { AuthGuard } from './service/auth-guard.service';
     }),
     CoreModule.forRoot(),
     ThemeModule.forRoot(),
+    NbCheckboxModule
   ],
   providers: [
     AuthGuard

src/app/pages/layout/layout-routing.module.ts

@@ -7,6 +7,7 @@ import { AccordionComponent } from './accordion/accordion.component';
 import { InfiniteListComponent } from './infinite-list/infinite-list.component';
 import { ListComponent } from './list/list.component';
 import { StepperComponent } from './stepper/stepper.component';
+import { ProfileComponent } from './stepper/profile/profile.component';
 
 const routes: Routes = [{
   path: '',
@@ -16,6 +17,10 @@ const routes: Routes = [{
       path: 'stepper',
       component: StepperComponent,
     },
+    {
+      path: 'stepper/profile',
+      component: ProfileComponent,
+    },
     {
       path: 'list',
       component: ListComponent,

src/app/pages/layout/stepper/profile/profile.component.html

@@ -1 +1,99 @@
-<p>profile works!</p>
+<nb-card>
+  <nb-card-header>User Profile</nb-card-header>
+  <nb-card-body>
+    <div class="profile-details">
+      <div class="personal-details">
+        <h2>Personal Details</h2>
+        <p><strong>Username:</strong> {{ userDetails.username }}</p>
+        <p><strong>Email:</strong> {{ userDetails.email }}</p>
+        <p><strong>Phone:</strong> {{ userDetails.phone }}</p>
+        <p>
+          <strong>Address:</strong> {{ userDetails.address1 }},
+          {{ userDetails.address2 }}, {{ userDetails.city }},
+          {{ userDetails.state }}, {{ userDetails.zip }}
+        </p>
+        <p>
+          <strong>LinkedIn:</strong>
+          <a href="{{ userDetails.linkedinLink }}" target="_blank">{{
+            userDetails.linkedinLink
+          }}</a>
+        </p>
+        <p>
+          <strong>Portfolio:</strong>
+          <a href="{{ userDetails.portfolioLink }}" target="_blank">{{
+            userDetails.portfolioLink
+          }}</a>
+        </p>
+      </div>
+      <div class="professional-summary">
+        <h2>Professional Summary</h2>
+        <p>{{ userDetails.professionalSummary }}</p>
+      </div>
+      <div class="experience">
+        <h2>Experience</h2>
+        <ul>
+          <li *ngFor="let exp of userExperiences">
+            <p><strong>Position:</strong> {{ exp.position }}</p>
+            <p><strong>Employer:</strong> {{ exp.employer }}</p>
+            <p><strong>Location:</strong> {{ exp.location }}</p>
+            <p><strong>Start Date:</strong> {{ exp.startDate }}</p>
+            <p><strong>End Date:</strong> {{ exp.endDate }}</p>
+            <p><strong>Description:</strong> {{ exp.description }}</p>
+            <div *ngIf="exp.projects && exp.projects.length > 0">
+              <p><strong>Projects:</strong></p>
+              <ul>
+                <li *ngFor="let project of exp.projects">
+                  <p><strong>Name:</strong> {{ project.name }}</p>
+                  <p><strong>Description:</strong> {{ project.description }}</p>
+                  <p>
+                    <strong>Link:</strong>
+                    <a href="{{ project.link }}" target="_blank">{{
+                      project.link
+                    }}</a>
+                  </p>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="education">
+        <h2>Education</h2>
+        <ul>
+          <li *ngFor="let edu of userEducation">
+            <p><strong>Degree Name:</strong> {{ edu.degreeName }}</p>
+            <p><strong>School:</strong> {{ edu.school }}</p>
+            <p><strong>Location:</strong> {{ edu.location }}</p>
+            <p><strong>Major:</strong> {{ edu.major }}</p>
+            <p><strong>Minor:</strong> {{ edu.minor }}</p>
+            <p><strong>Start Date:</strong> {{ edu.startDate }}</p>
+            <p><strong>End Date:</strong> {{ edu.endDate }}</p>
+            <p><strong>Grade:</strong> {{ edu.grade }}</p>
+            <p><strong>Description:</strong> {{ edu.description }}</p>
+          </li>
+        </ul>
+      </div>
+      <div class="certifications">
+        <h2>Certifications</h2>
+        <ul>
+          <li *ngFor="let cert of userCertificates">
+            <p><strong>Certificate Name:</strong> {{ cert.name }}</p>
+            <p><strong>Issuer:</strong> {{ cert.issuer }}</p>
+            <p>
+              <strong>Date:</strong> {{ cert.startDate }} - {{ cert.endDate }}
+            </p>
+            <p><strong>Relevance:</strong> {{ cert.description }}</p>
+          </li>
+        </ul>
+      </div>
+      <div class="skills">
+        <h2>Skills</h2>
+        <ul>
+          <li *ngFor="let skill of userSkills">
+            <p><strong>Name:</strong> {{ skill.name }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nb-card-body>
+</nb-card>

src/app/pages/layout/stepper/profile/profile.component.ts

@@ -1,10 +1,49 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UserAPI } from '../../../../service/api/user-api.service';
 
 @Component({
   selector: 'ngx-profile',
   templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
+  styleUrls: ['./profile.component.scss'],
 })
-export class ProfileComponent {
+export class ProfileComponent implements OnInit {
+  userDetails: any = {};
+  userExperiences: any[] = [];
+  userEducation: any[] = [];
+  userProjects: any[] = [];
+  userSkills: any[] = [];
+  userCertificates: any[] = [];
+  // userResumes: any[] = [];
+  // userCoverLetters: any[] = [];
 
+  constructor(private route: ActivatedRoute, private userAPI: UserAPI) {}
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe((params) => {
+      const userId = params['userId']; // Get the userId from query params
+
+      console.log(userId);
+
+      if (userId) {
+        this.userAPI.getUserDetails(userId).subscribe((response) => {
+          if (response.success) {
+            this.userDetails = response.data;
+            console.log(this.userDetails)
+            this.userExperiences = this.userDetails.experiences || [];
+            this.userEducation = this.userDetails.education || [];
+            this.userProjects = this.userDetails.projects || [];
+            this.userSkills = this.userDetails.skills || [];
+            this.userCertificates = this.userDetails.certificates || [];
+            // this.userResumes = this.userDetails.resumes || [];
+            // this.userCoverLetters = this.userDetails.coverLetters || [];
+          } else {
+            console.error('Failed to retrieve user details:', response.message);
+          }
+        });
+      } else {
+        console.error('User ID not found in query parameters.');
+      }
+    });
+  }
 }

src/app/pages/layout/stepper/stepper.component.html

@@ -4,6 +4,7 @@
       <nb-step [label]="labelOne">
         <ng-template #labelOne>Personal details</ng-template>
 
+        <form [formGroup]="personalDetails">
           <!-- Start of form  -->
           <nb-card>
             <nb-card-header> <h3>Personal Details</h3></nb-card-header>
@@ -13,39 +14,33 @@
                   <div class="col-md-6">
                     <div class="form-group text-left">
                       <label
-                      for="fullName"
+                        for="username"
                         class="text-muted font-weight-bold small"
                         >Full Name</label
                       >
                       <input
                         type="text"
                         class="form-control bg-light"
-                      id="fullName"
+                        id="username"
                         placeholder="Full name"
+                        formControlName="username"
                       />
                     </div>
                     <div class="form-group text-left">
-                    <label for="email" class="text-muted font-weight-bold small"
+                      <label
-                      >Email Address</label
+                        for="phone"
-                    >
+                        class="text-muted font-weight-bold small"
-                    <input
-                      type="email"
-                      class="form-control bg-light"
-                      id="email"
-                      placeholder="Email address"
-                    />
-                  </div>
-                  <div class="form-group text-left">
-                    <label for="phone" class="text-muted font-weight-bold small"
                         >Phone Number</label
                       >
                       <input
                         type="tel"
                         class="form-control bg-light"
                         id="phone"
+                        formControlName="phone"
                         placeholder="Phone number"
                       />
                     </div>
+
                     <div class="form-group text-left">
                       <label
                         for="linkedin"
@@ -56,35 +51,117 @@
                         type="url"
                         class="form-control bg-light"
                         id="linkedin"
+                        formControlName="linkedinLink"
                         placeholder="LinkedIn URL"
                       />
                     </div>
                   </div>
                   <div class="col-md-6">
+                    <div class="form-group text-left">
+                      <label
+                        for="email"
+                        class="text-muted font-weight-bold small"
+                        >Email Address</label
+                      >
+                      <input
+                        type="email"
+                        class="form-control bg-light"
+                        id="email"
+                        formControlName="email"
+                        placeholder="Email address"
+                      />
+                    </div>
                     <div class="form-group text-left">
                       <label
                         for="website"
                         class="text-muted font-weight-bold small"
-                      >Personal Website or Relevant Link</label
+                        >Portfolio Link / Website</label
                       >
                       <input
                         type="url"
                         class="form-control bg-light"
                         id="website"
+                        formControlName="portfolioLink"
                         placeholder="Website link"
                       />
                     </div>
+                  </div>
+
+                  <div class="col-md-12">
+                    <hr />
+                  </div>
+
+                  <div class="col-md-6">
                     <div class="form-group text-left">
                       <label
-                      for="country"
+                        for="address1"
                         class="text-muted font-weight-bold small"
-                      >Country</label
+                        >Street Address</label
                       >
                       <input
                         type="text"
                         class="form-control bg-light"
-                      id="country"
+                        id="address1"
-                      placeholder="Country"
+                        formControlName="address1"
+                        placeholder="Address 1"
+                      />
+                    </div>
+                    <div class="form-group text-left">
+                      <label
+                        for="city"
+                        class="text-muted font-weight-bold small"
+                        >City</label
+                      >
+                      <input
+                        type="text"
+                        class="form-control bg-light"
+                        id="city"
+                        formControlName="city"
+                        placeholder="City"
+                      />
+                    </div>
+
+                    <div class="form-group text-left">
+                      <label for="zip" class="text-muted font-weight-bold small"
+                        >Zip</label
+                      >
+                      <input
+                        type="text"
+                        class="form-control bg-light"
+                        id="zip"
+                        formControlName="zip"
+                        placeholder="Zip"
+                      />
+                    </div>
+                  </div>
+
+                  <div class="col-md-6">
+                    <div class="form-group text-left">
+                      <label
+                        for="address2"
+                        class="text-muted font-weight-bold small"
+                        >Address 2</label
+                      >
+                      <input
+                        type="text"
+                        class="form-control bg-light"
+                        id="address2"
+                        formControlName="address2"
+                        placeholder="Address 2"
+                      />
+                    </div>
+                    <div class="form-group text-left">
+                      <label
+                        for="state"
+                        class="text-muted font-weight-bold small"
+                        >State</label
+                      >
+                      <input
+                        type="text"
+                        class="form-control bg-light"
+                        id="state"
+                        formControlName="state"
+                        placeholder="State"
                       />
                     </div>
                   </div>
@@ -92,13 +169,15 @@
               </div>
             </nb-card-body>
           </nb-card>
-
           <!-- end of form  -->
-        <button nbButton disabled nbStepperNext>prev</button>
+        </form>
+
+        <!-- <button nbButton disabled nbStepperNext>prev</button> -->
         <button nbButton nbStepperNext>next</button>
       </nb-step>
 
       <nb-step label="Experience">
+        <form [formGroup]="experience">
           <!-- Start of form -->
           <nb-card>
             <nb-card-header><h3>Experience</h3></nb-card-header>
@@ -107,52 +186,20 @@
                 <div class="row">
                   <div class="col-md-6">
                     <div class="form-group text-left">
-                    <label for="role" class="text-muted font-weight-bold small"
+                      <label
+                        for="role"
+                        class="text-muted font-weight-bold small"
                         >What was your role at the company?</label
                       >
                       <input
                         type="text"
                         class="form-control bg-light"
                         id="role"
+                        formControlName="position"
                         placeholder="Your role at the company"
                       />
                     </div>
-                  <div class="form-group text-left">
+
-                    <label
-                      for="company"
-                      class="text-muted font-weight-bold small"
-                      >For which company did you work?</label
-                    >
-                    <input
-                      type="text"
-                      class="form-control bg-light"
-                      id="company"
-                      placeholder="Company name"
-                    />
-                  </div>
-                  <div class="form-group text-left">
-                    <label
-                      for="duration"
-                      class="text-muted font-weight-bold small"
-                      >How long were you with the company?</label
-                    >
-                    <div class="input-group">
-                      <input
-                        type="text"
-                        class="form-control bg-light"
-                        id="duration"
-                        placeholder="Start date"
-                      />
-                      <div class="input-group-prepend">
-                        <span class="input-group-text">-</span>
-                      </div>
-                      <input
-                        type="text"
-                        class="form-control bg-light"
-                        placeholder="End date"
-                      />
-                    </div>
-                  </div>
                     <div class="form-group text-left">
                       <label
                         for="location"
@@ -163,11 +210,85 @@
                         type="text"
                         class="form-control bg-light"
                         id="location"
+                        formControlName="location"
                         placeholder="Company location"
                       />
                     </div>
+
+                    <div class="form-group text-left">
+                      <label
+                        for="duration"
+                        class="text-muted font-weight-bold small"
+                        >How long were you with the company?</label
+                      >
+                      <div class="input-group">
+                        <input
+                          nbInput
+                          type="date"
+                          class="form-control bg-light"
+                          id="duration"
+                          formControlName="startDate"
+                          placeholder="Start date"
+                        />
+                        <div class="input-group-prepend">
+                          <span class="input-group-text">-</span>
                         </div>
+                        <input
+                          type="date"
+                          formControlName="endDate"
+                          class="form-control bg-light"
+                          placeholder="End date"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
                   <div class="col-md-6">
+                    <div class="form-group text-left">
+                      <label
+                        for="company"
+                        class="text-muted font-weight-bold small"
+                        >For which company did you work?</label
+                      >
+                      <input
+                        type="text"
+                        class="form-control bg-light"
+                        id="company"
+                        formControlName="employer"
+                        placeholder="Company name"
+                      />
+                    </div>
+
+                    <div class="form-group text-left">
+                      <label
+                        for="location"
+                        class="text-muted font-weight-bold small"
+                        >Company Website</label
+                      >
+                      <input
+                        type="text"
+                        class="form-control bg-light"
+                        id="location"
+                        formControlName="companyLink"
+                        placeholder="Website of the company.."
+                      />
+                    </div>
+
+                    <div class="form-group text-left">
+                      <label
+                        for="location"
+                        class="text-muted font-weight-bold small"
+                        >Current Job</label
+                      >
+                      <input
+                        type="checkbox"
+                        class="form-control bg-light"
+                        id="Current company"
+                        formControlName="currentJob"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-md-12">
                     <div class="form-group text-left">
                       <label
                         for="responsibilities"
@@ -178,6 +299,7 @@
                         class="form-control bg-light"
                         id="responsibilities"
                         rows="5"
+                        formControlName="description"
                         placeholder="Enter your responsibilities"
                       ></textarea>
                     </div>
@@ -187,12 +309,14 @@
             </nb-card-body>
           </nb-card>
           <!-- end of form -->
+        </form>
 
         <button nbButton nbStepperPrevious>prev</button>
         <button nbButton nbStepperNext>next</button>
       </nb-step>
-      <nb-step label="Project">
 
+      <nb-step label="Project">
+        <form [formGroup]="project">
           <!-- Start of form -->
           <nb-card>
             <nb-card-header><h3>Project</h3></nb-card-header>
@@ -210,9 +334,39 @@
                         type="text"
                         class="form-control bg-light"
                         id="projectTitle"
+                        formControlName="name"
                         placeholder="Project title"
                       />
                     </div>
+
+                    <div class="form-group text-left">
+                      <label
+                        for="projectDuration"
+                        class="text-muted font-weight-bold small"
+                        >When did you do your project?</label
+                      >
+                      <div class="input-group">
+                        <input
+                          type="date"
+                          class="form-control bg-light"
+                          id="projectDuration"
+                          formControlName="startDate"
+                          placeholder="Start date"
+                        />
+                        <div class="input-group-prepend">
+                          <span class="input-group-text">-</span>
+                        </div>
+                        <input
+                          type="date"
+                          formControlName="endDate"
+                          class="form-control bg-light"
+                          placeholder="End date"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="col-md-6">
                     <div class="form-group text-left">
                       <label
                         for="organization"
@@ -223,32 +377,10 @@
                         type="text"
                         class="form-control bg-light"
                         id="organization"
+                        formControlName="employer"
                         placeholder="Organization name"
                       />
                     </div>
-                  <div class="form-group text-left">
-                    <label
-                      for="projectDuration"
-                      class="text-muted font-weight-bold small"
-                      >When did you do your project?</label
-                    >
-                    <div class="input-group">
-                      <input
-                        type="text"
-                        class="form-control bg-light"
-                        id="projectDuration"
-                        placeholder="Start date"
-                      />
-                      <div class="input-group-prepend">
-                        <span class="input-group-text">-</span>
-                      </div>
-                      <input
-                        type="text"
-                        class="form-control bg-light"
-                        placeholder="End date"
-                      />
-                    </div>
-                  </div>
                     <div class="form-group text-left">
                       <label
                         for="projectURL"
@@ -259,11 +391,12 @@
                         type="url"
                         class="form-control bg-light"
                         id="projectURL"
+                        formControlName="link"
                         placeholder="Project URL"
                       />
                     </div>
                   </div>
-                <div class="col-md-6">
+                  <div class="col-md-12">
                     <div class="form-group text-left">
                       <label
                         for="projectDescription"
@@ -274,6 +407,7 @@
                         class="form-control bg-light"
                         id="projectDescription"
                         rows="5"
+                        formControlName="description"
                         placeholder="Describe your project"
                       ></textarea>
                     </div>
@@ -283,12 +417,14 @@
             </nb-card-body>
           </nb-card>
           <!-- end of form -->
+        </form>
 
         <button nbButton nbStepperPrevious>prev</button>
         <button nbButton nbStepperNext>next</button>
       </nb-step>
-      <nb-step label="Education">
 
+      <nb-step label="Education">
+        <form [formGroup]="education">
           <!-- Start of form -->
           <nb-card>
             <nb-card-header><h3>Education</h3></nb-card-header>
@@ -300,16 +436,21 @@
                       <label
                         for="degree"
                         class="text-muted font-weight-bold small"
-                      >What is your degree or other qualification and
+                        >What is your degree earned?</label
-                      major?</label
                       >
                       <input
                         type="text"
                         class="form-control bg-light"
                         id="degree"
+                        formControlName="degreeName"
                         placeholder="Your degree and major"
                       />
                     </div>
+                  </div>
+
+                  <div class="col-md-6"></div>
+
+                  <div class="col-md-6">
                     <div class="form-group text-left">
                       <label
                         for="institution"
@@ -320,9 +461,53 @@
                         type="text"
                         class="form-control bg-light"
                         id="institution"
+                        formControlName="school"
                         placeholder="Institution name"
                       />
                     </div>
+
+                    <div class="form-group text-left">
+                      <label
+                        for="degree"
+                        class="text-muted font-weight-bold small"
+                        >What is your major field of study?</label
+                      >
+                      <input
+                        type="text"
+                        class="form-control bg-light"
+                        id="degree"
+                        formControlName="major"
+                        placeholder="Your major"
+                      />
+                    </div>
+
+                    <div class="form-group text-left">
+                      <label
+                        for="graduationYear"
+                        class="text-muted font-weight-bold small"
+                        >When did you earn your degree/qualification?</label
+                      >
+                      <div class="input-group">
+                        <input
+                          type="date"
+                          class="form-control bg-light"
+                          id="educationDuration"
+                          formControlName="startDate"
+                          placeholder="Start date"
+                        />
+                        <div class="input-group-prepend">
+                          <span class="input-group-text">-</span>
+                        </div>
+                        <input
+                          type="date"
+                          formControlName="endDate"
+                          class="form-control bg-light"
+                          placeholder="End date"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-md-6">
                     <div class="form-group text-left">
                       <label
                         for="institutionLocation"
@@ -333,32 +518,21 @@
                         type="text"
                         class="form-control bg-light"
                         id="institutionLocation"
+                        formControlName="location"
                         placeholder="Institution location"
                       />
                     </div>
                     <div class="form-group text-left">
                       <label
-                      for="graduationYear"
+                        for="minor"
                         class="text-muted font-weight-bold small"
-                      >When did you earn your degree/qualification?</label
-                    >
-                    <input
-                      type="text"
-                      class="form-control bg-light"
-                      id="graduationYear"
-                      placeholder="Graduation year"
-                    />
-                  </div>
-                </div>
-                <div class="col-md-6">
-                  <div class="form-group text-left">
-                    <label for="minor" class="text-muted font-weight-bold small"
                         >Did you minor in anything?</label
                       >
                       <input
                         type="text"
                         class="form-control bg-light"
                         id="minor"
+                        formControlName="minor"
                         placeholder="Minor subject"
                       />
                     </div>
@@ -370,9 +544,13 @@
                         type="text"
                         class="form-control bg-light"
                         id="gpa"
+                        formControlName="grade"
                         placeholder="Your GPA"
                       />
                     </div>
+                  </div>
+
+                  <div class="col-md-12">
                     <div class="form-group text-left">
                       <label
                         for="additionalInfo"
@@ -383,6 +561,7 @@
                         class="form-control bg-light"
                         id="additionalInfo"
                         rows="5"
+                        formControlName="description"
                         placeholder="Additional information"
                       ></textarea>
                     </div>
@@ -392,12 +571,14 @@
             </nb-card-body>
           </nb-card>
           <!-- end of form -->
+        </form>
 
         <button nbButton nbStepperPrevious>prev</button>
         <button nbButton nbStepperNext>next</button>
       </nb-step>
-      <nb-step label="Certifications">
 
+      <nb-step label="Certifications">
+        <form [formGroup]="certifications">
           <!-- Start of form -->
           <nb-card>
             <nb-card-header> <h3>Certifications</h3></nb-card-header>
@@ -415,9 +596,39 @@
                         type="text"
                         class="form-control bg-light"
                         id="certificateName"
+                        formControlName="name"
                         placeholder="Certificate name"
                       />
                     </div>
+                    <div class="form-group text-left">
+                      <label
+                        for="certificateYear"
+                        class="text-muted font-weight-bold small"
+                        >When did you get the certificate?</label
+                      >
+                      <div class="input-group">
+                        <input
+                          nbInput
+                          type="date"
+                          class="form-control bg-light"
+                          id="duration"
+                          formControlName="startDate"
+                          placeholder="Start date"
+                        />
+                        <div class="input-group-prepend">
+                          <span class="input-group-text">-</span>
+                        </div>
+                        <input
+                          type="date"
+                          formControlName="endDate"
+                          class="form-control bg-light"
+                          placeholder="End date"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="col-md-6">
                     <div class="form-group text-left">
                       <label
                         for="certificateIssuer"
@@ -428,22 +639,13 @@
                         type="text"
                         class="form-control bg-light"
                         id="certificateIssuer"
+                        formControlName="issuer"
                         placeholder="Certificate issuer"
                       />
                     </div>
-                  <div class="form-group text-left">
-                    <label
-                      for="certificateYear"
-                      class="text-muted font-weight-bold small"
-                      >When did you get the certificate?</label
-                    >
-                    <input
-                      type="text"
-                      class="form-control bg-light"
-                      id="certificateYear"
-                      placeholder="Certificate year"
-                    />
                   </div>
+
+                  <div class="col-md-12">
                     <div class="form-group text-left">
                       <label
                         for="certificateRelevance"
@@ -454,6 +656,7 @@
                         class="form-control bg-light"
                         id="certificateRelevance"
                         rows="5"
+                        formControlName="description"
                         placeholder="Certificate relevance"
                       ></textarea>
                     </div>
@@ -463,12 +666,14 @@
             </nb-card-body>
           </nb-card>
           <!-- end of form -->
+        </form>
 
         <button nbButton nbStepperPrevious>prev</button>
         <button nbButton nbStepperNext>next</button>
       </nb-step>
-      <nb-step label="Skills">
 
+      <nb-step label="Skills">
+        <form [formGroup]="skills">
           <!-- Start of form -->
           <nb-card>
             <nb-card-header><h3>Skills</h3></nb-card-header>
@@ -476,19 +681,18 @@
               <div class="container">
                 <div class="row">
                   <div class="col-md-6">
-                 
                     <div class="form-group text-left">
                       <label
                         for="skills"
                         class="text-muted font-weight-bold small"
                         >Enter the skills you possess</label
                       >
-                    <textarea
+                      <input
+                        type="text"
+                        formControlName="name"
                         class="form-control bg-light"
-                      id="skills"
+                        placeholder="Write skill name..Eg; Python"
-                      rows="5"
+                      />
-                      placeholder="Enter your skills"
-                    ></textarea>
                     </div>
                   </div>
                 </div>
@@ -496,21 +700,23 @@
             </nb-card-body>
           </nb-card>
           <!-- end of form -->
+        </form>
 
         <button nbButton nbStepperPrevious>prev</button>
         <button nbButton nbStepperNext>next</button>
       </nb-step>
+
       <nb-step [label]="labelFour">
         <ng-template #labelFour>Summary</ng-template>
 
+        <form [formGroup]="professionalSummary">
           <!-- Start of form -->
           <nb-card>
             <nb-card-header><h3>Summary</h3></nb-card-header>
             <nb-card-body>
               <div class="container">
                 <div class="row">
-                <div class="col-md-6">
+                  <div class="col-md-12">
-                  
                     <div class="form-group text-left">
                       <label
                         for="professionalSummary"
@@ -521,6 +727,7 @@
                         class="form-control bg-light"
                         id="professionalSummary"
                         rows="5"
+                        formControlName="professionalSummary"
                         placeholder="Write your professional summary"
                       ></textarea>
                     </div>
@@ -530,11 +737,11 @@
             </nb-card-body>
           </nb-card>
           <!-- end of form -->
+        </form>
 
         <button nbButton nbStepperPrevious>prev</button>
-        <button nbButton disabled nbStepperNext>next</button>
+        <button nbButton (click)="submitForms()">Submit</button>
       </nb-step>
     </nb-stepper>
   </nb-card-body>
 </nb-card>
-

src/app/pages/layout/stepper/stepper.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { UserAPI } from '../../../service/api/user-api.service';
 
 @Component({
   selector: 'ngx-stepper',
@@ -8,36 +11,109 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
 })
 export class StepperComponent implements OnInit {
 
-  firstForm: UntypedFormGroup;
+  personalDetails: FormGroup;
-  secondForm: UntypedFormGroup;
+  experience: FormGroup;
-  thirdForm: UntypedFormGroup;
+  project: FormGroup;
+  education: FormGroup;
+  certifications: FormGroup;
+  skills: FormGroup;
+  professionalSummary: FormGroup;
+  userId: string
 
-  constructor(private fb: UntypedFormBuilder) {
+  constructor(private fb: FormBuilder, private userAPI: UserAPI, private router: Router) {
   }
 
   ngOnInit() {
-    this.firstForm = this.fb.group({
+    this.personalDetails = this.fb.group({
-      firstCtrl: ['', Validators.required],
+      username: [''],
+      email: [''],
+      phone: [''],
+      address1: [''],
+      address2: [''],
+      city: [''],
+      state: [''],
+      zip: [''],
+      linkedinLink: [''],
+      portfolioLink: [''],
     });
 
-    this.secondForm = this.fb.group({
+    this.experience = this.fb.group({
-      secondCtrl: ['', Validators.required],
+      position: [''],
+      employer: [''],
+      location: [''],
+      startDate: [''],
+      endDate: [''],
+      currentJob: [''],
+      companyLink: [''],
+      description: [''],
     });
 
-    this.thirdForm = this.fb.group({
+    this.project = this.fb.group({
-      thirdCtrl: ['', Validators.required],
+      name: [''],
+      link: [''],
+      employer: [''],
+      description: [''],
+      startDate: [''],
+      endDate: [''],
+    });
+
+    this.education = this.fb.group({
+      degreeName: [''],
+      school: [''],
+      location: [''],
+      major: [''],
+      minor: [''],
+      startDate: [''],
+      endDate: [''],
+      grade: [''],
+      description: [''],
+    });
+
+    this.certifications = this.fb.group({
+      name: [''],
+      issuer: [''],
+      startDate: [''],
+      endDate: [''],
+      description: [''],
+    });
+
+    this.skills = this.fb.group({
+      name: [''],
+    });
+
+    this.professionalSummary = this.fb.group({
+      professionalSummary: [''],
     });
   }
 
-  onFirstSubmit() {
+  async submitForms() {
-    this.firstForm.markAsDirty();
+    try {
-  }
+      // Combine professional summary with personal details
+      const personalDetailsWithSummary = {
+        ...this.personalDetails.value,
+        professionalSummary: this.professionalSummary.value.professionalSummary,
+        password: 'password',
+        role: 'USER'
+      };
   
-  onSecondSubmit() {
+      // Save personal details including professional summary
-    this.secondForm.markAsDirty();
+      const userDetailsResponse = await this.userAPI.saveUserDetails(personalDetailsWithSummary).toPromise();
-  }
+      this.userId = userDetailsResponse.data.id;
   
-  onThirdSubmit() {
+      // Save other details using the obtained user ID
-    this.thirdForm.markAsDirty();
+      await this.userAPI.saveExperience(this.experience.value, this.userId).toPromise();
+      await this.userAPI.saveEducation(this.education.value, this.userId).toPromise();
+      await this.userAPI.saveProjects(this.project.value, this.userId).toPromise();
+      await this.userAPI.saveSkills(this.skills.value, this.userId).toPromise();
+      await this.userAPI.saveCertifications(this.certifications.value, this.userId).toPromise();
+
+
+      console.log("userID: ", this.userId)
+  
+      this.router.navigateByUrl(`/pages/layout/stepper/profile?userId=${this.userId}`);
+    } catch (error) {
+      console.error('Error occurred while saving user details:', error);
+      // Handle error
+    }
   }
 }

src/app/service/api/user-api.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserAPI {
+
+  private baseUrl = 'http://localhost:8080/api';
+  private token: string;
+
+  constructor(private http: HttpClient) {
+    this.token = localStorage.getItem('accessToken');
+  }
+
+  // Saving user details
+  saveUserDetails(data: any): Observable<any> {
+    const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
+    return this.http.post(`${this.baseUrl}/users`, data, { headers });
+  }
+
+  // Get single user
+  getUserDetails(userId: string): Observable<any> {
+    const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
+    return this.http.get<any>(`${this.baseUrl}/users/${userId}`, { headers });
+  }
+
+  saveExperience(data: any, userId: string): Observable<any> {
+    const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
+    return this.http.post(`${this.baseUrl}/experiences?userId=${userId}`, data, { headers });
+  }
+  
+  saveEducation(data: any, userId: string): Observable<any> {
+    const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
+    return this.http.post(`${this.baseUrl}/education?userId=${userId}`, data, { headers });
+  }
+
+  saveProjects(data: any, userId: string): Observable<any> {
+    const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
+    return this.http.post(`${this.baseUrl}/projects?userId=${userId}`, data, { headers });
+  }
+
+  saveSkills(data: any, userId: string): Observable<any> {
+    const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
+    return this.http.post(`${this.baseUrl}/skills?userId=${userId}`, data, { headers });
+  }
+
+  saveCertifications(data: any, userId: string): Observable<any> {
+    const headers = new HttpHeaders().set('Authorization', `Bearer ${this.token}`);
+    return this.http.post(`${this.baseUrl}/certifications?userId=${userId}`, data, { headers });
+  }
+}

src/app/service/auth.service.ts

@@ -1,15 +1,12 @@
 import { Injectable } from '@angular/core';
 import { AngularFireAuth } from '@angular/fire/compat/auth';
 import { Router } from '@angular/router';
-
 import { Observable } from 'rxjs';
 
-
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
-
   user$: Observable<firebase.default.User | null>;
 
   constructor(private fireAuth: AngularFireAuth, private router: Router) {
@@ -22,7 +19,7 @@ export class AuthService {
       await this.fireAuth.signOut();
       localStorage.removeItem('accessToken');
       localStorage.removeItem('accessTokenExpiresIn');
-      this.router.navigate(['dashboard'], { queryParams: { logout: true } });
+      this.router.navigate(['auth/login'], { queryParams: { logout: true } });
     } catch (error: any) {
       throw error;
     }