5.2 Dashboard

A page with lots of useful onward journeys that direct the user to an action they want to perform.

List of example pages

Hello lee.jordan@instasupply.com

Buy

0Purchase orders created in the last 7 days. View all

0Deliveries are expected today

0Deliveries are late or missing

3Deliveries received in the last 7 days

0 Invoices received in the last 7 days. View all

Approve

0Purchase orders awaiting your approval to be sent

16Invoices awaiting your approval to be paid

Have some feedback about this dashboard? Email us.

Our search is powerful.

Some suggestions of things you can search for:

  • A specific document reference id e.g. INV1234
  • Part of a document reference e.g. ABC
  • The name of a supplier
  • The name of a product sold by a supplier
Your Timeline
<p class="lead margin-reset">Hello lee.jordan@instasupply.com</p>
<div class="grid">
    <section class="col-xs-6 col-grid">
        <div class="card-heading">
            Buy
        </div>
        <div class="card-body">
            <p><span class="total">0</span>Purchase orders created in the last 7 days. <a href="/instasupply/purchasing/purchase-orders">View all</a></p>
            <p><span class="total">0</span>Deliveries are expected today</p>
            <p><span class="total">0</span>Deliveries are late or missing</p>
            <p><a href="/instasupply/purchasing/receiving/deliveries"><span class="total total--positive">3</span>Deliveries received in the last 7 days</a></p>
            <p><span class="total">0</span> Invoices received in the last 7 days. <a href="/instasupply/purchasing/invoices">View all</a></p>
        </div>
        <div class="card-footer button-group">
            <a href="/instasupply/purchasing/purchase-orders/new" class="button">Create new purchase order</a>
            <a href="/instasupply/purchasing/receiving" class="button">Receive a new delivery</a>
        </div>
    </section>

    <section class="col-xs-6 col-grid">
        <div class="card-heading">
            Approve
        </div>
        <div class="card-section">
            <p><span class="total">0</span>Purchase orders awaiting your approval to be sent</p>
            <p><a href="/instasupply/purchasing/invoices?approval=approvable_by_me"><span class="total total--positive">16</span>Invoices awaiting your approval to be paid</a></p>
        </div>

        <div class="card-section">
            <div class="card-heading">
                Manage approval levels
            </div>
            <p><a href="/instasupply/manage-my-business/approval-levels/purchaseorder">Configure approval levels for purchase orders</a>.</p>
            <p><a href="/instasupply/manage-my-business/approval-levels/supplierinvoice">Configure approval levels for invoice payment</a>.</p>
        </div>
    </section>
</div>

<p class="text-muted text-right">Have some feedback about this dashboard? <a href="mailto:support@instasupply.com?subject=dashboard%20feedback">Email us</a>.</p>

<section class="section section--light">
    <div class="container-fluid">
        <form class="grid justify-center" action="/search">
            <div class="col-sm-8 col-bleed-y">
                <label for="search-section">Search InstaSupply</label>
                <input name="q" type="search" id="search-section" required="">
            </div>
            <div class="col-sm-8 col-bleed-y">
                <p>
                    <button type="submit" class="pull-right"><span class="fa fa-search"></span> Search</button>
                    Our search is powerful.
                    <a role="button" class="collapsed" data-toggle="collapse" href="#searchInfo" aria-expanded="false" aria-controls="searchInfo">Search suggestions</a>
                </p>
                <div class="collapse" id="searchInfo">
                    <p>Some suggestions of things you can search for:</p>
                    <ul>
                        <li>A specific document reference id e.g. INV1234</li>
                        <li>Part of a document reference e.g. ABC</li>
                        <li>The name of a supplier</li>
                        <li>The name of a product sold by a supplier</li>
                    </ul>
                </div>
            </div>
        </form>
    </div>
</section>

