feat(frontend): Install nuxt-ui, eslint, prettier, reformat whole code

legalconsenthub/pages/index.vue

@@ -1,16 +1,75 @@
 <template>
-    <div>
+  <UDashboardPanel id="home">
+    <template #header>
+      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+
+        <template #right>
+          <UTooltip text="Notifications" :shortcuts="['N']">
+            <UButton color="neutral" variant="ghost" square>
+              <UChip color="error" inset>
+                <UIcon name="i-lucide-bell" class="size-5 shrink-0" />
+              </UChip>
+            </UButton>
+          </UTooltip>
+
+          <UDropdownMenu :items="items">
+            <UButton icon="i-lucide-plus" size="md" class="rounded-full" />
+          </UDropdownMenu>
+        </template>
+      </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <template #left>
+          <!-- NOTE: The `-ms-1` class is used to align with the `DashboardSidebarCollapse` button here. -->
+          <HomeDateRangePicker v-model="range" class="-ms-1" />
+
+          <HomePeriodSelect v-model="period" :range="range" />
+        </template>
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <div>
         <pre>{{ session }}</pre>
-        <h1>{{ session.data ? "Du bist eingeloggt" : "Nicht eingeloggt"}}</h1>
+        <h1>{{ session.data ? "Du bist eingeloggt" : "Nicht eingeloggt" }}</h1>
         <button v-if="session?.data" @click="authClient.signOut()">
-            Sign out
+          Sign out
         </button>
-    </div>
-    <Register />
-    <Login />
+      </div>
+      <Register />
+      <Login />
+
+      <HomeStats :period="period" :range="range" />
+      <HomeChart :period="period" :range="range" />
+      <HomeSales :period="period" :range="range" />
+    </template>
+  </UDashboardPanel>
 </template>
 
 <script setup lang="ts">
+const session = authClient.useSession();
 
-const session = authClient.useSession()
+const items = [
+  [
+    {
+      label: "New mail",
+      icon: "i-lucide-send",
+      to: "/inbox",
+    },
+    {
+      label: "New customer",
+      icon: "i-lucide-user-plus",
+      to: "/customers",
+    },
+  ],
+];
+
+const range = shallowRef({
+  start: new Date(),
+  end: new Date(),
+});
+const period = ref<string>("daily");
 </script>