style: manage order items

src/RookieShop.Application/Orders/Events/UpdatedOrderHandler.cs

@@ -13,10 +13,10 @@ public async Task Handle(UpdatedOrderEvent notification, CancellationToken cance
         EmailMetadata metadata = new(
             $"Your order status has been updated to {
                 notification.Order.OrderStatus switch {
-                    OrderStatus.Pending => "Pending",
-                    OrderStatus.Shipping => "Processing",
-                    OrderStatus.Canceled => "Canceled",
-                    OrderStatus.Completed => "Completed",
+                    OrderStatus.Pending => nameof(OrderStatus.Pending),
+                    OrderStatus.Shipping => nameof(OrderStatus.Shipping),
+                    OrderStatus.Canceled => nameof(OrderStatus.Canceled),
+                    OrderStatus.Completed => nameof(OrderStatus.Completed),
                     _ => "Unknown" }
             }",
             "Order Status",

ui/backoffice/app/(dashboard)/dashboard/order/[id]/page.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import useGetOrder from "@/features/order/useGetOrder"
+import { Separator } from "@radix-ui/react-dropdown-menu"
+
+import BreadCrumb from "@/components/ui/breadcrumb"
+import { Heading } from "@/components/ui/heading"
+import { OrderForm } from "@/components/forms/order-form"
+import OrderDetailTable from "@/components/tables/order_details/table"
+
+export default function EditOrder({
+  params,
+}: Readonly<{ params: { id: string } }>) {
+  const breadcrumbItems = [
+    { title: "Order", link: "/dashboard/order" },
+    { title: "Edit", link: `/dashboard/order/${params.id}` },
+  ]
+
+  const { data: GetOrder } = useGetOrder(params.id)
+
+  console.log(GetOrder)
+
+  return (
+    <div className="flex-1 space-y-4 p-8">
+      <BreadCrumb items={breadcrumbItems} />
+      {GetOrder && (
+        <OrderForm
+          initialData={{
+            id: GetOrder.id,
+            orderStatus: GetOrder.orderStatus,
+          }}
+        />
+      )}
+      <Separator />
+      <div className="flex items-start justify-between">
+        <Heading title={`Order detail`} description="Manage order item" />
+      </div>
+      <OrderDetailTable data={GetOrder?.items || []} />
+    </div>
+  )
+}

ui/backoffice/components/forms/category-form.tsx

@@ -61,8 +61,6 @@ export const CategoryForm: FC<CategoryFormProps> = ({ initialData }) => {
     description: "",
   }
 
-  console.log("defaultValues", defaultValues)
-
   const form = useForm<CategoryFormValues>({
     resolver: zodResolver(categorySchema),
     defaultValues,

ui/backoffice/components/forms/order-form.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import { FC, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { OrderStatus, UpdateOrderRequest } from "@/features/order/order.type"
+import useUpdateOrder from "@/features/order/useUpdateOrder"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { orderSchema } from "@/lib/validations/order"
+
+import { Button } from "../ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../ui/form"
+import { Heading } from "../ui/heading"
+import { Input } from "../ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select"
+import { Separator } from "../ui/separator"
+import { useToast } from "../ui/use-toast"
+
+type OrderFormValues = z.infer<typeof orderSchema>
+
+type OrderFormProps = {
+  initialData: UpdateOrderRequest
+}
+
+export const OrderForm: FC<OrderFormProps> = ({ initialData }) => {
+  const router = useRouter()
+  const { toast } = useToast()
+  const {
+    mutate: updateOrder,
+    isSuccess: updateOrderSuccess,
+    isPending: updateOrderPending,
+  } = useUpdateOrder()
+
+  const isDisabled = updateOrderSuccess || updateOrderPending
+
+  const title = "Edit order"
+  const description = "Edit an order."
+  const toastMessage = "Order updated."
+  const action = "Save changes"
+
+  const defaultValues = initialData
+
+  const form = useForm<OrderFormValues>({
+    resolver: zodResolver(orderSchema),
+    defaultValues,
+  })
+
+  const onSubmit = async (data: OrderFormValues) => {
+    try {
+      updateOrder(data)
+
+      console.log("Order data: ", data)
+    } catch (error: any) {
+      toast({
+        variant: "destructive",
+        title: "Uh oh! Something went wrong.",
+        description: "There was a problem with your request.",
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (updateOrderSuccess) {
+      toast({
+        title: "Success!",
+        description: toastMessage,
+      })
+
+      setTimeout(() => {
+        router.replace(`/dashboard/order`)
+      }, 2000)
+    }
+  }, [updateOrderSuccess])
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <Heading title={title} description={description} />
+      </div>
+      <Separator />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="w-full space-y-8"
+        >
+          <div className="gap-8 md:grid md:grid-cols-2">
+            <FormField
+              control={form.control}
+              name="id"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input readOnly={true} placeholder="Order ID" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="orderStatus"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select status" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value={OrderStatus.Pending}>
+                          Pending
+                        </SelectItem>
+                        <SelectItem value={OrderStatus.Shipping}>
+                          Shipping
+                        </SelectItem>
+                        <SelectItem value={OrderStatus.Completed}>
+                          Completed
+                        </SelectItem>
+                        <SelectItem value={OrderStatus.Cancelled}>
+                          Cancelled
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <Button disabled={isDisabled} className="ml-auto" type="submit">
+            {action}
+          </Button>
+        </form>
+      </Form>
+    </>
+  )
+}

ui/backoffice/components/tables/order/columns.tsx

@@ -20,25 +20,23 @@ export const columns: ColumnDef<Order>[] = [
     header: "CARD",
     cell: (props) => {
       const { last4, brand, chargeId } = props.row.original
-      if (last4 === null && brand === null && chargeId === null) {
-        return <Icons.minus className="text-gray-500" />
-      } else {
-        return (
-          <div>
-            <span>
-              <strong className="text-yellow-500">Last4:</strong> {last4}
-            </span>
-            <br />
-            <span>
-              <strong className="text-yellow-500">Brand:</strong> {brand}
-            </span>
-            <br />
-            <span>
-              <strong className="text-yellow-500">Charge ID:</strong> {chargeId}
-            </span>
-          </div>
-        )
-      }
+      return last4 === null && brand === null && chargeId === null ? (
+        <Icons.minus className="text-gray-500" />
+      ) : (
+        <div>
+          <span>
+            <strong className="text-yellow-500">Last4:</strong> {last4}
+          </span>
+          <br />
+          <span>
+            <strong className="text-yellow-500">Brand:</strong> {brand}
+          </span>
+          <br />
+          <span>
+            <strong className="text-yellow-500">Charge ID:</strong> {chargeId}
+          </span>
+        </div>
+      )
     },
   },
   {

ui/backoffice/components/tables/order_details/columns.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { OrderItem } from "@/features/order/order.type"
+import { ColumnDef } from "@tanstack/react-table"
+
+export const columns: ColumnDef<OrderItem>[] = [
+  {
+    accessorKey: "id",
+    header: "PRODUCT ID",
+  },
+  {
+    accessorKey: "price",
+    header: "PRICE",
+    cell: (props) => {
+      const price = props.getValue() as number
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(price)
+    },
+  },
+  {
+    accessorKey: "quantity",
+    header: "QUANTITY",
+  },
+  {
+    header: "TOTAL",
+    cell: (props) => {
+      const { price, quantity } = props.row.original
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(price * quantity)
+    },
+  },
+]

ui/backoffice/components/tables/order_details/table.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { OrderItem } from "@/features/order/order.type"
+
+import FilterTable from "@/components/custom/filter-table"
+
+import { columns } from "./columns"
+
+export default function OrderDetailTable({
+  data,
+}: Readonly<{
+  data: OrderItem[]
+}>) {
+  return (
+    <FilterTable
+      searchKey=""
+      pageNo={0}
+      columns={columns}
+      totalRecords={0}
+      data={data}
+      pageCount={0}
+    />
+  )
+}

ui/backoffice/components/tables/product/columns.tsx

@@ -159,6 +159,10 @@ export const columns: ColumnDef<Product>[] = [
       )
     },
   },
+  {
+    accessorKey: "totalReviews",
+    header: "REVIEWS",
+  },
   {
     accessorKey: "createdDate",
     header: "CREATED",

ui/backoffice/features/order/order.type.ts

@@ -35,10 +35,10 @@ export enum PaymentMethod {
 }
 
 export enum OrderStatus {
-  Pending = 1,
-  Shipping = 2,
-  Completed = 3,
-  Cancelled = 4,
+  Pending = "Pending",
+  Shipping = "Shipping",
+  Completed = "Completed",
+  Cancelled = "Cancelled",
 }
 
 export type OrderFilterParams = PagingFilter & {

ui/backoffice/lib/validations/order.ts

@@ -0,0 +1,7 @@
+import { OrderStatus } from "@/features/order/order.type"
+import { z } from "zod"
+
+export const orderSchema = z.object({
+  id: z.string(),
+  orderStatus: z.nativeEnum(OrderStatus),
+})