24th January commit

angular.json

@@ -17,7 +17,7 @@
                 "build": {
                     "builder": "@angular-devkit/build-angular:browser",
                     "options": {
-                        "outputPath": "dist/fuse",
+                        "outputPath": "dist/teso",
                         "index": "src/index.html",
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",

src/app/app.module.ts

@@ -12,6 +12,15 @@ import { mockApiServices } from 'app/mock-api';
 import { LayoutModule } from 'app/layout/layout.module';
 import { AppComponent } from 'app/app.component';
 import { appRoutes } from 'app/app.routing';
+import { LocationStrategy, PathLocationStrategy } from '@angular/common';
+import { AdvertsComponent } from './pages/admin/Adverts/adverts.component';
+import { CampaignsComponent } from './pages/admin/Campaigns/campaigns.component';
+import { CouponsComponent } from './pages/admin/Coupons/coupons.component';
+import { FollowersComponent } from './pages/admin/Followers/followers.component';
+import { DesiresComponent } from './pages/admin/Monthly_Desires/desires.component';
+import { ProductsComponent } from './pages/admin/Products/products.component';
+import { ProfileComponent } from './pages/admin/Profile/profile.component';
+import { SettingsComponent } from './pages/admin/Settings/settings.component';
 
 const routerConfig: ExtraOptions = {
     preloadingStrategy       : PreloadAllModules,
@@ -20,7 +29,15 @@ const routerConfig: ExtraOptions = {
 
 @NgModule({
     declarations: [
-        AppComponent
+        AppComponent,
+        AdvertsComponent,
+        CampaignsComponent,
+        CouponsComponent,
+        FollowersComponent,
+        DesiresComponent,
+        ProductsComponent,
+        ProfileComponent,
+        SettingsComponent
     ],
     imports     : [
         BrowserModule,
@@ -41,6 +58,9 @@ const routerConfig: ExtraOptions = {
         // 3rd party modules that require global configuration via forRoot
         MarkdownModule.forRoot({})
     ],
+    providers: [
+        { provide: LocationStrategy, useClass: PathLocationStrategy  },
+    ],
     bootstrap   : [
         AppComponent
     ]

src/app/app.routing.ts

@@ -63,6 +63,12 @@ export const appRoutes: Route[] = [
         },
         children   : [
             {path: 'dashboard', loadChildren: () => import('app/pages/admin/Dashboard/dashboard.module').then(m => m.DashboardModule)},
+            {path: 'adverts', loadChildren: () => import('app/pages/admin/Adverts/adverts.module').then(m => m.AdvertsModule)},
+            {path: 'campaigns', loadChildren: () => import('app/pages/admin/Campaigns/campaigns.module').then(m => m.CampaignsModule)},
+            {path: 'coupons', loadChildren: () => import('app/pages/admin/Coupons/coupons.module').then(m => m.CouponsModule)},
+            {path: 'products', loadChildren: () => import('app/pages/admin/Products/products.module').then(m => m.ProductsModule)},
+            {path: 'followers', loadChildren: () => import('app/pages/admin/Followers/followers.module').then(m => m.FollowersModule)},
+            {path: 'desires', loadChildren: () => import('app/pages/admin/Monthly_Desires/desires.module').then(m => m.DesiresModule)},
         ]
     }
 ];

src/app/layout/navigation/data.ts

@@ -7,7 +7,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
         title: 'Example',
         type: 'basic',
         icon: 'heroicons_outline:chart-pie',
-        link: '/example'
+        link: '/dashboard'
     }
 ];
 export const compactNavigation: FuseNavigationItem[] = [
@@ -16,7 +16,7 @@ export const compactNavigation: FuseNavigationItem[] = [
         title: 'Dashboard',
         type: 'basic',
         icon: 'heroicons_outline:chart-pie',
-        link: '/example'
+        link: '/dashboard'
     },
     
     {
@@ -24,7 +24,7 @@ export const compactNavigation: FuseNavigationItem[] = [
         title: 'Ads',
         type: 'basic',
         icon: 'heroicons_outline:play',
-        link: '/example'
+        link: '/adverts'
         
     },
     {
@@ -32,34 +32,34 @@ export const compactNavigation: FuseNavigationItem[] = [
         title: 'Campaigns',
         type: 'basic',
         icon: 'mat_outline:ads_click',
-        link: '/example'
+        link: '/campaigns'
     },
     {
         id: 'coupons',
         title: 'Coupons',
         type: 'basic',
         icon: 'heroicons_outline:credit-card',
-        link: '/example'
+        link: '/coupons'
     },
     {
         id: 'products',
         title: 'Products',
         type: 'basic',
         icon: 'heroicons_outline:shopping-bag',
-        link: '/example'
+        link: '/products'
     },
     {
         id: 'followers',
         title: 'Followers',
         type: 'basic',
         icon: 'heroicons_outline:users',
-        link: '/example'
+        link: '/followers'
     }, 
     {
         id: 'desire',
         title: 'Monthly Desires',
         type: 'basic',
         icon: 'heroicons_outline:heart',
-        link: '/example'
+        link: '/desires'
     },
 ];

src/app/mock-api/dashboards/analytics/api.ts

@@ -31,6 +31,7 @@ export class AnalyticsMockApi
         // -----------------------------------------------------------------------------------------------------
         // @ Sales - GET
         // -----------------------------------------------------------------------------------------------------
+        console.log(analyticsData)
         this._fuseMockApiService
             .onGet('api/dashboards/analytics')
             .reply(() => [200, cloneDeep(this._analytics)]);

src/app/pages/admin/Adverts/adverts.component.html

@@ -0,0 +1 @@
+<p>adverts works!</p>

src/app/pages/admin/Adverts/adverts.component.spec.ts

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

src/app/pages/admin/Adverts/adverts.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-adverts',
+  templateUrl: './adverts.component.html',
+  styleUrls: ['./adverts.component.scss']
+})
+export class AdvertsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/admin/Adverts/adverts.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class AdvertsModule { }

src/app/pages/admin/Campaigns/campaigns.component.html

@@ -0,0 +1 @@
+<p>campaigns works!</p>

src/app/pages/admin/Campaigns/campaigns.component.spec.ts

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

src/app/pages/admin/Campaigns/campaigns.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-campaigns',
+  templateUrl: './campaigns.component.html',
+  styleUrls: ['./campaigns.component.scss']
+})
+export class CampaignsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/admin/Campaigns/campaigns.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class CampaignsModule { }

src/app/pages/admin/Coupons/coupons.component.html

@@ -0,0 +1 @@
+<p>coupons works!</p>

src/app/pages/admin/Coupons/coupons.component.spec.ts

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

src/app/pages/admin/Coupons/coupons.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-coupons',
+  templateUrl: './coupons.component.html',
+  styleUrls: ['./coupons.component.scss']
+})
+export class CouponsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/admin/Coupons/coupons.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class CouponsModule { }

