chore(Kitchen Sink): update dashboard page

gitsindonesia · Sep 12, 2023 · 5372e3c · 5372e3c · github-actions · Sep 12, 2023
1 parent 4b21ef1
commit 5372e3c
Show file tree

Hide file tree

Showing 9 changed files with 765 additions and 559 deletions.
diff --git a/starter/kitchen-sink/components/PageHeader.vue b/starter/kitchen-sink/components/PageHeader.vue
@@ -6,10 +6,15 @@ defineProps<{
 </script>
 
 <template>
-  <div class="mb-6">
-    <h1 class="text-xl text-gray-900 dark:text-gray-200 font-semibold">
-      {{ title }}
-    </h1>
-    <p class="text-gray-500" v-if="subtitle">{{ subtitle }}</p>
+  <div
+    class="mb-6 flex flex-col lg:flex-row gap-4 justify-between lg:items-center"
+  >
+    <div class="flex-grow">
+      <h1 class="text-4xl text-gray-900 dark:text-gray-200 font-semibold">
+        {{ title }}
+      </h1>
+      <p class="text-gray-500" v-if="subtitle">{{ subtitle }}</p>
+    </div>
+    <slot name="action" />
   </div>
 </template>
diff --git a/starter/kitchen-sink/components/dashboard/OverviewChart.vue b/starter/kitchen-sink/components/dashboard/OverviewChart.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+const series = [
+  {
+    name: 'Net Profit',
+    data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+  },
+  {
+    name: 'Revenue',
+    data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+  },
+  {
+    name: 'Free Cash Flow',
+    data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
+  },
+];
+
+const categories = [
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+];
+
+const chartOptions = {
+  chart: {
+    type: 'bar',
+    height: 350,
+  },
+  plotOptions: {
+    bar: {
+      horizontal: false,
+      columnWidth: '55%',
+      endingShape: 'rounded',
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  stroke: {
+    show: true,
+    width: 2,
+    colors: ['transparent'],
+  },
+  xaxis: {
+    categories,
+  },
+  yaxis: {
+    title: {
+      text: '$ (thousands)',
+    },
+  },
+  fill: {
+    opacity: 1,
+  },
+  tooltip: {
+    y: {
+      formatter: function (val: string) {
+        return '$ ' + val + ' thousands';
+      },
+    },
+  },
+};
+</script>
+
+<template>
+  <VCard>
+    <h3 class="font-semibold text-lg">Overview</h3>
+    <ClientOnly>
+      <apexchart
+        width="100%"
+        type="bar"
+        :options="chartOptions"
+        :series="series"
+      ></apexchart>
+    </ClientOnly>
+  </VCard>
+</template>
diff --git a/starter/kitchen-sink/components/dashboard/RecentSales.vue b/starter/kitchen-sink/components/dashboard/RecentSales.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+const items = ref([
+  {
+    user: {
+      name: 'John Doe',
+      email: 'john@example.com',
+      avatar: 'https://picsum.photos/200?id=1',
+    },
+    amount: '$1,250',
+  },
+  {
+    user: {
+      name: 'Alex Doe',
+      email: 'alex@example.com',
+      avatar: 'https://picsum.photos/200?id=2',
+    },
+    amount: '$1,450',
+  },
+  {
+    user: {
+      name: 'Samuel Doe',
+      email: 'john@example.com',
+      avatar: 'https://picsum.photos/200?id=3',
+    },
+    amount: '$1,350',
+  },
+  {
+    user: {
+      name: 'Murphy Doe',
+      email: 'murphy@example.com',
+      avatar: 'https://picsum.photos/200?id=4',
+    },
+    amount: '$250',
+  },
+  {
+    user: {
+      name: 'Sam Doe',
+      email: 'sam@example.com',
+      avatar: 'https://picsum.photos/200?id=5',
+    },
+    amount: '$150',
+  },
+]);
+</script>
+
+<template>
+  <VCard>
+    <h3 class="font-semibold text-lg">Recent Sales</h3>
+    <p class="text-gray-500 dark:text-neutral-500 text-sm mt-0.5">
+      You made 265 sales this month.
+    </p>
+
+    <VList flush class="mt-4">
+      <VListItem v-for="item in items" :key="item.user.name" class="!px-0">
+        <template #prepend>
+          <VAvatar :src="item.user.avatar" :alt="item.user.name" :size="40" />
+        </template>
+        <div>
+          <div class="font-semibold">
+            {{ item.user.name }}
+          </div>
+          <div class="text-gray-500 dark:text-neutral-500">
+            {{ item.user.email }}
+          </div>
+        </div>
+        <template #append>
+          <div>
+            {{ item.amount }}
+          </div>
+        </template>
+      </VListItem>
+    </VList>
+  </VCard>
+</template>
diff --git a/starter/kitchen-sink/nuxt.config.ts b/starter/kitchen-sink/nuxt.config.ts
@@ -10,6 +10,8 @@ export default defineNuxtConfig({
     theme: 'morpheme',
     sass: true,
     darkMode: true,
+    optimizeDeps: false,
+    transpileDeps: false,
   },
 
   devtools: {
@@ -35,6 +37,10 @@ export default defineNuxtConfig({
   },
 
   experimental: {
-    viewTransition: true
-  }
+    viewTransition: true,
+  },
+
+  tailwindcss: {
+    viewer: false,
+  },
 });
diff --git a/starter/kitchen-sink/package.json b/starter/kitchen-sink/package.json
@@ -23,7 +23,9 @@
   },
   "dependencies": {
     "@morpheme/design-tokens": "^1.0.0",
-    "@morpheme/nuxt": "^1.0.0-rc.0"
+    "@morpheme/nuxt": "^1.0.0-rc.0",
+    "apexcharts": "^3.37.3",
+    "vue3-apexcharts": "^1.4.4"
   },
   "devDependencies": {
     "@nuxt/devtools": "^0.8.3",

diff --git a/starter/kitchen-sink/pages/index.vue b/starter/kitchen-sink/pages/index.vue
@@ -1,98 +1,100 @@
 <script setup lang="ts">
-// import {VRow} from '@morpheme/layouts';
-
 const stats = ref([
   {
-    label: 'Total Users',
-    value: '1,600',
-    color: 'primary',
+    label: 'Total Revenue',
+    icon: 'ph:currency-circle-dollar-bold',
+    value: '$45,231.89',
+    changes: '+20.1% from last month',
   },
   {
-    label: 'Total Orders',
-    value: '2,400',
-    color: 'success',
+    label: 'Subscriptions',
+    icon: 'ph:users-bold',
+    value: '+2350',
+    changes: '+180.1% from last month',
   },
   {
-    label: 'Total Sales',
-    value: '$ 1,025,000',
-    color: 'warning',
+    label: 'Sales',
+    icon: 'ph:credit-card',
+    value: '+12,234',
+    changes: '+19% from last month',
   },
   {
-    label: 'Total Revenue',
-    value: '$ 1,025,000',
-    color: 'error',
+    label: 'Active Now',
+    icon: 'ph:activity',
+    value: '+572',
+    changes: '+201 since last hour',
   },
 ]);
 
-const headers = ref([
-  {
-    text: 'Name',
-    value: 'name',
-  },
+const tabs = ref([
   {
-    text: 'Email',
-    value: 'email',
+    label: 'Overview',
+    value: 'overview',
   },
   {
-    text: 'Phone',
-    value: 'phone',
+    label: 'Analytics',
+    value: 'analytics',
   },
   {
-    text: 'City',
-    value: 'city',
+    label: 'Reports',
+    value: 'reports',
   },
   {
-    text: 'State',
-    value: 'state',
-  },
-  {
-    text: 'Country',
-    value: 'country',
-  },
-]);
-
-const items = ref([
-  {
-    name: 'John Doe',
-    email: 'johndoe@example.com',
-    phone: '+1 234 567 890',
-    city: 'New York',
-    state: 'New York',
-    country: 'USA',
-  },
-  {
-    name: 'Jane Doe',
-    email: 'janedoe@example.com',
-    phone: '+1 234 567 890',
-    city: 'New York',
-    state: 'New York',
-    country: 'USA',
+    label: 'Notifications',
+    value: 'notifications',
+    disabled: true,
   },
 ]);
 </script>
 
 <template>
-  <PageHeader title="Dashboard" subtitle="Welcome to Morpheme UI Gallery!" />
+  <PageHeader title="Dashboard">
+    <template #action>
+      <div
+        class="flex w-full flex-col lg:flex-row justify-end lg:items-center gap-2"
+      >
+        <VInput
+          wrapper-class="lg:w-64"
+          prepend-icon="ph:calendar"
+          model-value="Jan 03, 2023 - Feb 28, 2023"
+        />
+        <VBtn color="primary">Download</VBtn>
+      </div>
+    </template>
+  </PageHeader>
+
+  <VTabGroup color="info" class="!-mx-4 overflow-x-auto">
+    <VTabList>
+      <VTabItem
+        v-for="tab in tabs"
+        :key="tab.value"
+        :value="tab.value"
+        :disabled="tab.disabled"
+      >
+        {{ tab.label }}
+      </VTabItem>
+    </VTabList>
+  </VTabGroup>
 
-  <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
-    <VCard
-      v-for="stat in stats"
-      :key="stat.label"
-      bordered
-      flat
-      :color="stat.color"
-      border-position="left"
-      :title="stat.label"
-    >
-      <span class="font-medium text-lg sm:text-2xl">{{ stat.value }}</span>
+  <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mt-6">
+    <VCard v-for="stat in stats" :key="stat.label" bodyless class="p-4">
+      <div class="flex justify-between items-center">
+        <h3 class="font-medium">
+          {{ stat.label }}
+        </h3>
+        <VIcon :name="stat.icon" size="sm" class="text-gray-700" />
+      </div>
+      <div class="mt-3">
+        <h2 class="text-2xl font-semibold">{{ stat.value }}</h2>
+        <p class="text-sm text-gray-500 dark:text-neutral-500">
+          {{ stat.changes }}
+        </p>
+      </div>
     </VCard>
   </div>
 
-  <VDataTable class="mt-8" :items="items" :headers="headers">
-    <template #item.email="{item}">
-      <a :href="`mailto:${item.email}`">
-        {{ item.email }}
-      </a>
-    </template>
-  </VDataTable>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-6">
+    <DashboardOverviewChart />
+    <DashboardRecentSales />
+  </div>
 </template>
diff --git a/starter/kitchen-sink/plugins/vue3-apexcharts.client.ts b/starter/kitchen-sink/plugins/vue3-apexcharts.client.ts
@@ -0,0 +1,5 @@
+import VueApexCharts from "vue3-apexcharts";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueApexCharts);
+})