add the moduls of the project

angular.json

@@ -51,11 +51,9 @@
             "./node_modules/bootstrap/dist/css/bootstrap.min.css"
           ],
           "scripts": [
-            "./node_modules/jquery/dist/jquery.min.js",
             "./node_modules/jquery-sparkline/jquery.sparkline.min.js",
           "./node_modules/@popperjs/core/dist/umd/popper.min.js",
-          "node_modules/feather-icons/dist/feather.min.js",
-          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
+          "node_modules/feather-icons/dist/feather.min.js"
           
           ]
           },

src/app/app-routing.module.ts

@@ -24,8 +24,9 @@ export const routes: Routes = [
         component: HomeComponent
       },
       {
-        path: 'projectfaq',
-        component: ProjectFAQComponent
+        path: 'Project-FAQ',
+        component: ProjectFAQComponent,
+        
       },
       {
         path: '',

src/app/core/core.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { DataStorageService } from './services/dataStorage/data-storage.service';
 import { AuthenticationService } from './services/authentication/authentication.service';
 import { ConfigurationService } from './services/configuration/configuration.service';
-
+import { UserService } from './services/authentication/user.service';
 
 
 @NgModule({
@@ -14,7 +14,8 @@ import { ConfigurationService } from './services/configuration/configuration.ser
   providers:[
     DataStorageService,
     AuthenticationService,
-    ConfigurationService
+    ConfigurationService,
+    UserService
   ]
 })
 export class CoreModule { }

src/app/core/services/authentication/authentication.service.ts

@@ -24,6 +24,7 @@ export class AuthenticationService {
           .post<AuthenticationResponse>(
             this.config.getServerUrl()+ "/Authentication/Login",loginRequest)       
   }
+
   Register(registerRequest : RegisterRequest ) :Observable<AuthenticationResponse>{
   
     return this.http
@@ -44,7 +45,10 @@ export class AuthenticationService {
     }
 
   }
-  getToken(){
-    return this.dataStorage.getItem("token");
+  
+  logou(){
+    
+    this.dataStorage.removeItem("token");
+    this.dataStorage.removeItem("userDetails");
   }
 }

src/app/core/services/authentication/user.service.ts

+import { Injectable } from '@angular/core';
+import { DataStorageService } from '../dataStorage/data-storage.service';
+import { User } from '../../models/users/User';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+
+  
+  constructor(private dataStorage : DataStorageService) { }
+    
+  getCurrentUser():User{
+      return JSON.parse( this.dataStorage.getItem("userDetails"));
+  }
+  
+  getUserFirstName():string{
+      return JSON.parse( this.dataStorage.getItem("userDetails")).firstName;
+  }
+  getUserLastName():string{
+    return JSON.parse( this.dataStorage.getItem("userDetails")).lastName;
+}
+}

src/app/core/services/dataStorage/data-storage.service.ts

@@ -10,9 +10,16 @@ export class DataStorageService {
   setItem(key : string , value : string){
       localStorage.setItem(key,value);
   }
+  
   getItem(key : string ):any{
     return localStorage.getItem(key);
   }
+  
+  removeItem(key :string){
+
+    localStorage.removeItem(key);
+  }
+
   clear(){
     localStorage.clear();
   }

src/app/employees/components/participate-item/participate-item.component.html

+<p>participate-item works!</p>

src/app/employees/components/participate-item/participate-item.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'participate-item',
+  templateUrl: './participate-item.component.html',
+  styleUrl: './participate-item.component.css'
+})
+export class ParticipateItemComponent {
+
+}

src/app/employees/employees-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class EmployeesRoutingModule { }

src/app/employees/employees.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { EmployeesRoutingModule } from './employees-routing.module';
+import { EmployeeProfileComponent } from './pages/employee-profile/employee-profile.component';
+import { EmployeeParticipatesComponent } from './pages/employee-participates/employee-participates.component';
+import { EmployeeParticipateComponent } from './pages/employee-participate/employee-participate.component';
+import { ParticipateItemComponent } from './components/participate-item/participate-item.component';
+
+
+@NgModule({
+  declarations: [
+    EmployeeProfileComponent,
+    EmployeeParticipatesComponent,
+    EmployeeParticipateComponent,
+    ParticipateItemComponent
+  ],
+  imports: [
+    CommonModule,
+    EmployeesRoutingModule
+  ]
+})
+export class EmployeesModule { }

