> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mertani.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Mertani Docs

> Panduan dashboard dan pelajari cara menggunakan Dashboard Mertani mulai dari login, monitoring, hingga pengelolaan data.

export const StatCard = ({icon, label, unit, value, points, minv, maxv}) => <div className="mtn-card rounded-xl border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4" data-statcard={label} data-min={minv} data-max={maxv}>
    <div className="flex items-center justify-between text-xs text-gray-500 dark:text-zinc-500 mb-3">
      <div className="flex items-center gap-2">
        <span className="mtn-brand-text">{icon}</span>
        <span>{label}</span>
      </div>
      <span className="mtn-pulse inline-block w-2 h-2 rounded-full" data-pulse={label} />
    </div>
    <div className="mtn-mono flex items-baseline gap-1 mb-3">
      <span className="mtn-value text-2xl font-medium text-gray-900 dark:text-zinc-50" data-statcard-value>{value}</span>
      <span className="text-xs text-gray-500 dark:text-zinc-500">{unit}</span>
    </div>
    <svg className="mtn-spark" viewBox="0 0 120 30" preserveAspectRatio="none">
      <g className="mtn-graph-wrap">
        <polyline fill="none" strokeWidth="2" className="mtn-trace" data-trace={label} />
      </g>
    </svg>
  </div>;

export const WhyCard = ({tag, title, desc}) => <div className="rounded-xl border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6">
    <span className="mtn-mono inline-block text-xs uppercase tracking-wide mtn-brand-text border border-gray-200 dark:border-zinc-800 rounded-full px-3 py-1 mb-4">
      {tag}
    </span>
    <h3 className="font-medium text-gray-900 dark:text-zinc-50 mb-2">{title}</h3>
    <p className="text-sm text-gray-500 dark:text-zinc-500">{desc}</p>
  </div>;

export const ParamIcon = ({d}) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="mtn-brand-text mb-3">
    <path d={d} stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;

export const LiveCards = () => {
  if (typeof window === 'undefined' || window._liveCardsLoaded) return null;
  window._liveCardsLoaded = true;
  (function () {
    var S = {}, C = {};
    function y(v, a) {
      return 25 - (v - a.min) / (a.max - a.min) * 20;
    }
    function p(A, a) {
      var s = '';
      for (var i = 0; i < A.length; i++) {
        if (i > 0) s += ' ';
        s += i * 15 + ',' + y(A[i], a).toFixed(1);
      }
      return s;
    }
    function r(q) {
      q.forEach(function (e) {
        var l = e.getAttribute('data-statcard'), a = C[l], v = S[l];
        if (!a || !v) return;
        var ve = e.querySelector('[data-statcard-value]');
        if (ve) ve.textContent = v[v.length - 1].toFixed(a.dec);
        var pt = p(v, a), pl = e.querySelector('.mtn-trace');
        var wrap = e.querySelector('.mtn-graph-wrap');
        if (wrap && pl) {
          wrap.style.transition = 'none';
          wrap.style.transform = 'translateX(0)';
          void wrap.offsetWidth;
          wrap.style.transition = 'transform 0.25s ease';
          wrap.style.transform = 'translateX(-15px)';
          setTimeout(function () {
            pl.setAttribute('points', pt);
            wrap.style.transition = 'none';
            wrap.style.transform = 'translateX(0)';
          }, 240);
        } else if (pl) {
          pl.setAttribute('points', pt);
        }
        var pulse = e.querySelector('.mtn-pulse');
        if (pulse) {
          pulse.animate([{
            opacity: 1
          }, {
            opacity: 0
          }], {
            duration: 500,
            fill: "forwards"
          });
        }
      });
    }
    function t() {
      var q = document.querySelectorAll('[data-statcard]');
      if (!q.length) return setTimeout(t, 100);
      q.forEach(function (e) {
        var l = e.getAttribute('data-statcard'), mi = parseFloat(e.getAttribute('data-min')), ma = parseFloat(e.getAttribute('data-max'));
        if (isNaN(mi) || isNaN(ma)) return;
        C[l] = {
          min: mi,
          max: ma,
          dec: ma - mi < 10 ? 1 : 0
        };
        var v = [], x = (mi + ma) / 2;
        for (var i = 0; i < 9; i++) {
          x += (Math.random() - 0.5) * (ma - mi) * 0.3;
          x = Math.max(mi, Math.min(ma, x));
          v.push(x);
        }
        S[l] = v;
      });
      r(q);
      setInterval(function () {
        var L = Object.keys(S);
        for (var k = 0; k < L.length; k++) {
          var a = C[L[k]], v = S[L[k]], d = 0.35;
          if (Math.random() > 0.9) d *= 3;
          if (Math.random() > 0.5) d *= -1;
          var x = v[v.length - 1] + Math.random() * d * (a.max - a.min);
          v.push(Math.max(a.min, Math.min(a.max, x)));
          v.shift();
        }
        r(document.querySelectorAll('[data-statcard]'));
      }, 1000);
    }
    t();
  })();
  return null;
};

