> ## Documentation Index
> Fetch the complete documentation index at: https://doc.sensolus.com/llms.txt
> Use this file to discover all available pages before exploring further.

export const HeaderBadge = ({type, checkDms = false}) => {
  function addGroupBadge(h1Id) {
    const h1Element = document.getElementById(h1Id);
    if (!h1Element) {
      console.error(`Element with ID "${h1Id}" not found`);
      return;
    }
    if (h1Element.querySelector('.header-badge')) {
      console.warn('Header badge already exists on this element');
      return;
    }
    const badge = document.createElement('span');
    badge.className = 'header-badge';
    var badgeText;
    var badgeColor;
    switch (type) {
      case 'public':
        badgeText = 'Public';
        badgeColor = '#858585ff';
        break;
      case 'end-user':
        badgeText = 'End-User';
        badgeColor = '#0071a1';
        break;
      case 'multi-org':
        badgeText = 'Multi-Org';
        badgeColor = '#0071a1';
        break;
      case 'partner':
        badgeText = 'Partner';
        badgeColor = '#0071a1';
        break;
      case 'partner-pricing-eu':
        badgeText = 'Partner-EU';
        badgeColor = '#0071a1';
        break;
      case 'partner-pricing-us':
        badgeText = 'Partner-US';
        badgeColor = '#0071a1';
        break;
      case 'partner-pricing-world':
        badgeText = 'Partner-World';
        badgeColor = '#0071a1';
        break;
      case 'sensolus-internal':
        badgeText = 'Sensolus only';
        badgeColor = '#ffa858';
        break;
      default:
        badgeText = type;
        badgeColor = '#ffa858';
    }
    badge.textContent = badgeText;
    badge.style.cssText = `
        background-color: ${badgeColor};
        color: white;
        padding: 0.3em 0.8em 0.3em 0.8em;
        border-radius: 6px;
        font-size: 0.4em;
        margin-left: 20px;
        vertical-align: middle;
    `;
    h1Element.appendChild(badge);
  }
  function checkDocumentationServerAccess(type) {
    fetch('https://cloud.sensolus.com/documentation/user', {
      method: 'GET',
      headers: {
        'Accept': 'application/json'
      },
      credentials: 'include'
    }).then(response => {
      if (!response.ok) {
        console.error('Could not fetch documentation server user:', response);
      }
      return response.json();
    }).then(user => {
      const compatibleGroups = {
        "NORMAL": ["end-user", "public"],
        "PUBLIC": ["public"],
        "PARTNER": ["partner", "public", "end-user", "multi-org"],
        "MULTI_ORG": ["multi-org", "public", "end-user"],
        "SYSTEM": ["public", "end-user", "multi-org", "partner", "sensolus-internal"]
      };
      const allowedGroups = compatibleGroups[user.orgType] || [];
      const compatiblePriceListGroups = {
        "EU": ["partner-pricing-eu"],
        "US": ["partner-pricing-us"],
        "WORLD": ["partner-pricing-eu", "partner-pricing-us", "partner-pricing-world"]
      };
      allowedGroups.push(...compatiblePriceListGroups[user.orgType === "SYSTEM" ? "WORLD" : user.priceList] || []);
      if (!allowedGroups.includes(type)) {
        if (user.orgType === 'PUBLIC') {
          window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
        } else {
          window.location.href = '/logout';
        }
      }
      addGroupBadge("page-title");
    }).catch(error => {
      console.error('Could not fetch documentation server user:', error);
      addGroupBadge("page-title");
    });
  }
  useEffect(() => {
    console.info("adding badge");
    addGroupBadge("page-title");
  });
  useEffect(() => {
    console.info("checking server access for type" + type);
    if (type && type !== 'public' && checkDms) {
      checkDocumentationServerAccess(type);
    }
  }, [type]);
  return <></>;
};

export const whatsNewBannerStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: '0.75rem',
  padding: '0.75rem 1.25rem',
  borderRadius: '0.75rem',
  border: '1px solid rgba(33, 40, 81, 0.15)',
  backgroundColor: 'rgba(33, 40, 81, 0.04)',
  textDecoration: 'none',
  color: 'inherit'
};

export const whatsNewBadgeStyle = {
  fontSize: '0.7rem',
  fontWeight: 600,
  letterSpacing: '0.05em',
  padding: '0.15rem 0.5rem',
  borderRadius: '999px',
  backgroundColor: '#212851',
  color: 'white'
};

export function openSearch() {
  document.getElementById('search-bar-entry').click();
}

