MamadAriaKia
/
CoffeeJoo_Panel_kafeDar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

stats page

This commit is contained in:
Mahdi Rahimi 2025-12-28 15:11:58 +03:30
parent 5a308dff2a
commit ed56628cc4
12 changed files with 1057 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

668
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -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"
}
}

10
src/assets/icons/Logo-LM.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 756 KiB

38
src/components/layout/Header/header.jsx
View File

@ -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 >
);
};

84
src/components/layout/Sidebar/sidebar.jsx
View File

@ -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',
@ -21,6 +23,12 @@ const SIDEBAR = {
icon: PiCoffee,
label: 'مدیریت کافه ها',
},
{
id: 'users-management',
path: '/users-management',
icon: PiCoffee,
label: 'مدیریت کاربران',
},
{
id: 'stats',
path: '/stats',
@ -33,7 +41,7 @@ const SIDEBAR = {
label: 'خروج',
},
styles: {
activeColor: '#7F4629',
activeColor: 'primary',
inactiveColor: '#402E32',
borderColor: '#D9CAB3',
padding: 'p-2.5',
@ -45,6 +53,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 +95,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 +120,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 +139,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">

59
src/components/layout/layout.jsx
View File

@ -1,44 +1,61 @@
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: "/users-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

24
src/pages/CafeManagement/CafeManagement.jsx
View File

@ -70,18 +70,18 @@ const CafeManagement = () => {
<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 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-gray-50 transition-colors">
<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}
@ -112,7 +112,7 @@ const CafeManagement = () => {
<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"
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" />
@ -153,9 +153,9 @@ const CafeManagement = () => {
<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"
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>ادیت کافه</span>
<span className="">ادیت کافه</span>
<BiEdit className="w-4 h-4" />
</Link>
</div>
@ -169,7 +169,7 @@ const CafeManagement = () => {
<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">
<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>

106
src/pages/Stats/Stats.jsx
View File

@ -1,11 +1,109 @@
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">
<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>
<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>
<div className="flex-1">
<VisitorsChart />
</div>
</div>
</div>
<div className="flex flex-col lg:flex-row gap-5 rounded-2xl">
<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 justify-between gap-5">
<h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
<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>
<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>
<div className="flex-1">
<CafeVisitPie />
</div>
</div>
</div>
<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 justify-between gap-5">
<h4 className="font-bold text-md">آمار بازدید کننده ها</h4>
<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>
<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>
<div className="flex-1">
<CafePopularity />
</div>
</div>
</div>
</div>
</section>
);

48
src/pages/Stats/components/mostView.jsx Normal file
View File

@ -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>
);
}

50
src/pages/Stats/components/popular.jsx Normal file
View File

@ -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>
);
}

88
src/pages/Stats/components/viewstats.jsx Normal file
View File

@ -0,0 +1,88 @@
import {
ComposedChart,
Line,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Area
} 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-96 p-6 pb-0 pl-0">
<ResponsiveContainer width="100%" height="90%">
<ComposedChart data={data}>
<defs>
<linearGradient id="gradA" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#b52424" stopOpacity={0.4} />
<stop offset="100%" stopColor="#b52424" stopOpacity={0} />
</linearGradient>
<linearGradient id="gradB" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#7f7376" stopOpacity={0.4} />
<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
contentStyle={{
background: "var(--bg-primary)",
border: "1px solid var(--border-color)",
color: "var(--text-primary)",
}}
/>
<Line
type="monotone"
dataKey="a"
stroke="#b52424"
strokeWidth={3}
fill="url(#gradA)"
dot={false}
/>
<Line
type="monotone"
dataKey="b"
stroke="#7f7376"
strokeWidth={3}
fill="url(#gradB)"
dot={false}
/>
</ComposedChart>
</ResponsiveContainer>
</div>
);
}

148
src/styles/index.css
View File

@ -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,49 @@ 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;
}
.primary {
color: var(--color-primary);
background-color: var(--color-primary);
}
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-text1);
}
@ -82,36 +137,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 +179,34 @@ svg {
/* رنگ انتخاب متن (drag select) */
::selection {
background-color: var(--primary-200);
background-color: var(--color-hover);
/* بک‌گراند انتخاب */
color: var(--primary-foreground);
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;
}