Style web, add function

README.md

-# hotel
+# test
 
 ## Project setup
 ```

package.json

 {
-  "name": "hotel",
+  "name": "test",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -8,14 +8,20 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.4.0",
+    "bootstrap": "^5.2.3",
+    "bootstrap-vue": "^2.23.1",
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3"

src/App.vue

 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="d-flex flex-column min-vh-100">
+    <div>
+      <header class="p-3 bg-dark text-white">
+        <div class="container">
+          <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+            <h1>ABC Hotel</h1>
+            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
+              <li>
+                <router-link to="/booking" class="nav-link px-2 text-secondary">View booking</router-link>
+              </li>
+              <li>
+                <router-link to="/checkin" class="nav-link px-2 text-secondary">View checkin</router-link>
+              </li>
+              <li>
+                <router-link to="/employee" class="nav-link px-2 text-secondary">View employee</router-link>
+              </li>
+              <li>
+                <router-link to="/room" class="nav-link px-2 text-secondary">View room</router-link>
+              </li>
+              <li>
+                <router-link to="/" class="nav-link px-2 text-secondary">Dashboard</router-link>
+              </li>
+              <li v-if="$store.state.isLoggedIn && $store.getters.currentUser.user.role == 'admin'">
+                <router-link to="/user-list" class="nav-link px-2 text-secondary">User list</router-link>
+              </li>
+              <li v-if="$store.state.isLoggedIn" class="text-end">
+                <button @click="$store.commit('logout')" class="btn btn-danger">Logout</button>
+              </li>
+            </ul>
+          </div>
+          <div class="text-end">
+            <router-link to="/login" v-if="!$store.state.isLoggedIn"
+              class="btn btn-outline-light me-2">Login</router-link>
+            <router-link to="/register" v-if="!$store.state.isLoggedIn" class="btn btn-warning">Register</router-link>
+          </div>
+        </div>
+      </header>
+      <router-view />
+    </div>
+    <div class="mt-auto">
+      <HotelFooter></HotelFooter>
+    </div>
+  </div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
 
+<script>
+import HotelFooter from './components/HotelFooter.vue'
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    HotelFooter
   }
 }
 </script>
-
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+.vh {
+  min-height: 100vh;
 }
 </style>

src/components/HotelFooter.vue

+<template>
+    <footer class="bg-dark text-white py-3">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-md-6">
+        <h3>Contact Us</h3>
+        <ul class="list-unstyled">
+          <li>123 Main St</li>
+          <li>Anytown, USA 12345</li>
+          <li>Phone: (123) 456-7890</li>
+          <li>Email: info@example.com</li>
+        </ul>
+      </div>
+      <div class="col-12 col-md-6">
+        <h3>Connect With Us</h3>
+        <ul class="list-unstyled">
+          <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
+          <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
+          <li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</footer>
+</template>
+
+<script>
+export default {
+  name: 'HotelFooter',
+}
+</script>

src/components/HotelHeader.vue

+<template>
+    <div>
+        <h1>ABC Hotel</h1>
+        <button>View booking</button>
+        <button>View checkin</button>
+        <button>View employee</button>
+        <button>View room</button>
+        <button>View dashboard</button>
+        <button>Logout</button>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'HotelHeader',
+}
+</script>
+
+<style>
+</style>

src/main.js

-import { createApp } from 'vue'
+import { createApp} from 'vue'
 import App from './App.vue'
+import router from './router'
+import 'bootstrap/dist/css/bootstrap.css';
+import axios from 'axios'
+import storeConfig from './store';
+import { createStore } from 'vuex';
+
+const app = createApp(App)
+const store = createStore(storeConfig)
+app.config.globalProperties.$axios = axios.create({
+    baseURL: 'http://localhost:8000/api'
+})
+
+app.use(store)
+app.use(router).mount('#app')
+
+
 
-createApp(App).mount('#app')

src/router/index.js

+import { createRouter, createWebHistory } from 'vue-router'
+import DashboardView from '../views/DashboardView.vue'
+import BookingView from '../views/BookingView.vue'
+import RoomView from '../views/RoomView.vue'
+import EmployeeView from '../views/EmployeeView.vue'
+import CheckinView from '../views/CheckinView.vue'
+import CreateBookingView from '../views/CreateBookingView.vue'
+import ModifyView from '../views/ModifyView.vue'
+import LoginView from '../views/LoginView.vue'
+import store from '../store'
+import register from '../views/RegisterView.vue'
+import userList from '../views/UserListView.vue'
+
+const routes = [
+ 
+  {
+    path: '/',
+    name: 'Dashboard',
+    component: DashboardView
+  },
+  {
+    path: '/booking',
+    name: 'Booking',
+    component: BookingView
+  },
+  {
+    path: '/room',
+    name: 'Room',
+    component: RoomView
+  },
+  {
+    path: '/employee',
+    name: 'Employee',
+    component: EmployeeView
+  },
+  {
+    path: '/checkin',
+    name: 'Checkin',
+    component: CheckinView
+  },
+  {
+    path: '/create-booking',
+    name: 'CreateBooking',
+    component: CreateBookingView
+  },
+  {
+    path: '/modify/:id',
+    name: 'Modify',
+    component: ModifyView
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: LoginView
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: register
+  },
+  {
+    path: '/user-list',
+    name: 'UserList',
+    component: userList
+  }
+]
+
+
+routes.forEach(route => {
+  route.beforeEnter = (to, from, next) => {
+    const isAuthenticated = store.state.isLoggedIn;
+    if (to.path !== '/login' && to.path !== '/register' && !isAuthenticated) {
+      next('/login');
+    } else {
+      next();
+    }
+  }
+})
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

src/store/index.js

+import axios from "axios";
+import router from "@/router";
+
+const storeConfig = {
+  state: {
+    isLoggedIn: false,
+    user: null,
+  },
+
+  mutations: {
+    login(state, user) {
+      state.isLoggedIn = true;
+      state.user = user;
+    },
+    logout(state) {
+      state.isLoggedIn = false;
+      state.user = null;
+      router.push("/login");
+    },
+  },
+
+  actions: {
+    async login({ commit }, { username, password }) {
+      try {
+        console.log("logging")
+        const response = await axios.post("http://127.0.0.1:8000/api/login", {
+          username,
+          password,
+        });
+        const user = response.data;
+        commit("login", user);
+        router.push({ name: 'Dashboard' })
+      } catch (error) {
+        alert(error.response.data.error)
+        alert(error.response.data.message)
+        console.error(error.response.data);
+      }
+    },
+    logout({ commit }) {
+      commit("logout");
+    },
+  },
+  getters: {
+    isLoggedIn: (state) => state.isLoggedIn,
+    currentUser: (state) => state.user,
+  },
+};
+
+export default storeConfig;

src/views/AboutView.vue

+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

src/views/BookingView.vue

+<template>
+  <div>
+    <div>
+      <h1 class="">Booking</h1>
+      <div class="position-relative top-0">
+      <router-link to="/create-booking">
+        <button class="btn btn-outline-info top-0 end-0 position-absolute">Create booking</button>
+      </router-link>
+    </div>
+      <br />
+    </div>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">Booking ID</th>
+          <th scope="col">Guest Name</th>
+          <th scope="col">Guest Number</th>
+          <th scope="col">Room ID</th>
+          <th scope="col">Checked</th>
+          <th scope="col" colspan="2">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="booking in bookings" :key="booking.id">
+          <td>{{ booking.id }}</td>
+          <td>{{ booking.guest_name }}</td>
+          <td>{{ booking.guest_number }}</td>
+          <td>{{ booking.room_id }}</td>
+          <td>{{ booking.checked }}</td>
+          <td>
+            <button @click="checkin(booking.id)" class="btn btn-success">
+              <i class="bi bi-check-circle"></i> Checkin
+            </button>
+          </td>
+          <td>
+            <button @click="destroy(booking.id)" class="btn btn-danger">
+              <i class="bi bi-trash"></i> Delete
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+import axios from "axios";
+
+export default defineComponent({
+  name: "BookingView",
+
+  setup() {
+    const bookings = ref([]);
+    /**
+     * Get all bookings
+     *
+     * @return {void}
+     */
+    const getBooking = async () => {
+      const response = await axios.get("http://127.0.0.1:8000/api/booking");
+      bookings.value = response.data;
+    };
+
+    /**
+     * Checkin booking
+     *
+     * @param {int} id
+     *
+     * @return {void}
+     */
+    const checkin = async (id) => {
+      console.log(id);
+      try {
+        const response = await axios.post("http://127.0.0.1:8000/api/checked", {
+          id: id,
+        });
+        console.log(response.data);
+      } catch (error) {
+        console.error(error.response.data);
+      }
+      getBooking();
+    };
+
+    /**
+     * destroy a booking
+     *
+     * @param {*} id
+     *
+     * @return {void}
+     */
+    const destroy = async (id) => {
+      console.log(id);
+      try {
+        const response = await axios.delete(
+          "http://127.0.0.1:8000/api/checked/delBook",
+          {
+            data: {
+              id: id,
+            },
+          }
+        );
+        console.log(response.data);
+      } catch (error) {
+        console.error(error.response);
+      }
+      getBooking();
+    };
+
+    getBooking();
+    return {
+      checkin,
+      destroy,
+      bookings,
+    };
+  },
+});
+</script>

src/views/CheckinView.vue

+<template>
+  <div>
+    <div>
+      <h1>Checkin</h1><br>
+    </div>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">Checkin ID</th>
+          <th scope="col">Booking ID</th>
+          <th scope="col">Employee ID</th>
+          <th scope="col">Checkin Time</th>
+          <th scope="col">Checkout Time</th>
+          <th scope="col">Fee</th>
+          <th scope="col">Total Price</th>
+          <th scope="col" colspan="3">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="checkin in checkins" :key="checkin.id">
+          <td>{{ checkin.id }}</td>
+          <td>{{ checkin.booking_id }}</td>
+          <td>{{ checkin.employee_id }}</td>
+          <td>{{ checkin.checkin_time }}</td>
+          <td>{{ checkin.checkout_time }}</td>
+          <td>{{ checkin.fee }}</td>
+          <td>{{ checkin.total_price }}</td>
+          <td>
+            <button @click="checkout(checkin.id, checkin.booking_id)" class="btn btn-success">
+              <i class="bi bi-box-arrow-right"></i> Checkout
+            </button>
+          </td>
+          <td>
+            <button @click="destroy(checkin.id)" class="btn btn-danger">
+              <i class="bi bi-trash"></i> Delete
+            </button>
+          </td>
+          <td>
+            <form @submit.prevent="addFee(checkin.id)">
+              <div class="input-group">
+                <input type="text" class="form-control" v-model="fee" name="fee" id="fee" placeholder="Fee">
+                <button type="submit" class="btn btn-secondary">
+                  <i class="bi bi-currency-dollar"></i> Submit
+                </button>
+              </div>
+            </form>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import axios from 'axios'
+
+export default defineComponent({
+  name: 'CheckinView',
+
+  setup() {
+
+    const checkins = ref([]);
+    /**
+     * Get all checkins
+     * 
+     * @return {void}
+     */
+    const getCheckin = async () => {
+      const response = await axios.get('http://127.0.0.1:8000/api/checkin')
+      checkins.value = response.data
+    }
+
+    /**
+     * Checkin a booking
+     * 
+     * @param {number} id
+     * @param {number} bookingId
+     * 
+     * @return {void}
+     */
+    const checkout = async (id, bookingId) => {
+      console.log(id, bookingId)
+      try {
+        const response = await axios.post('http://127.0.0.1:8000/api/checked/checkout', {
+          id: id,
+          bookingId: bookingId
+        })
+        console.log(response.data);
+      } catch (error) {
+        console.error(error.response.data)
+      }
+      getCheckin()
+    }
+
+    /**
+     * Delete a checkin
+     * 
+     * @param {number} id
+     * 
+     * @return {void}
+     */
+    const destroy = async (id) => {
+      try {
+        const response = await axios.delete('http://127.0.0.1:8000/api/checked/delCheck', {
+          data: {
+            id: id
+          }
+        })
+        console.log(response.data);
+      } catch (error) {
+        console.error(error.response.data)
+      }
+      getCheckin()
+    }
+
+    const fee = ref('')
+    /**   
+     * Add fee to a checkin
+     * 
+     * @param {number} id
+     * 
+     * @return {void}
+     */
+    const addFee = async (id) => {
+      try {
+        console.log(id, fee.value);
+        const response = await axios.post('http://127.0.0.1:8000/api/checked/addFee', {
+          id: id,
+          fee: fee.value
+        })
+        console.log(response.data);
+        getCheckin()
+      } catch (error) {
+        console.error(error.response.data)
+      }
+    }
+
+    getCheckin()
+
+    return {
+      checkins,
+      checkout,
+      destroy,
+      addFee,
+      fee
+    }
+
+  }
+})
+</script>

src/views/CreateBookingView.vue

+<template>
+  <div class="d-flex justify-content-center">
+    <form @submit.prevent="addBooking" class="col-12 col-md-6">
+      <div class="mb-3">
+        <label for="guest_name" class="form-label">Guest Name</label>
+        <div class="input-group">
+          <input type="text" id="guest_name" v-model="guest_name" name="guest_name" class="form-control">
+        </div>
+      </div>
+      <div class="mb-3">
+        <label for="guest_number" class="form-label">Guest Number</label>
+        <div class="input-group">
+          <input type="text" id="guest_number" v-model="guest_number" name="guest_number" class="form-control">
+        </div>
+      </div>
+      <div class="mb-3">
+        <label for="room_id" class="form-label">Room ID</label>
+        <div class="input-group">
+          <input type="text" id="room_id" v-model="room_id" name="room_id" class="form-control">
+        </div>
+      </div>
+      <button type="submit" class="btn btn-primary">
+        <i class="bi bi-check-circle"></i> Submit
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { ref, defineComponent } from 'vue'
+import axios from 'axios'
+import router from '@/router'
+
+export default defineComponent({
+  name: 'CreateBookingView',
+
+  setup() {
+
+    const guest_name = ref('')
+    const guest_number = ref('')
+    const room_id = ref('')
+    /**
+     * Add booking
+     * 
+     * @return {void}
+     */
+    const addBooking = async () => {
+      console.log(guest_name.value, guest_number.value, room_id.value)
+      try {
+        const response = await axios.post('http://127.0.0.1:8000/api/create-booking', {
+          guest_name: guest_name.value,
+          guest_number: guest_number.value,
+          room_id: room_id.value
+        })
+        console.log(response.data)
+        alert('Create booking successfully');
+        router.push({ name: 'Booking' })
+      } catch (error) {
+        console.error(error.response.data)
+      }
+    }
+
+    return {
+      guest_name,
+      guest_number,
+      room_id,
+      addBooking
+    }
+  }
+})
+</script>

src/views/DashboardView.vue

+<template>
+  <div>
+    <div>
+      <div class="mb-5">
+        <h1>Dashboard</h1>
+      </div>
+      <table class="table table-striped table-hover">
+        <thead>
+          <tr>
+            <th scope="col">Booking ID</th>
+            <th scope="col">Guest Name</th>
+            <th scope="col">Guest Number</th>
+            <th scope="col">Room ID</th>
+            <th scope="col">Total Price</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="guestInfo in guestInfos" :key="guestInfo.id">
+            <td>{{ guestInfo.id }}</td>
+            <td>{{ guestInfo.guest_name }}</td>
+            <td>{{ guestInfo.guest_number }}</td>
+            <td>{{ guestInfo.room_id }}</td>
+            <td>{{ guestInfo.checkin.total_price }}</td>
+          </tr>
+        </tbody>
+        <div class="mb-5 mt-auto">
+          <h4 class="text-start">Today's total interest: {{ bookingInfos.total }}</h4>
+          <h4 class="text-start">Current month total checkin: {{ bookingInfos.lastMonth }}</h4>
+          <h4 class="text-start">Current month total interest: {{ bookingInfos.lastMonthTotal }}</h4>
+        </div>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DashboardView',
+
+  data() {
+    return {
+      guestInfos: [],
+      bookingInfos: []
+    }
+  },
+
+  async mounted() {
+    let results = await this.$axios.get('dashboard')
+
+    this.guestInfos = results.data.guestInfos
+    this.bookingInfos = results.data.bookingInfos
+  }
+})
+</script>
+
+<style></style>

src/views/EmployeeView.vue

+<template>
+  <div>
+    <div>
+      <h1>Booking</h1><br>
+    </div>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">Employee ID</th>
+          <th scope="col">Employee Name</th>
+          <th scope="col">Role</th>
+          <th scope="col">Status</th>
+          <th scope="col">Shift</th>
+          <th scope="col">Day Off</th>
+          <th scope="col">Salary</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="employee in employees" :key="employee.id">
+          <td>{{ employee.id }}</td>
+          <td>{{ employee.name }}</td>
+          <td>{{ employee.role }}</td>
+          <td>{{ employee.status }}</td>
+          <td>{{ employee.shift }}</td>
+          <td>{{ employee.day_off }}</td>
+          <td>{{ employee.salary }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'EmployeeView',
+
+  data() {
+    return {
+      employees: []
+    }
+  },
+
+  async mounted() {
+    let results = await this.$axios.get('employee')
+    this.employees = results.data
+  }
+})
+</script>

src/views/HomeView.vue

+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'HomeView',
+  components: {
+    HelloWorld
+  }
+}
+</script>

src/views/LoginView.vue

+<template>
+  <div class="text-center">
+    <main class="form-signin  d-flex justify-content-center align-items-center">
+      <form @submit.prevent="submitForm">
+        <h1>Login</h1>
+        <div class="form-floating ">
+          <input class=form-control type="text" id="username" name="username" v-model="username">
+          <label for="username" class="floatingInput">Username</label>
+          <div class="error"></div>
+        </div> <br>
+        <div class="form-floating">
+          <input class="form-control" type="text" name="password" id="password" v-model="password">
+          <label for="password" class="floatingInput">Password</label>
+          <div class="error"></div>
+        </div><br>
+        <button type="submit" @click="submitform" class="btn btn-lg btn-primary w-100">Login</button>
+        <div>{{ error }}</div>
+      </form>
+
+    </main>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import storeConfig from '../store';
+import { createStore } from 'vuex';
+
+
+export default defineComponent({
+  name: 'LoginView',
+
+  setup() {
+    const store = createStore(storeConfig)
+    const username = ref('');
+    const password = ref('');
+    const error = ref('');
+
+    /** 
+     * Submit form
+     * 
+     * @return {void}
+     */
+    const submitForm = () => {
+        store.dispatch('login', { username: username.value, password: password.value })
+
+      }
+
+    return {
+      username,
+      password,
+      error,
+      submitForm,
+    };
+  },
+})
+</script>

src/views/ModifyView.vue

+<template>
+  <form @submit.prevent="update" class="row g-3">
+    <div class="col-md-6">
+      <label for="name" class="form-label">Room Name</label>
+      <input type="text" id="name" name="name" v-model="name" class="form-control">
+    </div>
+    <div class="col-md-6">
+      <label for="type" class="form-label">Type</label>
+      <input type="text" id="type" name="type" v-model="type" class="form-control">
+    </div>
+    <div class="col-md-6">
+      <label for="hour_price" class="form-label">Hour Price</label>
+      <input type="text" id="hour_price" name="hour_price" v-model="hour_price" class="form-control">
+    </div>
+    <div class="col-md-6">
+      <label for="day_price" class="form-label">Day Price</label>
+      <input type="text" id="day_price" name="day_price" v-model="day_price" class="form-control">
+    </div>
+    <div class="col-md-6">
+      <label for="size" class="form-label">Size</label>
+      <input type="number" id="size" name="size" v-model="size" class="form-control">
+    </div>
+    <div class="col-md-6">
+      <label class="form-label">Balcony</label>
+      <div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="balcony" id="balcony-true" value="true" v-model="balcony">
+          <label class="form-check-label" for="balcony-true">
+            True
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="balcony" id="balcony-false" value="false" v-model="balcony">
+          <label class="form-check-label" for="balcony-false">
+            False
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <label for="view" class="form-label">View</label>
+      <input type="text" id="view" name="view" v-model="view" class="form-control">
+    </div>
+    <div class="col-md-6">
+      <label class="form-label">Smoking</label>
+      <div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="smoking" id="smoking-true" value="true" v-model="smoking">
+          <label class="form-check-label" for="smoking-true">
+            True
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="smoking" id="smoking-false" value="false" v-model="smoking">
+          <label class="form-check-label" for="smoking-false">
+            False
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <label for="floor" class="form-label">Floor</label>
+      <input type="number" id="floor" name="floor" v-model="floor" class="form-control">
+    </div>
+    <div class="col-md-6">
+      <label class="form-label">Bathtub</label>
+      <div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="bathtub" id="bathtub-true" value="true" v-model="bathtub">
+          <label class="form-check-label" for="bathtub-true">
+            True
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="bathtub" id="bathtub-false" value="false" v-model="bathtub">
+          <label class="form-check-label" for="bathtub-false">
+            False
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="col-12">
+      <button type="submit" class="btn btn-primary">
+        <i class="bi bi-check-circle"></i> Submit
+      </button>
+    </div>
+  </form>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import axios from 'axios'
+import { useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'ModifyView',
+
+  setup() {
+    const router = useRouter();
+    const route = useRoute()
+    const id = route.params.id
+    const name = ref(null)
+    const type = ref(null)
+    const hour_price = ref(null)
+    const day_price = ref(null)
+    const size = ref(null)
+    const balcony = ref(null)
+    const view = ref(null)
+    const smoking = ref(null)
+    const floor = ref(null)
+    const bathtub = ref(null)
+
+    /**
+     * Get room data
+     *
+     * @return void
+     */
+    const update = async () => {
+      await axios.put('http://127.0.0.1:8000/api/modify', {
+        name: name.value,
+        type: type.value,
+        hour_price: hour_price.value,
+        day_price: day_price.value,
+        size: size.value,
+        balcony: balcony.value,
+        view: view.value,
+        smoking: smoking.value,
+        floor: floor.value,
+        bathtub: bathtub.value,
+        id: id
+      })
+      router.push({ name: 'Room' })
+    }
+
+    return {
+      update,
+      name,
+      type,
+      hour_price,
+      day_price,
+      size,
+      balcony,
+      view,
+      smoking,
+      floor,
+      bathtub,
+    }
+  }
+})
+</script>    

src/views/RegisterView.vue

+<template>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-6">
+        <h1 class="text-center mb-5">Register</h1>
+        <form @submit.prevent="register" class="needs-validation" novalidate>
+          <div class="form-floating mb-3">
+            <input type="text" class="form-control" id="username" name="username" v-model="username"
+              placeholder="Username" required>
+            <label for="username">Username</label>
+            <div class="invalid-feedback">
+              Please enter a valid username.
+            </div>
+          </div>
+          <div class="form-floating mb-3">
+            <input type="password" class="form-control" id="password" name="password" v-model="password"
+              placeholder="Password" required>
+            <label for="password">Password</label>
+            <div class="invalid-feedback">
+              Please enter a valid password.
+            </div>
+          </div>
+          <div class="form-floating mb-3">
+            <input type="password" class="form-control" id="confirm_password" name="confirm_password"
+              v-model="confirm_password" placeholder="Confirm Password" required>
+            <label for="confirm_password">Confirm Password</label>
+            <div class="invalid-feedback">
+              Please confirm your password.
+            </div>
+          </div>
+          <div class="form-floating mb-3">
+            <input type="email" class="form-control" id="email" name="email" v-model="email" placeholder="Email" required>
+            <label for="email">Email</label>
+            <div class="invalid-feedback">
+              Please enter a valid email address.
+            </div>
+          </div>
+          <button type="submit" class="btn btn-primary">Submit</button>
+          <div>{{ errors }}</div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { ref, defineComponent } from 'vue'
+import storeConfig from '../store';
+import { createStore } from 'vuex';
+
+export default defineComponent({
+  name: 'RegisterView',
+
+  setup() {
+    const store = createStore(storeConfig)
+    const username = ref('')
+    const password = ref('')
+    const confirm_password = ref('')
+    const email = ref('')
+    const errors = ref('')
+
+    /**
+     * Register
+     * 
+     * @return {void}
+     */
+    const register = async () => {
+      try {
+        const response = await axios.post('http://127.0.0.1:8000/api/register', {
+          username: username.value,
+          password: password.value,
+          confirm_password: confirm_password.value,
+          email: email.value
+        })
+
+        store.dispatch('login', { username: username.value, password: password.value })
+        console.log(response.data);
+      }
+      catch (error) {
+        errors.value = error.response.data.message
+        console.log(errors.value);
+      }
+    }
+
+    return {
+      username,
+      password,
+      confirm_password,
+      email,
+      errors,
+      register,
+    };
+  }
+})
+</script>

src/views/RoomView.vue

+<template>
+  <div>
+    <div>
+      <h1>Room</h1><br>
+    </div>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">Room ID</th>
+          <th scope="col">Room Name</th>
+          <th scope="col">Type</th>
+          <th scope="col">Hour Price</th>
+          <th scope="col">Day Price</th>
+          <th scope="col">Status</th>
+          <th scope="col">Size</th>
+          <th scope="col">Balcony</th>
+          <th scope="col">View</th>
+          <th scope="col">Smoking</th>
+          <th scope="col">Floor</th>
+          <th scope="col">Bathtub</th>
+          <th scope="col">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="room in rooms" :key="room.id">
+          <td>{{ room.id }}</td>
+          <td>{{ room.name }}</td>
+          <td>{{ room.type }}</td>
+          <td>{{ room.hour_price }}</td>
+          <td>{{ room.day_price }}</td>
+          <td>{{ room.status }}</td>
+          <td>{{ room.size }}</td>
+          <td>{{ room.balcony }}</td>
+          <td>{{ room.view }}</td>
+          <td>{{ room.smoking }}</td>
+          <td>{{ room.floor }}</td>
+          <td>{{ room.bathtub }}</td>
+          <td>
+            <router-link :to="{ name: 'Modify', params: { id: room.id } }">
+              <button class="btn btn-outline-primary">
+                <i class="bi bi-pencil-square"></i> Modify
+              </button>
+            </router-link>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'RoomView',
+
+  data() {
+    return {
+      rooms: []
+    }
+  },
+
+  async mounted() {
+    let results = await this.$axios.get('room')
+    this.rooms = results.data
+  }
+})
+</script>

src/views/UserListView.vue

+<template>
+  <div>
+    <h1>List of user:</h1><br>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">ID</th>
+          <th scope="col">Username</th>
+          <th scope="col">Role</th>
+          <th scope="col">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="user in users" :key="user.id">
+          <td>{{ user.id }}</td>
+          <td>{{ user.username }}</td>
+          <td>{{ user.role }}</td>
+          <td>
+            <button @click="deleteUser(user.id)" class="btn btn-danger">
+              <i class="bi bi-trash"></i> Delete
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import axios from 'axios'
+
+export default defineComponent({
+  name: 'UserListView',
+
+  setup() {
+    const users = ref([]);
+
+    /**
+     * Get all users
+     * 
+     * @return {void}
+     */
+    const getUser = async () => {
+      const response = await axios.get('http://127.0.0.1:8000/api/userlist')
+      users.value = response.data
+    }
+
+    /**
+     * Delete a user
+     * 
+     * @param {int} id 
+     * 
+     * @return {void}
+     */
+    const deleteUser = async (id) => {
+      console.log(id)
+      try {
+        const response = await axios.delete('http://127.0.0.1:8000/api/userlist/del', {
+          data: {
+            id: id,
+          },
+        })
+        console.log(response.data)
+        getUser()
+      } catch (error) {
+        console.error(error.response.data)
+      }
+    }
+    getUser()
+    
+    return {
+      users,
+      deleteUser
+    }
+  },
+})
+</script>