루징 리포터 페이지 추가 및 수정

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

@@ -3,7 +3,8 @@ import { assign, cloneDeep } from 'lodash-es';
 import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
 import {
   loosings as loosingsData,
-  loosingReports as loosingReportsData,
+  loosing01Reports as loosing01ReportsData,
+  loosing02Reports as loosing02ReportsData,
 } from './data';
 
 @Injectable({
@@ -11,7 +12,8 @@ import {
 })
 export class ReportLoosingMockApi {
   private _loosings: any[] = loosingsData;
-  private _loosingReports: any[] = loosingReportsData;
+  private _loosing01Reports: any[] = loosing01ReportsData;
+  private _loosing02Reports: any[] = loosing02ReportsData;
   /**
    * Constructor
    */
@@ -107,15 +109,37 @@ export class ReportLoosingMockApi {
       .reply(({ request }) => {
         // Get the id from the params
         const id = request.params.get('id');
+        const type = request.params.get('type');
 
+        let result;
         // Clone the loosings
-        const loosingReports = cloneDeep(this._loosingReports);
+        if (type === '1') {
+          result = cloneDeep(this._loosing01Reports);
+        } else {
+          result = cloneDeep(this._loosing02Reports);
+        }
 
         // Find the loosing
         // const loosing = loosings.find((item: any) => item.id === id);
 
         // Return the response
-        return [200, loosingReports];
+        return [200, result];
+      });
+
+    this._fuseMockApiService
+      .onGet('api/apps/report/loosing/loosing/02')
+      .reply(({ request }) => {
+        // Get the id from the params
+        const id = request.params.get('id');
+
+        // Clone the loosings
+        const loosing02Reports = cloneDeep(this._loosing02Reports);
+
+        // Find the loosing
+        // const loosing = loosings.find((item: any) => item.id === id);
+
+        // Return the response
+        return [200, loosing02Reports];
       });
 
     // -----------------------------------------------------------------------------------------------------

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

@@ -27,7 +27,7 @@ export const loosings = [
   },
 ];
 
-export const loosingReports = [
+export const loosing01Reports = [
   {
     id: 'lossingReports_1',
     parentId: '0',
@@ -245,3 +245,204 @@ export const loosingReports = [
     },
   },
 ];
+
+export const loosing02Reports = [
+  {
+    id: 'lossingReports_1',
+    parentId: '0',
+    signinId: 'kgon1',
+    code: 'AAA',
+    depth: 0,
+    rank: '본사',
+    totalCalculate: '-55,388',
+    casinoReport: {
+      id: '1',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+    slotReport: {
+      id: '2',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+  },
+  {
+    id: 'lossingReports_2',
+    parentId: 'lossingReports_1',
+    signinId: 'kgon2',
+    code: 'AAAAA',
+    depth: 1,
+    rank: '대본',
+    totalCalculate: '-55,388',
+    casinoReport: {
+      id: '1',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+    slotReport: {
+      id: '2',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+  },
+  {
+    id: 'lossingReports_3',
+    parentId: 'lossingReports_2',
+    signinId: 'kgon2',
+    code: 'AAAAA',
+    depth: 1,
+    rank: '부본',
+    totalCalculate: '-55,388',
+    casinoReport: {
+      id: '1',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+    slotReport: {
+      id: '2',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+  },
+  {
+    id: 'lossingReports_4',
+    parentId: '0',
+    signinId: 'test1',
+    code: 'AAAB',
+    depth: 0,
+    rank: '본사',
+    totalCalculate: '-55,388',
+    casinoReport: {
+      id: '1',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+    slotReport: {
+      id: '2',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+  },
+  {
+    id: 'lossingReports_5',
+    parentId: 'lossingReports_4',
+    signinId: 'kgon2',
+    code: 'AAAAA',
+    depth: 1,
+    rank: '대본',
+    totalCalculate: '-55,388',
+    casinoReport: {
+      id: '1',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+    slotReport: {
+      id: '2',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+  },
+  {
+    id: 'lossingReports_6',
+    parentId: 'lossingReports_5',
+    signinId: 'kgon2',
+    code: 'AAAAA',
+    depth: 1,
+    rank: '부본',
+    totalCalculate: '-55,388',
+    casinoReport: {
+      id: '1',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+    slotReport: {
+      id: '2',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      profitLossMoney: '-1,240',
+      loosingRate: '50%',
+      meMoney: '-620',
+      bottomMoney: '33',
+      calculateMoney: '-105,700',
+    },
+  },
+];

src/app/modules/admin/report/loosing/components/index.ts

@@ -1,4 +1,5 @@
 import { ListComponent } from './list.component';
-import { ViewComponent } from './view.component';
+import { View01Component } from './view-01.component';
+import { View02Component } from './view-02.component';
 
-export const COMPONENTS = [ListComponent, ViewComponent];
+export const COMPONENTS = [ListComponent, View01Component, View02Component];

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

@@ -123,7 +123,7 @@
                       mat-flat-button
                       class="bet-mat-small-8"
                       [color]="'primary'"
-                      (click)="__viewLoosingDetail(info, '0')"
+                      (click)="__viewLoosingDetail(info, '1')"
                     >
                       상세보기
                     </button></span
@@ -153,7 +153,7 @@
                       mat-flat-button
                       class="bet-mat-small-8"
                       [color]="'primary'"
-                      (click)="__viewLoosingDetail(info, '1')"
+                      (click)="__viewLoosingDetail(info, '2')"
                     >
                       상세보기
                     </button></span

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

@@ -169,7 +169,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // -----------------------------------------------------------------------------------------------------
 
   __viewLoosingDetail(loosing: Loosing, type: string): void {
-    let url: string = 'report/loosing/' + loosing.id;
+    let url: string = '';
+
+    if (type === '1') {
+      url = 'report/loosing/01/' + loosing.id + `?type=${type}`;
+    } else {
+      url = 'report/loosing/02/' + loosing.id + `?type=${type}`;
+    }
+
     let extras: NavigationBehaviorOptions = {
       state: {
         viewType: type,

src/app/modules/admin/report/loosing/components/view-01.component.html

@@ -22,7 +22,7 @@
                 mat-flat-button
                 [color]="'primary'"
                 fxFlex
-                (click)="__createProduct()"
+                (click)="__onClickPrev($event)"
               >
                 <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
                 <span class="ml-2 mr-1">목록으로</span>
@@ -31,7 +31,7 @@
                 mat-flat-button
                 [color]="'primary'"
                 fxFlex
-                (click)="__createProduct()"
+                (click)="__onClickNext($event)"
               >
                 <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
                 <span class="ml-2 mr-1">루징데이터보기</span>
@@ -39,18 +39,21 @@
             </div>
           </div>
 
-          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+          <div
+            class="flex flex-col flex-auto mt-2 overflow-x-auto"
+            style="overflow: auto"
+          >
             <table
               class="min-w-240 overflow-y-visible"
               mat-table
               [dataSource]="loosingDataSource"
             >
               <!-- 아이디 -->
-              <ng-container matColumnDef="userId">
+              <ng-container matColumnDef="userId" sticky>
                 <th
                   mat-header-cell
                   *matHeaderCellDef
-                  [ngStyle]="{ display: 'none' }"
+                  style="display: 'none'"
                 ></th>
                 <td mat-cell *matCellDef="let info; let i = index">
                   <span class="font-medium text-right">
@@ -58,18 +61,18 @@
                   </span>
                 </td>
               </ng-container>
-              <ng-container matColumnDef="signinId">
+              <ng-container matColumnDef="signinId" sticky>
                 <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">
                   아이디
                 </th>
               </ng-container>
 
               <!-- 코드 -->
-              <ng-container matColumnDef="userCode">
+              <ng-container matColumnDef="userCode" sticky>
                 <th
                   mat-header-cell
                   *matHeaderCellDef
-                  [ngStyle]="{ display: 'none' }"
+                  style="display: 'none'"
                 ></th>
                 <td mat-cell *matCellDef="let info">
                   <span class="font-medium text-right">
@@ -77,7 +80,7 @@
                   </span>
                 </td>
               </ng-container>
-              <ng-container matColumnDef="code">
+              <ng-container matColumnDef="code" sticky>
                 <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">
                   코드
                 </th>
@@ -231,6 +234,7 @@
                   *matHeaderCellDef
                   aria-label="row actions"
                   [attr.rowspan]="2"
+                  [attr.colspan]="2"
                   style="border-left: 1px solid #e0e0e0; padding-left: 30px"
                 >
                   &nbsp;

src/app/modules/admin/report/loosing/components/view-01.component.ts

@@ -23,8 +23,8 @@ import { MatTableDataSource } from '@angular/material/table';
 import { LoosingReport } from '../models/loosing-report';
 
 @Component({
-  selector: 'loosing-view',
+  selector: 'loosing-view-01',
-  templateUrl: './view.component.html',
+  templateUrl: './view-01.component.html',
   styles: [
     /* language=SCSS */
     `
@@ -49,12 +49,10 @@ import { LoosingReport } from '../models/loosing-report';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: fuseAnimations,
 })
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+export class View01Component implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
-  loosings$!: Observable<Loosing[] | undefined>;
-
   isLoading = false;
 
   loosingDataSource: MatTableDataSource<Loosing> = new MatTableDataSource();
@@ -141,6 +139,14 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __createProduct(): void {}
 
+  __onClickPrev(event: MouseEvent): void {
+    this._router.navigateByUrl('/report/loosing');
+  }
+
+  __onClickNext(event: MouseEvent): void {
+    this._router.navigateByUrl('/report/loosing/02/loosing_1?type=2');
+  }
+
   /**
    * Toggle product details
    *

src/app/modules/admin/report/loosing/components/view-02.component.html

@@ -0,0 +1,314 @@
+<div class="flex flex-col flex-auto min-w-0">
+  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
+    <div class="w-full max-w-screen-xl mx-auto">
+      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+        <!-- Budget distribution -->
+        <div
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
+        >
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
+            루징데이터
+          </div>
+
+          <!-- Search -->
+          <div
+            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" (click)="__onClickPrev($event)"
+                  >목록으로</span
+                >
+              </button>
+              <button
+                mat-flat-button
+                [color]="'primary'"
+                fxFlex
+                (click)="__onClickPrev($event)"
+              >
+                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+                <span class="ml-2 mr-1">이전페이지</span>
+              </button>
+              <button
+                mat-flat-button
+                [color]="'primary'"
+                fxFlex
+                (click)="__createProduct()"
+              >
+                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+                <span class="ml-2 mr-1">엑셀저장</span>
+              </button>
+            </div>
+          </div>
+
+          <div
+            class="flex flex-col flex-auto mt-2 overflow-x-auto"
+            style="overflow: auto"
+          >
+            <table
+              class="min-w-240 overflow-y-visible"
+              mat-table
+              [dataSource]="loosingDataSource"
+            >
+              <!-- 아이디 -->
+              <ng-container matColumnDef="userId" sticky>
+                <th
+                  mat-header-cell
+                  *matHeaderCellDef
+                  style="display: 'none'"
+                ></th>
+                <td mat-cell *matCellDef="let info; let i = index">
+                  <span class="font-medium text-right">
+                    {{ info.signinId }}
+                  </span>
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="signinId" sticky>
+                <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">
+                  아이디
+                </th>
+              </ng-container>
+
+              <!-- 코드 -->
+              <ng-container matColumnDef="userCode" sticky>
+                <th
+                  mat-header-cell
+                  *matHeaderCellDef
+                  style="display: 'none'"
+                ></th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.code }}
+                  </span>
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="code" sticky>
+                <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">
+                  코드
+                </th>
+              </ng-container>
+
+              <!-- 카지노루징 시작-->
+              <!-- 윈로스 -->
+              <ng-container matColumnDef="casinoWinLoss">
+                <th mat-header-cell *matHeaderCellDef>윈로스</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.casinoReport.betWinLossMoneny
+                  }}</span>
+                </td>
+              </ng-container>
+              <!-- 롤링 -->
+              <ng-container matColumnDef="casinoRolling">
+                <th mat-header-cell *matHeaderCellDef>롤링</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.casinoReport.rollingMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.casinoReport.rollingBottomMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.casinoReport.rollingMeMoney }}
+                  </span>
+                </td>
+              </ng-container>
+              <!-- 손익 -->
+              <ng-container matColumnDef="casinoProfitLoss">
+                <th mat-header-cell *matHeaderCellDef>손익</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.casinoReport.profitLossMoney }}
+                  </span>
+                </td>
+              </ng-container>
+              <!-- 루징요율 -->
+              <ng-container matColumnDef="casinoLoosing">
+                <th mat-header-cell *matHeaderCellDef>루징요율</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.casinoReport.loosingRate
+                  }}</span>
+                </td>
+              </ng-container>
+              <!-- 본인 -->
+              <ng-container matColumnDef="casinoSelf">
+                <th mat-header-cell *matHeaderCellDef>본인</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.casinoReport.meMoney
+                  }}</span>
+                </td>
+              </ng-container>
+
+              <!-- 하부 -->
+              <ng-container matColumnDef="casinoBottom">
+                <th mat-header-cell *matHeaderCellDef>하부</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.casinoReport.bottomMoney
+                  }}</span>
+                </td>
+              </ng-container>
+              <!-- 실정산금 -->
+              <ng-container matColumnDef="casinoCalculate">
+                <th mat-header-cell *matHeaderCellDef>실정산금</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.casinoReport.calculateMoney
+                  }}</span>
+                </td>
+              </ng-container>
+
+              <!-- 카지노루징 끝-->
+
+              <!-- 슬롯루징 시작-->
+              <!-- 윈로스 -->
+              <ng-container matColumnDef="slotWinLoss">
+                <th mat-header-cell *matHeaderCellDef>윈로스</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.slotReport.betWinLossMoneny
+                  }}</span>
+                </td>
+              </ng-container>
+              <!-- 롤링 -->
+              <ng-container matColumnDef="slotRolling">
+                <th mat-header-cell *matHeaderCellDef>롤링</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.slotReport.rollingMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.slotReport.rollingBottomMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.slotReport.rollingMeMoney }}
+                  </span>
+                </td>
+              </ng-container>
+              <!-- 손익 -->
+              <ng-container matColumnDef="slotProfitLoss">
+                <th mat-header-cell *matHeaderCellDef>손익</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.slotReport.profitLossMoney }}
+                  </span>
+                </td>
+              </ng-container>
+              <!-- 루징요율 -->
+              <ng-container matColumnDef="slotLoosing">
+                <th mat-header-cell *matHeaderCellDef>루징요율</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.slotReport.loosingRate
+                  }}</span>
+                </td>
+              </ng-container>
+              <!-- 본인 -->
+              <ng-container matColumnDef="slotSelf">
+                <th mat-header-cell *matHeaderCellDef>본인</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.slotReport.meMoney
+                  }}</span>
+                </td>
+              </ng-container>
+
+              <!-- 하부 -->
+              <ng-container matColumnDef="slotBottom">
+                <th mat-header-cell *matHeaderCellDef>하부</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.slotReport.bottomMoney
+                  }}</span>
+                </td>
+              </ng-container>
+              <!-- 실정산금 -->
+              <ng-container matColumnDef="slotCalculate">
+                <th mat-header-cell *matHeaderCellDef>실정산금</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.slotReport.calculateMoney
+                  }}</span>
+                </td>
+              </ng-container>
+
+              <!-- 슬롯루징 끝-->
+              <!-- Star Column -->
+              <ng-container matColumnDef="totalCalculate" stickyEnd>
+                <th
+                  mat-header-cell
+                  *matHeaderCellDef
+                  style="
+                    border-left: 1px solid #e0e0e0;
+                    padding-left: 30px;
+                    display: none;
+                  "
+                >
+                  &nbsp;
+                </th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.totalCalculate
+                  }}</span>
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="tempTotalCalculate" stickyEnd>
+                <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">
+                  총실정산금
+                </th>
+              </ng-container>
+
+              <!-- Header row second group -->
+              <ng-container matColumnDef="header-row-casino-group">
+                <th
+                  mat-header-cell
+                  *matHeaderCellDef
+                  [attr.colspan]="7"
+                  style="text-align: center"
+                >
+                  카지노루징
+                </th>
+              </ng-container>
+
+              <!-- Header row second group -->
+              <ng-container matColumnDef="header-row-slot-group">
+                <th
+                  mat-header-cell
+                  *matHeaderCellDef
+                  [attr.colspan]="7"
+                  style="text-align: center; border-left: 1px solid #e0e0e0"
+                >
+                  슬롯루징
+                </th>
+              </ng-container>
+
+              <tr
+                mat-header-row
+                *matHeaderRowDef="[
+                  'signinId',
+                  'code',
+
+                  'header-row-casino-group',
+                  'header-row-slot-group',
+                  'tempTotalCalculate'
+                ]"
+              ></tr>
+              <tr mat-header-row *matHeaderRowDef="displayedTableColumns"></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: displayedTableColumns"
+              ></tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/admin/report/loosing/components/view-02.component.ts

@@ -0,0 +1,167 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { map, merge, Observable, Subject, switchMap, takeUntil } from 'rxjs';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
+
+import { Loosing } from '../models/loosing';
+
+import { LoosingService } from '../services/loosing.service';
+import { Router } from '@angular/router';
+import { MatTableDataSource } from '@angular/material/table';
+import { LoosingReport } from '../models/loosing-report';
+
+@Component({
+  selector: 'loosing-view-02',
+  templateUrl: './view-02.component.html',
+  styles: [
+    /* language=SCSS */
+    `
+      .inventory-grid {
+        grid-template-columns: 60px auto 40px;
+
+        @screen sm {
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
+        }
+
+        @screen md {
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
+        }
+
+        @screen lg {
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
+        }
+      }
+    `,
+  ],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: fuseAnimations,
+})
+export class View02Component implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
+  @ViewChild(MatSort) private _sort!: MatSort;
+
+  loosings$!: Observable<Loosing[] | undefined>;
+
+  isLoading = false;
+
+  loosingDataSource: MatTableDataSource<Loosing> = new MatTableDataSource();
+
+  private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+  displayedTableColumns: string[] = [
+    'userId',
+    'userCode',
+    'casinoWinLoss',
+    'casinoRolling',
+    'casinoProfitLoss',
+    'casinoLoosing',
+    'casinoSelf',
+    'casinoBottom',
+    'casinoCalculate',
+    'slotWinLoss',
+    'slotRolling',
+    'slotSelf',
+    'slotProfitLoss',
+    'slotLoosing',
+    'slotBottom',
+    'slotCalculate',
+    'totalCalculate',
+  ];
+
+  /**
+   * Constructor
+   */
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _fuseConfirmationService: FuseConfirmationService,
+    private _loosingService: LoosingService,
+    private _router: Router
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    // Get the products
+    this._loosingService.loosing$
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((loosingReport: LoosingReport[] | undefined) => {
+        if (!loosingReport) {
+          return;
+        }
+
+        this.loosingDataSource.data = loosingReport;
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+      });
+  }
+
+  /**
+   * After view init
+   */
+  ngAfterViewInit(): void {}
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next(null);
+    this._unsubscribeAll.complete();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /* viewUserDetail(id: string): void {
+    let url: string = 'member/user/' + id;
+    this.router.navigateByUrl(url);
+  } */
+  // -----------------------------------------------------------------------------------------------------
+  // @ Private methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Create product
+   */
+  __createProduct(): void {}
+
+  __onClickPrev(event: MouseEvent): void {
+    this._router.navigateByUrl('/report/loosing');
+  }
+
+  /**
+   * 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/loosing/loosing.routing.ts

@@ -1,7 +1,8 @@
 import { Route } from '@angular/router';
 
 import { ListComponent } from './components/list.component';
-import { ViewComponent } from './components/view.component';
+import { View01Component } from './components/view-01.component';
+import { View02Component } from './components/view-02.component';
 
 import {
   LoosingsResolver,
@@ -17,8 +18,15 @@ export const loosingRoutes: Route[] = [
     },
   },
   {
-    path: ':id',
+    path: '01/:id',
-    component: ViewComponent,
+    component: View01Component,
+    resolve: {
+      loosing: LoosingResolver,
+    },
+  },
+  {
+    path: '02/:id',
+    component: View02Component,
     resolve: {
       loosing: LoosingResolver,
     },

src/app/modules/admin/report/loosing/models/bet-calculate.ts

@@ -11,4 +11,7 @@ export interface BetCalculate {
   rollingMeMoney?: string;
   loosingRate?: string;
   meMoney?: string;
+  profitLossMoney?: string;
+  bottomMoney?: string;
+  calculateMoney?: string;
 }

src/app/modules/admin/report/loosing/models/loosing-report.ts

@@ -7,6 +7,7 @@ export interface LoosingReport {
   code?: string;
   depth?: number;
   rank?: string;
+  totalCalculate?: string;
   casinoCalculate?: BetCalculate;
   slotCalculate?: BetCalculate;
 }

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

@@ -39,7 +39,10 @@ export class LoosingResolver implements Resolve<any> {
     state: RouterStateSnapshot
   ): Observable<LoosingReport[] | undefined> {
     return this._loosingService
-      .getLoosingById(route.paramMap.get('id') as string)
+      .getLoosingById(
+        route.paramMap.get('id') as string,
+        state.root.queryParamMap.get('type') as string
+      )
       .pipe(
         // Error here means the requested product is not available
         catchError((error) => {

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

@@ -107,10 +107,13 @@ export class LoosingService {
   /**
    * Get product by id
    */
-  getLoosingById(id: string = '1'): Observable<LoosingReport[]> {
+  getLoosingById(
+    id: string = '1',
+    type: string = '1'
+  ): Observable<LoosingReport[]> {
     return this._httpClient
       .get<LoosingReport[]>('api/apps/report/loosing/loosing', {
-        params: { id },
+        params: { id, type },
       })
       .pipe(
         tap((response: LoosingReport[]) => {