view of vue components updated to tables

resources/js/components/Pages/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="mb-5">
     <page-header :name="name" />
   </div>
 </template>

resources/js/components/Pages/Groups.vue

@@ -1,11 +1,30 @@
 <template>
-  <div>
+  <div class="mb-5">
     <page-header :name="name" />
 
-    <div class="list-group">
-      <div v-for="group in groups" class="list-group-item">
-        {{ group.name }}
-      </div>
+    <div class="card border-0">
+      <table class="table table-bordered mb-0">
+        <thead>
+        <tr role="row">
+          <th>Id</th>
+          <th>Name</th>
+          <th>Users count</th>
+          <th>Servers count</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="group in groups">
+          <td>
+            <router-link :to="{name: 'groups.edit', params: {id: group.id}}">
+              {{ group.id }}
+            </router-link>
+          </td>
+          <td>{{ group.name }}</td>
+          <td>{{ group.users_count }}</td>
+          <td>{{ group.servers_count }}</td>
+        </tr>
+        </tbody>
+      </table>
     </div>
 
   </div>

resources/js/components/Pages/Logs.vue

@@ -1,39 +1,46 @@
 <template>
-  <div>
-    <page-header :name="name"/>
-    <div class="card-body">
-      <div class="row">
-        <div class="col-sm-12">
-          <table class="table table-bordered">
-            <thead>
-            <tr role="row">
-              <th>Id</th>
-              <th>Code</th>
-              <th>Message</th>
-              <th>User</th>
-              <th>Server</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr v-for="log in logs">
-              <td>{{ log.id }}</td>
-              <td>{{ log.code }}</td>
-              <td>{{ log.message }}</td>
-              <td>{{ log.user.name }}</td>
-              <td>{{ log.server.hostname }}</td>
-            </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+  <div class="mb-5">
+    <page-header :name="name" />
+
+    <div class="card border-0">
+      <table class="table table-bordered mb-0">
+        <thead>
+        <tr role="row">
+          <th>Id</th>
+          <th>Code</th>
+          <th>Message</th>
+          <th>User</th>
+          <th>Server</th>
+          <th>Created at</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="log in logs">
+          <td>{{ log.id }}</td>
+          <td>{{ log.code }}</td>
+          <td>{{ log.message }}</td>
+          <td>
+            <router-link :to="{name: 'users.edit', params: {id: log.user.id}}">
+              {{ log.user.name }}
+            </router-link>
+          </td>
+          <td>
+            <router-link :to="{name: 'servers.edit', params: {id: log.server.id}}">
+              {{ log.server.hostname }}
+            </router-link>
+          </td>
+          <td>{{ log.created_at }}</td>
+        </tr>
+        </tbody>
+      </table>
     </div>
 
   </div>
 </template>
 
 <script>
-  import PageHeader from "../Layout/PageHeader";
-  import {mapState} from "vuex";
+  import PageHeader   from "../Layout/PageHeader";
+  import { mapState } from "vuex";
 
   export default {
 
@@ -52,7 +59,7 @@
 
     data() {
       return {
-        name: "Logs"
+        name: "Logs from servers"
       }
     },
 

resources/js/components/Pages/Servers.vue

@@ -1,11 +1,36 @@
 <template>
-  <div>
+  <div class="mb-5">
     <page-header :name="name" />
 
-    <div class="list-group">
-      <div v-for="server in servers" class="list-group-item">
-        {{ server.hostname }}
-      </div>
+    <div class="card border-0">
+      <table class="table table-bordered mb-0">
+        <thead>
+        <tr role="row">
+          <th>Id</th>
+          <th>Hostname</th>
+          <th>IPv4</th>
+          <th>IPv6</th>
+          <th>Users count</th>
+          <th>Updated at</th>
+          <th>Created at</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="server in servers">
+          <td>
+            <router-link :to="{name: 'servers.edit', params: {id: server.id}}">
+              {{ server.id }}
+            </router-link>
+          </td>
+          <td>{{ server.hostname }}</td>
+          <td>{{ server.ipv4 }}</td>
+          <td>{{ server.ipv6 }}</td>
+          <td>{{ server.users_count }}</td>
+          <td>{{ server.updated_at }}</td>
+          <td>{{ server.created_at }}</td>
+        </tr>
+        </tbody>
+      </table>
     </div>
 
   </div>

resources/js/components/Pages/Users.vue

@@ -1,11 +1,32 @@
 <template>
-  <div>
+  <div class="mb-5">
     <page-header :name="name" />
 
-    <div class="list-group">
-      <div v-for="user in users" class="list-group-item">
-        {{ user.name }}
-      </div>
+    <div class="card border-0">
+      <table class="table table-bordered mb-0">
+        <thead>
+        <tr role="row">
+          <th>Id</th>
+          <th>Name</th>
+          <th>Email</th>
+          <th>Updated at</th>
+          <th>Created at</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="user in users">
+          <td>
+            <router-link :to="{name: 'users.edit', params: {id: user.id}}">
+              {{ user.id }}
+            </router-link>
+          </td>
+          <td>{{ user.name }}</td>
+          <td>{{ user.email }}</td>
+          <td>{{ user.updated_at }}</td>
+          <td>{{ user.created_at }}</td>
+        </tr>
+        </tbody>
+      </table>
     </div>
 
   </div>