feat(web): admin orders page

mrevanzak · Dec 22, 2023 · c803243 · c803243
1 parent 84f5605
commit c803243
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 47 deletions.
diff --git a/apps/nextjs/src/app/(private)/orders/page.tsx b/apps/nextjs/src/app/(private)/orders/page.tsx
@@ -13,8 +13,13 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { api } from "@/lib/server";
+import rupiahFormatter, { cn } from "@/lib/utils";
+import { IoEllipsisVerticalSharp } from "react-icons/io5";
+
+export default async function OrdersPage() {
+  const data = await api.admin.getOrders.query();
 
-export default function OrdersPage() {
   return (
     <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6">
       <div className="rounded-lg border p-2 shadow-sm">
@@ -23,40 +28,56 @@ export default function OrdersPage() {
             <TableRow>
               <TableHead className="w-[100px]">Order</TableHead>
               <TableHead className="min-w-[150px]">Customer</TableHead>
-              <TableHead className="hidden md:table-cell">Channel</TableHead>
               <TableHead className="hidden md:table-cell">Date</TableHead>
-              <TableHead className="text-right">Total</TableHead>
-              <TableHead className="hidden sm:table-cell">Status</TableHead>
+              <TableHead className="hidden text-right sm:table-cell">
+                Total
+              </TableHead>
+              <TableHead>Status</TableHead>
               <TableHead className="text-right">Actions</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
-            <TableRow>
-              <TableCell className="font-medium">#3210</TableCell>
-              <TableCell>Olivia Martin</TableCell>
-              <TableCell className="hidden md:table-cell">
-                Online Store
-              </TableCell>
-              <TableCell className="hidden md:table-cell">
-                February 20, 2022
-              </TableCell>
-              <TableCell className="text-right">$42.25</TableCell>
-              <TableCell className="hidden sm:table-cell">Shipped</TableCell>
-              <TableCell className="text-right">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button size="icon" variant="ghost">
-                      {/* <MoreHorizontalIcon className="h-4 w-4" /> */}
-                      <span className="sr-only">Actions</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem>View order</DropdownMenuItem>
-                    <DropdownMenuItem>Customer details</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
+            {data.map((order) => (
+              <TableRow key={order.id}>
+                <TableCell className="line-clamp-1 font-medium">
+                  {order.id}
+                </TableCell>
+                <TableCell>{order.buyer.name}</TableCell>
+                <TableCell className="hidden md:table-cell">
+                  {new Date(order.createdAt).toLocaleDateString()}
+                </TableCell>
+                <TableCell className="hidden text-right sm:table-cell">
+                  {rupiahFormatter(order.totalPrice)}
+                </TableCell>
+                <TableCell className="uppercase">
+                  <span
+                    className={cn(
+                      "mr-2 inline-block h-2 w-2 rounded-full",
+                      order.status === "done"
+                        ? "bg-green-500"
+                        : order.status === "cancelled"
+                        ? "bg-red-500"
+                        : "bg-yellow-500",
+                    )}
+                  />
+                  {order.status}
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button size="icon" variant="ghost">
+                        <IoEllipsisVerticalSharp />
+                        <span className="sr-only">Actions</span>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem>View order</DropdownMenuItem>
+                      <DropdownMenuItem>Customer details</DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
           </TableBody>
         </Table>
       </div>

diff --git a/apps/nextjs/src/lib/utils.ts b/apps/nextjs/src/lib/utils.ts
@@ -1,7 +1,17 @@
-import { clsx  } from "clsx"
-import type {ClassValue} from "clsx";
-import { twMerge } from "tailwind-merge"
+import { clsx } from "clsx";
+import type { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+
+export default function rupiahFormatter(value?: number): string {
+  if (!value) return "";
+
+  return new Intl.NumberFormat("id-ID", {
+    style: "currency",
+    currency: "IDR",
+    minimumFractionDigits: 0,
+  }).format(value);
 }
diff --git a/packages/api/src/root.ts b/packages/api/src/root.ts
@@ -1,12 +1,12 @@
-import { authRouter } from "./router/auth";
+import { adminRouter } from "./router/admin";
 import { categoryRouter } from "./router/category";
 import { orderRouter } from "./router/orders";
 import { productRouter } from "./router/product";
 import { userRouter } from "./router/user";
 import { createTRPCRouter } from "./trpc";
 
 export const appRouter = createTRPCRouter({
-  auth: authRouter,
+  admin: adminRouter,
   product: productRouter,
   category: categoryRouter,
   user: userRouter,

diff --git a/packages/api/src/router/admin.ts b/packages/api/src/router/admin.ts
@@ -0,0 +1,32 @@
+import { alias } from "drizzle-orm/mysql-core";
+
+import { eq, sql } from "@vivat/db";
+import { addresses } from "@vivat/db/schema/addresses";
+import { orders } from "@vivat/db/schema/orders";
+import { products } from "@vivat/db/schema/products";
+import { users } from "@vivat/db/schema/users";
+
+import { adminProcedure, createTRPCRouter } from "../trpc";
+
+export const adminRouter = createTRPCRouter({
+  getOrders: adminProcedure.query(async ({ ctx }) => {
+    const seller = alias(users, "seller");
+
+    return await ctx.db
+      .select({
+        createdAt: orders.createdAt,
+        id: orders.id,
+        status: orders.status,
+        products,
+        buyer: users,
+        seller,
+        totalPrice: orders.totalPrice,
+      })
+      .from(orders)
+      .innerJoin(addresses, eq(orders.addressId, addresses.id))
+      .innerJoin(users, eq(addresses.userId, users.id))
+      .innerJoin(products, eq(orders.productId, products.id))
+      .innerJoin(seller, eq(products.sellerId, seller.id))
+      .orderBy(sql`(CASE ${orders.status} WHEN 'payment' THEN 0 ELSE 1 END), ${orders.createdAt} DESC`) 
+  }),
+});
diff --git a/packages/api/src/router/auth.ts b/packages/api/src/router/auth.ts