From ce357128a92d139bbadc980be255bc82bc50c18c Mon Sep 17 00:00:00 2001
From: JUNG YI DAM <breeze@loafle.com>
Date: Tue, 26 Jul 2022 08:48:40 +0000
Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../coupon-log/components/list.component.html | 157 +++++++-------
 .../components/list.component.html            | 202 +++++++++---------
 .../coupon/components/list.component.html     | 201 +++++++++--------
 3 files changed, 277 insertions(+), 283 deletions(-)

diff --git a/src/app/modules/admin/member/coupon-log/components/list.component.html b/src/app/modules/admin/member/coupon-log/components/list.component.html
index 9b96452..a72f079 100644
--- a/src/app/modules/admin/member/coupon-log/components/list.component.html
+++ b/src/app/modules/admin/member/coupon-log/components/list.component.html
@@ -56,89 +56,88 @@
           </button>
         </div>
       </div>
-
-      <!-- Main -->
-      <div class="flex flex-auto overflow-hidden">
-        <!-- Products list -->
-        <div
-          class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
-        >
-          <ng-container *ngIf="couponLogs$ | async as couponLogs">
-            <ng-container *ngIf="couponLogs.length > 0; else noCouponLog">
-              <div class="grid">
-                <!-- Header -->
-                <div
-                  class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
-                >
-                  <div>번호</div>
-                  <div>발행아이디</div>
-                  <div>쿠폰그룹번호</div>
-                  <div class="hidden sm:block">쿠폰제목</div>
-                  <div class="hidden md:block">이전쿠폰금액</div>
-                  <div class="hidden md:block">발행쿠폰금액</div>
-                  <div class="hidden md:block">이후쿠폰금액</div>
-                  <div class="hidden lg:block">내용</div>
-                  <div class="hidden lg:block">발행시간</div>
-                </div>
-                <!-- Rows -->
-                <ng-container *ngIf="couponLogs$ | async as couponLogs">
-                  <ng-container
-                    *ngFor="let couponLog of couponLogs; trackBy: __trackByFn"
-                  >
-                    <div
-                      class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-                    >
-                      <div>{{ couponLog.idx }}</div>
-                      <div>
-                        {{ couponLog.issuedCouponId }}
-                      </div>
-                      <div>
-                        {{ couponLog.couponGroupNumber }}
-                      </div>
-                      <div class="hidden sm:block">
-                        {{ couponLog.couponTitle }}
-                      </div>
-                      <div class="hidden md:block">
-                        {{ couponLog.couponBeforeMoney }}
-                      </div>
-                      <div class="hidden md:block">
-                        {{ couponLog.issuedCouponMoney }}
-                      </div>
-                      <div class="hidden md:block">
-                        {{ couponLog.couponAfterMoney }}
-                      </div>
-                      <div class="hidden lg:block">
-                        {{ couponLog.couponContents }}
-                      </div>
-                      <div class="hidden lg:block">
-                        {{ couponLog.issuedCouponDate }}
-                      </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 #noCouponLog>
+    </div>
+  </div>
+  <!-- Main -->
+  <div class="flex flex-auto overflow-hidden">
+    <!-- Products list -->
+    <div
+      class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
+    >
+      <ng-container *ngIf="couponLogs$ | async as couponLogs">
+        <ng-container *ngIf="couponLogs.length > 0; else noCouponLog">
+          <div class="grid">
+            <!-- Header -->
             <div
-              class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+              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"
             >
-              There are no data!
+              <div>번호</div>
+              <div>발행아이디</div>
+              <div>쿠폰그룹번호</div>
+              <div class="hidden sm:block">쿠폰제목</div>
+              <div class="hidden md:block">이전쿠폰금액</div>
+              <div class="hidden md:block">발행쿠폰금액</div>
+              <div class="hidden md:block">이후쿠폰금액</div>
+              <div class="hidden lg:block">내용</div>
+              <div class="hidden lg:block">발행시간</div>
             </div>
-          </ng-template>
+            <!-- Rows -->
+            <ng-container *ngIf="couponLogs$ | async as couponLogs">
+              <ng-container
+                *ngFor="let couponLog of couponLogs; trackBy: __trackByFn"
+              >
+                <div
+                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                >
+                  <div>{{ couponLog.idx }}</div>
+                  <div>
+                    {{ couponLog.issuedCouponId }}
+                  </div>
+                  <div>
+                    {{ couponLog.couponGroupNumber }}
+                  </div>
+                  <div class="hidden sm:block">
+                    {{ couponLog.couponTitle }}
+                  </div>
+                  <div class="hidden md:block">
+                    {{ couponLog.couponBeforeMoney }}
+                  </div>
+                  <div class="hidden md:block">
+                    {{ couponLog.issuedCouponMoney }}
+                  </div>
+                  <div class="hidden md:block">
+                    {{ couponLog.couponAfterMoney }}
+                  </div>
+                  <div class="hidden lg:block">
+                    {{ couponLog.couponContents }}
+                  </div>
+                  <div class="hidden lg:block">
+                    {{ couponLog.issuedCouponDate }}
+                  </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 #noCouponLog>
+        <div
+          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+        >
+          There are no data!
         </div>
