company home page

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

@@ -0,0 +1,70 @@
+<section class="company-home">
+  <div class="projects" fxLayout="column" fxLayoutAlign="start stretch">
+    <main>
+      <h2 fxLayout="row" fxLayoutAlign="space-between start">
+        <span>Projects</span>
+        <a>View All</a>
+      </h2>
+    </main>
+    <div fxLayout="row" fxLayoutAlign="center start">
+      <app-project fxFlex.lt-md="100" fxFlex.gt-sm="24"></app-project>
+      <app-project fxFlex.lt-md="100" fxFlex.gt-sm="24"></app-project>
+      <app-project fxFlex.lt-md="100" fxFlex.gt-sm="24"></app-project>
+      <app-project fxFlex.lt-md="100" fxFlex.gt-sm="24"></app-project>
+    </div>
+  </div>
+  <div class="mt-3 gap-10" fxLayout="row wrap" fxLayoutAlign="start start">
+    <div
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="24"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+    >
+      <div
+        class="create-project gap-10"
+        fxLayout="row"
+        fxLayoutAlign="center center"
+      >
+        <img
+          src="../../../../assets/images/create-project.svg"
+          alt=""
+          title=""
+        />
+        <span>Create Project</span>
+      </div>
+      <div
+        class="create-contract gap-10"
+        fxLayout="row"
+        fxLayoutAlign="center center"
+      >
+        <img
+          src="../../../../assets/images/create-contract.svg"
+          alt=""
+          title=""
+        />
+        <span>Create Contract</span>
+      </div>
+      <div
+        class="view-invoices gap-10"
+        fxLayout="row"
+        fxLayoutAlign="center center"
+      >
+        <img
+          src="../../../../assets/images/create-project.svg"
+          alt=""
+          title=""
+        />
+        <span>View Invoices</span>
+      </div>
+    </div>
+    <div fxFlex.lt-md="100" fxFlex.gt-sm="24">
+      <app-teams></app-teams>
+    </div>
+    <div fxFlex.lt-md="100" fxFlex.gt-sm="24">
+      <app-company-to-do></app-company-to-do>
+    </div>
+    <div fxFlex.lt-md="100" fxFlex.gt-sm="24">
+      <app-meetings></app-meetings>
+    </div>
+  </div>
+</section>

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

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

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

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

src/app/modules/dashboard/company-dashboard/company-to-do/company-to-do.component.html

@@ -0,0 +1,70 @@
+<section class="toDo">
+  <main>
+    <h1 fxLayout="row" fxLayoutAlign="space-between start">
+      <span>To Do</span>
+      <a>View All</a>
+    </h1>
+  </main>
+  <ul>
+    <li>
+      <p>Home Page Design</p>
+      <span>home page containing meetings, m..</span>
+      <span class="date">
+        <img
+          src="../../../../../assets/images/calender-blue.svg"
+          alt=""
+          title=""
+        />
+        15/1/2024
+      </span>
+    </li>
+    <li>
+      <p>Home Page Design</p>
+      <span>home page containing meetings, m..</span>
+      <span class="date">
+        <img
+          src="../../../../../assets/images/calender-blue.svg"
+          alt=""
+          title=""
+        />
+        15/1/2024
+      </span>
+    </li>
+    <li>
+      <p>Home Page Design</p>
+      <span>home page containing meetings, m..</span>
+      <span class="date">
+        <img
+          src="../../../../../assets/images/calender-blue.svg"
+          alt=""
+          title=""
+        />
+        15/1/2024
+      </span>
+    </li>
+    <li>
+      <p>Home Page Design</p>
+      <span>home page containing meetings, m..</span>
+      <span class="date">
+        <img
+          src="../../../../../assets/images/calender-blue.svg"
+          alt=""
+          title=""
+        />
+        15/1/2024
+      </span>
+    </li>
+    <li>
+      <p>Home Page Design</p>
+      <span>home page containing meetings, m..</span>
+      <span class="date">
+        <img
+          src="../../../../../assets/images/calender-blue.svg"
+          alt=""
+          title=""
+        />
+        15/1/2024
+      </span>
+    </li>
+  </ul>
+</section>

src/app/modules/dashboard/company-dashboard/company-to-do/company-to-do.component.spec.ts

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

src/app/modules/dashboard/company-dashboard/company-to-do/company-to-do.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-company-to-do',
+  templateUrl: './company-to-do.component.html',
+  styleUrls: ['./company-to-do.component.scss']
+})
+export class CompanyToDoComponent {
+
+}

