@dashadmin/dash-admin 1.3.42 → 1.3.44

package/dist/default-theme/menu/AppMenuComponents/expanded/CollapsableSidebarMenu.js

@@ -178,7 +178,11 @@ const CollapsableSidebarMenu = ({
                   primary: /* @__PURE__ */ jsx(Typography, { children: item.label })
                 }
               ),
-              navExpanded && /* @__PURE__ */ jsx("div", { onClick: handleExpandClick, children: sidebarPosition === "bottom" ? localOpen ? /* @__PURE__ */ jsx(ExpandMoreOutlinedIcon, { className: "expand-icon more" }) : /* @__PURE__ */ jsx(ExpandLessOutlinedIcon, { className: "expand-icon less" }) : localOpen ? /* @__PURE__ */ jsx(ExpandLessOutlinedIcon, { className: "expand-icon less" }) : /* @__PURE__ */ jsx(ExpandMoreOutlinedIcon, { className: "expand-icon more" }) })
+              navExpanded && // "expand-icon" is ALSO on the wrapper (not just the inner svg): the row's
+              // onClick above does closest('.expand-icon') to tell "clicked the arrow"
+              // from "clicked the row" — if only the svg had it, clicking the circle's
+              // padding (outside the svg's own box) would miss the check and navigate.
+              /* @__PURE__ */ jsx("div", { className: "expand-icon expand-icon-wrapper", onClick: handleExpandClick, children: sidebarPosition === "bottom" ? localOpen ? /* @__PURE__ */ jsx(ExpandMoreOutlinedIcon, { className: "expand-icon more" }) : /* @__PURE__ */ jsx(ExpandLessOutlinedIcon, { className: "expand-icon less" }) : localOpen ? /* @__PURE__ */ jsx(ExpandLessOutlinedIcon, { className: "expand-icon less" }) : /* @__PURE__ */ jsx(ExpandMoreOutlinedIcon, { className: "expand-icon more" }) })
             ]
           }
         )

package/dist/default-theme/menu/AppMenuComponents/submenuConstants.js

