[update]

ダッシュボードのHTMLとSCSSを更新

src/app/pages/dashboard/dashboard.html

@@ -5,86 +5,122 @@
 
   <main class="dashboard-main">
     <section class="dashboard-panel">
-      <div class="dashboard-heading">
-        <h1>ダッシュボード</h1>
-        <p>今日よく使う操作</p>
+      <div class="page-head">
+        <div>
+          <h1>ホーム</h1>
+        </div>
+        <div class="date-pill">2026年5月28日 木曜日</div>
       </div>
 
-      <div class="summary-card-list">
-        <a class="summary-card" href="#">
-          <p class="summary-label">年次法要の対象</p>
-          <p class="summary-main">12 名</p>
-          <p class="summary-sub">対象年 2026 を表示中</p>
-        </a>
-
-        <a class="summary-card" href="#">
-          <p class="summary-label">檀家（世帯）を探す</p>
-          <p class="summary-main">一覧へ</p>
-          <p class="summary-sub">氏名・住所・電話で確認</p>
+      <section class="overview" aria-label="概要">
+        <a class="card primary" href="#">
+          <div class="card-label">今週の法要</div>
+          <div class="metric"><strong>4</strong><span>件</span></div>
+          <p class="card-text">本日 1件、明日以降 3件。準備状況を確認できます。</p>
         </a>
 
-        <a class="summary-card" href="#">
-          <p class="summary-label">まとめて検索</p>
-          <p class="summary-main">検索へ</p>
-          <p class="summary-sub">檀家・家族・過去帳を横断</p>
+        <a class="card" href="#">
+          <div class="card-label">今月の年忌法要</div>
+          <div class="metric"><strong>12</strong><span>名</span></div>
+          <p class="card-text">未確認 3名 / 案内済 7名 / 完了 2名</p>
         </a>
 
-        <a class="summary-card" href="#">
-          <p class="summary-label">新規登録</p>
-          <p class="summary-main">追加する</p>
-          <p class="summary-sub">檀家・家族・故人を入力</p>
-        </a>
-      </div>
+        <div class="search-card">
+          <div class="search-head">
+            <div class="search-label">まとめて検索</div>
+            <div class="search-title">檀家・家族・故人を探す</div>
+          </div>
+          <input
+            class="search-input"
+            type="search"
+            placeholder="氏名、ふりがな、住所、戒名で検索"
+            aria-label="まとめて検索"
+          />
+          <button class="search-button" type="button">検索</button>
+        </div>
+      </section>
 
-      <section class="recent-section">
-        <div class="section-title-area">
-          <h2>最近開いた檀家（世帯）</h2>
-          <p>よく使う世帯は一覧からすぐ開けます。</p>
+      <section class="section">
+        <div class="section-head">
+          <div>
+            <h2>最近開いた檀家・世帯</h2>
+          </div>
+          <a class="text-link" href="#">一覧へ</a>
         </div>
 
-        <div class="recent-table">
-          <div class="recent-table-header">
-            <div>世帯主</div>
-            <div>ふりがな</div>
-            <div>住所</div>
-            <div>家族</div>
-            <div>故人</div>
+        <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>
 
-          <a class="recent-table-row" href="#">
-            <div class="strong">鈴木 太郎</div>
-            <div>すずき</div>
-            <div>市内 1-2-3</div>
-            <div>4名</div>
-            <div>2名</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-table-row" href="#">
-            <div>佐藤 恒一</div>
-            <div>さとう</div>
-            <div>市内 2-8-1</div>
-            <div>3名</div>
-            <div>1名</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">市内 2-8-1</div>
+            <div class="cell" role="cell">7月4日</div>
+            <div class="cell muted" role="cell">昨日</div>
           </a>
 
-          <a class="recent-table-row" href="#">
-            <div>田中 雅子</div>
-            <div>たなか</div>
-            <div>市内 3-4-6</div>
-            <div>2名</div>
-            <div>0名</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">市内 3-4-6</div>
+            <div class="cell muted" role="cell">未設定</div>
+            <div class="cell muted" role="cell">5日前</div>
           </a>
         </div>
       </section>
 
-      <section class="quick-open-section">
-        <h2>すぐ開く</h2>
+      <section class="section">
+        <div class="section-head">
+          <div>
+            <h2>近日の法要・命日</h2>
+          </div>
+          <a class="text-link" href="#">年次法要一覧へ</a>
+        </div>
+
+        <div class="upcoming-list">
+          <a class="upcoming-item important" href="#">
+            <div class="upcoming-date">今日</div>
+            <div class="upcoming-main">
+              <div class="upcoming-title">鈴木家　美咲様　三回忌</div>
+              <div class="upcoming-sub">市内 1-2-3 / 連絡先確認済</div>
+            </div>
+            <div class="upcoming-type">年忌法要</div>
+            <div class="upcoming-status">準備確認</div>
+          </a>
+
+          <a class="upcoming-item" href="#">
+            <div class="upcoming-date">6月2日</div>
+            <div class="upcoming-main">
+              <div class="upcoming-title">佐藤家　恵夫様　七回忌</div>
+              <div class="upcoming-sub">市内 2-8-1 / 案内状送付済</div>
+            </div>
+            <div class="upcoming-type">年忌法要</div>
+            <div class="upcoming-status">案内済</div>
+          </a>
 
