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

# Set up your first building in EnerG

> Connect a data source, map meters, set a baseline, and review your first dashboard in under 30 minutes.

export const TutorialStep = ({tutorialId, id, number, title, stepIds = "", subStepIds = "", mediaLabel, children}) => {
  const progressEvent = "kode-tutorial-progress";
  const brandBlues = ["#015BFA", "#3A9AFF", "#7BB3FF", "#C5DBFF", "#E8F1FF"];
  const [complete, setComplete] = useState(false);
  const parseIds = value => {
    if (Array.isArray(value)) return value;
    if (typeof value === "string" && value.length > 0) {
      return value.split(",").map(stepId => stepId.trim()).filter(Boolean);
    }
    return [];
  };
  const hasSubsteps = parseIds(subStepIds).length > 0;
  const readProgress = () => {
    if (typeof window === "undefined") return {};
    try {
      return JSON.parse(localStorage.getItem(`kode-tutorial:${tutorialId}`) || "{}");
    } catch {
      return {};
    }
  };
  const writeProgress = next => {
    if (typeof window === "undefined") return;
    localStorage.setItem(`kode-tutorial:${tutorialId}`, JSON.stringify(next));
    window.dispatchEvent(new CustomEvent(progressEvent, {
      detail: {
        tutorialId,
        progress: next
      }
    }));
  };
  const computeComplete = current => {
    const subs = parseIds(subStepIds);
    if (subs.length > 0) {
      return subs.every(stepId => current[stepId] === true);
    }
    return current[id] === true;
  };
  const playConfetti = () => {
    if (typeof window === "undefined" || typeof document === "undefined") return;
    const canvas = document.createElement("canvas");
    canvas.className = "tutorial-confetti-canvas";
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);
    const ctx = canvas.getContext("2d");
    const pieces = Array.from({
      length: 80
    }, () => ({
      x: Math.random() * canvas.width,
      y: -20 - Math.random() * canvas.height * 0.35,
      w: 4 + Math.random() * 5,
      h: 6 + Math.random() * 8,
      color: brandBlues[Math.floor(Math.random() * brandBlues.length)],
      vy: 2.2 + Math.random() * 3.2,
      vx: -1.5 + Math.random() * 3,
      rot: Math.random() * Math.PI,
      vr: -0.12 + Math.random() * 0.24,
      alpha: 0.55 + Math.random() * 0.35
    }));
    let frame = 0;
    const maxFrames = 110;
    const draw = () => {
      frame += 1;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      pieces.forEach(piece => {
        piece.x += piece.vx;
        piece.y += piece.vy;
        piece.rot += piece.vr;
        piece.vy += 0.045;
        const fade = Math.max(0, 1 - frame / maxFrames);
        ctx.save();
        ctx.translate(piece.x, piece.y);
        ctx.rotate(piece.rot);
        ctx.globalAlpha = piece.alpha * fade;
        ctx.fillStyle = piece.color;
        ctx.fillRect(-piece.w / 2, -piece.h / 2, piece.w, piece.h);
        ctx.restore();
      });
      if (frame < maxFrames) {
        requestAnimationFrame(draw);
      } else {
        canvas.remove();
      }
    };
    requestAnimationFrame(draw);
  };
  useEffect(() => {
    const current = readProgress();
    setComplete(computeComplete(current));
    const onProgress = event => {
      if (event.detail?.tutorialId === tutorialId) {
        setComplete(computeComplete(event.detail.progress || ({})));
      }
    };
    window.addEventListener(progressEvent, onProgress);
    return () => window.removeEventListener(progressEvent, onProgress);
  }, [tutorialId, id, subStepIds]);
  const toggleComplete = () => {
    if (hasSubsteps) return;
    const current = readProgress();
    const nextValue = !current[id];
    const next = {
      ...current,
      [id]: nextValue
    };
    writeProgress(next);
    setComplete(nextValue);
    const topLevel = parseIds(stepIds);
    if (nextValue && topLevel.length > 0 && topLevel.every(stepId => next[stepId] === true)) {
      playConfetti();
    }
  };
  return <section id={`tutorial-step-${id}`} className={`tutorial-step-card${complete ? " is-complete" : ""}`}>
      <div className="tutorial-step-header">
        <div>
          <p className="tutorial-step-number">Step {number}</p>
          <h3 className="tutorial-step-title">{title}</h3>
        </div>
        <button type="button" className={`tutorial-complete-btn${complete ? " is-complete" : ""}${hasSubsteps ? " is-locked" : ""}`} onClick={toggleComplete} aria-pressed={complete} aria-label={hasSubsteps ? complete ? "All substeps complete" : "Complete all substeps first" : complete ? "Mark step incomplete" : "Mark step complete"} title={hasSubsteps ? complete ? "All substeps complete" : "Complete all substeps first" : complete ? "Mark incomplete" : "Mark complete"} disabled={hasSubsteps}>
          {complete ? "✓" : ""}
        </button>
      </div>

      {mediaLabel ? <div className="tutorial-media-slot" aria-label="Media placeholder">
          <div className="tutorial-media-placeholder">
            <span>{mediaLabel}</span>
            <span className="tutorial-media-hint">
              Replace this block with a Frame, image, or video when ready
            </span>
          </div>
        </div> : null}

      <div className="tutorial-step-body">{children}</div>

      <div className="tutorial-step-footer">
        {hasSubsteps ? <p className="tutorial-step-gate">
            {complete ? "All substeps complete" : "Mark each substep complete to finish this step"}
          </p> : <button type="button" className={`tutorial-mark-complete${complete ? " is-complete" : ""}`} onClick={toggleComplete}>
            {complete ? "Completed" : "Mark step complete"}
          </button>}
      </div>
    </section>;
};