@@ -26,9 +26,14 @@ const getSubmenuBaseStyle = (sidebarPosition, renderAtTop = false) => ({
   overflowY: "auto",
   width: sidebarPosition === "top" || sidebarPosition === "bottom" ? "auto" : "260px",
   minWidth: "200px",
-  background: "var(--module-bg, #252526)",
-  boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
-  borderRadius: 8
+  // The wrapper is the SINGLE owner of the panel visuals (surface, border,
+  // shadow, radius, padding). The inner ul.dropdown must stay transparent —
+  // if both layers draw a border/background, their edges show as a seam line.
+  background: "var(--primary-contrast, #252526)",
+  border: "1px solid rgba(255,255,255,0.08)",
+  boxShadow: "0 10px 15px -3px rgba(0,0,0,0.25), 0 4px 6px -4px rgba(0,0,0,0.4)",
+  borderRadius: 12,
+  padding: 6
 });
 const calculateSubmenuPosition = (rect, sidebarPosition, renderAtTop = false) => {
   switch (sidebarPosition) {

package/dist/hooks/axios.js

@@ -1,6 +1,39 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import axios from "axios";
 import constants from "dash-constants/src/DASHAdminSystemConstants";
 import { dashStorage } from "dash-utils";
+let isRefreshing = false;
+let failedQueue = [];
+const processQueue = (error, token) => {
+  failedQueue.forEach((prom) => {
+    if (error) {
+      prom.reject(error);
+    } else {
+      prom.resolve(token);
+    }
+  });
+  isRefreshing = false;
+  failedQueue = [];
+};
 const initAxios = () => {
   let CSRFAuth = false;
   let options = {
@@ -28,17 +61,76 @@ const initAxios = () => {
     (response) => {
       return response;
     },
-    (error) => {
-      var _a;
-      window.dispatchEvent(new MessageEvent("GlobalError", { data: { error } }));
+    (error) => __async(null, null, function* () {
+      var _a, _b, _c;
+      const originalRequest = error.config;
+      const authEndpoints = ["/login", "/auth/refresh", "/logout", "/register"];
+      const isAuthEndpoint = authEndpoints.some(
+        (endpoint) => {
+          var _a2;
+          return (_a2 = originalRequest.url) == null ? void 0 : _a2.includes(endpoint);
+        }
+      );
+      if (((_a = error.response) == null ? void 0 : _a.status) === 401 && !isAuthEndpoint && !originalRequest._retry) {
+        if (isRefreshing) {
+          return new Promise((resolve, reject) => {
+            failedQueue.push({ resolve, reject });
+          }).then((token) => {
+            originalRequest.headers.Authorization = "Bearer " + token;
+            return instance(originalRequest);
+          }).catch((err) => {
+            return Promise.reject(err);
+          });
+        }
+        originalRequest._retry = true;
+        isRefreshing = true;
+        try {
+          const refreshToken = dashStorage.getItem("refreshToken");
+          if (!refreshToken) {
+            yield handleAuthFailure();
+            return Promise.reject(error);
+          }
+          const refreshResponse = yield axios.post(
+            `${constants.system.ADMIN_API_URL}/auth/refresh`,
+            { refresh_token: refreshToken }
+          );
+          const { token, refresh_token } = refreshResponse.data;
+          dashStorage.setItem("token", token);
+          dashStorage.setItem("refreshToken", refresh_token);
+          originalRequest.headers.Authorization = "Bearer " + token;
+          processQueue(null, token);
+          return instance(originalRequest);
+        } catch (refreshError) {
+          yield handleAuthFailure();
+          processQueue(refreshError, null);
+          return Promise.reject(refreshError);
+        }
+      }
+      if (((_b = error.response) == null ? void 0 : _b.status) !== 401) {
+        window.dispatchEvent(new MessageEvent("GlobalError", { data: { error } }));
+      }
       if (error.response && error.response.status === 422) {
-        return Promise.reject(((_a = error.response.data) == null ? void 0 : _a.errors) || error);
+        return Promise.reject(((_c = error.response.data) == null ? void 0 : _c.errors) || error);
       }
       return Promise.reject(error);
-    }
+    })
   );
   return instance;
 };
+function handleAuthFailure() {
+  return __async(this, null, function* () {
+    dashStorage.removeItem("token");
+    dashStorage.removeItem("refreshToken");
+    dashStorage.removeItem("user");
+    dashStorage.removeItem("auth");
+    dashStorage.removeItem("authenticated");
+    dashStorage.removeItem("roles");
+    window.dispatchEvent(new MessageEvent("auth:logout"));
+    if (!window.location.pathname.includes("/login")) {
+      window.location.href = "/login";
+    }
+  });
+}
 const useAxios = () => {
   const axios2 = initAxios();
   return {

package/dist/providers/authProvider.js

@@ -28,6 +28,8 @@ const logoutFromStorage = () => __async(null, null, function* () {
   removeCookie("token");
   dashStorage.removeItem("user");
   dashStorage.removeItem("auth");
+  dashStorage.removeItem("token");
+  dashStorage.removeItem("refreshToken");
   dashStorage.setItem("authenticated", "false");
   dashStorage.setItem("roles", null);
   yield clearDeviceStoreAuth();
@@ -46,6 +48,9 @@ var authProvider_default = {
       if (loginResponse.status >= 200 && loginResponse.status <= 299) {
         setCookie("token", loginResponse.data.token);
         dashStorage.setItem("token", loginResponse.data.token);
+        if (loginResponse.data.refresh_token) {
+          dashStorage.setItem("refreshToken", loginResponse.data.refresh_token);
+        }
         try {
           let { data: auth } = yield axios.get("/auth/getauth");
           dashStorage.setItem("roles", JSON.stringify(auth.user.roles));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dashadmin/dash-admin",
-	"version": "1.3.42",
+	"version": "1.3.44",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {

package/src/default-theme/menu/AppMaterialMenu.tsx

@@ -390,6 +390,7 @@ const AppMaterialMenu: React.FC<IAppMenuExtended> = props => {
     const isHorizontal = sidebarPosition === "top" || sidebarPosition === "bottom";
 
     return <>
+
         <Box className='sidebar-header'
 
             sx={{

package/src/default-theme/menu/AppMenuComponents/expanded/CollapsableSidebarMenu.tsx

@@ -227,7 +227,11 @@ const CollapsableSidebarMenu = ({
             />
           )}
           {navExpanded && (
-            <div onClick={handleExpandClick}>
+            // "expand-icon" is ALSO on the wrapper (not just the inner svg): the row's
+            // onClick above does closest('.expand-icon') to tell "clicked the arrow"
+            // from "clicked the row" — if only the svg had it, clicking the circle's
+            // padding (outside the svg's own box) would miss the check and navigate.
+            <div className="expand-icon expand-icon-wrapper" onClick={handleExpandClick}>
               {/* For bottom position, invert icons since submenu opens upward */}
               {sidebarPosition === "bottom" ? (
                 localOpen ? 

package/src/default-theme/menu/AppMenuComponents/submenuConstants.ts

@@ -20,9 +20,14 @@ export const getSubmenuBaseStyle = (
     overflowY: 'auto',
     width: sidebarPosition === "top" || sidebarPosition === "bottom" ? 'auto' : '260px',
     minWidth: '200px',
-    background: 'var(--module-bg, #252526)',
-    boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
-    borderRadius: 8,
+    // The wrapper is the SINGLE owner of the panel visuals (surface, border,
+    // shadow, radius, padding). The inner ul.dropdown must stay transparent —
+    // if both layers draw a border/background, their edges show as a seam line.
+    background: 'var(--primary-contrast, #252526)',
+    border: '1px solid rgba(255,255,255,0.08)',
+    boxShadow: '0 10px 15px -3px rgba(0,0,0,0.25), 0 4px 6px -4px rgba(0,0,0,0.4)',
+    borderRadius: 12,
+    padding: 6,
 });
 
 /**

package/src/default-theme/menu/AppSidebarMaterial.tsx

@@ -305,7 +305,7 @@ const AppSidebarMaterial: React.FC<AppSidebarMaterialProps> = (props) => {
     
     return (
         <Box sx={{ display: 'flex' }}>
-          
+       
             <MuiDrawer
                 variant={localNavSize === "small" ? 'temporary' : 'permanent'}
                 anchor={sidebarPosition}

package/src/hooks/axios.tsx

@@ -2,6 +2,23 @@ import axios from 'axios';
 import constants from 'dash-constants/src/DASHAdminSystemConstants';
 import { dashStorage } from 'dash-utils';
 
+// Track refresh state to prevent multiple simultaneous refresh attempts
+let isRefreshing = false;
+let failedQueue: Array<{ resolve: (token: string) => void; reject: (error: any) => void }> = [];
+
+const processQueue = (error: any, token?: string) => {
+	failedQueue.forEach(prom => {
+		if (error) {
+			prom.reject(error);
+		} else {
+			prom.resolve(token!);
+		}
+	});
+
+	isRefreshing = false;
+	failedQueue = [];
+};
+
 export const initAxios = () => {
 	let CSRFAuth = false;
 
@@ -36,8 +53,74 @@ export const initAxios = () => {
 			//console.log("Axios Success", response);
 			return response;
 		},
-		(error) => {
-			window.dispatchEvent(new MessageEvent('GlobalError', { data: {error:error} }));
+		async (error) => {
+			const originalRequest = error.config;
+
+			// Skip refresh for auth-related endpoints to prevent infinite loops
+			const authEndpoints = ['/login', '/auth/refresh', '/logout', '/register'];
+			const isAuthEndpoint = authEndpoints.some(endpoint =>
+				originalRequest.url?.includes(endpoint)
+			);
+
+			// Handle 401 Unauthorized
+			if (error.response?.status === 401 && !isAuthEndpoint && !originalRequest._retry) {
+				if (isRefreshing) {
+					// If already refreshing, queue this request
+					return new Promise((resolve, reject) => {
+						failedQueue.push({ resolve, reject });
+					}).then(token => {
+						originalRequest.headers.Authorization = 'Bearer ' + token;
+						return instance(originalRequest);
+					}).catch(err => {
+						return Promise.reject(err);
+					});
+				}
+
+				originalRequest._retry = true;
+				isRefreshing = true;
+
+				try {
+					const refreshToken = dashStorage.getItem('refreshToken');
+
+					if (!refreshToken) {
+						// No refresh token available, logout user
+						await handleAuthFailure();
+						return Promise.reject(error);
+					}
+
+					// Attempt to refresh the access token
+					const refreshResponse = await axios.post(
+						`${constants.system.ADMIN_API_URL}/auth/refresh`,
+						{ refresh_token: refreshToken }
+					);
+
+					const { token, refresh_token } = refreshResponse.data;
+
+					// Store new tokens
+					dashStorage.setItem('token', token);
+					dashStorage.setItem('refreshToken', refresh_token);
+
+					// Update original request with new token
+					originalRequest.headers.Authorization = 'Bearer ' + token;
+
+					// Process queued requests
+					processQueue(null, token);
+
+					// Retry original request
+					return instance(originalRequest);
+				} catch (refreshError) {
+					// Refresh failed, logout user
+					await handleAuthFailure();
+					processQueue(refreshError, null);
+					return Promise.reject(refreshError);
+				}
+			}
+
+			// Dispatch global error event for other errors
+			if (error.response?.status !== 401) {
+				window.dispatchEvent(new MessageEvent('GlobalError', { data: { error } }));
+			}
+
 			if (error.response && error.response.status === 422) {
 				/**
 				 * Error Handling This is important for the system to parse Form field errors within AutoAdmin.
@@ -45,6 +128,7 @@ export const initAxios = () => {
 				 **/
 				return Promise.reject(error.response.data?.errors || error);
 			}
+
 			return Promise.reject(error);
 		},
 	);
@@ -52,6 +136,25 @@ export const initAxios = () => {
 	return instance;
 };
 
+// Helper function to handle authentication failure
+async function handleAuthFailure() {
+	// Clear auth data
+	dashStorage.removeItem('token');
+	dashStorage.removeItem('refreshToken');
+	dashStorage.removeItem('user');
+	dashStorage.removeItem('auth');
+	dashStorage.removeItem('authenticated');
+	dashStorage.removeItem('roles');
+
+	// Dispatch logout event
+	window.dispatchEvent(new MessageEvent('auth:logout'));
+
+	// Redirect to login if not already there
+	if (!window.location.pathname.includes('/login')) {
+		window.location.href = '/login';
+	}
+}
+
 const useAxios = () => {
 	const axios = initAxios();
 	return {

package/src/providers/authProvider.tsx

@@ -9,9 +9,11 @@ export const logoutFromStorage = async () => {
 	removeCookie('token');
 	dashStorage.removeItem('user');
 	dashStorage.removeItem('auth');
+	dashStorage.removeItem('token');
+	dashStorage.removeItem('refreshToken'); // Clear refresh token for security
 	dashStorage.setItem('authenticated', 'false');
 	dashStorage.setItem('roles', null); // before it was guest role.
-	
+
 	// Clear auth data from device store (Electron/Capacitor)
 	await clearDeviceStoreAuth();
 };
@@ -40,6 +42,11 @@ export default {
 
 				dashStorage.setItem('token', loginResponse.data.token);
 
+				// Store refresh token for automatic token refresh
+				if (loginResponse.data.refresh_token) {
+					dashStorage.setItem('refreshToken', loginResponse.data.refresh_token);
+				}
+
 				try {
 					let { data: auth } = await axios.get('/auth/getauth');