@canmingir/link 1.2.5 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/context/reducer.js

@@ -1,13 +1,10 @@
-import config from "../config/config";
 import { jwtDecode } from "jwt-decode";
 import { storage } from "@nucleoidjs/webstorage";
 
-const { name } = config();
-
 let login = true;
 const itemId = storage.get("itemId");
 try {
-  const token = storage.get(name, "accessToken");
+  const token = storage.get("link", "accessToken");
   const decodedToken = jwtDecode(token);
 
   if (decodedToken.exp * 1000 < Date.now()) {

package/src/http/index.js

@@ -15,8 +15,8 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use((request) => {
-  const { name, base } = config();
-  const accessToken = storage.get(name, "accessToken");
+  const { base } = config();
+  const accessToken = storage.get("link", "accessToken");
 
   if (!accessToken) {
     window.location.href = base === "/" ? "/login" : `${base}/login`;
@@ -85,14 +85,17 @@ export const fetcher = (url) => instance.get(url).then((res) => res.data);
 
 const refreshAuthLogic = async (failedRequest) => {
   try {
-    const { name, appId } = config();
+    const { appId } = config();
 
     const projectId = storage.get("projectId");
 
+    const identityProvider = storage.get("link", "identityProvider");
+
     const { data } = await oauth.post("/oauth", {
-      refreshToken: storage.get(name, "refreshToken"),
+      refreshToken: storage.get("link", "refreshToken"),
       appId,
       projectId,
+      identityProvider,
     });
 
     const accessToken = data.accessToken;
@@ -100,13 +103,13 @@ const refreshAuthLogic = async (failedRequest) => {
     failedRequest.response.config.headers["Authorization"] =
       "Bearer " + accessToken;
 
-    storage.set(name, "accessToken", accessToken);
+    storage.set("link", "accessToken", accessToken);
     return Promise.resolve();
   } catch (error) {
     const { name, base } = config();
 
-    storage.remove(name, "accessToken");
-    storage.remove(name, "refreshToken");
+    storage.remove("link", "accessToken");
+    storage.remove("link", "refreshToken");
 
     window.location.href = `${window.location.origin}${base}/login`;
     return Promise.reject(error);
@@ -122,7 +125,7 @@ refreshInterceptor(instance, refreshAuthLogic, {
   statusCodes: [401, 403],
   shouldRefresh: () => {
     const { name, base } = config();
-    const token = storage.get(name, "accessToken");
+    const token = storage.get("link", "accessToken");
 
     if (!token) {
       window.location.href = `${window.location.origin}${base}/login`;

package/src/http/user.js

@@ -1,6 +1,8 @@
 import axios from "axios";
 import config from "../config/config.js";
 import http from "./index";
+import { jwtDecode } from "jwt-decode";
+import oauth from "./oauth";
 import { storage } from "@nucleoidjs/webstorage";
 
 const instance = axios.create({
@@ -11,15 +13,8 @@ const instance = axios.create({
   },
 });
 
-function getProjectName() {
-  const { name } = config();
-  if (name) {
-    return name;
-  }
-}
-
 instance.interceptors.request.use(async (request) => {
-  const refreshToken = await storage.get(getProjectName(), "refreshToken");
+  const refreshToken = await storage.get("link", "refreshToken");
   if (refreshToken) {
     request.headers["Authorization"] = `Bearer ${refreshToken}`;
   }
@@ -28,25 +23,62 @@ instance.interceptors.request.use(async (request) => {
 
 instance.getUserDetails = async () => {
   try {
-    const refreshToken = await storage.get(getProjectName(), "refreshToken");
+    const refreshToken = await storage.get("link", "refreshToken");
+
     if (!refreshToken) {
       console.log("No refresh token found");
       return null;
     }
 
+    let accessToken = await storage.get("link", "accessToken");
+
+    if (!accessToken) {
+      console.log("No access token found");
+      return null;
+    }
+
+    try {
+      const decodedToken = jwtDecode(accessToken);
+      const isExpired = decodedToken.exp * 1000 < Date.now();
+
+      if (isExpired) {
+        console.log(
+          "Access token expired, refreshing before fetching user details..."
+        );
+        const { appId } = config();
+        const projectId = storage.get("projectId");
+        const identityProvider = storage.get("link", "identityProvider");
+
+        const { data } = await oauth.post("/oauth", {
+          refreshToken,
+          appId,
+          projectId,
+          identityProvider,
+        });
+
+        accessToken = data.accessToken;
+        storage.set("link", "accessToken", accessToken);
+        console.log(
+          "Access token refreshed successfully, now fetching user details"
+        );
+      }
+    } catch (error) {
+      console.error("Error checking or refreshing token:", error);
+      return null;
+    }
+
     const response = await http.get("/oauth/user", {
       headers: {
-        'X-Refresh-Token': refreshToken
-      }
+        "X-Refresh-Token": refreshToken,
+      },
     });
-    
+
     if (response.data && response.data.user) {
       return response.data.user;
     }
-    
+
     console.log("No user data received from server");
     return null;
-    
   } catch (error) {
     console.error("Error fetching user details from server:", error);
     return null;
@@ -55,7 +87,7 @@ instance.getUserDetails = async () => {
 
 instance.getPermittedUsers = async () => {
   const userIds = [];
-  const refreshToken = await storage.get(getProjectName(), "refreshToken");
+  const refreshToken = await storage.get("link", "refreshToken");
   const response = await http.get("/permissions");
 
   response.data.forEach((permission) => {
@@ -75,4 +107,4 @@ instance.getPermittedUsers = async () => {
   return users;
 };
 
-export default instance;
+export default instance;

package/src/layouts/DashboardLayout/nav-mini.jsx

@@ -9,15 +9,16 @@ import SettingsDialog from "../../widgets/SettingsDialog";
 import Stack from "@mui/material/Stack";
 import config from "../../config/config";
 import { hideScroll } from "../../theme/css";
+import { useResponsive } from "../../hooks/use-responsive";
 import { useUser } from "../../hooks/use-user";
 
 import React, { useState } from "react";
 
 export default function NavMini({ only }) {
   const { user } = useUser();
-  const { sideMenu } = config().menu;
+  const { sideMenu, actionButtons } = config().menu;
   const [openSettings, setOpenSettings] = useState(false);
-
+  const lgUp = useResponsive("up", "lg");
   const handleCloseSettings = () => {
     setOpenSettings(false);
   };
@@ -57,21 +58,40 @@ export default function NavMini({ only }) {
           }}
         />
         <Box sx={{ flexGrow: 1 }} />
-        <Button
-          data-cy="end-item"
-          fullWidth={true}
-          onClick={() => setOpenSettings(true)}
+        <Stack
+          direction={"column"}
+          alignItems={"center"}
+          justifyItems={"center"}
+          sx={{
+            marginBottom: lgUp ? 3 : 0,
+            position: lgUp ? "static" : "fixed",
+            bottom: lgUp ? "auto" : 66,
+            width: "100%",
+          }}
+          gap={2}
         >
-          <Iconify
-            icon={"ic:baseline-settings"}
+          {actionButtons &&
+            actionButtons.map((Action, index) => (
+              <Box key={index} component={Action}></Box>
+            ))}
+          <Button
+            onClick={() => setOpenSettings(true)}
             sx={{
-              width: 32,
-              height: 32,
-              color: "text.secondary",
-              mx: "auto",
+              position: lgUp ? "static" : "fixed",
+              bottom: lgUp ? "auto" : 16,
+              width: "100%",
             }}
-          />
-        </Button>
+          >
+            <Iconify
+              icon={"ic:baseline-settings"}
+              sx={{
+                width: 32,
+                height: 32,
+                color: "text.secondary",
+              }}
+            />
+          </Button>
+        </Stack>
         <SettingsDialog open={openSettings} handleClose={handleCloseSettings} />
       </Stack>
     </Box>

package/src/layouts/FullScreenLayout/nav-horizontal.jsx

@@ -16,7 +16,7 @@ function NavHorizontal() {
 
   const { user } = useUser();
 
-  const { sideMenu } = config().menu;
+  const { sideMenu, actionButtons } = config().menu;
   return (
     <AppBar component="div" data-cy="nav-horizontal">
       <Toolbar
@@ -35,6 +35,11 @@ function NavHorizontal() {
             ...theme.mixins.toolbar,
           }}
         />
+
+        {actionButtons &&
+          actionButtons.map((Action, index) => (
+            <Box key={index} component={Action}></Box>
+          ))}
       </Toolbar>
 
       <HeaderShadow />

package/src/layouts/common/ProjectBar/index.jsx

@@ -1,10 +1,3 @@
-import { Button, DialogActions } from "@mui/material";
-import Dialog, { dialogClasses } from "@mui/material/Dialog";
-import React, { useCallback, useState } from "react";
-import { publish, useEvent } from "@nucleoidai/react-event";
-import { storage, useStorage } from "@nucleoidjs/webstorage";
-import { useMediaQuery, useTheme } from "@mui/material";
-
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Iconify from "../../../components/Iconify";
@@ -29,9 +22,16 @@ import { useEventListener } from "../../../hooks/use-event-listener";
 import { useNavigate } from "react-router-dom";
 import useProjects from "../../../hooks/useProjects";
 
+import { Button, DialogActions } from "@mui/material";
+import Dialog, { dialogClasses } from "@mui/material/Dialog";
+import React, { useCallback, useState } from "react";
+import { publish, useEvent } from "@nucleoidai/react-event";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
+import { useMediaQuery, useTheme } from "@mui/material";
+
 function ProjectBar() {
   const label = config().template?.projectBar?.label;
-  const { appId, name } = config();
+  const { appId } = config();
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down(435));
   const { loading, projects, getProjects } = useProjects();
@@ -91,15 +91,15 @@ function ProjectBar() {
   const handleSelect = (project) => {
     const { id: projectId } = project;
 
-    const refreshToken = storage.get(name, "refreshToken");
-    const provider = storage.get(name, "provider");
+    const refreshToken = storage.get("link", "refreshToken");
+    const identityProvider = storage.get("link", "identityProvider");
 
     oauth
-      .post("/oauth", { appId, refreshToken, projectId, provider })
+      .post("/oauth", { appId, refreshToken, projectId, identityProvider })
       .then(({ data }) => {
         const { refreshToken, accessToken } = data;
-        storage.set(name, "accessToken", accessToken);
-        storage.set(name, "refreshToken", refreshToken);
+        storage.set("link", "accessToken", accessToken);
+        storage.set("link", "refreshToken", refreshToken);
         storage.set("projectId", projectId);
       })
       .finally(() => {

package/src/layouts/common/account-popover.jsx

@@ -19,7 +19,6 @@ import CustomPopover, { usePopover } from "../../components/custom-popover";
 // ----------------------------------------------------------------------
 
 export default function AccountPopover() {
-  const { name } = config();
   const { options } = config().menu;
   const router = useRouter();
   const { user } = useUser();
@@ -28,8 +27,8 @@ export default function AccountPopover() {
 
   const handleLogout = async () => {
     try {
-      storage.remove(name, "accessToken");
-      storage.remove(name, "refreshToken");
+      storage.remove("link", "accessToken");
+      storage.remove("link", "refreshToken");
       popover.onClose();
       router.replace("/login");
     } catch (error) {

package/src/lib/Flow/DynamicConnector.jsx

@@ -30,6 +30,7 @@ const DynamicConnector = ({
       };
 
       const children = childEls.map((el) => {
+        if (!el) return { x: parent.x, y: parent.y };
         const r = el.getBoundingClientRect();
         return {
           x: r.left + r.width / 2 - cRect.left,
@@ -45,12 +46,13 @@ const DynamicConnector = ({
       setDims({ w: cRect.width, h: cRect.height });
     };
 
+    update();
+
     const ro = new ResizeObserver(update);
     ro.observe(containerEl);
     ro.observe(parentEl);
     childEls.forEach((el) => el && ro.observe(el));
 
-    update();
     return () => ro.disconnect();
   }, [containerEl, parentEl, childEls, tick]);
 
@@ -65,6 +67,18 @@ const DynamicConnector = ({
 
   const onlyOne = points.children.length === 1;
 
+  const svgProps = {
+    style: {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+      overflow: "visible",
+    },
+    width: "100%",
+    height: "100%",
+    viewBox: `0 0 ${dims.w} ${dims.h}`,
+  };
+
   if (connectorType === "curved" || connectorType === "n8n") {
     const createN8nPath = (from, to) => {
       const v = Math.max(32, Math.abs(to.y - from.y) * 0.35);
@@ -83,12 +97,7 @@ const DynamicConnector = ({
     };
 
     return (
-      <svg
-        style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
-        width="100%"
-        height="100%"
-        viewBox={`0 0 ${dims.w} ${dims.h}`}
-      >
+      <svg {...svgProps}>
         {points.children.map((child, i) => (
           <path
             key={i}
@@ -106,12 +115,7 @@ const DynamicConnector = ({
   }
 
   return (
-    <svg
-      style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
-      width="100%"
-      height="100%"
-      viewBox={`0 0 ${dims.w} ${dims.h}`}
-    >
+    <svg {...svgProps}>
       {onlyOne ? (
         <line
           x1={points.parent.x}
@@ -136,8 +140,8 @@ const DynamicConnector = ({
 
           {(() => {
             const xs = points.children.map((c) => c.x);
-            const xMin = Math.min(...xs);
-            const xMax = Math.max(...xs);
+            const xMin = Math.min(...xs, points.parent.x);
+            const xMax = Math.max(...xs, points.parent.x);
             return (
               <line
                 x1={xMin}

package/src/lib/Flow/Flow.jsx

@@ -27,7 +27,13 @@ export const Flow = ({ data, variant = "simple", style, plugin }) => {
   }, [nodesById, roots]);
 
   return (
-    <FlowNode node={treeData} variant={variant} style={style} plugin={plugin} />
+    <FlowNode
+      node={treeData}
+      variant={variant}
+      style={style}
+      plugin={plugin}
+      isRoot={true}
+    />
   );
 };
 

package/src/lib/Flow/FlowNode.jsx

@@ -11,7 +11,15 @@ import {
   toPxNumber,
 } from "./styles";
 
-const FlowNode = ({ node, type, variant, style, plugin }) => {
+const NodeContent = ({
+  node,
+  type,
+  variant,
+  style,
+  plugin,
+  registerRef,
+  onDrag,
+}) => {
   const baseStyle = getBaseStyleForVariant(variant);
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
 
@@ -25,23 +33,19 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
     styleTokens = style;
   }
 
-  let plugins = null;
+  let _plugin = null;
   if (plugin) {
     if (typeof plugin === "function") {
-      plugin = plugin(type, node);
-    } else if (
-      typeof plugin === "object" &&
-      (typeof plugin.renderNode === "function" ||
-        typeof plugin.resolveStyle === "function")
-    ) {
-      plugins = plugin;
+      _plugin = plugin(type, node) || null;
+    } else if (typeof plugin === "object") {
+      _plugin = plugin;
     }
   }
 
   let pluginTokens = {};
-  if (plugins && typeof plugins.resolveStyle === "function") {
+  if (_plugin && typeof _plugin.style === "function") {
     pluginTokens =
-      plugins.resolveStyle({
+      _plugin.style({
         node,
         style: styleTokens,
       }) || {};
@@ -82,7 +86,11 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
   const [childElList, setChildElList] = useState([]);
 
   const [connectorTick, setConnectorTick] = useState(0);
-  const notifyDrag = () => setConnectorTick((t) => t + 1);
+
+  const handleDrag = (newOffset) => {
+    setConnectorTick((t) => t + 1);
+    if (onDrag) onDrag(newOffset);
+  };
 
   useLayoutEffect(() => {
     const els = (node.children || [])
@@ -194,8 +202,8 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
   };
 
   const renderContent = () => {
-    if (plugin && typeof plugin.renderNode === "function") {
-      return plugin.renderNode({
+    if (_plugin && typeof _plugin.node === "function") {
+      return _plugin.node({
         node,
         title,
         subtitle,
@@ -217,9 +225,15 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
         position: "relative",
       }}
     >
-      <Box ref={parentRef} sx={{ position: "relative" }}>
+      <DraggableNode
+        registerRef={(el) => {
+          parentRef.current = el;
+          if (registerRef) registerRef(el);
+        }}
+        onDrag={handleDrag}
+      >
         {renderContent()}
-      </Box>
+      </DraggableNode>
 
       {hasChildren && (
         <>
@@ -246,19 +260,17 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
             }}
           >
             {node.children.map((child) => (
-              <DraggableNode
+              <FlowNode
                 key={child.id}
+                node={child}
+                type={type}
+                variant={variant}
+                style={style}
+                plugin={plugin}
                 registerRef={(el) => (childRefs.current[child.id] = el)}
-                onDrag={notifyDrag}
-              >
-                <FlowNode
-                  node={child}
-                  type={type}
-                  variant={variant}
-                  style={style}
-                  plugin={plugin}
-                />
-              </DraggableNode>
+                onDrag={() => setConnectorTick((t) => t + 1)}
+                isRoot={false}
+              />
             ))}
           </Box>
         </>
@@ -267,4 +279,93 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
   );
 };
 
+const FlowNode = ({ isRoot = false, ...props }) => {
+  if (!isRoot) {
+    return <NodeContent {...props} />;
+  }
+
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+
+  const [zoom, setZoom] = useState(1);
+
+  const clampZoom = (z) => Math.min(2.5, Math.max(0.25, z));
+
+  useEffect(() => {
+    const onWheel = (e) => {
+      const wantsZoom = e.ctrlKey || e.metaKey;
+      if (!wantsZoom) return;
+
+      e.preventDefault();
+
+      const direction = e.deltaY > 0 ? -1 : 1;
+      const factor = direction > 0 ? 1.1 : 1 / 1.1;
+
+      setZoom((z) => clampZoom(z * factor));
+    };
+
+    window.addEventListener("wheel", onWheel, { passive: false });
+    return () => window.removeEventListener("wheel", onWheel);
+  }, []);
+
+  const handleCanvasMouseDown = (e) => {
+    if (e.target?.closest?.('[data-flow-zoom="true"]')) return;
+
+    if (e.button !== 0) return;
+
+    setIsDragging(true);
+
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startOffset = { ...offset };
+
+    const onMove = (ev) => {
+      setOffset({
+        x: startOffset.x + (ev.clientX - startX),
+        y: startOffset.y + (ev.clientY - startY),
+      });
+    };
+
+    const onUp = () => {
+      setIsDragging(false);
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  return (
+    <Box
+      onMouseDown={handleCanvasMouseDown}
+      sx={{
+        width: "100vw",
+        height: "100vh",
+        overflow: "hidden",
+        bgcolor: "none",
+        cursor: isDragging ? "grabbing" : "default",
+        userSelect: "none",
+        position: "relative",
+      }}
+    >
+      <Box
+        sx={{
+          transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
+          transformOrigin: "center center",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: isDragging ? "none" : "transform 0.1s ease-out",
+          pointerEvents: "auto",
+        }}
+      >
+        <NodeContent {...props} />
+      </Box>
+    </Box>
+  );
+};
+
 export default FlowNode;

package/src/lib/Flow/layouts/CardLayout.jsx

@@ -1,12 +1,27 @@
 import React from "react";
 
-import { Box, Card, Stack } from "@mui/material";
+import { Box, Card, Stack, Typography } from "@mui/material";
 import { alpha, useTheme } from "@mui/material/styles";
 
+const STYLES = {
+  width: "100%",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  wordBreak: "break-word",
+  lineHeight: 1.3,
+  opacity: 0.85,
+};
+
 export function MediaAvatarCard({
   sx,
   leftContent,
   rightContent,
+  title,
+  description,
+  footer,
   background,
   overlayColor,
   backgroundClassName = "animated-background-image",
@@ -25,6 +40,9 @@ export function MediaAvatarCard({
         position: "relative",
         display: "flex",
         flexDirection: "row",
+        fontSize: 12,
+        color: "rgba(255,255,255,0.82)",
+        lineHeight: 1.3,
         boxShadow: (theme) => theme.shadows[3],
         "&:hover": {
           boxShadow: (theme) => theme.shadows[6],
@@ -82,75 +100,44 @@ export function MediaAvatarCard({
 
       <Stack
         direction="column"
-        spacing={1}
         sx={{
           flex: 1,
           padding: 2,
           zIndex: 1,
           position: "relative",
+          height: "100%",
+          justifyContent: "space-between",
         }}
       >
-        {rightContent}
-      </Stack>
-    </Card>
-  );
-}
+        {rightContent ? (
+          rightContent
+        ) : (
+          <>
+            <Stack spacing={1} sx={{ width: "100%", minWidth: 0 }}>
+              <Box>{title}</Box>
 
-export function HeaderCard({
-  sx,
-  header,
-  children,
-  height = 140,
-  padding = 2,
-}) {
-  const theme = useTheme();
+              {description && (
+                <Typography variant="inherit" sx={STYLES}>
+                  {description}
+                </Typography>
+              )}
+            </Stack>
 
-  return (
-    <Card
-      sx={{
-        p: padding,
-        minWidth: 200,
-        maxWidth: 420,
-        height,
-        borderRadius: 3,
-        position: "relative",
-        overflow: "hidden",
-        backgroundColor: theme.palette.background.paper,
-        transition: "all 0.3s ease-in-out",
-        "&:hover": {
-          transform: "translateY(-4px)",
-          boxShadow: theme.shadows[8],
-          "&:before": {
-            height: "100%",
-          },
-        },
-        "&:before": {
-          content: '""',
-          width: "100%",
-          height: "40%",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          background: `linear-gradient(135deg, ${alpha(
-            theme.palette.secondary.light,
-            0.2
-          )}, ${alpha(theme.palette.primary.main, 0.3)})`,
-          borderRadius: "8px 8px 0 0",
-          transition: "height 0.3s ease-in-out",
-        },
-        ...sx,
-      }}
-    >
-      <Stack
-        spacing={2}
-        sx={{
-          height: "100%",
-          position: "relative",
-          zIndex: 1,
-        }}
-      >
-        {header}
-        {children}
+            {footer && (
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  gap: 0.5,
+                  mt: 0.5,
+                }}
+              >
+                {footer}
+              </Box>
+            )}
+          </>
+        )}
       </Stack>
     </Card>
   );
@@ -160,6 +147,9 @@ export function SideStripeCard({
   sx,
   stripeContent,
   mainContent,
+  title,
+  description,
+  footer,
   minWidth = 200,
   maxWidth = 290,
   height = 100,
@@ -168,11 +158,7 @@ export function SideStripeCard({
   const theme = useTheme();
 
   return (
-    <Box
-      sx={{
-        cursor: "pointer",
-      }}
-    >
+    <Box sx={{ cursor: "pointer" }}>
       <Card
         sx={{
           display: "flex",
@@ -185,6 +171,9 @@ export function SideStripeCard({
           boxShadow: 3,
           position: "relative",
           overflow: "hidden",
+          fontSize: 12,
+          lineHeight: 1.3,
+          color: "rgba(255,255,255,0.82)",
           "&:hover": {
             boxShadow: 6,
             "& .animated-background-selector": {
@@ -233,20 +222,118 @@ export function SideStripeCard({
 
         <Stack
           direction="column"
-          spacing={1}
           sx={{
             padding: 2,
             position: "relative",
             zIndex: 1,
+            flex: 1,
+            height: "100%",
+            justifyContent: "space-between",
           }}
         >
-          {mainContent}
+          {mainContent ? (
+            mainContent
+          ) : (
+            <>
+              <Box sx={{ minWidth: 0 }}>
+                {typeof title === "string" ? (
+                  <Typography
+                    variant="inherit"
+                    sx={{
+                      color: "text.primary",
+                      wordBreak: "break-word",
+                      hyphens: "auto",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {title}
+                  </Typography>
+                ) : (
+                  title
+                )}
+
+                {description && (
+                  <Typography
+                    variant="inherit"
+                    sx={{
+                      ...STYLES,
+                      mt: 0.5,
+                      color: "text.primary",
+                      opacity: 0.8,
+                    }}
+                  >
+                    {description}
+                  </Typography>
+                )}
+              </Box>
+
+              {footer && (
+                <Box sx={{ alignSelf: "flex-end", mt: 0.5 }}>{footer}</Box>
+              )}
+            </>
+          )}
         </Stack>
       </Card>
     </Box>
   );
 }
 
+export function HeaderCard({
+  sx,
+  header,
+  children,
+  height = 140,
+  padding = 2,
+}) {
+  const theme = useTheme();
+  return (
+    <Card
+      sx={{
+        p: padding,
+        minWidth: 200,
+        maxWidth: 420,
+        height,
+        borderRadius: 3,
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: theme.palette.background.paper,
+        fontSize: 12,
+        lineHeight: 1.3,
+        color: "rgba(255,255,255,0.82)",
+        transition: "all 0.3s ease-in-out",
+        "&:hover": {
+          transform: "translateY(-4px)",
+          boxShadow: theme.shadows[8],
+          "&:before": { height: "100%" },
+        },
+        "&:before": {
+          content: '""',
+          width: "100%",
+          height: "40%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          background: `linear-gradient(135deg, ${alpha(
+            theme.palette.secondary.light,
+            0.2
+          )}, ${alpha(theme.palette.primary.main, 0.3)})`,
+          borderRadius: "8px 8px 0 0",
+          transition: "height 0.3s ease-in-out",
+        },
+        ...sx,
+      }}
+    >
+      <Stack
+        spacing={2}
+        sx={{ height: "100%", position: "relative", zIndex: 1 }}
+      >
+        {header}
+        {children}
+      </Stack>
+    </Card>
+  );
+}
+
 export function AvatarRoleCard({
   sx,
   leftContent,
@@ -264,13 +351,14 @@ export function AvatarRoleCard({
         borderRadius: 2,
         position: "relative",
         backgroundColor: theme.palette.background.paper,
+        fontSize: 12,
+        lineHeight: 1.3,
+        color: "rgba(255,255,255,0.82)",
         transition: "all 0.3s ease-in-out",
         "&:hover": {
           transform: "translateY(-4px)",
           boxShadow: theme.shadows[8],
-          "&:before": {
-            height: "100%",
-          },
+          "&:before": { height: "100%" },
         },
         "&:before": {
           content: '""',
@@ -291,11 +379,7 @@ export function AvatarRoleCard({
     >
       <Stack
         spacing={1}
-        sx={{
-          height: "100%",
-          position: "relative",
-          zIndex: 1,
-        }}
+        sx={{ height: "100%", position: "relative", zIndex: 1 }}
       >
         <Stack
           direction="row"

package/src/pages/Callback.jsx

@@ -1,5 +1,3 @@
-import { useEffect, useRef } from "react";
-
 import Page from "../layouts/Page";
 import React from "react";
 import config from "../config/config";
@@ -10,6 +8,8 @@ import { useContext } from "../ContextProvider/ContextProvider";
 import { useLocation } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 
+import { useEffect, useRef } from "react";
+
 function Callback() {
   const { project: appConfig, name, appId } = config();
   const projectBar = config().template?.projectBar;
@@ -28,12 +28,12 @@ function Callback() {
     const parsedQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
     const { code, error, error_description, state } = parsedQuery;
 
-    let provider;
+    let identityProvider;
     let stateData = {};
 
     if (state) {
       stateData = JSON.parse(decodeURIComponent(state));
-      provider = stateData.provider;
+      identityProvider = stateData.identityProvider;
     }
 
     if (error) {
@@ -59,7 +59,7 @@ function Callback() {
       google,
     };
 
-    const providerConfig = providerConfigs[provider];
+    const providerConfig = providerConfigs[identityProvider];
 
     if (!providerConfig) {
       console.error("Could not determine OAuth provider or redirect URI");
@@ -85,7 +85,7 @@ function Callback() {
         appId,
         code,
         redirectUri,
-        provider: provider,
+        identityProvider: identityProvider,
         grant_type: "authorization_code",
       })
       .then(({ data }) => {
@@ -93,10 +93,10 @@ function Callback() {
         const refreshToken = data.refreshToken;
         const userInfo = data.user;
 
-        storage.set(name, "accessToken", accessToken);
-        storage.set(name, "refreshToken", refreshToken);
+        storage.set("link", "accessToken", accessToken);
+        storage.set("link", "refreshToken", refreshToken);
         // TODO - update provider info
-        storage.set(name, "provider", provider);
+        storage.set("link", "identityProvider", identityProvider);
 
         dispatch({ type: "LOGIN", payload: { user: userInfo } });
 

package/src/pages/LoginPage.jsx

@@ -11,7 +11,10 @@ function LoginPage() {
   const navigate = useNavigate();
 
   function token() {
-    if (storage.get(name, "refreshToken") && storage.get(name, "accessToken")) {
+    if (
+      storage.get("link", "refreshToken") &&
+      storage.get("link", "accessToken")
+    ) {
       return true;
     } else {
       return false;

package/src/widgets/Login/Login.jsx

@@ -19,7 +19,10 @@ export default function Auth0LoginView() {
   const navigate = useNavigate();
 
   function token() {
-    if (storage.get(name, "refreshToken") && storage.get(name, "accessToken")) {
+    if (
+      storage.get("link", "refreshToken") &&
+      storage.get("link", "accessToken")
+    ) {
       return true;
     } else {
       return false;

package/src/widgets/LoginForm/LoginForm.jsx

@@ -1,17 +1,17 @@
-import { Box, Divider, Link as MuiLink, Typography } from "@mui/material";
-import React, { useState } from "react";
-
 import NucleoidLoginForm from "../../components/NucleoidLoginForm";
 import SocialLoginButtons from "../../components/SocialLoginButtons";
 import Stack from "@mui/material/Stack";
 import config from "../../config/config";
 
+import { Box, Divider, Link as MuiLink, Typography } from "@mui/material";
+import React, { useState } from "react";
+
 const handleOAuthLogin = (
   { redirectUri, authUrl, clientId, scope },
-  provider
+  identityProvider
 ) => {
   const state = JSON.stringify({
-    provider: provider,
+    identityProvider: identityProvider,
   });
   const encodedState = encodeURIComponent(state);
   window.location.href = `${authUrl}?client_id=${clientId}&scope=${scope}&response_type=code&redirect_uri=${redirectUri}&state=${encodedState}`;