+
+ ([]);
+
+export function useUploadQueue() {
+
+ const addFiles = (files: FileList) => {
+ const newItems: QueueItem[] = Array.from(files).map((file) => ({
+ id: Math.random().toString(36).substring(2, 9),
+ name: file.name,
+ type: 'local',
+ status: 'pending', // Start as pending
+ progress: 0,
+ uploaded: '0 MB',
+ total: formatSize(file.size),
+ speed: '0 MB/s',
+ file: file,
+ thumbnail: undefined // We could generate a thumbnail here if needed
+ }));
+
+ items.value.push(...newItems);
+ };
+
+ const addRemoteUrls = (urls: string[]) => {
+ const newItems: QueueItem[] = urls.map((url) => ({
+ id: Math.random().toString(36).substring(2, 9),
+ name: url.split('/').pop() || 'Remote File',
+ type: 'remote',
+ status: 'fetching', // Remote URLs start fetching immediately or pending? User said "khi nao nhan upload". Let's use pending.
+ progress: 0,
+ uploaded: '0 MB',
+ total: 'Unknown',
+ speed: '0 MB/s',
+ url: url
+ }));
+
+ // Override status to pending for consistency with user request
+ newItems.forEach(i => i.status = 'pending');
+
+ items.value.push(...newItems);
+ };
+
+ const removeItem = (id: string) => {
+ const index = items.value.findIndex(item => item.id === id);
+ if (index !== -1) {
+ items.value.splice(index, 1);
+ }
+ };
+
+ const startQueue = () => {
+ items.value.forEach(item => {
+ if (item.status === 'pending') {
+ if (item.type === 'local') {
+ startMockUpload(item.id);
+ } else {
+ startMockRemoteFetch(item.id);
+ }
+ }
+ });
+ };
+
+ // Mock Upload Logic
+ const startMockUpload = (id: string) => {
+ const item = items.value.find(i => i.id === id);
+ if (!item) return;
+
+ item.status = 'uploading';
+ let progress = 0;
+ const totalSize = item.file ? item.file.size : 1024 * 1024 * 50; // Default 50MB if unknown
+
+ // Random speed between 1MB/s and 5MB/s
+ const speedBytesPerStep = (1024 * 1024) + Math.random() * (1024 * 1024 * 4);
+
+ const interval = setInterval(() => {
+ if (progress >= 100) {
+ clearInterval(interval);
+ item.status = 'complete';
+ item.progress = 100;
+ item.uploaded = item.total;
+ return;
+ }
+
+ // Increment progress randomly
+ const increment = Math.random() * 5 + 1; // 1-6% increment
+ progress = Math.min(progress + increment, 100);
+
+ item.progress = Math.floor(progress);
+
+ // Calculate uploaded size string
+ const currentBytes = (progress / 100) * totalSize;
+ item.uploaded = formatSize(currentBytes);
+
+ // Re-randomize speed for realism
+ const currentSpeed = (1024 * 1024) + Math.random() * (1024 * 1024 * 2);
+ item.speed = formatSize(currentSpeed) + '/s';
+
+ }, 500);
+ };
+
+ // Mock Remote Fetch Logic
+ const startMockRemoteFetch = (id: string) => {
+ const item = items.value.find(i => i.id === id);
+ if (!item) return;
+
+ item.status = 'fetching'; // Update status to fetching
+
+ // Remote fetch takes some time then completes
+ setTimeout(() => {
+ // Switch to uploading/processing phase if we wanted, or just finish
+ item.status = 'complete';
+ item.progress = 100;
+ }, 3000 + Math.random() * 3000);
+ };
+
+
+ const formatSize = (bytes: number): string => {
+ if (bytes === 0) 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];
+ };
+
+ const totalSize = computed(() => {
+ let total = 0;
+ items.value.forEach(item => {
+ if (item.file) total += item.file.size;
+ });
+ return formatSize(total);
+ });
+
+ const completeCount = computed(() => {
+ return items.value.filter(i => i.status === 'complete').length;
+ });
+
+ const pendingCount = computed(() => {
+ return items.value.filter(i => i.status === 'pending').length;
+ });
+
+ return {
+ items,
+ addFiles,
+ addRemoteUrls,
+ removeItem,
+ startQueue,
+ totalSize,
+ completeCount,
+ pendingCount
+ };
+}
diff --git a/src/main.ts b/src/main.ts
index 3bd0796..77d04c8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,7 +11,7 @@ import { createPinia } from "pinia";
import { useAuthStore } from './stores/auth';
import ToastService from 'primevue/toastservice';
import Tooltip from 'primevue/tooltip';
-const bodyClass = ":uno: font-sans text-gray-800 antialiased flex flex-col min-h-screen"
+const bodyClass = ":uno: font-sans text-gray-800 antialiased flex flex-col min-h-screen bg-[#FAF8F8]"
export function createApp() {
const pinia = createPinia();
const app = createSSRApp(withErrorBoundary(RouterView));
diff --git a/src/routes/notification/components/NotificationItem.vue b/src/routes/notification/components/NotificationItem.vue
index 40da859..0874cbd 100644
--- a/src/routes/notification/components/NotificationItem.vue
+++ b/src/routes/notification/components/NotificationItem.vue
@@ -1,5 +1,15 @@
-
-
+
+
+
+
+
+
+
+
+
diff --git a/src/components/NotificationDrawer.vue b/src/components/NotificationDrawer.vue
index fb288be..54bbbb6 100644
--- a/src/components/NotificationDrawer.vue
+++ b/src/components/NotificationDrawer.vue
@@ -1,7 +1,7 @@
diff --git a/src/components/icons/ArrowRightIcon.vue b/src/components/icons/ArrowRightIcon.vue
new file mode 100644
index 0000000..5219d46
--- /dev/null
+++ b/src/components/icons/ArrowRightIcon.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/src/components/icons/CheckCircleIcon.vue b/src/components/icons/CheckCircleIcon.vue
new file mode 100644
index 0000000..60f2266
--- /dev/null
+++ b/src/components/icons/CheckCircleIcon.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/src/components/icons/CheckMarkIcon.vue b/src/components/icons/CheckMarkIcon.vue
new file mode 100644
index 0000000..cd541f1
--- /dev/null
+++ b/src/components/icons/CheckMarkIcon.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
diff --git a/src/components/icons/CreditCardIcon.vue b/src/components/icons/CreditCardIcon.vue
new file mode 100644
index 0000000..e45780c
--- /dev/null
+++ b/src/components/icons/CreditCardIcon.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/src/components/icons/InfoIcon.vue b/src/components/icons/InfoIcon.vue
new file mode 100644
index 0000000..5e26ce6
--- /dev/null
+++ b/src/components/icons/InfoIcon.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/src/components/icons/SettingsIcon.vue b/src/components/icons/SettingsIcon.vue
new file mode 100644
index 0000000..ea1491f
--- /dev/null
+++ b/src/components/icons/SettingsIcon.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
diff --git a/src/components/icons/TrashIcon.vue b/src/components/icons/TrashIcon.vue
new file mode 100644
index 0000000..efff4b7
--- /dev/null
+++ b/src/components/icons/TrashIcon.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/src/components/icons/VideoIcon.vue b/src/components/icons/VideoIcon.vue
new file mode 100644
index 0000000..8fc1485
--- /dev/null
+++ b/src/components/icons/VideoIcon.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/src/components/icons/XCircleIcon.vue b/src/components/icons/XCircleIcon.vue
new file mode 100644
index 0000000..9f762fd
--- /dev/null
+++ b/src/components/icons/XCircleIcon.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/src/composables/useUploadQueue.ts b/src/composables/useUploadQueue.ts
new file mode 100644
index 0000000..a13a9be
--- /dev/null
+++ b/src/composables/useUploadQueue.ts
@@ -0,0 +1,164 @@
+import { ref, computed } from 'vue';
+
+export interface QueueItem {
+ id: string;
+ name: string;
+ type: 'local' | 'remote';
+ status: 'uploading' | 'processing' | 'fetching' | 'complete' | 'error' | 'pending';
+ progress?: number;
+ uploaded?: string;
+ total?: string;
+ speed?: string;
+ thumbnail?: string;
+ file?: File; // Keep reference to file for local uploads
+ url?: string; // Keep reference to url for remote uploads
+}
+
+const items = ref
+
+
+
+
+
+ Uploads
+ +
+
-
-
diff --git a/src/routes/overview/Overview.vue b/src/routes/overview/Overview.vue
index 85b3a2d..cc635c3 100644
--- a/src/routes/overview/Overview.vue
+++ b/src/routes/overview/Overview.vue
@@ -1,13 +1,13 @@
@@ -44,6 +50,8 @@ const handleRemoteUrls = (urls: string[]) => {
-
+
{{ notification.actionLabel || 'View Details' }}
-
+
-
-
+
+
@@ -63,47 +84,34 @@ const bgClass = computed(() => {
{{ notification.time }}
{{ notification.message }}
- + -
-
-
+
+
+
+
diff --git a/src/routes/upload/components/UploadModeToggle.vue b/src/routes/upload/components/UploadModeToggle.vue
index 31cd1c9..3d8df1a 100644
--- a/src/routes/upload/components/UploadModeToggle.vue
+++ b/src/routes/upload/components/UploadModeToggle.vue
@@ -30,7 +30,7 @@ const mode = computed({
-
+
diff --git a/src/routes/upload/components/UploadQueue.vue b/src/routes/upload/components/UploadQueue.vue
index d36a7d4..23544bd 100644
--- a/src/routes/upload/components/UploadQueue.vue
+++ b/src/routes/upload/components/UploadQueue.vue
@@ -1,15 +1,18 @@
@@ -45,8 +48,7 @@ const emit = defineEmits<{
-
Empty queue!
@@ -54,9 +56,21 @@ const emit = defineEmits<{
Total size:
{{ totalSize || '0 MB' }}
+
+
+