Added primevue

simba77 · Sep 3, 2024 · 739ef80 · 739ef80
1 parent 90a9eb7
commit 739ef80
Show file tree

Hide file tree

Showing 9 changed files with 297 additions and 239 deletions.
diff --git a/assets/app.ts b/assets/app.ts
@@ -9,12 +9,27 @@ import {authStore} from "./stores/authStore";
 import FloatingVue from 'floating-vue';
 import './scss/app.scss';
 import 'floating-vue/dist/style.css';
+import PrimeVue from 'primevue/config';
+import Aura from '@primevue/themes/aura';
 
 const app = createApp(AppComponent)
 app.use(createPinia())
 
 app.use(FloatingVue)
 
+app.use(PrimeVue, {
+ theme: {
+ preset: Aura,
+ options: {
+ cssLayer: {
+ name: 'primevue',
+ order: 'tailwind-base, primevue, tailwind-utilities',
+ },
+ darkModeSelector: '.app-dark',
+ },
+ }
+})
+
 // Check auth
 router.beforeEach((to) => {
  const auth = authStore();

diff --git a/assets/components/Cards/StatCard.vue b/assets/components/Cards/StatCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { QuestionMarkCircleIcon, ArrowSmallUpIcon, ArrowSmallDownIcon } from "@heroicons/vue/24/solid";
-import { useNumbers } from "@/composable/useNumbers";
+import {QuestionMarkCircleIcon, ArrowSmallUpIcon, ArrowSmallDownIcon} from "@heroicons/vue/24/solid";
+import {useNumbers} from "@/composable/useNumbers";
+import Card from 'primevue/card';
 
 const {formatPrice, formatPercent} = useNumbers()
 
@@ -27,52 +28,67 @@ withDefaults(defineProps<CardProps>(), {
 </script>
 
 <template>
- <div class="bg-white shadow rounded-xl p-3 md:px-5 md:py-4">
- <div class="text-gray-400 flex items-center">
- <div>{{ name }}</div>
- <div
- v-if="helpText"
- v-tooltip="helpText"
- >
- <question-mark-circle-icon class="h-5 ml-1" />
+ <Card class="stat-card">
+ <template #content>
+ <div class="text-gray-400 flex items-center">
+ <div>{{ name }}</div>
+ <div
+ v-if="helpText"
+ v-tooltip="helpText"
+ >
+ <question-mark-circle-icon class="h-5 ml-1" />
+ </div>
  </div>
- </div>
- <div class="mt-1">
- <div class="text-lg md:text-3xl font-extrabold">
- {{ formatPrice(Number(total), currency) }}
+  <div class="mt-1">
+  <div class="text-lg md:text-3xl font-extrabold">
+  {{ formatPrice(Number(total), currency) }}
+ </div>
  </div>
- </div>
- <div v-if="profit || percent" class="flex text-sm mt-1">
- <div
- v-if="profit"
- v-tooltip="profitHelpText"
- :class="[profit > 0 ? 'text-green-500' : 'text-red-500', 'rounded-full pr-1 flex items-center']"
- >
- <template v-if="profit > 0">
- <arrow-small-up-icon class="h-4 mr-0.5 text-green-500 rotate-45" />
- </template>
- <template v-else>
- <arrow-small-down-icon class="h-4 mr-0.5 text-red-500 -rotate-45" />
- </template>
- {{ formatPrice(profit, currency) }}
+ <div v-if="profit || percent" class="flex text-sm mt-1">
+ <div
+ v-if="profit"
+ v-tooltip="profitHelpText"
+ :class="[profit > 0 ? 'text-green-500' : 'text-red-500', 'rounded-full pr-1 flex items-center']"
+ >
+ <template v-if="profit > 0">
+ <arrow-small-up-icon class="h-4 mr-0.5 text-green-500 rotate-45" />
+ </template>
+ <template v-else>
+ <arrow-small-down-icon class="h-4 mr-0.5 text-red-500 -rotate-45" />
+ </template>
+ {{ formatPrice(profit, currency) }}
+ </div>
+ <div
+ v-if="percent"
+ :class="[percent > 0 ? ' text-green-500' : ' text-red-500', 'pr-2 flex items-center']"
+ >
+ <template v-if="!profit && percent > 0">
+ <arrow-small-up-icon class="h-4 mr-0.5 text-green-500 rotate-45" />
+ </template>
+ <template v-else-if="!profit">
+ <arrow-small-down-icon class="h-4 mr-0.5 text-red-500 -rotate-45" />
+ </template>
+ <template v-if="profit">
+ ({{ formatPercent(percent) }})
+ </template>
+ <template v-else>
+ {{ formatPercent(percent) }}
+ </template>
+ </div>
  </div>
- <div
- v-if="percent"
- :class="[percent > 0 ? ' text-green-500' : ' text-red-500', 'pr-2 flex items-center']"
- >
- <template v-if="!profit && percent > 0">
- <arrow-small-up-icon class="h-4 mr-0.5 text-green-500 rotate-45" />
- </template>
- <template v-else-if="!profit">
- <arrow-small-down-icon class="h-4 mr-0.5 text-red-500 -rotate-45" />
- </template>
- <template v-if="profit">
- ({{ formatPercent(percent) }})
- </template>
- <template v-else>
- {{ formatPercent(percent) }}
- </template>
- </div>
- </div>
- </div>
+ </template>
+ </Card>
 </template>
+
+<style lang="scss" scoped>
+.stat-card {
+ --p-card-body-padding: 1rem 1.25rem;
+ --p-card-color: #000;
+}
+
+.app-dark {
+ .stat-card {
+ --p-card-color: #fff;
+ }
+}
+</style>
diff --git a/assets/components/PageComponent.vue b/assets/components/PageComponent.vue
@@ -64,7 +64,7 @@ const userNavigation = [
 </script>
 
 <template>
- <div class="min-h-screen bg-gray-50">
+ <div class="min-h-screen bg-gray-50 dark:bg-transparent">
  <Disclosure
  v-slot="{ open }"
  as="nav"
@@ -205,10 +205,10 @@ const userNavigation = [
 
  <header
  v-if="title"
- class="bg-white shadow"
+ class="shadow bg-white dark:bg-surface-900"
  >
  <div class="max-w-7xl mx-auto py-3.5 px-4 sm:px-6 lg:px-8">
- <h1 class="text-xl font-bold text-gray-900">
+ <h1 class="text-xl font-bold">
  {{ props.title }}
  </h1>
  </div>

diff --git a/assets/pages/HomePage.vue b/assets/pages/HomePage.vue
@@ -7,6 +7,8 @@ import PreloaderComponent from "@/components/Common/PreloaderComponent.vue";
 import {useNumbers} from "@/composable/useNumbers";
 import {useDashboard} from "@/composable/useDashboard";
 import {Dashboard} from "@/types/dashboard";
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
 
 const {formatPrice, formatPercent} = useNumbers()
 const {getDashboard} = useDashboard()
@@ -67,28 +69,23 @@ run()
  </template>
 
  <template v-if="pageData.statisticByYears">
- <div class="text-2xl font-extrabold mt-6 mb-3">
+ <div class="text-2xl font-extrabold mt-6 mb-7">
  Profit By Years
  </div>
- <table class="simple-table">
- <thead>
- <tr>
- <th>Year</th>
- <th>Start Year Profit (1 Jan)</th>
- <th>Percent</th>
- </tr>
- </thead>
- <tbody>
- <tr
- v-for="(item, index) in pageData.statisticByYears"
- :key="index"
- >
- <td>{{ item.year }}</td>
- <td>{{ formatPrice(item.profit) }}</td>
- <td>{{ formatPercent(item.profitPercent) }}</td>
- </tr>
- </tbody>
- </table>
+
+ <DataTable :value="pageData.statisticByYears" class="simple-table">
+ <Column field="year" header="Year" />
+ <Column header="Start Year Profit (1 Jan)">
+ <template #body="{ data }">
+ {{ formatPrice(data.profit) }}
+ </template>
+ </Column>
+ <Column header="Percent">
+ <template #body="{ data }">
+ {{ formatPercent(data.profitPercent) }}
+ </template>
+ </Column>
+ </DataTable>
  </template>
  </template>
  </page-component>

diff --git a/assets/scss/app.scss b/assets/scss/app.scss
@@ -1,6 +1,13 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer tailwind-base, primevue, tailwind-utilities;
+
+@layer tailwind-base {
+ @tailwind base;
+}
+
+@layer tailwind-utilities {
+ @tailwind components;
+ @tailwind utilities;
+}
 
 @layer components {
  @import "buttons";

diff --git a/assets/shims-vue.d.ts b/assets/shims-vue.d.ts
@@ -1,7 +1,6 @@
 declare module "*.vue" {
  import type { DefineComponent } from "vue";
- // eslint-disable-next-line @typescript-eslint/ban-types
- const component: DefineComponent<{}, {}, any>;
+ const component: DefineComponent<object, object, any>;
  export default component;
 }