reports in housing service

src/app/dashboard/dashboard-routing.ts

@@ -116,6 +116,11 @@ import { ViewRequestsForAdminstrationListComponent } from './view_requests_for_a
 import { ViewRequestsForAdminstrationDetailsComponent } from './view_requests_for_adminstration/view-requests-for-adminstration-details/view-requests-for-adminstration-details.component';
 import { ViewRequestsForTenantComponent } from './view_requests_for_tenant/view-requests-for-tenant/view-requests-for-tenant.component';
 import { ViewRequestsForTenantDetailsComponent } from './view_requests_for_tenant/view-requests-for-tenant-details/view-requests-for-tenant-details.component';
+import { FemalesRequestTypesListComponent } from './females_request_types/females-request-types-list/females-request-types-list.component';
+import { FemalesRequestTypesAddComponent } from './females_request_types/females-request-types-add/females-request-types-add.component';
+import { ViewMyFemaleRequestsListComponent } from './view_my_female_requests/view-my-female-requests-list/view-my-female-requests-list.component';
+import { ViewMyFemaleRequestsAddComponent } from './view_my_female_requests/view-my-female-requests-add/view-my-female-requests-add.component';
+import { LivingSystemReportsComponent } from './living_system_reports/living-system-reports/living-system-reports.component';
     
 const dashboardRouting: Routes = [
     {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
@@ -277,9 +282,16 @@ const dashboardRouting: Routes = [
     {path: 'viewRequestsForAdminstrationDetails/:detailsId', component: ViewRequestsForAdminstrationDetailsComponent, canActivate: [AuthGuard]},
     {path: 'viewRequestsForTenant/:listPageId', component: ViewRequestsForTenantComponent, canActivate: [AuthGuard]},
     {path: 'viewRequestsForTenantDetails/:detailsId', component: ViewRequestsForTenantDetailsComponent, canActivate: [AuthGuard]},
+    {path: 'femalesRequestTypesList/:listPageId', component: FemalesRequestTypesListComponent, canActivate: [AuthGuard]},
+    {path: 'femalesRequestTypesAdd', component: FemalesRequestTypesAddComponent, canActivate: [AuthGuard]},
+    {path: 'femalesRequestTypes/edit/:editPageId', component: FemalesRequestTypesAddComponent, canActivate: [AuthGuard]},
+    {path: 'viewMyFemaleRequestsList/:listPageId', component: ViewMyFemaleRequestsListComponent, canActivate: [AuthGuard]},
+    {path: 'viewMyFemaleRequestsAdd', component: ViewMyFemaleRequestsAddComponent, canActivate: [AuthGuard]},
+    {path: 'viewMyFemaleRequests/edit/:editPageId/:type', component: ViewMyFemaleRequestsAddComponent, canActivate: [AuthGuard]},
+    {path: 'livingSystemReports/:listPageId', component: LivingSystemReportsComponent, canActivate: [AuthGuard]},
     
     
-    //ViewRequestsForTenantDetailsComponent
+    //LivingSystemReports
     ]},
 ];
 

src/app/dashboard/dashboard.module.ts

@@ -148,6 +148,11 @@ import { ViewRequestsForAdminstrationListComponent } from './view_requests_for_a
 import { ViewRequestsForAdminstrationDetailsComponent } from './view_requests_for_adminstration/view-requests-for-adminstration-details/view-requests-for-adminstration-details.component';
 import { ViewRequestsForTenantComponent } from './view_requests_for_tenant/view-requests-for-tenant/view-requests-for-tenant.component';
 import { ViewRequestsForTenantDetailsComponent } from './view_requests_for_tenant/view-requests-for-tenant-details/view-requests-for-tenant-details.component';
+import { FemalesRequestTypesListComponent } from './females_request_types/females-request-types-list/females-request-types-list.component';
+import { FemalesRequestTypesAddComponent } from './females_request_types/females-request-types-add/females-request-types-add.component';
+import { ViewMyFemaleRequestsListComponent } from './view_my_female_requests/view-my-female-requests-list/view-my-female-requests-list.component';
+import { ViewMyFemaleRequestsAddComponent } from './view_my_female_requests/view-my-female-requests-add/view-my-female-requests-add.component';
+import { LivingSystemReportsComponent } from './living_system_reports/living-system-reports/living-system-reports.component';
 
 
 
@@ -272,6 +277,11 @@ import { ViewRequestsForTenantDetailsComponent } from './view_requests_for_tenan
         ViewRequestsForAdminstrationDetailsComponent,
         ViewRequestsForTenantComponent,
         ViewRequestsForTenantDetailsComponent,
