Merge branch 'feature/BETERAN-BACKEND-APP-BROWSER-init' of https://gitlab.loafle.net/bet/beteran-backend-app-browser into feature/BETERAN-BACKEND-APP-BROWSER-init

src/app/mock-api/apps/board/notice-oneline/api.ts

@@ -33,29 +33,13 @@ export class BoardNoticeOnelineMockApi {
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
+
-        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 noticeOnelines
         let noticeOnelines: any[] | null = cloneDeep(this._noticeOnelines);
 
-        // Sort the noticeOnelines
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
-          noticeOnelines.sort((a, b) => {
-            const fieldA = a[sort].toString().toUpperCase();
-            const fieldB = b[sort].toString().toUpperCase();
-            return order === 'asc'
-              ? fieldA.localeCompare(fieldB)
-              : fieldB.localeCompare(fieldA);
-          });
-        } else {
-          noticeOnelines.sort((a, b) =>
-            order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
-          );
-        }
-
         // If search exists...
         if (search) {
           // Filter the noticeOnelines

src/app/mock-api/apps/board/notice-oneline/data.ts

@@ -2,6 +2,7 @@
 
 export const noticeOnelines = [
   {
+    id: '1',
     idx: 25,
     site: 'All',
     title: '-입금문의안내(필독)-',
@@ -10,4 +11,44 @@ export const noticeOnelines = [
     views: 65,
     state: '노출',
   },
+  {
+    id: '2',
+    idx: 26,
+    site: 'All',
+    title: '-입금문의안내(필독)-',
+    writer: '관리자',
+    writeDate: '2021-06-08 00:43',
+    views: 65,
+    state: '노출',
+  },
+  {
+    id: '3',
+    idx: 27,
+    site: 'All',
+    title: '-입금문의안내(필독)-',
+    writer: '관리자',
+    writeDate: '2021-06-08 00:43',
+    views: 65,
+    state: '노출',
+  },
+  {
+    id: '4',
+    idx: 28,
+    site: 'All',
+    title: '-입금문의안내(필독)-',
+    writer: '관리자',
+    writeDate: '2021-06-08 00:43',
+    views: 65,
+    state: '노출',
+  },
+  {
+    id: '5',
+    idx: 29,
+    site: 'All',
+    title: '-입금문의안내(필독)-',
+    writer: '관리자',
+    writeDate: '2021-06-08 00:43',
+    views: 65,
+    state: '노출',
+  },
 ];

src/app/mock-api/apps/board/notice/api.ts

@@ -33,29 +33,13 @@ export class BoardNoticeMockApi {
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
+
-        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 notices
         let notices: any[] | null = cloneDeep(this._notices);
 
-        // Sort the notices
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
-          notices.sort((a, b) => {
-            const fieldA = a[sort].toString().toUpperCase();
-            const fieldB = b[sort].toString().toUpperCase();
-            return order === 'asc'
-              ? fieldA.localeCompare(fieldB)
-              : fieldB.localeCompare(fieldA);
-          });
-        } else {
-          notices.sort((a, b) =>
-            order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
-          );
-        }
-
         // If search exists...
         if (search) {
           // Filter the notices

src/app/mock-api/apps/board/notice/data.ts

@@ -2,6 +2,40 @@
 
 export const notices = [
   {
+    id: '1',
+    idx: 80,
+    site: '',
+    title:
+      '게임멈춤,튕기는 현상및 계좌문의시 확인및 입금전후 확인사항 대한 공지사항',
+    writer: '관리자',
+    writeDate: '2021-10-25 02:25',
+    views: 136,
+    state: '노출',
+  },
+  {
+    id: '2',
+    idx: 80,
+    site: '',
+    title:
+      '게임멈춤,튕기는 현상및 계좌문의시 확인및 입금전후 확인사항 대한 공지사항',
+    writer: '관리자',
+    writeDate: '2021-10-25 02:25',
+    views: 136,
+    state: '노출',
+  },
+  {
+    id: '3',
+    idx: 80,
+    site: 'all',
+    title:
+      '게임멈춤,튕기는 현상및 계좌문의시 확인및 입금전후 확인사항 대한 공지사항',
+    writer: '관리자',
+    writeDate: '2021-10-25 02:25',
+    views: 136,
+    state: '노출',
+  },
+  {
+    id: '4',
     idx: 80,
     site: '',
     title:

src/app/mock-api/apps/member/coupon-money-log/data.ts

@@ -9,13 +9,47 @@ export const couponMoneyLogs = [
     takeCouponId: 'on04',
     takeCouponRank: '매장',
     giveCouponBeforeMoney: 0,
-    giveCouponVarianceMoney: -50000,
+    giveCouponChangeMoney: -50000,
     giveCouponAfterMoney: 0,
     takeCouponBeforeMoney: 0,
-    takeCouponVarianceMoney: 50000,
+    takeCouponChangeMoney: 50000,
     takeCouponAfterMoney: 50000,
     couponContents: '오링쿠폰',
     giveCouponRegistrationDate: '2022-06-12 16:22',
     takeCouponRegistrationDate: '2022-06-12 16:22',
   },
+  {
+    id: '00b0292f-3d50-4669-a0c4-7a9d85efc98d',
+    idx: 14,
+    giveCouponId: 'ADMIN',
+    giveCouponRank: 'ADMIN',
+    takeCouponId: 'on03',
+    takeCouponRank: '총판',
+    giveCouponBeforeMoney: 0,
+    giveCouponChangeMoney: -50000,
+    giveCouponAfterMoney: 0,
+    takeCouponBeforeMoney: 0,
+    takeCouponChangeMoney: 50000,
+    takeCouponAfterMoney: 50000,
+    couponContents: '쿠폰테스스',
+    giveCouponRegistrationDate: '2022-06-12 16:22',
+    takeCouponRegistrationDate: '2022-06-12 16:22',
+  },
+  {
+    id: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de',
+    idx: 13,
+    giveCouponId: 'on00',
+    giveCouponRank: '본사',
+    takeCouponId: 'ADMIN',
+    takeCouponRank: 'ADMIN',
+    giveCouponBeforeMoney: 100000,
+    giveCouponChangeMoney: -50000,
+    giveCouponAfterMoney: 50000,
+    takeCouponBeforeMoney: 0,
+    takeCouponChangeMoney: 50000,
+    takeCouponAfterMoney: 0,
+    couponContents: '쿠폰테스스',
+    giveCouponRegistrationDate: '2022-06-12 16:17',
+    takeCouponRegistrationDate: '2022-06-12 16:17',
+  },
 ];

src/app/mock-api/apps/report/comp-log/api.ts

@@ -33,7 +33,7 @@ export class ReportCompLogMockApi {
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
+        const sort = request.params.get('sort') || 'signinId';
         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);
@@ -42,7 +42,7 @@ export class ReportCompLogMockApi {
         let compLogs: any[] | null = cloneDeep(this._compLogs);
 
         // Sort the compLogs
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
+        if (sort === 'signinId' || sort === 'nickname' || sort === 'type') {
           compLogs.sort((a, b) => {
             const fieldA = a[sort].toString().toUpperCase();
             const fieldB = b[sort].toString().toUpperCase();

src/app/mock-api/apps/report/comp-log/data.ts

@@ -2,32 +2,39 @@
 
 export const compLogs = [
   {
-    id: 'on00',
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
-    totalPartnerCount: '5',
+    idx: 17183,
-    totalHoldingMoney: 303675,
+    rank: '매장',
-    totalComp: 108933,
+    signinId: 'kgon5',
-    total: 412608,
+    nickname: '매장',
-    branchCount: 1,
+    rate: 1.5,
-    divisionCount: 1,
+    bettingMoney: 800,
-    officeCount: 1,
+    beforeComp: 28418.37,
-    storeCount: 1,
+    changeComp: 12.0,
-    memberCount: 1,
+    afterComp: 28430.37,
-    nickname: 'on00',
+    type: '적립',
-    accountHolder: '11',
+    compContents: '슬롯콤프',
-    phoneNumber: '010-1111-1111',
+    registrationDate: '2022-06-20 11:43:37',
-    calculateType: '롤링',
+    memo: '',
-    ownCash: 50000,
+    bettingId: 'test1111',
-    ownComp: 1711,
+    bettingNumber: 5970,
-    ownCoupon: 50000,
+  },
-    gameMoney: 0,
+  {
-    todayComp: 0,
+    id: '00b0292f-3d50-4669-a0c4-7a9d85efc98d',
-    totalDeposit: 0,
+    idx: 17182,
-    totalWithdraw: 0,
+    rank: '총판',
-    balance: 0,
+    signinId: 'kgon4',
-    registDate: '2022-06-12 15:38',
+    nickname: '총판',
-    finalSigninDate: '',
+    rate: 0.3,
-    ip: '',
+    bettingMoney: 800,
-    state: '정상',
+    beforeComp: 32925.03,
-    note: '',
+    changeComp: 2.4,
+    afterComp: 32927.43,
+    type: '적립',
+    compContents: '슬롯콤프',
+    registrationDate: '2022-06-20 11:43:37',
+    memo: '',
+    bettingId: 'test1111',
+    bettingNumber: 5970,
   },
 ];

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

@@ -1,14 +1,19 @@
 import { Injectable } from '@angular/core';
 import { assign, cloneDeep } from 'lodash-es';
 import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
-import { loosings as loosingsData } from './data';
+import {
+  loosings as loosingsData,
+  loosing01Reports as loosing01ReportsData,
+  loosing02Reports as loosing02ReportsData,
+} from './data';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ReportLoosingMockApi {
   private _loosings: any[] = loosingsData;
-
+  private _loosing01Reports: any[] = loosing01ReportsData;
+  private _loosing02Reports: any[] = loosing02ReportsData;
   /**
    * Constructor
    */
@@ -33,29 +38,14 @@ export class ReportLoosingMockApi {
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
+        // const sort = request.params.get('sort') || 'name';
-        const order = request.params.get('order') || 'asc';
+        // 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 loosings
         let loosings: any[] | null = cloneDeep(this._loosings);
 
-        // Sort the loosings
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
-          loosings.sort((a, b) => {
-            const fieldA = a[sort].toString().toUpperCase();
-            const fieldB = b[sort].toString().toUpperCase();
-            return order === 'asc'
-              ? fieldA.localeCompare(fieldB)
-              : fieldB.localeCompare(fieldA);
-          });
-        } else {
-          loosings.sort((a, b) =>
-            order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
-          );
-        }
-
         // If search exists...
         if (search) {
           // Filter the loosings
@@ -119,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 loosings = cloneDeep(this._loosings);
+        if (type === '1') {
+          result = cloneDeep(this._loosing01Reports);
+        } else {
+          result = cloneDeep(this._loosing02Reports);
+        }
 
         // Find the loosing
-        const loosing = loosings.find((item: any) => item.id === id);
+        // const loosing = loosings.find((item: any) => item.id === id);
 
         // Return the response
-        return [200, loosing];
+        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

@@ -2,32 +2,447 @@
 
 export const loosings = [
   {
-    id: 'on00',
+    id: 'loosing_1',
-    totalPartnerCount: '5',
+    startDate: '2022-06-01 15:38',
-    totalHoldingMoney: 303675,
+    endDate: '2022-06-12 15:38',
-    totalComp: 108933,
-    total: 412608,
-    branchCount: 1,
-    divisionCount: 1,
-    officeCount: 1,
-    storeCount: 1,
-    memberCount: 1,
-    nickname: 'on00',
-    accountHolder: '11',
-    phoneNumber: '010-1111-1111',
-    calculateType: '롤링',
-    ownCash: 50000,
-    ownComp: 1711,
-    ownCoupon: 50000,
-    gameMoney: 0,
-    todayComp: 0,
-    totalDeposit: 0,
-    totalWithdraw: 0,
-    balance: 0,
     registDate: '2022-06-12 15:38',
-    finalSigninDate: '',
+    defaultCount: '15',
-    ip: '',
+    loosingCount: '15',
-    state: '정상',
+  },
-    note: '',
+  {
+    id: 'loosing_2',
+    startDate: '2022-06-01 15:38',
+    endDate: '2022-06-12 15:38',
+    registDate: '2022-06-12 15:38',
+    defaultCount: '14',
+    loosingCount: '16',
+  },
+  {
+    id: 'loosing_3',
+    startDate: '2022-06-01 15:38',
+    endDate: '2022-06-12 15:38',
+    registDate: '2022-06-12 15:38',
+    defaultCount: '12',
+    loosingCount: '11',
+  },
+];
+
+export const loosing01Reports = [
+  {
+    id: 'lossingReports_1',
+    parentId: '0',
+    signinId: 'kgon1',
+    code: 'AAA',
+    depth: 0,
+    rank: '본사',
+    casinoReport: {
+      id: '1',
+      betMoneny: '123,000',
+      betTieMoneny: '6,000',
+      betCancelMoneny: '0',
+      validMoneny: '117,000',
+      betWinMoneny: '121,900',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      loosingRate: '50%',
+      meMoney: '-620',
+    },
+    slotReport: {
+      id: '2',
+      betMoneny: '75,400',
+      betTieMoneny: '',
+      betCancelMoneny: '',
+      validMoneny: '',
+      betWinMoneny: '181,100',
+      betWinLossMoneny: '-105,700',
+      rollingMoney: '3,770',
+      rollingBottomMoney: '1,659',
+      rollingMeMoney: '2,111',
+      loosingRate: '50%',
+      meMoney: '-54,735',
+    },
+  },
+  {
+    id: 'lossingReports_2',
+    parentId: 'lossingReports_1',
+    signinId: 'kgon2',
+    code: 'AAAAA',
+    depth: 1,
+    rank: '대본',
+    casinoReport: {
+      id: '1',
+      betMoneny: '123,000',
+      betTieMoneny: '6,000',
+      betCancelMoneny: '0',
+      validMoneny: '117,000',
+      betWinMoneny: '121,900',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      loosingRate: '50%',
+      meMoney: '-620',
+    },
+    slotReport: {
+      id: '2',
+      betMoneny: '75,400',
+      betTieMoneny: '',
+      betCancelMoneny: '',
+      validMoneny: '',
+      betWinMoneny: '181,100',
+      betWinLossMoneny: '-105,700',
+      rollingMoney: '3,770',
+      rollingBottomMoney: '1,659',
+      rollingMeMoney: '2,111',
+      loosingRate: '50%',
+      meMoney: '-54,735',
+    },
+  },
+  {
+    id: 'lossingReports_3',
+    parentId: 'lossingReports_2',
+    signinId: 'kgon2',
+    code: 'AAAAA',
+    depth: 1,
+    rank: '부본',
+    casinoReport: {
+      id: '3',
+      betMoneny: '123,000',
+      betTieMoneny: '6,000',
+      betCancelMoneny: '0',
+      validMoneny: '117,000',
+      betWinMoneny: '121,900',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      loosingRate: '50%',
+      meMoney: '-620',
+    },
+    slotReport: {
+      id: '4',
+      betMoneny: '75,400',
+      betTieMoneny: '',
+      betCancelMoneny: '',
+      validMoneny: '',
+      betWinMoneny: '181,100',
+      betWinLossMoneny: '-105,700',
+      rollingMoney: '3,770',
+      rollingBottomMoney: '1,659',
+      rollingMeMoney: '2,111',
+      loosingRate: '50%',
+      meMoney: '-54,735',
+    },
+  },
+  {
+    id: 'lossingReports_4',
+    parentId: '0',
+    signinId: 'test1',
+    code: 'AAAB',
+    depth: 0,
+    rank: '본사',
+    casinoReport: {
+      id: '1',
+      betMoneny: '123,000',
+      betTieMoneny: '6,000',
+      betCancelMoneny: '0',
+      validMoneny: '117,000',
+      betWinMoneny: '121,900',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      loosingRate: '50%',
+      meMoney: '-620',
+    },
+    slotReport: {
+      id: '2',
+      betMoneny: '75,400',
+      betTieMoneny: '',
+      betCancelMoneny: '',
+      validMoneny: '',
+      betWinMoneny: '181,100',
+      betWinLossMoneny: '-105,700',
+      rollingMoney: '3,770',
+      rollingBottomMoney: '1,659',
+      rollingMeMoney: '2,111',
+      loosingRate: '50%',
+      meMoney: '-54,735',
+    },
+  },
+  {
+    id: 'lossingReports_5',
+    parentId: 'lossingReports_4',
+    signinId: 'kgon2',
+    code: 'AAAAA',
+    depth: 1,
+    rank: '대본',
+    casinoReport: {
+      id: '1',
+      betMoneny: '123,000',
+      betTieMoneny: '6,000',
+      betCancelMoneny: '0',
+      validMoneny: '117,000',
+      betWinMoneny: '121,900',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      loosingRate: '50%',
+      meMoney: '-620',
+    },
+    slotReport: {
+      id: '2',
+      betMoneny: '75,400',
+      betTieMoneny: '',
+      betCancelMoneny: '',
+      validMoneny: '',
+      betWinMoneny: '181,100',
+      betWinLossMoneny: '-105,700',
+      rollingMoney: '3,770',
+      rollingBottomMoney: '1,659',
+      rollingMeMoney: '2,111',
+      loosingRate: '50%',
+      meMoney: '-54,735',
+    },
+  },
+  {
+    id: 'lossingReports_6',
+    parentId: 'lossingReports_5',
+    signinId: 'kgon2',
+    code: 'AAAAA',
+    depth: 1,
+    rank: '부본',
+    casinoReport: {
+      id: '3',
+      betMoneny: '123,000',
+      betTieMoneny: '6,000',
+      betCancelMoneny: '0',
+      validMoneny: '117,000',
+      betWinMoneny: '121,900',
+      betWinLossMoneny: '1,100',
+      rollingMoney: '2,340',
+      rollingBottomMoney: '1,755',
+      rollingMeMoney: '585',
+      loosingRate: '50%',
+      meMoney: '-620',
+    },
+    slotReport: {
+      id: '4',
+      betMoneny: '75,400',
+      betTieMoneny: '',
+      betCancelMoneny: '',
+      validMoneny: '',
+      betWinMoneny: '181,100',
+      betWinLossMoneny: '-105,700',
+      rollingMoney: '3,770',
+      rollingBottomMoney: '1,659',
+      rollingMeMoney: '2,111',
+      loosingRate: '50%',
+      meMoney: '-54,735',
+    },
+  },
+];
+
+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/mock-api/apps/report/modification-log/api.ts

@@ -33,7 +33,7 @@ export class ReportModificationLogMockApi {
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
+        const sort = request.params.get('sort') || 'signinId';
         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);
@@ -42,7 +42,7 @@ export class ReportModificationLogMockApi {
         let modificationLogs: any[] | null = cloneDeep(this._modificationLogs);
 
         // Sort the modificationLogs
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
+        if (sort === 'signinId' || sort === 'rank' || sort === 'history') {
           modificationLogs.sort((a, b) => {
             const fieldA = a[sort].toString().toUpperCase();
             const fieldB = b[sort].toString().toUpperCase();

src/app/mock-api/apps/report/modification-log/data.ts

@@ -2,32 +2,111 @@
 
 export const modificationLogs = [
   {
-    id: 'on00',
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
-    totalPartnerCount: '5',
+    idx: 109,
-    totalHoldingMoney: 303675,
+    rank: '회원',
-    totalComp: 108933,
+    signinId: 'aa100',
-    total: 412608,
+    history: '',
-    branchCount: 1,
+    managementRank: '관리자',
-    divisionCount: 1,
+    managementId: 'ADMIN',
-    officeCount: 1,
+    ip: '27.109.115.148',
-    storeCount: 1,
+    location: '관리자페이지',
-    memberCount: 1,
+    modificationDate: '2022-08-21 15:23:33',
-    nickname: 'on00',
+  },
-    accountHolder: '11',
+  {
-    phoneNumber: '010-1111-1111',
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
-    calculateType: '롤링',
+    idx: 108,
-    ownCash: 50000,
+    rank: '회원',
-    ownComp: 1711,
+    signinId: 'aa100',
-    ownCoupon: 50000,
+    history: '',
-    gameMoney: 0,
+    managementRank: '관리자',
-    todayComp: 0,
+    managementId: 'ADMIN',
-    totalDeposit: 0,
+    ip: '27.109.115.148',
-    totalWithdraw: 0,
+    location: '관리자페이지',
-    balance: 0,
+    modificationDate: '2022-08-21 15:23:33',
-    registDate: '2022-06-12 15:38',
+  },
-    finalSigninDate: '',
+  {
-    ip: '',
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
-    state: '정상',
+    idx: 107,
-    note: '',
+    rank: '회원',
+    signinId: 'aa100',
+    history: '',
+    managementRank: '관리자',
+    managementId: 'ADMIN',
+    ip: '27.109.115.148',
+    location: '관리자페이지',
+    modificationDate: '2022-08-21 15:23:33',
+  },
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    idx: 106,
+    rank: '회원',
+    signinId: 'aa100',
+    history: '',
+    managementRank: '관리자',
+    managementId: 'ADMIN',
+    ip: '27.109.115.148',
+    location: '관리자페이지',
+    modificationDate: '2022-08-21 15:23:33',
+  },
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    idx: 105,
+    rank: '회원',
+    signinId: 'aa100',
+    history: '파워볼배팅상태변경: 사용 => 제한',
+    managementRank: '관리자',
+    managementId: 'ADMIN',
+    ip: '27.109.115.148',
+    location: '관리자페이지',
+    modificationDate: '2022-08-21 15:23:33',
+  },
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    idx: 104,
+    rank: '회원',
+    signinId: 'aa100',
+    history: '슬롯요율변경: 3 ==> 0',
+    managementRank: '본사',
+    managementId: 'ADMIN',
+    ip: '27.109.115.148',
+    location: '관리자페이지',
+    modificationDate: '2022-08-21 15:23:33',
+  },
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    idx: 103,
+    rank: '회원',
+    signinId: 'aa100',
+    history: '비밀번호변경: asdf243 ==> 3350',
+    managementRank: '관리자',
+    managementId: 'ADMIN',
+    ip: '27.109.115.148',
+    location: '관리자페이지',
+    modificationDate: '2022-08-21 15:23:33',
+  },
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    idx: 102,
+    rank: '회원',
+    signinId: 'aa100',
+    history: '첫충상태변경: 제한 ==> 사용, 매충상태변경: 제한 ==> 사용',
+    managementRank: '관리자',
+    managementId: 'ADMIN',
+    ip: '27.109.115.148',
+    location: '관리자페이지',
+    modificationDate: '2022-08-21 15:23:33',
+  },
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    idx: 101,
+    rank: '회원',
+    signinId: 'aa100',
+    history: '계좌번호변경: ==> 111111111111, 예금주변경: ==> 테테',
+    managementRank: '관리자',
+    managementId: 'ADMIN',
+    ip: '27.109.115.148',
+    location: '관리자페이지',
+    modificationDate: '2022-08-21 15:23:33',
   },
 ];

src/app/mock-api/apps/report/money-log/api.ts

@@ -33,7 +33,7 @@ export class ReportMoneyLogMockApi {
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
+        const sort = request.params.get('sort') || 'signinId';
         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);
@@ -42,7 +42,7 @@ export class ReportMoneyLogMockApi {
         let moneyLogs: any[] | null = cloneDeep(this._moneyLogs);
 
         // Sort the moneyLogs
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
+        if (sort === 'signinId' || sort === 'nickname' || sort === 'momo') {
           moneyLogs.sort((a, b) => {
             const fieldA = a[sort].toString().toUpperCase();
             const fieldB = b[sort].toString().toUpperCase();

src/app/mock-api/apps/report/money-log/data.ts

@@ -2,32 +2,39 @@
 
 export const moneyLogs = [
   {
-    id: 'on00',
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
-    totalPartnerCount: '5',
+    finalSigninDate: '2022-06-21 16:17:30',
-    totalHoldingMoney: 303675,
+    signinId: 'aa100',
-    totalComp: 108933,
+    nickname: 'aa100',
-    total: 412608,
+    history: '[출금]카지노 게임 입금',
-    branchCount: 1,
+    beforeMoney: 67131,
-    divisionCount: 1,
+    changeMoney: -67131,
-    officeCount: 1,
+    afterMoney: 0,
-    storeCount: 1,
+    memo: '',
-    memberCount: 1,
+    bettingNumber: 0,
-    nickname: 'on00',
+  },
-    accountHolder: '11',
+  {
-    phoneNumber: '010-1111-1111',
+    id: '00b0292f-3d50-4669-a0c4-7a9d85efc98d',
-    calculateType: '롤링',
+    finalSigninDate: '2022-06-19 22:03:10',
-    ownCash: 50000,
+    signinId: 'aa100',
-    ownComp: 1711,
+    nickname: 'aa100',
-    ownCoupon: 50000,
+    history: '[입금]카지노 게임 출금',
-    gameMoney: 0,
+    beforeMoney: 0,
-    todayComp: 0,
+    changeMoney: 67131,
-    totalDeposit: 0,
+    afterMoney: 67131,
-    totalWithdraw: 0,
+    memo: '',
-    balance: 0,
+    bettingNumber: 0,
-    registDate: '2022-06-12 15:38',
+  },
-    finalSigninDate: '',
+  {
-    ip: '',
+    id: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de',
-    state: '정상',
+    finalSigninDate: '2022-06-17 16:27:03',
-    note: '',
+    signinId: 'onon6',
+    nickname: '가가가',
+    history: '[회수]관리자차감',
+    beforeMoney: 263737,
+    changeMoney: -263737,
+    afterMoney: 0,
+    memo: '',
+    bettingNumber: 0,
   },
 ];

src/app/mock-api/apps/report/payment-log/api.ts

@@ -33,7 +33,7 @@ export class ReportPaymentLogMockApi {
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
+        const sort = request.params.get('sort') || 'giveId';
         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);
@@ -42,7 +42,7 @@ export class ReportPaymentLogMockApi {
         let paymentLogs: any[] | null = cloneDeep(this._paymentLogs);
 
         // Sort the paymentLogs
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
+        if (sort === 'giveId' || sort === 'takeId' || sort === 'idx') {
           paymentLogs.sort((a, b) => {
             const fieldA = a[sort].toString().toUpperCase();
             const fieldB = b[sort].toString().toUpperCase();

src/app/mock-api/apps/report/payment-log/data.ts

@@ -2,32 +2,99 @@
 
 export const paymentLogs = [
   {
-    id: 'on00',
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
-    totalPartnerCount: '5',
+    idx: 6,
-    totalHoldingMoney: 303675,
+    giveRank: '회원',
-    totalComp: 108933,
+    takeRank: '총판',
-    total: 412608,
+    giveId: 'onon6',
-    branchCount: 1,
+    takeId: 'on03',
-    divisionCount: 1,
+    giveBeforeMoney: 0,
-    officeCount: 1,
+    giveChangeMoney: 10000,
-    storeCount: 1,
+    giveAfterMoney: 10000,
-    memberCount: 1,
+    takeBeforeMoney: 213940,
-    nickname: 'on00',
+    takeChangeMoney: -10000,
-    accountHolder: '11',
+    takeAfterMoney: 203940,
-    phoneNumber: '010-1111-1111',
+    giveRegistrationDate: '2022-06-12 17:43',
-    calculateType: '롤링',
+    takeRegistrationDate: '2022-06-12 17:43',
-    ownCash: 50000,
+  },
-    ownComp: 1711,
+  {
-    ownCoupon: 50000,
+    id: '00b0292f-3d50-4669-a0c4-7a9d85efc98d',
-    gameMoney: 0,
+    idx: 5,
-    todayComp: 0,
+    giveRank: '매장',
-    totalDeposit: 0,
+    takeRank: '회원',
-    totalWithdraw: 0,
+    giveId: 'on04',
-    balance: 0,
+    takeId: 'onon6',
-    registDate: '2022-06-12 15:38',
+    giveBeforeMoney: 0,
-    finalSigninDate: '',
+    giveChangeMoney: 200000,
-    ip: '',
+    giveAfterMoney: 200000,
-    state: '정상',
+    takeBeforeMoney: 200000,
-    note: '',
+    takeChangeMoney: -200000,
+    takeAfterMoney: 0,
+    giveRegistrationDate: '2022-06-12 16:22',
+    takeRegistrationDate: '2022-06-12 16:22',
+  },
+  {
+    id: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de',
+    idx: 4,
+    giveRank: '총판',
+    takeRank: '매장',
+    giveId: 'on03',
+    takeId: 'on04',
+    giveBeforeMoney: 0,
+    giveChangeMoney: 200000,
+    giveAfterMoney: 200000,
+    takeBeforeMoney: 200000,
+    takeChangeMoney: -200000,
+    takeAfterMoney: 0,
+    giveRegistrationDate: '2022-06-12 16:21',
+    takeRegistrationDate: '2022-06-12 16:21',
+  },
+  {
+    id: '8fcce528-d878-4cc8-99f7-bd3451ed5405',
+    idx: 3,
+    giveRank: '부본사',
+    takeRank: '총판',
+    giveId: 'on02',
+    takeId: 'on03',
+    giveBeforeMoney: 0,
+    giveChangeMoney: 200000,
+    giveAfterMoney: 200000,
+    takeBeforeMoney: 200000,
+    takeChangeMoney: -200000,
+    takeAfterMoney: 0,
+    giveRegistrationDate: '2022-06-12 16:20',
+    takeRegistrationDate: '2022-06-12 16:20',
+  },
+  {
+    id: '8fcce528-d878-4cc8-99f7-bd3451ed5406',
+    idx: 2,
+    giveRank: '대본사',
+    takeRank: '부본사',
+    giveId: 'on01',
+    takeId: 'on02',
+    giveBeforeMoney: 0,
+    giveChangeMoney: 200000,
+    giveAfterMoney: 200000,
+    takeBeforeMoney: 250000,
+    takeChangeMoney: -200000,
+    takeAfterMoney: 50000,
+    giveRegistrationDate: '2022-06-12 16:16',
+    takeRegistrationDate: '2022-06-12 16:16',
+  },
+  {
+    id: 'd7a47d7c-4cdf-4319-bbaa-37ade38c622c',
+    idx: 1,
+    giveRank: '본사',
+    takeRank: '대본사',
+    giveId: 'on00',
+    takeId: 'on01',
+    giveBeforeMoney: 0,
+    giveChangeMoney: 250000,
+    giveAfterMoney: 250000,
+    takeBeforeMoney: 300000,
+    takeChangeMoney: -250000,
+    takeAfterMoney: 50000,
+    giveRegistrationDate: '2022-06-12 16:11',
+    takeRegistrationDate: '2022-06-12 16:11',
   },
 ];

src/app/modules/admin/board/notice-oneline/components/index.ts

@@ -1,3 +1,4 @@
 import { ListComponent } from './list.component';
+import { ReditComponent } from './redit.component';
 
-export const COMPONENTS = [ListComponent];
+export const COMPONENTS = [ListComponent, ReditComponent];

src/app/modules/admin/board/notice-oneline/components/list.component.html

@@ -12,115 +12,80 @@
     <!-- Title -->
     <div class="text-4xl font-extrabold tracking-tight">한줄공지</div>
     <!-- Actions -->
-    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- Memo -->
-      <!-- <mat-form-field>
-        <ng-container *ngIf="dailys$ | async as dailys">
-          <ng-container
-            *ngFor="let daily of dailys; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ daily.totalPartnerCount }} 총 보유머니:{{
-                  daily.totalHoldingMoney
-                }}
-                총 콤프:{{ daily.totalComp }} 총 합계:{{
-                  daily.total
-                }}
-              </fieldset>
-            </div>
-          </ng-container>
-        </ng-container>
-      </mat-form-field> -->
 
-      <!-- SelectBox -->
+    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- <mat-form-field>
-        <mat-select placeholder="리스트수">
-          <mat-option value="40">40</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내용">
-          <mat-option value="">카지노콤프</mat-option>
-          <mat-option value="">슬롯콤프</mat-option>
-          <mat-option value="">배팅콤프</mat-option>
-          <mat-option value="">첫충콤프</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field> -->
-      <mat-form-field>
-        <mat-select placeholder="아이디">
-          <mat-option value="">아이디</mat-option>
-          <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
-          <mat-option value="">사이트</mat-option>
-        </mat-select>
-      </mat-form-field>
       <!-- Search -->
-      <mat-form-field
+
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
+      <button mat-icon-button (click)="__onClickSearch()">
-      >
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <mat-icon
+      </button>
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
-        <input
-          matInput
-          [formControl]="searchInputControl"
-          [autocomplete]="'off'"
-          [placeholder]="'Search'"
-        />
-      </mat-form-field>
-      <!-- Add user button -->
       <button
         class="ml-4"
         mat-flat-button
         [color]="'primary'"
+        (click)="__onClickReditBtn($event, '0')"
+      >
+        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
+        <span class="ml-2 mr-1">등록</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- Search --><!-- Search -->
+  <div
+    *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:plus'"></mat-icon> -->
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <span class="ml-2 mr-1">검색하기</span>
+        <span class="ml-2 mr-1">Search</span>
       </button>
     </div>
+    <!-- Card inception -->
+    <div class="col-span-2 sm:col-span-1">
+      <mat-form-field
+        class="fuse-mat-no-subscript w-full"
+        [floatLabel]="'always'"
+      >
+        <input
+          matInput
+          [matDatepicker]="picker1"
+          [placeholder]="'Choose a date'"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="picker1"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #picker1></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <!-- Card expiration -->
+    <div class="col-span-2 sm:col-span-1">
+      <mat-form-field
+        class="fuse-mat-no-subscript w-full"
+        [floatLabel]="'always'"
+      >
+        <input
+          matInput
+          [matDatepicker]="picker2"
+          [placeholder]="'Choose a date'"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="picker2"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #picker2></mat-datepicker>
+      </mat-form-field>
+    </div>
   </div>
 
   <!-- Main -->
@@ -130,21 +95,25 @@
       class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
     >
       <ng-container *ngIf="noticeOnelines$ | async as noticeOnelines">
-        <ng-container *ngIf="noticeOnelines.length > 0; else noNoticeOneline">
+        <ng-container *ngIf="noticeOnelines.length > 0; else noUser">
           <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"
+              class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
-              matSort
-              matSortDisableClear
             >
-              <div class="hidden sm:block">번호</div>
+              <div class="hidden lg:block">번호</div>
-              <div class="hidden sm:block">사이트</div>
+              <div class="hidden lg:block">사이트</div>
-              <div class="hidden sm:block">제목</div>
+              <div class="hidden lg:block">제목</div>
-              <div class="hidden sm:block">작성자</div>
+              <div class="hidden lg:block">
-              <div class="hidden sm:block">작성일</div>
+                작성자
-              <div class="hidden sm:block">조회</div>
+                <hr style="margin: 7px 0px" />
-              <div class="hidden sm:block">상태</div>
+                작성일
+              </div>
+              <div class="hidden lg:block">
+                조회
+                <hr style="margin: 7px 0px" />
+                상태
+              </div>
             </div>
             <!-- Rows -->
             <ng-container *ngIf="noticeOnelines$ | async as noticeOnelines">
@@ -158,37 +127,39 @@
                   class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
                   <!-- 번호 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ noticeOneline.idx }}
                   </div>
                   <!-- 사이트 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ noticeOneline.site }}
                   </div>
                   <!-- 제목 -->
-                  <div class="hidden sm:block truncate">
+                  <div
+                    class="hidden lg:block"
+                    style="cursor: pointer"
+                    (click)="__onClickReditBtn($event, noticeOneline.id)"
+                  >
                     {{ noticeOneline.title }}
                   </div>
-                  <!-- 작성자 -->
+                  <!-- 작성자 || 작성일 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ noticeOneline.writer }}
-                  </div>
+                    <hr style="margin: 7px 0px" />
-                  <!-- 작성일 -->
+
-                  <div class="hidden sm:block truncate">
                     {{ noticeOneline.writeDate }}
                   </div>
-                  <!-- 조회 -->
+                  <!-- 조회 || 상태 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ noticeOneline.views }}
-                  </div>
+                    <hr style="margin: 7px 0px" />
-                  <!-- 상태 -->
+
-                  <div class="hidden sm:block truncate">
                     {{ noticeOneline.state }}
                   </div>
+
+                  <!-- management -->
                 </div>
               </ng-container>
-              <!-- 등록 -->
-              <button mat-flat-button [color]="'primary'">등록</button>
             </ng-container>
           </div>
 
@@ -204,11 +175,11 @@
         </ng-container>
       </ng-container>
 
-      <ng-template #noNoticeOneline>
+      <ng-template #noUser>
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
-          There are no noticeOnelines!
+          There are no data!
         </div>
       </ng-template>
     </div>

src/app/modules/admin/board/notice-oneline/components/list.component.ts

@@ -8,28 +8,13 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {
+import { FormBuilder, FormControl } from '@angular/forms';
-  FormBuilder,
+
-  FormControl,
+import { MatPaginator } from '@angular/material/paginator';
-  FormGroup,
+
-  Validators,
+import { Observable, Subject, takeUntil } from 'rxjs';
-} from '@angular/forms';
+import { fuseAnimations } from '@fuse/animations';
-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 '../../../member/user/models/user';
 import { NoticeOneline } from '../models/notice-oneline';
 import { NoticeOnelinePagination } from '../models/notice-oneline-pagination';
 import { NoticeOnelineService } from '../services/notice-oneline.service';
@@ -42,18 +27,18 @@ import { Router } from '@angular/router';
     /* language=SCSS */
     `
       .inventory-grid {
-        grid-template-columns: 60px auto 40px;
+        grid-template-columns: 40px 40px auto 200px 200px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          grid-template-columns: 40px 40px auto 200px 200px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          grid-template-columns: 40px 40px auto 300px 200px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          grid-template-columns: 40px 40px auto 300px 200px;
         }
       }
     `,
@@ -64,16 +49,16 @@ import { Router } from '@angular/router';
 })
 export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
-  @ViewChild(MatSort) private _sort!: MatSort;
 
   noticeOnelines$!: Observable<NoticeOneline[] | undefined>;
-  users$!: Observable<User[] | undefined>;
 
   isLoading = false;
   searchInputControl = new FormControl();
   selectedNoticeOneline?: NoticeOneline;
   pagination?: NoticeOnelinePagination;
 
+  __isSearchOpened = false;
+
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
   /**
@@ -81,8 +66,6 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
-    private _fuseConfirmationService: FuseConfirmationService,
-    private _formBuilder: FormBuilder,
     private _noticeOnelineService: NoticeOnelineService,
     private router: Router
   ) {}
@@ -113,45 +96,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   /**
    * After view init
    */
-  ngAfterViewInit(): void {
+  ngAfterViewInit(): void {}
-    if (this._sort && this._paginator) {
-      // Set the initial sort
-      this._sort.sort({
-        id: 'name',
-        start: 'asc',
-        disableClear: true,
-      });
-
-      // Mark for check
-      this._changeDetectorRef.markForCheck();
-
-      // If the noticeOneline changes the sort order...
-      this._sort.sortChange
-        .pipe(takeUntil(this._unsubscribeAll))
-        .subscribe(() => {
-          // Reset back to the first page
-          this._paginator.pageIndex = 0;
-        });
-
-      // Get products if sort or page changes
-      merge(this._sort.sortChange, this._paginator.page)
-        .pipe(
-          switchMap(() => {
-            this.isLoading = true;
-            return this._noticeOnelineService.getNoticeOnelines(
-              this._paginator.pageIndex,
-              this._paginator.pageSize,
-              this._sort.active,
-              this._sort.direction
-            );
-          }),
-          map(() => {
-            this.isLoading = false;
-          })
-        )
-        .subscribe();
-    }
-  }
 
   /**
    * On destroy
@@ -166,14 +111,24 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
-  viewUserDetail(id: string): void {
-    let url: string = 'member/user/' + id;
-    this.router.navigateByUrl(url);
-  }
   // -----------------------------------------------------------------------------------------------------
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickTItle(noticeOneline: NoticeOneline): void {}
+  __onClickSearch(): void {
+    this.__isSearchOpened = !this.__isSearchOpened;
+  }
+
+  __onClickReditBtn(event: MouseEvent, id: string): void {
+    const param = id === '0' ? '' : id;
+    let url: string = 'board/notice-oneline/redit/' + param;
+    this.router.navigateByUrl(url);
+  }
   /**
    * Create product
    */

src/app/modules/admin/board/notice-oneline/components/redit.component.html

@@ -0,0 +1,137 @@
+<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">
+            한줄공지 {{ !noticeOneline ? "등록" : "수정" }}
+          </div>
+          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+            <form
+              [formGroup]="noticeOnelineForm"
+              autocomplete="off"
+              class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+            >
+              <!-- 공지적용 -->
+              <div>
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>공지적용</mat-label>
+                  <mat-select>
+                    <ng-container *ngFor="let type of noticeType">
+                      <mat-option [value]="type.key">
+                        {{ type.value }}
+                      </mat-option>
+                    </ng-container>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+
+              <!-- 사이트선택 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>사이트선택</mat-label>
+                  <mat-select>
+                    <ng-container *ngFor="let type of siteType">
+                      <mat-option [value]="type.key">
+                        {{ type.value }}
+                      </mat-option>
+                    </ng-container>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+              <!-- 글쓴이 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>글쓴이(아이디)</mat-label>
+                  <input
+                    matInput
+                    readonly="true"
+                    [formControlName]="'writer'"
+                  />
+                </mat-form-field>
+              </div>
+              <!-- 제목 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>제목</mat-label>
+                  <input matInput readonly="true" [formControlName]="'title'" />
+                </mat-form-field>
+              </div>
+              <!-- 등록시간 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>등록시간</mat-label>
+                  <input matInput [formControlName]="'writerDate'" />
+                </mat-form-field>
+                <span
+                  >예) 2001-01-01 23시22분(2001년 1월1일 오후 11시21분)-
+                  <p style="color: red">미등록시 현재일로 등록</p></span
+                >
+              </div>
+              <!-- 조회수 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>조회수</mat-label>
+                  <input matInput readonly="true" [formControlName]="'views'" />
+                </mat-form-field>
+              </div>
+              <!-- Body -->
+              <!-- <quill-editor class="mt-2"></quill-editor> -->
+              <mat-form-field
+                class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+              >
+                <textarea
+                  matInput
+                  [required]="true"
+                  [rows]="5"
+                  matTextareaAutosize
+                  [formControlName]="'content'"
+                ></textarea>
+                <mat-label>내용</mat-label>
+              </mat-form-field>
+            </form>
+          </div>
+          <!-- Actions -->
+          <div
+            class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+          >
+            <div class="flex items-center mt-4 sm:mt-0">
+              <!-- Save as draft -->
+              <button
+                class="sm:mx-3"
+                mat-stroked-button
+                (click)="__onClickeCancel()"
+              >
+                <span>취소</span>
+              </button>
+              <!-- Send -->
+              <button
+                class="order-first sm:order-last"
+                mat-flat-button
+                [color]="'primary'"
+                (click)="__onClickReditBtn(noticeOneline)"
+              >
+                {{ !noticeOneline ? "등록" : "수정" }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/admin/board/notice-oneline/components/redit.component.ts

@@ -8,33 +8,20 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {
+
-  FormBuilder,
+import { ActivatedRoute, Router } from '@angular/router';
-  FormControl,
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import {
+import { Subject, takeUntil } from 'rxjs';
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
-
+import { NoticeOnelineService } from '../services/notice-oneline.service';
-import { User } from 'app/modules/admin/member/user/models/user';
+import { NoticeOneline } from '../models/notice-oneline';
-import { UserService } from 'app/modules/admin/member/user/services/user.service';
 
 @Component({
-  selector: 'notice-oneline-registration',
+  selector: 'notice-oneline-redit',
-  templateUrl: './registration.component.html',
+  templateUrl: './redit.component.html',
   styles: [
     /* language=SCSS */
     `
@@ -59,14 +46,20 @@ import { UserService } from 'app/modules/admin/member/user/services/user.service
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: fuseAnimations,
 })
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
   isLoading = false;
   searchInputControl = new FormControl();
-  selectedProductForm!: FormGroup;
+  noticeOnelineForm!: FormGroup;
-  selectedUser?: User;
+  editMode: boolean = false;
+
+  noticeType = NOTICE_ONELINE_TYPE;
+  siteType = SITE_NOTICE_ONELINE_TYPE;
+  useOrNotType = USE_OR_NOT_NOTICE_ONELINE_TYPE;
+
+  noticeOneline!: NoticeOneline;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -77,7 +70,9 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
     private _changeDetectorRef: ChangeDetectorRef,
     private _fuseConfirmationService: FuseConfirmationService,
     private _formBuilder: FormBuilder,
-    private _userService: UserService
+    private _route: ActivatedRoute,
+    private _router: Router,
+    private _noticeOnelineService: NoticeOnelineService
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -88,53 +83,32 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
+    // Create the contact form
-      id: [''],
+    this.noticeOnelineForm = this._formBuilder.group({
-      signinId: [{ value: '', disabled: true }],
+      writer: ['관리자'],
-      signinPw: [{ value: '' }],
+      noticeType: [''],
-      exchangePw: [''],
+      useOrNot: [''],
-      description: [''],
+      widthSize: [''],
-      tags: [[]],
+      site: [''],
-      nickname: [{ value: '', disabled: true }],
+      title: [''],
-      ownCash: [''],
+      writerDate: [''],
-      phoneNumber: [''],
+      views: ['0'],
-      level: [''],
+      content: [''],
-      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._noticeOnelineService.noticeOneline$
-    this._userService.user$
       .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((user: User | undefined) => {
+      .subscribe((noticeOneline: NoticeOneline | undefined) => {
-        if (!user) {
+        if (!noticeOneline) {
           return;
         }
-        this.selectedUser = user;
 
-        this.selectedProductForm.patchValue(user);
+        this.noticeOneline = noticeOneline;
+        this.noticeOnelineForm.patchValue(noticeOneline);
+
         // Mark for check
         this._changeDetectorRef.markForCheck();
       });
-
-    /* this.user$ = this._userService.user$; */
   }
 
   /**
@@ -159,6 +133,14 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  __onClickeCancel(): void {
+    /* let url: string = 'board/customer-template/';
+    this._router.navigateByUrl(url); */
+  }
+  __onClickReditBtn(noticeOneline: NoticeOneline): void {
+    console.log('click: ', noticeOneline);
+  }
+
   /**
    * Create product
    */
@@ -171,6 +153,22 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __toggleDetails(productId: string): void {}
 
+  /**
+   * Toggle edit mode
+   *
+   * @param editMode
+   */
+  toggleEditMode(editMode: boolean | null = null): void {
+    if (editMode === null) {
+      this.editMode = !this.editMode;
+    } else {
+      this.editMode = editMode;
+    }
+
+    // Mark for check
+    this._changeDetectorRef.markForCheck();
+  }
+
   /**
    * Track by function for ngFor loops
    *
@@ -181,3 +179,28 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
     return item.id || index;
   }
 }
+
+export const NOTICE_ONELINE_TYPE = [
+  {
+    key: '0',
+    value: '흐르는공지',
+  },
+];
+
+export const SITE_NOTICE_ONELINE_TYPE = [
+  {
+    key: '0',
+    value: '--전체--',
+  },
+];
+
+export const USE_OR_NOT_NOTICE_ONELINE_TYPE = [
+  {
+    key: '0',
+    value: '사용(노출)',
+  },
+  {
+    key: '1',
+    value: '미사용',
+  },
+];

src/app/modules/admin/board/notice-oneline/components/registration.component.html

@@ -1,2 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">한줄공지 등록</div>

src/app/modules/admin/board/notice-oneline/components/view.component.html

@@ -1,2 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">한줄공지-상세page</div>

src/app/modules/admin/board/notice-oneline/models/notice-oneline.ts

@@ -1,4 +1,5 @@
 export interface NoticeOneline {
+  id: string;
   idx?: number;
   site?: string;
   title?: string;

src/app/modules/admin/board/notice-oneline/notice-oneline.module.ts

@@ -15,6 +15,8 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -45,6 +47,8 @@ import { noticeOnelineRoutes } from './notice-oneline.routing';
     MatSlideToggleModule,
     MatRadioModule,
     MatCheckboxModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class NoticeOnelineModule {}

src/app/modules/admin/board/notice-oneline/notice-oneline.routing.ts

@@ -1,24 +1,35 @@
 import { Route } from '@angular/router';
 
 import { ListComponent } from './components/list.component';
-import { ViewComponent } from '../../member/user/components/view.component';
+import { ReditComponent } from './components/redit.component';
 
-import { NoticeOnelinesResolver } from './resolvers/notice-oneline.resolver';
+import {
-import { UserResolver } from '../../member/user/resolvers/user.resolver';
+  NoticeOnelinesResolver,
+  NoticeOnelineResolver,
+} from './resolvers/notice-oneline.resolver';
 
 export const noticeOnelineRoutes: Route[] = [
   {
     path: '',
+    pathMatch: 'full',
+    redirectTo: 'list',
+  },
+  {
+    path: 'list',
     component: ListComponent,
     resolve: {
       noticeOnelines: NoticeOnelinesResolver,
     },
   },
   {
-    path: ':id',
+    path: 'redit',
-    component: ViewComponent,
+    component: ReditComponent,
+  },
+  {
+    path: 'redit/:id',
+    component: ReditComponent,
     resolve: {
-      users: UserResolver,
+      noticeOneline: NoticeOnelineResolver,
     },
   },
 ];

src/app/modules/admin/board/notice-oneline/resolvers/notice-oneline.resolver.ts

@@ -38,7 +38,7 @@ export class NoticeOnelineResolver implements Resolve<any> {
     state: RouterStateSnapshot
   ): Observable<NoticeOneline | undefined> {
     return this._noticeOnelineService
-      .getNoticeOnelineById(route.paramMap.get('title'))
+      .getNoticeOnelineById(route.paramMap.get('id'))
       .pipe(
         // Error here means the requested product is not available
         catchError((error) => {

src/app/modules/admin/board/notice/components/index.ts

@@ -1,3 +1,4 @@
 import { ListComponent } from './list.component';
+import { ReditComponent } from './redit.component';
 
-export const COMPONENTS = [ListComponent];
+export const COMPONENTS = [ListComponent, ReditComponent];

src/app/modules/admin/board/notice/components/list.component.html

@@ -12,132 +12,99 @@
     <!-- Title -->
     <div class="text-4xl font-extrabold tracking-tight">공지사항</div>
     <!-- Actions -->
-    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- Memo -->
-      <!-- <mat-form-field>
-        <ng-container *ngIf="notices$ | async as notices">
-          <ng-container
-            *ngFor="let notice of notices; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ notice.totalPartnerCount }} 총 보유머니:{{
-                  notice.totalHoldingMoney
-                }}
-                총 콤프:{{ notice.totalComp }} 총 합계:{{
-                  notice.total
-                }}
-              </fieldset>
-            </div>
-          </ng-container>
-        </ng-container>
-      </mat-form-field> -->
 
-      <!-- SelectBox -->
+    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- <mat-form-field>
-        <mat-select placeholder="리스트수">
-          <mat-option value="40">40</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field> -->
-      <mat-form-field>
-        <mat-select placeholder="검색어">
-          <mat-option value="">작성자</mat-option>
-          <mat-option value="">글제목</mat-option>
-          <mat-option value="">글내용</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <!-- <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="아이디">
-          <mat-option value="">아이디</mat-option>
-          <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
-          <mat-option value="">사이트</mat-option>
-          <mat-option value="">파트너수동지급</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="가입일 정렬">
-          <mat-option value="">가입일 정렬</mat-option>
-          <mat-option value="">아이디 정렬</mat-option>
-          <mat-option value="">닉네임 정렬</mat-option>
-          <mat-option value="">캐쉬 정렬</mat-option>
-          <mat-option value="">콤프 정렬</mat-option>
-          <mat-option value="">쿠폰 정렬</mat-option>
-          <mat-option value="">입금 정렬</mat-option>
-          <mat-option value="">출금 정렬</mat-option>
-          <mat-option value="">차익 정렬</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
       <!-- Search -->
-      <mat-form-field
+      <div>
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
+        <button mat-icon-button (click)="__onClickSearch()">
+          <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Search --><!-- Search -->
+  <div
+    *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">
+      <mat-form-field
+        class="fuse-mat-no-subscript w-full"
+        [floatLabel]="'always'"
       >
-        <mat-icon
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
         <input
           matInput
-          [formControl]="searchInputControl"
+          [matDatepicker]="picker1"
-          [autocomplete]="'off'"
+          [placeholder]="'Choose a date'"
-          [placeholder]="'Search'"
         />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="picker1"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #picker1></mat-datepicker>
       </mat-form-field>
-      <!-- Add user button -->
+    </div>
+    <!-- Card expiration -->
+    <div class="col-span-2 sm:col-span-1">
+      <mat-form-field
+        class="fuse-mat-no-subscript w-full"
+        [floatLabel]="'always'"
+      >
+        <input
+          matInput
+          [matDatepicker]="picker2"
+          [placeholder]="'Choose a date'"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="picker2"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #picker2></mat-datepicker>
+      </mat-form-field>
+    </div>
+  </div>
+
+  <div
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
+  >
+    <!-- Title -->
+    <div class="text-4xl font-extrabold tracking-tight"></div>
+    <!-- Actions -->
+
+    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
+      <!-- Search -->
       <button
         class="ml-4"
         mat-flat-button
         [color]="'primary'"
-        (click)="__createProduct()"
+        (click)="__onClickReditBtn($event, '0')"
       >
-        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
+        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
-        <span class="ml-2 mr-1">검색하기</span>
+        <span class="ml-2 mr-1">등록</span>
+      </button>
+      <button class="ml-4" mat-flat-button [color]="'primary'">
+        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
+        <span class="ml-2 mr-1">숨김</span>
+      </button>
+      <button class="ml-4" mat-flat-button [color]="'primary'">
+        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
+        <span class="ml-2 mr-1">완전삭제</span>
       </button>
     </div>
   </div>
@@ -149,22 +116,28 @@
       class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
     >
       <ng-container *ngIf="notices$ | async as notices">
-        <ng-container *ngIf="notices.length > 0; else noNotice">
+        <ng-container *ngIf="notices.length > 0; else noUser">
           <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"
+              class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
-              matSort
-              matSortDisableClear
             >
-              <div class="hidden sm:block">선택</div>
+              <div class="hidden lg:block">
-              <div class="hidden sm:block">번호</div>
+                <mat-checkbox></mat-checkbox>
-              <div class="hidden sm:block">사이트</div>
+              </div>
-              <div class="hidden sm:block">제목</div>
+              <div class="hidden lg:block">번호</div>
-              <div class="hidden sm:block">작성자</div>
+              <div class="hidden lg:block">사이트</div>
-              <div class="hidden sm:block">작성일</div>
+              <div class="hidden lg:block">제목</div>
-              <div class="hidden sm:block">조회</div>
+              <div class="hidden lg:block">
-              <div class="hidden sm:block">상태</div>
+                작성자
+                <hr style="margin: 7px 0px" />
+                작성일
+              </div>
+              <div class="hidden lg:block">
+                조회
+                <hr style="margin: 7px 0px" />
+                상태
+              </div>
             </div>
             <!-- Rows -->
             <ng-container *ngIf="notices$ | async as notices">
@@ -174,44 +147,44 @@
                 <div
                   class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
-                  <!-- 선택 -->
+                  <div class="hidden lg:block">
-                  <div class="hidden sm:block truncate">
                     <mat-checkbox></mat-checkbox>
                   </div>
                   <!-- 번호 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ notice.idx }}
                   </div>
                   <!-- 사이트 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ notice.site }}
                   </div>
                   <!-- 제목 -->
-                  <div class="hidden sm:block truncate">
+                  <div
+                    class="hidden lg:block"
+                    style="cursor: pointer"
+                    (click)="__onClickReditBtn($event, notice.id)"
+                  >
                     {{ notice.title }}
                   </div>
-                  <!-- 작성자 -->
+                  <!-- 작성자 || 작성일 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ notice.writer }}
-                  </div>
+                    <hr style="margin: 7px 0px" />
-                  <!-- 작성일 -->
+
-                  <div class="hidden sm:block truncate">
                     {{ notice.writeDate }}
                   </div>
-                  <!-- 조회 -->
+                  <!-- 조회 || 상태 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ notice.views }}
-                  </div>
+                    <hr style="margin: 7px 0px" />
-                  <!-- 상태 -->
+
-                  <div class="hidden sm:block truncate">
                     {{ notice.state }}
                   </div>
+
+                  <!-- management -->
                 </div>
               </ng-container>
             </ng-container>
-            <button mat-flat-button [color]="'primary'">등록</button>
-            <button mat-flat-button [color]="'primary'">숨김</button>
-            <button mat-flat-button [color]="'warn'">완전삭제</button>
           </div>
 
           <mat-paginator
@@ -226,11 +199,11 @@
         </ng-container>
       </ng-container>
 
-      <ng-template #noNotice>
+      <ng-template #noUser>
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
-          There are no notices!
+          There are no data!
         </div>
       </ng-template>
     </div>

src/app/modules/admin/board/notice/components/list.component.ts

@@ -42,18 +42,18 @@ import { Router } from '@angular/router';
     /* language=SCSS */
     `
       .inventory-grid {
-        grid-template-columns: 60px auto 40px;
+        grid-template-columns: 40px 40px 40px auto 200px 200px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          grid-template-columns: 40px 40px 40px auto 200px 200px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          grid-template-columns: 40px 40px 40px auto 300px 200px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          grid-template-columns: 40px 40px 40px auto 300px 200px;
         }
       }
     `,
@@ -67,13 +67,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatSort) private _sort!: MatSort;
 
   notices$!: Observable<Notice[] | undefined>;
-  users$!: Observable<User[] | undefined>;
 
   isLoading = false;
   searchInputControl = new FormControl();
   selectedNotice?: Notice;
   pagination?: NoticePagination;
 
+  __isSearchOpened = false;
+
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
   /**
@@ -113,45 +114,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   /**
    * After view init
    */
-  ngAfterViewInit(): void {
+  ngAfterViewInit(): void {}
-    if (this._sort && this._paginator) {
-      // Set the initial sort
-      this._sort.sort({
-        id: 'name',
-        start: 'asc',
-        disableClear: true,
-      });
-
-      // Mark for check
-      this._changeDetectorRef.markForCheck();
-
-      // If the notice changes the sort order...
-      this._sort.sortChange
-        .pipe(takeUntil(this._unsubscribeAll))
-        .subscribe(() => {
-          // Reset back to the first page
-          this._paginator.pageIndex = 0;
-        });
-
-      // Get products if sort or page changes
-      merge(this._sort.sortChange, this._paginator.page)
-        .pipe(
-          switchMap(() => {
-            this.isLoading = true;
-            return this._noticeService.getNotices(
-              this._paginator.pageIndex,
-              this._paginator.pageSize,
-              this._sort.active,
-              this._sort.direction
-            );
-          }),
-          map(() => {
-            this.isLoading = false;
-          })
-        )
-        .subscribe();
-    }
-  }
 
   /**
    * On destroy
@@ -166,14 +129,19 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
-  viewUserDetail(id: string): void {
-    let url: string = 'member/user/' + id;
-    this.router.navigateByUrl(url);
-  }
   // -----------------------------------------------------------------------------------------------------
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  __onClickReditBtn(event: MouseEvent, id: string): void {
+    const param = id === '0' ? '' : id;
+    let url: string = 'board/notice/redit/' + param;
+    this.router.navigateByUrl(url);
+  }
+  __onClickSearch(): void {
+    this.__isSearchOpened = !this.__isSearchOpened;
+  }
+
   /**
    * Create product
    */

src/app/modules/admin/board/notice/components/redit.component.html

@@ -0,0 +1,123 @@
+<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">
+            공지사항 {{ !notice ? "등록" : "수정" }}
+          </div>
+          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+            <form
+              [formGroup]="noticeForm"
+              autocomplete="off"
+              class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+            >
+              <!-- 글쓴이 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>글쓴이(아이디)</mat-label>
+                  <input
+                    matInput
+                    readonly="true"
+                    [formControlName]="'writer'"
+                  />
+                </mat-form-field>
+              </div>
+
+              <!-- 공지적용 -->
+              <div>
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>공지적용</mat-label>
+                  <mat-select>
+                    <ng-container *ngFor="let type of noticeType">
+                      <mat-option [value]="type.key">
+                        {{ type.value }}
+                      </mat-option>
+                    </ng-container>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+
+              <!-- 제목 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>제목</mat-label>
+                  <input matInput readonly="true" [formControlName]="'title'" />
+                </mat-form-field>
+              </div>
+              <!-- 등록시간 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>등록시간</mat-label>
+                  <input matInput [formControlName]="'writerDate'" />
+                </mat-form-field>
+                <span
+                  >예) 2001-01-01 23시22분(2001년 1월1일 오후 11시21분)-
+                  <p style="color: red">미등록시 현재일로 등록</p></span
+                >
+              </div>
+
+              <!-- Body -->
+              <!-- <quill-editor class="mt-2"></quill-editor> -->
+              <mat-form-field
+                class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+              >
+                <textarea
+                  matInput
+                  [required]="true"
+                  [rows]="5"
+                  matTextareaAutosize
+                  [formControlName]="'content'"
+                ></textarea>
+                <mat-label>내용</mat-label>
+              </mat-form-field>
+            </form>
+          </div>
+          <!-- Actions -->
+          <div
+            class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+          >
+            <div class="flex items-center mt-4 sm:mt-0">
+              <!-- Save as draft -->
+              <button
+                class="sm:mx-3"
+                mat-stroked-button
+                (click)="__onClickeCancel()"
+              >
+                <span>취소</span>
+              </button>
+              <!-- Send -->
+              <button
+                class="order-first sm:order-last"
+                mat-flat-button
+                [color]="'primary'"
+                (click)="__onClickReditBtn($event, notice)"
+              >
+                {{ !notice ? "등록" : "수정" }}
+              </button>
+              <button
+                *ngIf="!!notice"
+                class="order-first sm:order-last"
+                mat-flat-button
+                [color]="'primary'"
+              >
+                숨김
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/admin/board/notice/components/redit.component.ts

@@ -8,33 +8,20 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {
+
-  FormBuilder,
+import { ActivatedRoute, Router } from '@angular/router';
-  FormControl,
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import {
+import { Subject, takeUntil } from 'rxjs';
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
-
+import { NoticeService } from '../services/notice.service';
-import { User } from 'app/modules/admin/member/user/models/user';
+import { Notice } from '../models/notice';
-import { UserService } from 'app/modules/admin/member/user/services/user.service';
 
 @Component({
-  selector: 'notice-view',
+  selector: 'notice-redit',
-  templateUrl: './view.component.html',
+  templateUrl: './redit.component.html',
   styles: [
     /* language=SCSS */
     `
@@ -59,14 +46,18 @@ import { UserService } from 'app/modules/admin/member/user/services/user.service
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: fuseAnimations,
 })
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
   isLoading = false;
   searchInputControl = new FormControl();
-  selectedProductForm!: FormGroup;
+  noticeForm!: FormGroup;
-  selectedUser?: User;
+  editMode: boolean = false;
+
+  noticeType = NOTICE_TYPE;
+
+  notice!: Notice;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -77,7 +68,9 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
     private _changeDetectorRef: ChangeDetectorRef,
     private _fuseConfirmationService: FuseConfirmationService,
     private _formBuilder: FormBuilder,
-    private _userService: UserService
+    private _route: ActivatedRoute,
+    private _router: Router,
+    private _noticeService: NoticeService
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -88,53 +81,28 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
+    // Create the contact form
-      id: [''],
+    this.noticeForm = this._formBuilder.group({
-      signinId: [{ value: '', disabled: true }],
+      writer: ['관리자'],
-      signinPw: [{ value: '' }],
+      noticeType: [''],
-      exchangePw: [''],
+      title: [''],
-      description: [''],
+      writerDate: [''],
-      tags: [[]],
+      content: [''],
-      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._noticeService.notice$
-    this._userService.user$
       .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((user: User | undefined) => {
+      .subscribe((notice: Notice | undefined) => {
-        if (!user) {
+        if (!notice) {
           return;
         }
-        this.selectedUser = user;
 
-        this.selectedProductForm.patchValue(user);
+        this.notice = notice;
+        this.noticeForm.patchValue(notice);
+
         // Mark for check
         this._changeDetectorRef.markForCheck();
       });
-
-    /* this.user$ = this._userService.user$; */
   }
 
   /**
@@ -159,6 +127,14 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  __onClickeCancel(): void {
+    /* let url: string = 'board/customer-template/';
+    this._router.navigateByUrl(url); */
+  }
+  __onClickReditBtn(event: MouseEvent, notice: Notice): void {
+    console.log('click: ', notice);
+  }
+
   /**
    * Create product
    */
@@ -171,6 +147,22 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __toggleDetails(productId: string): void {}
 
+  /**
+   * Toggle edit mode
+   *
+   * @param editMode
+   */
+  toggleEditMode(editMode: boolean | null = null): void {
+    if (editMode === null) {
+      this.editMode = !this.editMode;
+    } else {
+      this.editMode = editMode;
+    }
+
+    // Mark for check
+    this._changeDetectorRef.markForCheck();
+  }
+
   /**
    * Track by function for ngFor loops
    *
@@ -181,3 +173,14 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
     return item.id || index;
   }
 }
+
+export const NOTICE_TYPE = [
+  {
+    key: '0',
+    value: '공지사항',
+  },
+  {
+    key: '1',
+    value: '파트너공지',
+  },
+];

src/app/modules/admin/board/notice/components/view.component.html

@@ -1,2 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">고객센터-상세page</div>

src/app/modules/admin/board/notice/models/notice.ts

@@ -1,5 +1,5 @@
 export interface Notice {
-  id?: string;
+  id: string;
   idx?: number;
   site?: string;
   title?: string;

src/app/modules/admin/board/notice/notice.module.ts

@@ -15,6 +15,8 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -45,6 +47,8 @@ import { noticeRoutes } from './notice.routing';
     MatSlideToggleModule,
     MatRadioModule,
     MatCheckboxModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class NoticeModule {}

src/app/modules/admin/board/notice/notice.routing.ts

@@ -1,24 +1,32 @@
 import { Route } from '@angular/router';
 
 import { ListComponent } from './components/list.component';
-import { ViewComponent } from '../../member/user/components/view.component';
+import { ReditComponent } from './components/redit.component';
 
-import { NoticesResolver } from './resolvers/notice.resolver';
+import { NoticesResolver, NoticeResolver } from './resolvers/notice.resolver';
-import { UserResolver } from '../../member/user/resolvers/user.resolver';
 
 export const noticeRoutes: Route[] = [
   {
     path: '',
+    pathMatch: 'full',
+    redirectTo: 'list',
+  },
+  {
+    path: 'list',
     component: ListComponent,
     resolve: {
       notices: NoticesResolver,
     },
   },
   {
-    path: ':id',
+    path: 'redit',
-    component: ViewComponent,
+    component: ReditComponent,
+  },
+  {
+    path: 'redit/:id',
+    component: ReditComponent,
     resolve: {
-      users: UserResolver,
+      notice: NoticeResolver,
     },
   },
 ];

src/app/modules/admin/board/popup/components/list.component.html

@@ -9,6 +9,7 @@
           <div class="text-lg font-medium tracking-tight leading-6 truncate">
             팝업 관리
           </div>
+
           <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
             <table
               class="min-w-240 overflow-y-visible"

src/app/modules/admin/board/popup/components/list.component.ts

@@ -29,7 +29,6 @@ import {
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
 
-import { User } from '../../../member/user/models/user';
 import { Popup } from '../models/popup';
 import { PopupPagination } from '../models/popup-pagination';
 import { PopupService } from '../services/popup.service';
@@ -68,7 +67,6 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatSort) private _sort!: MatSort;
 
   popups$!: Observable<Popup[] | undefined>;
-  users$!: Observable<User[] | undefined>;
 
   isLoading = false;
   searchInputControl = new FormControl();

src/app/modules/admin/board/popup/components/redit.component.ts

@@ -55,7 +55,6 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   searchInputControl = new FormControl();
   popupForm!: FormGroup;
   editMode: boolean = false;
-  contact = contacts[0];
   categories = categories;
   popup: Popup | undefined;
 
@@ -159,20 +158,7 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
     // Mark for check
     this._changeDetectorRef.markForCheck();
   }
-  /**
+
-   * Get country info by iso code
-   *
-   * @param iso
-   */
-  getCountryByIso(iso: string): Country {
-    return {
-      id: '19430ee3-b0fe-4987-a7c8-74453ad5504d',
-      iso: 'af',
-      name: 'Afghanistan',
-      code: '+93',
-      flagImagePos: '-1px -3180px',
-    } as Country;
-  }
   /**
    * Track by function for ngFor loops
    *
@@ -184,52 +170,6 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 }
 
-export const contacts = [
-  {
-    id: 'cd5fa417-b667-482d-b208-798d9da3213c',
-    avatar: 'assets/images/avatars/male-01.jpg',
-    background: 'assets/images/cards/14-640x480.jpg',
-    name: 'Dejesus Michael',
-    emails: [
-      {
-        email: 'dejesusmichael@mail.org',
-        label: '가로',
-      },
-      {
-        email: 'michael.dejesus@vitricomp.io',
-        label: '세로',
-      },
-    ],
-    phoneNumbers: [
-      {
-        country: 'bs',
-        phoneNumber: 'TOP',
-        label: 'Mobile',
-      },
-      {
-        country: 'bs',
-        phoneNumber: 'LEFT',
-        label: 'Work',
-      },
-    ],
-    title: 'Track Service Worker',
-    company: 'Vitricomp',
-    birthday: '1975-01-10T12:00:00.000Z',
-    address: '279 Independence Avenue, Calvary, Guam, PO4127',
-    notes:
-      '<p>Do incididunt cillum duis eu pariatur enim proident minim officia amet proident consequat consequat qui consequat magna magna occaecat aliquip culpa pariatur velit nisi nostrud irure eu ullamco exercitation sint.</p><p>Cillum deserunt laborum laborum quis nisi enim et aliquip labore excepteur in excepteur labore amet in ipsum ipsum nostrud deserunt lorem nisi voluptate dolor minim enim ut eu cupidatat enim.</p>',
-    tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'],
-  },
-];
-
-export interface Country {
-  id: string;
-  iso: string;
-  name: string;
-  code: string;
-  flagImagePos: string;
-}
-
 export const categories = [
   {
     id: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de',

src/app/modules/admin/board/popup/popup.module.ts

@@ -15,6 +15,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTableModule } from '@angular/material/table';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -45,6 +47,8 @@ import { popupRoutes } from './popup.routing';
     MatTableModule,
     MatDividerModule,
     MatMenuModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class PopupModule {}

src/app/modules/admin/member/coupon-money-log/components/list.component.html

@@ -97,7 +97,7 @@
                   <div>
                     {{ couponMoneyLog.giveCouponRank
                     }}<mat-icon svgIcon="play-outline"></mat-icon
-                    >{{ couponMoneyLog.takeCouponRank }}지급
+                    >{{ couponMoneyLog.takeCouponRank }}지급or회수
                   </div>
                   <div>
                     {{ couponMoneyLog.giveCouponRank
@@ -114,19 +114,19 @@
                     }}{{ couponMoneyLog.giveCouponId }}
                   </div>
                   <div class="hidden md:block">
-                    {{ couponMoneyLog.takeCouponBeforeMoney }}
+                    {{ couponMoneyLog.takeCouponBeforeMoney }}원
                     <hr style="margin: 7px 0px" />
-                    {{ couponMoneyLog.giveCouponBeforeMoney }}
+                    {{ couponMoneyLog.giveCouponBeforeMoney }}원
                   </div>
                   <div class="hidden md:block">
-                    {{ couponMoneyLog.takeCouponVarianceMoney }}
+                    {{ couponMoneyLog.takeCouponChangeMoney }}원
                     <hr style="margin: 7px 0px" />
-                    {{ couponMoneyLog.giveCouponVarianceMoney }}
+                    {{ couponMoneyLog.giveCouponChangeMoney }}원
                   </div>
                   <div class="hidden md:block">
-                    {{ couponMoneyLog.takeCouponAfterMoney }}
+                    {{ couponMoneyLog.takeCouponAfterMoney }}원
                     <hr style="margin: 7px 0px" />
-                    {{ couponMoneyLog.giveCouponAfterMoney }}
+                    {{ couponMoneyLog.giveCouponAfterMoney }}원
                   </div>
                   <div class="hidden lg:block">
                     {{ couponMoneyLog.couponContents }}

src/app/modules/admin/member/coupon-money-log/components/list.component.ts

@@ -43,21 +43,21 @@ import { Router } from '@angular/router';
     `
       .inventory-grid {
         /*                     번호   비고   정보  아이디  이전 */
-        grid-template-columns: 20px 140px 140px auto 140px;
+        grid-template-columns: 100px 200px auto 100px 100px;
 
         @screen sm {
           /*                     번호   비고   정보  아이디  이전  변동 */
-          grid-template-columns: 20px 140px 140px auto 140px 40px 140px 140px;
+          grid-template-columns: 100px 200px auto 100px 100px 100px;
         }
 
         @screen md {
           /*                     번호   비고   정보  아이디  이전  변동   이후 */
-          grid-template-columns: 20px 140px 140px auto 140px 40px 140px;
+          grid-template-columns: 100px 200px auto 100px 100px 100px 140px;
         }
 
         @screen lg {
           /*                     번호   비고   정보  아이디  이전  변동   이후   내용   등록시간 */
-          grid-template-columns: 20px 140px 140px auto 140px 140px 140px 140px 140px;
+          grid-template-columns: 100px 200px auto 100px 100px 100px 140px 140px 140px;
         }
       }
     `,

src/app/modules/admin/member/coupon-money-log/models/coupon-money-log.ts

@@ -3,41 +3,17 @@ export interface CouponMoneyLog {
   idx?: number;
   giveCouponId?: string; //  쿠폰지급 해준 아이디
   giveCouponRank?: string; //  쿠폰지급 해준 등급
-  takeCouponId?: string; //  쿠폰지급 받은 아이디
+  takeCouponId?: string; //  쿠폰 받은 아이디
-  takeCouponRank?: string; //  쿠폰지급 받은 등급
+  takeCouponRank?: string; //  쿠폰 받은 등급
-  useCouponId?: string; //  쿠폰사용 아이디
-  useCouponRank?: string; //  쿠폰사용 등급
-  retrieveCouponId?: string; //  쿠폰 회수 아이디
-  retrieveCouponRank?: string; //  쿠폰 회수 등급
 
   giveCouponBeforeMoney?: number; //  지급자의 이전금액
-  giveCouponVarianceMoney?: number; //  지급자의 변동금액
+  giveCouponChangeMoney?: number; //  지급자의 변동금액
   giveCouponAfterMoney?: number; //  지급자의 이후금액
 
   takeCouponBeforeMoney?: number; //  받은자의 이전금액
-  takeCouponVarianceMoney?: number; //  받은자의 변동금액
+  takeCouponChangeMoney?: number; //  받은자의 변동금액
   takeCouponAfterMoney?: number; //  받은자의 이후금액
-
-  useCouponBeforeMoney?: number; //  쿠폰사용자의 이전금액
-  useCouponVarianceMoney?: number; //  쿠폰사용자의 변동금액
-  useCouponAfterMoney?: number; //  쿠폰사용자의 이후금액
-
-  retrieveCouponBeforeMoney?: number; //  쿠폰회수자의 이전금액
-  retrieveCouponVarianceMoney?: number; //  쿠폰회수자의 변동금액
-  retrieveCouponAfterMoney?: number; //  쿠폰회수자의 이후금액
-
   couponContents?: string; //  내용
   giveCouponRegistrationDate?: Date; //  지급자의 등록시간
   takeCouponRegistrationDate?: Date; //  받은자의 등록시간
-  useCouponRegistrationDate?: Date; //  쿠폰사용자의 등록시간
-  retrieveCouponRegistrationDate?: Date; //  쿠폰회수자의 등록시간
 }
-
-// issued
-// 생성, 발행
-
-// give  -  take
-// 쿠폰지급 - 쿠폰지급 받음
-
-// use  -  retrieve
-// 쿠폰사용 - 쿠폰회수

src/app/modules/admin/report/comp-log/components/list.component.html

@@ -10,113 +10,50 @@
       <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
     </div>
     <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">콤프 사용 Logs</div>
+    <div class="text-4xl font-extrabold tracking-tight">콤프사용Logs</div>
     <!-- Actions -->
     <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- Memo -->
+      <!-- Search -->
-      <!-- <mat-form-field>
+      <div>
-        <ng-container *ngIf="compLogs$ | async as compLogs">
+        <span>콤프합계:<span style="color: red">7,600</span>콤프</span
-          <ng-container
+        >&nbsp;&nbsp;
-            *ngFor="let compLog of compLogs; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ compLog.totalPartnerCount }} 총 보유머니:{{
-                  compLog.totalHoldingcomp
-                }}
-                총 콤프:{{ compLog.totalComp }} 총 합계:{{
-                  compLog.total
-                }}
-              </fieldset>
       </div>
-          </ng-container>
+      <button mat-icon-button (click)="__onClickSearch()">
-        </ng-container>
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-      </mat-form-field> -->
+      </button>
-
+    </div>
+  </div>
+  <!-- Search -->
+  <div
+    *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">
       <!-- SelectBox -->
-      <mat-form-field>
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <mat-select placeholder="리스트수">
-          <mat-option value="40">40</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
         <mat-select placeholder="내용">
+          <mat-option value="">내용</mat-option>
           <mat-option value="">카지노콤프</mat-option>
           <mat-option value="">슬롯콤프</mat-option>
           <mat-option value="">배팅콤프</mat-option>
           <mat-option value="">첫충콤프</mat-option>
+          <mat-option value="">매충콤프</mat-option>
         </mat-select>
       </mat-form-field>
-      <!-- <mat-form-field>
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <mat-select placeholder="입금">
+        <mat-select placeholder="내용">
-          <mat-option value="">계좌입금</mat-option>
+          <mat-option value="">내용</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="아이디">
           <mat-option value="">아이디</mat-option>
           <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
+          <mat-option value="">관리자지급</mat-option>
-          <mat-option value="">사이트</mat-option>
+          <mat-option value="">관리자회수</mat-option>
-          <mat-option value="">파트너수동지급</mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="가입일 정렬">
-          <mat-option value="">가입일 정렬</mat-option>
-          <mat-option value="">아이디 정렬</mat-option>
-          <mat-option value="">닉네임 정렬</mat-option>
-          <mat-option value="">캐쉬 정렬</mat-option>
-          <mat-option value="">콤프 정렬</mat-option>
-          <mat-option value="">쿠폰 정렬</mat-option>
-          <mat-option value="">입금 정렬</mat-option>
-          <mat-option value="">출금 정렬</mat-option>
-          <mat-option value="">차익 정렬</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
       <!-- Search -->
       <mat-form-field
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
+        fxFlex
+        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
       >
         <mat-icon
           class="icon-size-5"
@@ -127,24 +64,27 @@
           matInput
           [formControl]="searchInputControl"
           [autocomplete]="'off'"
-          [placeholder]="'Search'"
+          [placeholder]="'Search user'"
         />
       </mat-form-field>
       <!-- Add user button -->
       <button
-        class="ml-4"
+        fxFlex
         mat-flat-button
+        style="position: fixed; margin-top: 4px"
         [color]="'primary'"
         (click)="__createProduct()"
       >
-        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <span class="ml-2 mr-1">검색하기</span>
+        <span class="ml-2 mr-1">Search</span>
+      </button>
+      <div>
+        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+          관리자지급/회수
         </button>
-      <button>엑셀저장</button>
-      <button>카지노머니확인</button>
       </div>
     </div>
-
+  </div>
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->
@@ -157,29 +97,29 @@
             <!-- 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"
-              matSort
-              matSortDisableClear
             >
-              <div class="hidden sm:block"><mat-checkbox></mat-checkbox></div>
+              <div>번호</div>
+              <div>
+                아이디
+                <hr style="margin: 7px 0px" />
+                닉네임
+              </div>
+              <div>등급</div>
               <div class="hidden sm:block">요율</div>
-              <div class="hidden sm:block">상부트리</div>
+              <div>배팅금액</div>
-              <div class="hidden sm:block">관리</div>
+              <div>
-              <div class="hidden sm:block">매장수</div>
+                이전콤프
-              <div class="hidden sm:block">회원수</div>
+                <hr style="margin: 7px 0px" />
-              <div class="hidden sm:block">아이디</div>
+                변동콤프
-              <div class="hidden sm:block">닉네임</div>
+                <hr style="margin: 7px 0px" />
-              <div class="hidden sm:block">예금주</div>
+                이후콤프
-              <div class="hidden sm:block">연락처</div>
+              </div>
-              <div class="hidden sm:block">정산</div>
+              <div>타입</div>
-              <div class="hidden sm:block">보유금</div>
+              <div class="hidden md:block">내용</div>
-              <div class="hidden sm:block">게임중머니</div>
+              <div class="hidden md:block">등록일시</div>
-              <div class="hidden sm:block">카지노->캐쉬</div>
+              <div class="hidden md:block">메모</div>
-              <div class="hidden sm:block">금일콤프</div>
+              <div class="hidden lg:block">배팅ID</div>
-              <div class="hidden sm:block">총입출</div>
+              <div class="hidden lg:block">배팅번호</div>
-              <div class="hidden sm:block">로그</div>
-              <div class="hidden sm:block">상태</div>
-              <div class="hidden sm:block">회원수</div>
-              <div class="hidden sm:block">비고</div>
             </div>
             <!-- Rows -->
             <ng-container *ngIf="compLogs$ | async as compLogs">
@@ -189,142 +129,41 @@
                 <div
                   class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
-                  <div class="hidden sm:block truncate">
+                  <div>
-                    <mat-checkbox></mat-checkbox>
+                    {{ compLog.idx }}
                   </div>
-                  <!-- rate -->
+                  <div>
-                  <div class="hidden sm:block truncate">
+                    {{ compLog.signinId }}
-                    <button
+                    <hr style="margin: 7px 0px" />
-                      mat-button
-                      color="primary"
-                      matTooltip="요율확인
-                                카지노-바카라: 0%
-                                카지노-룰렛: 0%
-                                카지노-드레곤타이거: 0%
-                                카지노-그외: 0%
-                                슬롯: 0%
-                                카지노루징: 0%
-                                슬롯루징: 0%"
-                    >
-                      요율
-                    </button>
-                    <div class="hidden sm:block truncate">
-                      <!-- 관리 -->
-                      <button mat-flat-button [color]="'primary'">
-                        <mat-form-field>
-                          <mat-select placeholder="관리">
-                            <mat-option value="">보유금지급/회수</mat-option>
-                            <mat-option value="">수수료설정</mat-option>
-                            <mat-option value="">콤프지급/회수</mat-option>
-                            <mat-option value="">쿠폰머니지급/회수</mat-option>
-                            <mat-option value="">쪽지보내기</mat-option>
-                            <mat-option value="">베팅리스트</mat-option>
-                            <mat-option value="">강제로그아웃</mat-option>
-                          </mat-select>
-                        </mat-form-field>
-                      </button>
-                    </div>
-                  </div>
-                  <!-- 매장수 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ compLog.branchCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ compLog.divisionCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ compLog.officeCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ compLog.storeCount }}
-                    </button>
-                  </div>
-                  <!-- 회원수 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ compLog.memberCount }}
-                    </button>
-                  </div>
-                  <!-- id -->
-                  <ng-container *ngIf="users$ | async as users">
-                    <ng-container
-                      *ngFor="let user of users; trackBy: __trackByFn"
-                    >
-                      <div
-                        class="hidden sm:block truncate"
-                        (click)="viewUserDetail(user.id!)"
-                      >
-                        {{ compLog.id }}
-                      </div>
-                    </ng-container>
-                  </ng-container>
-                  <!-- nickname -->
-                  <div class="hidden sm:block truncate">
                     {{ compLog.nickname }}
                   </div>
-                  <!-- accountHolder -->
+                  <div>
-                  <div class="hidden sm:block truncate">
+                    {{ compLog.rank }}
-                    {{ compLog.accountHolder }}
                   </div>
-                  <!-- 연락처 -->
+                  <div class="hidden sm:block">{{ compLog.rate }}%</div>
-                  <div class="hidden sm:block truncate">
+                  <div>{{ compLog.bettingMoney }}원</div>
-                    {{ compLog.phoneNumber }}
+                  <div>
+                    {{ compLog.beforeComp }}P
+                    <hr style="margin: 7px 0px" />
+                    {{ compLog.changeComp }}P
+                    <hr style="margin: 7px 0px" />
+                    {{ compLog.afterComp }}P
                   </div>
-                  <!-- 정산 -->
+                  <div>{{ compLog.type }}</div>
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden md:block">
-                    {{ compLog.calculateType }}
+                    {{ compLog.compContents }}
                   </div>
-                  <!-- 보유금 -->
+                  <div class="hidden md:block">
-                  <div class="hidden sm:block truncate">
+                    {{ compLog.registrationDate }}
-                    캐쉬{{ compLog.ownCash }} 콤프{{ compLog.ownComp }} 쿠폰{{
-                      compLog.ownCoupon
-                    }}
                   </div>
-                  <!-- gamecomp -->
+                  <div class="hidden md:block">
-                  <div class="hidden sm:block truncate">
+                    {{ compLog.memo }}
-                    {{ compLog.gameMoney }}
                   </div>
-                  <!-- casinoCash -->
+                  <div class="hidden lg:block">
-                  <div class="hidden sm:block truncate">
+                    {{ compLog.bettingId }}
-                    <button mat-flat-button [color]="'primary'">
-                      게임머니확인
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      게임머니회수
-                    </button>
                   </div>
-                  <!-- todayComp -->
+                  <div class="hidden lg:block">
-                  <div class="hidden sm:block truncate">
+                    {{ compLog.bettingNumber }}
-                    {{ compLog.todayComp }}P
-                  </div>
-                  <!-- 총입출 -->
-                  <div class="hidden sm:block truncate">
-                    입금{{ compLog.totalDeposit }} 출금{{
-                      compLog.totalWithdraw
-                    }}
-                    차익{{ compLog.balance }}
-                  </div>
-                  <!-- log -->
-                  <div class="hidden sm:block truncate">
-                    가입{{ compLog.registDate }} 최종{{
-                      compLog.finalSigninDate
-                    }}
-                    IP{{ compLog.ip }}
-                  </div>
-                  <!-- state -->
-                  <div class="hidden sm:block truncate">
-                    {{ compLog.state }}
-                  </div>
-                  <!-- 회원수 -->
-                  <div class="hidden sm:block truncate">
-                    {{ compLog.memberCount }}
-                  </div>
-                  <!-- 비고 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ compLog.note }}
-                    </button>
                   </div>
                 </div>
               </ng-container>
@@ -347,7 +186,7 @@
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
-          There are no compLogs!
+          There are no data!
         </div>
       </ng-template>
     </div>

src/app/modules/admin/report/comp-log/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: 60px 60px 60px 60px 60px auto;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          /*                     번호  아이디 등급 요율 배팅금액 콤프 타입  내용  등록일*/
+          grid-template-columns: 60px 60px 60px 60px 60px auto 60px 60px 60px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          /*                     번호  아이디 등급 요율 배팅금액 콤프 타입  내용 등록일  메모 */
+          grid-template-columns: 60px 60px 60px 60px 60px auto 60px 60px 60px 60px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          /*                     번호  아이디 등급 요율 배팅금액 콤프 타입  내용 등록일  메모 배팅ID 배팅번호 */
+          grid-template-columns: 60px 60px 60px 60px 60px auto 60px 60px 60px 60px 60px 60px;
         }
       }
     `,
@@ -69,6 +73,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   compLogs$!: Observable<CompLog[] | undefined>;
   users$!: Observable<User[] | undefined>;
 
+  __isSearchOpened = false;
   isLoading = false;
   searchInputControl = new FormControl();
   selectedCompLog?: CompLog;
@@ -117,7 +122,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     if (this._sort && this._paginator) {
       // Set the initial sort
       this._sort.sort({
-        id: 'name',
+        id: 'signinId',
         start: 'asc',
         disableClear: true,
       });
@@ -186,6 +191,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __toggleDetails(productId: string): void {}
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickSearch(): void {
+    this.__isSearchOpened = !this.__isSearchOpened;
+  }
+
   /**
    * Track by function for ngFor loops
    *

src/app/modules/admin/report/comp-log/models/comp-log.ts

@@ -1,29 +1,18 @@
 export interface CompLog {
-  id?: string;
+  id: string;
-  totalPartnerCount?: number;
+  idx?: number;
-  totalHoldingMoney?: number;
+  rank?: string;
-  totalComp?: number;
+  signinId?: string;
-  total?: number;
-  branchCount?: number;
-  divisionCount?: number;
-  officeCount?: number;
-  storeCount?: number;
-  memberCount?: number;
   nickname?: string;
-  accountHolder?: string;
+  rate?: number; //  요율
-  phoneNumber?: string;
+  bettingMoney?: number;
-  calculateType?: string;
+  beforeComp?: number; //  이전콤프
-  ownCash?: number;
+  changeComp?: number; //  변동콤프
-  ownComp?: number;
+  afterComp?: number; //  이후콤프
-  ownCoupon?: number;
+  type?: string;
-  gameMoney?: number;
+  compContents?: string; //  내용
-  todayComp?: number;
+  registrationDate?: Date; //  등록일시
-  totalDeposit?: number;
+  memo?: string;
-  totalWithdraw?: number;
+  bettingId?: string; //  배팅ID
-  balance?: number;
+  bettingNumber?: number; //  배팅번호
-  registDate?: string;
-  finalSigninDate?: string;
-  ip?: string;
-  state?: string;
-  note?: string;
 }

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

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

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

@@ -1,355 +1,192 @@
-<div
+<div class="flex flex-col flex-auto min-w-0">
-  class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
+  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
->
+    <div class="w-full max-w-screen-xl mx-auto">
-  <!-- Header -->
+      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+        <!-- Budget distribution -->
         <div
-    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
         >
-    <!-- Loader -->
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
-    <div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
+            루징 관리
-      <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
           </div>
-    <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">루징관리</div>
-    <!-- Actions -->
-    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- Memo -->
-      <!-- <mat-form-field>
-        <ng-container *ngIf="loosings$ | async as loosings">
-          <ng-container
-            *ngFor="let loosing of loosings; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ loosing.totalPartnerCount }} 총 보유머니:{{
-                  loosing.totalHoldingMoney
-                }}
-                총 콤프:{{ loosing.totalComp }} 총 합계:{{
-                  loosing.total
-                }}
-              </fieldset>
-            </div>
-          </ng-container>
-        </ng-container>
-      </mat-form-field> -->
 
-      <!-- SelectBox -->
-      <mat-form-field>
-        <mat-select placeholder="리스트수">
-          <mat-option value="40">40</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내용">
-          <mat-option value="">카지노콤프</mat-option>
-          <mat-option value="">슬롯콤프</mat-option>
-          <mat-option value="">배팅콤프</mat-option>
-          <mat-option value="">첫충콤프</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <!-- <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="아이디">
-          <mat-option value="">아이디</mat-option>
-          <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
-          <mat-option value="">사이트</mat-option>
-          <mat-option value="">파트너수동지급</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="가입일 정렬">
-          <mat-option value="">가입일 정렬</mat-option>
-          <mat-option value="">아이디 정렬</mat-option>
-          <mat-option value="">닉네임 정렬</mat-option>
-          <mat-option value="">캐쉬 정렬</mat-option>
-          <mat-option value="">콤프 정렬</mat-option>
-          <mat-option value="">쿠폰 정렬</mat-option>
-          <mat-option value="">입금 정렬</mat-option>
-          <mat-option value="">출금 정렬</mat-option>
-          <mat-option value="">차익 정렬</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
           <!-- Search -->
-      <mat-form-field
+          <div
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
+            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"
+          >
+            <!-- Card inception -->
+            <div class="col-span-2 sm:col-span-1">
+              <mat-form-field
+                class="fuse-mat-no-subscript w-full"
+                [floatLabel]="'always'"
               >
-        <mat-icon
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
                 <input
                   matInput
-          [formControl]="searchInputControl"
+                  [matDatepicker]="picker1"
-          [autocomplete]="'off'"
+                  [placeholder]="'Choose a date'"
-          [placeholder]="'Search'"
                 />
+                <mat-datepicker-toggle
+                  matSuffix
+                  [for]="picker1"
+                ></mat-datepicker-toggle>
+                <mat-datepicker #picker1></mat-datepicker>
               </mat-form-field>
+            </div>
+            <!-- Card expiration -->
+            <div class="col-span-2 sm:col-span-1">
+              <mat-form-field
+                class="fuse-mat-no-subscript w-full"
+                [floatLabel]="'always'"
+              >
+                <input
+                  matInput
+                  [matDatepicker]="picker2"
+                  [placeholder]="'Choose a date'"
+                />
+                <mat-datepicker-toggle
+                  matSuffix
+                  [for]="picker2"
+                ></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">
+              <!-- Search -->
               <!-- Add user button -->
               <button
-        class="ml-4"
                 mat-flat-button
                 [color]="'primary'"
+                fxFlex
                 (click)="__createProduct()"
               >
-        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
+                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <span class="ml-2 mr-1">검색하기</span>
+                <span class="ml-2 mr-1">기본데이터생성</span>
               </button>
-      <button>엑셀저장</button>
-      <button>카지노머니확인</button>
             </div>
           </div>
 
-  <!-- Main -->
+          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
-  <div class="flex flex-auto overflow-hidden">
+            <table
-    <!-- Products list -->
+              class="min-w-240 overflow-y-visible"
-    <div
+              mat-table
-      class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
+              [dataSource]="loosingDataSource"
             >
-      <ng-container *ngIf="loosings$ | async as loosings">
+              <!-- Index -->
-        <ng-container *ngIf="loosings.length > 0; else noLoosing">
+              <ng-container matColumnDef="index">
-          <div class="grid">
+                <th mat-header-cell *matHeaderCellDef>번호</th>
-            <!-- Header -->
+                <td mat-cell *matCellDef="let info; let i = index">
-            <div
+                  <span class="font-medium text-right">
-              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"
+                    {{ i + 1 }}
-              matSort
+                  </span>
-              matSortDisableClear
+                </td>
-            >
-              <div class="hidden sm:block"><mat-checkbox></mat-checkbox></div>
-              <div class="hidden sm:block">요율</div>
-              <div class="hidden sm:block">상부트리</div>
-              <div class="hidden sm:block">관리</div>
-              <div class="hidden sm:block">매장수</div>
-              <div class="hidden sm:block">회원수</div>
-              <div class="hidden sm:block">아이디</div>
-              <div class="hidden sm:block">닉네임</div>
-              <div class="hidden sm:block">예금주</div>
-              <div class="hidden sm:block">연락처</div>
-              <div class="hidden sm:block">정산</div>
-              <div class="hidden sm:block">보유금</div>
-              <div class="hidden sm:block">게임중머니</div>
-              <div class="hidden sm:block">카지노->캐쉬</div>
-              <div class="hidden sm:block">금일콤프</div>
-              <div class="hidden sm:block">총입출</div>
-              <div class="hidden sm:block">로그</div>
-              <div class="hidden sm:block">상태</div>
-              <div class="hidden sm:block">회원수</div>
-              <div class="hidden sm:block">비고</div>
-            </div>
-            <!-- Rows -->
-            <ng-container *ngIf="loosings$ | async as loosings">
-              <ng-container
-                *ngFor="let loosing of loosings; trackBy: __trackByFn"
-              >
-                <div
-                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-                >
-                  <div class="hidden sm:block truncate">
-                    <mat-checkbox></mat-checkbox>
-                  </div>
-                  <!-- rate -->
-                  <div class="hidden sm:block truncate">
-                    <button
-                      mat-button
-                      color="primary"
-                      matTooltip="요율확인
-                                카지노-바카라: 0%
-                                카지노-룰렛: 0%
-                                카지노-드레곤타이거: 0%
-                                카지노-그외: 0%
-                                슬롯: 0%
-                                카지노루징: 0%
-                                슬롯루징: 0%"
-                    >
-                      요율
-                    </button>
-                    <div class="hidden sm:block truncate">
-                      <!-- 관리 -->
-                      <button mat-flat-button [color]="'primary'">
-                        <mat-form-field>
-                          <mat-select placeholder="관리">
-                            <mat-option value="">보유금지급/회수</mat-option>
-                            <mat-option value="">수수료설정</mat-option>
-                            <mat-option value="">콤프지급/회수</mat-option>
-                            <mat-option value="">쿠폰머니지급/회수</mat-option>
-                            <mat-option value="">쪽지보내기</mat-option>
-                            <mat-option value="">베팅리스트</mat-option>
-                            <mat-option value="">강제로그아웃</mat-option>
-                          </mat-select>
-                        </mat-form-field>
-                      </button>
-                    </div>
-                  </div>
-                  <!-- 매장수 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ loosing.branchCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ loosing.divisionCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ loosing.officeCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ loosing.storeCount }}
-                    </button>
-                  </div>
-                  <!-- 회원수 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ loosing.memberCount }}
-                    </button>
-                  </div>
-                  <!-- id -->
-                  <ng-container *ngIf="users$ | async as users">
-                    <ng-container
-                      *ngFor="let user of users; trackBy: __trackByFn"
-                    >
-                      <div
-                        class="hidden sm:block truncate"
-                        (click)="viewUserDetail(user.id!)"
-                      >
-                        {{ loosing.id }}
-                      </div>
-                    </ng-container>
-                  </ng-container>
-                  <!-- nickname -->
-                  <div class="hidden sm:block truncate">
-                    {{ loosing.nickname }}
-                  </div>
-                  <!-- accountHolder -->
-                  <div class="hidden sm:block truncate">
-                    {{ loosing.accountHolder }}
-                  </div>
-                  <!-- 연락처 -->
-                  <div class="hidden sm:block truncate">
-                    {{ loosing.phoneNumber }}
-                  </div>
-                  <!-- 정산 -->
-                  <div class="hidden sm:block truncate">
-                    {{ loosing.calculateType }}
-                  </div>
-                  <!-- 보유금 -->
-                  <div class="hidden sm:block truncate">
-                    캐쉬{{ loosing.ownCash }} 콤프{{ loosing.ownComp }} 쿠폰{{
-                      loosing.ownCoupon
-                    }}
-                  </div>
-                  <!-- gameMoney -->
-                  <div class="hidden sm:block truncate">
-                    {{ loosing.gameMoney }}
-                  </div>
-                  <!-- casinoCash -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      게임머니확인
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      게임머니회수
-                    </button>
-                  </div>
-                  <!-- todayComp -->
-                  <div class="hidden sm:block truncate">
-                    {{ loosing.todayComp }}P
-                  </div>
-                  <!-- 총입출 -->
-                  <div class="hidden sm:block truncate">
-                    입금{{ loosing.totalDeposit }} 출금{{
-                      loosing.totalWithdraw
-                    }}
-                    차익{{ loosing.balance }}
-                  </div>
-                  <!-- log -->
-                  <div class="hidden sm:block truncate">
-                    가입{{ loosing.registDate }} 최종{{
-                      loosing.finalSigninDate
-                    }}
-                    IP{{ loosing.ip }}
-                  </div>
-                  <!-- state -->
-                  <div class="hidden sm:block truncate">
-                    {{ loosing.state }}
-                  </div>
-                  <!-- 회원수 -->
-                  <div class="hidden sm:block truncate">
-                    {{ loosing.memberCount }}
-                  </div>
-                  <!-- 비고 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ loosing.note }}
-                    </button>
-                  </div>
-                </div>
-              </ng-container>
-            </ng-container>
-          </div>
-
-          <mat-paginator
-            class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
-            [ngClass]="{ 'pointer-events-none': isLoading }"
-            [length]="pagination?.length"
-            [pageIndex]="pagination?.page"
-            [pageSize]="pagination?.size"
-            [pageSizeOptions]="[5, 10, 25, 100]"
-            [showFirstLastButtons]="true"
-          ></mat-paginator>
-        </ng-container>
               </ng-container>
 
-      <ng-template #noLoosing>
+              <!-- 시작일 -->
-        <div
+              <ng-container matColumnDef="startDate">
-          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+                <th mat-header-cell *matHeaderCellDef>시작일</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.startDate }}
+                  </span>
+                </td>
+              </ng-container>
+              <!-- 종료일 -->
+              <ng-container matColumnDef="endDate">
+                <th mat-header-cell *matHeaderCellDef>종료일</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.endDate }}
+                  </span>
+                </td>
+              </ng-container>
+
+              <!-- 기본데이터 -->
+              <ng-container matColumnDef="defaultDataTotalCount">
+                <th mat-header-cell *matHeaderCellDef colspan="2">
+                  기본데이터
+                </th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.defaultCount
+                  }}</span>
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="defaultDataViewBtn">
+                <td
+                  mat-cell
+                  *matCellDef="let info"
+                  style="border-left: 1px solid #e0e0e0"
                 >
-          There are no loosing datas!
+                  <span class="font-medium text-right"
+                    ><button
+                      mat-flat-button
+                      class="bet-mat-small-8"
+                      [color]="'primary'"
+                      (click)="__viewLoosingDetail(info, '1')"
+                    >
+                      상세보기
+                    </button></span
+                  >
+                </td>
+              </ng-container>
+
+              <!-- 루징데이터 -->
+              <ng-container matColumnDef="loosingDataTotalCount">
+                <th mat-header-cell *matHeaderCellDef colspan="2">
+                  루징데이터
+                </th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.loosingCount
+                  }}</span>
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="loosingDataViewBtn">
+                <td
+                  mat-cell
+                  *matCellDef="let info"
+                  style="border-left: 1px solid #e0e0e0"
+                >
+                  <span class="font-medium text-right"
+                    ><button
+                      mat-flat-button
+                      class="bet-mat-small-8"
+                      [color]="'primary'"
+                      (click)="__viewLoosingDetail(info, '2')"
+                    >
+                      상세보기
+                    </button></span
+                  >
+                </td>
+              </ng-container>
+
+              <!-- 삭제 -->
+              <ng-container matColumnDef="removeBtn">
+                <th mat-header-cell *matHeaderCellDef>삭제</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right"
+                    ><button
+                      mat-flat-button
+                      class="bet-mat-small-8"
+                      [color]="'primary'"
+                      (click)="__onClickRemoveBtn($event, info.id)"
+                    >
+                      삭제
+                    </button></span
+                  >
+                </td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="headerTableColumns"></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: displayedTableColumns"
+              ></tr>
+            </table>
+          </div>
+        </div>
       </div>
-      </ng-template>
     </div>
   </div>
 </div>

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

@@ -8,32 +8,23 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {
+import { FormBuilder, FormGroup } from '@angular/forms';
-  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 {
+import { map, merge, Observable, Subject, switchMap, takeUntil } from 'rxjs';
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
 
-import { User } from '../../../member/user/models/user';
 import { Loosing } from '../models/loosing';
-import { LoosingPagination } from '../models/loosing-pagination';
+
 import { LoosingService } from '../services/loosing.service';
-import { Router } from '@angular/router';
+import {
+  NavigationBehaviorOptions,
+  NavigationExtras,
+  Router,
+} from '@angular/router';
+import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
   selector: 'loosing-list',
@@ -45,15 +36,15 @@ import { Router } from '@angular/router';
         grid-template-columns: 60px auto 40px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
         }
       }
     `,
@@ -67,15 +58,35 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatSort) private _sort!: MatSort;
 
   loosings$!: Observable<Loosing[] | undefined>;
-  users$!: Observable<User[] | undefined>;
 
   isLoading = false;
-  searchInputControl = new FormControl();
+
-  selectedLoosing?: Loosing;
+  loosingDataSource: MatTableDataSource<Loosing> = new MatTableDataSource();
-  pagination?: LoosingPagination;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
+  headerTableColumns: string[] = [
+    'index',
+    'startDate',
+    'endDate',
+    'defaultDataTotalCount',
+    'loosingDataTotalCount',
+    'removeBtn',
+  ];
+
+  displayedTableColumns: string[] = [
+    'index',
+    'startDate',
+    'endDate',
+    'defaultDataTotalCount',
+    'defaultDataViewBtn',
+    'loosingDataTotalCount',
+    'loosingDataViewBtn',
+    'removeBtn',
+  ];
+
+  configForm!: FormGroup;
+
   /**
    * Constructor
    */
@@ -95,63 +106,46 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
-    // Get the pagination
+    this.configForm = this._formBuilder.group({
-    this._loosingService.pagination$
+      title: '알림',
+      message:
+        '정말로 삭제하시겠습니까? <span class="font-medium">삭제!</span>',
+      icon: this._formBuilder.group({
+        show: true,
+        name: 'heroicons_outline:exclamation',
+        color: 'warn',
+      }),
+      actions: this._formBuilder.group({
+        confirm: this._formBuilder.group({
+          show: true,
+          label: '삭제',
+          color: 'warn',
+        }),
+        cancel: this._formBuilder.group({
+          show: true,
+          label: '취소',
+        }),
+      }),
+      dismissible: true,
+    });
+    // Get the products
+    this._loosingService.loosings$
       .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((pagination: LoosingPagination | undefined) => {
+      .subscribe((loosings: Loosing[] | undefined) => {
-        // Update the pagination
+        if (!loosings) {
-        this.pagination = pagination;
+          return;
+        }
 
+        this.loosingDataSource.data = loosings;
         // Mark for check
         this._changeDetectorRef.markForCheck();
       });
-
-    // Get the products
-    this.loosings$ = this._loosingService.loosings$;
   }
 
   /**
    * After view init
    */
-  ngAfterViewInit(): void {
+  ngAfterViewInit(): void {}
-    if (this._sort && this._paginator) {
-      // Set the initial sort
-      this._sort.sort({
-        id: 'name',
-        start: 'asc',
-        disableClear: true,
-      });
-
-      // Mark for check
-      this._changeDetectorRef.markForCheck();
-
-      // If the loosing changes the sort order...
-      this._sort.sortChange
-        .pipe(takeUntil(this._unsubscribeAll))
-        .subscribe(() => {
-          // Reset back to the first page
-          this._paginator.pageIndex = 0;
-        });
-
-      // Get products if sort or page changes
-      merge(this._sort.sortChange, this._paginator.page)
-        .pipe(
-          switchMap(() => {
-            this.isLoading = true;
-            return this._loosingService.getLoosings(
-              this._paginator.pageIndex,
-              this._paginator.pageSize,
-              this._sort.active,
-              this._sort.direction
-            );
-          }),
-          map(() => {
-            this.isLoading = false;
-          })
-        )
-        .subscribe();
-    }
-  }
 
   /**
    * On destroy
@@ -166,14 +160,42 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
-  viewUserDetail(id: string): void {
+  /* viewUserDetail(id: string): void {
     let url: string = 'member/user/' + id;
     this.router.navigateByUrl(url);
-  }
+  } */
   // -----------------------------------------------------------------------------------------------------
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  __viewLoosingDetail(loosing: Loosing, type: string): void {
+    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,
+        startDate: loosing.startDate,
+        endDate: loosing.endDate,
+      },
+    };
+    this.router.navigateByUrl(url, extras);
+  }
+
+  __onClickRemoveBtn(event: MouseEvent, id: string): void {
+    // Open the dialog and save the reference of it
+    const dialogRef = this._fuseConfirmationService.open(this.configForm.value);
+
+    // Subscribe to afterClosed from the dialog reference
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log(result);
+    });
+  }
   /**
    * Create product
    */

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

@@ -0,0 +1,291 @@
+<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)="__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)="__onClickNext($event)"
+              >
+                <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="casinoBet">
+                <th mat-header-cell *matHeaderCellDef>베팅</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.casinoReport.betMoneny }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.casinoReport.betTieMoneny }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.casinoReport.betCancelMoneny }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.casinoReport.validMoneny }}
+                  </span>
+                </td>
+              </ng-container>
+
+              <!-- 당첨 -->
+              <ng-container matColumnDef="casinoWin">
+                <th mat-header-cell *matHeaderCellDef>당첨</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.casinoReport.betWinMoneny
+                  }}</span>
+                </td>
+              </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="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="slotBet">
+                <th
+                  mat-header-cell
+                  *matHeaderCellDef
+                  style="border-left: 1px solid #e0e0e0; padding-left: 30px"
+                >
+                  베팅
+                </th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.slotReport.betMoneny }}
+                  </span>
+                </td>
+              </ng-container>
+
+              <!-- 당첨 -->
+              <ng-container matColumnDef="slotWin">
+                <th mat-header-cell *matHeaderCellDef>당첨</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.slotReport.betWinMoneny
+                  }}</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="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>
+              <!-- 슬롯루징 끝-->
+              <!-- Star Column -->
+              <!-- <ng-container matColumnDef="star" stickyEnd>
+                <th
+                  mat-header-cell
+                  *matHeaderCellDef
+                  aria-label="row actions"
+                  [attr.rowspan]="2"
+                  [attr.colspan]="2"
+                  style="border-left: 1px solid #e0e0e0; padding-left: 30px"
+                >
+                  &nbsp;
+                </th>
+                <td mat-cell *matCellDef="let element">
+                  <mat-icon>more_vert</mat-icon>
+                </td>
+              </ng-container> -->
+
+              <!-- Header row second group -->
+              <ng-container matColumnDef="header-row-casino-group">
+                <th
+                  mat-header-cell
+                  *matHeaderCellDef
+                  [attr.colspan]="6"
+                  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]="6"
+                  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'
+                ]"
+              ></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-01.component.ts

