From 8089475535f0435b8a15762cfcefae07e37cce8c Mon Sep 17 00:00:00 2001
From: Tim Slager <timtendo12@gmail.com>
Date: Thu, 18 Jan 2024 14:31:09 +0100
Subject: [PATCH 1/4] Fix: Fixed the admin layout.

---
 .../vue/components/admin/Siderbar.vue         |  74 +++++
 src/resources/vue/layouts/admin-layout.vue    |  64 +---
 src/resources/vue/pages/admin/index.vue       | 287 +++++++++---------
 3 files changed, 225 insertions(+), 200 deletions(-)
 create mode 100644 src/resources/vue/components/admin/Siderbar.vue

diff --git a/src/resources/vue/components/admin/Siderbar.vue b/src/resources/vue/components/admin/Siderbar.vue
new file mode 100644
index 0000000..89ea380
--- /dev/null
+++ b/src/resources/vue/components/admin/Siderbar.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="sidebar-wrapper">
+    <div class="d-flex flex-column flex-shrink-0 p-3" style="width: 15rem; height: 100%; background-color: #262d42">
+      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-light text-decoration-none">
+        <Icon icon="admin" size="24" color="white" />
+        <span class="fs-4 p-1">| Biblio Admin</span>
+      </a>
+      <hr style="color: white">
+      <ul class="nav nav-pills flex-column mb-auto">
+        <li class="nav-item">
+          <a href="/admin" :class="{ 'active': $page.url === ('/admin'), 'link-light': $page.url !== ('/admin') }" class="nav-link d-flex" aria-current="page">
+            <Icon icon="full-house" size="16" color="white" />&nbsp;Home
+          </a>
+        </li>
+        <li>
+          <a href="/admin/items" :class="{ 'active': $page.url.startsWith('/admin/items'), 'link-light': !$page.url.startsWith('/admin/items') }" class="nav-link d-flex">
+            <Icon icon="full-archive" size="16" color="white" /> &nbsp;Items
+          </a>
+        </li>
+        <li>
+          <a href="/admin/reservations" :class="{ 'active': $page.url.startsWith('/admin/reservations'), 'link-light': !$page.url.startsWith('/admin/reservations') }" class="nav-link link-light d-flex">
+            <Icon icon="list" size="16" color="white" /> &nbsp;Reserveringen
+          </a>
+        </li>
+        <li>
+          <a href="/admin/users" :class="{ 'active': $page.url.startsWith('/admin/users'), 'link-light': !$page.url.startsWith('/admin/users') }" class="nav-link link-light d-flex">
+            <Icon icon="full-people" size="16" color="white" /> &nbsp;Klanten
+          </a>
+        </li>
+        <li>
+          <a href="/admin/invoices" :class="{ 'active': $page.url.startsWith('/admin/invoices'), 'link-light': !$page.url.startsWith('/admin/invoices') }" class="nav-link link-light d-flex">
+            <Icon icon="full-euro" size="16" color="white" /> &nbsp;Facturen
+          </a>
+        </li>
+      </ul>
+      <hr>
+      <div class="dropdown">
+        <a href="#" class="d-flex align-items-center link-light text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
+          <Icon icon="full-person" size="24" color="white" />
+          <strong class="p-1">{{ userData.name }}</strong>
+        </a>
+        <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
+          <li><a class="dropdown-item" href="#">Profile</a></li>
+          <li>
+            <hr class="dropdown-divider">
+          </li>
+          <li><a class="dropdown-item" href="#">Sign out</a></li>
+        </ul>
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+<script>
+import Icon from "@/icon.vue"
+export default {
+  name: "AdminSidebar",
+  props: ["userData"],
+  components: {
+    Icon
+  },
+}
+</script>
+
+<style>
+.sidebar-wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  background-color: white;
+}
+</style>
diff --git a/src/resources/vue/layouts/admin-layout.vue b/src/resources/vue/layouts/admin-layout.vue
index 9f4e87b..f1746c7 100644
--- a/src/resources/vue/layouts/admin-layout.vue
+++ b/src/resources/vue/layouts/admin-layout.vue
@@ -1,67 +1,19 @@
 <template>