+        FemalesRequestTypesListComponent,
+        FemalesRequestTypesAddComponent,
+        ViewMyFemaleRequestsListComponent,
+        ViewMyFemaleRequestsAddComponent,
+        LivingSystemReportsComponent,
     
     ],
     imports: [

src/app/dashboard/females_request_types/females-request-types-add/females-request-types-add.component.html

@@ -0,0 +1,133 @@
+<div class="addDepartment-w">
+
+    
+  <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w"> خدمه البلاغات </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typePage}} </li>
+          </ul>
+        </div>
+      </div>
+
+    <div class="containerContent-w">
+        <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
+            <div class="row">
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label style="float: right; margin-right: 5px"> اسم الطلب <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name" name="name" placeholder="اسم الطلب " ngModel [(ngModel)]="formData.name" required/>
+               </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label style="float: right; margin-right: 5px"> وصف الطلب</label>
+                  <input type="text" class="form-control" id="description" name="description" placeholder="اسم الطلب " ngModel [(ngModel)]="formData.description" />
+
+                   <!-- <textarea name="description" id="description"  [(ngModel)]="formData.description" maxlength="250"  cols="20" rows="5" ></textarea>  -->
+               </div>
+              </div>
+            </div>
+            <div class="row">
+                <div class="col-12 col-sm-12 col-md-4">
+                    <div class="form-group">
+                      <div class="col-12" style="text-align: -webkit-right;font-size: 23px;margin-bottom: 10px">
+                          <label>يطلب مرفقات <span class="spanReqired-w">*</span></label>
+                      </div>
+                      <div class="col-12">
+                        <div class="col-6">
+                            <label > نعم
+                                <label class="form-check-inline">
+                                    <input class="form-check-input" type="radio" name="require_attachments" value="1" [(ngModel)]="formData.require_attachments">
+                                </label>
+                            </label>
+                          </div>
+                      </div>
+                        <div class="col-12">
+                          <div class="col-6">
+                              <label > لا
+                                  <label class="form-check-inline">
+                                      <input class="form-check-input" type="radio" name="require_attachments" value="0" [(ngModel)]="formData.require_attachments">
+                                  </label>
+                              </label>
+                          </div>     
+                          </div>
+                   </div>
+                  </div>
+            </div>
+            <div class="row">
+                <div class="col-12 col-sm-12 col-md-4">
+                    <div class="form-group">
+                      <div class="col-12" style="text-align: -webkit-right;font-size: 23px;margin-bottom: 10px">
+                          <label>يتطلب موافقة مسبقة <span class="spanReqired-w">*</span></label>
+                      </div>
+                      <div class="col-12">
+                        <div class="col-6">
+                            <label > نعم
+                              <label class="form-check-inline">
+                                <input class="form-check-input" type="radio" name="require_approval" value="1" [(ngModel)]="formData.require_approval">
+                            </label>
+                            </label>
+                        </div>
+                      </div>
+                        <div class="col-12">
+                          <div class="col-6">
+                              <label > لا 
+                                <label class="form-check-inline">
+                                  <input class="form-check-input" type="radio" name="require_approval" value="0" [(ngModel)]="formData.require_approval">
+                              </label>
+                              </label>
+                          </div>
+                          </div>
+                   </div>
+                  </div>
+            </div>
+            <div class="row">
+                <div class="col-12 col-sm-12 col-md-4">
+                    <div class="form-group">
+                      <div class="col-12" style="text-align: -webkit-right;font-size: 23px;margin-bottom: 10px">
+                          <label> له تاريخ محدد <span class="spanReqired-w">*</span></label>
+                      </div>
+                      <div class="col-12">
+                        <div class="col-6">
+                            <label > نعم
+                              <label class="form-check-inline">
+                                <input class="form-check-input" type="radio" name="require_date" value="1" [(ngModel)]="formData.require_date" (input)="make_require_date_true()">
+                            </label> 
+                            </label>
+                        </div>
+                      </div>
+                        <div class="col-12">
+                          <div class="col-6">
+                              <label > لا
+                                <label class="form-check-inline">
+                                  <input class="form-check-input" type="radio" name="require_date" value="0" [(ngModel)]="formData.require_date" (input)="make_require_date_false()">
+                                </label>
+                              </label>
+                          </div>    
+                          </div>
+                   </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4" *ngIf="require_date">
+                    <div class="form-group">
+                        <label style="float: right; margin-right: 5px"> تاريخ العوده <span class="spanReqired-w">*</span></label>
+                        <input type="date" class="form-control" id="return_date" name="return_date" placeholder="" ngModel [(ngModel)]="formData.return_date" (input)="makeTrue()" />   
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4" *ngIf="require_date">
+                      <div class="form-group">
+                          <label style="float: right; margin-right: 5px"> وقت العوده <span class="spanReqired-w">*</span></label>
+                          <input type="time" class="form-control" id="return_time" name="return_time" placeholder="" ngModel [(ngModel)]="formData.return_time" (input)="makeTrue()"/>   
+                      </div>
+                    </div>
+            </div>
+          
+          <div class=" row col-6">
+              <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || disable">حفظ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+          </div>
+        </form>
+    </div>
+  </div>
+</div>

src/app/dashboard/females_request_types/females-request-types-add/females-request-types-add.component.ts

@@ -0,0 +1,159 @@
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+
+@Component({
+  selector: 'app-females-request-types-add',
+  templateUrl: './females-request-types-add.component.html',
+  styleUrls: ['./females-request-types-add.component.css']
+})
+export class FemalesRequestTypesAddComponent implements OnInit {
+  editPageId: number;
+  isEdit: boolean;
+  typePage: string;
+  checkSaveclick: boolean;
+  disable: boolean;
+  require_date: boolean = false;
+
+  constructor(
+    private dashBoardSer: DashboardService,
+    private toastr: ToastrService,
+    public authSer: AuthServiceService,
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private http: HttpClient
+  ) { }
+
+  // @ViewChild('f') definitionForm : NgForm;
+
+  formData = {
+    name: '',
+    description:'',
+    require_attachments:'1',
+    require_approval:'1',
+    require_date:'0',
+    return_date:'',
+    return_time:''
+  }
+
+  ngOnInit() {
+ 
+    //init the values of permision boolean
+  this.authSer.showAddBtn = false;
+  this.authSer.showDeleteBtn = false;
+  this.authSer.showEditBtn = false;
+  //show / hide notification search in header
+  this.authSer.notificationLogin = true;
+  this.authSer.showSearchHeader = false;
+  this.authSer.showHeaderLogin = false;
+  this.authSer.showHeaderDashBoard = true;
+  this.authSer.showDashboardHeader = true;
+  this.authSer.internalHeader = false;
+  
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.editPageId = +params['editPageId'];
+        console.log(this.editPageId);
+        
+      }
+    );
+
+
+    if (this.editPageId) {
+      this.spinner.show();
+      this.isEdit = true;
+    this.typePage = 'تعديل';
+      this.dashBoardSer.getItemData(this.editPageId, 'femalesRequestTypes' ).subscribe(
+        res => {
+          console.log('ssss', res);
+         this.formData.name = res['type'].name;
+         this.formData.description = res['type'].description;
+         this.formData.require_attachments = res['type'].require_attachments;
+         this.formData.require_approval = res['type'].require_approval;
+         this.formData.require_date = res['type'].require_date;
+         if(this.formData.require_date == '1'){
+          this.make_require_date_true()
+         }else{
+           this.make_require_date_false()
+         }
+         this.formData.return_date = res['type'].return_date;
+         this.formData.return_time = res['type'].return_time;
+   
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }else {
+      this.typePage = 'اضافة';
+    }
+
+  }
+
+  make_require_date_true(){
+      this.require_date = true;
+      
+  }
+  make_require_date_false(){
+    this.require_date = false;
+
+  }
+  makeTrue(){
+    this.disable = false;
+
+  }
+
+  onSubmitted() {
+    console.log('HERE',this.formData);
+    if(this.formData.require_date == '0'){
+      this.formData.return_date = null;
+      this.formData.return_time = null;
+    }else if(this.formData.require_date == '1'){
+      if(this.formData.return_date == '' || this.formData.return_time == ''){
+        this.toastr.warning('يجب تحديد تاريخ و وقت العوده')
+        this.disable = true;
+        return 0;
+      }
+    }
+    this.disable = true;
+    if(this.editPageId) {
+      this.dashBoardSer.editItem(this.editPageId, this.formData, 'femalesRequestTypes').subscribe(
+        (responce) => {
+          this.disable = true;
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          this.disable = false;
+          console.log(error);
+          this.toastr.error('خطأ في الخادم ، رجاء المحارله لاحقا');
+        }
+      )
+    } else {
+    this.dashBoardSer.addItem( this.formData , 'femalesRequestTypesAdd').subscribe(
+      (responce) => {
+        console.log('ADD',responce);
+        this.toastr.success('تم الإضافه بنجاح');
+        this.checkSaveclick = false;
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.checkSaveclick = false;
+        this.toastr.error('خطأ في الخادم ، حاول لاحقا');
+      }
+    );
+    }
+  }
+
+}

src/app/dashboard/females_request_types/females-request-types-list/females-request-types-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */

src/app/dashboard/females_request_types/females-request-types-list/females-request-types-list.component.html

@@ -0,0 +1,83 @@
+<div class="container">
+
+  <div class="row">
+    <div class="col-12">
+      <ul class="list-unstyled titileLi-w">
+        <li class="headingText-w">خدمه السكن  </li>
+        <li class="headingText-w activeLi-w" style="margin-right:5px">عرض الطلبات للإدارة</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="containerContent-w">
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+        <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <div class="form-group">
+          <input type="text" placeholder="البحث (اسم المبني او رمز المبنى)" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+          <hr>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+        <div class="col-6 col-sm-12 col-md-12 col-lg-6">
+          <div class="form-group">
+            <span class="spanSelect-w" style="margin-right:10px;">
+              <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                <option value="5">5</option>
+                <option value="10">10</option>
+                <option value="15">15</option>
+                <option value="20">20</option>
+              </select>
+              من العناصر يتم عرضها
+            </span>
+          </div>
+        </div>
+       
+    </div>
+
+    <table class="table table-bordered" *ngIf="this.count != 0">
+      <thead class="headBackground-w">
+        <tr>
+          <th>
+            <div class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+            </div>
+          </th>
+          <th> اسم الطلب</th>
+          <th>وصف الطلب</th>
+          <th>يتطلب مرفقات</th>
+          <th>يتطلب موافقة مسبقة</th>
+          <th>له تاريخ محدد</th>
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+         <td>
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+            <!-- <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label> -->
+            </div>
+          </td>
+          <td>{{data.name}}</td>
+          <td>{{data.description}}</td>
+          <td>{{data.require_attachments == '1' ? 'نعم' : data.require_attachments == '0' ? 'لا' : 'not found' }}</td>
+          <td>{{data.require_approval == '1' ? 'نعم' : data.require_approval == '0' ? 'لا' : 'not found' }}</td>
+          <td>{{data.require_date == '1' ? 'نعم' : data.require_date == '0' ? 'لا' : 'not found' }}</td>
+        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="col-12" *ngIf="this.count == 0" >
+    <!-- taaaaaaaaaaable -->
+    <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+
+  </div>
+  <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
+  </div>
+</div>

src/app/dashboard/females_request_types/females-request-types-list/females-request-types-list.component.ts

@@ -0,0 +1,295 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-females-request-types-list',
+  templateUrl: './females-request-types-list.component.html',
+  styleUrls: ['./females-request-types-list.component.css']
+})
+export class FemalesRequestTypesListComponent implements OnInit {
+
+  dataList = [];
+  pages= [];
+  pageId: number;
+  Ids = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  absorpationListIds = [];
+  dataListIds = [];
+  require_attachments: any = 'all';
+  require_approval: any = 'all';
+  require_date: any = 'all';
+  filtterStatus: any;
+
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    public authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService,
+    private http: HttpClient
+  ) { }
+
+  ngOnInit() {
+
+
+  //init the values of permision boolean
+  this.authSer.showAddBtn = false;
+  this.authSer.showDeleteBtn = false;
+  this.authSer.showEditBtn = false;
+  //show / hide notification search in header
+  this.authSer.notificationLogin = true;
+  this.authSer.showSearchHeader = false;
+  this.authSer.showHeaderLogin = false;
+  this.authSer.showHeaderDashBoard = true;
+  this.authSer.showDashboardHeader = true;
+  this.authSer.internalHeader = false;true;
+  this.authSer.internalHeader = false;
+
+
+
+    this.route.params.subscribe(
+      (parmas: Params) => {
+        this.pageId =  +parmas['listPageId'];
+        localStorage.setItem('pageIdActive', parmas['listPageId']);
+        console.log(this.pageId);
+      }
+    );
+
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+         
+  
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 72){
+                  if(this.pages[i]['permissions'][0].name == 'females_request_types') {
+                    this.authSer.showAddBtn = true;
+                    this.authSer.showEditBtn = true;
+                    this.authSer.showDeleteBtn = true;
+                  } else {
+                    console.log('no permissions');
+                  }
+                } else {
+                  console.log('no events');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+
+      console.log('current page',this.pageId)
+      this.dashboardSer.getRequestTypesList( this.currentPage ,this.dataTableNumber, this.require_attachments, this.require_approval, this.require_date).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['types'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+        },
+        err => {
+          console.log(err);
+          
+        }
+
+      );
+
+  }
+
+    //make all checkbox of user checked 
+    selectAll() {
+      for (var i = 0; i < this.dataList.length; i++) {
+        this.dataList[i].selected = this.selectedAll;
+      }
+    }
+  
+    checkIfAllSelected() {
+      this.selectedAll = this.dataList.every(function(item:any) {
+        return item.selected == true;
+      });
+    }
+
+
+    filtterFunc(data) {
+      this.dataList =[];
+      this.absorpationListIds = [];
+      console.log(data.target.value);
+      const dataSearch = data.target.value;     
+      this.currentPage = 1;
+      console.log('search curent page', this.currentPage);
+      console.log('search page id', this.pageId);
+      this.dashboardSer.getRequestTypesSearch(dataSearch, this.currentPage ,this.dataTableNumber, this.require_attachments, this.require_approval, this.require_date).subscribe(
+        res => {
+          console.log(res);
+          this.dataList = res['types'];
+          console.log('hey',this.dataList)
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+          console.log('filtter count', this.count);
+          console.log('filtter perPagePAgenation', this.perPagePagenation);
+        },
+        err => {
+          console.log(err);
+        }
+      );
+    }
+
+    onPageChange(pagenationNumber) {
+      this.spinner.show();
+      this.currentPage = pagenationNumber;
+      this.absorpationListIds = [];
+      console.log(pagenationNumber);
+      console.log(this.pageId);
+      this.dashboardSer.getRequestTypesList( this.currentPage ,this.dataTableNumber, this.require_attachments, this.require_approval, this.require_date).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['types'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+        },
+        err => {
+          console.log(err);
+          
+        }
+
+      );
+
+    }
+
+    onGetValue(event) {
+      this.spinner.show();
+      this.absorpationListIds = [];
+      this.dataTableNumber = event.target.value;
+      this.dashboardSer.getRequestTypesList( this.currentPage ,this.dataTableNumber, this.require_attachments, this.require_approval, this.require_date).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['types'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+        },
+        err => {
+          console.log(err);
+          
+        }
+
+      );
+
+    }
+    onGetValueFiltter(event) {
+      console.log(event.target.value)
+      this.spinner.show();
+      this.dataList = [];
+      const typeId = event.target.value;
+      this.filtterStatus = event.target.value;
+      console.log(this.filtterStatus);
+      this.dashboardSer.getRequestTypesList( this.currentPage ,this.dataTableNumber, this.require_attachments, this.require_approval, this.require_date).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['types'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+        },
+        err => {
+          console.log(err);
+          
+        }
+
+      );
+
+    }
+
+    onDelete() {
+
+      this.dataListIds = [];
+      for(let i = 0; i < this.dataList.length; i++) {
+        if(this.dataList[i].selected == true) {
+          this.dataListIds.push(this.dataList[i].id);
+        }
+      }
+    
+    
+      console.log(this.dataListIds);
+    
+      if(this.dataListIds.length > 0) {
+        const dialogRef = this.modal.alert()
+        .size('sm')
+        .showClose(true)
+        .title('تأكيد الحذف')
+        .body(`
+            <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+            `)
+        .open();
+    
+          dialogRef.result
+          .then( result =>
+            this.dashboardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم الحذف');
+                this.spinner.show();
+                this.dataList = [];
+                 //get list data
+                 this.dashboardSer.getRequestTypesList( this.currentPage ,this.dataTableNumber, this.require_attachments, this.require_approval, this.require_date).subscribe(
+                  res => {
+                    console.log('x',res);
+                    this.dataList = res['types'];
+                    this.count = res['count'];
+                    this.perPagePagenation = res['per_page'];
+                  },
+                  err => {
+                    console.log(err);
+                    
+                  }
+          
+                );          
+              },
+              (error) => {
+                console.log(error.error.error);
+                this.spinner.hide();
+                if (error.error.error == 'Requests already uses this type can not delete it') {
+                  this.toastr.warning('ليس هناك صلاحية لمسح هذا الطلب')
+                }
+                },
+              )
+          );
+      } else {
+        this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+      }
+    };
+    
+    
+    onAdd() {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'femalesRequestTypesAdd']);
+    }
+    
+    onEdit(editId: number) {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'femalesRequestTypes/edit/' + editId]);
+      console.log('service/' + this.userLoginId + '/' + this.serviceId + '/' + 'femalesRequestTypes/edit/' + editId);
+      
+    }
+
+}

src/app/dashboard/header/header.component.ts

@@ -13,7 +13,6 @@ import { UserService } from '../../shared/user.service';
 
 export class HeaderComponent implements OnInit {
 
-  imgSrc: string = '../../../assets/image'; 
 
   constructor(public authSer: AuthServiceService ,
     private userSer: UserService,

src/app/dashboard/link_unit_to_covenants/link-unit-to-covenants-list/link-unit-to-covenants-list.component.ts

@@ -354,7 +354,7 @@ export class LinkUnitToCovenantsListComponent implements OnInit {
           unit_number:'الكل',
         });
 
-        if(x > 0)
+        if(x > 1)
             this.isUnit = true;
 
       },

src/app/dashboard/living_system_reports/living-system-reports/living-system-reports.component.css

