8 files changed, 178 insertions, 12 deletions
diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 38e3f07..96774e7 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -35,11 +35,12 @@ import { saveAs } from 'file-saver';
 
 export default {
 	computed: {
-		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
+		...mapGetters({
+			loggedIn: 'auth/isLoggedIn',
+			apiKey: 'auth/getApiKey'
+		}),
 		...mapState({
-			version: state => state.config.version,
-			serviceName: state => state.config.serviceName,
-			token: state => state.auth.token
+			version: state => state.config.version
 		}),
 		getYear() {
 			return new Date().getFullYear();
@@ -48,18 +49,18 @@ export default {
 	methods: {
 		createShareXThing() {
 			const sharexFile = `{
-				"Name": "${this.serviceName}",
+				"Name": "${this.$store.state.config.serviceName}",
 				"DestinationType": "ImageUploader, FileUploader",
 				"RequestType": "POST",
 				"RequestURL": "${location.origin}/api/upload",
 				"FileFormName": "files[]",
 				"Headers": {
-					"authorization": "Bearer ${this.token}",
+					"token": "${this.apiKey}",
 					"accept": "application/vnd.chibisafe.json"
 				},
 				"ResponseType": "Text",
 				"URL": "$json:url$",
-				"ThumbnailURL": "$json:url$"
+				"ThumbnailURL": "$json:thumb$"
 			}`;
 			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
 			saveAs(sharexBlob, `${location.hostname}.sxcu`);
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 05915b9..6777f44 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -46,13 +46,15 @@
 	</div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 import { saveAs } from 'file-saver';
 
 export default {
 	computed: {
-		loggedIn() {
-			return this.$store.state.auth.loggedIn;
-		}
+		...mapGetters({
+			loggedIn: 'auth/isLoggedIn',
+			apiKey: 'auth/getApiKey'
+		})
 	},
 	methods: {
 		createShareXThing() {
@@ -63,12 +65,12 @@ export default {
 				"RequestURL": "${location.origin}/api/upload",
 				"FileFormName": "files[]",
 				"Headers": {
-					"authorization": "Bearer ${this.$store.state.token}",
+					"token": "${this.apiKey}",
 					"accept": "application/vnd.chibisafe.json"
 				},
 				"ResponseType": "Text",
 				"URL": "$json:url$",
-				"ThumbnailURL": "$json:url$"
+				"ThumbnailURL": "$json:thumb$"
 			}`;
 			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
 			saveAs(sharexBlob, `${location.hostname}.sxcu`);
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index dc261ee..98c3c81 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -29,6 +29,7 @@
 				</template>
 				<b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact />
 				<b-menu-item icon="cog-outline" label="Settings" tag="nuxt-link" to="/dashboard/admin/settings" exact />
+				<!--<b-menu-item icon="chart-line" label="Statistics" tag="nuxt-link" to="/dashboard/admin/statistics" exact />-->
 			</b-menu-item>
 			<b-menu-item
 				class="item"
diff --git a/src/site/components/statistics/byte.vue b/src/site/components/statistics/byte.vue
new file mode 100644
index 0000000..05852cd
--- /dev/null
+++ b/src/site/components/statistics/byte.vue
@@ -0,0 +1,26 @@
+<template>
+	<div>
+		<div class="columns">
+			<div class="column is-2">
+				{{ title }}
+			</div>
+			<div class="column">
+				{{ (value / 1024 / 1024 / 1024).toFixed(2) }} GiB
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		title: {
+			'type': String,
+			'default': null
+		},
+		value: {
+			'type': Number,
+			'default': null
+		}
+	}
+};
+</script>
diff --git a/src/site/components/statistics/byteUsage.vue b/src/site/components/statistics/byteUsage.vue
new file mode 100644
index 0000000..740feff
--- /dev/null
+++ b/src/site/components/statistics/byteUsage.vue
@@ -0,0 +1,31 @@
+<template>
+	<div>
+		<div class="columns">
+			<div class="column is-2">
+				{{ title }}
+			</div>
+			<div class="column">
+				{{ (used / 1024 / 1024 / 1024).toFixed(2) }} GiB /
+				{{ (total / 1024 / 1024 / 1024).toFixed(2) }} GiB ({{ ((used * 100) / total).toFixed(2) }}%)
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		title: {
+			'type': String,
+			'default': null
+		},
+		used: {
+			'type': Number,
+			'default': null
+		},
+		total: {
+			'type': Number,
+			'default': null
+		}
+	}
+};
+</script>
diff --git a/src/site/components/statistics/detailed.vue b/src/site/components/statistics/detailed.vue
new file mode 100644
index 0000000..8a0722e
--- /dev/null
+++ b/src/site/components/statistics/detailed.vue
@@ -0,0 +1,33 @@
+<template>
+	<div>
+		<div class="columns">
+			<div class="column is-2">
+				{{ title }}
+			</div>
+			<div class="column">
+				<b-table :data="data || []" :mobile-cards="true">
+					<b-table-column v-slot="props" field="type" label="Type">
+						{{ props.row.key }}
+					</b-table-column>
+					<b-table-column v-slot="props" field="count" label="Count">
+						{{ props.row.value }}
+					</b-table-column>
+				</b-table>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		title: {
+			'type': String,
+			'default': null
+		},
+		data: {
+			'type': Array,
+			'default': () => []
+		}
+	}
+};
+</script>
diff --git a/src/site/components/statistics/generic.vue b/src/site/components/statistics/generic.vue
new file mode 100644
index 0000000..704be7a
--- /dev/null
+++ b/src/site/components/statistics/generic.vue
@@ -0,0 +1,26 @@
+<template>
+	<div>
+		<div class="columns">
+			<div class="column is-2">
+				{{ title }}
+			</div>
+			<div class="column">
+				{{ value }}
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		title: {
+			'type': String,
+			'default': null
+		},
+		value: {
+			'type': [Number, String],
+			'default': null
+		}
+	}
+};
+</script>
diff --git a/src/site/components/statistics/time.vue b/src/site/components/statistics/time.vue
new file mode 100644
index 0000000..ff1bb8d
--- /dev/null
+++ b/src/site/components/statistics/time.vue
@@ -0,0 +1,46 @@
+<template>
+	<div>
+		<div class="columns">
+			<div class="column is-2">
+				{{ title }}
+			</div>
+			<div class="column">
+				{{ parsedTime }}
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		title: {
+			'type': String,
+			'default': null
+		},
+		value: {
+			'type': Number,
+			'default': null
+		}
+	},
+	computed: {
+		parsedTime() {
+			let seconds = this.value;
+			const days = Math.floor(seconds / 86400);
+			seconds %= 86400;
+			let hours = Math.floor(seconds / 3600);
+			seconds %= 3600;
+			let minutes = Math.floor(seconds / 60);
+			seconds %= 60;
+
+			if (hours < 10) hours = `0${hours}`;
+			if (minutes < 10) minutes = `0${minutes}`;
+			if (seconds < 10) seconds = `0${seconds}`;
+
+			if (days > 0) {
+				return `${days}d ${hours}:${minutes}:${seconds}`;
+			}
+			return `${hours}:${minutes}:${seconds}`;
+		}
+	}
+};
+</script>