-  <div class="d-flex flex-column flex-shrink-0 p-3" style="width: 15rem; height: 100%; background-color: #262d42">
-    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-light text-decoration-none">
-      <Icon icon="admin" size="24" color="white" />
-      <span class="fs-4 p-1">| Biblio Admin</span>
-    </a>
-    <hr>
-    <ul class="nav nav-pills flex-column mb-auto">
-      <li class="nav-item">
-        <a href="/admin" :class="{ 'active': $page.url === ('/admin'), 'link-light': $page.url !== ('/admin') }" class="nav-link d-flex" aria-current="page">
-          <Icon icon="full-house" size="16" color="white" />&nbsp;Home
-        </a>
-      </li>
-      <li>
-        <a href="/admin/items" :class="{ 'active': $page.url.startsWith('/admin/items'), 'link-light': !$page.url.startsWith('/admin/items') }" class="nav-link d-flex"> <!-- link-light -->
-          <Icon icon="full-archive" size="16" color="white" /> &nbsp;Items
-        </a>
-      </li>
-      <li>
-        <a href="/admin/reservations" :class="{ 'active': $page.url.startsWith('/admin/reservations'), 'link-light': !$page.url.startsWith('/admin/reservations') }" class="nav-link link-light d-flex">
-          <Icon icon="list" size="16" color="white" /> &nbsp;Reserveringen
-        </a>
-      </li>
-      <li>
-        <a href="/admin/users" :class="{ 'active': $page.url.startsWith('/admin/users'), 'link-light': !$page.url.startsWith('/admin/users') }" class="nav-link link-light d-flex">
-          <Icon icon="full-people" size="16" color="white" /> &nbsp;Klanten
-        </a>
-      </li>
-      <li>
-        <a href="/admin/invoices" :class="{ 'active': $page.url.startsWith('/admin/invoices'), 'link-light': !$page.url.startsWith('/admin/invoices') }" class="nav-link link-light d-flex">
-          <Icon icon="full-euro" size="16" color="white" /> &nbsp;Facturen
-        </a>
-      </li>
-    </ul>
-    <hr>
-    <div class="dropdown">
-      <a href="#" class="d-flex align-items-center link-light text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
-        <Icon icon="full-person" size="24" color="white" />
-        <strong class="p-1">{{ userData.name }}</strong>
-      </a>
-      <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
-        <li><a class="dropdown-item" href="#">Profile</a></li>
-        <li>
-          <hr class="dropdown-divider">
-        </li>
-        <li><a class="dropdown-item" href="#">Sign out</a></li>
-      </ul>
-    </div>
-  </div>
-  <div class="slot">
+  <AdminSidebar :userData="userData">
     <slot />
-  </div>
+  </AdminSidebar>
 </template>
 
 <script>
   import "https://code.jquery.com/jquery-3.7.1.js"
   import "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
 
