Cleanup
This commit is contained in:
NotII
@@ -24,7 +24,7 @@ import {
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Clipboard, Truck, Package, ArrowRight } from "lucide-react";
|
||||
import { Clipboard, Truck, Package, ArrowRight, ChevronDown } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
@@ -38,6 +38,12 @@ import {
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import Layout from "@/components/layout/layout";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
|
||||
interface Order {
|
||||
orderId: string;
|
||||
@@ -58,16 +64,20 @@ interface Order {
|
||||
|
||||
const getStatusVariant = (status: string) => {
|
||||
switch (status) {
|
||||
case 'acknowledged':
|
||||
return 'secondary';
|
||||
case 'paid':
|
||||
return 'paid';
|
||||
return 'default';
|
||||
case 'shipped':
|
||||
return 'shipped';
|
||||
return 'default';
|
||||
case 'completed':
|
||||
return 'completed';
|
||||
return 'default';
|
||||
case 'cancelled':
|
||||
return 'destructive';
|
||||
case 'unpaid':
|
||||
return 'secondary';
|
||||
default:
|
||||
return 'unpaid';
|
||||
return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -87,6 +97,7 @@ export default function OrderDetailsPage() {
|
||||
const [currentOrderNumber, setCurrentOrderNumber] = useState(0);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [isAcknowledging, setIsAcknowledging] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
@@ -177,9 +188,9 @@ export default function OrderDetailsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDiscardOrder = async () => {
|
||||
const handleMarkAsAcknowledged = async () => {
|
||||
try {
|
||||
setIsDiscarding(true);
|
||||
setIsAcknowledging(true);
|
||||
const authToken = document.cookie.split("Authorization=")[1];
|
||||
const response = await fetchData(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`,
|
||||
@@ -189,19 +200,47 @@ export default function OrderDetailsPage() {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
},
|
||||
body: JSON.stringify({ status: "cancelled" }),
|
||||
body: JSON.stringify({ status: "acknowledged" }),
|
||||
}
|
||||
);
|
||||
|
||||
if (response && response.message === "Order status updated successfully") {
|
||||
setOrder((prevOrder) => prevOrder ? { ...prevOrder, status: "cancelled" } : null);
|
||||
toast.success("Order discarded successfully!");
|
||||
setOrder((prevOrder) => prevOrder ? { ...prevOrder, status: "acknowledged" } : null);
|
||||
toast.success("Order marked as acknowledged!");
|
||||
} else {
|
||||
throw new Error(response.error || "Failed to discard order");
|
||||
throw new Error(response.error || "Failed to mark order as acknowledged");
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Failed to discard order:", error);
|
||||
toast.error(error.message || "Failed to discard order");
|
||||
console.error("Failed to mark order as acknowledged:", error);
|
||||
toast.error(error.message || "Failed to mark order as acknowledged");
|
||||
} finally {
|
||||
setIsAcknowledging(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDiscardOrder = async () => {
|
||||
try {
|
||||
setIsDiscarding(true);
|
||||
const authToken = document.cookie.split("Authorization=")[1];
|
||||
const response = await fetchData(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/orders/${orderId}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response && response.message === "Order deleted successfully") {
|
||||
toast.success("Order deleted successfully!");
|
||||
router.push('/dashboard/orders');
|
||||
} else {
|
||||
throw new Error(response.error || "Failed to delete order");
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Failed to delete order:", error);
|
||||
toast.error(error.message || "Failed to delete order");
|
||||
} finally {
|
||||
setIsDiscarding(false);
|
||||
}
|
||||
@@ -345,235 +384,281 @@ export default function OrderDetailsPage() {
|
||||
};
|
||||
|
||||
if (loading)
|
||||
return <div className="text-center py-10">Loading order details...</div>;
|
||||
return (
|
||||
<Layout>
|
||||
<div className="text-center py-10">Loading order details...</div>
|
||||
</Layout>
|
||||
);
|
||||
if (error)
|
||||
return <div className="text-center text-red-500 py-10">Error: {error}</div>;
|
||||
return (
|
||||
<Layout>
|
||||
<div className="text-center text-red-500 py-10">Error: {error}</div>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">Order Details: {order?.orderId}</h1>
|
||||
<Layout>
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">Order Details: {order?.orderId}</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant={getStatusVariant(order?.status || '')}
|
||||
className={`${
|
||||
order?.status === 'acknowledged'
|
||||
? '!bg-purple-600 hover:!bg-purple-700 text-white'
|
||||
: order?.status === 'paid'
|
||||
? 'bg-emerald-600 hover:bg-emerald-700 text-white'
|
||||
: order?.status === 'shipped'
|
||||
? 'bg-blue-600 hover:bg-blue-700 text-white'
|
||||
: order?.status === 'completed'
|
||||
? 'bg-green-600 hover:bg-green-700 text-white'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{order?.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Navigation - Moved to top */}
|
||||
<div className="flex justify-between items-center border-b pb-4">
|
||||
<div className="w-[140px]">
|
||||
{nextOrderId && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
router.push(`/dashboard/orders/${nextOrderId}`);
|
||||
}}
|
||||
className="flex items-center"
|
||||
>
|
||||
<span className="mr-2">←</span>
|
||||
Older
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
Navigate Orders
|
||||
</div>
|
||||
<div className="w-[140px] flex justify-end">
|
||||
{prevOrderId && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
router.push(`/dashboard/orders/${prevOrderId}`);
|
||||
}}
|
||||
className="flex items-center"
|
||||
>
|
||||
Newer
|
||||
<span className="ml-2">→</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>PGP Encrypted Address</CardTitle>
|
||||
<CardDescription>
|
||||
Securely encrypted delivery address
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Textarea
|
||||
value={order?.pgpAddress || ""}
|
||||
readOnly
|
||||
className="font-mono text-xs"
|
||||
rows={10}
|
||||
/>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => copyToClipboard(order?.pgpAddress || "")}
|
||||
>
|
||||
<Clipboard className="w-4 h-4 mr-2" />
|
||||
Copy to Clipboard
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Shipping Information</CardTitle>
|
||||
<CardDescription>
|
||||
Shipping method and tracking details
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Shipping Method</Label>
|
||||
<div className="text-sm text-gray-700 dark:text-gray-300 font-medium">
|
||||
{order?.shippingMethod.type} - £
|
||||
{order?.shippingMethod.price.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tracking">Tracking Number</Label>
|
||||
<Input
|
||||
id="tracking"
|
||||
value={trackingNumber}
|
||||
onChange={(e) => setTrackingNumber(e.target.value)}
|
||||
placeholder="Enter tracking number"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
onClick={handleAddTracking}
|
||||
disabled={isSending || !trackingNumber.trim()}
|
||||
>
|
||||
<Package className="w-4 h-4 mr-2" />
|
||||
{isSending ? "Updating..." : "Update Tracking"}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={getStatusVariant(order?.status || '')}>
|
||||
{order?.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>PGP Encrypted Address</CardTitle>
|
||||
<CardDescription>
|
||||
Securely encrypted delivery address
|
||||
</CardDescription>
|
||||
<CardTitle>Order Items</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Textarea
|
||||
value={order?.pgpAddress || ""}
|
||||
readOnly
|
||||
className="font-mono text-xs"
|
||||
rows={10}
|
||||
/>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => copyToClipboard(order?.pgpAddress || "")}
|
||||
>
|
||||
<Clipboard className="w-4 h-4 mr-2" />
|
||||
Copy to Clipboard
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Shipping Information</CardTitle>
|
||||
<CardDescription>
|
||||
Shipping method and tracking details
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Shipping Method</Label>
|
||||
<div className="text-sm text-gray-700 dark:text-gray-300 font-medium">
|
||||
{order?.shippingMethod.type} - £
|
||||
{order?.shippingMethod.price.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tracking">Tracking Number</Label>
|
||||
<Input
|
||||
id="tracking"
|
||||
value={trackingNumber}
|
||||
onChange={(e) => setTrackingNumber(e.target.value)}
|
||||
placeholder="Enter tracking number"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
onClick={handleAddTracking}
|
||||
disabled={isSending || !trackingNumber.trim()}
|
||||
>
|
||||
<Package className="w-4 h-4 mr-2" />
|
||||
{isSending ? "Updating..." : "Update Tracking"}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Order Items</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Item</TableHead>
|
||||
<TableHead>Quantity</TableHead>
|
||||
<TableHead>Price</TableHead>
|
||||
<TableHead>Total</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{order?.products.map((product) => (
|
||||
<TableRow key={product._id}>
|
||||
<TableCell>
|
||||
{productNames[product.productId] || "Loading..."}
|
||||
</TableCell>
|
||||
<TableCell>{product.quantity}</TableCell>
|
||||
<TableCell>£{product.pricePerUnit.toFixed(2)}</TableCell>
|
||||
<TableCell>£{product.totalItemPrice.toFixed(2)}</TableCell>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Item</TableHead>
|
||||
<TableHead>Quantity</TableHead>
|
||||
<TableHead>Price</TableHead>
|
||||
<TableHead>Total</TableHead>
|
||||
</TableRow>
|
||||
))}
|
||||
<TableRow>
|
||||
<TableCell colSpan={3} className="font-bold text-right">
|
||||
Total:
|
||||
</TableCell>
|
||||
<TableCell className="font-bold">
|
||||
£{order?.totalPrice.toFixed(2)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{order?.products.map((product) => (
|
||||
<TableRow key={product._id}>
|
||||
<TableCell>
|
||||
{productNames[product.productId] || "Loading..."}
|
||||
</TableCell>
|
||||
<TableCell>{product.quantity}</TableCell>
|
||||
<TableCell>£{product.pricePerUnit.toFixed(2)}</TableCell>
|
||||
<TableCell>£{product.totalItemPrice.toFixed(2)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
<TableRow>
|
||||
<TableCell colSpan={3} className="font-bold text-right">
|
||||
Total:
|
||||
</TableCell>
|
||||
<TableCell className="font-bold">
|
||||
£{order?.totalPrice.toFixed(2)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Add Crypto Transaction Details */}
|
||||
<div className="rounded-lg border bg-card text-card-foreground shadow-sm">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Crypto Transactions</h3>
|
||||
{order?.txid && order.txid.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{order.txid.slice(order.txid.length > 2 ? 1 : 0).map((txid: string, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-3 bg-muted rounded-md"
|
||||
>
|
||||
<code className="text-sm">{txid}</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted-foreground">No crypto transactions associated with this order</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Add Crypto Transaction Details */}
|
||||
<Collapsible>
|
||||
<div className="rounded-lg border bg-card text-card-foreground shadow-sm">
|
||||
<CollapsibleTrigger className="w-full">
|
||||
<div className="p-6 flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">Crypto Transactions</h3>
|
||||
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 [&[data-state=open]]:rotate-180" />
|
||||
</div>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="px-6 pb-6">
|
||||
{order?.txid && order.txid.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{order.txid.slice(order.txid.length > 2 ? 1 : 0).map((txid: string, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-3 bg-muted rounded-md"
|
||||
>
|
||||
<code className="text-sm break-all">{txid}</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted-foreground">No crypto transactions associated with this order</p>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</div>
|
||||
</Collapsible>
|
||||
|
||||
<div className="flex justify-between gap-4 mt-4">
|
||||
<div>
|
||||
{order?.status !== "cancelled" && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="destructive" size="lg" disabled={isDiscarding}>
|
||||
{isDiscarding ? "Discarding..." : "Discard Order"}
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This action will discard the order and cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDiscardOrder}>
|
||||
Discard Order
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
{order?.status === "unpaid" && (
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={handleMarkAsPaid}
|
||||
disabled={isPaid}
|
||||
className="bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
{isPaid ? "Order Marked as Paid" : "Mark Order as Paid"}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{order?.status === "paid" && (
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={handleMarkAsShipped}
|
||||
disabled={isMarkingShipped}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
<Truck className="w-5 h-5 mr-2" />
|
||||
{isMarkingShipped ? "Updating..." : "Mark as Shipped"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4">
|
||||
<div>
|
||||
{order?.status !== "cancelled" && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="destructive" size="lg" disabled={isDiscarding}>
|
||||
{isDiscarding ? "Deleting..." : "Delete Order"}
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This action will permanently delete the order and cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDiscardOrder}>
|
||||
Delete Order
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
{(order?.status === "unpaid" || order?.status === "paid") && (
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={handleMarkAsAcknowledged}
|
||||
disabled={isAcknowledging}
|
||||
className="bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
{isAcknowledging ? "Updating..." : "Mark as Acknowledged"}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Order Navigation */}
|
||||
<div className="flex justify-between items-center pt-8 mt-8 border-t">
|
||||
<div className="w-[140px]">
|
||||
{prevOrderId && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
router.push(`/dashboard/orders/${prevOrderId}`);
|
||||
}}
|
||||
className="flex items-center"
|
||||
>
|
||||
<span className="mr-2">←</span>
|
||||
Newer
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-[140px] flex justify-end">
|
||||
{nextOrderId && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
router.push(`/dashboard/orders/${nextOrderId}`);
|
||||
}}
|
||||
className="flex items-center"
|
||||
>
|
||||
Older
|
||||
<span className="ml-2">→</span>
|
||||
</Button>
|
||||
)}
|
||||
{(order?.status === "unpaid" || order?.status === "acknowledged") && (
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={handleMarkAsPaid}
|
||||
disabled={isPaid}
|
||||
className="bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
{isPaid ? "Order Marked as Paid" : "Mark Order as Paid"}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{order?.status === "paid" && (
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={handleMarkAsShipped}
|
||||
disabled={isMarkingShipped}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
<Truck className="w-5 h-5 mr-2" />
|
||||
{isMarkingShipped ? "Updating..." : "Mark as Shipped"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user