Merge branch 'master' of https://git.caspianoxin.ir/MamadAriaKia/CoffeeJoo_Panel_kafeDar

src/components/layout/Sidebar/sidebar.jsx

@@ -23,6 +23,12 @@ const SIDEBAR = {
             icon: PiCoffee,
             label: 'مدیریت کافه ها',
         },
+        {
+            id: 'users-management',
+            path: '/users-management',
+            icon: PiCoffee,
+            label: 'مدیریت کاربران',
+        },
         {
             id: 'stats',
             path: '/stats',

src/components/layout/layout.jsx

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

src/pages/CafeManagement/CafeManagement.jsx

@@ -75,32 +75,17 @@ const CafeManagement = () => {
                     <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 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>
+                                <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 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>
+                                <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
+                                <tr key={cafe._id} className="border-b border-[#EFEEEE] hover:bg-hover transition-colors">
-                  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}
@@ -117,9 +102,7 @@ const CafeManagement = () => {
                                     <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">
+                                            <span className="text-[#402E32] text-sm">{cafe.rating || 0}</span>
-                        {cafe.rating || 0}
-                      </span>
                                         </div>
                                     </td>
                                     <td className="px-4 py-4 text-right">

src/pages/Stats/Stats.jsx

@@ -1,58 +1,106 @@
 import React from "react";
 import VisitorsChart from "./components/viewstats";
+import CafePopularity from "./components/popular";
+import CafeVisitPie from "./components/mostView";
+import { RiArrowLeftSLine } from "react-icons/ri";
+import { RiArrowDownSLine } from "react-icons/ri";
+import { useState } from "react";
+
 
 export default function Stats() {
+    const [dropDownOpen, setDropdownOpen] = useState(false);
     return (
         <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">
+                    <div className="relative">
-                        آبان
+                        <button
+                            onClick={() => setDropdownOpen(prev => !prev)}
+                            className=" flex gap-2 justify-between items-center py-1 pe-5 ps-3 w-40 bg-hover text-text1 rounded-lg text-sm lg:text-base font-medium hover:bg-hover2 cursor-pointer">
+                            <span>این هفته</span>
+                            <RiArrowDownSLine size={20} className={`${dropDownOpen ? 'rotate-180' : ''} transition-all duration-200`} />
                         </button>
+                        {dropDownOpen && (
+                            <div className="absolute mt-2 bg-background text-text1 hover:text-text1 border-2 border-border rounded-lg shadow-lg w-40 z-10">
+                                <ul className="flex flex-col">
+                                    <li className="px-4 py-2 hover:bg-hover2 cursor-pointer">امروز</li>
+                                    <li className="px-4 py-2 hover:bg-hover2 cursor-pointer">این هفته</li>
+                                    <li className="px-4 py-2 hover:bg-hover2 cursor-pointer">این ماه</li>
+                                    <li className="px-4 py-2 hover:bg-hover2 cursor-pointer">این سال</li>
+                                </ul>
+                            </div>
+                        )
+
+                        }
+                    </div>
+
+                </div>
+                <div className="flex flex-col lg:flex-row gap-2">
+                    <div className="self-end lg:pb-10 lg:me-10 flex lg:flex-col  gap-2 justify-center items-start">
+                        <div className="flex gap-2 justify-center items-center">
+                            <span className="w-4 h-4 bg-red-500 rounded-sm" />
+                            <span>راهنما</span>
+                        </div>
+                        <div className="flex gap-2 justify-center items-center">
+                            <span className="w-4 h-4 bg-blue-500 rounded-sm" />
+                            <span>راهنما</span>
                         </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 lg:flex-row 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 flex-col w-full lg:w-1/2 gap-2 border-2 border-border rounded-2xl p-6 md:p-8">
-                    <div className="flex gap-5">
+                    <div className="flex justify-between 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">
+                        <span className="flex gap-2 justify-center items-center px-2 text-text1 rounded-lg text-sm lg:text-base font-medium transition-all duration-300 cursor-pointer">
-                            آبان
+                            <span>همه</span>
-                        </button>
+                            <RiArrowLeftSLine />
+                        </span>
+                    </div>
+                    <div className="flex flex-col lg:flex-row gap-2">
+                        <div className="self-end lg:pb-10 lg:me-10 flex lg:flex-col  gap-2 justify-center items-start">
+                            <div className="flex gap-2 justify-center items-center">
+                                <span className="w-4 h-4 bg-red-500 rounded-sm" />
+                                <span>راهنما</span>
+                            </div>
+                            <div className="flex gap-2 justify-center items-center">
+                                <span className="w-4 h-4 bg-blue-500 rounded-sm" />
+                                <span>راهنما</span>
                             </div>
-                    <div className="flex gap-2">
-                        <div className="self-end">
-                            مجموع فروش: 0 تومان
                         </div>
                         <div className="flex-1">
-                            <VisitorsChart />
+                            <CafeVisitPie />
                         </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 flex-col gap-2 w-full lg:w-1/2 border-2 border-border rounded-2xl p-6 md:p-8">
-                    <div className="flex gap-5">
+                    <div className="flex justify-between 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">
+                        <span className="flex gap-2 justify-center items-center px-2 text-text1 rounded-lg text-sm lg:text-base font-medium transition-all duration-300 cursor-pointer">
-                            آبان
+                            <span>همه</span>
-                        </button>
+                            <RiArrowLeftSLine />
+                        </span>
+                    </div>
+                    <div className="flex flex-col lg:flex-row gap-2">
+                        <div className="self-end lg:pb-10 lg:me-10 flex lg:flex-col  gap-2 justify-center items-start">
+                            <div className="flex gap-2 justify-center items-center">
+                                <span className="w-4 h-4 bg-red-500 rounded-sm" />
+                                <span>راهنما</span>
+                            </div>
+                            <div className="flex gap-2 justify-center items-center">
+                                <span className="w-4 h-4 bg-blue-500 rounded-sm" />
+                                <span>راهنما</span>
                             </div>
-                    <div className="flex gap-2">
-                        <div className="self-end">
-                            مجموع فروش: 0 تومان
                         </div>
                         <div className="flex-1">
-                            <VisitorsChart />
+                            <CafePopularity />
                         </div>
                     </div>
                 </div>

src/pages/Stats/components/mostView.jsx

@@ -0,0 +1,48 @@
+
+
+import {
+    PieChart,
+    Pie,
+    Cell,
+    ResponsiveContainer,
+    Tooltip,
+} from "recharts";
+
+const data = [
+    { name: "دان", value: 48, color: "#b52424" },
+    { name: "وی", value: 38, color: "#C0BCBC" },
+    { name: "آنی", value: 19, color: "#7f7376" },
+];
+
+export default function CafeVisitPie() {
+    return (
+        <div dir="ltr" className="w-full h-62 p-6 pb-0 pl-0">
+            {/* <p className="text-sm font-medium mb-3 text-right">پربازدیدترین کافه‌ها</p> */}
+
+            <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                    <Tooltip
+                        contentStyle={{
+                            background: "var(--bg-primary)",
+                            border: "1px solid var(--border-color)",
+                            color: "var(--text-primary)",
+                        }}
+                    />
+                    <Pie
+                        data={data}
+                        dataKey="value"
+                        cx="50%"
+                        cy="50%"
+                        // innerRadius={50}
+                        outerRadius={80}
+                        label={({ value }) => `${value}%`}
+                    >
+                        {data.map((item, i) => (
+                            <Cell key={i} fill={item.color}  />
+                        ))}
+                    </Pie>
+                </PieChart>
+            </ResponsiveContainer>
+        </div>
+    );
+}

src/pages/Stats/components/popular.jsx

@@ -0,0 +1,50 @@
+import {
+    BarChart,
+    Bar,
+    XAxis,
+    Tooltip,
+    ResponsiveContainer,
+    Cell,
+} from "recharts";
+
+const data = [
+    { name: "وی", value: 120 },
+    { name: "پل", value: 90 },
+    { name: "دولت", value: 60 },
+    { name: "و", value: 180 },
+    { name: "تریح", value: 100 },
+    { name: "دان", value: 110 },
+];
+
+const colors = ["#efecec", "#efecec", "#efecec", "#7f7376", "#efecec", "#efecec"];
+
+export default function CafePopularity() {
+    return (
+        <div className="w-full h-72 p-6">
+            {/* <p className="text-sm font-medium mb-3 text-right">محبوب‌ترین کافه‌ها</p> */}
+
+            <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={data}>
+                    <XAxis dataKey="name" />
+                    <Tooltip
+                        contentStyle={{
+                            background: "none",
+                            border: "none",
+                            color: "var(--color-text1)",
+                        }}
+                    />
+                    <Bar
+                        dataKey="value"
+                        radius={[20, 20, 20, 20]}
+                        cursor="default" 
+                    >
+                        {data.map((entry, i) => (
+                            <Cell key={i} fill={colors[i]} />
+                        ))}
+                    </Bar>
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    );
+}

src/pages/Stats/components/viewstats.jsx

@@ -1,10 +1,11 @@
 import {
-  LineChart,
+    ComposedChart,
     Line,
     XAxis,
     YAxis,
     Tooltip,
     ResponsiveContainer,
+    Area
 } from "recharts";
 
 const data = [
@@ -21,31 +22,52 @@ const data = [
 
 export default function VisitorsChart() {
     return (
-    <div dir="ltr" className="w-full h-72 rounded-xl bg-white shadow-sm p-6">
+        <div dir="ltr" className="w-full h-96 p-6 pb-0 pl-0">
-      <p className="text-sm font-medium mb-3 text-right">آمار بازدید کننده‌ها</p>
-
             <ResponsiveContainer width="100%" height="90%">
-        <LineChart data={data}>
+                <ComposedChart data={data}>
-          {/* گرادیانت‌ها */}
+
                     <defs>
                         <linearGradient id="gradA" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="#C2574E" stopOpacity={0.4} />
+                            <stop offset="0%" stopColor="#b52424" stopOpacity={0.4} />
-              <stop offset="100%" stopColor="#C2574E" stopOpacity={0} />
+                            <stop offset="100%" stopColor="#b52424" stopOpacity={0} />
                         </linearGradient>
 
                         <linearGradient id="gradB" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="#6B432B" stopOpacity={0.4} />
+                            <stop offset="0%" stopColor="#7f7376" stopOpacity={0.4} />
-              <stop offset="100%" stopColor="#6B432B" stopOpacity={0} />
+                            <stop offset="100%" stopColor="#7f7376" stopOpacity={0} />
                         </linearGradient>
                     </defs>
 
+                    <Area
+                        type="monotone"
+                        dataKey="a"
+                        stroke="none"
+                        fill="url(#gradA)"
+                        fillOpacity={1}
+                    />
+                    <Area
+                        type="monotone"
+                        dataKey="b"
+                        stroke="none"
+                        fill="url(#gradB)"
+                        fillOpacity={1}
+                    />
+
                     <XAxis dataKey="name" tick={{ fontSize: 12 }} />
                     <YAxis tick={{ fontSize: 12 }} />
-          <Tooltip />
+
+                    <Tooltip
+                        contentStyle={{
+                            background: "var(--bg-primary)",
+                            border: "1px solid var(--border-color)",
+                            color: "var(--text-primary)",
+                        }}
+                    />
+
                     <Line
                         type="monotone"
                         dataKey="a"
-            stroke="#C2574E"
+                        stroke="#b52424"
                         strokeWidth={3}
                         fill="url(#gradA)"
                         dot={false}
@@ -53,12 +75,13 @@ export default function VisitorsChart() {
                     <Line
                         type="monotone"
                         dataKey="b"
-            stroke="#6B432B"
+                        stroke="#7f7376"
                         strokeWidth={3}
                         fill="url(#gradB)"
                         dot={false}
                     />
-        </LineChart>
+
+                </ComposedChart>
             </ResponsiveContainer>
         </div>
     );

src/styles/index.css

@@ -72,6 +72,10 @@ select:-webkit-autofill {
     -webkit-text-fill-color: inherit !important;
 }
 
+.primary {
+    color: var(--color-primary);
+    background-color: var(--color-primary);
+}
 
 h1,
 h2,
@@ -104,7 +108,7 @@ div:hover
 }
 
 .dark div:hover {
-    color: var(--color-text2) !important;
+    color: var(--color-text1);
 }
 
 
@@ -180,3 +184,29 @@ svg {
     color: var(--color-text1);
     /* رنگ متن انتخاب */
 }
+
+/* جلوگیری کامل از رینگ / بوردر فوکوس در Recharts */
+.recharts-wrapper:focus,
+.recharts-wrapper:focus-visible,
+.recharts-surface:focus,
+.recharts-surface:focus-visible,
+.recharts-responsive-container:focus,
+.recharts-responsive-container:focus-visible,
+.recharts-layer:focus,
+.recharts-layer:focus-visible,
+svg:focus,
+svg:focus-visible,
+g:focus,
+g:focus-visible {
+  outline: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* برای اطمینان بیشتر روی کل پروژه */
+*:focus,
+*:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+