TorbatYar/frontend/modules/communication/features/monitoring.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { communicationApi } from "@/modules/communication/services/communication-api";
import { useTenantId } from "@/hooks/useTenantId";
import { CommunicationPageLoader, CommunicationPageError } from "@/modules/communication/pages/shared";
import { PageHeader, Card, CardContent } from "@/components/ds";
import { CommunicationBreadcrumbs } from "@/modules/communication/components/CommunicationBreadcrumbs";

export function MonitoringPage() {
  const { tenantId } = useTenantId();
  const q = useQuery({
    queryKey: ["communication", tenantId, "monitoring"],
    queryFn: () => communicationApi.monitoring.stats(tenantId!),
    enabled: !!tenantId,
  });
  if (!tenantId || q.isLoading) return <CommunicationPageLoader />;
  if (q.error) return <CommunicationPageError error={q.error} onRetry={() => q.refetch()} />;

  return (
    <div className="space-y-6">
      <CommunicationBreadcrumbs current="مانیتoring" />
      <PageHeader title="مانیتoring" description="آمار real-time از backend" />
      <Card><CardContent className="overflow-x-auto p-4"><pre className="text-xs">{JSON.stringify(q.data, null, 2)}</pre></CardContent></Card>
    </div>
  );
}

export const AnalyticsPage = function Analytics() {
  const { tenantId } = useTenantId();
  const q = useQuery({
    queryKey: ["communication", tenantId, "metrics"],
    queryFn: () => communicationApi.monitoring.metrics(tenantId!),
    enabled: !!tenantId,
  });
  if (!tenantId || q.isLoading) return <CommunicationPageLoader />;
  if (q.error) return <CommunicationPageError error={q.error} onRetry={() => q.refetch()} />;
  return (
    <div className="space-y-6">
      <CommunicationBreadcrumbs current="آنالیتیکس" />
      <PageHeader title="آنالیتیکس" description="Latency، failure rate، provider metrics" />
      <Card><CardContent className="overflow-x-auto p-4"><pre className="text-xs">{JSON.stringify(q.data, null, 2)}</pre></CardContent></Card>
    </div>
  );
};

export const ReportsPage = MonitoringPage;
export default MonitoringPage;