<section>
    <div class="card-heading">
        Your Timeline
    </div>
    <ul class="card-timeline" id="event-timeline-module">
        <li class="card-timeline__section" data-time="2017-11-08T16:46:01.783867">
            <span class="card-timeline__icon card-timeline__icon--success" aria-hidden="true">
                <span class="fa fa-file-text-o"></span><span class="fa fa-angle-double-right"></span>
            </span>
            <span class="card-timeline__meta">8 Nov (16:46)</span>
            <p class="card-timeline__info">
                lee.jordan+nubbins@instasupply.com sent <a href="/terrys-nubbins/purchasing/purchase-orders/waitrose/IPNLMUA">purchase order IPNLMUA to Waitrose</a>.
            </p>
        </li>
        <li class="card-timeline__section" data-time="2017-11-07T12:49:29.214519">
            <span class="card-timeline__icon " aria-hidden="true">
                <span class="fa fa-angle-double-left"></span><span class="fa fa-truck"></span>
            </span>
            <span class="card-timeline__meta">7 Nov (12:49)</span>
            <p class="card-timeline__info">
                lee.jordan@instasupply.com received <a href="/instasupply/purchasing/receiving/delivery/b2b084f905524907b23b9b207e60641f">delivery for purchase order IPN6N7M</a>.
            </p>
        </li>
        <li class="card-timeline__section" data-time="2017-11-07T12:48:57.676988">
            <span class="card-timeline__icon " aria-hidden="true">
                <span class="fa fa-angle-double-left"></span><span class="fa fa-truck"></span>
            </span>
            <span class="card-timeline__meta">7 Nov (12:48)</span>
            <p class="card-timeline__info">
                lee.jordan@instasupply.com received <a href="/instasupply/purchasing/receiving/delivery/29ef75d189f543e9b6f33fb52da0f58b">delivery for purchase order IPN6NDV</a>.
            </p>
        </li>
        <li class="card-timeline__section" data-time="2017-11-07T12:48:20.230958">
            <span class="card-timeline__icon " aria-hidden="true">
                <span class="fa fa-angle-double-left"></span><span class="fa fa-truck"></span>
            </span>
            <span class="card-timeline__meta">7 Nov (12:48)</span>
            <p class="card-timeline__info">
                lee.jordan@instasupply.com received <a href="/instasupply/purchasing/receiving/delivery/24e220577787486fb5d054c3cbc42a01">delivery for purchase order IPN6N9J</a>.
            </p>
        </li>
        <li class="card-timeline__section" data-time="2017-11-02T15:32:59.460195">
            <span class="card-timeline__icon " aria-hidden="true">
                <span class="fa fa-angle-double-left"></span><span class="fa fa-truck"></span>
            </span>
            <span class="card-timeline__meta">2 Nov (15:32)</span>
            <p class="card-timeline__info">
                lee.jordan+giblets@instasupply.com received <a href="/steves-giblets/purchasing/receiving/delivery/95167dd302c2448e9684feb3d2be1c69">delivery for purchase order IPNLMUQ</a>.
            </p>
        </li>
        <li class="card-timeline__section" data-time="2017-11-02T15:32:43.276732">
            <span class="card-timeline__icon card-timeline__icon--success" aria-hidden="true">
                <span class="fa fa-file-text-o"></span><span class="fa fa-angle-double-right"></span>
            </span>
            <span class="card-timeline__meta">2 Nov (15:32)</span>
            <p class="card-timeline__info">
                lee.jordan+giblets@instasupply.com sent <a href="/steves-giblets/purchasing/purchase-orders/waitrose/IPNLMUQ">purchase order IPNLMUQ to Waitrose</a>.
            </p>
        </li>
        <li class="card-timeline__section" data-time="2017-11-02T14:56:17.959971">
            <span class="card-timeline__icon card-timeline__icon--warning" aria-hidden="true">
                <span class="fa fa-file-text-o"></span><span class="fa fa-times"></span>
            </span>
            <span class="card-timeline__meta">2 Nov (14:56)</span>
            <p class="card-timeline__info">
                lee.jordan+pickles@instasupply.com cancelled <a href="/barrys-pickles/purchasing/purchase-orders/waitrose/IPNLMUG">purchase order IPNLMUG to Waitrose</a>.
            </p>
        </li>
        <li class="card-timeline__section" data-time="2017-11-02T14:48:10.969959">
            <span class="card-timeline__icon card-timeline__icon--success" aria-hidden="true">
                <span class="fa fa-file-text-o"></span><span class="fa fa-angle-double-right"></span>
            </span>
            <span class="card-timeline__meta">2 Nov (14:48)</span>
            <p class="card-timeline__info">
                lee.jordan+pickles@instasupply.com sent <a href="/barrys-pickles/purchasing/purchase-orders/waitrose/IPNLMUG">purchase order IPNLMUG to Waitrose</a>.
            </p>
        </li>
        <li class="card-timeline__section" data-time="2017-11-01T16:49:22.095835">
            <span class="card-timeline__icon card-timeline__icon--success" aria-hidden="true">
                <span class="fa fa-file-text-o"></span><span class="fa fa-check"></span>
            </span>
            <span class="card-timeline__meta">1 Nov (16:49)</span>
            <p class="card-timeline__info">
                Waitrose accepted <a href="/instasupply/purchasing/purchase-orders/waitrose/IPNLMUC">purchase order IPNLMUC</a>.
            </p>
        </li>
    </ul>
</section>