Skip to content

Commit 4bc34ce

Browse files
rabbit-top-dev-212rabbit-top-dev-212
committed
Orders
[ADMIN] - modificated the way of data is shown at Orders Page - changed Order Details page [TBC - workspace change]
1 parent 44e8a2c commit 4bc34ce

File tree

6 files changed

+280
-100
lines changed

6 files changed

+280
-100
lines changed

‎ecommerce-admin/app/(dashboard)/[storeId]/(routes)/orders/[orderId]/components/order-form.tsx‎

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import axios from "axios";
55
import { useState } from "react";
66
import { useParams, useRouter } from "next/navigation";
77
import { toast } from "react-hot-toast";
8-
import { Order, OrderItem } from "@prisma/client";
8+
import { Order, OrderItem, Product } from "@prisma/client";
99
import { Trash } from "lucide-react";
1010
import { useForm, useFieldArray } from "react-hook-form";
1111
import { zodResolver } from "@hookform/resolvers/zod";
@@ -42,10 +42,9 @@ export const OrderForm: React.FC<OrderFormProps> = ({ initialData }) => {
4242
const [open, setOpen] = useState(false);
4343
const [loading, setLoading] = useState(false);
4444

45-
const title = initialData ? "Edit order" : "Create order";
46-
const description = initialData ? "Edit order" : "Add a new order";
45+
const title = initialData && "Order details";
46+
const description = initialData && "More information about specific order";
4747
const toastMessage = initialData ? "Order updated." : "Order created.";
48-
const action = initialData ? "Save changes" : "Create";
4948

5049
const form = useForm<OrderFormValues>({
5150
resolver: zodResolver(formSchema),
@@ -91,8 +90,17 @@ export const OrderForm: React.FC<OrderFormProps> = ({ initialData }) => {
9190
}
9291
};
9392

93+
//TODO: - function that fetch data for a dedicated product and variant
94+
// const URL = `http://localhost:3000/api/${initialData.storeId}/products`;
95+
96+
// const getProduct = async (id: string): Promise<Product> => {
97+
// const res = await fetch(`${URL}/${id}`);
98+
99+
// return res.json();
100+
// };
101+
94102
return (
95-
<div>
103+
<div className="container px-4 mx-auto">
96104
<AlertModal
97105
isOpen={open}
98106
onClose={() => setOpen(false)}
@@ -114,15 +122,33 @@ export const OrderForm: React.FC<OrderFormProps> = ({ initialData }) => {
114122
</div>
115123
<Separator />
116124

117-
<h3>Order Details</h3>
118-
<div>
119-
<strong>Phone:</strong> {initialData.phone}
120-
</div>
121-
<div>
122-
<strong>Address:</strong> {initialData.address}
123-
</div>
124-
<div>
125-
<strong>Is Paid:</strong> {initialData.isPaid ? "Yes" : "No"}
125+
<h3 className="pt-4 text-xl font-bold">Order ID: {initialData.id}</h3>
126+
<div className="p-2 mb-4 overflow-hidden shadow sm:rounded-lg">
127+
<div className="mb-2">
128+
<strong className="text-gray-700">Phone:</strong> {initialData.phone}
129+
</div>
130+
<div className="mb-2">
131+
<strong className="text-gray-700">Address:</strong>{" "}
132+
{initialData.address}
133+
</div>
134+
<div className="mb-2">
135+
<strong className="text-gray-700">Is Paid:</strong>{" "}
136+
{initialData.isPaid ? "Yes" : "No"}
137+
</div>
138+
<div>
139+
<strong className="text-gray-700">Variants:</strong>
140+
<div className="pl-6">
141+
<>
142+
{initialData.orderItems.map((variant, i) => (
143+
<>
144+
<div key={i} className="mb-1">
145+
{variant.variantId} x {variant.quantity}
146+
</div>
147+
</>
148+
))}
149+
</>
150+
</div>
151+
</div>
126152
</div>
127153
</div>
128154
);

‎ecommerce-admin/app/(dashboard)/[storeId]/(routes)/orders/components/columns.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
import { ColumnDef } from "@tanstack/react-table";
44
import { CellAction } from "./cell-action";
5+
import { ArrowUpDown, MoreHorizontal } from "lucide-react";
6+
import { Button } from "@/components/ui/button";
57

68
export type OrderColumn = {
79
id: string;
@@ -15,18 +17,63 @@ export type OrderColumn = {
1517
quantity: string;
1618
};
1719

20+
//TODO - for isSent:
21+
// header: ({ column }) => {
22+
// return (
23+
// <Button
24+
// variant="ghost"
25+
// onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
26+
// >
27+
// Products
28+
// <ArrowUpDown className="w-4 h-4 ml-2" />
29+
// </Button>
30+
// );
31+
// },
32+
1833
export const columns: ColumnDef<OrderColumn>[] = [
1934
{
2035
accessorKey: "products",
2136
header: "Products",
37+
cell: ({ row }) => {
38+
const cellValue = JSON.parse(row.getValue("products")) as string[];
39+
return (
40+
<>
41+
{cellValue.map((product, index) => (
42+
<div key={index}>
43+
{index + 1}. {product}
44+
</div>
45+
))}
46+
</>
47+
);
48+
},
2249
},
2350
{
2451
accessorKey: "variants",
2552
header: "Variants",
53+
cell: ({ row }) => {
54+
const cellValue = JSON.parse(row.getValue("variants")) as string[];
55+
return (
56+
<>
57+
{cellValue.map((variant, index) => (
58+
<div key={index}>{variant}</div>
59+
))}
60+
</>
61+
);
62+
},
2663
},
2764
{
2865
accessorKey: "quantity",
2966
header: "Quantity",
67+
cell: ({ row }) => {
68+
const cellValue = JSON.parse(row.getValue("quantity")) as string[];
69+
return (
70+
<>
71+
{cellValue.map((quantity, index) => (
72+
<div key={index}>{quantity}</div>
73+
))}
74+
</>
75+
);
76+
},
3077
},
3178
{
3279
accessorKey: "phone",

‎ecommerce-admin/app/(dashboard)/[storeId]/(routes)/orders/page.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,18 @@ const OrdersPage = async ({ params }: { params: { storeId: string } }) => {
2828
id: item.id,
2929
phone: item.phone,
3030
address: item.address,
31-
products: item.orderItems
32-
.map((orderItem) => orderItem.product.name)
33-
.join(` | `),
34-
variants: item.orderItems
35-
.map(
31+
products: JSON.stringify(
32+
item.orderItems.map((orderItem) => orderItem.product.name)
33+
),
34+
variants: JSON.stringify(
35+
item.orderItems.map(
3636
(orderItem) =>
3737
`${orderItem.variant?.colorId} - ${orderItem.variant?.sizeId}`
3838
)
39-
.join(" | "),
40-
quantity: item.orderItems
41-
.map((orderItem) => `${orderItem.quantity}`)
42-
.join(" | "),
39+
),
40+
quantity: JSON.stringify(
41+
item.orderItems.map((orderItem) => `${orderItem.quantity}`)
42+
),
4343
totalPrice: formatter.format(
4444
item.orderItems.reduce((total, item) => {
4545
return total + Number(item.product.price);

‎ecommerce-admin/app/(dashboard)/[storeId]/(routes)/products/components/columns.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export type ProductColumn = {
2020
export const columns: ColumnDef<ProductColumn>[] = [
2121
{
2222
accessorKey: "name",
23-
header: "Name",
23+
header: () => <div className="text-center">Name</div>,
2424
},
2525
{
2626
accessorKey: "isArchived",

‎ecommerce-admin/app/types/types.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
export interface Billboard {
2+
id: string;
3+
label: string;
4+
imageUrl: string;
5+
}
6+
7+
export interface Category {
8+
id: string;
9+
name: string;
10+
billboard: Billboard;
11+
}
12+
13+
export interface CartItem {
14+
product: Product;
15+
variant: Variant;
16+
quantity: number;
17+
}
18+
export interface Variant {
19+
id: string;
20+
colorId: string;
21+
sizeId: string;
22+
inStock: number;
23+
}
24+
25+
export interface Product {
26+
id: string;
27+
category: Category;
28+
name: string;
29+
price: number;
30+
isFeatured: boolean;
31+
images: Image[];
32+
description: string;
33+
variants: Variant[];
34+
}
35+
36+
export interface Size {
37+
id: string;
38+
name: string;
39+
value: string;
40+
}
41+
42+
export interface Color {
43+
id: string;
44+
name: string;
45+
value: string;
46+
}
47+
48+
export interface Image {
49+
id: string;
50+
url: string;
51+
}

0 commit comments

Comments
 (0)