Repository: saleor/saleor

Issue:
Connect home widgets to API



Discussion:
Queries to fetch the data for the Dashboard 2.0 homepage:

Today's total sales:
```{
  ordersTotal(period: TODAY) {
    currency
    gross {
      amount
    }
  }
}
```


Today's total orders number
```{
  orders(created: TODAY) {
    totalCount
  }
}
```


Number of orders ready to fulfill
```{
  orders(status: READY_TO_FULFILL, created: TODAY) {
    edges {
      node {
        number
      }
    }
  }
}
```


Number of payments ready to capture
```{
  orders(status: READY_TO_CAPTURE, created: TODAY) {
    edges {
      node {
        number
      }
    }
  }
}
```


Number of products out of stock
```{
  products(stockAvailability: OUT_OF_STOCK) {
    edges {
      node {
        id
      }
    }
  }
}
```


List of X top products today - quantity ordered and total revenue generated by those orders
```{
  reportProductSales(period: TODAY) {
    edges {
      node {
        revenue(period: TODAY) {
          gross {
            amount
          }
        }
        name
        product {
          name
          thumbnailUrl
          price {
            amount
          }
        }
        quantityOrdered
      }
    }
  }
}
```


Activity events (only related to orders at the moment)
```{
  homepageEvents {
    edges {
      node {
        type
        user {
          email
        }
        message
        date
      }
    }
  }
}
```


Resolving patch:
diff --git a/saleor/graphql/order/types.py b/saleor/graphql/order/types.py
--- a/saleor/graphql/order/types.py
+++ b/saleor/graphql/order/types.py
@@ -40,6 +40,8 @@ class OrderEvent(CountableDjangoObjectType):
     quantity = graphene.Int(description='Number of items.')
     composed_id = graphene.String(
         description='Composed id of the Fulfillment.')
+    order_number = graphene.String(
+        description='User-friendly number of an order.')
     oversold_items = graphene.List(
         graphene.String, description='List of oversold lines names.')
 
@@ -72,6 +74,9 @@ def resolve_composed_id(self, info):
     def resolve_oversold_items(self, info):
         return self.parameters.get('oversold_items', None)
 
