再描画処理

src/app/pages/dashboard/dashboard.html

@@ -52,8 +52,7 @@
 
         <div class="recent-table" role="table" aria-label="最近開いた檀家">
           <div class="recent-row recent-row-head" role="row">
-            <div class="cell" role="columnheader">施主名</div>
-            <div class="cell" role="columnheader">ふりがな</div>
+            <div class="cell" role="columnheader">施主名・ふりがな</div>
             <div class="cell" role="columnheader">住所</div>
             <div class="cell" role="columnheader">次の法要</div>
             <div class="cell" role="columnheader">最終更新</div>
@@ -62,11 +61,13 @@
           @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">
+                  <p class="recent-name">{{ recent.danka.householder }}</p>
+                  <p class="recent-sub">{{ recent.danka.householderFurigana || 'ふりがな未登録' }}</p>
+                </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>
+                <div class="cell" role="cell">{{ recent.updatedAtLabel }}</div>
               </a>
             }
           } @else {
@@ -75,7 +76,6 @@
               <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>

src/app/pages/dashboard/dashboard.scss

@@ -104,11 +104,6 @@ h1 {
   background: #fff8ed;
 }
 
-.card.primary {
-  background: var(--focus);
-  border-color: var(--accent);
-}
-
 .card-label,
 .search-label {
   color: var(--muted);
@@ -203,12 +198,6 @@ h2 {
   font-size: 14px;
 }
 
-.text-link {
-  color: var(--brown-dark);
-  font-weight: 900;
-  white-space: nowrap;
-}
-
 .recent-table {
   overflow: hidden;
   border: 2px solid var(--line);
@@ -218,7 +207,7 @@ h2 {
 
 .recent-row {
   display: grid;
-  grid-template-columns: 1.2fr 1fr 1.4fr 0.95fr 0.85fr;
+  grid-template-columns: 1.4fr 1.6fr 0.95fr 0.85fr;
   min-height: 52px;
   border-top: 1px solid var(--line);
   align-items: center;
@@ -242,6 +231,13 @@ h2 {
   color: var(--muted);
 }
 
+.recent-sub {
+  margin-top: 4px;
+  color: var(--text);
+  font-size: 13px;
+  line-height: 1.35;
+}
+
 .upcoming-list {
   display: grid;
   gap: 10px;

src/app/pages/dashboard/dashboard.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import { KakochoService } from '../../services/kakocho-service';
 import { DankaService } from '../../services/dankaService';
@@ -46,6 +46,7 @@ export class Dashboard {
     private kakochoService: KakochoService,
     private dankaService: DankaService,
     private router: Router,
+    private cdr: ChangeDetectorRef,
   ) {
     this.setWeeklyMemorialSummary();
     this.setMonthlyMemorialSummary();
@@ -71,6 +72,7 @@ export class Dashboard {
         updatedAtLabel: this.formatUpdatedAt(danka.updatedAt),
       })),
     );
+    this.cdr.detectChanges();
   }
 
   private async setWeeklyMemorialSummary(): Promise<void> {
@@ -97,6 +99,7 @@ export class Dashboard {
       return deathDate?.getMonth() === today.getMonth() && deathDate.getDate() === today.getDate();
     }).length;
     this.upcomingWeeklyMemorialCount = this.weeklyMemorialCount - this.todayMemorialCount;
+    this.cdr.detectChanges();
   }
 
   private async setMonthlyMemorialSummary(): Promise<void> {
@@ -110,6 +113,7 @@ export class Dashboard {
 
       return deathDate.getMonth() === today.getMonth();
     }).length;
+    this.cdr.detectChanges();
   }
 
   private async setUpcomingMemorials(): Promise<void> {
@@ -150,6 +154,7 @@ export class Dashboard {
       .filter((memorial): memorial is UpcomingMemorial => memorial !== null)
       .sort((a, b) => a.date.getTime() - b.date.getTime() || a.title.localeCompare(b.title, 'ja'))
       .slice(0, 3);
+    this.cdr.detectChanges();
   }
 
   private isMemorialTarget(deathDate: Date): boolean {
@@ -207,7 +212,7 @@ export class Dashboard {
     return nextMemorial ? this.formatDateLabel(nextMemorial, today) : '未設定';
   }
 
-  private formatUpdatedAt(updatedAt: string): string {
+  private formatUpdatedAt(updatedAt: unknown): string {
     const updatedDate = this.parseDate(updatedAt);
     const today = this.toDateOnly(new Date());
 
@@ -253,7 +258,23 @@ export class Dashboard {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
   }
 
-  private parseDate(value: string): Date | null {
+  private parseDate(value: unknown): Date | null {
+    if (!value) {
+      return null;
+    }
+
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === 'object' && 'toDate' in value && typeof value.toDate === 'function') {
+      return value.toDate();
+    }
+
+    if (typeof value !== 'string') {
+      return null;
+    }
+
     const [year, month, day] = value.split('-').map(Number);
     if (!year || !month || !day) {
       return null;

src/app/share/side-menu/app-side-menu.scss

@@ -18,10 +18,11 @@
 
 .menu-title {
   margin: 0 0 14px;
-  padding-left: 10px;
+  padding-left: 0;
   font-size: 15px;
   font-weight: 700;
   color: #5a4a3c;
+  text-align: center;
 }
 
 .menu-list {