종목별매출통계

src/app/mock-api/apps/report/statistics/api.ts

@@ -1,13 +1,19 @@
 import { Injectable } from '@angular/core';
 import { assign, cloneDeep } from 'lodash-es';
 import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
-import { statisticss as statisticssData } from './data';
+import { statistics as statisticsData } from './data';
+import { casinoStatistics as casinoStatisticsData } from './data';
+import { slotStatistics as slotStatisticsData } from './data';
+import { powerballStatistics as powerballStatisticsData } from './data';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ReportStatisticsMockApi {
-  private _statisticss: any[] = statisticssData;
+  private _statistics: any[] = statisticsData;
+  private _casinoStatistics: any[] = casinoStatisticsData;
+  private _slotStatistics: any[] = slotStatisticsData;
+  private _powerballStatistics: any[] = powerballStatisticsData;
 
   /**
    * Constructor
@@ -26,24 +32,28 @@ export class ReportStatisticsMockApi {
    */
   registerHandlers(): void {
     // -----------------------------------------------------------------------------------------------------
-    // @ Statisticss - GET
+    // @ Statistics - GET
     // -----------------------------------------------------------------------------------------------------
     this._fuseMockApiService
-      .onGet('api/apps/report/statistics/statisticss', 300)
+      .onGet('api/apps/report/statistics', 300)
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
+        const sort = request.params.get('sort') || 'casinoUse';
         const order = request.params.get('order') || 'asc';
         const page = parseInt(request.params.get('page') ?? '1', 10);
         const size = parseInt(request.params.get('size') ?? '10', 10);
 
-        // Clone the statisticss
+        // Clone the statistics
-        let statisticss: any[] | null = cloneDeep(this._statisticss);
+        let statistics: any[] | null = cloneDeep(this._statistics);
 
-        // Sort the statisticss
+        // Sort the statistics
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
+        if (
-          statisticss.sort((a, b) => {
+          sort === 'casinoUse' ||
+          sort === 'slotUse' ||
+          sort === 'powerballUse'
+        ) {
+          statistics.sort((a, b) => {
             const fieldA = a[sort].toString().toUpperCase();
             const fieldB = b[sort].toString().toUpperCase();
             return order === 'asc'
@@ -51,15 +61,15 @@ export class ReportStatisticsMockApi {
               : fieldB.localeCompare(fieldA);
           });
         } else {
-          statisticss.sort((a, b) =>
+          statistics.sort((a, b) =>
             order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
           );
         }
 
         // If search exists...
         if (search) {
-          // Filter the statisticss
+          // Filter the statistics
-          statisticss = statisticss.filter(
+          statistics = statistics.filter(
             (contact: any) =>
               contact.name &&
               contact.name.toLowerCase().includes(search.toLowerCase())
@@ -67,32 +77,32 @@ export class ReportStatisticsMockApi {
         }
 
         // Paginate - Start
-        const statisticssLength = statisticss.length;
+        const statisticsLength = statistics.length;
 
         // Calculate pagination details
         const begin = page * size;
-        const end = Math.min(size * (page + 1), statisticssLength);
+        const end = Math.min(size * (page + 1), statisticsLength);
-        const lastPage = Math.max(Math.ceil(statisticssLength / size), 1);
+        const lastPage = Math.max(Math.ceil(statisticsLength / size), 1);
 
         // Prepare the pagination object
         let pagination = {};
 
         // If the requested page number is bigger than
         // the last possible page number, return null for
-        // statisticss but also send the last possible page so
+        // statistics but also send the last possible page so
         // the app can navigate to there
         if (page > lastPage) {
-          statisticss = null;
+          statistics = null;
           pagination = {
             lastPage,
           };
         } else {
           // Paginate the results by size
-          statisticss = statisticss.slice(begin, end);
+          statistics = statistics.slice(begin, end);
 
           // Prepare the pagination mock-api
           pagination = {
-            length: statisticssLength,
+            length: statisticsLength,
             size: size,
             page: page,
             lastPage: lastPage,
@@ -105,7 +115,7 @@ export class ReportStatisticsMockApi {
         return [
           200,
           {
-            statisticss,
+            statistics,
             pagination,
           },
         ];
@@ -120,16 +130,73 @@ export class ReportStatisticsMockApi {
         // Get the id from the params
         const id = request.params.get('id');
 
-        // Clone the statisticss
+        // Clone the statistics
-        const statisticss = cloneDeep(this._statisticss);
+        const statistics = cloneDeep(this._statistics);
 
         // Find the statistics
-        const statistics = statisticss.find((item: any) => item.id === id);
+        statistics.find((item: any) => item.id === id);
 
         // Return the response
         return [200, statistics];
       });
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ CasinoStatistics - GET
+    // -----------------------------------------------------------------------------------------------------
+    this._fuseMockApiService
+      .onGet('api/apps/report/statistics/casino-statistics')
+      .reply(({ request }) => {
+        // Get the type from the params
+        const id = request.params.get('type');
+
+        // Clone the statistics
+        const casinoStatistics = cloneDeep(this._statistics);
+
+        // Find the statistics
+        casinoStatistics.find((item: any) => item.type === id);
+
+        // Return the response
+        return [200, casinoStatistics];
+      });
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ SlotStatistics - GET
+    // -----------------------------------------------------------------------------------------------------
+    this._fuseMockApiService
+      .onGet('api/apps/report/statistics/slot-statistics')
+      .reply(({ request }) => {
+        // Get the type from the params
+        const id = request.params.get('type');
+
+        // Clone the statistics
+        const slotStatistics = cloneDeep(this._statistics);
+
+        // Find the statistics
+        slotStatistics.find((item: any) => item.type === id);
+
+        // Return the response
+        return [200, slotStatistics];
+      });
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ PowerballStatistics - GET
+    // -----------------------------------------------------------------------------------------------------
+    this._fuseMockApiService
+      .onGet('api/apps/report/statistics/powerball-statistics')
+      .reply(({ request }) => {
+        // Get the type from the params
+        const id = request.params.get('type');
+
+        // Clone the statistics
+        const powerballStatistics = cloneDeep(this._statistics);
+
+        // Find the statistics
+        powerballStatistics.find((item: any) => item.type === id);
+
+        // Return the response
+        return [200, powerballStatistics];
+      });
+
     // -----------------------------------------------------------------------------------------------------
     // @ Statistics - POST
     // -----------------------------------------------------------------------------------------------------
@@ -160,7 +227,7 @@ export class ReportStatisticsMockApi {
         };
 
         // Unshift the new statistics
-        this._statisticss.unshift(newStatistics);
+        this._statistics.unshift(newStatistics);
 
         // Return the response
         return [200, newStatistics];
@@ -180,13 +247,13 @@ export class ReportStatisticsMockApi {
         let updatedStatistics = null;
 
         // Find the statistics and update it
-        this._statisticss.forEach((item, index, statisticss) => {
+        this._statistics.forEach((item, index, statistics) => {
           if (item.id === id) {
             // Update the statistics
-            statisticss[index] = assign({}, statisticss[index], statistics);
+            statistics[index] = assign({}, statistics[index], statistics);
 
             // Store the updated Statistics
-            updatedStatistics = statisticss[index];
+            updatedStatistics = statistics[index];
           }
         });
 
@@ -204,9 +271,9 @@ export class ReportStatisticsMockApi {
         const id = request.params.get('id');
 
         // Find the statistics and delete it
-        this._statisticss.forEach((item, index) => {
+        this._statistics.forEach((item, index) => {
           if (item.id === id) {
-            this._statisticss.splice(index, 1);
+            this._statistics.splice(index, 1);
           }
         });
 

src/app/mock-api/apps/report/statistics/data.ts

@@ -1,6 +1,111 @@
 /* eslint-disable */
 
-export const statisticss = [
+export const statistics = [
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    gameName: '라이브카지노',
+    casinoUse: 2,
+    casinoBetting: 1183000,
+    casinoCancel: 10000,
+    casinoAvailable: 1140000,
+    casinoWinning: 979050,
+    casinoWinLoss: 193950,
+    casinoCommission: 14810,
+    casinoBetWinCalculate: 179140,
+    slotUse: 2,
+    slotBetting: 225000,
+    slotCancel: 0,
+    slotAvailable: 225000,
+    slotWinning: 114280,
+    slotWinLoss: 110720,
+    slotTotalCommission: 11250,
+    slotBetWinCalculate: 99470,
+    powerballUse: 0,
+    powerballBetting: 0,
+    powerballWinning: 0,
+    powerballWinLoss: 0,
+    powerballCommission: 0,
+    powerballBetWinCalculate: 0,
+    totalUse: 4,
+    totalAvailable: 1365000,
+    totalBetting: 1408000,
+    totalCancel: 10000,
+    totalWinLoss: 304670,
+    totalCommission: 26060,
+    totalBetWinCalculate: 278610,
+  },
+];
+export const casinoStatistics = [
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    gameName: '슬롯',
+    casinoUse: 2,
+    casinoBetting: 1183000,
+    casinoCancel: 10000,
+    casinoAvailable: 1140000,
+    casinoWinning: 979050,
+    casinoWinLoss: 193950,
+    casinoCommission: 14810,
+    casinoBetWinCalculate: 179140,
+    slotUse: 2,
+    slotBetting: 225000,
+    slotCancel: 0,
+    slotAvailable: 225000,
+    slotWinning: 114280,
+    slotWinLoss: 110720,
+    slotTotalCommission: 11250,
+    slotBetWinCalculate: 99470,
+    powerballUse: 0,
+    powerballBetting: 0,
+    powerballWinning: 0,
+    powerballWinLoss: 0,
+    powerballCommission: 0,
+    powerballBetWinCalculate: 0,
+    totalUse: 4,
+    totalAvailable: 1365000,
+    totalBetting: 1408000,
+    totalCancel: 10000,
+    totalWinLoss: 304670,
+    totalCommission: 26060,
+    totalBetWinCalculate: 278610,
+  },
+];
+export const slotStatistics = [
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    gameName: '파워볼',
+    casinoUse: 2,
+    casinoBetting: 1183000,
+    casinoCancel: 10000,
+    casinoAvailable: 1140000,
+    casinoWinning: 979050,
+    casinoWinLoss: 193950,
+    casinoCommission: 14810,
+    casinoBetWinCalculate: 179140,
+    slotUse: 2,
+    slotBetting: 225000,
+    slotCancel: 0,
+    slotAvailable: 225000,
+    slotWinning: 114280,
+    slotWinLoss: 110720,
+    slotTotalCommission: 11250,
+    slotBetWinCalculate: 99470,
+    powerballUse: 0,
+    powerballBetting: 0,
+    powerballWinning: 0,
+    powerballWinLoss: 0,
+    powerballCommission: 0,
+    powerballBetWinCalculate: 0,
+    totalUse: 4,
+    totalAvailable: 1365000,
+    totalBetting: 1408000,
+    totalCancel: 10000,
+    totalWinLoss: 304670,
+    totalCommission: 26060,
+    totalBetWinCalculate: 278610,
+  },
+];
+export const powerballStatistics = [
   {
     id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
     casinoUse: 2,

src/app/modules/admin/report/statistics/components/list.component.html

@@ -24,22 +24,8 @@
     *ngIf="__isSearchOpened"
     class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
   >
-    <!-- Actions -->
-    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- Search -->
-      <!-- Add user button -->
-      <button
-        mat-flat-button
-        [color]="'primary'"
-        fxFlex
-        (click)="__createProduct()"
-      >
-        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <span class="ml-2 mr-1">Search</span>
-      </button>
-    </div>
     <!-- Card inception -->
-    <div class="col-span-2 sm:col-span-1">
+    <!-- <div class="col-span-2 sm:col-span-1">
       <mat-form-field
         class="fuse-mat-no-subscript w-full"
         [floatLabel]="'always'"
@@ -55,9 +41,9 @@
         ></mat-datepicker-toggle>
         <mat-datepicker #picker1></mat-datepicker>
       </mat-form-field>
-    </div>
+    </div> -->
     <!-- Card expiration -->
-    <div class="col-span-2 sm:col-span-1">
+    <!-- <div class="col-span-2 sm:col-span-1">
       <mat-form-field
         class="fuse-mat-no-subscript w-full"
         [floatLabel]="'always'"
@@ -73,6 +59,35 @@
         ></mat-datepicker-toggle>
         <mat-datepicker #picker2></mat-datepicker>
       </mat-form-field>
+    </div> -->
+    <!-- Actions -->
+    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+      <!-- Add user button -->
+      <button
+        mat-flat-button
+        [color]="'primary'"
+        fxFlex
+        (click)="__createProduct()"
+      >
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        <span class="ml-2 mr-1">Search</span>
+      </button>
+    </div>
+
+    <div>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        어제
+      </button>
+    </div>
+    <div>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        오늘
+      </button>
+    </div>
+    <div>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        7일
+      </button>
     </div>
   </div>
 
@@ -82,103 +97,71 @@
     <div
       class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
     >
-      <ng-container *ngIf="statisticss$ | async as statistics">
+      <ng-container *ngIf="statistics$ | async as statistics">
         <ng-container *ngIf="statistics.length > 0; else noStatistics">
           <div class="grid">
             <!-- Header -->
             <div
               class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
             >
-              <div>요율</div>
+              <div>구분</div>
-              <!-- <div>상부</div>
+              <div>이용회원</div>
-              <div>
+              <div>유효배팅</div>
-                아이디
+              <div>배팅금액</div>
-                <hr style="margin: 7px 0px" />
+              <div class="hidden sm:block">당첨금액</div>
-                닉네임
+              <div class="hidden md:block">취소</div>
-                <hr style="margin: 7px 0px" />
+              <div class="hidden md:block">윈로스(A)</div>
-                연락처
+              <div class="hidden md:block">수수료(B)</div>
-              </div>
+              <div class="hidden lg:block">뱃윈정산(A-B)</div>
-              <div>
-                등급
-                <hr style="margin: 7px 0px" />
-                레벨
-              </div>
-              <div class="hidden sm:block">예금주</div>
-              <div class="hidden md:block">보유금</div>
-              <div class="hidden md:block">
-                게임중머니
-                <hr style="margin: 7px 0px" />
-                금일콤프
-              </div>
-              <div class="hidden md:block">총입출</div> -->
-              <div class="hidden lg:block">카지노->캐쉬</div>
             </div>
             <!-- Rows -->
-            <ng-container *ngIf="statisticss$ | async as statistics">
             <ng-container
               *ngFor="let statistics of statistics; trackBy: __trackByFn"
             >
               <div
                 class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
               >
-                  <div>요율</div>
+                <div>{{ statistics.gameName }}</div>
-                  <!-- <div>
+                <div>{{ statistics.casinoUse }}명</div>
-                    {{ dailyPartner.highRank }}
+                <div>{{ statistics.casinoAvailable }}원</div>
-                  </div>
+                <div>{{ statistics.casinoBetting }}원</div>
-                  <div>
-                    {{ dailyPartner.signinId }}
-                    <hr style="margin: 7px 0px" />
-                    {{ dailyPartner.nickname }}
-                    <hr style="margin: 7px 0px" />
-                    {{ dailyPartner.phoneNumber }}
-                  </div>
-                  <div>
-                    {{ dailyPartner.rank }}
-                    <hr style="margin: 7px 0px" />
-                    LV{{ dailyPartner.level }}
-                  </div>
                 <div class="hidden sm:block">
-                    {{ dailyPartner.accountHolder }}
+                  {{ statistics.casinoWinning }}원
                 </div>
                 <div class="hidden md:block">
-                    캐쉬{{ dailyPartner.ownCash }}
+                  {{ statistics.casinoCancel }}원
-                    <hr style="margin: 7px 0px" />
-                    콤프{{ dailyPartner.ownComp }}P
-                    <hr style="margin: 7px 0px" />
-                    쿠폰{{ dailyPartner.ownCoupon }}
                 </div>
                 <div class="hidden md:block">
-                    {{ dailyPartner.gameMoney }}
+                  {{ statistics.casinoWinLoss }}원
-                    <hr style="margin: 7px 0px" />
-                    {{ dailyPartner.todayComp }}P
                 </div>
                 <div class="hidden md:block">
-                    입금{{ dailyPartner.totalDeposit }}
+                  {{ statistics.casinoCommission }}P
-                    <hr style="margin: 7px 0px" />
+                </div>
-                    출금{{ dailyPartner.totalWithdraw }}
-                    <hr style="margin: 7px 0px" />
-                    차익{{ dailyPartner.balance }}
-                  </div> -->
                 <div class="hidden lg:block">
-                    <button
+                  {{ statistics.casinoBetWinCalculate }}원
-                      mat-flat-button
+                </div>
-                      class="bet-mat-small-8"
+
-                      [color]="'primary'"
+                <div>{{ statistics.gameName }}</div>
-                    >
+                <div>{{ statistics.casinoUse }}명</div>
-                      게임머니확인
+                <div>{{ statistics.casinoAvailable }}원</div>
-                    </button>
+                <div>{{ statistics.casinoBetting }}원</div>
-                    <hr style="margin: 7px 0px" />
+                <div class="hidden sm:block">
-                    <button
+                  {{ statistics.casinoWinning }}원
-                      mat-flat-button
+                </div>
-                      class="bet-mat-small-8"
+                <div class="hidden md:block">
-                      [color]="'primary'"
+                  {{ statistics.casinoCancel }}원
-                    >
+                </div>
-                      게임머니회수
+                <div class="hidden md:block">
-                    </button>
+                  {{ statistics.casinoWinLoss }}원
+                </div>
+                <div class="hidden md:block">
+                  {{ statistics.casinoCommission }}P
+                </div>
+                <div class="hidden lg:block">
+                  {{ statistics.casinoBetWinCalculate }}원
                 </div>
               </div>
             </ng-container>
-            </ng-container>
           </div>
 
           <mat-paginator

src/app/modules/admin/report/statistics/components/list.component.ts

@@ -42,18 +42,22 @@ import { Router } from '@angular/router';
     /* language=SCSS */
     `
       .inventory-grid {
-        grid-template-columns: 60px auto 40px;
+        /*                     구분   이용  유효   배팅   당첨   취소 */
+        grid-template-columns: 100px 100px auto 100px 100px 100px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          /*                     구분   이용  유효   배팅   당첨   취소 윈로스 수수료 뱃윈정산 */
+          grid-template-columns: 100px 100px auto 100px 100px 100px 100px 100px 100px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          /*                     구분   이용  유효   배팅   당첨   취소 윈로스 수수료 뱃윈정산 */
+          grid-template-columns: 100px 100px auto 100px 100px 100px 100px 100px 100px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          /*                     구분   이용  유효   배팅   당첨   취소 윈로스 수수료 뱃윈정산 */
+          grid-template-columns: 100px 100px auto 100px 100px 100px 100px 100px 100px;
         }
       }
     `,
@@ -66,7 +70,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
-  statisticss$!: Observable<Statistics[] | undefined>;
+  statistics$!: Observable<Statistics[] | undefined>;
   users$!: Observable<User[] | undefined>;
 
   __isSearchOpened = false;
@@ -108,7 +112,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
       });
 
     // Get the products
-    this.statisticss$ = this._statisticsService.statisticss$;
+    this.statistics$ = this._statisticsService.statistics$;
   }
 
   /**
@@ -139,7 +143,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
         .pipe(
           switchMap(() => {
             this.isLoading = true;
-            return this._statisticsService.getStatisticss(
+            return this._statisticsService.getStatistics(
               this._paginator.pageIndex,
               this._paginator.pageSize,
               this._sort.active,

src/app/modules/admin/report/statistics/components/view.component.html

@@ -0,0 +1,4 @@
+<!-- Title -->
+<div class="text-4xl font-extrabold tracking-tight">
+  종목별매출통계 상세page
+</div>

src/app/modules/admin/report/statistics/components/view.component.ts

@@ -0,0 +1,183 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import {
+  debounceTime,
+  map,
+  merge,
+  Observable,
+  Subject,
+  switchMap,
+  takeUntil,
+} from 'rxjs';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
+
+import { User } from 'app/modules/admin/member/user/models/user';
+import { UserService } from 'app/modules/admin/member/user/services/user.service';
+
+@Component({
+  selector: 'customer-view',
+  templateUrl: './view.component.html',
+  styles: [
+    /* language=SCSS */
+    `
+      .inventory-grid {
+        grid-template-columns: 48px auto 40px;
+
+        @screen sm {
+          grid-template-columns: 48px auto 112px 72px;
+        }
+
+        @screen md {
+          grid-template-columns: 48px 112px auto 112px 72px;
+        }
+
+        @screen lg {
+          grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
+        }
+      }
+    `,
+  ],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: fuseAnimations,
+})
+export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
+  @ViewChild(MatSort) private _sort!: MatSort;
+
+  isLoading = false;
+  searchInputControl = new FormControl();
+  selectedProductForm!: FormGroup;
+  selectedUser?: User;
+
+  private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+  /**
+   * Constructor
+   */
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _fuseConfirmationService: FuseConfirmationService,
+    private _formBuilder: FormBuilder,
+    private _userService: UserService
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    this.selectedProductForm = this._formBuilder.group({
+      id: [''],
+      signinId: [{ value: '', disabled: true }],
+      signinPw: [{ value: '' }],
+      exchangePw: [''],
+      description: [''],
+      tags: [[]],
+      nickname: [{ value: '', disabled: true }],
+      ownCash: [''],
+      phoneNumber: [''],
+      level: [''],
+      status: [''],
+      isExcahngeMoney: [''],
+      bankname: [''],
+      accountNumber: [''],
+      accountHolder: [''],
+      comp: [''],
+      coupon: [''],
+      recommender: [{ value: '', disabled: true }],
+      changeSite: [''],
+      recommendCount: [''],
+      hodingGameMoney: [{ value: '0', disabled: true }],
+      memo: [''],
+      bacaraRate: [],
+      rulletRate: [],
+      dragonRate: [],
+      etcRate: [],
+      slotRate: [],
+      casinoRusingRate: [],
+      slotRusingRate: [],
+    });
+
+    // Get the User
+    this._userService.user$
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((user: User | undefined) => {
+        if (!user) {
+          return;
+        }
+        this.selectedUser = user;
+
+        this.selectedProductForm.patchValue(user);
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+      });
+
+    /* this.user$ = this._userService.user$; */
+  }
+
+  /**
+   * After view init
+   */
+  ngAfterViewInit(): void {}
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next(null);
+    this._unsubscribeAll.complete();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Private methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Create product
+   */
+  __createProduct(): void {}
+
+  /**
+   * Toggle product details
+   *
+   * @param productId
+   */
+  __toggleDetails(productId: string): void {}
+
+  /**
+   * Track by function for ngFor loops
+   *
+   * @param index
+   * @param item
+   */
+  __trackByFn(index: number, item: any): any {
+    return item.id || index;
+  }
+}

src/app/modules/admin/report/statistics/models/casino-statistics.ts

@@ -0,0 +1,32 @@
+export interface CasinoStatistics {
+  id: string;
+  casinoUse?: number;
+  slotUse?: number;
+  powerballUse?: number;
+  casinoBetting?: number; //  카지노배팅
+  casinoCancel?: number; //  카지노취소
+  casinoAvailable?: number; //  카지노유효
+  casinoWinning?: number; //  카지노당첨
+  casinoWinLoss?: number; //  카지노윈로스(A)
+  casinoCommission?: number; //  카지노수수료(B)
+  casinoBetWinCalculate?: number; //  카지노벳윈정산 (A-B)
+  slotBetting?: number; //  슬롯배팅
+  slotCancel?: number; //  슬롯취소
+  slotAvailable?: number; //  슬롯유효
+  slotWinning?: number; //  슬롯당첨
+  slotWinLoss?: number; //  슬롯윈로스(D)
+  slotTotalCommission?: number; //  슬롯전체수수료(E)
+  slotBetWinCalculate?: number; //  슬롯벳윈정산(D-E)
+  powerballBetting?: number; //  파워볼배팅
+  powerballWinning?: number; //  파워볼당첨
+  powerballWinLoss?: number; //  파워볼윈로스(H)
+  powerballCommission?: number; //  파워볼수수료(I)
+  powerballBetWinCalculate?: number; //  파워볼벳윈정산(H-I)
+  totalUse?: number; //  총이용회원
+  totalAvailable?: number; //  총유효배팅
+  totalBetting?: number; //  총배팅
+  totalCancel?: number; //  총취소
+  totalWinLoss?: number; //  총윈로스
+  totalCommission?: number; //  총수수료
+  totalBetWinCalculate?: number; //  총벳윈정산
+}

src/app/modules/admin/report/statistics/models/powerball-statistics.ts

@@ -0,0 +1,32 @@
+export interface PowerballStatistics {
+  id: string;
+  casinoUse?: number;
+  slotUse?: number;
+  powerballUse?: number;
+  casinoBetting?: number; //  카지노배팅
+  casinoCancel?: number; //  카지노취소
+  casinoAvailable?: number; //  카지노유효
+  casinoWinning?: number; //  카지노당첨
+  casinoWinLoss?: number; //  카지노윈로스(A)
+  casinoCommission?: number; //  카지노수수료(B)
+  casinoBetWinCalculate?: number; //  카지노벳윈정산 (A-B)
+  slotBetting?: number; //  슬롯배팅
+  slotCancel?: number; //  슬롯취소
+  slotAvailable?: number; //  슬롯유효
+  slotWinning?: number; //  슬롯당첨
+  slotWinLoss?: number; //  슬롯윈로스(D)
+  slotTotalCommission?: number; //  슬롯전체수수료(E)
+  slotBetWinCalculate?: number; //  슬롯벳윈정산(D-E)
+  powerballBetting?: number; //  파워볼배팅
+  powerballWinning?: number; //  파워볼당첨
+  powerballWinLoss?: number; //  파워볼윈로스(H)
+  powerballCommission?: number; //  파워볼수수료(I)
+  powerballBetWinCalculate?: number; //  파워볼벳윈정산(H-I)
+  totalUse?: number; //  총이용회원
+  totalAvailable?: number; //  총유효배팅
+  totalBetting?: number; //  총배팅
+  totalCancel?: number; //  총취소
+  totalWinLoss?: number; //  총윈로스
+  totalCommission?: number; //  총수수료
+  totalBetWinCalculate?: number; //  총벳윈정산
+}

src/app/modules/admin/report/statistics/models/slot-statistics.ts

@@ -0,0 +1,32 @@
+export interface SlotStatistics {
+  id: string;
+  casinoUse?: number;
+  slotUse?: number;
+  powerballUse?: number;
+  casinoBetting?: number; //  카지노배팅
+  casinoCancel?: number; //  카지노취소
+  casinoAvailable?: number; //  카지노유효
+  casinoWinning?: number; //  카지노당첨
+  casinoWinLoss?: number; //  카지노윈로스(A)
+  casinoCommission?: number; //  카지노수수료(B)
+  casinoBetWinCalculate?: number; //  카지노벳윈정산 (A-B)
+  slotBetting?: number; //  슬롯배팅
+  slotCancel?: number; //  슬롯취소
+  slotAvailable?: number; //  슬롯유효
+  slotWinning?: number; //  슬롯당첨
+  slotWinLoss?: number; //  슬롯윈로스(D)
+  slotTotalCommission?: number; //  슬롯전체수수료(E)
+  slotBetWinCalculate?: number; //  슬롯벳윈정산(D-E)
+  powerballBetting?: number; //  파워볼배팅
+  powerballWinning?: number; //  파워볼당첨
+  powerballWinLoss?: number; //  파워볼윈로스(H)
+  powerballCommission?: number; //  파워볼수수료(I)
+  powerballBetWinCalculate?: number; //  파워볼벳윈정산(H-I)
+  totalUse?: number; //  총이용회원
+  totalAvailable?: number; //  총유효배팅
+  totalBetting?: number; //  총배팅
+  totalCancel?: number; //  총취소
+  totalWinLoss?: number; //  총윈로스
+  totalCommission?: number; //  총수수료
+  totalBetWinCalculate?: number; //  총벳윈정산
+}

src/app/modules/admin/report/statistics/models/statistics.ts

@@ -1,5 +1,6 @@
 export interface Statistics {
   id: string;
+  gameName?: string; //  구분
   casinoUse?: number;
   slotUse?: number;
   powerballUse?: number;

src/app/modules/admin/report/statistics/resolvers/statistics.resolver.ts

@@ -8,6 +8,9 @@ import {
 import { catchError, Observable, throwError } from 'rxjs';
 
 import { Statistics } from '../models/statistics';
+import { CasinoStatistics } from '../models/casino-statistics';
+import { SlotStatistics } from '../models/slot-statistics';
+import { PowerballStatistics } from '../models/powerball-statistics';
 import { StatisticsPagination } from '../models/statistics-pagination';
 import { StatisticsService } from '../services/statistics.service';
 
@@ -27,6 +30,12 @@ export class StatisticsResolver implements Resolve<any> {
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
+  /**
+   * Resolver
+   *
+   * @param route
+   * @param state
+   */
   /**
    * Resolver
    *
@@ -36,9 +45,65 @@ export class StatisticsResolver implements Resolve<any> {
   resolve(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
-  ): Observable<Statistics | undefined> {
+  ): Observable<{
+    pagination: StatisticsPagination;
+    statistics: Statistics[];
+  }> {
+    return this._statisticsService.getStatistics();
+  }
+  // resolve(
+  //   route: ActivatedRouteSnapshot,
+  //   state: RouterStateSnapshot
+  // ): Observable<Statistics[] | undefined> {
+  //   return this._statisticsService
+  //     .getStatisticsById(route.paramMap.get('id'))
+  //     .pipe(
+  //       // Error here means the requested product is not available
+  //       catchError((error) => {
+  //         // Log the error
+  //         console.error(error);
+
+  //         // Get the parent url
+  //         const parentUrl = state.url.split('/').slice(0, -1).join('/');
+
+  //         // Navigate to there
+  //         this._router.navigateByUrl(parentUrl);
+
+  //         // Throw an error
+  //         return throwError(error);
+  //       })
+  //     );
+  // }
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CasinoStatisticsResolver implements Resolve<any> {
+  /**
+   * Constructor
+   */
+  constructor(
+    private _statisticsService: StatisticsService,
+    private _router: Router
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Resolver
+   *
+   * @param route
+   * @param state
+   */
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<CasinoStatistics | undefined> {
     return this._statisticsService
-      .getStatisticsById(route.paramMap.get('id'))
+      .getCasinoStatisticsByType(route.paramMap.get('type'))
       .pipe(
         // Error here means the requested product is not available
         catchError((error) => {
@@ -57,15 +122,17 @@ export class StatisticsResolver implements Resolve<any> {
       );
   }
 }
-
 @Injectable({
   providedIn: 'root',
 })
-export class StatisticssResolver implements Resolve<any> {
+export class SlotStatisticsResolver implements Resolve<any> {
   /**
    * Constructor
    */
-  constructor(private _statisticsService: StatisticsService) {}
+  constructor(
+    private _statisticsService: StatisticsService,
+    private _router: Router
+  ) {}
 
   // -----------------------------------------------------------------------------------------------------
   // @ Public methods
@@ -80,10 +147,70 @@ export class StatisticssResolver implements Resolve<any> {
   resolve(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
-  ): Observable<{
+  ): Observable<SlotStatistics | undefined> {
-    pagination: StatisticsPagination;
+    return this._statisticsService
-    statisticss: Statistics[];
+      .getSlotStatisticsByType(route.paramMap.get('type'))
-  }> {
+      .pipe(
-    return this._statisticsService.getStatisticss();
+        // Error here means the requested product is not available
+        catchError((error) => {
+          // Log the error
+          console.error(error);
+
+          // Get the parent url
+          const parentUrl = state.url.split('/').slice(0, -1).join('/');
+
+          // Navigate to there
+          this._router.navigateByUrl(parentUrl);
+
+          // Throw an error
+          return throwError(error);
+        })
+      );
+  }
+}
+@Injectable({
+  providedIn: 'root',
+})
+export class PowerballStatisticsResolver implements Resolve<any> {
+  /**
+   * Constructor
+   */
+  constructor(
+    private _statisticsService: StatisticsService,
+    private _router: Router
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Resolver
+   *
+   * @param route
+   * @param state
+   */
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<PowerballStatistics | undefined> {
+    return this._statisticsService
+      .getPowerballStatisticsByType(route.paramMap.get('type'))
+      .pipe(
+        // Error here means the requested product is not available
+        catchError((error) => {
+          // Log the error
+          console.error(error);
+
+          // Get the parent url
+          const parentUrl = state.url.split('/').slice(0, -1).join('/');
+
+          // Navigate to there
+          this._router.navigateByUrl(parentUrl);
+
+          // Throw an error
+          return throwError(error);
+        })
+      );
   }
 }

src/app/modules/admin/report/statistics/services/statistics.service.ts

@@ -13,6 +13,9 @@ import {
 } from 'rxjs';
 
 import { Statistics } from '../models/statistics';
+import { CasinoStatistics } from '../models/casino-statistics';
+import { SlotStatistics } from '../models/slot-statistics';
+import { PowerballStatistics } from '../models/powerball-statistics';
 import { StatisticsPagination } from '../models/statistics-pagination';
 
 @Injectable({
@@ -23,10 +26,18 @@ export class StatisticsService {
   private __pagination = new BehaviorSubject<StatisticsPagination | undefined>(
     undefined
   );
-  private __statistics = new BehaviorSubject<Statistics | undefined>(undefined);
+  private __statistics = new BehaviorSubject<Statistics[] | undefined>(
-  private __statisticss = new BehaviorSubject<Statistics[] | undefined>(
     undefined
   );
+  private __casinoStatistics = new BehaviorSubject<
+    CasinoStatistics | undefined
+  >(undefined);
+  private __slotStatistics = new BehaviorSubject<SlotStatistics | undefined>(
+    undefined
+  );
+  private __powerballStatistics = new BehaviorSubject<
+    PowerballStatistics | undefined
+  >(undefined);
 
   /**
    * Constructor
@@ -43,27 +54,45 @@ export class StatisticsService {
   get pagination$(): Observable<StatisticsPagination | undefined> {
     return this.__pagination.asObservable();
   }
-
   /**
    * Getter for statistics
    */
-  get statistics$(): Observable<Statistics | undefined> {
+  get statistics$(): Observable<Statistics[] | undefined> {
     return this.__statistics.asObservable();
   }
 
   /**
-   * Getter for statisticss
+   * Getter for casino-statistics
    */
-  get statisticss$(): Observable<Statistics[] | undefined> {
+  get casinoStatistics$(): Observable<CasinoStatistics | undefined> {
-    return this.__statisticss.asObservable();
+    return this.__casinoStatistics.asObservable();
   }
-
   // -----------------------------------------------------------------------------------------------------
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
   /**
-   * Get statisticss
+   * Getter for casino-statistics
+   */
+  get slotStatistics$(): Observable<SlotStatistics | undefined> {
+    return this.__slotStatistics.asObservable();
+  }
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Getter for casino-statistics
+   */
+  get powerballStatistics$(): Observable<PowerballStatistics | undefined> {
+    return this.__powerballStatistics.asObservable();
+  }
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Get statistics
    *
    *
    * @param page
@@ -72,21 +101,21 @@ export class StatisticsService {
    * @param order
    * @param search
    */
-  getStatisticss(
+  getStatistics(
     page: number = 0,
     size: number = 10,
-    sort: string = 'name',
+    sort: string = 'casinoUse',
     order: 'asc' | 'desc' | '' = 'asc',
     search: string = ''
   ): Observable<{
     pagination: StatisticsPagination;
-    statisticss: Statistics[];
+    statistics: Statistics[];
   }> {
     return this._httpClient
       .get<{
         pagination: StatisticsPagination;
-        statisticss: Statistics[];
+        statistics: Statistics[];
-      }>('api/apps/report/statistics/statisticss', {
+      }>('api/apps/report/statistics', {
         params: {
           page: '' + page,
           size: '' + size,
@@ -98,7 +127,7 @@ export class StatisticsService {
       .pipe(
         tap((response) => {
           this.__pagination.next(response.pagination);
-          this.__statisticss.next(response.statisticss);
+          this.__statistics.next(response.statistics);
         })
       );
   }
@@ -106,13 +135,12 @@ export class StatisticsService {
   /**
    * Get product by id
    */
-  getStatisticsById(id: string | null): Observable<Statistics> {
+  getStatisticsById(id: string | null): Observable<Statistics[]> {
-    return this.__statisticss.pipe(
+    return this.__statistics.pipe(
       take(1),
-      map((statisticss) => {
+      map((statistics) => {
         // Find the product
-        const statistics =
+        statistics?.find((item) => item.id === id) || undefined;
-          statisticss?.find((item) => item.id === id) || undefined;
 
         // Update the product
         this.__statistics.next(statistics);
@@ -130,20 +158,95 @@ export class StatisticsService {
     );
   }
 
+  /**
+   * Get product by type
+   */
+  getCasinoStatisticsByType(type: string | null): Observable<CasinoStatistics> {
+    return this.__statistics.pipe(
+      take(1),
+      map((statistics) => {
+        // Find the product
+        const casinoStatistics =
+          statistics?.find((item) => item.id === type) || undefined;
+
+        // Update the product
+        this.__casinoStatistics.next(casinoStatistics);
+
+        // Return the product
+        return casinoStatistics;
+      }),
+      switchMap((product) => {
+        if (!product) {
+          return throwError('Could not found product with id of ' + type + '!');
+        }
+
+        return of(product);
+      })
+    );
+  }
+  getSlotStatisticsByType(type: string | null): Observable<SlotStatistics> {
+    return this.__statistics.pipe(
+      take(1),
+      map((statistics) => {
+        // Find the product
+        const slotStatistics =
+          statistics?.find((item) => item.id === type) || undefined;
+
+        // Update the product
+        this.__slotStatistics.next(slotStatistics);
+
+        // Return the product
+        return slotStatistics;
+      }),
+      switchMap((product) => {
+        if (!product) {
+          return throwError('Could not found product with id of ' + type + '!');
+        }
+
+        return of(product);
+      })
+    );
+  }
+  getPowerballStatisticsByType(
+    type: string | null
+  ): Observable<PowerballStatistics> {
+    return this.__statistics.pipe(
+      take(1),
+      map((statistics) => {
+        // Find the product
+        const powerballStatistics =
+          statistics?.find((item) => item.id === type) || undefined;
+
+        // Update the product
+        this.__powerballStatistics.next(powerballStatistics);
+
+        // Return the product
+        return powerballStatistics;
+      }),
+      switchMap((product) => {
+        if (!product) {
+          return throwError('Could not found product with id of ' + type + '!');
+        }
+
+        return of(product);
+      })
+    );
+  }
+
   /**
    * Create product
    */
   createStatistics(): Observable<Statistics> {
-    return this.statisticss$.pipe(
+    return this.statistics$.pipe(
       take(1),
-      switchMap((statisticss) =>
+      switchMap((statistics) =>
         this._httpClient
           .post<Statistics>('api/apps/report/statistics/product', {})
           .pipe(
             map((newStatistics) => {
-              // Update the statisticss with the new product
+              // Update the statistics with the new product
-              if (!!statisticss) {
+              if (!!statistics) {
-                this.__statisticss.next([newStatistics, ...statisticss]);
+                this.__statistics.next([newStatistics, ...statistics]);
               }
 
               // Return the new product

src/app/modules/admin/report/statistics/statistics.routing.ts

@@ -3,7 +3,7 @@ import { Route } from '@angular/router';
 import { ListComponent } from './components/list.component';
 import { ViewComponent } from '../../member/user/components/view.component';
 
-import { StatisticssResolver } from './resolvers/statistics.resolver';
+import { StatisticsResolver } from './resolvers/statistics.resolver';
 import { UserResolver } from '../../member/user/resolvers/user.resolver';
 
 export const statisticsRoutes: Route[] = [
@@ -11,7 +11,7 @@ export const statisticsRoutes: Route[] = [
     path: '',
     component: ListComponent,
     resolve: {
-      statisticss: StatisticssResolver,
+      statistics: StatisticsResolver,
     },
   },
   {