Wanaku MCP Server

import React, {useCallback, useEffect, useState} from "react";
import {Button, Column, Grid, Tile, ToastNotification,} from "@carbon/react";
import {ArrowRight, DataBase, Document, Renew, TextAlignJustify, Tools,} from "@carbon/icons-react";
import {useStatistics} from "../../hooks/api/use-statistics";
import {CapabilityStatistics, SystemStatistics} from "../../models";
import "./DashboardPage.scss";

export const DashboardPage: React.FC = () => {
  const [statistics, setStatistics] = useState<SystemStatistics | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const { getStatistics } = useStatistics();

  const fetchStatistics = useCallback(async () => {
    setIsLoading(true);
    return getStatistics().then((result) => {
      if (result.status !== 200 || !result.data.data) {
        setErrorMessage("Failed to fetch statistics. Please try again later.");
        setStatistics(null);
      } else {
        setStatistics(result.data.data);
      }
      setIsLoading(false);
    }).catch(() => {
      setErrorMessage("Failed to fetch statistics. Please try again later.");
      setStatistics(null);
      setIsLoading(false);
    });
  }, [getStatistics]);

  useEffect(() => {
    fetchStatistics();
  }, [fetchStatistics]);

  useEffect(() => {
    if (errorMessage) {
      const timer = setTimeout(() => {
        setErrorMessage(null);
      }, 10_000);

      return () => {
        clearTimeout(timer);
      };
    }
  }, [errorMessage]);

  if (isLoading) return <div>Loading...</div>;

  return (
    <div className="dashboard-page">
      {errorMessage && (
        <ToastNotification
          kind="error"
          title="Error"
          subtitle={errorMessage}
          onCloseButtonClick={() => setErrorMessage(null)}
          timeout={10000}
          style={{ float: "right" }}
        />
      )}
      <h1 className="title">Dashboard</h1>
      <p className="description">
        System overview showing counts for registered entities and capability
        status.
      </p>
      <div className="dashboard-actions">
        <Button
          kind="ghost"
          size="sm"
          renderIcon={Renew}
          onClick={fetchStatistics}
        >
          Refresh
        </Button>
      </div>
      {statistics && (
        <>
          <section className="dashboard-section">
            <h3 className="section-heading">Overview</h3>
            <Grid className="stats-grid">
              <Column lg={4} md={4} sm={4}>
                <Tile className="stat-tile">
                  <Tools size={24} className="stat-icon" />
                  <div className="stat-value">{statistics.toolsCount ?? 0}</div>
                  <div className="stat-label">Tools</div>
                </Tile>
              </Column>
              <Column lg={4} md={4} sm={4}>
                <Tile className="stat-tile">
                  <Document size={24} className="stat-icon" />
                  <div className="stat-value">
                    {statistics.resourcesCount ?? 0}
                  </div>
                  <div className="stat-label">Resources</div>
                </Tile>
              </Column>
              <Column lg={4} md={4} sm={4}>
                <Tile className="stat-tile">
                  <TextAlignJustify size={24} className="stat-icon" />
                  <div className="stat-value">{statistics.promptsCount ?? 0}</div>
                  <div className="stat-label">Prompts</div>
                </Tile>
              </Column>
              <Column lg={4} md={4} sm={4}>
                <Tile className="stat-tile">
                  <ArrowRight size={24} className="stat-icon" />
                  <div className="stat-value">
                    {statistics.forwardsCount ?? 0}
                  </div>
                  <div className="stat-label">Forwards</div>
                </Tile>
              </Column>
              <Column lg={4} md={4} sm={4}>
                <Tile className="stat-tile">
                  <DataBase size={24} className="stat-icon" />
                  <div className="stat-value">
                    {statistics.dataStoresCount ?? 0}
                  </div>
                  <div className="stat-label">Data Stores</div>
                </Tile>
              </Column>
            </Grid>
          </section>

          <section className="dashboard-section">
            <h3 className="section-heading">Capabilities</h3>
            <Grid className="stats-grid">
              <Column lg={8} md={4} sm={4}>
                <Tile className="capability-tile">
                  <div className="capability-title">Tool Capabilities</div>
                  <CapabilityDetails stats={statistics.toolCapabilities} />
                </Tile>
              </Column>
              <Column lg={8} md={4} sm={4}>
                <Tile className="capability-tile">
                  <div className="capability-title">Resource Capabilities</div>
                  <CapabilityDetails stats={statistics.resourceCapabilities} />
                </Tile>
              </Column>
            </Grid>
          </section>
        </>
      )}
    </div>
  );
};

interface CapabilityDetailsProps {
  stats?: CapabilityStatistics;
}

const CapabilityDetails: React.FC<CapabilityDetailsProps> = ({ stats }) => {
  return (
    <div className="capability-details">
      <div className="capability-stat capability-stat--neutral">
        <div className="capability-value">{stats?.total ?? 0}</div>
        <div className="capability-label">Total</div>
      </div>
      <div className="capability-stat capability-stat--active">
        <div className="capability-value">{stats?.healthy ?? 0}</div>
        <div className="capability-label">Healthy</div>
      </div>
      <div className="capability-stat capability-stat--inactive">
        <div className="capability-value">{stats?.down ?? 0}</div>
        <div className="capability-label">Down</div>
      </div>
    </div>
  );
};