5.3 Match record page

A detailed match record.

List of example pages

Order: XYW34 20 Mar 2018 from Town & country fine foods

Inspect

Purchase

PO505 20.00 GBP

Ordered by

Total 20.00 GBP

Deliveries 2

21 Mar 2018 121.40 GBP
21 Mar 2018 20.00 GBP

Does not match purchase

Total 141.40 GBP

Invoice

22751014 141.40 GBP

Matches delivery

Total 141.40 GBP

Line Item Matches

SKU Product Title Unit Size Stage Unit Price Quantity Total
0001 Cheddar cheese 5kg Ordered 20.00 GBP 1 20.00 GBP
Delivered 20.00 GBP 1 20.00 GBP
Invoiced 20.00 GBP 1 20.00 GBP

Unordered line items

SKU Product Title Unit Size Stage Unit Price Quantity Total
0003 Black truffle 400g Ordered
Delivered 121.40 GBP 1 121.40 GBP
Invoiced 121.40 GBP 1 121.40 GBP
Timeline
  1. 17 Jan (09:40)

    You received invoice INV865 from Trousers Inc.

  2. 17 Jan (09:40)

    You received invoice INV864 from Trousers Inc.

  3. 15 Jan (10:54)

    barry@pickles.net received delivery

  4. 13 Jan (18:10)

    steve@trousers.org wrote:
    will send a different brand as discussed

  5. 13 Jan (17:42)

    steve@trousers.org called barry@pickles.net

  6. 13 Jan (17:42)

    Trousers Inc. accepted the order

  7. 14 Jan (12:02)

    Trousers Inc. viewed the order

  8. 14 Jan (11:23)

    barry@pickles.net approved order

  9. 14 Jan (11:23)

    barry@pickles.net sent order to Trousers Inc

Contact supplier Add a note
<ol class="breadcrumb">
    <li><a href="#0">Dashboard</a></li>
    <li><a href="#0">Manage Purchase Orders</a></li>
    <li>Order: XYW34</li>
</ol>