-      </div>
+      </ng-template>
     </div>
   </div>
 </div>
diff --git a/src/app/modules/admin/member/coupon-money-log/components/list.component.html b/src/app/modules/admin/member/coupon-money-log/components/list.component.html
index 3858274..7cf958a 100644
--- a/src/app/modules/admin/member/coupon-money-log/components/list.component.html
+++ b/src/app/modules/admin/member/coupon-money-log/components/list.component.html
@@ -56,114 +56,110 @@
           </button>
         </div>
       </div>
+    </div>
+  </div>
 
-      <!-- Main -->
-      <div class="flex flex-auto overflow-hidden">
-        <!-- Products list -->
-        <div
-          class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
-        >
-          <ng-container *ngIf="couponMoneyLogs$ | async as couponMoneyLogs">
-            <ng-container
-              *ngIf="couponMoneyLogs.length > 0; else noCouponMoneyLog"
-            >
-              <div class="grid">
-                <!-- Header -->
-                <div
-                  class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
-                >
-                  <div>번호</div>
-                  <div>비고</div>
-                  <div>정보</div>
-                  <div class="hidden sm:block">아이디</div>
-                  <div class="hidden md:block">이전금액</div>
-                  <div class="hidden md:block">변동금액</div>
-                  <div class="hidden md:block">이후금액</div>
-                  <div class="hidden lg:block">내용</div>
-                  <div class="hidden lg:block">등록시간</div>
-                </div>
-                <!-- Rows -->
-                <ng-container
-                  *ngIf="couponMoneyLogs$ | async as couponMoneyLogs"
-                >
-                  <ng-container
-                    *ngFor="
-                      let couponMoneyLog of couponMoneyLogs;
-                      trackBy: __trackByFn
-                    "
-                  >
-                    <div
-                      class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-                    >
-                      <div>{{ couponMoneyLog.idx }}</div>
-                      <div>
-                        {{ couponMoneyLog.giveCouponRank
-                        }}<mat-icon svgIcon="play-outline"></mat-icon
-                        >{{ couponMoneyLog.takeCouponRank }}지급
-                      </div>
-                      <div>
-                        {{ couponMoneyLog.giveCouponRank
-                        }}{{ couponMoneyLog.giveCouponId }}
-                        <mat-icon svgIcon="play-outline"></mat-icon>
-                        {{ couponMoneyLog.takeCouponRank
-                        }}{{ couponMoneyLog.takeCouponId }}
-                      </div>
-                      <div class="hidden sm:block">
-                        {{ couponMoneyLog.takeCouponRank
-                        }}{{ couponMoneyLog.takeCouponId }}
-                        <hr style="margin: 7px 0px" />
-                        {{ couponMoneyLog.giveCouponRank
-                        }}{{ couponMoneyLog.giveCouponId }}
-                      </div>
-                      <div class="hidden md:block">
-                        {{ couponMoneyLog.takeCouponBeforeMoney }}
-                        <hr style="margin: 7px 0px" />
-                        {{ couponMoneyLog.giveCouponBeforeMoney }}
-                      </div>
-                      <div class="hidden md:block">
-                        {{ couponMoneyLog.takeCouponVarianceMoney }}
-                        <hr style="margin: 7px 0px" />
-                        {{ couponMoneyLog.giveCouponVarianceMoney }}
-                      </div>
-                      <div class="hidden md:block">
-                        {{ couponMoneyLog.takeCouponAfterMoney }}
-                        <hr style="margin: 7px 0px" />
-                        {{ couponMoneyLog.giveCouponAfterMoney }}
-                      </div>
-                      <div class="hidden lg:block">
-                        {{ couponMoneyLog.couponContents }}
-                      </div>
-                      <div class="hidden lg:block">
-                        {{ couponMoneyLog.takeCouponRegistrationDate }}
-                        <hr style="margin: 7px 0px" />
-                        {{ couponMoneyLog.giveCouponRegistrationDate }}
-                      </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 #noCouponMoneyLog>
+  <!-- Main -->
+  <div class="flex flex-auto overflow-hidden">
+    <!-- Products list -->
+    <div
+      class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
+    >
+      <ng-container *ngIf="couponMoneyLogs$ | async as couponMoneyLogs">
+        <ng-container *ngIf="couponMoneyLogs.length > 0; else noCouponMoneyLog">
+          <div class="grid">
+            <!-- Header -->
             <div
