21 |
22 |
23 |
24 |
25 |
26 |
27 | -
28 | {Array.from({ length: 5 }, (_, index) => (
29 |
-
33 |
34 |
35 | ))}
36 |
4 |
5 |
6 | );
7 | };
8 |
9 | export default Loader;
10 |
--------------------------------------------------------------------------------
/app/[locale]/dashboard/loading.tsx:
--------------------------------------------------------------------------------
1 | const Loader = () => {
2 | return (
3 |
4 |
5 |
6 | );
7 | };
8 |
9 | export default Loader;
10 |
--------------------------------------------------------------------------------
/app/fonts.ts:
--------------------------------------------------------------------------------
1 | import { Roboto, Noto_Kufi_Arabic } from "next/font/google";
2 |
3 | export const roboto = Roboto({
4 | weight: ["400", "700"],
5 | subsets: ["latin"],
6 | display: "swap",
7 | });
8 |
9 | export const NotoKufiArabic = Noto_Kufi_Arabic({
10 | subsets: ["arabic"],
11 | weight: ["400", "700"],
12 | display: "swap",
13 | });
14 |
--------------------------------------------------------------------------------
/app/_components/marketking/CategorySelection.tsx:
--------------------------------------------------------------------------------
1 | import CategoryHeader from "./CategoryHeader";
2 | import CategoryPreviews from "./CategoryPreviews";
3 |
4 | function CategorySelection() {
5 | return (
6 |
10 |
12 | );
13 | }
14 |
15 | export default ErrorMessage;
16 |
--------------------------------------------------------------------------------
/app/_components/ui/PrintButton.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useTranslate } from "@/app/_hooks/useTranslate";
3 | import Button from "./Button";
4 |
5 | function PrintButton() {
6 | const { t } = useTranslate();
7 |
8 | const handlePrint = () => {
9 | window.print();
10 | };
11 | return (
12 |
13 |
16 |
17 | );
18 | }
19 |
20 | export default PrintButton;
21 |
--------------------------------------------------------------------------------
/app/_components/Toaster.tsx:
--------------------------------------------------------------------------------
1 | import { Toaster } from "react-hot-toast";
2 |
3 | export default function ToasterProvider() {
4 | return (
5 |
15 |
19 | );
20 | }
21 |
22 | export default ProductInfo;
23 |
--------------------------------------------------------------------------------
/app/_components/ui/MyLink.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslate } from "@/app/_hooks/useTranslate";
2 | import Link from "next/link";
3 | import React from "react";
4 |
5 | const MyLink = React.forwardRef<
6 | HTMLAnchorElement,
7 | {
8 | children: React.ReactNode;
9 | href: string;
10 | className?: string;
11 | [key: string]: any;
12 | }
13 | >(({ children, href, className, ...props }, ref) => {
14 | const { lang } = useTranslate();
15 | return (
16 |
17 | {children}
18 |
19 | );
20 | });
21 |
22 | MyLink.displayName = "MyLink";
23 |
24 | export default MyLink;
25 |
--------------------------------------------------------------------------------
/app/_components/marketking/CategoryHeader.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslate } from "@/app/_hooks/useTranslate";
2 | import MyLink from "../ui/MyLink";
3 |
4 | function CategoryHeader() {
5 | const { isArabic, t } = useTranslate();
6 | return (
7 | {t("Shop By")}
9 |-
6 | {Array.from({ length: 4 }, (_, index) => (
7 |
11 | ))}
12 |
16 | {t("Placeholder Banner")} 17 |
18 |{t("Login")}
24 | 25 |{t("Sign Up")}
24 | 25 |
9 |
10 |
11 |
12 |
13 | -
14 | {Array.from({ length: 3 }, (_, index) => (
15 |
19 | ))}
20 |
20 | {t("no favorite products")} 21 |
22 | )} 23 | 24 | ); 25 | } 26 | 27 | export default FavoriteProductsList; 28 | -------------------------------------------------------------------------------- /app/_components/marketking/AllProducts.tsx: -------------------------------------------------------------------------------- 1 | import prisma from "@/app/_lib/db"; 2 | import ProductList from "./ProductList"; 3 | import { getUser } from "@/app/_utils/getUser"; 4 | 5 | async function AllProducts({ 6 | searchParams, 7 | }: { 8 | searchParams: { 9 | "sort-price": string; 10 | "filter-price": string; 11 | }; 12 | }) { 13 | const sortPrice = searchParams["sort-price"] || "all"; 14 | const filterPrice = searchParams["filter-price"] || "all"; 15 | const allProducts = await prisma.product.findMany({ 16 | orderBy: { createdAt: "desc" }, 17 | }); 18 | const totalProducts = await prisma.product.count(); 19 | const user: any = await getUser(); 20 | 21 | return ( 22 |{children}
29 |
17 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/app/_components/dashboard/StatusItem.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslate } from "@/app/_hooks/useTranslate";
2 |
3 | interface Props {
4 | title: string;
5 | icon: React.ReactNode;
6 | statusValue: string | number;
7 | labelNumber?: number;
8 | label: string;
9 | }
10 |
11 | function StatusItem({
12 | title,
13 | icon,
14 | statusValue,
15 | label,
16 | labelNumber = 0,
17 | }: Props) {
18 | const { t } = useTranslate();
19 | return (
20 | 22 | {t(title)}{" "} 23 | {icon} 24 |
25 |{statusValue}
26 | 31 |
19 |
26 |
18 | {t("Market")}
19 |
24 | {isArabic && " "}
25 | {t("King")}
26 |
27 |
33 | );
34 |
35 | return isLink ?
17 |
20 |
21 |
29 | Something went wrong
20 |{error.message}
21 | 22 |
23 |
26 |
29 |
30 |
34 |
39 | );
40 | }
41 |
42 | export default GraphCard;
43 |
--------------------------------------------------------------------------------
/app/_components/marketking/IncAndDecProductItem.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useFormStatus } from "react-dom";
3 | import Button from "../ui/Button";
4 | import { increaseProductItem } from "@/app/_actions/increaseProductItem";
5 | import { decreaseProductItem } from "@/app/_actions/decreaseProductItem";
6 |
7 | function IncAndDecProductItem({
8 | quantity,
9 | itemId,
10 | userId,
11 | }: {
12 | quantity: number;
13 | itemId: string;
14 | userId: string;
15 | }) {
16 | return (
17 | {t("Transitions")}
35 |{t("Transitions label")}
36 | 37 |
18 |
21 | {quantity}
22 |
25 |
26 | );
27 | }
28 |
29 | export default IncAndDecProductItem;
30 |
31 | function SubmitButton({ children }: { children: React.ReactNode }) {
32 | const { pending } = useFormStatus();
33 |
34 | return (
35 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/app/_actions/createBanner.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import prisma from "../_lib/db";
4 | import { getTranslate } from "../_utils/helpers";
5 | import { BannerErrors } from "../_utils/types";
6 | import { revalidatePath } from "next/cache";
7 |
8 | export async function createBanner(_: any, formData: FormData) {
9 | const { isArabic } = await getTranslate();
10 | const banner = formData.get("banner") as string;
11 | let image = formData.get("image") as string;
12 |
13 | let errors: BannerErrors = {};
14 |
15 | if (!banner || banner.trim().length === 0) {
16 | errors.banner = "banner error message";
17 | }
18 |
19 | if (!image || image.trim().length === 0) {
20 | errors.image = "image error message";
21 | }
22 |
23 | if (Object.keys(errors).length > 0) {
24 | return errors;
25 | }
26 |
27 | try {
28 | await prisma.banner.create({
29 | data: {
30 | title: banner,
31 | imageString: image,
32 | },
33 | });
34 | if (isArabic) {
35 | revalidatePath("/ar/dashboard", "layout");
36 | } else {
37 | revalidatePath("/en/dashboard", "layout");
38 | }
39 |
40 | return { success: true };
41 | } catch {
42 | return { success: false };
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/app/_components/ui/LanguageSwitcher.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useTranslate } from "@/app/_hooks/useTranslate";
4 | import { usePathname, useRouter, useSearchParams } from "next/navigation";
5 |
6 | export default function LanguageSwitcher() {
7 | const router = useRouter();
8 | const pathname = usePathname();
9 | const searchParams = useSearchParams();
10 | const { t, isArabic } = useTranslate();
11 | const changeLocale = (locale: string) => {
12 | const segments = pathname.split("/");
13 | segments[1] = locale;
14 | const newPathname = segments.join("/");
15 | const queryString = searchParams.toString();
16 | const url = queryString ? `${newPathname}?${queryString}` : newPathname;
17 | router.push(url);
18 | };
19 |
20 | return (
21 | <>
22 | {isArabic ? (
23 |
29 | ) : (
30 |
36 | )}
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/app/_components/marketking/RelatedProducts.tsx:
--------------------------------------------------------------------------------
1 | import prisma from "@/app/_lib/db";
2 | import { getUser } from "@/app/_utils/getUser";
3 | import { getTranslate } from "@/app/_utils/helpers";
4 | import { Category } from "@prisma/client";
5 | import React from "react";
6 | import Marquee from "../ui/Marquee";
7 |
8 | async function RelatedProducts({ type }: { type: Category }) {
9 | const items = await prisma.product.findMany({
10 | where: { category: type ?? "laptops" },
11 | select: {
12 | id: true,
13 | name: true,
14 | images: true,
15 | price: true,
16 | discount: true,
17 | },
18 | orderBy: {
19 | createdAt: "desc",
20 | },
21 | take: 10,
22 | });
23 | const user = await getUser();
24 | const userDetails = await prisma.user.findUnique({
25 | where: {
26 | id: user?.id ?? "",
27 | },
28 | include: {
29 | favoriteProducts: { select: { productId: true } },
30 | },
31 | });
32 |
33 | const { t } = await getTranslate();
34 | return (
35 | {t("Related Products")}
37 | 38 |{t("Featured Items")}
40 |{t("login message")}
17 | 18 |
19 |
23 | {t("Login")}
24 |
25 |
26 |
30 | {t("Sign Up")}
31 |
32 |
33 |
34 | )}
35 | -
6 | {Array.from({ length: 6 }, (_, index) => (
7 |
-
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | 21 |22 | 23 | 24 |
25 | ))}
26 |
30 |
31 |
33 |
34 |
35 |
40 |
19 |
49 | );
50 | }
51 | export default Auth;
52 |
--------------------------------------------------------------------------------
/app/_components/dashboard/PaginationOrderTable.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useTranslate } from "@/app/_hooks/useTranslate";
4 | import { useRouter, usePathname } from "next/navigation";
5 |
6 | function OrderTablePagination({
7 | currentPage,
8 | totalPages,
9 | }: {
10 | currentPage: number;
11 | totalPages: number;
12 | }) {
13 | const router = useRouter();
14 | const pathname = usePathname();
15 | const { t } = useTranslate();
16 | const handlePageChange = (newPage: number) => {
17 | router.push(`${pathname}?page=${newPage}`);
18 | };
19 |
20 | return (
21 |
29 |
37 |
38 |
46 |
47 | )}
48 |
22 |
31 |
32 | {t("Page")} {currentPage} {t("of")} {totalPages}
33 |
34 |
45 |
46 | );
47 | }
48 |
49 | export default OrderTablePagination;
50 |
--------------------------------------------------------------------------------
/app/[locale]/(marketking)/payment/cancel/page.tsx:
--------------------------------------------------------------------------------
1 | import Button from "@/app/_components/ui/Button";
2 | import MyLink from "@/app/_components/ui/MyLink";
3 | import { useTranslate } from "@/app/_hooks/useTranslate";
4 | import { MdCancel } from "react-icons/md";
5 |
6 | import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
7 |
8 | export async function generateMetadata({
9 | params: { locale },
10 | }: {
11 | params: { locale: string };
12 | }) {
13 | const t = await getTranslations({ locale, namespace: "metadata" });
14 |
15 | return {
16 | title: `${t("Cancel Payment")}`,
17 | };
18 | }
19 |
20 | function CancelPaymentPage({
21 | params: { locale },
22 | }: {
23 | params: { locale: string };
24 | }) {
25 | unstable_setRequestLocale(locale);
26 | const { t } = useTranslate();
27 |
28 | return (
29 |
31 |
43 | {t("Payment Cancelled")}
34 | 35 |36 | {t("payment cancel message")}{" "} 37 |
38 | 39 | 42 |{image}
48 |
31 |
43 | {t("Payment Success")}
34 | 35 |36 | {t("payment Success message")}{" "} 37 |
38 | 39 | 42 |
33 |
43 |
52 |
53 | );
54 | };
55 |
56 | export default Switch;
57 |
--------------------------------------------------------------------------------
/app/[locale]/dashboard/banner/create/page.tsx:
--------------------------------------------------------------------------------
1 | import CreateBanner from "@/app/_components/dashboard/CreateBanner";
2 | import IconButton from "@/app/_components/ui/IconButton";
3 | import MyLink from "@/app/_components/ui/MyLink";
4 | import { useTranslate } from "@/app/_hooks/useTranslate";
5 | import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
6 | import { IoMdArrowRoundBack, IoMdArrowRoundForward } from "react-icons/io";
7 |
8 | export async function generateMetadata({
9 | params: { locale },
10 | }: {
11 | params: { locale: string };
12 | }) {
13 | const t = await getTranslations({ locale, namespace: "metadata" });
14 |
15 | return {
16 | title: `${t("Create Banner")}`,
17 | };
18 | }
19 |
20 | function BannerCreatePage({
21 | params: { locale },
22 | }: {
23 | params: { locale: string };
24 | }) {
25 | unstable_setRequestLocale(locale);
26 | const { t, isArabic } = useTranslate();
27 |
28 | return (
29 |
31 |
32 |
33 | {isArabic ?
35 |
36 |
38 | {t("New Banner")}
37 |{t("Banner Details")}
40 |41 | {t("Banner Details title")} 42 |
43 | 44 |
35 |
36 |
37 | {isArabic ?
39 |
40 |
42 |
43 | {t("Edit Profile")}
41 |
44 |
46 |
35 |
36 |
37 | {isArabic ?
39 |
40 |
42 |
43 | {t("Product Details")}
41 |{t("Products")}
46 |{t("Products title")}
47 |
31 |
32 |
33 | {isArabic ?
35 |
36 |
38 |
39 | {t("New Product")}
37 |{t("Banner Details")}
41 |42 | {t("Banner Details title")} 43 |
44 | 45 |-
32 | {chooses.map((choose, index) => (
33 |
- setIsActive(index)} 41 | > 42 | 50 | {t(choose)} 51 | 52 | ))} 53 |
35 |
36 |
37 | {isArabic ?
39 |
40 |
42 |
43 | {t("Favorite Products")}
41 |-
32 |
37 |
47 |
48 |
38 |
39 |
40 | {isArabic ?
42 |
43 |
45 | {t("All Products")}
44 |
12 | {CATEGORIES.map(({ alt, href, span, src, title }) => (
13 |
20 |
42 | ))}
43 |
44 | );
45 | }
46 |
47 | export default CategoryPreviews;
48 |
--------------------------------------------------------------------------------
/app/[locale]/(marketking)/products/laptops/page.tsx:
--------------------------------------------------------------------------------
1 | import AllProducts from "@/app/_components/marketking/AllProducts";
2 | import FavoriteProductsListSkeleton from "@/app/_components/marketking/FavoriteProductsListSkeleton";
3 | import FilterSheet from "@/app/_components/marketking/FilterSheet";
4 | import Laptops from "@/app/_components/marketking/Laptops";
5 | import IconButton from "@/app/_components/ui/IconButton";
6 | import MyLink from "@/app/_components/ui/MyLink";
7 | import { useTranslate } from "@/app/_hooks/useTranslate";
8 | import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
9 | import { Suspense } from "react";
10 | import { IoMdArrowRoundBack, IoMdArrowRoundForward } from "react-icons/io";
11 |
12 | export async function generateMetadata({
13 | params: { locale },
14 | }: {
15 | params: { locale: string };
16 | }) {
17 | const t = await getTranslations({ locale, namespace: "metadata" });
18 |
19 | return {
20 | title: `${t("Laptops")}`,
21 | };
22 | }
23 | function LaptopsPage({
24 | params: { locale },
25 | searchParams,
26 | }: {
27 | params: { locale: string };
28 | searchParams: {
29 | "sort-price": string;
30 | "filter-price": string;
31 | };
32 | }) {
33 | unstable_setRequestLocale(locale);
34 | const { t, isArabic } = useTranslate();
35 | return (
36 |
30 |
33 |
34 |
41 | {t(title)}
31 |{t("Shop Now")}
32 |
38 |
48 |
49 |
39 |
40 |
41 | {isArabic ?
43 |
44 |
46 | {t("Laptops")}
45 |
39 |
49 |
50 |
40 |
41 |
42 | {isArabic ?
44 |
45 |
47 | {t("Phones")}
46 |
28 |
57 | );
58 | }
59 |
60 | export default RecentSalesCard;
61 |
--------------------------------------------------------------------------------
/app/[locale]/dashboard/products/[id]/page.tsx:
--------------------------------------------------------------------------------
1 | import CreateAndEditProductForm from "@/app/_components/dashboard/CreateAndEditProductForm";
2 | import IconButton from "@/app/_components/ui/IconButton";
3 | import MyLink from "@/app/_components/ui/MyLink";
4 | import prisma from "@/app/_lib/db";
5 | import { getTranslate } from "@/app/_utils/helpers";
6 | import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
7 | import { notFound } from "next/navigation";
8 | import { IoMdArrowRoundBack, IoMdArrowRoundForward } from "react-icons/io";
9 |
10 | export async function generateMetadata({
11 | params: { locale },
12 | }: {
13 | params: { locale: string };
14 | }) {
15 | const t = await getTranslations({ locale, namespace: "metadata" });
16 |
17 | return {
18 | title: `${t("Edit")}`,
19 | };
20 | }
21 |
22 | async function getProduct(productId: string) {
23 | const product = await prisma.product.findUnique({
24 | where: {
25 | id: productId,
26 | },
27 | });
28 |
29 | if (!product) {
30 | return notFound();
31 | }
32 | return product;
33 | }
34 |
35 | export default async function EditRoute({
36 | params,
37 | }: {
38 | params: { id: string; locale: string };
39 | }) {
40 | unstable_setRequestLocale(params.locale);
41 |
42 | const product = await getProduct(params.id);
43 |
44 | const { t, isArabic } = await getTranslate();
45 | return (
46 | {t("Recent Sales")}
29 | 30 |-
31 | {orders.map((order) => (
32 |
-
33 |
34 | 40 |38 | 39 | 41 |46 | 51 | +${Intl.NumberFormat("en-US").format(order.amount / 100)} 52 | 53 |42 | {order.User?.firstName} {order.User?.lastName} 43 |
44 |{order.User?.email}
45 |
54 | ))}
55 |
48 |
49 |
50 | {isArabic ?
52 |
53 |
55 |
56 | {t("Edit Product")}
54 |{t("Product Details")}
58 |59 | {t("Product Edit title")} 60 |
61 | 62 |
40 |
50 |
51 |
41 |
42 |
43 | {isArabic ?
45 |
46 |
48 | {t("Watches")}
47 |
7 |
20 |
46 |
47 |
48 | );
49 | }
50 |
51 | export default ProductInfoSkeleton;
52 |
--------------------------------------------------------------------------------
/app/_components/marketking/ImageSlider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Image from "next/image";
3 | import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
4 | import { useTranslate } from "@/app/_hooks/useTranslate";
5 | import { useState } from "react";
6 |
7 | type Props = {
8 | images: string[];
9 | };
10 |
11 | function ImageSlider({ images }: Props) {
12 | const [mainIndex, setMainIndex] = useState(0);
13 | const { isArabic } = useTranslate();
14 |
15 | function handlePrev() {
16 | setMainIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
17 | }
18 | function handleNext() {
19 | setMainIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
20 | }
21 | return (
22 |
8 |
9 |
18 |
19 |
10 | {Array.from({ length: 5 }, (_, index) => (
11 |
15 | ))}
16 |
17 |
23 |
64 | );
65 | }
66 |
67 | export default ImageSlider;
68 |
--------------------------------------------------------------------------------
/app/_actions/createProduct.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { ProductStatus } from "@prisma/client";
4 | import { revalidatePath } from "next/cache";
5 | import prisma from "../_lib/db";
6 | import { ProductErrors } from "../_utils/types";
7 |
8 | export async function createProduct(_: any, formData: FormData) {
9 | const isArabic = formData.get("isArabic");
10 | const product = formData.get("product") as string;
11 | const description = formData.get("description") as string;
12 | const price = formData.get("price");
13 | const discount = formData.get("discount");
14 | const category = formData.get("category") as string;
15 | const featured = formData.get("featured") === "on";
16 | const status = formData.get("status") as ProductStatus;
17 | let images = formData.get("images") as string | string[];
18 | let errors: ProductErrors = {};
19 |
20 | if (!product || product.trim().length === 0) {
21 | errors.product = "product error message";
22 | }
23 | if (!category || category.trim().length === 0) {
24 | errors.category = "category error message";
25 | }
26 | if (!description || description.trim().length === 0) {
27 | errors.description = "description error message";
28 | }
29 | if (!price || Number(price) <= 0) {
30 | errors.price = "price error message";
31 | }
32 | if (Number(discount) > Number(price)) {
33 | errors.discount = "discount error message";
34 | }
35 | if (!images || images.length === 0) {
36 | errors.image = "image error message";
37 | }
38 | if (!status || status.trim().length === 0) {
39 | errors.status = "status error message";
40 | }
41 |
42 | if (Object.keys(errors).length > 0) {
43 | return errors;
44 | }
45 |
46 | if (category !== "laptops" && category !== "watches" && category !== "phones")
47 | return;
48 | images = typeof images === "string" ? images.split(",") : [""];
49 |
50 | try {
51 | await prisma.product.create({
52 | data: {
53 | name: product,
54 | description,
55 | status,
56 | price: Number(price),
57 | images,
58 | category,
59 | isFeatured: featured,
60 | discount: Number(discount) < 0 ? 0 : Number(discount),
61 | },
62 | });
63 | if (isArabic) {
64 | revalidatePath("/ar/dashboard", "layout");
65 | } else {
66 | revalidatePath("/en/dashboard", "layout");
67 | }
68 | return { success: true };
69 | } catch {
70 | return { success: false };
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/app/_components/ui/ToggleTheme.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useTranslate } from "@/app/_hooks/useTranslate";
3 | import {
4 | DropdownMenu,
5 | DropdownMenuContent,
6 | DropdownMenuItem,
7 | DropdownMenuSeparator,
8 | DropdownMenuTrigger,
9 | } from "@/components/ui/dropdown-menu";
10 | import IconButton from "./IconButton";
11 | import { useTheme } from "next-themes";
12 | import {
13 | MdOutlineDarkMode,
14 | MdOutlineLightMode,
15 | MdDevices,
16 | } from "react-icons/md";
17 |
18 | function ToggleTheme({ isDashboard = false }: { isDashboard?: boolean }) {
19 | const { setTheme, theme, systemTheme } = useTheme();
20 |
21 | const { t, isArabic } = useTranslate();
22 | const currentTheme = theme === "system" ? systemTheme : theme;
23 |
24 | return (
25 |
24 |
48 |
33 |
39 |
40 |
46 |
47 |
49 | {images.map((image, index) => (
50 |
63 |
51 | setMainIndex(index)}
59 | />
60 |
61 | ))}
62 |
42 |
69 | 43 | {t("delete title banner")}{" "} 44 | ({banner.title}) 45 |
46 |47 | {t("delete title desc banner")} 48 |
49 |
58 |
61 |
67 |
68 | 32 | {user?.firstName} {user?.lastName} 33 |
34 |37 | {user?.email} 38 |
39 |50 | {t("delete title")}{" "} 51 | ({product.name}) 52 |
53 |54 | {t("delete title desc")} 55 |
56 |
65 |
68 |
74 |
75 | {children}
33 | 2 | 3 |
4 | 
5 |
6 |
7 |
8 | MarketKing
9 |My e-commerce web app, built using Next.js, is fully responsive and includes an admin dashboard, Stripe payment integration, and user authentication (login and sign-up pages). The app supports multiple languages (English and Arabic) and features a toggle for theme mode, offering an improved user experience and enhanced performance. 10 | live demo , (If you see an error message or run into an issue, please create bug report. thank you)
11 | 12 | --- 13 | 14 |
15 | 
16 |
17 |
18 | 
19 |
20 |
21 | 
22 |
23 |
24 | 
25 |
26 |
27 |
28 | ---
29 |
30 | ## Primary technologies employed
31 |
32 | 
33 |
34 | ## Lighthouse project performance
35 |
36 |
37 | 
38 |
39 |
40 |
41 | ## Building and running on localhost
42 |
43 | First install dependencies:
44 |
45 | ```sh
46 | npm install
47 | ```
48 |
49 | To run in hot module reloading mode:
50 |
51 | ```sh
52 | npm run dev
53 | ```
54 |
55 | To create a production build:
56 |
57 | ```sh
58 | npm run build
59 | ```
60 |
61 | ## App User Experience
62 | (note) If your internet speed is slow, please be patient as the GIF may take some time to download
63 |
64 | 
65 |
66 |
67 | ---
68 |
69 |
70 | 
71 |
72 |
--------------------------------------------------------------------------------
/app/_components/ui/Filter.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useTranslate } from "@/app/_hooks/useTranslate";
3 | import { usePathname, useRouter, useSearchParams } from "next/navigation";
4 |
5 | const sortArr = [
6 | { label: "All", name: "all" },
7 | { label: "Lowest", name: "lowest" },
8 | { label: "Highest", name: "highest" },
9 | ];
10 |
11 | const filterArr = [
12 | { label: "All", name: "all" },
13 | { label: "less-then-200", name: "less-then-200" },
14 | { label: "between-200-500", name: "between-200-500" },
15 | { label: "between-1000-5000", name: "between-1000-5000" },
16 | { label: "more-then-5000", name: "more-then-5000" },
17 | ];
18 |
19 | function Filter({ isMedium = false }: { isMedium?: boolean }) {
20 | const { t } = useTranslate();
21 | const searchParams = useSearchParams();
22 | const router = useRouter();
23 | const pathname = usePathname();
24 | const activeSort = searchParams.get("sort-price") || "all";
25 | const activeFilterPrice = searchParams.get("filter-price") || "all";
26 |
27 | const handleSort = (filter: string) => {
28 | const params = new URLSearchParams(searchParams);
29 | params.set("sort-price", filter);
30 | router.replace(`${pathname}?${params.toString()}`, { scroll: false });
31 | };
32 |
33 | const handleFilterPrice = (filter: string) => {
34 | const params = new URLSearchParams(searchParams);
35 | params.set("filter-price", filter);
36 | router.replace(`${pathname}?${params.toString()}`, { scroll: false });
37 | };
38 |
39 | return (
40 |
99 | );
100 | }
101 |
102 | export default Filter;
103 |
--------------------------------------------------------------------------------
/app/_components/marketking/CreateAccountForm.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import SubmitButton from "@/app/_components/ui/SubmitButton";
3 | import { useTranslate } from "@/app/_hooks/useTranslate";
4 | import MyLink from "../ui/MyLink";
5 | import { useFormState } from "react-dom";
6 | import { createAccount } from "@/app/_actions/createAccount";
7 | import ErrorMessage from "../ui/ErrorMessage";
8 | import { useEffect } from "react";
9 | import toast from "react-hot-toast";
10 |
11 | function CreateAccountForm() {
12 | const [state, formAction] = useFormState(createAccount, {});
13 | const { t } = useTranslate();
14 |
15 | useEffect(() => {
16 | if (state.success === false) {
17 | toast.error(t("error create email"));
18 | }
19 | }, [state.success, t]);
20 | return (
21 |
111 | );
112 | }
113 |
114 | export default CreateAccountForm;
115 |
--------------------------------------------------------------------------------
/app/[locale]/dashboard/orders/page.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslate } from "@/app/_hooks/useTranslate";
2 | import prisma from "@/app/_lib/db";
3 | import { formatDate, getTranslate } from "@/app/_utils/helpers";
4 | import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
5 |
6 | export async function generateMetadata({
7 | params: { locale },
8 | }: {
9 | params: { locale: string };
10 | }) {
11 | const t = await getTranslations({ locale, namespace: "metadata" });
12 |
13 | return {
14 | title: `${t("Orders")}`,
15 | };
16 | }
17 |
18 | export default async function OrdersPage({
19 | params: { locale },
20 | }: {
21 | params: { locale: string };
22 | }) {
23 | unstable_setRequestLocale(locale);
24 |
25 | const orders = await prisma.order.findMany({
26 | select: {
27 | amount: true,
28 | createdAt: true,
29 | status: true,
30 | id: true,
31 | User: {
32 | select: {
33 | firstName: true,
34 | email: true,
35 | profileImage: true,
36 | lastName: true,
37 | },
38 | },
39 | },
40 | orderBy: {
41 | createdAt: "desc",
42 | },
43 | });
44 | const { t } = await getTranslate();
45 | return (
46 |
48 |
53 |
54 |
94 | ) : (
95 |
100 | {t("Orders")}
49 |{t("Orders label")}
50 | 51 | {orders && orders.length > 0 ? ( 52 || {t("Customer")} | 56 |{t("Type")} | 57 |{t("Status")} | 58 |{t("Date")} | 59 |{t("Amount")} | 60 |
|---|---|---|---|---|
| 69 | 73 | {order.User?.firstName} {order.User?.lastName} 74 | 75 | 79 | {order.User?.email} 80 | 81 | | 82 |{t("Order")} | 83 |{t(order.status)} | 84 |85 | {formatDate(order.createdAt)} 86 | | 87 |88 | ${new Intl.NumberFormat("en-Us").format(order.amount / 100)} 89 | | 90 |
96 | {t("not found orders")} 97 |
98 | )} 99 |{t("No Featured Products")}
69 | ); 70 | return ( 71 | 124 | ); 125 | } 126 | 127 | export default MarqueeProducts; 128 | -------------------------------------------------------------------------------- /app/_components/marketking/EditProfileForm.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useTranslate } from "@/app/_hooks/useTranslate"; 3 | import { UploadButton } from "@/app/_lib/uploadthing"; 4 | import { User } from "@prisma/client"; 5 | import Image from "next/image"; 6 | import { useState } from "react"; 7 | import toast from "react-hot-toast"; 8 | import SubmitButton from "../ui/SubmitButton"; 9 | import { useFormState } from "react-dom"; 10 | import { editProfile } from "@/app/_actions/editProfile"; 11 | import ErrorMessage from "../ui/ErrorMessage"; 12 | 13 | function EditProfileForm({ user }: { user: User }) { 14 | const [image, setImage] = useState{t("Banners")}
28 |{t("Manage Banners")}
29 | {banners.length <= 0 ? ( 30 |{t("No Banner")}
31 | ) : ( 32 || {t("Image")} | 36 |{t("title")} | 37 |{t("Actions")} | 38 |
|---|---|---|
| {t(titleWithCap)} | 60 |
63 | |
92 |
40 |
41 |
42 | {isArabic ?
44 |
45 |
47 |
48 | {customerOrder && customerOrder.length > 0 ? (
49 | <>
50 | {t("Customer Order")}
46 |-
51 | {customerOrder.map((order) => (
52 |
-
56 |
57 | 103 |58 |65 | 66 | 67 | {t(order.status)} 68 | 69 | 70 |59 | 60 | 61 | {" "} 62 | {t("Bill")}#{order.amount} 63 |
64 |71 |89 | 90 |72 | {t("Date")} 73 |{" "} 80 |74 | {Intl.DateTimeFormat( 75 | isArabic ? "ar-EG" : "en-US", 76 | {} 77 | ).format(order.createdAt)} 78 |
79 |81 | {t("Total Price")} 82 |88 |83 | {new Intl.NumberFormat("en-Us").format( 84 | order.amount / 100 85 | )} 86 |
87 |
91 | 92 |93 |102 |94 | {t("Status")} 95 |{" "} 97 |{t(order.status)}
96 |98 | {t("Reference")} 99 |101 |{order.id.slice(0, 5)}
100 |
104 | ))}
105 |
110 |
115 | {t("Shop Now")}{" "}
116 | {isArabic ? "←" : "→"}
117 |
118 |
119 | )}
120 | {t("No Orders Found")}
111 |-
48 | {user.favoriteProducts.map((fav) => (
49 |
-
50 |
56 | 90 |60 | 89 |61 |68 |67 | 72 | {fav.product.name} 73 |
74 | 75 | ${newPrice(fav.product.price, fav.product.discount)} 76 | {oldPrice(fav.product.price, fav.product.discount) && ( 77 |78 | ($ 79 | {oldPrice(fav.product.price, fav.product.discount)}) 80 |81 | )} 82 | {fav.product.isFeatured && ( 83 | 84 | {t("Featured")} 85 | 86 | )} 87 | 88 |
91 | ))}
92 |