Index: kupi-mk/backend/routes/cart.js =================================================================== --- kupi-mk/backend/routes/cart.js (revision a50634e742db5be5422ca0b5c8ddead0ccf398f8) +++ kupi-mk/backend/routes/cart.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) @@ -7,5 +7,5 @@ router.get('/', auth, async (req, res) => { try { - const userId = req.user.id; + const userId = req.user.userId; const result = await pool.query(` @@ -43,5 +43,5 @@ router.post('/add', auth, async (req, res) => { try { - const userId = req.user.id; + const userId = req.user.userId; const { productId, quantity = 1 } = req.body; @@ -122,5 +122,5 @@ router.put('/update/:id', auth, async (req, res) => { try { - const userId = req.user.id; + const userId = req.user.userId; const cartItemId = req.params.id; const { quantity } = req.body; @@ -168,5 +168,5 @@ router.delete('/remove/:id', auth, async (req, res) => { try { - const userId = req.user.id; + const userId = req.user.userId; const cartItemId = req.params.id; @@ -194,8 +194,8 @@ router.delete('/clear', auth, async (req, res) => { try { - const userId = req.user.id; + const userId = req.user.userId; const result = await pool.query( - 'DELETE FROM cart_items WHERE user_id = $1 RETURNING COUNT(*)', + 'DELETE FROM cart_items WHERE user_id = $1', [userId] ); @@ -203,5 +203,6 @@ res.json({ success: true, - message: 'Cart cleared successfully' + message: 'Cart cleared successfully', + deletedCount: result.rowCount }); } catch (error) { @@ -214,5 +215,5 @@ router.get('/summary', auth, async (req, res) => { try { - const userId = req.user.id; + const userId = req.user.userId; const result = await pool.query(` Index: kupi-mk/backend/routes/orders.js =================================================================== --- kupi-mk/backend/routes/orders.js (revision a50634e742db5be5422ca0b5c8ddead0ccf398f8) +++ kupi-mk/backend/routes/orders.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) @@ -4,4 +4,11 @@ const { auth } = require('../middleware/auth'); +// ============================= +// Orders Routes +// - Contains endpoints for creating orders, fetching history, and seller/admin views +// - Important files: orders table, order_items table, products table, users table +// - Authenticated routes use the `auth` middleware to attach `req.user.userId` +// ============================= + // Create new order from cart (checkout) router.post('/checkout', auth, async (req, res) => { @@ -11,5 +18,5 @@ await client.query('BEGIN'); - const userId = req.user.id; + const userId = req.user.userId; const { shippingAddress, @@ -119,10 +126,11 @@ router.get('/history', auth, async (req, res) => { try { - const userId = req.user.id; + const userId = req.user.userId; const page = parseInt(req.query.page) || 1; const limit = parseInt(req.query.limit) || 10; const offset = (page - 1) * limit; - const result = await pool.query(` + // Get orders with basic info + const ordersResult = await pool.query(` SELECT o.*, @@ -136,4 +144,25 @@ `, [userId, limit, offset]); + // Get order items for each order + const ordersWithItems = await Promise.all( + ordersResult.rows.map(async (order) => { + const itemsResult = await pool.query(` + SELECT + oi.*, + p.title as product_title, + p.images as product_images + FROM order_items oi + JOIN products p ON oi.product_id = p.id + WHERE oi.order_id = $1 + ORDER BY oi.created_at + `, [order.id]); + + return { + ...order, + items: itemsResult.rows + }; + }) + ); + // Get total count for pagination const countResult = await pool.query( @@ -144,5 +173,5 @@ res.json({ success: true, - orders: result.rows, + orders: ordersWithItems, pagination: { page, @@ -161,5 +190,5 @@ router.get('/:orderId', auth, async (req, res) => { try { - const userId = req.user.id; + const userId = req.user.userId; const orderId = req.params.orderId; @@ -217,13 +246,14 @@ } - // For now, only allow users to cancel their own pending orders + // For now, allow users to manage their own orders for testing // Later we can add role-based permissions for sellers/admins - const userId = req.user.id; + const userId = req.user.userId; if (status === 'cancelled') { + // Only allow cancelling pending or confirmed orders const result = await pool.query(` UPDATE orders SET status = $1, updated_at = CURRENT_TIMESTAMP - WHERE id = $2 AND user_id = $3 AND status = 'pending' + WHERE id = $2 AND user_id = $3 AND status IN ('pending', 'confirmed') RETURNING * `, [status, orderId, userId]); @@ -250,7 +280,23 @@ }); } else { - res.status(403).json({ - success: false, - message: 'Unauthorized to update order status' + // Allow status progression for testing (normally this would be seller/admin only) + const result = await pool.query(` + UPDATE orders + SET status = $1, updated_at = CURRENT_TIMESTAMP + WHERE id = $2 AND user_id = $3 + RETURNING * + `, [status, orderId, userId]); + + if (result.rows.length === 0) { + return res.status(404).json({ + success: false, + message: 'Order not found' + }); + } + + res.json({ + success: true, + message: `Order status updated to ${status}`, + order: result.rows[0] }); } @@ -264,5 +310,5 @@ router.get('/stats/summary', auth, async (req, res) => { try { - const userId = req.user.id; + const userId = req.user.userId; const result = await pool.query(` @@ -287,3 +333,160 @@ }); +// Admin/Seller endpoints +// Get all orders (for seller dashboard) - only orders containing seller's products +router.get('/admin/all', auth, async (req, res) => { + try { + const sellerId = req.user.userId; + + // First get the basic order information + // - We select orders that contain at least one product from this seller (`p.seller_id = $1`). + // - We aggregate product titles and the item count for quick overview in the dashboard. + // - Note: we avoid aggregating JSON blobs here to keep GROUP BY safe and portable across Postgres versions. + const ordersResult = await pool.query(` + SELECT DISTINCT + o.id, + o.user_id, + o.total_amount, + o.status, + o.shipping_address, + o.billing_address, + o.phone, + o.payment_method, + o.notes, + o.created_at, + o.updated_at, + u.first_name, + u.last_name, + u.email, + COUNT(oi.id) as item_count, + STRING_AGG(p.title, ', ') as product_titles + FROM orders o + INNER JOIN order_items oi ON o.id = oi.order_id + INNER JOIN products p ON oi.product_id = p.id + INNER JOIN users u ON o.user_id = u.id + WHERE p.seller_id = $1 + GROUP BY o.id, o.user_id, o.total_amount, o.status, o.shipping_address, + o.billing_address, o.phone, o.payment_method, o.notes, + o.created_at, o.updated_at, u.first_name, u.last_name, u.email + ORDER BY o.created_at DESC + `, [sellerId]); + + // Then get order items for each order + // - We query order_items separately to fetch item-level details and a single image per product + // - This avoids grouping JSON columns and gives us full control over returned fields + const orders = []; + for (const order of ordersResult.rows) { + const itemsResult = await pool.query(` + SELECT + oi.id, + oi.product_id, + p.title as product_title, + oi.quantity, + oi.price_at_time, + CASE WHEN p.images IS NOT NULL AND array_length(p.images, 1) > 0 THEN p.images[1] ELSE NULL END as image_url + FROM order_items oi + INNER JOIN products p ON oi.product_id = p.id + WHERE oi.order_id = $1 AND p.seller_id = $2 + `, [order.id, sellerId]); + + // Combine base order row with its items + orders.push({ + ...order, + order_items: itemsResult.rows + }); + } + + res.json({ + success: true, + orders: orders + }); + } catch (error) { + console.error('Error fetching all orders:', error); + res.status(500).json({ success: false, message: 'Server error' }); + } +}); + +// Update order status (for seller dashboard) +router.put('/admin/:orderId/status', auth, async (req, res) => { + const client = await pool.connect(); + + try { + await client.query('BEGIN'); + + const { orderId } = req.params; + const { status } = req.body; + + if (!status) { + return res.status(400).json({ + success: false, + message: 'Status is required' + }); + } + + // Validate status + const validStatuses = ['pending', 'confirmed', 'processing', 'shipped', 'delivered', 'cancelled']; + if (!validStatuses.includes(status)) { + return res.status(400).json({ + success: false, + message: 'Invalid status value' + }); + } + + // Get current order + const orderResult = await client.query( + 'SELECT id, status, user_id FROM orders WHERE id = $1', + [orderId] + ); + + if (orderResult.rows.length === 0) { + await client.query('ROLLBACK'); + return res.status(404).json({ + success: false, + message: 'Order not found' + }); + } + + const currentOrder = orderResult.rows[0]; + + // If cancelling order, restore stock + if (status === 'cancelled' && currentOrder.status !== 'cancelled') { + const orderItemsResult = await client.query(` + SELECT oi.product_id, oi.quantity + FROM order_items oi + WHERE oi.order_id = $1 + `, [orderId]); + + for (const item of orderItemsResult.rows) { + await client.query(` + UPDATE products + SET stock_quantity = stock_quantity + $1 + WHERE id = $2 + `, [item.quantity, item.product_id]); + } + } + + // Update order status + await client.query( + 'UPDATE orders SET status = $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2', + [status, orderId] + ); + + await client.query('COMMIT'); + + res.json({ + success: true, + message: `Order status updated to ${status}`, + orderId: orderId, + newStatus: status + }); + + } catch (error) { + await client.query('ROLLBACK'); + console.error('Error updating order status:', error); + res.status(500).json({ success: false, message: 'Server error' }); + } finally { + client.release(); + } +}); + module.exports = router; Index: kupi-mk/frontend/src/App.js =================================================================== --- kupi-mk/frontend/src/App.js (revision a50634e742db5be5422ca0b5c8ddead0ccf398f8) +++ kupi-mk/frontend/src/App.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) @@ -3,4 +3,5 @@ import { AuthProvider } from './context/AuthContext'; import { ProductProvider } from './context/ProductContext'; +import { CartProvider } from './context/CartContext'; // Components @@ -13,4 +14,7 @@ import EditProduct from './pages/EditProduct'; import Profile from './pages/Profile'; +import Checkout from './pages/Checkout'; +import Orders from './pages/Orders'; +import SellerDashboard from './pages/SellerDashboard'; import ProtectedRoute from './components/ProtectedRoute'; @@ -18,9 +22,10 @@ return ( - - -
- -
+ + + +
+ +
} /> @@ -52,4 +57,28 @@ } /> + + + + } + /> + + + + } + /> + + + + } + />
@@ -57,4 +86,5 @@ + ); Index: kupi-mk/frontend/src/components/CartIcon.js =================================================================== --- kupi-mk/frontend/src/components/CartIcon.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) +++ kupi-mk/frontend/src/components/CartIcon.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) @@ -0,0 +1,51 @@ +import React from 'react'; +import { useCart } from '../context/CartContext'; + +const CartIcon = ({ onClick }) => { + const { totalItems, loading } = useCart(); + + return ( + + ); +}; + +export default CartIcon; Index: kupi-mk/frontend/src/components/CartItem.js =================================================================== --- kupi-mk/frontend/src/components/CartItem.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) +++ kupi-mk/frontend/src/components/CartItem.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) @@ -0,0 +1,127 @@ +import React, { useState } from 'react'; +import { useCart } from '../context/CartContext'; + +const CartItem = ({ item }) => { + const { updateCartItem, removeFromCart } = useCart(); + const [isUpdating, setIsUpdating] = useState(false); + const [isRemoving, setIsRemoving] = useState(false); + + const getImageUrl = (imagePath) => { + if (!imagePath) return '/placeholder-image.svg'; + if (imagePath.startsWith('http')) return imagePath; + if (imagePath.startsWith('/')) { + return `http://localhost:5001${imagePath}`; + } + return `http://localhost:5001/uploads/products/${imagePath}`; + }; + + const imageUrl = item.images && item.images.length > 0 + ? getImageUrl(item.images[0]) + : '/placeholder-image.svg'; + + const handleQuantityChange = async (newQuantity) => { + if (newQuantity < 1) return; + + setIsUpdating(true); + const result = await updateCartItem(item.id, newQuantity); + if (!result.success) { + alert(result.message || 'Failed to update quantity'); + } + setIsUpdating(false); + }; + + const handleRemove = async () => { + if (window.confirm('Remove this item from your cart?')) { + setIsRemoving(true); + const result = await removeFromCart(item.id); + if (!result.success) { + alert(result.message || 'Failed to remove item'); + setIsRemoving(false); + } + } + }; + + const itemTotal = parseFloat(item.price) * item.quantity; + + return ( +
+ {/* Product Image */} +
+ {item.title} { + e.target.src = '/placeholder-image.svg'; + }} + /> +
+ + {/* Product Details */} +
+

+ {item.title} +

+

+ {item.category_name} +

+

+ {parseFloat(item.price).toLocaleString()} МКД +

+
+ + {/* Quantity Controls */} +
+ + + + {isUpdating ? '...' : item.quantity} + + + +
+ + {/* Item Total */} +
+

+ {itemTotal.toLocaleString()} МКД +

+ {item.quantity > 1 && ( +

+ {parseFloat(item.price).toLocaleString()} × {item.quantity} +

+ )} +
+ + {/* Remove Button */} + +
+ ); +}; + +export default CartItem; Index: kupi-mk/frontend/src/components/CartSidebar.js =================================================================== --- kupi-mk/frontend/src/components/CartSidebar.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) +++ kupi-mk/frontend/src/components/CartSidebar.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) @@ -0,0 +1,141 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { useCart } from '../context/CartContext'; +import CartItem from './CartItem'; + +const CartSidebar = ({ isOpen, onClose }) => { + const { cartItems, totalItems, totalPrice, loading, error, clearCart } = useCart(); + + const handleClearCart = async () => { + if (window.confirm('Are you sure you want to clear your entire cart?')) { + const result = await clearCart(); + if (!result.success) { + alert(result.message || 'Failed to clear cart'); + } + } + }; + + const handleCheckout = () => { + onClose(); + // Navigation to checkout will be handled by the Link component + }; + + return ( + <> + {/* Backdrop */} + {isOpen && ( +
+ )} + + {/* Sidebar */} +
+ {/* Header */} +
+

