added

src/app/app.routes.ts

@@ -3,6 +3,7 @@ import { Dashboard } from './pages/dashboard/dashboard';
 import { DankaList } from './pages/danka-list/danka-list';
 import { DankaDetail } from './pages/danka-detail/danka-detail';
 import { DankaEdit } from './pages/danka-edit/danka-edit';
+import { KakochoEdit } from './pages/kakocho-edit/kakocho-edit';
 
 export const routes: Routes = [
   {
@@ -24,5 +25,9 @@ export const routes: Routes = [
   {
     path: 'danka-edit/:id',
     component: DankaEdit,
-  }
+  },
+  {
+    path: 'kakocho-edit/:id',
+    component: KakochoEdit,
+  }  
 ];

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

@@ -67,6 +67,16 @@
             </nav>
           </div>
 
+          @if (selectedTab === 'kakocho') {
+          <button
+            type="button"
+            class="add-button"
+            [routerLink]="['/kakocho-edit', danka.id]"
+          >
+            故人を登録
+          </button>
+          }
+
           <button
             type="button"
             class="edit-button"
@@ -77,6 +87,7 @@
         </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>
@@ -90,6 +101,17 @@
           <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') {
@@ -160,7 +182,7 @@
                   (click)="selectedTab = 'kakocho'"
                 >
                   <p class="status-label">過去帳</p>
-                  <p class="status-count">2 名</p>
+                  <p class="status-count">{{ kakocholist.length }}  名</p>
                   <p class="status-link">詳細へ</p>
                 </button>
               </div>
@@ -271,7 +293,50 @@
             </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>
         }

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

@@ -159,6 +159,25 @@
   background: #f6efe6;
 }
 
+.add-button {
+  width: 140px;
+  height: 46px;
+  margin-top: 36px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.add-button:hover {
+  background: #f6efe6;
+}
+
+
 .detail-content {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 500px;
@@ -540,4 +559,4 @@
   .family-support-area {
     grid-template-columns: 1fr;
   }
-}
+}

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

@@ -4,8 +4,10 @@ import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
 import { Danka } from '../../models/danka';
 import { Family } from '../../models/family';