<div className="px-4 pt-16 pb-12 lg:pt-24 max-w-6xl mx-auto">
  <div className="grid lg:grid-cols-2 gap-12 items-center">
    <div>
      <h1 className="mtn-display text-4xl lg:text-5xl font-semibold text-gray-900 dark:text-zinc-50 tracking-tight leading-[1.1] mb-5">
        Dokumentasi resmi <span className="mtn-brand-text">platform</span> Mertani.
      </h1>

      <p className="text-lg text-gray-500 dark:text-zinc-500 max-w-lg mb-8">
        Panduan lengkap untuk Dashboard, Mobile App, dan REST API Mertani. Pelajari autentikasi, endpoint API, integrasi perangkat IoT, serta contoh implementasi untuk mempercepat pengembangan aplikasi Anda.
      </p>

      <div className="flex flex-wrap gap-3 mb-8">
        <a href="/docs/dashboard/overview-dashboard" className="mtn-brand-bg text-white text-sm font-medium rounded-lg px-5 py-3">
          Panduan Dashboard →
        </a>

        <a href="/docs/api-references/started-apireference" className="mtn-brand-border text-sm font-medium text-gray-900 dark:text-zinc-50 border border-gray-200 dark:border-zinc-800 rounded-lg px-5 py-3">
          API Reference
        </a>
      </div>

      <p className="text-xs text-gray-500 dark:text-zinc-500">
        Dipakai oleh instansi & industri di seluruh Indonesia.
      </p>
    </div>

    <div className="rounded-2xl border border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-950 p-4">
      <div className="flex items-center justify-between pb-3 mb-3 border-b border-gray-200 dark:border-zinc-800">
        <span className="mtn-mono text-xs mtn-brand-text flex items-center gap-1.5">
          <span className="mtn-live-dot inline-block w-1.5 h-1.5 rounded-full" />

          LIVE
        </span>

        <span className="mtn-mono text-xs text-gray-500 dark:text-zinc-500">Mertani Telemetry</span>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <StatCard icon="☁" label="Weather · AWS" unit="°C" value="28.4" minv={15} maxv={40} points="0,20 15,18 30,22 45,14 60,17 75,10 90,15 105,9 120,13" />

        <StatCard icon="☂" label="Rainfall · ARR" unit="mm/jam" value="4.2" minv={0} maxv={20} points="0,26 15,24 30,25 45,12 60,20 75,8 90,18 105,11 120,16" />

        <StatCard icon="≋" label="Water Level · AWLR" unit="cm" value="142" minv={100} maxv={200} points="0,15 15,17 30,14 45,18 60,15 75,16 90,13 105,15 120,14" />

        <StatCard icon="◍" label="Air Quality · AQMS" unit="µg/m³" value="36" minv={0} maxv={100} points="0,12 15,14 30,11 45,16 60,13 75,15 90,10 105,13 120,11" />
      </div>

      <p className="text-center text-xs text-gray-500 dark:text-zinc-500 mt-3">
        Visualisasi data aktual tersedia melalui

        {" "}

        <a href="https://app.mertani.co.id" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
          Dashboard
        </a>

        {" "}

        &

        {" "}

        <a href="/docs/api-references/started-apireference" rel="noopener noreferrer" className="text-blue-600 hover:underline">
          API
        </a>

        {" "}
      </p>
    </div>
  </div>
</div>

<LiveCards />

<div className="px-4 py-16 max-w-6xl mx-auto">
  <span className="mtn-mono mtn-brand-text text-xs uppercase tracking-wide mb-2 block">Kenapa Mertani</span>

  <h2 className="mtn-display text-2xl lg:text-3xl font-semibold text-gray-900 dark:text-zinc-50 tracking-tight mb-8 max-w-lg">
    Semua yang Anda butuhkan untuk mulai terintegrasi.
  </h2>

  <div className="grid sm:grid-cols-3 gap-4">
    <WhyCard tag="Integrasi" title="Data terintegrasi" desc="Menyatukan data cuaca, debit, kualitas udara, dan kualitas air ke satu dashboard, tidak lagi tersebar di banyak sistem." />

    <WhyCard tag="Real-time" title="Monitoring 24/7" desc="Kondisi lapangan terpantau langsung, sehingga anomali dapat terdeteksi sebelum menjadi masalah besar." />

    <WhyCard tag="Keputusan" title="Berbasis data" desc="Setiap insight didukung data historis dan real-time untuk perencanaan dan evaluasi yang lebih akurat." />
  </div>
</div>