<section class="match">
    <header class="grid match__header">
        <h1 class="col-xs-6 col-sm-8 col-grid match__title">
            <a href="#0">Order: XYW34</a>
            <span class="match__info">
                <span class="fa fa-calendar" aria-hidden="true"></span> 20 Mar 2018 from Town & country fine foods
            </span>
        </h1>
        <p class="col-xs-6 col-sm-4 match__actions">
            <a href="#0" class="button"><span class="fa fa-search" aria-hidden="true"></span> Inspect</a>
        </p>
    </header>
    <div class="grid">
        <section class="col-xs-auto col-grid match__section">
            <header><h2 class="match__subheading">Purchase</h2></header>
            <table class="match__table">
                <tbody>
                    <tr>
                        <td>
                            <a href="#0">PO505</a>
                        </td>
                        <td class="text-right">
                            20.00 GBP
                        </td>
                    </tr>
                </tbody>
            </table>
            <p class="match__status">
                Ordered by <a href="#0" class="match__email">barry@pickles.net</a>
            </p>
            <footer class="match__total">
                Total 20.00 GBP
            </footer>
        </section>
        <section class="col-xs-auto col-grid match__section match__section--error">
            <header><h2 class="match__subheading">Deliveries <span class="badge">2</span></h2></header>
            <table class="match__table">
                <tbody>
                    <tr>
                        <td>
                            <a href="#0">21 Mar 2018</a>
                        </td>
                        <td class="text-right">
                            121.40 GBP
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#0">21 Mar 2018</a>
                        </td>
                        <td class="text-right">
                            20.00 GBP
                        </td>
                    </tr>
                </tbody>
            </table>
            <p class="match__status text-warning">
                <span class="fa fa-close"></span> Does not match purchase
            </p>
            <footer class="match__total">
                Total 141.40 GBP
            </footer>
        </section>
        <section class="col-xs-auto col-grid match__section">
            <header><h2 class="match__subheading">Invoice</h2></header>
            <table class="match__table">
                <tbody>
                    <tr>
                        <td>
                            <a href="#0">22751014</a>
                        </td>
                        <td class="text-right">
                            141.40 GBP
                        </td>
                    </tr>
                </tbody>
            </table>
            <p class="match__status text-success">
                <span class="fa fa-check"></span> Matches delivery
            </p>
            <footer class="match__total">
                Total 141.40 GBP
            </footer>
        </section>
    </div>
    <section class="match__details">
        <h2>Line Item Matches</h2>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th scope="col">SKU</th>
                    <th scope="col">Product Title</th>
                    <th scope="col" class="hidden-xxs hidden-xs">Additional Information</th>
                    <th scope="col">Unit Size</th>
                    <th scope="col">Stage</th>
                    <th scope="col" class="hidden-xxs">Unit Price</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row" rowspan="3">0001</th>
                    <th scope="row" rowspan="3">Cheddar cheese</th>
                    <td rowspan="3" class="hidden-xxs hidden-xs"></td>
                    <td rowspan="3">5kg</td>
                    <td>Ordered</td>
                    <td class="text-right">20.00 GBP</td>
                    <td class="text-right">1</td>
                    <td class="text-right">20.00 GBP</td>
                </tr>
                <tr>
                    <td>Delivered</td>
                    <td class="text-right">20.00 GBP</td>
                    <td class="text-right">1</td>
                    <td class="text-right">20.00 GBP</td>
                </tr>
                <tr>
                    <td>Invoiced</td>
                    <td class="text-right">20.00 GBP</td>
                    <td class="text-right">1</td>
                    <td class="text-right">20.00 GBP</td>
                </tr>
            </tbody>
        </table>
        <h2>Unordered line items</h2>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th scope="col">SKU</th>
                    <th scope="col">Product Title</th>
                    <th scope="col" class="hidden-xxs hidden-xs">Additional Information</th>
                    <th scope="col">Unit Size</th>
                    <th scope="col">Stage</th>
                    <th scope="col">Unit Price</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr class="row-warning">
                    <th scope="row" rowspan="3">0003</th>
                    <th scope="row" rowspan="3">Black truffle</th>
                    <td rowspan="3" class="hidden-xxs hidden-xs"></td>
                    <td rowspan="3">400g</td>
                    <td>Ordered</td>
                    <td class="text-right"></td>
                    <td class="text-right"></td>
                    <td class="text-right"></td>
                </tr>
                <tr>
                    <td>Delivered</td>
                    <td class="text-right">121.40 GBP</td>
                    <td class="text-right">1</td>
                    <td class="text-right">121.40 GBP</td>
                </tr>
                <tr>
                    <td>Invoiced</td>
                    <td class="text-right">121.40 GBP</td>
                    <td class="text-right">1</td>
                    <td class="text-right">121.40 GBP</td>
                </tr>
            </tbody>
        </table>
    </section>
    <footer class="match__footer">
        <span class="text-success match__footer-info"><em class="fa fa-check" aria-hidden="true"></em> Approved by <a href="#0">terry@office.net</a></span>
    </footer>
</section>

