[wip]

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

@@ -2,29 +2,29 @@
   position: relative;
   display: block;
   min-height: 100vh;
-  background: #f4eee4;
+  background: #f6f0e7;
   color: #2f2720;
 }
 
 .danka-detail-page {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  background: #f4eee4;
+  display: grid;
+  grid-template-columns: 172px minmax(0, 1fr);
+  gap: 20px;
+  padding: 0 38px 36px 0;
+  background: #f6f0e7;
 }
 
 .danka-detail-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .detail-panel {
-  min-height: 650px;
-  padding: 26px 34px 36px;
-  background: #ffffff;
+  min-height: 760px;
+  padding: 34px 42px 40px;
+  background: #fffdf9;
   border: 2px solid #d8caba;
-  border-radius: 76px;
+  border-radius: 64px;
   box-sizing: border-box;
 }
 
@@ -32,16 +32,17 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
+  gap: 24px;
+  margin-bottom: 22px;
 }
 
 .page-title-row h1 {
-  margin: 0 0 8px;
+  margin: 0 0 18px;
   color: #2f2720;
-  font-size: 32px;
-  line-height: 1.2;
+  font-size: 34px;
+  line-height: 1.1;
   font-weight: 800;
-  letter-spacing: 0.02em;
+  letter-spacing: 0;
 }
 
 .tab-list {
@@ -83,7 +84,7 @@
 .edit-button {
   width: 140px;
   height: 46px;
-  margin-top: 36px;
+  margin-top: 54px;
   border: 2px solid #8a6543;
   border-radius: 6px;
   background: #ffffff;
@@ -104,7 +105,7 @@
   padding: 14px 24px;
   border: 2px solid #d8caba;
   border-radius: 8px;
-  background: #f1e7d8;
+  background: #fbf7f0;
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -169,7 +170,7 @@
 .add-button {
   width: 140px;
   height: 46px;
-  margin-top: 36px;
+  margin-top: 54px;
   border: 2px solid #8a6543;
   border-radius: 6px;
   background: #ffffff;
@@ -187,7 +188,7 @@
 .family-page-add-button {
   width: 140px;
   height: 46px;
-  margin-top: 36px;
+  margin-top: 54px;
   border: 2px solid #8a6543;
   border-radius: 6px;
   background: #ffffff;
@@ -209,12 +210,12 @@
 .detail-content {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 420px;
-  gap: 18px;
+  gap: 20px;
   align-items: start;
 }
 
 .basic-info-section {
-  padding: 24px 20px 18px;
+  padding: 24px 20px 22px;
   border: 2px solid #d8caba;
   border-radius: 12px;
   background: #fffdf9;
@@ -222,7 +223,7 @@
 }
 
 .section-heading {
-  margin-bottom: 8px;
+  margin-bottom: 14px;
 }
 
 .section-heading h2 {
@@ -230,6 +231,7 @@
   color: #2f2720;
   font-size: 22px;
   font-weight: 800;
+  line-height: 1.3;
 }
 
 .section-heading p {
@@ -276,7 +278,7 @@
   border-radius: 6px;
   background: #f3eee8;
   color: #4b3c31;
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 800;
   display: flex;
   align-items: center;
@@ -290,7 +292,8 @@
   border-radius: 0;
   background: transparent;
   color: #2f2720;
-  font-size: 17px;
+  font-size: 16px;
+  font-weight: 700;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -390,6 +393,7 @@
   color: #2f2720;
   font-size: 22px;
   font-weight: 800;
+  line-height: 1.3;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -452,7 +456,7 @@
 .next-memorial h3 {
   margin: 0 0 16px;
   color: #4b3c31;
-  font-size: 17px;
+  font-size: 18px;
   font-weight: 800;
   display: flex;
   align-items: center;
@@ -535,8 +539,9 @@
 
   h2 {
     margin: 0;
-    font-size: 20px;
-    font-weight: 700;
+    font-size: 22px;
+    line-height: 1.3;
+    font-weight: 800;
   }
 }
 
@@ -808,8 +813,9 @@
 
   h2 {
     margin: 0;
-    font-size: 20px;
-    font-weight: 700;
+    font-size: 22px;
+    line-height: 1.3;
+    font-weight: 800;
   }
 }
 
@@ -1273,6 +1279,33 @@
   color: #ffffff;
 }
 
+@media (max-width: 1100px) {
+  .danka-detail-page {
+    grid-template-columns: 1fr;
+    padding: 0 24px 32px;
+  }
+
+  .detail-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
+  }
+
+  .detail-content {
+    grid-template-columns: 1fr;
+  }
+
+  .page-title-row {
+    flex-direction: column;
+  }
+
+  .edit-button,
+  .add-button,
+  .family-page-add-button {
+    margin-top: 0;
+  }
+}
+
 /* 家族表が狭い画面では横スクロール */
 @media (max-width: 800px) {
   .detail-content,

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

@@ -106,6 +106,7 @@ export class DankaDetail implements AfterViewInit {
     const id = this.route.snapshot.params['id'];
     if (id) {
       this.danka = this.dankaService.getDankaById(id);
+      this.dankaService.recordDankaOpened(id);
       this.marriageRelations = this.marriageRelationService.getMarriageRelationsByDankaId(id);
       this.families = this.sortFamiliesByHouseholder(this.familyService.getFamiliesByDankaId(id));
       this.selectedFamily = this.families[0];

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

@@ -100,7 +100,6 @@
           <section class="phone-edit-section">
             <div class="section-heading">
               <h2>電話番号（複数登録）</h2>
-              <p>番号と備考を複数登録できます。</p>
             </div>
 
             <div formArrayName="phones" class="phone-table">
@@ -148,22 +147,27 @@
         </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 class="left-actions"></div>
+
+          <div class="right-actions">
+            @if (danka) {
+              <button type="button" class="delete-button" (click)="deleteDanka()">
+                削除
+              </button>
+            }
+            <button type="button" class="cancel-button" [routerLink]="danka ? ['/danka-detail', danka.id] : ['/danka-list']">
+              キャンセル
+            </button>
+
+            <button
+              type="button"
+              class="save-button"
+              [disabled]="dankaForm.invalid"
+              (click)="saveDanka()"
+            >
+              保存
+            </button>
+          </div>
         </div>
       </form>
     </section>

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

@@ -2,7 +2,7 @@
   position: relative;
   display: block;
   min-height: 100vh;
-  background: #f4eee4;
+  background: #f6f0e7;
   color: #2f2720;
 }
 
@@ -11,7 +11,7 @@
   grid-template-columns: 172px minmax(0, 1fr);
   gap: 20px;
   padding: 0 38px 36px 0;
-  background: #f4eee4;
+  background: #f6f0e7;
 }
 
 .danka-edit-main {
@@ -22,7 +22,7 @@
 .edit-panel {
   min-height: 760px;
   padding: 34px 42px 40px;
-  background: #ffffff;
+  background: #fffdf9;
   border: 2px solid #d8caba;
   border-radius: 64px;
   box-sizing: border-box;
@@ -55,20 +55,24 @@
 
 .edit-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 500px;
-  gap: 32px;
+  grid-template-columns: minmax(0, 1fr) 430px;
+  gap: 22px;
   align-items: start;
 }
 
 .basic-edit-section,
 .phone-edit-section {
-  padding-top: 0;
+  padding: 26px 28px 28px;
+  border: 2px solid #d8caba;
+  border-radius: 12px;
+  background: #fffdf9;
+  box-sizing: border-box;
 }
 
 .basic-edit-section h2,
 .phone-edit-section h2,
 .support-box h2 {
-  margin: 0;
+  margin: 0 0 18px;
   color: #2f2720;
   font-size: 22px;
   line-height: 1.3;
@@ -83,7 +87,9 @@
 
 /* 基本情報 */
 .form-list {
-  margin-top: 12px;
+  margin-top: 0;
+  padding-top: 18px;
+  border-top: 2px solid #eadfce;
 }
 
 .form-field {
@@ -94,10 +100,10 @@
 
 .form-row {
   display: grid;
-  grid-template-columns: 140px 1fr;
+  grid-template-columns: 132px 1fr;
   align-items: center;
-  gap: 14px;
-  margin-bottom: 12px;
+  gap: 18px;
+  margin-bottom: 14px;
 }
 
 .form-row label {
@@ -124,8 +130,12 @@
   padding: 0 14px;
 }
 
+.form-row:has(#postalCode) input {
+  max-width: 300px;
+}
+
 .form-row textarea {
-  min-height: 104px;
+  min-height: 150px;
   padding: 12px 14px;
   line-height: 1.6;
   resize: vertical;
@@ -157,7 +167,7 @@
 .phone-table-header,
 .phone-table-row {
   display: grid;
-  grid-template-columns: 1.35fr 1.45fr 84px;
+  grid-template-columns: minmax(110px, 1fr) minmax(88px, 0.8fr) 72px;
   align-items: center;
   gap: 10px;
 }
@@ -235,7 +245,7 @@
 .phone-action {
   display: flex;
   justify-content: flex-end;
-  margin-top: 10px;
+  margin-top: 16px;
 }
 
 .add-phone-button {
@@ -277,10 +287,17 @@
 /* 下部ボタン */
 .bottom-actions {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-top: 36px;
+}
+
+.left-actions,
+.right-actions {
+  display: flex;
   align-items: center;
   gap: 12px;
-  margin-top: 26px;
 }
 
 .delete-button,

src/app/pages/dashboard/dashboard.html

@@ -46,7 +46,6 @@
           <div>
             <h2>最近開いた檀家・世帯</h2>
           </div>
-          <a class="text-link" href="#">一覧へ</a>
         </div>
 
         <div class="recent-table" role="table" aria-label="最近開いた檀家">
@@ -58,29 +57,25 @@
             <div class="cell" role="columnheader">最終更新</div>
           </div>
 
-          <a class="recent-row" href="#" role="row">
-            <div class="cell" role="cell">鈴木 太郎</div>
-            <div class="cell muted" role="cell">すずき</div>
-            <div class="cell" role="cell">市内 1-2-3</div>
-            <div class="cell" role="cell">6月12日</div>
-            <div class="cell muted" role="cell">今日</div>
-          </a>
-
-          <a class="recent-row" href="#" role="row">
-            <div class="cell" role="cell">佐藤 恵一</div>
-            <div class="cell muted" role="cell">さとう</div>
-            <div class="cell" role="cell">市内 2-8-1</div>
-            <div class="cell" role="cell">7月4日</div>
-            <div class="cell muted" role="cell">昨日</div>
-          </a>
-
-          <a class="recent-row" href="#" role="row">
-            <div class="cell" role="cell">田中 雪子</div>
-            <div class="cell muted" role="cell">たなか</div>
-            <div class="cell" role="cell">市内 3-4-6</div>
-            <div class="cell muted" role="cell">未設定</div>
-            <div class="cell muted" role="cell">5日前</div>
-          </a>
+          @if (recentDankaList.length > 0) {
+            @for (recent of recentDankaList; track recent.danka.id) {
+              <a class="recent-row" [routerLink]="['/danka-detail', recent.danka.id]" role="row">
+                <div class="cell" role="cell">{{ recent.danka.householder }}</div>
+                <div class="cell muted" role="cell">{{ recent.danka.householderFurigana }}</div>
+                <div class="cell" role="cell">{{ recent.danka.address }}</div>
+                <div class="cell" role="cell">{{ recent.nextMemorialLabel }}</div>
+                <div class="cell muted" role="cell">{{ recent.updatedAtLabel }}</div>
+              </a>
+            }
+          } @else {
+            <div class="recent-row" role="row">
+              <div class="cell muted" role="cell">表示できる檀家・世帯はありません</div>
+              <div class="cell muted" role="cell">-</div>
+              <div class="cell muted" role="cell">-</div>
+              <div class="cell muted" role="cell">-</div>
+              <div class="cell muted" role="cell">-</div>
+            </div>
+          }
         </div>
       </section>
 
@@ -89,7 +84,6 @@
           <div>
             <h2>近日の法要・命日</h2>
           </div>
-          <a class="text-link" href="#">年次法要一覧へ</a>
         </div>
 
         <div class="upcoming-list">

src/app/pages/dashboard/dashboard.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { KakochoService } from '../../services/kakocho-service';
 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';
 
@@ -16,6 +17,12 @@ interface UpcomingMemorial {
   status: '準備確認' | '要確認';
 }
 
+interface RecentDanka {
+  danka: Danka;
+  nextMemorialLabel: string;
+  updatedAtLabel: string;
+}
+
 @Component({
   selector: 'app-dashboard',
   imports: [AppHeader, AppSideMenu, RouterLink],
@@ -27,6 +34,7 @@ export class Dashboard {
   todayMemorialCount = 0;
   upcomingWeeklyMemorialCount = 0;
   monthlyMemorialCount = 0;
+  recentDankaList: RecentDanka[] = [];
   upcomingMemorials: UpcomingMemorial[] = [];
 
   private readonly targetYear = new Date().getFullYear();
@@ -37,9 +45,18 @@ export class Dashboard {
   ) {
     this.setWeeklyMemorialSummary();
     this.setMonthlyMemorialSummary();
+    this.setRecentDankaList();
     this.setUpcomingMemorials();
   }
 
+  private setRecentDankaList(): void {
+    this.recentDankaList = this.dankaService.getRecentDankaList(5).map((danka) => ({
+      danka,
+      nextMemorialLabel: this.getNextMemorialLabel(danka.id),
+      updatedAtLabel: this.formatUpdatedAt(danka.updatedAt),
+    }));
+  }
+
   private setWeeklyMemorialSummary(): void {
     const today = this.toDateOnly(new Date());
     const weekEnd = this.addDays(this.getWeekStart(today), 6);
@@ -150,6 +167,54 @@ export class Dashboard {
     return `${date.getMonth() + 1}月${date.getDate()}日`;
   }
 
+  private getNextMemorialLabel(dankaId: string): string {
+    const today = this.toDateOnly(new Date());
+    const nextMemorial = this.kakochoService
+      .getKakochoByDankaId(dankaId)
+      .map((kakocho) => {
+        const deathDate = this.parseDate(kakocho.deathDate);
+        if (!deathDate) {
+          return null;
+        }
+
+        const memorialDate = new Date(this.targetYear, deathDate.getMonth(), deathDate.getDate());
+        if (memorialDate < today || !this.getMemorialType(deathDate)) {
+          return null;
+        }
+
+        return memorialDate;
+      })
+      .filter((date): date is Date => date !== null)
+      .sort((a, b) => a.getTime() - b.getTime())[0];
+
+    return nextMemorial ? this.formatDateLabel(nextMemorial, today) : '未設定';
+  }
+
+  private formatUpdatedAt(updatedAt: string): string {
+    const updatedDate = this.parseDate(updatedAt);
+    const today = this.toDateOnly(new Date());
+
+    if (!updatedDate) {
+      return '未登録';
+    }
+
+    const diffDays = Math.floor((today.getTime() - updatedDate.getTime()) / 86400000);
+
+    if (diffDays === 0) {
+      return '今日';
+    }
+
+    if (diffDays === 1) {
+      return '昨日';
+    }
+
+    if (diffDays > 1 && diffDays <= 7) {
+      return `${diffDays}日前`;
+    }
+
+    return `${updatedDate.getMonth() + 1}月${updatedDate.getDate()}日`;
+  }
+
   private getWeekStart(date: Date): Date {
     const day = date.getDay();
     const diff = day === 0 ? -6 : 1 - day;

src/app/services/dankaService.ts

@@ -5,6 +5,8 @@ import { Danka } from '../models/danka';
   providedIn: 'root',
 })
 export class DankaService {
+  private readonly recentDankaStorageKey = 'kaimyo-management.recent-danka';
+
   private dankaList: Danka[] = [
     {
       id: '1',
@@ -60,6 +62,33 @@ export class DankaService {
     return this.dankaList.find((danka) => danka.id === id);
   }
 
+  recordDankaOpened(id: string): void {
+    if (!this.getDankaById(id)) {
+      return;
+    }
+
+    const recentIds = [
+      id,
+      ...this.getRecentDankaIds().filter((recentId) => recentId !== id),
+    ].slice(0, 5);
+
+    this.saveRecentDankaIds(recentIds);
+  }
+
+  getRecentDankaList(limit = 5): Danka[] {
+    const recentDanka = this.getRecentDankaIds()
+      .map((id) => this.getDankaById(id))
+      .filter((danka): danka is Danka => danka !== undefined);
+
+    if (recentDanka.length > 0) {
+      return recentDanka.slice(0, limit);
+    }
+
+    return [...this.dankaList]
+      .sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+      .slice(0, limit);
+  }
+
   //DBへの檀家情報の登録
   saveDanka(updatedDanka: Danka): void {
     const index = this.dankaList.findIndex((danka) => danka.id === updatedDanka.id);
@@ -78,4 +107,34 @@ export class DankaService {
     }
     this.dankaList.splice(index, 1);
   }
+
+  private getRecentDankaIds(): string[] {
+    if (!this.canUseLocalStorage()) {
+      return [];
+    }
+
+    const value = localStorage.getItem(this.recentDankaStorageKey);
+    if (!value) {
+      return [];
+    }
+
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed.filter((id): id is string => typeof id === 'string') : [];
+    } catch {
+      return [];
+    }
+  }
+
+  private saveRecentDankaIds(ids: string[]): void {
+    if (!this.canUseLocalStorage()) {
+      return;
+    }
+
+    localStorage.setItem(this.recentDankaStorageKey, JSON.stringify(ids));
+  }
+
+  private canUseLocalStorage(): boolean {
+    return typeof localStorage !== 'undefined';
+  }
 }