first commit
This commit is contained in:
459
app/admin/orders/[id]/page.tsx
Normal file
459
app/admin/orders/[id]/page.tsx
Normal file
@@ -0,0 +1,459 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Package,
|
||||
User,
|
||||
CreditCard,
|
||||
Truck,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Clock,
|
||||
MapPin,
|
||||
Phone,
|
||||
Mail
|
||||
} from 'lucide-react'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { toast } from 'sonner'
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface OrderItem {
|
||||
id: string
|
||||
quantity: number
|
||||
price: number
|
||||
product: {
|
||||
id: string
|
||||
name: string
|
||||
images: string[]
|
||||
sku: string
|
||||
price: number
|
||||
}
|
||||
}
|
||||
|
||||
interface ShippingAddress {
|
||||
firstName: string
|
||||
lastName: string
|
||||
company?: string | null
|
||||
address1: string
|
||||
address2?: string | null
|
||||
city: string
|
||||
state: string
|
||||
zipCode: string
|
||||
country: string
|
||||
phone?: string | null
|
||||
}
|
||||
|
||||
interface Order {
|
||||
id: string
|
||||
total: number
|
||||
status: 'PENDING' | 'PAID' | 'SHIPPED' | 'DELIVERED' | 'CANCELLED'
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
razorpayOrderId: string | null
|
||||
razorpayPaymentId: string | null
|
||||
shippingAddress: ShippingAddress | null
|
||||
user: {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
phone: string | null
|
||||
}
|
||||
orderItems: OrderItem[]
|
||||
}
|
||||
|
||||
const statusColors = {
|
||||
PENDING: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
||||
PAID: 'bg-blue-100 text-blue-800 border-blue-200',
|
||||
SHIPPED: 'bg-purple-100 text-purple-800 border-purple-200',
|
||||
DELIVERED: 'bg-green-100 text-green-800 border-green-200',
|
||||
CANCELLED: 'bg-red-100 text-red-800 border-red-200'
|
||||
}
|
||||
|
||||
const statusIcons = {
|
||||
PENDING: Clock,
|
||||
PAID: CreditCard,
|
||||
SHIPPED: Truck,
|
||||
DELIVERED: CheckCircle,
|
||||
CANCELLED: XCircle
|
||||
}
|
||||
|
||||
export default function AdminOrderDetail() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const [order, setOrder] = useState<Order | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [updating, setUpdating] = useState(false)
|
||||
|
||||
const orderId = params.id as string
|
||||
|
||||
const fetchOrder = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await fetch(`/api/admin/orders/${orderId}`)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch order')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
setOrder(data)
|
||||
} catch (error) {
|
||||
console.error('Error fetching order:', error)
|
||||
toast.error('Failed to load order details')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [orderId])
|
||||
|
||||
const updateOrderStatus = async (newStatus: string) => {
|
||||
try {
|
||||
setUpdating(true)
|
||||
const response = await fetch(`/api/admin/orders/${orderId}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update order status')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
setOrder(data)
|
||||
toast.success('Order status updated successfully')
|
||||
} catch (error) {
|
||||
console.error('Error updating order:', error)
|
||||
toast.error('Failed to update order status')
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (orderId) {
|
||||
fetchOrder()
|
||||
}
|
||||
}, [orderId, fetchOrder])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="animate-pulse space-y-6">
|
||||
<div className="h-8 bg-gray-200 rounded w-1/4"></div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<div className="h-96 bg-gray-200 rounded"></div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="h-48 bg-gray-200 rounded"></div>
|
||||
<div className="h-32 bg-gray-200 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!order) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Package className="h-12 w-12 text-gray-400 mb-4" />
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Order Not Found</h3>
|
||||
<p className="text-gray-600 mb-4">The order you're looking for doesn't exist.</p>
|
||||
<Link href="/admin/orders">
|
||||
<Button>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Orders
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const StatusIcon = statusIcons[order.status] || Clock
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="container mx-auto px-4 py-8"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link href="/admin/orders">
|
||||
<Button variant="outline" size="sm">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Orders
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Order #{order.id}</h1>
|
||||
<p className="text-gray-600">
|
||||
Placed on {new Date(order.createdAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className={statusColors[order.status]}>
|
||||
<StatusIcon className="h-4 w-4 mr-1" />
|
||||
{order.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Order Items */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<Package className="h-5 w-5 mr-2" />
|
||||
Order Items ({order.orderItems?.length || 0})
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{order.orderItems && order.orderItems.length > 0 ? (
|
||||
order.orderItems.map((item) => (
|
||||
<div key={item.id} className="flex items-center space-x-4 p-4 border rounded-lg bg-gray-50">
|
||||
<div className="w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center">
|
||||
{item.product?.images && item.product.images.length > 0 ? (
|
||||
<Image
|
||||
src={item.product.images[0]}
|
||||
alt={item.product.name || 'Product'}
|
||||
width={64}
|
||||
height={64}
|
||||
className="w-full h-full object-cover rounded-lg"
|
||||
/>
|
||||
) : (
|
||||
<Package className="h-8 w-8 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-gray-900">{item.product?.name || 'Unknown Product'}</h4>
|
||||
<p className="text-sm text-gray-600">SKU: {item.product?.sku || 'N/A'}</p>
|
||||
<div className="flex items-center space-x-4 mt-1">
|
||||
<span className="text-sm text-gray-600">Qty: {item.quantity}</span>
|
||||
<span className="text-sm text-gray-600">Price: ₹{item.price.toFixed(2)} each</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-semibold text-gray-900">
|
||||
₹{(item.price * item.quantity).toFixed(2)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{item.quantity} × ₹{item.price.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<Package className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<p className="text-gray-500">No items found in this order</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-lg font-semibold">Total Amount:</span>
|
||||
<span className="text-xl font-bold text-green-600">₹{order.total?.toFixed(2) || '0.00'}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Order Details Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Order Actions */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Order Actions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700 mb-2 block">
|
||||
Update Order Status
|
||||
</label>
|
||||
<Select
|
||||
value={order.status}
|
||||
onValueChange={(value) => updateOrderStatus(value)}
|
||||
disabled={updating}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="PENDING">
|
||||
<div className="flex items-center">
|
||||
<Clock className="h-4 w-4 mr-2 text-yellow-600" />
|
||||
Pending
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="PAID">
|
||||
<div className="flex items-center">
|
||||
<CreditCard className="h-4 w-4 mr-2 text-blue-600" />
|
||||
Paid
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="SHIPPED">
|
||||
<div className="flex items-center">
|
||||
<Truck className="h-4 w-4 mr-2 text-purple-600" />
|
||||
Shipped
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="DELIVERED">
|
||||
<div className="flex items-center">
|
||||
<CheckCircle className="h-4 w-4 mr-2 text-green-600" />
|
||||
Delivered
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="CANCELLED">
|
||||
<div className="flex items-center">
|
||||
<XCircle className="h-4 w-4 mr-2 text-red-600" />
|
||||
Cancelled
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{updating && (
|
||||
<div className="text-sm text-gray-500 flex items-center">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900 mr-2"></div>
|
||||
Updating order status...
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Customer Information */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<User className="h-5 w-5 mr-2" />
|
||||
Customer Information
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<User className="h-4 w-4 text-gray-500" />
|
||||
<span>{order.user?.name || 'Unknown User'}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Mail className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-sm">{order.user?.email || 'No email'}</span>
|
||||
</div>
|
||||
{order.user?.phone && (
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone className="h-4 w-4 text-gray-500" />
|
||||
<span>{order.user.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Shipping Information */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<MapPin className="h-5 w-5 mr-2" />
|
||||
Shipping Address
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{order.shippingAddress ? (
|
||||
<div className="space-y-2">
|
||||
<p className="font-semibold">
|
||||
{order.shippingAddress.firstName} {order.shippingAddress.lastName}
|
||||
</p>
|
||||
{order.shippingAddress.company && (
|
||||
<p className="text-sm text-gray-600">{order.shippingAddress.company}</p>
|
||||
)}
|
||||
<p className="text-sm">{order.shippingAddress.address1}</p>
|
||||
{order.shippingAddress.address2 && (
|
||||
<p className="text-sm">{order.shippingAddress.address2}</p>
|
||||
)}
|
||||
<p className="text-sm">
|
||||
{order.shippingAddress.city}, {order.shippingAddress.state} {order.shippingAddress.zipCode}
|
||||
</p>
|
||||
<p className="text-sm">{order.shippingAddress.country}</p>
|
||||
{order.shippingAddress.phone && (
|
||||
<p className="text-sm flex items-center mt-2">
|
||||
<Phone className="h-4 w-4 mr-1" />
|
||||
{order.shippingAddress.phone}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-500">No shipping address provided</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Payment Information */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<CreditCard className="h-5 w-5 mr-2" />
|
||||
Payment Information
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Payment Status:</span>
|
||||
<Badge className={`ml-2 ${statusColors[order.status]}`}>
|
||||
{order.status}
|
||||
</Badge>
|
||||
</div>
|
||||
{order.razorpayOrderId && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Razorpay Order ID:</span>
|
||||
<p className="text-sm font-mono bg-gray-50 p-2 rounded mt-1">{order.razorpayOrderId}</p>
|
||||
</div>
|
||||
)}
|
||||
{order.razorpayPaymentId && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Payment ID:</span>
|
||||
<p className="text-sm font-mono bg-gray-50 p-2 rounded mt-1">{order.razorpayPaymentId}</p>
|
||||
</div>
|
||||
)}
|
||||
<Separator />
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Total Amount:</span>
|
||||
<p className="text-lg font-bold text-green-600">₹{order.total?.toFixed(2) || '0.00'}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
484
app/admin/orders/page.tsx
Normal file
484
app/admin/orders/page.tsx
Normal file
@@ -0,0 +1,484 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Search, Download, MoreHorizontal, Eye, Package, Truck, CheckCircle, XCircle, Clock, CreditCard, Filter } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
interface Order {
|
||||
id: string
|
||||
total: number
|
||||
status: 'PENDING' | 'PAID' | 'SHIPPED' | 'DELIVERED' | 'CANCELLED'
|
||||
createdAt: string
|
||||
razorpayOrderId: string | null
|
||||
razorpayPaymentId: string | null
|
||||
user: {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
}
|
||||
orderItems: {
|
||||
id: string
|
||||
quantity: number
|
||||
price: number
|
||||
product: {
|
||||
id: string
|
||||
name: string
|
||||
images: string[]
|
||||
}
|
||||
}[]
|
||||
}
|
||||
|
||||
const statusConfig = {
|
||||
PENDING: {
|
||||
label: 'Pending',
|
||||
color: 'bg-gradient-to-r from-yellow-400 to-orange-500',
|
||||
icon: Clock,
|
||||
description: 'Awaiting payment'
|
||||
},
|
||||
PAID: {
|
||||
label: 'Paid',
|
||||
color: 'bg-gradient-to-r from-blue-500 to-indigo-600',
|
||||
icon: CreditCard,
|
||||
description: 'Payment confirmed'
|
||||
},
|
||||
SHIPPED: {
|
||||
label: 'Shipped',
|
||||
color: 'bg-gradient-to-r from-purple-500 to-pink-600',
|
||||
icon: Truck,
|
||||
description: 'Order shipped'
|
||||
},
|
||||
DELIVERED: {
|
||||
label: 'Delivered',
|
||||
color: 'bg-gradient-to-r from-green-500 to-emerald-600',
|
||||
icon: CheckCircle,
|
||||
description: 'Successfully delivered'
|
||||
},
|
||||
CANCELLED: {
|
||||
label: 'Cancelled',
|
||||
color: 'bg-gradient-to-r from-red-500 to-pink-600',
|
||||
icon: XCircle,
|
||||
description: 'Order cancelled'
|
||||
}
|
||||
}
|
||||
|
||||
export default function AdminOrdersPage() {
|
||||
const [orders, setOrders] = useState<Order[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [search, setSearch] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState('all')
|
||||
const [selectedOrders, setSelectedOrders] = useState<string[]>([])
|
||||
const [bulkActionLoading, setBulkActionLoading] = useState(false)
|
||||
|
||||
const fetchOrders = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const params = new URLSearchParams()
|
||||
|
||||
if (search) params.append('search', search)
|
||||
if (statusFilter && statusFilter !== 'all') params.append('status', statusFilter)
|
||||
|
||||
const response = await fetch(`/api/admin/orders?${params}`)
|
||||
const data = await response.json()
|
||||
setOrders(data || [])
|
||||
} catch (error) {
|
||||
console.error('Error fetching orders:', error)
|
||||
toast.error('Failed to load orders')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [search, statusFilter])
|
||||
|
||||
useEffect(() => {
|
||||
fetchOrders()
|
||||
}, [fetchOrders])
|
||||
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedOrders(orders.map(o => o.id))
|
||||
} else {
|
||||
setSelectedOrders([])
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelectOrder = (orderId: string, checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedOrders(prev => [...prev, orderId])
|
||||
} else {
|
||||
setSelectedOrders(prev => prev.filter(id => id !== orderId))
|
||||
}
|
||||
}
|
||||
|
||||
const handleBulkStatusUpdate = async (newStatus: string) => {
|
||||
if (selectedOrders.length === 0) {
|
||||
toast.error('Please select at least one order')
|
||||
return
|
||||
}
|
||||
|
||||
setBulkActionLoading(true)
|
||||
try {
|
||||
const response = await fetch('/api/admin/orders/bulk', {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
orderIds: selectedOrders,
|
||||
status: newStatus
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Bulk update failed')
|
||||
|
||||
toast.success(`Successfully updated ${selectedOrders.length} orders`)
|
||||
setSelectedOrders([])
|
||||
fetchOrders()
|
||||
} catch (error) {
|
||||
toast.error('Failed to update orders')
|
||||
} finally {
|
||||
setBulkActionLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleStatusUpdate = async (orderId: string, newStatus: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/admin/orders/${orderId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: newStatus })
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Status update failed')
|
||||
|
||||
toast.success('Order status updated successfully')
|
||||
fetchOrders()
|
||||
} catch (error) {
|
||||
toast.error('Failed to update order status')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 p-6">
|
||||
<div className="max-w-7xl mx-auto space-y-8">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6"
|
||||
>
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
|
||||
Orders Management
|
||||
</h1>
|
||||
<p className="text-gray-600 mt-2">Manage customer orders and track shipments</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button variant="outline" size="sm" className="bg-white shadow-md hover:shadow-lg transition-shadow">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export Data
|
||||
</Button>
|
||||
<Button className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg">
|
||||
<Filter className="h-4 w-4 mr-2" />
|
||||
Advanced Filters
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6"
|
||||
>
|
||||
{Object.entries(statusConfig).map(([status, config], index) => {
|
||||
const StatusIcon = config.icon
|
||||
const count = orders.filter(order => order.status === status).length
|
||||
return (
|
||||
<Card key={status} className="bg-white/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-xl transition-all duration-300">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">{config.label}</p>
|
||||
<p className="text-2xl font-bold text-gray-900">{count}</p>
|
||||
</div>
|
||||
<div className={`w-12 h-12 ${config.color} rounded-xl flex items-center justify-center shadow-lg`}>
|
||||
<StatusIcon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2">{config.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</motion.div>
|
||||
|
||||
{/* Main Orders Table */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Card className="bg-white/90 backdrop-blur-sm border-0 shadow-xl">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
|
||||
<CardTitle className="text-2xl font-bold">All Orders</CardTitle>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{selectedOrders.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="flex items-center space-x-3 bg-blue-50 px-4 py-2 rounded-lg border border-blue-200"
|
||||
>
|
||||
<span className="text-sm font-medium text-blue-700">
|
||||
{selectedOrders.length} selected
|
||||
</span>
|
||||
<Select onValueChange={handleBulkStatusUpdate}>
|
||||
<SelectTrigger className="w-40 bg-white">
|
||||
<SelectValue placeholder="Update Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="PAID">Mark as Paid</SelectItem>
|
||||
<SelectItem value="SHIPPED">Mark as Shipped</SelectItem>
|
||||
<SelectItem value="DELIVERED">Mark as Delivered</SelectItem>
|
||||
<SelectItem value="CANCELLED">Mark as Cancelled</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</motion.div>
|
||||
)}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Search orders, customers..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10 w-64 bg-white shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-40 bg-white shadow-sm">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Status</SelectItem>
|
||||
<SelectItem value="PENDING">Pending</SelectItem>
|
||||
<SelectItem value="PAID">Paid</SelectItem>
|
||||
<SelectItem value="SHIPPED">Shipped</SelectItem>
|
||||
<SelectItem value="DELIVERED">Delivered</SelectItem>
|
||||
<SelectItem value="CANCELLED">Cancelled</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="relative">
|
||||
<div className="w-16 h-16 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
<div className="w-10 h-10 border-4 border-gray-100 border-t-purple-500 rounded-full animate-spin absolute top-1 left-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-lg border border-gray-200">
|
||||
<Table>
|
||||
<TableHeader className="bg-gray-50">
|
||||
<TableRow>
|
||||
<TableHead className="w-12">
|
||||
<Checkbox
|
||||
checked={selectedOrders.length === orders.length && orders.length > 0}
|
||||
onCheckedChange={handleSelectAll}
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead className="font-semibold">Order</TableHead>
|
||||
<TableHead className="font-semibold">Customer</TableHead>
|
||||
<TableHead className="font-semibold">Items</TableHead>
|
||||
<TableHead className="font-semibold">Total</TableHead>
|
||||
<TableHead className="font-semibold">Status</TableHead>
|
||||
<TableHead className="font-semibold">Date</TableHead>
|
||||
<TableHead className="font-semibold">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{orders.map((order, index) => {
|
||||
const StatusIcon = statusConfig[order.status].icon
|
||||
return (
|
||||
<motion.tr
|
||||
key={order.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedOrders.includes(order.id)}
|
||||
onCheckedChange={(checked) => handleSelectOrder(order.id, !!checked)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="space-y-1">
|
||||
<p className="font-semibold text-gray-900">#{order.id.slice(-8)}</p>
|
||||
{order.razorpayOrderId && (
|
||||
<p className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
|
||||
Razorpay: {order.razorpayOrderId.slice(-8)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-sm font-medium">
|
||||
{order.user.name?.charAt(0) || 'U'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{order.user.name}</p>
|
||||
<p className="text-sm text-gray-500">{order.user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="space-y-1">
|
||||
{order.orderItems.slice(0, 2).map((item) => (
|
||||
<div key={item.id} className="text-sm">
|
||||
<span className="font-medium">{item.quantity}x</span>{' '}
|
||||
<span className="text-gray-600">{item.product.name}</span>
|
||||
</div>
|
||||
))}
|
||||
{order.orderItems.length > 2 && (
|
||||
<p className="text-xs text-blue-600 font-medium">
|
||||
+{order.orderItems.length - 2} more items
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-bold text-lg bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
|
||||
₹{order.total.toFixed(2)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={`${statusConfig[order.status].color} text-white shadow-md`}>
|
||||
<StatusIcon className="h-3 w-3 mr-1" />
|
||||
{statusConfig[order.status].label}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm">
|
||||
<p className="font-medium text-gray-900">
|
||||
{new Date(order.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
<p className="text-gray-500">
|
||||
{new Date(order.createdAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="hover:bg-gray-100">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/admin/orders/${order.id}`} className="flex items-center">
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
View Details
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
{order.status === 'PENDING' && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleStatusUpdate(order.id, 'PAID')}
|
||||
className="text-blue-600"
|
||||
>
|
||||
<CreditCard className="h-4 w-4 mr-2" />
|
||||
Mark as Paid
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{order.status === 'PAID' && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleStatusUpdate(order.id, 'SHIPPED')}
|
||||
className="text-purple-600"
|
||||
>
|
||||
<Truck className="h-4 w-4 mr-2" />
|
||||
Mark as Shipped
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{order.status === 'SHIPPED' && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleStatusUpdate(order.id, 'DELIVERED')}
|
||||
className="text-green-600"
|
||||
>
|
||||
<Package className="h-4 w-4 mr-2" />
|
||||
Mark as Delivered
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{['PENDING', 'PAID'].includes(order.status) && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleStatusUpdate(order.id, 'CANCELLED')}
|
||||
className="text-red-600"
|
||||
>
|
||||
<XCircle className="h-4 w-4 mr-2" />
|
||||
Cancel Order
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</motion.tr>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && orders.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Package className="h-10 w-10 text-gray-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No orders found</h3>
|
||||
<p className="text-gray-500">Try adjusting your search or filter criteria</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user