Admin Pannel --Partial Commit

src/app/admin/_commonCard.scss

@@ -0,0 +1,115 @@
+.common_card{
+    position: relative;
+    width: 25vw;
+    height: 100%;
+    border-radius: 10px;
+    margin: 10px;
+    z-index: 1;
+
+    &:before{
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        box-shadow: 0 0 10px 1px var(--dark-grey);
+        filter: brightness(200%);
+        z-index: -1;
+        border-radius: 10px;
+    }
+}
+
+.card_header{
+    position: relative;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 1;
+    
+    &:before{
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: var(--grey);
+        filter: brightness(150%);
+        z-index: -1;
+        border-radius: 10px 10px 0 0;
+
+    }
+
+    h4{
+        font-size: 18px;
+        color: var(--dark-grey);
+        margin: 0 20px;
+    }
+    
+    button{
+        width: 30px;
+        height: 30px;
+        padding: 0;
+        border-radius: 30px;
+        font-weight: 800;
+        font-size: 20px;
+        margin: 0 20px;
+    }
+}
+.card_upfold{
+    overflow: auto;
+    list-style: none;
+    height: 300px;
+
+    h5{
+        font-size: 16px;
+        color: var(--dark-grey);
+        padding: 5px 0;
+    }
+    p{
+        font-size: 14px;
+        color: var(--grey);
+        padding: 5px 0;
+    }
+
+    .cardList{
+        position: relative;
+        margin: 20px;
+        cursor: pointer;
+        z-index: 0;
+
+        &:before{
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(160%);
+            z-index: -1;
+            transform: scale(105%);
+            border-radius: 10px;
+            border: 1px solid var(--grey);
+
+        }
+    }
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    border-radius: 10px;
+    background: var(--dark-grey);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: white; 
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: var(--grey); 
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    border-radius: 10px;
+    background: var(--dark-grey); 
+  }

src/app/admin/admin.component.html

@@ -0,0 +1,23 @@
+<section class="nav-bar">
+    <div class="navmenu">
+        <img src="assets/logo.svg" alt="Logo">
+        <div>
+            <header>Name: {{adminInfo.name}}</header>
+            <span>Id:{{adminInfo.id}}</span>
+        </div>
+    </div>
+    <nav>
+        <button class="rect-button" (click)="logout()"> Logout </button>
+    </nav>
+</section>
+
+
+<section class="tricards">
+    <app-notificaiton></app-notificaiton>
+    <app-queries></app-queries>
+    <app-support-tickets></app-support-tickets>
+</section>
+
+<section class="malls">
+    <app-malls></app-malls>
+</section>

src/app/admin/admin.component.scss

@@ -0,0 +1,94 @@
+.nav-bar {
+	display: flex;
+	width: 100%;
+	height: 70px;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 4%;
+	box-shadow: 0px 0px 8px var(--grey);
+	position: relative;
+	z-index: 1;
+	background-color: white;
+
+	@media screen and (max-width: 1023px) {
+		display: none;
+	}
+
+	header{
+		font-weight: 600;
+		color: var(--dark-grey);
+		padding-left: 15px;
+	}
+	.navmenu{
+		display: inline-flex;
+		align-items: center;
+	}
+
+	span{
+		display: block;
+		padding-left: 15px;
+	}
+
+	img {
+		width: 70px;
+	}
+
+	nav {
+		height: 70px;
+		display: flex;
+		align-items: center;
+
+		a, button {
+			margin: 0 25px;
+		}
+
+		a {
+			color: var(--grey);
+			font-size: 16px;
+			height: 70px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+
+			&.active {
+				&::before {
+					content: '';
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					height: 3px;
+					width: 100%;
+					background-color: var(--brand-blue);
+				}
+			}
+		}
+
+		button {
+			background-color: transparent;
+			border: 2px solid var(--brand-blue);
+			color: var(--brand-blue);
+			width: 100px;
+			height: 40px;
+			margin-right: 0;
+		}
+	}
+}
+
+.tricards{
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+
+	:nth-child(n){
+		margin: 30px;
+	}
+}
+
+.malls{
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+
+	:nth-child(n){
+		margin: 30px;
+	}
+}

src/app/admin/admin.component.spec.ts

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