<div className="px-4 py-16 max-w-6xl mx-auto">
  <span className="mtn-mono mtn-brand-text text-xs uppercase tracking-wide mb-2 block">Jelajahi Dokumentasi</span>

  <h2 className="mtn-display text-2xl lg:text-3xl font-semibold text-gray-900 dark:text-zinc-50 tracking-tight mb-8 max-w-lg">
    Cari dokumentasi berdasarkan kebutuhan Anda.
  </h2>

  <Columns cols={3}>
    <Card title="Weather" icon="cloud" href="/docs/dashboard/overview-dashboard">
      Automatic Weather Station berupa suhu, kelembapan, kecepatan & arah angin, dan parameter lain.
    </Card>

    <Card title="Rainfall" icon="droplet" href="/docs/dashboard/overview-dashboard">
      Automatic Rainfall Recorder berisi intensitas dan akumulasi curah hujan.
    </Card>

    <Card title="Water Level" icon="water" href="/docs/dashboard/overview-dashboard">
      Automatic Water Level Recorder mengukur muka air sungai, kanal & tanah gambut.
    </Card>

    <Card title="Water Quality" icon="flask" href="/docs/dashboard/overview-dashboard">
      Water Quality Monitoring System terdiri dari pH, TDS, DO, dan parameter lain.
    </Card>

    <Card title="Air Quality" icon="wind" href="/docs/dashboard/overview-dashboard">
      Air Quality Monitoring System terdiri dari PM2.5, PM10, dan polutan udara lain.
    </Card>

    <Card title="API Reference" icon="code" href="/docs/api-references/started-apireference">
      Endpoint lengkap untuk menarik data device secara programatik.
    </Card>
  </Columns>
</div>

<div className="px-4 py-16 max-w-6xl mx-auto">
  <div className="grid lg:grid-cols-2 gap-10 items-center">
    <div>
      <span className="mtn-mono mtn-brand-text text-xs uppercase tracking-wide mb-2 block">Quickstart</span>

      <h2 className="mtn-display text-2xl lg:text-3xl font-semibold text-gray-900 dark:text-zinc-50 tracking-tight mb-4">
        Integrasikan data sensor dalam hitungan menit.
      </h2>

      <p className="text-gray-500 dark:text-zinc-500 mb-6">
        Panggil endpoint device untuk menarik data terbaru, lalu alirkan ke sistem, dashboard, atau model analitik Anda sendiri.
      </p>

      <a href="/docs/api-references/started-apireference" className="mtn-brand-bg inline-block text-white text-sm font-medium rounded-lg px-5 py-3">
        Baca API Reference →
      </a>
    </div>

    <div>
      ```bash Get Device Sensor Data theme={null}
      curl --request GET \
        --url https://app.mertani.co.id/external/v1/devices/Y789/data \
        --header 'Authorization: Basic <encoded-value>'

      # Response
      {
          "device_id": "Y789",
          "timestamp": "2025-11-20T00:00:00+07:00",
          "sensors": [
              { "id": "Y789-flLev", "value": 25.5, "unit": "cm" },
              { "id": "Y789-arHum", "value": 80, "unit": "%" },
              { "id": "Y789-arTemp", "value": 32, "unit": "°C" }
          ]
      }
      ```
    </div>
  </div>
</div>

<div className="px-4 py-16 max-w-6xl mx-auto relative mtn-feature-section overflow-hidden">
  <div className="mtn-grid-bg absolute inset-0 pointer-events-none" />

  <div className="rounded-2xl border border-gray-200 dark:border-zinc-800 bg-gray-50/80 dark:bg-zinc-950/80 backdrop-blur-sm px-6 py-14 text-center relative">
    <img src="https://mintcdn.com/mertani/QKCSIJ_vjKyFoAyf/logo/logo-light.svg?fit=max&auto=format&n=QKCSIJ_vjKyFoAyf&q=85&s=00ba5a4fe38c602042ce650a2f593467" alt="Mertani" className="block dark:hidden h-7 mx-auto mb-5" width="84" height="20" data-path="logo/logo-light.svg" />

    <img src="https://mintcdn.com/mertani/QKCSIJ_vjKyFoAyf/logo/logo-dark.svg?fit=max&auto=format&n=QKCSIJ_vjKyFoAyf&q=85&s=972e6b72af82b7f936fb67d55e5381c2" alt="Mertani" className="hidden dark:block h-7 mx-auto mb-5" width="84" height="20" data-path="logo/logo-dark.svg" />

    <h2 className="mtn-display text-2xl lg:text-3xl font-semibold text-gray-900 dark:text-zinc-50 tracking-tight mb-2">
      Butuh bantuan integrasi?
    </h2>

    <p className="text-gray-500 dark:text-zinc-500 mb-6">
      Tim Mertani siap membantu kebutuhan monitoring lingkungan Anda.
    </p>

    <div className="flex flex-wrap justify-center gap-3 mb-6">
      <a href="https://api.whatsapp.com/send/?phone=6285173373817&text=Nama%3A%0AInstansi%3A%0AEmail%3A%0AKebutuhan+Saya%3A%0A&type=phone_number&app_absent=0" className="mtn-brand-bg text-white text-sm font-medium rounded-lg px-5 py-3">
        Hubungi via WhatsApp
      </a>

      <a href="mailto:contact@mertani.co.id" className="mtn-brand-border text-sm font-medium text-gray-900 dark:text-zinc-50 border border-gray-200 dark:border-zinc-800 rounded-lg px-5 py-3">
        [contact@mertani.co.id](mailto:contact@mertani.co.id)
      </a>
    </div>

    <p className="text-xs text-gray-500 dark:text-zinc-500">
      PT Merapi Tani Instrumen · Sleman, Yogyakarta · (0274) 2888 087
    </p>
  </div>
</div>