feat: add documentation for x-store

docs/integration/xstore/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "X-Store",
+    "link": {
+        "type": "generated-index",
+        "slug": "/integration/x-store-category",
+        "description": "Omnichannel commerce platform and integrations"
+    }
+}

docs/integration/xstore/dashboard.md

@@ -0,0 +1,136 @@
+---
+sidebar_position: 4
+title: Dashboard
+description: A guide on Dashboard
+slug: /integration/xstore/dashboard
+tags: ["e-Commerce", "X-Store", "Dashboard"]
+---
+
+## Dashboard Overview
+
+The **Dashboard** is the main page where you can see how your stores are doing. It shows you latest information on sales, orders, stock, and if your stores are connected properly.
+
+### Date Filter
+
+![date-filter](../../../static/img/xstore/dashboard/dashboard-1.png)
+
+Pick a time period to see its data. You can choose:
+
+- **Today**
+- **Last 3 Days**
+- **Last 7 Days**
+- **Last 1 Month**
+- **Last 2 Months**
+- **Last 3 Months** (Default view)
+
+### Choose What to See
+
+![choose-what-to-see](../../../static/img/xstore/dashboard/dashboard-6.png)
+
+Pick what kind of numbers you want to see:
+
+- **Amount**: Show the total money from sales for that time.
+- **Total**: Show the total number of sales for that time.
+
+### Chart Types
+
+![chart-types](../../../static/img/xstore/dashboard/dashboard-7.png)
+
+Choose how you want the numbers to look:
+
+- **Bar Chart**: Shows numbers as vertical bars to compare different times.
+- **Line Chart**: Shows a line to see if sales are going up or down.
+- **Pie Chart**: Shows a circle divided into parts to see which time had more sales.
+- **Table**: Shows exact numbers in a list.
+
+## Payments Section
+
+This part shows you the money side of your business.
+
+![payments-section](../../../static/img/xstore/dashboard/dashboard-2.png)
+
+### Main Numbers
+
+- **Total Transactions**: Total number of payments received.
+- **Total Transaction Amounts**: Total amount of money from all payments.
+- **Avg Amount per Transaction**: The average money made from one sale.
+
+### Payment Chart
+
+A picture showing your payment trends. You can change how it looks using the buttons on the top-right.
+
+**Group by Time**
+
+![group-by-time](../../../static/img/xstore/dashboard/dashboard-8.png)
+
+Choose how to bundle your payment data:
+
+- **Day**: See total money for each day.
+- **Week**: See total money for each week.
+- **Month**: See total money for each month.
+
+> **Tip**: Try different chart types with different time groups. For example, use a line chart with "Day" to see small changes, or a bar chart with "Month" to see how you did over several months.
+
+## Orders Section
+
+This part shows you how many orders you have and where they come from.
+
+![orders-section](../../../static/img/xstore/dashboard/dashboard-3.png)
+
+### Order Numbers
+
+- **Total Orders**: The total number of orders you have received.
+- **To Ship**: How many orders are waiting for you to send out.
+- **Orders Today**: How many orders you got today.
+
+
+### Order Details
+
+![order-details](../../../static/img/xstore/dashboard/dashboard-10.png)
+
+- **Orders by Store**: Shows which individual store (like a specific Lazada or Shopee store) is getting orders.
+- **Orders by Status**: Shows all orders status from all the stores.
+- **Orders by Region**: Shows which country or area the orders are coming from (like MY or SG).
+- **Orders by Platform**: Compare how many orders come from Lazada vs Shopee vs other sites.
+
+![orders-chart](../../../static/img/xstore/dashboard/dashboard-13.png)
+
+- **Orders Chart**: A line or bar showing if you are getting more or fewer orders over time.
+
+## Products Section
+
+Check your stock and how well your items are selling.
+
+![products-section](../../../static/img/xstore/dashboard/dashboard-4.png)
+
+### Stock Numbers
+
+- **Total Products**: How many different types of items you sell.
+- **Total Stock Items**: The total count of all items you have ready to sell.
+- **Total Variants**: The count of different choices for items (like different sizes or colors).
+- **Total Mapped Products**: How many items are correctly linked between your online store and SQL Account.
+
+### Product Info
+
+![product-info](../../../static/img/xstore/dashboard/dashboard-11.png)
+
+- **Top Selling Products**: A list of your most popular items.
+- **Top Returned Products**: Items that customers send back most often. This helps you find problems with certain products.
+
+## Stores Section
+
+Manage your different selling channels.
+
+![stores-section](../../../static/img/xstore/dashboard/dashboard-5.png)
+
+### Store Numbers
+
+- **Total Stores**: The total number of online stores you have connected.
+- **Active Stores**: How many stores are currently working and sharing data.
+
+### Store Locations
+
+![store-locations](../../../static/img/xstore/dashboard/dashboard-12.png)
+
+- **Stores by Platform**: Shows how many stores you have for Lazada, Shopee, or TikTok and more.
+- **Stores by Region**: Shows where your stores are located (like MY, SG, and more).

docs/integration/xstore/getting-started.md