src/app/admin/admin.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'app-admin',
+  templateUrl: './admin.component.html',
+  styleUrls: ['./admin.component.scss']
+})
+export class AdminComponent implements OnInit {
+
+  constructor(
+    private router: Router
+  ) {
+
+  }
+
+  adminInfo: any = []
+  ngOnInit() {
+    this.getAdminInfo()
+  }
+
+  getAdminInfo() {
+    this.adminInfo = JSON.parse(localStorage.user_info)
+  }
+
+  logout() {
+    localStorage.clear()
+    this.router.navigate(['/']);
+  }
+}

src/app/admin/malls/malls.component.html

@@ -0,0 +1,64 @@
+<section class="common_card">
+    <div class="card_header">
+        <h4>Malls</h4>
+        <div>
+            <input type="text" placeholder="Search Malls" [(ngModel)]="searchTerm" (input)="searchAllMalls()"
+                autocomplete="off" #searchbar>
+            <button class="rect-button" (click)='showModal = true'>+</button>
+        </div>
+    </div>
+    <div class="card_upfold">
+        <li *ngFor='let malls of allMalls' class="mallList">
+            <img src="{{malls.image_url}}">
+            <div class="upfold-content">
+                <h5> {{malls.mall_name}}</h5>
+                <p>{{malls.description}}</p>
+                {{showModal}}
+
+                <div>
+                    <span *ngIf='malls.outlet.length > 0'>Outlets: {{malls.outlet.length}}</span>
+                    <span *ngIf='malls.outlet.length === 0'>Outlets: 0</span>
+                    <span> Rating: {{malls.rating}} </span>
+                    <span> Location: {{malls.mall_address}}</span>
+                </div>
+
+            </div>
+        </li>
+    </div>
+
+    <div class="popUp" *ngIf='showModal === true'>
+        <div class="popup-box">
+            <ul class="input-list">
+                <li>
+                    <label> Advertisement</label>
+                    <input type="number">
+                </li>
+                <li>
+                    <label> Add Mall </label>
+                    <input type="number">
+                </li>
+                <li>
+                    <label> Add Mall </label>
+                    <input type="number">
+                </li>
+                <li>
+                    <label> Add Mall </label>
+                    <input type="number">
+                </li>
+                <li>
+                    <label> Add Mall </label>
+                    <input type="number">
+                </li>
+                <li>
+                    <label> Add Mall </label>
+                    <input type="number">
+                </li>
+            </ul>
+
+            <div class="action-buttons">
+                <button class="rect-button cancel" (click)="showModal = false">Cancel</button>
+                <button class="rect-button" (click)="addMall()">Add</button>
+            </div>
+        </div>
+    </div>
+</section>

src/app/admin/malls/malls.component.scss

@@ -0,0 +1,169 @@
+@import '../commonCard';
+
+.common_card {
+    width: 100%;
+}
+
+.card_header {
+    div {
+        display: flex;
+        align-items: center;
+
+        input {
+            width: 150px;
+            height: 32px;
+            border: none;
+            border-radius: 10px;
+            padding: 10px;
+            box-shadow: 0 0 3px 0px var(--grey);
+            font-weight: 500;
+        }
+    }
+
+}
+
+.mallList {
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin: 20px;
+
+    &:before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: var(--grey);
+        filter: brightness(160%);
+        z-index: -1;
+        border-radius: 10px;
+        border: 1px solid var(--grey);
+    }
+
+    img {
+        width: 100px;
+        height: 100px;
+        border-radius: 10px;
+    }
+
+    .upfold-content {
+        padding: 0 10px;
+        position: relative;
+
+        p {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            width: 300px;
+        }
+
+        .rating {
+            i {
+
+                color: var(--grey);
+            }
+        }
+
+        div {
+            display: flex;
+            align-items: center;
+
+            span {
+                margin: 10px 0;
+                margin-right: 10px;
+                color: var(--grey);
+
+                img {
+                    width: 10px;
+                    height: 10px;
+                }
+            }
+        }
+    }
+}
+
+.popUp {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0, 0, 0, 0.5);
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+
+    .popup-box {
+        width: 400px;
+        padding: 15px;
+        background: white;
+        border-radius: 10px;
+
+        .input-list {
+            list-style: none;
+            padding: 0;
+            margin: 10px 0;
+        }
+
+        .action-buttons{
+            display: flex;
+            justify-content: center;
+        }
+
+        button{
+            margin: 0 20px;
+            width: 100px;
+            text-align: center;
+            
+            &.cancel{
+                background-color: white;
+                border: 2px solid var(--brand-blue);
+                color: var(--brand-blue);
+            }
+        }
+
+        li {
+            text-align: left;
+            margin: 20px 0;
+            position: relative;
+
+            label {
+                display: block;
+                font-size: 14px;
+                color: dimgrey;
+                font-weight: 500;
+            }
+
+            img {
+                width: 100px;
+                height: 100px;
+                border-radius: 10px;
+                box-shadow: 0px 0px 5px var(--grey);
+                margin: 0 auto;
+                display: block;
+            }
+
+            input {
+                width: 100%;
+                display: block;
+                height: 40px;
+                border-radius: 5px;
+                border: 2px solid var(--grey);
+                margin-top: 10px;
+                padding: 0 10px;
+                font-size: 16px;
+
+                &:focus {
+                    border-color: var(--brand-blue);
+                }
+            }
+
+            .toggle {
+                margin: 0;
+                margin-top: 10px;
+                cursor: pointer;
+            }
+        }
+    }
+}

