From 4299e6ffbd01fd4e77ba01e0366b563d24e53b8c Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:10:48 +0330
Subject: [PATCH 01/14] added address item

---
 frontend/components/cart/AddressItem.vue | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 frontend/components/cart/AddressItem.vue

diff --git a/frontend/components/cart/AddressItem.vue b/frontend/components/cart/AddressItem.vue
new file mode 100644
index 0000000..4f02ff5
--- /dev/null
+++ b/frontend/components/cart/AddressItem.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div></div>
+</template>
+
+<style scoped></style>

From 3f2d7caf1d9a951b2ebfb2de240a837870cc67e0 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:10:57 +0330
Subject: [PATCH 02/14] added cart item

---
 frontend/components/cart/CartItem.vue | 138 ++++++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 frontend/components/cart/CartItem.vue

diff --git a/frontend/components/cart/CartItem.vue b/frontend/components/cart/CartItem.vue
new file mode 100644
index 0000000..df74af6
--- /dev/null
+++ b/frontend/components/cart/CartItem.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+// state
+
+const counter = ref(1);
+
+// methods
+
+const handleDeleteFromCart = () => {};
+</script>
+
+<template>
+    <div
+        class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-gray-300 rounded-xl bg-gray-50"
+    >
+        <div class="flex items-center justify-start w-full gap-2.5 lg:gap-4">
+            <div
+                class="size-[88px] aspect-square shrink-0 rounded-100 border border-gray-300 overflow-hidden"
+            >
+                <img
+                    src="../assets/images/products/product-1.png"
+                    class="object-cover size-full"
+                    alt="product"
+                />
+            </div>
+
+            <div class="flex flex-col w-full gap-4">
+                <span class="font-semibold lg:text-[1.125rem] text-gray-900">
+                    فشارسنج بازویی امرن Omron M3
+                </span>
+
+                <div class="items-center justify-between hidden w-full lg:flex">
+                    <div class="flex items-center">
+                        <button
+                            @click="counter++"
+                            class="border size-10 flex-center rounded-100 border-gray-400"
+                        >
+                            <Icon name="bi:plus" class="**:stroke-gray-800" />
+                        </button>
+
+                        <div class="size-10 flex-center">{{ counter }}</div>
+
+                        <button
+                            @click="
+                                counter > 1 ? counter-- : handleDeleteFromCart
+                            "
+                            class="border size-10 flex-center rounded-100 border-gray-400"
+                        >
+                            <Icon
+                                v-if="counter == 1"
+                                name="bi:dash"
+                                class="**:stroke-gray-800"
+                            />
+                            <Icon
+                                v-else
+                                name="bi:trash"
+                                class="**:fill-red-700"
+                            />
+                        </button>
+                    </div>
+
+                    <span class="text-[1.25rem] text-gray-900 font-semibold">
+                        ۲,۸۹۱,۰۰۰&nbsp;تومان
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex items-center justify-between w-full lg:hidden">
+            <div class="flex items-center">
+                <button
+                    class="border size-10 flex-center rounded-100 border-gray-400"
+                >
+                    <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        class="stroke-gray-800"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M3.33334 8H12.6667"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        ></path>
+                        <path
+                            d="M8 3.33325V12.6666"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        ></path>
+                    </svg>
+                </button>
+
+                <div class="size-10 text-[1.125rem] flex-center">1</div>
+
+                <button
+                    class="border size-10 flex-center rounded-100 border-gray-400"
+                >
+                    <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        class="stroke-status-error-primary"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M2 4H14"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        ></path>
+                        <path
+                            d="M12.6667 4V13.3333C12.6667 14 12 14.6667 11.3333 14.6667H4.66668C4.00001 14.6667 3.33334 14 3.33334 13.3333V4"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        ></path>
+                        <path
+                            d="M5.33334 3.99992V2.66659C5.33334 1.99992 6.00001 1.33325 6.66668 1.33325H9.33334C10 1.33325 10.6667 1.99992 10.6667 2.66659V3.99992"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        ></path>
+                    </svg>
+                </button>
+            </div>
+
+            <span class="text-[1.125rem] text-gray-900 font-semibold">
+                ۲,۸۹۱,۰۰۰&nbsp;تومان
+            </span>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>