-        <div class="quick-button-list">
-          <a class="quick-button" href="#">檀家一覧</a>
-          <a class="quick-button" href="#">年次法要一覧</a>
-          <a class="quick-button" href="#">まとめて検索</a>
-          <a class="quick-button" href="#">家系図</a>
+          <a class="upcoming-item" href="#">
+            <div class="upcoming-date">6月7日</div>
+            <div class="upcoming-main">
+              <div class="upcoming-title">田中家　雪音様　祥月命日</div>
+              <div class="upcoming-sub">市内 3-4-6 / 法要日は未設定</div>
+            </div>
+            <div class="upcoming-type">命日</div>
+            <div class="upcoming-status">要確認</div>
+          </a>
         </div>
       </section>
     </section>

src/app/pages/dashboard/dashboard.scss

@@ -1,202 +1,332 @@
 :host {
+  --bg: #f6f0e7;
+  --surface: #fffdf9;
+  --surface-soft: #fbf7f0;
+  --line: #d8caba;
+  --text: #2f2924;
+  --muted: #75695d;
+  --brown: #8f6944;
+  --brown-dark: #6f4c2e;
+  --accent: #b88745;
+  --focus: #f6e5c9;
+
   display: block;
   min-height: 100vh;
-  background: #f4eee4;
-  color: #2f2720;
+  color: var(--text);
+  background: var(--bg);
 }
 
