initial commit

2023-03-03 16:54:28 +01:00 · 2023-03-03 16:54:28 +01:00 · 4fc3bb0a01
commit 4fc3bb0a01
202 changed files with 41729 additions and 0 deletions
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@ -0,0 +1,123 @@
+<script setup>
+import { Head } from '@inertiajs/vue3';
+import { computed, ref, onMounted } from 'vue';
+import { MainService } from '@/Stores/main';
+import {
+	mdiAccountMultiple,
+	mdiCartOutline,
+	mdiDatabaseOutline,
+	mdiChartTimelineVariant,
+	mdiFinance,
+	mdiMonitorCellphone,
+	mdiReload,
+	mdiGithub,
+	mdiChartPie,
+} from '@mdi/js';
+import { containerMaxW } from '@/config.js'; // "xl:max-w-6xl xl:mx-auto"
+import * as chartConfig from '@/Components/Charts/chart.config.js';
+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 NotificationBar from '@/Components/NotificationBar.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import CardBoxTransaction from '@/Components/CardBoxTransaction.vue';
+import CardBoxClient from '@/Components/CardBoxClient.vue';
+import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
+import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
+import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
+const chartData = ref(null);
+const fillChartData = () => {
+	chartData.value = chartConfig.sampleChartData();
+};
+onMounted(() => {
+	fillChartData();
+});
+const mainService = MainService();
+/* Fetch sample data */
+mainService.fetch('clients');
+mainService.fetch('history');
+
+mainService.fetchApi('authors');
+mainService.fetchApi('datasets');
+
+const clientBarItems = computed(() => mainService.clients.slice(0, 4));
+const transactionBarItems = computed(() => mainService.history);
+
+const authorBarItems = computed(() => mainService.authors.slice(0, 4));
+const authors = computed(() => mainService.authors);
+const datasets = computed(() => mainService.datasets);
+// const props = defineProps({
+// 	user: {
+// 		type: Object,
+// 		default: () => ({}),
+// 	}
+// });
+</script>
+
+<template>
+	<LayoutAuthenticated>
+
+		<Head title="Dashboard" />
+
+		<!-- <section class="p-6" v-bind:class="containerMaxW"> -->
+		<SectionMain>
+			<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
+				<BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
+					label="Star on Gitea" color="contrast" rounded-full small />
+			</SectionTitleLineWithButton>
+
+			<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
+				<CardBoxWidget trend="12%" trend-type="up" color="text-emerald-500" :icon="mdiAccountMultiple"
+					:number="authors.length" label="Authors" />
+				<CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiDatabaseOutline" :number="datasets.length"
+					label="Publications" />
+					<!-- <CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiCartOutline" :number="datasets.length"
+					prefix="$" label="Publications" /> -->
+				<CardBoxWidget trend="Overflow" trend-type="alert" color="text-red-500" :icon="mdiChartTimelineVariant"
+					:number="256" suffix="%" label="Performance" />
+			</div>
+
+			<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+				<div class="flex flex-col justify-between">
+					<CardBoxClient
+						v-for="client in authorBarItems"
+						:key="client.id"
+						:name="client.name"
+						:email="client.email"
+						:date="client.created_at"
+						:text="client.datasetCount"						
+					/>
+				</div>
+				<div class="flex flex-col justify-between">
+					<CardBoxTransaction v-for="(transaction, index) in transactionBarItems" :key="index"
+						:amount="transaction.amount" :date="transaction.date" :business="transaction.business"
+						:type="transaction.type" :name="transaction.name" :account="transaction.account" />
+				</div>				
+			</div>
+
+			<SectionBannerStarOnGitHub />
+
+			<SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview (to do publications per year)" />
+			<CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6"
+				@header-icon-click="fillChartData">
+				<div v-if="chartData">
+					<line-chart :data="chartData" class="h-96" />
+				</div>
+			</CardBox>
+
+			<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters (to do)" />
+
+			<!-- <NotificationBar color="info" :icon="mdiMonitorCellphone">
+				<b>Responsive table.</b> Collapses on mobile
+			</NotificationBar> -->
+
+			<CardBox :icon="mdiMonitorCellphone" title="Responsive table" has-table>
+				<TableSampleClients />
+			</CardBox>
+		</SectionMain>
+		<!-- </section> -->
+
+	</LayoutAuthenticated>
+</template>