From 98a7cb9284f66ba41cf4b3b67f0c396d856321b9 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:11:06 +0330
Subject: [PATCH 03/14] added minimal cart item

---
 frontend/components/cart/MinimalCartItem.vue | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 frontend/components/cart/MinimalCartItem.vue

diff --git a/frontend/components/cart/MinimalCartItem.vue b/frontend/components/cart/MinimalCartItem.vue
new file mode 100644
index 0000000..4f02ff5
--- /dev/null
+++ b/frontend/components/cart/MinimalCartItem.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div></div>
+</template>
+
+<style scoped></style>

From acfd77ac28de0b7aadb6bce872fb2e1f75b680d4 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:11:22 +0330
Subject: [PATCH 04/14] removed px

---
 frontend/components/global/product-detail/ProductsSlider.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/components/global/product-detail/ProductsSlider.vue b/frontend/components/global/product-detail/ProductsSlider.vue
index 5f9870f..bb63189 100644
--- a/frontend/components/global/product-detail/ProductsSlider.vue
+++ b/frontend/components/global/product-detail/ProductsSlider.vue
@@ -23,11 +23,10 @@ const swiper_instance = ref<SwiperClass | null>(null);
 const onSwiper = (swiper: SwiperClass) => {
     swiper_instance.value = swiper;
 };
-
 </script>
 
 <template>
-    <section class="w-full flex flex-col gap-[4rem] py-[5rem] container">
+    <section class="w-full flex flex-col gap-[4rem] px-0 py-[5rem] container">
         <div class="w-full flex justify-between items-center">
             <span class="text-black typo-h-3">
                 {{ title }}

From 29211e1c03431a94d7ce314fcc0a70e9e8c24bb7 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:11:33 +0330
Subject: [PATCH 05/14] added cart page

---
 frontend/layouts/Cart.vue | 118 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 frontend/layouts/Cart.vue

diff --git a/frontend/layouts/Cart.vue b/frontend/layouts/Cart.vue
new file mode 100644
index 0000000..d369341
--- /dev/null
+++ b/frontend/layouts/Cart.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+// state
+
+const route = useRoute();
+
+// computed
+
+const pageTitle = computed(() => route.meta.pageTitle);
+const prevPage = computed(() => route.meta.prevPage);
+const nextPage = computed(() => route.meta.nextPage);
+</script>
+
+<template>
+    <div
+        class="w-full flex flex-col-center persian-number font-iran-yekan-x"
+        dir="rtl"
+    >
+        <Header />
+        <main
+            class="w-full overflow-x-hidden container flex flex-col gap-[5rem]"
+        >
+            <div class="w-full flex flex-col">
+                <div
+                    class="flex flex-col items-center justify-center gap-4 py-[5rem] lg:gap-0 lg:flex-row"
+                >
+                    <div
+                        class="flex items-center justify-start w-full lg:w-3/12"
+                    >
+                        <NuxtLink
+                            v-if="prevPage"
+                            :to="{ name: prevPage.name }"
+                            class="flex items-center gap-2 text-sm lg:text-[1rem]"
+                        >
+                            <Icon
+                                name="bi:arrow-right"
+                                class="**:stroke-cyan-400"
+                            />
+                            <span class="font-bold text-cyan-400">
+                                {{ prevPage.label }}
+                            </span>
+                        </NuxtLink>
+                    </div>
+
+                    <h1
+                        class="w-full text-center typo-h-3 lg:w-6/12 title-large"
+                    >
+                        {{ pageTitle }}
+                    </h1>
+
+                    <div class="hidden w-3/12 shrink-0 lg:block">&nbsp;</div>
+                </div>
+                <div
+                    class="w-full flex flex-col items-center relative justify-between gap-8 lg:gap-6 lg:flex-row lg:items-start"
+                >
+                    <div class="flex flex-col w-full gap-4 lg:gap-6 lg:w-9/12">
+                        <slot />
+                    </div>
+
+                    <div
+                        class="space-y-[1.25rem] bg-gray-50 p-4 sticky top-44 w-full lg:w-3/12 transition-all border border-gray-300 rounded-xl"
+                    >
+                        <div
+                            class="flex items-center justify-between w-full text-gray-800"
+                        >
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                جمع سبد خرید:
+                            </span>
+
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                ۳,۲۹۱,۰۰۰ تومان
+                            </span>
+                        </div>
+
+                        <div
+                            class="flex items-center justify-between w-full text-status-error-primary"
+                        >
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                تخفیف:
+                            </span>
+
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                ۹۰۰,۰۰۰ تومان
+                            </span>
+                        </div>
+
+                        <div
+                            class="flex items-center justify-between w-full text-gray-900"
+                        >
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                جمع کل:
+                            </span>
+
+                            <span class="max-w-1/2 text-sm lg:text-[1rem]">
+                                ۲,۳۹۱,۰۰۰ تومان
+                            </span>
+                        </div>
+
+                        <NuxtLink :to="{ name: nextPage.name }">
+                            <Button
+                                start-icon="bi:arrow-right"
+                                class="w-full rounded-full"
+                            >
+                                {{ nextPage.label }}
+                            </Button>
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+            <ProductsSlider title="دیگران این محصولات را هم خریده‌اند" />
+        </main>
+        <div class="w-full flex-col flex">
+            <ServiceHighlights />
+            <Footer />
+        </div>
+    </div>
+</template>
+
+<style scoped></style>

