Build the setup checklist from what the account has done

How to do it

A tick kept in browser storage shows a step as done on one device and open on the next. It also misses work done by a teammate or an import. Let the server answer which steps are done, and link each open step to the screen that does it. Leave out steps the person may not do, using the rights from Let the server say what each user may do. Store a dismissal per user on the server. Empty screens still explain themselves, as Tell an empty start from an empty search says.

Examples

TypeScript example

app.get('/api/setup-steps', requireUser, async (req, res) => {
  const account = req.user.accountId;
  const steps = [
    { id: 'add_customer', done: (await customers.count(account)) > 0, href: '/customers/new' },
    { id: 'send_invoice', done: (await invoices.countSent(account)) > 0, href: '/invoices/new' },
  ];
  res.json({ steps, dismissed: await setupDismissals.has(req.user.id) });
});

Python example

@app.get("/api/setup-steps")
def setup_steps(user: User = Depends(current_user)):
    steps = [
        {"id": "add_customer", "done": customers.count(user.account_id) > 0, "href": "/customers/new"},
        {"id": "send_invoice", "done": invoices.count_sent(user.account_id) > 0, "href": "/invoices/new"},
    ]
    return {"steps": steps, "dismissed": setup_dismissals.has(user.id)}

How to check

A test creates an account, adds one invoice through the API and opens the dashboard in a fresh browser. The invoice step shows as done. After the last step is done, the checklist is gone.

Related rules

• APP-47 Let the server say what each user may do in Web app interface
• APP-8 Tell an empty start from an empty search in Web app interface