@mounaji_npm/dashboard

Dashboard metrics, usage widgets, and activity feed components for Mounaji-based projects. All components are styled via @mounaji_npm/tokens CSS variables.

Install

npm install @mounaji_npm/tokens @mounaji_npm/dashboard

Quick Start

import { TokensProvider } from '@mounaji_npm/tokens';
import { StatGrid, UsageBar, ActivityFeed } from '@mounaji_npm/dashboard';

const metrics = [
  { label: 'Conversations', value: 1240, trend: '+12%', icon: '💬', variant: 'primary' },
  { label: 'Active Users',  value: 87,   trend: '+3%',  icon: '👤', variant: 'success' },
  { label: 'Avg. Response', value: '1.2s', trend: '-8%', icon: '⚡', variant: 'accent' },
  { label: 'Errors',        value: 4,    trend: '-50%', icon: '⚠️', variant: 'warning' },
];

export default function DashboardPage() {
  return (
    <TokensProvider>
      <StatGrid metrics={metrics} />

      <UsageBar label="Messages this month" used={800} total={1000} unit="msgs" />
      <UsageBar label="Storage"             used={4.2} total={10}   unit="GB" />

      <ActivityFeed items={recentActivity} />
    </TokensProvider>
  );
}

Components

StatGrid

Responsive grid of MetricCard components. Automatically lays out in 2–4 columns depending on screen width.

import { StatGrid } from '@mounaji_npm/dashboard';

<StatGrid
  metrics={[
    { label: 'Total Conversations', value: 1240,  trend: '+12%', icon: '💬', variant: 'primary' },
    { label: 'Active Users',        value: 87,    trend: '+3%',  icon: '👤', variant: 'success' },
    { label: 'Knowledge Bases',     value: 5,     trend: '0%',   icon: '📚' },
    { label: 'API Calls Today',     value: '2.3k', trend: '+18%', icon: '🔗', variant: 'accent' },
  ]}
/>

MetricCard

Single KPI card. Shows a value, trend indicator, icon, and label.

import { MetricCard } from '@mounaji_npm/dashboard';

<MetricCard
  label="Total Conversations"
  value={1240}
  trend="+12%"
  trendUp={true}
  icon="💬"
  variant="primary"
/>

| Prop | Type | Default | Description | |---|---|---|---| | label | string | — | Card title | | value | string | number | — | Main displayed value | | trend | string | — | Trend text (e.g. "+12%") | | trendUp | boolean | true | true = green, false = red | | icon | string | ReactNode | — | Emoji or icon component | | variant | string | 'default' | default primary success warning danger accent |

UsageBar

Plan usage progress bar with automatic color shifts: normal → warning (75%) → danger (90%).

import { UsageBar } from '@mounaji_npm/dashboard';

<UsageBar label="Messages" used={800}  total={1000} unit="msgs" />
<UsageBar label="Storage"  used={9.5}  total={10}   unit="GB" />
<UsageBar label="API Keys" used={2}    total={5}    unit="keys" showFraction />

| Prop | Type | Default | Description | |---|---|---|---| | label | string | — | Label above the bar | | used | number | — | Current usage | | total | number | — | Limit / maximum | | unit | string | — | Unit label (e.g. msgs, GB) | | showFraction | boolean | false | Show 2 / 5 keys instead of percentage |

Automatic color thresholds:

| Usage % | Color | |---|---| | < 75% | Primary | | 75–90% | Warning | | > 90% | Danger |

ActivityFeed

Vertical timeline of recent events.

import { ActivityFeed } from '@mounaji_npm/dashboard';

<ActivityFeed
  items={[
    { id: '1', icon: '💬', text: 'New conversation started by John', time: '2 min ago' },
    { id: '2', icon: '📄', text: 'Document "Q4 Report.pdf" processed', time: '15 min ago' },
    { id: '3', icon: '🔗', text: 'WhatsApp integration connected', time: '1 hour ago' },
    { id: '4', icon: '⚠️', text: 'Rate limit reached for assistant "Support Bot"', time: '3 hours ago', variant: 'warning' },
  ]}
  maxItems={10}
/>

| Prop | Type | Default | Description | |---|---|---|---| | items | array | [] | Activity items (see shape below) | | maxItems | number | 20 | Truncate list to N items | | emptyState | ReactNode | default | Shown when empty |

Item shape:

| Field | Type | Description | |---|---|---| | id | string | Unique key | | icon | string | ReactNode | Emoji or icon | | text | string | Activity description | | time | string | Relative timestamp (e.g. "2 min ago") | | variant | string | default success warning danger — colors the dot |

Full Dashboard Page Example

import { useState, useEffect } from 'react';
import { TokensProvider } from '@mounaji_npm/tokens';
import { StatGrid, UsageBar, ActivityFeed } from '@mounaji_npm/dashboard';

export default function Dashboard() {
  const [stats, setStats] = useState(null);

  useEffect(() => {
    fetch('/api/dashboard/stats')
      .then(r => r.json())
      .then(setStats);
  }, []);

  if (!stats) return <p>Loading…</p>;

  return (
    <TokensProvider>
      <StatGrid metrics={[
        { label: 'Conversations', value: stats.totalConversations, trend: stats.conversationTrend, icon: '💬', variant: 'primary' },
        { label: 'Active Users',  value: stats.activeUsers,        trend: stats.userTrend,         icon: '👤', variant: 'success' },
        { label: 'Documents',     value: stats.documents,          trend: '0%',                    icon: '📄' },
        { label: 'Tokens Used',   value: stats.tokensFormatted,    trend: stats.tokenTrend,        icon: '⚡', variant: 'accent' },
      ]} />

      <h2>Plan Usage</h2>
      <UsageBar label="Messages" used={stats.usage.messages} total={stats.plan.messageLimit} unit="msgs" />
      <UsageBar label="Storage"  used={stats.usage.storageGb} total={stats.plan.storageLimit} unit="GB" />

      <h2>Recent Activity</h2>
      <ActivityFeed items={stats.recentActivity} />
    </TokensProvider>
  );
}