export const TutorialProgress = ({tutorialId, steps = []}) => {
  const progressEvent = "kode-tutorial-progress";
  const [progress, setProgress] = useState({});
  const [activeId, setActiveId] = useState(steps[0]?.id || "");
  const parseSubsteps = step => {
    if (!step?.substeps) return [];
    if (Array.isArray(step.substeps)) return step.substeps;
    if (typeof step.substeps !== "string") return [];
    return step.substeps.split(";").map(entry => entry.trim()).filter(Boolean).map(entry => {
      const sep = entry.indexOf(":");
      if (sep === -1) return {
        id: entry,
        title: entry
      };
      return {
        id: entry.slice(0, sep).trim(),
        title: entry.slice(sep + 1).trim()
      };
    });
  };
  const isStepComplete = (step, current) => {
    const subs = parseSubsteps(step);
    if (subs.length > 0) {
      return subs.every(sub => current[sub.id] === true);
    }
    return current[step.id] === true;
  };
  const readProgress = () => {
    if (typeof window === "undefined") return {};
    try {
      return JSON.parse(localStorage.getItem(`kode-tutorial:${tutorialId}`) || "{}");
    } catch {
      return {};
    }
  };
  const resetProgress = () => {
    if (typeof window === "undefined") return;
    localStorage.removeItem(`kode-tutorial:${tutorialId}`);
    window.dispatchEvent(new CustomEvent(progressEvent, {
      detail: {
        tutorialId,
        progress: {}
      }
    }));
  };
  useEffect(() => {
    setProgress(readProgress());
    const onProgress = event => {
      if (event.detail?.tutorialId === tutorialId) {
        setProgress(event.detail.progress || ({}));
      }
    };
    window.addEventListener(progressEvent, onProgress);
    return () => window.removeEventListener(progressEvent, onProgress);
  }, [tutorialId]);
  useEffect(() => {
    const ids = [];
    steps.forEach(step => {
      ids.push(step.id);
      parseSubsteps(step).forEach(sub => ids.push(sub.id));
    });
    const nodes = ids.map(stepId => {
      return document.getElementById(`tutorial-step-${stepId}`) || document.getElementById(`tutorial-substep-${stepId}`);
    }).filter(Boolean);
    if (nodes.length === 0) return undefined;
    const observer = new IntersectionObserver(entries => {
      const visible = entries.filter(entry => entry.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio);
      if (visible[0]?.target?.id) {
        const raw = visible[0].target.id.replace("tutorial-substep-", "").replace("tutorial-step-", "");
        setActiveId(raw);
      }
    }, {
      rootMargin: "-20% 0px -55% 0px",
      threshold: [0.15, 0.4, 0.7]
    });
    nodes.forEach(node => observer.observe(node));
    return () => observer.disconnect();
  }, [tutorialId, steps.length]);
  const completedCount = steps.filter(step => isStepComplete(step, progress)).length;
  const done = steps.length > 0 && steps.every(step => isStepComplete(step, progress));
  const pct = steps.length ? Math.round(completedCount / steps.length * 100) : 0;
  return <aside className="tutorial-progress" aria-label="Tutorial progress">
      <div className="tutorial-progress-header">
        <p className="tutorial-progress-label">Progress</p>
        <p className="tutorial-progress-count">
          {completedCount} / {steps.length}
        </p>
      </div>

      <div className="tutorial-progress-bar" role="progressbar" aria-valuemin={0} aria-valuemax={steps.length} aria-valuenow={completedCount}>
        <div className="tutorial-progress-bar-fill" style={{
    width: `${pct}%`
  }} />
      </div>

      <ol className="tutorial-progress-list">
        {steps.map((step, index) => {
    const subs = parseSubsteps(step);
    const isComplete = isStepComplete(step, progress);
    const isActive = activeId === step.id || subs.some(sub => sub.id === activeId);
    return <li key={step.id} className="tutorial-progress-group">
              <a href={`#tutorial-step-${step.id}`} className={["tutorial-progress-item", isActive ? "is-active" : "", isComplete ? "is-complete" : ""].filter(Boolean).join(" ")}>
                <span className="tutorial-progress-marker" aria-hidden="true">
                  {isComplete ? "✓" : index}
                </span>
                <span className="tutorial-progress-title">{step.title}</span>
              </a>

              {subs.length > 0 ? <ol className="tutorial-progress-sublist">
                  {subs.map((sub, subIndex) => {
      const subComplete = progress[sub.id] === true;
      const subActive = activeId === sub.id;
      return <li key={sub.id}>
                        <a href={`#tutorial-substep-${sub.id}`} className={["tutorial-progress-item tutorial-progress-item--sub", subActive ? "is-active" : "", subComplete ? "is-complete" : ""].filter(Boolean).join(" ")}>
                              <span className="tutorial-progress-marker tutorial-progress-marker--sub" aria-hidden="true">
                            {subComplete ? "✓" : ""}
                          </span>
                          <span className="tutorial-progress-title">
                            {sub.title}
                          </span>
                        </a>
                      </li>;
    })}
                </ol> : null}
            </li>;
  })}
      </ol>

      <div className="tutorial-progress-footer">
        {done ? <p className="tutorial-progress-done">Tutorial complete</p> : null}

        {completedCount > 0 || Object.keys(progress).length > 0 ? <button type="button" className="tutorial-reset" onClick={resetProgress}>
            Reset progress
          </button> : null}
      </div>
    </aside>;
};