src/app/pages/admin/Dashboard/dashboard.component.html

@@ -1,11 +1,321 @@
-<div class="flex flex-col flex-auto min-w-0">
+<div class="flex flex-col flex-auto w-full">
 
-    <!-- Main -->
+    <div class="flex flex-wrap w-full max-w-screen-xl mx-auto p-6 md:p-8">
-    <div class="flex-auto p-6 sm:p-10">
 
-        <!-- CONTENT GOES HERE -->
+        <!-- Title and action buttons -->
-        <div class="h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl"></div>
+        <div class="flex items-center justify-between w-full">
+            <div>
+                <div class="text-3xl font-semibold tracking-tight leading-8">Analytics dashboard</div>
+                <div class="font-medium tracking-tight text-secondary">Monitor metrics, check statistics and review performance on Teso</div>
+            </div>
 
-    </div>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full mt-8">
+            <!-- Visitors overview -->
+            <div class="sm:col-span-2 lg:col-span-3 light flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
+                <div class="flex items-center justify-between mt-10 ml-10 mr-6 sm:mr-10">
+                    <div class="flex flex-col">
+                        <div class="mr-4 text-2xl md:text-3xl font-semibold tracking-tight leading-7">Visitors Overview
+                        </div>
+                        <div class="font-medium text-secondary">Number of unique visitors</div>
+                    </div>
+                    <div class="ml-2">
+                        <mat-button-toggle-group class="hidden sm:inline-flex border-none space-x-1" value="this-year" #visitorsYearSelector="matButtonToggleGroup">
+                            <mat-button-toggle class="px-1.5 rounded-full overflow-hidden border-none font-medium" value="last-year">Last Year
+                            </mat-button-toggle>
+                            <mat-button-toggle class="px-1.5 rounded-full overflow-hidden border-none font-medium" value="this-year">This Year
+                            </mat-button-toggle>
+                        </mat-button-toggle-group>
+                        <div class="sm:hidden">
+                            <button mat-icon-button [matMenuTriggerFor]="visitorsMenu">
+                                <mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
+                            </button>
+                            <mat-menu #visitorsMenu="matMenu">
+                                <button mat-menu-item>This Year</button>
+                                <button mat-menu-item>Last Year</button>
+                            </mat-menu>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col flex-auto h-80">
+                    <apx-chart class="flex-auto w-full h-full" [chart]="chartVisitors.chart" [colors]="chartVisitors.colors" [dataLabels]="chartVisitors.dataLabels" [fill]="chartVisitors.fill" [grid]="chartVisitors.grid" [series]="chartVisitors.series[visitorsYearSelector.value]"
+                        [stroke]="chartVisitors.stroke" [tooltip]="chartVisitors.tooltip" [xaxis]="chartVisitors.xaxis" [yaxis]="chartVisitors.yaxis">
+                    </apx-chart>
+                </div>
+            </div>
+            <!-- Conversions -->
+            <div class="sm:col-span-2 lg:col-span-1 flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
+                <div class="flex items-start justify-between m-6 mb-0">
+                    <div class="text-lg font-medium tracking-tight leading-6 truncate">Coupon Redemptions</div>
+                    <div class="ml-2">
+                        <button class="h-6 min-h-6 px-2 rounded-full bg-hover" mat-button [matMenuTriggerFor]="conversionMenu">
+                            <span class="font-medium text-sm text-secondary">30 days</span>
+                        </button>
+                        <mat-menu #conversionMenu="matMenu">
+                            <button mat-menu-item>30 days</button>
+                            <button mat-menu-item>3 months</button>
+                            <button mat-menu-item>9 months</button>
+                        </mat-menu>
+                    </div>
+                </div>
+                <div class="flex flex-col lg:flex-row lg:items-center mx-6 mt-3">
+                    <div class="text-7xl font-bold tracking-tighter leading-tight">{{data.conversions.amount | number:'1.0-0'}}
+                    </div>
+                    <div class="flex lg:flex-col lg:ml-3">
+                        <mat-icon class="icon-size-5 text-red-500" [svgIcon]="'heroicons_solid:trending-down'">
+                        </mat-icon>
+                        <div class="flex items-center ml-1 lg:ml-0 lg:mt-0.5 text-md leading-none whitespace-nowrap text-secondary">
+                            <span class="font-medium text-red-500">2%</span>
+                            <span class="ml-1">below target</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col flex-auto h-20">
+                    <apx-chart class="flex-auto w-full h-full" [chart]="chartConversions.chart" [colors]="chartConversions.colors" [series]="chartConversions.series" [stroke]="chartConversions.stroke" [tooltip]="chartConversions.tooltip" [xaxis]="chartConversions.xaxis"
+                        [yaxis]="chartConversions.yaxis"></apx-chart>
+                </div>
+            </div>
+            <!-- Impressions -->
+            <div class="flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
+                <div class="flex items-start justify-between m-6 mb-0">
+                    <div class="text-lg font-medium tracking-tight leading-6 truncate">Total Sales</div>
+                    <div class="ml-2">
+                        <button class="h-6 min-h-6 px-2 rounded-full bg-hover" mat-button [matMenuTriggerFor]="impressionsMenu">
+                            <span class="font-medium text-sm text-secondary">30 days</span>
+                        </button>
+                        <mat-menu #impressionsMenu="matMenu">
+                            <button mat-menu-item>30 days</button>
+                            <button mat-menu-item>3 months</button>
+                            <button mat-menu-item>9 months</button>
+                        </mat-menu>
+                    </div>
+                </div>
+                <div class="flex flex-col lg:flex-row lg:items-center mx-6 mt-3">
+                    <div class="text-7xl font-bold tracking-tighter leading-tight">{{data.impressions.amount | number:'1.0-0'}}
+                    </div>
+                    <div class="flex lg:flex-col lg:ml-3">
+                        <mat-icon class="icon-size-5 text-red-500" [svgIcon]="'heroicons_solid:trending-down'">
+                        </mat-icon>
+                        <div class="flex items-center ml-1 lg:ml-0 lg:mt-0.5 text-md leading-none whitespace-nowrap text-secondary">
+                            <span class="font-medium text-red-500">4%</span>
+                            <span class="ml-1">below target</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col flex-auto h-20">
+                    <apx-chart class="flex-auto w-full h-full" [chart]="chartImpressions.chart" [colors]="chartImpressions.colors" [series]="chartImpressions.series" [stroke]="chartImpressions.stroke" [tooltip]="chartImpressions.tooltip" [xaxis]="chartImpressions.xaxis"
+                        [yaxis]="chartImpressions.yaxis"></apx-chart>
+                </div>
+            </div>
+            <!-- Visits -->
+            <div class="flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
+                <div class="flex items-start justify-between m-6 mb-0">
+                    <div class="text-lg font-medium tracking-tight leading-6 truncate">Visits</div>
+                    <div class="ml-2">
+                        <button class="h-6 min-h-6 px-2 rounded-full bg-hover" mat-button [matMenuTriggerFor]="impressionsMenu">
+                            <span class="font-medium text-sm text-secondary">30 days</span>
+                        </button>
+                        <mat-menu #impressionsMenu="matMenu">
+                            <button mat-menu-item>30 days</button>
+                            <button mat-menu-item>3 months</button>
+                            <button mat-menu-item>9 months</button>
+                        </mat-menu>
+                    </div>
+                </div>
+                <div class="flex flex-col lg:flex-row lg:items-center mx-6 mt-3">
+                    <div class="text-7xl font-bold tracking-tighter leading-tight">{{data.visits.amount | number:'1.0-0'}}
+                    </div>
+                    <div class="flex lg:flex-col lg:ml-3">
+                        <mat-icon class="icon-size-5 text-red-500" [svgIcon]="'heroicons_solid:trending-down'">
+                        </mat-icon>
+                        <div class="flex items-center ml-1 lg:ml-0 lg:mt-0.5 text-md leading-none whitespace-nowrap text-secondary">
+                            <span class="font-medium text-red-500">4%</span>
+                            <span class="ml-1">below target</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col flex-auto h-20">
+                    <apx-chart class="flex-auto w-full h-full" [chart]="chartVisits.chart" [colors]="chartVisits.colors" [series]="chartVisits.series" [stroke]="chartVisits.stroke" [tooltip]="chartVisits.tooltip" [xaxis]="chartVisits.xaxis" [yaxis]="chartVisits.yaxis"></apx-chart>
+                </div>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 xl:grid-cols-3 gap-8 w-full mt-8">
+            <!-- Recent transactions table -->
+            <div class="xl:col-span-2 flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
+                <div class="p-6">
+                    <div class="mr-4 text-lg font-medium tracking-tight leading-6 truncate">Recent transactions</div>
+                    <!-- <div class="text-secondary font-medium">1 pending, 4 completed</div> -->
+                </div>
+                <div class="overflow-x-auto mx-6">
+                    <table class="w-full bg-transparent" mat-table matSort [dataSource]="recentTransactionsDataSource" [trackBy]="trackByFn" #recentTransactionsTable>
+
+                        <!-- Transaction ID -->
+                        <ng-container matColumnDef="transactionId">
+                            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                                Transaction ID
+                            </th>
+                            <td mat-cell *matCellDef="let transaction">
+                                <span class="pr-6 font-medium text-sm text-secondary whitespace-nowrap">
+                                    {{transaction.transactionId}}
+                                </span>
+                            </td>
+                        </ng-container>
+
+                        <!-- Date -->
+                        <ng-container matColumnDef="date">
+                            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                                Date
+                            </th>
+                            <td mat-cell *matCellDef="let transaction">
+                                <span class="pr-6 whitespace-nowrap">
+                                    {{transaction.date | date:'MMM dd, y'}}
+                                </span>
+                            </td>
+                        </ng-container>
+
+                        <!-- Name -->
+                        <ng-container matColumnDef="name">
+                            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                                Name
+                            </th>
+                            <td mat-cell *matCellDef="let transaction">
+                                <span class="pr-6 whitespace-nowrap">
+                                    {{transaction.name}}
+                                </span>
+                            </td>
+                        </ng-container>
+
+                        <!-- Amount -->
+                        <ng-container matColumnDef="discount">
+                            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                                Amount Discounted
+                            </th>
+                            <td mat-cell *matCellDef="let transaction">
+                                <span class="pr-6 font-medium whitespace-nowrap">
+                                    {{(transaction.amount - 900) | currency:'GH¢'}}
+                                </span>
+                            </td>
+                        </ng-container>
+
+                        <!-- Amount -->
+                        <ng-container matColumnDef="amount">
+                            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                                Amount Paid
+                            </th>
+                            <td mat-cell *matCellDef="let transaction">
+                                <span class="pr-6 font-medium whitespace-nowrap">
+                                    {{transaction.amount | currency:'GH¢'}}
+                                </span>
+                            </td>
+                        </ng-container>
 
