[add]

トップページを作成

src/app/pages/dashboard/dashboard.html

@@ -0,0 +1,92 @@
+<app-header></app-header>
+
+<div class="dashboard-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="dashboard-main">
+    <section class="dashboard-panel">
+      <div class="dashboard-heading">
+        <h1>ダッシュボード</h1>
+        <p>今日よく使う操作</p>
+      </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>
+        </a>
+
+        <a class="summary-card" href="#">
+          <p class="summary-label">まとめて検索</p>
+          <p class="summary-main">検索へ</p>
+          <p class="summary-sub">檀家・家族・過去帳を横断</p>
+        </a>
+
+        <a class="summary-card" href="#">
+          <p class="summary-label">新規登録</p>
+          <p class="summary-main">追加する</p>
+          <p class="summary-sub">檀家・家族・故人を入力</p>
+        </a>
+      </div>
+
+      <section class="recent-section">
+        <div class="section-title-area">
+          <h2>最近開いた檀家（世帯）</h2>
+          <p>よく使う世帯は一覧からすぐ開けます。</p>
+        </div>
+
+        <div class="recent-table">
+          <div class="recent-table-header">
+            <div>世帯主</div>
+            <div>ふりがな</div>
+            <div>住所</div>
+            <div>家族</div>
+            <div>故人</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>
+
+          <a class="recent-table-row" href="#">
+            <div>佐藤 恒一</div>
+            <div>さとう</div>
+            <div>市内 2-8-1</div>
+            <div>3名</div>
+            <div>1名</div>
+          </a>
+
+          <a class="recent-table-row" href="#">
+            <div>田中 雅子</div>
+            <div>たなか</div>
+            <div>市内 3-4-6</div>
+            <div>2名</div>
+            <div>0名</div>
+          </a>
+        </div>
+      </section>
+
+      <section class="quick-open-section">
+        <h2>すぐ開く</h2>
+
+        <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>
+        </div>
+      </section>
+    </section>
+  </main>
+</div>

src/app/pages/dashboard/dashboard.scss

@@ -0,0 +1,202 @@
+:host {
+  display: block;
+  min-height: 100vh;
+  background: #f4eee4;
+  color: #2f2720;
+}
+
+.dashboard-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding-top: 0;
+  background: #f4eee4;
+}
+
+.dashboard-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.dashboard-panel {
+  min-height: 650px;
+  padding: 26px 34px 40px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 76px;
+  box-sizing: border-box;
+}
+
+.dashboard-heading {
+  margin-bottom: 18px;
+}
+
+.dashboard-heading h1 {
+  margin: 0;
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  color: #2f2720;
+  letter-spacing: 0.02em;
+}
+
+.dashboard-heading p {
+  margin: 4px 0 0;
+  font-size: 16px;
+  color: #6f6257;
+}
+
+.summary-card-list {
+  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;
+}
+
+.summary-card:hover {
+  background: #fbf7f1;
+}
+
+.summary-label {
+  margin: 0;
+  font-size: 16px;
+  color: #6f6257;
+  line-height: 1.3;
+}
+
+.summary-main {
+  margin: 2px 0 0;
+  font-size: 30px;
+  font-weight: 800;
+  line-height: 1.15;
+  color: #2f2720;
+}
+
+.summary-sub {
+  margin: 2px 0 0;
+  font-size: 15px;
+  color: #6f6257;
+  line-height: 1.35;
+}
+
+.recent-section {
+  margin-top: 0;
+}
+
+.section-title-area {
+  margin-bottom: 4px;
+}
+
+.section-title-area h2,
+.quick-open-section h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 800;
+  color: #2f2720;
+}
+
+.section-title-area p {
+  margin: 2px 0 0;
+  font-size: 15px;
+  color: #6f6257;
+}
+
+.recent-table {
+  width: 100%;
+}
+
+.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;
+}
+
+.recent-table-header {
+  min-height: 36px;
+  padding: 0 12px;
+  background: #eadfce;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  box-sizing: border-box;
+  color: #5a4a3c;
+  font-size: 15px;
+  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;
+  font-size: 16px;
+  text-decoration: none;
+}
+
+.recent-table-row:hover {
+  background: #f3eadc;
+}
+
+.recent-table-row .strong {
+  font-weight: 800;
+}
+
+.quick-open-section {
+  margin-top: 24px;
+}
+
+.quick-button-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.quick-button {
+  height: 54px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #e6d8c4;
+  color: #2f2720;
+  font-size: 18px;
+  font-weight: 800;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.quick-button:hover {
+  background: #d9c7ad;
+}
+
+.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/dashboard/dashboard.spec.ts

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

src/app/pages/dashboard/dashboard.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { AppHeader } from '../../share/header/app-header';
+import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [AppHeader, AppSideMenu],
+  templateUrl: './dashboard.html',
+  styleUrl: './dashboard.scss',
+})
+export class Dashboard {}