Skip to main content

Dashboard Tour

This guide walks you through Shaari's interface layout, navigation structure, and key components so you can find your way around quickly and efficiently.

Main Layout Overview​

Shaari's interface follows a clean, three-region layout:

+--------------------------------------------------+
|                   Top Bar                         |
+----------+---------------------------------------+
|          |                                       |
| Sidebar  |           Main Content                |
|          |                                       |
|          |                                       |
|          |                                       |
|          |                                       |
+----------+---------------------------------------+
  • Top Bar --- Search, language toggle, dark mode, fullscreen, and notifications
  • Sidebar --- Primary navigation to all modules, plus your profile menu at the bottom
  • Main Content --- The active page, forms, tables, and dashboards
RTL Layout

When Arabic is selected, the layout automatically mirrors. The sidebar moves to the right side, text aligns right-to-left, and all navigation flows accordingly. Every element is designed to work naturally in both directions.

Top Bar​

The top bar is always visible and provides quick access to global controls.

The search button on the right side of the top bar opens a quick lookup. You can also trigger it with the / keyboard shortcut.

Language Toggle​

Click the language button to switch between English and Arabic (العربية) instantly. The entire interface --- labels, forms, messages, dates --- updates without a page reload. Your language preference is saved to your profile.

Dark Mode​

Click the sun/moon icon to switch between light and dark themes. Your preference is saved per device.

Fullscreen​

The fullscreen button expands Shaari to fill your entire screen, hiding browser chrome. Press it again or hit Esc to return to normal view.

Notifications​

The bell icon displays your unread notification count. Click it to open the notifications panel, which includes:

  • Invoice processing completion alerts
  • Team activity notifications (new invoices, approvals, comments)
  • System announcements and updates
  • ZATCA submission status updates
Where is the profile menu?

Your profile, settings, and Sign Out all live at the bottom of the sidebar, not the top bar. See the next section.

The sidebar is your primary navigation hub. It organizes Shaari into collapsible groups that show or hide based on your plan and your team permissions.

Dashboard​

The top entry in the sidebar. Takes you to the main dashboard described later in this guide.

Purchases Group​

Menu ItemDescription
OverviewPurchase analytics and spending breakdowns for the selected period.
InvoicesView, search, filter, and manage all purchase invoices. Upload new invoices here. A badge shows how many are drafts or need review.
SellersYour supplier directory --- contact details, VAT numbers, and invoice history per seller.
CategoriesCreate and manage invoice categories (e.g., Office Supplies, Equipment, Marketing).
Payment TypesDefine payment methods (e.g., Cash, Bank Transfer, Credit Card, Mada).

Sales Group (Plus plan and above)​

Menu ItemDescription
Sales OverviewSales analytics and performance dashboards with charts and KPIs.
Sales InvoicesCreate and manage sales invoices. View ZATCA submission status.
QuotationsDraft quotations, send to customers, and convert to invoices or contracts.
Sales ContractsManage sales contracts with digital signature support.
CustomersCustomer database with contact details, VAT numbers, and National Address.
ProductsProduct catalog with pricing, SKU, barcode, and inventory tracking.

Documents Group (when Documents module is enabled)​

Menu ItemDescription
DocumentsCentralized document vault for company files, contracts, and attachments.

Settings Group​

The Settings group opens a single Settings page with tabs for each sub-section below. Admins also see Team and everyone sees Activity Log as separate sidebar entries.

Sidebar ItemDescription
Activity LogFull audit trail of all actions performed in your account.
Team (admins only)Invite members, assign roles, and manage permissions.
SettingsOpens the Settings page (see the tabs below).

Inside the Settings page you'll find tabs for:

  • Account --- Company profile, VAT number, CR number, logo, and address.
  • Billing --- Subscription plan, payment history, and upgrade options.
  • ZATCA Integrations --- ZATCA Phase 2 configuration and onboarding wizard (visible when your tenant has ZATCA Phase 2 enabled).
  • Automation --- Auto-archiving rules.
  • Stamp & Signature --- Upload company stamp and authorized signature images.
  • Subsidiaries --- Manage child tenants and switch between organizations (Enterprise plan).
  • Notifications --- Configure notification preferences and channels.
  • Security --- Password management, session management, and security settings.

Profile Menu (bottom of sidebar)​

At the very bottom of the sidebar you'll find your avatar and name. Clicking it expands a menu with My Profile, Home, Language, Theme, Settings, Help, and Sign Out.

Sidebar Collapse

On desktop, you can collapse the sidebar to a compact icon-only view by clicking the collapse button at the bottom. This gives you more screen space for content while keeping navigation accessible. The sidebar automatically collapses on smaller screens.

Dashboard Widgets and Statistics​

