@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
736 lines (733 loc) • 27.5 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["className"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useContext, useEffect, useRef } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import axios from 'axios';
import { Drawer, List, ListItem, ListItemIcon, ListItemText, Collapse, Box, Typography, useTheme, styled, Button, Tooltip, Avatar, Divider, tooltipClasses, TooltipProps, Paper, IconButton } from "@mui/material";
import { ExpandLess, ExpandMore, Dashboard as DashboardIcon, Inventory as InventoryIcon, Settings as SettingsIcon, Add as AddIcon, List as ListIcon, ShoppingCart as PurchaseIcon, Menu as MenuIcon, LocalShipping, Business, Visibility } from "@mui/icons-material";
import { PersonAdd as AddCustomerIcon, People as CustomersIcon, Visibility as ViewCustomersIcon, ExitToApp as LogoutIcon, Edit as EditIcon } from "@mui/icons-material";
import IntegrationInstructionsIcon from '@mui/icons-material/IntegrationInstructions';
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import AssignmentIcon from "@mui/icons-material/Assignment";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import ListAltIcon from "@mui/icons-material/ListAlt";
// Optional toast import - fallback to console if not available
var toast;
try {
var toastModule = require('react-hot-toast');
toast = toastModule.toast || toastModule.default;
} catch (e) {
toast = {
success: function success(message) {
return console.log('Success:', message);
},
error: function error(message) {
return console.error('Error:', message);
},
loading: function loading(message) {
return console.log('Loading:', message);
}
};
}
import Cookies from 'js-cookie';
// Assuming you have a context for user data
import { userDataContext } from "../../context/UserDataProvider";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
var drawerWidth = 240;
var collapsedWidth = 64;
var StyledDrawer = styled(Drawer)(function (_ref) {
var theme = _ref.theme;
return {
width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
boxSizing: "border-box",
backgroundColor: "rgb(32,15,48)",
borderRight: "1px solid ".concat(theme.palette.divider),
color: "white",
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
}),
overflowX: "hidden"
}
};
});
var StyledListItem = styled(ListItem)(function (_ref2) {
var theme = _ref2.theme;
return {
borderRadius: theme.shape.borderRadius,
cursor: "pointer",
marginBottom: theme.spacing(0.5),
"&:hover": {
backgroundColor: theme.palette.action.hover
},
"&.Mui-selected": {
backgroundColor: theme.palette.action.selected,
"&:hover": {
backgroundColor: theme.palette.action.selected
}
},
"& .MuiListItemText-primary": {
fontSize: "1rem"
}
};
});
var SubMenuContainer = styled(Box)(function (_ref3) {
var theme = _ref3.theme;
return {
marginLeft: theme.spacing(2),
paddingLeft: theme.spacing(2),
borderLeft: "2px solid #FFD700"
};
});
var StyledTooltip = styled(function (_ref4) {
var className = _ref4.className,
props = _objectWithoutProperties(_ref4, _excluded);
return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, props), {}, {
classes: {
popper: className
}
}));
})(function (_ref5) {
var theme = _ref5.theme;
return _defineProperty({}, "& .".concat(tooltipClasses.tooltip), {
backgroundColor: "transparent",
padding: 0,
maxWidth: "none"
});
});
var TooltipContent = styled(Paper)(function (_ref7) {
var theme = _ref7.theme;
return {
padding: theme.spacing(2),
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[4],
borderRadius: theme.shape.borderRadius,
width: 280
};
});
var TooltipTitle = styled(Typography)(function (_ref8) {
var theme = _ref8.theme;
return {
fontWeight: "bold",
fontSize: 18,
marginBottom: theme.spacing(1.5),
paddingBottom: theme.spacing(1),
paddingTop: theme.spacing(1),
backgroundColor: "rgba(156, 39, 176, 0.1)",
color: theme.palette.primary.main,
textAlign: "center",
borderTopLeftRadius: theme.shape.borderRadius,
borderTopRightRadius: theme.shape.borderRadius,
marginLeft: theme.spacing(-2),
marginRight: theme.spacing(-2),
marginTop: theme.spacing(-2)
};
});
var TooltipListItem = styled(ListItem)(function (_ref9) {
var theme = _ref9.theme;
return {
borderRadius: theme.shape.borderRadius,
marginBottom: theme.spacing(0.5),
"&:hover": {
backgroundColor: theme.palette.action.hover
},
"& .MuiListItemText-primary": {
fontSize: "0.95rem"
}
};
});
export default function CollapsibleSidebar(_ref0) {
var _user$name, _user$name2;
var sidebarData = _ref0.sidebarData,
getSidebarApi = _ref0.getSidebarApi,
logoutApi = _ref0.logoutApi;
var _useContext = useContext(userDataContext),
sidebarOpen = _useContext.sidebarOpen,
setSidebarOpen = _useContext.setSidebarOpen,
setUser = _useContext.setUser,
user = _useContext.user;
var _useState = useState(""),
_useState2 = _slicedToArray(_useState, 2),
openSubMenu = _useState2[0],
setOpenSubMenu = _useState2[1];
var theme = useTheme();
var location = useLocation();
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
sidebarItems = _useState4[0],
setSidebarItems = _useState4[1];
var sidebarRef = useRef(null);
var navigate = useNavigate();
var config = {
headers: {
Authorization: "Bearer ".concat(user.token)
}
};
var fetchSidebarData = /*#__PURE__*/function () {
var _ref1 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var response, iconMap, colorMap, modules, menuItems, homeIndex, homeItem;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
console.log(config, "config");
_context.next = 4;
return axios.post(getSidebarApi, {
email_id: user.emailId || localStorage.getItem('userEmail')
}, config);
case 4:
response = _context.sent;
iconMap = {
INVENTORY_MODULE: /*#__PURE__*/_jsx(InventoryIcon, {}),
SUPPLIER_MODULE: /*#__PURE__*/_jsx(Business, {}),
CUSTOMER_MODULE: /*#__PURE__*/_jsx(CustomersIcon, {}),
HOME: /*#__PURE__*/_jsx(DashboardIcon, {}),
SETTINGS: /*#__PURE__*/_jsx(SettingsIcon, {}),
ADD_ITEM: /*#__PURE__*/_jsx(AddCircleOutlineIcon, {}),
VIEW_ITEM: /*#__PURE__*/_jsx(ListAltIcon, {}),
UPLOAD_ITEMS: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
STOCK_AUDIT: /*#__PURE__*/_jsx(AssignmentIcon, {}),
ADD_SUPPLIER: /*#__PURE__*/_jsx(LocalShipping, {}),
VIEW_SUPPLIER: /*#__PURE__*/_jsx(Visibility, {}),
ADD_CUSTOMER: /*#__PURE__*/_jsx(AddCustomerIcon, {}),
VIEW_CUSTOMER: /*#__PURE__*/_jsx(ViewCustomersIcon, {}),
PURCHASE_MODULE: /*#__PURE__*/_jsx(PurchaseIcon, {}),
CREATE_PO: /*#__PURE__*/_jsx(AddIcon, {}),
VIEW_PO: /*#__PURE__*/_jsx(ListIcon, {}),
INTEGRATIONS_MODULE: /*#__PURE__*/_jsx(IntegrationInstructionsIcon, {}),
SALES: /*#__PURE__*/_jsx(LocalShipping, {}),
SALES_ORDER: /*#__PURE__*/_jsx(LocalShipping, {}),
VIEW_SALES_ORDER: /*#__PURE__*/_jsx(LocalShipping, {})
};
colorMap = {
INVENTORY_MODULE: "#2196f3",
SUPPLIER_MODULE: "#FF5722",
CUSTOMER_MODULE: "#009688",
PURCHASE_MODULE: "#ff9800",
HOME: "#4caf50",
SETTINGS: "#607d8b",
INTEGRATIONS_MODULE: "#964B00",
SALES: "#FF6D00"
};
modules = response.data.modules;
modules = modules.sort(function (a, b) {
return a.order_of_display - b.order_of_display;
});
menuItems = modules.map(function (module) {
var subItems = module.submodules.map(function (submodule) {
return {
name: submodule.name.toLowerCase() // Convert to lowercase
.replace(/_/g, " ") // Replace all underscores with spaces
.replace(/\b\w/g, function (c) {
return c.toUpperCase();
}),
icon: iconMap[submodule.name] || /*#__PURE__*/_jsx(ListIcon, {}),
path: submodule.route
};
});
return {
name: module.name.replace("_MODULE", "").toLowerCase().replace(/^./, function (c) {
return c.toUpperCase();
}),
icon: iconMap[module.name] || /*#__PURE__*/_jsx(DashboardIcon, {}),
path: subItems.length ? undefined : module.route,
color: colorMap[module.name] || "#000000",
subItems: subItems.length > 0 ? subItems : undefined
};
});
homeIndex = menuItems.findIndex(function (item) {
return item.name.toLowerCase() === 'home';
});
if (homeIndex !== -1) {
homeItem = menuItems.splice(homeIndex, 1)[0];
menuItems.unshift(homeItem);
}
setSidebarItems(menuItems);
_context.next = 18;
break;
case 15:
_context.prev = 15;
_context.t0 = _context["catch"](0);
console.error("Sidebar could not be fetched", _context.t0);
case 18:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 15]]);
}));
return function fetchSidebarData() {
return _ref1.apply(this, arguments);
};
}();
useEffect(function () {
fetchSidebarData();
}, [getSidebarApi]);
useEffect(function () {
console.log("Location changed:", location.pathname);
}, [location]);
var handleSubMenuToggle = function handleSubMenuToggle(name) {
setOpenSubMenu(openSubMenu === name ? "" : name);
};
var handleLogout = /*#__PURE__*/function () {
var _ref10 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var refreshToken, userEmail, response;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.prev = 0;
refreshToken = (user === null || user === void 0 ? void 0 : user.refreshToken) || Cookies.get('refreshToken');
userEmail = (user === null || user === void 0 ? void 0 : user.emailId) || localStorage.getItem('userEmail');
_context2.next = 5;
return axios.post(logoutApi, {
email: userEmail,
refreshToken: refreshToken
}, config);
case 5:
response = _context2.sent;
if (!(response.status !== 200)) {
_context2.next = 8;
break;
}
throw new Error('Logout failed');
case 8:
// Remove cookies
Cookies.remove('authToken');
Cookies.remove('refreshToken'); // Also remove refresh token cookie
Cookies.remove('userName');
Cookies.remove('logintime');
Cookies.remove('name');
Cookies.remove('_ga');
Cookies.remove('_ga_NRS9PX9R2K');
Cookies.remove('emailId');
// Clear storage
localStorage.clear();
sessionStorage.clear();
toast.success("Logged out successfully", {
style: {
background: '#333',
color: '#fff',
borderRadius: '10px',
padding: '10px 14px'
}
});
setUser(null);
window.location.href = '/';
_context2.next = 27;
break;
case 23:
_context2.prev = 23;
_context2.t0 = _context2["catch"](0);
console.error("Logout failed", _context2.t0);
toast.error("Logout failed. Please try again.");
case 27:
case "end":
return _context2.stop();
}
}, _callee2, null, [[0, 23]]);
}));
return function handleLogout() {
return _ref10.apply(this, arguments);
};
}();
useEffect(function () {
var handleClickOutside = function handleClickOutside(event) {
if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
setSidebarOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return function () {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [setSidebarOpen]);
var renderMenuItem = function renderMenuItem(item) {
var isSelected = location.pathname === item.path || item.subItems && item.subItems.some(function (subItem) {
return location.pathname === subItem.path;
});
var listItem = /*#__PURE__*/_jsxs(StyledListItem, {
button: true,
component: Link,
to: item.path || "#",
onClick: function onClick(e) {
if (item.subItems && sidebarOpen) {
e.preventDefault();
handleSubMenuToggle(item.name);
}
},
selected: isSelected,
children: [/*#__PURE__*/_jsx(ListItemIcon, {
sx: {
color: item.color,
minWidth: 40
},
children: /*#__PURE__*/React.cloneElement(item.icon, {
style: {
fontSize: 24
}
})
}), /*#__PURE__*/_jsx(ListItemText, {
primary: item.name,
primaryTypographyProps: {
fontWeight: isSelected ? "bold" : "medium",
variant: "body1"
},
sx: {
opacity: sidebarOpen ? 1 : 0,
transition: theme.transitions.create("opacity", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
}
}), sidebarOpen && item.subItems && (openSubMenu === item.name ? /*#__PURE__*/_jsx(ExpandLess, {}) : /*#__PURE__*/_jsx(ExpandMore, {}))]
});
var tooltipContent = /*#__PURE__*/_jsxs(TooltipContent, {
elevation: 6,
children: [/*#__PURE__*/_jsx(TooltipTitle, {
variant: "h6",
children: item.name
}), item.subItems && /*#__PURE__*/_jsx(List, {
disablePadding: true,
children: item.subItems.map(function (subItem) {
return /*#__PURE__*/_jsxs(TooltipListItem, {
button: true,
component: Link,
to: subItem.path,
children: [/*#__PURE__*/_jsx(ListItemIcon, {
sx: {
color: item.color,
minWidth: 40
},
children: /*#__PURE__*/React.cloneElement(subItem.icon, {
style: {
fontSize: 20
}
})
}), /*#__PURE__*/_jsx(ListItemText, {
primary: subItem.name,
primaryTypographyProps: {
variant: "body1",
fontWeight: location.pathname === subItem.path ? "bold" : "normal"
}
})]
}, subItem.name);
})
})]
});
return /*#__PURE__*/_jsxs(React.Fragment, {
children: [/*#__PURE__*/_jsx(StyledTooltip, {
title: !sidebarOpen ? tooltipContent : "",
placement: "right",
arrow: true,
children: listItem
}), item.subItems && sidebarOpen && /*#__PURE__*/_jsx(Collapse, {
in: openSubMenu === item.name,
timeout: "auto",
unmountOnExit: true,
children: /*#__PURE__*/_jsx(SubMenuContainer, {
children: /*#__PURE__*/_jsx(List, {
component: "div",
disablePadding: true,
children: item.subItems.map(function (subItem) {
return /*#__PURE__*/_jsxs(StyledListItem, {
button: true,
component: Link,
to: subItem.path,
selected: location.pathname === subItem.path,
sx: {
pl: 4
},
children: [/*#__PURE__*/_jsx(ListItemIcon, {
sx: {
color: item.color,
minWidth: 40
},
children: /*#__PURE__*/React.cloneElement(subItem.icon, {
style: {
fontSize: 20
}
})
}), /*#__PURE__*/_jsx(ListItemText, {
primary: subItem.name,
primaryTypographyProps: {
variant: "body2",
fontWeight: location.pathname === subItem.path ? "bold" : "normal"
}
})]
}, subItem.name);
})
})
})
})]
}, item.name);
};
return /*#__PURE__*/_jsx(Box, {
sx: {
position: 'fixed',
left: '0px',
zIndex: 40,
display: "flex",
height: "96.28%"
},
children: /*#__PURE__*/_jsx(StyledDrawer, {
variant: "permanent",
open: sidebarOpen,
sx: {
width: sidebarOpen ? drawerWidth : collapsedWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
}),
"& .MuiDrawer-paper": {
width: sidebarOpen ? drawerWidth : collapsedWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
}
},
children: /*#__PURE__*/_jsxs(Box, {
ref: sidebarRef,
children: [/*#__PURE__*/_jsxs(Box, {
sx: {
p: 2,
px: "20px",
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
height: 61,
overflow: "hidden",
bgcolor: "rgb(32,15,48)",
color: "white"
},
children: [/*#__PURE__*/_jsx(IconButton, {
color: "inherit",
"aria-label": "toggle drawer",
edge: "start",
onClick: function onClick() {
return setSidebarOpen(function (prev) {
return !prev;
});
},
sx: {
color: "white",
marginRight: 3,
bgcolor: "purple"
},
children: /*#__PURE__*/_jsx(MenuIcon, {
sx: {
fontSize: "1.5rem"
}
})
}), /*#__PURE__*/_jsx(Typography, {
variant: "h4",
noWrap: true,
component: "div",
sx: {
fontWeight: "bold",
opacity: sidebarOpen ? 0.8 : 0,
transition: theme.transitions.create("opacity", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
children: sidebarOpen ? "NestBiz" : "NB"
})]
}), /*#__PURE__*/_jsx(List, {
sx: {
mt: 2
},
children: sidebarItems.map(renderMenuItem)
}), /*#__PURE__*/_jsxs(Box, {
sx: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
p: 2,
backgroundColor: "rgba(255, 255, 255, 0.05)"
},
children: [/*#__PURE__*/_jsx(StyledTooltip, {
title: !sidebarOpen ? /*#__PURE__*/_jsx(TooltipContent, {
children: /*#__PURE__*/_jsxs(Box, {
sx: {
p: 2,
width: 220
},
children: [/*#__PURE__*/_jsxs(Box, {
sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
mb: 2
},
children: [/*#__PURE__*/_jsx(Avatar, {
sx: {
width: 48,
height: 48,
bgcolor: "primary.main",
color: "primary.contrastText",
fontSize: '1.5rem',
cursor: "pointer",
fontWeight: 'bold',
mb: 3.2
},
children: (user === null || user === void 0 || (_user$name = user.name) === null || _user$name === void 0 || (_user$name = _user$name.charAt(0)) === null || _user$name === void 0 ? void 0 : _user$name.toUpperCase()) || ""
}), /*#__PURE__*/_jsx(TooltipTitle, {
variant: "h6",
sx: {
width: '100%'
},
children: user.name
})]
}), /*#__PURE__*/_jsx(Divider, {
sx: {
my: 1.5
}
}), /*#__PURE__*/_jsx(Button, {
fullWidth: true,
variant: "outlined",
startIcon: /*#__PURE__*/_jsx(LogoutIcon, {}),
onClick: handleLogout,
sx: {
mt: 1,
color: 'primary.main',
cursor: "pointer",
borderColor: 'primary.main',
'&:hover': {
backgroundColor: 'primary.main',
color: 'primary.contrastText'
},
textTransform: 'none',
fontWeight: 'medium'
},
children: "Logout"
})]
})
}) : "",
placement: "right",
arrow: true,
children: /*#__PURE__*/_jsxs(Box, {
sx: {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 1,
mb: sidebarOpen ? 2 : 0
},
children: [/*#__PURE__*/_jsx(Avatar, {
sx: {
width: 48,
height: 48,
bgcolor: "primary.main",
color: "primary.contrastText",
fontSize: '1.5rem',
fontWeight: 'bold'
},
children: (user === null || user === void 0 || (_user$name2 = user.name) === null || _user$name2 === void 0 || (_user$name2 = _user$name2.charAt(0)) === null || _user$name2 === void 0 ? void 0 : _user$name2.toUpperCase()) || ""
}), sidebarOpen && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Typography, {
variant: "subtitle1",
sx: {
color: "white",
textAlign: "center"
},
children: user.name
}), /*#__PURE__*/_jsx(Typography, {
variant: "body2",
sx: {
color: "rgba(255, 255, 255, 0.7)",
textAlign: "center"
},
children: user.email
})]
})]
})
}), sidebarOpen && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(StyledListItem, {
button: true,
component: Link,
to: "/setting",
sx: {
borderRadius: "8px",
mt: 2,
width: "100%",
display: 'flex',
justifyContent: "center",
backgroundColor: "#2337c6",
opacity: 0.79,
"&:hover": {
backgroundColor: "rgba(255, 255, 255, 0.08)"
}
},
children: [/*#__PURE__*/_jsx(ListItemIcon, {
sx: {
minWidth: 'auto',
mr: 4
},
children: /*#__PURE__*/_jsx(EditIcon, {
sx: {
color: "white"
}
})
}), /*#__PURE__*/_jsx(ListItemText, {
primary: "Manage Profile",
primaryTypographyProps: {
color: "white"
},
sx: {
fontSize: '1.2rem'
}
})]
}), /*#__PURE__*/_jsxs(StyledListItem, {
button: true,
onClick: handleLogout,
sx: {
borderRadius: "8px",
mt: 2,
width: "100%",
display: 'flex',
justifyContent: "center",
backgroundColor: "rgba(32, 15, 48, 1)",
"&:hover": {
backgroundColor: "rgba(255, 255, 255, 0.08)"
}
},
children: [/*#__PURE__*/_jsx(ListItemIcon, {
sx: {
minWidth: 'auto',
mr: 4
},
children: /*#__PURE__*/_jsx(LogoutIcon, {
sx: {
color: "white"
}
})
}), /*#__PURE__*/_jsx(ListItemText, {
primary: "Logout",
primaryTypographyProps: {
color: "white"
},
sx: {
fontSize: '1.2rem'
}
})]
})]
})]
})]
})
})
});
}