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 --- Language toggle, notifications, dark mode, and profile menu
- Sidebar --- Primary navigation to all modules and settings
- Main Content --- The active page, forms, tables, and dashboards
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.
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.
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 (Enterprise plan)
Profile Menu
Click your name or avatar in the top bar to access:
- My Profile --- View and edit your personal information
- Settings --- Jump to the settings area
- Dark Mode Toggle --- Switch between light and dark themes
- Sign Out --- End your current session
Sidebar Navigation
The sidebar is your primary navigation hub. It organizes all of Shaari's modules into logical groups. Sections expand and collapse to keep the sidebar clean.
Purchases Group
| Menu Item | Description |
|---|---|
| Invoices | View, search, filter, and manage all purchase invoices. Upload new invoices here. |
| Categories | Create and manage invoice categories (e.g., Office Supplies, Equipment, Marketing). |
| Payment Types | Define payment methods (e.g., Cash, Bank Transfer, Credit Card, Mada). |
Sales Group (Plus plan and above)
| Menu Item | Description |
|---|---|
| Invoices | Create and manage sales invoices. View ZATCA submission status. |
| Quotations | Draft quotations, send to customers, and convert to invoices or contracts. |
| Contracts | Manage sales contracts with digital signature support. |
| Customers | Customer database with contact details, VAT numbers, and National Address. |
| Products | Product catalog with pricing, SKU, barcode, and inventory tracking. |
| Analytics | Sales performance dashboards with charts and KPIs. |
HR Group (Enterprise plan)
| Menu Item | Description |
|---|---|
| Employees | Employee records, personal details, documents, and employment history. |
| Departments | Organizational structure and department management. |
| Attendance | Daily attendance tracking with check-in/check-out records. |
| Leave | Leave requests, approvals, and balance tracking. |
| Payroll | Salary structures, payroll processing, and salary slip generation. |
| Loans | Employee loan management with installment tracking. |
| Warnings | Employee warning and disciplinary action records. |
| Documents | Centralized document storage for employee files (contracts, IDs, certificates). |
| Custody | Cash custody assignment, daily expense reports, and balance tracking. |
Projects Group (Enterprise plan)
| Menu Item | Description |
|---|---|
| Projects | Create and manage projects with status tracking. |
| Materials | Track material costs per project. |
| Expenses | Record and categorize project expenses. |
| Subcontracts | Manage subcontractor contracts and payments. |
Settings Group
| Menu Item | Description |
|---|---|
| Account | Company profile, VAT number, CR number, logo, and address. |
| Billing | Subscription plan, payment history, and upgrade options. |
| ZATCA Setup | ZATCA Phase 2 configuration and onboarding wizard (Enterprise plan). |
| 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. |
| Team | Invite members, assign roles, and manage permissions. |
| Activity Log | Full audit trail of all actions performed in your account. |
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.
Spending Summary
- Total Purchases --- Cumulative amount of all purchase invoices
- This Month --- Total spending for the current month
- Last Month --- Total spending for the previous month, with a percentage change indicator
Monthly Spending Chart
A bar or line chart showing your purchase spending over the past 6-12 months. Hover over data points to see exact amounts. The chart respects your locale formatting.
Recent Invoices
A quick-access list showing your most recently uploaded or created invoices. Each entry shows:
- Invoice number
- Vendor/customer name
- Amount and date
- Current status (Draft, Pending, Approved, etc.)
Click any invoice to open its detail view.
Category Breakdown
A visual breakdown (pie or donut chart) of your spending across categories. Helps identify where your budget is going at a glance.
Sales Overview (Plus plan and above)
When the Sales module is active, additional widgets appear:
- Total Revenue --- Sum of all sales invoices
- Outstanding Receivables --- Amount due from unpaid invoices
- Top Customers --- Your highest-revenue customers this period
- Quotation Conversion Rate --- Percentage of quotations that became invoices
Quick Actions
The dashboard includes shortcut buttons for common tasks:
- Upload Invoice --- Jump directly to the purchase invoice upload screen
- Create Sales Invoice --- Start a new sales invoice (Plus and above)
- Add Customer --- Open the customer creation form (Plus and above)
- View Reports --- Navigate to the analytics section
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:
- Delete selected items
- Change status (e.g., mark as approved)
- Assign categories
Pagination
Large datasets are paginated. Use the pagination controls at the bottom of the table to navigate pages or change the number of rows per page (10, 25, 50, 100).
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
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 theme toggle in the profile menu or top bar
- 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 keyboard navigation patterns:
- Tab / Shift+Tab --- Move between interactive elements
- Enter --- Activate buttons, submit forms, open links
- Escape --- Close dialogs and dropdown menus
- Arrow keys --- Navigate within menus and date pickers
Next Steps
Now that you know your way around the interface:
- Plans & Billing --- Understand what each plan offers and how to upgrade
- Uploading Invoices --- Deep dive into the purchase invoice upload process
- AI Extraction --- Learn how Shaari's AI reads your invoices
- Managing Customers --- Set up your customer database (Plus plan)