From 751ebcb7eb8e14d20d8f9dcb2eb537aad66751f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Tue, 30 Nov 2021 10:53:09 +0100
Subject: [PATCH] upload/download storage chart

---
 public/mix-manifest.json                      | 74 +++++++++++++++-
 resources/js/App.vue                          |  2 +-
 .../js/components/Admin/ProgressLine.vue      |  4 +-
 resources/js/views/User/Storage.vue           | 87 +++++++++----------
 4 files changed, 117 insertions(+), 50 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 98fa6662..d0a2209b 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -72,8 +72,8 @@
     "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=aa32489d4652f18b4a8c",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=fc95bc9d31d3e9ee0442",
     "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=3a88e55341d1f1ffe12d",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=c1a4036392db4eea190f",
-    "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=ea97ac1cb976ca635778",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=07ab72ae0c586211689e",
+    "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=147afaac8c8bacfe6433",
     "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=cd4f59468aaaca384307",
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=c33cd2341b9b04a732e5",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
@@ -165,5 +165,73 @@
     "/chunks/settings-subscription.ef966a31135ab618aa48.hot-update.js": "/chunks/settings-subscription.ef966a31135ab618aa48.hot-update.js",
     "/chunks/settings-subscription.be5c344dacad3df9ce4f.hot-update.js": "/chunks/settings-subscription.be5c344dacad3df9ce4f.hot-update.js",
     "/chunks/settings-subscription.958d6569c0c219566b31.hot-update.js": "/chunks/settings-subscription.958d6569c0c219566b31.hot-update.js",
