attendance

src/app/landing-page/get-start/get-start.component.html

@@ -1 +1,9 @@
-<app-carousel [customOptions]="customOptions" [slidesStore]="[]"></app-carousel>
+<app-carousel
+  [customOptions]="customOptions"
+  [slidesStore]="[
+    {
+      title: 'Work more Structured <br />and Organized',
+     
+    }
+  ]"
+></app-carousel>

src/app/modules/attendance/attendance-company/attendance-company.component.html

@@ -0,0 +1,86 @@
+<section class="attendance-company">
+  <main fxLayout="row" fxLayoutAlign="start center" class="gap-20">
+    <h1 fxLayout="row" fxLayoutAlign="start center" class="gap-10 bold">
+      <img src="assets/images/attendance-icon.svg" alt="" title="" />
+      <span>Attendance</span>
+    </h1>
+    <p class="bold">Saturday 15/10/2023</p>
+  </main>
+  <div class="attendance-company__search">
+    <!-- <img
+      src="../../../../assets/images/avatar.png"
+      alt=""
+      title=""
+    /> -->
+    <input type="search" placeholder="Search..." />
+  </div>
+
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+    <!--- Note that these columns can be defined in any order.
+        The actual rendered columns are set as a property on the row definition" -->
+
+    <ng-container matColumnDef="user">
+      <th mat-header-cell *matHeaderCellDef>User</th>
+      <td mat-cell *matCellDef="let element">
+        <div fxLayout="row" fxLayoutAlign="start center" class="gap-10 ptb-10">
+          <img [src]="element.user.img" alt="" title="" />
+          <div>
+            <span class="span bold">{{ element.user.name }}</span>
+            <span class="span gray">{{ element.user.position }}</span>
+            <span class="span gray">{{ element.user.email }}</span>
+          </div>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="department">
+      <th mat-header-cell *matHeaderCellDef>Department</th>
+      <td mat-cell *matCellDef="let element">{{ element.department }}</td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="date">
+      <th mat-header-cell *matHeaderCellDef>Date</th>
+      <td mat-cell *matCellDef="let element">{{ element.date }}</td>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="checkin">
+      <th mat-header-cell *matHeaderCellDef>Check In</th>
+      <td mat-cell *matCellDef="let element">{{ element.checkin }}</td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="checkout">
+      <th mat-header-cell *matHeaderCellDef>Check Out</th>
+      <td mat-cell *matCellDef="let element">{{ element.checkout }}</td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef>Status</th>
+      <td mat-cell *matCellDef="let element">
+        <span
+          [ngClass]="{
+            online: element.status === 'Online',
+            offline: element.status === 'Offline'
+          }"
+          >{{ element.status }}</span
+        >
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let element">
+        <button class="details" [routerLink]="['./attendance-details']">
+          View Details
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+  <app-pagenation></app-pagenation>
+</section>

src/app/modules/attendance/attendance-company/attendance-company.component.scss