The main dashboard is the first screen you see after logging in. It provides an at-a-glance overview of your business activity, filterable by year, quarter, or month using the period selector at the top.

Profit & Loss Summary​

A single hero card at the top of the dashboard shows your financial position for the selected period:

  • Revenue --- Sum of issued and paid sales invoices (Plus plan and above)
  • Purchases --- Sum of confirmed and paid purchase invoices
  • Net Profit / Net Loss --- Calculated as Revenue − Purchases, shown in green (profit) or red (loss)

Overdue Invoices Callout​

If you have unpaid invoices past their due date, an amber banner appears between the Profit & Loss card and the VAT Settlement card:

  • Owed to suppliers --- Total amount and count of overdue purchase invoices you still need to pay
  • Owed by customers --- Total amount and count of overdue sales invoices awaiting customer payment (Plus plan and above)

The banner only appears when there is at least one overdue invoice, so a clean dashboard means nothing is late.

VAT Settlement (Plus plan and above)​

A large hero card below the overdue banner shows your ZATCA VAT position for the selected period:

  • Output VAT (Sales) --- VAT collected on sales invoices.
  • Input VAT (Purchases) --- VAT paid on purchase invoices.
  • Net VAT --- The difference, clearly labelled either "You owe ZATCA" (when you collected more than you paid) or "ZATCA owes you" (when you paid more than you collected).

VAT Trend Chart (Plus plan and above)​

Below the VAT Settlement card, a line chart plots monthly input vs output VAT across the current year so you can spot seasonality and settlement trends at a glance.

Top Expense Categories and Payment Methods​

Two side-by-side horizontal distribution bars sit near the bottom of the dashboard:

  • Top Expense Categories --- Purchase spending broken down by category (Office Supplies, Equipment, etc.) with percentages.
  • By Payment Method --- Purchase spending broken down by how it was paid (Cash, Bank Transfer, Mada, etc.).

Hover any bar segment to see the exact amount.

Quick Stats Row​

The bottom of the dashboard shows a row of compact badges summarising the selected period:

  • Number of purchase invoices
  • Number of sales invoices (Plus plan and above)
  • Current VAT rate
  • Label of the current period selection
Drill deeper

For fuller charts and customer/product analytics, open Purchases → Overview or Sales → Sales Overview from the sidebar.

Working with Tables​

Most list views in Shaari (invoices, customers, employees, products) use a consistent table interface:

Search and Filter​

  • Search bar --- Full-text search across visible columns (invoice number, vendor name, etc.)
  • Filter buttons --- Filter by status, date range, category, or payment type
  • Sort --- Click column headers to sort ascending/descending

Bulk Actions​

Select multiple rows using checkboxes to perform bulk operations. For purchase invoices, you can:

  • Approve the selected invoices
  • Archive them
  • Delete them

Available bulk actions vary by page (customers, products, etc.) depending on what makes sense for that record type.

Pagination​

Large datasets are paginated. Use the controls at the bottom of the table to navigate between pages.

Mobile and Responsive Layout​

Shaari is fully responsive and works on all screen sizes.

Mobile (Phones)​

  • The sidebar becomes a hamburger menu accessible from the top-left (or top-right in RTL)
  • Tables switch to a card-based layout for easier reading on narrow screens
  • Forms stack vertically with full-width inputs
  • Touch-friendly buttons and controls with adequate tap targets

Tablet​

  • The sidebar can be toggled on and off
  • Tables remain in their standard layout but may hide less-important columns
  • Forms use a two-column layout where space permits

Desktop​

  • Full sidebar visible by default (collapsible)
  • Tables display all columns
  • Forms use multi-column layouts for efficiency
  • Dashboard shows all widgets in a grid layout
Install as a PWA for the Best Mobile Experience

For the smoothest mobile experience, install Shaari as a Progressive Web App. On iOS, tap the Share button in Safari and select "Add to Home Screen." On Android, Chrome will prompt you to install, or you can select "Add to Home Screen" from the browser menu. The PWA launches full-screen without browser chrome and supports push notifications.

Dark Mode​

Shaari includes a complete dark theme designed for comfortable use in low-light environments.

How to Enable​

  • Manual toggle: Click the sun/moon icon in the top bar, or the Theme entry in the profile menu at the bottom of the sidebar.
  • Follow system: Shaari can automatically match your operating system's dark/light preference.

What Changes​

Every component is themed --- backgrounds, text, inputs, charts, icons, tables, and dialogs all adapt. The dark theme uses carefully chosen contrast ratios to maintain readability while reducing eye strain.

Keyboard Navigation​

Shaari supports standard browser keyboard patterns --- Tab / Shift+Tab to move between fields, Enter to activate, Esc to close dialogs and menus. The top bar Search can also be opened with the / shortcut.

Next Steps​

Now that you know your way around the interface: