[add]

＜檀家一覧＞
タブについて全件は残して、行順タブを追加

＜檀家一覧（家族）＞
氏名・ふりがな・生年月日・年齢・関係・備考

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

                   <div class="family-table-header">
                     <div>氏名</div>
                     <div>ふりがな</div>
-                    <div>関係</div>
-                    <div>年齢</div>
                     <div>生年月日</div>
+                    <div>年齢</div>
+                    <div>関係</div>
                     <div>備考</div>
                     <div>操作</div>
                   </div>
                       </div>
 
                       <div>
-                        {{ family.relationship || '未登録' }}
+                        {{ family.birthDate || '未登録' }}
                       </div>
 
                       <div>
                       </div>
 
                       <div>
-                        {{ family.birthDate || '未登録' }}
+                        {{ family.relationship || '未登録' }}
                       </div>
 
                       <div>

src/app/pages/danka-list/danka-list.html

 
       <div class="filter-row">
         <div class="filter-button-list">
-          <button type="button" class="filter-button" [class.active]="selectedFilter === 'all'"
-                  (click)="showAllDanka()">
-            全件
-          </button>
-
-          <button type="button" class="filter-button">
-            過去帳あり
-          </button>
-
-          <button type="button" class="filter-button">
-            法要あり
-          </button>
-
-          <button type="button" class="filter-button" [class.active]="selectedFilter === 'phone'"
-                  (click)="filterPhoneAvailable()">
-            電話番号あり
-          </button>
+          @for (kanaRow of kanaRows; track kanaRow.value) {
+            <button
+              type="button"
+              class="filter-button"
+              [class.active]="selectedKanaRow === kanaRow.value"
+              (click)="filterByKanaRow(kanaRow.value)"
+            >
+              {{ kanaRow.label }}
+            </button>
+          }
         </div>
 
         <p class="result-count">

src/app/pages/danka-list/danka-list.scss

   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 16px;
   margin-bottom: 14px;
-  padding-right: 24px;
+  padding: 12px 14px;
+  background: #fffdf9;
+  border: 2px solid #d8caba;
+  border-radius: 10px;
 }
 
 .filter-button-list {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
 .filter-button {
-  min-width: 140px;
+  min-width: 56px;
   height: 40px;
-  padding: 0 18px;
+  padding: 0 14px;
   border: 2px solid #d8caba;
-  border-radius: 6px;
+  border-radius: 8px;
   background: #f4eee4;
   color: #2f2720;
   font-size: 16px;
-  font-weight: 700;
+  font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
 }
   margin: 0;
   color: #8a7d6d;
   font-size: 15px;
+  white-space: nowrap;
 }
 
 .list-content {
   text-align: center;
 }
 