src/app/modules/dashboard/company-dashboard/meetings/meetings.component.html

@@ -0,0 +1,70 @@
+<section class="toDo">
+  <main>
+    <h1 fxLayout="row" fxLayoutAlign="space-between start">
+      <span>Today's Meetings</span>
+      <a>View All</a>
+    </h1>
+  </main>
+  <ul>
+    <li>
+      <p>Home Page Design</p>
+      <span>home page containing meetings, m..</span>
+      <span class="date">
+        <img
+          src="../../../../../assets/images/meetings_icon.svg"
+          alt=""
+          title=""
+        />
+        15/1/2024
+      </span>
+    </li>
+    <li>
+      <p>Home Page Design</p>
+      <span>home page containing meetings, m..</span>
+      <span class="date">
+        <img
+          src="../../../../../assets/images/meetings_icon.svg"
+          alt=""
+          title=""
+        />
+        15/1/2024
+      </span>
+    </li>
+    <li>
+      <p>Home Page Design</p>
+      <span>home page containing meetings, m..</span>
+      <span class="date">
+        <img
+          src="../../../../../assets/images/meetings_icon.svg"
+          alt=""
+          title=""
+        />
+        15/1/2024
+      </span>
+    </li>
+    <li>
+      <p>Home Page Design</p>
+      <span>home page containing meetings, m..</span>
+      <span class="date">
+        <img
+          src="../../../../../assets/images/meetings_icon.svg"
+          alt=""
+          title=""
+        />
+        15/1/2024
+      </span>
+    </li>
+    <li>
+      <p>Home Page Design</p>
+      <span>home page containing meetings, m..</span>
+      <span class="date">
+        <img
+          src="../../../../../assets/images/meetings_icon.svg"
+          alt=""
+          title=""
+        />
+        15/1/2024
+      </span>
+    </li>
+  </ul>
+</section>

src/app/modules/dashboard/company-dashboard/meetings/meetings.component.spec.ts

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

src/app/modules/dashboard/company-dashboard/meetings/meetings.component.ts

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

src/app/modules/dashboard/company-dashboard/project/project.component.html

@@ -0,0 +1,31 @@
+<div class="project">
+  <p>Dashboard Project</p>
+  <div class="gap-10" fxLayout="row" fxLayoutAlign="start center">
+    <span class="progress" fxFlex="60">
+      <span class="progress-bar"></span>
+    </span>
+    <span fxFlex="40" class="progress-value"> 15 % Complete </span>
+  </div>
+  <h5>Due Date : 25/10/023</h5>
+  <div
+    class="project-footer"
+    fxLayout="row"
+    fxLayoutAlign="space-between center"
+  >
+    <div class="images" fxLayout="row" fxLayoutAlign="start center">
+      <img src="assets/images/avatar.png" alt="" title="" />
+      <img src="assets/images/avatar.png" alt="" title="" />
+      <img src="assets/images/avatar.png" alt="" title="" />
+    </div>
+    <div fxLayout="row" fxLayoutAlign="end center" class="gap-10">
+      <p fxLayout="row" fxLayoutAlign="center center" class="gap-5">
+        <img src="../../../../assets/images/chat_2.svg" alt="" title="" />
+        2
+      </p>
+      <p fxLayout="row" fxLayoutAlign="center center" class="gap-5">
+        <img src="../../../../assets/images/file_2.svg" alt="" title="" />
+        2
+      </p>
+    </div>
+  </div>
+</div>

src/app/modules/dashboard/company-dashboard/project/project.component.spec.ts

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

src/app/modules/dashboard/company-dashboard/project/project.component.ts

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

src/app/modules/dashboard/company-dashboard/teams/teams.component.html

@@ -0,0 +1,16 @@
+<section class="teams">
+  <main>
+    <h1 fxLayout="row" fxLayoutAlign="space-between start">
+      <span>Teams</span>
+      <a>View All</a>
+    </h1>
+  </main>
+  <ul>
+    <li>Design Team</li>
+    <li>Mobile Team</li>
+    <li>Developing Team</li>
+    <li>Sales Team</li>
+    <li>Marketing Team</li>
+    <li>Sales Team</li>
+  </ul>
+</section>

src/app/modules/dashboard/company-dashboard/teams/teams.component.spec.ts

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

src/app/modules/dashboard/company-dashboard/teams/teams.component.ts

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

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

@@ -1,8 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CompanyDashboardComponent } from './company-dashboard/company-dashboard.component';
 import { DashboardComponent } from './dashboard.component';
 
