Compare commits

..

2 Commits

Author SHA1 Message Date
Mohammadreza 4e4f9685a4 Merge branch 'master' of https://git.caspianoxin.ir/MamadAriaKia/CoffeeJoo_Panel_kafeDar 2025-12-28 15:18:05 +03:30
Mohammadreza c748620429 edit cofe 2025-12-28 15:15:34 +03:30
7 changed files with 677 additions and 434 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

View File

@ -7,12 +7,14 @@ import toggleTheme from "../ToggleTheme";
import { CgDarkMode } from "react-icons/cg"; import { CgDarkMode } from "react-icons/cg";
const HEADER_PATHS = [ const HEADER_PATHS = [
{ route: "/cafe-management", title: "مدیریت کافه ها" }, "/management",
{route: "/users-management", title: "مدیریت کاربران" }, "/management/",
{ route: "/dashboard", title: "داشبورد" }, "/management/cafes",
{ route: "/stats", title: "آمار و تحلیل" }, "/edit-cafe",
{ route: "/edit-cafe/", title: "ویرایش کافه" }, "/edit-cafe/",
"/cafe",
"/cafes",
"/admin",
]; ];
export default function Layout() { export default function Layout() {

View File

@ -29,7 +29,9 @@ const CafeManagement = () => {
console.error("❌ Error loading cafes:", error); console.error("❌ Error loading cafes:", error);
const errorMessage = const errorMessage =
error.response?.data?.message || error.response?.data?.message ||
(error.request ? "خطا در برقراری ارتباط با سرور" : "خطای نامشخص رخ داده است"); (error.request
? "خطا در برقراری ارتباط با سرور"
: "خطای نامشخص رخ داده است");
setError(errorMessage); setError(errorMessage);
} finally { } finally {
setLoading(false); setLoading(false);
@ -43,7 +45,9 @@ const CafeManagement = () => {
if (loading) { if (loading) {
return ( return (
<div className="flex justify-center items-center h-screen"> <div className="flex justify-center items-center h-screen">
<div className="text-button1 text-xl font-bold">در حال بارگذاری...</div> <div className="text-button1 text-xl font-bold">
در حال بارگذاری...
</div>
</div> </div>
); );
} }
@ -127,7 +131,10 @@ const CafeManagement = () => {
{/* کارت موبایل */} {/* کارت موبایل */}
<div className="lg:hidden mt-6 space-y-4"> <div className="lg:hidden mt-6 space-y-4">
{cafes.map((cafe) => ( {cafes.map((cafe) => (
<div key={cafe._id} className="bg-white border-2 border-[#8b8886] rounded-xl p-4"> <div
key={cafe._id}
className="bg-white border-2 border-[#8b8886] rounded-xl p-4"
>
<div className="flex items-start gap-4 mb-4"> <div className="flex items-start gap-4 mb-4">
<img <img
src={cafe.photo || Pic1} src={cafe.photo || Pic1}
@ -135,8 +142,12 @@ const CafeManagement = () => {
className="w-16 h-16 rounded-full object-cover flex-shrink-0" className="w-16 h-16 rounded-full object-cover flex-shrink-0"
/> />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h3 className="font-bold text-[#402E32] mb-1 text-sm">{cafe.Name}</h3> <h3 className="font-bold text-[#402E32] mb-1 text-sm">
<p className="text-xs text-gray-600 truncate">{cafe.address}</p> {cafe.Name}
</h3>
<p className="text-xs text-gray-600 truncate">
{cafe.address}
</p>
</div> </div>
</div> </div>
@ -147,7 +158,9 @@ const CafeManagement = () => {
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<img src={Group} alt="time" className="w-4 h-4" /> <img src={Group} alt="time" className="w-4 h-4" />
<span className="text-[#402E32]">{cafe.openinghour || "نامشخص"}</span> <span className="text-[#402E32]">
{cafe.openinghour || "نامشخص"}
</span>
</div> </div>
</div> </div>
@ -176,7 +189,9 @@ const CafeManagement = () => {
</div> </div>
{/* عنوان */} {/* عنوان */}
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">کافه های شما</h1> <h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">
کافه های شما
</h1>
{/* محتوای اصلی */} {/* محتوای اصلی */}
{renderContent()} {renderContent()}

View File

@ -0,0 +1,43 @@
import { FaRegEdit } from "react-icons/fa";
export default function CoffeeCard({
title,
description,
price,
image,
onEdit,
}) {
return (
<div
className="bg-white border border-gray-200 rounded-2xl p-4
hover:shadow-lg transition-all duration-300"
>
{/* تصویر */}
<img
src={image}
alt={title}
className="w-full h-40 object-cover rounded-xl mb-3"
/>
{/* عنوان */}
<h3 className="font-bold text-text1 text-base mb-2">{title}</h3>
{/* توضیح */}
<p className="text-sm text-gray-500 mb-3 line-clamp-2">{description}</p>
{/* فوتر */}
<div className="flex justify-between items-center">
<span className="font-bold text-text1">{price} تومان</span>
<button
onClick={onEdit}
className="flex items-center gap-1 text-sm
text-button1 hover:text-[#5f494f] transition-colors"
>
<FaRegEdit />
ویرایش
</button>
</div>
</div>
);
}

View File

@ -4,6 +4,8 @@ import { GrLocation } from "react-icons/gr";
import { BiEdit } from "react-icons/bi"; import { BiEdit } from "react-icons/bi";
import { FaRegStar } from "react-icons/fa"; import { FaRegStar } from "react-icons/fa";
import { IoMdCheckmark, IoMdClose } from "react-icons/io"; import { IoMdCheckmark, IoMdClose } from "react-icons/io";
import { FaRegEdit } from "react-icons/fa";
import EditCafeMenu from "./EditCafeMenu";
// Assets // Assets
import Bg1 from "../../assets/icons/bg1.svg"; import Bg1 from "../../assets/icons/bg1.svg";
@ -47,13 +49,15 @@ const CAFE_PRODUCTS = [
name: "اسپرسو100%", name: "اسپرسو100%",
price: "118.000", price: "118.000",
image: Sperso, image: Sperso,
description: "45 میلی لیتر، قهوه، 100% عربیکا، دم شده با دستگاه اسپرسو ساز، به همراه یک عدد آب معدنی مینی", description:
"45 میلی لیتر، قهوه، 100% عربیکا، دم شده با دستگاه اسپرسو ساز، به همراه یک عدد آب معدنی مینی",
}, },
{ {
name: "کارامل ماکیاتو", name: "کارامل ماکیاتو",
price: "149.000", price: "149.000",
image: Coffee1, image: Coffee1,
description: "220 میلی لیتر، 2 شات اسپرسو 30% روبوستا، 70% عربیکا، یک لکه فوم شیر، سیروپ کارامل", description:
"220 میلی لیتر، 2 شات اسپرسو 30% روبوستا، 70% عربیکا، یک لکه فوم شیر، سیروپ کارامل",
}, },
{ {
name: "اسپرسو آفوگاتو", name: "اسپرسو آفوگاتو",
@ -66,6 +70,7 @@ const CAFE_PRODUCTS = [
export default function EditCafe() { export default function EditCafe() {
const { id } = useParams(); const { id } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const [editmenu, setEditMenu] = useState(false);
// State Management // State Management
const [cafeData, setCafeData] = useState(null); const [cafeData, setCafeData] = useState(null);
@ -111,7 +116,9 @@ export default function EditCafe() {
console.error("❌ Error loading cafe:", error); console.error("❌ Error loading cafe:", error);
const errorMessage = const errorMessage =
error.response?.data?.message || error.response?.data?.message ||
(error.request ? "خطا در برقراری ارتباط با سرور" : "خطای نامشخص رخ داده است"); (error.request
? "خطا در برقراری ارتباط با سرور"
: "خطای نامشخص رخ داده است");
setError(errorMessage); setError(errorMessage);
} finally { } finally {
setLoading(false); setLoading(false);
@ -161,7 +168,9 @@ export default function EditCafe() {
if (loading) { if (loading) {
return ( return (
<div className="flex justify-center items-center h-screen"> <div className="flex justify-center items-center h-screen">
<div className="text-button1 text-2xl font-bold">در حال بارگذاری...</div> <div className="text-button1 text-2xl font-bold">
در حال بارگذاری...
</div>
</div> </div>
); );
} }
@ -178,21 +187,25 @@ export default function EditCafe() {
if (!cafeData) { if (!cafeData) {
return ( return (
<div className="p-6 text-center text-gray-500"> <div className="p-6 text-center text-gray-500">اطلاعات کافه یافت نشد</div>
اطلاعات کافه یافت نشد
</div>
); );
} }
return ( return (
<section dir="rtl" className="w-full overflow-x-hidden"> <section dir="rtl" className="w-full overflow-x-hidden">
{editmenu ? (
<EditCafeMenu setEditMenu={setEditMenu} />
) : (
<>
<style>{` <style>{`
.scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
`}</style> `}</style>
{/* Header */} {/* Header */}
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">ادیت {cafeData.Name}</h1> <h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">
ادیت {cafeData.Name}
</h1>
{/* Main Container */} {/* Main Container */}
<div className="border-2 mt-1 border-[#8b8886] p-4 md:p-6 lg:p-10 rounded-2xl"> <div className="border-2 mt-1 border-[#8b8886] p-4 md:p-6 lg:p-10 rounded-2xl">
@ -225,45 +238,70 @@ export default function EditCafe() {
{/* Basic Info */} {/* Basic Info */}
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h2 className="font-bold text-lg text-[#402E32] mb-2">{cafeData.Name}</h2> <h2 className="font-bold text-lg text-[#402E32] mb-2">
{cafeData.Name}
</h2>
<div className="w-16 h-1 bg-[#80931e] rounded-full"></div> <div className="w-16 h-1 bg-[#80931e] rounded-full"></div>
</div> </div>
<div className="flex items-center gap-3 text-[#402E32]"> <div className="flex items-center gap-3 text-[#402E32]">
<GrLocation className="text-lg flex-shrink-0" /> <GrLocation className="text-lg flex-shrink-0" />
<span className="text-sm md:text-base">{cafeData.address || "آدرس موجود نیست"}</span> <span className="text-sm md:text-base">
{cafeData.address || "آدرس موجود نیست"}
</span>
</div> </div>
<div className="flex items-center gap-3 text-[#402E32]"> <div className="flex items-center gap-3 text-[#402E32]">
<FaRegStar className="text-lg flex-shrink-0" /> <FaRegStar className="text-lg flex-shrink-0" />
<span className="text-sm md:text-base">{cafeData.rating || 0}</span> <span className="text-sm md:text-base">
{cafeData.rating || 0}
</span>
</div> </div>
<div> <div>
<h3 className="font-bold text-[#402E32] mb-2">درباره کافه</h3> <h3 className="font-bold text-[#402E32] mb-2">
درباره کافه
</h3>
<p className="text-sm md:text-base text-[#555]"> <p className="text-sm md:text-base text-[#555]">
{cafeData.description || "توضیحاتی برای این کافه وجود ندارد."} {cafeData.description ||
"توضیحاتی برای این کافه وجود ندارد."}
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<button
onClick={() => setEditMenu(true)}
className="flex items-center justify-center text-text1 gap-2 w-full h-14 border-4 border-border mb-14 rounded-4xl font-bold"
>
<FaRegEdit size={20} />
ادیت منو کافه
</button>
{/* Features Section */} {/* Features Section */}
<div className="mb-8"> <div className="mb-8">
<h2 className="font-bold text-[#402E32] mb-4 text-base md:text-lg">ویژگی ها</h2> <h2 className="font-bold text-[#402E32] mb-4 text-base md:text-lg">
ویژگی ها
</h2>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3"> <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
{CAFE_FEATURES.map((feature, idx) => ( {CAFE_FEATURES.map((feature, idx) => (
<div <div
key={idx} key={idx}
className="bg-[#e1d5c2] p-4 rounded-2xl flex flex-col items-center gap-3 text-center transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md" className="bg-[#e1d5c2] p-4 rounded-2xl flex flex-col items-center gap-3 text-center transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md"
> >
<img src={feature.icon} alt={feature.label} className="w-6 h-6" /> <img
src={feature.icon}
alt={feature.label}
className="w-6 h-6"
/>
<span className="text-[#402E32] font-medium text-xs md:text-sm whitespace-normal"> <span className="text-[#402E32] font-medium text-xs md:text-sm whitespace-normal">
{feature.label} {feature.label}
</span> </span>
{feature.value && ( {feature.value && (
<span className="text-[#402E32] text-xs">{feature.value}</span> <span className="text-[#402E32] text-xs">
{feature.value}
</span>
)} )}
</div> </div>
))} ))}
@ -276,14 +314,20 @@ export default function EditCafe() {
{/* Categories Section */} {/* Categories Section */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="font-bold text-[#402E32] text-base md:text-lg">دستهبندیها</h2> <h2 className="font-bold text-[#402E32] text-base md:text-lg">
دستهبندیها
</h2>
<button <button
onClick={() => setIsEditMode(!isEditMode)} onClick={() => setIsEditMode(!isEditMode)}
className="flex items-center gap-2 text-button1 hover:text-[#5f494f] transition-colors" className="flex items-center gap-2 text-button1 hover:text-[#5f494f] transition-colors"
title={isEditMode ? "خروج از حالت ویرایش" : "ویرایش دسته‌بندی‌ها"} title={
isEditMode ? "خروج از حالت ویرایش" : "ویرایش دسته‌بندی‌ها"
}
> >
<img src={Vector16} alt="ویرایش" className="w-5 h-5" /> <img src={Vector16} alt="ویرایش" className="w-5 h-5" />
<span className="text-sm md:text-base">{isEditMode ? "تمام" : "ویرایش"}</span> <span className="text-sm md:text-base">
{isEditMode ? "تمام" : "ویرایش"}
</span>
</button> </button>
</div> </div>
@ -313,11 +357,13 @@ export default function EditCafe() {
/> />
</div> </div>
) : ( ) : (
<div className={`flex items-center gap-2 px-3 py-2 rounded-lg text-[#402E32] text-xs md:text-sm whitespace-nowrap ${ <div
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-[#402E32] text-xs md:text-sm whitespace-nowrap ${
isEditMode isEditMode
? "bg-gray-100 hover:bg-gray-200" ? "bg-gray-100 hover:bg-gray-200"
: "bg-[#e1d5c2]" : "bg-[#e1d5c2]"
} transition-colors`}> } transition-colors`}
>
<span>{category}</span> <span>{category}</span>
{isEditMode && ( {isEditMode && (
<> <>
@ -379,18 +425,28 @@ export default function EditCafe() {
{/* Products Section */} {/* Products Section */}
<div> <div>
<h2 className="font-bold text-[#402E32] mb-4 text-base md:text-lg">محصولات</h2> <h2 className="font-bold text-[#402E32] mb-4 text-base md:text-lg">
محصولات
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
{CAFE_PRODUCTS.map((product, idx) => ( {CAFE_PRODUCTS.map((product, idx) => (
<div <div
key={idx} key={idx}
className="bg-white border border-gray-200 rounded-xl p-4 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md" className="bg-white border border-gray-200 rounded-xl p-4 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md"
> >
<h3 className="font-bold text-[#402E32] text-sm md:text-base mb-3">{product.name}</h3> <h3 className="font-bold text-[#402E32] text-sm md:text-base mb-3">
<img src={product.image} alt={product.name} className="w-full h-40 object-cover rounded-lg mb-3" /> {product.name}
</h3>
<img
src={product.image}
alt={product.name}
className="w-full h-40 object-cover rounded-lg mb-3"
/>
<div className="flex justify-between items-center mb-3 text-sm"> <div className="flex justify-between items-center mb-3 text-sm">
<span className="text-[#66585b]">قیمت:</span> <span className="text-[#66585b]">قیمت:</span>
<span className="font-medium text-[#402E32]">{product.price}</span> <span className="font-medium text-[#402E32]">
{product.price}
</span>
</div> </div>
<p className="text-xs md:text-sm text-[#66585b] line-clamp-3"> <p className="text-xs md:text-sm text-[#66585b] line-clamp-3">
{product.description} {product.description}
@ -400,6 +456,8 @@ export default function EditCafe() {
</div> </div>
</div> </div>
</div> </div>
</>
)}
</section> </section>
); );
} }

View File

@ -0,0 +1,124 @@
import { useState } from "react";
import { CgAddR } from "react-icons/cg";
import { PiCoffee } from "react-icons/pi";
import { FaRegEdit } from "react-icons/fa";
import CoffeeCard from "./Component/CoffeeCard";
import coffee12 from "../../assets/image/coffee12.png";
const DEFAULT_CATEGORIES = [
"نوشیدنی سرد",
"نوشیدنی گرم",
"کیک و دسر",
"صبحانه",
"ساندویچ و برگر",
"سالاد و پیش غذا",
];
const PRODUCTS = [
{
id: 1,
title: "اسپرسو",
description: "قهوه 100٪ عربیکا با عطر بالا",
price: "118,000",
image: coffee12,
},
{
id: 2,
title: "لاته",
description: "شیر بخار داده شده + اسپرسو",
price: "135,000",
image: coffee12,
},
{
id: 3,
title: "کاپوچینو",
description: "کلاسیک ایتالیایی با فوم شیر",
price: "142,000",
image: coffee12,
},
];
export default function EditCafeMenu({ setEditMenu }) {
const [selectedCategory, setSelectedCategory] = useState(null);
return (
<div>
<h1 className="text-bold text-2xl text-text1">ادیت منو کافه</h1>
<div className="flex gap-3 justify-end mb-6">
<button
onClick={() => setEditMenu(false)}
className="px-4 md:px-6 py-2 border-2 border-[#bb8f70] text-[#402e32] rounded-3xl
hover:bg-button1 hover:text-white hover:border-button1
transition-all duration-300 text-sm md:text-base font-medium"
>
انصراف
</button>
<button
className="px-4 md:px-6 py-2 bg-button1 text-white rounded-3xl
hover:bg-[#5f494f] transition-all duration-300
text-sm md:text-base font-medium"
>
تایید
</button>
</div>
<div className="flex mt-10 border-b-2 border-border pb-2 relative">
<div className="flex items-center gap-1 text-text1">
<CgAddR />
<p>عنوان</p>
</div>
<div className="flex mr-6 gap-4 relative">
{DEFAULT_CATEGORIES.map((cat, index) => (
<button
key={index}
onClick={() => setSelectedCategory(cat)}
className={`relative -bottom-[2px] pb-2 text-sm md:text-base transition-all
${
selectedCategory === cat
? "text-text1 font-bold"
: "text-gray-400 hover:text-text1"
}`}
>
{cat}
{selectedCategory === cat && (
<span
className="absolute left-0 -bottom-[9px] w-full h-[5px]
bg-border rounded-full transition-all duration-300"
/>
)}
</button>
))}
</div>
</div>
{/* جزئیات category انتخاب شده */}
{selectedCategory && (
<>
<div className="flex mt-8 gap-1 font-bold items-center text-center text-text1">
<CgAddR />
افزودن زیر عنوان
</div>
<div className="flex font-bold items-center text-center gap-2 mt-4">
<FaRegEdit size={30} />
<PiCoffee size={30} />
<p className="border-b-2 border-border">قهوه ها</p>
</div>
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{PRODUCTS.map((item) => (
<CoffeeCard
key={item.id}
title={item.title}
description={item.description}
price={item.price}
image={item.image}
onEdit={() => console.log("edit", item.id)}
/>
))}
</section>
</>
)}
</div>
);
}

View File

@ -7,6 +7,7 @@ import CafeManagement from '../pages/CafeManagement/CafeManagement';
import EditCafe from '../pages/CafeManagement/EditCafe'; import EditCafe from '../pages/CafeManagement/EditCafe';
import Stats from '../pages/Stats/Stats'; import Stats from '../pages/Stats/Stats';
export default function AppRoutes() { export default function AppRoutes() {
return ( return (
<Routes> <Routes>