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/modules/admin/bank/deposit/components/list.component.html

@@ -55,6 +55,32 @@
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
       <!-- SelectBox -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="내용">
           <mat-option value="">카지노콤프</mat-option>

src/app/modules/admin/bank/deposit/deposit.module.ts

@@ -11,6 +11,8 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -37,6 +39,8 @@ import { depositRoutes } from './deposit.routing';
     MatSelectModule,
     MatTooltipModule,
     MatCheckboxModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class DepositModule {}

src/app/modules/admin/bank/partner-calculate/components/list.component.html

@@ -26,14 +26,39 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
+      <!-- Search -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="검색어">
           <mat-option value="">아이디</mat-option>
           <mat-option value="">닉네임</mat-option>
         </mat-select>
       </mat-form-field>
-      <!-- Search -->
       <mat-form-field
         fxFlex
         class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"

src/app/modules/admin/bank/partner-calculate/partner-calculate.module.ts

@@ -9,6 +9,8 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -33,6 +35,8 @@ import { partnerCalculateRoutes } from './partner-calculate.routing';
     MatProgressBarModule,
     MatSortModule,
     MatSelectModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class PartnerCalculateModule {}

src/app/modules/admin/bank/web-calculate/components/list.component.html

@@ -26,14 +26,39 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
+      <!-- Search -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="검색어">
           <mat-option value="">아이디</mat-option>
           <mat-option value="">닉네임</mat-option>
         </mat-select>
       </mat-form-field>
-      <!-- Search -->
       <mat-form-field
         fxFlex
         class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"

src/app/modules/admin/bank/web-calculate/web-calculate.module.ts

@@ -9,6 +9,8 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -33,6 +35,8 @@ import { webCalculateRoutes } from './web-calculate.routing';
     MatProgressBarModule,
     MatSortModule,
     MatSelectModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class WebCalculateModule {}

src/app/modules/admin/bank/withdraw/components/list.component.html

@@ -59,7 +59,33 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
+      <!-- Search -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="내용">
           <mat-option value="">카지노콤프</mat-option>
@@ -77,7 +103,6 @@
           <mat-option value="">상태</mat-option>
         </mat-select>
       </mat-form-field>
-      <!-- Search -->
       <mat-form-field
         fxFlex
         class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"

src/app/modules/admin/bank/withdraw/withdraw.module.ts

@@ -7,11 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatRippleModule } from '@angular/material/core';
 import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -34,11 +35,12 @@ import { withdrawRoutes } from './withdraw.routing';
     MatInputModule,
     MatPaginatorModule,
     MatProgressBarModule,
-    MatRippleModule,
     MatSortModule,
     MatSelectModule,
-    MatTooltipModule,
     MatCheckboxModule,
+    MatTooltipModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class WithdrawModule {}

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

@@ -28,34 +28,58 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
-      <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>
+      <!-- Search -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <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 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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <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
+        fxFlex
+        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
+      >
+        <mat-icon
+          class="icon-size-5"
+          matPrefix
+          [svgIcon]="'heroicons_solid:search'"
+        ></mat-icon>
+        <input
+          matInput
+          [formControl]="searchInputControl"
+          [autocomplete]="'off'"
+          [placeholder]="'Search user'"
+        />
       </mat-form-field>
-      <!-- Search button -->
       <button
         fxFlex
         mat-flat-button

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

@@ -11,6 +11,8 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -37,6 +39,8 @@ import { customerRoutes } from './customer.routing';
     MatSelectModule,
     MatGridListModule,
     MatCheckboxModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class CustomerModule {}

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

@@ -28,34 +28,58 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
-      <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>
+      <!-- Search -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <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 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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <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
+        fxFlex
+        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
+      >
+        <mat-icon
+          class="icon-size-5"
+          matPrefix
+          [svgIcon]="'heroicons_solid:search'"
+        ></mat-icon>
+        <input
+          matInput
+          [formControl]="searchInputControl"
+          [autocomplete]="'off'"
+          [placeholder]="'Search user'"
+        />
       </mat-form-field>