-  import Icon from "@components/icon.vue";
+  import AdminSidebar from "@/components/admin/Siderbar.vue";
 
   export default {
     name: "AdminLayout",
     components: {
-      Icon,
+      AdminSidebar
     },
     props: {
       userData: {
@@ -82,9 +34,7 @@
     background-color: #003bb2 !important;
   }
 
-  .slot {
-    display: flex;
-    width: 100%;
-    background-color: #f2f2f2
+  * {
+    color: black;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/resources/vue/pages/admin/index.vue b/src/resources/vue/pages/admin/index.vue
index 37ec8bb..163f042 100644
--- a/src/resources/vue/pages/admin/index.vue
+++ b/src/resources/vue/pages/admin/index.vue
@@ -1,176 +1,177 @@
 <template>
+<AdminLayout :user-data="{name: 'John Doe'}">
   <div class="admin-content">
-    <AdminLayout>
-      <div class="dashboard">
-        <span class="dashboard-title">Dashboard</span>
-        <div class="info-cards">
-          <div class="card">
-            <div class="card-body text-center">
-              <span class="card-title">Items</span>
-              <p class="card-text">{{ itemCount }}</p>
-            </div>
+    <div class="dashboard">
+      <span class="dashboard-title">Dashboard</span>
+      <div class="info-cards">
+        <div class="card">
+          <div class="card-body text-center">
+            <span class="card-title">Items</span>
+            <p class="card-text">{{ itemCount }}</p>
           </div>
-          <div class="card">
-            <div class="card-body text-center">
-              <span class="card-title">Klanten</span>
-              <p class="card-text">{{ customerCount }}</p>
-            </div>
-          </div>
-          <div class="card">
-            <div class="card-body text-center">
-              <span class="card-title">Reserveringen</span>
-              <p class="card-text">{{ reservationCount }}</p>
-            </div>
+        </div>
+        <div class="card">
+          <div class="card-body text-center">
+            <span class="card-title">Klanten</span>
+            <p class="card-text">{{ customerCount }}</p>
           </div>
-          <div class="card">
-            <div class="card-body text-center">
-              <span class="card-title">Openstaande Facturen</span>
-              <p class="card-text">{{ openInvoiceCount }}</p>
-            </div>
+        </div>
+        <div class="card">
+          <div class="card-body text-center">
+            <span class="card-title">Reserveringen</span>
+            <p class="card-text">{{ reservationCount }}</p>
           </div>
         </div>
-        <div class="charts">
-          <apexchart class="chart" width="95%" type="bar" :options="options" :series="series"></apexchart>
-          <apexchart class="chart" width="95%" type="bar" :options="options2" :series="series2"></apexchart>
+        <div class="card">
+          <div class="card-body text-center">
+            <span class="card-title">Openstaande Facturen</span>
+            <p class="card-text">{{ openInvoiceCount }}</p>
+          </div>
         </div>
       </div>
-    </AdminLayout>
+      <div class="charts">
+        <apexchart class="chart" width="95%" type="bar" :options="options" :series="series"></apexchart>
+        <apexchart class="chart" width="95%" type="bar" :options="options2" :series="series2"></apexchart>
+      </div>
+    </div>
   </div>
+  </AdminLayout>
 </template>
-<script>
-  import AdminLayout from "@layouts/admin-layout.vue";
 
-  export default {
-    name: "AdminDashboard",
-    components: {
-      AdminLayout,
+<script>
+import AdminLayout from "../../layouts/admin-layout.vue";
+export default {
+  name: "admin-index",
+  components: {
+    AdminLayout,
+  },
+  props: {
+    itemCount: {
+      type: Number,
+      default: 1234,
+      required: true,
     },
-    props: {
-      itemCount: {
-        type: Number,
-        default: 1234,
-        required: true,
-      },
-      customerCount: {
-        type: Number,
-        default: 123,
-        required: true,
-      },
-      reservationCount: {
-        type: Number,
-        default: 12,
-        required: true,
-      },
-      openInvoiceCount: {
-        type: Number,
-        default: 1,
-        required: true,
-      }
+    customerCount: {
+      type: Number,
+      default: 123,
+      required: true,
     },
-    data: function () {
-      return {
-        options: {
-          chart: {
-            id: "item-chart",
-            background: "#f2f2f2",
-          },
-          title: {
-            text: "Items in gebruik",
-            align: "left",
-            style: {
-              color: "#000",
-            },
-          },
-          xaxis: {
-            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
-          },
+    reservationCount: {
+      type: Number,
+      default: 12,
+      required: true,
+    },
+    openInvoiceCount: {
+      type: Number,
+      default: 1,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      options: {
+        chart: {
+          id: "item-chart",
+          background: "#f2f2f2",
         },
-        series: [
-          {
-            name: "series-1",
-            data: [30, 40, 45, 50, 49, 60, 70, 91],
-          }
-        ],
-        options2: {
-          chart: {
-            id: "item-chart",
-            background: "#f2f2f2",
-          },
-          title: {
-            text: "Aantal nieuwe klanten per dag",
-            align: "left",
-            style: {
-              color: "#000",
-            },
+        title: {
+          text: "Items in gebruik",
+          align: "left",
+          style: {
+            color: "#000",
           },
-          xaxis: {
-            categories: [11, 111, 1111, 1111, 1995, 1996, 1997, 1998],
+        },
+        xaxis: {
+          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
+        },
+      },
+      series: [
+        {
+          name: "series-1",
+          data: [30, 40, 45, 50, 49, 60, 70, 91],
+        }
+      ],
+      options2: {
+        chart: {
+          id: "item-chart",
+          background: "#f2f2f2",
+        },
+        title: {
+          text: "Aantal nieuwe klanten per dag",
+          align: "left",
+          style: {
+            color: "#000",
           },
         },
-        series2: [
-          {
-            name: "series-1",
-            data: [300, 40, 25, 500, 439, 630, 370, 191],
-          }
-        ],
-      };
-    },
-  };
+        xaxis: {
+          categories: [11, 111, 1111, 1111, 1995, 1996, 1997, 1998],
+        },
+      },
+      series2: [
+        {
+          name: "series-1",
+          data: [300, 40, 25, 500, 439, 630, 370, 191],
+        }
+      ],
+    };
+  }
+}
 </script>
+
 <style lang="scss">
-  .admin-content {
+.admin-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  .dashboard {
     display: flex;
-    flex-direction: row;
-    height: 100%;
+    flex-direction: column;
+    align-items: start;
+    width: 100%;
+    padding: 1.3rem;
 
-    .dashboard {
+    .dashboard-title {
+      font-size: 2rem;
+      font-weight: bold;
+      margin-bottom: 1.3rem;
+      color: #191a21;
+    }
+
+    .info-cards {
       display: flex;
-      flex-direction: column;
-      align-items: start;
+      flex-direction: row;
       width: 100%;
-      padding: 1.3rem;
+      justify-content: space-between;
+      gap: 1.9rem;
+      margin-bottom: 1.3rem;
 
-      .dashboard-title {
-        font-size: 2rem;
-        font-weight: bold;
-        margin-bottom: 1.3rem;
+      .card {
+        flex: 1 1;
+        background-color: #f2f2f2;
         color: #191a21;
-      }
-
-      .info-cards {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        justify-content: space-between;
-        gap: 1.9rem;
-        margin-bottom: 1.3rem;
-
-        .card {
-          flex: 1 1;
-          background-color: #f2f2f2;
-          color: #191a21;
 
-          .card-title {
-            font-size: 1.3rem;
-            font-weight: bold;
-          }
+        .card-title {
+          font-size: 1.3rem;
+          font-weight: bold;
         }
       }
+    }
 
-      .charts {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        gap: 1.9rem;
+    .charts {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      gap: 1.9rem;
 
-        .chart {
-          padding: 10px;
-          border: 1px solid;
-          flex: 1 1;
-          border-radius: 0.375rem;
-          border-color: rgba(0, 0, 0, 0.175);
-        }
+      .chart {
+        padding: 10px;
+        border: 1px solid;
+        flex: 1 1;
+        border-radius: 0.375rem;
+        border-color: rgba(0, 0, 0, 0.175);
       }
     }
   }
-</style>
\ No newline at end of file
+}
+</style>

From 3d4f65cdf14e0e96ac68110e936ada6ce696efbf Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Wed, 17 Jan 2024 14:47:48 +0100
Subject: [PATCH 2/4] feat: return page with mock data

---
 src/app/Http/Controllers/AdminController.php | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/Http/Controllers/AdminController.php b/src/app/Http/Controllers/AdminController.php
index fe59c20..e292d35 100644
--- a/src/app/Http/Controllers/AdminController.php
+++ b/src/app/Http/Controllers/AdminController.php
@@ -9,6 +9,24 @@ class AdminController extends Controller
 {
   public function index()
   {
-    return Inertia::render('admin/index');
+    return Inertia::render('admin/index', [
+      'userData' => [
+        'name' => 'John Doe',
+      ],
+      'count' => [
+        'items' => 10,
+        'customers' => 20,
+        'reservations' => 30,
+        'invoices' => 40,
+      ],
+      'chart1' => [
+        'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+        'series' => [1, 2, 3, 4, 5, 6, 7, 8]
+      ],
+      'chart2' => [
+        'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+        'series' => [0, 1, 2, 3, 4, 5, 6, 7]
+      ],
+    ]);
   }
 }

From e0ad061068195c31ec82cdc497827f8ab565fd68 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Wed, 17 Jan 2024 14:55:01 +0100
Subject: [PATCH 3/4] feat: adminpage, datamapping the mock data

---
 src/resources/vue/pages/admin/index.vue | 158 ++++++++++++++++++------
 1 file changed, 118 insertions(+), 40 deletions(-)

diff --git a/src/resources/vue/pages/admin/index.vue b/src/resources/vue/pages/admin/index.vue
index 163f042..3126519 100644
--- a/src/resources/vue/pages/admin/index.vue
+++ b/src/resources/vue/pages/admin/index.vue
@@ -1,37 +1,38 @@
 <template>
 <AdminLayout :user-data="{name: 'John Doe'}">
   <div class="admin-content">
+    <AdminLayout :userData="userData" />
     <div class="dashboard">
       <span class="dashboard-title">Dashboard</span>
       <div class="info-cards">
         <div class="card">
           <div class="card-body text-center">
             <span class="card-title">Items</span>
-            <p class="card-text">{{ itemCount }}</p>
+            <p class="card-text">{{ count.items }}</p>
           </div>
         </div>
         <div class="card">
           <div class="card-body text-center">
             <span class="card-title">Klanten</span>
-            <p class="card-text">{{ customerCount }}</p>
+            <p class="card-text">{{ count.customers }}</p>
           </div>
         </div>
         <div class="card">
           <div class="card-body text-center">
             <span class="card-title">Reserveringen</span>
-            <p class="card-text">{{ reservationCount }}</p>
+            <p class="card-text">{{ count.reservations }}</p>
           </div>
         </div>
         <div class="card">
           <div class="card-body text-center">
             <span class="card-title">Openstaande Facturen</span>
-            <p class="card-text">{{ openInvoiceCount }}</p>
+            <p class="card-text">{{ count.invoices }}</p>
           </div>
         </div>
       </div>
       <div class="charts">
-        <apexchart class="chart" width="95%" type="bar" :options="options" :series="series"></apexchart>
-        <apexchart class="chart" width="95%" type="bar" :options="options2" :series="series2"></apexchart>
+        <apexchart class="chart" width="95%" type="bar" :options="optionsChart1" :series="seriesChart1"></apexchart>
+        <apexchart class="chart" width="95%" type="bar" :options="optionsChart2" :series="seriesChart2"></apexchart>
       </div>
     </div>
   </div>
@@ -51,44 +52,121 @@ export default {
       default: 1234,
       required: true,
     },
-    customerCount: {
-      type: Number,
-      default: 123,
-      required: true,
-    },
-    reservationCount: {
-      type: Number,
-      default: 12,
-      required: true,
+    props: {
+      userData: {
+        type: Object,
+        required: true,
+        default: () => ({
+          name: "John Doe",
+        }),
+      },
+      count: {
+        type: Object,
+        required: true,
+        default: () => ({
+          items: 1,
+          customers: 1,
+          reservations: 1,
+          openInvoices: 1,
+        }),
+      },
+      chart1: {
+        type: Object,
+        required: true,
+        default: () => ({
+          labels: [],
+          series: [],
+        }),
+      },
+      chart2: {
+        type: Object,
+        required: true,
+        default: () => ({
+          labels: [],
+          series: [],
+        }),
+      }
     },
-    openInvoiceCount: {
-      type: Number,
-      default: 1,
-      required: true,
-    }
-  },
-  data() {
-    return {
-      options: {
-        chart: {
-          id: "item-chart",
-          background: "#f2f2f2",
-        },
-        title: {
-          text: "Items in gebruik",
-          align: "left",
-          style: {
-            color: "#000",
+    data: function () {
+      return {
+        optionsChart1: {
+          chart: {
+            id: "item-chart",
+            background: "#f2f2f2",
+          },
+          title: {
+            text: "Items in gebruik",
+            align: "center",
+          },
+          xaxis: {
+            categories: this.chart1.labels,
           },
         },
-        xaxis: {
-          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
+        seriesChart1: [
+          {
+            data: this.chart1.series,
+          }
+        ],
+        optionsChart2: {
+          chart: {
+            id: "item-chart",
+            background: "#f2f2f2",
+          },
+          title: {
+            text: "Aantal nieuwe klanten per dag",
+            align: "center",
+          },
+          xaxis: {
+            categories: this.chart2.labels,
+          },
         },
-      },
-      series: [
-        {
-          name: "series-1",
-          data: [30, 40, 45, 50, 49, 60, 70, 91],
+        seriesChart2: [
+          {
+            data: this.chart2.series,
+          }
+        ],
+      };
+    },
+  };
+</script>
+<style lang="scss">
+  .admin-content {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+
+    .dashboard {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      width: 100%;
+      padding: 1.3rem;
+      background-color: #f2f2f2;
+
+      .dashboard-title {
+        font-size: 2rem;
+        font-weight: bold;
+        margin-bottom: 1.3rem;
+        color: #191a21;
+      }
+
+      .info-cards {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        justify-content: space-between;
+        gap: 1.9rem;
+        margin-bottom: 1.3rem;
+
+        .card {
+          flex: 1 1;
+          background-color: #f2f2f2;
+          color: #191a21;
+
+          .card-title {
+            font-size: 1.3rem;
+            font-weight: bold;
+          }
         }
       ],
       options2: {

From 50319ffd12e4311006247fab2136373d08875baa Mon Sep 17 00:00:00 2001
From: Tim Slager <timtendo12@gmail.com>
Date: Thu, 18 Jan 2024 15:00:26 +0100
Subject: [PATCH 4/4] Fix: Conflict fix.

---
 src/resources/vue/pages/admin/index.vue | 131 ++++++------------------
 1 file changed, 29 insertions(+), 102 deletions(-)

diff --git a/src/resources/vue/pages/admin/index.vue b/src/resources/vue/pages/admin/index.vue
index 3126519..eb282fb 100644
--- a/src/resources/vue/pages/admin/index.vue
+++ b/src/resources/vue/pages/admin/index.vue
@@ -1,41 +1,40 @@
 <template>
-<AdminLayout :user-data="{name: 'John Doe'}">
-  <div class="admin-content">
-    <AdminLayout :userData="userData" />
-    <div class="dashboard">
-      <span class="dashboard-title">Dashboard</span>
-      <div class="info-cards">
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Items</span>
-            <p class="card-text">{{ count.items }}</p>
+  <AdminLayout :user-data="{name: 'John Doe'}">
+    <div class="admin-content">
+      <div class="dashboard">
+        <span class="dashboard-title">Dashboard</span>
+        <div class="info-cards">
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Items</span>
+              <p class="card-text">{{ count.items }}</p>
+            </div>
           </div>
-        </div>
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Klanten</span>
-            <p class="card-text">{{ count.customers }}</p>
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Klanten</span>
+              <p class="card-text">{{ count.customers }}</p>
+            </div>
           </div>
-        </div>
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Reserveringen</span>
-            <p class="card-text">{{ count.reservations }}</p>
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Reserveringen</span>
+              <p class="card-text">{{ count.reservations }}</p>
+            </div>
           </div>
-        </div>
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Openstaande Facturen</span>
-            <p class="card-text">{{ count.invoices }}</p>
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Openstaande Facturen</span>
+              <p class="card-text">{{ count.invoices }}</p>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="charts">
-        <apexchart class="chart" width="95%" type="bar" :options="optionsChart1" :series="seriesChart1"></apexchart>
-        <apexchart class="chart" width="95%" type="bar" :options="optionsChart2" :series="seriesChart2"></apexchart>
+        <div class="charts">
+          <apexchart class="chart" width="95%" type="bar" :options="optionsChart1" :series="seriesChart1"></apexchart>
+          <apexchart class="chart" width="95%" type="bar" :options="optionsChart2" :series="seriesChart2"></apexchart>
+        </div>
       </div>
     </div>
-  </div>
   </AdminLayout>
 </template>
 
@@ -47,12 +46,6 @@ export default {
     AdminLayout,
   },
   props: {
-    itemCount: {
-      type: Number,
-      default: 1234,
-      required: true,
-    },
-    props: {
       userData: {
         type: Object,
         required: true,
@@ -127,73 +120,7 @@ export default {
         ],
       };
     },
-  };
-</script>
-<style lang="scss">
-  .admin-content {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-
-    .dashboard {
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      width: 100%;
-      padding: 1.3rem;
-      background-color: #f2f2f2;
-
-      .dashboard-title {
-        font-size: 2rem;
-        font-weight: bold;
-        margin-bottom: 1.3rem;
-        color: #191a21;
-      }
-
-      .info-cards {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        justify-content: space-between;
-        gap: 1.9rem;
-        margin-bottom: 1.3rem;
-
-        .card {
-          flex: 1 1;
-          background-color: #f2f2f2;
-          color: #191a21;
-
-          .card-title {
-            font-size: 1.3rem;
-            font-weight: bold;
-          }
-        }
-      ],
-      options2: {
-        chart: {
-          id: "item-chart",
-          background: "#f2f2f2",
-        },
-        title: {
-          text: "Aantal nieuwe klanten per dag",
-          align: "left",
-          style: {
-            color: "#000",
-          },
-        },
-        xaxis: {
-          categories: [11, 111, 1111, 1111, 1995, 1996, 1997, 1998],
-        },
-      },
-      series2: [
-        {
-          name: "series-1",
-          data: [300, 40, 25, 500, 439, 630, 370, 191],
-        }
-      ],
-    };
   }
-}
 </script>
 
 <style lang="scss">