done ui

src/routes/notification/Notification.vue

@@ -1,117 +1,49 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useTranslation } from 'i18next-vue';
 import PageHeader from '@/components/dashboard/PageHeader.vue';
 import NotificationActions from './components/NotificationActions.vue';
 import NotificationList from './components/NotificationList.vue';
 import NotificationTabs from './components/NotificationTabs.vue';
+import { useNotifications } from '@/composables/useNotifications';
 
-type NotificationType = 'info' | 'success' | 'warning' | 'error' | 'video' | 'payment' | 'system';
-
-interface Notification {
-    id: string;
-    type: NotificationType;
-    title: string;
-    message: string;
-    time: string;
-    read: boolean;
-    actionUrl?: string;
-    actionLabel?: string;
-}
-
-const loading = ref(false);
 const activeTab = ref('all');
 const { t } = useTranslation();
+const notificationStore = useNotifications();
 
-const notifications = ref<Notification[]>([
-    {
-        id: '1',
-        type: 'video',
-        title: t('notification.mocks.videoProcessed.title'),
-        message: t('notification.mocks.videoProcessed.message'),
-        time: t('notification.time.minutesAgo', { count: 2 }),
-        read: false,
-        actionUrl: '/video',
-        actionLabel: t('notification.actions.viewVideo')
-    },
-    {
-        id: '2',
-        type: 'payment',
-        title: t('notification.mocks.paymentSuccess.title'),
-        message: t('notification.mocks.paymentSuccess.message'),
-        time: t('notification.time.hoursAgo', { count: 1 }),
-        read: false,
-        actionUrl: '/payments-and-plans',
-        actionLabel: t('notification.actions.viewReceipt')
-    },
-    {
-        id: '3',
-        type: 'warning',
-        title: t('notification.mocks.storageWarning.title'),
-        message: t('notification.mocks.storageWarning.message'),
-        time: t('notification.time.hoursAgo', { count: 3 }),
-        read: false,
-        actionUrl: '/payments-and-plans',
-        actionLabel: t('notification.actions.upgradePlan')
-    },
-    {
-        id: '4',
-        type: 'success',
-        title: t('notification.mocks.uploadSuccess.title'),
-        message: t('notification.mocks.uploadSuccess.message'),
-        time: t('notification.time.daysAgo', { count: 1 }),
-        read: true
-    },
-    {
-        id: '5',
-        type: 'system',
-        title: t('notification.mocks.maintenance.title'),
-        message: t('notification.mocks.maintenance.message'),
-        time: t('notification.time.daysAgo', { count: 2 }),
-        read: true
-    },
-    {
-        id: '6',
-        type: 'info',
-        title: t('notification.mocks.newFeature.title'),
-        message: t('notification.mocks.newFeature.message'),
-        time: t('notification.time.daysAgo', { count: 3 }),
-        read: true,
-        actionUrl: '/video',
-        actionLabel: t('notification.actions.tryNow')
-    }
-]);
+onMounted(() => {
+    void notificationStore.fetchNotifications();
+});
 
-const unreadCount = computed(() => notifications.value.filter(n => !n.read).length);
+const unreadCount = computed(() => notificationStore.unreadCount.value);
 
 const tabs = computed(() => [
-    { key: 'all', label: t('notification.tabs.all'), icon: 'i-lucide-inbox', count: notifications.value.length },
+    { key: 'all', label: t('notification.tabs.all'), icon: 'i-lucide-inbox', count: notificationStore.notifications.value.length },
     { key: 'unread', label: t('notification.tabs.unread'), icon: 'i-lucide-bell-dot', count: unreadCount.value },
-    { key: 'video', label: t('notification.tabs.videos'), icon: 'i-lucide-video', count: notifications.value.filter(n => n.type === 'video').length },
-    { key: 'payment', label: t('notification.tabs.payments'), icon: 'i-lucide-credit-card', count: notifications.value.filter(n => n.type === 'payment').length }
+    { key: 'video', label: t('notification.tabs.videos'), icon: 'i-lucide-video', count: notificationStore.notifications.value.filter(n => n.type === 'video').length },
+    { key: 'payment', label: t('notification.tabs.payments'), icon: 'i-lucide-credit-card', count: notificationStore.notifications.value.filter(n => n.type === 'payment').length },
 ]);
 
 const filteredNotifications = computed(() => {
-    if (activeTab.value === 'all') return notifications.value;
-    if (activeTab.value === 'unread') return notifications.value.filter(n => !n.read);
-    return notifications.value.filter(n => n.type === activeTab.value);
+    if (activeTab.value === 'all') return notificationStore.notifications.value;
+    if (activeTab.value === 'unread') return notificationStore.notifications.value.filter(n => !n.read);
+    return notificationStore.notifications.value.filter(n => n.type === activeTab.value);
 });
 
-const handleMarkRead = (id: string) => {
-    const notification = notifications.value.find(n => n.id === id);
-    if (notification) notification.read = true;
+const handleMarkRead = async (id: string) => {
+    await notificationStore.markRead(id);
 };
 
-const handleDelete = (id: string) => {
-    notifications.value = notifications.value.filter(n => n.id !== id);
+const handleDelete = async (id: string) => {
+    await notificationStore.deleteNotification(id);
 };
 
-const handleMarkAllRead = () => {
-    notifications.value.forEach(n => n.read = true);
+const handleMarkAllRead = async () => {
+    await notificationStore.markAllRead();
 };
 
-const handleClearAll = () => {
-    notifications.value = [];
+const handleClearAll = async () => {
+    await notificationStore.clearAll();
 };
 </script>
 
@@ -128,8 +60,8 @@ const handleClearAll = () => {
         <div class="w-full max-w-4xl mx-auto mt-6">
             <div class="notification-container bg-white rounded-2xl border border-gray-200 p-6 shadow-sm">
                 <NotificationActions
-                    :loading="loading"
-                    :total-count="notifications.length"
+                    :loading="notificationStore.loading.value"
+                    :total-count="notificationStore.notifications.value.length"
                     :unread-count="unreadCount"
                     @mark-all-read="handleMarkAllRead"
                     @clear-all="handleClearAll"
@@ -143,7 +75,7 @@ const handleClearAll = () => {
 
                 <NotificationList
                     :notifications="filteredNotifications"
-                    :loading="loading"
+                    :loading="notificationStore.loading.value"
                     @mark-read="handleMarkRead"
                     @delete="handleDelete"
                 />