Dashboard Widgets

Widgets are specialized React components designed to display data, metrics, and interactive elements within a dashboard layout. In LibreApps Desktop, widgets are typically built using shadcn/ui cards and Recharts for data visualization.

What are Widgets?

In LibreApps Desktop architecture, widgets are modular components that:

1. Encapsulate Logic: Handle their own data fetching or state management.
2. Visual Consistency: Use a standard card-based container (DashboardCard).
3. Responsive: Adapt to different grid sizes (e.g., spanning 1, 2, or 4 columns).

Available Widgets

LibreApps Desktop comes with a wide variety of pre-built widgets organized by the dashboard they are used in.

📊 Analytics Widgets

Located in: src/app/[lang]/(dashboard-layout)/dashboards/analytics/_components/

Widget	Description
Overview	High-level summary of key analytics metrics.
Traffic Sources	Breakdown of where visitors are coming from (Direct, Search, Social).
Conversion Funnel	Visual representation of the user journey and drop-off rates.
Performance Over Time	Line chart showing site performance metrics.
Visitors By Country	Geographic distribution of users.
Engagement By Device	Breakdown of traffic by Desktop, Mobile, and Tablet.

🤝 CRM Widgets

Located in: src/app/[lang]/(dashboard-layout)/dashboards/crm/_components/

Widget	Description
Active Projects	List and status of ongoing customer projects.
Activity Timeline	Chronological feed of recent CRM activities.
Customer Satisfaction	Carousel showing customer feedback and NPS scores.
Lead Sources	Chart showing the origin of new leads.
Revenue Trend	Comparison of revenue performance over time.
Sales By Country	Map or chart showing sales distribution by region.
Top Sales Reps	Leaderboard of the highest-performing sales team members.

🛒 eCommerce Widgets

Located in: src/app/[lang]/(dashboard-layout)/dashboards/ecommerce/_components/

Widget	Description
Churn Rate	Analysis of customer retention and loss.
Customer Insights	Demographic and behavioral data about customers.
Invoices Table	Detailed list of recent transactions with status tracking.
Revenue By Source	Breakdown of income by product category or channel.
Top Products	List of best-selling items with sales volume.
Sales Trend	Bar or area chart showing sales growth.

Building Custom Widgets

To create a new widget, it is recommended to use the DashboardCard component as a wrapper to ensure consistent styling.

import { DashboardCard } from "@/components/dashboards/dashboard-card"

export function MyCustomWidget() {
  return (
    <DashboardCard 
      title="My Widget" 
      description="A brief description of what this widget shows."
    >
      <div className="p-4">
        {/* Your widget content, charts, or tables go here */}
        <p>Widget Content</p>
      </div>
    </DashboardCard>
  )
}

---

For more information on the underlying UI elements, see the Components section.