@@ -8,49 +8,39 @@ import {
   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 {
+import { map, merge, Observable, Subject, switchMap, takeUntil } from 'rxjs';
-  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 { Loosing } from '../models/loosing';
-import { UserService } from 'app/modules/admin/member/user/services/user.service';
+
+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: 'notice-oneline-view',
+  selector: 'loosing-view-01',
-  templateUrl: './view.component.html',
+  templateUrl: './view-01.component.html',
   styles: [
     /* language=SCSS */
     `
       .inventory-grid {
-        grid-template-columns: 48px auto 40px;
+        grid-template-columns: 60px auto 40px;
 
         @screen sm {
-          grid-template-columns: 48px auto 112px 72px;
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
         }
 
         @screen md {
-          grid-template-columns: 48px 112px auto 112px 72px;
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
         }
 
         @screen lg {
-          grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
+          grid-template-columns: 40px 70px 70px 70px 70px 100px;
         }
       }
     `,
@@ -59,25 +49,41 @@ import { UserService } from 'app/modules/admin/member/user/services/user.service
   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;
 
   isLoading = false;
-  searchInputControl = new FormControl();
+
-  selectedProductForm!: FormGroup;
+  loosingDataSource: MatTableDataSource<Loosing> = new MatTableDataSource();
-  selectedUser?: User;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
+  displayedTableColumns: string[] = [
+    'userId',
+    'userCode',
+    'casinoBet',
+    'casinoWin',
+    'casinoWinLoss',
+    'casinoRolling',
+    'casinoLoosing',
+    'casinoSelf',
+    'slotBet',
+    'slotWin',
+    'slotWinLoss',
+    'slotRolling',
+    'slotLoosing',
+    'slotSelf',
+  ];
+
   /**
    * Constructor
    */
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
     private _fuseConfirmationService: FuseConfirmationService,
-    private _formBuilder: FormBuilder,
+    private _loosingService: LoosingService,
-    private _userService: UserService
+    private _router: Router
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -88,53 +94,18 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
+    // Get the products
-      id: [''],
+    this._loosingService.loosing$
-      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) => {
+      .subscribe((loosingReport: LoosingReport[] | undefined) => {
-        if (!user) {
+        if (!loosingReport) {
           return;
         }
-        this.selectedUser = user;
 
-        this.selectedProductForm.patchValue(user);
+        this.loosingDataSource.data = loosingReport;
         // Mark for check
         this._changeDetectorRef.markForCheck();
       });
-
-    /* this.user$ = this._userService.user$; */
   }
 
   /**
@@ -155,6 +126,10 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
+  /* viewUserDetail(id: string): void {
+    let url: string = 'member/user/' + id;
+    this.router.navigateByUrl(url);
+  } */
   // -----------------------------------------------------------------------------------------------------
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
@@ -164,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.module.ts

@@ -15,6 +15,9 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { MatTableModule } from '@angular/material/table';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -45,6 +48,9 @@ import { loosingRoutes } from './loosing.routing';
     MatSlideToggleModule,
     MatRadioModule,
     MatCheckboxModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
+    MatTableModule,
   ],
 })
 export class LoosingModule {}

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

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

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

