kaimyo-management/src/app/pages/dashboard/dashboard.html

<app-header></app-header>

<div class="dashboard-page">
  <app-side-menu></app-side-menu>

  <main class="dashboard-main">
    <section class="dashboard-panel">
      <div class="page-head">
        <div>
          <h1>ホーム</h1>
        </div>
        <div class="date-pill">{{ todayLabel }}</div>
      </div>

      <section class="overview" aria-label="概要">
        <a class="card" href="#">
          <div class="card-label">今週の法要</div>
          <div class="metric"><strong>{{ weeklyMemorialCount }}</strong><span>件</span></div>
          <p class="card-text">
            本日 {{ todayMemorialCount }}件、明日以降 {{ upcomingWeeklyMemorialCount }}件。
          </p>
        </a>

        <a class="card" href="#">
          <div class="card-label">今月の年忌法要</div>
          <div class="metric"><strong>{{ monthlyMemorialCount }}</strong><span>名</span></div>
        </a>

        <div class="search-card">
          <div class="search-head">
            <div class="search-label">まとめて検索</div>
            <div class="search-title">檀家・家族・故人を探す</div>
          </div>
          <input
            class="search-input"
            type="search"
            [(ngModel)]="searchKeyword"
            placeholder="氏名、ふりがな、住所、戒名で検索"
            aria-label="まとめて検索"
            (keydown.enter)="searchAll()"
          />
          <button class="search-button" type="button" (click)="searchAll()">検索</button>
        </div>
      </section>

      <section class="section">
        <div class="section-head">
          <div>
            <h2>最近開いた檀家・世帯</h2>
          </div>
        </div>

        <div class="recent-table" role="table" aria-label="最近開いた檀家">
          <div class="recent-row recent-row-head" role="row">
            <div class="cell" role="columnheader">施主名・ふりがな</div>
            <div class="cell" role="columnheader">住所</div>
            <div class="cell" role="columnheader">次の法要</div>
            <div class="cell" role="columnheader">最終更新</div>
          </div>

          @if (recentDankaList.length > 0) {
            @for (recent of recentDankaList; track recent.danka.id) {
              <a class="recent-row" [routerLink]="['/danka-detail', recent.danka.id]" role="row">
                <div class="cell" role="cell">
                  <p class="recent-name">{{ recent.danka.householder }}</p>
                  <p class="recent-sub">{{ recent.danka.householderFurigana || 'ふりがな未登録' }}</p>
                </div>
                <div class="cell" role="cell">{{ recent.danka.address }}</div>
                <div class="cell" role="cell">{{ recent.nextMemorialLabel }}</div>
                <div class="cell" role="cell">{{ recent.updatedAtLabel }}</div>
              </a>
            }
          } @else {
            <div class="recent-row" role="row">
              <div class="cell muted" role="cell">表示できる檀家・世帯はありません</div>
              <div class="cell muted" role="cell">-</div>
              <div class="cell muted" role="cell">-</div>
              <div class="cell muted" role="cell">-</div>
            </div>
          }
        </div>
      </section>

      <section class="section">
        <div class="section-head">
          <div>
            <h2>近日の法要・命日</h2>
          </div>
        </div>

        <div class="upcoming-list">
          @if (upcomingMemorials.length > 0) {
            @for (memorial of upcomingMemorials; track memorial.id) {
              <a
                class="upcoming-item"
                [class.important]="memorial.dateLabel === '今日'"
                [routerLink]="['/danka-detail', memorial.dankaId]"
                [queryParams]="{tab: 'kakocho'}"
              >
                <div class="upcoming-date">{{ memorial.dateLabel }}</div>
                <div class="upcoming-main">
                  <div class="upcoming-title">{{ memorial.title }}</div>
                  <div class="upcoming-sub">{{ memorial.subText }}</div>
                </div>
                <div class="upcoming-type">{{ memorial.type }}</div>
                <div class="upcoming-status">{{ memorial.status }}</div>
              </a>
            }
          } @else {
            <div class="upcoming-item">
              <div class="upcoming-date">なし</div>
              <div class="upcoming-main">
                <div class="upcoming-title">近日の法要・命日はありません</div>
                <div class="upcoming-sub">過去帳に登録された命日から自動表示します。</div>
              </div>
              <div class="upcoming-type">-</div>
              <div class="upcoming-status">-</div>
            </div>
          }
        </div>
      </section>
    </section>
  </main>
</div>