Skip to main content

Dashboard Widgets - Settings Category

Overview​

The Settings category includes widgets that display workspace information, subscription status, and usage tracking for various services. These widgets help workspace owners monitor their account status and resource usage.

Who it's for​

Workspace Owner

Access & Scope​

PropertyValue
Moduledashboard-widgets
Personasworkspace-owner
ScopeWorkspace-level
UI LocationDashboard > Settings Widgets

Available Widgets​

1. Subscription Status Widget​

Widget ID: subscription-status
Default Size: 4 × 3
Status: ✅ Implemented

Description​

Displays the current subscription status of the workspace, including the end date and remaining days.

Features​

  • Status Badge: Color-coded status indicator

    • 🟢 Green: Active subscription
    • 🟡 Yellow: Warning (expiring soon)
    • 🔴 Red: Expired subscription

  • End Date: Shows the subscription end date in Arabic format

  • Days Remaining: Displays the number of days remaining until expiration

    • Shows "منتهي منذ X يوم" if expired
    • Shows "ينتهي اليوم" if expiring today
    • Shows "X يوم" for remaining days

Usage​

Add this widget to your dashboard to quickly monitor your subscription status and know when it's time to renew.

Example Display​

┌─────────────────────┐
│   [🟢 نشط]          │
│                     │
│ تاريخ الانتهاء      │
│ 15 يناير 2024       │
│                     │
│ الأيام المتبقية     │
│ 30 يوم              │
└─────────────────────┘

2. Storage Usage Widget​

Widget ID: storage-usage
Default Size: 6 × 4
Status: ✅ Implemented

Description​

Displays storage usage statistics including total storage used, remaining quota, and file count.

Features​

  • Storage Statistics: Shows used and remaining storage
  • File Count: Total number of files stored
  • Progress Bar: Visual representation of storage usage
  • Status Indicators: Color-coded warnings when approaching limits

Usage​

Monitor your workspace storage to ensure you don't exceed your plan's limits.

3. SMS Usage Widget​

Widget ID: sms-usage
Default Size: 6 × 4
Status: ✅ Implemented

Description​

Displays SMS usage statistics including message counts, costs, and balance information.

Features​

  • Message Statistics:

    • Total messages
    • Sent messages
    • Failed messages
    • Pending messages

  • Financial Information (all in USD):

    • Total cost
    • Total paid
    • Remaining balance
    • Cost per message

  • Balance Status:

    • 🟢 Green: Sufficient balance
    • 🟡 Yellow: Low balance
    • 🔴 Red: Insufficient balance

Usage​

Track your SMS usage and costs to manage your messaging budget effectively.

Example Display​

┌─────────────────────────────┐
│ إجمالي الرسائل: 1,250       │
│ المرسلة: 1,200              │
│ الفاشلة: 30                 │
│ المعلقة: 20                 │
│                             │
│ الرصيد المتبقي: [🟢 كافي]   │
│ $25.50                      │
│                             │
│ التكلفة لكل رسالة: $0.10    │
└─────────────────────────────┘

4. AI Usage Widget​

Widget ID: ai-usage
Default Size: 6 × 4
Status: ✅ Implemented

Description​

Displays AI tool usage statistics including usage counts, costs, and balance information.

Features​

  • Usage Statistics:

    • Total usages
    • Completed usages
    • Failed usages
    • Pending usages

  • Financial Information (all in USD):

    • Total cost
    • Total paid
    • Remaining balance

  • Balance Status:

    • 🟢 Green: Sufficient balance
    • 🟡 Yellow: Low balance
    • 🔴 Red: Insufficient balance

Usage​

Monitor your AI feature usage and costs to manage your AI services budget.

Example Display​

┌─────────────────────────────┐
│ إجمالي الاستخدامات: 450     │
│ المكتملة: 420               │
│ الفاشلة: 20                 │
│ المعلقة: 10                 │
│                             │
│ الرصيد المتبقي: [🟢 كافي]   │
│ $10.25                      │
└─────────────────────────────┘

5. Workspace Info Widget​

Widget ID: workspace-info
Default Size: 6 × 5
Status: ✅ Implemented

Description​

Displays comprehensive workspace information including basic details, contact information, settings, and metadata.

Features​

Basic Information Section:

  • Workspace name
  • Slogan (if available)
  • Business category
  • Creation date

Contact Information Section:

  • Email address
  • Phone number with verification status
    • ✓ Verified (green badge)
    • ✗ Not verified (gray badge)

Settings Section:

  • Currency with symbol
  • Subscription status badge
  • Discount percentage (if applicable)

Additional Information Section:

  • Last update date
  • Working hours summary

Usage​

Quick reference for all essential workspace information in one place.

Example Display​

┌─────────────────────────────┐
│ 📋 المعلومات الأساسية       │
│ الاسم: My Workspace          │
│ الشعار: Best Services        │
│ الفئة: salon                 │
│ تاريخ الإنشاء: 15 يناير 2024│
│                             │
│ 📞 معلومات الاتصال          │
│ البريد: info@example.com    │
│ الهاتف: +1234567890 [✓]     │
│                             │
│ ⚙️ الإعدادات                │
│ العملة: ₪ ILS               │
│ الاشتراك: [نشط]             │
│ الخصم: 10%                   │
│                             │
│ 📅 معلومات إضافية           │
│ آخر تحديث: 20 يناير 2024   │
│ ساعات العمل: محدد           │
└─────────────────────────────┘

Adding Widgets to Dashboard​

  1. Click the "إدارة الويدجت" (Manage Widgets) button on your dashboard
  2. Select the "الإعدادات" (Settings) category
  3. Click "إضافة" (Add) on any widget you want to add
  4. The widget will appear on your dashboard

Customizing Widgets​

  • Resize: Drag the corners of any widget to resize it
  • Reposition: Drag widgets to rearrange them on the dashboard
  • Remove: Click the remove button on any widget to delete it
  • Refresh Data: Click the refresh icon (↻) on any widget to manually refresh its data
  • Customize Settings: Click the settings icon (⚙️) on any widget to:
    • Set a custom title
    • Change the background color
    • Select chart type (for chart widgets)

Widget Settings​

Each widget supports the following customization options:

Custom Title​

Override the default widget name with your own custom title. This is useful for:

  • Personalizing widget names
  • Adding context or notes
  • Organizing widgets by project or department

Background Color​

Set a custom background color for the widget using a color picker. You can:

  • Use predefined colors
  • Pick any color using the color picker
  • Enter a CSS color value (hex, rgb, or named color)

Chart Type (Chart Widgets Only)​

For chart widgets that support multiple chart types, you can choose from:

  • خطي (Line Chart): Best for showing trends over time
  • أعمدة (Bar Chart): Ideal for comparing values between categories
  • دائري (Pie Chart): Perfect for showing proportions and distributions
  • منطقة (Area Chart): Useful for cumulative values and stacked data

Chart widgets that support chart type customization:

  • sessions-by-service
  • sessions-by-staff
  • sessions-status-chart
  • sessions-monthly-chart
  • revenue-monthly-chart
  • revenue-by-service
  • revenue-by-staff
  • clients-by-tag
  • evaluation-distribution
  • vcard-monthly-stats
  • visits-today-chart

All settings are saved per widget instance and persist across sessions.

Best Practices​

  • Subscription Status: Keep this widget visible to monitor your subscription
  • Usage Widgets: Add SMS and AI usage widgets if you frequently use these services
  • Workspace Info: Useful for quick reference of workspace details
  • Storage Usage: Monitor regularly to avoid exceeding limits