@@ -0,0 +1,354 @@
+.numberReport-s {
+    width: 83%;
+    float: right;
+}
+
+.buttonS {
+    float: left;
+}
+
+.userForm-w {
+    width: 100%;
+    padding: 20px 0;
+    margin-top: -6px;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+input,select {
+    font-size: 12px; 
+    background-color: #fff;
+    border: 2px solid #bda380;
+}
+
+/* input.ng-invalid.ng-touched {
+    border: 2px solid #ccc;
+}
+
+input.ng-invalid {
+    border: 2px solid #ccc;
+}
+
+select.ng-invalid{
+    border: 2px solid #ccc;
+} */
+.custom-radio .custom-control-label::before{
+	    border: 1px solid #b28c5e;
+}
+.custom-radio .custom-control-input:checked~.custom-control-label::before{
+	background-color: #906635;
+	    border: 1px solid #fff;
+}
+
+.formfieldset{
+	border: 1px solid #61606073;
+    width: 100%;
+	border-radius: 3px;
+	    margin-top: 40px;
+    background-color: #a5a3a31a;
+}
+.formfieldset legend{
+	    float: right;
+}
+.formfieldset legend span{
+    width: auto !important;
+    font-size: 15px;
+    border: 1px solid #616060;
+    padding: 2px 15px;
+    background-color: #616060;
+    float: right;
+    margin: -15px 14px 0px 0px;
+    border-radius: 3px;
+    color: #ffffff;
+}
+.imgProfile {
+    width: 100%;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.table .fileName-w {
+    position: absolute;
+    bottom: -3px;
+    right: 120px;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+
+.regesterBtn-w {
+    margin:  20px 10px;
+    float: right;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+.formStyle{
+    border: 1px solid #ccc;
+    border-top: 4px solid #bda380;
+    padding: 20px;
+    margin: 0 auto
+}
+
+
+
+
+
+.titileLi-w li {
+    margin: 0 5px;
+}
+
+.errorMessage-w {
+    font-size: 14px;
+    text-align: right;
+    margin: 5px;
+    color: red;
+}
+
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+}
+.statusBtn-w {
+    width: 145px;
+    margin: 5px 7px;
+    cursor: pointer;
+    float: right;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* file table style */
+
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+.departmentHeading-w {
+    font-size: 18px;
+    float: right;
+}
+
+.departmentHeading-w span{
+    color: red;
+}
+
+.titleStatus {
+    font-size: 19px;
+    margin: 2px 14px;
+    color: green;
+}
+
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.wrapper .table td, 
+.table th {
+    font-size: 15px;
+}
+
+.buttonW {
+    background: transparent;
+    color: #b19877;
+    font-weight: bold;
+    border: none !important;
+    border-color: transparent;
+    padding: 5px 20px !important;
+}
+
+.btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle {
+    background-color: transparent;
+    border: none;
+}
+
+.btn-secondary.focus, .btn-secondary:focus {
+    box-shadow: none;
+}
+
+.show>.btn-secondary.dropdown-toggle::after {
+    transform: rotate(-180deg); 
+}
+    
+
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */
+
+/* start media query style */
+
+@media(max-width: 767px){
+    .formStyle {
+        padding: 20px;
+    }
+
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+@media(min-width: 767px) and (max-width: 991px){
+    .formStyle {
+        padding: 20px;
+    }
+    input,select {
+        font-size: 12px; 
+    }
+}
+ .full{
+     width: 100%;
+ }
+ .fit-filter-style{
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    text-align: center;
+    margin-right: 2%;
+ }

src/app/dashboard/living_system_reports/living-system-reports/living-system-reports.component.html

@@ -0,0 +1,336 @@
+<div class="addHospital-w">
+  <div class="container">
+      <div class="row">
+          <div class="col-12">
+            <ul class="list-unstyled titileLi-w">
+              <li class="headingText-w">خدمه السكن  </li>
+              <li class="headingText-w" style="cursor:pointer" > تقارير السكن </li>
+            </ul>
+          </div>
+      </div>
+      <div class="containerContent-w">
+          <div class="row">
+            <div class="col-12 col-md-4">
+
+                <div class="form-group">
+                    <span class="spanSelect-w" style="margin-right:10px;">
+                      <select [ngModel]="reportValue" class="form-control selectButton-w full"  (input)="getReport($event.target.value)">
+                        <option value="0"> رجاء الاختيار التقرير</option>
+                        <option value="1">تقارير عن الوحدات السكنية</option>
+                        <option value="2">تقارير عن السكان في مجمعات و المباني</option>
+                        <option value="3">تقارير عن ساكن</option>
+                        <option value="4">تقارير عن العهد الموجوده</option>
+                      </select>
+                    </span>
+                  </div>
+            </div>   
+           </div>
+           <div class="row fit-filter-style" *ngIf="showFilters">
+              <div class="col-12 col-sm-3 col-md-3 col-lg-3">
+                <div class="form-group">
+                  <span class="spanSelect-w" style="margin-right:10px;">
+                    <select [ngModel]="housing_complex_id" class="form-control selectButton-w full" (input)="getBuildingsType($event.target.value)">
+                      <option *ngFor="let complex of complex_list" [value]="complex.id">{{complex.name}}</option>
+                    </select>
+                  </span>
+                </div>
+              </div>
+              <div class="col-12 col-sm-3 col-md-3 col-lg-3" *ngIf="isComplex">
+                <div class="form-group">
+                  <span class="spanSelect-w" style="margin-right:10px;">
+                    <select [ngModel]="building_type_id" class="form-control selectButton-w full" (input)="getBuilding($event.target.value)">
+                    <option *ngFor="let type of building_types" [value]="type.id">{{type.name}}</option>
+                    </select>
+                  </span>
+                </div>
+              </div>
+              <div class="col-12 col-sm-3 col-md-3 col-lg-3" *ngIf="isBuildingType">
+                <div class="form-group">
+                  <span class="spanSelect-w" style="margin-right:10px;">
+                    <select [ngModel]="building_id" class="form-control selectButton-w full " (input)="getBuildingID($event.target.value)">
+                      <option *ngFor="let building of buildings" [value]="building.id">{{building.building_name}}</option>
+                    </select>
+                  </span>
+                </div>
+              </div>  
+
+              <div class="col-12 col-sm-12 col-md-12 col-lg-3" *ngIf="isUnit">
+                <div class="form-group">
+                  <span class="spanSelect-w" style="margin-right:10px;">
+                    <select [ngModel]="unitId" class="form-control selectButton-w full" (input)="unitNum($event.target.value)">
+                     <option *ngFor="let unit of units" [value]="unit.id">{{unit.unit_number}}</option>
+                    </select>
+                  </span>
+                </div>
+              </div>   
+           </div>
+           <div class="row" *ngIf="reportValue == 3 && showSearchBtn " style="justify-content: center; margin-top: 50px">
+            <input type="text" placeholder="{{placeholder}}" class="form-control numberReport-s" [(ngModel)]="searchValue" style="width: 25%"/>
+           </div>
+           <div class="row fit-filter-style" *ngIf="showSearchBtn">
+              <button class="btn btn-success buttonS" (click)="onSearch()" style="margin-left: 2%;">أبحث</button>            
+          </div>
+
+          <div class="col-12" *ngIf="fristReport">
+              <h2 class="title"> وحدات متسكنة</h2>
+            <div class="row">
+              <div class="col-12">
+                 <div class="wrapper">
+                    <table class="table table-bordered" >
+                        <thead class="headBackground-w">
+                          <tr>   
+                            <th>اسم الوحدة</th>
+                            <th>رقم الوحدة</th>
+                            <th>رمز الوحدة</th>
+                            <th>حالة الوحدة</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr *ngFor="let data of assigned_units | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+                            <td>{{data.unit_name}}</td>
+                            <td>{{data.unit_number}}</td>
+                            <td>{{data.unit_code}}</td>
+                            <td>{{data.unit_status == 'new' ? 'جديد' : data.unit_status == 'old' ? 'قديمة' : 'Not Found'}}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+
+                    <div class="col-12" *ngIf="this.assigned_count == 0" >
+                        <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+                    </div>
+                  </div>
+                </div>
+            </div>
+          </div>
+          <div class="col-12" *ngIf="fristReport">
+              <h2 class="title"> وحدات الفارغة</h2>
+            <div class="row">
+              <div class="col-12">
+                 <div class="wrapper">
+                    <table class="table table-bordered" >
+                        <thead class="headBackground-w">
+                          <tr>   
+                            <th>اسم الوحدة</th>
+                            <th>رقم الوحدة</th>
+                            <th>رمز الوحدة</th>
+                            <th>حالة الوحدة</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr *ngFor="let data of empty_units | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+                            <td>{{data.unit_name}}</td>
+                            <td>{{data.unit_number}}</td>
+                            <td>{{data.unit_code}}</td>
+                            <td>{{data.unit_status == 'new' ? 'جديد' : data.unit_status == 'old' ? 'قديمة' : 'Not Found'}}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+
+                    <div class="col-12" *ngIf="this.empty_count == 0" >
+                        <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+                    </div>
+                  </div>
+                </div>
+            </div>
+          </div>
+          <div class="col-12" *ngIf="secondReport">
+              <h2 class="title">  بيانات السكان</h2>
+            <div class="row">
+              <div class="col-12">
+                 <div class="wrapper">
+                    <table class="table table-bordered" >
+                        <thead class="headBackground-w">
+                          <tr>   
+                            <th>اسم الموظف</th>
+                            <th>رقم الوظيفي</th>
+                            <th>رقم الهوية</th>
+                            <th>اسم المبنى</th>
+                            <th>رقم الوحدة</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr *ngFor="let data of employees | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+                            <td>{{data.employee_name}}</td>
+                            <td>{{data.employee_functional_number}}</td>
+                            <td>{{data.employee_identity_number}}</td>
+                            <td>{{data.building_information_name }}</td>
+                            <td>{{data.unit_name}}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+
+                    <div class="col-12" *ngIf="employees.length == 0" >
+                        <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+                    </div>
+                  </div>
+                </div>
+            </div>
+          </div>
+          <div class="col-12" *ngIf="thirdReport">
+              <h2 class="title"> بيانات الموظف</h2>
+            <div class="row">
+              <div class="col-12">
+                 <div class="wrapper">
+                    <table class="table table-bordered" >
+                        <thead class="headBackground-w">
+                          <tr>   
+                            <th>اسم الموظف</th>
+                            <th>جنسية الموظف</th>
+                            <th>رقم الجوال</th>
+                            <th> المنصب الوظيفي</th>
+                            <th>الأدارة</th>
+                            <th>البريد الالكتروني</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr>
+                            <td>{{employee.employee_name}}</td>
+                            <td>{{employee.employee_nationality}}</td>
+                            <td>{{employee.employee_phone}}</td>
+                            <td>{{employee.employee_position}}</td>
+                            <td>{{employee.employee_adminstration_name}}</td>
+                            <td>{{employee.employee_email}}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+            </div>
+          </div>
+          <div class="col-12" *ngIf="thirdReport">
+              <h2 class="title">  طلبات الموظف </h2>
+            <div class="row">
+              <div class="col-12">
+                 <div class="wrapper">
+                    <table class="table table-bordered" >
+                        <thead class="headBackground-w">
+                          <tr>   
+                            <th>رقم الطلب </th>
+                            <th> نوع الطلب</th>
+                            <th> حالة الطلب</th>
+                           
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr *ngFor="let data of requests | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+                            <td>{{data.id}}</td>
+                            <td>{{data.type_name}}</td>
+                            <td>{{data.status == 'accepted' ? 'مبقول' : data.status == 'refused' ? 'مرفوض' :  'جديد'}}</td>
+                          
+                        </tr>
+                      </tbody>
+                    </table>
+
+                    <div class="col-12" *ngIf="requests.length == 0" >
+                        <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+                    </div>
+                  </div>
+                </div>
+            </div>
+          </div>
+          <div class="col-12" *ngIf="thirdReport">
+              <h2 class="title"> بيانات الوحدة</h2>
+            <div class="row">
+              <div class="col-12">
+                 <div class="wrapper">
+                    <table class="table table-bordered" >
+                        <thead class="headBackground-w">
+                          <tr>   
+                            <th>اسم المجمع السكني</th>
+                            <th> نوع المبنى</th>
+                            <th> اسم المبنى</th>
+                            <th>  رقم الوحدة</th>
+                            <th>رمز الوحدة</th>
+                            <th> حالة الوحدة </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr>
+                            <td>{{employee.housing_complex_name}}</td>
+                            <td>{{employee.building_type_name}}</td>
+                            <td>{{employee.building_information_name}}</td>
+                            <td>{{unit.unit_number}}</td>
+                            <td>{{unit.unit_code}}</td>
+                            <td>{{unit.unit_status == 'new' ? 'جديد' : unit.unit_status == 'old' ? 'قديمة' : 'Not Found'}}</td>
+                            
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+            </div>
+          </div>
+          <div class="col-12" *ngIf="fourthReport">
+            <h2 class="title">  بيانات الوحدة</h2>
+          <div class="row">
+            <div class="col-12">
+               <div class="wrapper">
+                  <table class="table table-bordered" >
+                      <thead class="headBackground-w">
+                        <tr>   
+                          <th>اسم المجمع</th>
+                          <th> نوع المبنى</th>
+                          <th> اسم المبنى</th>
+                          <th> اسم الوحدة</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr *ngFor="let data of units2 | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+                          <td>{{data.housing_complex_name}}</td>
+                          <td>{{data.building_type_name}}</td>
+                          <td>{{data.building_information_name }}</td>
+                          <td>{{data.unit_name}}</td>        
+                      </tr>
+                    </tbody>
+                  </table>
+                  <div class="col-12" *ngIf="units2.length == 0" >
+                      <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+                  </div>
+                </div>
+              </div>
+          </div>
+        </div>
+        <div class="col-12" *ngIf="fourthReport">
+          <h2 class="title">  بيانات العهد</h2>
+        <div class="row">
+          <div class="col-12">
+             <div class="wrapper">
+                <table class="table table-bordered" >
+                    <thead class="headBackground-w">
+                      <tr>   
+                        <th> اسم العهدة</th>
+                        <th>  نوع العهدة</th>
+                        <th> عدد العهد</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let data of covenants | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+                        <td>{{data.covenant_name}}</td>
+                        <td>{{data.category_name}}</td>
+                        <td>{{data.covenant_amount }}</td>                   
+                    </tr>
+                  </tbody>
+                </table>
+
+                <div class="col-12" *ngIf="units2.length == 0" >
+                    <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+                </div>
+              </div>
+            </div>
+        </div>
+      </div>
+
+
+          <div class="col-12" *ngIf="fristReport || secondReport || thirdReport || fourthReport">
+              <button class="btn btn-success" style="float: right; margin: 10px 0;" (click)="onPrint()">طباعه</button> 
+            </div>
+      </div>
+  </div>
+</div>
+
+
+
+   <!-- <div class="form-group">
+                <input type="number" placeholder="رقم البلاغ" class="form-control numberReport-s" [(ngModel)]="searchValue"/>
+                <button class="btn btn-success buttonS" (click)="onSearch()">أبحث</button>
+              </div> -->

src/app/dashboard/living_system_reports/living-system-reports/living-system-reports.component.ts

@@ -0,0 +1,411 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-living-system-reports',
+  templateUrl: './living-system-reports.component.html',
+  styleUrls: ['./living-system-reports.component.css']
+})
+
+export class LivingSystemReportsComponent implements OnInit {
+  reportValue : number = 0;
+  housing_complex_id: any = 'all';
+  building_type_id: any = 'all';
+  building_id: any = 'all';
+  unitId: any = 'all';
+  assigned_count: number;
+  empty_count: number;
+  searchValue: any;
+  employee: any;
+  unit: any;
+  placeholder: string;
+ 
+
+  complex_list = [];
+  building_types = [];
+  buildings = [];
+  assigned_units = [];
+  empty_units = [];
+  employees = [];
+  requests = [];
+  units = [];
+  covenants = [];
+  units2 = [];
+
+
+  isComplex: boolean = false;
+  isBuildingType: boolean = false;
+  showFilters: boolean = false;
+  showSearchBtn: boolean = false;
+  fristReport: boolean = false;
+  secondReport: boolean = false;
+  thirdReport:boolean = false;
+  fourthReport: boolean = false;
+  isUnit: boolean = false;
+  
+
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    public authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService,
+    private http: HttpClient
+  ) { }
+
+  ngOnInit() {
+
+
+    this.http.get(this.authSer.pathApi + '/housing_complexes_list').subscribe(
+      res => {
+        console.log(res);
+        this.complex_list = res[('housing_complexes')];
+        this.complex_list.splice(0, 0 ,  {
+          id: 'all',
+          name:'أختار مجمع سكني'
+        },
+          );
+        console.log(this.complex_list)  ;
+        
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+
+
+  }
+
+  getBuildingsType(event){
+    console.log('sdsdsd',event);
+    const id = event;
+  this.housing_complex_id = id;
+  console.log(id);
+
+
+  this.building_types = [];
+  this.buildings = [];
+  this.building_type_id = 'all'
+  this.building_id = 'all';
+  
+  if(id != 'all'){
+    this.http.get(this.authSer.pathApi+ '/building_types_list/' + id ).subscribe(
+      res => {
+        console.log(res);
+        this.building_types = res[('building_types')];
+        this.building_types.splice(0, 0 ,  {
+          id: 'all',
+          name:'أختار نوع المبنى'
+        },
+          );
+        if(this.building_types.length > 1)
+        this.isComplex = true;
+
+        console.log(this.isComplex);
+        
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+  }
+}
+getBuilding(event){
+  this.building_type_id = event;
+  this.buildings = [];
+  this.building_id = 'all'
+
+  if(event != 'all'){
+  
+    this.http.get(this.authSer.pathApi + '/buildings_list_by_type_id/' + event ).subscribe(
+      res => {
+        console.log(res);
+        this.buildings = res['buildings'];
+        const x = this.buildings.length
+        this.buildings.splice(0, 0 ,  {
+          id: 'all',
+          building_name:'أختار اسم المبنى'
+        },
+          );
+          if(x > 0)
+          this.isBuildingType= true;
+
+          console.log(this.building_id , this.building_type_id , this.housing_complex_id);
+          
+          
+      },
+      err =>{
+        console.log(err);
+        
+      }
+    );
+  }
+}
+
+getBuildingID(event){
+  this.building_id = event;
+  console.log(this.housing_complex_id , this.building_type_id, this.building_id);
+  this.http.get(this.authSer.pathApi + '/units_list_by_building_id/' + event).subscribe(
+    res =>{
+      console.log(res);
+      this.units = res['units']
+      const x = this.units.length;
+      this.units.splice(0, 0 ,  {
+        id: 'all',
+        unit_number:'أختار رقم الوحدة',
+      });
+
+      if(x > 1)
+            this.isUnit = true;
+
+    },
+
+    err => {
+      console.log(err);
+      
+    }
+  );
+
+}
+unitNum(event){
+ this.unitId = event;
+ this.showSearchBtn = true;
+
+  }
+
+  getReport(event){
+    this.reportValue = event
+    this.showFilters = true;
+    this.building_types = [];
+    this.buildings = [];
+    this.assigned_units = [];
+    this.empty_units = [];
+    this.employees = [];
+    this.requests = [];
+    this.units = [];
+    this.covenants = [];
+    if(this.reportValue == 1 ){
+      this.secondReport = false;
+      this.thirdReport = false;
+      this.fourthReport = false;
+    }
+    if(this.reportValue == 2){
+      this.fristReport = false;
+      this.thirdReport = false;
+      this.fourthReport = false;
+    }
+    if(this.reportValue == 3 ){
+      this.fristReport = false;
+      this.secondReport = false;
+      this.fourthReport = false;
+      this.placeholder = 'ادخل رقم هوية الموظف'
+      this.searchValue = '';
+    }
+    if(this.reportValue == 4 ){
+      this.fristReport = false;
+      this.secondReport = false;
+      this.thirdReport = false;
+      this.placeholder = 'ادخل رقم او كود الوحدة'
+      this.searchValue = '';
+    }
+  }
+
+  onSearch(){
+    console.log(this.reportValue);
+    this.fristReport = false;
+    
+    if(this.reportValue == 1){
+      this.assigned_count = null;
+      this.empty_count = null;
+      this.assigned_units = [];
+      this.empty_units = [];
+     
+      this.http.get(this.authSer.pathApi + '/units_report/' + this.housing_complex_id + '/' + this.building_type_id + '/' + this.building_id).subscribe(
+        res => {
+          console.log( res);
+          this.assigned_count = res['data'].assigned_count;
+          this.assigned_units = res['data'].assigned_units;
+          this.empty_count = res['data'].empty_count;
+          this.empty_units = res['data'].empty_units
+          this.fristReport = true;
+        },
+        err => {
+          console.log(err);
+          
+        }
+      )
+    }
+    if(this.reportValue == 2){
+      this.employees = [];
+      this.secondReport = false;
+      this.http.get(this.authSer.pathApi + '/tenants_report/' + this.housing_complex_id + '/' + this.building_type_id + '/' + this.building_id + '/' + 'all').subscribe(
+        res => {
+          console.log('>>>>',res);
+          this.employees  = res['data'].employees;
+          this.secondReport = true;
+        },
+        err => {
+          console.log(err);
+          
+        }
+      )
+    }
+    if(this.reportValue == 3 ){
+      this.thirdReport = false;
+
+      this.http.get(this.authSer.pathApi + '/tenants_report/' + this.housing_complex_id + '/' + this.building_type_id + '/' + this.building_id + '/' + 'single' + '/' + this.searchValue).subscribe(
+        res => {
+          console.log('>>>>',res);
+          this.employee  = res['data'].employee;
+          this.requests =  res['data'].requests;
+          this.unit = res['data'].unit;
+          this.thirdReport = true;
+        },
+        err => {
+          console.log(err);
+          
+        }
+      )
+
+    }
+    if(this.reportValue == 4 ){
+      this.fourthReport = false;
+      
+      this.http.get(this.authSer.pathApi + '/covenants_report/' + this.housing_complex_id + '/' + this.building_type_id + '/' + this.building_id  + '/' + this.unitId).subscribe(
+        res => {
+          console.log('>>>>',res);
+          this.units2 = res['units'];
+
+          for (let i = 0; i < this.units2.length; i++) {
+            this.covenants = this.units2[i].covenants;
+            
+          }
+          
+          
+          
+         
+          this.fourthReport = true;
+        },
+        err => {
+          console.log(err);
+          
+        }
+      )
+
+    }
+    
+  }
+
+ //print function 
+ onPrint() {
+  window.print();
+}
+  //print function
+//   onPrint(): void {
+//     let printContents, popupWin;
+//     printContents = document.getElementById('print-section').innerHTML;
+//     popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
+//     popupWin.document.open();
+//     popupWin.document.write(`
+//       <html>
+//         <head>
+//           <title>تقرير المركبات الموجوده</title>
+//           <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </link>
+//           <style>
+//           .row{
+//             display: flex;
+//             flex-wrap: wrap;
+//             margin-right: -15px;
+//             margin-left: -15px;
+//           }
+//           .col-6{
+//             float: right;
+//             flex: 0 0 50%;
+//             max-width: 50%
+//           }
+//           .col-12{
+//             flex-basis: 0;
+//             flex-grow: 1;
+//             max-width: 100%;
+//           }
+//           table {
+//             font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+//             border-collapse: collapse;
+//             width: 100%;
+//             direction: rtl;
+//             text-align: center;
+            
+//           }
+          
+//           table td, table th {
+//             border: 1px solid #ddd;
+//             padding: 8px;
+//           }
+          
+//           table tr:nth-child(even){background-color: #f2f2f2;}
+          
+//           table tr:hover {background-color: #ddd;}
+          
+//           table th {
+//             padding-top: 12px;
+//             padding-bottom: 12px;
+//             text-align: center;
+//             background-color: #4CAF50;
+//             color: white;
+
+//           }
+//           .d3{
+//             font-size: 15px;
+//             padding-left: 10px;
+//             width: 25%;
+//             text-align: center;
+//             direction: rtl;
+//             margin-left: 20px;
+//           }
+//           v3{
+//             direction: rtl;              
+//           }
+//           </style>
+//         </head>
+//        <body onload="window.print();window.close()">
+//        <div class="row">
+//         <div class="col-6" style="float: left">
+//          <img class="logo1" src="../../assets/image/logo2.png" style="width: 130px;float: left; margin-left: 20px;">
+//         </div>
+//       <div class="col-6" style="float: right">
+//           <img  class="logo2" src="../../assets/image/logo1.png" style="width: 200px;float: right; margin-right: 20px;">
+//        </div>
+//       </div>
+//       <div class="row">
+//         <div class="col-12" style="width:100%;text-align: center">
+//           <h1>تقرير حركة المركبات </h1>
+//         </div>
+//       </div>
+    
+//    <div class="row">
+//    <div class="col-12">
+//    ${printContents}
+//    </div>
+// </div>
+//     </body>
+//       </html>`
+//     );
+//     popupWin.document.close();
+// }
+
+
+}

src/app/dashboard/service-item/service-item.component.ts

@@ -502,10 +502,19 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['viewRequestsForAdminstration/' + dataPage.id], {relativeTo: this.route});
     }else if(dataPage.id == 71) {
       this.router.navigate(['viewRequestsForTenant/' + dataPage.id], {relativeTo: this.route});
+    }else if(dataPage.id == 72) {
+      this.router.navigate(['femalesRequestTypesList/' + dataPage.id], {relativeTo: this.route});
+    }else if(dataPage.id == 73) {
+      this.router.navigate(['viewMyFemaleRequestsList/' + dataPage.id], {relativeTo: this.route});
+    }else if(dataPage.id == 74) {
+      this.router.navigate(['viewMyFemaleRequestsList/' + dataPage.id], {relativeTo: this.route});
+    }else if(dataPage.id == 75) {
+      this.router.navigate(['livingSystemReports/' + dataPage.id], {relativeTo: this.route});
     }
     
+    
   }
-  // livingService viewRequestsForTenant
+  // LivingSystemReports
 
   onAddUser() {
     this.router.navigate(['addUser'],  {relativeTo: this.route});

src/app/dashboard/view_my_female_requests/view-my-female-requests-add/view-my-female-requests-add.component.css

@@ -0,0 +1,994 @@
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: 2px;
+    color: #fff;
+}
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+
+.check {
+    float: right;
+    margin-top: 3px;
+    margin-right: 10px;
+    width: 20px;
+    height: 20px;
+}
+
+
+.disabledDiv {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color:  #e9ecef
+}
+
+
+.checkReport {
+    display: block;
+}
+
+.searchEmp {
+    width: 85%;
+    float: right;
+}
+
+@media(max-width: 767px) {
+
+    .searchEmp {
+        width: 100%;
+        float: right;
+    }
+}
+.numberReport-s {
+    width: 83%;
+    float: right;
+}
+
+.buttonS {
+    float: left;
+}
+
+.userForm-w {
+    width: 100%;
+    padding: 20px 0;
+    margin-top: -6px;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+input,select {
+    font-size: 12px; 
+    background-color: #fff;
+    border: 2px solid #bda380;
+}
+
+/* input.ng-invalid.ng-touched {
+    border: 2px solid #ccc;
+}
+
+input.ng-invalid {
+    border: 2px solid #ccc;
+}
+
+select.ng-invalid{
+    border: 2px solid #ccc;
+} */
+.custom-radio .custom-control-label::before{
+	    border: 1px solid #b28c5e;
+}
+.custom-radio .custom-control-input:checked~.custom-control-label::before{
+	background-color: #906635;
+	    border: 1px solid #fff;
+}
+
+.formfieldset{
+	border: 1px solid #61606073;
+    width: 100%;
+	border-radius: 3px;
+	    margin-top: 40px;
+    background-color: #a5a3a31a;
+}
+.formfieldset legend{
+	    float: right;
+}
+.formfieldset legend span{
+    width: auto !important;
+    font-size: 15px;
+    border: 1px solid #616060;
+    padding: 2px 15px;
+    background-color: #616060;
+    float: right;
+    margin: -15px 14px 0px 0px;
+    border-radius: 3px;
+    color: #ffffff;
+}
+.imgProfile {
+    width: 100%;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.table .fileName-w {
+    position: absolute;
+    bottom: -3px;
+    right: 120px;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+
+.regesterBtn-w {
+    margin:  20px 10px;
+    float: right;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+.formStyle{
+    border: 1px solid #ccc;
+    border-top: 4px solid #bda380;
+    padding: 20px;
+    margin: 0 auto
+}
+
+
+
+
+
+.titileLi-w li {
+    margin: 0 5px;
+}
+
+.errorMessage-w {
+    font-size: 14px;
+    text-align: right;
+    margin: 5px;
+    color: red;
+}
+
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+}
+.statusBtn-w {
+    width: 145px;
+    margin: 5px 7px;
+    cursor: pointer;
+    float: right;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* file table style */
+
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+.departmentHeading-w {
+    font-size: 18px;
+    float: right;
+}
+
+.departmentHeading-w span{
+    color: red;
+}
+
+.titleStatus {
+    font-size: 19px;
+    margin: 2px 14px;
+    color: green;
+}
+
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.wrapper .table td, 
+.table th {
+    font-size: 15px;
+}
+
+.buttonW {
+    background: transparent;
+    color: #b19877;
+    font-weight: bold;
+    border: none !important;
+    border-color: transparent;
+    padding: 5px 20px !important;
+}
+
+.btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle {
+    background-color: transparent;
+    border: none;
+}
+
+.btn-secondary.focus, .btn-secondary:focus {
+    box-shadow: none;
+}
+
+.show>.btn-secondary.dropdown-toggle::after {
+    transform: rotate(-180deg); 
+}
+    
+
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */
+
+/* start media query style */
+
+@media(max-width: 767px){
+    .formStyle {
+        padding: 20px;
+    }
+
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+@media(min-width: 767px) and (max-width: 991px){
+    .formStyle {
+        padding: 20px;
+    }
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+.btns-des{
+    display: flex;
+    justify-content: center;
+}
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: 2px;
+    color: #fff;
+}
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+
+.check {
+    float: right;
+    margin-top: 3px;
+    margin-right: 10px;
+    width: 20px;
+    height: 20px;
+}
+
+
+.disabledDiv {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color:  #e9ecef
+}
+
+
+.checkReport {
+    display: block;
+}
+
+.searchEmp {
+    width: 85%;
+    float: right;
+}
+
+@media(max-width: 767px) {
+
+    .searchEmp {
+        width: 100%;
+        float: right;
+    }
+}
+.numberReport-s {
+    width: 83%;
+    float: right;
+}
+
+.buttonS {
+    float: left;
+}
+
+.userForm-w {
+    width: 100%;
+    padding: 20px 0;
+    margin-top: -6px;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+input,select {
+    font-size: 12px; 
+    background-color: #fff;
+    border: 2px solid #bda380;
+}
+
+/* input.ng-invalid.ng-touched {
+    border: 2px solid #ccc;
+}
+
+input.ng-invalid {
+    border: 2px solid #ccc;
+}
+
+select.ng-invalid{
+    border: 2px solid #ccc;
+} */
+.custom-radio .custom-control-label::before{
+	    border: 1px solid #b28c5e;
+}
+.custom-radio .custom-control-input:checked~.custom-control-label::before{
+	background-color: #906635;
+	    border: 1px solid #fff;
+}
+
+.formfieldset{
+	border: 1px solid #61606073;
+    width: 100%;
+	border-radius: 3px;
+	    margin-top: 40px;
+    background-color: #a5a3a31a;
+}
+.formfieldset legend{
+	    float: right;
+}
+.formfieldset legend span{
+    width: auto !important;
+    font-size: 15px;
+    border: 1px solid #616060;
+    padding: 2px 15px;
+    background-color: #616060;
+    float: right;
+    margin: -15px 14px 0px 0px;
+    border-radius: 3px;
+    color: #ffffff;
+}
+.imgProfile {
+    width: 100%;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.table .fileName-w {
+    position: absolute;
+    bottom: -3px;
+    right: 120px;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+
+.regesterBtn-w {
+    margin:  20px 10px;
+    float: right;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+.formStyle{
+    border: 1px solid #ccc;
+    border-top: 4px solid #bda380;
+    padding: 20px;
+    margin: 0 auto
+}
+
+
+
+
+
+.titileLi-w li {
+    margin: 0 5px;
+}
+
+.errorMessage-w {
+    font-size: 14px;
+    text-align: right;
+    margin: 5px;
+    color: red;
+}
+
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+}
+.statusBtn-w {
+    width: 145px;
+    margin: 5px 7px;
+    cursor: pointer;
+    float: right;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* file table style */
+
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+.departmentHeading-w {
+    font-size: 18px;
+    float: right;
+}
+
+.departmentHeading-w span{
+    color: red;
+}
+
+.titleStatus {
+    font-size: 19px;
+    margin: 2px 14px;
+    color: green;
+}
+
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.wrapper .table td, 
+.table th {
+    font-size: 15px;
+}
+
+.buttonW {
+    background: transparent;
+    color: #b19877;
+    font-weight: bold;
+    border: none !important;
+    border-color: transparent;
+    padding: 5px 20px !important;
+}
+
+.btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle {
+    background-color: transparent;
+    border: none;
+}
+
+.btn-secondary.focus, .btn-secondary:focus {
+    box-shadow: none;
+}
+
+.show>.btn-secondary.dropdown-toggle::after {
+    transform: rotate(-180deg); 
+}
+    
+
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */
+
+/* start media query style */
+
+@media(max-width: 767px){
+    .formStyle {
+        padding: 20px;
+    }
+
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+@media(min-width: 767px) and (max-width: 991px){
+    .formStyle {
+        padding: 20px;
+    }
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+.btns-des{
+    display: flex;
+    justify-content: center;
+}
+.green{
+    background-color: green;
+}
+.red{
+    background-color: red;
+}

src/app/dashboard/view_my_female_requests/view-my-female-requests-add/view-my-female-requests-add.component.html

@@ -0,0 +1,210 @@
+<div class="addDepartment-w">
+
+    
+    <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <ul class="list-unstyled titileLi-w">
+              <li class="headingText-w"> خدمه البلاغات </li>
+              <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typePage}} </li>
+            </ul>
+          </div>
+        </div>
+  
+      <div class="containerContent-w">
+        <h2 class="title"  style="margin: auto ;text-align:  center" [ngClass]="{'green': statusAccept, 'red' : statusrefu}">{{ statusAccept ? 'مقبول' : statusrefu  ? 'مرفوض' : ' جديد'}}</h2>
+          <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
+              <div class="row">
+                  <div class="col-12" >
+                      <h2 class="title" >بيانات صاحب الطلب</h2>
+                      <div class="row">
+                        <div class="col-12">
+                          <div class="wrapper">
+                            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                              <div class="form-group">
+                                <label  style="float: right;margin-right: 5px">رقم الهوية</label>
+                                <input type="text" placeholder="رقم الهوية" class="form-control" name="id_number" [ngModel]="userData.identity_number" [disabled]="true" />
+                              </div>
+                            </div>
+                            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                              <div class="form-group">
+                                <label for="name"  style="float: right;margin-right: 5px">الاسم</label>
+                                <input type="text" placeholder="الاسم" class="form-control" name="name" [ngModel]="userData.name" [disabled]="true" />
+                              </div>
+                              </div>
+                              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                                  <div class="form-group">
+                                    <label  style="float: right;margin-right: 5px">رقم الوظيفي</label>
+                                    <input type="text" placeholder="" class="form-control" name="functional_number" [ngModel]="userData.functional_number" [disabled]="true" />
+                                  </div>
+                                </div>
+                              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                                <div class="form-group">
+                                  <label for="phoneNum"  style="float: right;margin-right: 5px"> الهاتف </label>
+                                  <input type="number" placeholNeedder=" الهاتف" class="form-control" name="phoneNum" [ngModel]="userData.phone" [disabled]="true" />
+                                </div>  
+                              </div>
+                              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                                <div class="form-group">
+                                    <label for="email"  style="float: right;margin-right: 5px">البريد الالكتروني</label>
+                                    <input type="email" placeholder="" class="form-control" name="email" [ngModel]="userData.email" [disabled]="true" />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                   <div class="col-12">
+                     <h2 class="title" >بيانات  الطلب</h2>    
+                     <div class="row">
+                        <div class="col-12">
+                            <div class="wrapper">
+                       <div class="col-12 col-sm-12 col-md-4" >
+                          <div class="form-group">
+                           <label style="float: right; margin-right: 5px"> نوع الطلب <span class="spanReqired-w">*</span> </label>
+                            <select class="form-control" name="type_id" [(ngModel)]="formData.type_id " (input)="onRequestType($event.target.value)"  [disabled]="isAdmin" required>
+                             <option *ngFor="let type of types" [value]="type.id" >{{type.name}}</option>
+                           </select>
+                      </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4">
+                      <div class="form-group">
+                       <label style="float: right; margin-right: 5px"> سبب الطلب </label>
+                       <input type="text" class="form-control" id="request_reason" name="request_reason" placeholder=" " ngModel [(ngModel)]="formData.request_reason"  [disabled]="isAdmin || tookDes" />
+                      </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4" *ngIf="needdate">
+                        <div class="form-group">
+                          <label style="float: right; margin-right: 5px">  تاريخ المغادرة <span class="spanReqired-w">*</span></label>
+                          <input type="date" class="form-control" id="leaving_date" name="leaving_date" placeholder="  " ngModel [(ngModel)]="formData.leaving_date"  [disabled]="isAdmin || tookDes" required/>
+                       </div>
+                    </div>   
+                    <div class="col-12 col-sm-12 col-md-4" *ngIf="needdate">
+                        <div class="form-group">
+                          <label style="float: right; margin-right: 5px">  وقت المغادرة <span class="spanReqired-w">*</span></label>
+                          <input type="time" class="form-control" id="leaving_time" name="leaving_time" placeholder="  " ngModel [(ngModel)]="formData.leaving_time" [disabled]="isAdmin || tookDes" required/>
+                       </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4" *ngIf="needdate">
+                        <div class="form-group">
+                          <label style="float: right; margin-right: 5px">  تاريخ العوده <span class="spanReqired-w">*</span></label>
+                          <input type="date" class="form-control" id="return_date" name="return_date" placeholder="  " ngModel [(ngModel)]="formData.return_date"  [disabled]="isAdmin || tookDes" required/>
+                       </div>
+                    </div>  
+                        <div class="col-12 col-sm-12 col-md-4" *ngIf="needdate">
+                           <div class="form-group">
+                            <label style="float: right; margin-right: 5px">  وقت العوده <span class="spanReqired-w">*</span></label>
+                            <input type="time" class="form-control" id="return_time" name="return_time" placeholder="  " ngModel [(ngModel)]="formData.return_time" [disabled]="isAdmin || tookDes" required/>
+                          </div>
+                        </div>
+                     </div>
+                    </div> 
+                  </div>
+                </div>   
+                <div class="col-12">
+                    <h2 class="title">تفاصيل السكن</h2>
+                    <div class="row">
+                      <div class="col-12">
+                        <div class="wrapper">
+                            <div class="col-12 col-sm-12 col-md-4" >
+                                <div class="form-group">
+                                  <label style="float: right; margin-right: 5px"> اسم المجمع </label>
+                                  <select class="form-control" name="housing_complex_id" [(ngModel)]="unitInformation.housing_complex_id"  (input)="getBuildingType($event.target.value)" [disabled]="true" required>
+                                    <option *ngFor="let complex of complex_list" [value]="complex.id">{{complex.name}}</option>
+                                  </select>
+                                </div>
+                             </div>
+                             <div class="col-12 col-sm-12 col-md-4" *ngIf="isComplex ">
+                                <div class="form-group">
+                                  <label style="float: right; margin-right: 5px">نوع المبنى</label>
+                                  <select class="form-control" name="building_type_id" [(ngModel)]="unitInformation.building_type_id" (input)="getBuilding($event.target.value)" [disabled]="true" required>
+                                    <option *ngFor="let type of building_types" [value]="type.id" >{{type.name}}</option>
+                                  </select>
+                                </div>
+                              </div>
+                              <div class="col-12 col-sm-12 col-md-4" *ngIf="isBuildingType">
+                                  <div class="form-group">
+                                      <label style="float: right; margin-right: 5px">اسم المبنى </label>
+                                      <select class="form-control" id="building_id" name="building_id" [(ngModel)]="unitInformation.building_id " (input)="getUnit($event.target.value)" [disabled]="true" required>
+                                        <option *ngFor="let building of buildings" [value]="building.id" >{{building.building_name}}</option>
+                                      </select>
+                                  </div>
+                              </div>
+                              <div class="col-12 col-sm-12 col-md-4"  *ngIf="isBuilding">
+                                   <div class="form-group">
+                                       <label style="float: right; margin-right: 5px">رقم الوحدة </label>
+                                       <select class="form-control" name="unit_id" [(ngModel)]="unitInformation.unit_id" [disabled]="true"  required>
+                                         <option *ngFor="let unit of units" [value]="unit.id" >{{unit.unit_number}}</option>
+                                      </select>
+                                   </div>
+                              </div>
+                        </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-12" *ngIf="needFiles">
+                        <h2 class="title">المرفقات</h2>
+                        <div class="row">
+                          <div class="col-12">
+                          <div class="wrapper"> 
+                          <div class="col-12" *ngIf="!isAdmin || !tookDes">
+                            <button type="button" class="btn btn-default" (click)="plusImage()" style="margin:20px 0; float:right;">إضافه مرفق</button>
+                          </div>
+                          <table class="table table-bordered">
+                              <thead class="headBackground-w">
+                                <tr>
+                                  <th> إسم المرفق</th>
+                                  <th *ngIf="!isAdmin || !tookDes">رفع الملف ( بصيغه pdf )</th>
+                                  <th *ngIf="isAdmin || tookDes">عرض الملف</th>
+                                  <th *ngIf="!isAdmin || !tookDes">حذف</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr style="text-align:center;" *ngFor="let file of files; let i = index">
+                                    <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title"[ngModelOptions]="{standalone: true}" [disabled]="!isAdmin || !tookDes" required/></td>
+                                    <td style="position: relative;" *ngIf="!isAdmin || !tookDes">
+                                        <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" required/>
+                                        <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                                        <span class="fileName-w" *ngIf="file.nameFile" style="color:green"> <i class='fas fa-check'style=" float: left; padding-top: 4px; "></i>
+                                        </span>
+                                      </td>
+                                      <td *ngIf="isAdmin || tookDes"><a href="{{authSer.pathImg + file.nameFile}}" target="_blank"><i class="fas fa-download"></i></a></td>
+                                      <td *ngIf="!isAdmin || !tookDes"><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)">حذف</button></td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                            </div>
+                          </div>
+                        </div>       
+                  </div>
+              </div>
+              <div class="row" *ngIf="isAdmin">
+                <div class="col-12 ">
+                    <div class="wrapper btns-des">
+                  <div class="col-3 col-md-2">
+                    <button type="button" class="btn btn-success" [disabled]="acceptCheak" (click)="accept()">قبول</button>
+                  </div>
+                  <div class="col-3 col-md-2">
+                    <button type="button" class="btn btn-danger" [disabled]="refusedCheak" (click)="refuse()">رفض</button>
+                  </div>
+                  </div>
+                </div>  
+              </div>
+              <div class="col-12" *ngIf="refusedCheak">
+                <h2 class="title" > سبب الرفض</h2>
+                <div class="row">
+                  <div class="col-12">
+                    <div class="wrapper">
+                      <textarea name="status_description" id="status_description"  [(ngModel)]="adminForm.status_description" maxlength="250"  cols="110" rows="5"[disabled]="tookDes" ></textarea>
+                      </div>
+                    </div>
+                  </div>
+                </div>    
+            <div class=" row col-6">
+                <button type="submit" class="btn btn-success rightW"  *ngIf="!tookDes || isAdmin" [disabled]="!f.valid || disable">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">{{tookDes == true ? 'رجوع' :  'الغاء'}}</button>
+            </div>
+          </form>
+      </div>
+    </div>
+  </div>

src/app/dashboard/view_my_female_requests/view-my-female-requests-add/view-my-female-requests-add.component.ts

@@ -0,0 +1,450 @@
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+
+@Component({
+  selector: 'app-view-my-female-requests-add',
+  templateUrl: './view-my-female-requests-add.component.html',
+  styleUrls: ['./view-my-female-requests-add.component.css']
+})
+export class ViewMyFemaleRequestsAddComponent implements OnInit {
+
+  editPageId: number;
+  isEdit: boolean;
+  typePage: string;
+  checkSaveclick: boolean;
+  disable: boolean;
+  files = [];
+  uploaded: boolean = false;
+  pageId: number;
+  currentPage: number;
+  types = [];
+  needFiles: boolean = false;
+  needdate: boolean  = false;
+  require_attachments: any;
+  require_date: any;
+  whoIsComing: any;
+  isAdmin = false;
+  acceptCheak = false;
+  refusedCheak = false;
+  statusAccept : boolean;
+  statusrefu: boolean;
+  toster: string;
+  tookDes = false;
+  employeeId: string;
+  complex_list = [];
+  units = []
+  building_types= [];
+  buildings = [];
+  isBuilding: boolean = false;
+  isComplex: boolean = false;
+  isBuildingType: boolean = false;
+  constructor(
+    private dashBoardSer: DashboardService,
+    private toastr: ToastrService,
+    public authSer: AuthServiceService,
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private http: HttpClient
+  ) { }
+
+  formData = {
+    type_id:'',
+    request_reason:'',
+    leaving_date:'',
+    leaving_time:'',
+    return_date:null,
+    return_time:null,
+    files:[]
+  }
+  adminForm = {
+    request_id :'',
+    status:'',
+    status_description:'',
+  }
+  userData = {
+    name:'',
+    identity_number:'',
+    functional_number:'',
+    phone:'',
+    email:''
+  }
+
+  unitInformation = {
+    housing_complex_id: '',
+    building_type_id: '',
+    building_id:'',
+    unit_id:'',
+    bedrooms_number:'',
+    bathrooms_number:'',
+    covenants: [],
+    independent_kitchen: 'yes',
+    sittingrooms_number:''
+  }
+
+  ngOnInit() {
+     //init the values of permision boolean
+  this.authSer.showAddBtn = false;
+  this.authSer.showDeleteBtn = false;
+  this.authSer.showEditBtn = false;
+  //show / hide notification search in header
+  this.authSer.notificationLogin = true;
+  this.authSer.showSearchHeader = false;
+  this.authSer.showHeaderLogin = false;
+  this.authSer.showHeaderDashBoard = true;
+  this.authSer.showDashboardHeader = true;
+  this.authSer.internalHeader = false;
+
+  this.http.get(this.authSer.pathApi + '/housing_complexes_list').subscribe(
+    res => {
+      this.complex_list = res[('housing_complexes')];
+    }
+  );
+
+  this.route.params.subscribe(
+    (params: Params) => {
+      this.editPageId = +params['editPageId'];
+      this.whoIsComing = params['type'];
+      console.log(this.editPageId);
+      
+    }
+  );
+    if(this.whoIsComing == 'AD74'){
+      this.isAdmin = true;
+    }
+
+  console.log('current page',this.pageId)
+  this.dashBoardSer.getRequestTypesList( 1 ,10000 , 'all', 'all', 'all').subscribe(
+    res => {
+      console.log('x',res);
+      this.types = res['types'];
+   
+
+  if (this.editPageId) {
+    this.spinner.show();
+    this.isEdit = true;
+  this.typePage = 'تعديل';
+  if(this.isAdmin){
+    this.typePage = 'عرض تفاصيل الطلب'
+
+  }
+    this.dashBoardSer.getItemData(this.editPageId, 'femalesRequest' ).subscribe(
+      res => {
+        const data = res['data'].female_request;
+        const unitInfo = res['data'].unit_information
+        console.log('ssss', res);
+        this.formData.type_id = data.type_id;
+        this.formData.request_reason = data.request_reason;
+        if(this.isAdmin){
+          this.adminForm.request_id = data.id;
+        }
+        this.adminForm.status = data.status;
+        if(this.adminForm.status != 'new'){
+          this.tookDes = true;
+          if(this.adminForm.status == 'accepted'){
+            this.statusAccept = true;
+          }else if(this.adminForm.status == 'refused'){
+            this.adminForm.status_description = data.status_description;
+            this.statusAccept = false;
+            this.statusrefu = true;
+            this.refusedCheak = true;
+          }
+        }
+        this.employeeId = data.employee_id;
+        this.http.get(this.authSer.pathApi + '/get_user/' + this.employeeId).subscribe(
+          res =>{
+            console.log('=>',res);
+            this.userData.name = res['user'].name;
+            this.userData.identity_number = res['user'].identity_number;
+            this.userData.functional_number = res['user'].functional_number;
+            this.userData.phone = res['user'].phone;
+            this.userData.email = res['user'].email;
+
+          },
+          err =>{
+            console.log(err);
+            
+          }
+        )
+        
+        this.onRequestType(this.formData.type_id);
+        console.log('>>>>>' ,this.formData.type_id);
+     
+       if(this.needFiles){
+         this.files = data.files; 
+         console.log('<><>' , this.files);
+          
+       }
+        if(this.needdate){
+          this.formData.return_date = data.return_date;
+          this.formData.return_time = data.return_time;
+          this.formData.leaving_date =  data.leaving_date;
+          this.formData.leaving_time = data.leaving_time;
+        }
+
+        this.unitInformation.housing_complex_id = unitInfo.housing_complex_id;
+          console.log(this.unitInformation.housing_complex_id );
+          this.getBuildingType(this.unitInformation.housing_complex_id);
+          this.unitInformation.building_type_id = unitInfo.building_type_id;
+          this.getBuilding(this.unitInformation.building_type_id);
+          this.unitInformation.building_id = unitInfo.building_id;
+          this.unitInformation.unit_id = unitInfo.unit_id;
+
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }else {
+    this.typePage = 'اضافة';
+  }
+
+  this.spinner.hide();
+},
+err => {
+  console.log(err);
+  
+}
+
+)
+
+  }
+
+  plusImage() {
+    this.files.push({
+      title: null,
+      file: null,
+      file_type: null,
+      nameFile: null,
+    });
+    console.log('files after plus ', this.files);
+  }
+
+  onDeleteRow(index:number) {
+    this.files.splice(index , 1);
+    console.log('files after delete ',this.files);
+  }
+
+   //change file 
+   onFileChanges(event, index:number) {
+    console.log(event);
+    console.log(index);
+    this.uploaded = true;
+    this.files[index].nameFile = event[0].name.substring(0,20) + '....';
+    this.files[index].file = event[0].base64;
+    this.files[index].file_type = event[0].type.split('/')[1];
+      console.log(this.files);
+      console.log('files after change ',this.files);
+  }
+  accept(){
+    this.adminForm.status = 'accepted'
+    this.acceptCheak = true;
+    this.refusedCheak = false;
+    this.adminForm.status_description = ''
+   this.toster = 'تم قبول الطلب'
+  }
+  refuse(){
+    this.adminForm.status = 'refused'
+    this.acceptCheak = false;
+    this.refusedCheak = true;
+    this.toster = 'تم رفض الطلب'
+  }
+
+// makeItValid(){
+//   this.disable = false;
+//   }
+
+
+  
+  onRequestType(event){
+    const id = event;
+    this.needFiles = false;
+    this.needdate = false;
+    this.disable = false;
+    for (let i = 0 , n = this.types.length; i < n; i++) {
+        if(this.types[i].id  == id){
+
+          console.log('here' + id);
+          const c = this.types[i]; 
+          this.require_attachments = c.require_attachments;
+          this.require_date = c.require_date;
+          if( c.require_attachments == '1'){
+           this.needFiles = true;
+          
+          }else{
+            this.disable = false
+          }
+          if( c.require_date == '1'){
+            this.needdate = true;
+         
+           }else{
+             this.disable = false;
+           }
+
+          
+        }
+      
+    }
+  }
+
+  getBuildingType(event){
+    console.log('sdsdsd',event);
+    const id = event;
+ 
+  console.log(id);
+
+    this.http.get(this.authSer.pathApi+ '/building_types_list/' + id ).subscribe(
+      res => {
+        console.log(res);
+        this.building_types = res[('building_types')];
+        if(this.building_types.length > 0)
+         this.isComplex = true;
+         else {
+           this.isComplex = false;
+           this.isBuildingType = false;
+           this.isBuilding = false;
+        }
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+  }
+
+  getBuilding(event){
+    this.http.get(this.authSer.pathApi + '/buildings_list_by_type_id/' + event ).subscribe(
+      res => {
+        console.log('res',res);
+        this.buildings = res['buildings'];
+        if(this.buildings.length > 0){
+          this.isBuildingType = true;
+          console.log(this.buildings);
+          this.getUnit(this.unitInformation.building_id);         
+        }else{
+             this.isBuildingType = false;
+             this.isBuilding = false;
+            
+          }
+          
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+}
+
+getUnit(event){
+  this.http.get(this.authSer.pathApi + '/units_list_by_building_id/' + event ).subscribe(
+    res => {
+      console.log(res);
+      this.units = res['units'];
+      if(this.units.length > 0){
+        this.isBuilding = true;
+        console.log(this.units);
+
+      }else{
+           this.isBuilding = false;
+        }
+
+    },
+    err => {
+      console.log(err);
+      
+    }
+  );
+}
+
+  onSubmitted() {
+    console.log('HERE',this.formData);
+  
+    
+    this.disable = true;
+    
+  if(this.isAdmin){
+  
+    console.log(this.adminForm);
+    this.dashBoardSer.addItem( this.adminForm , 'addFemaleRequestAdmin').subscribe(
+      (responce) => {
+        console.log('ADD',responce);
+        this.toastr.success(this.toster);
+        this.checkSaveclick = false;
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.checkSaveclick = false;
+        this.disable = false;
+
+        this.toastr.error('خطأ في الخادم ، حاول لاحقا');
+      }
+    );
+    
+  }else{
+    if(this.files.length > 0){
+      this.formData.files = this.files
+    }
+    if(this.require_attachments == '1'){
+      if(this.formData.files.length <= 0){
+        this.toastr.warning('يجب اضافة مرفق')
+        this.disable = false;
+
+        return 0;
+      }
+    }
+    if(this.require_date == '1'){
+      if(this.formData.return_date == null || this.formData.return_time == null){
+       this.toastr.warning('يجب اضافة وقت و تاريخ العوده')
+        this.disable = false;
+
+        return 0;
+      }
+      if(this.formData.leaving_date >= this.formData.return_date){
+        this.toastr.warning('تاريخ العوده يجب ان يكون بعد تاريخ المغادرة');
+        this.disable = false;
+        return 0;
+      }
+    }
+    if(this.editPageId) {
+      this.dashBoardSer.editItem(this.editPageId, this.formData, 'editFemaleRequest').subscribe(
+        (responce) => {
+          this.disable = true;
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          this.disable = false;
+          console.log(error);
+          this.toastr.error('خطأ في الخادم ، رجاء المحارله لاحقا');
+        }
+      )
+    } else {
+    this.dashBoardSer.addItem( this.formData , 'addFemaleRequest').subscribe(
+      (responce) => {
+        console.log('ADD',responce);
+        this.toastr.success('تم الإضافه بنجاح');
+        this.checkSaveclick = false;
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.checkSaveclick = false;
+        this.disable = false;
+
+        this.toastr.error('خطأ في الخادم ، حاول لاحقا');
+      }
+    );
+    }
+  }
+  }
+}

src/app/dashboard/view_my_female_requests/view-my-female-requests-list/view-my-female-requests-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */

src/app/dashboard/view_my_female_requests/view-my-female-requests-list/view-my-female-requests-list.component.html

@@ -0,0 +1,95 @@
+<div class="container">
+
+    <div class="row">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه السكن  </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px">عرض الطلبات </li>
+        </ul>
+      </div>
+    </div>
+  
+    <div class="containerContent-w">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+          <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
+        </div>
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <div class="form-group">
+            <input type="text" placeholder="البحث (اسم المبني او رمز المبنى)" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+            <hr>
+          </div>
+        </div>
+      </div>
+  
+      <div class="row">
+          <div class="col-6 col-sm-12 col-md-12 col-lg-6">
+            <div class="form-group">
+              <span class="spanSelect-w" style="margin-right:10px;">
+                <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                  <option value="5">5</option>
+                  <option value="10">10</option>
+                  <option value="15">15</option>
+                  <option value="20">20</option>
+                </select>
+                من العناصر يتم عرضها
+              </span>
+            </div>
+          </div>
+          <div class="col-6 col-sm-12 col-md-12 col-lg-6">
+              <div class="form-group">
+                <span class="spanSelect-w" style="margin-right:10px;">
+                  <select [ngModel]="status" class="form-control selectButton-w" (input)="onGetStatus($event.target.value)">
+                    <option value="all">الكل</option>
+                    <option value="new">جديد</option>
+                    <option value="accepted">مقبول</option>
+                    <option value="refused">مرفوض</option>
+                  </select>
+                 الحالة
+                </span>
+              </div>
+            </div>
+         
+      </div>
+  
+      <table class="table table-bordered" *ngIf="this.count != 0">
+        <thead class="headBackground-w">
+          <tr>
+            <th>
+              <div class="custom-control custom-checkbox">
+                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+              </div>
+            </th>
+            <th> رقم الطلب</th>
+            <th *ngIf="accept">نوع الطلب</th>
+            <th>الحاله</th>
+            
+            <th *ngIf="authSer.showEditBtn">تعديل</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+           <td>
+              <div class="custom-control custom-checkbox centerIneerItem">
+                <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+              <!-- <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label> -->
+              </div>
+            </td>
+            <td>{{data.id}}</td>
+            <td>{{data.type_name}}</td>
+            <td *ngIf="accept">{{data.status == 'new' ? 'جديد' : data.status == 'accepted' ? 'مقبول' : data.status == 'refused' ? 'مرفوض' : 'not found'}}</td>
+            
+          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="col-12" *ngIf="this.count == 0" >
+      <!-- taaaaaaaaaaable -->
+      <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+  
+    </div>
+    <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
+    </div>
+  </div>
+  

src/app/dashboard/view_my_female_requests/view-my-female-requests-list/view-my-female-requests-list.component.ts

@@ -0,0 +1,375 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-view-my-female-requests-list',
+  templateUrl: './view-my-female-requests-list.component.html',
+  styleUrls: ['./view-my-female-requests-list.component.css']
+})
+export class ViewMyFemaleRequestsListComponent implements OnInit {
+
+  dataList = [];
+  pages= [];
+  pageId: number;
+  Ids = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  absorpationListIds = [];
+  dataListIds = [];
+  status = 'all'
+  filtterStatus: any;
+  accept : boolean = true;
+  towhom: any;
+  codeForEdit:string;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    public authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService,
+    private http: HttpClient
+  ) { }
+
+  ngOnInit() {
+      //init the values of permision boolean
+  this.authSer.showAddBtn = false;
+  this.authSer.showDeleteBtn = false;
+  this.authSer.showEditBtn = false;
+  //show / hide notification search in header
+  this.authSer.notificationLogin = true;
+  this.authSer.showSearchHeader = false;
+  this.authSer.showHeaderLogin = false;
+  this.authSer.showHeaderDashBoard = true;
+  this.authSer.showDashboardHeader = true;
+  this.authSer.internalHeader = false;
+  this.authSer.internalHeader = false;
+
+
+
+  this.route.params.subscribe(
+    (parmas: Params) => {
+      this.pageId =  +parmas['listPageId'];
+      localStorage.setItem('pageIdActive', parmas['listPageId']);
+      console.log('this is the a page id >>',this.pageId);
+    }
+  );
+
+  
+    
+  if(this.pageId == 73){
+    this.route.parent.params.subscribe(
+    (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.towhom = this.userLoginId;
+        this.codeForEdit = 'EP73';
+
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 73){
+                if(this.pages[i]['permissions'][0].name == 'view_my_female_requests') {
+                  this.authSer.showAddBtn = true;
+                  this.authSer.showEditBtn = true;
+                  this.authSer.showDeleteBtn = true;
+                } else {
+                  console.log('no permissions');
+                }
+              } else {
+                console.log('no events');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+    }if(this.pageId == 74){
+      this.route.parent.params.subscribe(
+        (params:Params) => {
+            this.userLoginId = params['userID'];
+            this.serviceId = params['serviceID'];
+            this.towhom = 'all'
+            this.codeForEdit = 'AD74';
+
+            this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.pages = responce['pages'];
+                for(let i = 0; i< this.pages.length; i++) {
+                  if(this.pages[i].id == 74){
+                    if(this.pages[i]['permissions'][0].name == 'view_all_female_requests') {
+                      this.authSer.showAddBtn = false;
+                      this.authSer.showEditBtn = true;
+                      this.authSer.showDeleteBtn = false;
+                    } else {
+                      console.log('no permissions');
+                    }
+                  } else {
+                    console.log('no events');
+                  }
+                }
+                this.spinner.hide();
+              },
+              (error) => {console.log(error)}
+            );
+          }
+        );
+    }
+
+    console.log('current page',this.pageId)
+    this.dashboardSer.getViewListOfRequests( this.currentPage ,this.dataTableNumber, this.towhom , this.status).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['requests'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+        this.spinner.hide()
+      },
+      err => {
+        console.log(err);
+        this.spinner.hide()
+      }
+      
+    );
+
+  }
+  
+      //make all checkbox of user checked 
+      selectAll() {
+        for (var i = 0; i < this.dataList.length; i++) {
+          this.dataList[i].selected = this.selectedAll;
+        }
+      }
+    
+      checkIfAllSelected() {
+        this.selectedAll = this.dataList.every(function(item:any) {
+          return item.selected == true;
+        });
+      }
+
+
+    filtterFunc(data) {
+      this.dataList =[];
+      this.absorpationListIds = [];
+      console.log(data.target.value);
+      const dataSearch = data.target.value;     
+      this.currentPage = 1;
+      console.log('search curent page', this.currentPage);
+      console.log('search page id', this.pageId);
+      this.dashboardSer.getViewSearchOnRequests(dataSearch, this.currentPage ,this.dataTableNumber, this.towhom , this.status).subscribe(
+        res => {
+          console.log(res);
+          this.dataList = res['requests'];
+          console.log('hey',this.dataList)
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+          console.log('filtter count', this.count);
+          console.log('filtter perPagePAgenation', this.perPagePagenation);
+        this.spinner.hide()
+
+        },
+        err => {
+          console.log(err);
+        }
+      );
+    }
+
+
+    onPageChange(pagenationNumber) {
+      this.spinner.show();
+      this.currentPage = pagenationNumber;
+      this.absorpationListIds = [];
+      console.log(pagenationNumber);
+      console.log(this.pageId);
+      this.dashboardSer.getViewListOfRequests( this.currentPage ,this.dataTableNumber, this.towhom , this.status).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['requests'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+          this.spinner.hide()
+        },
+        err => {
+          console.log(err);
+          this.spinner.hide()
+        }
+        
+      );
+
+    }
+
+    onGetValue(event) {
+      this.spinner.show();
+      this.absorpationListIds = [];
+      this.dataTableNumber = event.target.value;
+      this.dashboardSer.getViewListOfRequests( this.currentPage ,this.dataTableNumber, this.towhom , this.status).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['requests'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+          this.spinner.hide()
+        },
+        err => {
+          console.log(err);
+          this.spinner.hide()
+        }
+        
+      );
+
+    }
+    onGetValueFiltter(event) {
+      console.log(event.target.value)
+      this.spinner.show();
+      this.dataList = [];
+      const typeId = event.target.value;
+      this.filtterStatus = event.target.value;
+      console.log(this.filtterStatus);
+      this.dashboardSer.getViewListOfRequests( this.currentPage ,this.dataTableNumber, this.towhom , this.status).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['requests'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+          this.spinner.hide()
+        },
+        err => {
+          console.log(err);
+          this.spinner.hide()
+        }
+        
+      );
+
+    }
+
+    onDelete() {
+
+      this.dataListIds = [];
+      for(let i = 0; i < this.dataList.length; i++) {
+        if(this.dataList[i].selected == true) {
+          this.dataListIds.push(this.dataList[i].id);
+        }
+      }
+    
+    
+      console.log(this.dataListIds);
+    
+      if(this.dataListIds.length > 0) {
+        const dialogRef = this.modal.alert()
+        .size('sm')
+        .showClose(true)
+        .title('تأكيد الحذف')
+        .body(`
+            <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+            `)
+        .open();
+    
+          dialogRef.result
+          .then( result =>
+            this.dashboardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم الحذف');
+                this.spinner.show();
+                this.dataList = [];
+                 //get list data
+                 this.dashboardSer.getViewListOfRequests( this.currentPage ,this.dataTableNumber, this.towhom , this.status).subscribe(
+                  res => {
+                    console.log('x',res);
+                    this.dataList = res['requests'];
+                    this.count = res['count'];
+                    this.perPagePagenation = res['per_page'];
+                    this.spinner.hide()
+                  },
+                  err => {
+                    console.log(err);
+                    this.spinner.hide()
+                  }
+                  
+                );         
+              },
+              (error) => {
+                console.log(error.error.error);
+                this.spinner.hide();
+                if (error.error.error == 'Requests already uses this type can not delete it') {
+                  this.toastr.warning('ليس هناك صلاحية لمسح هذا الطلب')
+                }
+                },
+              )
+          );
+      } else {
+        this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+      }
+    };
+    onGetStatus(event){
+      this.spinner.show();
+      this.status = event;
+      this.accept = true;
+      if(this.status != 'all'){
+        this.accept = false;
+      }
+
+      this.dashboardSer.getViewListOfRequests( this.currentPage ,this.dataTableNumber, this.towhom , this.status).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['requests'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+          this.spinner.hide()
+        },
+        err => {
+          console.log(err);
+          this.spinner.hide()
+        }
+        
+      );         
+    
+    }
+    
+    onAdd() {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'viewMyFemaleRequestsAdd']);
+    }
+    
+    onEdit(editId: number) {
+      this.route.params.subscribe(
+        (parmas: Params) => {
+          this.pageId =  +parmas['listPageId'];
+        }
+       
+
+      );
+      if(this.pageId == 74){
+        this.codeForEdit = 'AD74';
+
+      }else if(this.pageId == 73){
+          this.codeForEdit = 'EP73';
+      }
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'viewMyFemaleRequests/edit/' + editId + '/' + this.codeForEdit]);
+      console.log('service/' + this.userLoginId + '/' + this.serviceId + '/' + 'femalesRequestTypes/edit/' + editId);
+      
+    }
+
+
+
+}

src/app/dashboard/view_requests_for_tenant/view-requests-for-tenant-details/view-requests-for-tenant-details.component.ts

@@ -54,6 +54,10 @@ export class ViewRequestsForTenantDetailsComponent implements OnInit {
     unit_id: '',
     files: []
   }
+  onSending = {
+    request_id:'',
+    status:'confirmed',
+  }
   userData = {
     name:'',
     identity_number:'',
@@ -263,7 +267,23 @@ getUnit(event){
 
 
 onSubmitted() {
-  console.log('submitted !');
+  this.onSending.request_id = this.formData.request_id; 
+  this.notvailed = true;
+  console.log(this.onSending);
+  this.http.post(this.authSer.pathApi + '/employee_handle_housing_request' , this.onSending).subscribe(
+    res => {
+      console.log(res);
+      this.toastr.success('تم التأكيد');
+      this.location.back()
+      
+    },
+    err => {
+      console.log(err);
+      this.toastr.error('يرجى المحاولة لاحقا')
+      
+    }
+  )
+  
 }
 
 }

src/app/servicesItems/services.component.ts

@@ -289,10 +289,18 @@ getDataService(dataService){
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/viewRequestsForAdminstration/' + this.pages[0].id]);            
            }else if (this.pages[0].id == 71){
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/viewRequestsForTenant/' + this.pages[0].id]);            
+           }else if (this.pages[0].id == 72){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/femalesRequestTypesList/' + this.pages[0].id]);            
+           }else if (this.pages[0].id == 73){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/viewMyFemaleRequestsList/' + this.pages[0].id]);            
+           }else if (this.pages[0].id == 74){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/viewMyFemaleRequestsList/' + this.pages[0].id]);            
+           }else if (this.pages[0].id == 75){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/livingSystemReports/' + this.pages[0].id]);            
            }
            
            
-         },//viewRequestsForTenant
+         },//LivingSystemReports
          err => {
            console.log(err);
            

src/app/shared/dashboard.service.ts

@@ -33,7 +33,16 @@ export class DashboardService {
       console.log(this.authService.pathApi + '/housing_requests_list/'+ currentPage +'/' + dataTableNumber +'/' +'/' +to_whom + '/' + status);
       return this.http.get(this.authService.pathApi + '/housing_requests_list/'+ currentPage +'/' + dataTableNumber  +'/' +to_whom + '/' + status);
     }
+    getRequestTypesList(currentPage: number, dataTableNumber: number, require_attachments: any , require_approval: any, require_date:any){
+      return this.http.get(this.authService.pathApi + '/request_types_list/'+ currentPage +'/' + dataTableNumber  +'/' +require_attachments + '/' + require_approval + '/' + require_date);
 
+    }
+    getViewListOfRequests(currentPage: number, dataTableNumber: number, userId: number , status: any){
+      this.spinner.show();
+
+      return this.http.get(this.authService.pathApi + '/female_requests_list/' + currentPage + '/' + dataTableNumber + '/' + userId + '/' + status)
+      
+    }
     getListData(pageId: number, currentPage: number, dataTableNumber: number){
       this.spinner.show();
         console.log('services ', currentPage);
@@ -63,6 +72,16 @@ export class DashboardService {
     getDataUSerSearchBarhousing(data, currentPage: number, dataTableNumber: number,to_whom: any, status: any){
       return this.http.get(this.authService.pathApi+ '/housing_requests_list/' + currentPage + '/' + dataTableNumber + '/' + to_whom + '/' + status + '/' + data);
     }
+    getRequestTypesSearch(data, currentPage: number, dataTableNumber: number, require_attachments: any , require_approval: any, require_date:any ){
+      return this.http.get(this.authService.pathApi + '/request_types_list/'+ currentPage +'/' + dataTableNumber  +'/' +require_attachments + '/' + require_approval + '/' + require_date + '/' + data);
+
+    }
+    getViewSearchOnRequests( data ,currentPage: number, dataTableNumber: number, userId: number , status: any){
+      this.spinner.show();
+
+      return this.http.get(this.authService.pathApi + '/female_requests_list/' + currentPage + '/' + dataTableNumber + '/' + userId + '/' + status + '/' + data)
+      
+    }
     //if the page has filtter 
     searchFiltterPagenation(pageId: number, currentPage: number, dataTableNumber: number, typeFiltter: string){
       console.log(this.authService.pathApi + '/page_list' + '/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/' + typeFiltter)
@@ -163,10 +182,16 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/add_unit_information' , data);
       }else if(addType == 'linkUnitToCovenants') {
         return this.http.post(this.authService.pathApi + '/assign_unit_covenant' , data);
+      }else if(addType == 'femalesRequestTypesAdd') {
+        return this.http.post(this.authService.pathApi + '/add_request_type' , data);
+      }else if(addType == 'addFemaleRequest') {
+        return this.http.post(this.authService.pathApi + '/add_female_request' , data);
+      }else if(addType == 'addFemaleRequestAdmin') {
+        return this.http.post(this.authService.pathApi + '/handle_female_request' , data);
       }
     }
 
-    //edit event  
+    //edit event  add_female_request
     editItem(editId,dataEdit,editPageName){
       const editData = dataEdit;
       console.log(editPageName);
@@ -270,10 +295,14 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/edit_unit_information', editData);
       }else if(editPageName == 'linkUnitToCovenants') {
         return this.http.post(this.authService.pathApi + '/assign_unit_covenant', editData);
+      }else if(editPageName == 'femalesRequestTypes') {
+        return this.http.post(this.authService.pathApi + '/edit_request_type', editData);
+      }else if(editPageName == 'editFemaleRequest') {
+        return this.http.post(this.authService.pathApi + '/edit_female_request', editData);
       }
     }
     
-    //get item data 
+    //get item data  add_request_type 
     getItemData(pageId: number, typeGetData:string) {
       console.log('wwwwwwwwwwwwwwwwwwwwwwwwwwww', pageId);
       if(typeGetData == 'advertisiment') {
@@ -362,9 +391,13 @@ export class DashboardService {
         return this.http.get(this.authService.pathApi + '/get_unit_covenant/' + pageId);
       }else if(typeGetData == 'viewRequestsForAdminstrationDetails') {
         return this.http.get(this.authService.pathApi + '/get_housing_request/' + pageId);
+      }else if(typeGetData == 'femalesRequestTypes') {
+        return this.http.get(this.authService.pathApi + '/get_request_type/' + pageId);
+      }else if(typeGetData == 'femalesRequest') {
+        return this.http.get(this.authService.pathApi + '/get_female_request/' + pageId);
       }
   }
-    //delete event
+    //delete event get_request_type
     deleteItem(dataIds, pageId) {
 
       console.log(dataIds);
@@ -458,6 +491,10 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/delete_unit_information', {'unit_information_ids' : dataIds});
       }else if(pageId == 68) {
         return this.http.post(this.authService.pathApi + '/delete_unit_covenant', {'unit_covenant_ids' : dataIds});
+      }else if(pageId == 72) {
+        return this.http.post(this.authService.pathApi + '/delete_request_type', {'types_ids' : dataIds});
+      }else if(pageId == 73) {
+        return this.http.post(this.authService.pathApi + '/delete_female_request', {'requests_ids' : dataIds});
       }