<div class="grid">
    <section class="col-sm-8 col-md-9">
        <div class="card-heading">
            Timeline
        </div>
        <ol class="card-timeline">
            <li class="card-timeline__section">
                <span class="card-timeline__icon" aria-hidden="true">
                    <span class="fa fa-angle-double-left"></span><span class="fa-stack fa-sm"><i class="fa fa-file-o fa-stack-2x"></i><i class="fa fa-gbp fa-stack-1x"></i></span>
                </span>
                <span class="card-timeline__meta">17 Jan (09:40)</span>
                <p class="card-timeline__info">
                    You received <a href="#0">invoice INV865</a> from Trousers Inc.
                </p>
            </li>
            <li class="card-timeline__section">
                <span class="card-timeline__icon" aria-hidden="true">
                    <span class="fa fa-angle-double-left"></span><span class="fa-stack fa-sm"><i class="fa fa-file-o fa-stack-2x"></i><i class="fa fa-gbp fa-stack-1x"></i></span>
                </span>
                <span class="card-timeline__meta">17 Jan (09:40)</span>
                <p class="card-timeline__info">
                    You received <a href="#0">invoice INV864</a> from Trousers Inc.
                </p>
            </li>
            <li class="card-timeline__section">
                <span class="card-timeline__icon card-timeline__icon--success" aria-hidden="true">
                    <span class="fa fa-angle-double-left"></span><span class="fa fa-truck"></span>
                </span>
                <span class="card-timeline__meta">15 Jan (10:54)</span>
                <p class="card-timeline__info">
                    barry@pickles.net received <a href="#0">delivery</a>
                </p>
            </li>
            <li class="card-timeline__section">
                <span class="card-timeline__icon" aria-hidden="true">
                    <span class="fa fa-fw fa-sticky-note-o"></span><span class="fa fa-fw fa-angle-double-left"></span>
                </span>
                <span class="card-timeline__meta">13 Jan (18:10)</span>
                <p class="card-timeline__info">
                    steve@trousers.org wrote:<br>
                    <em>will send a different brand as discussed</em>
                </p>
            </li>
            <li class="card-timeline__section">
                <span class="card-timeline__icon" aria-hidden="true">
                    <span class="fa fa-fw fa-phone"></span><span class="fa fa-fw fa-angle-double-left"></span>
                </span>
                <span class="card-timeline__meta">13 Jan (17:42)</span>
                <p class="card-timeline__info">
                    steve@trousers.org called barry@pickles.net
                    <audio controls="controls">
                      <a href="#0">download call</a>
                      <source src="foo.wav" type="audio/wav">
                    </audio>
                </p>
            </li>
            <li class="card-timeline__section">
                <span class="card-timeline__icon card-timeline__icon--success" aria-hidden="true">
                    <span class="fa fa-fw fa-file-text-o"></span><span class="fa fa-fw fa-check"></span>
                </span>
                <span class="card-timeline__meta">13 Jan (17:42)</span>
                <p class="card-timeline__info">
                    Trousers Inc. accepted the order
                </p>
            </li>
            <li class="card-timeline__section">
                <span class="card-timeline__icon" aria-hidden="true">
                    <span class="fa fa-fw fa-file-text-o"></span><span class="fa fa-fw fa-eye"></span>
                </span>
                <span class="card-timeline__meta">14 Jan (12:02)</span>
                <p class="card-timeline__info">
                    Trousers Inc. viewed the order
                </p>
            </li>
            <li class="card-timeline__section">
                <span class="card-timeline__icon card-timeline__icon--success" aria-hidden="true">
                    <span class="fa fa-fw fa-file-text-o"></span><span class="fa fa-fw fa-check"></span>
                </span>
                <span class="card-timeline__meta">14 Jan (11:23)</span>
                <p class="card-timeline__info">
                    barry@pickles.net approved order</a>
                </p>
            </li>
            <li class="card-timeline__section">
                <span class="card-timeline__icon" aria-hidden="true">
                    <span class="fa fa-fw fa-file-text-o"></span><span class="fa fa-fw fa-angle-double-right"></span>
                </span>
                <span class="card-timeline__meta">14 Jan (11:23)</span>
                <p class="card-timeline__info">
                    barry@pickles.net sent order to Trousers Inc</a>
                </p>
            </li>
        </ol>
    </section>
    <section class="col-sm-4 col-md-3">
        <a href="#0" class="button button--block"><span class="fa fa-phone"></span> Contact supplier</a>
        <a href="#0" class="button button--block"><span class="fa fa-sticky-note-o"></span> Add a note</a>
    </section>
</div>