-const routes: Routes = [{ path: '', component: DashboardComponent }];
+const routes: Routes = [
+  { path: '', component: DashboardComponent },
+  { path: 'company-home', component: CompanyDashboardComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/modules/dashboard/dashboard-theme.scss

@@ -268,4 +268,176 @@
       }
     }
   }
+  .company-home {
+    // padding: 20px;
+    margin: 20px 0;
+    .projects {
+      background-color: $off-white;
+      box-shadow: -2px 6px 9px #2f2c8333;
+      border-radius: 25px;
+
+      main {
+        background-color: $main-color;
+        color: $white-color;
+        padding: 10px 10px;
+        border-radius: 10px 10px 0 0;
+        h2 {
+          font-size: 18px;
+        }
+      }
+    }
+    .project {
+      padding: 8px;
+      background: $white-color;
+      border-radius: 10px;
+      margin: 10px 5px;
+      p {
+        color: $main-color;
+        font-weight: bold;
+        font-size: 14px;
+        margin-bottom: 10px;
+      }
+      .progress {
+        width: 100%;
+        position: relative;
+        height: 8px;
+        background-color: #f1f1f1;
+        border-radius: 20px;
+      }
+      .progress-bar {
+        position: absolute;
+        width: 30%;
+        height: 8px;
+        background-color: $main-color;
+        border-radius: 20px;
+      }
+      .progress-value {
+        font-size: 13px;
+        color: $main-color;
+      }
+
+      h5 {
+        margin-top: 2rem;
+        color: #0fbb37;
+      }
+
+      .project-footer {
+        margin-top: 1rem;
+        p {
+          margin: 0;
+        }
+      }
+    }
+
+    .create-project,
+    .view-invoices {
+      background-color: #00aeef;
+      border-radius: 18px;
+      padding: 20px 0;
+      span {
+        color: $white-color;
+        font-size: 18px;
+      }
+    }
+
+    .create-contract {
+      background-color: #2e368f;
+      border-radius: 18px;
+      padding: 20px 0;
+      margin-top: 20px;
+      span {
+        color: $white-color;
+        font-size: 18px;
+      }
+    }
+
+    .view-invoices {
+      margin-top: 20px;
+    }
+
+    .teams {
+      background-color: #f4f4f9;
+      border-radius: 18px;
+      height: 400px;
+      overflow-y: auto;
+
+      main {
+        background-color: $main-color;
+        color: $white-blue;
+        border-radius: 18px 18px 0 0;
+        padding: 10px 10px;
+        h1 {
+          color: $white-color;
+          font-size: 15px;
+        }
+      }
+
+      ul {
+        list-style: none;
+        padding: 20px 0;
+        li {
+          padding: 8px 10px;
+          color: $main-color;
+          margin-bottom: 8px;
+          transition: all 0.5s;
+          width: inherit;
+          border-radius: 10px;
+          font-size: 15px;
+          width: fit-content;
+          &:hover {
+            background-color: #2f2c8326;
+          }
+        }
+      }
+    }
+
+    .toDo {
+      background-color: #f4f4f9;
+      border-radius: 18px;
+      height: 400px;
+      overflow-y: auto;
+
+      main {
+        background-color: $main-color;
+        color: $white-blue;
+        border-radius: 18px 18px 0 0;
+        padding: 10px 10px;
+        h1 {
+          color: $white-color;
+          font-size: 15px;
+        }
+      }
+
+      ul {
+        list-style: none;
+        padding: 20px 0;
+        li {
+          padding: 8px 10px;
+          color: $main-color;
+          margin-bottom: 8px;
+          transition: all 0.5s;
+          width: inherit;
+          border-radius: 10px;
+          font-size: 15px;
+          width: fit-content;
+          &:hover {
+            background-color: #2f2c8326;
+          }
+          p {
+            color: #707070;
+            font-size: 14px;
+          }
+          span {
+            font-size: 13px;
+            color: #707070;
+            display: block;
+          }
+
+          .date {
+            color: $main-color;
+          }
+        }
+      }
+    }
+  }
 }

src/app/modules/dashboard/dashboard.module.ts

@@ -10,6 +10,11 @@ import { TodayMeetingsComponent } from './today-meetings/today-meetings.componen
 import { TodayTasksComponent } from './today-tasks/today-tasks.component';
 import { ToDoComponent } from './to-do/to-do.component';
 import { CalenderComponent } from './calender/calender.component';
