@@ -59,33 +49,26 @@ const iconColors = {
-
- {{ title }}
{{ value }}
-
+
+
+
-
-
+
+
{{ Math.abs(trend.value) }}%
vs last month
diff --git a/src/components/icons/Chart.vue b/src/components/icons/Chart.vue
new file mode 100644
index 0000000..5c7766d
--- /dev/null
+++ b/src/components/icons/Chart.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 805ab45..6acbeda 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -50,3 +50,34 @@ export function getImageAspectRatio(url: string): Promise {
}
+
+export const formatBytes = (bytes?: number) => {
+ if (!bytes) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+export const formatDuration = (seconds?: number) => {
+ if (!seconds) return '0:00';
+ const h = Math.floor(seconds / 3600);
+ const m = Math.floor((seconds % 3600) / 60);
+ const s = Math.floor(seconds % 60);
+
+ if (h > 0) {
+ return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+ }
+ return `${m}:${s.toString().padStart(2, '0')}`;
+};
+
+export const formatDate = (dateString?: string) => {
+ if (!dateString) return '';
+ return new Date(dateString).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+};
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 141c27a..a6ff32b 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -66,7 +66,7 @@ const routes: RouteData[] = [
{
path: "",
name: "overview",
- component: () => import("./add/Add.vue"),
+ component: () => import("./overview/Overview.vue"),
meta: {
head: {
title: 'Overview - Holistream',
diff --git a/src/routes/overview/Overview.vue b/src/routes/overview/Overview.vue
new file mode 100644
index 0000000..85b3a2d
--- /dev/null
+++ b/src/routes/overview/Overview.vue
@@ -0,0 +1,79 @@
+
+
+
+
+
+
diff --git a/src/routes/overview/components/QuickActions.vue b/src/routes/overview/components/QuickActions.vue
new file mode 100644
index 0000000..b70af2e
--- /dev/null
+++ b/src/routes/overview/components/QuickActions.vue
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/overview/components/RecentVideos.vue b/src/routes/overview/components/RecentVideos.vue
new file mode 100644
index 0000000..768ae80
--- /dev/null
+++ b/src/routes/overview/components/RecentVideos.vue
@@ -0,0 +1,134 @@
+
+
+
+ Quick Actions
+
+
+
+
+
+
+
+
diff --git a/src/routes/overview/components/Referral.vue b/src/routes/overview/components/Referral.vue
new file mode 100644
index 0000000..84faa74
--- /dev/null
+++ b/src/routes/overview/components/Referral.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ View all
+
+
+
+
+ Recent Videos
+
+
+
+
+
+
+
+ | + Video | ++ Status | ++ Duration | ++ Upload Date | ++ Actions | +
|---|---|---|---|---|
|
+
+
+
+
+
+
+
+
+
+ {{ video.title }} ++ {{ video.description || 'No description' }} + |
+ + + {{ video.status || 'Unknown' }} + + | ++ {{ formatDuration(video.duration) }} + | ++ {{ formatDate(video.created_at) }} + | +
+
+
+
+
+
+ |
+
+
+
+
\ No newline at end of file
diff --git a/src/routes/overview/components/StatsOverview.vue b/src/routes/overview/components/StatsOverview.vue
new file mode 100644
index 0000000..aeaf5e6
--- /dev/null
+++ b/src/routes/overview/components/StatsOverview.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+ Referral Link
+
+
+ Share your referral link and earn commissions from + referred users!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/overview/components/StorageUsage.vue b/src/routes/overview/components/StorageUsage.vue
new file mode 100644
index 0000000..6c547ea
--- /dev/null
+++ b/src/routes/overview/components/StorageUsage.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
+
diff --git a/src/routes/overview/components/WelcomeBanner.vue b/src/routes/overview/components/WelcomeBanner.vue
new file mode 100644
index 0000000..dd3a49b
--- /dev/null
+++ b/src/routes/overview/components/WelcomeBanner.vue
@@ -0,0 +1,16 @@
+
+
+
+ Storage Usage
+ +
+
+
+
+
+ {{ formatBytes(stats.storageUsed) }} of {{ formatBytes(stats.storageLimit) }} used
+
+
+ {{ storagePercentage }}%
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.label }}
+
+ {{ formatBytes(item.size) }}
+
+
+
+
+
+
+
+ Storage running low
+
+ Consider upgrading your plan to get more storage.
+
+
+
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 381ad72..d77cdcc 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -19,7 +19,7 @@ export const useAuthStore = defineStore('auth', () => {
format: "json",
}).then(r => r.json()).then(r => {
if (r.data) {
- user.value = r.data as ModelUser;
+ user.value = r.data.user as ModelUser;
}
}).catch(() => {}).finally(() => {
initialized.value = true;
diff --git a/uno.config.ts b/uno.config.ts
index ff0c40b..6a13ef5 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig, presetAttributify, presetTypography, presetWind4, transformerCompileClass, transformerVariantGroup } from 'unocss'
+import { defineConfig, presetAttributify, presetTypography, presetWind4, transformerCompileClass, transformerVariantGroup } from 'unocss';
import { presetBootstrapBtn } from "./bootstrap_btn";
export default defineConfig({
@@ -69,6 +69,16 @@ export default defineConfig({
light: "#e2e6ea",
dark: "#e2e6ea",
},
+ foreground: {
+ DEFAULT: "#111827",
+ light: "#374151",
+ dark: "#000000",
+ },
+ muted: {
+ DEFAULT: "#f3f4f6",
+ light: "#fafafa",
+ dark: "#e5e7eb",
+ }
},
boxShadow: {
"primary-box": "2px 2px 10px #aff6b8",
Welcome back, {{ + auth.user?.username }}! 👋 +
+Here's what's happening with your content + today.
+