@@ -0,0 +1,17 @@
+export interface BetCalculate {
+  id: string;
+  betMoneny?: string;
+  betTieMoneny?: string;
+  betCancelMoneny?: string;
+  validMoneny?: string;
+  betWinMoneny?: string;
+  betWinLossMoneny?: string;
+  rollingMoney?: string;
+  rollingBottomMoney?: string;
+  rollingMeMoney?: string;
+  loosingRate?: string;
+  meMoney?: string;
+  profitLossMoney?: string;
+  bottomMoney?: string;
+  calculateMoney?: string;
+}

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

@@ -0,0 +1,13 @@
+import { BetCalculate } from './bet-calculate';
+
+export interface LoosingReport {
+  id: string;
+  parentId: string;
+  signinId?: string;
+  code?: string;
+  depth?: number;
+  rank?: string;
+  totalCalculate?: string;
+  casinoCalculate?: BetCalculate;
+  slotCalculate?: BetCalculate;
+}

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

@@ -1,29 +1,7 @@
 export interface Loosing {
   id?: string;
-  totalPartnerCount?: number;
+  signinId?: string;
-  totalHoldingMoney?: number;
+  startDate?: string;
-  totalComp?: number;
+  endDate?: string;
-  total?: number;
-  branchCount?: number;
-  divisionCount?: number;
-  officeCount?: number;
-  storeCount?: number;
-  memberCount?: number;
-  nickname?: string;
-  accountHolder?: string;
-  phoneNumber?: string;
-  calculateType?: string;
-  ownCash?: number;
-  ownComp?: number;
-  ownCoupon?: number;
-  gameMoney?: number;
-  todayComp?: number;
-  totalDeposit?: number;
-  totalWithdraw?: number;
-  balance?: number;
   registDate?: string;
-  finalSigninDate?: string;
-  ip?: string;
-  state?: string;
-  note?: string;
 }

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

