From e076eb8611f1e3d943c0c82f62bc3b3d219127d7 Mon Sep 17 00:00:00 2001
From: kamoa457 <kamoa457@cubes.postbox.in.th>
Date: Sun, 15 Oct 2023 18:30:22 +0700
Subject: [PATCH] update status room

---
 package.json                            |   1 +
 src/App.vue                             |   1 +
 src/assets/scss/material-kit/theme.scss |   1 +
 src/main.js                             |   5 +-
 src/router/index.js                     |  17 ++
 src/views/Restroom/DetailRoomPage.vue   | 219 ++++++++++++++++++
 src/views/Restroom/RoomView.vue         | 294 +++++++++++++++++++-----
 src/views/Restroom/UpdateRoom.vue       | 219 ++++++++++++++++++
 8 files changed, 698 insertions(+), 59 deletions(-)
 create mode 100644 src/views/Restroom/DetailRoomPage.vue
 create mode 100644 src/views/Restroom/UpdateRoom.vue

diff --git a/package.json b/package.json
index a63c0e8..79e21c0 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.5",
+    "@trevoreyre/autocomplete-vue": "^2.4.1",
     "bootstrap": "5.1.3",
     "pinia": "2.0.14",
     "prismjs": "1.28.0",
diff --git a/src/App.vue b/src/App.vue
index ab0ef2b..c22554b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,7 @@ Coded by www.creative-tim.com
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 */
 import { RouterView } from "vue-router";
+import 'vue-select/dist/vue-select.css';
 </script>
 
 <template>
diff --git a/src/assets/scss/material-kit/theme.scss b/src/assets/scss/material-kit/theme.scss
index 7918a46..dbf5ad8 100644
--- a/src/assets/scss/material-kit/theme.scss
+++ b/src/assets/scss/material-kit/theme.scss
@@ -23,6 +23,7 @@
 @import "variables/social-buttons";
 @import "variables/breadcrumb";
 
+
 // Mixin
 @import "mixins/mixins";
 
diff --git a/src/main.js b/src/main.js
index da20aee..6908227 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,15 +2,18 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
+import '@trevoreyre/autocomplete-vue/dist/style.css'
 
 // Nucleo Icons
 import "./assets/css/nucleo-icons.css";
 import "./assets/css/nucleo-svg.css";
 
 import materialKit from "./material-kit";
-
+import vSelect from 'vue-select'
 const app = createApp(App);
 
+
+app.component('v-select', vSelect)
 app.use(createPinia());
 app.use(router);
 app.use(materialKit);
diff --git a/src/router/index.js b/src/router/index.js
index 8fc529d..dfaeb20 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,6 +24,8 @@ import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressB
 import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
 import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue";
 import RoomView from "../views/Restroom/RoomView.vue"
+import DetailRoom from "../views/Restroom/DetailRoomPage.vue"
+import UpdateRoom from "../views/Restroom/UpdateRoom.vue"
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -37,6 +39,21 @@ const router = createRouter({
       name: "room",
       component: RoomView,
     },
+    {
+      path: "/room",
+      name: "room", 
+      component: RoomView,
+    },
+    {
+      path: '/room/detail/:id',
+      name: 'DetailRoom',
+      component: DetailRoom,
+    },
+    {
+      path: '/room/update/:id',
+      name: 'updateRoom',
+      component: UpdateRoom,
+    },
     {
       path: "/pages/landing-pages/about-us",
       name: "about",
diff --git a/src/views/Restroom/DetailRoomPage.vue b/src/views/Restroom/DetailRoomPage.vue
new file mode 100644
index 0000000..9051e3a
--- /dev/null
+++ b/src/views/Restroom/DetailRoomPage.vue
@@ -0,0 +1,219 @@
+<script setup>
+import { onMounted } from "vue";
+
+//image
+import image from "@/assets/img/illustrations/illustration-signin.jpg";
+
+//material components
+import MaterialInput from "@/components/MaterialInput.vue";
+
+// material-input
+import setMaterialInput from "@/assets/js/material-input";
+onMounted(() => {
+  setMaterialInput();
+});
+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,
+  },
+];
+</script>
+<template>
+  <section>
+    <div class="page-header min-vh-45">
+      <div class="container">
+        <!-- d-flex justify-content-between -->
+        <h4>รายละเอียดห้อง</h4>
+        <div class="row pt-4">
+          <div class="col-8">
+            <div class="nav-item dropdown dropdown-hover mx-2">
+              <a
+                role="button"
+                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>
+          <div class="col-4">
+            <div>
+              <MaterialInput
+                class="input-group-dynamic w-100"
+                icon="search"
+                type="text"
+                placeholder="Search"
+              />
+            </div>
+          </div>
+        </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>
+          </div>
+        </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>
diff --git a/src/views/Restroom/RoomView.vue b/src/views/Restroom/RoomView.vue
index 9170614..e28b62e 100644
--- a/src/views/Restroom/RoomView.vue
+++ b/src/views/Restroom/RoomView.vue
@@ -1,117 +1,262 @@
-<script setup>
-import { onMounted } from "vue";
-
-//example components
-import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
-import DefaultFooter from "@/examples/footers/FooterDefault.vue";
-
-//image
-import image from "@/assets/img/illustrations/illustration-signin.jpg";
-
-//material components
+<script>
 import MaterialInput from "@/components/MaterialInput.vue";
-import MaterialTextArea from "@/components/MaterialTextArea.vue";
 import MaterialButton from "@/components/MaterialButton.vue";
 