+ Shopping Cart ({totalItems}) +

+ +
+ + {/* Content */} +
+ {/* Error Message */} + {error && ( +
+ {error} +
+ )} + + {/* Loading State */} + {loading && ( +
+
+
+ )} + + {/* Empty Cart */} + {!loading && cartItems.length === 0 && ( +
+ + + +

Your cart is empty

+

Add some products to get started!

+ +
+ )} + + {/* Cart Items */} + {!loading && cartItems.length > 0 && ( + <> + {/* Items List */} +
+ {cartItems.map((item) => ( + + ))} +
+ + {/* Footer */} +
+ {/* Clear Cart Button */} + {cartItems.length > 1 && ( + + )} + + {/* Total */} +
+ Total: + {totalPrice.toLocaleString()} МКД +
+ + {/* Action Buttons */} +
+ + Proceed to Checkout + + +
+
+ + )} +
+
+ + ); +}; + +export default CartSidebar; Index: kupi-mk/frontend/src/components/Navbar.js =================================================================== --- kupi-mk/frontend/src/components/Navbar.js (revision a50634e742db5be5422ca0b5c8ddead0ccf398f8) +++ kupi-mk/frontend/src/components/Navbar.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) @@ -1,9 +1,12 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { useAuth } from '../context/AuthContext'; +import CartIcon from './CartIcon'; +import CartSidebar from './CartSidebar'; const Navbar = () => { const { user, logout, isAuthenticated } = useAuth(); const navigate = useNavigate(); + const [isCartOpen, setIsCartOpen] = useState(false); const handleLogout = () => { @@ -52,4 +55,7 @@ {isAuthenticated() ? ( <> + {/* Cart Icon - only show when logged in */} + setIsCartOpen(true)} /> + + + Мои нарачки + + + Продавач панел + + {/* Seller Dashboard: visible when logged in; shows seller-specific order management */}
+ + {/* Cart Sidebar */} + setIsCartOpen(false)} + /> ); Index: kupi-mk/frontend/src/components/ProductCard.js =================================================================== --- kupi-mk/frontend/src/components/ProductCard.js (revision a50634e742db5be5422ca0b5c8ddead0ccf398f8) +++ kupi-mk/frontend/src/components/ProductCard.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) @@ -1,6 +1,13 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Link } from 'react-router-dom'; +import { useAuth } from '../context/AuthContext'; +import { useCart } from '../context/CartContext'; +import StarRating from './StarRating'; const ProductCard = ({ product }) => { + const { isAuthenticated } = useAuth(); + const { addToCart } = useCart(); + const [isAddingToCart, setIsAddingToCart] = useState(false); + const getImageUrl = (imagePath) => { if (!imagePath) return '/placeholder-image.svg'; @@ -25,7 +32,35 @@ console.log('Image URL:', imageUrl); // Debug log + const handleAddToCart = async (e) => { + e.preventDefault(); + e.stopPropagation(); + + if (!isAuthenticated()) { + alert('Please log in to add items to cart'); + return; + } + + if (product.stock_quantity < 1) { + alert('This product is out of stock'); + return; + } + + setIsAddingToCart(true); + const result = await addToCart(product.id, 1); + + if (result.success) { + // Could show a toast notification here instead + alert(result.message || 'Product added to cart!'); + } else { + alert(result.message || 'Failed to add product to cart'); + } + + setIsAddingToCart(false); + }; + return ( - -
+
+ {/* Product Image and Info - Clickable Link */} +
-
+

{product.title} @@ -64,4 +99,19 @@

+ {/* Rating Display */} + {product.average_rating && product.average_rating > 0 && ( +
+ + + ({product.review_count || 0} reviews) + +
+ )} +
{product.category_name} @@ -69,6 +119,44 @@
+ + + {/* Add to Cart Section - Not part of the link */} +
+
+
+ {product.stock_quantity > 0 ? ( + + ✓ {product.stock_quantity} на залиха + + ) : ( + ✗ Нема на залиха + )} +
+ + {isAuthenticated() && ( + + )} +
- +
); }; Index: kupi-mk/frontend/src/components/ReviewForm.js =================================================================== --- kupi-mk/frontend/src/components/ReviewForm.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) +++ kupi-mk/frontend/src/components/ReviewForm.js (revision 737b1eda40c1dd27e47d79b1d5c1ff07d1dbdea8) @@ -0,0 +1,148 @@ +import React, { useState } from 'react'; +import { useAuth } from '../context/AuthContext'; +import StarRating from './StarRating'; +import api from '../services/api'; + +const ReviewForm = ({ productId, onReviewAdded, onCancel }) => { + const { user } = useAuth(); + const [formData, setFormData] = useState({ + rating: 0, + comment: '' + }); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + const handleSubmit = async (e) => { + e.preventDefault(); + + if (formData.rating === 0) { + setError('Please select a rating'); + return; + } + + if (!formData.comment.trim()) { + setError('Please write a comment'); + return; + } + + setLoading(true); + setError(null); + + try { + const response = await api.post('/reviews', { + product_id: productId, + rating: formData.rating, + comment: formData.comment.trim() + }); + + if (response.data.success) { + setFormData({ rating: 0, comment: '' }); + if (onReviewAdded) { + onReviewAdded(response.data.review); + } + } else { + setError(response.data.message || 'Failed to submit review'); + } + } catch (error) { + console.error('Error submitting review:', error); + setError('Failed to submit review. Please try again.'); + } finally { + setLoading(false); + } + }; + + const handleRatingChange = (rating) => { + setFormData(prev => ({ ...prev, rating })); + setError(null); + }; + + const handleCommentChange = (e) => { + setFormData(prev => ({ ...prev, comment: e.target.value })); + setError(null); + }; + + if (!user) { + return ( +
+

Please log in to write a review

+ + Log In + +
+ ); + } + + return ( +
+

Write a Review

+ +
+ {/* Rating */} +
+ + +
+ + {/* Comment */} +
+ +