diff --git a/docs/content/user-guide/index.mdx b/docs/content/user-guide/index.mdx
index c5d4e036bd..fc85952374 100644
--- a/docs/content/user-guide/index.mdx
+++ b/docs/content/user-guide/index.mdx
@@ -54,7 +54,7 @@ You can either select a resolve with your mouse, or use the up and down arrows o
### Check Notifications
-At the top right you’ll find a bell icon . Clicking this icon opens a side window to view any notifications you might have. You can use this to view notifications such as completed product exports.
+At the top right you’ll find a icon. Clicking this icon opens a side window to view any notifications you might have. You can use this to view notifications such as completed product exports.
@@ -66,6 +66,6 @@ At the top right, you’ll find an avatar icon. By clicking this icon, you’ll
### Need Help?
-At the top right, you’ll find a question mark icon . When you click on this icon, a form will pop up. You can use this form to send the Medusa team a message asking for help. Our team usually responds in a few hours on business days.
+At the top right, you’ll find a icon. When you click on this icon, a form will pop up. You can use this form to send the Medusa team a message asking for help. Our team usually responds in a few hours on business days.
\ No newline at end of file
diff --git a/docs/content/user-guide/orders/index.mdx b/docs/content/user-guide/orders/index.mdx
new file mode 100644
index 0000000000..532143a0f4
--- /dev/null
+++ b/docs/content/user-guide/orders/index.mdx
@@ -0,0 +1,119 @@
+import UiIcon from '@site/src/components/UiIcon';
+
+# Orders Overview
+
+In this document, you’ll get an overview of the orders listing page and all the things you can do with it.
+
+## View List of Orders
+
+You can view the list of available orders in your ecommerce store by clicking on Orders from the sidebar menu.
+
+
+
+In the list, you can see order details such as the ID, date, customer, fulfillment and payment status, total, and the country of the shipping address.
+
+:::tip
+
+If there are more than 15 orders, the list will be split into multiple pages. You can navigate between pages by clicking the arrows at the bottom of the list.
+
+:::
+
+## View List of Draft Orders
+
+You can view the list of draft orders on the Orders page by clicking on the grey Drafts headline next to the Orders headline.
+
+
+
+In the list, you can see order details such as ID, the ID of the order the draft order belongs to, the date, the customer, and the status of the draft order.
+
+:::tip
+
+If there are more than 15 orders, the list will be split into multiple pages. You can navigate between pages by clicking the arrows at the bottom of the list.
+
+:::
+
+## Filter Orders
+
+You can use filters to retrieve only orders matching specific criteria.
+
+### Quick Filters
+
+On the Orders list page, you’ll find quick filters such as “Complete” and “Incomplete” at the top of the list. These filters show the complete and incomplete orders respectively.
+
+You can click on one of these filters to quickly filter the orders based on whether they’re complete or not.
+
+
+
+### Advanced Filters
+
+You can use advanced filters to furthermore limit the orders shown based on specific criteria. For example, you can filter orders to only show pending orders created in a specific region.
+
+To use advanced filters:
+
+- Click on the icon next to Filters. This will toggle a dropdown with categories for different fields.
+- You can click on a field name to expand it and choose a filter for that field.
+
+
+
+Once you’re done, you can click on the Apply button at the top of the dropdown. This will retrieve the orders based on the filters you’ve selected.
+
+### Save Advanced Filters as Quick Filters
+
+If there are filters that you need to use frequently, you can give the set of filters a name and save them to be used later. For example, you can save the filters used in the previous example as “European Orders”.
+
+To save an advanced filter:
+
+- Choose your filters from the dropdown.
+- Choose a name for the filters in the input at the end of the dropdown.
+- Click the Save button.
+
+
+
+Once you click Save, you should see the new filter you added next to the Quick Filters at the top of the orders list.
+
+
+
+To apply a saved quick filter, just click on it.
+
+### Delete Saved Quick Filters
+
+You can delete any saved filter you’ve created. To do that, simply click on the icon next to the quick filter’s name, and it will be deleted.
+
+### Clear Filters
+
+To clear all applied filters:
+
+- Click on the + icon next to Filters.
+- Click on the Clear button.
+
+
+
+:::info
+
+Clearing filters does not delete saved quick filters. You can still apply them by clicking on them.
+
+:::
+
+## Search Orders
+
+You can search for orders by clicking the icon at the top right of the order list. When you search orders, you are searching by the first name supplied in the shipping address, the email associated with the order, and the order ID.
+
+
+
+## Search Draft Orders
+
+You can search for draft orders by clicking the icon at the top right of the draft order list. When you search draft orders, you are searching by the email associated with the draft order and the draft order’s ID.
+
+
+
+## What More Can you Do With Orders?
+
+The Orders pages in the Medusa Admin include many functionalities including:
+
+- Manage and View Order’s Details
+- Manage Order’s Payment
+- Manage Order’s Fulfillment
+- Create a Draft Order
+- Manage Order Returns
+- Manage Order Claims
+- Manage Order Exchanges and Swaps
\ No newline at end of file
diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js
index 52ca550b4a..148b3031aa 100644
--- a/www/docs/sidebars.js
+++ b/www/docs/sidebars.js
@@ -493,7 +493,19 @@ module.exports = {
type: "doc",
id: "user-guide/index",
label: "Introduction"
- }
+ },
+ {
+ type: "category",
+ collapsed: false,
+ label: "Orders",
+ items: [
+ {
+ type: "doc",
+ id: "user-guide/orders/index",
+ label: "Introduction"
+ }
+ ]
+ },
],
servicesSidebar: [
{
diff --git a/www/docs/src/components/UiIcon/index.js b/www/docs/src/components/UiIcon/index.js
index 1f6daebc93..8704c8b95a 100644
--- a/www/docs/src/components/UiIcon/index.js
+++ b/www/docs/src/components/UiIcon/index.js
@@ -1,11 +1,11 @@
import React from 'react';
import {useColorMode} from '@docusaurus/theme-common';
-export default function UiIcon ({ lightIcon, darkIcon = '' }) {
+export default function UiIcon ({ lightIcon, darkIcon = '', alt = '' }) {
const {colorMode} = useColorMode();
const icon = colorMode === 'dark' && darkIcon ? darkIcon : lightIcon;
return (
- 
+
)
}
\ No newline at end of file