> ## 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.

# Nl

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 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 Documentatie</p>
    </h1>

    <p className="mt-2 text-white">
      {'Waarmee kunnen we u helpen'+ (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',
        }}
          />

          Zoek documentatie, API's en meer...
        </button>
      </div>
    </div>
  </div>
</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'
}}
  >
    Snelle <span className="text-primary-dark">Links</span>
  </h2>

  <CardGroup cols={3}>
    {user?.group && (
            <Card title="Aan de slag" icon="power-off" href="/nl/docs/platform/introduction/getting_started"
                  horizontal={true}>
              Ga aan de slag met de Sensolus-oplossing
            </Card>)}

    {user?.group && (
            <Card title="Sensolus-platform" icon="display" iconType="solid"
                  href="/nl/docs/platform/introduction/general_nav_general_navigation"
                  horizontal={true}>
              Ontdek hoe het platform zakelijke inzichten biedt en hoe u het kunt configureren
            </Card>)}

    {user?.group && (
            <Card title="Sensolus AI" icon="brain" iconType="solid" href="/nl/docs/sensolusai/claudedesktop"
                  horizontal={true}>
              Ontdek hoe AI-tools kunnen worden ingezet in combinatie met het Sensolus-platform
            </Card>)}

    {user?.group && (
            <Card title="Apparaatconfiguratie" icon="display" iconType="solid"
                  href="/nl/docs/device-configuration/device-configuration-intro"
                  horizontal={true}>
              Trackers, sensoren en infrastructuurapparaten configureren.
            </Card>)}

    <Card title="Specificatiebladen en handleidingen" icon="desktop" href="/nl/docs/spec_sheets/hardware_overview" horizontal={true}>
      Specificatiebladen en installatiehandleidingen voor trackers, sensoren en andere apparaten.
    </Card>

    {user?.group && (
            <Card title="Sensolus mobiele app" icon="mobile" href="/nl/docs/mobile_app/mobile_app_overview" horizontal={true}>
              Informatie over de Sensolus mobiele app.
            </Card>)}

    {user?.group && (
            <Card title="Technologische achtergrond" icon="brain-circuit"
                  href="/nl/docs/technologybackground/localization/localization_for_connected_trackers" horizontal={true}>
              Diepgaande informatie over de technologie in onze apparaten.
            </Card>)}

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

    {user?.group && (
            <Card title="Release-informatie" icon="bolt" iconType="solid" href="/nl/docs/releases/release_notes" horizontal={true}>
              Blijf op de hoogte van nieuwe en bijgewerkte functies en apparaten en lees de laatste updates over onze diensten
            </Card>)}

    {(user?.group === "partner" || user?.group === "sensolus-internal") && (
            <Card title="Partner resource center" icon="handshake" iconType="solid"
                  href="/nl/docs/partner/partner_resource_center"
                  horizontal={true}>
              Alles wat commerciële partners moeten weten
            </Card>)}

    {user?.group === "sensolus-internal" && (
            <Card title="Sensolus intern" icon="lock" iconType="solid" color="red"
                  href="/nl/docs/sensolus_internal/internal_price_tools" horizontal={true}>
              Informatie uitsluitend voor Sensolus-medewerkers
            </Card>)}
  </CardGroup>
</div>