src/app/admin/malls/malls.component.spec.ts

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

src/app/admin/malls/malls.component.ts

@@ -0,0 +1,121 @@
+import { Component, ElementRef, OnInit, ViewChild, Input } from '@angular/core';
+import { MallsService } from '../../services/malls.service'
+
+
+@Component({
+  selector: 'app-malls',
+  templateUrl: './malls.component.html',
+  styleUrls: ['./malls.component.scss']
+})
+export class MallsComponent implements OnInit {
+
+  constructor(private mallService: MallsService) { }
+
+  allMalls: any = [];
+  allOutlets: any = [];
+  searchTerm: any = [];
+  tempMalls: any = [];
+
+  showModal: boolean = false;
+
+  newMall: {
+    advertisement: {
+      adv_type: true,
+      createdBy: string,
+      createdOn: string,
+      image: string,
+      soft_delete: true,
+      type: string,
+      updatedBy: string,
+      updatedOn: string,
+    },
+    description: string,
+    image_url: string,
+    is_bookmarked: true,
+    mall_address: string,
+    mall_distance: number,
+    mall_name: string,
+    offers_count: number,
+    outlet: {
+      description: string,
+      image_url: string,
+      is_bookmarked: true,
+      outlet_Gst: 0,
+      outlet_id: 0,
+      outlet_name: string,
+      outlet_timing: string,
+      outlet_type: string,
+      rating: number,
+    },
+    rating: number,
+    soft_delete: true
+  } = {
+      advertisement: {
+        adv_type: true,
+        createdBy: '',
+        createdOn: '',
+        image: '',
+        soft_delete: true,
+        type: '',
+        updatedBy: '',
+        updatedOn: '',
+      },
+      description: '',
+      image_url: '',
+      is_bookmarked: true,
+      mall_address: '',
+      mall_distance: 0,
+      mall_name: '',
+      offers_count: 0,
+      outlet: {
+        description: '',
+        image_url: '',
+        is_bookmarked: true,
+        outlet_Gst: 0,
+        outlet_id: 0,
+        outlet_name: '',
+        outlet_timing: '',
+        outlet_type: '',
+        rating: 0,
+      },
+      rating: 0,
+      soft_delete: true
+    }
+
+  @ViewChild('searchbar', null) searchElement: ElementRef;
+
+  ngOnInit() {
+    this.getAllMalls()
+  }
+
+  getAllMalls() {
+    let arrayofMalls: any = [];
+    this.mallService.allMalls().then((malls: any) => {
+      malls.map(data => {
+        arrayofMalls.push(data.mall)
+      })
+      this.allMalls = arrayofMalls;
+      this.tempMalls = arrayofMalls;
+      localStorage.allMalls = JSON.stringify(arrayofMalls)
+
+      console.log(this.allMalls)
+    }, (error) => {
+      console.log("Error getting Malls", error)
+    })
+  }
+
+  searchAllMalls() {
+    if (this.searchTerm.trim().length > 0) {
+      this.allMalls = this.allMalls.filter((mallData: any) => {
+        return mallData.mall_name.toLowerCase().includes(this.searchTerm.toLowerCase());
+      });
+    } else {
+      this.allMalls = JSON.parse(localStorage.allMalls);
+    }
+  }
+
+  addMall() {
+    console.log(this.newMall)
+  }
+}
+

