feat(web/services): Displayed in services page

frontend/web/app/dashboard/services/page.tsx

@@ -1,5 +1,27 @@
+"use client";
+
+import { useAtom } from "jotai";
+import { useEffect } from "react";
 import DashboardPageWrapper from "@/layouts/dashboard/DashboardPageWrapper";
+import { servicesAtom } from "@/stores";
+import services from "@/services";
+import ServicesList from "@/components/editor/ServicesList";
+
+const ServicesPage = () => {
+	const [cachedServices, setCachedServices] = useAtom(servicesAtom);
+
+	useEffect(() => {
+		(async () => {
+			const fetchedServices = await services.services.getAll();
+			setCachedServices(fetchedServices.data ?? []);
+		})();
+	}, []);
 
-const ServicesPage = () => <DashboardPageWrapper title="Services" />;
+	return (
+		<DashboardPageWrapper title="Services">
+			<ServicesList services={cachedServices} nbPerLine={1} />
+		</DashboardPageWrapper>
+	);
+};
 
 export default ServicesPage;

frontend/web/components/dashboard/menu/DashboardMenu.tsx

@@ -11,7 +11,7 @@ const DashboardMenu = ({ isFull }: DashboardMenuProps) => (
 		</li>
 		<DashboardMenuLink icon="objects-column" title="Dashboard" href="/dashboard" isFull={isFull} />
 		<DashboardMenuLink icon="bolt" title="Library" href="/dashboard/library" isFull={isFull} />
-		<DashboardMenuLink icon="grid-2-plus" title="Apps" href="/dashboard/services" isFull={isFull} />
+		<DashboardMenuLink icon="grid-2-plus" title="Services" href="/dashboard/services" isFull={isFull} />
 	</ul>
 );
 

frontend/web/components/editor/ServicesList.tsx

@@ -26,8 +26,8 @@ const ServiceElement = ({
 type ServicesListProps = {
 	services: Service[];
 	nbPerLine: number;
-	selectedServiceId: string | undefined;
-	setSelectedService: (serviceId: string) => void;
+	selectedServiceId?: string;
+	setSelectedService?: (serviceId: string) => void;
 };
 const ServicesList = ({ services, nbPerLine, selectedServiceId, setSelectedService }: ServicesListProps) => {
 	const servicesChunks = splitArrayInChunks(services, nbPerLine);
@@ -39,7 +39,9 @@ const ServicesList = ({ services, nbPerLine, selectedServiceId, setSelectedServi
 					{chunk.map((service) => (
 						<ServiceElement
 							service={service}
-							onClick={() => setSelectedService(service.id)}
+							onClick={() => {
+								if (setSelectedService) setSelectedService(service.id);
+							}}
 							key={service.id}
 							selected={selectedServiceId === service.id}
 						/>

frontend/web/next.config.js

@@ -5,9 +5,7 @@ const nextConfig = {
 		remotePatterns: [
 			{
 				protocol: "https",
-				hostname: "daisyui.com",
-				port: "",
-				pathname: "/**",
+				hostname: "**",
 			},
 		],
 	},