export const TutorialHero = ({eyebrow = "Tutorial", title, summary, time, level, imageSrc, imageAlt = "Tutorial preview"}) => {
  useEffect(() => {
    if (typeof document === "undefined") return undefined;
    document.documentElement.setAttribute("data-tutorial-layout", "true");
    const page = document.querySelector(".tutorial-page");
    if (page) {
      let sibling = page.previousElementSibling;
      while (sibling) {
        sibling.setAttribute("data-tutorial-hidden-header", "true");
        sibling = sibling.previousElementSibling;
      }
    }
    document.querySelectorAll("h1").forEach(heading => {
      if (heading.textContent.trim() !== title) return;
      heading.setAttribute("data-tutorial-hidden-header", "true");
      const prev = heading.previousElementSibling;
      if (prev) prev.setAttribute("data-tutorial-hidden-header", "true");
      const next = heading.nextElementSibling;
      if (next && next.tagName === "P") {
        next.setAttribute("data-tutorial-hidden-header", "true");
      }
    });
    return () => {
      document.documentElement.removeAttribute("data-tutorial-layout");
      document.querySelectorAll("[data-tutorial-hidden-header]").forEach(node => node.removeAttribute("data-tutorial-hidden-header"));
    };
  }, [title]);
  return <header className="tutorial-hero">
      <div className="tutorial-hero-glow" aria-hidden="true" />
      <div className="tutorial-hero-copy">
        <p className="tutorial-hero-eyebrow">{eyebrow}</p>
        <h2 className="tutorial-hero-title">{title}</h2>
        {summary ? <p className="tutorial-hero-summary">{summary}</p> : null}
        <div className="tutorial-hero-meta">
          {level ? <span className="tutorial-pill">{level}</span> : null}
          {time ? <span className="tutorial-pill">{time}</span> : null}
        </div>
      </div>
      <div className="tutorial-hero-media">
        {imageSrc ? <img src={imageSrc} alt={imageAlt} className="tutorial-hero-image" /> : <div className="tutorial-media-placeholder tutorial-media-placeholder--hero">
            <span>Add hero image</span>
            <span className="tutorial-media-hint">
              Drop a screenshot or still here
            </span>
          </div>}
      </div>
    </header>;
};