src/app/admin/notificaiton/notificaiton.component.html

@@ -0,0 +1,12 @@
+<section class="common_card">
+    <div class="card_header">
+        <h4>Notification</h4>
+        <button class="rect-button">+</button>
+    </div>
+    <div class="card_upfold">
+        <li *ngFor='let notification of notifications' class="cardList">
+            <h5> {{notification.heading}}</h5>
+            <p>{{notification.description}}</p>
+        </li>
+    </div>
+</section>

src/app/admin/notificaiton/notificaiton.component.scss

@@ -0,0 +1 @@
+@import '../commonCard'

src/app/admin/notificaiton/notificaiton.component.spec.ts

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

src/app/admin/notificaiton/notificaiton.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-notificaiton',
+  templateUrl: './notificaiton.component.html',
+  styleUrls: ['./notificaiton.component.scss']
+})
+export class NotificaitonComponent implements OnInit {
+
+  currentDate: any = new Date().getDate() + "-" + new Date().getMonth() + "-" + new Date().getFullYear()
+
+  notifications: Array<{
+    heading: string,
+    description: string,
+    timeStamp?: any
+  }> = [{
+    heading: 'Notification 1',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Notification 2',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Notification 3',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Notification 4',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Notification 5',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Notification 6',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Notification 7',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  },]
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/admin/queries/queries.component.html

@@ -0,0 +1,12 @@
+<section class="common_card">
+    <div class="card_header">
+        <h4>Queries</h4>
+        <button class="rect-button">+</button>
+    </div>
+    <div class="card_upfold">
+        <li *ngFor='let querie of queries' class="cardList">
+            <h5> {{querie.heading}}</h5>
+            <p>{{querie.description}}</p>
+        </li>
+    </div>
+</section>

src/app/admin/queries/queries.component.scss

@@ -0,0 +1 @@
+@import "../commonCard";

src/app/admin/queries/queries.component.spec.ts

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

src/app/admin/queries/queries.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-queries',
+  templateUrl: './queries.component.html',
+  styleUrls: ['./queries.component.scss']
+})
+export class QueriesComponent implements OnInit {
+
+  currentDate: any = new Date().getDate() + "-" + new Date().getMonth() + "-" + new Date().getFullYear()
+
+  queries: Array<{
+    heading: string,
+    description: string,
+    timeStamp?: any
+  }> = [{
+    heading: 'Querie 1',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Querie 2',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Querie 3',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Querie 4',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Querie 5',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Querie 6',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Querie 7',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  },]
+
+
+  ngOnInit() {
+  }
+
+}

src/app/admin/support-tickets/support-tickets.component.html

@@ -0,0 +1,12 @@
+<section class="common_card">
+    <div class="card_header">
+        <h4>Support Ticket</h4>
+        <button class="rect-button">+</button>
+    </div>
+    <div class="card_upfold">
+        <li *ngFor='let supportTicket of supportTickets' class="cardList">
+            <h5> {{supportTicket.heading}}</h5>
+            <p>{{supportTicket.description}}</p>
+        </li>
+    </div>
+</section>

src/app/admin/support-tickets/support-tickets.component.scss

@@ -0,0 +1 @@
+@import '../commonCard'

src/app/admin/support-tickets/support-tickets.component.spec.ts

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

src/app/admin/support-tickets/support-tickets.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-support-tickets',
+  templateUrl: './support-tickets.component.html',
+  styleUrls: ['./support-tickets.component.scss']
+})
+export class SupportTicketsComponent implements OnInit {
+
+  currentDate: any = new Date().getDate() + "-" + new Date().getMonth() + "-" + new Date().getFullYear()
+
+  supportTickets: Array<{
+    heading: string,
+    description: string,
+    timeStamp?: any
+  }> = [{
+    heading: 'Ticket 1',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Ticket 2',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Ticket 3',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Ticket 4',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Ticket 5',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Ticket 6',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  }, {
+    heading: 'Ticket 7',
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+    timeStamp: this.currentDate,
+  },]
+
+  ngOnInit() {
+  }
+
+}

