feat: add new empty pages

app/src/contents/common/header.test.tsx

@@ -0,0 +1,25 @@
+import { suite } from "uvu";
+import * as assert from "uvu/assert";
+
+import { render, fireEvent, waitFor } from "@solidjs/testing-library";
+import { isInDocument, hasStyle } from "solid-dom-testing";
+
+import Header from "./header";
+
+const test = suite<ReturnType<typeof render>>("<Header />");
+
+test.before.each((context) => {
+	const returnValue = render(() => <Header />);
+	for (const name of Object.getOwnPropertyNames(returnValue)) {
+		// @ts-expect-error
+		context[name] = returnValue[name];
+	}
+});
+
+test.after.each(({ unmount }) => unmount());
+
+test("page render dashboard title", ({ getByText }) => {
+	assert.ok(isInDocument(getByText("Dashboard")));
+});
+
+test.run();

app/src/contents/common/header.tsx

@@ -0,0 +1,59 @@
+import { signOutUser } from "../../service/auth";
+
+const Header = () => {
+	const handleSelectChange = (e: Event) => {
+		const target = e.target as HTMLSelectElement;
+		const value = target.value;
+		switch (value) {
+			case "tenant":
+				window.location.href = "/dashboard/tenant";
+				break;
+			case "account":
+				window.location.href = "/dashboard/account";
+				break;
+			case "product":
+				window.location.href = "/dashboard/product";
+				break;
+			case "setting":
+				window.location.href = "/dashboard/setting";
+				break;
+			default:
+				break;
+		}
+	};
+	return (
+		<header class="bg-white shadow">
+			<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+				<h1 class="text-3xl font-bold leading-tight text-gray-900">
+					Dashboard
+				</h1>
+				<div class="flex items-center justify-end">
+					<div class="ml-4 flex items-center md:ml-6">
+						<select
+							onChange={(e) => handleSelectChange(e)}
+							class="block appearance-none bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
+						>
+							<option value="">👉Select</option>
+							<option value="tenant">🏘️Tenant Info</option>
+							<option value="account">🪪Account Info</option>
+							<option value="product">🛫Product Info</option>
+							<option value="setting">⚙️Settings</option>
+						</select>
+						<button
+							type="button"
+							class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mx-2 rounded"
+							onClick={async () => {
+								await signOutUser();
+								window.location.href = "/";
+							}}
+						>
+							Logout
+						</button>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+};
+
+export default Header;

app/src/index.tsx

@@ -2,11 +2,13 @@ import { render } from "solid-js/web";
 import { Router, Route } from "@solidjs/router";
 import "./index.css";
 
-import Login from "./pages/login";
-import Dashboard from "./pages/dashboard";
-import Page403 from "./pages/403";
+import Login from "./pages/login/login";
+import Page403 from "./pages/403/403";
 import AddAccount from "./contents/account/addAccount";
 import AddTenant from "./contents/tenant/addTenant";
+import AccountPage from "./pages/account/account";
+import TenantPage from "./pages/tenant/tenant";
+import SettingPage from "./pages/setting/setting";
 import { isVerifiedAccount } from "./service/auth";
 
 const root = document.getElementById("root");
@@ -23,8 +25,23 @@ if (root) {
 			<Router>
 				<Route path="/" component={Login} />
 				<Route
-					path="/dashboard/"
-					component={Dashboard}
+					path="/dashboard/account"
+					component={AccountPage}
+					load={async () => await checkAuth()}
+				/>
+				<Route
+					path="/dashboard/tenant"
+					component={TenantPage}
+					load={async () => await checkAuth()}
+				/>
+				<Route
+					path="/dashboard/product"
+					component={SettingPage}
+					load={async () => await checkAuth()}
+				/>
+				<Route
+					path="/dashboard/setting"
+					component={SettingPage}
 					load={async () => await checkAuth()}
 				/>
 				<Route

app/src/pages/dashboard.test.tsx → app/src/pages/account/account.test.tsx

@@ -4,12 +4,12 @@ import * as assert from "uvu/assert";
 import { render, fireEvent, waitFor } from "@solidjs/testing-library";
 import { isInDocument, hasStyle } from "solid-dom-testing";
 
-import Dashboard from "./dashboard";
+import AccountPage from "./account";
 
 const test = suite<ReturnType<typeof render>>("<Dashboard />");
 
 test.before.each((context) => {
-	const returnValue = render(() => <Dashboard />);
+	const returnValue = render(() => <AccountPage />);
 	for (const name of Object.getOwnPropertyNames(returnValue)) {
 		// @ts-expect-error
 		context[name] = returnValue[name];
@@ -22,8 +22,4 @@ test("page render dashboard title", ({ getByText }) => {
 	assert.ok(isInDocument(getByText("Dashboard")));
 });
 
-test("page render dashboard message", ({ getByText }) => {
-	assert.ok(isInDocument(getByText("Welcome to your dashboard!")));
-});
-
 test.run();

app/src/pages/account/account.tsx

@@ -0,0 +1,58 @@
+import { createSignal, createEffect, Show } from "solid-js";
+import { getCurrentUser, signOutUser } from "../../service/auth";
+import { getDocumentsWithQuery, firestore } from "../../service/firestore";
+import AccountContent from "../../contents/account/accountContent";
+import Header from "../../contents/common/header";
+import type { QueryObj } from "../../service/firestore";
+import type { Account } from "../../schema/account";
+
+const AccountPage = () => {
+	const [accountInfo, setAccountInfo] = createSignal<Account | null>(null);
+	createEffect(async () => {
+		const info = await getAccountInfo();
+		setAccountInfo(info);
+	});
+	return (
+		<div class="bg-gray-100 h-screen">
+			<Header />
+			<div class="max-w-7xl mx-auto my-2 py-6 sm:px-6 lg:px-8">
+				<Show when={accountInfo() === null}>
+					<div class="flex justify-center items-center">
+						<div class="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900" />
+					</div>
+				</Show>
+				<Show when={accountInfo() !== null}>
+					{AccountContent(accountInfo() !== null, accountInfo())}
+				</Show>
+			</div>
+		</div>
+	);
+};
+
+export default AccountPage;
+
+async function getAccountInfo(): Promise<Account | null> {
+	const user = await getCurrentUser();
+	const uid = user?.uid;
+	const collectionName = "accounts";
+	const queryObj: QueryObj = {
+		field: "id",
+		operator: "==",
+		value: uid,
+	};
+	const result = await getDocumentsWithQuery(
+		firestore,
+		collectionName,
+		queryObj,
+	);
+	if (result instanceof Error) {
+		return null;
+	}
+	if (result.length === 0) {
+		return null;
+	}
+	if (result.length > 1) {
+		return null;
+	}
+	return result[0] as Account;
+}

app/src/pages/login.tsx → app/src/pages/login/login.tsx

@@ -1,5 +1,5 @@
 import { createSignal } from "solid-js";
-import { signIn } from "../service/auth";
+import { signIn } from "../../service/auth";
 
 const Login = () => {
 	const [email, setEmail] = createSignal("");
@@ -29,7 +29,7 @@ const Login = () => {
 		if (userCredential instanceof Error) {
 			window.alert(userCredential.message);
 		} else {
-			window.location.href = "/dashboard";
+			window.location.href = "/dashboard/account";
 		}
 	};
 

app/src/pages/product/product.test.tsx

@@ -0,0 +1,25 @@
+import { suite } from "uvu";
+import * as assert from "uvu/assert";
+
+import { render, fireEvent, waitFor } from "@solidjs/testing-library";
+import { isInDocument, hasStyle } from "solid-dom-testing";
+
+import Product from "./product";
+
+const test = suite<ReturnType<typeof render>>("<Product />");
+
+test.before.each((context) => {
+	const returnValue = render(() => <Product />);
+	for (const name of Object.getOwnPropertyNames(returnValue)) {
+		// @ts-expect-error
+		context[name] = returnValue[name];
+	}
+});
+
+test.after.each(({ unmount }) => unmount());
+
+test("page render dashboard title", ({ getByText }) => {
+	assert.ok(isInDocument(getByText("Dashboard")));
+});
+
+test.run();

app/src/pages/product/product.tsx

@@ -0,0 +1,16 @@
+import Header from "../../contents/common/header";
+
+const ProductPage = () => {
+	return (
+		<div class="bg-gray-100 h-screen">
+			<Header />
+			<div class="max-w-7xl mx-auto my-2 py-6 sm:px-6 lg:px-8">
+				<div class="flex justify-center items-center">
+					<div class="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900" />
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ProductPage;

app/src/pages/setting/setting.test.tsx

@@ -0,0 +1,25 @@
+import { suite } from "uvu";
+import * as assert from "uvu/assert";
+
+import { render, fireEvent, waitFor } from "@solidjs/testing-library";
+import { isInDocument, hasStyle } from "solid-dom-testing";
+
+import Setting from "./setting";
+
+const test = suite<ReturnType<typeof render>>("<Setting />");
+
+test.before.each((context) => {
+	const returnValue = render(() => <Setting />);
+	for (const name of Object.getOwnPropertyNames(returnValue)) {
+		// @ts-expect-error
+		context[name] = returnValue[name];
+	}
+});
+
+test.after.each(({ unmount }) => unmount());
+
+test("page render dashboard title", ({ getByText }) => {
+	assert.ok(isInDocument(getByText("Dashboard")));
+});
+
+test.run();

app/src/pages/setting/setting.tsx

@@ -0,0 +1,15 @@
+import Header from "../../contents/common/header";
+const SettingPage = () => {
+	return (
+		<div class="bg-gray-100 h-screen">
+			<Header />
+			<div class="max-w-7xl mx-auto my-2 py-6 sm:px-6 lg:px-8">
+				<div class="flex justify-center items-center">
+					<div class="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900" />
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default SettingPage;