사용자 내역 테이블

src/app/modules/admin/member/user/components/partner-sign-in-history.component.html

@@ -7,10 +7,99 @@
           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 fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+              <!-- Search -->
+              <!-- Card inception -->
+              <mat-form-field
+                [floatLabel]="'always'"
+                class="bet-mat-form-field-wrapper-mb-0 mr-2"
+              >
+                <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>
+              <!-- Card expiration -->
+              <mat-form-field
+                [floatLabel]="'always'"
+                class="bet-mat-form-field-wrapper-mb-0 mr-2"
+              >
+                <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>
+
+              <!-- Add user button -->
+              <button
+                fxFlex
+                mat-flat-button
+                [color]="'primary'"
+                (click)="__createProduct()"
+              >
+                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+                <span class="ml-2 mr-1">Search</span>
+              </button>
             </div>
-          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+          </div>
-            파트너로그인내역 테이블
+          <div class="flex flex-col flex-auto mt-2">
+            <table
+              class="overflow-y-visible"
+              mat-table
+              [dataSource]="partnerSignInHistoryDataSource"
+            >
+              <!-- Total -->
+              <ng-container matColumnDef="no">
+                <th mat-header-cell *matHeaderCellDef>번호</th>
+                <td mat-cell *matCellDef="let info; let idx = index">
+                  <span class="font-medium text-rignt">
+                    {{ idx + 1 }}
+                  </span>
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="signInIp">
+                <th mat-header-cell *matHeaderCellDef>접속아이피</th>
+                <td mat-cell *matCellDef="let info">
+                  {{ info.signInIp }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="signInAt">
+                <th mat-header-cell *matHeaderCellDef>접속일자</th>
+                <td mat-cell *matCellDef="let info">{{ info.signInAt }}</td>
+              </ng-container>
+
+              <ng-container matColumnDef="note">
+                <th mat-header-cell *matHeaderCellDef>비고</th>
+                <td mat-cell *matCellDef="let info">{{ info.note }}</td>
+              </ng-container>
+
+              <tr
+                mat-header-row
+                *matHeaderRowDef="partnerSignInHistoryTableColumns"
+              ></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: partnerSignInHistoryTableColumns"
+              ></tr>
+            </table>
+            <mat-paginator
+              [pageSizeOptions]="[5, 10, 25, 100]"
+              aria-label="Select page of users"
+            ></mat-paginator>
           </div>
         </div>
       </div>

src/app/modules/admin/member/user/components/partner-sign-in-history.component.ts

@@ -9,6 +9,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 import { fuseAnimations } from '@fuse/animations';
 import { Subject } from 'rxjs';
 
@@ -46,10 +47,22 @@ export class PartnerSignInHistoryComponent
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
+  partnerSignInHistoryTableColumns: string[] = [
+    'no',
+    'signInIp',
+    'signInAt',
+    'note',
+  ];
+
+  partnerSignInHistoryDataSource: MatTableDataSource<TempPartnerSignIn> =
+    new MatTableDataSource();
+
   /**
    * Constructor
    */
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {
+    this.partnerSignInHistoryDataSource.data = PARTNER_HISTORY_DATA;
+  }
 
   // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
@@ -104,3 +117,19 @@ export class PartnerSignInHistoryComponent
     return item.id || index;
   }
 }
+
+export interface TempPartnerSignIn {
+  signInIp: string;
+  signInAt: string;
+  note: string;
+}
+
+const PARTNER_HISTORY_DATA: TempPartnerSignIn[] = [
+  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
+  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
+  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
+  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
+  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
+  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
+  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
+];

src/app/modules/admin/member/user/components/web-sign-in-history.component.html

@@ -7,10 +7,90 @@
           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 fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+              <!-- Search -->
+              <!-- Card inception -->
+              <mat-form-field
+                [floatLabel]="'always'"
+                class="bet-mat-form-field-wrapper-mb-0 mr-2"
+              >
+                <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>
+              <!-- Card expiration -->
+              <mat-form-field
+                [floatLabel]="'always'"
+                class="bet-mat-form-field-wrapper-mb-0 mr-2"
+              >
+                <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>
+
+              <!-- Add user button -->
+              <button
+                fxFlex
+                mat-flat-button
+                [color]="'primary'"
+                (click)="__createProduct()"
+              >
+                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+                <span class="ml-2 mr-1">Search</span>
+              </button>
             </div>
-          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+          </div>
-            웹로그인내역 테이블
+          <div class="flex flex-col flex-auto mt-2">
+            <table
+              class="overflow-y-visible"
+              mat-table
+              [dataSource]="webSignInHistoryDataSource"
+            >
+              <!-- Total -->
+              <ng-container matColumnDef="no">
+                <th mat-header-cell *matHeaderCellDef>번호</th>
+                <td mat-cell *matCellDef="let info; let idx = index">
+                  <span class="font-medium text-right">
+                    {{ idx + 1 }}
+                  </span>
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="signInIp">
+                <th mat-header-cell *matHeaderCellDef>접속아이피</th>
+                <td mat-cell *matCellDef="let info">{{ info.signInIp }}</td>
+              </ng-container>
+
+              <ng-container matColumnDef="signInAt">
+                <th mat-header-cell *matHeaderCellDef>접속일자</th>
+                <td mat-cell *matCellDef="let info">{{ info.signInAt }}</td>
+              </ng-container>
+
+              <tr
+                mat-header-row
+                *matHeaderRowDef="webSignInHistoryTableColumns"
+              ></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: webSignInHistoryTableColumns"
+              ></tr>
+            </table>
+            <mat-paginator
+              [pageSizeOptions]="[5, 10, 25, 100]"
+              aria-label="Select page of users"
+            ></mat-paginator>
           </div>
         </div>
       </div>