-    "/chunks/settings-subscription.280bb2661b1be8df3762.hot-update.js": "/chunks/settings-subscription.280bb2661b1be8df3762.hot-update.js"
+    "/chunks/settings-subscription.280bb2661b1be8df3762.hot-update.js": "/chunks/settings-subscription.280bb2661b1be8df3762.hot-update.js",
+    "/chunks/settings-storage.22b53f1be0e4d334ed72.hot-update.js": "/chunks/settings-storage.22b53f1be0e4d334ed72.hot-update.js",
+    "/chunks/settings-storage.68ad64b9690ede821c8e.hot-update.js": "/chunks/settings-storage.68ad64b9690ede821c8e.hot-update.js",
+    "/chunks/settings-storage.2aef1a3ce7d066c44b81.hot-update.js": "/chunks/settings-storage.2aef1a3ce7d066c44b81.hot-update.js",
+    "/chunks/settings-storage.05fc0fde78b34737938d.hot-update.js": "/chunks/settings-storage.05fc0fde78b34737938d.hot-update.js",
+    "/chunks/settings-storage.bd9d7e0b647ef0f960f5.hot-update.js": "/chunks/settings-storage.bd9d7e0b647ef0f960f5.hot-update.js",
+    "/chunks/settings-storage.3d5e804a0270706a3564.hot-update.js": "/chunks/settings-storage.3d5e804a0270706a3564.hot-update.js",
+    "/chunks/settings-storage.f7fedf429c369b28e2d3.hot-update.js": "/chunks/settings-storage.f7fedf429c369b28e2d3.hot-update.js",
+    "/chunks/settings-storage.65b5307325c1d956f99d.hot-update.js": "/chunks/settings-storage.65b5307325c1d956f99d.hot-update.js",
+    "/chunks/settings-storage.d489a8d6ddc08abb9bda.hot-update.js": "/chunks/settings-storage.d489a8d6ddc08abb9bda.hot-update.js",
+    "/chunks/settings-storage.46fbd5d099963553c449.hot-update.js": "/chunks/settings-storage.46fbd5d099963553c449.hot-update.js",
+    "/chunks/settings-storage.cd4776df0f1b5133be71.hot-update.js": "/chunks/settings-storage.cd4776df0f1b5133be71.hot-update.js",
+    "/chunks/settings-storage.82794b8050a14b4d017e.hot-update.js": "/chunks/settings-storage.82794b8050a14b4d017e.hot-update.js",
+    "/chunks/settings-storage.6ba4d5ce5cbf585fde67.hot-update.js": "/chunks/settings-storage.6ba4d5ce5cbf585fde67.hot-update.js",
+    "/chunks/settings-storage.7098f6a3be0d5ef3aeed.hot-update.js": "/chunks/settings-storage.7098f6a3be0d5ef3aeed.hot-update.js",
+    "/chunks/settings-storage.32b4154a2e1a459ddeec.hot-update.js": "/chunks/settings-storage.32b4154a2e1a459ddeec.hot-update.js",
+    "/chunks/settings-storage.45e099283be2dc7d4e86.hot-update.js": "/chunks/settings-storage.45e099283be2dc7d4e86.hot-update.js",
+    "/chunks/settings-storage.5061d3c2313cdb6aa7c2.hot-update.js": "/chunks/settings-storage.5061d3c2313cdb6aa7c2.hot-update.js",
+    "/chunks/settings-storage.56727d53ccdcd9ff7687.hot-update.js": "/chunks/settings-storage.56727d53ccdcd9ff7687.hot-update.js",
+    "/chunks/settings-storage.d381f794e0675681ca1f.hot-update.js": "/chunks/settings-storage.d381f794e0675681ca1f.hot-update.js",
+    "/chunks/settings-storage.a6b1833763323553ce47.hot-update.js": "/chunks/settings-storage.a6b1833763323553ce47.hot-update.js",
+    "/chunks/settings-storage.090eb321177646467a1b.hot-update.js": "/chunks/settings-storage.090eb321177646467a1b.hot-update.js",
+    "/chunks/settings-storage.cb639a8abdb348e8756f.hot-update.js": "/chunks/settings-storage.cb639a8abdb348e8756f.hot-update.js",
+    "/chunks/settings-storage.7221e8e4238d0cb13324.hot-update.js": "/chunks/settings-storage.7221e8e4238d0cb13324.hot-update.js",
+    "/chunks/settings-storage.d0ea16b4f16cd7719373.hot-update.js": "/chunks/settings-storage.d0ea16b4f16cd7719373.hot-update.js",
+    "/chunks/settings-storage.dc394fddd78fd07d4569.hot-update.js": "/chunks/settings-storage.dc394fddd78fd07d4569.hot-update.js",
+    "/chunks/settings-storage.98a8a76acdb39e84171e.hot-update.js": "/chunks/settings-storage.98a8a76acdb39e84171e.hot-update.js",
+    "/chunks/settings-storage.6995fb55e099e421fe4a.hot-update.js": "/chunks/settings-storage.6995fb55e099e421fe4a.hot-update.js",
+    "/chunks/settings-storage.02dd1a07903e80683473.hot-update.js": "/chunks/settings-storage.02dd1a07903e80683473.hot-update.js",
+    "/chunks/settings-storage.a7a8543edf74412436b3.hot-update.js": "/chunks/settings-storage.a7a8543edf74412436b3.hot-update.js",
+    "/chunks/settings-storage.00d242b851b7554b9780.hot-update.js": "/chunks/settings-storage.00d242b851b7554b9780.hot-update.js",
+    "/chunks/settings-storage.da696ec483e93a5d56c9.hot-update.js": "/chunks/settings-storage.da696ec483e93a5d56c9.hot-update.js",
+    "/chunks/settings-storage.1fa210db7321ff046a90.hot-update.js": "/chunks/settings-storage.1fa210db7321ff046a90.hot-update.js",
+    "/chunks/settings-storage.c729bad032b731c16844.hot-update.js": "/chunks/settings-storage.c729bad032b731c16844.hot-update.js",
+    "/chunks/settings-storage.303d10ee2e9af4fbc2ad.hot-update.js": "/chunks/settings-storage.303d10ee2e9af4fbc2ad.hot-update.js",
+    "/chunks/settings-storage.66859c09af3618c47cc4.hot-update.js": "/chunks/settings-storage.66859c09af3618c47cc4.hot-update.js",
+    "/chunks/settings-storage.f72b0850226a7ba778cf.hot-update.js": "/chunks/settings-storage.f72b0850226a7ba778cf.hot-update.js",
+    "/chunks/settings-storage.b5e1ae884941e1036d32.hot-update.js": "/chunks/settings-storage.b5e1ae884941e1036d32.hot-update.js",
+    "/chunks/settings-storage.c2c648b7d93c8550e13c.hot-update.js": "/chunks/settings-storage.c2c648b7d93c8550e13c.hot-update.js",
+    "/chunks/settings-storage.b95c02fc4dd982610b5a.hot-update.js": "/chunks/settings-storage.b95c02fc4dd982610b5a.hot-update.js",
+    "/chunks/settings-storage.c79327d92df26383cddd.hot-update.js": "/chunks/settings-storage.c79327d92df26383cddd.hot-update.js",
+    "/chunks/settings-storage.bd2434df03153d82bb60.hot-update.js": "/chunks/settings-storage.bd2434df03153d82bb60.hot-update.js",
+    "/chunks/settings-storage.1eeee6e9d3f68ea6e0fc.hot-update.js": "/chunks/settings-storage.1eeee6e9d3f68ea6e0fc.hot-update.js",
+    "/chunks/settings-storage.301e53e7b625fae7060a.hot-update.js": "/chunks/settings-storage.301e53e7b625fae7060a.hot-update.js",
+    "/chunks/settings-storage.2b8753602bff89b4c34e.hot-update.js": "/chunks/settings-storage.2b8753602bff89b4c34e.hot-update.js",
+    "/chunks/settings-storage.9b8983559d0ea778fc00.hot-update.js": "/chunks/settings-storage.9b8983559d0ea778fc00.hot-update.js",
+    "/chunks/settings-storage.f014642de1daec3851c3.hot-update.js": "/chunks/settings-storage.f014642de1daec3851c3.hot-update.js",
+    "/chunks/settings-storage.568bca6ba02ac69c29c7.hot-update.js": "/chunks/settings-storage.568bca6ba02ac69c29c7.hot-update.js",
+    "/chunks/settings-storage.b3e6a64dbf0cbd733a44.hot-update.js": "/chunks/settings-storage.b3e6a64dbf0cbd733a44.hot-update.js",
+    "/chunks/settings-storage.591183b03f35a5ec943b.hot-update.js": "/chunks/settings-storage.591183b03f35a5ec943b.hot-update.js",
+    "/chunks/settings-storage.1c45750113d31f3c1eaa.hot-update.js": "/chunks/settings-storage.1c45750113d31f3c1eaa.hot-update.js",
+    "/chunks/settings-storage.7815207e9e7d6ba351c5.hot-update.js": "/chunks/settings-storage.7815207e9e7d6ba351c5.hot-update.js",
+    "/chunks/settings-storage.ddaf61f5fc54ecdfe279.hot-update.js": "/chunks/settings-storage.ddaf61f5fc54ecdfe279.hot-update.js",
+    "/chunks/settings-storage.9b2dc01006573a9177b5.hot-update.js": "/chunks/settings-storage.9b2dc01006573a9177b5.hot-update.js",
+    "/chunks/settings-storage.9c2db72d22847ba2a800.hot-update.js": "/chunks/settings-storage.9c2db72d22847ba2a800.hot-update.js",
+    "/chunks/settings-storage.6a0806fb4f32c003e821.hot-update.js": "/chunks/settings-storage.6a0806fb4f32c003e821.hot-update.js",
+    "/chunks/settings-storage.e07cb8a59e517c824dd8.hot-update.js": "/chunks/settings-storage.e07cb8a59e517c824dd8.hot-update.js",
+    "/chunks/settings-storage.30259a6331c07775c10b.hot-update.js": "/chunks/settings-storage.30259a6331c07775c10b.hot-update.js",
+    "/chunks/settings-storage.8088946e48224f5fa4f1.hot-update.js": "/chunks/settings-storage.8088946e48224f5fa4f1.hot-update.js",
+    "/chunks/settings-storage.ccce4646006767ac5bcf.hot-update.js": "/chunks/settings-storage.ccce4646006767ac5bcf.hot-update.js",
+    "/chunks/settings-storage.25248ea9ce4aa7f6f861.hot-update.js": "/chunks/settings-storage.25248ea9ce4aa7f6f861.hot-update.js",
+    "/chunks/settings-storage.41f9c02cc30e461bdace.hot-update.js": "/chunks/settings-storage.41f9c02cc30e461bdace.hot-update.js",
+    "/chunks/settings-storage.093f263a673139ef55ad.hot-update.js": "/chunks/settings-storage.093f263a673139ef55ad.hot-update.js",
+    "/js/main.bfeb194fc281575d2f38.hot-update.js": "/js/main.bfeb194fc281575d2f38.hot-update.js",
+    "/chunks/settings-storage.842510a496438e5f5ab0.hot-update.js": "/chunks/settings-storage.842510a496438e5f5ab0.hot-update.js",
+    "/chunks/settings-storage.bc9b0469009df5b5eab3.hot-update.js": "/chunks/settings-storage.bc9b0469009df5b5eab3.hot-update.js",
+    "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.27b9a61682a249f71c20.hot-update.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.27b9a61682a249f71c20.hot-update.js",
+    "/chunks/settings-storage.98ffc3f928190cda8a1b.hot-update.js": "/chunks/settings-storage.98ffc3f928190cda8a1b.hot-update.js",
+    "/chunks/settings-storage.f8bb07f42ef648dd2548.hot-update.js": "/chunks/settings-storage.f8bb07f42ef648dd2548.hot-update.js"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 02d1db49..4586e0b4 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -131,7 +131,7 @@ export default {
 @import '/resources/sass/vuefilemanager/_mixins';
 
 .card {
-	@apply dark:bg-dark-foreground bg-white lg:p-6 p-4 rounded-xl lg:mb-6 mb-4
+	@apply dark:bg-dark-foreground bg-white lg:p-6 p-5 rounded-xl lg:mb-6 mb-4
 }
 
 .input-dark {
diff --git a/resources/js/components/Admin/ProgressLine.vue b/resources/js/components/Admin/ProgressLine.vue
index a95201a4..275d90e3 100644
--- a/resources/js/components/Admin/ProgressLine.vue
+++ b/resources/js/components/Admin/ProgressLine.vue
@@ -11,7 +11,7 @@
 						'border-r-2 dark:border-gray-800 border-white rounded-tl-lg rounded-bl-lg': chart.progress < 100,
 						'border-none rounded-lg': chart.progress >= 100
 						}, chart.color]"