-// material-input
-import setMaterialInput from "@/assets/js/material-input";
-onMounted(() => {
-  setMaterialInput();
-});
+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
+    status: true,
   },
   {
     title: "ห้อง 2",
     dataIndex: "2",
-    status: false
+    status: false,
   },
   {
     title: "ห้อง 3",
     dataIndex: "3",
-    status: true
+    status: true,
   },
   {
     title: "ห้อง 4",
     dataIndex: "4",
-    status: true
+    status: true,
   },
   {
     title: "ห้อง 5",
     dataIndex: "5",
-    status: false
+    status: false,
   },
   {
     title: "ห้อง 6",
     dataIndex: "6",
-    status: false
+    status: false,
   },
   {
     title: "ห้อง 7",
     dataIndex: "7",
-    status: true
+    status: true,
   },
   {
     title: "ห้อง 8",
     dataIndex: "8",
-    status: false
+    status: false,
   },
   {
     title: "ห้อง 9",
     dataIndex: "9",
-    status: false
+    status: false,
   },
   {
     title: "ห้อง 10",
     dataIndex: "10",
-    status: false
+    status: false,
   },
   {
     title: "ห้อง 11",
     dataIndex: "11",
-    status: true
+    status: true,
   },
   {
     title: "ห้อง 12",
     dataIndex: "12",
-    status: false
+    status: false,
   },
   {
     title: "ห้อง 13",
     dataIndex: "13",
-    status: false
+    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>
-  <div class="container position-sticky z-index-sticky top-0">
-    <div class="row">
-      <div class="col-12">
-        <DefaultNavbar
-          :sticky="true"
-          :action="{
-            route: 'https://www.creative-tim.com/product/vue-material-kit-pro',
-            color: 'bg-gradient-success',
-            label: 'Buy Now',
-          }"
-        />
-      </div>
-    </div>
-  </div>
   <section>
-    <div class="page-header min-vh-100">
+    <div class="page-header min-vh-45">
       <div class="container">
-        <div class=" text-center">
-          <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">
-                  <p class="card-title " >{{ item?.title }}</p>
-                  <a href="#" class="card-link"><i class="bi bi-pencil-square"></i></a>
+        <!-- d-flex justify-content-between -->
+        <div class="row pt-4">
+          <div class="col-8">
+            <div class="nav-item dropdown dropdown-hover mx-2">
+              <a
+                role="button"
+                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>
+          <div class="col-4">
+            <div>
+              <MaterialInput
+                class="input-group-dynamic w-100"
+                icon="search"
+                type="text"
+                placeholder="Search"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="text-center pt-4">
+          <div v-for="(item, index) in NoRoom" :key="index">
+            <p class="text-start mt-4">
+              <MaterialButton
+                variant="outline"
+                color="success"
+                data-bs-toggle="collapse"
+                href="#collapseExample"
+                aria-expanded="false"
+                aria-controls="collapseExample"
+                >{{ item?.title }}</MaterialButton
+              >
+            </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
+                            v-if="item?.status"
+                            :href="`/room/update/${item?.dataIndex}`"
+                            class="card-link"
+                            ><span
+                              v-if="item?.status"
+                              class="material-icons"
+                              style="color: #fff"
+                            >
+                              edit
+                            </span>
+                            <span
+                              v-if="!item?.status"
+                              class="material-icons"
+                              style="color: #fff"
+                            >
+                              add
+                            </span>
+                          </a>
+                          <a
+                            style="cursor: pointer"
+                            data-bs-toggle="modal"
+                            data-bs-target="#staticBackdrop"
+                            v-if="!item?.status"
+                            class="card-link"
+                          >
+                            <span
+                              v-if="!item?.status"
+                              class="material-icons"
+                              style="color: #fff"
+                            >
+                              add
+                            </span>
+                          </a>
+                        </div>
+                        <p class="card-title">
+                          <a
+                            :href="`/room/detail/${item?.dataIndex}`"
+                            class="text-white"
+                            >{{ item?.title }}</a
+                          >
+                        </p>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -119,20 +264,53 @@ const landingColumns = [
         </div>
       </div>
     </div>
-  </section>
 
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="staticBackdrop"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabindex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="staticBackdropLabel">เลือกผู้เช่าห้องพัก</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <v-select :options="options" v-model="selectedColor"></v-select>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <button type="button" class="btn btn-primary">บันทึก</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </template>
 <style>
-.bg-green{
-  background : #567b57 !important;
+.bg-green {
+  background: #567b57 !important;
   color: #fff;
 }
-.bg-red{
+.bg-red {
   background: #d24c4a !important;
   color: #fff;
 }
-.bg-waring{
+.bg-waring {
   background: #d1d3d5 !important;
   color: #fff;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Restroom/UpdateRoom.vue b/src/views/Restroom/UpdateRoom.vue
new file mode 100644
index 0000000..6615c28
--- /dev/null
+++ b/src/views/Restroom/UpdateRoom.vue
@@ -0,0 +1,219 @@
+<script setup>
+import { onMounted } from "vue";
+
+//image
+import image from "@/assets/img/illustrations/illustration-signin.jpg";
+
+//material components
+import MaterialInput from "@/components/MaterialInput.vue";
+
+// material-input
+import setMaterialInput from "@/assets/js/material-input";
+onMounted(() => {
+  setMaterialInput();
+});
+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,
+  },
+];
+</script>
+<template>
+  <section>
+    <div class="page-header min-vh-45">
+      <div class="container">
+        <!-- d-flex justify-content-between -->
+        <h4>แก้รายละเอียดห้อง</h4>
+        <div class="row pt-4">
+          <div class="col-8">
+            <div class="nav-item dropdown dropdown-hover mx-2">
+              <a
+                role="button"
+                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>
+          <div class="col-4">
+            <div>
+              <MaterialInput
+                class="input-group-dynamic w-100"
+                icon="search"
+                type="text"
+                placeholder="Search"
+              />
+            </div>
+          </div>
+        </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>
+          </div>
+        </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>