-      <!-- Search button -->
       <button
         fxFlex
         mat-flat-button

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

@@ -11,6 +11,8 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -37,6 +39,8 @@ import { messageRoutes } from './message.routing';
     MatSelectModule,
     MatGridListModule,
     MatCheckboxModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class MessageModule {}

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

@@ -17,42 +17,68 @@
       <button mat-icon-button (click)="__onClickSearch()">
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
       </button>
-      <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"
+    </div>
+  </div>
+  <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 -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
+      <mat-form-field
+        fxFlex
+        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
       >
-        <!-- Actions -->
-        <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-          <!-- Search -->
-          <mat-form-field
-            fxFlex
-            class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
-          >
-            <mat-icon
-              class="icon-size-5"
-              matPrefix
-              [svgIcon]="'heroicons_solid:search'"
-            ></mat-icon>
-            <input
-              matInput
-              [formControl]="searchInputControl"
-              [autocomplete]="'off'"
-              [placeholder]="'Search ID'"
-            />
-          </mat-form-field>
-          <!-- Add user button -->
-          <button
-            fxFlex
-            mat-flat-button
-            style="position: fixed; margin-top: 4px"
-            [color]="'primary'"
-            (click)="__createProduct()"
-          >
-            <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-            <span class="ml-2 mr-1">Search</span>
-          </button>
-        </div>
-      </div>
+        <mat-icon
+          class="icon-size-5"
+          matPrefix
+          [svgIcon]="'heroicons_solid:search'"
+        ></mat-icon>
+        <input
+          matInput
+          [formControl]="searchInputControl"
+          [autocomplete]="'off'"
+          [placeholder]="'Search ID'"
+        />
+      </mat-form-field>
+      <!-- Add user button -->
+      <button
+        fxFlex
+        mat-flat-button
+        style="position: fixed; margin-top: 4px"
+        [color]="'primary'"
+        (click)="__createProduct()"
+      >
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        <span class="ml-2 mr-1">Search</span>
+      </button>
     </div>
   </div>
   <!-- Main -->

src/app/modules/admin/member/coupon-log/coupon-log.module.ts

