Total Revenue
diff --git a/apps/admin/src/components/AppSidebar.tsx b/apps/admin/src/components/AppSidebar.tsx
index 1c73051c..29a000ff 100644
--- a/apps/admin/src/components/AppSidebar.tsx
+++ b/apps/admin/src/components/AppSidebar.tsx
@@ -1,16 +1,29 @@
+import Image from "next/image";
+import Link from "next/link";
import {
+ Calendar,
+ ChevronUp,
Home,
Inbox,
- Calendar,
+ Plus,
Search,
Settings,
- User2,
- ChevronUp,
- Plus,
Shirt,
- User,
ShoppingBasket,
+ User,
+ User2,
} from "lucide-react";
+import AddCategory from "./AddCategory";
+import AddOrder from "./AddOrder";
+import AddProduct from "./AddProduct";
+import AddUser from "./AddUser";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { Sheet, SheetTrigger } from "./ui/sheet";
import {
Sidebar,
SidebarContent,
@@ -24,50 +37,12 @@ import {
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
-
SidebarSeparator,
} from "./ui/sidebar";
-import Link from "next/link";
-import Image from "next/image";
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
-import { Sheet, SheetTrigger } from "./ui/sheet";
-import AddOrder from "./AddOrder";
-import AddUser from "./AddUser";
-import AddCategory from "./AddCategory";
-import AddProduct from "./AddProduct";
+import { Show } from "@clerk/nextjs";
+import ProfileButton from "./ProfileButton";
-const items = [
- {
- title: "Home",
- url: "/",
- icon: Home,
- },
- {
- title: "Inbox",
- url: "#",
- icon: Inbox,
- },
- {
- title: "Calendar",
- url: "#",
- icon: Calendar,
- },
- {
- title: "Search",
- url: "#",
- icon: Search,
- },
- {
- title: "Settings",
- url: "#",
- icon: Settings,
- },
-];
+const items = [{ title: "Home", url: "/", icon: Home }];
const AppSidebar = () => {
return (
@@ -77,14 +52,16 @@ const AppSidebar = () => {
-
- Lama Dev
+
+ Pulse
+
+
Application
@@ -98,14 +75,12 @@ const AppSidebar = () => {
{item.title}
- {item.title === "Inbox" && (
- 24
- )}
))}
+
Products
@@ -117,43 +92,36 @@ const AppSidebar = () => {
- See All Products
+ See all Products
-
-
-
-
-
-
- Add Product
-
-
-
-
-
-
+
+
+
+
+ Add Product
+
+
+
+
-
-
-
-
-
-
- Add Category
-
-
-
-
-
-
+
+
+
+
+ Add Category
+
+
+
+
+
Users
@@ -165,30 +133,27 @@ const AppSidebar = () => {
- See All Users
+ See all Users
-
-
-
-
-
-
- Add User
-
-
-
-
-
-
+
+
+
+
+ Add User
+
+
+
+
+
- Orders / Payments
+ Orders
Add Order
@@ -198,46 +163,33 @@ const AppSidebar = () => {
- See All Transactions
+ See all Orders
-
-
-
-
-
-
- Add Order
-
-
-
-
-
-
+
+
+
+
+ Add Order
+
+
+
+
+
-
-
-
-
-
- John Doe
-
-
-
- Account
- Setting
- Sign out
-
-
-
-
+
+
+
);
diff --git a/apps/admin/src/components/CardList.tsx b/apps/admin/src/components/CardList.tsx
index 164b401d..f2a2692a 100644
--- a/apps/admin/src/components/CardList.tsx
+++ b/apps/admin/src/components/CardList.tsx
@@ -7,74 +7,15 @@ import { auth } from "@clerk/nextjs/server";
// const popularProducts = [
// {
// id: 1,
-// name: "Adidas CoreFit T-Shirt",
-// shortDescription:
-// "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+// name: "iPhone 13 Pro",
+// shortDescription: "The latest iPhone with A15 Bionic chip",
// description:
-// "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
-// price: 39.9,
-// sizes: ["s", "m", "l", "xl", "xxl"],
-// colors: ["gray", "purple", "green"],
+// "The iPhone 13 Pro features a 6.1-inch Super Retina XDR display, A15 Bionic chip, Pro camera system with Night mode, and up to 22 hours of battery life.",
+// price: 999,
// images: {
-// gray: "/products/1g.png",
-// purple: "/products/1p.png",
-// green: "/products/1gr.png",
-// },
-// },
-// {
-// id: 2,
-// name: "Puma Ultra Warm Zip",
-// shortDescription:
-// "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
-// description:
-// "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
-// price: 59.9,
-// sizes: ["s", "m", "l", "xl"],
-// colors: ["gray", "green"],
-// images: { gray: "/products/2g.png", green: "/products/2gr.png" },
-// },
-// {
-// id: 3,
-// name: "Nike Air Essentials Pullover",
-// shortDescription:
-// "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
-// description:
-// "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
-// price: 69.9,
-// sizes: ["s", "m", "l"],
-// colors: ["green", "blue", "black"],
-// images: {
-// green: "/products/3gr.png",
-// blue: "/products/3b.png",
-// black: "/products/3bl.png",
-// },
-// },
-// {
-// id: 4,
-// name: "Nike Dri Flex T-Shirt",
-// shortDescription:
-// "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
-// description:
-// "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
-// price: 29.9,
-// sizes: ["s", "m", "l"],
-// colors: ["white", "pink"],
-// images: { white: "/products/4w.png", pink: "/products/4p.png" },
-// },
-// {
-// id: 5,
-// name: "Under Armour StormFleece",
-// shortDescription:
-// "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
-// description:
-// "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
-// price: 49.9,
-// sizes: ["s", "m", "l"],
-// colors: ["red", "orange", "black"],
-// images: {
-// red: "/products/5r.png",
-// orange: "/products/5o.png",
-// black: "/products/5bl.png",
+// 0: "/products/1g.png",
+// 1: "/products/1p.png",
+// 2: "/products/1gr.png",
// },
// },
// ];
@@ -125,68 +66,61 @@ import { auth } from "@clerk/nextjs/server";
const CardList = async ({ title }: { title: string }) => {
let products: ProductsType = [];
let orders: OrderType[] = [];
+ const currencyFormatter = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ });
const { getToken } = await auth();
const token = await getToken();
- if (title === "Popular Products") {
- products = await fetch(
- `${process.env.NEXT_PUBLIC_PRODUCT_SERVICE_URL}/products?limit=5&popular=true`
- ).then((res) => res.json());
- } else {
- orders = await fetch(
+ // fetch orders only
+
+ try {
+ const res = await fetch(
`${process.env.NEXT_PUBLIC_ORDER_SERVICE_URL}/orders?limit=5`,
{
headers: {
Authorization: `Bearer ${token}`,
},
- }
- ).then((res) => res.json());
+ cache: "no-store",
+ },
+ );
+ const data = await res.json();
+
+ orders = Array.isArray(data) ? data : [];
+ } catch (error) {
+ console.error("Failed to load latest transactions", error);
}
return (
{title}
- {title === "Popular Products"
- ? products.map((item) => (
-
-
- )[0] ||
- ""
- }
- alt={item.name}
- fill
- className="object-cover"
- />
-
-
-
- {item.name}
-
-
- ${item.price}K
-
- ))
- : orders.map((item) => (
-
-
-
- {item.email}
-
- {item.status}
-
- ${item.amount / 100}
-
- ))}
+ {orders.map((item) => {
+ const total =
+ item.products?.reduce(
+ (sum, product) => sum + product.price * product.quantity,
+ 0,
+ ) ?? item.amount;
+
+ return (
+
+
+
+ {item.username || item.email}
+
+ {item.status}
+
+
+ {currencyFormatter.format(total)}
+
+
+ );
+ })}
);
diff --git a/apps/admin/src/components/EditUser.tsx b/apps/admin/src/components/EditUser.tsx
index d264dc7f..e966f9f1 100644
--- a/apps/admin/src/components/EditUser.tsx
+++ b/apps/admin/src/components/EditUser.tsx
@@ -19,13 +19,6 @@ import {
FormMessage,
} from "./ui/form";
import { Input } from "./ui/input";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select";
import { Button } from "./ui/button";
const formSchema = z.object({
@@ -33,7 +26,6 @@ const formSchema = z.object({
.string()
.min(2, { message: "Full name must be at least 2 characters!" })
.max(50),
- email: z.string().email({ message: "Invalid email address!" }),
phone: z.string().min(10).max(15),
address: z.string().min(2),
city: z.string().min(2),
@@ -43,8 +35,7 @@ const EditUser = () => {
const form = useForm
>({
resolver: zodResolver(formSchema),
defaultValues: {
- fullName: "John Doe",
- email: "john.doe@gmail.com",
+ fullName: "john.doe",
phone: "+1 234 5678",
address: "123 Main St",
city: "New York",
@@ -66,25 +57,7 @@ const EditUser = () => {
-
- Enter user full name.
-
-
-
- )}
- />
- (
-
- Email
-
-
-
-
- Only admin can see your email.
-
+ Enter user full name.
)}
@@ -99,7 +72,7 @@ const EditUser = () => {
- Only admin can see your phone number (optional)
+ Only admin can see your phone number.
@@ -114,9 +87,7 @@ const EditUser = () => {
-
- Enter user address (optional)
-
+ Enter user address
)}
@@ -130,9 +101,7 @@ const EditUser = () => {
-
- Enter user city (optional)
-
+ Enter user city
)}
diff --git a/apps/admin/src/components/Navbar.tsx b/apps/admin/src/components/Navbar.tsx
index 9187dd71..59f9453c 100644
--- a/apps/admin/src/components/Navbar.tsx
+++ b/apps/admin/src/components/Navbar.tsx
@@ -1,19 +1,18 @@
"use client";
-import { LogOut, Moon, Settings, Sun, User } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
import Link from "next/link";
-import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
- DropdownMenuLabel,
- DropdownMenuSeparator,
DropdownMenuTrigger,
} from "./ui/dropdown-menu";
import { Button } from "./ui/button";
import { useTheme } from "next-themes";
import { SidebarTrigger, useSidebar } from "./ui/sidebar";
+import { Show } from "@clerk/nextjs";
+import ProfileButton from "./ProfileButton";
const Navbar = () => {
const { theme, setTheme } = useTheme();
@@ -50,30 +49,9 @@ const Navbar = () => {
{/* USER MENU */}
-
-
-
-
- CN
-
-
-
- My Account
-
-
-
- Profile
-
-
-
- Settings
-
-
-
- Logout
-
-
-
+
+
+
);
diff --git a/apps/admin/src/components/ProfileButton.tsx b/apps/admin/src/components/ProfileButton.tsx
new file mode 100644
index 00000000..a0ced848
--- /dev/null
+++ b/apps/admin/src/components/ProfileButton.tsx
@@ -0,0 +1,22 @@
+"use client";
+import { UserButton } from "@clerk/nextjs";
+
+import { useRouter } from "next/navigation";
+import React from "react";
+
+const ProfileButton = ({ size = "w-10 h-10" }: { size?: string }) => {
+ const router = useRouter();
+ return (
+