src/app/employees/models/requests/getEmployeeTrackHistoryRequest.ts

+export class GetEmployeeTrackHistoryRequest {
+    employeeId: number;
+    projectId: number;
+    pageNumber: number;
+    pageSize: number;
+}

src/app/employees/models/requests/updateEmployeeWorkHoursRequest.ts

+export interface UpdateEmplyeeWorkHours {
+    employeeId :number
+    workingHour :number
+}
\ No newline at end of file

src/app/employees/models/responses/employee.ts

+import { Availability } from "../vakueObjects/Availability"
+import { PersonalInfo } from "../vakueObjects/personalInfo"
+import { WorkInfo } from "../vakueObjects/WorkInfo"
+
+export class Employee {
+    id:number
+    hiastId :number
+    userId :number
+    departmentName :string
+    personalInfo :PersonalInfo
+    availability :Availability
+    workInfo : WorkInfo 
+    
+}
\ No newline at end of file

src/app/employees/models/responses/employeeParticipate.ts

+import { Employee } from "./employee"
+
+export class EmployeeParticipate {
+
+    employeeId :number 
+    projectId : number
+    employee :Employee
+    partialTimeRatio : number 
+    role: string   
+}
\ No newline at end of file

src/app/employees/models/vakueObjects/availability.ts

+export class Availability {
+   currentWorkingHours :number
+   isAvailable :boolean    
+}
\ No newline at end of file

src/app/employees/models/vakueObjects/personalInfo.ts

+export class PersonalInfo{
+
+    firstName :string
+    lastName :string
+}
\ No newline at end of file

src/app/employees/models/vakueObjects/workInfo.ts

+export class WorkInfo {
+    workType :string
+    workJob :string
+}
\ No newline at end of file

src/app/employees/pages/employee-participate/employee-participate.component.html

+<p>employee-participate works!</p>

src/app/employees/pages/employee-participate/employee-participate.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'employee-participate',
+  templateUrl: './employee-participate.component.html',
+  styleUrl: './employee-participate.component.css'
+})
+export class EmployeeParticipateComponent {
+
+}

src/app/employees/pages/employee-participates/employee-participates.component.html

+<p>employee-participates works!</p>

src/app/employees/pages/employee-participates/employee-participates.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'employee-participates',
+  templateUrl: './employee-participates.component.html',
+  styleUrl: './employee-participates.component.css'
+})
+export class EmployeeParticipatesComponent {
+
+}

src/app/employees/pages/employee-profile/employee-profile.component.html

+<p>employee-profile works!</p>

src/app/employees/pages/employee-profile/employee-profile.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'employee-profile',
+  templateUrl: './employee-profile.component.html',
+  styleUrl: './employee-profile.component.css'
+})
+export class EmployeeProfileComponent {
+
+}

src/app/core/services/dataStorage/data-storage.service.spec.ts → src/app/employees/services/employees.service.spec.ts

 import { TestBed } from '@angular/core/testing';
 
-import { DataStorageService } from './data-storage.service';
+import { EmployeesService } from './employees.service';
 