+import { CompanyDashboardComponent } from './company-dashboard/company-dashboard.component';
+import { ProjectComponent } from './company-dashboard/project/project.component';
+import { TeamsComponent } from './company-dashboard/teams/teams.component';
+import { MeetingsComponent } from './company-dashboard/meetings/meetings.component';
+import { CompanyToDoComponent } from './company-dashboard/company-to-do/company-to-do.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +25,11 @@ import { CalenderComponent } from './calender/calender.component';
     TodayTasksComponent,
     ToDoComponent,
     CalenderComponent,
+    CompanyDashboardComponent,
+    ProjectComponent,
+    TeamsComponent,
+    MeetingsComponent,
+    CompanyToDoComponent,
   ],
   imports: [CommonModule, DashboardRoutingModule, SharedModule],
 })

src/assets/images/file_2.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.143" height="17.112" viewBox="0 0 17.143 17.112">
+  <g id="_92dc6d3c93352d613150948052aeb2ac" data-name="92dc6d3c93352d613150948052aeb2ac" transform="translate(-0.672 7.239) rotate(-45)">
+    <path id="Path_1152" data-name="Path 1152" d="M1.782,3.209A1.71,1.71,0,0,1,.534,2.675a1.725,1.725,0,0,1,0-2.5.574.574,0,0,1,.832,0,.574.574,0,0,1,0,.832.574.574,0,0,0,0,.832.574.574,0,0,0,.832,0,.588.588,0,0,1,.832.832A1.818,1.818,0,0,1,1.782,3.209Z" transform="translate(2.318 8.378)" fill="#707070"/>
+    <path id="Path_1153" data-name="Path 1153" d="M3.921,5.229a.541.541,0,0,1-.416-.178.574.574,0,0,1,0-.832,1.723,1.723,0,0,0,0-2.495,1.831,1.831,0,0,0-2.495,0,.574.574,0,0,1-.832,0,.574.574,0,0,1,0-.832A2.7,2.7,0,0,1,2.259,0a2.872,2.872,0,0,1,2.08.832,3.052,3.052,0,0,1,0,4.219A.646.646,0,0,1,3.921,5.229Z" transform="translate(7.725 2.673)" fill="#707070"/>
+    <path id="Path_1154" data-name="Path 1154" d="M.594,6.24a.541.541,0,0,1-.416-.178.574.574,0,0,1,0-.832L5.229.178a.574.574,0,0,1,.832,0,.574.574,0,0,1,0,.832L1.011,6.061A.465.465,0,0,1,.594,6.24Z" transform="translate(2.614 3.327)" fill="#707070"/>
+    <path id="Path_1155" data-name="Path 1155" d="M0,0" transform="translate(0.714 11.527)" fill="#707070"/>
+    <path id="Path_1156" data-name="Path 1156" d="M.594,6.24a.541.541,0,0,1-.416-.178.574.574,0,0,1,0-.832L5.229.179a.574.574,0,0,1,.832,0,.574.574,0,0,1,0,.832L1.011,6.061A.541.541,0,0,1,.594,6.24Z" transform="translate(6.001 6.714)" fill="#707070"/>
+    <path id="Path_1157" data-name="Path 1157" d="M.595,6.24a.541.541,0,0,1-.416-.178.574.574,0,0,1,0-.832L5.229.178a.574.574,0,0,1,.832,0,.574.574,0,0,1,0,.832L1.011,6.061A.442.442,0,0,1,.595,6.24Z" transform="translate(4.337 4.991)" fill="#707070"/>
+    <path id="Path_1158" data-name="Path 1158" d="M0,0" transform="translate(2.377 13.191)" fill="#707070"/>
+    <path id="Path_1159" data-name="Path 1159" d="M.594,7.9a.541.541,0,0,1-.416-.178.574.574,0,0,1,0-.832L6.894.178a.574.574,0,0,1,.832,0,.574.574,0,0,1,0,.832L1.011,7.724A.536.536,0,0,1,.594,7.9Z" transform="translate(0.95)" fill="#707070"/>
+    <path id="Path_1160" data-name="Path 1160" d="M4.1,7.189A4.137,4.137,0,0,1,1.19,6a4.158,4.158,0,0,1,0-5.822.574.574,0,0,1,.832,0,.574.574,0,0,1,0,.832,3.027,3.027,0,0,0-.892,2.08,2.791,2.791,0,0,0,.892,2.08,3.052,3.052,0,0,0,4.219,0A.588.588,0,0,1,7.071,6,4.233,4.233,0,0,1,4.1,7.189Z" transform="translate(0 6.775)" fill="#707070"/>
+  </g>
+</svg>