add: orders page

2025-07-09 00:00:36 +03:30
parent 789de27b47
commit 82cdaffe6d
9 changed files with 312 additions and 0 deletions
@@ -0,0 +1,24 @@
+import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
+import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper";
+import ClientMenuRouteWrapper from "@/components/wrapper/ClientMenuRouteWrapper.tsx";
+
+export const metadata = {
+  title: 'Menu',
+}
+
+export default function MenuLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+
+  return (
+    <ReactQueryProvider>
+      <ClientSideWrapper>
+        <ClientMenuRouteWrapper>
+          {children}
+        </ClientMenuRouteWrapper>
+      </ClientSideWrapper>
+    </ReactQueryProvider>
+  );
+}
@@ -0,0 +1,18 @@
+import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper";
+
+export const metadata = {
+  title: 'Orders',
+}
+
+export default function MenuLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+
+  return (
+    <ClientSideWrapper>
+      {children}
+    </ClientSideWrapper>
+  );
+}
@@ -0,0 +1,123 @@
+'use client';
+
+import Button from '@/components/button/PrimaryButton';
+import CalendarIcon from '@/components/icons/CalendarIcon';
+import LocationPinIcon from '@/components/icons/LocationPinIcon';
+import TabContainer from '@/components/tab/TabContainer'
+import TabItemRenderer from '@/components/tab/TabItemRenderer'
+import clsx from 'clsx';
+import Image from 'next/image';
+import React, { useCallback, useState } from 'react'
+
+const currentOrders = [
+    {
+        id: 0,
+        address: 'خیابان دانشگاه روبروی بیمارستان خوانساری ساختمان مهر...',
+        date: 'دوشنبه، 28 مرداد 1403',
+        price: '560,000',
+        items: [
+            { id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
+            { id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
+            { id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
+        ]
+    },
+]
+
+function OrdersIndex() {
+    const [selectedTab, setSelectedTab] = useState(0);
+    const categories = [
+        { id: 0, title: 'سفارشات فعال', image: '/assets/images/food-image.png' },
+        { id: 1, title: 'سفارشات قبلی', image: '/assets/images/food-image.png' }
+    ]
+
+    const updateTab = useCallback((index: number) => {
+        setSelectedTab(index);
+    }, []);
+
+    const firstTab = () => {
+        return (
+            <div>
+                {currentOrders.map((order) => {
+                    return (
+                        <div key={order.id} className='w-full px-[17px] mt-4 pt-8 pb-6 bg-white rounded-3xl'>
+                            <div className="text-sm2">
+                                <div className='flex gap-2'>
+                                    <LocationPinIcon size={16} />
+                                    <p>{order.address}</p>
+                                </div>
+                                <div className='mt-2 flex gap-2'>
+                                    <CalendarIcon size={16} />
+                                    <p>{order.date}</p>
+                                </div>
+                            </div>
+
+                            <hr className='mx-4 mt-6 text-disabled3 border-2' />
+
+                            <div className='flex justify-between mt-6'>
+                                <div className='flex justify-start gap-[9px]'>
+                                    {order.items.map((item) => {
+                                        return (
+                                            <span key={item.id} className='w-8 h-8 relative'>
+                                                <Image
+                                                    priority
+                                                    className='rounded-lg'
+                                                    src={item.image}
+                                                    width={32}
+                                                    height={32}
+                                                    alt="order image"
+                                                />
+                                                <span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-white border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
+                                                    {item.quantity}
+                                                </span>
+                                            </span>
+                                        )
+                                    })}
+                                </div>
+                                <div className='font-medium text-sm' dir='ltr'>
+                                    {order.price} T
+                                </div>
+                            </div>
+
+                            <Button className='mt-6 font-medium!'>پیگیری سفارش</Button>
+                        </div>
+                    )
+                })}
+            </div>
+        )
+    }
+
+
+    return (
+        <div className='pt-8'>
+            <TabContainer
+                className='h-[72px] !pt-3 !pb-2 overflow-y-hidden'>
+                {categories.map((item, index) => (
+                    <TabItemRenderer
+                        key={index}
+                        className={''}
+                        onClick={() => updateTab(index)}
+                    >
+                        <Image
+                            priority
+                            src={item.image}
+                            width={24}
+                            height={24}
+                            alt="category image"
+                        />
+                        <span className={clsx(
+                            'text-xs transition-all duration-150',
+                            index === selectedTab ? 'text-black' : 'text-disabled-text'
+                        )}>
+                            {item.title}
+                        </span>
+                    </TabItemRenderer>
+                ))}
+            </TabContainer>
+
+            {/* First tab */}
+            {selectedTab === 0 && firstTab()}
+        </div>
+    )
+}
+
+export default OrdersIndex
@@ -0,0 +1,189 @@
+'use client';
+
+import { useCallback, useMemo, useState } from "react";
+import SearchBox from "@/components/input/SearchBox";
+import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
+import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
+import Image from "next/image";
+import EqualizerIcon from "@/components/icons/EqualizerIcon";
+import TextAlignIcon from "@/components/icons/TextAlignIcon";
+import VerticalScrollView from "@/components/listview/VerticalScrollView";
+import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+import React from "react";
+import MenuItem from "@/components/listview/MenuItem";
+
+const categories = new Array(13).fill({ title: "خوراک", icon: "" });
+
+const foods = [
+  {
+    id: 1,
+    category: 0,
+    price: "69.000",
+    name: "کباب چوبی ژیوان )سیخ چوبی(",
+    contains: "فیله گوساله / سس سفید / قارچ و سیب زمینی/ پنیر پارمزان"
+  },
+  {
+    id: 2,
+    category: 1,
+    price: "49.000",
+    name: "برگر گوشت گوساله",
+    contains: "گوشت گوساله / پنیر چدار / کاهو / گوجه"
+  },
+  {
+    id: 3,
+    category: 2,
+    price: "29.000",
+    name: "ساندویچ مرغ",
+    contains: "مرغ / کاهو / گوجه / سس مایونز"
+  },
+  {
+    id: 4,
+    category: 0,
+    price: "89.000",
+    name: "کباب ماهی",
+    contains: "ماهی / سس لیمو / قارچ و سیب زمینی"
+  },
+  {
+    id: 5,
+    category: 1,
+    price: "39.000",
+    name: "سالاد فصل",
+    contains: "کاهو / گوجه / خیار / پنیر فتا"
+  },
+  {
+    id: 6,
+    category: 3,
+    price: "59.000",
+    name: "پاستا گوشت",
+    contains: "گوشت گوساله / پاستا / سس گوجه"
+  },
+  {
+    id: 7,
+    category: 2,
+    price: "49.000",
+    name: "ساندویچ تن ماهی",
+    contains: "تن ماهی / کاهو / گوجه / سس مایونز"
+  },
+  {
+    id: 8,
+    category: 0,
+    price: "79.000",
+    name: "کباب گوشت گوسفندی",
+    contains: "گوشت گوسفندی / سس سفید / قارچ و سیب زمینی"
+  },
+  {
+    id: 9,
+    category: 1,
+    price: "29.000",
+    name: "برگر مرغ",
+    contains: "مرغ / پنیر چدار / کاهو / گوجه"
+  },
+  {
+    id: 10,
+    category: 3,
+    price: "69.000",
+    name: "سالاد میگو",
+    contains: "میگو / کاهو / گوجه / خیار"
+  },
+  {
+    id: 11,
+    category: 2,
+    price: "39.000",
+    name: "ساندویچ شاورما",
+    contains: "مرغ / کاهو / گوجه / سس تارتار"
+  },
+  {
+    id: 12,
+    category: 0,
+    price: "99.000",
+    name: "کباب گوشت بوقلمون",
+    contains: "گوشت بوقلمون / سس سفید / قارچ و سیب زمینی"
+  },
+  {
+    id: 13,
+    category: 1,
+    price: "59.000",
+    name: "برگر ماهی",
+    contains: "ماهی / پنیر چدار / کاهو / گوجه"
+  },
+  {
+    id: 14,
+    category: 3,
+    price: "49.000",
+    name: "سالاد مرغ",
+    contains: "مرغ / کاهو / گوجه / خیار"
+  }
+];
+
+const MenuIndex = () => {
+  const [search, setSearch] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState(0);
+
+  const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  }, []);
+
+  const updateCategory = useCallback((id: number) => {
+    setSelectedCategory(id);
+  }, []);
+
+  const filteredReceiptItems = useMemo(() => {
+    const lowerSearch = search.toLowerCase();
+    return foods.filter(
+      (item) =>
+        item.category === selectedCategory &&
+        item.name.toLowerCase().includes(lowerSearch)
+    );
+  }, [selectedCategory, search]);
+
+  return (
+    <div className="flex flex-col gap-4 pt-4 items-center">
+      <SearchBox value={search} onChange={updateSearch} />
+      <HorizontalScrollView className="w-full noscrollbar py-4!">
+        {categories.map((item, index) => (
+          <CategoryItemRenderer
+            key={index}
+            className={`${index === selectedCategory ? "bg-white!" : ""}`}
+            onClick={() => updateCategory(index)}
+          >
+            <Image
+              priority
+              src="/assets/images/food-image.png"
+              width={32}
+              height={32}
+              alt="category image"
+            />
+            <span className="text-xs text-black">{item.title}</span>
+          </CategoryItemRenderer>
+        ))}
+      </HorizontalScrollView>
+
+      <section className="w-full">
+        <div className="flex justify-between items-center">
+          <span className="text-base font-semibold">
+            {categories[selectedCategory]?.title}
+          </span>
+          <div className="inline-flex gap-2 justify-around items-center">
+            <button 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">فیلتر بر اساس</span>
+            </button>
+            <button className="rounded-lg h-8 bg-white p-1.5">
+              <TextAlignIcon />
+            </button>
+          </div>
+        </div>
+
+        <VerticalScrollView className="mt-5! overflow-y-auto h-full">
+          {filteredReceiptItems.map((food) => (
+            <MenuItemRenderer key={food.id}>
+              <MenuItem food={food} />
+            </MenuItemRenderer>
+          ))}
+        </VerticalScrollView>
+      </section>
+    </div>
+  );
+};
+
+export default MenuIndex;