<div className="tutorial-page">
  <TutorialHero eyebrow="EnerG" title="Set up your first building in EnerG" summary="Connect a data source, map meters, set a baseline, and review your first dashboard for a single building." level="Beginner" time="About 30 min" />

  <div className="tutorial-body">
    <TutorialProgress
      tutorialId="energ-quickstart"
      steps={[
    { id: "prerequisites", title: "Before you begin" },
    { id: "add-data-source", title: "Add Arcadia" },
    { id: "enter-credentials", title: "Enter credentials" },
    { id: "wait-ingestion", title: "Wait for ingestion" },
    { id: "map-meters", title: "Map meters" },
    { id: "building-info", title: "Building information" },
    { id: "configure-baseline", title: "Configure baseline" },
    { id: "review-dashboard", title: "Review dashboard" },
  ]}
    />

    <div className="tutorial-steps">
      <TutorialStep tutorialId="energ-quickstart" id="prerequisites" number="0" title="Before you begin" stepIds="prerequisites,add-data-source,enter-credentials,wait-ingestion,map-meters,building-info,configure-baseline,review-dashboard">
        This walkthrough sets up **one building** end to end. You connect utility data, map meters, and complete building details. Then you set a baseline and confirm the building on Portfolio Home.

        If you are new to EnerG, skim [What is EnerG?](/products/energ/get-started/introduction) and [Key concepts](/products/energ/get-started/key-concepts) first.

        Learn how [portfolio and building navigation](/products/energ/get-started/navigation) differ before you click around.

        Make sure you have the following before you start:

        * **<Tooltip tip="KODE OS is the platform that connects building systems, apps, and data across your portfolio.">KODE OS</Tooltip> account** — access to the EnerG module through <Tooltip tip="Launchpad is the central management hub for the KODE ecosystem. You provision products, control access, and manage buildings from Launchpad.">Launchpad</Tooltip>
        * **Utility provider credentials** — username and password for at least one utility account that serves this building
        * **Building in Launchpad** — the target building must already exist in your portfolio. See [Buildings in Launchpad](/products/launchpad/client-organizations/buildings) if you still need to create it

        <Info>
          If you do not see EnerG in KODE OS, ask an admin to enable the product and your role access in Launchpad.
        </Info>
      </TutorialStep>

      <TutorialStep tutorialId="energ-quickstart" id="add-data-source" number="1" title="Add the Arcadia data source" stepIds="prerequisites,add-data-source,enter-credentials,wait-ingestion,map-meters,building-info,configure-baseline,review-dashboard">
        <Frame caption="Portfolio Data Sources page showing all integrated sources">
          <img src="https://mintcdn.com/kodelabs/euAGYgyin2AxlZ4b/images/energ/energ-quickstart-add-data-source.png?fit=max&auto=format&n=euAGYgyin2AxlZ4b&q=85&s=09e7c206025e51d25a22a21ae6d6c07f" alt="EnerG Data Sources page with Arcadia, Manual Entry, Kode OS, and CSV Upload source cards, and the Add Data Source button in the top-right corner" width="1262" height="925" data-path="images/energ/energ-quickstart-add-data-source.png" />
        </Frame>

        <Tooltip tip="Arcadia connects to utility provider accounts and retrieves billing and usage data for connected sites.">Arcadia</Tooltip> is the primary automated utility connector in EnerG. You add it **once per portfolio**. Every building in that portfolio can reuse the same connection.

        Work in the [portfolio view](/products/energ/get-started/navigation#portfolio-view). In the left sidebar, click `Data Sources`.

        Click `+ Add Data Source` in the top-right corner and select **ARCADIA** from the `API` dropdown. Complete any credential fields your deployment shows, then confirm.

        After creation, Arcadia appears as a <Tooltip tip="Utility Hub is the card name for the Arcadia integration on the Data Sources page.">Utility Hub</Tooltip> card with an Arcadia badge. For the full connector reference, see [Arcadia](/products/energ/data-sources/arcadia).

        <Tip>
          Need another path later? You can also load bills with [CSV uploads](/products/energ/data-sources/csv-uploads) or [manual entry](/products/energ/data-sources/manual-entry).
        </Tip>
      </TutorialStep>

      <TutorialStep tutorialId="energ-quickstart" id="enter-credentials" number="2" title="Enter utility credentials" stepIds="prerequisites,add-data-source,enter-credentials,wait-ingestion,map-meters,building-info,configure-baseline,review-dashboard">
        <Frame caption="Add a new Credential dialog with utility provider search and selection">
          <img src="https://mintcdn.com/kodelabs/euAGYgyin2AxlZ4b/images/energ/energ-quickstart-add-credentials.png?fit=max&auto=format&n=euAGYgyin2AxlZ4b&q=85&s=37aec3ea615753956c8c08013fbfa8aa" alt="Add a new Credential dialog showing a provider search field and a list of utility providers including City of Crystal Lake, City of Modesto, Tualatin Valley Water District, and City of Seattle" width="1238" height="812" data-path="images/energ/energ-quickstart-add-credentials.png" />
        </Frame>

        Give Arcadia the login for your utility provider. Arcadia uses that login to pull statements and discover accounts and meters.

        See the [Credentials tab](/products/energ/data-sources/arcadia#credentials-tab) for status meanings and field details.

        <Warning>
          Validate the username and password on the utility provider portal before you enter them in EnerG. Invalid credentials delay collection until you fix them.
        </Warning>

        Click the `Utility Hub` card (Arcadia) on the Data Sources page. Open the `Credentials` tab and click `+ Add Credentials`.

        Search for your utility provider and select it. Confirm the login page matches the portal your team uses. Use **Open Provider Portal** in the dialog when you need to verify the page.

        Enter the username and password, then click `Submit`.

        <Tip>
          Generate a connect URL to share with building engineers who own the credentials.
          They can authenticate without an EnerG account.
        </Tip>
      </TutorialStep>

      <TutorialStep tutorialId="energ-quickstart" id="wait-ingestion" number="3" title="Wait for data ingestion" stepIds="prerequisites,add-data-source,enter-credentials,wait-ingestion,map-meters,building-info,configure-baseline,review-dashboard">
        After you submit credentials, Arcadia downloads available statements from the provider. This usually takes a few hours. Some providers take up to one day.

        Stay on the `Credentials` tab and refresh the status as needed:

        * **Connection Success** — login worked and discovery started
        * **In Progress** — Arcadia is still processing
        * **Failed** — fix the login or portal access, then try again

        Watch **Total Accounts** and status details such as **Login And Data Discovery Success**. Those signals show that accounts are appearing under the credential.

        If you need history sooner, upload PDF bills on the [Bills tab](/products/energ/data-sources/arcadia#bills-tab).

        For failed pulls or missing bills after success, use the [Alert center](/products/energ/data-quality/alert-center).
      </TutorialStep>

      <TutorialStep tutorialId="energ-quickstart" id="map-meters" number="4" title="Map meters to your building" stepIds="prerequisites,add-data-source,enter-credentials,wait-ingestion,map-meters,building-info,configure-baseline,review-dashboard">
        <Frame caption="Assign Meters dialog with building search and meter selection">
          <img src="https://mintcdn.com/kodelabs/euAGYgyin2AxlZ4b/images/energ/energ-quickstart-assign-meters.png?fit=max&auto=format&n=euAGYgyin2AxlZ4b&q=85&s=9f11a1c7f88675beb7492555088ec163" alt="Add Meters dialog within the Arcadia Meters tab, showing a search field, a table with Building, Type, and Address columns, and Cancel and Next buttons" width="1271" height="742" data-path="images/energ/energ-quickstart-assign-meters.png" />
        </Frame>

        Discovered meters do not count toward a building until you assign them. Mapping links each utility meter to the correct site so bills and usage roll into that building’s metrics.

        See [Arcadia meters](/products/energ/data-sources/arcadia#meters-tab) and [Building meters](/products/energ/buildings/meters).

        <Steps>
          <Step title="Open Assign Meters">
            Inside the Arcadia data source, open the `Meters` tab and click `Assign Meters`.
          </Step>

          <Step title="Select the building">
            Select the target building from the dropdown. EnerG sorts available meters by proximity to the building address.
          </Step>

          <Step title="Choose meters by service address">
            Prefer the **service address** from the statement when you choose meters. You can also search by meter number.

            Select every electric, gas, water, or other meter that belongs to this building, then click `Submit`.
          </Step>

          <Step title="Confirm the meters">
            After assignment, meters appear on the building meters list. Confirm they show as active.

            If rankings stay empty later, check **Include in Metrics** on each meter so the site contributes to portfolio scores. Unassigned meters also lower [data completeness](/products/energ/data-quality/data-completeness).
          </Step>
        </Steps>
      </TutorialStep>

      <TutorialStep tutorialId="energ-quickstart" id="building-info" number="5" title="Add building information" stepIds="prerequisites,add-data-source,enter-credentials,wait-ingestion,map-meters,building-info,configure-baseline,review-dashboard">
        EnerG needs a few site properties before intensity metrics and weather models work well. High-level attributes often sync from Launchpad.

        You confirm those values and fill energy-specific fields in a five-step wizard. Full field reference: [Building information](/products/energ/buildings/building-information).

        Click the building from `Home`, then click `Go to Building`. In the building-level left sidebar, click `Building Information`. Click `Edit Informations` in the top-right corner.

        For this first setup, focus on:

        * **Building Area** — drives <Tooltip tip="Energy Use Intensity (EUI) is annual energy divided by floor area, typically expressed per square foot or square meter.">EUI</Tooltip> calculations
        * **Primary Heating System** and **Primary Cooling System** — drive <Tooltip tip="Degree days measure how much outdoor weather departs from configured base temperatures each day. Higher values indicate greater heating or cooling demand.">degree day</Tooltip> correlations
        * **Operating hours** — improve models that compare usage to expected load

        Work through the wizard with `Next`, or jump to a step in the left progress list. Confirm Launchpad values instead of overwriting them unless they are wrong.
      </TutorialStep>

      <TutorialStep tutorialId="energ-quickstart" id="configure-baseline" number="6" title="Configure a baseline" stepIds="prerequisites,add-data-source,enter-credentials,wait-ingestion,map-meters,building-info,configure-baseline,review-dashboard">
        <Frame caption="Baseline Configuration page showing Energy, Water, and Waste categories">
          <img src="https://mintcdn.com/kodelabs/euAGYgyin2AxlZ4b/images/energ/energ-quickstart-baseline-config.png?fit=max&auto=format&n=euAGYgyin2AxlZ4b&q=85&s=68e164615928aad7f3795f43edb0bc62" alt="Baselines page with Energy, Water, and Waste sections each showing the auto-configure option selected, and an Edit Configuration button in the top-right corner" width="1268" height="549" data-path="images/energ/energ-quickstart-baseline-config.png" />
        </Frame>

        A <Tooltip tip="A baseline is a historical reference window, usually 12 or 24 months, that you measure savings and performance against.">baseline</Tooltip> is the historical window EnerG compares against later usage.

        You need at least **12 consecutive months** of complete billed data for each category before a baseline qualifies. Partial months or missing commodities disqualify the window until you repair the data.

        <Steps>
          <Step title="Open Baseline Analysis">
            Stay in the building view. Expand **Dashboards**, select **Energy**, then open **Baseline Analysis** from the report menu.
          </Step>

          <Step title="Edit the configuration">
            Click **Edit Configuration** in the top-right corner.
          </Step>

          <Step title="Choose auto-configure or manual dates">
            For a first building, enable auto-configure so EnerG picks the earliest qualifying 12-month period.

            You can also set Energy, Water, and Waste windows manually. Follow [Configure building baseline windows](/products/energ/analytics/baseline-portfolio-configurations#configure-building-baseline-windows) for both options.
          </Step>

          <Step title="Confirm the window">
            After you save, the page confirms the selected date range and covered service types.

            If auto-configure cannot find a valid window, close gaps on [Building meters](/products/energ/buildings/meters) or review [Data completeness](/products/energ/data-quality/data-completeness). Then try again.
          </Step>
        </Steps>
      </TutorialStep>

      <TutorialStep tutorialId="energ-quickstart" id="review-dashboard" number="7" title="Review your dashboard" stepIds="prerequisites,add-data-source,enter-credentials,wait-ingestion,map-meters,building-info,configure-baseline,review-dashboard">
        Return to the [portfolio view](/products/energ/get-started/navigation#portfolio-view) and click `Home` in the left sidebar. [Portfolio Home](/products/energ/analytics/benchmarking) is where you compare buildings.

        Your building card should show an <Tooltip tip="Energy Use Intensity (EUI) is annual energy divided by floor area, typically expressed per square foot or square meter.">EUI</Tooltip> ranking. It also shows a <Tooltip tip="Data completeness is a score from 0% to 100% that measures billed coverage from each meter’s service start through today.">data completeness</Tooltip> score and consumption metrics such as cost and CO2e.

        <Tip>
          Use EUI when you compare buildings of different sizes. A smaller site can use less total energy and still rank worse on a per-area basis.
        </Tip>

        Click the building in the list, then click `Go to Building`.

        Open the [Building Energy dashboard](/products/energ/analytics/building-dashboards-energy) to explore usage, cost, baseline comparisons, and emissions for this site. See also the [building dashboards overview](/products/energ/analytics/site-dashboards).
      </TutorialStep>
    </div>
  </div>
</div>

## What's next

<CardGroup cols={2}>
  <Card title="Key concepts" icon="lightbulb" href="/products/energ/get-started/key-concepts" arrow={true} cta="Learn">
    Review baselines, EUI, data completeness, and other shared EnerG terms.
  </Card>

  <Card title="Arcadia" icon="plug" href="/products/energ/data-sources/arcadia" arrow={true} cta="Configure">
    Manage credentials, upload invoices, and map additional meters.
  </Card>

  <Card title="Alert center" icon="bell" href="/products/energ/data-quality/alert-center" arrow={true} cta="Monitor">
    Review and resolve data quality issues across your portfolio.
  </Card>

  <Card title="Portfolio Home" icon="home" href="/products/energ/analytics/benchmarking" arrow={true} cta="Explore">
    Compare building performance using EUI, WUI, and carbon metrics.
  </Card>

  <Card title="Building Energy dashboard" icon="zap" href="/products/energ/analytics/building-dashboards-energy" arrow={true} cta="Open">
    Dig into usage, cost, baseline, and interval views for one building.
  </Card>

  <Card title="Create an M&V model" icon="circle-fading-plus" href="/products/energ/energy-modeling/mv-models" arrow={true} cta="Start">
    Train a measurement and verification (M\&V) model to quantify energy savings.
  </Card>
</CardGroup>