-</div>
+                        <!-- Status -->
+                        <ng-container matColumnDef="status">
+                            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                                Status
+                            </th>
+                            <td mat-cell *matCellDef="let transaction">
+                                <span class="inline-flex items-center font-bold text-xs px-2.5 py-0.5 rounded-full tracking-wide uppercase" [ngClass]="{'bg-red-200 text-red-800 dark:bg-red-600 dark:text-red-50': transaction.status === 'pending',
+                                            'bg-green-200 text-green-800 dark:bg-green-600 dark:text-green-50': transaction.status === 'completed'}">
+                                    <span class="leading-relaxed whitespace-nowrap">{{transaction.status}}</span>
+                                </span>
+                            </td>
+                        </ng-container>
+
+                        <!-- Footer -->
+                        <ng-container matColumnDef="recentOrdersTableFooter">
+                            <td class="py-6 px-0 border-0" mat-footer-cell *matFooterCellDef colspan="6">
+                                <button mat-stroked-button>See all transactions</button>
+                            </td>
+                        </ng-container>
+
+                        <tr mat-header-row *matHeaderRowDef="recentTransactionsTableColumns"></tr>
+                        <tr class="order-row h-16" mat-row *matRowDef="let row; columns: recentTransactionsTableColumns;"></tr>
+                        <tr class="h-16 border-0" mat-footer-row *matFooterRowDef="['recentOrdersTableFooter']"></tr>
+                    </table>
+                </div>
+            </div>
+
+            <!-- Views List -->
+            <div class="flex flex-col flex-auto p-6 bg-card rounded-2xl shadow">
+                <div class="flex items-center">
+                    <div class="flex flex-col">
+                        <div class="mr-4 text-lg font-medium tracking-tight leading-6 truncate" *ngIf="couponStats">
+                            Coupon Statistics</div>
+                        <div class="mr-4 text-lg font-medium tracking-tight leading-6 truncate" *ngIf="!couponStats">
+                            Coupon Views</div>
+                        <!-- <div class="text-secondary font-medium">Monthly budget summary</div> -->
+                    </div>
+                    <div class="ml-auto -mt-2 -mr-2">
+                        <button mat-icon-button (click)="switchCouponStats()">
+                            <mat-icon>code</mat-icon>
+                        </button>
+
+                    </div>
+                </div>
+                <div class="mt-6" *ngIf="!couponStats">
+                    The following Teso users have shown interest in some of your coupons. Click to further engage them by sending them personalized coupons
+                </div>
+                <div class="mt-6" *ngIf="couponStats">
+                    The chart below depicts your shops top performing types of coupons
+                </div>
+                <div class="my-8 space-y-8">
+                    <div class="flex flex-col">
+                        <div class="flex items-center">
+                            <div class="flex items-center justify-center w-14 h-14 rounded bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50">
+                                <mat-icon class="text-current" [svgIcon]="'heroicons_outline:credit-card'"></mat-icon>
+                            </div>
+                            <div class="flex-auto ml-4 leading-none">
+                                <div class="text-sm font-medium text-secondary">Freebies</div>
+                                <div class="mt-2 font-medium text-2xl">{{dataE.budget.expenses | currency:'GH¢'}}</div>
+                                <mat-progress-bar class="mt-3 rounded-full" [color]="'warn'" [mode]="'determinate'" [value]="(dataE.budget.expenses  * 100) / dataE.budget.expensesLimit">
+                                </mat-progress-bar>
+                            </div>
+                            <div class="flex items-end justify-end min-w-18 mt-auto ml-6">
+                                <div class="text-lg leading-none">2.6%</div>
+                                <mat-icon class="text-green-600 icon-size-4 ml-1" [svgIcon]="'heroicons_solid:arrow-narrow-down'"></mat-icon>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="flex items-center">
+                            <div class="flex items-center justify-center w-14 h-14 rounded bg-indigo-100 text-indigo-800 dark:bg-indigo-600 dark:text-indigo-50">
+                                <mat-icon class="text-current" [svgIcon]="'heroicons_outline:cash'"></mat-icon>
+                            </div>
+                            <div class="flex-auto ml-4 leading-none">
+                                <div class="text-sm font-medium text-secondary">Discount</div>
+                                <div class="mt-2 font-medium text-2xl">{{dataE.budget.savings | currency:'GH¢'}}</div>
+                                <mat-progress-bar class="mt-3 rounded-full" [mode]="'determinate'" [value]="(dataE.budget.savings  * 100) / dataE.budget.savingsGoal">
+                                </mat-progress-bar>
+                            </div>
+                            <div class="flex items-end justify-end min-w-18 mt-auto ml-6">
+                                <div class="text-lg leading-none">12.7%</div>
+                                <mat-icon class="text-red-600 icon-size-4 ml-1" [svgIcon]="'heroicons_solid:arrow-narrow-up'"></mat-icon>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="flex items-center">
+                            <div class="flex items-center justify-center w-14 h-14 rounded bg-teal-100 text-teal-800 dark:bg-teal-600 dark:text-teal-50">
+                                <mat-icon class="text-current" [svgIcon]="'heroicons_outline:light-bulb'"></mat-icon>
+                            </div>
+                            <div class="flex-auto ml-4 leading-none">
+                                <div class="text-sm font-medium text-secondary">Proximity Coupons</div>
+                                <div class="mt-2 font-medium text-2xl">{{dataE.budget.bills | currency:'GH¢'}}</div>
+                                <mat-progress-bar class="mt-3 rounded-full" [mode]="'determinate'" [value]="(dataE.budget.bills  * 100) / dataE.budget.billsLimit"></mat-progress-bar>
+                            </div>
+                            <div class="flex items-end justify-end min-w-18 mt-auto ml-6">
+                                <div class="text-lg leading-none">105.7%</div>
+                                <mat-icon class="text-red-600 icon-size-4 ml-1" [svgIcon]="'heroicons_solid:arrow-narrow-up'"></mat-icon>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/admin/Dashboard/dashboard.module.ts