-describe('DataStorageService', () => {
-  let service: DataStorageService;
+describe('EmployeesService', () => {
+  let service: EmployeesService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(DataStorageService);
+    service = TestBed.inject(EmployeesService);
   });
 
   it('should be created', () => {

src/app/employees/services/employees.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EmployeesService {
+
+  constructor() { }
+}

src/app/pages/department.spec.ts

-import { Department } from './department';
-
-describe('Department', () => {
-  it('should create an instance', () => {
-    expect(new Department()).toBeTruthy();
-  });
-});

src/app/pages/department.ts

-export class Department {
-    id :number
-    name :string 
-    flat :number
-}

src/app/pages/login/login.component.ts

@@ -43,7 +43,7 @@ export class LoginComponent implements OnInit {
             if(res.email) {
               this.dataStorage.setItem('userDetails', JSON.stringify(res));
               this.dataStorage.setItem('token', JSON.stringify(res.token));
-              console.log(res.token)
+         
               this.toastr.info('مرحبا بك مجددا يا ' + res.firstName+" " +res.lastName);
               this.router.navigateByUrl('/home');
 

src/app/projects/components/project-header/project-header.component.html

+<p>project-header works!</p>

src/app/projects/components/project-header/project-header.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'project-header',
+  templateUrl: './project-header.component.html',
+  styleUrl: './project-header.component.css'
+})
+export class ProjectHeaderComponent {
+
+}

src/app/projects/components/step-row-item/step-row-item.component.html

+<tr>
+    <th scope="row"></th>
+    <td> {{step.stepInfo.stepName}}
+    </td>
+    <td class="text-left">{{step.stepInfo.description}}</td>
+    <td class="text-left">{{step.currentCompletionRatio}}</td>
+    <td class="text-left">{{step.weight}}</td>
+
+    <td class="text-left">{{step.stepInfo.startDate | date}}</td>
+<td class="text-left">{{step.stepInfo.duration}}</td>
+</tr>

src/app/projects/components/step-row-item/step-row-item.component.ts

+import { Component, Input } from '@angular/core';
+import { Step } from '../../models/responses/Step';
+
+@Component({
+  selector: 'step-row-item',
+  templateUrl: './step-row-item.component.html',
+  styleUrl: './step-row-item.component.css'
+})
+export class StepRowItemComponent {
+
+  @Input() step :Step
+}

src/app/projects/models/responses/Step.ts

+import { StepInfo } from "../valueObjects/StepInfo";
+
+export class Step {
+    id: number;
+    stepInfo: StepInfo;
+    currentCompletionRatio: number;
+    weight: number;
+    projectId: number;
+}

src/app/projects/models/responses/project.ts

+import { Customer } from "../../../customers/models/customer"
+import { Employee } from "../../../employees/models/responses/employee"
+import { EmployeeParticipate } from "../../../employees/models/responses/employeeParticipate"
+import { Aggreement } from "../valueObjects/Aggreement"
 import { FinancialFund } from "../valueObjects/FinancialFund"
 import { ProjectInfo } from "../valueObjects/ProjectInfo"
 import { ProposalInfo } from "../valueObjects/proposalInfo"
+import { Step } from "./Step"
 
 export class Project
 {
     id:number
     proposalInfo : ProposalInfo 
     projectInfo :ProjectInfo
-    currentState: any
-    projectAggreement :any
+    currentState: string
+    projectAggreement :Aggreement
     teamLeaderId: number
-    teamLeader :any
+    teamLeader :Employee
     projectManagerId:number
-    executer:any
-    proposerId:any
-    steps :any
+    projectManager: Employee
+    executer: {
+        name :string
+    }
+    proposerId:number
+    proposer:Customer
+    steps :Step[]
+    participants:EmployeeParticipate[]
     financialFund:FinancialFund
-    
-    
 }

src/app/projects/models/valueObjects/Aggreement.ts

+export interface Aggreement {
+    aggreementNumber: number;
+    aggreementDate: Date;
+}

src/app/projects/models/valueObjects/FinancialFund.ts

@@ -4,3 +4,4 @@ export interface FinancialFund {
     financialStatus: string;
     source: string;
 }
+

src/app/projects/models/valueObjects/StepInfo.ts

+
+export interface StepInfo {
+    stepName: string;
+    description: string;
+    startDate: Date;
+    duration: number;
+}
+

src/app/projects/pages/project-details/project-details.component.html

 <div class="container-fluid">
     <div class="row justify-content-center">
-      <div class="col-12 col-lg-10 col-xl-8">
+      <div class="col-12 ">
         <div class="row align-items-center mb-4">
           <div class="col">
-            <h2 class="h5 page-title"><small class="text-muted text-uppercase">Invoice</small><br />#1806</h2>
+            <h2 class="h5 page-title"><small class="text-muted text-uppercase">بطاقة معلومات مشروع</small></h2>
           </div>
           <div class="col-auto">
             <button type="button" class="btn btn-secondary m-1">Print</button>
@@ -12,96 +12,172 @@
         <div class="card shadow">
           <div class="card-body p-5">
             <div class="row mb-5">
-              <div class="col-12 text-center mb-4">
+              <div class="col-10 offset-lg-4 col-lg-4 text-center mb-4">
                 <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto mb-4" alt="...">
-                <h2 class="mb-0 text-uppercase">  مشروع أتمتة أعمال شؤون الطلاب</h2>
-                <p class="text-muted"> بدء بتاريخ<br /> 9022 Suspendisse Rd. </p>
+                <h3 class="mb-0 text-uppercase">{{project.projectInfo.name}}</h3>
+                <p> <small>{{project.projectInfo.description}}</small></p>
+                <p class="small text-muted"><small>تاريخ البدء {{project.projectInfo.startDate | date}} <br>تاريخ الانتهاء المتوقع {{project.projectInfo.expectedEndDate| date}}</small></p>
+                
               </div>
-              <div class="col-md-7">
-                <p class="small text-muted text-uppercase mb-2">Invoice from</p>
+            </div>
+            <div class="row mb-5">
+              <div class="col-md-4">
                 <p class="mb-4">
-                  <strong>Imani Lara</strong><br /> Asset Management<br /> 9022 Suspendisse Rd.<br /> High Wycombe<br /> (478) 446-9234<br />
-                </p>
-                <p>
-                  <span class="small text-muted text-uppercase">Invoice #</span><br />
-                  <strong>1806</strong>
+                  <strong>ذاتية المشروع</strong>
+                  <br /> رئيس فريق العمل: <small>{{project.projectInfo.code}}</small>
+                  <br /> كتاب الطرح : <small>{{project.proposalInfo.proposingBookNumber}} / {{project.proposalInfo.proposingBookDate | date}}</small> 
+                  <br />كتاب الموافقة : <small>{{project.projectAggreement.aggreementNumber}} / {{project.projectAggreement.aggreementDate |date}}</small>
+                  <br />التمويل : <small> {{project.financialFund.financialStatus}} / {{project.financialFund.source}} </small>
+                  
                 </p>
+
               </div>
-              <div class="col-md-5">
-                <p class="small text-muted text-uppercase mb-2">Invoice to</p>
+              <div class="col-md-4 text-center">
                 <p class="mb-4">
-                  <strong>Walter Sawyer</strong><br /> Human Resources<br /> Ap #992-8933 Sagittis Street<br /> Ivanteyevka<br /> (803) 792-2559<br />
+                  <strong>المعلومات التنفيذية</strong>
+                  <br /> الجهة  المنفذة: <small>{{project.executer.name}}</small>
+                  <br /> رئيس فريق العمل: <small>{{project.teamLeader.personalInfo.firstName}} {{project.teamLeader.personalInfo.lastName}}</small>
+                  <br /> مدير المشروع : <small>{{project.projectManager.personalInfo.firstName}} {{project.projectManager.personalInfo.lastName}}</small>
+                  <br />ينفذ لصالح : <small> {{project.proposer.customerName}} </small>
+                  
                 </p>
-                <p>
-                  <small class="small text-muted text-uppercase">Due date</small><br />
-                  <strong>April, 20, 2020</strong>
+
+              </div>
+              <div class="col-md-4">
+                <p class="mb-4">
+                  <strong>معلومات حالة المشروع </strong>
+                  <br /> المرحلة التطويرير : <small>{{project.currentState}} </small>
+                
                 </p>
               </div>
             </div> <!-- /.row -->
+            <br>
+            <p>مراحل المشروع</p>
             <table class="table table-borderless table-striped">
               <thead>
                 <tr>
                   <th scope="col">#</th>
-                  <th scope="col">Description</th>
-                  <th scope="col" class="text-right">Rate</th>
-                  <th scope="col" class="text-right">Hours</th>
-                  <th scope="col" class="text-right">Ammout</th>
+                  <th scope="col">اسم المرحلة</th>
+                  <th scope="col" class="text-left">الوصف</th>
+                  <th scope="col" class="text-left">نسبة الانجاز</th>
+                  <th scope="col" class="text-left">النسبة التثقيلية</th>
+                  <th scope="col" class="text-left">تاريع البدء</th>
+                  <th scope="col" class="text-left">مدة التنفيذ</th>
+                  
                 </tr>
               </thead>
               <tbody>
-                <tr>
-                  <th scope="row">1</th>
-                  <td> Creative Design<br />
-                    <span class="small text-muted">Design responsive website with existing prototype</span>
+                <tr  *ngFor="let step of  project.steps " >
+                  <th scope="row"></th>
+                  <td> {{step.stepInfo.stepName}}
                   </td>
-                  <td class="text-right">$15.00</td>
-                  <td class="text-right">2</td>
-                  <td class="text-right">$30.00</td>
+                  <td class="text-left">{{step.stepInfo.description}}</td>
+                  <td class="text-left">{{step.currentCompletionRatio}}</td>
+                  <td class="text-left">{{step.weight}}</td>
+                  
+                  <td class="text-left">{{step.stepInfo.startDate | date}}</td>
+                  <td class="text-left">{{step.stepInfo.duration}}</td>
                 </tr>
+              </tbody>
+            </table>
+
+            <p>المشاركين في المشروع</p>
+            <table class="table table-borderless table-striped">
+              <thead>
                 <tr>
-                  <th scope="row">2</th>
-                  <td> Front-End Development<br />
-                    <span class="small text-muted">Markup conversion and adding JavaScript</span>
-                  </td>
-                  <td class="text-right">$20.00</td>
-                  <td class="text-right">5</td>
-                  <td class="text-right">$100.00</td>
+                  <th scope="col">#</th>
+                  <th scope="col">اسم المشارك</th>
+                  <th scope="col" class="text-left">الرقم الذاتي</th>
+                  <th scope="col" class="text-left">صفة العمل</th>
+                  <th scope="col" class="text-left">الهيئة</th>
+                  <th scope="col" class="text-left">نسبة التفرغ</th>
+                  <th scope="col" class="text-left">المساهمة</th>
+                  
                 </tr>
-                <tr>
-                  <th scope="row">2</th>
-                  <td> Back-End Development<br />
-                    <span class="small text-muted">Database intergration with model functions</span>
+              </thead>
+              <tbody>
+                <!-- <tr  *ngFor="let participant of  project.e " >
+                  <th scope="row"></th>
+                  <td> {{step.stepInfo.stepName}}
                   </td>
-                  <td class="text-right">$25.00</td>
-                  <td class="text-right">7</td>
-                  <td class="text-right">$155.00</td>
-                </tr>
+                  <td class="text-left">{{step.stepInfo.description}}</td>
+                  <td class="text-left">{{step.currentCompletionRatio}}</td>
+                  <td class="text-left">{{step.weight}}</td>
+                  
+                  <td class="text-left">{{step.stepInfo.startDate | date}}</td>
+                  <td class="text-left">{{step.stepInfo.duration}}</td>
+                </tr> -->
               </tbody>
             </table>
+
+            <hr>
+            <div class="row mt-5">
+              <button class="btn btn-primary">لاطلاع على  خطة الانفاق</button>
+              <button class="btn btn-primary">الاطلاع على المرفقات </button>
+              <button class="btn btn-primary">الاطلاع على عمليات المتابعة</button>
+            
+            </div>
+            <div class="row mt-5 d-flex align-items-around">
+              <button class=" btn btn-primary">إضافة مرفقات</button>
+              <button class=" btn btn-primary">إضافة دراسة جدوى </button>
+              <button class=" btn btn-primary">إضافة تصنيف مشروع</button>
+            
+            </div>
+            
+            <div class="row mt-5">
+              <button class="btn btn-primary">إضافة مرحلة</button>
+              <button class="btn btn-primary">إضافة مشارك</button>
+           </div>
+           <div class="row mt-5">
+            <button class="btn btn-primary">إضافة عملية متابعة</button>
+            
+            
+          </div>
+           
+            
             <div class="row mt-5">
               <div class="col-2 text-center">
                 <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
               </div>
-              <div class="col-md-5">
-                <p class="text-muted small">
-                  <strong>Note :</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. </p>
-              </div>
-              <div class="col-md-5">
-                <div class="text-right mr-2">
-                  <p class="mb-2 h6">
-                    <span class="text-muted">Subtotal : </span>
-                    <strong>$285.00</strong>
+              <div class="col-2">
+            
+                <p class="mb-4">
+                  <strong>مدير المشروع </strong>
+                  <br/><small>{{project.projectManager.personalInfo.firstName}}</small>
+                    
                   </p>
-                  <p class="mb-2 h6">
-                    <span class="text-muted">VAT (10%) : </span>
-                    <strong>$28.50</strong>
+  
+              </div>
+              <div class="col-2">
+            
+                <p class="mb-4">
+                  <strong>رئيس فريق العمل </strong>
+                  <br/><small>{{project.projectManager.personalInfo.firstName}}</small>
+                    
                   </p>
-                  <p class="mb-2 h6">
-                    <span class="text-muted">Total : </span>
-                    <span>$313.50</span>
+  
+              </div>
+              <div class="col-2">
+            
+                <p class="mb-4">
+                  <strong>الجهة الطارحة </strong>
+                  <br/><small>{{project.proposer.customerName}}</small>
+                    
                   </p>
-                </div>
+  
               </div>
+              <div class="col-2">
+            
+                <p class="mb-4">
+                  <strong>الجهة المنفذة  </strong>
+                  <br/><small>{{project.executer.name}}</small>
+                    
+                  </p>
+  
+              </div>  
+              <div class="col-2 text-center">
+                <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
+              </div>  
             </div> <!-- /.row -->
           </div> <!-- /.card-body -->
         </div> <!-- /.card -->

src/app/projects/pages/project-list/project-list.component.html

@@ -6,11 +6,11 @@
             <h2 class="h3 mb-0 page-title">  قائمة  المشاريع </h2>
             </div>
         <div class="col-auto">
-            <button type="button"  (click)="this.router.navigate(['project/create'])" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>طرح مشروع</button>
+            <button type="button"  (click)="this.router.navigate(['projects/create'])" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>طرح مشروع</button>
         </div>
     </div>
     <div  class="row">
-        <project-item class="col-md-4"  *ngFor="let project of projects" [project]="project"></project-item>
+        <project-item class="col-md-4" (click)="this.router.navigate(['projects/detail',project.id])"   *ngFor="let project of projects" [project]="project"></project-item>
     </div>
     
     </div>

src/app/projects/projects.module.ts

@@ -8,6 +8,8 @@ import { ProjectService } from './services/project.service';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../shared/shared.module';
 import { ProjectRoutingModule } from './project-routing.module';
+import { StepRowItemComponent } from './components/step-row-item/step-row-item.component';
+import { ProjectHeaderComponent } from './components/project-header/project-header.component';
 
 
 
@@ -16,7 +18,9 @@ import { ProjectRoutingModule } from './project-routing.module';
     ProjectItemComponent,
     AttachmentComponent,
     ProjectListComponent,
-    ProjectDetailsComponent
+    ProjectDetailsComponent,
+    StepRowItemComponent,
+    ProjectHeaderComponent
   ],
   providers:[
     ProjectService

src/app/shared/sharedLayout/header/header.component.html

@@ -11,9 +11,9 @@
 
       <li class="nav-item dropdown pe-3">
 
-        <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
+        <a class="nav-link nav-profile d-flex align-items-center pe-0" data-bs-toggle="dropdown">
           <img src="assets/images/users/3.jpg" alt="Profile" class="rounded-circle">
-          <span class="d-none d-md-block dropdown-toggle ps-2">K. Anderson</span>
+          <span class="d-none d-md-block dropdown-toggle ps-2">{{fullName}}</span>
         </a><!-- End Profile Iamge Icon -->
 
         <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
@@ -56,10 +56,10 @@
           </li>
 
           <li>
-            <a class="dropdown-item d-flex align-items-center" href="#">
+            <button class="dropdown-item d-flex align-items-center" (click)="logout()">
               <i class="fe fe-log-out"></i>
               <span>Sign Out</span>
-            </a>
+            </button>
           </li>
 
         </ul><!-- End Profile Dropdown Items -->

src/app/shared/sharedLayout/header/header.component.ts

@@ -2,6 +2,9 @@ import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, Input, input, OnInit } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
+import { UserService } from '../../../core/services/authentication/user.service';
+import { ToastrService } from 'ngx-toastr';
+import { AuthenticationService } from '../../../core/services/authentication/authentication.service';
 
 @Component({
   selector: 'app-header',
@@ -9,13 +12,36 @@ import { Router, RouterLink } from '@angular/router';
   templateUrl: './header.component.html',
   styleUrl: './header.component.css'
 })
-export class HeaderComponent  {
+export class HeaderComponent implements OnInit {
+
   @Input() isToggled :Boolean;
 
-  constructor(private router: Router) { }
+  fullName :string
+  
+  constructor(
+    private router: Router,
+    private userService : UserService,
+    private toastr : ToastrService,
+    private auth : AuthenticationService
+  ) { }
+
+  ngOnInit(): void {
+    
+    this.fullName= this.userService.getUserFirstName()+"  " + this.userService.getUserLastName();
+
+  }
 
   toggleSidebar() {
     console.log(this.isToggled)
     this.isToggled = !this.isToggled;
   }
+
+  logout() {
+
+    this.toastr.info("بانتظارك في المرة القادمة");
+    this.auth.logou();
+    this.router.navigate(['/login']);
+    }
+    
+
 }

src/app/shared/sharedLayout/sidebar/sidebar.component.html

@@ -60,25 +60,25 @@
       </li><!-- End Components Nav -->
       <li class="nav-heading">الجهات الطارحة</li>
       <li class="nav-item">
-        <a  routerLink="/customers" class="nav-link collapsed ">
+        <a  [routerLink]="['customers']" class="nav-link collapsed ">
           <i class="fe fe-map"></i><span> استعراض الجهات الطارحة</span>
         </a>
       </li>
       <li class="nav-item">
-        <a routerlink="/customers/create" class="nav-link collapsed " >
+        <a [routerLink]="['/customers/create']" class="nav-link collapsed " >
           <i class="fe fe-edit-2"></i><span>إضافة جهة طارحة</span>
         </a>
       </li>
       <li class="nav-heading">إدارة المشاريع</li>
 
           <li class="nav-item">
-            <a class="nav-link collapsed" href="forms-elements.html">
+            <a [routerLink]="['/projects/create']" class="nav-link collapsed" >
               <i class="bi bi-circle"></i><span>طرح مشروع</span>
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link collapsed" href="forms-layouts.html">
-              <i class="bi bi-circle"></i><span>تعديل مشروع</span>
+            <a [routerLink]="['/projects']" class="nav-link collapsed">
+              <i class="bi bi-circle"></i><span>استعراض المشاريع</span>
             </a>
           </li>
           <li class="nav-item">
@@ -91,27 +91,23 @@
               <i class="bi bi-circle"></i><span>إضافة بيانات المشروع</span>
             </a>
           </li>
+          <li class="nav-heading">العمل</li>
+      <li [routerLink]="['/employees/paticipation']" class="nav-item">
+        <a class="nav-link collapsed" >
+          <i class="bi bi-layout-text-window-reverse"></i><span>استعراض مساهماتي</span><i class="bi bi-chevron-down ms-auto"></i>
+        </a>
 
+      </li>
       <li class="nav-item">
         <a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
-          <i class="bi bi-layout-text-window-reverse"></i><span>العمل</span><i class="bi bi-chevron-down ms-auto"></i>
+          <i class="bi bi-layout-text-window-reverse"></i><span>استعراض ساعات عملي</span><i class="bi bi-chevron-down ms-auto"></i>
         </a>
-        <ul id="tables-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
-          <li>
-            <a href="tables-general.html">
-              <i class="bi bi-circle"></i><span>استعراض مشاريعي</span>
-            </a>
-          </li>
-          <li>
-            <a href="tables-data.html">
-              <i class="bi bi-circle"></i><span>استعراض ساعات عملي</span>
-            </a>
-          </li>
-        </ul>
-      </li><!-- End Tables Nav -->
+
+      </li>
+      
       <li class="nav-heading">متفرقات</li>
       <li class="nav-item">
-        <a class="nav-link collapsed" routerlink="/ProjectFAQ">
+        <a [routerLink]="['/Project-FAQ']" class="nav-link collapsed" >
           <i class="bi bi-layout-text-window-reverse"></i><span>ملامح المشروع</span><i class="bi bi-chevron-down ms-auto"></i>
         </a>
         </li>

src/app/tracks/components/employee-track/employee-track.component.html

+<p>employee-track works!</p>

src/app/tracks/components/employee-track/employee-track.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'employee-track',
+  templateUrl: './employee-track.component.html',
+  styleUrl: './employee-track.component.css'
+})
+export class EmployeeTrackComponent {
+
+}

src/app/tracks/components/step-track/step-track.component.html

+<p>step-track works!</p>

src/app/tracks/components/step-track/step-track.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'step-track',
+  templateUrl: './step-track.component.html',
+  styleUrl: './step-track.component.css'
+})
+export class StepTrackComponent {
+
+}