From 8982acb801fa5cc2d898c6d1b375c097badd2b9b Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:11:41 +0330
Subject: [PATCH 06/14] added none layout

---
 frontend/layouts/None.vue | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 frontend/layouts/None.vue

diff --git a/frontend/layouts/None.vue b/frontend/layouts/None.vue
new file mode 100644
index 0000000..844f196
--- /dev/null
+++ b/frontend/layouts/None.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+    <main class="w-full h-[100svh] font-iran-yekan-x">
+        <slot />
+    </main>
+</template>
+
+<style scoped></style>

From 4fa5b9620b19826f91c44c7eca5ac971811dad72 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:12:07 +0330
Subject: [PATCH 07/14] added category page

---
 frontend/pages/category.vue | 88 +++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 frontend/pages/category.vue

diff --git a/frontend/pages/category.vue b/frontend/pages/category.vue
new file mode 100644
index 0000000..c687e9c
--- /dev/null
+++ b/frontend/pages/category.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import useGetCategories from "~/composables/api/product/useGetCategories";
+
+// state
+
+const { data: categories, suspense } = useGetCategories();
+
+const search = ref("");
+const debouncedSearch = refDebounced(search, 300);
+
+// computed
+
+const filteredCategories = computed(() => {
+    if (debouncedSearch.value.length > 0) {
+        return categories.value!.filter((cat) =>
+            cat.name.includes(debouncedSearch.value)
+        );
+    }
+
+    return categories.value!;
+});
+
+// lifecycle
+
+onServerPrefetch(async () => {
+    const response = await suspense();
+
+    if (response.isError) {
+        throw createError({
+            statusCode: 500,
+            statusMessage: `Error in categories page prefetch`,
+        });
+    }
+});
+</script>
+
+<template>
+    <div class="container">
+        <div class="py-[5rem] flex gap-6 justify-between items-center">
+            <span class="typo-h-3 text-black">دسته بندی ها</span>
+            <Input
+                class="max-w-[400px] w-full"
+                variant="outlined"
+                placeholder="جستجو..."
+                v-model="search"
+            >
+                <template #endItem>
+                    <div class="flex items-center gap-1">
+                        <Icon
+                            class="translate-y-[-1px]"
+                            name="ci:search"
+                            size="24"
+                        />
+                    </div>
+                </template>
+            </Input>
+        </div>
+        <Transition name="fade" mode="out-in">
+            <div
+                v-if="filteredCategories.length !== 0"
+                v-auto-animate
+                class="grid grid-cols-3 gap-4 w-full mt-12"
+            >
+                <CategoryCard
+                    v-for="category in filteredCategories"
+                    :key="category.id"
+                    :id="category.id"
+                    :category="category.name"
+                    picture="/img/product-1.jpg"
+                    :count="20"
+                    description="یک دسته بندی تستasdasd"
+                    dark-layer
+                />
+            </div>
+
+            <div v-else class="flex w-full mt-12">
+                <div
+                    class="flex-col flex-grow py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
+                >
+                    <Icon name="bi:search" size="50" class="**:fill-gray-500" />
+                    <span class="text-lg text-gray-500">
+                        دسته بندی یافت نشد :(
+                    </span>
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>

From 140d2b112bf679c8c4f710c5be0f5f0e23536880 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:12:14 +0330
Subject: [PATCH 08/14] added checkout page

---
 frontend/pages/checkout.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 frontend/pages/checkout.vue

diff --git a/frontend/pages/checkout.vue b/frontend/pages/checkout.vue
new file mode 100644
index 0000000..ada8e34
--- /dev/null
+++ b/frontend/pages/checkout.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// meta
+
+definePageMeta({
+    layout: "none",
+});
+</script>
+
+<template>
+    <div class="size-full flex-center"></div>
+</template>
+
+<style scoped></style>

From 976207065addc5e2a82da1de494fbb15503c2465 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:12:34 +0330
Subject: [PATCH 09/14] changed title size

---
 frontend/pages/products.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/products.vue b/frontend/pages/products.vue
index 4561e8b..f6bf05e 100644
--- a/frontend/pages/products.vue
+++ b/frontend/pages/products.vue
@@ -65,7 +65,7 @@ watch(
                     <span>/</span>
                     <span>همه</span>
                 </div> -->
-                <h1 class="typo-hero-2">همه محصولات</h1>
+                <h1 class="typo-h-3">همه محصولات</h1>
             </div>
 
             <div class="w-full flex items-center justify-end gap-4">
@@ -88,7 +88,7 @@ watch(
             />
         </ul>
         <div v-else class="w-full h-max">
-            <div v-if="!products?.length" class="flex flex-grow px-5 w-full">
+            <div v-if="!products?.length" class="flex flex-grow w-full">
                 <div
                     class="flex-col flex-grow py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
                 >

From d02419ac6433b747154580593c715bfc25ddc89a Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:12:50 +0330
Subject: [PATCH 10/14] changed sign in route folder

---
 frontend/pages/signin.vue | 234 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 234 insertions(+)
 create mode 100644 frontend/pages/signin.vue

diff --git a/frontend/pages/signin.vue b/frontend/pages/signin.vue
new file mode 100644
index 0000000..ada01c8
--- /dev/null
+++ b/frontend/pages/signin.vue
@@ -0,0 +1,234 @@
+<script lang="ts" setup>
+
+// import
+
+import { helpers, required } from "@vuelidate/validators";
+import { useVuelidate } from "@vuelidate/core";
+import useOtp from "~/composables/api/auth/useOtp";
+import useSignIn from "~/composables/api/auth/useSignIn";
+import { definePageMeta } from "#imports";
+import useGetAccount from "~/composables/api/account/useGetAccount";
+import { useAuth } from "~/composables/api/auth/useAuth";
+import { useToast } from "~/composables/global/useToast";
+import { useTimer } from "~/composables/global/useTimer";
+
+// types
+
+type LoginInfo = {
+    phone: string;
+};
+
+// meta
+
+definePageMeta({
+    middleware: ["check-is-not-logged-in"]
+});
+
+// state
+
+const { addToast } = useToast();
+
+const { updateToken, updateRefreshToken } = useAuth();
+
+const { refetch: refetchAccount } = useGetAccount();
+
+const showOtp = ref(false);
+const otpCode = ref([]);
+
+const formRules = computed(() => {
+    return {
+        phone: {
+            required: helpers.withMessage("Phone is required", required),
+            phoneValidator: helpers.regex(/^[1-9][0-9]{9}$/)
+        }
+    };
+});
+
+const loginInfo = ref<LoginInfo>({
+    phone: ""
+});
+
+const formValidator$ = useVuelidate(formRules, loginInfo);
+
+const {
+    timer: otpBlockerTimePassed,
+    start: startOtpBlocker,
+    reset: resetOtpBlocker,
+    isPending: isResendOtpBlocked
+} = useTimer({
+    duration: 5000
+});
+
+const { mutateAsync: sendOtp, isPending: sendOtpIsPending } = useOtp();
+const { mutateAsync: signIn, isPending: signInIsPending, status: signInStatus } = useSignIn();
+
+// computed
+
+const sendOtpHandler = async () => {
+    if (!sendOtpIsPending.value) {
+        try {
+            await sendOtp({
+                phone: `0${loginInfo.value.phone}`
+            });
+
+            addToast({
+                message: "کد برای شما ارسال شد",
+                options: {
+                    status: "success"
+                }
+            });
+
+            showOtp.value = true;
+
+        } catch (e) {
+            addToast({
+                message: "مشکلی پیش آمده",
+                options: {
+                    status: "error"
+                }
+            });
+        }
+    }
+};
+
+const handleLogin = async () => {
+    if (!showOtp.value) {
+        await formValidator$.value.$validate();
+
+        if (!formValidator$.value.$errors.length) {
+            await sendOtpHandler();
+        }
+    } else {
+        try {
+            const response = await signIn({
+                otp: otpCode.value.join(""),
+                phone: `0${loginInfo.value.phone}`
+            });
+
+            updateToken(response.access);
+            updateRefreshToken(response.refresh);
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            await refetchAccount();
+
+            addToast({
+                message: "با موفقیت وارد شدید",
+                options: {
+                    status: "success"
+                }
+            });
+
+            navigateTo("/");
+        } catch (e) {
+            otpCode.value = [];
+            addToast({ message: "مشکلی پیش آمده" });
+        }
+    }
+};
+
+const resendOtp = async () => {
+    try {
+        await sendOtpHandler();
+        resetOtpBlocker();
+        startOtpBlocker();
+    } catch (e) {
+        resetOtpBlocker();
+    }
+};
+
+const resetForm = () => {
+    loginInfo.value.phone = "";
+    formValidator$.value.$reset();
+    otpCode.value = [];
+    showOtp.value = false;
+};
+
+</script>
+
+<template>
+    <div class="container min-h-[700px] flex flex-col items-center justify-center">
+        <h1 class="typo-hero-2">
+            فرم ورود
+        </h1>
+        <form
+            @submit.prevent
+            class="max-w-[500px] w-full mt-12"
+        >
+            <div
+                v-if="!showOtp"
+                class="flex items-center gap-2 w-full"
+            >
+                <Input
+                    class="w-full"
+                    v-model="loginInfo.phone"
+                    placeholder="9380123456"
+                    dir="ltr"
+                    :error="formValidator$.phone.$error"
+                >
+                    <template #startItem>
+                        <span class="text-slate-500">
+                            +98
+                        </span>
+                    </template>
+                </Input>
+                <div class="flex items-center gap-1">
+                    <Icon class="translate-y-[-1px]" name="twemoji:flag-iran" size="24" />
+                </div>
+            </div>
+
+            <OtpInput
+                v-else
+                v-model="otpCode"
+                :status="signInStatus === 'success' ? 'success' : signInStatus === 'error' ? 'error' : 'idle'"
+                :disabled="signInIsPending || sendOtpIsPending"
+                :autofocus="true"
+                @complete="handleLogin"
+            />
+
+            <Button
+                v-if="!showOtp"
+                class="rounded-full w-full mt-4"
+                type="submit"
+                @click="handleLogin"
+                :loading="sendOtpIsPending"
+                :disabled="sendOtpIsPending"
+            >
+                ارسال کد
+            </Button>
+
+            <div
+                v-else
+                class="flex items-center w-full gap-4 mt-4"
+            >
+                <Button
+                    class="rounded-full w-full mt-4"
+                    type="button"
+                    variant="secondary"
+                    @click="resetForm"
+                    :disabled="signInIsPending || sendOtpIsPending"
+                >
+                    تغییر شماره
+                </Button>
+                <Button
+                    class="rounded-full w-full mt-4"
+                    type="submit"
+                    @click="resendOtp"
+                    :loading="signInIsPending || sendOtpIsPending"
+                    :disabled="signInIsPending || isResendOtpBlocked || sendOtpIsPending"
+                >
+                    ارسال مجدد کد
+                    {{ isResendOtpBlocked ? otpBlockerTimePassed : "" }}
+                </Button>
+            </div>
+
+            <div class="flex items-center gap-2 justify-center mt-6">
+                <span>
+                    بازگشت به فروشگاه
+                </span>
+                <Icon
+                    name="ci:left-rotation"
+                    size="24"
+                />
+            </div>
+        </form>
+    </div>
+</template>
\ No newline at end of file

From 3e885fb24ac86f9edd4547b864ef926966264150 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:13:08 +0330
Subject: [PATCH 11/14] added checkout page with modal

---
 frontend/pages/cart/checkout.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 frontend/pages/cart/checkout.vue

diff --git a/frontend/pages/cart/checkout.vue b/frontend/pages/cart/checkout.vue
new file mode 100644
index 0000000..09a8d7b
--- /dev/null
+++ b/frontend/pages/cart/checkout.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+definePageMeta({
+    layout: "cart",
+    pageTitle: "ثبت سفارش",
+    prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
+    nextPage: { name: "checkout", label: "پرداخت" },
+});
+</script>
+
+<template>
+    <div></div>
+</template>
+
+<style scoped></style>

From 5093f91a0214baf9866ebfbc4742957c18c0d192 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:13:19 +0330
Subject: [PATCH 12/14] added delivery page

---
 frontend/pages/cart/delivery.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 frontend/pages/cart/delivery.vue

diff --git a/frontend/pages/cart/delivery.vue b/frontend/pages/cart/delivery.vue
new file mode 100644
index 0000000..552079e
--- /dev/null
+++ b/frontend/pages/cart/delivery.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+definePageMeta({
+    layout: "cart",
+    pageTitle: "انتخاب آدرس",
+    prevPage: { name: "cart", label: "سبد خرید" },
+    nextPage: { name: "cart-checkout", label: "تسویه حساب" },
+});
+</script>
+
+<template>
+    <div class="flex flex-col w-full gap-6"></div>
+</template>
+
+<style scoped></style>

From a0a7f650ea73e64f385b147bee001a161d2c733a Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:13:36 +0330
Subject: [PATCH 13/14] added cart main page

---
 frontend/pages/cart/index.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 frontend/pages/cart/index.vue

diff --git a/frontend/pages/cart/index.vue b/frontend/pages/cart/index.vue
new file mode 100644
index 0000000..44dd54b
--- /dev/null
+++ b/frontend/pages/cart/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+definePageMeta({
+    layout: "cart",
+    pageTitle: "سبد خرید",
+    nextPage: { name: "cart-delivery", label: "انتخاب آدرس" },
+});
+</script>
+
+<template>
+    <div class="flex flex-col w-full gap-4 lg:gap-6">
+        <CartItem v-for="i in 3" />
+    </div>
+</template>
+
+<style scoped></style>

From 5aea2057d2f1181a53c99a1503e36dc8f9fe15ed Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:13:49 +0330
Subject: [PATCH 14/14] changed route folder

---
 frontend/pages/category/index.vue |  88 -----------
 frontend/pages/signin/index.vue   | 234 ------------------------------
 2 files changed, 322 deletions(-)
 delete mode 100644 frontend/pages/category/index.vue
 delete mode 100644 frontend/pages/signin/index.vue

diff --git a/frontend/pages/category/index.vue b/frontend/pages/category/index.vue
deleted file mode 100644
index fbb945d..0000000
--- a/frontend/pages/category/index.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts" setup>
-
-import useGetCategories from "~/composables/api/product/useGetCategories";
-
-// state
-
-const { data: categories, suspense } = useGetCategories();
-
-const search = ref("");
-const debouncedSearch = refDebounced(search, 300);
-
-// computed
-
-const filteredCategories = computed(() => {
-    if (debouncedSearch.value.length > 0) {
-        return categories.value!.filter(cat => cat.name.includes(debouncedSearch.value));
-    }
-
-    return categories.value!;
-});
-
-// lifecycle
-
-onServerPrefetch(async () => {
-    const response = await suspense();
-
-    if (response.isError) {
-        throw createError({
-            statusCode: 500,
-            statusMessage: `Error in categories page prefetch`
-        });
-    }
-});
-
-</script>
-
-<template>
-    <div class="container">
-        <div class="mt-20 flex gap-6 justify-between items-center">
-            <span class="typo-h-3 text-black">دسته بندی ها</span>
-            <Input
-                class="max-w-[400px] w-full"
-                variant="outlined"
-                placeholder="جستجو..."
-                v-model="search"
-            >
-                <template #endItem>
-                    <div class="flex items-center gap-1">
-                        <Icon class="translate-y-[-1px]" name="ci:search" size="24" />
-                    </div>
-                </template>
-            </Input>
-        </div>
-        <Transition name="fade" mode="out-in">
-            <div
-                v-if="filteredCategories.length !== 0"
-                v-auto-animate
-                class="grid grid-cols-3 gap-4 w-full mt-12"
-            >
-                <CategoryCard
-                    v-for="category in filteredCategories"
-                    :key="category.id"
-                    :id="category.id"
-                    :category="category.name"
-                    picture="/img/product-1.jpg"
-                    :count="20"
-                    description="یک دسته بندی تستasdasd"
-                    dark-layer
-                />
-            </div>
-
-            <div
-                v-else
-                class="flex w-full mt-12"
-            >
-                <div
-                    class="flex-col flex-grow py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
-                >
-                    <Icon name="bi:search" size="50" class="**:fill-gray-500" />
-                    <span class="text-lg text-gray-500">
-                        دسته بندی یافت نشد :(
-                    </span>
-                </div>
-            </div>
-        </Transition>
-
-    </div>
-</template>
\ No newline at end of file
diff --git a/frontend/pages/signin/index.vue b/frontend/pages/signin/index.vue
deleted file mode 100644
index ada01c8..0000000
--- a/frontend/pages/signin/index.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-<script lang="ts" setup>
-
-// import
-
-import { helpers, required } from "@vuelidate/validators";
-import { useVuelidate } from "@vuelidate/core";
-import useOtp from "~/composables/api/auth/useOtp";
-import useSignIn from "~/composables/api/auth/useSignIn";
-import { definePageMeta } from "#imports";
-import useGetAccount from "~/composables/api/account/useGetAccount";
-import { useAuth } from "~/composables/api/auth/useAuth";
-import { useToast } from "~/composables/global/useToast";
-import { useTimer } from "~/composables/global/useTimer";
-
-// types
-
-type LoginInfo = {
-    phone: string;
-};
-
-// meta
-
-definePageMeta({
-    middleware: ["check-is-not-logged-in"]
-});
-
-// state
-
-const { addToast } = useToast();
-
-const { updateToken, updateRefreshToken } = useAuth();
-
-const { refetch: refetchAccount } = useGetAccount();
-
-const showOtp = ref(false);
-const otpCode = ref([]);
-
-const formRules = computed(() => {
-    return {
-        phone: {
-            required: helpers.withMessage("Phone is required", required),
-            phoneValidator: helpers.regex(/^[1-9][0-9]{9}$/)
-        }
-    };
-});
-
-const loginInfo = ref<LoginInfo>({
-    phone: ""
-});
-
-const formValidator$ = useVuelidate(formRules, loginInfo);
-
-const {
-    timer: otpBlockerTimePassed,
-    start: startOtpBlocker,
-    reset: resetOtpBlocker,
-    isPending: isResendOtpBlocked
-} = useTimer({
-    duration: 5000
-});
-
-const { mutateAsync: sendOtp, isPending: sendOtpIsPending } = useOtp();
-const { mutateAsync: signIn, isPending: signInIsPending, status: signInStatus } = useSignIn();
-
-// computed
-
-const sendOtpHandler = async () => {
-    if (!sendOtpIsPending.value) {
-        try {
-            await sendOtp({
-                phone: `0${loginInfo.value.phone}`
-            });
-
-            addToast({
-                message: "کد برای شما ارسال شد",
-                options: {
-                    status: "success"
-                }
-            });
-
-            showOtp.value = true;
-
-        } catch (e) {
-            addToast({
-                message: "مشکلی پیش آمده",
-                options: {
-                    status: "error"
-                }
-            });
-        }
-    }
-};
-
-const handleLogin = async () => {
-    if (!showOtp.value) {
-        await formValidator$.value.$validate();
-
-        if (!formValidator$.value.$errors.length) {
-            await sendOtpHandler();
-        }
-    } else {
-        try {
-            const response = await signIn({
-                otp: otpCode.value.join(""),
-                phone: `0${loginInfo.value.phone}`
-            });
-
-            updateToken(response.access);
-            updateRefreshToken(response.refresh);
-            await new Promise(resolve => setTimeout(resolve, 1000));
-            await refetchAccount();
-
-            addToast({
-                message: "با موفقیت وارد شدید",
-                options: {
-                    status: "success"
-                }
-            });
-
-            navigateTo("/");
-        } catch (e) {
-            otpCode.value = [];
-            addToast({ message: "مشکلی پیش آمده" });
-        }
-    }
-};
-
-const resendOtp = async () => {
-    try {
-        await sendOtpHandler();
-        resetOtpBlocker();
-        startOtpBlocker();
-    } catch (e) {
-        resetOtpBlocker();
-    }
-};
-
-const resetForm = () => {
-    loginInfo.value.phone = "";
-    formValidator$.value.$reset();
-    otpCode.value = [];
-    showOtp.value = false;
-};
-
-</script>
-
-<template>
-    <div class="container min-h-[700px] flex flex-col items-center justify-center">
-        <h1 class="typo-hero-2">
-            فرم ورود
-        </h1>
-        <form
-            @submit.prevent
-            class="max-w-[500px] w-full mt-12"
-        >
-            <div
-                v-if="!showOtp"
-                class="flex items-center gap-2 w-full"
-            >
-                <Input
-                    class="w-full"
-                    v-model="loginInfo.phone"
-                    placeholder="9380123456"
-                    dir="ltr"
-                    :error="formValidator$.phone.$error"
-                >
-                    <template #startItem>
-                        <span class="text-slate-500">
-                            +98
-                        </span>
-                    </template>
-                </Input>
-                <div class="flex items-center gap-1">
-                    <Icon class="translate-y-[-1px]" name="twemoji:flag-iran" size="24" />
-                </div>
-            </div>
-
-            <OtpInput
-                v-else
-                v-model="otpCode"
-                :status="signInStatus === 'success' ? 'success' : signInStatus === 'error' ? 'error' : 'idle'"
-                :disabled="signInIsPending || sendOtpIsPending"
-                :autofocus="true"
-                @complete="handleLogin"
-            />
-
-            <Button
-                v-if="!showOtp"
-                class="rounded-full w-full mt-4"
-                type="submit"
-                @click="handleLogin"
-                :loading="sendOtpIsPending"
-                :disabled="sendOtpIsPending"
-            >
-                ارسال کد
-            </Button>
-
-            <div
-                v-else
-                class="flex items-center w-full gap-4 mt-4"
-            >
-                <Button
-                    class="rounded-full w-full mt-4"
-                    type="button"
-                    variant="secondary"
-                    @click="resetForm"
-                    :disabled="signInIsPending || sendOtpIsPending"
-                >
-                    تغییر شماره
-                </Button>
-                <Button
-                    class="rounded-full w-full mt-4"
-                    type="submit"
-                    @click="resendOtp"
-                    :loading="signInIsPending || sendOtpIsPending"
-                    :disabled="signInIsPending || isResendOtpBlocked || sendOtpIsPending"
-                >
-                    ارسال مجدد کد
-                    {{ isResendOtpBlocked ? otpBlockerTimePassed : "" }}
-                </Button>
-            </div>
-
-            <div class="flex items-center gap-2 justify-center mt-6">
-                <span>
-                    بازگشت به فروشگاه
-                </span>
-                <Icon
-                    name="ci:left-rotation"
-                    size="24"
-                />
-            </div>
-        </form>
-    </div>
-</template>
\ No newline at end of file