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>
              檀家詳細 - {{ danka.householdName }}
            </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>
          }
        </div>

        @if (selectedTab === 'basic' || selectedTab === 'kakocho') {
          <section class="family-summary">
            @if (selectedTab === 'basic') {
              <div class="family-name-area">
                <p class="family-name">{{ danka.householdName }}</p>
                <p class="family-head">更新日: {{ formatUpdatedAt(danka.updatedAt) }}</p>
              </div>
            }

            @if (selectedTab === 'kakocho') {
              <div class="family-name-area">
                <p class="family-name">{{ danka.householdName }}の過去帳{{ kakocholist.length }} 名</p>
              </div>
            }
          </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">
                  @if (nextMemorial) {
                    <p class="memorial-title">
                      {{ nextMemorial.name }} - {{ nextMemorial.memorialType }}
                    </p>
                    <p class="memorial-text">
                      対象年 {{ nextMemorial.targetYear }} / 没年月日 {{ nextMemorial.deathDate }}
                    </p>
                  } @else {
                    <p class="memorial-title">対象の法要はありません</p>
                    <p class="memorial-text">
                      今年の年忌法要対象者がいる場合に表示されます。
                    </p>
                  }
                </div>
              </section>
            </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>操作</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.birthDate || '未登録' }}
                      </div>

                      <div>
                        {{ getAge(family.birthDate) }}
                      </div>

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

                      <div>
                        {{ family.note || '' }}
                      </div>
                      <div class="family-table-action">
                        <a
                          class="family-edit-link"
                          [routerLink]="['/danka', danka.id, 'family', family.id, 'edit']"
                        >
                          編集
                        </a>
                      </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="family-tree-tab-content">
            <div class="section-heading">
              <h2>家系図</h2>
              <p>
                家族情報に登録された親子・配偶者の関係をもとに表示します。
              </p>
            </div>

            @if (families.length > 0) {
              <div class="family-tree-layout">
                <section class="family-tree-area">
                  <div class="family-tree-toolbar">
                    <div>
                      <p class="family-tree-title">
                        {{ danka.householdName }}の家系図
                      </p>
                      <p class="family-tree-caption">
                        人物カードを選択すると、右側に関係情報が表示されます。
                      </p>
                    </div>

                    <div class="family-tree-action-list">
                      <button type="button" class="tree-action-button"
                              [routerLink]="['/danka', danka.id, 'family-new']"
                              [queryParams]="{relationMode: 'child', baseFamilyId: selectedFamily?.id}">
                        親子を追加
                      </button>

                      <button type="button" class="tree-action-button"
                              [routerLink]="['/danka', danka.id, 'family-new']"
                              [queryParams]="{relationMode: 'spouse', baseFamilyId: selectedFamily?.id}">
                        配偶者を追加
                      </button>
                    </div>
                  </div>

                  @if (selectedFamily) {
                    <div class="family-tree-diagram">

                      <div class="tree-generation parent-generation">
                        @if (getFather(selectedFamily)) {
                          <button
                            type="button"
                            class="family-tree-card small"
                            (click)="selectFamily(getFather(selectedFamily)!)">
                            <span class="tree-card-name">{{ getFather(selectedFamily)?.name }}</span>
                            <span class="tree-card-relationship">父</span>
                          </button>
                        }
                        @if (getMother(selectedFamily)) {
                          <button type="button" class="family-tree-card small"
                                  (click)="selectFamily(getMother(selectedFamily)!)">
                            <span class="tree-card-name">{{ getMother(selectedFamily)?.name }}</span>
                            <span class="tree-card-relationship">母</span>
                          </button>
                        }
                      </div>

                      <div class="tree-generation main-generation">
                        <button type="button"
                                class="family-tree-card active main-person">
                          <span class="tree-card-name">
                            {{ selectedFamily.name }}
                          </span>
                          <span class="tree-card-relationship">
                            {{ selectedFamily.relationship || '関係未登録' }}
                          </span>
                          <span class="tree-card-birth">
                            {{ selectedFamily.birthDate || '生年月日未登録' }}
                          </span>
                        </button>

                        @if (getSpouse(selectedFamily)) {
                          <button
                            type="button"
                            class="family-tree-card spouse-person"
                            (click)="selectFamily(getSpouse(selectedFamily)!)">
                            <span class="tree-card-name">
                              {{ getSpouse(selectedFamily)?.name }}
                            </span>
                            <span class="tree-card-relationship">配偶者</span>
                            <span class="tree-card-birth">
                              {{ getSpouse(selectedFamily)?.birthDate || '生年月日未登録' }}
                            </span>
                          </button>
                        }
                      </div>

                      <div class="tree-generation child-generation">
                        @if (getChildren(selectedFamily).length > 0) {
                          @for (child of getChildren(selectedFamily); track child.id) {
                            <button
                              type="button"
                              class="family-tree-card small"
                              (click)="selectFamily(child)">
                              <span class="tree-card-name">
                                {{ child.name }}
                              </span>
                              <span class="tree-card-relationship">
                                {{ child.relationship || '子' }}
                              </span>
                            </button>
                          }
                        } @else {
                          <p class="tree-empty-text">
                            子どもの登録はありません。
                          </p>
                        }
                      </div>
                    </div>
                    <div class="family-tree-member-list">
                      <p class="member-list-title">人物一覧</p>

                      <div class="member-chip-list">
                        @for (family of families; track family.id) {
                          <button
                            type="button"
                            class="member-chip"
                            [class.active]="selectedFamily.id === family.id"
                            (click)="selectFamily(family)"
                          >
                            {{ family.name }}
                          </button>
                        }
                      </div>
                    </div>
                  } @else {
                    <p class="empty-family-message">
                      人物カードを選択してください。
                    </p>
                  }
                </section>

                <aside class="family-tree-side-panel">
                  <h3>選択中の人物情報</h3>

                  @if (selectedFamily) {
                    <div class="selected-person-card">
                      <p class="selected-person-name">
                        {{ selectedFamily.name }}
                      </p>

                      <p class="selected-person-sub">
                        {{ selectedFamily.furigana || 'ふりがな未登録' }}
                      </p>
                    </div>

                    <div class="selected-info-list">
                      <div class="selected-info-row">
                        <span>関係</span>
                        <strong>{{ selectedFamily.relationship || '未登録' }}</strong>
                      </div>

                      <div class="selected-info-row">
                        <span>生年月日</span>
                        <strong>{{ selectedFamily.birthDate || '未登録' }}</strong>
                      </div>

                      <div class="selected-info-row">
                        <span>父</span>
                        <strong>{{ getFather(selectedFamily)?.name || '未登録' }}</strong>
                      </div>

                      <div class="selected-info-row">
                        <span>母</span>
                        <strong>{{ getMother(selectedFamily)?.name || '未登録' }}</strong>
                      </div>

                      <div class="selected-info-row">
                        <span>配偶者</span>
                        <strong>{{ getSpouse(selectedFamily)?.name || '未登録' }}</strong>
                      </div>

                      <div class="selected-info-row children-row">
                        <span>子</span>
                        <strong>
                          @if (getChildren(selectedFamily).length > 0) {
                            @for (child of getChildren(selectedFamily); track child.id) {
                              <span class="child-name">
                        {{ child.name }}
                      </span>
                            }
                          } @else {
                            未登録
                          }
                        </strong>
                      </div>
                    </div>

                    <section class="marriage-summary-panel">
                      <h4>配偶関係</h4>

                      <div class="marriage-summary-block">
                        <p class="marriage-summary-label">現在の配偶者</p>

                        @if (getCurrentMarriage(selectedFamily); as currentMarriage) {
                          @if (getMarriagePartner(currentMarriage, selectedFamily); as currentPartner) {
                            <button
                              type="button"
                              class="marriage-person-button"
                              (click)="selectFamily(currentPartner)"
                            >
                              {{ currentPartner.name }}
                            </button>
                          } @else {
                            <p class="marriage-empty-text">未登録</p>
                          }
                        } @else {
                          <p class="marriage-empty-text">未登録</p>
                        }
                      </div>

                      <div class="marriage-summary-block">
                        <p class="marriage-summary-label">過去の配偶者</p>

                        @if (getPastMarriages(selectedFamily).length > 0) {
                          <div class="marriage-history-list">
                            @for (relation of getPastMarriages(selectedFamily); track relation.id) {
                              @if (getMarriagePartner(relation, selectedFamily); as pastPartner) {
                                <button
                                  type="button"
                                  class="marriage-person-button secondary"
                                  (click)="selectFamily(pastPartner)"
                                >
                                  <span>{{ pastPartner.name }}</span>
                                  <small>{{ getMarriageStatusLabel(relation.status) }}</small>
                                </button>
                              }
                            }
                          </div>
                        } @else {
                          <p class="marriage-empty-text">未登録</p>
                        }
                      </div>
                    </section>

                    <div class="selected-person-actions">
                      <a
                        class="selected-person-button"
                        [routerLink]="['/danka', danka.id, 'family', selectedFamily.id, 'edit']"
                      >
                        個人情報を編集
                      </a>

                      <button
                        type="button"
                        class="selected-person-button secondary"
                        (click)="selectedTab = 'kakocho'"
                      >
                        過去帳を確認
                      </button>
                    </div>
                  } @else {
                    <p class="empty-family-message">
                      人物カードを選択してください。
                    </p>
                  }
                </aside>
              </div>
            } @else {
              <div class="empty-family-message">
                登録されている家族情報はありません。
              </div>
            }
          </section>
        }
      } @else {
        <p class="empty-family-message">
          檀家情報が見つかりませんでした。
        </p>
      }
    </section>
  </main>
</div>