-              class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+              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"
             >
-              There are no data!
+              <div>번호</div>
+              <div>비고</div>
+              <div>정보</div>
+              <div class="hidden sm:block">아이디</div>
+              <div class="hidden md:block">이전금액</div>
+              <div class="hidden md:block">변동금액</div>
+              <div class="hidden md:block">이후금액</div>
+              <div class="hidden lg:block">내용</div>
+              <div class="hidden lg:block">등록시간</div>
             </div>
-          </ng-template>
+            <!-- Rows -->
+            <ng-container *ngIf="couponMoneyLogs$ | async as couponMoneyLogs">
+              <ng-container
+                *ngFor="
+                  let couponMoneyLog of couponMoneyLogs;
+                  trackBy: __trackByFn
+                "
+              >
+                <div
+                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                >
+                  <div>{{ couponMoneyLog.idx }}</div>
+                  <div>
+                    {{ couponMoneyLog.giveCouponRank
+                    }}<mat-icon svgIcon="play-outline"></mat-icon
+                    >{{ couponMoneyLog.takeCouponRank }}지급
+                  </div>
+                  <div>
+                    {{ couponMoneyLog.giveCouponRank
+                    }}{{ couponMoneyLog.giveCouponId }}
+                    <mat-icon svgIcon="play-outline"></mat-icon>
+                    {{ couponMoneyLog.takeCouponRank
+                    }}{{ couponMoneyLog.takeCouponId }}
+                  </div>
+                  <div class="hidden sm:block">
+                    {{ couponMoneyLog.takeCouponRank
+                    }}{{ couponMoneyLog.takeCouponId }}
+                    <hr style="margin: 7px 0px" />
+                    {{ couponMoneyLog.giveCouponRank
+                    }}{{ couponMoneyLog.giveCouponId }}
+                  </div>
+                  <div class="hidden md:block">
+                    {{ couponMoneyLog.takeCouponBeforeMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ couponMoneyLog.giveCouponBeforeMoney }}
+                  </div>
+                  <div class="hidden md:block">
+                    {{ couponMoneyLog.takeCouponVarianceMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ couponMoneyLog.giveCouponVarianceMoney }}
+                  </div>
+                  <div class="hidden md:block">
+                    {{ couponMoneyLog.takeCouponAfterMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ couponMoneyLog.giveCouponAfterMoney }}
+                  </div>
+                  <div class="hidden lg:block">
+                    {{ couponMoneyLog.couponContents }}
+                  </div>
+                  <div class="hidden lg:block">
+                    {{ couponMoneyLog.takeCouponRegistrationDate }}
+                    <hr style="margin: 7px 0px" />
+                    {{ couponMoneyLog.giveCouponRegistrationDate }}
+                  </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 #noCouponMoneyLog>
+        <div
+          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+        >
+          There are no data!
         </div>
-      </div>
+      </ng-template>
     </div>
   </div>
 </div>
diff --git a/src/app/modules/admin/member/coupon/components/list.component.html b/src/app/modules/admin/member/coupon/components/list.component.html
index 0f025c8..0345c8e 100644
--- a/src/app/modules/admin/member/coupon/components/list.component.html
+++ b/src/app/modules/admin/member/coupon/components/list.component.html
@@ -84,111 +84,110 @@
           </button>
         </div>
       </div>
