diff --git a/src/components/session/token/SessionUser.vue b/src/components/session/token/SessionUser.vue
index 90e16656..01b2feb7 100644
--- a/src/components/session/token/SessionUser.vue
+++ b/src/components/session/token/SessionUser.vue
@@ -16,6 +16,7 @@ import {EconomicProducts} from "@/components/session/token/SessionUser/Objects/e
 import {Roles} from "@/components/session/token/SessionUser/Objects/Roles.vue";
 import {Permissions} from "@/components/session/token/SessionUser/Objects/Permissions.vue";
 import {CollectedOrderInvoices} from "@/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue";
+import {DepartmentDailyReports} from "@/components/session/token/SessionUser/Objects/DepartmentDailyReports.vue";
 import {ObjectsGlobal} from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import {useRouter} from "vue-router";
 
@@ -177,6 +178,7 @@ export const SessionUser = {
     roles: Roles,
     permissions: Permissions,
     collectedOrderInvoices: CollectedOrderInvoices,
+    department_daily_reports: DepartmentDailyReports,
     global: ObjectsGlobal,
   },
   /** The user's token & authentication status */
@@ -269,7 +271,7 @@ export const SessionUser = {
     getDepartmentIdFromUrl: () => {
       // Check if the department id is in the route
       const router = useRouter();
-      return router.currentRoute.value.params.departmentId;
+      return parseInt(router.currentRoute.value.params.departmentId);
     },
     /** Redirect to */
     redirectTo: {
diff --git a/src/components/session/token/SessionUser/Objects/DepartmentDailyReports.vue b/src/components/session/token/SessionUser/Objects/DepartmentDailyReports.vue
new file mode 100644
index 00000000..b1797eae
--- /dev/null
+++ b/src/components/session/token/SessionUser/Objects/DepartmentDailyReports.vue
@@ -0,0 +1,143 @@
+<script>
+import Swal from "sweetalert2";
+import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
+import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import {ref} from "vue";
+
+
+
+    /**
+     * The DepartmentDailyReports object
+     */
+    export const DepartmentDailyReports = {
+      meta: {
+        title: "Afdelingens dagsopgørelser",
+        icon: "fas fa-list",
+        description: "Oversigt over afdelingens dagsopgørelser",
+        endpoint: "/departments/daily-reports",
+        labels: {
+          single: "dagsopgørelse",
+          multiple: "dagsopgørelser"
+        }
+      },
+      columns: {
+        id: {
+          label: "ID",
+          type: "number",
+          sortable: true,
+          creation: {
+            required: false
+          }
+        },
+        department_id: {
+          label: "Afdelings ID",
+          type: "select",
+          sortable: true,
+          creation: {
+            required: true
+          },
+          options: async () => {
+            console.log("Getting departments");
+            return SessionUser.objects.departments.get.all();
+          }
+        },
+        water_usage: {
+          label: "Vandforbrug (m3)",
+          type: "number",
+          sortable: true,
+          creation: {
+            required: true
+          },
+        },
+        filled_by: {
+          label: "Udfyldt af",
+          type: "number",
+          sortable: true,
+          creation: {
+            required: false
+          },
+        },
+        created_at: {
+          label: "Oprettet",
+          type: "date",
+          sortable: true,
+          creation: {
+            required: false
+          }
+        },
+      },
+      add: async (department_id, category_id) => {
+        return ObjectsGlobal.add.object(
+            DepartmentDailyReports.meta.endpoint,
+            {
+              department_id: parseInt(department_id),
+              category_id: parseInt(category_id)
+            }
+        );
+      },
+      set: {
+        department_id: async (id, department_id) => {
+          return ObjectsGlobal.set.column(
+              DepartmentDailyReports.meta.endpoint,
+              id,
+              "department_id",
+              parseInt(department_id)
+          )
+        },
+        category_id: async (id, category_id) => {
+          return ObjectsGlobal.set.column(
+              DepartmentDailyReports.meta.endpoint,
+              id,
+              "category_id",
+              parseInt(category_id)
+          )
+        },
+      },
+      get: {
+        all: async () => {
+          return ObjectsGlobal.get.objects(DepartmentDailyReports.meta.endpoint);
+        },
+        single: async (id) => {
+          return ObjectsGlobal.get.object(DepartmentDailyReports.meta.endpoint, parseInt(id));
+        }
+      },
+      delete: async (id) => {
+        return ObjectsGlobal.delete.object(DepartmentDailyReports.meta.endpoint, parseInt(id));
+      },
+      functions: {
+        showCreateObjectFormDepartment: async (department_id, onAfterSubmit = null) => {
+          console.log("Department ID", department_id, "type", typeof department_id);
+          return ObjectsGlobal.showCreateObjectForm(DepartmentDailyReports, onAfterSubmit, {department_id: department_id});
+        },
+        showDeleteObjectForm: (id, onAfterSubmit = null) => {
+          return ObjectsGlobal.showDeleteObjectForm(DepartmentDailyReports, id, onAfterSubmit);
+        },
+      },
+      /**
+       * Show the create object form
+       * @param onAfterSubmit
+       * @returns {Promise<SweetAlertResult<Awaited<any>>>}
+       */
+      showCreateObjectForm: (onAfterSubmit = null) => {
+        return ObjectsGlobal.showCreateObjectForm(DepartmentDailyReports, onAfterSubmit);
+      },
+      /**
+       * Show the edit object field form
+       * @param id
+       * @param column
+       * @param value
+       * @param onAfterSubmit
+       * @returns {Promise<SweetAlertResult<Awaited<any>>>}
+       */
+      showEditObjectFieldForm: (id, column, value, onAfterSubmit = null) => {
+        return ObjectsGlobal.showEditObjectFieldForm(
+            DepartmentDailyReports,
+            id,
+            column,
+            value,
+            onAfterSubmit
+        );
+      }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue b/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
index df75fe5f..ee7d9c36 100644
--- a/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
+++ b/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
@@ -199,14 +199,16 @@ export const ObjectsGlobal = {
                 <div class="control">
                 <!-- Select -->
                 <div class="select is-fullwidth">
-                  <select id="${column}" class="has-background-light has-text-black" ${isLocked ? 'disabled' : ''}>`;
+                  <select id="${column}" class="has-background-light has-text-black" ${isLocked ? 'disabled' : ''} >`;
             await columns[column].options().then((response) => {
               // How long are the list of options
               for (let i = 0; i < response.length; i++) {
                 var tmp = response[i];
                 // Check if the column exists in the locked values
                 var lockedValue = lockedValues[column] === tmp.id ? 'selected' : '';
-                html += `<option value="${tmp.id}" ${lockedValue}>${tmp.name}</option>`;
+                html += `<option value="${tmp.id}" ${lockedValue}>`;
+                html += `${tmp.name}`;
+                html += `</option>`;
               }
             });
             html += `</select>
diff --git a/src/router.js b/src/router.js
index 0fee2bc4..299e4193 100644
--- a/src/router.js
+++ b/src/router.js
@@ -71,6 +71,8 @@ import DepartmentStripeSetup from "@/views/dashboards/superUserDashboard/departm
 import CollectedOrderInvoices from "@/views/dashboards/superUserDashboard/CollectedOrderInvoices.vue";
 import CollectedOrderInvoice
 	from "@/views/dashboards/superUserDashboard/collectedOrderInvoice/collectedOrderInvoice.vue";
+import DepartmentDailyReport
+	from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue";
 
 // Export the router as router
 export const router = createRouter({
@@ -172,6 +174,12 @@ export const router = createRouter({
 			component: DepartmentBookings,
 			meta: { middleware: adminMiddleware }
 		},
+		{
+			name: 'dailyreport',
+			path: '/admin/:departmentId/modules/daily-report',
+			component: DepartmentDailyReport,
+			meta: { middleware: adminMiddleware }
+		},
 		{
 			name: 'superuser',
 			path: '/superuser',
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue
new file mode 100644
index 00000000..baef6ac2
--- /dev/null
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue
@@ -0,0 +1,79 @@
+<script setup>
+
+import DepartmentDashboardHero from "@/views/dashboards/departmentDashboard/DepartmentDashboardHero.vue";
+import PosDepartmentMVP from "@/components/displays/department/pos/PosDepartmentMVP.vue";
+import DepartmentPosNavigation from "@/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosNavigation.vue";
+import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
+import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+import DepartmentDashboardDailyReportCount
+  from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue";
+import {ref} from "vue";
+import { useRouter } from "vue-router";
+
+// Get the department ID from the route
+const router = useRouter();
+const department_id = ref(parseInt(router.currentRoute.value.params.departmentId));
+console.log(department_id.value);
+
+// Define the reactive variables
+const daily_reports = ref(null);
+
+const reports = ref([
+  {
+    title: 'Transaktioner',
+    subtitle: 'Dagens transaktioner',
+    count: 10,
+    icon: 'fas fa-money-bill-wave',
+    color: 'primary',
+    buttons: [
+      {
+        id: 1,
+        href: '#',
+        icon: 'fas fa-list',
+        text: 'Se alle'
+      }
+    ]
+  }
+]);
+</script>
+
+<template>
+  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
+    <DepartmentDashboardPageWrapper
+        title="Dagsopgørelse"
+        subtitle="Få et overblik over dagens omsætning, forbrug og bookinger"
+    >
+      <!-- Create daily report button -->
+      <div class="columns is-flex-wrap-wrap">
+        <div class="column is-12 has-text-right">
+          <button class="button is-primary"
+                  @click="SessionUser.objects.department_daily_reports.functions.showCreateObjectFormDepartment(department_id)">
+            <span class="icon">
+              <i class="fas fa-plus"></i>
+            </span>
+            <span>Opret ny dagsopgørelse</span>
+          </button>
+        </div>
+      </div>
+      <!-- At the top of the page, we want to have a button that allows the user to create a new daily report -->
+      <div class="columns is-multiline">
+        <div class="column is-4" v-for="report in reports" :key="report.title">
+          <DepartmentDashboardDailyReportCount
+              :title="report.title"
+              :subtitle="report.subtitle"
+              :count="report.count"
+              :icon="report.icon"
+              :color="report.color"
+              :buttons="report.buttons"
+          />
+        </div>
+      </div>
+    </DepartmentDashboardPageWrapper>
+  </RestrictedPageWrapper>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue
new file mode 100644
index 00000000..2319a6e0
--- /dev/null
+++ b/src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportCount.vue
@@ -0,0 +1,53 @@
+<script setup>
+import {ref, defineProps} from 'vue';
+
+const props = defineProps({
+    title: String,
+    subtitle: String,
+    count: Number,
+    icon: String,
+    color: String,
+    buttons: Array,
+});
+</script>
+
+<template>
+  <div class="card">
+    <div class="card-content">
+      <div class="media">
+        <div class="media-left is-flex p-2">
+          <figure class="image is-48x48">
+            <span class="icon has-text-primary">
+              <i :class="icon" class="fa-3x"></i>
+            </span>
+          </figure>
+        </div>
+        <div class="media-content">
+          <p class="title is-4">{{ title }}</p>
+          <p class="subtitle is-6">{{ subtitle }}</p>
+        </div>
+      </div>
+      <div class="content has-text-centered">
+        <p class="title is-1">{{ count }}</p>
+        <p class="subtitle is-6">Antal</p>
+      </div>
+    </div>
+    <footer class="card-footer">
+      <a
+          v-for="button in buttons"
+          :key="button.id"
+          class="card-footer-item"
+          :href="button.href"
+      >
+        <span class="icon">
+          <i :class="button.icon"></i>
+        </span>
+        <span>{{ button.text }}</span>
+      </a>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file