Merge pull request #27 from NestaRizkia/Notification-Center

Adding Notification Center Feature

Author: Kuzma02

app/_zustand/notificationStore.ts

@@ -0,0 +1,135 @@
+import { create } from 'zustand';
+import { Notification, NotificationFilters, NotificationResponse } from '@/types/notification';
+
+interface NotificationState {
+  notifications: Notification[];
+  unreadCount: number;
+  total: number;
+  page: number;
+  totalPages: number;
+  loading: boolean;
+  error: string | null;
+  filters: NotificationFilters;
+  selectedIds: string[];
+  
+  // Actions
+  setNotifications: (response: NotificationResponse) => void;
+  addNotification: (notification: Notification) => void;
+  markAsRead: (id: string) => void;
+  markAsUnread: (id: string) => void;
+  deleteNotification: (id: string) => void;
+  setFilters: (filters: Partial<NotificationFilters>) => void;
+  toggleSelection: (id: string) => void;
+  selectAll: () => void;
+  clearSelection: () => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  setUnreadCount: (count: number) => void;
+  clearNotifications: () => void;
+}
+
+export const useNotificationStore = create<NotificationState>((set, get) => ({
+  // Initial state
+  notifications: [],
+  unreadCount: 0,
+  total: 0,
+  page: 1,
+  totalPages: 0,
+  loading: false,
+  error: null,
+  filters: {
+    page: 1,
+    limit: 10,
+    sortBy: 'createdAt',
+    sortOrder: 'desc'
+  },
+  selectedIds: [],
+
+  // Actions
+  setNotifications: (response: NotificationResponse) => 
+    set({
+      notifications: response.notifications,
+      unreadCount: response.unreadCount,
+      total: response.total,
+      page: response.page,
+      totalPages: response.totalPages,
+      loading: false,
+      error: null
+    }),
+
+  addNotification: (notification: Notification) =>
+    set(state => ({
+      notifications: [notification, ...state.notifications],
+      unreadCount: notification.isRead ? state.unreadCount : state.unreadCount + 1,
+      total: state.total + 1
+    })),
+
+  markAsRead: (id: string) =>
+    set(state => ({
+      notifications: state.notifications.map(n =>
+        n.id === id ? { ...n, isRead: true } : n
+      ),
+      unreadCount: Math.max(0, state.unreadCount - 1)
+    })),
+
+  markAsUnread: (id: string) =>
+    set(state => ({
+      notifications: state.notifications.map(n =>
+        n.id === id ? { ...n, isRead: false } : n
+      ),
+      unreadCount: state.unreadCount + 1
+    })),
+
+  deleteNotification: (id: string) =>
+    set(state => {
+      const notification = state.notifications.find(n => n.id === id);
+      const wasUnread = notification && !notification.isRead;
+      
+      return {
+        notifications: state.notifications.filter(n => n.id !== id),
+        unreadCount: wasUnread ? Math.max(0, state.unreadCount - 1) : state.unreadCount,
+        total: Math.max(0, state.total - 1),
+        selectedIds: state.selectedIds.filter(selectedId => selectedId !== id)
+      };
+    }),
+
+  setFilters: (newFilters: Partial<NotificationFilters>) =>
+    set(state => ({
+      filters: { ...state.filters, ...newFilters },
+      selectedIds: [] // Clear selection when filters change
+    })),
+
+  toggleSelection: (id: string) =>
+    set(state => ({
+      selectedIds: state.selectedIds.includes(id)
+        ? state.selectedIds.filter(selectedId => selectedId !== id)
+        : [...state.selectedIds, id]
+    })),
+
+  selectAll: () =>
+    set(state => ({
+      selectedIds: state.notifications.map(n => n.id)
+    })),
+
+  clearSelection: () =>
+    set({ selectedIds: [] }),
+
+  setLoading: (loading: boolean) =>
+    set({ loading }),
+
+  setError: (error: string | null) =>
+    set({ error, loading: false }),
+
+  setUnreadCount: (unreadCount: number) =>
+    set({ unreadCount }),
+
+  clearNotifications: () =>
+    set({
+      notifications: [],
+      unreadCount: 0,
+      total: 0,
+      page: 1,
+      totalPages: 0,
+      selectedIds: []
+    })
+}));

app/checkout/page.tsx

@@ -3,11 +3,13 @@ import { SectionTitle } from "@/components";
 import { useProductStore } from "../_zustand/store";
 import Image from "next/image";
 import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
 import toast from "react-hot-toast";
 import { useRouter } from "next/navigation";
 import apiClient from "@/lib/api";
 
 const CheckoutPage = () => {
+  const { data: session } = useSession();
   const [checkoutForm, setCheckoutForm] = useState({
     name: "",
     lastname: "",
@@ -125,6 +127,24 @@ const CheckoutPage = () => {
     try {
       console.log("🚀 Starting order creation...");
 
+      // Get user ID if logged in
+      let userId = null;
+      if (session?.user?.email) {
+        try {
+          console.log("🔍 Getting user ID for logged-in user:", session.user.email);
+          const userResponse = await apiClient.get(`/api/users/email/${session.user.email}`);
+          if (userResponse.ok) {
+            const userData = await userResponse.json();
+            userId = userData.id;
+            console.log("✅ Found user ID:", userId);
+          } else {
+            console.log("❌ Could not find user with email:", session.user.email);
+          }
+        } catch (userError) {
+          console.log("⚠️  Error getting user ID:", userError);
+        }
+      }
+      
       // Prepare the order data
       const orderData = {
         name: checkoutForm.name.trim(),
@@ -140,6 +160,7 @@ const CheckoutPage = () => {
         city: checkoutForm.city.trim(),
         country: checkoutForm.country.trim(),
         orderNotice: checkoutForm.orderNotice.trim(),
+        userId: userId // Add user ID for notifications
       };
 
       console.log("📋 Order data being sent:", orderData);
@@ -163,20 +184,29 @@ const CheckoutPage = () => {
           const errorData = JSON.parse(errorText);
           console.error("Parsed error data:", errorData);
 
-          // Show specific validation errors
-          if (errorData.details && Array.isArray(errorData.details)) {
+          // Handle different error types
+          if (response.status === 409) {
+            // Duplicate order error
+            toast.error(errorData.details || errorData.error || "Duplicate order detected");
+            return; // Don't throw, just return to stop execution
+          } else if (errorData.details && Array.isArray(errorData.details)) {
+            // Validation errors
             errorData.details.forEach((detail: any) => {
               toast.error(`${detail.field}: ${detail.message}`);
             });
+          } else if (typeof errorData.details === 'string') {
+            // Single error message in details
+            toast.error(errorData.details);
           } else {
-            toast.error(errorData.error || "Validation failed");
+            // Fallback error message
+            toast.error(errorData.error || "Order creation failed");
           }
         } catch (parseError) {
           console.error("Could not parse error as JSON:", parseError);
-          toast.error("Validation failed");
+          toast.error("Order creation failed. Please try again.");
         }
 
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        return; // Stop execution instead of throwing
       }
 
       const data = await response.json();
@@ -223,6 +253,14 @@ const CheckoutPage = () => {
       });
       clearCart();
 
+      // Refresh notification count if user is logged in
+      try {
+        // This will trigger a refresh of notifications in the background
+        window.dispatchEvent(new CustomEvent('orderCompleted'));
+      } catch (error) {
+        console.log('Note: Could not trigger notification refresh');
+      }
+      
       toast.success("Order created successfully! You will be contacted for payment.");
       setTimeout(() => {
         router.push("/");