From e4fec1e1d010a54a3738b315b0f6fe7a6da6377a Mon Sep 17 00:00:00 2001
From: Reza Rahemtola <reza.rahemtola@epitech.eu>
Date: Sun, 5 Nov 2023 23:39:13 +0100
Subject: [PATCH] feat(web): Dashboard (#229)

---
 frontend/web/app/dashboard/page.tsx | 39 ++++++++++++++++++++++++++++-
 frontend/web/locales/en-US.ts       |  4 +++
 frontend/web/locales/fr-FR.ts       |  4 +++
 frontend/web/locales/is-IS.ts       |  4 +++
 frontend/web/services/user/index.ts |  3 ++-
 frontend/web/services/user/me.ts    | 17 ++++++++++++-
 6 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/frontend/web/app/dashboard/page.tsx b/frontend/web/app/dashboard/page.tsx
index f5986c04..a7c4fd58 100644
--- a/frontend/web/app/dashboard/page.tsx
+++ b/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;
diff --git a/frontend/web/locales/en-US.ts b/frontend/web/locales/en-US.ts
index 9900819c..af8f5b9c 100644
--- a/frontend/web/locales/en-US.ts
+++ b/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",
diff --git a/frontend/web/locales/fr-FR.ts b/frontend/web/locales/fr-FR.ts
index 8b06b661..f93c77f4 100644
--- a/frontend/web/locales/fr-FR.ts
+++ b/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",
diff --git a/frontend/web/locales/is-IS.ts b/frontend/web/locales/is-IS.ts
index 5113af7f..93a56418 100644
--- a/frontend/web/locales/is-IS.ts
+++ b/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",
diff --git a/frontend/web/services/user/index.ts b/frontend/web/services/user/index.ts
index 52f03ef3..2b6e220f 100644
--- a/frontend/web/services/user/index.ts
+++ b/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;
diff --git a/frontend/web/services/user/me.ts b/frontend/web/services/user/me.ts
index b5a342c8..557cccb9 100644
--- a/frontend/web/services/user/me.ts
+++ b/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 };