Tons of work, profile customizations.

src/components/Charts/chart.config.js

@@ -36,7 +36,7 @@ const datasetObject = (color, points) => {
   };
 };
 
-export const sampleChartData = (points = 9) => {
+export const sampleChartData = (points = 7) => {
   const labels = [];
 
   for (let i = 1; i <= points; i++) {
@@ -45,10 +45,6 @@ export const sampleChartData = (points = 9) => {
 
   return {
     labels,
-    datasets: [
-      datasetObject("primary", points),
-      datasetObject("info", points),
-      datasetObject("danger", points),
-    ],
+    datasets: [datasetObject("info", points)],
   };
 };

src/components/TableRivalsFull.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useMainStore } from "@/stores/main";
+import BaseLevel from "@/components/BaseLevel.vue";
+import BaseButtons from "@/components/BaseButtons.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import UserAvatar from "@/components/UserAvatar.vue";
+
+const mainStore = useMainStore();
+
+const items = computed(() => mainStore.clients);
+
+const perPage = ref(5);
+
+const currentPage = ref(0);
+
+const itemsPaginated = computed(() =>
+  items.value.slice(
+    perPage.value * currentPage.value,
+    perPage.value * (currentPage.value + 1)
+  )
+);
+
+const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
+
+const currentPageHuman = computed(() => currentPage.value + 1);
+
+const pagesList = computed(() => {
+  const pagesList = [];
+
+  for (let i = 0; i < numPages.value; i++) {
+    pagesList.push(i);
+  }
+
+  return pagesList;
+});
+
+const cardStyle = `
+  background-image: url('/assets/card/dm.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+`;
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th />
+        <th>User</th>
+        <th>Profile</th>
+        <th>Game</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="client in itemsPaginated" :key="client.id">
+        <td class="border-b-0 lg:w-6 before:hidden" :style="cardStyle">
+          <UserAvatar
+            :username="Trmazi"
+            class="w-24 h-24 mx-auto lg:w-6 lg:h-6"
+          />
+        </td>
+        <td data-label="User">Trmazi</td>
+        <td data-label="Profile">TRMAZI</td>
+        <td data-label="Game">SOUND VOLTEX</td>
+        <td data-label="Type" class="lg:w-32">You Rival</td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
+    <BaseLevel>
+      <BaseButtons>
+        <BaseButton
+          v-for="page in pagesList"
+          :key="page"
+          :active="page === currentPage"
+          :label="page + 1"
+          :color="page === currentPage ? 'lightDark' : 'whiteDark'"
+          small
+          @click="currentPage = page"
+        />
+      </BaseButtons>
+      <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
+    </BaseLevel>
+  </div>
+</template>

src/components/UserAvatar.vue

@@ -21,11 +21,19 @@ const username = computed(() => props.username);
 
 <template>
   <div>
-    <img
-      :src="avatar"
-      :alt="username"
-      class="rounded-full block h-auto w-40 max-h-40 bg-gray-100 dark:bg-slate-800"
-    />
+    <div class="relative inline-block">
+      <img
+        :src="avatar"
+        :alt="username"
+        class="w-full h-auto bg-gray-100 dark:bg-slate-800 rounded-full overflow-hidden"
+      />
+      <img
+        src="/assets/border/test.png"
+        alt="border"
+        class="absolute inset-0 w-full h-full overflow-hidden"
+        style="object-fit: fill; transform: scale(1.02)"
+      />
+    </div>
     <slot />
   </div>
 </template>

src/components/UserCard.vue

@@ -16,12 +16,20 @@ import { GetRandomMessage } from "@/constants";
 const mainStore = useMainStore();
 
 const greeting = GetRandomMessage();
+
+const cardStyle = `
+  background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 1)),
+    url('/assets/card/ddr.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+`;
 </script>
 
 <template>
-  <CardBox>
+  <CardBox :style="cardStyle">
     <BaseLevel
       type="justify-around lg:justify-center md:space-x-4 lg:space-x-0"
+      class="bg-white dark:bg-slate-900/90 rounded-2xl p-3"
     >
       <UserAvatarCurrentUser class="w-28 md:w-32 lg:w-44 lg:mx-12" />
       <div class="space-y-3 text-center md:text-left lg:mx-12">

src/views/HomeView.vue

@@ -1,13 +1,11 @@
 <script setup>
-import { computed, ref, onMounted } from "vue";
-import { useMainStore } from "@/stores/main";
+import { ref, onMounted } from "vue";
 import {
-  mdiAccountMultiple,
+  mdiAccountMultipleOutline,
   mdiChartTimelineVariant,
   mdiReload,
-  mdiChartPie,
+  mdiChartBellCurveCumulative,
   mdiGamepad,
-  mdiAccountMultipleOutline,
 } from "@mdi/js";
 import UserCard from "@/components/UserCard.vue";
 import * as chartConfig from "@/components/Charts/chart.config.js";
@@ -15,13 +13,12 @@ import LineChart from "@/components/Charts/LineChart.vue";
 import SectionMain from "@/components/SectionMain.vue";
 import CardBoxWidget from "@/components/CardBoxWidget.vue";
 import CardBox from "@/components/CardBox.vue";
-import TableSampleClients from "@/components/TableSampleClients.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import CardBoxGameStat from "@/components/CardBoxGameStat.vue";
-import CardBoxClient from "@/components/CardBoxClient.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
-import SectionTitleLineWithButton from "@/components/SectionTitleLineWithButton.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
+import PillTag from "@/components/PillTag.vue";
+import TableRivalsFull from "@/components/TableRivalsFull.vue";
 import { GameConstants } from "@/constants";
 
 const chartData = ref(null);
@@ -33,10 +30,6 @@ const fillChartData = () => {
 onMounted(() => {
   fillChartData();
 });
-
-const mainStore = useMainStore();
-
-const clientBarItems = computed(() => mainStore.clients.slice(0, 4));
 </script>
 
 <template>
@@ -78,7 +71,7 @@ const clientBarItems = computed(() => mainStore.clients.slice(0, 4));
         class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 gap-5 mb-5"
       >
         <CardBoxGameStat
-          :game="GameConstants.GUITARFREAKS"
+          :game="GameConstants.IIDX"
           value="#10 out of 132"
           profile-name="DJ. TRMAZI"
           type="ranking"
@@ -90,51 +83,45 @@ const clientBarItems = computed(() => mainStore.clients.slice(0, 4));
           type="plays"
         />
         <CardBoxGameStat
-          :game="GameConstants.GITADORA_GF"
+          :game="GameConstants.DDRCLASS"
           :value="392"
           profile-name="TRMAZI"
           type="scores"
         />
         <CardBoxGameStat
-          :game="GameConstants.GITADORA_DM"
+          :game="GameConstants.SDVX"
           value="#15 out of 200"
           profile-name="TRMAZI"
           type="ranking"
         />
       </div>
 
-      <SectionTitleLine :icon="mdiAccountMultipleOutline" title="Rivals" main />
-      <div
-        class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 gap-5 mb-5"
+      <SectionTitleLine
+        :icon="mdiChartBellCurveCumulative"
+        title="Play Trends"
+        main
       >
-        <CardBoxClient
-          v-for="client in clientBarItems"
-          :key="client.id"
-          :name="client.name"
-          :login="client.login"
-          :date="client.created"
-          :progress="client.progress"
-        />
-      </div>
-
-      <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview">
         <BaseButton
           :icon="mdiReload"
           color="whiteDark"
           @click="fillChartData"
         />
-      </SectionTitleLineWithButton>
+      </SectionTitleLine>
 
       <CardBox class="mb-6">
+        <PillTag
+          label="Scores (7-Day Period)"
+          color="info"
+          :icon="mdiTestTube"
+        />
         <div v-if="chartData">
           <line-chart :data="chartData" class="h-96" />
         </div>
       </CardBox>
 
-      <SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Clients" />
-
+      <SectionTitleLine :icon="mdiAccountMultipleOutline" title="Rivals" main />
       <CardBox has-table>
-        <TableSampleClients />
+        <TableRivalsFull />
       </CardBox>
     </SectionMain>
   </LayoutAuthenticated>