src/app/modules/admin/member/user/components/web-sign-in-history.component.ts

@@ -9,6 +9,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 import { fuseAnimations } from '@fuse/animations';
 import { Subject } from 'rxjs';
 
@@ -46,10 +47,17 @@ export class WebSignInHistoryComponent
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
+  webSignInHistoryTableColumns: string[] = ['no', 'signInIp', 'signInAt'];
+
+  webSignInHistoryDataSource: MatTableDataSource<TempWebSignIn> =
+    new MatTableDataSource();
+
   /**
    * Constructor
    */
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {
+    this.webSignInHistoryDataSource.data = WEB_SIGN_IN_HISTORY_DATA;
+  }
 
   // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
@@ -104,3 +112,18 @@ export class WebSignInHistoryComponent
     return item.id || index;
   }
 }
+
+export interface TempWebSignIn {
+  signInIp: string;
+  signInAt: string;
+}
+
+const WEB_SIGN_IN_HISTORY_DATA: TempWebSignIn[] = [
+  { signInIp: '175.198.74.36', signInAt: '2022-08-21 14:14' },
+  { signInIp: '175.198.74.36', signInAt: '2022-08-21 14:14' },
+  { signInIp: '175.198.74.36', signInAt: '2022-08-21 14:14' },
+  { signInIp: '175.198.74.36', signInAt: '2022-08-21 14:14' },
+  { signInIp: '175.198.74.36', signInAt: '2022-08-21 14:14' },
+  { signInIp: '175.198.74.36', signInAt: '2022-08-21 14:14' },
+  { signInIp: '175.198.74.36', signInAt: '2022-08-21 14:14' },
+];

src/app/modules/admin/member/user/components/withdraw-history.component.html

@@ -7,10 +7,94 @@
           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 fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+              <!-- Search -->
+              <!-- Card inception -->
+              <mat-form-field
+                [floatLabel]="'always'"
+                class="bet-mat-form-filed-wrapper-mb-0 mr-2"
+              >
+                <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>
+              <!-- Card expiration -->
+              <mat-form-field
+                [floatLabel]="'always'"
+                class="bet-mat-form-field-wrapper-mb-0 mr-2"
+              >
+                <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>
+
+              <!-- Add user button -->
+              <button
+                fxFlex
+                mat-flat-button
+                [color]="'primary'"
+                (click)="__createProduct()"
+              >
+                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+                <span class="ml-2 mr-1">Search</span>
+              </button>
             </div>
-          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+          </div>
-            출금내역 테이블
+          <div class="flex flex-col flex-auto mt-2">
+            <table
+              class="overflow-y-visible"
+              mat-table
+              [dataSource]="withdrawHistoryDataSource"
+            >
+              <!-- Total -->
+              <ng-container matColumnDef="no">
+                <th mat-header-cell *matHeaderCellDef>번호</th>
+                <td mat-cell *matCellDef="let info; let idx = index">
+                  <span class="font-medium text-right">{{ idx + 1 }}</span>
+                </td>
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="amount">
+                <th mat-header-cell *matHeaderCellDef>충전금액</th>
+                <td mat-cell *matCellDef="let info">{{ info.amount }}</td>
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="createAt">
+                <th mat-header-cell *matHeaderCellDef>신청일자</th>
+                <td mat-cell *matCellDef="let info">{{ info.createAt }}</td>
+              </ng-container>
+
+              <ng-container matColumnDef="state">
+                <th mat-header-cell *matHeaderCellDef>결과</th>
+                <td mat-cell *matCellDef="let info">{{ info.state }}</td>
+              </ng-container>
+
+              <tr
+                mat-header-row
+                *matHeaderRowDef="withdrawHistoryTableColumns"
+              ></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: withdrawHistoryTableColumns"
+              ></tr>
+            </table>
+            <mat-paginator
+              [pageSizeOptions]="[5, 10, 25, 100]"
+              aria-label="Select page of users"
+            >
+            </mat-paginator>
           </div>
         </div>
       </div>

src/app/modules/admin/member/user/components/withdraw-history.component.ts

@@ -9,6 +9,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 import { fuseAnimations } from '@fuse/animations';
 import { Subject } from 'rxjs';
 
@@ -46,10 +47,17 @@ export class WithdrawHistoryComponent
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
+  withdrawHistoryTableColumns: string[] = ['no', 'amount', 'createAt', 'state'];
+
+  withdrawHistoryDataSource: MatTableDataSource<TempWithdraw> =
+    new MatTableDataSource();
+
   /**
    * Constructor
    */
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {
+    this.withdrawHistoryDataSource.data = WITHDRAW_HISTORY_DATA;
+  }
 
   // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
@@ -104,3 +112,19 @@ export class WithdrawHistoryComponent
     return item.id || index;
   }
 }
+
+export interface TempWithdraw {
+  amount: string;
+  createAt: string;
+  state: string;
+}
+
+const WITHDRAW_HISTORY_DATA: TempWithdraw[] = [
+  { amount: '100,000', createAt: '2022-08-20 13:13', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 13:13', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 13:13', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 13:13', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 13:13', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 13:13', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 13:13', state: '완료' },
+];