kaimyo-management/src/app/pages/danka-detail/danka-detail.html

<app-header></app-header>

<div class="breadcrumb">
  ホーム &gt; 檀家（世帯） &gt; {{ danka?.householdName }}
</div>

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

  <main class="danka-detail-main">
    <section class="detail-panel">
      @if (danka) {
        <div class="page-title-row">
          <div>
            <h1>
              檀家（世帯）詳細 -
              @if (selectedTab === 'basic') {
                基本情報
              }
              @if (selectedTab === 'family') {
                家族
              }
              @if (selectedTab === 'kakocho') {
                過去帳
              }
              @if (selectedTab === 'familyTree') {
                家系図
              }
            </h1>

            <nav class="tab-list">
              <button
                type="button"
                class="tab-button"
                [class.active]="selectedTab === 'basic'"
                (click)="selectedTab = 'basic'"
              >
                基本情報
              </button>

              <button
                type="button"
                class="tab-button"
                [class.active]="selectedTab === 'family'"
                (click)="selectedTab = 'family'"
              >
                家族
              </button>

              <button
                type="button"
                class="tab-button"
                [class.active]="selectedTab === 'kakocho'"
                (click)="selectedTab = 'kakocho'"
              >
                過去帳
              </button>

              <button
                type="button"
                class="tab-button"
                [class.active]="selectedTab === 'familyTree'"
                (click)="selectedTab = 'familyTree'"
              >
                家系図
              </button>
            </nav>
          </div>
          @if (selectedTab === 'basic') {
          <button
            type="button"
            class="edit-button"
            [routerLink]="['/danka-edit', danka.id]"
          >
            編集
          </button>
          }

          @if (selectedTab === 'kakocho') {
          <button
            type="button"
            class="add-button"
            [routerLink]="['/kakocho-edit', danka.id]"
          >
            故人を登録
          </button>

          <button
            type="button"
            class="edit-button"
            [routerLink]="['/kakocho-edit', danka.id, kakocholist[0].id]"
          >
            編集
          </button>
          }

        </div>

        <section class="family-summary">
          @if (selectedTab === 'basic') {
          <div class="family-name-area">
            <p class="family-name">{{ danka.householdName }}</p>
            <p class="family-head">世帯主: {{ danka.householder }}</p>
          </div>

          <div class="family-address">
            <p>郵便番号 〒{{ danka.postalCode }}</p>
            <p>住所 {{ danka.address }}</p>
          </div>

          <button type="button" class="memo-button">
            回忌を見る
          </button>
          }

          @if (selectedTab === 'kakocho') {
          <div class="family-name-area">
            <p class="family-name">{{ danka.householdName }}の過去帳{{ kakocholist.length }} 名</p>
          </div>

          <button type="button" class="memo-button">
            年次法要を見る
          </button>
          }
        </section>

        @if (selectedTab === 'basic') {
          <div class="detail-content">
            <section class="basic-info-section">
              <div class="section-heading">
                <h2>基本情報</h2>
              </div>

              <div class="info-form">
                <div class="info-row">
                  <div class="info-label">世帯名</div>
                  <div class="info-value">{{ danka.householdName }}</div>
                </div>

                <div class="info-row">
                  <div class="info-label">世帯主</div>
                  <div class="info-value">{{ danka.householder }}</div>
                </div>

                <div class="info-row">
                  <div class="info-label">郵便番号</div>
                  <div class="info-value">{{ danka.postalCode }}</div>
                </div>

                <div class="info-row">
                  <div class="info-label">住所</div>
                  <div class="info-value">{{ danka.address }}</div>
                </div>

                <div class="info-row phone-row">
                  <div class="info-label">電話番号</div>

                  <div class="phone-table">
                    <div class="phone-header">
                      <div>番号</div>
                      <div>備考</div>
                    </div>

                    @for (phone of danka.phones; track $index) {
                      <div class="phone-item">
                        <div>{{ phone.tel }}</div>
                        <div>{{ phone.note }}</div>
                      </div>
                    }
                  </div>
                </div>
              </div>
            </section>

            <aside class="status-panel">
              <h2>この世帯の状況</h2>

              <div class="status-card-list">
                <button
                  type="button"
                  class="status-card"
                  (click)="selectedTab = 'family'"
                >
                  <p class="status-label">家族</p>
                  <p class="status-count">{{ families.length }} 名</p>
                  <p class="status-link">詳細へ</p>
                </button>

                <button
                  type="button"
                  class="status-card"
                  (click)="selectedTab = 'kakocho'"
                >
                  <p class="status-label">過去帳</p>
                  <p class="status-count">{{ kakocholist.length }}  名</p>
                  <p class="status-link">詳細へ</p>
                </button>
              </div>

              <section class="next-memorial">
                <h3>次の法要</h3>

                <div class="memorial-card">
                  <p class="memorial-title">佐藤 ハナ - 三回忌</p>
                  <p class="memorial-text">
                    対象年 2026 / 没年月日 2024-01-08
                  </p>
                </div>
              </section>

              <div class="status-button-list">
                <button
                  type="button"
                  class="status-button"
                  (click)="selectedTab = 'family'"
                >
                  家族を見る
                </button>

                <button
                  type="button"
                  class="status-button"
                  (click)="selectedTab = 'kakocho'"
                >
                  過去帳を見る
                </button>
              </div>
            </aside>
          </div>
        }

        @if (selectedTab === 'family') {
          <section class="family-tab-content">
            <div class="section-heading">
              <h2>家族情報</h2>
            </div>

            <section class="family-list-summary">
              <div>
                <p class="family-list-title">
                  {{ danka.householdName }}の家族 {{ families.length }}名
                </p>
              </div>

              <p class="family-list-head">
                ※ 世帯主：{{ danka.householder }}
              </p>
            </section>

            <section class="family-table-section">
              @if (families.length > 0) {
                <div class="family-table">
                  <div class="family-table-header">
                    <div>氏名</div>
                    <div>ふりがな</div>
                    <div>関係</div>
                    <div>年齢</div>
                    <div>生年月日</div>
                    <div>備考</div>
                  </div>

                  @for (family of families; track family.id) {
                    <div class="family-table-row">
                      <div class="family-person-name">
                        {{ family.name }}
                      </div>

                      <div>
                        {{ family.furigana }}
                      </div>

                      <div>
                        {{ family.relationship || '未登録' }}
                      </div>

                      <div>
                        -
                      </div>

                      <div>
                        {{ family.birthDate || '未登録' }}
                      </div>

                      <div>
                        {{ family.note || '' }}
                      </div>
                    </div>
                  }
                </div>
              } @else {
                <div class="empty-family-message">
                  登録されている家族情報はありません。
                </div>
              }
            </section>
          </section>
        }

        @if (selectedTab === 'kakocho') {
          <section class="coming-soon-section">
            <div class="section-heading">
              <h2>過去帳</h2>
            </div>

            <p class="empty-family-message">
              @if (kakocholist.length > 0) {
                <div class="family-table">
                  <div class="family-table-header">
                    <div>戒名</div>
                    <div>俗名</div>
                    <div>没年月日</div>
                    <div>関係</div>
                    <div>回忌</div>
                    <div>備考</div>
                  </div>

                  @for (kakocho of kakocholist; track kakocho.id) {
                    <div class="family-table-row">
                      <div class="family-person-name">
                        {{ kakocho.kaimyo }}
                      </div>

                      <div>
                        {{ kakocho.name }}
                      </div>

                      <div>
                        {{ kakocho.deathDate }}
                      </div>

                      <div>
                        {{ kakocho.relationship }}
                      </div>

                      <div>
                        {{ getKaiki(kakocho.deathDate) }}回忌
                      </div>

                      <div>
                        {{ kakocho.note || '' }}
                      </div>
                    </div>
                  }
                </div>
              } @else {
                <div class="empty-family-message">
                  登録されている家族情報はありません。
                </div>
              }              
            </p>
          </section>
        }

        @if (selectedTab === 'familyTree') {
          <section class="coming-soon-section">
            <div class="section-heading">
              <h2>家系図</h2>
            </div>

            <p class="empty-family-message">
              家系図はこれから実装します。
            </p>
          </section>
        }
      } @else {
        <p class="empty-family-message">
          檀家情報が見つかりませんでした。
        </p>
      }
    </section>
  </main>
</div>