@@ -0,0 +1,117 @@
+---
+sidebar_position: 1
+title: Getting Started
+description: A guide to getting started
+slug: /integration/xstore/getting-started
+tags: ["e-Commerce", "X-Store", "Getting Started"]
+---
+
+## Sign In
+
+If you already have an account, you can [sign in](https://x-store-demo.sql.com.my/login) using one of the following methods:
+
+- **Sign in with Passkey** - Use your registered passkey for quick and secure access
+- **Sign in with Email** - Enter your email address and click the verification link to sign in
+- **Google Single Sign-On (SSO)** - Sign in with your Google account (Gmail only). Click the Google button, select your Gmail account, and you'll be signed in automatically.
+
+For detailed instructions, please refer to the [sign up section](#sign-up) below.
+
+  ![login-overview](../../../static/img/xstore/getting-started/login-overview.png)
+
+## Sign Up
+
+If you don't have an account yet, click [sign up here](https://x-store-demo.sql.com.my/register) to create a new account.
+
+### Sign Up with Passkey
+
+Passkeys provide a secure, passwordless way to access your account.
+
+1. Click **Sign up here** on the sign-in page
+
+   ![signup-overview](../../../static/img/xstore/getting-started/signup-overview.png)
+
+2. Select **Sign up with Passkey**
+
+   ![passkey-overview](../../../static/img/xstore/getting-started/passkey-overview.png)
+
+3. Enter your **User Name** and **Passkey Name**
+
+   :::info
+   This passkey name will be displayed on your phone as an option during authentication.
+   :::
+
+4. Click **Sign Up**
+
+   ![passkey-form](../../../static/img/xstore/getting-started/passkey-form.png)
+
+5. Choose the option:
+
+   - iPhone, iPad, or Android device
+
+   ![passkey-option](../../../static/img/xstore/getting-started/passkey-option.png)
+
+6. Use your smartphone to scan the QR code displayed
+
+   :::info
+   Ensure both **Bluetooth** and **WiFi/Mobile data** are turned on for both your laptop and smartphone.
+   :::
+
+   ![passkey-creation](../../../static/img/xstore/getting-started/passkey-creation.png)
+
+7. Complete the passkey registration on your device
+
+8. Once successful, you'll be redirected to the **Company List** page
+
+### Sign Up with Email
+
+For email-based registration:
+
+1. Click **Sign up here** on the sign-in page
+
+   ![signup-overview](../../../static/img/xstore/getting-started/signup-overview.png)
+
+2. Select **Sign up with Email**
+
+   ![email-overview](../../../static/img/xstore/getting-started/email-overview.png)
+
+3. Enter your **Name** and **valid email address**
+
+4. Click **Sign Up**
+
+   ![email-form](../../../static/img/xstore/getting-started/email-form.png)
+
+5. Check your email inbox for a verification link
+
+   :::info
+   The verification link expires in 2 minutes.
+   :::
+
+   ![email-action](../../../static/img/xstore/getting-started/email-action.png)
+
+6. Click the **verification link** in the email
+
+   ![email-link](../../../static/img/xstore/getting-started/email-link.png)
+
+7. Your account is now successfully created
+
+   ![email-verification](../../../static/img/xstore/getting-started/email-verification.png)
+
+8. Once successful, you'll be redirected to the **Company List** page
+
+## Try Demo
+
+Feel free to explore the available features in X-Store by using **Try Demo** without signing in.
+
+![demo-overview](../../../static/img/xstore/getting-started/demo-overview.png)
+
+## Company List Page
+
+After successful sign-in or sign-up, you'll land on the **Company List** page.
+
+Here you can:
+
+- View all companies you've created
+- View companies you've joined
+- Create a new company
+
+![company-overview](../../../static/img/xstore/getting-started/company-overview.png)

docs/integration/xstore/inventory.md

@@ -0,0 +1,68 @@
+---
+sidebar_position: 6
+title: Inventory
+description: A guide on inventory
+slug: /integration/xstore/inventory
+tags: ["e-Commerce", "X-Store", "Inventory"]
+---
+
+## Products
+
+### Map Products
+
+1. Go to **Inventory > Products**
+
+   ![product-overview](../../../static/img/xstore/inventory/product-overview.png)
+
+2. Click the **Map Product Button** to open the **Map Product Dialog**
+
+   ![map-product](../../../static/img/xstore/inventory/map-product.png)
+
+   ![map-dialog-overview](../../../static/img/xstore/inventory/map-dialog-overview.png)
+
+   :::info
+   Use the **Filter Button** to narrow your **Platform Products View**, or use the **Search Bar** to find specific e-commerce products and stock items.
+   :::
+
+3. Select e-commerce products synced from various platforms and then a stock item synced from SQL Account to map them together
+
+   ![mapping-product-1](../../../static/img/xstore/inventory/mapping-product-1.png)
+
+   :::info
+   **e-commerce Products** are mapped to **Stock Item UOM**.
+   :::
+
+4. To unmap products, select them and click **Unmap**
+
+   ![unmap-product-1](../../../static/img/xstore/inventory/unmap-product-1.png)
+
+   ![unmap-product-2](../../../static/img/xstore/inventory/unmap-product-2.png)
+
+## Stocks
+
+### Map Products to Specific Stock Items
+
+1. Go to **Inventory > Stocks**
+
+   ![stock-overview](../../../static/img/xstore/inventory/stock-overview.png)
+
+2. Click the icon to view stock details
+
+   ![view-stock-detail](../../../static/img/xstore/inventory/view-stock-detail.png)
+
+   :::info
+   - **Map Product** can be performed here as well
+   - **Location Description** and **Code** are fetched from SQL Account
+   :::
+
+3. Click the **+** icon to open the **Map Product Dialog**
+
+   ![stock-detail](../../../static/img/xstore/inventory/stock-detail.png)
+
+4. Select the **Platform Product** and click **Map Product** to map it directly to this **Stock Item UOM**
+
+   ![map-selective-uom](../../../static/img/xstore/inventory/map-selective-uom.png)
+
+   :::info
+   Ensure your store is mapped to the correct stock item location, or mapped items won't appear.
+   :::

docs/integration/xstore/orders/_category_.json

@@ -0,0 +1,9 @@
+{
+    "label": "Order",
+    "position": 7,
+    "link": {
+        "type": "generated-index",
+        "slug": "/integration/x-store/orders-category",
+        "description": "A guide on Order module"
+    }
+}