update path url

index.html

@@ -12,7 +12,7 @@
       href="./assets/img/apple-icon.png"
     />
     <link rel="icon" type="image/png" href="./src/assets/img/favicon.png" />
-    <title>Vue Material Kit 2 by Creative Tim</title>
+    <title>โปรแกรมทะเบียนบ้านพัก</title>
     <!--     Fonts and icons     -->
     <link
       rel="stylesheet"

src/router/index.js

@@ -26,6 +26,9 @@ import ElTypography from "../layouts/sections/elements/typography/TypographyView
 import RoomView from "../views/Restroom/RoomView.vue"
 import DetailRoom from "../views/Restroom/DetailRoomPage.vue"
 import UpdateRoom from "../views/Restroom/UpdateRoom.vue"
+import UserlistView from "../views/Users/UserlistView.vue"
+import RoomLayoutView from "../views/RoomLayout/RoomLayoutView.vue"
+import UtilitiesRoom from "../views/UtilitiesRoom/UtilitieView.vue"
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -40,9 +43,19 @@ const router = createRouter({
       component: RoomView,
     },
     {
-      path: "/room",
+      path: "/users",
-      name: "room", 
+      name: "users", 
-      component: RoomView,
+      component: UserlistView,
+    },
+    {
+      path: "/layout",
+      name: "layout", 
+      component: RoomLayoutView,
+    },
+    {
+      path: "/utilities",
+      name: "utilities", 
+      component: UtilitiesRoom,
     },
     {
       path: '/room/detail/:id',

src/views/Presentation/Sections/PresentationInformation.vue

@@ -9,9 +9,9 @@
                     <div class="card-body text-center">
                         <h5 class="card-title">ทะเบียน</h5>
                         <img src="../../../assets/img/register.png"  alt="title" loading="lazy" class="w-70" />
-                        <!-- <RouterLink  class="dropdown-item border-radius-md"> -->
+                        <RouterLink :to="{ name: 'users' }" class="dropdown-item border-radius-md">
                             <a href="#" class="btn btn-primary mt-4">ทะเบียน</a>
-                        <!-- </RouterLink> -->
+                        </RouterLink>
 
                     </div>
                 </div>
@@ -21,7 +21,6 @@
                     <div class="card-body text-center">
                         <h5 class="card-title">สถานะห้องพัก</h5>
                         <img src="../../../assets/img/status.png" alt="title" loading="lazy" class="w-70" />
-                        <!-- :to="{ name: 'room' }" -->
                         <RouterLink :to="{ name: 'room' }" class="dropdown-item border-radius-md">
                             <a href="#" class="btn btn-primary mt-4">สถานะห้องพัก</a>
                         </RouterLink>
@@ -33,7 +32,9 @@
                     <div class="card-body text-center">
                         <h5 class="card-title">ผังห้องพัก</h5>
                         <img src="../../../assets/img/layout.png" alt="title" loading="lazy" class="w-70" />
-                        <a href="#" class="btn btn-primary mt-4">ผังห้องพัก</a>
+                        <RouterLink :to="{ name: 'layout' }" class="dropdown-item border-radius-md">
+                          <a href="#" class="btn btn-primary mt-4">ผังห้องพัก</a>
+                        </RouterLink>
                     </div>
                 </div>
             </div>
@@ -42,7 +43,9 @@
                     <div class="card-body text-center">
                         <h5 class="card-title">ค่าสาธารณุปโภค</h5>
                         <img src="../../../assets/img/utilities.png" alt="title" loading="lazy" class="w-70" />
-                        <a href="#" class="btn btn-primary mt-4">ค่าสาธารณุปโภค</a>
+                        <RouterLink :to="{ name: 'utilities' }" class="dropdown-item border-radius-md">
+                          <a href="#" class="btn btn-primary mt-4">ค่าสาธารณุปโภค</a>
+                        </RouterLink>
                     </div>
                 </div>
             </div>

src/views/Restroom/DetailRoomPage.vue

@@ -107,93 +107,23 @@ const landingColumns = [
         <!-- d-flex justify-content-between -->
         <h4>รายละเอียดห้อง</h4>
         <div class="row pt-4">
-          <div class="col-8">
+          <div class="card mb-3" style="max-width: 540px">
-            <div class="nav-item dropdown dropdown-hover mx-2">
+            <div class="row g-0">
-              <a
+              <div class="col-md-4">
-                role="button"
+                <img src="../../assets/img/team-4.jpg" class="img-fluid rounded-start" alt="..." />
-                class="nav-link ps-2 d-flex cursor-pointer align-items-center"
-                id="dropdownMenuPages"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                <i class="material-icons opacity-6 me-2 text-md">home</i>
-                ตึก
-              </a>
-              <div
-                class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
-                aria-labelledby="dropdownMenuPages"
-              >
-                <div class="row">
-                  <div class="col-12 px-4 py-2">
-                    <div class="row">
-                      <div class="position-relative">
-                        <p
-                          class="dropdown-item border-radius-md"
-                          v-for="(item, index) in listRoom"
-                          :key="index"
-                        >
-                          <span>{{ item?.title }}</span>
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
               </div>
-            </div>
+              <div class="col-md-8">
-          </div>
+                <div class="card-body">
-          <div class="col-4">
+                  <h5 class="card-title">รายละเอียดเจ้าของห้อง</h5>
-            <div>
+                  <p class="card-text">
-              <MaterialInput
+                    ชือ : มานะ
-                class="input-group-dynamic w-100"
+                  </p>
-                icon="search"
+                  <p class="card-text">
-                type="text"
+                    นามสกุล : ถือดี
-                placeholder="Search"
+                  </p>
-              />
+                  <p class="card-text">
-            </div>
+                    <small class="text-muted">Last updated 3 mins ago</small>
-          </div>
+                  </p>
-        </div>
-
-        <div class="text-center pt-4">
-          <div v-for="(item, index) in NoRoom" :key="index">
-            <p class="text-start mt-4">
-              <a
-                class="btn btn-primary"
-                data-bs-toggle="collapse"
-                href="#collapseExample"
-                role="button"
-                aria-expanded="false"
-                aria-controls="collapseExample"
-              >
-                {{ item?.title }}
-              </a>
-            </p>
-            <div class="collapse show" id="collapseExample" aria-expanded="true">
-              <div>
-                <div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
-                  <div class="col" v-for="(item, index) in landingColumns" :key="index">
-                    <div
-                      class="card mb-2"
-                      v-bind:class="{ 'bg-red': item?.status, 'bg-green': !item?.status }"
-                      :style="{ width: `110px` }"
-                    >
-                      <div class="card-body">
-                        <div
-                          style="
-                            text-align: right;
-                            margin-top: -10px;
-                            margin-right: -10px;
-                          "
-                        >
-                          <a href="#" class="card-link"
-                            ><span class="material-icons" style="color: #fff">
-                              edit
-                            </span></a
-                          >
-                        </div>
-                        <p class="card-title">{{ item?.title }}</p>
-                      </div>
-                    </div>
-                  </div>
                 </div>
               </div>
             </div>

src/views/RoomLayout/RoomLayoutView.vue

@@ -0,0 +1,184 @@
+<script>
+import MaterialInput from "@/components/MaterialInput.vue";
+import MaterialButton from "@/components/MaterialButton.vue";
+
+const listRoom = [
+  { title: "ตึก 1" },
+  { title: "ตึก 2" },
+  { title: "ตึก 3" },
+  { title: "ตึก 4" },
+  { title: "ตึก 5" },
+  { title: "ตึก 6" },
+  { title: "ตึก 7" },
+];
+
+const NoRoom = [
+  { title: "ชั้น 1" },
+  { title: "ชั้น 2" },
+  { title: "ชั้น 3" },
+  { title: "ชั้น 4" },
+  { title: "ชั้น 5" },
+  { title: "ชั้น 6" },
+  { title: "ชั้น 7" },
+];
+
+const landingColumns = [
+  {
+    title: "ห้อง 1",
+    dataIndex: "1",
+    status: true,
+  },
+  {
+    title: "ห้อง 2",
+    dataIndex: "2",
+    status: false,
+  },
+  {
+    title: "ห้อง 3",
+    dataIndex: "3",
+    status: true,
+  },
+  {
+    title: "ห้อง 4",
+    dataIndex: "4",
+    status: true,
+  },
+  {
+    title: "ห้อง 5",
+    dataIndex: "5",
+    status: false,
+  },
+  {
+    title: "ห้อง 6",
+    dataIndex: "6",
+    status: false,
+  },
+  {
+    title: "ห้อง 7",
+    dataIndex: "7",
+    status: true,
+  },
+  {
+    title: "ห้อง 8",
+    dataIndex: "8",
+    status: false,
+  },
+  {
+    title: "ห้อง 9",
+    dataIndex: "9",
+    status: false,
+  },
+  {
+    title: "ห้อง 10",
+    dataIndex: "10",
+    status: false,
+  },
+  {
+    title: "ห้อง 11",
+    dataIndex: "11",
+    status: true,
+  },
+  {
+    title: "ห้อง 12",
+    dataIndex: "12",
+    status: false,
+  },
+  {
+    title: "ห้อง 13",
+    dataIndex: "13",
+    status: false,
+  },
+];
+
+export default {
+  components: {
+    MaterialInput,
+    MaterialButton,
+  },
+  setup() {
+    return {
+      listRoom,
+      NoRoom,
+      landingColumns,
+    };
+  },
+
+  data() {
+    return {
+      value: { name: "Vue.js", language: "JavaScript" },
+      options: [
+        { label: "Vue.js", value: "JavaScript" },
+        { label: "Rails", value: "Ruby" },
+        { label: "Sinatra", value: "Ruby" },
+        { label: "Laravel", value: "PHP" },
+        { label: "Phoenix", value: "Elixir" },
+      ],
+      selectedColor: "",
+    };
+  },
+  watch: {
+    selectedColor: function (newValue) {
+      // this.updateColor(newValue)
+      console.log(newValue);
+    },
+  },
+  methods: {
+    changedLabel(event) {
+      console.log(event);
+      // this.selected = event;
+    },
+  },
+};
+</script>
+<template>
+  <section>
+    <div class="page-header min-vh-45">
+      <div class="container">
+        <div class="text-end">
+          <MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
+        </div>
+        <div class="text-center pt-4">
+          <table class="table table-striped table-bordered table-hover">
+            <thead>
+              <tr>
+                <th scope="col">ลำดับ</th>
+                <th scope="col">ชื่อ</th>
+                <th scope="col">สกุล</th>
+                <th scope="col">เพศ</th>
+                <th scope="col">ยศ</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>Mark</td>
+                <td>Otto</td>
+                <td>@mdo</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>Jacob</td>
+                <td>Thornton</td>
+                <td>@fat</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style>
+.bg-green {
+  background: #567b57 !important;
+  color: #fff;
+}
+.bg-red {
+  background: #d24c4a !important;
+  color: #fff;
+}
+.bg-waring {
+  background: #d1d3d5 !important;
+  color: #fff;
+}
+</style>

src/views/Users/UserlistView.vue

@@ -0,0 +1,184 @@
+<script>
+import MaterialInput from "@/components/MaterialInput.vue";
+import MaterialButton from "@/components/MaterialButton.vue";
+
+const listRoom = [
+  { title: "ตึก 1" },
+  { title: "ตึก 2" },
+  { title: "ตึก 3" },
+  { title: "ตึก 4" },
+  { title: "ตึก 5" },
+  { title: "ตึก 6" },
+  { title: "ตึก 7" },
+];
+
+const NoRoom = [
+  { title: "ชั้น 1" },
+  { title: "ชั้น 2" },
+  { title: "ชั้น 3" },
+  { title: "ชั้น 4" },
+  { title: "ชั้น 5" },
+  { title: "ชั้น 6" },
+  { title: "ชั้น 7" },
+];
+
+const landingColumns = [
+  {
+    title: "ห้อง 1",
+    dataIndex: "1",
+    status: true,
+  },
+  {
+    title: "ห้อง 2",
+    dataIndex: "2",
+    status: false,
+  },
+  {
+    title: "ห้อง 3",
+    dataIndex: "3",
+    status: true,
+  },
+  {
+    title: "ห้อง 4",
+    dataIndex: "4",
+    status: true,
+  },
+  {
+    title: "ห้อง 5",
+    dataIndex: "5",
+    status: false,
+  },
+  {
+    title: "ห้อง 6",
+    dataIndex: "6",
+    status: false,
+  },
+  {
+    title: "ห้อง 7",
+    dataIndex: "7",
+    status: true,
+  },
+  {
+    title: "ห้อง 8",
+    dataIndex: "8",
+    status: false,
+  },
+  {
+    title: "ห้อง 9",
+    dataIndex: "9",
+    status: false,
+  },
+  {
+    title: "ห้อง 10",
+    dataIndex: "10",
+    status: false,
+  },
+  {
+    title: "ห้อง 11",
+    dataIndex: "11",
+    status: true,
+  },
+  {
+    title: "ห้อง 12",
+    dataIndex: "12",
+    status: false,
+  },
+  {
+    title: "ห้อง 13",
+    dataIndex: "13",
+    status: false,
+  },
+];
+
+export default {
+  components: {
+    MaterialInput,
+    MaterialButton,
+  },
+  setup() {
+    return {
+      listRoom,
+      NoRoom,
+      landingColumns,
+    };
+  },
+
+  data() {
+    return {
+      value: { name: "Vue.js", language: "JavaScript" },
+      options: [
+        { label: "Vue.js", value: "JavaScript" },
+        { label: "Rails", value: "Ruby" },
+        { label: "Sinatra", value: "Ruby" },
+        { label: "Laravel", value: "PHP" },
+        { label: "Phoenix", value: "Elixir" },
+      ],
+      selectedColor: "",
+    };
+  },
+  watch: {
+    selectedColor: function (newValue) {
+      // this.updateColor(newValue)
+      console.log(newValue);
+    },
+  },
+  methods: {
+    changedLabel(event) {
+      console.log(event);
+      // this.selected = event;
+    },
+  },
+};
+</script>
+<template>
+  <section>
+    <div class="page-header min-vh-45">
+      <div class="container">
+        <div class="text-end">
+          <MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
+        </div>
+        <div class="text-center pt-4">
+          <table class="table table-striped table-bordered table-hover">
+            <thead>
+              <tr>
+                <th scope="col">ลำดับ</th>
+                <th scope="col">ชื่อ</th>
+                <th scope="col">สกุล</th>
+                <th scope="col">เพศ</th>
+                <th scope="col">ยศ</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>Mark</td>
+                <td>Otto</td>
+                <td>@mdo</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>Jacob</td>
+                <td>Thornton</td>
+                <td>@fat</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style>
+.bg-green {
+  background: #567b57 !important;
+  color: #fff;
+}
+.bg-red {
+  background: #d24c4a !important;
+  color: #fff;
+}
+.bg-waring {
+  background: #d1d3d5 !important;
+  color: #fff;
+}
+</style>

src/views/UtilitiesRoom/UtilitieView.vue

@@ -0,0 +1,184 @@
+<script>
+import MaterialInput from "@/components/MaterialInput.vue";
+import MaterialButton from "@/components/MaterialButton.vue";
+
+const listRoom = [
+  { title: "ตึก 1" },
+  { title: "ตึก 2" },
+  { title: "ตึก 3" },
+  { title: "ตึก 4" },
+  { title: "ตึก 5" },
+  { title: "ตึก 6" },
+  { title: "ตึก 7" },
+];
+
+const NoRoom = [
+  { title: "ชั้น 1" },
+  { title: "ชั้น 2" },
+  { title: "ชั้น 3" },
+  { title: "ชั้น 4" },
+  { title: "ชั้น 5" },
+  { title: "ชั้น 6" },
+  { title: "ชั้น 7" },
+];
+
+const landingColumns = [
+  {
+    title: "ห้อง 1",
+    dataIndex: "1",
+    status: true,
+  },
+  {
+    title: "ห้อง 2",
+    dataIndex: "2",
+    status: false,
+  },
+  {
+    title: "ห้อง 3",
+    dataIndex: "3",
+    status: true,
+  },
+  {
+    title: "ห้อง 4",
+    dataIndex: "4",
+    status: true,
+  },
+  {
+    title: "ห้อง 5",
+    dataIndex: "5",
+    status: false,
+  },
+  {
+    title: "ห้อง 6",
+    dataIndex: "6",
+    status: false,
+  },
+  {
+    title: "ห้อง 7",
+    dataIndex: "7",
+    status: true,
+  },
+  {
+    title: "ห้อง 8",
+    dataIndex: "8",
+    status: false,
+  },
+  {
+    title: "ห้อง 9",
+    dataIndex: "9",
+    status: false,
+  },
+  {
+    title: "ห้อง 10",
+    dataIndex: "10",
+    status: false,
+  },
+  {
+    title: "ห้อง 11",
+    dataIndex: "11",
+    status: true,
+  },
+  {
+    title: "ห้อง 12",
+    dataIndex: "12",
+    status: false,
+  },
+  {
+    title: "ห้อง 13",
+    dataIndex: "13",
+    status: false,
+  },
+];
+
+export default {
+  components: {
+    MaterialInput,
+    MaterialButton,
+  },
+  setup() {
+    return {
+      listRoom,
+      NoRoom,
+      landingColumns,
+    };
+  },
+
+  data() {
+    return {
+      value: { name: "Vue.js", language: "JavaScript" },
+      options: [
+        { label: "Vue.js", value: "JavaScript" },
+        { label: "Rails", value: "Ruby" },
+        { label: "Sinatra", value: "Ruby" },
+        { label: "Laravel", value: "PHP" },
+        { label: "Phoenix", value: "Elixir" },
+      ],
+      selectedColor: "",
+    };
+  },
+  watch: {
+    selectedColor: function (newValue) {
+      // this.updateColor(newValue)
+      console.log(newValue);
+    },
+  },
+  methods: {
+    changedLabel(event) {
+      console.log(event);
+      // this.selected = event;
+    },
+  },
+};
+</script>
+<template>
+  <section>
+    <div class="page-header min-vh-45">
+      <div class="container">
+        <div class="text-end">
+          <MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
+        </div>
+        <div class="text-center pt-4">
+          <table class="table table-striped table-bordered table-hover">
+            <thead>
+              <tr>
+                <th scope="col">ลำดับ</th>
+                <th scope="col">ชื่อ</th>
+                <th scope="col">สกุล</th>
+                <th scope="col">เพศ</th>
+                <th scope="col">ยศ</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>Mark</td>
+                <td>Otto</td>
+                <td>@mdo</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>Jacob</td>
+                <td>Thornton</td>
+                <td>@fat</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style>
+.bg-green {
+  background: #567b57 !important;
+  color: #fff;
+}
+.bg-red {
+  background: #d24c4a !important;
+  color: #fff;
+}
+.bg-waring {
+  background: #d1d3d5 !important;
+  color: #fff;
+}
+</style>