import { useEffect } from "react"; import { observer } from "mobx-react-lite"; import Link from "next/link"; // hooks import { useDashboard } from "hooks/store"; // components import { WidgetLoader } from "components/dashboard/widgets"; // helpers import { renderFormattedPayloadDate } from "helpers/date-time.helper"; // types import { TOverviewStatsWidgetResponse } from "@plane/types"; import { cn } from "helpers/common.helper"; export type WidgetProps = { dashboardId: string; workspaceSlug: string; }; const WIDGET_KEY = "overview_stats"; export const OverviewStatsWidget: React.FC = observer((props) => { const { dashboardId, workspaceSlug } = props; // store hooks const { fetchWidgetStats, getWidgetStats } = useDashboard(); // derived values const widgetStats = getWidgetStats(workspaceSlug, dashboardId, WIDGET_KEY); const today = renderFormattedPayloadDate(new Date()); const STATS_LIST = [ { key: "assigned", title: "Issues assigned", count: widgetStats?.assigned_issues_count, link: `/${workspaceSlug}/workspace-views/assigned`, }, { key: "overdue", title: "Issues overdue", count: widgetStats?.pending_issues_count, link: `/${workspaceSlug}/workspace-views/assigned/?target_date=${today};before`, }, { key: "created", title: "Issues created", count: widgetStats?.created_issues_count, link: `/${workspaceSlug}/workspace-views/created`, }, { key: "completed", title: "Issues completed", count: widgetStats?.completed_issues_count, link: `/${workspaceSlug}/workspace-views/assigned?state_group=completed`, }, ]; useEffect(() => { fetchWidgetStats(workspaceSlug, dashboardId, { widget_key: WIDGET_KEY, }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); if (!widgetStats) return ; return (
{STATS_LIST.map((stat, index) => (
{stat.count}

{stat.title}

))}
); });