@@ -1,20 +1,37 @@
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { Route, RouterModule } from '@angular/router';
 import { DashboardComponent } from 'app/pages/admin/Dashboard/dashboard.component';
+import { SharedModule } from 'app/shared/shared.module';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { dashboardRoutes } from './dashboard.routing';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 
-const exampleRoutes: Route[] = [
-    {
-        path     : '',
-        component: DashboardComponent
-    }
-];
 
 @NgModule({
     declarations: [
         DashboardComponent
     ],
     imports     : [
-        RouterModule.forChild(exampleRoutes)
+        RouterModule.forChild(dashboardRoutes),
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatDividerModule,
+        MatIconModule,
+        MatMenuModule,
+        MatProgressBarModule,
+        MatSortModule,
+        MatTableModule,
+        MatTooltipModule,
+        NgApexchartsModule,
+        SharedModule
     ]
 })
 export class DashboardModule

src/app/pages/admin/Dashboard/dashboard.routing.ts

@@ -0,0 +1,9 @@
+import { Route } from '@angular/router';
+import { DashboardComponent } from './dashboard.component';
+
+export const dashboardRoutes: Route[] = [
+    {
+        path     : '',
+        component: DashboardComponent
+    }
+];

src/app/pages/admin/Dashboard/dashboard.service.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { analytics as analyticsData } from 'app/mock-api/dashboards/analytics/data';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class DashboardService
+{
+    private _data: BehaviorSubject<any> = new BehaviorSubject(null);
+
+    /**
+     * Constructor
+     */
+    constructor(private _httpClient: HttpClient)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for data
+     */
+    get data$(): Observable<any>
+    {
+        return this._data.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get data
+     */
+    getData(): Observable<any>
+    {
+        console.log(analyticsData)
+        return this._httpClient.get('api/dashboards/analytics').pipe(
+            tap((response: any) => {
+                console.log(response)
+                this._data.next(analyticsData);
+            })
+        );
+    }
+}

src/app/pages/admin/Followers/followers.component.html

@@ -0,0 +1 @@
+<p>followers works!</p>

src/app/pages/admin/Followers/followers.component.spec.ts

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

src/app/pages/admin/Followers/followers.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-followers',
+  templateUrl: './followers.component.html',
+  styleUrls: ['./followers.component.scss']
+})
+export class FollowersComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/admin/Followers/followers.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class FollowersModule { }

