attendance list

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

@@ -0,0 +1,57 @@
+<section class="attendance-list">
+  <main>
+    <h1 class="bold" fxLayout="row wrap" fxLayoutAlign="start center">
+      <img src="assets/images/attendance-icon.svg" alt="" title="" />
+      <span>Attendance</span>
+    </h1>
+    <div
+      class="attendance-list__user"
+      fxLayout="row"
+      fxLayoutAlign="start center"
+    >
+      <img src="assets/images/attendance-avatar.png" alt="" title="" />
+      <div>
+        <p>Mai Ghoneim</p>
+        <span>Senior UI/UX Designer</span>
+        <span>User@gmail.com</span>
+      </div>
+    </div>
+  </main>
+  <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" -->
+
+    <!-- Position Column -->
+    <ng-container matColumnDef="day">
+      <th mat-header-cell *matHeaderCellDef>Day</th>
+      <td mat-cell *matCellDef="let element">{{ element.day }}</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="login_time">
+      <th mat-header-cell *matHeaderCellDef>Login Time</th>
+      <td mat-cell *matCellDef="let element">{{ element.login_time }}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+</section>

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

@@ -0,0 +1,18 @@
+.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;
+}

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

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

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

@@ -0,0 +1,77 @@
+import { Component } from '@angular/core';
+
+export interface PeriodicElement {
+  day: string;
+  date: string;
+  checkin: string;
+  checkout: string;
+  login_time: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {
+    day: 'Saturday',
+    date: '1/10/2023',
+    checkin: 'Day Off',
+    checkout: 'Day Off',
+    login_time: 'Day Off',
+  },
+  {
+    day: 'Monday',
+    date: '2/10/2023',
+    checkin: '9:35 AM',
+    checkout: '7:30 PM',
+    login_time: '9:30 hrs',
+  },
+  {
+    day: 'Monday',
+    date: '2/10/2023',
+    checkin: '9:35 AM',
+    checkout: '7:30 PM',
+    login_time: '9:30 hrs',
+  },
+  {
+    day: 'Monday',
+    date: '2/10/2023',
+    checkin: '9:35 AM',
+    checkout: '7:30 PM',
+    login_time: '9:30 hrs',
+  },
+  {
+    day: 'Saturday',
+    date: '1/10/2023',
+    checkin: 'Day Off',
+    checkout: 'Day Off',
+    login_time: 'Day Off',
+  },
+  {
+    day: 'Monday',
+    date: '2/10/2023',
+    checkin: '9:35 AM',
+    checkout: '7:30 PM',
+    login_time: '9:30 hrs',
+  },
+  {
+    day: 'Saturday',
+    date: '1/10/2023',
+    checkin: 'Day Off',
+    checkout: 'Day Off',
+    login_time: 'Day Off',
+  },
+];
+
+@Component({
+  selector: 'app-attendance-list',
+  templateUrl: './attendance-list.component.html',
+  styleUrls: ['./attendance-list.component.scss'],
+})
+export class AttendanceListComponent {
+  displayedColumns: string[] = [
+    'day',
+    'date',
+    'checkin',
+    'checkout',
+    'login_time',
+  ];
+  dataSource = ELEMENT_DATA;
+}

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

@@ -1,10 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AttendanceListComponent } from './attendance-list/attendance-list.component';
+import { AttendanceComponent } from './attendance.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    component: AttendanceComponent,
+    children: [{ path: '', component: AttendanceListComponent }],
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AttendanceRoutingModule { }
+export class AttendanceRoutingModule {}

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

@@ -1 +1 @@
-<p>attendance works!</p>
+<router-outlet></router-outlet>

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

@@ -0,0 +1,33 @@
+@mixin attendance-theme() {
+  app-attendance {
+    .attendance-list {
+      background-color: $off-white;
+      box-shadow: -2px 6px 9px #2f2c8333;
+      padding: 20px;
+      margin: 20px 0;
+      border-radius: 18px;
+      h1 {
+        color: $main-color;
+        font-size: 18px;
+        span {
+          margin: 0 10px;
+        }
+      }
+      &__user {
+        padding: 20px 0;
+        div {
+          p {
+            color: $light-blue;
+            font-size: 20px;
+          }
+          span {
+            display: block;
+            font-size: 14px;
+            color: #7b8793;
+            margin: 5px 0;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -3,15 +3,11 @@ import { CommonModule } from '@angular/common';
 
 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';
 
 @NgModule({
-  declarations: [
-    AttendanceComponent
-  ],
-  imports: [
-    CommonModule,
-    AttendanceRoutingModule
-  ]
+  declarations: [AttendanceComponent, AttendanceListComponent],
+  imports: [CommonModule, AttendanceRoutingModule, SharedModule],
 })
-export class AttendanceModule { }
+export class AttendanceModule {}

src/app/modules/components/side-nav/side-nav.component.ts

@@ -68,12 +68,12 @@ export class SideNavComponent {
     //   img: '../../../../assets/images/human-resource.svg',
     //   link: 'human-resource',
     // },
-    // {
-    //   index: 10,
-    //   name: 'Attendance',
-    //   img: '../../../../assets/images/attendance.svg',
-    //   link: 'attendance',
-    // },
+    {
+      index: 10,
+      name: 'Attendance',
+      img: '../../../../assets/images/attendance.svg',
+      link: 'attendance',
+    },
     {
       index: 11,
       name: 'Orders',

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

@@ -40,6 +40,13 @@ const routes: Routes = [
           import('./orders/orders.module').then((m) => m.OrdersModule),
       },
       {
+        path: 'attendance',
+        loadChildren: () =>
+          import('./attendance/attendance.module').then(
+            (m) => m.AttendanceModule
+          ),
+      },
+      {
         path: '',
         redirectTo: 'dashboard',
         pathMatch: 'full',

src/assets/scss/variables.scss

@@ -84,6 +84,7 @@ $span-color: #707070;
 @import "../../app/modules/task-management//task-managemnt-theme.scss";
 @import "../../app/modules/meetings/meetings-theme.scss";
 @import "../../app/modules/orders/orders.component.scss";
+@import "../../app/modules/attendance/attendance.component.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
@@ -100,6 +101,7 @@ $span-color: #707070;
   @include task-management();
   @include meetings-theme();
   @include order-list();
+  @include attendance-theme();
 }
 
 @include component-theme();