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

# Quick start

> Choose your role and get ready to use Kardy at your business.

export const GuideChecklist = ({guide, title, items}) => {
  const [checked, setChecked] = useState([]);
  const [storage, setStorage] = useState("Progress stays in this browser only.");
  useEffect(() => {
    try {
      const value = JSON.parse(localStorage.getItem(`kardy-guide-v1:${guide}`) || "[]");
      setChecked(Array.isArray(value) ? [...new Set(value.filter(i => Number.isInteger(i) && i >= 0 && i < items.length))] : []);
    } catch {
      setStorage("Browser storage is unavailable. Progress lasts until you leave this page.");
    }
  }, [guide, items.length]);
  const save = next => {
    setChecked(next);
    try {
      localStorage.setItem(`kardy-guide-v1:${guide}`, JSON.stringify(next));
    } catch {
      setStorage("Browser storage is unavailable. Progress lasts until you leave this page.");
    }
  };
  return <section className="kardy-guide" aria-label={title}>
      <div className="kardy-guide-heading">
        <div>
          <span className="kardy-guide-kicker">YOUR CHECKLIST</span>
          <h3>{title}</h3>
        </div>
        <span className="kardy-guide-count" role="status">
          {checked.length} / {items.length}
        </span>
      </div>
      <progress aria-label={`${title} progress`} max={items.length} value={checked.length} />
      <div className="kardy-guide-tasks">
        {items.map((item, index) => <button type="button" key={item} className="kardy-guide-task t-check" role="checkbox" aria-checked={checked.includes(index)} onClick={() => save(checked.includes(index) ? checked.filter(i => i !== index) : [...checked, index])}>
            <span className="kardy-guide-box" aria-hidden="true">
              <svg viewBox="0 0 10.1668 10.1668">
                <path ref={path => {
    if (path) path.style.setProperty("--check-len", String(Math.ceil(path.getTotalLength())));
  }} d="M1 5.52L3.92 9.17L9.17 1" />
              </svg>
            </span>
            <span>{item}</span>
          </button>)}
      </div>
      <div className="kardy-guide-footer">
        <small>
          {checked.length === items.length ? "Checklist complete. This is a personal reminder, not a system readiness check." : storage}
        </small>
        <button type="button" className="kardy-guide-reset" onClick={() => save([])} disabled={!checked.length}>
          Reset checklist
        </button>
      </div>
    </section>;
};

New to Kardy? Start with your own account, the right organisation, and the guide
for your role. Customer memberships and merchant team access are separate.

<CardGroup cols={2}>
  <Card title="Staff" icon="qrcode" href="/guides/staff">
    Get ready for your shift, award stamps, and check or redeem rewards.
  </Card>

  <Card title="Manager" icon="sliders" href="/guides/manager">
    Run daily operations and manage permitted rewards, outlets, and card
    designs.
  </Card>

  <Card title="Owner" icon="shield" href="/guides/owner">
    Set up your organisation, invite your team, and manage access and billing.
  </Card>

  <Card title="Customer" icon="wallet" href="/customer-journey/overview">
    Join a programme, open your cards, and show your Kardy QR at the counter.
  </Card>
</CardGroup>

<GuideChecklist
  guide="quick-start"
  title="Ready for your first sign-in?"
  items={[
"I have my own account, not a shared Owner login.",
"I know which organisation I should join.",
"I know my role and who to ask for access.",
"I understand that demo actions do not save real visits.",
]}
/>

## Your first sign-in

<Steps>
  <Step title="Use your own Kardy account">
    Open the [merchant portal](/portals#merchant). Do not use a shared Owner
    login. If you were invited, sign in with the invited email, verify it, and
    accept the invitation using the link from your Owner.
  </Step>

  <Step title="Check your organisation and role">
    Check the organisation selector before working. Your role can differ between
    brands. If the organisation is missing, ask its Owner to check your
    invitation. Creating a new organisation is not a way to join an existing
    team.
  </Step>

  <Step title="Check that the programme is ready">
    The Owner needs to confirm activation, an active outlet, and an available
    reward before the team records real visits. Demo mode uses fictional data
    and does not save scans or changes.
  </Step>

  <Step title="Follow your role guide">
    Staff can start with [their first shift](/guides/staff). Managers should
    [review the programme](/guides/manager). Owners should work through
    [organisation setup](/guides/owner).
  </Step>
</Steps>

<Note>
  Check [feature availability](/availability) before a rollout. Team controls
  are implemented on dev; production rollout is separate. Invitation links are
  shared manually, and email verification requires working auth email delivery.
</Note>

## Find your way around

Owners and Managers use **Overview** for date-filtered totals, **Members** for
reward readiness and customer history, and **Activity → List view** for searchable events.
**Live view** pairs the latest recorded events with a colour-coded store globe;
it does not track customer positions. Staff should use the authorised Scan flow.

On desktop, **Collapse sidebar** switches to an icon-only rail. Use the expand
button to bring labels back. Your preference is remembered on this browser.

Unsure what you can change? See [Accounts & access](/accounts/overview).