@@ -0,0 +1,55 @@
+.mat-mdc-table {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.mat-mdc-header-row {
+  color: #2e368f;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.mat-mdc-row {
+  color: #28abe3;
+}
+
+.mat-mdc-cell {
+  border-bottom: 1px solid #fff;
+}
+
+.span {
+  display: block;
+}
+
+.gray {
+  color: #7b8793;
+  font-size: 13px;
+}
+
+.online {
+  background: #0fbb3726 0% 0% no-repeat padding-box;
+  border-radius: 10px;
+  padding: 10px 20px;
+  color: #0fbb37;
+}
+
+.offline {
+  background: #e5c9d3 0% 0% no-repeat padding-box;
+  border-radius: 10px;
+  color: #e73232;
+  padding: 10px 20px;
+}
+
+.details {
+  background: #2f2c83 0% 0% no-repeat padding-box;
+  border-radius: 10px;
+  padding: 10px 20px;
+  color: #fff;
+  border: 1px solid #fff;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.5s;
+  &:hover {
+    background-color: #28abe3;
+  }
+}

src/app/modules/attendance/attendance-company/attendance-company.component.spec.ts

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

src/app/modules/attendance/attendance-company/attendance-company.component.ts

@@ -0,0 +1,83 @@
+import { Component } from '@angular/core';
+
+export interface PeriodicElement {
+  user: any;
+  department: string;
+  date: string;
+  checkin: string;
+  checkout: string;
+  status: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    department: 'Development',
+    date: '1/10/2023',
+    checkin: 'Day Off',
+    checkout: 'Day Off',
+    status: 'Online',
+  },
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    department: 'Marketing',
+    date: '2/10/2023',
+    checkin: '9:35 AM',
+    checkout: '7:30 PM',
+    status: 'Offline',
+  },
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    department: 'Design',
+    date: '2/10/2023',
+    checkin: '9:35 AM',
+    checkout: '7:30 PM',
+    status: 'Offline',
+  },
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    department: 'Development',
+    date: '2/10/2023',
+    checkin: '9:35 AM',
+    checkout: '7:30 PM',
+    status: 'Online',
+  },
+];
+
+@Component({
+  selector: 'app-attendance-company',
+  templateUrl: './attendance-company.component.html',
+  styleUrls: ['./attendance-company.component.scss'],
+})
+export class AttendanceCompanyComponent {
+  displayedColumns: string[] = [
+    'user',
+    'department',
+    'date',
+    'checkin',
+    'checkout',
+    'status',
+    'actions',
+  ];
+  dataSource = ELEMENT_DATA;
+}

src/app/modules/attendance/attendance-routing.module.ts

@@ -2,12 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AttendanceListComponent } from './attendance-list/attendance-list.component';
 import { AttendanceComponent } from './attendance.component';
+import { AttendanceCompanyComponent } from './attendance-company/attendance-company.component';
 
 const routes: Routes = [
   {
     path: '',
     component: AttendanceComponent,
-    children: [{ path: '', component: AttendanceListComponent }],
+    children: [
+      { path: 'attendance-details', component: AttendanceListComponent },
+      { path: '', component: AttendanceCompanyComponent },
+    ],
   },
 ];
 

src/app/modules/attendance/attendance.component.scss

@@ -29,5 +29,44 @@
         }
       }
     }
+
+    .attendance-company {
+      background-color: $off-white;
+      box-shadow: -2px 6px 9px #2f2c8333;
+      padding: 20px;
+      margin: 20px 0;
+      border-radius: 18px;
+      main {
+        h1 {
+          color: $main-color;
+        }
+        p {
+          background-color: #2e368f0c;
+          border-radius: 10px;
+          padding: 10px 20px;
+          color: $main-color;
+          font-size: 14px;
+        }
+      }
+      &__search {
+        margin: 40px 0;
+        position: relative;
+        img {
+          position: absolute;
+          top: 10px;
+        }
+        input {
+          padding: 10px 15px;
+          border: 1px solid $white-color;
+          background-color: $white-color;
+          box-shadow: 0px 4px 12px #0000001a;
+          border-radius: 19px;
+          background-color: $white-color;
+          outline: none;
+          font-size: 15px;
+          width: 40%;
+        }
+      }
+    }
   }
 }

src/app/modules/attendance/attendance.module.ts

@@ -5,9 +5,10 @@ import { AttendanceRoutingModule } from './attendance-routing.module';
 import { AttendanceComponent } from './attendance.component';
 import { AttendanceListComponent } from './attendance-list/attendance-list.component';
 import { SharedModule } from '@shared/shared.module';
+import { AttendanceCompanyComponent } from './attendance-company/attendance-company.component';
 
 @NgModule({
-  declarations: [AttendanceComponent, AttendanceListComponent],
+  declarations: [AttendanceComponent, AttendanceListComponent, AttendanceCompanyComponent],
   imports: [CommonModule, AttendanceRoutingModule, SharedModule],
 })
 export class AttendanceModule {}

src/app/modules/orders/order-list/order-list.component.scss

@@ -29,5 +29,5 @@
   height: 100%;
   padding: 7px 0;
   align-items: center;
-  justify-content: end;
+  justify-content: flex-end;
 }