-
-      <!-- Main -->
-      <div class="flex flex-auto overflow-hidden">
-        <!-- Products list -->
-        <div
-          class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
-        >
-          <ng-container *ngIf="coupons$ | async as coupons">
-            <ng-container *ngIf="coupons.length > 0; else noCoupon">
-              <div class="grid">
-                <!-- Header -->
-                <div
-                  class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
-                >
-                  <div>그룹번호</div>
-                  <div>쿠폰시리얼번호</div>
-                  <div>
-                    생성아이디
-                    <hr style="margin: 7px 0px" />
-                    닉네임
-                  </div>
-                  <div>발행수</div>
-                  <div class="hidden sm:block">
-                    지급아이디
-                    <hr style="margin: 7px 0px" />
-                    닉네임
-                  </div>
-                  <div>금액</div>
-                  <div class="hidden md:block">
-                    쿠폰시작일
-                    <hr style="margin: 7px 0px" />
-                    쿠폰종료일
-                  </div>
-                  <div class="hidden md:block">사용여부</div>
-                  <div class="hidden md:block">등록일자</div>
-                </div>
-                <!-- Rows -->
-                <ng-container *ngIf="coupons$ | async as coupons">
-                  <ng-container
-                    *ngFor="let coupon of coupons; trackBy: __trackByFn"
-                  >
-                    <div
-                      class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-                    >
-                      <div>{{ coupon.couponGroupNumber }}</div>
-                      <div>{{ coupon.couponSerialNumber }}</div>
-                      <div>
-                        <div>
-                          {{ coupon.issuedCouponId }}
-                        </div>
-                        <hr style="margin: 7px 0px" />
-                        {{ coupon.issuedCouponNickname }}
-                      </div>
-                      <div>
-                        {{ coupon.issuedCouponMoney }}
-                      </div>
-                      <div>
-                        {{ coupon.issuedCoupons }}
-                      </div>
-                      <div class="hidden sm:block">
-                        {{ coupon.takeCouponId }}
-                        <hr style="margin: 7px 0px" />
-                        {{ coupon.takeCouponNickname }}
-                      </div>
-                      <div class="hidden md:block">
-                        {{ coupon.couponStartDate }}
-                        <hr style="margin: 7px 0px" />
-                        {{ coupon.couponFinishDate }}
-                      </div>
-                      <div class="hidden md:block">
-                        {{ coupon.useOrNot }}
-                      </div>
-                      <div class="hidden md:block">
-                        {{ coupon.issuedCouponDate }}
-                        <hr style="margin: 7px 0px" />
-                        {{ coupon.modifyCouponDate }}
-                        <hr style="margin: 7px 0px" />
-                        {{ coupon.useCouponDate }}
-                      </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 #noCoupon>
+    </div>
+  </div>
+  <!-- Main -->
+  <div class="flex flex-auto overflow-hidden">
+    <!-- Products list -->
+    <div
+      class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
+    >
+      <ng-container *ngIf="coupons$ | async as coupons">
+        <ng-container *ngIf="coupons.length > 0; else noCoupon">
+          <div class="grid">
+            <!-- Header -->
             <div
-              class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+              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"
             >
-              There are no data!
+              <div>그룹번호</div>
+              <div>쿠폰시리얼번호</div>
+              <div>
+                생성아이디
+                <hr style="margin: 7px 0px" />
+                닉네임
+              </div>
+              <div>발행수</div>
+              <div class="hidden sm:block">
+                지급아이디
+                <hr style="margin: 7px 0px" />
+                닉네임
+              </div>
+              <div>금액</div>
+              <div class="hidden md:block">
+                쿠폰시작일
+                <hr style="margin: 7px 0px" />
+                쿠폰종료일
+              </div>
+              <div class="hidden md:block">사용여부</div>
+              <div class="hidden md:block">등록일자</div>
             </div>
-          </ng-template>
+            <!-- Rows -->
+            <ng-container *ngIf="coupons$ | async as coupons">
+              <ng-container
+                *ngFor="let coupon of coupons; trackBy: __trackByFn"
+              >
+                <div
+                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                >
+                  <div>{{ coupon.couponGroupNumber }}</div>
+                  <div>{{ coupon.couponSerialNumber }}</div>
+                  <div>
+                    <div>
+                      {{ coupon.issuedCouponId }}
+                    </div>
+                    <hr style="margin: 7px 0px" />
+                    {{ coupon.issuedCouponNickname }}
+                  </div>
+                  <div>
+                    {{ coupon.issuedCouponMoney }}
+                  </div>
+                  <div>
+                    {{ coupon.issuedCoupons }}
+                  </div>
+                  <div class="hidden sm:block">
+                    {{ coupon.takeCouponId }}
+                    <hr style="margin: 7px 0px" />
+                    {{ coupon.takeCouponNickname }}
+                  </div>
+                  <div class="hidden md:block">
+                    {{ coupon.couponStartDate }}
+                    <hr style="margin: 7px 0px" />
+                    {{ coupon.couponFinishDate }}
+                  </div>
+                  <div class="hidden md:block">
+                    {{ coupon.useOrNot }}
+                  </div>
+                  <div class="hidden md:block">
+                    {{ coupon.issuedCouponDate }}
+                    <hr style="margin: 7px 0px" />
+                    {{ coupon.modifyCouponDate }}
+                    <hr style="margin: 7px 0px" />
+                    {{ coupon.useCouponDate }}
+                  </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 #noCoupon>
+        <div
+          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+        >
+          There are no data!
         </div>
-      </div>
+      </ng-template>
     </div>
   </div>
 </div>