Orders page
This commit is contained in:
lumijiez
6
src/Imprink.Application/Dtos/Orders/StatusDto.cs
Normal file
6
src/Imprink.Application/Dtos/Orders/StatusDto.cs
Normal file
@@ -0,0 +1,6 @@
|
||||
namespace Imprink.Application.Dtos;
|
||||
|
||||
public class StatusDto
|
||||
{
|
||||
|
||||
}
|
||||
615
ui/src/app/orders/page.tsx
Normal file
615
ui/src/app/orders/page.tsx
Normal file
@@ -0,0 +1,615 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Typography,
|
||||
Card,
|
||||
CardContent,
|
||||
Grid,
|
||||
Chip,
|
||||
Avatar,
|
||||
Skeleton,
|
||||
Alert,
|
||||
Paper,
|
||||
Divider,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
IconButton,
|
||||
Fade,
|
||||
Collapse,
|
||||
Button,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
ShoppingBag,
|
||||
LocalShipping,
|
||||
Close,
|
||||
ZoomIn,
|
||||
ExpandMore,
|
||||
ExpandLess,
|
||||
} from '@mui/icons-material';
|
||||
import clientApi from '@/lib/clientApi';
|
||||
|
||||
interface OrderStatus {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface ShippingStatus {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
sortOrder: number;
|
||||
isActive: boolean;
|
||||
parentCategoryId: string;
|
||||
createdAt: string;
|
||||
modifiedAt: string;
|
||||
}
|
||||
|
||||
interface Product {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
basePrice: number;
|
||||
isCustomizable: boolean;
|
||||
isActive: boolean;
|
||||
imageUrl: string;
|
||||
categoryId: string;
|
||||
category: Category;
|
||||
createdAt: string;
|
||||
modifiedAt: string;
|
||||
}
|
||||
|
||||
interface ProductVariant {
|
||||
id: string;
|
||||
productId: string;
|
||||
size: string;
|
||||
color: string;
|
||||
price: number;
|
||||
imageUrl: string;
|
||||
sku: string;
|
||||
stockQuantity: number;
|
||||
isActive: boolean;
|
||||
product: Product;
|
||||
createdAt: string;
|
||||
modifiedAt: string;
|
||||
}
|
||||
|
||||
interface OrderAddress {
|
||||
id: string;
|
||||
orderId: string;
|
||||
addressType: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
company: string;
|
||||
addressLine1: string;
|
||||
addressLine2: string;
|
||||
apartmentNumber: string;
|
||||
buildingNumber: string;
|
||||
floor: string;
|
||||
city: string;
|
||||
state: string;
|
||||
postalCode: string;
|
||||
country: string;
|
||||
phoneNumber: string;
|
||||
instructions: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface Order {
|
||||
id: string;
|
||||
userId: string;
|
||||
orderDate: string;
|
||||
amount: number;
|
||||
quantity: number;
|
||||
productId: string;
|
||||
productVariantId: string;
|
||||
orderStatusId: number;
|
||||
shippingStatusId: number;
|
||||
notes: string;
|
||||
merchantId: string;
|
||||
customizationImageUrl: string;
|
||||
originalImageUrls: string[];
|
||||
customizationDescription: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
orderStatus: OrderStatus;
|
||||
shippingStatus: ShippingStatus;
|
||||
orderAddress: OrderAddress;
|
||||
product: Product;
|
||||
productVariant: ProductVariant;
|
||||
}
|
||||
|
||||
const getStatusColor = (statusName: string) => {
|
||||
const normalizedStatus = statusName.toLowerCase();
|
||||
if (normalizedStatus.includes('pending') || normalizedStatus.includes('processing')) {
|
||||
return 'warning';
|
||||
}
|
||||
if (normalizedStatus.includes('completed') || normalizedStatus.includes('delivered')) {
|
||||
return 'success';
|
||||
}
|
||||
if (normalizedStatus.includes('cancelled') || normalizedStatus.includes('failed')) {
|
||||
return 'error';
|
||||
}
|
||||
return 'default';
|
||||
};
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
export default function OrdersPage() {
|
||||
const [orders, setOrders] = useState<Order[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [selectedImage, setSelectedImage] = useState<string | null>(null);
|
||||
const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
const fetchOrders = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await clientApi.get('/orders/user/me?includeDetails=true');
|
||||
console.log("Data", response.data);
|
||||
setOrders(response.data);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.message || err.message || 'Failed to fetch orders');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchOrders();
|
||||
}, []);
|
||||
|
||||
const handleImageClick = (imageUrl: string) => {
|
||||
setSelectedImage(imageUrl);
|
||||
};
|
||||
|
||||
const handleCloseImage = () => {
|
||||
setSelectedImage(null);
|
||||
};
|
||||
|
||||
const toggleOrderExpansion = (orderId: string) => {
|
||||
const newExpanded = new Set(expandedOrders);
|
||||
if (newExpanded.has(orderId)) {
|
||||
newExpanded.delete(orderId);
|
||||
} else {
|
||||
newExpanded.add(orderId);
|
||||
}
|
||||
setExpandedOrders(newExpanded);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Container maxWidth="lg" sx={{ py: 4 }}>
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
My Orders
|
||||
</Typography>
|
||||
<Grid container spacing={3}>
|
||||
{[...Array(3)].map((_, index) => (
|
||||
<Grid size={{ xs:12 }} key={index}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Grid container spacing={2}>
|
||||
<Grid size={{ xs:12, md:3 }}>
|
||||
<Skeleton variant="rectangular" height={200} />
|
||||
</Grid>
|
||||
<Grid size={{ xs:12, md:9 }}>
|
||||
<Skeleton variant="text" height={32} />
|
||||
<Skeleton variant="text" height={24} />
|
||||
<Skeleton variant="text" height={24} />
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Skeleton variant="rectangular" height={32} width={100} />
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Container maxWidth="lg" sx={{ py: 4 }}>
|
||||
<Alert severity="error" sx={{ mb: 3 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (orders.length === 0) {
|
||||
return (
|
||||
<Container maxWidth="lg" sx={{ py: 4 }}>
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
My Orders
|
||||
</Typography>
|
||||
<Paper sx={{ p: 4, textAlign: 'center' }}>
|
||||
<ShoppingBag sx={{ fontSize: 64, color: 'text.secondary', mb: 2 }} />
|
||||
<Typography variant="h6" color="text.secondary">
|
||||
No orders found
|
||||
</Typography>
|
||||
<Typography color="text.secondary">
|
||||
Your orders will appear here once you make a purchase.
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg" sx={{ py: 4 }}>
|
||||
<Typography variant="h4" component="h1" gutterBottom sx={{ mb: 4 }}>
|
||||
My Orders
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{orders.map((order) => {
|
||||
const isExpanded = expandedOrders.has(order.id);
|
||||
|
||||
return (
|
||||
<Grid size={{ xs:12 }} key={order.id}>
|
||||
<Card elevation={2}>
|
||||
<CardContent
|
||||
sx={{ p: 2, cursor: 'pointer' }}
|
||||
onClick={() => toggleOrderExpansion(order.id)}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" component="h3" sx={{ fontWeight: 600 }}>
|
||||
Order #{order.id.slice(-8).toUpperCase()}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{formatDate(order.orderDate)}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Chip
|
||||
icon={<ShoppingBag />}
|
||||
label={order.orderStatus.name}
|
||||
color={getStatusColor(order.orderStatus.name) as any}
|
||||
size="small"
|
||||
/>
|
||||
<Chip
|
||||
icon={<LocalShipping />}
|
||||
label={order.shippingStatus.name}
|
||||
color={getStatusColor(order.shippingStatus.name) as any}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Box sx={{ textAlign: 'right' }}>
|
||||
<Typography variant="h6" color="primary">
|
||||
{formatCurrency(order.amount)}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Qty: {order.quantity}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<IconButton size="small">
|
||||
{isExpanded ? <ExpandLess /> : <ExpandMore />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Collapse in={isExpanded}>
|
||||
<Box sx={{ px: 4, pb: 4, mt:2 }} >
|
||||
<Divider sx={{ mb: 3 }} />
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid size={{ xs:12, md:8 }}>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
<Avatar
|
||||
src={order.product.imageUrl}
|
||||
alt={order.product.name}
|
||||
sx={{ width: 80, height: 80 }}
|
||||
variant="rounded"
|
||||
/>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="h6">{order.product.name}</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
{order.product.description}
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
<strong>Variant:</strong> {order.productVariant.size} - {order.productVariant.color}
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
<strong>SKU:</strong> {order.productVariant.sku}
|
||||
</Typography>
|
||||
{order.customizationDescription && (
|
||||
<Typography variant="body2" sx={{ mt: 1 }}>
|
||||
<strong>Customization:</strong> {order.customizationDescription}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs:12, md:4 }}>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
Shipping Address
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{order.orderAddress.firstName} {order.orderAddress.lastName}
|
||||
<br />
|
||||
{order.orderAddress.company && (
|
||||
<>
|
||||
{order.orderAddress.company}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{order.orderAddress.addressLine1}
|
||||
<br />
|
||||
{order.orderAddress.addressLine2 && (
|
||||
<>
|
||||
{order.orderAddress.addressLine2}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{order.orderAddress.city}, {order.orderAddress.state} {order.orderAddress.postalCode}
|
||||
<br />
|
||||
{order.orderAddress.country}
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
||||
{(order.productVariant.imageUrl || order.customizationImageUrl || order.originalImageUrls.length > 0) && (
|
||||
<Grid size={{ xs:12 }}>
|
||||
<Divider sx={{ my: 2 }} />
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
Images
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
|
||||
{order.productVariant.imageUrl && (
|
||||
<Box>
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
Product Variant
|
||||
</Typography>
|
||||
<Paper
|
||||
elevation={1}
|
||||
sx={{
|
||||
p: 1,
|
||||
cursor: 'pointer',
|
||||
position: 'relative',
|
||||
}}
|
||||
onClick={() => handleImageClick(order.productVariant.imageUrl)}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={order.productVariant.imageUrl}
|
||||
alt="Product variant"
|
||||
sx={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
objectFit: 'cover',
|
||||
borderRadius: 1,
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 4,
|
||||
right: 4,
|
||||
bgcolor: 'rgba(0,0,0,0.5)',
|
||||
color: 'white',
|
||||
'&:hover': { bgcolor: 'rgba(0,0,0,0.7)' },
|
||||
}}
|
||||
>
|
||||
<ZoomIn fontSize="small" />
|
||||
</IconButton>
|
||||
</Paper>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{order.customizationImageUrl && (
|
||||
<Box>
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
Customized
|
||||
</Typography>
|
||||
<Paper
|
||||
elevation={1}
|
||||
sx={{
|
||||
p: 1,
|
||||
cursor: 'pointer',
|
||||
position: 'relative',
|
||||
}}
|
||||
onClick={() => handleImageClick(order.customizationImageUrl)}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={order.customizationImageUrl}
|
||||
alt="Customization"
|
||||
sx={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
objectFit: 'cover',
|
||||
borderRadius: 1,
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 4,
|
||||
right: 4,
|
||||
bgcolor: 'rgba(0,0,0,0.5)',
|
||||
color: 'white',
|
||||
'&:hover': { bgcolor: 'rgba(0,0,0,0.7)' },
|
||||
}}
|
||||
>
|
||||
<ZoomIn fontSize="small" />
|
||||
</IconButton>
|
||||
</Paper>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{order.originalImageUrls.length > 0 && (
|
||||
<Box>
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
Original Images ({order.originalImageUrls.length})
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||
{order.originalImageUrls.slice(0, 3).map((imageUrl, index) => (
|
||||
<Paper
|
||||
key={index}
|
||||
elevation={1}
|
||||
sx={{
|
||||
p: 1,
|
||||
cursor: 'pointer',
|
||||
position: 'relative',
|
||||
}}
|
||||
onClick={() => handleImageClick(imageUrl)}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={imageUrl}
|
||||
alt={`Original ${index + 1}`}
|
||||
sx={{
|
||||
width: 60,
|
||||
height: 60,
|
||||
objectFit: 'cover',
|
||||
borderRadius: 1,
|
||||
}}
|
||||
/>
|
||||
{index === 2 && order.originalImageUrls.length > 3 && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
bgcolor: 'rgba(0,0,0,0.7)',
|
||||
color: 'white',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
+{order.originalImageUrls.length - 3}
|
||||
</Box>
|
||||
)}
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 2,
|
||||
right: 2,
|
||||
bgcolor: 'rgba(0,0,0,0.5)',
|
||||
color: 'white',
|
||||
'&:hover': { bgcolor: 'rgba(0,0,0,0.7)' },
|
||||
}}
|
||||
>
|
||||
<ZoomIn sx={{ fontSize: 12 }} />
|
||||
</IconButton>
|
||||
</Paper>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{order.notes && (
|
||||
<Grid size={{ xs:12 }}>
|
||||
<Divider sx={{ my: 2 }} />
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
Notes
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{order.notes}
|
||||
</Typography>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
|
||||
<Dialog
|
||||
open={!!selectedImage}
|
||||
onClose={handleCloseImage}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: { bgcolor: 'transparent', boxShadow: 'none' }
|
||||
}}
|
||||
>
|
||||
<DialogContent sx={{ p: 0, position: 'relative' }}>
|
||||
<IconButton
|
||||
onClick={handleCloseImage}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 8,
|
||||
right: 8,
|
||||
bgcolor: 'rgba(0,0,0,0.5)',
|
||||
color: 'white',
|
||||
zIndex: 1,
|
||||
'&:hover': { bgcolor: 'rgba(0,0,0,0.7)' },
|
||||
}}
|
||||
>
|
||||
<Close />
|
||||
</IconButton>
|
||||
{selectedImage && (
|
||||
<Fade in={!!selectedImage}>
|
||||
<Box
|
||||
component="img"
|
||||
src={selectedImage}
|
||||
alt="Full size preview"
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
maxHeight: '90vh',
|
||||
objectFit: 'contain',
|
||||
borderRadius: 1,
|
||||
}}
|
||||
/>
|
||||
</Fade>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user