src/app/shared/components/carousel/carousel.component.html

@@ -1,6 +1,6 @@
 <owl-carousel-o [options]="customOptions">
   <ng-container>
-    <ng-template carouselSlide>
+    <ng-template carouselSlide *ngFor="let item of slidesStore">
       <section
         class="get-start"
         fxLayout="row wrap"
@@ -11,7 +11,7 @@
           fxFlex.lt-md="100"
           fxFlex.gt-sm="50"
         >
-          <h1>Work more Structured <br />and Organized</h1>
+          <h1 [innerHTML]="item.title"></h1>
           <p>
             A comprehensive professional technology platform that follows the
             superior business model by offering multiple human capital

src/app/shared/components/carousel/carousel.component.ts

@@ -9,4 +9,8 @@ import { OwlOptions } from 'ngx-owl-carousel-o';
 export class CarouselComponent {
   @Input() customOptions!: OwlOptions;
   @Input() slidesStore: any[] = [];
+
+  constructor() {
+    console.log(this.customOptions);
+  }
 }

src/app/shared/components/pagenation/pagenation.component.html

@@ -0,0 +1,7 @@
+<mat-paginator
+  [length]="100"
+  [pageSize]="10"
+  [pageSizeOptions]="[5, 10, 25, 100]"
+  aria-label="Select page"
+>
+</mat-paginator>

src/app/shared/components/pagenation/pagenation.component.scss

@@ -0,0 +1 @@
+

src/app/shared/components/pagenation/pagenation.component.spec.ts

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

src/app/shared/components/pagenation/pagenation.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-pagenation',
+  templateUrl: './pagenation.component.html',
+  styleUrls: ['./pagenation.component.scss'],
+})
+export class PagenationComponent {}

src/app/shared/shared.module.ts

@@ -29,6 +29,8 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatTableModule } from '@angular/material/table';
 import { CarouselModule } from 'ngx-owl-carousel-o';
 import { CarouselComponent } from './components/carousel/carousel.component';
+import { PagenationComponent } from './components/pagenation/pagenation.component';
+import { MatPaginatorModule } from '@angular/material/paginator';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -54,6 +56,7 @@ const MATERIAL_MODULES = [
   MatTabsModule,
   MatTableModule,
   CarouselModule,
+  MatPaginatorModule,
 ];
 
 const COMPONENTS = [
@@ -61,6 +64,7 @@ const COMPONENTS = [
   WarningComponent,
   FileUploadComponent,
   CarouselComponent,
+  PagenationComponent,
 ];
 const MODULES = [TranslateModule];
 @NgModule({

src/styles.scss

@@ -260,24 +260,32 @@ input.mat-input-element {
   justify-content: flex-end;
 }
 
-.owl-prev {
-  position: absolute;
-  left: 2px;
-  top: 40%;
-  background: transparent !important;
-  border: 1px solid #28abe3 !important;
-  border-radius: 50% !important;
-  color: #28abe3 !important;
-  padding: 7px 10px !important;
-}
-
-.owl-next {
-  position: absolute;
-  right: 2px;
-  top: 40%;
-  background: transparent !important;
-  border: 1px solid #28abe3 !important;
-  border-radius: 50% !important;
-  color: #28abe3 !important;
-  padding: 7px 10px !important;
+.ptb-10 {
+  padding: 10px 0;
+}
+
+// .owl-prev {
+//   position: absolute;
+//   left: 2px;
+//   top: 40%;
+//   background: transparent !important;
+//   border: 1px solid #28abe3 !important;
+//   border-radius: 50% !important;
+//   color: #28abe3 !important;
+//   padding: 7px 10px !important;
+// }
+
+// .owl-next {
+//   position: absolute;
+//   right: 2px;
+//   top: 40%;
+//   background: transparent !important;
+//   border: 1px solid #28abe3 !important;
+//   border-radius: 50% !important;
+//   color: #28abe3 !important;
+//   padding: 7px 10px !important;
+// }
+
+.mat-mdc-paginator-container {
+  background-color: #e4e4ef !important;
 }