-.help-panel {
-  position: absolute;
-  top: 0;
-  right: 18px;
-  width: 158px;
-  min-height: 446px;
-  padding: 28px 14px 18px;
-  background: #fffdf9;
-  border: 2px solid #d8caba;
-  border-radius: 24px;
-  box-sizing: border-box;
-}
-
-.help-panel h2 {
-  margin: 0 0 16px;
-  color: #2f2720;
-  font-size: 20px;
-  font-weight: 800;
-}
-
-.help-panel ol {
-  margin: 0;
-  padding-left: 22px;
-  color: #6f6257;
-  font-size: 14px;
-  line-height: 1.45;
-}
-
-.help-title-secondary {
-  margin-top: 28px !important;
-}
-
-.help-button-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.help-button {
-  min-height: 46px;
-  padding: 0 8px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #2f2720;
-  font-size: 16px;
-  font-weight: 800;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.help-button:hover {
-  background: #f6efe6;
-}
-
-.bottom-note {
-  width: 700px;
-  margin: 18px 0 22px 36px;
-  padding: 4px 12px;
-  border: 2px solid #d8caba;
-  border-radius: 4px;
-  background: #eadfce;
-  color: #7b6b5c;
-  font-size: 14px;
-  box-sizing: border-box;
-}

src/app/pages/danka-list/danka-list.ts

 import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
+import { FamilyService } from '../../services/family-service';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 import { Danka } from '../../models/danka';
 import { FormsModule } from '@angular/forms';
 
+type KanaRowValue =
+  | 'all'
+  | 'a'
+  | 'ka'
+  | 'sa'
+  | 'ta'
+  | 'na'
+  | 'ha'
+  | 'ma'
+  | 'ya'
+  | 'ra'
+  | 'wa';
+
 @Component({
   selector: 'app-danka-list',
   imports: [AppHeader, AppSideMenu, RouterLink, FormsModule],
   searchKeyword: string = '';
   dankaDisplay: number = 0;
   selectedFilter = 'all';
+  selectedKanaRow: KanaRowValue = 'all';
+  kanaRows: { label: string; value: KanaRowValue }[] = [
+    { label: '全件', value: 'all' },
+    { label: 'あ行', value: 'a' },
+    { label: 'か行', value: 'ka' },
+    { label: 'さ行', value: 'sa' },
+    { label: 'た行', value: 'ta' },
+    { label: 'な行', value: 'na' },
+    { label: 'は行', value: 'ha' },
+    { label: 'ま行', value: 'ma' },
+    { label: 'や行', value: 'ya' },
+    { label: 'ら行', value: 'ra' },
+    { label: 'わ行', value: 'wa' },
+  ];
+
+  private readonly kanaRowMap: Record<Exclude<KanaRowValue, 'all'>, string[]> = {
+    a: ['あ', 'い', 'う', 'え', 'お', 'ア', 'イ', 'ウ', 'エ', 'オ'],
+    ka: ['か', 'き', 'く', 'け', 'こ', 'が', 'ぎ', 'ぐ', 'げ', 'ご', 'カ', 'キ', 'ク', 'ケ', 'コ', 'ガ', 'ギ', 'グ', 'ゲ', 'ゴ'],
+    sa: ['さ', 'し', 'す', 'せ', 'そ', 'ざ', 'じ', 'ず', 'ぜ', 'ぞ', 'サ', 'シ', 'ス', 'セ', 'ソ', 'ザ', 'ジ', 'ズ', 'ゼ', 'ゾ'],
+    ta: ['た', 'ち', 'つ', 'て', 'と', 'だ', 'ぢ', 'づ', 'で', 'ど', 'タ', 'チ', 'ツ', 'テ', 'ト', 'ダ', 'ヂ', 'ヅ', 'デ', 'ド'],
+    na: ['な', 'に', 'ぬ', 'ね', 'の', 'ナ', 'ニ', 'ヌ', 'ネ', 'ノ'],
+    ha: ['は', 'ひ', 'ふ', 'へ', 'ほ', 'ば', 'び', 'ぶ', 'べ', 'ぼ', 'ぱ', 'ぴ', 'ぷ', 'ぺ', 'ぽ', 'ハ', 'ヒ', 'フ', 'ヘ', 'ホ', 'バ', 'ビ', 'ブ', 'ベ', 'ボ', 'パ', 'ピ', 'プ', 'ペ', 'ポ'],
+    ma: ['ま', 'み', 'む', 'め', 'も', 'マ', 'ミ', 'ム', 'メ', 'モ'],
+    ya: ['や', 'ゆ', 'よ', 'ヤ', 'ユ', 'ヨ'],
+    ra: ['ら', 'り', 'る', 'れ', 'ろ', 'ラ', 'リ', 'ル', 'レ', 'ロ'],
+    wa: ['わ', 'を', 'ん', 'ワ', 'ヲ', 'ン'],
+  };
 
-  constructor(private dankaService: DankaService) {
+  constructor(
+    private dankaService: DankaService,
+    private familyService: FamilyService,
+  ) {
     this.dankaList = this.dankaService.getDankaList();
     this.showAllDanka();
   }
   //全件タグで絞り込み
   showAllDanka() {
     this.selectedFilter = 'all';
+    this.selectedKanaRow = 'all';
     this.searchKeyword = '';
     this.filterDankaList = this.dankaList;
     this.dankaDisplay = this.filterDankaList.length;
   //電話番号タグで絞り込み
   filterPhoneAvailable() {
     this.selectedFilter = 'phone';
+    this.selectedKanaRow = 'all';
     //電話番号タブに該当する檀家を表示
     this.filterDankaList = this.dankaList.filter((danka) => {
       return danka.phones.some((phone) => phone.tel.trim() !== '');
   //検索処理
   searchDanka() {
     this.selectedFilter = 'search';
+    this.selectedKanaRow = 'all';
     //検索欄に入力された値から余白を削除
     const keyword = this.searchKeyword.trim();
     //検索欄が空の場合は檀家の一覧を表示
     console.log(this.dankaDisplay);
   }
 
+  filterByKanaRow(row: KanaRowValue): void {
+    this.selectedFilter = 'kana';
+    this.selectedKanaRow = row;
+    this.searchKeyword = '';
+
+    if (row === 'all') {
+      this.filterDankaList = this.dankaList;
+      this.dankaDisplay = this.filterDankaList.length;
+      return;
+    }
+
+    this.filterDankaList = this.dankaList.filter((danka) => {
+      const firstKana = this.getDankaSortText(danka).charAt(0);
+      return this.kanaRowMap[row].includes(firstKana);
+    });
+    this.dankaDisplay = this.filterDankaList.length;
+  }
+
   clearDanka() {
     this.selectedFilter = '';
+    this.selectedKanaRow = 'all';
     this.searchKeyword = '';
     this.filterDankaList = [];
     this.dankaDisplay = 0;
   }
+
+  private getDankaSortText(danka: Danka): string {
+    const householderName = this.normalizeName(danka.householder);
+    const householderFamily = this.familyService
+      .getFamiliesByDankaId(danka.id)
+      .find((family) => this.normalizeName(family.name) === householderName);
+
+    return (householderFamily?.furigana || danka.householder).trim();
+  }
+
+  private normalizeName(name: string): string {
+    return name.replace(/\s/g, '');
+  }
 }