src/app/tracks/pages/project-track-history/project-track-history.component.html

+<p>project-track-history works!</p>

src/app/tracks/pages/project-track-history/project-track-history.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'project-track-history',
+  templateUrl: './project-track-history.component.html',
+  styleUrl: './project-track-history.component.css'
+})
+export class ProjectTrackHistoryComponent {
+
+}

src/app/tracks/pages/step-track-details/step-track-details.component.html

+<p>step-track-details works!</p>

src/app/tracks/pages/step-track-details/step-track-details.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'step-track-details',
+  templateUrl: './step-track-details.component.html',
+  styleUrl: './step-track-details.component.css'
+})
+export class StepTrackDetailsComponent {
+
+}

src/app/tracks/pages/trac-create/trac-create.component.html

+<p>trac-create works!</p>

src/app/tracks/pages/trac-create/trac-create.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'trac-create',
+  templateUrl: './trac-create.component.html',
+  styleUrl: './trac-create.component.css'
+})
+export class TracCreateComponent {
+
+}

src/app/tracks/pages/track-details/track-details.component.html

+<p>track-details works!</p>

src/app/tracks/pages/track-details/track-details.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'track-details',
+  templateUrl: './track-details.component.html',
+  styleUrl: './track-details.component.css'
+})
+export class TrackDetailsComponent {
+
+}

