Untitled
unknown
plain_text
2 years ago
21 kB
3
Indexable
import { useAuth } from "@/app/hooks/Authcontext";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useReducer, useRef, useState } from "react";
import AnimateHeight from "react-animate-height";
import { useTranslation } from "react-i18next";
import PerfectScrollbar from "react-perfect-scrollbar";
import { useDispatch, useSelector } from "react-redux";
import { toggleSidebar } from "../../../store/themeConfigSlice";
const Sidebar = () => {
const pathname = usePathname();
const [currentMenu, setCurrentMenu] = useState("");
const semidark = useSelector((state) => state.themeConfig.semidark);
const [navStatus, setNavStatus] = useState(true)
const toggleMenu = (parentKey) => {
setCurrentMenu((oldValue) => {
setNavStatus(!navStatus);
// Toggle the menu if it is closed, close it if it is open
return oldValue === parentKey ? "" : parentKey;
});
};
const { user } = useAuth();
const dispatch = useDispatch();
const { t } = useTranslation();
const adminDataRef = useRef({
newOrder: 0,
runningOrder: 0,
cancleOrder: 0,
completedOrder: 0,
});
const [initialAdminData, setInitialAdminData] = useState({
newOrder: 0,
runningOrder: 0,
cancleOrder: 0,
completedOrder: 0,
});
useEffect(() => {
const fetchNewOrders = async () => {
try {
const response = await fetch(
`${process.env.NEXT_PUBLIC_BACKEND_URL}/orders`
);
if (response.status === 200) {
const data = await response.json();
const createdOrders = data.filter(
(order) => order.status === "created"
);
const cancleOrders = data.filter(
(order) => order.status === "canceled"
);
const delivaredOrders = data.filter(
(order) => order.status === "delivered"
);
const newAdminData = {
newOrder: createdOrders.length,
cancleOrder: cancleOrders.length,
completedOrder: delivaredOrders.length,
runningOrder:
data.length -
createdOrders.length -
cancleOrders.length -
delivaredOrders.length,
};
// Update the initial data only if it hasn't been updated before
if (
initialAdminData.newOrder === 0 &&
initialAdminData.runningOrder === 0 &&
initialAdminData.cancleOrder === 0 &&
initialAdminData.completedOrder === 0
) {
setInitialAdminData(newAdminData);
}
// Update the ref with the new data
adminDataRef.current = newAdminData;
// Trigger a re-render to reflect the new data
forceUpdate();
} else {
console.error("Failed to fetch new orders");
}
} catch (error) {
console.error("Error fetching new orders:", error);
} finally {
// You can add any cleanup logic here if needed
}
};
// Fetch new orders on component mount
fetchNewOrders();
// Set up an interval to fetch new orders periodically (e.g., every 5 minutes)
const intervalId = setInterval(fetchNewOrders, 5 * 60 * 1000);
// Clean up the interval when the component is unmounted
return () => clearInterval(intervalId);
}, [
initialAdminData.newOrder,
initialAdminData.runningOrder,
initialAdminData.cancleOrder,
initialAdminData.completedOrder,
]); // Include all the dependencies here
// Define a forceUpdate function to trigger a re-render
const [, forceUpdate] = useReducer((x) => x + 1, 0);
// Access the current adminData from the ref
const adminData = adminDataRef.current;
const adminMenuItems = [
{
key: "Dashboard",
label: t("Dashboard"),
links: [
{
href: "/admin/dashboard/orderDashboard",
label: `${t("Order Dashboard")}`,
},
],
svg: (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
className="h-6 w-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3 4v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V4m-2 2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8h-2"
></path>
</svg>
),
},
{
key: "order",
label: t("Order"),
links: [
{
href: "/admin/dashboard/newOrder",
label: `${t("New Order")} (${adminData.newOrder})`,
},
{
href: "/admin/dashboard/runningOrder",
label: `${t("Running Order")} (${adminData.runningOrder})`,
},
{
href: "/admin/dashboard/compleatedOrder",
label: `${t("Completed Order")} (${adminData.completedOrder})`,
},
{
href: "/admin/dashboard/cancleOrder",
label: `${t("Cancelled Order")} (${adminData.cancleOrder})`,
},
],
svg: (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="group-hover-text-primary h-6 w-6 shrink-0"
>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<path
d="M3 9h18M3 15h18M9 21h6"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
},
{
key: "moderator",
label: t("Moderator Partner"),
links: [
{
href: "/admin/moderator/manage",
label: t("Manage Moderator Partner"),
},
{
href: "/admin/moderator/report",
label: t("Delivery Moderator Report"),
},
],
svg: (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="group-hover-text-primary h-6 w-6 shrink-0"
>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<path
d="M12 2v4M12 18v4M4.93 7.757l1.415 1.415M18.657 18.657l-1.415-1.414M18.657 7.757l-1.415 1.415M4.93 18.657l1.415-1.414"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
},
{
key: "studioPartner",
label: t("Studio Partner"),
links: [
{ href: "/admin/studio/manage", label: t("Manage Studio Partner") },
{ href: "/admin/studio/report", label: t("Delivery Studio Report") },
],
svg: (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="group-hover-text-primary h-6 w-6 shrink-0"
>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<circle
cx="12"
cy="12"
r="5"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M12 1.5v21M1.5 12h21M7 17.5V21M17 17.5V21"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
},
{
key: "deliveryPartner",
label: t("Delivery Partner"),
links: [
{ href: "/admin/delivery/manage", label: t("Manage Delivery Partner") },
{ href: "/admin/delivery/report", label: t("Delivery Partner Report") },
],
svg: (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="animate-spin_3s_linear_infinite h-20 w-20"
>
<rect x="3" y="10" width="18" height="11" rx="2" ry="2" />
<circle
cx="6"
cy="18"
r="3"
stroke="currentColor"
strokeWidth="1.5"
/>
<circle
cx="18"
cy="18"
r="3"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
stroke="currentColor"
strokeWidth="1.5"
/>
</svg>
),
},
{
key: "masterManagement",
label: t("Master Management"),
links: [
{
href: "/admin/masterManagement/ManageDocumentType",
label: t("Document Type"),
},
{
href: "/admin/masterManagement/AssignDocumentTypeToCountry",
label: t("Assign Type"),
},
{
href: "/admin/masterManagement/ManageBanners",
label: t("Manage Banners"),
},
{
href: "/admin/masterManagement/ManageCouponCodes",
label: t("Coupon Codes"),
},
{
href: "/admin/masterManagement/ManageDeliveryCharges",
label: t("Delivery Charges"),
},
{
href: "/admin/masterManagement/ManageServiceableArea",
label: t("Serviceable Area"),
},
{ href: "/admin/masterManagement/Settings", label: t("Settings") },
],
svg: (
<svg
className="animate-[spin_3s_linear_infinite]"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="3"
stroke="currentColor"
strokeWidth="1.5"
></circle>
<path
opacity="0.5"
d="M13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74457 2.35523 9.35522 2.74458 9.15223 3.23463C9.05957 3.45834 9.0233 3.7185 9.00911 4.09799C8.98826 4.65568 8.70226 5.17189 8.21894 5.45093C7.73564 5.72996 7.14559 5.71954 6.65219 5.45876C6.31645 5.2813 6.07301 5.18262 5.83294 5.15102C5.30704 5.08178 4.77518 5.22429 4.35436 5.5472C4.03874 5.78938 3.80577 6.1929 3.33983 6.99993C2.87389 7.80697 2.64092 8.21048 2.58899 8.60491C2.51976 9.1308 2.66227 9.66266 2.98518 10.0835C3.13256 10.2756 3.3397 10.437 3.66119 10.639C4.1338 10.936 4.43789 11.4419 4.43786 12C4.43783 12.5581 4.13375 13.0639 3.66118 13.3608C3.33965 13.5629 3.13248 13.7244 2.98508 13.9165C2.66217 14.3373 2.51966 14.8691 2.5889 15.395C2.64082 15.7894 2.87379 16.193 3.33973 17C3.80568 17.807 4.03865 18.2106 4.35426 18.4527C4.77508 18.7756 5.30694 18.9181 5.83284 18.8489C6.07289 18.8173 6.31632 18.7186 6.65204 18.5412C7.14547 18.2804 7.73556 18.27 8.2189 18.549C8.70224 18.8281 8.98826 19.3443 9.00911 19.9021C9.02331 20.2815 9.05957 20.5417 9.15223 20.7654C9.35522 21.2554 9.74457 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8477 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.902C15.0117 19.3443 15.2977 18.8281 15.781 18.549C16.2643 18.2699 16.8544 18.2804 17.3479 18.5412C17.6836 18.7186 17.927 18.8172 18.167 18.8488C18.6929 18.9181 19.2248 18.7756 19.6456 18.4527C19.9612 18.2105 20.1942 17.807 20.6601 16.9999C21.1261 16.1929 21.3591 15.7894 21.411 15.395C21.4802 14.8691 21.3377 14.3372 21.0148 13.9164C20.8674 13.7243 20.6602 13.5628 20.3387 13.3608C19.8662 13.0639 19.5621 12.558 19.5621 11.9999C19.5621 11.4418 19.8662 10.9361 20.3387 10.6392C20.6603 10.4371 20.8675 10.2757 21.0149 10.0835C21.3378 9.66273 21.4803 9.13087 21.4111 8.60497C21.3592 8.21055 21.1262 7.80703 20.6602 7C20.1943 6.19297 19.9613 5.78945 19.6457 5.54727C19.2249 5.22436 18.693 5.08185 18.1671 5.15109C17.9271 5.18269 17.6837 5.28136 17.3479 5.4588C16.8545 5.71959 16.2644 5.73002 15.7811 5.45096C15.2977 5.17191 15.0117 4.65566 14.9909 4.09794C14.9767 3.71848 14.9404 3.45833 14.8477 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224Z"
stroke="currentColor"
strokeWidth="1.5"
></path>
</svg>
),
},
];
const modView = [
{
key: "newOrder",
label: t("New Order"),
links: [{ href: "/moderator/dashboard/neworder", label: t("New Order") }],
},
{
key: "reassignOrder",
label: t("Re-assign Order"),
links: [
{
href: "/moderator/dashboard/reassignorder",
label: t("Re-assign Order"),
},
],
},
{
key: "pastOrder",
label: t("Past Order"),
links: [
{ href: "/moderator/dashboard/pastorder", label: t("Past Order") },
],
},
];
const studioView = [
{
key: "newOrders",
label: t("New Orders"),
links: [
{ href: "/studiopartner/dashboard/neworder", label: t("New Order") },
],
},
{
key: "pastOrders",
label: t("Past Orders"),
links: [
{ href: "/studiopartner/dashboard/pastorder", label: t("Past Order") },
],
},
];
const deliveryView = [
{
key: "newOrder",
label: t("New Order"),
links: [
{ href: "/deliverypartner/dashboard/neworder", label: t("New Order") },
],
},
{
key: "pastOrders",
label: t("Dilevared Orders"),
links: [
{
href: "/deliverypartner/dashboard/pastorder",
label: t("Past Order"),
},
],
},
{
key: "dileveryBoys",
label: t("Delivery Boys"),
links: [{ href: "/deliverypartner/dashboard/deliveryboy" }],
},
];
const deliveryBoyView = [
{
key: "newOrder",
label: t("New Order"),
links: [
{ href: "/deliveryboy/dashboard/orders", label: t("New Orders") },
],
},
{
key: "pastOrder",
label: t("Past Order"),
links: [
{ href: "/deliveryboy/dashboard/pastorders", label: t("Past Orders") },
],
},
];
let menuItems = [];
// Determine the menu items based on the user's role
if (user) {
if (user.role === "admin") {
menuItems = adminMenuItems;
} else if (user.role === "moderator") {
menuItems = modView;
} else if (user.role === "studio-partner") {
menuItems = studioView;
} else if (user.role === "delivery-partner") {
menuItems = deliveryView;
} else if (user.role === "delivery-boy") {
menuItems = deliveryBoyView;
}
}
return (
<div className={semidark ? "dark" : ""}>
<nav
className={`sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300 ${semidark ? "text-white-dark" : ""
}`}
>
<div className="dark-bg-black h-full bg-white">
<div className="flex items-center justify-between px-4 py-3">
<Link
href="/"
className="main-logo flex h-10 shrink-0 items-center"
>
<h4 className="text-center text-2xl">Snap App</h4>
</Link>
<button
type="button"
className="collapse-icon hover-bg-gray-500/10 rtl-rotate-180 dark-text-white-light dark-hover-bg-dark-light/10 flex h-8 w-8 items-center rounded-full transition duration-300"
onClick={() => dispatch(toggleSidebar())}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="m-auto h-5 w-5"
>
<path
d="M13 19L7 12L13 5"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
</div>
<PerfectScrollbar className="relative h-[calc(100vh-80px)]">
<ul className="relative space-y-0.5 p-4 py-0 font-semibold">
{menuItems.map((menu) => (
<li className="nav-item" key={menu.key}>
{menu.links.length === 1 ? (
<Link href={menu.links[0]?.href || "#"}>
<div className="flex items-center">
{menu.svg}
<span
className={`ltr-pl-3 rtl-pr-3 dark-text-[#506690] dark-group-hover-text-white-dark ml-2 text-black ${(currentMenu === menu.key ||
menu.links.some(
(link) => link.href === pathname
)) &&
menu.links.length === 1
? "font-bold text-blue-800"
: ""
}`}
>
{menu.label}
</span>
</div>
</Link>
) : (
<ul>
<li className="nav-item">
<button
type="button"
className={`${currentMenu === menu.key ? "active" : ""
} nav-link group w-full`}
onClick={() => toggleMenu(menu.key)}
>
<div className="flex items-center">
{menu.svg}
<span
className={`ltr-pl-3 rtl-pr-3 dark-text-[#506690] dark-group-hover-text-white-dark ml-2 text-black ${currentMenu === menu.key ? "font-bold" : ""
}`}
>
{menu.label}
</span>
</div>
<div
className={
currentMenu === menu.key || menu.links.some((link) => link.href === pathname)
? "rotate-90"
: "rtl-rotate-180"
}
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 5L15 12L9 19"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</button>
<AnimateHeight
duration={300}
height={
currentMenu === menu.key ||
menu.links.some((link) => link.href === pathname)
? "auto"
: 0
}
// height={currentMenu === menu.key && ? "auto" : 0}
>
<ul className="sub-menu text-gray-500">
{menu.links.map((link) => (
<li key={link.href}>
<Link
className={
link.href === pathname
? "text-blue-800"
: ""
}
href={link.href}
>
{link.label}
</Link>
</li>
))}
</ul>
</AnimateHeight>
</li>
</ul>
)}
</li>
))}
</ul>
</PerfectScrollbar>
</div>
</nav>
</div>
);
};
export default Sidebar;Editor is loading...
Leave a Comment