called terminal api

subsidian-financial-technology-ltd · Jan 26, 2024 · 0f36171 · 0f36171
1 parent ea30301
commit 0f36171
Show file tree

Hide file tree

Showing 18 changed files with 172 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^16.0.0",
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
+    "@auth0/angular-jwt": "^5.2.0",
     "jwt-decode": "^3.1.2",
     "ng-angular-popup": "^0.4.7",
     "ngx-otp-input": "^0.11.4",

diff --git a/src/app/components/auth/singin/singin.component.ts b/src/app/components/auth/singin/singin.component.ts
@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { NgxOtpInputConfig } from 'ngx-otp-input';
 import { NgToastService } from 'ng-angular-popup';
 import { AuthService } from 'src/app/services/auth.service';
+import { UtilService } from 'src/app/services/util.service';
 // import {Component} from '@angular/core';
 
 
@@ -151,6 +152,8 @@ console.log(this.formSubmitted);
       }
       this.authService.validateToken(optObj).subscribe({
         next:(res: any)=>{
+          // console.log("================")
+          // UtilService.setUserDetails(res.data);
           console.log(res)
 
         },
@@ -173,6 +176,7 @@ console.log(this.formSubmitted);
       this.authService.validateToken(JSON.stringify(optObj)).subscribe({
         next:(res: any)=>{
           console.log(res);
+          UtilService.setUserDetails(res.data);
           this.router.navigate(['dashboard']);
           window.localStorage.setItem('token', res?.token);
           console.log("success");

diff --git a/src/app/components/dashboard/analytic/analytic.component.html b/src/app/components/dashboard/analytic/analytic.component.html
@@ -182,15 +182,15 @@ <h2 class="text-[#15192C] font-[600] text-[27px] leading-[33px]">Analysis Overvi
                             <span class="text-[#B5850B]">Pending</span>
                         </div>
 
-                        <div *ngIf="terminal.status === 'succeded' "
+                        <div *ngIf="terminal.status === 'SUCCEEDED' "
                             class="bg-[#EDFFEA] p-[1rem] py-[0.5rem] flex items-center justify-center w-[120px] gap-[1rem] rounded-[4px]">
                             <div>
                                 <img src="/assets/images/success.png" alt="">
                             </div>
                             <span class="text-[#165E3D]">Succeded</span>
                         </div>
 
-                        <div *ngIf="terminal.status === 'rejected' "
+                        <div *ngIf="terminal.status === 'DECLINED' "
                             class="bg-[#FFEAEA] p-[1rem] py-[0.5rem] flex items-center justify-center w-[120px] gap-[1rem] rounded-[4px]">
                             <div>
                                 <img src="/assets/images/declined.png" alt="">
@@ -210,7 +210,7 @@ <h2 class="text-[#15192C] font-[600] text-[27px] leading-[33px]">Analysis Overvi
                                 <img src="/assets/images/mastercard-logo.png" alt="">
                             </div>
                             <div>
-                                {{terminal.cardRef}}
+                                {{terminal.paymentMethod}}
 
                             </div>
                         </div>
@@ -230,13 +230,13 @@ <h2 class="text-[#15192C] font-[600] text-[27px] leading-[33px]">Analysis Overvi
         </table>
         <div class="mt-[4rem] bg-[#fff] flex justify-between p-[1rem] px-[2rem]">
             <div>
-                <span> {{size}} Result</span>
+                <span> {{totalNumOfEntry}} Result</span>
             </div>
-            <div class="flex justify-end gap-[2rem] md:mr-[20rem]">
-                <div (click)="pageIncrement()" class="p-[1rem] py-[0.5rem] border rounded-[4px]">
+            <div class="flex justify-end gap-[2rem]">
+                <div (click)="previousPage()" class="p-[1rem] py-[0.5rem] border rounded-[4px]">
                     Previous
                 </div>
-                <div (click)="pageDecrement()" class="p-[1rem] py-[0.5rem] border rounded-[4px]">
+                <div (click)="nextPage()" class="p-[1rem] py-[0.5rem] border rounded-[4px]">
                     Next
                 </div>
             </div>

diff --git a/src/app/components/dashboard/analytic/analytic.component.ts b/src/app/components/dashboard/analytic/analytic.component.ts
@@ -17,6 +17,16 @@ export class AnalyticComponent {
 
   }
 
+  terminalFilterRequest = {
+    status: null,
+    paymentId: null,
+    creationDate: null,
+    page: 0,
+    size: 10
+  }
+  numOfPages: number = 0;
+  totalNumOfEntry: number = 0;
+
   constructor(private terminalService: TerminalService) { }
 
   ngOnInit(): void {
@@ -29,7 +39,9 @@ export class AnalyticComponent {
     this.terminalService.getTransactions(this.page, this.size).subscribe({
       next: (response: any) => {
         this.apiResponse = response;
-        this.data = this.apiResponse?.content;
+        this.data = this.apiResponse?.data?.content;
+        this.totalNumOfEntry = this.apiResponse?.data?.totalElements;
+        this.getNumberOfPages(this.totalNumOfEntry);
         console.log(this.data);
       },
       error: (items: any) => {
@@ -38,6 +50,7 @@ export class AnalyticComponent {
     })
   }
 
+
   getAnalyticsOverview(): void {
     this.terminalService.getAnalyticsOverview().subscribe({
       next: (response: any) => {
@@ -65,4 +78,28 @@ export class AnalyticComponent {
     }
   }
 
+  getNumberOfPages(totalEntry: number): void {
+    console.log(totalEntry);
+    console.log(this.terminalFilterRequest.size);
+    if (totalEntry % this.terminalFilterRequest.size == 0) {
+      this.numOfPages = totalEntry / this.terminalFilterRequest.size;
+    } else {
+      this.numOfPages = 1 + Math.floor(totalEntry / this.terminalFilterRequest.size);
+    }
+  }
+
+  nextPage(): void {
+    if (this.terminalFilterRequest.page + 1 < this.numOfPages) {
+      this.terminalFilterRequest.page = this.terminalFilterRequest.page + 1;
+      this.getTerminals();
+    }
+  }
+
+  previousPage(): void {
+    if (this.terminalFilterRequest.page + 1 > 1) {
+      this.terminalFilterRequest.page = this.terminalFilterRequest.page - 1;
+      this.getTerminals();
+    }
+  }
+
 }
diff --git a/src/app/components/dashboard/overview/overview.component.html b/src/app/components/dashboard/overview/overview.component.html
@@ -48,7 +48,7 @@ <h2 class="text-[#15192C] font-[600] text-[27px] leading-[33px]">Dashboard</h2>
                             <p>Active</p>
                         </div>
                         <div class="text-[20px] leading-[30px] text-[#15192C]">
-                            <p>{{overviewReport?.balance}}</p>
+                            <p>{{overviewReport?.numberOfTerminals}}</p>
                         </div>
                     </div>
                 </div>
@@ -66,7 +66,7 @@ <h2 class="text-[#15192C] font-[600] text-[27px] leading-[33px]">Dashboard</h2>
                             <p>Users</p>
                         </div>
                         <div class="text-[20px] leading-[30px] text-[#15192C]">
-                            <p>{{overviewReport?.numberOfTerminals}}</p>
+                            <p>{{overviewReport?.activeTerminal}}</p>
                         </div>
                     </div>
                 </div>
@@ -84,7 +84,7 @@ <h2 class="text-[#15192C] font-[600] text-[27px] leading-[33px]">Dashboard</h2>
                             <p>Users</p>
                         </div>
                         <div class="text-[20px] leading-[30px] text-[#15192C]">
-                            <p>{{overviewReport?.numberOfTerminals}}</p>
+                            <p>{{overviewReport?.numberOfUsers}}</p>
                         </div>
                     </div>
                 </div>
@@ -98,7 +98,7 @@ <h2 class="text-[#15192C] font-[600] text-[27px] leading-[33px]">Dashboard</h2>
                             <p>Balance</p>
                         </div>
                         <div class="text-[20px] leading-[30px] text-[#15192C]">
-                            <p class="whitespace-nowrap">{{overviewReport?.numberOfUsers}}</p>
+                            <p class="whitespace-nowrap">{{overviewReport?.balance}}</p>
                         </div>
                     </div>
                 </div>
@@ -116,22 +116,25 @@ <h2 class="text-[#15192C] font-[600] text-[27px] leading-[33px]">Dashboard</h2>
                         </div>
                     </div>
 
-                    <div class="" *ngFor="let deposit of deposits">
-                        <div class="">
+                    <div class="mb-[1rem]" *ngFor="let deposit of deposits">
+                        <div class="flex w-full gap-[1rem]">
                             <div class="">
-                                <img src="/assets/images/calc.png" />
+                                <img src="/assets/images/calc.png" alt="dummy"/>
                             </div>
-                            <div class="">
+                            <div class="w-[100%] flex justify-between">
                                 <div class="">
-                                    <p>{{deposit?.location}}</p>
+                                    <div class="text-[12px] font-[800]">
+                                        <p>{{deposit?.location}}</p>
+                                    </div>
+                                    <div class="text-[12px] font-[500]">
+                                        <p>{{deposit?.operatorName}}</p>
+                                    </div>
                                 </div>
-                                <div class="">
-                                    <p>{{deposit?.operatorName}}</p>
+                                <div class="text-[green]">
+                                    <p class="">+N{{deposit?.amount}}</p>
                                 </div>
                             </div>
-                            <div class="">
-                                <p>+N{{deposit?.amount}}</p>
-                            </div>
+
                         </div>
                     </div>
 

diff --git a/src/app/components/dashboard/overview/overview.component.ts b/src/app/components/dashboard/overview/overview.component.ts
@@ -9,7 +9,7 @@ import { DashboardService } from 'src/app/dashboard.service';
 export class OverviewComponent{
 
   overviewReport: any;
-  deposits:any;
+  deposits:any = [];
   withdrawal:any;
   constructor( private dashboardService: DashboardService){
 
@@ -36,8 +36,8 @@ export class OverviewComponent{
     getDeposit(): void {
       this.dashboardService.getDeposit().subscribe({
         next: (response) => {
-          console.log("response =>>>>", response);
-          this.deposits = response.content;
+          console.log("response =>>>> array", response);
+          this.deposits = response?.data?.content;
           console.log(this.deposits);
         },
         error: (error) => {

diff --git a/src/app/components/dashboard/sidenav/nav-data.ts b/src/app/components/dashboard/sidenav/nav-data.ts
@@ -4,7 +4,7 @@ export const navbarData: INavbarData[] = [
 
     {
         routeLink: 'overview',
-        icon: 'assets/icons/Document.png',
+        icon: 'fas fa-eye',
         label: 'Overview',
         // items: [
         //     {
@@ -39,12 +39,12 @@ export const navbarData: INavbarData[] = [
     },
     {
         routeLink: 'analytic',
-        icon: 'assets/icons/Wallet.png',
+        icon: 'fas fa-chart-line',
         label: 'Analytic'
     },
     {
-        routeLink: 'manage-terminal',
-        icon: 'fal fa-tags',
+        routeLink: 'manage-terminal/*',
+        icon: 'fas fa-cash-register',
         label: 'Manage Terminal',
         // items: [
         //     {
@@ -59,7 +59,7 @@ export const navbarData: INavbarData[] = [
     },
     {
         routeLink: 'refund-transaction',
-        icon: 'assets/icons/Stroke 1.png',
+        icon: 'fas fa-arrow-left',
         label: 'Refund Transactions'
     },
     // {
@@ -69,7 +69,7 @@ export const navbarData: INavbarData[] = [
     // },
     {
         routeLink: 'profile',
-        icon: 'assets/icons/Profile.png',
+        icon: 'fa fa-user',
         label: 'Profile'
     }
     ,

diff --git a/src/app/components/dashboard/sidenav/sidenav.component.html b/src/app/components/dashboard/sidenav/sidenav.component.html
@@ -13,10 +13,10 @@
             <div class="md:col-span-4 col-span-1 p-[1rem] py-[0.5rem] bg-[#fff] rounded-[8px]">
                 <select id="countries"
                     class="outline-none text-[#4B5563] text-[14px] leading-[150%] text-[ #4B5563] rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                    <option selected>Ogbodo Uchenna</option>
-                    <option value="US">Remiter</option>
+                    <option selected>{{userDetails.firstName}} {{userDetails.lastName}}</option>
+                    <!-- <option value="US">Remiter</option>
                     <option value="CA">Interswitch</option>
-                    <option value="FR">Flutterwave</option>
+                    <option value="FR">Flutterwave</option> -->
                 </select>
 
             </div>
@@ -62,7 +62,8 @@
                     [routerLink]="[data.routeLink]" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"
                     (click)="shrinkItems(data)">
                     <!-- <i class="sidenav-link-icon" [class]="data.icon"></i> -->
-                    <img class="sidenav-link-icon" [src]="data.icon">
+                    <!-- <img class="sidenav-link-icon" [src]="data.icon"> -->
+                    <i class="text-[2rem] font-[900]" [class]="data.icon"></i>
 
 
                     <span class="sidenav-link-text" *ngIf="collapsed">
@@ -88,7 +89,7 @@
                         [expanded]="data.expanded"></app-sublevel-menu>
                 </div>
             </li>
-            <li class="log-out">
+            <li (click)="logOut()" class="log-out flex">
                 <div>
                     <img class="sidenav-link-icon" src="/assets/images/Logout.png">
                 </div>

diff --git a/src/app/components/dashboard/sidenav/sidenav.component.scss b/src/app/components/dashboard/sidenav/sidenav.component.scss
@@ -243,14 +243,13 @@
     background-color: #7B57FC;
     color: #fff;
     // position:;
-    margin-top: 330px;
-
+    margin-top: 380px;
 
     left: 0;
     // display: block;
     text-align: center;
     padding: 20px;
     display: flex;
     gap: 1rem;
-    justify-content: center;
+    // justify-content: center;
 }
diff --git a/src/app/components/dashboard/sidenav/sidenav.component.ts b/src/app/components/dashboard/sidenav/sidenav.component.ts
@@ -3,6 +3,7 @@ import { Component, Output, EventEmitter, OnInit, HostListener } from '@angular/
 import { Router } from '@angular/router';
 import { fadeInOut, INavbarData } from './helper';
 import { navbarData } from './nav-data';
+import { UtilService } from 'src/app/services/util.service';
 
 interface SideNavToggle {
   screenWidth: number;
@@ -35,6 +36,7 @@ export class SidenavComponent implements OnInit {
   navData = navbarData;
   multiple: boolean = false;
   isClicked = false;
+  userDetails = UtilService.getUserDetails() || "";
 
   @HostListener('window:resize', ['$event'])
   onResize(event: any) {
@@ -79,4 +81,8 @@ export class SidenavComponent implements OnInit {
       }
     }
   }
+
+  logOut(): void {
+    UtilService.clearStorage();
+  }
 }