@canmingir/link 1.2.50 → 1.2.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.50",
+  "version": "1.2.52",
   "type": "module",
   "bin": {
     "link-server": "./server/server.ts"

package/src/http/index.js

@@ -40,6 +40,20 @@ instance.interceptors.response.use(
   async (error) => {
     publish("LOADED", { loading: false });
     const statusCode = error.response?.status;
+    const identityProvider = storage.get("link", "identityProvider");
+
+    if (statusCode === 500 && identityProvider === "DEMO") {
+      const token = storage.get("link", "accessToken");
+      try {
+        const decodedToken = jwtDecode(token);
+        if (decodedToken.exp * 1000 < Date.now()) {
+          return Promise.reject(error);
+        }
+      } catch (_) {
+        return Promise.reject(error);
+      }
+    }
+
     switch (statusCode) {
       case 400:
         publish("GLOBAL_MESSAGE_POSTED", {
@@ -78,7 +92,7 @@ instance.interceptors.response.use(
         break;
     }
     return Promise.reject(error);
-  }
+  },
 );
 
 export const fetcher = (url) => instance.get(url).then((res) => res.data);
@@ -128,26 +142,41 @@ const refreshInterceptor =
     : createAuthRefreshInterceptor.default;
 
 refreshInterceptor(instance, refreshAuthLogic, {
-  statusCodes: [401, 403],
-  shouldRefresh: () => {
-    const { name, base } = config();
+  statusCodes: [401, 403, 500],
+  pauseInstanceWhileRefreshing: true,
+  shouldRefresh: (error) => {
+    const { base } = config();
     const token = storage.get("link", "accessToken");
+    const identityProvider = storage.get("link", "identityProvider");
+    const statusCode = error.response?.status;
 
     if (!token) {
       window.location.href = `${window.location.origin}${base}/login`;
       return false;
     }
 
+if (identityProvider === "DEMO") {
+  if (statusCode !== 500) {
+    return true;
+  }
+
+  try {
+    const decodedToken = jwtDecode(token);
+    return decodedToken.exp * 1000 < Date.now();
+  } catch (_) {
+    // If we can't decode, attempt refresh once.
+    return true;
+  }
+}
+
+    if (statusCode === 500) {
+      return false;
+    }
+
     try {
       const decodedToken = jwtDecode(token);
       if (decodedToken.exp * 1000 < Date.now()) {
         return true;
-      } else {
-        publish("GLOBAL_MESSAGE_POSTED", {
-          status: true,
-          message: "UNAUTHORIZED",
-          severity: "warning",
-        });
       }
     } catch (err) {
       window.location.href = `${window.location.origin}${base}/login`;

package/src/http/user.js

@@ -43,7 +43,7 @@ instance.getUserDetails = async () => {
 
       if (isExpired) {
         console.log(
-          "Access token expired, refreshing before fetching user details..."
+          "Access token expired, refreshing before fetching user details...",
         );
         const { appId } = config();
         const projectId = storage.get("projectId");
@@ -54,12 +54,16 @@ instance.getUserDetails = async () => {
           appId,
           projectId,
           identityProvider,
+          ...(identityProvider === "DEMO" && {
+            username: "admin",
+            password: "admin",
+          }),
         });
 
         accessToken = data.accessToken;
         storage.set("link", "accessToken", accessToken);
         console.log(
-          "Access token refreshed successfully, now fetching user details"
+          "Access token refreshed successfully, now fetching user details",
         );
       }
     } catch (error) {
@@ -86,25 +90,91 @@ instance.getUserDetails = async () => {
 };
 
 instance.getPermittedUsers = async () => {
-  const userIds = [];
-  const refreshToken = await storage.get("link", "refreshToken");
+  const { appId } = config();
+  const projectId = storage.get("projectId");
+  const identityProvider = storage.get("link", "identityProvider");
+
   const response = await http.get("/permissions");
 
-  response.data.forEach((permission) => {
-    userIds.push(permission.userId);
-  });
-
-  const users = await Promise.all(
-    userIds.map(async (userId) => {
-      const response = await axios.get(
-        `https://api.github.com/user/${userId}`,
-        { headers: { Authorization: `Bearer ${refreshToken}` } }
-      );
-      return response.data;
-    })
-  );
-
-  return users;
+  const uniqueUserIds = [
+    ...new Set(
+      response.data
+        .filter((p) => p.appId === appId && p.projectId === projectId)
+        .map((p) => p.userId),
+    ),
+  ];
+
+  const UUID_REGEX =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+  if (identityProvider?.toUpperCase() === "GITHUB") {
+    const results = await Promise.allSettled(
+      uniqueUserIds.map(async (userId) => {
+        if (UUID_REGEX.test(userId)) {
+          return {
+            id: String(userId),
+            identityProvider,
+            name: String(userId),
+            displayName: null,
+            avatarUrl: `https://api.dicebear.com/7.x/bottts/svg?seed=${userId}`,
+            email: null,
+          };
+        }
+        const { data } = await axios.get(
+          `https://api.github.com/user/${userId}`,
+          { headers: { Accept: "application/vnd.github+json" } },
+        );
+        return {
+          id: String(data.id),
+          identityProvider: "GITHUB",
+          name: data.login,
+          displayName: data.name || null,
+          avatarUrl: data.avatar_url || null,
+          email: data.email || null,
+        };
+      }),
+    );
+
+    return results
+      .filter((r) => r.status === "fulfilled" && r.value !== null)
+      .map((r) => r.value);
+  }
+
+  if (identityProvider?.toUpperCase() === "DEMO") {
+    return [
+      {
+        id: "1001",
+        identityProvider: "DEMO",
+        name: "admin",
+        displayName: "Demo Admin",
+        avatarUrl: `https://api.dicebear.com/7.x/bottts/svg?seed=1001`,
+        email: "admin@demo.local",
+      },
+    ];
+  }
+
+  if (identityProvider?.toUpperCase() === "COGNITO") {
+    const accessToken = await storage.get("link", "accessToken");
+    let currentUserId = null;
+
+    try {
+      const decoded = jwtDecode(accessToken);
+      currentUserId = decoded.sub;
+    } catch (_) {}
+
+    return uniqueUserIds
+      .filter((id) => !UUID_REGEX.test(id))
+      .map((id) => ({
+        id: String(id),
+        identityProvider: "COGNITO",
+        name: id === currentUserId ? "You" : "Cognito User",
+        displayName: id === currentUserId ? "Cognito Admin" : null,
+        avatarUrl: `https://api.dicebear.com/7.x/bottts/svg?seed=${id}`,
+        email: null,
+      }));
+  }
+
+  return [];
 };
 
 export default instance;

package/src/layouts/DashboardLayout/header.jsx

@@ -46,11 +46,7 @@ export default function Header({ onOpenNav }) {
         </IconButton>
       )}
       {projectBar && <ProjectBar />}
-      {TopBar && (
-        <Box sx={{ flexGrow: 1, mx: 2 }}>
-          <TopBar />
-        </Box>
-      )}
+      {TopBar && <TopBar />}
 
       <Stack
         direction="row"

package/src/layouts/common/nav-toggle-button.jsx

@@ -26,7 +26,7 @@ export default function NavToggleButton({ sx, ...other }) {
       onClick={() =>
         settings.onUpdate(
           "themeLayout",
-          settings.themeLayout === "vertical" ? "mini" : "vertical"
+          settings.themeLayout === "vertical" ? "mini" : "vertical",
         )
       }
       sx={{
@@ -34,7 +34,7 @@ export default function NavToggleButton({ sx, ...other }) {
         top: 32,
         position: "fixed",
         left: NAV.W_VERTICAL - 12,
-        zIndex: 0,
+        zIndex: theme.zIndex.appBar + 1,
         border: `dashed 1px ${theme.palette.divider}`,
         ...bgBlur({ opacity: 0.48, color: theme.palette.background.default }),
         "&:hover": {

package/src/lib/Flow/connectors/DynamicConnector.jsx

@@ -1,7 +1,7 @@
-import { Box } from "@mui/material";
-
 import React, { useId, useLayoutEffect, useMemo, useState } from "react";
 
+import { Box } from "@mui/material";
+
 const DynamicConnector = ({
   containerEl,
   parentEl,
@@ -43,41 +43,48 @@ const DynamicConnector = ({
       const cRect = containerEl.getBoundingClientRect();
       const pRect = parentEl.getBoundingClientRect();
 
+      const scaleX = containerEl.offsetWidth
+        ? cRect.width / containerEl.offsetWidth || 1
+        : 1;
+      const scaleY = containerEl.offsetHeight
+        ? cRect.height / containerEl.offsetHeight || 1
+        : 1;
+
       let parentPoint;
       let childPoints = [];
 
       if (isHorizontal) {
         parentPoint = {
-          x: pRect.right - cRect.left,
-          y: pRect.top + pRect.height / 2 - cRect.top,
+          x: (pRect.right - cRect.left) / scaleX,
+          y: (pRect.top + pRect.height / 2 - cRect.top) / scaleY,
         };
 
         childPoints = childEls.map((el) => {
           if (!el) return { x: parentPoint.x + 100, y: parentPoint.y };
           const r = el.getBoundingClientRect();
           return {
-            x: r.left - cRect.left,
-            y: r.top + r.height / 2 - cRect.top,
+            x: (r.left - cRect.left) / scaleX,
+            y: (r.top + r.height / 2 - cRect.top) / scaleY,
           };
         });
       } else {
         parentPoint = {
-          x: pRect.left + pRect.width / 2 - cRect.left,
-          y: pRect.bottom - cRect.top,
+          x: (pRect.left + pRect.width / 2 - cRect.left) / scaleX,
+          y: (pRect.bottom - cRect.top) / scaleY,
         };
 
         childPoints = childEls.map((el) => {
           if (!el) return { x: parentPoint.x, y: parentPoint.y + 100 };
           const r = el.getBoundingClientRect();
           return {
-            x: r.left + r.width / 2 - cRect.left,
-            y: r.top - cRect.top,
+            x: (r.left + r.width / 2 - cRect.left) / scaleX,
+            y: (r.top - cRect.top) / scaleY,
           };
         });
       }
 
       setPoints({ parent: parentPoint, children: childPoints });
-      setDims({ w: cRect.width, h: cRect.height });
+      setDims({ w: cRect.width / scaleX, h: cRect.height / scaleY });
     };
 
     update();
@@ -95,7 +102,7 @@ const DynamicConnector = ({
       gradient: `gradient-${uniqueId}`,
       arrow: `arrow-${uniqueId}`,
     }),
-    [uniqueId]
+    [uniqueId],
   );
 
   const getPath = (from, to) => {

package/src/lib/Flow/core/Flow.jsx

@@ -1,10 +1,10 @@
-import FlowNode from "./FlowNode";
-import { useGraphOperations } from "../hooks/useGraphOperations";
-
 import { Box, alpha } from "@mui/material";
 import React, { useMemo, useState } from "react";
 import { assertLinkedGraph, buildTreeFromLinked } from "../utils/flowUtils";
 
+import FlowNode from "./FlowNode";
+import { useGraphOperations } from "../hooks/useGraphOperations";
+
 export const Flow = ({
   data,
   variant = "simple",
@@ -13,6 +13,7 @@ export const Flow = ({
   editable = false,
   onChange,
   height,
+  initialZoom,
 }) => {
   const [floatingNodes, setFloatingNodes] = useState([]);
 
@@ -65,6 +66,8 @@ export const Flow = ({
   return (
     <Box
       sx={{
+        height,
+        flexShrink: 0,
         backgroundImage: (theme) => `
                           radial-gradient(
                             ${alpha(theme.palette.divider, 0.08)} 1px,
@@ -86,6 +89,7 @@ export const Flow = ({
         onConnect={editable ? handleConnect : undefined}
         floatingNodes={floatingNodes}
         height={height}
+        initialZoom={initialZoom}
       />
     </Box>
   );

package/src/lib/Flow/core/FlowBoard.jsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from "react";
+
+import FlowBoardItem from "./FlowBoardItem";
+import FlowViewport from "./FlowViewport";
+import { SelectionProvider } from "../selection/SelectionContext";
+import { getBaseStyleForVariant } from "../styles";
+
+export const FlowBoard = ({
+  flows = [],
+  variant = "simple",
+  style,
+  plugin,
+  initialZoom = 1,
+  height = "100vh",
+  gap = 480,
+  onFlowPositionChange,
+}) => {
+  const baseStyle = getBaseStyleForVariant(variant);
+  const selectionColor = baseStyle.selectionColor ?? "#64748b";
+
+  const positionedFlows = useMemo(() => {
+    const count = flows.length;
+    return flows.map((flow, index) => {
+      const fallback = {
+        x: (index - (count - 1) / 2) * gap,
+        y: 0,
+      };
+      return {
+        flow,
+        id: flow?.id ?? index,
+        position: flow?.position ?? fallback,
+      };
+    });
+  }, [flows, gap]);
+
+  const mergedNodesById = useMemo(() => {
+    const merged = {};
+    for (const { flow } of positionedFlows) {
+      if (flow?.nodes) Object.assign(merged, flow.nodes);
+    }
+    return merged;
+  }, [positionedFlows]);
+
+  return (
+    <SelectionProvider>
+      <FlowViewport
+        selectionColor={selectionColor}
+        nodesById={mergedNodesById}
+        variant={variant}
+        style={style}
+        plugin={plugin}
+        height={height}
+        initialZoom={initialZoom}
+      >
+        {positionedFlows.map(({ flow, id, position }) => (
+          <FlowBoardItem
+            key={id}
+            flow={flow}
+            flowId={id}
+            label={flow?.label}
+            divider={flow?.divider}
+            position={position}
+            onPositionChange={
+              onFlowPositionChange
+                ? (pos) => onFlowPositionChange(id, pos)
+                : undefined
+            }
+            variant={flow?.variant ?? variant}
+            style={style}
+            plugin={plugin}
+          />
+        ))}
+      </FlowViewport>
+    </SelectionProvider>
+  );
+};
+
+export default FlowBoard;

package/src/lib/Flow/core/FlowBoardItem.jsx

@@ -0,0 +1,144 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { assertLinkedGraph, buildTreeFromLinked } from "../utils/flowUtils";
+
+import { Box } from "@mui/material";
+import FlowNodeView from "../nodes/FlowNodeView";
+
+const FlowBoardItem = ({
+  flow,
+  flowId,
+  position: initialPosition,
+  onPositionChange,
+  variant,
+  style,
+  plugin,
+  label,
+  divider,
+}) => {
+  const [position, setPosition] = useState(
+    () => initialPosition || { x: 0, y: 0 },
+  );
+
+  useEffect(() => {
+    if (initialPosition) setPosition({ ...initialPosition });
+  }, [initialPosition?.x, initialPosition?.y]);
+
+  const didDragRef = useRef(false);
+
+  const namespacedFlow = useMemo(() => {
+    if (flowId == null) return flow;
+    const prefix = `${flowId}::`;
+    const ns = (id) =>
+      typeof id === "string" && !id.startsWith(prefix) ? `${prefix}${id}` : id;
+
+    const nodes = {};
+    for (const [id, node] of Object.entries(flow?.nodes || {})) {
+      const nextArr = Array.isArray(node.next)
+        ? node.next.map((n) => (typeof n === "string" ? ns(n) : n))
+        : node.next != null
+          ? ns(node.next)
+          : undefined;
+      nodes[ns(id)] = {
+        ...node,
+        id: ns(id),
+        next: nextArr,
+        previous: node.previous != null ? ns(node.previous) : undefined,
+      };
+    }
+    const roots = Array.isArray(flow?.roots) ? flow.roots.map(ns) : flow?.roots;
+    return { ...flow, nodes, roots };
+  }, [flow, flowId]);
+
+  const { nodesById, roots } = useMemo(
+    () => assertLinkedGraph(namespacedFlow),
+    [namespacedFlow],
+  );
+
+  const treesData = useMemo(() => {
+    if (!roots?.length) return [];
+    return roots
+      .map((rootId) => buildTreeFromLinked(rootId, nodesById))
+      .filter(Boolean);
+  }, [nodesById, roots]);
+
+  const handleMouseDown = (e) => {
+    if (e.button !== 0) return;
+    if (e.target?.closest?.(".MuiCard-root") || e.target?.closest?.("button"))
+      return;
+
+    e.stopPropagation();
+    didDragRef.current = false;
+
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startPosition = { ...position };
+    let lastPosition = startPosition;
+
+    const onMove = (ev) => {
+      const dx = ev.clientX - startX;
+      const dy = ev.clientY - startY;
+      if (!didDragRef.current && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+        didDragRef.current = true;
+      }
+      lastPosition = { x: startPosition.x + dx, y: startPosition.y + dy };
+      setPosition(lastPosition);
+    };
+
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+      if (didDragRef.current) onPositionChange?.(lastPosition);
+    };
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  if (!treesData.length) return null;
+
+  return (
+    <Box
+      data-flow-id={label}
+      onMouseDown={handleMouseDown}
+      sx={{
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        cursor: "grab",
+        "&:active": { cursor: "grabbing" },
+      }}
+    >
+      {label != null && (
+        <Box
+          sx={{
+            position: "absolute",
+            top: -28,
+            left: 0,
+            fontSize: 12,
+            fontWeight: 600,
+            opacity: 0.6,
+            pointerEvents: "none",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {label}
+        </Box>
+      )}
+      {divider != null && <Box sx={{ width: "100%", mb: 1 }}>{divider}</Box>}
+      <Box sx={{ display: "flex", gap: 4, alignItems: "flex-start" }}>
+        {treesData.map((tree, idx) => (
+          <FlowNodeView
+            key={tree.id || `tree-${idx}`}
+            node={tree}
+            variant={variant}
+            style={style}
+            plugin={plugin}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default FlowBoardItem;

package/src/lib/Flow/core/FlowNode.jsx

@@ -17,6 +17,7 @@ const FlowNode = ({
   plugin,
   node,
   height,
+  initialZoom,
   ...props
 }) => {
   if (!isRoot) {
@@ -50,6 +51,7 @@ const FlowNode = ({
         style={style}
         plugin={plugin}
         height={height}
+        initialZoom={initialZoom}
       >
         {node && (
           <FlowNodeView

package/src/lib/Flow/core/FlowViewport.jsx

@@ -17,13 +17,14 @@ const FlowViewport = ({
   style,
   plugin,
   height = "100vh",
+  initialZoom = 1,
   sx = {},
   ...rest
 }) => {
   const clampZoom = (zoom) => Math.min(2.5, Math.max(0.25, zoom));
 
   const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
+  const [zoom, setZoom] = useState(initialZoom);
   const [isDragging, setIsDragging] = useState(false);
   const [selectionBox, setSelectionBox] = useState(null);
   const [shouldCenter, setShouldCenter] = useState(true);
@@ -291,7 +292,7 @@ const FlowViewport = ({
       onContextMenu={(e) => e.preventDefault()}
       sx={{
         width: "100%",
-        height: "100vh",
+        height: height,
         overflow: "hidden",
         bgcolor: "none",
         cursor: isDragging ? "grabbing" : "default",

package/src/lib/Flow/index.js

@@ -1 +1,2 @@
 export { default as Flow } from "./core/Flow";
+export { default as FlowBoard } from "./core/FlowBoard";

package/src/lib/index.js

@@ -23,7 +23,7 @@ export { default as useTable } from "./useTable/useTable";
 export { default as useChart } from "./useChart/useChart";
 
 export { default as Flow } from "./Flow/core/Flow";
-
+export { default as FlowBoard } from "./Flow/core/FlowBoard";
 export {
   HeaderCard,
   MediaAvatarCard,

package/src/widgets/SettingsDialog.jsx

@@ -1,10 +1,3 @@
-import Iconify from "../components/Iconify";
-import config from "../config/config";
-import { useEvent } from "@nucleoidai/react-event";
-import useSettings from "../hooks/useSettings";
-import { useSettingsContext } from "../components/settings/context";
-import { useUser } from "../hooks/use-user";
-
 import {
   Avatar,
   Box,
@@ -30,6 +23,13 @@ import {
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
+import Iconify from "../components/Iconify";
+import config from "../config/config";
+import { useEvent } from "@nucleoidai/react-event";
+import useSettings from "../hooks/useSettings";
+import { useSettingsContext } from "../components/settings/context";
+import { useUser } from "../hooks/use-user";
+
 let pkg = {
   name: "",
   version: "",
@@ -173,7 +173,7 @@ function SettingsDialog({ handleClose, open }) {
             color: "white",
             minHeight: 600,
           },
-        }
+        },
       }}
     >
       <DialogContent>
@@ -211,16 +211,24 @@ const Permission = () => {
 
   useEffect(() => {
     getPermittedUsers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [event, event2]);
 
   return (
-    <Stack direction="column" spacing={2} sx={{
-      p: 2
-    }}>
+    <Stack
+      direction="column"
+      spacing={2}
+      sx={{
+        p: 2,
+      }}
+    >
       <Typography variant="h6">Users</Typography>
-      <Typography variant="subtitle2" sx={{
-        color: "text.secondary"
-      }}>
+      <Typography
+        variant="subtitle2"
+        sx={{
+          color: "text.secondary",
+        }}
+      >
         Users with access to the project.
       </Typography>
       <List>
@@ -238,7 +246,7 @@ const Permission = () => {
             }}
           >
             <ListItemAvatar>
-              <Avatar src={user.avatar_url} alt={user.name} />
+              <Avatar src={user.avatarUrl} alt={user.name} />
             </ListItemAvatar>
             <ListItemText primary={user.name} />
             <ListItemSecondaryAction>
@@ -306,13 +314,20 @@ const Settings = () => {
   };
 
   return (
-    <Stack direction="column" spacing={2} sx={{
-      p: 2
-    }}>
+    <Stack
+      direction="column"
+      spacing={2}
+      sx={{
+        p: 2,
+      }}
+    >
       <Typography variant="h6">Settings</Typography>
-      <Typography variant="subtitle2" sx={{
-        color: "text.secondary"
-      }}>
+      <Typography
+        variant="subtitle2"
+        sx={{
+          color: "text.secondary",
+        }}
+      >
         Configure your application settings.
       </Typography>
       <List>
@@ -373,9 +388,13 @@ const About = () => {
   const description = pkg.description;
 
   return (
-    <Stack direction="column" spacing={2} sx={{
-      p: 2
-    }}>
+    <Stack
+      direction="column"
+      spacing={2}
+      sx={{
+        p: 2,
+      }}
+    >
       <Box
         sx={{
           p: 3,
@@ -386,9 +405,13 @@ const About = () => {
             "linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01))",
         }}
       >
-        <Stack direction="row" spacing={2.5} sx={{
-          alignItems: "center"
-        }}>
+        <Stack
+          direction="row"
+          spacing={2.5}
+          sx={{
+            alignItems: "center",
+          }}
+        >
           <Avatar
             src={iconSrc}
             variant="rounded"
@@ -404,9 +427,12 @@ const About = () => {
           </Avatar>
 
           <Box sx={{ flex: 1, minWidth: 0 }}>
-            <Typography variant="h5" sx={{
-              fontWeight: 600
-            }}>
+            <Typography
+              variant="h5"
+              sx={{
+                fontWeight: 600,
+              }}
+            >
               {appName.toUpperCase()}
             </Typography>
 
@@ -416,8 +442,9 @@ const About = () => {
                 sx={{
                   color: "text.secondary",
                   mt: 0.5,
-                  maxWidth: 520
-                }}>
+                  maxWidth: 520,
+                }}
+              >
                 {description}
               </Typography>
             )}
@@ -460,9 +487,12 @@ const About = () => {
             textAlign: "center",
           }}
         >
-          <Typography variant="caption" sx={{
-            color: "text.secondary"
-          }}>
+          <Typography
+            variant="caption"
+            sx={{
+              color: "text.secondary",
+            }}
+          >
             © 2026 greycollar.ai. All rights reserved.
           </Typography>
         </Box>
@@ -473,15 +503,20 @@ const About = () => {
 
 const InfoRow = ({ label, value, link }) => {
   return (
-    <Stack direction="row" spacing={1.5} sx={{
-      alignItems: "center"
-    }}>
+    <Stack
+      direction="row"
+      spacing={1.5}
+      sx={{
+        alignItems: "center",
+      }}
+    >
       <Typography
         variant="body2"
         sx={{
           color: "text.secondary",
-          minWidth: 110
-        }}>
+          minWidth: 110,
+        }}
+      >
         {label}
       </Typography>
       {link ? (