feat(web): Dashboard (#229)

frontend/web/app/dashboard/page.tsx

@@ -2,12 +2,49 @@
 
 import { useTranslation } from "react-i18next";
 
+import { useEffect, useState } from "react";
 import DashboardPageWrapper from "@/layouts/dashboard/DashboardPageWrapper";
+import { UserStats } from "@/services/user/me";
+import services from "@/services";
 
 const DashboardPage = () => {
+	const [stats, setStats] = useState<UserStats | null>(null);
 	const { t } = useTranslation();
 
-	return <DashboardPageWrapper title={t("dashboard.title")} />;
+	useEffect(() => {
+		(async () => {
+			const response = await services.user.getStats();
+			setStats(response.data ?? null);
+		})();
+	}, []);
+
+	return (
+		<DashboardPageWrapper title={t("dashboard.title")}>
+			{stats && (
+				<div className="stats shadow bg-primary w-full">
+					<div className="stat place-items-center">
+						<div className="stat-title">{t("landing.workflows")}</div>
+						<div className="stat-value text-secondary">{stats.workflows}</div>
+					</div>
+
+					<div className="stat place-items-center bg-primary">
+						<div className="stat-title">{t("landing.active")}</div>
+						<div className="stat-value text-secondary">{stats.activeWorkflows}</div>
+					</div>
+
+					<div className="stat place-items-center bg-primary">
+						<div className="stat-title">{t("landing.errors")}</div>
+						<div className="stat-value text-secondary">{stats.workflowErrors}</div>
+					</div>
+
+					<div className="stat place-items-center bg-primary">
+						<div className="stat-title">{t("landing.runs")}</div>
+						<div className="stat-value text-secondary">{stats.workflowRuns}</div>
+					</div>
+				</div>
+			)}
+		</DashboardPageWrapper>
+	);
 };
 
 export default DashboardPage;

frontend/web/locales/en-US.ts

@@ -93,6 +93,10 @@ const translations = {
 		actions: {
 			downloadApk: " Download APK",
 		},
+		workflows: "Workflows",
+		active: "Active workflows",
+		errors: "Workflow errors",
+		runs: "Workflow runs",
 	},
 	actions: {
 		rename: "Rename",

frontend/web/locales/fr-FR.ts

@@ -94,6 +94,10 @@ const translations = {
 		actions: {
 			downloadApk: " Télécharger l'APK",
 		},
+		workflows: "Workflows",
+		active: "Workflows actifs",
+		errors: "Erreurs des workflows",
+		runs: "Workflow lancés",
 	},
 	actions: {
 		rename: "Renommer",

frontend/web/locales/is-IS.ts

@@ -93,6 +93,10 @@ const translations = {
 		actions: {
 			downloadApk: " Sækja APK",
 		},
+		workflows: "Verkflæði",
+		active: "Virk vinnuflæði",
+		errors: "Verkflæðisvillur",
+		runs: "Verkflæði sett af stað",
 	},
 	actions: {
 		rename: "Endurnefna",

frontend/web/services/user/index.ts

@@ -1,8 +1,9 @@
-import { getProfile, updateProfile } from "@/services/user/me";
+import { getProfile, getStats, updateProfile } from "@/services/user/me";
 
 const userService = {
 	getProfile,
 	updateProfile,
+	getStats,
 };
 
 export default userService;

frontend/web/services/user/me.ts

@@ -21,4 +21,19 @@ const updateProfile = async (data: UserProfileUpdate): Promise<ServiceReturn<voi
 	}
 };
 
-export { getProfile, updateProfile };
+export type UserStats = {
+	workflowRuns: number;
+	workflowErrors: number;
+	workflows: number;
+	activeWorkflows: number;
+};
+const getStats = async (): Promise<ServiceReturn<UserStats>> => {
+	try {
+		const response = await axiosInstance.get<UserStats>(`/workflows/summary`);
+		return { data: response.data, error: undefined };
+	} catch (error) {
+		return { data: null, error: SERVICE_ERROR_UNKNOWN };
+	}
+};
+
+export { getProfile, updateProfile, getStats };