<div className="relative w-full flex items-center justify-center" style={{height: '24rem', overflow: 'hidden'}}>
  <div
    id="background-div"
    class="absolute inset-0"
    style={{
height: "24rem",
backgroundColor: "#212851",
backgroundSize: "cover",
backgroundPosition: "center"
}}
  />

  <div
    style={{
position: 'absolute',
textAlign: 'center',
padding: '0 1rem',
maxWidth: '100%',
left: '50%',
transform: 'translateX(-50%)'
}}
  >
    <h1
      className="text-white"
      style={{
    marginTop: '4rem',
    fontSize: '42px',
    fontWeight: 500,
    margin: '0',
    whiteSpace: 'nowrap',
    textAlign: 'center'
  }}
    >
      <p id="page-title">Sensolus Documentation</p>
    </h1>

    <p className="mt-2 text-white">
      {'What can we help you with' + (user?.firstName ? ', ' + user?.firstName : '') + (user?.lastName ? ' ' + user?.lastName : '') + '?'}
    </p>

    <div className="flex items-center justify-center">
      <div className="flex items-center justify-center" style={{width: '100%'}}>
        <button
          type="button"
          className="hidden w-full lg:flex items-center text-sm leading-6 rounded-full py-2 pl-3 pr-3 shadow-sm text-gray-400 dark:text-white/50 bg-background-light dark:bg-background-dark dark:brightness-[1.1] dark:ring-1 dark:hover:brightness-[1.25] ring-1 ring-gray-400/20 hover:ring-gray-600/25 dark:ring-gray-600/30 dark:hover:ring-gray-500/30 focus:outline-primary"
          id="home-search-entry"
          style={{
        marginTop: '2rem',
        maxWidth: '100rem',
        width: '90%',
        margin: '2rem auto 0'
      }}
          onClick={openSearch}
        >
          <svg
            className="h-4 w-4 ml-1.5 flex-none bg-primary-light hover:bg-gray-600 dark:bg-white/50 dark:hover:bg-white/70"
            style={{
          marginRight: '0.5rem',
          maskImage:
            'url("https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg")',
          maskRepeat: 'no-repeat',
          maskPosition: 'center center',
        }}
          />

          Search docs, APIs, and more...
        </button>
      </div>
    </div>
  </div>
</div>

{(
<div style={{
maxWidth: '70rem',
margin: '2rem auto 0',
paddingLeft: '1.25rem',
paddingRight: '1.25rem',
display: 'flex',
flexDirection: 'column',
gap: '0.75rem'
}}>
{user?.group === "sensolus-internal" && (
  <a href="/docs/sensolusai/skills" style={whatsNewBannerStyle}>
    <span style={whatsNewBadgeStyle}>NEW</span>
    <span style={{fontWeight: 500}}>Using and creating Claude skills</span>
    <span style={{opacity: 0.6, marginLeft: 'auto'}}>→</span>
  </a>)}
{user?.group === "sensolus-internal" && (
  <a href="/docs/sensolus_internal/online_editing/editing_for_developers#quickstart-dev-server-in-a-subfolder"
     style={whatsNewBannerStyle}>
    <span style={whatsNewBadgeStyle}>NEW</span>
    <span style={{fontWeight: 500}}>Quicker page authoring improvement for documentation editors</span>
    <span style={{opacity: 0.6, marginLeft: 'auto'}}>→</span>
  </a>
)}
</div>
)}

<div
  style={{
marginTop: '0rem',
marginBottom: '8rem',
maxWidth: '70rem',
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: '1.25rem',
paddingRight: '1.25rem'
}}
>
  <h2
    className="text-gray-900 dark:text-gray-200 text-center"
    style={{
  marginTop: '2rem',
  marginBottom: '1rem',
  fontWeight: '500',
  fontSize: '2rem'
}}
  >
    Quick <span className="text-primary-dark">Links</span>
  </h2>

  <CardGroup cols={3}>
    {user?.group && (
            <Card title="Getting Started" icon="power-off" href="/docs/platform/introduction/getting_started"
                  horizontal={true}>
              Get started with the Sensolus solution
            </Card>)}

    {user?.group && (
            <Card title="Sensolus platform" icon="display" iconType="solid"
                  href="/docs/platform/introduction/general_nav_general_navigation"
                  horizontal={true}>
              Learn how the platform can deliver business insights and how you can configure it
            </Card>)}

    {user?.group && (
            <Card title="Sensolus AI" icon="brain" iconType="solid" href="/docs/sensolusai/claudedesktop"
                  horizontal={true}>
              See how AI tools can be leveraged in combination with the Sensolus platform
            </Card>)}

    {user?.group && (
            <Card title="Device configuration" icon="display" iconType="solid"
                  href="/docs/device-configuration/device-configuration-intro"
                  horizontal={true}>
              How to configure trackers, sensors and infrastructure devices.
            </Card>)}

    <Card title="Spec sheets and manuals" icon="desktop" href="/docs/spec_sheets/hardware_overview" horizontal={true}>
      Spec sheets, installation manuals for trackers, sensors and other devices.
    </Card>

    {user?.group && (
            <Card title="Sensolus Mobile app" icon="mobile" href="/docs/mobile_app/mobile_app_overview" horizontal={true}>
              Information on the Sensolus mobile app.
            </Card>)}

    {user?.group && (
            <Card title="Technology Background" icon="brain-circuit"
                  href="docs/technologybackground/localization/localization_for_connected_trackers" horizontal={true}>
              In-depth information about the technology used in our devices.
            </Card>)}

    {user?.group && (
            <Card title="Integration" icon="webhook" href="/docs/integration/integration_intro" horizontal={true}>
              Integration
            </Card>)}

    {user?.group && (
            <Card title="Release notes" icon="bolt" iconType="solid" href="/docs/releases/release_notes" horizontal={true}>
              Stay up to date with the new and updated features and devices and read the latest updates on our services
            </Card>)}

    {(user?.group === "partner" || user?.group === "sensolus-internal") && (
            <Card title="Partner resource center" icon="handshake" iconType="solid"
                  href="/docs/partner/partner_resource_center"
                  horizontal={true}>
              Everything commercial partners need to know
            </Card>)}

    {user?.group === "sensolus-internal" && (
            <Card title="Sensolus Internals" icon="lock" iconType="solid" color="red"
                  href="/docs/sensolus_internal/internal_price_tools" horizontal={true}>
              Information for Sensolus internal people only
            </Card>)}
  </CardGroup>
</div>