@@ -7,14 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatRippleModule } from '@angular/material/core';
 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 { 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';
 
@@ -37,14 +34,11 @@ import { CouponLogRoutes } from './coupon-log.routing';
     MatInputModule,
     MatPaginatorModule,
     MatProgressBarModule,
-    MatRippleModule,
     MatSortModule,
     MatSelectModule,
-    MatTooltipModule,
     MatGridListModule,
-    MatSlideToggleModule,
-    MatRadioModule,
-    MatCheckboxModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class CouponLogModule {}

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

@@ -17,42 +17,68 @@
       <button mat-icon-button (click)="__onClickSearch()">
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
       </button>
-      <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"
+    </div>
+  </div>
+  <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 -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
+      <mat-form-field
+        fxFlex
+        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
       >
-        <!-- Actions -->
-        <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-          <!-- Search -->
-          <mat-form-field
-            fxFlex
-            class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
-          >
-            <mat-icon
-              class="icon-size-5"
-              matPrefix
-              [svgIcon]="'heroicons_solid:search'"
-            ></mat-icon>
-            <input
-              matInput
-              [formControl]="searchInputControl"
-              [autocomplete]="'off'"
-              [placeholder]="'Search ID'"
-            />
-          </mat-form-field>
-          <!-- Add user button -->
-          <button
-            fxFlex
-            mat-flat-button
-            style="position: fixed; margin-top: 4px"
-            [color]="'primary'"
-            (click)="__createProduct()"
-          >
-            <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-            <span class="ml-2 mr-1">Search</span>
-          </button>
-        </div>
-      </div>
+        <mat-icon
+          class="icon-size-5"
+          matPrefix
+          [svgIcon]="'heroicons_solid:search'"
+        ></mat-icon>
+        <input
+          matInput
+          [formControl]="searchInputControl"
+          [autocomplete]="'off'"
+          [placeholder]="'Search ID'"
+        />
+      </mat-form-field>
+      <!-- Add user button -->
+      <button
+        fxFlex
+        mat-flat-button
+        style="position: fixed; margin-top: 4px"
+        [color]="'primary'"
+        (click)="__createProduct()"
+      >
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        <span class="ml-2 mr-1">Search</span>
+      </button>
     </div>
   </div>
 

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

@@ -10,6 +10,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -35,6 +37,8 @@ import { CouponMoneyLogRoutes } from './coupon-money-log.routing';
     MatSortModule,
     MatSelectModule,
     MatGridListModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class CouponMoneyLogModule {}

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

@@ -17,70 +17,96 @@
       <button mat-icon-button (click)="__onClickSearch()">
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
       </button>
-      <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"
+    </div>
+  </div>
+  <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 -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
+        <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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
+        <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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
+        <mat-select placeholder="내림차순">
+          <mat-option value="">내림차순</mat-option>
+          <mat-option value="">오름차순</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <!-- Search -->
+      <mat-form-field
+        fxFlex
+        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
       >
-        <!-- Actions -->
-        <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-          <!-- SelectBox -->
-          <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-            <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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-            <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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-            <mat-select placeholder="내림차순">
-              <mat-option value="">내림차순</mat-option>
-              <mat-option value="">오름차순</mat-option>
-            </mat-select>
-          </mat-form-field>
-          <!-- Search -->
-          <mat-form-field
-            fxFlex
-            class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
-          >
-            <mat-icon
-              class="icon-size-5"
-              matPrefix
-              [svgIcon]="'heroicons_solid:search'"
-            ></mat-icon>
-            <input
-              matInput
-              [formControl]="searchInputControl"
-              [autocomplete]="'off'"
-              [placeholder]="'Search user'"
-            />
-          </mat-form-field>
-          <!-- Add user button -->
-          <button
-            fxFlex
-            mat-flat-button
-            style="position: fixed; margin-top: 4px"
-            [color]="'primary'"
-            (click)="__createProduct()"
-          >
-            <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-            <span class="ml-2 mr-1">Search</span>
-          </button>
-        </div>
-      </div>
+        <mat-icon
+          class="icon-size-5"
+          matPrefix
+          [svgIcon]="'heroicons_solid:search'"
+        ></mat-icon>
+        <input
+          matInput
+          [formControl]="searchInputControl"
+          [autocomplete]="'off'"
+          [placeholder]="'Search user'"
+        />
+      </mat-form-field>
+      <!-- Add user button -->
+      <button
+        fxFlex
+        mat-flat-button
+        style="position: fixed; margin-top: 4px"
+        [color]="'primary'"
+        (click)="__createProduct()"
+      >
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        <span class="ml-2 mr-1">Search</span>
+      </button>
     </div>
   </div>
   <!-- Main -->

src/app/modules/admin/member/coupon/coupon.module.ts

@@ -10,6 +10,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -35,6 +37,8 @@ import { CouponRoutes } from './coupon.routing';
     MatSortModule,
     MatSelectModule,
     MatGridListModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class CouponModule {}

src/app/modules/admin/member/unconnected/components/list.component.html

@@ -12,28 +12,9 @@
     <!-- 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 -->
-      <!-- <div>
-        <span>총회원수:<span style="color: red">38</span>명</span>&nbsp;&nbsp;
-        <span>진행중금액:<span style="color: red">0</span>원</span>&nbsp;&nbsp;
-        <span>총 보유머니:<span style="color: red">21,437,873</span>원</span
-        >&nbsp;&nbsp;
-        <span>총 콤프:<span style="color: red">394,860</span>원</span
-        >&nbsp;&nbsp;
-        <span>총 합계:<span style="color: blue">21,832,733</span>원</span>
-      </div> -->
-      <button mat-icon-button (click)="__onClickSearch()">
-        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-      </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"
-  >
-    <!-- Buttons -->
+  <div class="flex items-center mt-2 mb-2 ml-6">
     <div>
       <button mat-flat-button [color]="'primary'">15일</button>
       <button mat-flat-button [color]="'primary'">30일</button>
@@ -42,102 +23,6 @@
       <button mat-flat-button [color]="'primary'">120일</button>
       <button mat-flat-button [color]="'primary'">가입후 미접속</button>
     </div>
-    <!-- Actions -->
-    <!-- <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0"> -->
-    <!-- SelectBox -->
-    <!-- <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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
-    <!-- Search -->
-    <!-- <mat-form-field
-        fxFlex
-        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
-      >
-        <mat-icon
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
-        <input
-          matInput
-          [formControl]="searchInputControl"
-          [autocomplete]="'off'"
-          [placeholder]="'Search user'"
-        />
-      </mat-form-field>
-      Add user button
-      <button
-        mat-flat-button
-        [color]="'primary'"
-        fxFlex
-        (click)="__createProduct()"
-      >
-        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <span class="ml-2 mr-1">Search</span>
-      </button>
-    </div> -->
   </div>
 
   <!-- Main -->

src/app/modules/admin/member/user/components/list.component.html

@@ -38,6 +38,19 @@
     </mat-form-field>
     <button mat-flat-button [color]="'primary'">메모저장</button>
   </div>
+  <div class="flex items-center mt-2 mb-2 ml-6">
+    <div>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        카지노머니확인
+      </button>
+    </div>
+    <div>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        엑셀저장
+      </button>
+    </div>
+  </div>
+  <hr style="margin: 7px 0px" />
 
   <!-- Search -->
   <div
@@ -46,7 +59,33 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
+      <!-- Search -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="리스트수">
           <mat-option value="40">40</mat-option>
@@ -319,59 +358,6 @@
                 </div>
               </ng-container>
             </ng-container>
-            <div>
-              <!-- <div>
-                
-              </div> -->
-              <!-- <div
-                class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
-              >
-                
-              </div> -->
-
-              <button
-                mat-flat-button
-                class="bet-mat-small-8"
-                [color]="'primary'"
-              >
-                정상
-              </button>
-              <button
-                mat-flat-button
-                class="bet-mat-small-8"
-                [color]="'primary'"
-              >
-                대기
-              </button>
-              <button
-                mat-flat-button
-                class="bet-mat-small-8"
-                [color]="'primary'"
-              >
-                탈퇴
-              </button>
-              <button
-                mat-flat-button
-                class="bet-mat-small-8"
-                [color]="'primary'"
-              >
-                휴면
-              </button>
-              <button
-                mat-flat-button
-                class="bet-mat-small-8"
-                [color]="'primary'"
-              >
-                블랙
-              </button>
-              <button
-                mat-flat-button
-                class="bet-mat-small-8"
-                [color]="'primary'"
-              >
-                정지
-              </button>
-            </div>
           </div>
 
           <mat-paginator
@@ -394,5 +380,40 @@
         </div>
       </ng-template>
     </div>
+    <div class="mt-2 mb-2 ml-6">
+      <div>
+        <div>
+          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+            정상
+          </button>
+        </div>
+        <div>
+          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+            대기
+          </button>
+        </div>
+        <div>
+          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+            탈퇴
+          </button>
+        </div>
+        <div>
+          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+            휴면
+          </button>
+        </div>
+        <div>
+          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+            블랙
+          </button>
+        </div>
+        <div>
+          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+            정지
+          </button>
+        </div>
+      </div>
+    </div>
+    <hr style="margin: 7px 0px" />
   </div>
 </div>

src/app/modules/admin/member/user/user.module.ts

@@ -19,6 +19,8 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatCardModule } from '@angular/material/card';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { FuseCardModule } from '@fuse/components/card';
 
