[add]

檀家詳細画面の作成
IDごとに檀家情報を取得

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

@@ -0,0 +1,125 @@
+<app-header></app-header>
+
+<div class="breadcrumb">
+  ホーム &gt; 檀家（世帯） &gt; 鈴木家
+</div>
+
+<div class="danka-detail-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="danka-detail-main">
+    <section class="detail-panel">
+      <div class="page-title-row">
+        <div>
+          <h1>檀家（世帯）詳細 - 基本情報</h1>
+
+          <nav class="tab-list">
+            <a href="#" class="tab-button active">基本情報</a>
+            <a href="#" class="tab-button">家族</a>
+            <a href="#" class="tab-button">過去帳</a>
+            <a href="#" class="tab-button">家系図</a>
+          </nav>
+        </div>
+
+        <button type="button" class="edit-button">
+          編集
+        </button>
+      </div>
+
+      <section class="family-summary">
+        <div class="family-name-area">
+          <p class="family-name">{{ danka?.householder }}</p>
+          <p class="family-head">世帯主: {{ danka?.householdName }}</p>
+        </div>
+
+        <div class="family-address">
+          <p>郵便番号 〒{{ danka?.postalCode }}</p>
+          <p>住所 {{ danka?.address }}</p>
+        </div>
+
+        <button type="button" class="memo-button">
+          回忌を見る
+        </button>
+      </section>
+
+      <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?.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>
+
+                @if (danka) {
+                  @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">
+            <a href="#" class="status-card">
+              <p class="status-label">家族</p>
+              <p class="status-count">4 名</p>
+              <p class="status-link">詳細へ</p>
+            </a>
+
+            <a href="#" class="status-card">
+              <p class="status-label">過去帳</p>
+              <p class="status-count">2 名</p>
+              <p class="status-link">詳細へ</p>
+            </a>
+          </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">
+            <a href="#" class="status-button">家族を見る</a>
+            <a href="#" class="status-button">過去帳を見る</a>
+          </div>
+        </aside>
+      </div>
+    </section>
+  </main>
+</div>
+

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

@@ -0,0 +1,390 @@
+: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-detail-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #f4eee4;
+}
+
+.danka-detail-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.detail-panel {
+  min-height: 650px;
+  padding: 26px 34px 36px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 76px;
+  box-sizing: border-box;
+}
+
+.page-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
+
+.page-title-row h1 {
+  margin: 0 0 8px;
+  color: #2f2720;
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.tab-list {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tab-button {
+  width: 150px;
+  height: 42px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #f1e7d8;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 700;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.tab-button.active {
+  background: #8a6543;
+  border-color: #8a6543;
+  color: #ffffff;
+}
+
+.tab-button:hover {
+  background: #eadfce;
+}
+
+.tab-button.active:hover {
+  background: #765639;
+}
+
+.edit-button {
+  width: 140px;
+  height: 46px;
+  margin-top: 36px;
+  border: 2px solid #8a6543;
+  border-radius: 6px;
+  background: #8a6543;
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.edit-button:hover {
+  background: #765639;
+}
+
+.family-summary {
+  min-height: 82px;
+  margin-bottom: 28px;
+  padding: 14px 26px;
+  border: 2px solid #d8caba;
+  border-radius: 14px;
+  background: #eadfce;
+  display: grid;
+  grid-template-columns: 1.2fr 1.6fr auto;
+  align-items: center;
+  column-gap: 24px;
+  box-sizing: border-box;
+}
+
+.family-name {
+  margin: 0;
+  color: #2f2720;
+  font-size: 28px;
+  font-weight: 800;
+  line-height: 1.1;
+}
+
+.family-head {
+  margin: 2px 0 0;
+  color: #6f6257;
+  font-size: 16px;
+}
+
+.family-address p {
+  margin: 2px 0;
+  color: #2f2720;
+  font-size: 16px;
+}
+
+.memo-button {
+  width: 150px;
+  height: 40px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.memo-button:hover {
+  background: #f6efe6;
+}
+
+.detail-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 500px;
+  gap: 48px;
+  align-items: start;
+}
+
+.basic-info-section {
+  padding-left: 8px;
+}
+
+.section-heading {
+  margin-bottom: 8px;
+}
+
+.section-heading h2 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.section-heading p {
+  margin: 3px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+}
+
+.info-form {
+  width: 650px;
+}
+
+.info-row {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.info-label {
+  color: #4b3c31;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.info-value {
+  min-height: 40px;
+  padding: 8px 12px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 17px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.phone-row {
+  align-items: start;
+  margin-top: 18px;
+}
+
+.phone-row .info-label {
+  padding-top: 8px;
+}
+
+.phone-table {
+  width: 100%;
+}
+
+.phone-header,
+.phone-item {
+  display: grid;
+  grid-template-columns: 1fr 1.4fr 1.2fr;
+  align-items: center;
+}
+
+.phone-header {
+  min-height: 36px;
+  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-item {
+  min-height: 52px;
+  margin-top: 4px;
+  padding: 0 10px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+.status-panel {
+  min-height: 382px;
+  padding: 30px 24px 22px;
+  border: 2px solid #d8caba;
+  border-radius: 62px;
+  background: #fffdf9;
+  box-sizing: border-box;
+}
+
+.status-panel h2 {
+  margin: 0 0 18px;
+  color: #2f2720;
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.status-card-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+.status-card {
+  min-height: 104px;
+  padding: 14px 18px;
+  border: 2px solid #d8caba;
+  border-radius: 14px;
+  background: #ffffff;
+  color: #2f2720;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
+.status-card:hover {
+  background: #f6efe6;
+}
+
+.status-label {
+  margin: 0;
+  color: #7b6b5c;
+  font-size: 16px;
+}
+
+.status-count {
+  margin: 2px 0 0;
+  color: #2f2720;
+  font-size: 32px;
+  font-weight: 800;
+  line-height: 1.1;
+}
+
+.status-link {
+  margin: 4px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+}
+
+.next-memorial {
+  margin-bottom: 20px;
+}
+
+.next-memorial h3 {
+  margin: 0 0 8px;
+  color: #4b3c31;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.memorial-card {
+  min-height: 72px;
+  padding: 14px 20px;
+  border: 2px solid #d8caba;
+  border-radius: 10px;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.memorial-title {
+  margin: 0;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.memorial-text {
+  margin: 4px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+}
+
+.status-button-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.status-button {
+  height: 48px;
+  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;
+  box-sizing: border-box;
+}
+
+.status-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-detail/danka-detail.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DanakDetail } from './danka-detail';
+
+describe('DanakDetail', () => {
+  let component: DanakDetail;
+  let fixture: ComponentFixture<DanakDetail>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DanakDetail],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DanakDetail);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DankaService } from '../../services/dankaService';
+import { Danka } from '../../models/danka';
+import { AppHeader } from '../../share/header/app-header';
+import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+
+@Component({
+  selector: 'app-danka-detail',
+  imports: [AppHeader, AppSideMenu],
+  templateUrl: './danka-detail.html',
+  styleUrl: './danka-detail.scss',
+})
+export class DankaDetail {
+  danka: Danka | undefined;
+
+  constructor(
+    private dankaService: DankaService,
+    private route: ActivatedRoute,
+  ) {
+    const id = this.route.snapshot.params['id'];
+    if (id) {
+      this.danka = this.dankaService.getDankaById(id);
+    }
+    console.log(this.danka);
+  }
+}