+    def resolve_order_number(self, info):
+        return self.order_id
+
 
 class Fulfillment(CountableDjangoObjectType):
     lines = gql_optimizer.field(


Test patch:
diff --git a/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap b/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
--- a/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
+++ b/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
@@ -14927,17 +14927,19 @@ exports[`Storyshots Views / HomePage default 1`] = `
   <div
     class="Component-md-id"
   >
-    <div>
+    <div
+      class="Component-headerContainer-id"
+    >
       <h1
         class="MuiTypography-root-id MuiTypography-headline-id Component-pageHeader-id"
       >
-        Hello there, John Smith
+        Hello there, admin@example.com
       </h1>
-      <h3
-        class="MuiTypography-root-id MuiTypography-subheading-id"
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
       >
         Here are some information we gathered about your store
-      </h3>
+      </p>
     </div>
     <div
       class="Component-spacer-id"
@@ -14969,7 +14971,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                 <h1
                   class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
                 >
-                  PLN 12,325.00
+                  $57.15
                 </h1>
               </div>
               <div
@@ -15010,7 +15012,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                 <h1
                   class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
                 >
-                  1223
+                  1
                 </h1>
               </div>
               <div
@@ -15035,119 +15037,137 @@ exports[`Storyshots Views / HomePage default 1`] = `
         <div
           class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
-          <div
-            class="Component-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
-            >
-              Top products
-            </span>
-            <div
-              class="Component-toolbar-id"
-            />
-          </div>
-          <div
-            class="Component-children-id"
-          />
-          <hr
-            class="Component-hr-id"
-          />
           <table
             class="MuiTable-root-id"
             padding="default"
           >
             <tbody
-              class="MuiTableBody-root-id"
+              class="MuiTableBody-root-id Component-tableRow-id"
             >
               <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id Component-avatarSpacing-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id Component-avatarProps-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
                   <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-                  >
-                    Lake Success
-                  </p>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                    class="MuiTypography-root-id MuiTypography-body1-id"
                   >
-                    Hardcover
+                    <b>
+                      1 Orders
+                    </b>
+                     are ready to fulfill
                   </p>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id Component-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
-                    123 Orders
-                  </p>
+                    <g>
+                      <path
+                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                      />
+                    </g>
+                  </svg>
                 </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
                   <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                    class="MuiTypography-root-id MuiTypography-body1-id"
                   >
-                    PLN 54.00
+                    No payments waiting for capture
                   </p>
                 </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
-              >
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id Component-avatarSpacing-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id Component-arrowIcon-id"
                 >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id Component-avatarProps-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
+                    <g>
+                      <path
+                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                      />
+                    </g>
+                  </svg>
                 </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id"
                 >
                   <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-                  >
-                    The Sadness of Beautiful Things
-                  </p>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Softcover
-                  </p>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                    class="MuiTypography-root-id MuiTypography-body1-id"
                   >
-                    111 Orders
+                    No products out of stock
                   </p>
                 </td>
                 <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  class="MuiTableCell-root-id MuiTableCell-body-id Component-arrowIcon-id"
                 >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
-                    PLN 23.00
-                  </p>
+                    <g>
+                      <path
+                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                      />
+                    </g>
+                  </svg>
                 </td>
               </tr>
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="Component-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="Component-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+            >
+              Top products
+            </span>
+            <div
+              class="Component-toolbar-id"
+            />
+          </div>
+          <div
+            class="Component-children-id"
+          />
+          <hr
+            class="Component-hr-id"
+          />
+          <table
+            class="MuiTable-root-id"
+            padding="default"
+          >
+            <tbody
+              class="MuiTableBody-root-id"
+            >
               <tr
                 class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
               >
@@ -15169,17 +15189,17 @@ exports[`Storyshots Views / HomePage default 1`] = `
                   <p
                     class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
                   >
-                    The Messy Middle
+                    Gardner-Martin
                   </p>
                   <p
                     class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                   >
-                    Softcover
+                    XS
                   </p>
                   <p
                     class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
                   >
-                    93 Orders
+                    1 Orders
                   </p>
                 </td>
                 <td
@@ -15188,86 +15208,249 @@ exports[`Storyshots Views / HomePage default 1`] = `
                   <p
                     class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
                   >
-                    PLN 112.00
+                    $37.65
                   </p>
                 </td>
               </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="Component-spacer-id"
+        />
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="Component-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+            >
+              Activity
+            </span>
+            <div
+              class="Component-toolbar-id"
+            />
+          </div>
+          <div
+            class="Component-children-id"
+          />
+          <hr
+            class="Component-hr-id"
+          />
+          <ul
+            class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
+          >
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id Component-avatarSpacing-id"
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id Component-avatarProps-id"
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    datetime="1536941427137"
+                    title="Fri Sep 14 2018 12:10:27 GMT-0400"
                   >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                    in a month
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
+                  Order #15 had been placed
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    datetime="1538573326325"
+                    title="Wed Oct 03 2018 09:28:46 GMT-0400"
                   >
-                    Everything's Trash
-                  </p>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Order #15 had been fully paid
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    datetime="1538573341837"
+                    title="Wed Oct 03 2018 09:29:01 GMT-0400"
                   >
-                    Hardcover
-                  </p>
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    datetime="1538614911243"
+                    title="Wed Oct 03 2018 21:01:51 GMT-0400"
                   >
-                    32 Orders
-                  </p>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    datetime="1538681778831"
+                    title="Thu Oct 04 2018 15:36:18 GMT-0400"
+                  >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    datetime="1538681881420"
+                    title="Thu Oct 04 2018 15:38:01 GMT-0400"
+                  >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    datetime="1538742657268"
+                    title="Fri Oct 05 2018 08:30:57 GMT-0400"
+                  >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Order #15 had been placed
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
+                >
+                  <time
+                    datetime="1538992242622"
+                    title="Mon Oct 08 2018 05:50:42 GMT-0400"
+                  >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
+            <li
+              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
+            >
+              <div
+                class="MuiListItemText-root-id MuiListItemText-dense-id"
+              >
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Order #15 had been placed from draft by admin@example.com
+                </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
-                  <p
-                    class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
+                  <time
+                    datetime="1539359471665"
+                    title="Fri Oct 12 2018 11:51:11 GMT-0400"
                   >
-                    PLN 15.00
-                  </p>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div
-          class="Component-spacer-id"
-        />
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
-        >
-          <div
-            class="Component-root-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
-            >
-              Activity
-            </span>
-            <div
-              class="Component-toolbar-id"
-            />
-          </div>
-          <div
-            class="Component-children-id"
-          />
-          <hr
-            class="Component-hr-id"
-          />
-          <ul
-            class="MuiList-root-id MuiList-dense-id MuiList-padding-id"
-          >
+                    in 2 months
+                  </time>
+                </p>
+              </div>
+            </li>
             <li
               class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
             >
@@ -15277,17 +15460,16 @@ exports[`Storyshots Views / HomePage default 1`] = `
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  published a 
-                        
+                  Order #15 had been placed
                 </p>
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
                   <time
-                    datetime="1536585744376"
-                    title="Mon Sep 10 2018 09:22:24 GMT-0400"
+                    datetime="1540466758843"
+                    title="Thu Oct 25 2018 07:25:58 GMT-0400"
                   >
-                    in a month
+                    in 3 months
                   </time>
                 </p>
               </div>
@@ -15301,17 +15483,16 @@ exports[`Storyshots Views / HomePage default 1`] = `
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  published a 
-                        
+                  Order #15 had been placed
                 </p>
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
                   <time
-                    datetime="1539868944376"
-                    title="Thu Oct 18 2018 09:22:24 GMT-0400"
+                    datetime="1540546497580"
+                    title="Fri Oct 26 2018 05:34:57 GMT-0400"
                   >
-                    in 2 months
+                    in 3 months
                   </time>
                 </p>
               </div>
@@ -15325,17 +15506,16 @@ exports[`Storyshots Views / HomePage default 1`] = `
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  created a 
-                        
+                  Order #15 had been fully paid
                 </p>
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
                   <time
-                    datetime="1537363344376"
-                    title="Wed Sep 19 2018 09:22:24 GMT-0400"
+                    datetime="1540546682440"
+                    title="Fri Oct 26 2018 05:38:02 GMT-0400"
                   >
-                    in a month
+                    in 3 months
                   </time>
                 </p>
               </div>
@@ -15349,17 +15529,16 @@ exports[`Storyshots Views / HomePage default 1`] = `
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
-                  Saleor shop admin 
-                        added
+                  Order #15 had been fully paid
                 </p>
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                 >
                   <time
-                    datetime="1537449744376"
-                    title="Thu Sep 20 2018 09:22:24 GMT-0400"
+                    datetime="1540546682467"
+                    title="Fri Oct 26 2018 05:38:02 GMT-0400"
                   >
-                    in a month
+                    in 3 months
                   </time>
                 </p>
               </div>
@@ -15377,7 +15556,9 @@ exports[`Storyshots Views / HomePage loading 1`] = `
   <div
     class="Component-md-id"
   >
-    <div>
+    <div
+      class="Component-headerContainer-id"
+    >
       <h1
         class="MuiTypography-root-id MuiTypography-headline-id Component-pageHeader-id"
       >
@@ -15388,8 +15569,8 @@ exports[`Storyshots Views / HomePage loading 1`] = `
           ‌
         </span>
       </h1>
-      <h3
-        class="MuiTypography-root-id MuiTypography-subheading-id"
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
       >
         <span
           class="Skeleton-skeleton-id"
@@ -15397,7 +15578,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
         >
           ‌
         </span>
-      </h3>
+      </p>
     </div>
     <div
       class="Component-spacer-id"
@@ -15502,6 +15683,109 @@ exports[`Storyshots Views / HomePage loading 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <table
+            class="MuiTable-root-id"
+            padding="default"
+          >
+            <tbody
+              class="MuiTableBody-root-id Component-tableRow-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id Component-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <path
+                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                      />
+                    </g>
+                  </svg>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id Component-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <path
+                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                      />
+                    </g>
+                  </svg>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <span
+                    class="Skeleton-skeleton-id"
+                  >
+                    ‌
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id Component-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <path
+                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                      />
+                    </g>
+                  </svg>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="Component-spacer-id"
+        />
         <div
           class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -15638,17 +15922,19 @@ exports[`Storyshots Views / HomePage no data 1`] = `
   <div
     class="Component-md-id"
   >
-    <div>
+    <div
+      class="Component-headerContainer-id"
+    >
       <h1
         class="MuiTypography-root-id MuiTypography-headline-id Component-pageHeader-id"
       >
-        Hello there, John Smith
+        Hello there, admin@example.com
       </h1>
-      <h3
-        class="MuiTypography-root-id MuiTypography-subheading-id"
+      <p
+        class="MuiTypography-root-id MuiTypography-body1-id"
       >
         Here are some information we gathered about your store
-      </h3>
+      </p>
     </div>
     <div
       class="Component-spacer-id"
@@ -15680,7 +15966,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                 <h1
                   class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
                 >
-                  PLN 12,325.00
+                  $57.15
                 </h1>
               </div>
               <div
@@ -15721,7 +16007,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                 <h1
                   class="MuiTypography-root-id MuiTypography-headline-id MuiTypography-colorTextPrimary-id"
                 >
-                  1223
+                  1
                 </h1>
               </div>
               <div
@@ -15743,6 +16029,112 @@ exports[`Storyshots Views / HomePage no data 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <table
+            class="MuiTable-root-id"
+            padding="default"
+          >
+            <tbody
+              class="MuiTableBody-root-id Component-tableRow-id"
+            >
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    <b>
+                      1 Orders
+                    </b>
+                     are ready to fulfill
+                  </p>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id Component-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <path
+                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                      />
+                    </g>
+                  </svg>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    No payments waiting for capture
+                  </p>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id Component-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <path
+                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                      />
+                    </g>
+                  </svg>
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id MuiTableRow-hover-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                >
+                  <p
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    No products out of stock
+                  </p>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id Component-arrowIcon-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <g>
+                      <path
+                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                      />
+                    </g>
+                  </svg>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="Component-spacer-id"
+        />
         <div
           class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
diff --git a/tests/api/test_order.py b/tests/api/test_order.py
--- a/tests/api/test_order.py
+++ b/tests/api/test_order.py
@@ -179,6 +179,7 @@ def test_nested_order_events_query(
                         amount
                         quantity
                         composedId
+                        orderNumber
                         }
                     }
                 }
@@ -206,6 +207,7 @@ def test_nested_order_events_query(
     assert data['user']['email'] == staff_user.email
     assert data['type'] == OrderEvents.OTHER.value.upper()
     assert data['date'] == event.date.isoformat()
+    assert data['orderNumber'] == str(fulfilled_order.pk)
 
 
 def test_non_staff_user_can_only_see_his_order(user_api_client, order):