@@ -56,6 +58,8 @@ import { userRoutes } from 'app/modules/admin/member/user/user.routing';
     MatDividerModule,
     MatDialogModule,
     MatCardModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
 
     FuseCardModule,
   ],

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

@@ -28,40 +28,32 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <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>
-      <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>
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <!-- Search button -->
       <mat-form-field
         fxFlex

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

@@ -10,6 +10,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -35,6 +37,8 @@ import { compLogRoutes } from './comp-log.routing';
     MatSortModule,
     MatSelectModule,
     MatGridListModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class CompLogModule {}

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

@@ -30,7 +30,33 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
+      <!-- Search -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="내용">
           <mat-option value="">내용</mat-option>
@@ -50,7 +76,6 @@
           <mat-option value="">관리자회수</mat-option>
         </mat-select>
       </mat-form-field>
-      <!-- Search -->
       <mat-form-field
         fxFlex
         class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
@@ -69,20 +94,17 @@
       </mat-form-field>
       <!-- Add user button -->
       <button
-        fxFlex
         mat-flat-button
-        style="position: fixed; margin-top: 4px"
         [color]="'primary'"
+        fxFlex
         (click)="__createProduct()"
       >
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
         <span class="ml-2 mr-1">Search</span>
       </button>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          관리자지급/회수