src/app/pages/admin/Monthly_Desires/desires.component.html

@@ -0,0 +1 @@
+<p>desires works!</p>

src/app/pages/admin/Monthly_Desires/desires.component.spec.ts

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

src/app/pages/admin/Monthly_Desires/desires.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-desires',
+  templateUrl: './desires.component.html',
+  styleUrls: ['./desires.component.scss']
+})
+export class DesiresComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/admin/Monthly_Desires/desires.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class DesiresModule { }

src/app/pages/admin/Products/products.component.html

@@ -0,0 +1 @@
+<p>products works!</p>

src/app/pages/admin/Products/products.component.spec.ts

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

src/app/pages/admin/Products/products.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-products',
+  templateUrl: './products.component.html',
+  styleUrls: ['./products.component.scss']
+})
+export class ProductsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/admin/Products/products.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class ProductsModule { }

src/app/pages/admin/Profile/profile.component.html

@@ -0,0 +1 @@
+<p>profile works!</p>

src/app/pages/admin/Profile/profile.component.spec.ts

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

src/app/pages/admin/Profile/profile.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss']
+})
+export class ProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/admin/Profile/profile.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class ProfileModule { }

src/app/pages/admin/Settings/settings.component.html

@@ -0,0 +1 @@
+<p>settings works!</p>

src/app/pages/admin/Settings/settings.component.spec.ts

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

src/app/pages/admin/Settings/settings.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/admin/Settings/settings.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class SettingsModule { }