edit cofe
This commit is contained in:
Mohammadreza
parent
5a308dff2a
commit
c748620429
File diff suppressed because it is too large
Load Diff
|
|
@ -19,6 +19,7 @@
|
|||
"react-icons": "^5.5.0",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-router-dom": "^7.9.4",
|
||||
"recharts": "^3.6.0",
|
||||
"tailwind-scrollbar-hide": "^4.0.0",
|
||||
"tailwindcss": "^4.1.14"
|
||||
},
|
||||
|
|
@ -31,7 +32,7 @@
|
|||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.22",
|
||||
"globals": "^16.4.0",
|
||||
"vite-plugin-svgr": "^4.5.0",
|
||||
"vite": "^5.2.0"
|
||||
"vite": "^7.3.0",
|
||||
"vite-plugin-svgr": "^4.5.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 756 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
|
|
@ -29,34 +29,28 @@ import Search from "../../../assets/icons/search.svg";
|
|||
import Arrow from "../../../assets/icons/arrow.svg";
|
||||
import Vector7 from "../../../assets/icons/Vector7.svg";
|
||||
import Pic from "../../../assets/icons/pic.png";
|
||||
import toggleTheme from "../../ToggleTheme";
|
||||
import { CgDarkMode } from "react-icons/cg";
|
||||
|
||||
const Header = () => {
|
||||
|
||||
const Header = ({ title }) => {
|
||||
return (
|
||||
<header className="flex items-center justify-end gap-4 p-3">
|
||||
{/* <h3 className="text-[#402E32] font-bold text-lg">{title}</h3> */}
|
||||
<header className="flex items-center w-full h-full justify-between gap-4 p-3">
|
||||
<h3 className="text-text1 font-bold text-lg md:text-xl">{title}</h3>
|
||||
<div className="flex items-center gap-1 lg:gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 lg:w-12 lg:h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-header2">
|
||||
<img src={Search} alt="search" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-12 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-header2">
|
||||
<img src={Search} alt="search" />
|
||||
</div>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="fixed top-16 left-2 w-12 h-10 flex justify-center items-center"
|
||||
>
|
||||
<CgDarkMode className="w-6 h-6 text-[#8B8886]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center w-40 md:w-60 justify-between border-2 border-[#8B8886] rounded-2xl px-3 py-1 bg-header2">
|
||||
<img src={Pic} className="w-8 h-8 rounded-full ml-1" alt="user" />
|
||||
<p className="text-[#402E32] text-sm">سارا راد</p>
|
||||
<img src={Arrow} className="w-4 h-4 ml-1" alt="arrow" />
|
||||
<div className="flex items-center w-36 md:w-60 justify-between border-2 border-[#8B8886] rounded-2xl px-3 py-1 bg-header2">
|
||||
<img src={Pic} className="w-8 h-8 rounded-full ml-1" alt="user" />
|
||||
<p className="text-[#402E32] text-sm">سارا راد</p>
|
||||
<img src={Arrow} className="w-4 h-4 ml-1" alt="arrow" />
|
||||
</div>
|
||||
|
||||
<img src={Vector7} alt="vector" className="w-6 h-6 lg:w-7 lg:h-7" />
|
||||
</div>
|
||||
|
||||
<img src={Vector7} alt="vector" />
|
||||
|
||||
</header >
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import { useState, useEffect } from "react";
|
||||
import LogoDM from "../../../assets/icons/LogoDM.svg";
|
||||
import LogoLM from "../../../assets/icons/Logo-LM.svg";
|
||||
import { BiBarChartAlt2 } from "react-icons/bi";
|
||||
import { AiOutlinePieChart } from "react-icons/ai";
|
||||
import { PiCoffee } from "react-icons/pi";
|
||||
import { HiOutlineLogout } from "react-icons/hi";
|
||||
import { FiMenu, FiX } from "react-icons/fi";
|
||||
|
||||
|
||||
const SIDEBAR = {
|
||||
logo: LogoDM,
|
||||
navigation: [
|
||||
{
|
||||
id: 'dashboard',
|
||||
|
|
@ -33,7 +35,7 @@ const SIDEBAR = {
|
|||
label: 'خروج',
|
||||
},
|
||||
styles: {
|
||||
activeColor: '#7F4629',
|
||||
activeColor: 'primary',
|
||||
inactiveColor: '#402E32',
|
||||
borderColor: '#D9CAB3',
|
||||
padding: 'p-2.5',
|
||||
|
|
@ -45,6 +47,20 @@ const SIDEBAR = {
|
|||
export default function Sidebar({ className, isOpen, setIsOpen }) {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [currentLogo, setCurrentLogo] = useState(localStorage.getItem('theme') === 'light' ? LogoDM : LogoLM);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new MutationObserver(() => {
|
||||
setCurrentLogo(localStorage.getItem('theme') === 'light' ? LogoDM : LogoLM);
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class']
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const isActive = (path) => location.pathname === path;
|
||||
|
||||
|
|
@ -73,25 +89,22 @@ export default function Sidebar({ className, isOpen, setIsOpen }) {
|
|||
key={item.id}
|
||||
to={item.path}
|
||||
onClick={closeSidebar}
|
||||
className={`group flex items-center ${SIDEBAR.styles.gap} ${SIDEBAR.styles.rounded} ${SIDEBAR.styles.padding} transition-all duration-200 ${
|
||||
active
|
||||
? `bg-[${SIDEBAR.styles.activeColor}] shadow-md`
|
||||
: `hover:bg-[${SIDEBAR.styles.activeColor}]`
|
||||
}`}
|
||||
className={`group flex items-center ${SIDEBAR.styles.gap} ${SIDEBAR.styles.rounded} ${SIDEBAR.styles.padding} transition-all duration-200 ${active
|
||||
? `bg-primary shadow-md`
|
||||
: `hover:bg-primary hover:text-text2`
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
className={`w-5 h-5 flex-shrink-0 transition-colors ${
|
||||
active
|
||||
? "text-white"
|
||||
: `text-[${SIDEBAR.styles.inactiveColor}] group-hover:text-white`
|
||||
}`}
|
||||
className={`w-5 h-5 flex-shrink-0 text-text1 transition-colors ${active
|
||||
? "text-white"
|
||||
: `text-[${SIDEBAR.styles.inactiveColor}] group-hover:text-white`
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`text-sm font-medium transition-colors ${
|
||||
active
|
||||
? "text-white"
|
||||
: `text-[${SIDEBAR.styles.inactiveColor}] group-hover:text-white`
|
||||
}`}
|
||||
className={`text-sm font-medium transition-colors ${active
|
||||
? "text-text2"
|
||||
: ` text-text1 group-hover:text-white`
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
|
|
@ -101,13 +114,18 @@ export default function Sidebar({ className, isOpen, setIsOpen }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="lg:hidden fixed top-4 right-4 z-[70] bg-button1 text-white p-2.5 rounded-lg shadow-lg"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isOpen ? <FiX className="w-5 h-5" /> : <FiMenu className="w-5 h-5" />}
|
||||
</button>
|
||||
<div className="lg:hidden fixed top-0 px-6 bg-header right-0 left-0 z-[70] flex justify-between p-3">
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className=" text-primary"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<FiMenu className="w-6 h-6" />
|
||||
</button>
|
||||
|
||||
<img src={currentLogo} className="h-12 w-12 " alt="Logo" />
|
||||
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<div
|
||||
|
|
@ -115,17 +133,23 @@ export default function Sidebar({ className, isOpen, setIsOpen }) {
|
|||
onClick={closeSidebar}
|
||||
/>
|
||||
)}
|
||||
|
||||
<aside
|
||||
dir="rtl"
|
||||
className={`${className}
|
||||
transition-transform duration-300 ease-in-out
|
||||
${isOpen ? 'translate-x-0' : 'translate-x-full'}
|
||||
lg:translate-x-0 lg:w-[220px]
|
||||
lg:translate-x-0 lg:w-[220px] bg-header
|
||||
`}
|
||||
>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="lg:hidden absolute top-4 right-4 z-[70] text-primary p-2.5"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<FiX className="w-6 h-6" />
|
||||
</button>
|
||||
<div className="flex justify-center mt-5 mb-2">
|
||||
<img src={SIDEBAR.logo} className="h-10 w-10 lg:h-12 lg:w-12" alt="Logo" />
|
||||
<img src={currentLogo} className="h-10 w-10 lg:h-16 lg:w-16" alt="Logo" />
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-3 mt-6 space-y-3 overflow-y-auto">
|
||||
|
|
|
|||
|
|
@ -1,44 +1,60 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Outlet, useLocation } from "react-router-dom";
|
||||
import Sidebar from "./Sidebar/sidebar";
|
||||
import Header from "./Header/header";
|
||||
|
||||
import toggleTheme from "../ToggleTheme";
|
||||
import { CgDarkMode } from "react-icons/cg";
|
||||
|
||||
const HEADER_PATHS = [
|
||||
"/management",
|
||||
"/management/",
|
||||
"/management/cafes",
|
||||
"/edit-cafe",
|
||||
"/edit-cafe/",
|
||||
"/cafe",
|
||||
"/cafes",
|
||||
"/admin",
|
||||
{ route: "/cafe-management", title: "مدیریت کافه ها" },
|
||||
{ route: "/dashboard", title: "داشبورد" },
|
||||
{ route: "/stats", title: "آمار و تحلیل" },
|
||||
{ route: "/edit-cafe/", title: "ویرایش کافه" },
|
||||
|
||||
];
|
||||
|
||||
export default function Layout() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const location = useLocation();
|
||||
const path = location.pathname;
|
||||
const [headerTitle, setHeaderTitle] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const currentPath = location.pathname;
|
||||
const headerPath = HEADER_PATHS.find((path) => currentPath.startsWith(path.route));
|
||||
if (headerPath) {
|
||||
setHeaderTitle(headerPath.title);
|
||||
} else {
|
||||
setHeaderTitle("");
|
||||
}
|
||||
}, [location.pathname]);
|
||||
// Check if current path should show header
|
||||
const showHeader = HEADER_PATHS.some((p) => path.startsWith(p) || path.includes(p));
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen w-full bg-[#FDF8F4]">
|
||||
<div className="flex min-h-screen w-full bg-background">
|
||||
{/* Sidebar */}
|
||||
<Sidebar
|
||||
className="fixed top-0 right-0 bottom-0 z-[65] w-[260px] flex flex-col bg-[#EFEEEE] rounded-l-2xl shadow-xl border-l border-[#D9CAB3]"
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
<Sidebar
|
||||
className="fixed top-0 right-0 bottom-0 z-[80] w-[260px] flex flex-col bg-[#EFEEEE] rounded-l-2xl shadow-xl border-l border-[#D9CAB3]"
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
/>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col min-h-screen w-full lg:mr-[220px]">
|
||||
{/* Header */}
|
||||
{showHeader && (
|
||||
<div className="fixed top-0 right-0 left-0 lg:right-[220px] z-30">
|
||||
<Header title="مدیریت کافهها" />
|
||||
</div>
|
||||
)}
|
||||
{/* {showHeader && ( */}
|
||||
<div className="mt-18 lg:mt-0 w-full h-16 bg-background p-2 lg:right-[220px] z-30">
|
||||
<Header title={headerTitle} />
|
||||
</div>
|
||||
{/* )} */}
|
||||
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="fixed top-14 left-0 w-12 h-10 z-[1000] flex justify-center items-center"
|
||||
>
|
||||
<CgDarkMode className="w-6 h-6 text-[#8B8886]" />
|
||||
</button>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main
|
||||
|
|
|
|||
|
|
@ -8,180 +8,212 @@ import { Link } from "react-router-dom";
|
|||
import cafeService from "../../services/cafe";
|
||||
|
||||
const CafeManagement = () => {
|
||||
const [cafes, setCafes] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [cafes, setCafes] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCafes = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
useEffect(() => {
|
||||
const fetchCafes = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const res = await cafeService.getCafeList();
|
||||
if (res.data.success && res.data.data) {
|
||||
setCafes(res.data.data);
|
||||
console.log("✅ Cafes loaded successfully:", res.data);
|
||||
} else {
|
||||
setError("دادههای دریافتی معتبر نیست");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error loading cafes:", error);
|
||||
const errorMessage =
|
||||
error.response?.data?.message ||
|
||||
(error.request ? "خطا در برقراری ارتباط با سرور" : "خطای نامشخص رخ داده است");
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCafes();
|
||||
}, []);
|
||||
|
||||
const renderContent = () => {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen">
|
||||
<div className="text-button1 text-xl font-bold">در حال بارگذاری...</div>
|
||||
</div>
|
||||
);
|
||||
try {
|
||||
const res = await cafeService.getCafeList();
|
||||
if (res.data.success && res.data.data) {
|
||||
setCafes(res.data.data);
|
||||
console.log("✅ Cafes loaded successfully:", res.data);
|
||||
} else {
|
||||
setError("دادههای دریافتی معتبر نیست");
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-50 border-2 border-red-300 text-red-700 px-4 py-3 rounded-xl mt-4">
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (cafes.length === 0) {
|
||||
return (
|
||||
<div className="text-center mt-20 text-gray-500">
|
||||
هیچ کافهای یافت نشد
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* جدول دسکتاپ */}
|
||||
<div className="hidden lg:block mt-10 overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-[#EFEEEE]">
|
||||
<th className="px-4 py-3 text-right text-[#402E32] font-medium text-sm">لوگو</th>
|
||||
<th className="px-4 py-3 text-right text-[#402E32] font-medium text-sm">اسم</th>
|
||||
<th className="px-4 py-3 text-right text-[#402E32] font-medium text-sm">آدرس</th>
|
||||
<th className="px-4 py-3 text-right text-[#402E32] font-medium text-sm">ریتینگ</th>
|
||||
<th className="px-4 py-3 text-right text-[#402E32] font-medium text-sm">ساعت کاری</th>
|
||||
<th className="px-4 py-3 text-right text-[#402E32] font-medium text-sm">ادیت</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{cafes.map((cafe) => (
|
||||
<tr key={cafe._id} className="border-b border-[#EFEEEE] hover:bg-gray-50 transition-colors">
|
||||
<td className="px-4 py-4 text-right">
|
||||
<img
|
||||
src={cafe.photo || Pic1}
|
||||
alt={cafe.Name}
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right text-[#402E32] font-medium text-sm whitespace-nowrap">
|
||||
{cafe.Name}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right text-[#402E32] text-sm max-w-xs overflow-hidden text-ellipsis">
|
||||
{cafe.address}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={Star1} alt="rating" className="w-5 h-5" />
|
||||
<span className="text-[#402E32] text-sm">{cafe.rating || 0}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={Group} alt="time" className="w-5 h-5" />
|
||||
<span className="text-[#402E32] text-sm whitespace-nowrap">
|
||||
{cafe.openinghour || "نامشخص"}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-center">
|
||||
<Link
|
||||
to={`/edit-cafe/${cafe._id}`}
|
||||
className="inline-flex items-center justify-center gap-2 border-2 border-[#BB8F70] px-6 py-2 rounded-3xl text-sm font-light text-[#402E32] hover:bg-button1 hover:text-white hover:border-button1 transition-all duration-300"
|
||||
>
|
||||
<span>ادیت</span>
|
||||
<BiEdit className="w-4 h-4" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* کارت موبایل */}
|
||||
<div className="lg:hidden mt-6 space-y-4">
|
||||
{cafes.map((cafe) => (
|
||||
<div key={cafe._id} className="bg-white border-2 border-[#8b8886] rounded-xl p-4">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<img
|
||||
src={cafe.photo || Pic1}
|
||||
alt={cafe.Name}
|
||||
className="w-16 h-16 rounded-full object-cover flex-shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-bold text-[#402E32] mb-1 text-sm">{cafe.Name}</h3>
|
||||
<p className="text-xs text-gray-600 truncate">{cafe.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-4 text-xs gap-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<img src={Star1} alt="rating" className="w-4 h-4" />
|
||||
<span className="text-[#402E32]">{cafe.rating || 0}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<img src={Group} alt="time" className="w-4 h-4" />
|
||||
<span className="text-[#402E32]">{cafe.openinghour || "نامشخص"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to={`/edit-cafe/${cafe._id}`}
|
||||
className="flex justify-center items-center gap-2 w-full border-2 border-[#BB8F70] py-2 rounded-full text-sm font-medium text-[#402E32] hover:bg-button1 hover:text-white hover:border-button1 transition-all duration-300"
|
||||
>
|
||||
<span>ادیت کافه</span>
|
||||
<BiEdit className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("❌ Error loading cafes:", error);
|
||||
const errorMessage =
|
||||
error.response?.data?.message ||
|
||||
(error.request
|
||||
? "خطا در برقراری ارتباط با سرور"
|
||||
: "خطای نامشخص رخ داده است");
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCafes();
|
||||
}, []);
|
||||
|
||||
const renderContent = () => {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen">
|
||||
<div className="text-button1 text-xl font-bold">
|
||||
در حال بارگذاری...
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-50 border-2 border-red-300 text-red-700 px-4 py-3 rounded-xl mt-4">
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (cafes.length === 0) {
|
||||
return (
|
||||
<div className="text-center mt-20 text-gray-500">
|
||||
هیچ کافهای یافت نشد
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section dir="rtl" className="w-full pt-24 max-w-full overflow-x-hidden">
|
||||
{/* بخش دکمه اضافه کردن */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<button className="flex items-center justify-center gap-3 px-6 py-3 bg-button1 text-white rounded-3xl text-sm lg:text-base font-medium hover:bg-amber-950 transition-all duration-300 cursor-pointer">
|
||||
<span>افزودن شعبه جدید</span>
|
||||
<img src={Vector9} alt="افزودن" className="w-5 h-5" />
|
||||
</button>
|
||||
<>
|
||||
{/* جدول دسکتاپ */}
|
||||
<div className="hidden lg:block mt-10 overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-thead">
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
لوگو
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
اسم
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
آدرس
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
ریتینگ
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
ساعت کاری
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-text2 font-medium text-sm">
|
||||
ادیت
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{cafes.map((cafe) => (
|
||||
<tr
|
||||
key={cafe._id}
|
||||
className="border-b border-[#EFEEEE] hover:bg-hover transition-colors"
|
||||
>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<img
|
||||
src={cafe.photo || Pic1}
|
||||
alt={cafe.Name}
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right text-[#402E32] font-medium text-sm whitespace-nowrap">
|
||||
{cafe.Name}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right text-[#402E32] text-sm max-w-xs overflow-hidden text-ellipsis">
|
||||
{cafe.address}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={Star1} alt="rating" className="w-5 h-5" />
|
||||
<span className="text-[#402E32] text-sm">
|
||||
{cafe.rating || 0}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={Group} alt="time" className="w-5 h-5" />
|
||||
<span className="text-[#402E32] text-sm whitespace-nowrap">
|
||||
{cafe.openinghour || "نامشخص"}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-center">
|
||||
<Link
|
||||
to={`/edit-cafe/${cafe._id}`}
|
||||
className="inline-flex items-center justify-center gap-2 border-2 border-[#BB8F70] px-6 py-2 rounded-3xl text-sm font-light text-text1 hover:bg-button1 hover:border-button1 transition-all duration-300"
|
||||
>
|
||||
<span>ادیت</span>
|
||||
<BiEdit className="w-4 h-4" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* کارت موبایل */}
|
||||
<div className="lg:hidden mt-6 space-y-4">
|
||||
{cafes.map((cafe) => (
|
||||
<div
|
||||
key={cafe._id}
|
||||
className="bg-white border-2 border-[#8b8886] rounded-xl p-4"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<img
|
||||
src={cafe.photo || Pic1}
|
||||
alt={cafe.Name}
|
||||
className="w-16 h-16 rounded-full object-cover flex-shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-bold text-[#402E32] mb-1 text-sm">
|
||||
{cafe.Name}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-600 truncate">
|
||||
{cafe.address}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-4 text-xs gap-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<img src={Star1} alt="rating" className="w-4 h-4" />
|
||||
<span className="text-[#402E32]">{cafe.rating || 0}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<img src={Group} alt="time" className="w-4 h-4" />
|
||||
<span className="text-[#402E32]">
|
||||
{cafe.openinghour || "نامشخص"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to={`/edit-cafe/${cafe._id}`}
|
||||
className="flex justify-center items-center gap-2 w-full border-2 border-[#BB8F70] py-2 rounded-full text-sm font-medium text-text1 hover:bg-button1 hover:border-button1 transition-all duration-300"
|
||||
>
|
||||
<span className="">ادیت کافه</span>
|
||||
<BiEdit className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* عنوان */}
|
||||
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">کافه های شما</h1>
|
||||
|
||||
{/* محتوای اصلی */}
|
||||
{renderContent()}
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section dir="rtl" className="w-full pt-24 max-w-full overflow-x-hidden">
|
||||
{/* بخش دکمه اضافه کردن */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<button className="flex items-center justify-center gap-3 px-6 py-3 bg-button1 text-white rounded-3xl text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
|
||||
<span>افزودن شعبه جدید</span>
|
||||
<img src={Vector9} alt="افزودن" className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* عنوان */}
|
||||
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">
|
||||
کافه های شما
|
||||
</h1>
|
||||
|
||||
{/* محتوای اصلی */}
|
||||
{renderContent()}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CafeManagement;
|
||||
export default CafeManagement;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,6 +4,8 @@ import { GrLocation } from "react-icons/gr";
|
|||
import { BiEdit } from "react-icons/bi";
|
||||
import { FaRegStar } from "react-icons/fa";
|
||||
import { IoMdCheckmark, IoMdClose } from "react-icons/io";
|
||||
import { FaRegEdit } from "react-icons/fa";
|
||||
import EditCafeMenu from "./EditCafeMenu";
|
||||
|
||||
// Assets
|
||||
import Bg1 from "../../assets/icons/bg1.svg";
|
||||
|
|
@ -25,381 +27,437 @@ import cafeService from "../../services/cafe";
|
|||
|
||||
// Constants
|
||||
const DEFAULT_CATEGORIES = [
|
||||
"نوشیدنی سرد",
|
||||
"نوشیدنی گرم",
|
||||
"کیک و دسر",
|
||||
"صبحانه",
|
||||
"ساندویچ و برگر",
|
||||
"سالاد و پیش غذا",
|
||||
"نوشیدنی سرد",
|
||||
"نوشیدنی گرم",
|
||||
"کیک و دسر",
|
||||
"صبحانه",
|
||||
"ساندویچ و برگر",
|
||||
"سالاد و پیش غذا",
|
||||
];
|
||||
|
||||
const CAFE_FEATURES = [
|
||||
{ icon: Coffee3, label: "منو کافه:", width: "lg:w-[140px]" },
|
||||
{ icon: Vector15, label: "ساعت کاری:", value: "23 - 8" },
|
||||
{ icon: Vector14, label: "رزرو :", value: "رزرو آنلاین" },
|
||||
{ icon: Vector11, label: "موسیقی :", value: "موسیقی زنده آخر هفته" },
|
||||
{ icon: Vector13, label: "پارکینگ :", value: "عمومی" },
|
||||
{ icon: Vector12, label: "دسترسی آسان :", value: "مناسب افراد ناتوان" },
|
||||
{ icon: Coffee3, label: "منو کافه:", width: "lg:w-[140px]" },
|
||||
{ icon: Vector15, label: "ساعت کاری:", value: "23 - 8" },
|
||||
{ icon: Vector14, label: "رزرو :", value: "رزرو آنلاین" },
|
||||
{ icon: Vector11, label: "موسیقی :", value: "موسیقی زنده آخر هفته" },
|
||||
{ icon: Vector13, label: "پارکینگ :", value: "عمومی" },
|
||||
{ icon: Vector12, label: "دسترسی آسان :", value: "مناسب افراد ناتوان" },
|
||||
];
|
||||
|
||||
const CAFE_PRODUCTS = [
|
||||
{
|
||||
name: "اسپرسو100%",
|
||||
price: "118.000",
|
||||
image: Sperso,
|
||||
description: "45 میلی لیتر، قهوه، 100% عربیکا، دم شده با دستگاه اسپرسو ساز، به همراه یک عدد آب معدنی مینی",
|
||||
},
|
||||
{
|
||||
name: "کارامل ماکیاتو",
|
||||
price: "149.000",
|
||||
image: Coffee1,
|
||||
description: "220 میلی لیتر، 2 شات اسپرسو 30% روبوستا، 70% عربیکا، یک لکه فوم شیر، سیروپ کارامل",
|
||||
},
|
||||
{
|
||||
name: "اسپرسو آفوگاتو",
|
||||
price: "118.000",
|
||||
image: Coffee2,
|
||||
description: "اسپرسو، یک اسکوپ بستنی وانیلی",
|
||||
},
|
||||
{
|
||||
name: "اسپرسو100%",
|
||||
price: "118.000",
|
||||
image: Sperso,
|
||||
description:
|
||||
"45 میلی لیتر، قهوه، 100% عربیکا، دم شده با دستگاه اسپرسو ساز، به همراه یک عدد آب معدنی مینی",
|
||||
},
|
||||
{
|
||||
name: "کارامل ماکیاتو",
|
||||
price: "149.000",
|
||||
image: Coffee1,
|
||||
description:
|
||||
"220 میلی لیتر، 2 شات اسپرسو 30% روبوستا، 70% عربیکا، یک لکه فوم شیر، سیروپ کارامل",
|
||||
},
|
||||
{
|
||||
name: "اسپرسو آفوگاتو",
|
||||
price: "118.000",
|
||||
image: Coffee2,
|
||||
description: "اسپرسو، یک اسکوپ بستنی وانیلی",
|
||||
},
|
||||
];
|
||||
|
||||
export default function EditCafe() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [editmenu, setEditMenu] = useState(false);
|
||||
|
||||
// State Management
|
||||
const [cafeData, setCafeData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [categories, setCategories] = useState(() => {
|
||||
const saved = localStorage.getItem("cafeCategories");
|
||||
return saved ? JSON.parse(saved) : DEFAULT_CATEGORIES;
|
||||
});
|
||||
const [isEditMode, setIsEditMode] = useState(false);
|
||||
const [isAddingCategory, setIsAddingCategory] = useState(false);
|
||||
const [newCategory, setNewCategory] = useState("");
|
||||
const [editingIndex, setEditingIndex] = useState(null);
|
||||
const [editValue, setEditValue] = useState("");
|
||||
// State Management
|
||||
const [cafeData, setCafeData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [categories, setCategories] = useState(() => {
|
||||
const saved = localStorage.getItem("cafeCategories");
|
||||
return saved ? JSON.parse(saved) : DEFAULT_CATEGORIES;
|
||||
});
|
||||
const [isEditMode, setIsEditMode] = useState(false);
|
||||
const [isAddingCategory, setIsAddingCategory] = useState(false);
|
||||
const [newCategory, setNewCategory] = useState("");
|
||||
const [editingIndex, setEditingIndex] = useState(null);
|
||||
const [editValue, setEditValue] = useState("");
|
||||
|
||||
// Effects
|
||||
useEffect(() => {
|
||||
fetchCafeData();
|
||||
}, [id]);
|
||||
// Effects
|
||||
useEffect(() => {
|
||||
fetchCafeData();
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("cafeCategories", JSON.stringify(categories));
|
||||
}, [categories]);
|
||||
useEffect(() => {
|
||||
localStorage.setItem("cafeCategories", JSON.stringify(categories));
|
||||
}, [categories]);
|
||||
|
||||
// API Calls
|
||||
const fetchCafeData = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await cafeService.getCafeList();
|
||||
if (res.data.success && res.data.data) {
|
||||
const cafe = res.data.data.find((c) => c._id === id);
|
||||
if (cafe) {
|
||||
setCafeData(cafe);
|
||||
console.log("✅ Cafe data loaded:", cafe);
|
||||
} else {
|
||||
setError("کافه مورد نظر یافت نشد");
|
||||
}
|
||||
} else {
|
||||
setError("دادههای کافه معتبر نیست");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error loading cafe:", error);
|
||||
const errorMessage =
|
||||
error.response?.data?.message ||
|
||||
(error.request ? "خطا در برقراری ارتباط با سرور" : "خطای نامشخص رخ داده است");
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
// API Calls
|
||||
const fetchCafeData = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await cafeService.getCafeList();
|
||||
if (res.data.success && res.data.data) {
|
||||
const cafe = res.data.data.find((c) => c._id === id);
|
||||
if (cafe) {
|
||||
setCafeData(cafe);
|
||||
console.log("✅ Cafe data loaded:", cafe);
|
||||
} else {
|
||||
setError("کافه مورد نظر یافت نشد");
|
||||
}
|
||||
};
|
||||
} else {
|
||||
setError("دادههای کافه معتبر نیست");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error loading cafe:", error);
|
||||
const errorMessage =
|
||||
error.response?.data?.message ||
|
||||
(error.request
|
||||
? "خطا در برقراری ارتباط با سرور"
|
||||
: "خطای نامشخص رخ داده است");
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Category Handlers
|
||||
const handleAddCategory = () => {
|
||||
if (newCategory.trim()) {
|
||||
setCategories([...categories, newCategory.trim()]);
|
||||
setNewCategory("");
|
||||
setIsAddingCategory(false);
|
||||
setTimeout(() => {
|
||||
const scrollContainer = document.querySelector(".categories-scroll");
|
||||
if (scrollContainer) {
|
||||
scrollContainer.scrollLeft = scrollContainer.scrollWidth;
|
||||
}
|
||||
}, 0);
|
||||
// Category Handlers
|
||||
const handleAddCategory = () => {
|
||||
if (newCategory.trim()) {
|
||||
setCategories([...categories, newCategory.trim()]);
|
||||
setNewCategory("");
|
||||
setIsAddingCategory(false);
|
||||
setTimeout(() => {
|
||||
const scrollContainer = document.querySelector(".categories-scroll");
|
||||
if (scrollContainer) {
|
||||
scrollContainer.scrollLeft = scrollContainer.scrollWidth;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCategory = (index) => {
|
||||
setCategories(categories.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleEditCategory = (index) => {
|
||||
setEditingIndex(index);
|
||||
setEditValue(categories[index]);
|
||||
};
|
||||
|
||||
const handleSaveCategory = () => {
|
||||
if (editValue.trim()) {
|
||||
const newCategories = [...categories];
|
||||
newCategories[editingIndex] = editValue.trim();
|
||||
setCategories(newCategories);
|
||||
setEditingIndex(null);
|
||||
setEditValue("");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setEditingIndex(null);
|
||||
setEditValue("");
|
||||
};
|
||||
|
||||
// Render States
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen">
|
||||
<div className="text-button1 text-2xl font-bold">در حال بارگذاری...</div>
|
||||
</div>
|
||||
);
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="bg-red-50 border-2 border-red-300 text-red-700 px-4 py-3 rounded-xl">
|
||||
{error}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const handleDeleteCategory = (index) => {
|
||||
setCategories(categories.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleEditCategory = (index) => {
|
||||
setEditingIndex(index);
|
||||
setEditValue(categories[index]);
|
||||
};
|
||||
|
||||
const handleSaveCategory = () => {
|
||||
if (editValue.trim()) {
|
||||
const newCategories = [...categories];
|
||||
newCategories[editingIndex] = editValue.trim();
|
||||
setCategories(newCategories);
|
||||
setEditingIndex(null);
|
||||
setEditValue("");
|
||||
}
|
||||
};
|
||||
|
||||
if (!cafeData) {
|
||||
return (
|
||||
<div className="p-6 text-center text-gray-500">
|
||||
اطلاعات کافه یافت نشد
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const handleCancelEdit = () => {
|
||||
setEditingIndex(null);
|
||||
setEditValue("");
|
||||
};
|
||||
|
||||
return (
|
||||
<section dir="rtl" className="w-full overflow-x-hidden">
|
||||
<style>{`
|
||||
// Render States
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen">
|
||||
<div className="text-button1 text-2xl font-bold">
|
||||
در حال بارگذاری...
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="bg-red-50 border-2 border-red-300 text-red-700 px-4 py-3 rounded-xl">
|
||||
{error}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!cafeData) {
|
||||
return (
|
||||
<div className="p-6 text-center text-gray-500">اطلاعات کافه یافت نشد</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section dir="rtl" className="w-full overflow-x-hidden">
|
||||
{editmenu ? (
|
||||
<EditCafeMenu setEditMenu={setEditMenu} />
|
||||
) : (
|
||||
<>
|
||||
<style>{`
|
||||
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
||||
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
`}</style>
|
||||
|
||||
{/* Header */}
|
||||
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">ادیت {cafeData.Name}</h1>
|
||||
{/* Header */}
|
||||
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">
|
||||
ادیت {cafeData.Name}
|
||||
</h1>
|
||||
|
||||
{/* Main Container */}
|
||||
<div className="border-2 mt-1 border-[#8b8886] p-4 md:p-6 lg:p-10 rounded-2xl">
|
||||
{/* Cafe Info Section */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 mb-8">
|
||||
{/* Image */}
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src={cafeData.photo || Bg1}
|
||||
alt={cafeData.Name}
|
||||
className="w-full lg:w-[300px] xl:w-[400px] rounded-lg object-cover"
|
||||
/>
|
||||
</div>
|
||||
{/* Main Container */}
|
||||
<div className="border-2 mt-1 border-[#8b8886] p-4 md:p-6 lg:p-10 rounded-2xl">
|
||||
{/* Cafe Info Section */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 mb-8">
|
||||
{/* Image */}
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src={cafeData.photo || Bg1}
|
||||
alt={cafeData.Name}
|
||||
className="w-full lg:w-[300px] xl:w-[400px] rounded-lg object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1">
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3 justify-end mb-6">
|
||||
<button
|
||||
onClick={() => navigate("/cafe-management")}
|
||||
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>
|
||||
|
||||
{/* Basic Info */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<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>
|
||||
|
||||
<div className="flex items-center gap-3 text-[#402E32]">
|
||||
<GrLocation className="text-lg flex-shrink-0" />
|
||||
<span className="text-sm md:text-base">{cafeData.address || "آدرس موجود نیست"}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-[#402E32]">
|
||||
<FaRegStar className="text-lg flex-shrink-0" />
|
||||
<span className="text-sm md:text-base">{cafeData.rating || 0}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold text-[#402E32] mb-2">درباره کافه</h3>
|
||||
<p className="text-sm md:text-base text-[#555]">
|
||||
{cafeData.description || "توضیحاتی برای این کافه وجود ندارد."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Info */}
|
||||
<div className="flex-1">
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3 justify-end mb-6">
|
||||
<button
|
||||
onClick={() => navigate("/cafe-management")}
|
||||
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>
|
||||
|
||||
{/* Features Section */}
|
||||
<div className="mb-8">
|
||||
<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">
|
||||
{CAFE_FEATURES.map((feature, idx) => (
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<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">
|
||||
{feature.label}
|
||||
</span>
|
||||
{feature.value && (
|
||||
<span className="text-[#402E32] text-xs">{feature.value}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<button className="bg-[#5e5450] p-4 rounded-2xl flex items-center justify-center transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector9} alt="افزودن" className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories Section */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="font-bold text-[#402E32] text-base md:text-lg">دستهبندیها</h2>
|
||||
<button
|
||||
onClick={() => setIsEditMode(!isEditMode)}
|
||||
className="flex items-center gap-2 text-button1 hover:text-[#5f494f] transition-colors"
|
||||
title={isEditMode ? "خروج از حالت ویرایش" : "ویرایش دستهبندیها"}
|
||||
>
|
||||
<img src={Vector16} alt="ویرایش" className="w-5 h-5" />
|
||||
<span className="text-sm md:text-base">{isEditMode ? "تمام" : "ویرایش"}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="categories-scroll flex gap-3 md:gap-4 overflow-x-auto scrollbar-hide pb-2">
|
||||
{categories.map((category, idx) => (
|
||||
<div key={idx} className="flex-shrink-0">
|
||||
{isEditMode && editingIndex === idx ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex gap-1">
|
||||
<IoMdCheckmark
|
||||
onClick={handleSaveCategory}
|
||||
className="text-green-600 cursor-pointer hover:text-green-800 w-5 h-5"
|
||||
title="ذخیره"
|
||||
/>
|
||||
<IoMdClose
|
||||
onClick={handleCancelEdit}
|
||||
className="text-red-600 cursor-pointer hover:text-red-800 w-5 h-5"
|
||||
title="لغو"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
className="border-2 border-[#bb8f70] rounded-lg px-2 py-1 text-xs md:text-sm focus:outline-none focus:border-button1 min-w-[100px]"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className={`flex items-center gap-2 px-3 py-2 rounded-lg text-[#402E32] text-xs md:text-sm whitespace-nowrap ${
|
||||
isEditMode
|
||||
? "bg-gray-100 hover:bg-gray-200"
|
||||
: "bg-[#e1d5c2]"
|
||||
} transition-colors`}>
|
||||
<span>{category}</span>
|
||||
{isEditMode && (
|
||||
<>
|
||||
<BiEdit
|
||||
onClick={() => handleEditCategory(idx)}
|
||||
className="text-button1 cursor-pointer hover:text-[#5f494f] w-4 h-4 ml-1"
|
||||
title="ویرایش"
|
||||
/>
|
||||
<IoMdClose
|
||||
onClick={() => handleDeleteCategory(idx)}
|
||||
className="text-white bg-[#a79fa1] rounded cursor-pointer hover:bg-[#9a8f91] w-4 h-4"
|
||||
title="حذف"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{isEditMode && !isAddingCategory && (
|
||||
<button
|
||||
onClick={() => setIsAddingCategory(true)}
|
||||
className="flex-shrink-0 text-button1 hover:text-[#5f494f] font-bold text-sm md:text-base transition-colors whitespace-nowrap"
|
||||
>
|
||||
+ افزودن
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isEditMode && isAddingCategory && (
|
||||
<div className="flex-shrink-0 flex flex-col gap-2">
|
||||
<div className="flex gap-1">
|
||||
<IoMdCheckmark
|
||||
onClick={handleAddCategory}
|
||||
className="text-green-600 cursor-pointer hover:text-green-800 w-5 h-5"
|
||||
title="ذخیره"
|
||||
/>
|
||||
<IoMdClose
|
||||
onClick={() => {
|
||||
setIsAddingCategory(false);
|
||||
setNewCategory("");
|
||||
}}
|
||||
className="text-red-600 cursor-pointer hover:text-red-800 w-5 h-5"
|
||||
title="لغو"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={newCategory}
|
||||
onChange={(e) => setNewCategory(e.target.value)}
|
||||
placeholder="دسته جدید"
|
||||
className="border-2 border-[#bb8f70] rounded-lg px-2 py-1 text-xs md:text-sm focus:outline-none focus:border-button1 min-w-[100px]"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products Section */}
|
||||
<div>
|
||||
<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">
|
||||
{CAFE_PRODUCTS.map((product, idx) => (
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<h3 className="font-bold text-[#402E32] text-sm md:text-base 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">
|
||||
<span className="text-[#66585b]">قیمت:</span>
|
||||
<span className="font-medium text-[#402E32]">{product.price}</span>
|
||||
</div>
|
||||
<p className="text-xs md:text-sm text-[#66585b] line-clamp-3">
|
||||
{product.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Basic Info */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<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>
|
||||
|
||||
<div className="flex items-center gap-3 text-[#402E32]">
|
||||
<GrLocation className="text-lg flex-shrink-0" />
|
||||
<span className="text-sm md:text-base">
|
||||
{cafeData.address || "آدرس موجود نیست"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-[#402E32]">
|
||||
<FaRegStar className="text-lg flex-shrink-0" />
|
||||
<span className="text-sm md:text-base">
|
||||
{cafeData.rating || 0}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold text-[#402E32] mb-2">
|
||||
درباره کافه
|
||||
</h3>
|
||||
<p className="text-sm md:text-base text-[#555]">
|
||||
{cafeData.description ||
|
||||
"توضیحاتی برای این کافه وجود ندارد."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
<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 */}
|
||||
<div className="mb-8">
|
||||
<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">
|
||||
{CAFE_FEATURES.map((feature, idx) => (
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<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">
|
||||
{feature.label}
|
||||
</span>
|
||||
{feature.value && (
|
||||
<span className="text-[#402E32] text-xs">
|
||||
{feature.value}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<button className="bg-[#5e5450] p-4 rounded-2xl flex items-center justify-center transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector9} alt="افزودن" className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories Section */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="font-bold text-[#402E32] text-base md:text-lg">
|
||||
دستهبندیها
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setIsEditMode(!isEditMode)}
|
||||
className="flex items-center gap-2 text-button1 hover:text-[#5f494f] transition-colors"
|
||||
title={
|
||||
isEditMode ? "خروج از حالت ویرایش" : "ویرایش دستهبندیها"
|
||||
}
|
||||
>
|
||||
<img src={Vector16} alt="ویرایش" className="w-5 h-5" />
|
||||
<span className="text-sm md:text-base">
|
||||
{isEditMode ? "تمام" : "ویرایش"}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="categories-scroll flex gap-3 md:gap-4 overflow-x-auto scrollbar-hide pb-2">
|
||||
{categories.map((category, idx) => (
|
||||
<div key={idx} className="flex-shrink-0">
|
||||
{isEditMode && editingIndex === idx ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex gap-1">
|
||||
<IoMdCheckmark
|
||||
onClick={handleSaveCategory}
|
||||
className="text-green-600 cursor-pointer hover:text-green-800 w-5 h-5"
|
||||
title="ذخیره"
|
||||
/>
|
||||
<IoMdClose
|
||||
onClick={handleCancelEdit}
|
||||
className="text-red-600 cursor-pointer hover:text-red-800 w-5 h-5"
|
||||
title="لغو"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
className="border-2 border-[#bb8f70] rounded-lg px-2 py-1 text-xs md:text-sm focus:outline-none focus:border-button1 min-w-[100px]"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-[#402E32] text-xs md:text-sm whitespace-nowrap ${
|
||||
isEditMode
|
||||
? "bg-gray-100 hover:bg-gray-200"
|
||||
: "bg-[#e1d5c2]"
|
||||
} transition-colors`}
|
||||
>
|
||||
<span>{category}</span>
|
||||
{isEditMode && (
|
||||
<>
|
||||
<BiEdit
|
||||
onClick={() => handleEditCategory(idx)}
|
||||
className="text-button1 cursor-pointer hover:text-[#5f494f] w-4 h-4 ml-1"
|
||||
title="ویرایش"
|
||||
/>
|
||||
<IoMdClose
|
||||
onClick={() => handleDeleteCategory(idx)}
|
||||
className="text-white bg-[#a79fa1] rounded cursor-pointer hover:bg-[#9a8f91] w-4 h-4"
|
||||
title="حذف"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{isEditMode && !isAddingCategory && (
|
||||
<button
|
||||
onClick={() => setIsAddingCategory(true)}
|
||||
className="flex-shrink-0 text-button1 hover:text-[#5f494f] font-bold text-sm md:text-base transition-colors whitespace-nowrap"
|
||||
>
|
||||
+ افزودن
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isEditMode && isAddingCategory && (
|
||||
<div className="flex-shrink-0 flex flex-col gap-2">
|
||||
<div className="flex gap-1">
|
||||
<IoMdCheckmark
|
||||
onClick={handleAddCategory}
|
||||
className="text-green-600 cursor-pointer hover:text-green-800 w-5 h-5"
|
||||
title="ذخیره"
|
||||
/>
|
||||
<IoMdClose
|
||||
onClick={() => {
|
||||
setIsAddingCategory(false);
|
||||
setNewCategory("");
|
||||
}}
|
||||
className="text-red-600 cursor-pointer hover:text-red-800 w-5 h-5"
|
||||
title="لغو"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={newCategory}
|
||||
onChange={(e) => setNewCategory(e.target.value)}
|
||||
placeholder="دسته جدید"
|
||||
className="border-2 border-[#bb8f70] rounded-lg px-2 py-1 text-xs md:text-sm focus:outline-none focus:border-button1 min-w-[100px]"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products Section */}
|
||||
<div>
|
||||
<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">
|
||||
{CAFE_PRODUCTS.map((product, idx) => (
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<h3 className="font-bold text-[#402E32] text-sm md:text-base 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">
|
||||
<span className="text-[#66585b]">قیمت:</span>
|
||||
<span className="font-medium text-[#402E32]">
|
||||
{product.price}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs md:text-sm text-[#66585b] line-clamp-3">
|
||||
{product.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,11 +1,61 @@
|
|||
import React from "react";
|
||||
import VisitorsChart from "./components/viewstats";
|
||||
|
||||
export default function Stats() {
|
||||
return (
|
||||
<section dir="rtl" className="w-full">
|
||||
<h1 className="text-2xl font-bold text-[#402E32] mb-6">آمار و تحلیل</h1>
|
||||
<div className="bg-white border-2 border-[#8b8886] rounded-2xl p-6 md:p-8">
|
||||
<p className="text-gray-600">محتوای آمار و تحلیل بهزودی اضافه خواهد شد</p>
|
||||
<section dir="rtl" className="w-full h-full flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-2 border-2 border-border rounded-2xl p-6 md:p-8">
|
||||
<div className="flex gap-5">
|
||||
<h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
|
||||
<button className="ps-5 pe-10 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
|
||||
آبان
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="self-end">
|
||||
مجموع فروش: 0 تومان
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<VisitorsChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-5 rounded-2xl">
|
||||
|
||||
<div className="flex flex-col w-1/2 gap-2 border-2 border-border rounded-2xl p-6 md:p-8">
|
||||
<div className="flex gap-5">
|
||||
<h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
|
||||
<button className="ps-5 pe-10 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
|
||||
آبان
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="self-end">
|
||||
مجموع فروش: 0 تومان
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<VisitorsChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-col gap-2 w-1/2 border-2 border-border rounded-2xl p-6 md:p-8">
|
||||
<div className="flex gap-5">
|
||||
<h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
|
||||
<button className="ps-5 pe-10 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 transition-all duration-300 cursor-pointer">
|
||||
آبان
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="self-end">
|
||||
مجموع فروش: 0 تومان
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<VisitorsChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{ name: "هفته اول", a: 200000, b: 250000 },
|
||||
{ name: "هفته دوم", a: 450000, b: 380000 },
|
||||
{ name: "هفته سوم", a: 350000, b: 600000 },
|
||||
{ name: "هفته چهارم", a: 150000, b: 500000 },
|
||||
{ name: "هفته پنجم", a: 500000, b: 700000 },
|
||||
{ name: "هفته ششم", a: 600000, b: 800000 },
|
||||
{ name: "هفته هفتم", a: 700000, b: 900000 },
|
||||
{ name: "هفته هشتم", a: 800000, b: 950000 },
|
||||
{ name: "هفته نهم", a: 900000, b: 1000000 },
|
||||
];
|
||||
|
||||
export default function VisitorsChart() {
|
||||
return (
|
||||
<div dir="ltr" className="w-full h-72 rounded-xl bg-white shadow-sm p-6">
|
||||
<p className="text-sm font-medium mb-3 text-right">آمار بازدید کنندهها</p>
|
||||
|
||||
<ResponsiveContainer width="100%" height="90%">
|
||||
<LineChart data={data}>
|
||||
{/* گرادیانتها */}
|
||||
<defs>
|
||||
<linearGradient id="gradA" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#C2574E" stopOpacity={0.4} />
|
||||
<stop offset="100%" stopColor="#C2574E" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="gradB" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#6B432B" stopOpacity={0.4} />
|
||||
<stop offset="100%" stopColor="#6B432B" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<XAxis dataKey="name" tick={{ fontSize: 12 }} />
|
||||
<YAxis tick={{ fontSize: 12 }} />
|
||||
<Tooltip />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="a"
|
||||
stroke="#C2574E"
|
||||
strokeWidth={3}
|
||||
fill="url(#gradA)"
|
||||
dot={false}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="b"
|
||||
stroke="#6B432B"
|
||||
strokeWidth={3}
|
||||
fill="url(#gradB)"
|
||||
dot={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ import CafeManagement from '../pages/CafeManagement/CafeManagement';
|
|||
import EditCafe from '../pages/CafeManagement/EditCafe';
|
||||
import Stats from '../pages/Stats/Stats';
|
||||
|
||||
|
||||
export default function AppRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
|
|
|
|||
|
|
@ -4,29 +4,48 @@
|
|||
:root {
|
||||
--color-primary: #7f4629;
|
||||
--color-button1: #99582a;
|
||||
|
||||
--color-text1: #402e32;
|
||||
--color-text2: #ffffff;
|
||||
--color-header: #f3efe7;
|
||||
--color-header2: #e6dbcc;
|
||||
|
||||
--color-sidebar: #efeeee;
|
||||
|
||||
--color-background: #fdf8f4;
|
||||
|
||||
--color-hover: #e6dbcc;
|
||||
--color-hover2: #a2795c;
|
||||
--color-thead: #7f4629;
|
||||
--color-border: #7f4629;
|
||||
|
||||
--font-sans: "Vazirmatn", system-ui, sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-primary: #d9cab3;
|
||||
--color-primary: #93836c;
|
||||
--color-button1: #99582a;
|
||||
|
||||
--color-text1: #fdf8f4;
|
||||
--color-text2: #272322;
|
||||
--color-header: #342e2c;
|
||||
--color-header2: #5e5450;
|
||||
|
||||
--color-sidebar: #564c49;
|
||||
|
||||
--color-background: #272322;
|
||||
--color-hover: #5e5450;
|
||||
--color-hover2: #a2795c;
|
||||
--color-thead: #d9cab3;
|
||||
--color-border: #93836c;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-MyEstedad: "MyEstedad", sans-serif;
|
||||
|
||||
--color-primary: var(--color-primary);
|
||||
--color-header: var(--color-header);
|
||||
--color-sidebar: var(--color-sidebar);
|
||||
--color-background: var(--color-background);
|
||||
--color-button1: var(--color-button1);
|
||||
--color-text1: var(--color-text1);
|
||||
--color-text2: var(--color-text2);
|
||||
--color-hover: var(--color-hover);
|
||||
--color-hover2: var(--color-hover2);
|
||||
--color-thead: var(--color-thead);
|
||||
--color-border: var(--color-border);
|
||||
}
|
||||
|
||||
/* Chrome / Edge / Safari autofill FIX (light + dark, no color) */
|
||||
|
|
@ -37,9 +56,9 @@ input:-webkit-autofill:focus,
|
|||
textarea:-webkit-autofill,
|
||||
textarea:-webkit-autofill:focus,
|
||||
select:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px #fdf8f4 inset !important;
|
||||
box-shadow: 0 0 0 1000px #fdf8f4 inset !important;
|
||||
-webkit-text-fill-color: inherit !important;
|
||||
-webkit-box-shadow: 0 0 0 1000px #fdf8f4 inset !important;
|
||||
box-shadow: 0 0 0 1000px #fdf8f4 inset !important;
|
||||
-webkit-text-fill-color: inherit !important;
|
||||
}
|
||||
|
||||
.dark input:-webkit-autofill,
|
||||
|
|
@ -48,13 +67,45 @@ select:-webkit-autofill {
|
|||
.dark textarea:-webkit-autofill,
|
||||
.dark textarea:-webkit-autofill:focus,
|
||||
.dark select:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px #272322 inset !important;
|
||||
box-shadow: 0 0 0 1000px #272322 inset !important;
|
||||
-webkit-text-fill-color: inherit !important;
|
||||
-webkit-box-shadow: 0 0 0 1000px #272322 inset !important;
|
||||
box-shadow: 0 0 0 1000px #272322 inset !important;
|
||||
-webkit-text-fill-color: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
td,
|
||||
body {
|
||||
color: var(--color-text1);
|
||||
}
|
||||
|
||||
div:hover
|
||||
{
|
||||
color: var(--color-text1);
|
||||
}
|
||||
|
||||
.dark h1,
|
||||
.dark h2,
|
||||
.dark h3,
|
||||
.dark h4,
|
||||
.dark h5,
|
||||
.dark h6,
|
||||
.dark p,
|
||||
.dark span,
|
||||
.dark td,
|
||||
.dark body {
|
||||
color: var(--color-text1) !important;
|
||||
}
|
||||
|
||||
.dark div:hover {
|
||||
color: var(--color-text2) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -82,36 +133,7 @@ body {
|
|||
src: url("/fonts/Estedad.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-MyEstedad: "MyEstedad", sans-serif;
|
||||
|
||||
--color-primary: var(--color-primary);
|
||||
--color-header: var(--color-header);
|
||||
--color-sidebar: var(--color-sidebar);
|
||||
--color-background: var(--color-background);
|
||||
|
||||
--color-button1: var(--color-button1);
|
||||
|
||||
/* --color-text1: var(--color-text1-menu-and-card);
|
||||
--color-text2: var(--color-text2);
|
||||
--color-text3: var(--color-text3);
|
||||
--color-text4: var(--color-text4);
|
||||
|
||||
--color-btn1: var(--color-button1);
|
||||
--color-btn2: var(--color-button2);
|
||||
--color-btn3: var(--color-button3);
|
||||
|
||||
--color-primary1: var(--color-primary1);
|
||||
--color-primary2: var(--color-primary2);
|
||||
--color-primary3: var(--color-primary3);
|
||||
--color-primary4: var(--color-primary4);
|
||||
--color-primary5-dark: var(--color-primary5-dark);
|
||||
--color-primary6-dark: var(--color-primary6-dark);
|
||||
|
||||
|
||||
--color-bg-light: var(--color-background-light);
|
||||
--color-bg-dark: var(--color-background-dark); */
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
|
|
@ -153,8 +175,8 @@ svg {
|
|||
|
||||
/* رنگ انتخاب متن (drag select) */
|
||||
::selection {
|
||||
background-color: var(--primary-200);
|
||||
background-color: var(--color-hover);
|
||||
/* بکگراند انتخاب */
|
||||
color: var(--primary-foreground);
|
||||
color: var(--color-text1);
|
||||
/* رنگ متن انتخاب */
|
||||
}
|
||||
Loading…
Reference in New Issue