-        </button>
-      </div>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        관리자지급/회수
+      </button>
     </div>
   </div>
   <!-- Main -->

src/app/modules/admin/report/daily-partner/components/list.component.html

@@ -26,33 +26,9 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
-      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <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 -->
-      <!-- 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'"
-      >
+      <!-- Card inception -->
+      <mat-form-field [floatLabel]="'always'">
         <input
           matInput
           [matDatepicker]="picker1"
@@ -64,13 +40,8 @@
         ></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'"
-      >
+      <!-- Card expiration -->
+      <mat-form-field [floatLabel]="'always'">
         <input
           matInput
           [matDatepicker]="picker2"
@@ -82,19 +53,30 @@
         ></mat-datepicker-toggle>
         <mat-datepicker #picker2></mat-datepicker>
       </mat-form-field>
-    </div>
-
-    <div>
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
+        <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>
+      <!-- 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>
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         어제
       </button>
-    </div>
-    <div>
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         오늘
       </button>
-    </div>
-    <div>
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         7일
       </button>

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

@@ -26,7 +26,33 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
+      <!-- Search -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="전체">
           <mat-option value="">전체</mat-option>
@@ -35,23 +61,6 @@
           <mat-option value="">슬롯</mat-option>
         </mat-select>
       </mat-form-field>
-      <!-- Search -->
-      <mat-form-field
-        fxFlex
-        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
-      >
-        <mat-icon
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
-        <input
-          matInput
-          [formControl]="searchInputControl"
-          [autocomplete]="'off'"
-          [placeholder]="'Search user'"
-        />
-      </mat-form-field>
       <!-- Add user button -->
       <button
         mat-flat-button
@@ -62,31 +71,21 @@
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
         <span class="ml-2 mr-1">Search</span>
       </button>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          검색하기
-        </button>
-      </div>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          어제
-        </button>
-      </div>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          오늘
-        </button>
-      </div>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          7일
-        </button>
-      </div>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          엑셀저장
-        </button>
-      </div>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        검색하기
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        어제
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        오늘
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        7일
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        엑셀저장
+      </button>
     </div>
   </div>
 

src/app/modules/admin/report/daily/daily.module.ts

@@ -10,6 +10,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -35,6 +37,8 @@ import { dailyRoutes } from './daily.routing';
     MatSortModule,
     MatSelectModule,
     MatGridListModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class DailyModule {}

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

@@ -28,40 +28,39 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <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>
-      <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>
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
+      <!-- SelectBox -->
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
+        <mat-select placeholder="검색항목">
+          <mat-option value="">아이피</mat-option>
+          <mat-option value="">내용</mat-option>
+        </mat-select>
+      </mat-form-field>
       <!-- Search button -->
       <mat-form-field
         fxFlex

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

@@ -26,7 +26,33 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
+      <!-- Search -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="검색어">
           <mat-option value="">검색어</mat-option>
@@ -37,7 +63,6 @@
           <mat-option value="">관리자회수</mat-option>
         </mat-select>
       </mat-form-field>