src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AdminComponent } from './admin/admin.component';
 import { LoginComponent } from './login/login.component';
 import { OutletsComponent } from './outlets/outlets.component';
 import { WidgetsHolderComponent } from './widgets-holder/widgets-holder.component';
@@ -24,7 +25,8 @@ const routes: Routes = [{
 	},{
 		path: 'outlets',
 		component:OutletsComponent
-	}
+	},{ path: 'admin',
+		component: AdminComponent}
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -29,6 +29,11 @@ import { OrderService } from './services/order.service';
 import { ItemService } from './services/item.service';
 import { FaqService } from './services/faq.service';
 import { OutletsComponent } from './outlets/outlets.component';
+import { AdminComponent } from './admin/admin.component';
+import { NotificaitonComponent } from './admin/notificaiton/notificaiton.component';
+import { SupportTicketsComponent } from './admin/support-tickets/support-tickets.component';
+import { QueriesComponent } from './admin/queries/queries.component';
+import { MallsComponent } from './admin/malls/malls.component';
 
 @NgModule({
 	declarations: [
@@ -44,7 +49,12 @@ import { OutletsComponent } from './outlets/outlets.component';
 		SupportComponent,
 		SettingsComponent,
 		MoreComponent,
-		OutletsComponent
+		OutletsComponent,
+		AdminComponent,
+		NotificaitonComponent,
+		SupportTicketsComponent,
+		QueriesComponent,
+		MallsComponent
 	],
 	imports: [
 		BrowserModule,

src/app/login/login.component.ts

@@ -9,15 +9,16 @@ import { AuthService } from '../services/auth.service';
 })
 export class LoginComponent implements OnInit {
     credentials = {
-        username: 'ramsesrh',
-        password: '123456789',
-        login_type: "ROLE_VENDOR"
+        username: 'admin123',
+        password: 'admin@123',
+        login_type: "ROLE_ADMIN"
     };
 
-    // ramsesrh suresh
+    // ramsesrh suresh 
+    // admin123 admin@123
 
 
-    login_types = ['ROLE_VENDOR', 'ROLE_OUTLET'];
+    login_types = ['ROLE_VENDOR', 'ROLE_OUTLET', 'ROLE_ADMIN'];
 
     errorMessage: string = '';
 
@@ -40,6 +41,8 @@ export class LoginComponent implements OnInit {
 
             if (this.credentials.login_type === 'ROLE_VENDOR') {
                 localStorage.vendor_info = JSON.stringify(data['Info Info']);
+            } if (this.credentials.login_type === 'ROLE_ADMIN') {
+                localStorage.admin_info = JSON.stringify(data['Admin Info'])
             } else {
                 localStorage.outlet_info = JSON.stringify(data['Outlet Info']);
                 this.router.navigate(['shop-details']);
@@ -48,11 +51,14 @@ export class LoginComponent implements OnInit {
             if (this.credentials.login_type === 'ROLE_VENDOR') {
                 console.log("Logging as Vendor")
                 this.router.navigate(['/outlets']);
-            }else{
+            } if (this.credentials.login_type === 'ROLE_ADMIN') {
+                console.log("Logging as Admin")
+                this.router.navigate(['/admin']);
+            } else {
                 console.log("Logging as Outlet")
                 this.router.navigate(['shop-details']);
             }
-            
+
         }, (err: any) => {
             this.errorMessage = 'Please check your credentials';
             setTimeout(() => {

src/app/services/malls.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MallsService } from './malls.service';
+
+describe('MallsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: MallsService = TestBed.get(MallsService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/malls.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { URL } from '../data/url';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MallsService {
+
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  async allMalls() {
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Access-Control-Allow-Origin': '*',
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + localStorage.token
+      })
+    };
+
+    return await this.http.get(URL + '/api/maioraservice/mall/getallmalls', httpOptions).toPromise();
+  }
+
+
+  async mallsByLocation(latitude: number, longitude: number) {
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Access-Control-Allow-Origin': '*',
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + localStorage.access_Token
+      })
+    };
+
+    return await this.http.get(URL + '/api/maioraservice/mall/v1/latitude/' + latitude + '/longitude/' + longitude + '/check/', httpOptions).toPromise();
+  }
+}

src/assets/route.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#9a9a9a"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.27 6.73l-4.24 10.13-1.32-3.42-.32-.83-.82-.32-3.43-1.33 10.13-4.23M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z"/></svg>