src/app/tracks/pages/tracks/tracks.component.html

+<p>tracks works!</p>

src/app/tracks/pages/tracks/tracks.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'tracks',
+  templateUrl: './tracks.component.html',
+  styleUrl: './tracks.component.css'
+})
+export class TracksComponent {
+
+}

src/app/tracks/services/track.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { TrackService } from './track.service';
+
+describe('TrackService', () => {
+  let service: TrackService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TrackService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/tracks/services/track.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TrackService {
+
+  constructor() { }
+}

src/app/tracks/tracks-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TracksRoutingModule { }

src/app/tracks/tracks.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TracksRoutingModule } from './tracks-routing.module';
+import { TracksComponent } from './pages/tracks/tracks.component';
+import { TrackDetailsComponent } from './pages/track-details/track-details.component';
+import { TracCreateComponent } from './pages/trac-create/trac-create.component';
+import { StepTrackComponent } from './components/step-track/step-track.component';
+import { EmployeeTrackComponent } from './components/employee-track/employee-track.component';
+import { StepTrackDetailsComponent } from './pages/step-track-details/step-track-details.component';
+import { ProjectTrackHistoryComponent } from './pages/project-track-history/project-track-history.component';
+
+
+@NgModule({
+  declarations: [
+    TracksComponent,
+    TrackDetailsComponent,
+    TracCreateComponent,
+    StepTrackComponent,
+    EmployeeTrackComponent,
+    StepTrackDetailsComponent,
+    ProjectTrackHistoryComponent
+  ],
+  imports: [
+    CommonModule,
+    TracksRoutingModule
+  ]
+})
+export class TracksModule { }

src/index.html

@@ -25,6 +25,12 @@
   <script src='assets/js/select2.min.js'></script>
   <script src='assets/js/jquery.steps.min.js'></script>
   <script src='assets/js/jquery.validate.min.js'></script>
-  >
+  
+
+  <script src="assets/vendor/tinymce/tinymce.min.js"></script>
+  
+  <script src="assets/js/template-main.js"></script>
+
+
 </body>
 </html>