-.dashboard-page {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding-top: 0;
-  background: #f4eee4;
+a {
+  color: inherit;
+  text-decoration: none;
 }
 
-.dashboard-main {
-  flex: 1;
-  padding-right: 34px;
-  box-sizing: border-box;
+.dashboard-page {
+  display: grid;
+  grid-template-columns: 172px minmax(0, 1fr);
+  gap: 20px;
+  padding: 0 38px 36px 0;
+  background: var(--bg);
 }
 
 .dashboard-panel {
-  min-height: 650px;
-  padding: 26px 34px 40px;
-  background: #ffffff;
-  border: 2px solid #d8caba;
-  border-radius: 76px;
-  box-sizing: border-box;
+  min-height: 760px;
+  padding: 34px 42px 40px;
+  background: var(--surface);
+  border: 2px solid var(--line);
+  border-radius: 64px;
 }
 
-.dashboard-heading {
-  margin-bottom: 18px;
+.page-head,
+.section-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
 }
 
-.dashboard-heading h1 {
+.page-head {
+  align-items: flex-end;
+  margin-bottom: 22px;
+}
+
+h1,
+h2,
+p {
   margin: 0;
-  font-size: 32px;
-  line-height: 1.2;
+}
+
+h1 {
+  font-size: 34px;
+  line-height: 1.1;
   font-weight: 800;
-  color: #2f2720;
-  letter-spacing: 0.02em;
 }
 
-.dashboard-heading p {
-  margin: 4px 0 0;
-  font-size: 16px;
-  color: #6f6257;
+.lead {
+  margin-top: 8px;
+  color: var(--muted);
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.date-pill {
+  padding: 10px 18px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface-soft);
+  color: var(--muted);
+  font-weight: 700;
+  white-space: nowrap;
 }
 
-.summary-card-list {
+.overview {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 18px;
-  margin-bottom: 34px;
-}
-
-.summary-card {
-  min-height: 116px;
-  padding: 14px 20px 16px;
-  border: 2px solid #d8caba;
-  border-radius: 20px;
-  background: #ffffff;
-  color: #2f2720;
-  text-decoration: none;
-  box-sizing: border-box;
-  display: block;
+  grid-template-columns: 1fr 1fr 2fr;
+  gap: 16px;
+  margin-bottom: 28px;
 }
 
-.summary-card:hover {
-  background: #fbf7f1;
+.card,
+.search-card {
+  min-height: 136px;
+  border: 2px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
 }
 
-.summary-label {
-  margin: 0;
-  font-size: 16px;
-  color: #6f6257;
-  line-height: 1.3;
+.card {
+  display: block;
+  padding: 18px 20px;
 }
 
-.summary-main {
-  margin: 2px 0 0;
-  font-size: 30px;
-  font-weight: 800;
-  line-height: 1.15;
-  color: #2f2720;
+.card:hover,
+.recent-row:hover,
+.upcoming-item:hover {
+  background: #fff8ed;
 }
 
-.summary-sub {
-  margin: 2px 0 0;
+.card.primary {
+  background: var(--focus);
+  border-color: var(--accent);
+}
+
+.card-label,
+.search-label {
+  color: var(--muted);
   font-size: 15px;
-  color: #6f6257;
-  line-height: 1.35;
+  font-weight: 800;
 }
 
-.recent-section {
-  margin-top: 0;
+.metric {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-top: 8px;
 }
 
-.section-title-area {
-  margin-bottom: 4px;
+.metric strong {
+  font-size: 42px;
+  line-height: 1;
 }
 
-.section-title-area h2,
-.quick-open-section h2 {
-  margin: 0;
-  font-size: 20px;
+.metric span {
+  font-size: 18px;
   font-weight: 800;
-  color: #2f2720;
 }
 
-.section-title-area p {
-  margin: 2px 0 0;
+.card-text {
+  margin-top: 10px;
+  color: var(--muted);
   font-size: 15px;
-  color: #6f6257;
+  font-weight: 700;
+  line-height: 1.5;
 }
 
-.recent-table {
-  width: 100%;
+.search-card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: end;
+  gap: 12px;
+  padding: 18px 20px;
 }
 
-.recent-table-header,
-.recent-table-row {
-  display: grid;
-  grid-template-columns: 2.1fr 1fr 3.1fr 0.8fr 0.8fr;
-  align-items: center;
-  column-gap: 12px;
+.search-head {
+  grid-column: 1 / -1;
 }
 
-.recent-table-header {
-  min-height: 36px;
-  padding: 0 12px;
-  background: #eadfce;
-  border: 2px solid #d8caba;
+.search-title {
+  margin-top: 4px;
+  font-size: 24px;
+  font-weight: 900;
+}
+
+.search-input {
+  width: 100%;
+  min-height: 46px;
+  padding: 0 14px;
+  border: 2px solid var(--line);
   border-radius: 6px;
-  box-sizing: border-box;
-  color: #5a4a3c;
-  font-size: 15px;
+  background: var(--surface-soft);
+  color: var(--text);
+  font-size: 16px;
   font-weight: 700;
 }
 
-.recent-table-row {
-  min-height: 58px;
-  margin-top: 4px;
-  padding: 0 12px;
-  background: #fbf7f1;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  box-sizing: border-box;
-  color: #2f2720;
+.search-button {
+  min-width: 104px;
+  min-height: 46px;
+  padding: 0 20px;
+  border: 2px solid var(--brown);
+  border-radius: 6px;
+  background: var(--brown);
+  color: #ffffff;
   font-size: 16px;
-  text-decoration: none;
+  font-weight: 800;
+}
+
+.section {
+  margin-top: 26px;
 }
 
-.recent-table-row:hover {
-  background: #f3eadc;
+.section-head {
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-.recent-table-row .strong {
+h2 {
+  font-size: 22px;
+  line-height: 1.3;
   font-weight: 800;
 }
 
-.quick-open-section {
-  margin-top: 24px;
+.section-note {
+  color: var(--muted);
+  font-size: 14px;
 }
 
-.quick-button-list {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-  margin-top: 8px;
+.text-link {
+  color: var(--brown-dark);
+  font-weight: 900;
+  white-space: nowrap;
 }
 
-.quick-button {
-  height: 54px;
-  border: 2px solid #d8caba;
+.recent-table {
+  overflow: hidden;
+  border: 2px solid var(--line);
   border-radius: 8px;
-  background: #e6d8c4;
-  color: #2f2720;
-  font-size: 18px;
+  background: var(--surface);
+}
+
+.recent-row {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr 1.4fr 0.95fr 0.85fr;
+  min-height: 52px;
+  border-top: 1px solid var(--line);
+  align-items: center;
+}
+
+.recent-row-head {
+  min-height: 40px;
+  border-top: 0;
+  background: #eee2d2;
+  color: var(--muted);
   font-weight: 800;
-  text-decoration: none;
+}
+
+.cell {
+  padding: 10px 14px;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.upcoming-list {
+  display: grid;
+  gap: 10px;
+}
+
+.upcoming-item {
+  display: grid;
+  grid-template-columns: 132px 1fr 120px 92px;
+  align-items: center;
+  min-height: 58px;
+  overflow: hidden;
+  border: 2px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.upcoming-item.important {
+  background: #fff8ed;
+  border-color: var(--accent);
+}
+
+.upcoming-date {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
+  height: 100%;
+  min-height: 58px;
+  background: #eee2d2;
+  color: var(--brown-dark);
+  font-size: 17px;
+  font-weight: 900;
 }
 
-.quick-button:hover {
-  background: #d9c7ad;
+.upcoming-main {
+  padding: 10px 16px;
 }
 
-.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;
+.upcoming-title {
+  font-size: 17px;
+  font-weight: 900;
+}
+
+.upcoming-sub {
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.upcoming-type,
+.upcoming-status {
+  padding: 10px 12px;
+  color: var(--muted);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.upcoming-status {
+  color: var(--brown-dark);
+  text-align: right;
+}
+
+@media (max-width: 1100px) {
+  .dashboard-page {
+    grid-template-columns: 1fr;
+    padding: 0 24px 32px;
+  }
+
+  .dashboard-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
+  }
+
+  .overview,
+  .upcoming-item {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .search-card {
+    grid-template-columns: 1fr;
+  }
+
+  .upcoming-date {
+    justify-content: flex-start;
+    padding-left: 14px;
+  }
 }