@@ -9,6 +9,7 @@ import { catchError, Observable, throwError } from 'rxjs';
 
 import { Loosing } from '../models/loosing';
 import { LoosingPagination } from '../models/loosing-pagination';
+import { LoosingReport } from '../models/loosing-report';
 import { LoosingService } from '../services/loosing.service';
 
 @Injectable({
@@ -36,8 +37,13 @@ export class LoosingResolver implements Resolve<any> {
   resolve(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
-  ): Observable<Loosing | undefined> {
+  ): Observable<LoosingReport[] | undefined> {
-    return this._loosingService.getLoosingById(route.paramMap.get('id')).pipe(
+    return this._loosingService
+      .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) => {
           // Log the error

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

@@ -14,6 +14,7 @@ import {
 
 import { Loosing } from '../models/loosing';
 import { LoosingPagination } from '../models/loosing-pagination';
+import { LoosingReport } from '../models/loosing-report';
 
 @Injectable({
   providedIn: 'root',
@@ -23,7 +24,9 @@ export class LoosingService {
   private __pagination = new BehaviorSubject<LoosingPagination | undefined>(
     undefined
   );
-  private __loosing = new BehaviorSubject<Loosing | undefined>(undefined);
+  private __loosing = new BehaviorSubject<LoosingReport[] | undefined>(
+    undefined
+  );
   private __loosings = new BehaviorSubject<Loosing[] | undefined>(undefined);
 
   /**
@@ -45,7 +48,7 @@ export class LoosingService {
   /**
    * Getter for loosing
    */
-  get loosing$(): Observable<Loosing | undefined> {
+  get loosing$(): Observable<LoosingReport[] | undefined> {
     return this.__loosing.asObservable();
   }
 
@@ -104,25 +107,17 @@ export class LoosingService {
   /**
    * Get product by id
    */
-  getLoosingById(id: string | null): Observable<Loosing> {
+  getLoosingById(
-    return this.__loosings.pipe(
+    id: string = '1',
-      take(1),
+    type: string = '1'
-      map((loosings) => {
+  ): Observable<LoosingReport[]> {
-        // Find the product
+    return this._httpClient
-        const loosing = loosings?.find((item) => item.id === id) || undefined;
+      .get<LoosingReport[]>('api/apps/report/loosing/loosing', {
-
+        params: { id, type },
-        // Update the product
+      })
-        this.__loosing.next(loosing);
+      .pipe(
-
+        tap((response: LoosingReport[]) => {
-        // Return the product
+          this.__loosing.next(response);
-        return loosing;
-      }),
-      switchMap((product) => {
-        if (!product) {
-          return throwError('Could not found product with id of ' + id + '!');
-        }
-
-        return of(product);
         })
       );
   }

src/app/modules/admin/report/modification-log/components/list.component.html

@@ -13,110 +13,31 @@
     <div class="text-4xl font-extrabold tracking-tight">회원수정로그</div>
     <!-- Actions -->
     <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- Memo -->
+      <!-- Search -->
-      <!-- <mat-form-field>
+      <button mat-icon-button (click)="__onClickSearch()">
-        <ng-container *ngIf="modificationLogs$ | async as modificationLogs">
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-          <ng-container
+      </button>
-            *ngFor="let modificationLog of modificationLogs; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ modificationLog.totalPartnerCount }} 총 보유머니:{{
-                  modificationLog.totalHoldingmodification
-                }}
-                총 콤프:{{ modificationLog.totalComp }} 총 합계:{{
-                  modificationLog.total
-                }}
-              </fieldset>
     </div>
-          </ng-container>
+  </div>
-        </ng-container>
+  <!-- Search -->
-      </mat-form-field> -->
+  <div
-
+    *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">
       <!-- SelectBox -->
-      <mat-form-field>
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <mat-select placeholder="리스트수">
+        <mat-select placeholder="전체">
-          <mat-option value="40">40</mat-option>
+          <mat-option value="">전체</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내용">
-          <mat-option value="">카지노콤프</mat-option>
-          <mat-option value="">슬롯콤프</mat-option>
-          <mat-option value="">배팅콤프</mat-option>
-          <mat-option value="">첫충콤프</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <!-- <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="아이디">
           <mat-option value="">아이디</mat-option>
           <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
-          <mat-option value="">사이트</mat-option>
-          <mat-option value="">파트너수동지급</mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="가입일 정렬">
-          <mat-option value="">가입일 정렬</mat-option>
-          <mat-option value="">아이디 정렬</mat-option>
-          <mat-option value="">닉네임 정렬</mat-option>
-          <mat-option value="">캐쉬 정렬</mat-option>
-          <mat-option value="">콤프 정렬</mat-option>
-          <mat-option value="">쿠폰 정렬</mat-option>
-          <mat-option value="">입금 정렬</mat-option>
-          <mat-option value="">출금 정렬</mat-option>
-          <mat-option value="">차익 정렬</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
       <!-- Search -->
       <mat-form-field
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
+        fxFlex
+        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
       >
         <mat-icon
           class="icon-size-5"
@@ -127,24 +48,22 @@
           matInput
           [formControl]="searchInputControl"
           [autocomplete]="'off'"
-          [placeholder]="'Search'"
+          [placeholder]="'Search user'"
         />
       </mat-form-field>
       <!-- Add user button -->
       <button
-        class="ml-4"
+        fxFlex
         mat-flat-button
+        style="position: fixed; margin-top: 4px"
         [color]="'primary'"
         (click)="__createProduct()"
       >
-        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <span class="ml-2 mr-1">검색하기</span>
+        <span class="ml-2 mr-1">Search</span>
       </button>
-      <button>엑셀저장</button>
-      <button>카지노머니확인</button>
     </div>
   </div>
-
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->
@@ -159,29 +78,16 @@
             <!-- 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"
-              matSort
-              matSortDisableClear
             >
-              <div class="hidden sm:block"><mat-checkbox></mat-checkbox></div>
+              <div>일련번호</div>
-              <div class="hidden sm:block">요율</div>
+              <div>아이디</div>
-              <div class="hidden sm:block">상부트리</div>
+              <div>등급</div>
-              <div class="hidden sm:block">관리</div>
+              <div class="hidden sm:block">변경내역</div>
-              <div class="hidden sm:block">매장수</div>
+              <div>관리자등급</div>
-              <div class="hidden sm:block">회원수</div>
+              <div>관리자아이디</div>
-              <div class="hidden sm:block">아이디</div>
+              <div>아이피</div>
-              <div class="hidden sm:block">닉네임</div>
+              <div class="hidden md:block">위치</div>
-              <div class="hidden sm:block">예금주</div>
+              <div class="hidden md:block">수정시간</div>
-              <div class="hidden sm:block">연락처</div>
-              <div class="hidden sm:block">정산</div>
-              <div class="hidden sm:block">보유금</div>
-              <div class="hidden sm:block">게임중머니</div>
-              <div class="hidden sm:block">카지노->캐쉬</div>
-              <div class="hidden sm:block">금일콤프</div>
-              <div class="hidden sm:block">총입출</div>
-              <div class="hidden sm:block">로그</div>
-              <div class="hidden sm:block">상태</div>
-              <div class="hidden sm:block">회원수</div>
-              <div class="hidden sm:block">비고</div>
             </div>
             <!-- Rows -->
             <ng-container *ngIf="modificationLogs$ | async as modificationLogs">
@@ -194,143 +100,28 @@
                 <div
                   class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
-                  <div class="hidden sm:block truncate">
+                  <div>
-                    <mat-checkbox></mat-checkbox>
+                    {{ modificationLog.idx }}
                   </div>
-                  <!-- rate -->
+                  <div>
-                  <div class="hidden sm:block truncate">
+                    {{ modificationLog.signinId }}
-                    <button
-                      mat-button
-                      color="primary"
-                      matTooltip="요율확인
-                                카지노-바카라: 0%
-                                카지노-룰렛: 0%
-                                카지노-드레곤타이거: 0%
-                                카지노-그외: 0%
-                                슬롯: 0%
-                                카지노루징: 0%
-                                슬롯루징: 0%"
-                    >
-                      요율
-                    </button>
-                    <div class="hidden sm:block truncate">
-                      <!-- 관리 -->
-                      <button mat-flat-button [color]="'primary'">
-                        <mat-form-field>
-                          <mat-select placeholder="관리">
-                            <mat-option value="">보유금지급/회수</mat-option>
-                            <mat-option value="">수수료설정</mat-option>
-                            <mat-option value="">콤프지급/회수</mat-option>
-                            <mat-option value="">쿠폰머니지급/회수</mat-option>
-                            <mat-option value="">쪽지보내기</mat-option>
-                            <mat-option value="">베팅리스트</mat-option>
-                            <mat-option value="">강제로그아웃</mat-option>
-                          </mat-select>
-                        </mat-form-field>
-                      </button>
                   </div>
+                  <div>
+                    {{ modificationLog.rank }}
                   </div>
-                  <!-- 매장수 -->
+                  <div class="hidden sm:block">
-                  <div class="hidden sm:block truncate">
+                    {{ modificationLog.history }}
-                    <button mat-flat-button [color]="'primary'">
-                      {{ modificationLog.branchCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ modificationLog.divisionCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ modificationLog.officeCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ modificationLog.storeCount }}
-                    </button>
                   </div>
-                  <!-- 회원수 -->
+                  <div>{{ modificationLog.managementRank }}</div>
-                  <div class="hidden sm:block truncate">
+                  <div>
-                    <button mat-flat-button [color]="'primary'">
+                    {{ modificationLog.managementId }}
-                      {{ modificationLog.memberCount }}
-                    </button>
                   </div>
-                  <!-- id -->
+                  <div>{{ modificationLog.ip }}</div>
-                  <ng-container *ngIf="users$ | async as users">
+                  <div class="hidden md:block">
-                    <ng-container
+                    {{ modificationLog.location }}
-                      *ngFor="let user of users; trackBy: __trackByFn"
-                    >
-                      <div
-                        class="hidden sm:block truncate"
-                        (click)="viewUserDetail(user.id!)"
-                      >
-                        {{ modificationLog.id }}
                   </div>
-                    </ng-container>
+                  <div class="hidden md:block">
-                  </ng-container>
+                    {{ modificationLog.modificationDate }}
-                  <!-- nickname -->
-                  <div class="hidden sm:block truncate">
-                    {{ modificationLog.nickname }}
-                  </div>
-                  <!-- accountHolder -->
-                  <div class="hidden sm:block truncate">
-                    {{ modificationLog.accountHolder }}
-                  </div>
-                  <!-- 연락처 -->
-                  <div class="hidden sm:block truncate">
-                    {{ modificationLog.phoneNumber }}
-                  </div>
-                  <!-- 정산 -->
-                  <div class="hidden sm:block truncate">
-                    {{ modificationLog.calculateType }}
-                  </div>
-                  <!-- 보유금 -->
-                  <div class="hidden sm:block truncate">
-                    캐쉬{{ modificationLog.ownCash }} 콤프{{
-                      modificationLog.ownComp
-                    }}
-                    쿠폰{{ modificationLog.ownCoupon }}
-                  </div>
-                  <!-- gameMoney -->
-                  <div class="hidden sm:block truncate">
-                    {{ modificationLog.gameMoney }}
-                  </div>
-                  <!-- casinoCash -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      게임머니확인
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      게임머니회수
-                    </button>
-                  </div>
-                  <!-- todayComp -->
-                  <div class="hidden sm:block truncate">
-                    {{ modificationLog.todayComp }}P
-                  </div>
-                  <!-- 총입출 -->
-                  <div class="hidden sm:block truncate">
-                    입금{{ modificationLog.totalDeposit }} 출금{{
-                      modificationLog.totalWithdraw
-                    }}
-                    차익{{ modificationLog.balance }}
-                  </div>
-                  <!-- log -->
-                  <div class="hidden sm:block truncate">
-                    가입{{ modificationLog.registDate }} 최종{{
-                      modificationLog.finalSigninDate
-                    }}
-                    IP{{ modificationLog.ip }}
-                  </div>
-                  <!-- state -->
-                  <div class="hidden sm:block truncate">
-                    {{ modificationLog.state }}
-                  </div>
-                  <!-- 회원수 -->
-                  <div class="hidden sm:block truncate">
-                    {{ modificationLog.memberCount }}
-                  </div>
-                  <!-- 비고 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ modificationLog.note }}
-                    </button>
                   </div>
                 </div>
               </ng-container>
@@ -353,7 +144,7 @@
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
-          There are no modificationLogs!
+          There are no data!
         </div>
       </ng-template>
     </div>

src/app/modules/admin/report/modification-log/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: 60px 60px 60px auto 60px 60px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          /*                     번호  아이디 등급 변경 관리자등급 관리자아이디 아이피 위치 수정시간 */
+          grid-template-columns: 60px 60px 60px auto 60px 60px 100px 60px 100px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          /*                     번호  아이디 등급 변경 관리자등급 관리자아이디 아이피 위치 수정시간 */
+          grid-template-columns: 60px 60px 60px auto 60px 60px 100px 60px 100px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          /*                     번호  아이디 등급 변경 관리자등급 관리자아이디 아이피 위치 수정시간 */
+          grid-template-columns: 60px 60px 60px auto 60px 60px 100px 60px 100px;
         }
       }
     `,
@@ -69,6 +73,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   modificationLogs$!: Observable<ModificationLog[] | undefined>;
   users$!: Observable<User[] | undefined>;
 
+  __isSearchOpened = false;
   isLoading = false;
   searchInputControl = new FormControl();
   selectedModificationLog?: ModificationLog;
@@ -186,6 +191,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __toggleDetails(productId: string): void {}
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickSearch(): void {
+    this.__isSearchOpened = !this.__isSearchOpened;
+  }
+
   /**
    * Track by function for ngFor loops
    *

src/app/modules/admin/report/modification-log/models/modification-log.ts

@@ -1,29 +1,12 @@
 export interface ModificationLog {
-  id?: string;
+  id: string;
-  totalPartnerCount?: number;
+  idx?: number; //  일련번호
-  totalHoldingMoney?: number;
+  rank?: string;
-  totalComp?: number;
+  signinId?: string;
-  total?: number;
+  history?: string;
-  branchCount?: number;
+  managementRank?: string; //  관리등급
-  divisionCount?: number;
+  managementId?: string; //  관리아이디
-  officeCount?: number;
-  storeCount?: number;
-  memberCount?: number;
-  nickname?: string;
-  accountHolder?: string;
-  phoneNumber?: string;
-  calculateType?: string;
-  ownCash?: number;
-  ownComp?: number;
-  ownCoupon?: number;
-  gameMoney?: number;
-  todayComp?: number;
-  totalDeposit?: number;
-  totalWithdraw?: number;
-  balance?: number;
-  registDate?: string;
-  finalSigninDate?: string;
   ip?: string;
-  state?: string;
+  location?: string; //  위치
-  note?: string;
+  modificationDate?: Date; //  수정시간
 }

src/app/modules/admin/report/money-log/components/list.component.html

@@ -10,113 +10,37 @@
       <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
     </div>
     <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">머니 활동 Logs</div>
+    <div class="text-4xl font-extrabold tracking-tight">머니활동 Logs</div>
     <!-- Actions -->
     <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- Memo -->
+      <!-- Search -->
-      <!-- <mat-form-field>
+      <button mat-icon-button (click)="__onClickSearch()">
-        <ng-container *ngIf="moneyLogs$ | async as moneyLogs">
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-          <ng-container
+      </button>
-            *ngFor="let moneyLog of moneyLogs; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ moneyLog.totalPartnerCount }} 총 보유머니:{{
-                  moneyLog.totalHoldingMoney
-                }}
-                총 콤프:{{ moneyLog.totalComp }} 총 합계:{{
-                  moneyLog.total
-                }}
-              </fieldset>
     </div>
-          </ng-container>
+  </div>
-        </ng-container>
+  <!-- Search -->
-      </mat-form-field> -->
+  <div
-
+    *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">
       <!-- SelectBox -->
-      <mat-form-field>
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <mat-select placeholder="리스트수">
+        <mat-select placeholder="검색어">
-          <mat-option value="40">40</mat-option>
+          <mat-option value="">검색어</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내용">
-          <mat-option value="">카지노콤프</mat-option>
-          <mat-option value="">슬롯콤프</mat-option>
-          <mat-option value="">배팅콤프</mat-option>
-          <mat-option value="">첫충콤프</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <!-- <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="아이디">
           <mat-option value="">아이디</mat-option>
           <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
+          <mat-option value="">처리내역</mat-option>
-          <mat-option value="">사이트</mat-option>
+          <mat-option value="">관리자지급</mat-option>
-          <mat-option value="">파트너수동지급</mat-option>
+          <mat-option value="">관리자회수</mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="가입일 정렬">
-          <mat-option value="">가입일 정렬</mat-option>
-          <mat-option value="">아이디 정렬</mat-option>
-          <mat-option value="">닉네임 정렬</mat-option>
-          <mat-option value="">캐쉬 정렬</mat-option>
-          <mat-option value="">콤프 정렬</mat-option>
-          <mat-option value="">쿠폰 정렬</mat-option>
-          <mat-option value="">입금 정렬</mat-option>
-          <mat-option value="">출금 정렬</mat-option>
-          <mat-option value="">차익 정렬</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
       <!-- Search -->
       <mat-form-field
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
+        fxFlex
+        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
       >
         <mat-icon
           class="icon-size-5"
@@ -127,21 +51,31 @@
           matInput
           [formControl]="searchInputControl"
           [autocomplete]="'off'"
-          [placeholder]="'Search'"
+          [placeholder]="'Search user'"
         />
       </mat-form-field>
       <!-- Add user button -->
       <button
-        class="ml-4"
+        fxFlex
         mat-flat-button
+        style="position: fixed; margin-top: 4px"
         [color]="'primary'"
         (click)="__createProduct()"
       >
-        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <span class="ml-2 mr-1">검색하기</span>
+        <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>
-      <button>엑셀저장</button>
-      <button>카지노머니확인</button>
     </div>
   </div>
 
@@ -157,29 +91,23 @@
             <!-- 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"
-              matSort
-              matSortDisableClear
             >
-              <div class="hidden sm:block"><mat-checkbox></mat-checkbox></div>
+              <div>날짜</div>
-              <div class="hidden sm:block">요율</div>
+              <div>
-              <div class="hidden sm:block">상부트리</div>
+                대상아이디
-              <div class="hidden sm:block">관리</div>
+                <hr style="margin: 7px 0px" />
-              <div class="hidden sm:block">매장수</div>
+                대상닉네임
-              <div class="hidden sm:block">회원수</div>
+              </div>
-              <div class="hidden sm:block">아이디</div>
+              <div>내역</div>
-              <div class="hidden sm:block">닉네임</div>
+              <div class="hidden sm:block">
-              <div class="hidden sm:block">예금주</div>
+                이전금액
-              <div class="hidden sm:block">연락처</div>
+                <hr style="margin: 7px 0px" />
-              <div class="hidden sm:block">정산</div>
+                변동금액
-              <div class="hidden sm:block">보유금</div>
+                <hr style="margin: 7px 0px" />
-              <div class="hidden sm:block">게임중머니</div>
+                이후금액
-              <div class="hidden sm:block">카지노->캐쉬</div>
+              </div>
-              <div class="hidden sm:block">금일콤프</div>
+              <div class="hidden md:block">메모</div>
-              <div class="hidden sm:block">총입출</div>
+              <div class="hidden lg:block">배팅번호</div>
-              <div class="hidden sm:block">로그</div>
-              <div class="hidden sm:block">상태</div>
-              <div class="hidden sm:block">회원수</div>
-              <div class="hidden sm:block">비고</div>
             </div>
             <!-- Rows -->
             <ng-container *ngIf="moneyLogs$ | async as moneyLogs">
@@ -189,142 +117,27 @@
                 <div
                   class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
-                  <div class="hidden sm:block truncate">
+                  <div>{{ moneyLog.finalSigninDate }}</div>
-                    <mat-checkbox></mat-checkbox>
+                  <div>
-                  </div>
+                    {{ moneyLog.signinId }}
-                  <!-- rate -->
+                    <hr style="margin: 7px 0px" />
-                  <div class="hidden sm:block truncate">
-                    <button
-                      mat-button
-                      color="primary"
-                      matTooltip="요율확인
-                                카지노-바카라: 0%
-                                카지노-룰렛: 0%
-                                카지노-드레곤타이거: 0%
-                                카지노-그외: 0%
-                                슬롯: 0%
-                                카지노루징: 0%
-                                슬롯루징: 0%"
-                    >
-                      요율
-                    </button>
-                    <div class="hidden sm:block truncate">
-                      <!-- 관리 -->
-                      <button mat-flat-button [color]="'primary'">
-                        <mat-form-field>
-                          <mat-select placeholder="관리">
-                            <mat-option value="">보유금지급/회수</mat-option>
-                            <mat-option value="">수수료설정</mat-option>
-                            <mat-option value="">콤프지급/회수</mat-option>
-                            <mat-option value="">쿠폰머니지급/회수</mat-option>
-                            <mat-option value="">쪽지보내기</mat-option>
-                            <mat-option value="">베팅리스트</mat-option>
-                            <mat-option value="">강제로그아웃</mat-option>
-                          </mat-select>
-                        </mat-form-field>
-                      </button>
-                    </div>
-                  </div>
-                  <!-- 매장수 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ moneyLog.branchCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ moneyLog.divisionCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ moneyLog.officeCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ moneyLog.storeCount }}
-                    </button>
-                  </div>
-                  <!-- 회원수 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ moneyLog.memberCount }}
-                    </button>
-                  </div>
-                  <!-- id -->
-                  <ng-container *ngIf="users$ | async as users">
-                    <ng-container
-                      *ngFor="let user of users; trackBy: __trackByFn"
-                    >
-                      <div
-                        class="hidden sm:block truncate"
-                        (click)="viewUserDetail(user.id!)"
-                      >
-                        {{ moneyLog.id }}
-                      </div>
-                    </ng-container>
-                  </ng-container>
-                  <!-- nickname -->
-                  <div class="hidden sm:block truncate">
                     {{ moneyLog.nickname }}
                   </div>
-                  <!-- accountHolder -->
+                  <div>
-                  <div class="hidden sm:block truncate">
+                    {{ moneyLog.history }}
-                    {{ moneyLog.accountHolder }}
                   </div>
-                  <!-- 연락처 -->
+                  <div class="hidden sm:block">
-                  <div class="hidden sm:block truncate">
+                    {{ moneyLog.beforeMoney }}원
-                    {{ moneyLog.phoneNumber }}
+                    <hr style="margin: 7px 0px" />
+                    {{ moneyLog.changeMoney }}원
+                    <hr style="margin: 7px 0px" />
+                    {{ moneyLog.afterMoney }}원
                   </div>
-                  <!-- 정산 -->
+                  <div class="hidden md:block">
-                  <div class="hidden sm:block truncate">
+                    {{ moneyLog.memo }}
-                    {{ moneyLog.calculateType }}
                   </div>
-                  <!-- 보유금 -->
+                  <div class="hidden lg:block">
-                  <div class="hidden sm:block truncate">
+                    {{ moneyLog.bettingNumber }}
-                    캐쉬{{ moneyLog.ownCash }} 콤프{{ moneyLog.ownComp }} 쿠폰{{
-                      moneyLog.ownCoupon
-                    }}
-                  </div>
-                  <!-- gameMoney -->
-                  <div class="hidden sm:block truncate">
-                    {{ moneyLog.gameMoney }}
-                  </div>
-                  <!-- casinoCash -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      게임머니확인
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      게임머니회수
-                    </button>
-                  </div>
-                  <!-- todayComp -->
-                  <div class="hidden sm:block truncate">
-                    {{ moneyLog.todayComp }}P
-                  </div>
-                  <!-- 총입출 -->
-                  <div class="hidden sm:block truncate">
-                    입금{{ moneyLog.totalDeposit }} 출금{{
-                      moneyLog.totalWithdraw
-                    }}
-                    차익{{ moneyLog.balance }}
-                  </div>
-                  <!-- log -->
-                  <div class="hidden sm:block truncate">
-                    가입{{ moneyLog.registDate }} 최종{{
-                      moneyLog.finalSigninDate
-                    }}
-                    IP{{ moneyLog.ip }}
-                  </div>
-                  <!-- state -->
-                  <div class="hidden sm:block truncate">
-                    {{ moneyLog.state }}
-                  </div>
-                  <!-- 회원수 -->
-                  <div class="hidden sm:block truncate">
-                    {{ moneyLog.memberCount }}
-                  </div>
-                  <!-- 비고 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ moneyLog.note }}
-                    </button>
                   </div>
                 </div>
               </ng-container>
@@ -347,7 +160,7 @@
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
-          There are no moneyLogs!
+          There are no data!
         </div>
       </ng-template>
     </div>

src/app/modules/admin/report/money-log/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;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          /*                     날짜  아이디 내역  금액  메모  배팅번호 */
+          grid-template-columns: 100px 100px auto 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;
         }
       }
     `,
@@ -69,6 +73,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   moneyLogs$!: Observable<MoneyLog[] | undefined>;
   users$!: Observable<User[] | undefined>;
 
+  __isSearchOpened = false;
   isLoading = false;
   searchInputControl = new FormControl();
   selectedMoneyLog?: MoneyLog;
@@ -117,7 +122,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     if (this._sort && this._paginator) {
       // Set the initial sort
       this._sort.sort({
-        id: 'name',
+        id: 'signinId',
         start: 'asc',
         disableClear: true,
       });
@@ -186,6 +191,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __toggleDetails(productId: string): void {}
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickSearch(): void {
+    this.__isSearchOpened = !this.__isSearchOpened;
+  }
+
   /**
    * Track by function for ngFor loops
    *

src/app/modules/admin/report/money-log/models/money-log.ts

@@ -1,29 +1,12 @@
 export interface MoneyLog {
-  id?: string;
+  id: string;
-  totalPartnerCount?: number;
+  finalSigninDate?: Date;
-  totalHoldingMoney?: number;
+  signinId?: string;
-  totalComp?: number;
-  total?: number;
-  branchCount?: number;
-  divisionCount?: number;
-  officeCount?: number;
-  storeCount?: number;
-  memberCount?: number;
   nickname?: string;
-  accountHolder?: string;
+  history?: string;
-  phoneNumber?: string;
+  beforeMoney?: number;
-  calculateType?: string;
+  changeMoney?: number;
-  ownCash?: number;
+  afterMoney?: number;
-  ownComp?: number;
+  memo?: string;
-  ownCoupon?: number;
+  bettingNumber?: number;
-  gameMoney?: number;
-  todayComp?: number;
-  totalDeposit?: number;
-  totalWithdraw?: number;
-  balance?: number;
-  registDate?: string;
-  finalSigninDate?: string;
-  ip?: string;
-  state?: string;
-  note?: string;
 }

src/app/modules/admin/report/money-log/money-log.module.ts

@@ -12,9 +12,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatGridListModule } from '@angular/material/grid-list';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatCheckboxModule } from '@angular/material/checkbox';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -42,9 +40,7 @@ import { moneyLogRoutes } from './money-log.routing';
     MatSelectModule,
     MatTooltipModule,
     MatGridListModule,
-    MatSlideToggleModule,
+    MatDatepickerModule,
-    MatRadioModule,
-    MatCheckboxModule,
   ],
 })
 export class MoneyLogModule {}

src/app/modules/admin/report/payment-log/components/list.component.html

@@ -10,113 +10,32 @@
       <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
     </div>
     <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">수동지급/회수 로그</div>
+    <div class="text-4xl font-extrabold tracking-tight">수동지급/회수로그</div>
     <!-- Actions -->
     <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- Memo -->
+      <!-- Search -->
-      <!-- <mat-form-field>
+      <button mat-icon-button (click)="__onClickSearch()">
-        <ng-container *ngIf="paymentLogs$ | async as paymentLogs">
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-          <ng-container
+      </button>
-            *ngFor="let paymentLog of paymentLogs; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ paymentLog.totalPartnerCount }} 총 보유머니:{{
-                  paymentLog.totalHoldingpayment
-                }}
-                총 콤프:{{ paymentLog.totalComp }} 총 합계:{{
-                  paymentLog.total
-                }}
-              </fieldset>
     </div>
-          </ng-container>
+  </div>
-        </ng-container>
+  <!-- Search -->
-      </mat-form-field> -->
+  <div
-
+    *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">
       <!-- SelectBox -->
-      <mat-form-field>
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <mat-select placeholder="리스트수">
-          <mat-option value="40">40</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내용">
-          <mat-option value="">카지노콤프</mat-option>
-          <mat-option value="">슬롯콤프</mat-option>
-          <mat-option value="">배팅콤프</mat-option>
-          <mat-option value="">첫충콤프</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <!-- <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
         <mat-select placeholder="아이디">
           <mat-option value="">아이디</mat-option>
-          <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
-          <mat-option value="">사이트</mat-option>
-          <mat-option value="">파트너수동지급</mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="가입일 정렬">
-          <mat-option value="">가입일 정렬</mat-option>
-          <mat-option value="">아이디 정렬</mat-option>
-          <mat-option value="">닉네임 정렬</mat-option>
-          <mat-option value="">캐쉬 정렬</mat-option>
-          <mat-option value="">콤프 정렬</mat-option>
-          <mat-option value="">쿠폰 정렬</mat-option>
-          <mat-option value="">입금 정렬</mat-option>
-          <mat-option value="">출금 정렬</mat-option>
-          <mat-option value="">차익 정렬</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
       <!-- Search -->
       <mat-form-field
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
+        fxFlex
+        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
       >
         <mat-icon
           class="icon-size-5"
@@ -127,24 +46,22 @@
           matInput
           [formControl]="searchInputControl"
           [autocomplete]="'off'"
-          [placeholder]="'Search'"
+          [placeholder]="'Search user'"
         />
       </mat-form-field>
       <!-- Add user button -->
       <button
-        class="ml-4"
+        fxFlex
         mat-flat-button
+        style="position: fixed; margin-top: 4px"
         [color]="'primary'"
         (click)="__createProduct()"
       >
-        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <span class="ml-2 mr-1">검색하기</span>
+        <span class="ml-2 mr-1">Search</span>
       </button>
-      <button>엑셀저장</button>
-      <button>카지노머니확인</button>
     </div>
   </div>
-
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->
@@ -157,29 +74,15 @@
             <!-- 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"
-              matSort
-              matSortDisableClear
             >
-              <div class="hidden sm:block"><mat-checkbox></mat-checkbox></div>
+              <div>번호</div>
-              <div class="hidden sm:block">요율</div>
+              <div>비고</div>
-              <div class="hidden sm:block">상부트리</div>
+              <div>정보</div>
-              <div class="hidden sm:block">관리</div>
-              <div class="hidden sm:block">매장수</div>
-              <div class="hidden sm:block">회원수</div>
               <div class="hidden sm:block">아이디</div>
-              <div class="hidden sm:block">닉네임</div>
+              <div>이전금액</div>
-              <div class="hidden sm:block">예금주</div>
+              <div>변동금액</div>
-              <div class="hidden sm:block">연락처</div>
+              <div class="hidden md:block">이후금액</div>
-              <div class="hidden sm:block">정산</div>
+              <div class="hidden md:block">등록시간</div>
-              <div class="hidden sm:block">보유금</div>
-              <div class="hidden sm:block">게임중머니</div>
-              <div class="hidden sm:block">카지노->캐쉬</div>
-              <div class="hidden sm:block">금일콤프</div>
-              <div class="hidden sm:block">총입출</div>
-              <div class="hidden sm:block">로그</div>
-              <div class="hidden sm:block">상태</div>
-              <div class="hidden sm:block">회원수</div>
-              <div class="hidden sm:block">비고</div>
             </div>
             <!-- Rows -->
             <ng-container *ngIf="paymentLogs$ | async as paymentLogs">
@@ -189,143 +92,43 @@
                 <div
                   class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
-                  <div class="hidden sm:block truncate">
+                  <div>
-                    <mat-checkbox></mat-checkbox>
+                    {{ paymentLog.idx }}
                   </div>
-                  <!-- rate -->
+                  <div>
-                  <div class="hidden sm:block truncate">
+                    {{ paymentLog.giveRank }}
-                    <button
+                    <mat-icon svgIcon="play-outline"></mat-icon>
-                      mat-button
+                    {{ paymentLog.takeRank }}회수or지급
-                      color="primary"
-                      matTooltip="요율확인
-                                카지노-바카라: 0%
-                                카지노-룰렛: 0%
-                                카지노-드레곤타이거: 0%
-                                카지노-그외: 0%
-                                슬롯: 0%
-                                카지노루징: 0%
-                                슬롯루징: 0%"
-                    >
-                      요율
-                    </button>
-                    <div class="hidden sm:block truncate">
-                      <!-- 관리 -->
-                      <button mat-flat-button [color]="'primary'">
-                        <mat-form-field>
-                          <mat-select placeholder="관리">
-                            <mat-option value="">보유금지급/회수</mat-option>
-                            <mat-option value="">수수료설정</mat-option>
-                            <mat-option value="">콤프지급/회수</mat-option>
-                            <mat-option value="">쿠폰머니지급/회수</mat-option>
-                            <mat-option value="">쪽지보내기</mat-option>
-                            <mat-option value="">베팅리스트</mat-option>
-                            <mat-option value="">강제로그아웃</mat-option>
-                          </mat-select>
-                        </mat-form-field>
-                      </button>
                   </div>
+                  <div>
+                    {{ paymentLog.giveRank }}{{ paymentLog.giveId }}
+                    <mat-icon svgIcon="play-outline"></mat-icon>
+                    {{ paymentLog.takeRank }}{{ paymentLog.takeId }}
                   </div>
-                  <!-- 매장수 -->
+                  <div class="hidden sm:block">
-                  <div class="hidden sm:block truncate">
+                    {{ paymentLog.takeRank }}{{ paymentLog.takeId }}
-                    <button mat-flat-button [color]="'primary'">
+                    <hr style="margin: 7px 0px" />
-                      {{ paymentLog.branchCount }}
+                    {{ paymentLog.giveRank }}{{ paymentLog.giveId }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ paymentLog.divisionCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ paymentLog.officeCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ paymentLog.storeCount }}
-                    </button>
                   </div>
-                  <!-- 회원수 -->
+                  <div>
-                  <div class="hidden sm:block truncate">
+                    {{ paymentLog.takeBeforeMoney }}원
-                    <button mat-flat-button [color]="'primary'">
+                    <hr style="margin: 7px 0px" />
-                      {{ paymentLog.memberCount }}
+                    {{ paymentLog.giveBeforeMoney }}원
-                    </button>
                   </div>
-                  <!-- id -->
+                  <div>
-                  <ng-container *ngIf="users$ | async as users">
+                    {{ paymentLog.takeChangeMoney }}원
-                    <ng-container
+                    <hr style="margin: 7px 0px" />
-                      *ngFor="let user of users; trackBy: __trackByFn"
+                    {{ paymentLog.giveChangeMoney }}원
-                    >
-                      <div
-                        class="hidden sm:block truncate"
-                        (click)="viewUserDetail(user.id!)"
-                      >
-                        {{ paymentLog.id }}
                   </div>
-                    </ng-container>
+                  <div class="hidden md:block">
-                  </ng-container>
+                    {{ paymentLog.takeAfterMoney }}원
-                  <!-- nickname -->
+                    <hr style="margin: 7px 0px" />
-                  <div class="hidden sm:block truncate">
+                    {{ paymentLog.giveAfterMoney }}원
-                    {{ paymentLog.nickname }}
                   </div>
-                  <!-- accountHolder -->
+                  <div class="hidden md:block">
-                  <div class="hidden sm:block truncate">
+                    {{ paymentLog.takeRegistrationDate }}
-                    {{ paymentLog.accountHolder }}
+                    <hr style="margin: 7px 0px" />
-                  </div>
+                    {{ paymentLog.giveRegistrationDate }}
-                  <!-- 연락처 -->
-                  <div class="hidden sm:block truncate">
-                    {{ paymentLog.phoneNumber }}
-                  </div>
-                  <!-- 정산 -->
-                  <div class="hidden sm:block truncate">
-                    {{ paymentLog.calculateType }}
-                  </div>
-                  <!-- 보유금 -->
-                  <div class="hidden sm:block truncate">
-                    캐쉬{{ paymentLog.ownCash }} 콤프{{
-                      paymentLog.ownComp
-                    }}
-                    쿠폰{{ paymentLog.ownCoupon }}
-                  </div>
-                  <!-- gameMoney -->
-                  <div class="hidden sm:block truncate">
-                    {{ paymentLog.gameMoney }}
-                  </div>
-                  <!-- casinoCash -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      게임머니확인
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      게임머니회수
-                    </button>
-                  </div>
-                  <!-- todayComp -->
-                  <div class="hidden sm:block truncate">
-                    {{ paymentLog.todayComp }}P
-                  </div>
-                  <!-- 총입출 -->
-                  <div class="hidden sm:block truncate">
-                    입금{{ paymentLog.totalDeposit }} 출금{{
-                      paymentLog.totalWithdraw
-                    }}
-                    차익{{ paymentLog.balance }}
-                  </div>
-                  <!-- log -->
-                  <div class="hidden sm:block truncate">
-                    가입{{ paymentLog.registDate }} 최종{{
-                      paymentLog.finalSigninDate
-                    }}
-                    IP{{ paymentLog.ip }}
-                  </div>
-                  <!-- state -->
-                  <div class="hidden sm:block truncate">
-                    {{ paymentLog.state }}
-                  </div>
-                  <!-- 회원수 -->
-                  <div class="hidden sm:block truncate">
-                    {{ paymentLog.memberCount }}
-                  </div>
-                  <!-- 비고 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ paymentLog.note }}
-                    </button>
                   </div>
                 </div>
               </ng-container>
@@ -348,7 +151,7 @@
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
-          There are no paymentLogs!
+          There are no data!
         </div>
       </ng-template>
     </div>

src/app/modules/admin/report/payment-log/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 200px auto 100px 100px 100px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          /*                     번호   비고   정보  아이디  이전  변동   이후  등록시간 */
+          grid-template-columns: 100px 200px auto 100px 100px 100px 100px 100px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          /*                     번호   비고   정보  아이디  이전  변동   이후  등록시간 */
+          grid-template-columns: 100px 200px auto 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 200px auto 100px 100px 100px 100px 100px;
         }
       }
     `,
@@ -69,6 +73,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   paymentLogs$!: Observable<PaymentLog[] | undefined>;
   users$!: Observable<User[] | undefined>;
 
+  __isSearchOpened = false;
   isLoading = false;
   searchInputControl = new FormControl();
   selectedPaymentLog?: PaymentLog;
@@ -186,6 +191,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __toggleDetails(productId: string): void {}
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickSearch(): void {
+    this.__isSearchOpened = !this.__isSearchOpened;
+  }
+
   /**
    * Track by function for ngFor loops
    *

src/app/modules/admin/report/payment-log/models/payment-log.ts

@@ -1,29 +1,16 @@
 export interface PaymentLog {
-  id?: string;
+  id: string;
-  totalPartnerCount?: number;
+  idx?: number;
-  totalHoldingMoney?: number;
+  giveRank?: string; //  지급자 등급
-  totalComp?: number;
+  giveId?: string; //  지급자 아이디
-  total?: number;
+  giveBeforeMoney?: number; //  지급자 이전금액
-  branchCount?: number;
+  giveChangeMoney?: number; //  지급자 변동금액
-  divisionCount?: number;
+  giveAfterMoney?: number; //  지급자 이후금액
-  officeCount?: number;
+  takeRank?: string; //  회수자 등급
-  storeCount?: number;
+  takeId?: string; //  회수자 아이디
-  memberCount?: number;
+  takeBeforeMoney?: number; //  회수자 이전금액
-  nickname?: string;
+  takeChangeMoney?: number; //  회수자 변동금액
-  accountHolder?: string;
+  takeAfterMoney?: number; //  회수자 이후금액
-  phoneNumber?: string;
+  giveRegistrationDate?: Date; //  지급자 등록시간
-  calculateType?: string;
+  takeRegistrationDate?: Date; //  회수자 등록시간
-  ownCash?: number;
-  ownComp?: number;
-  ownCoupon?: number;
-  gameMoney?: number;
-  todayComp?: number;
-  totalDeposit?: number;
-  totalWithdraw?: number;
-  balance?: number;
-  registDate?: string;
-  finalSigninDate?: string;
-  ip?: string;
-  state?: string;
-  note?: string;
 }