fix: some duplications and tags

src/app/[name]/[id]/page.tsx

@@ -12,16 +12,16 @@ type Props = object
 
 function FoodPage({ }: Props) {
     const quantity = useReceiptStore(state => state.items[0]?.quantity || 0);
-
     const increment = useReceiptStore(state => state.increment);
     const decrement = useReceiptStore(state => state.decrement);
 
+    const price = 0; // TODO: Replace with actual price if needed
 
     return (
         <div className='w-full -translate-y-2'>
             <div className="relative w-full rounded-2xl overflow-hidden">
                 <Image
-                    className='w-full '
+                    className='w-full'
                     src={'/assets/images/food-preview-hq.png'}
                     alt='Food image'
                     height={100}
@@ -41,9 +41,9 @@ function FoodPage({ }: Props) {
 
             <div className="relative px-6 pt-6 pb-7.5 bg-white w-full rounded-3xl overflow-hidden -translate-y-6">
                 <div className="w-full inline-flex justify-between items-center">
-                    <div className="text-base font-bold">
+                    <h5 className="text-base font-bold">
                         کباب چوبی مخصوص
-                    </div>
+                    </h5>
                     <button className='p-2 bg-[#EAECF0] rounded-lg'>
                         <Heart size={24} className='fill-black' />
                     </button>
@@ -65,12 +65,12 @@ function FoodPage({ }: Props) {
                 </div>
 
                 <div className="mt-4 text-xs">
-                    محتویات: <br />
-                    گوشت، سبزیجات، پیاز، ادویه جات معطر و ....
+                    <p>محتویات:</p>
+                    <p>گوشت، سبزیجات، پیاز، ادویه جات معطر و ....</p>
                 </div>
 
                 <div className='mt-12 flex justify-between items-center'>
-                    <span dir='ltr'>{0} T</span>
+                    <span dir='ltr'>{price} T</span>
                     <motion.div
                         whileTap={{ scale: 1.05 }}
                         className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2"
@@ -81,7 +81,7 @@ function FoodPage({ }: Props) {
                                 className="inline-flex w-full justify-center items-center gap-2"
                             >
                                 <PlusIcon />
-                                <div className="text-sm2 pt-0.5 font-medium">افزودن</div>
+                                <span className="text-sm2 pt-0.5 font-medium">افزودن</span>
                             </button>
                         ) : (
                             <>
@@ -100,8 +100,6 @@ function FoodPage({ }: Props) {
                                 >
                                     {quantity}
                                 </motion.div>
-
-
                                 <button
                                     onClick={() => decrement(0)}
                                     className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
@@ -117,4 +115,4 @@ function FoodPage({ }: Props) {
     )
 }
 
-export default FoodPage
+export default FoodPage

src/app/[name]/about/AboutPage.tsx

@@ -31,13 +31,14 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
 
   const firstTab = () => {
     return (
-      <div className='py-4'>
-        <div className="bg-container rounded-container shadow-container p-4">
+      <section aria-labelledby="about-title" className='py-4'>
+        <section
+          className="bg-container rounded-container shadow-container p-4">
           <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
             <div className="">
-              <div className='text-sm2 font-bold leading-5'>{data.title_fa}</div>
-              <div className="text-sm2 leading-5 mt-4">تاسیس:{data.foundationDate}</div>
-              <div className="text-sm2 leading-5 mt-2">نوع محصولات: {data.offering}</div>
+              <h2 className='text-sm2 font-bold leading-5'>{data.title_fa}</h2>
+              <p className="text-sm2 leading-5 mt-4">تاسیس: {data.foundationDate}</p>
+              <p className="text-sm2 leading-5 mt-2">نوع محصولات: {data.offering}</p>
             </div>
             <div className="rounded-normal overflow-clip">
               <Image
@@ -51,7 +52,7 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
             </div>
           </div>
           <div className="mt-[23px]">
-            <div className="text-sm2 font-bold leading-5">درباره مجموعه</div>
+            <h3 className="text-sm2 font-bold leading-5">درباره مجموعه</h3>
             <p className="text-sm2 leading-5 mt-3 border-spacing-48" style={{ wordSpacing: '0.01em' }}>
               {data.description}
             </p>
@@ -60,10 +61,11 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
               <span className='text-sm2 text-disabled-text font-medium pt-0.5'>عکس های رستوران</span>
             </div>
           </div>
-        </div>
+        </section>
 
-        <div className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
-          <div className='text-sm2 font-medium leading-5'>ارتباط</div>
+        <section
+          className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
+          <h2 className='text-sm2 font-medium leading-5'>ارتباط</h2>
           <div className='col-span-1 text-center flex justify-center gap-4'>
             {data.contacts.phone &&
               <a href={`tel://${data.contacts.phone}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
@@ -86,18 +88,20 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
               </a>
             }
           </div>
-        </div>
+        </section>
 
-        <div className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
-          <div className='text-sm2 font-medium leading-5'>آدرس</div>
-          <div className='text-sm2 mt-[9px] leading-5'>{data.address}</div>
+        <section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
+          <h2 className='text-sm2 font-medium leading-5'>آدرس</h2>
+          <p className='text-sm2 mt-[9px] leading-5'>{data.address}</p>
           <div className='inline-flex gap-2 mt-[23px] items-center '>
             <Location size={20} className='stroke-disabled-text' />
             <span className='text-sm2 text-disabled-text '>عکس های رستوران</span>
           </div>
-        </div>
+        </section>
 
-        <div className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
+        <section
+          aria-label='ساعات کاری'
+          className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
           <div className="flex items-center gap-2 justify-start">
             <Clock size={16} className='stroke-disabled-text' />
             <div className='text-sm2 font-medium leading-5 mt-0.5 text-[#8C90A3]'>باز</div>
@@ -107,32 +111,36 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
           <div className="">
             <ArrowDown2 size={16} className='stroke-[#292D32]' />
           </div>
-        </div>
+        </section>
 
-        {data.open.map((v, index) => {
-          return (
-            <div
-              key={index}
-              style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
-              className="bg-[#F6F6FA] rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
-              <div className="text-sm2">
-                {v.day}
+        <section>
+          {data.open.map((v, index) => {
+            return (
+              <div
+                key={index}
+                style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
+                className="bg-[#F6F6FA] rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
+                <div className="text-sm2">
+                  {v.day}
+                </div>
+                <div className='text-sm2 font-light'>
+                  {v.close} - {v.open}
+                </div>
               </div>
-              <div className='text-sm2 font-light'>
-                {v.close} - {v.open}
-              </div>
-            </div>
-          )
-        })}
-      </div>
+            )
+          })}
+        </section>
+      </section>
     )
   }
 
   const secondTab = () => {
 
     return (
-      <div className='py-4'>
-        <div className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
+      <section aria-labelledby="reviews-title" className='py-4'>
+        <section
+          aria-label='امتیاز کاربران'
+          className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
           <div className="text-center font-bold text-5xl">
             4.1
           </div>
@@ -143,11 +151,11 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
             <RateBar className='mt-1' content='2' percentage='12' />
             <RateBar className='mt-1' content='1' percentage='89' />
           </div>
-        </div>
+        </section>
 
-        <div className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
+        <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
           <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
-            <div className='text-sm2 font-medium leading-5'>نظرات کاربران</div>
+            <h2 className='text-sm2 font-medium leading-5'>نظرات کاربران</h2>
             <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
               <EqualizerIcon />
               <span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
@@ -155,17 +163,19 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
           </div>
           <div className="">
 
-            <Comment
-              className='pt-8'
-              user='علیرضا عابدزاده'
-              rating={5.0}
-              date='18 آذر 1401'
-              text='لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است'
-              tags={['پیتزا قارچ مخصوص', 'چیز برگر ژیوان']}
-            />
+            <article>
+              <Comment
+                className='pt-8'
+                user='علیرضا عابدزاده'
+                rating={5.0}
+                date='18 آذر 1401'
+                text='لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است'
+                tags={['پیتزا قارچ مخصوص', 'چیز برگر ژیوان']}
+              />
+            </article>
 
           </div>
-        </div>
+        </section>
         <AnimatedBottomSheet title="مرتب کردن بر اساس" visible={sortingModal} inDelay={150} onClick={toggleSortingModal}>
           <div className="px-8.5 py-10 justify-between">
             {sortings.map((v, i) => {
@@ -180,7 +190,7 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
             })}
           </div>
         </AnimatedBottomSheet>
-      </div>
+      </section>
     )
   }
 

src/app/[name]/about/layout.tsx

@@ -29,7 +29,7 @@ export async function generateStaticParams() {
 
 async function layout({ children }: Readonly<{ children: React.ReactNode; params: Promise<Params> }>) {
     return (
-        <div>{children}</div>
+        <>{children}</>
     )
 }
 

src/app/[name]/about/page.tsx

@@ -9,6 +9,6 @@ export default async function Page({ params }: { params: Promise<Params> }) {
   const data = await getAboutData(name);
 
   return (
-    <div><AboutPage data={data} /></div>
+    <><AboutPage data={data} /></>
   );
 }

src/app/[name]/layout.tsx

@@ -1,4 +1,3 @@
-import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
 import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper";
 import ClientMenuRouteWrapper from "@/components/wrapper/ClientMenuRouteWrapper.tsx";
 
@@ -13,12 +12,10 @@ export default function MenuLayout({
 }>) {
 
   return (
-    <ReactQueryProvider>
-      <ClientSideWrapper>
-        <ClientMenuRouteWrapper>
-          {children}
-        </ClientMenuRouteWrapper>
-      </ClientSideWrapper>
-    </ReactQueryProvider>
+    <ClientSideWrapper>
+      <ClientMenuRouteWrapper>
+        {children}
+      </ClientMenuRouteWrapper>
+    </ClientSideWrapper>
   );
 }

src/app/[name]/orders/layout.tsx

@@ -1,5 +1,3 @@
-import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper";
-
 export const metadata = {
   title: 'Orders',
 }
@@ -11,8 +9,8 @@ export default function MenuLayout({
 }>) {
 
   return (
-    <ClientSideWrapper>
+    <>
       {children}
-    </ClientSideWrapper>
+    </>
   );
 }

src/app/[name]/page.tsx

@@ -155,37 +155,37 @@ const MenuIndex = () => {
   const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
 
-  useEffect(() => {
-    let m_wrapperRef = null;
-    if (wrapperRef.current) {
-      m_wrapperRef = wrapperRef;
-      wrapperRef.current?.parentElement?.addEventListener('scroll', onScroll);
-    }
-
-    return () => {
-      if (m_wrapperRef?.current)
-        m_wrapperRef.current?.parentElement?.removeEventListener('scroll', onScroll)
-    }
-  })
-
-  const onScroll = () => {
+  const onScroll = useCallback(() => {
     if (!wrapperRef?.current?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return;
-    if (wrapperRef?.current?.parentElement?.scrollTop >= smallCategoriesRef.current?.offsetTop) {
+
+    if (wrapperRef.current.parentElement.scrollTop >= smallCategoriesRef.current.offsetTop) {
       setSmallCategoriesVisibility(true);
     } else {
       setSmallCategoriesVisibility(false);
     }
-  }
+  }, [wrapperRef, smallCategoriesRef]);
+
+  useEffect(() => {
+    if (!wrapperRef.current) return;
+
+    const parent = wrapperRef.current.parentElement;
+    if (!parent) return;
+
+    parent.addEventListener('scroll', onScroll);
+
+    return () => {
+      parent.removeEventListener('scroll', onScroll);
+    }
+  }, [onScroll]);
+
 
   const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [setSearch]);
 
   const updateCategory = useCallback((id: number) => {
     setSelectedCategory(String(id));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [setSelectedCategory]);
 
   const toggleFilterModal = useCallback(() => {
     setFilterModal((state) => !state);
@@ -242,7 +242,6 @@ const MenuIndex = () => {
       </HorizontalScrollView>
 
       <section className="w-full">
-
         <div className="flex justify-between items-center relative" ref={smallCategoriesRef} >
           <span className="text-base font-medium">
             {categories[+selectedCategory]?.title}

src/app/[name]/transactions/page.tsx

@@ -3,22 +3,36 @@ import React from 'react'
 
 function TransactionsIndex() {
     return (
-        <div>
-            <div className='font-medium'>کدهای تخفیف</div>
+        <section>
+            <h1 className='font-medium'>کدهای تخفیف</h1>
 
-            <div className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'>
-
-                <div className='col-span-3 py-9.5 pe-7 ps-5'>
-                    <div className='font-bold'>کدهای تخفیف شما</div>
-                    <p className='text-xs mt-[7px]'>کد تخفیف مورد نظر را کپی کنید و در بخش پرداخت ها استفاده کنید</p>
+            <section
+                aria-label="درباره کدهای تخفیف"
+                className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'
+            >
+                <div className='col-span-3 py-9.5 pe-7 ps-5 relative'>
+                    <div className='w-full h-full absolute top-0 left-0 overflow-clip'>
+                        <svg width="301" height="146" viewBox="0 0 301 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g opacity="0.15">
+                                <path d="M262.479 152.795C202.8 122.128 120.111 132.267 77.763 175.315C35.4154 218.362 49.3247 278.14 109.004 308.807C168.683 339.474 251.373 329.335 293.721 286.287C336.069 243.24 322.159 183.462 262.479 152.795Z" stroke="#AFAFAF" />
+                                <path d="M298.808 115.866C239.129 85.1988 156.44 95.3379 114.092 138.385C71.7445 181.433 85.6538 241.21 145.333 271.877C205.012 302.544 287.702 292.405 330.05 249.358C372.398 206.31 358.488 146.533 298.808 115.866Z" stroke="#AFAFAF" />
+                                <path d="M347.543 66.3263C287.863 35.6595 205.174 45.7986 162.826 88.8461C120.479 131.894 134.388 191.671 194.067 222.338C253.747 253.005 336.437 242.866 378.784 199.819C421.132 156.771 407.222 96.9933 347.543 66.3263Z" stroke="#AFAFAF" />
+                                <path d="M416.657 -3.92933C356.977 -34.5961 274.288 -24.457 231.941 18.5905C189.593 61.638 203.502 121.415 263.182 152.082C322.861 182.749 405.551 172.61 447.899 129.563C490.246 86.5153 476.336 26.7377 416.657 -3.92933Z" stroke="#AFAFAF" />
+                            </g>
+                        </svg>
+                    </div>
+                    <h2 className='font-bold text-base'>کدهای تخفیف شما</h2>
+                    <p className='text-xs mt-[7px]'>کد تخفیف مورد نظر را کپی کنید و در بخش پرداخت‌ها استفاده کنید</p>
                 </div>
 
                 <div
-                    style={{ background: 'linear-gradient(165.51deg, #000000 -8.44%, #C3C7DD 100%)' }}
-                    className='col-span-1 h-full text-end py-4 px-5.5 flex flex-col justify-between rounded-e-normal'>
-                    <p className='text-sm2 text-white'>
-                        <span className='font-medium'>Your</span>
-                        <br />
+                    className='col-span-1 h-full text-end py-4 px-5.5 flex flex-col justify-between rounded-e-normal'
+                    style={{
+                        background: 'linear-gradient(165.51deg, #000000 -8.44%, #C3C7DD 100%)',
+                    }}
+                >
+                    <p className='text-sm2 text-white leading-tight'>
+                        <span className='font-medium'>Your</span><br />
                         <span className='font-bold'>Coupon</span>
                     </p>
 
@@ -43,47 +57,34 @@ function TransactionsIndex() {
                         <path d="M71.3666 0H68.209V20H71.3666V0Z" fill="white" />
                     </svg>
                 </div>
+            </section>
 
-            </div>
-
-            <div className='mt-6 bg-container rounded-normal flex justify-between items-center'>
-                <div className='col-span-3 py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
-                    <div className='font-bold text-sm2'>مبلغ تخفیف: 50,000 تومان</div>
-                    <p className='text-xs mt-[7px]'>قابل استفاده برای همه ی منو ها و محصولات</p>
-                    <Button className='font-light! w-fit! px-10 py-1.5 mt-4 text-xs rounded-lg'>کپی کد</Button>
-                </div>
-                <div>
-                    <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium'>
-                        F12BB587
-                    </p>
-                </div>
-            </div>
-            <div className='mt-6 bg-container rounded-normal flex justify-between items-center'>
-                <div className='col-span-3 py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
-                    <div className='font-bold text-sm2'>مبلغ تخفیف: 50,000 تومان</div>
-                    <p className='text-xs mt-[7px]'>قابل استفاده برای همه ی منو ها و محصولات</p>
-                    <Button className='font-light! w-fit! px-10 py-1.5 mt-4 text-xs rounded-lg'>کپی کد</Button>
-                </div>
-                <div>
-                    <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium'>
-                        F12BB587
-                    </p>
-                </div>
-            </div>
-            <div className='mt-6 bg-container rounded-normal flex justify-between items-center'>
-                <div className='col-span-3 py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
-                    <div className='font-bold text-sm2'>مبلغ تخفیف: 50,000 تومان</div>
-                    <p className='text-xs mt-[7px]'>قابل استفاده برای همه ی منو ها و محصولات</p>
-                    <Button className='font-light! w-fit! px-10 py-1.5 mt-4 text-xs rounded-lg'>کپی کد</Button>
-                </div>
-                <div>
-                    <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium'>
-                        F12BB587
-                    </p>
-                </div>
-            </div>
-        </div>
+            <section className="mt-6 space-y-6" aria-label="لیست کدهای تخفیف">
+                {[1, 2, 3].map((_, i) => (
+                    <article
+                        key={i}
+                        className='bg-container rounded-normal flex justify-between items-center'
+                    >
+                        <div className='py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
+                            <h3 className='font-bold text-sm2'>مبلغ تخفیف: 50,000 تومان</h3>
+                            <p className='text-xs mt-[7px]'>قابل استفاده برای همه‌ی منوها و محصولات</p>
+                            <Button
+                                className='w-fit px-10 py-1.5 mt-4 text-xs rounded-lg font-light'
+                                aria-label="کپی کد تخفیف"
+                            >
+                                کپی کد
+                            </Button>
+                        </div>
+                        <div>
+                            <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium' aria-label="کد تخفیف">
+                                F12BB587
+                            </p>
+                        </div>
+                    </article>
+                ))}
+            </section>
+        </section>
     )
 }
 
-export default TransactionsIndex
+export default TransactionsIndex

src/app/auth/layout.tsx

@@ -1,5 +1,3 @@
-
-import { ReactQueryProvider } from '@/components/providers/ReactQueryProvider'
 import { Metadata } from 'next'
 
 export const metadata: Metadata = {
@@ -8,10 +6,8 @@ export const metadata: Metadata = {
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
     return (
-        <ReactQueryProvider>
-            <div className="h-full">
-                {children}
-            </div>
-        </ReactQueryProvider>
+        <main className="h-full">
+            {children}
+        </main>
     )
 }

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import "./globals.css";
+import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
 
 export const metadata: Metadata = {
   title: 'Dashboard',
@@ -19,7 +20,9 @@ export default function RootLayout({
         dir="rtl"
         className={`antialiased bg-background h-full`}
       >
-        {children}
+        <ReactQueryProvider>
+          {children}
+        </ReactQueryProvider>
       </body>
     </html>
   );

src/app/profile/layout.tsx

@@ -1,13 +1,9 @@
 "use client"
 
-import { ReactQueryProvider } from '@/components/providers/ReactQueryProvider'
-
 export default function ProfileLayout({ children }: { children: React.ReactNode }) {
     return (
-        <ReactQueryProvider>
-            <main className="h-full p-4">
-                {children}
-            </main>
-        </ReactQueryProvider>
+        <main className="h-full p-4">
+            {children}
+        </main>
     )
 }