-					class="chart-progress w-full h-2 block"
+					class="chart-progress w-full h-2.5 block"
 				>
 
 				</span>
@@ -24,7 +24,7 @@
 						'border-r-2 dark:border-gray-800 border-white': i < (data.length - 1),
 						'rounded-tr-lg rounded-br-lg': i === (data.length - 1),
 					}, chart.color]"
-					class="chart-progress w-full h-2 block"
+					class="chart-progress w-full h-2.5 block"
 				></span>
             </div>
         </div>
diff --git a/resources/js/views/User/Storage.vue b/resources/js/views/User/Storage.vue
index f2d2b81c..7a406daa 100644
--- a/resources/js/views/User/Storage.vue
+++ b/resources/js/views/User/Storage.vue
@@ -1,15 +1,52 @@
 <template>
     <PageTab>
-		<div class="card shadow-card">
+		<div v-if="distribution" class="card shadow-card">
 			<FormLabel icon="hard-drive">
                 {{ $t('Storage Usage') }}
             </FormLabel>
 
-			<div v-if="distribution">
-				<b class="mb-3 block text-sm text-gray-400">
-					{{ $t('Total') }} {{ storage.data.attributes.used }} {{ $t('of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
-				</b>
-				<ProgressLine :data="distribution" />
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+				{{ storage.data.attributes.used }}
+			</b>
+
+			<b class="mb-3 block text-sm text-gray-400 mb-5">
+				{{ $t('Total of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
+			</b>
+
+			<ProgressLine :data="distribution" />
+		</div>
+		<div v-if="distribution" class="card shadow-card">
+			<FormLabel icon="hard-drive">
+                {{ $t('Upload') }}
+            </FormLabel>
+
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+				154.98MB
+			</b>
+
+			<b class="mb-3 block text-sm text-gray-400 mb-5">
+				{{ $t('In last 30 days') }}
+			</b>
+
+			<div class="flex items-end justify-between h-28">
+				<span class="w-2.5 block rounded-lg lg:mr-2 mr-1.5" :style="{height: Math.random() * 100 + '%', backgroundColor: '#9d66fe'}" v-for="(item, i) in Array(45).fill(0)" :key="i"></span>
+			</div>
+		</div>
+		<div v-if="distribution" class="card shadow-card">
+			<FormLabel icon="hard-drive">
+                {{ $t('Download') }}
+            </FormLabel>
+
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+				927.12MB
+			</b>
+
+			<b class="mb-3 block text-sm text-gray-400 mb-5">
+				{{ $t('In last 30 days') }}
+			</b>
+
+			<div class="flex items-end justify-between h-28">
+				<span class="w-2.5 bg-theme block rounded-lg lg:mr-2 mr-1.5" :style="{height: Math.random() * 100 + '%', backgroundColor: '#ffb822'}" v-for="(item, i) in Array(45).fill(0)" :key="i"></span>
 			</div>
 		</div>
     </PageTab>
@@ -49,41 +86,3 @@
         }
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    #single-page {
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-        position: relative;
-
-        .content-page {
-            overflow-y: auto;
-            height: 100%;
-            padding-bottom: 100px;
-            max-width: 700px;
-            width: 100%;
-            margin: 0 auto;
-        }
-    }
-
-    @media only screen and (max-width: 960px) {
-
-        #single-page {
-
-            .content-page {
-                padding-left: 15px;
-                padding-right: 15px;
-            }
-        }
-    }
-
-    .dark {
-
-
-    }
-
-</style>