+import { Kakocho } from '../../models/kakocho';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+import { KakochoService } from '../../services/kakocho-service';
 
 @Component({
   selector: 'app-danka-detail',
@@ -16,20 +18,33 @@ import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 export class DankaDetail {
   danka: Danka | undefined;
   families: Family[] = [];
+  kakocholist: Kakocho[] = [];
+  currentYear = new Date().getFullYear();
 
   selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
 
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
+    private kakochoService: KakochoService,
     private route: ActivatedRoute,
   ) {
     const id = this.route.snapshot.params['id'];
     if (id) {
       this.danka = this.dankaService.getDankaById(id);
       this.families = this.familyService.getFamiliesByDankaId(id);
+      this.kakocholist = this.kakochoService.getKakochoByDankaId(id);
     }
     console.log(this.danka);
     console.log(this.families);
+    console.log(this.kakocholist);
+  }
+
+  getKaiki(deathDate: string): number {
+    return (
+      this.currentYear -
+      new Date(deathDate).getFullYear() +
+      1
+    );
   }
 }

src/app/pages/kakocho-edit/kakocho-edit.html

@@ -1 +1,147 @@
-<p>kakocho-edit works!</p>
+<app-header></app-header>
+
+<div class="breadcrumb">
+  ホーム &gt; 檀家（世帯） &gt; 編集
+</div>
+
+<div class="danka-edit-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="danka-edit-main">
+    <section class="edit-panel">
+      <div class="page-title-area">
+        <h1>檀家（世帯）編集</h1>
+      </div>
+
+      <form [formGroup]="dankaForm" class="edit-form">
+        <div class="edit-content">
+          <section class="basic-edit-section">
+            <h2>基本情報</h2>
+
+            <div class="form-list">
+              <div class="form-row">
+                <label for="householdName">世帯名</label>
+                <div class="form-field">
+                  <input
+                    id="householdName"
+                    type="text"
+                    formControlName="householdName"
+                  />
+                  @if (dankaForm.get('householdName')?.invalid && dankaForm.get('householdName')?.touched) {
+                    <p class="error-message">世帯名を入力してください。</p>
+                  }
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="householder">世帯主</label>
+                <div class="form-field">
+                  <input
+                    id="householder"
+                    type="text"
+                    formControlName="householder"
+                  />
+                  @if (dankaForm.get('householder')?.invalid && dankaForm.get('householder')?.touched) {
+                    <p class="error-message">世帯主を入力してください。</p>
+                  }
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="postalCode">郵便番号</label>
+                <div class="form-field">
+                  <input
+                    id="postalCode"
+                    type="text"
+                    formControlName="postalCode"
+                  />
+                  @if (dankaForm.get('postalCode')?.invalid && dankaForm.get('postalCode')?.touched) {
+                    <p class="error-message">郵便番号を入力してください。</p>
+                  }
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="address">住所</label>
+                <input
+                  id="address"
+                  type="text"
+                  formControlName="address"
+                />
+              </div>
+            </div>
+          </section>
+
+          <section class="phone-edit-section">
+            <div class="section-heading">
+              <h2>電話番号（複数登録）</h2>
+              <p>番号と備考を複数登録できます。</p>
+            </div>
+
+            <div formArrayName="phones" class="phone-table">
+              <div class="phone-table-header">
+                <div>番号</div>
+                <div>備考</div>
+                <div>操作</div>
+              </div>
+
+              @for (phone of phones.controls; track $index; let i = $index) {
+                <div class="phone-table-row" [formGroupName]="i">
+                  <div>
+                    <input type="text" formControlName="tel" placeholder="電話番号"/>
+                    @if (phone.get('tel')?.invalid && phone.get('tel')?.touched) {
+                      <p class="phone-error-message">
+                        電話番号は数字とハイフンで入力してください。
+                      </p>
+                    }
+                  </div>
+
+                  <div>
+                    <input type="text" formControlName="note" placeholder="備考"/>
+                  </div>
+
+                  <div class="phone-row-action">
+                    <button type="button" class="remove-phone-button" [disabled]="phones.length === 1" (click)="removePhone(i)">
+                      削除
+                    </button>
+                  </div>
+                </div>
+              }
+
+            </div>
+
+            <div class="phone-action">
+              <button
+                type="button"
+                class="add-phone-button"
+                (click)="addPhone()"
+              >
+                電話を追加
+              </button>
+            </div>
+          </section>
+        </div>
+
+        <div class="bottom-actions">
+          <button type="button" class="delete-button" (click)="deleteDanka()">
+            削除
+          </button>
+
+          <button type="button" class="cancel-button" [routerLink]="['/danka-detail', danka?.id]">
+            キャンセル
+          </button>
+
+          <button
+            type="button"
+            class="save-button"
+            [disabled]="dankaForm.invalid"
+            (click)="saveDanka()"
+          >
+            保存
+          </button>
+        </div>
+      </form>
+    </section>
+  </main>
+</div>
+

src/app/pages/kakocho-edit/kakocho-edit.scss

@@ -0,0 +1,355 @@
+:host {
+  position: relative;
+  display: block;
+  min-height: 100vh;
+  background: #f4eee4;
+  color: #2f2720;
+}
+
+.breadcrumb {
+  position: absolute;
+  top: 28px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #7b6b5c;
+  font-size: 14px;
+  z-index: 2;
+}
+
+.danka-edit-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #f4eee4;
+}
+
+.danka-edit-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.edit-panel {
+  min-height: 650px;
+  padding: 26px 34px 36px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 76px;
+  box-sizing: border-box;
+}
+
+.page-title-area {
+  margin-bottom: 8px;
+}
+
+.page-title-area h1 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.edit-form {
+  display: block;
+  width: 100%;
+  margin: 0;
+  color: #2f2720;
+}
+
+.edit-form input,
+.edit-form button {
+  font-family: inherit;
+}
+
+.edit-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 520px;
+  gap: 48px;
+  align-items: start;
+}
+
+.basic-edit-section,
+.phone-edit-section {
+  padding-top: 4px;
+}
+
+.basic-edit-section h2,
+.phone-edit-section h2,
+.support-box h2 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.section-heading p {
+  margin: 6px 0 14px;
+  color: #7b6b5c;
+  font-size: 15px;
+}
+
+/* 基本情報 */
+.form-list {
+  margin-top: 14px;
+}
+
+.form-field {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.form-row label {
+  color: #4b3c31;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.form-row input {
+  width: 100%;
+  height: 54px;
+  padding: 0 14px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 18px;
+  font-weight: 600;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.form-row input:focus {
+  border-color: #8a6543;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
+}
+
+/* 電話番号 */
+.phone-table {
+  width: 100%;
+}
+
+.phone-table-header,
+.phone-table-row {
+  display: grid;
+  grid-template-columns: 1.35fr 1.45fr 84px;
+  align-items: center;
+  column-gap: 10px;
+}
+
+.phone-table-header {
+  min-height: 38px;
+  padding: 0 10px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #eadfce;
+  color: #5a4a3c;
+  font-size: 15px;
+  font-weight: 800;
+  box-sizing: border-box;
+}
+
+.phone-table-row {
+  min-height: 56px;
+  margin-top: 4px;
+  padding: 6px 10px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+.phone-table-row > div {
+  display: flex;
+  align-items: center;
+}
+
+.phone-table-row input {
+  width: 100%;
+  height: 38px;
+  padding: 0 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 600;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.phone-table-row input:focus {
+  background: #ffffff;
+  box-shadow: inset 0 0 0 2px #8a6543;
+}
+
+.phone-table-row input::placeholder {
+  color: #9b8b7a;
+  font-weight: 500;
+}
+
+.phone-row-action {
+  justify-content: flex-end;
+}
+
+.remove-phone-button {
+  width: 68px;
+  height: 34px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #6a4a35;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.remove-phone-button:hover {
+  background: #f6efe6;
+}
+
+.phone-action {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.add-phone-button {
+  width: 170px;
+  height: 46px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.add-phone-button:hover {
+  background: #f6efe6;
+}
+
+/* 入力補助 */
+.support-box {
+  min-height: 142px;
+  margin-top: 56px;
+  padding: 28px 30px;
+  border: 2px solid #d8caba;
+  border-radius: 24px;
+  background: #fffdf9;
+  box-sizing: border-box;
+}
+
+.support-box ul {
+  margin: 12px 0 0;
+  padding-left: 22px;
+  color: #6f6257;
+  font-size: 15px;
+  line-height: 1.65;
+}
+
+/* 下部ボタン */
+.bottom-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  margin-top: 22px;
+}
+
+.delete-button,
+.cancel-button,
+.save-button {
+  min-width: 116px;
+  height: 52px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  font-size: 17px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.delete-button,
+.cancel-button {
+  background: #ffffff;
+  color: #2f2720;
+}
+
+.save-button {
+  background: #8a6543;
+  border-color: #8a6543;
+  color: #ffffff;
+}
+
+.delete-button:hover,
+.cancel-button:hover {
+  background: #f6efe6;
+}
+
+.save-button:hover {
+  background: #765639;
+}
+
+.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;
+}
+
+.error-message {
+  margin: 6px 0 0;
+  color: #b33a2f;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.4;
+  white-space: normal;
+}
+
+.save-button:disabled {
+  background: #c8b8a5;
+  border-color: #c8b8a5;
+  color: #ffffff;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.phone-field {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.phone-error-message {
+  margin: 4px 0 0;
+  color: #b33a2f;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.remove-phone-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

src/app/pages/kakocho-edit/kakocho-edit.ts

@@ -1,9 +1,124 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  FormArray,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { AppHeader } from '../../share/header/app-header';
+import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+import { DankaService } from '../../services/dankaService';
+import { Danka } from '../../models/danka';
 
 @Component({
   selector: 'app-kakocho-edit',
-  imports: [],
+  imports: [AppHeader, AppSideMenu, ReactiveFormsModule, RouterLink],
   templateUrl: './kakocho-edit.html',
   styleUrl: './kakocho-edit.scss',
 })
-export class KakochoEdit {}
+export class KakochoEdit {
+  danka: Danka | undefined;
+
+  dankaForm = new FormGroup({
+    householdName: new FormControl('', [Validators.required]),
+    householder: new FormControl('', [Validators.required]),
+    postalCode: new FormControl('', Validators.pattern(/^\d{3}-\d{4}$/)),
+    address: new FormControl(''),
+    phones: new FormArray([this.createPhoneForm('', '')]),
+  });
+
+  constructor(
+    private dankaService: DankaService,
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {
+    const id = this.route.snapshot.params['id'];
+    if (id) {
+      this.danka = this.dankaService.getDankaById(id);
+
+      if (this.danka) {
+        this.dankaForm.patchValue({
+          householdName: this.danka.householdName,
+          householder: this.danka.householder,
+          postalCode: this.danka.postalCode,
+          address: this.danka.address,
+        });
+
+        this.phones.clear();
+
+        for (const phone of this.danka.phones) {
+          this.phones.push(this.createPhoneForm(phone.tel, phone.note));
+        }
+      }
+    }
+    console.log(this.danka);
+  }
+
+  get phones() {
+    return this.dankaForm.get('phones') as FormArray;
+  }
+
+  createPhoneForm(tel = '', note = '') {
+    return new FormGroup({
+      tel: new FormControl(tel, [Validators.pattern(/^[0-9-]+$/)]),
+      note: new FormControl(note),
+    });
+  }
+
+  addPhone() {
+    this.phones.push(this.createPhoneForm());
+  }
+
+  removePhone(index: number) {
+    if(this.phones.length > 1) {
+      this.phones.removeAt(index);
+    }
+  }
+
+  //保存の処理
+  saveDanka() {
+    if (this.dankaForm.invalid) {
+      this.dankaForm.markAllAsTouched();
+      return;
+    }
+    const formValue = this.dankaForm.value;
+    const isEdit = !!this.danka;
+    const dankaId = isEdit ? this.danka!.id : Date.now().toString();
+    const updatedDanka = {
+      id: dankaId,
+      householdName: formValue.householdName?.trim() ?? '',
+      householder: formValue.householder?.trim() ?? '',
+      postalCode: formValue.postalCode?.trim() ?? '',
+      address: formValue.address?.trim() ?? '',
+      phones: (formValue.phones ?? [])
+        .map((phone) => ({
+          tel: phone.tel?.trim() ?? '',
+          note: phone.note?.trim() ?? '',
+        }))
+        .filter((phone) => phone.tel !== '' || phone.note !== ''),
+    };
+
+    this.dankaService.saveDanka(updatedDanka);
+
+    if (isEdit) {
+      this.router.navigate(['/danka-detail', dankaId]);
+    } else {
+      this.router.navigateByUrl('/danka-list');
+    }
+  }
+
+  //削除の処理
+  deleteDanka() {
+    if (!this.danka) {
+      return;
+    }
+
+    const deleteDankaId = this.danka.id;
+    this.dankaService.deleteDanka(deleteDankaId);
+    console.log(this.dankaService.getDankaById(this.danka.id));
+    this.router.navigateByUrl('/danka-list');
+  }
+}

src/app/services/kakocho-service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import {Kakocho} from '../models/kakocho';
+import { Kakocho } from '../models/kakocho';
 
 @Injectable({
   providedIn: 'root',
@@ -31,4 +31,8 @@ export class KakochoService {
       note: '',
     },
   ];
+
+  getKakochoByDankaId(dankaId: string): Kakocho[] {
+    return this.kakochoList.filter((kakocho) => kakocho.dankaId === dankaId);
+  }
 }