-      <!-- Search -->
       <mat-form-field
         fxFlex
         class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
@@ -56,23 +81,17 @@
       </mat-form-field>
       <!-- Add user button -->
       <button
-        fxFlex
         mat-flat-button
-        style="position: fixed; margin-top: 4px"
         [color]="'primary'"
+        fxFlex
         (click)="__createProduct()"
       >
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
         <span class="ml-2 mr-1">Search</span>
       </button>
-    </div>
-
-    <div>
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         관리자지급/회수
       </button>
-    </div>
-    <div>
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         파트너지급/회수
       </button>

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

@@ -11,6 +11,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -37,6 +38,7 @@ import { moneyLogRoutes } from './money-log.routing';
     MatSelectModule,
     MatGridListModule,
     MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class MoneyLogModule {}

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

@@ -26,13 +26,38 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <!-- SelectBox -->
+      <!-- Search -->
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="아이디">
           <mat-option value="">아이디</mat-option>
         </mat-select>
       </mat-form-field>
-      <!-- Search -->
       <mat-form-field
         fxFlex
         class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"

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

@@ -10,6 +10,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -35,6 +37,8 @@ import { paymentLogRoutes } from './payment-log.routing';
     MatSortModule,
     MatSelectModule,
     MatGridListModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class PaymentLogModule {}

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

@@ -24,12 +24,10 @@
     *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"
   >
-    <!-- Card inception -->
-    <!-- <div class="col-span-2 sm:col-span-1">
-      <mat-form-field
-        class="fuse-mat-no-subscript w-full"
-        [floatLabel]="'always'"
-      >
+    <!-- Actions -->
+    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+      <!-- Card inception -->
+      <mat-form-field [floatLabel]="'always'">
         <input
           matInput
           [matDatepicker]="picker1"
@@ -41,13 +39,8 @@
         ></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'"
-      >
+      <!-- Card expiration -->
+      <mat-form-field [floatLabel]="'always'">
         <input
           matInput
           [matDatepicker]="picker2"
@@ -59,9 +52,6 @@
         ></mat-datepicker-toggle>
         <mat-datepicker #picker2></mat-datepicker>
       </mat-form-field>
-    </div> -->
-    <!-- Actions -->
-    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
       <!-- Add user button -->
       <button
         mat-flat-button
@@ -72,25 +62,17 @@
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
         <span class="ml-2 mr-1">Search</span>
       </button>
-    </div>
-
-    <div>
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         어제
       </button>
-    </div>
-    <div>
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         오늘
       </button>
-    </div>
-    <div>
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         7일
       </button>
     </div>
   </div>
-
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->

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

@@ -11,6 +11,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -37,6 +38,7 @@ import { statisticsRoutes } from './statistics.routing';
     MatSelectModule,
     MatGridListModule,
     MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class StatisticsModule {}

src/app/modules/admin/report/today-bet/components/list.component.html

@@ -26,6 +26,32 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <!-- SelectBox -->
       <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="전체">
@@ -41,42 +67,6 @@
           <mat-option value="">닉네임</mat-option>
         </mat-select>
       </mat-form-field>
-      <!-- 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>
       <!-- Search -->
       <mat-form-field
         fxFlex
@@ -104,31 +94,18 @@
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
         <span class="ml-2 mr-1">Search</span>
       </button>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          검색하기
-        </button>
-      </div>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          어제
-        </button>
-      </div>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          오늘
-        </button>
-      </div>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          7일
-        </button>
-      </div>
-      <div>
-        <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-          엑셀저장
-        </button>
-      </div>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        검색하기
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        어제
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        오늘
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        7일
+      </button>
     </div>
   </div>
 

src/app/modules/admin/report/user-session/components/list.component.html

@@ -28,40 +28,32 @@
   >
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-      <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>
-      <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>
+      <!-- Card inception -->
+      <mat-form-field [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>
+      <!-- Card expiration -->
+      <mat-form-field [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>
       <!-- Search button -->
       <mat-form-field
         fxFlex