feat: new dashboard

apps/ui/src/routes/applications/[id]/index.svelte

@@ -139,9 +139,9 @@
 				projectId: application.projectId
 			});
 			return addToast({
-					message: $t('application.settings_saved'),
-					type: 'success'
-				});
+				message: $t('application.settings_saved'),
+				type: 'success'
+			});
 		} catch (error) {
 			if (name === 'debug') {
 				debug = !debug;
@@ -177,7 +177,7 @@
 			forceSave = false;
 			addToast({
 				message: 'Configuration saved.',
-				type: 'success',
+				type: 'success'
 			});
 		} catch (error) {
 			console.log(error);
@@ -222,9 +222,9 @@
 		try {
 			await get(`/applications/${id}/check?domain=${domain}`);
 			addToast({
-					message: 'DNS configuration is valid.',
-					type: 'success'
-				});
+				message: 'DNS configuration is valid.',
+				type: 'success'
+			});
 			isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
 			return true;
 		} catch (error) {
@@ -289,29 +289,21 @@
 
 <div class="mx-auto max-w-4xl px-6 py-4">
 	<div class="text-2xl font-bold">Application Usage</div>
-	<div class="mx-auto">
-		<dl class="relative mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-			<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-				<dt class=" text-sm font-medium text-white">Used Memory / Memory Limit</dt>
-				<dd class="mt-1 text-xl font-semibold text-white">
-					{usage?.MemUsage}
-				</dd>
-			</div>
+	<div class="text-center">
+		<div class="stat w-64">
+			<div class="stat-title">Used Memory / Memory Limit</div>
+			<div class="stat-value text-xl">{usage?.MemUsage}</div>
+		</div>
 
-			<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-				<dt class="truncate text-sm font-medium text-white">Used CPU</dt>
-				<dd class="mt-1 text-xl font-semibold text-white ">
-					{usage?.CPUPerc}
-				</dd>
-			</div>
+		<div class="stat w-64">
+			<div class="stat-title">Used CPU</div>
+			<div class="stat-value text-xl">{usage?.CPUPerc}</div>
+		</div>
 
-			<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
-				<dt class="truncate text-sm font-medium text-white">Network IO</dt>
-				<dd class="mt-1 text-xl font-semibold text-white ">
-					{usage?.NetIO}
-				</dd>
-			</div>
-		</dl>
+		<div class="stat w-64">
+			<div class="stat-title">Network IO</div>
+			<div class="stat-value text-xl">{usage?.NetIO}</div>
+		</div>
 	</div>
 </div>
 <div class="mx-auto max-w-4xl px-6">
@@ -324,11 +316,10 @@
 					class="btn btn-sm"
 					type="submit"
 					class:bg-applications={!loading}
-					class:loading={loading}
+					class:loading
 					class:bg-orange-600={forceSave}
 					class:hover:bg-orange-400={forceSave}
-					disabled={loading}
-					>{$t('forms.save')}</button
+					disabled={loading}>{$t('forms.save')}</button
 				>
 			{/if}
 		</div>

apps/ui/src/routes/applications/index.svelte

@@ -26,24 +26,8 @@
 	import { t } from '$lib/translations';
 	import { getDomain } from '$lib/common';
 	import { appSession } from '$lib/store';
+	import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
 
-	import Rust from '$lib/components/svg/applications/Rust.svelte';
-	import Nodejs from '$lib/components/svg/applications/Nodejs.svelte';
-	import React from '$lib/components/svg/applications/React.svelte';
-	import Svelte from '$lib/components/svg/applications/Svelte.svelte';
-	import Vuejs from '$lib/components/svg/applications/Vuejs.svelte';
-	import PHP from '$lib/components/svg/applications/PHP.svelte';
-	import Python from '$lib/components/svg/applications/Python.svelte';
-	import Static from '$lib/components/svg/applications/Static.svelte';
-	import Nestjs from '$lib/components/svg/applications/Nestjs.svelte';
-	import Nuxtjs from '$lib/components/svg/applications/Nuxtjs.svelte';
-	import Nextjs from '$lib/components/svg/applications/Nextjs.svelte';
-	import Gatsby from '$lib/components/svg/applications/Gatsby.svelte';
-	import Docker from '$lib/components/svg/applications/Docker.svelte';
-	import Astro from '$lib/components/svg/applications/Astro.svelte';
-	import Eleventy from '$lib/components/svg/applications/Eleventy.svelte';
-	import Deno from '$lib/components/svg/applications/Deno.svelte';
-	import Laravel from '$lib/components/svg/applications/Laravel.svelte';
 	ownApplications = applications.filter((application) => {
 		if (application.teams[0].id === $appSession.teamId) {
 			return application;
@@ -63,10 +47,7 @@
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl">{$t('index.applications')}</div>
 	{#if $appSession.isAdmin}
-		<button
-			on:click={newApplication}
-			class="btn btn-square btn-sm bg-applications"
-		>
+		<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
 			<svg
 				class="h-6 w-6"
 				xmlns="http://www.w3.org/2000/svg"
@@ -96,41 +77,7 @@
 					<a href="/applications/{application.id}" class="p-2 no-underline">
 						<div class="box-selection group relative hover:bg-green-600">
 							{#if application.buildPack}
-								{#if application.buildPack.toLowerCase() === 'rust'}
-									<Rust />
-								{:else if application.buildPack.toLowerCase() === 'node'}
-									<Nodejs />
-								{:else if application.buildPack.toLowerCase() === 'react'}
-									<React />
-								{:else if application.buildPack.toLowerCase() === 'svelte'}
-									<Svelte />
-								{:else if application.buildPack.toLowerCase() === 'vuejs'}
-									<Vuejs />
-								{:else if application.buildPack.toLowerCase() === 'php'}
-									<PHP />
-								{:else if application.buildPack.toLowerCase() === 'python'}
-									<Python />
-								{:else if application.buildPack.toLowerCase() === 'static'}
-									<Static />
-								{:else if application.buildPack.toLowerCase() === 'nestjs'}
-									<Nestjs />
-								{:else if application.buildPack.toLowerCase() === 'nuxtjs'}
-									<Nuxtjs />
-								{:else if application.buildPack.toLowerCase() === 'nextjs'}
-									<Nextjs />
-								{:else if application.buildPack.toLowerCase() === 'gatsby'}
-									<Gatsby />
-								{:else if application.buildPack.toLowerCase() === 'docker'}
-									<Docker />
-								{:else if application.buildPack.toLowerCase() === 'astro'}
-									<Astro />
-								{:else if application.buildPack.toLowerCase() === 'eleventy'}
-									<Eleventy />
-								{:else if application.buildPack.toLowerCase() === 'deno'}
-									<Deno />
-								{:else if application.buildPack.toLowerCase() === 'laravel'}
-									<Laravel />
-								{/if}
+								<ApplicationsIcons {application} />
 							{/if}
 
 							<div class="truncate text-center text-xl font-bold">{application.name}</div>
@@ -167,41 +114,7 @@
 						<a href="/applications/{application.id}" class="p-2 no-underline">
 							<div class="box-selection group relative hover:bg-green-600">
 								{#if application.buildPack}
-									{#if application.buildPack.toLowerCase() === 'rust'}
-										<Rust />
-									{:else if application.buildPack.toLowerCase() === 'node'}
-										<Nodejs />
-									{:else if application.buildPack.toLowerCase() === 'react'}
-										<React />
-									{:else if application.buildPack.toLowerCase() === 'svelte'}
-										<Svelte />
-									{:else if application.buildPack.toLowerCase() === 'vuejs'}
-										<Vuejs />
-									{:else if application.buildPack.toLowerCase() === 'php'}
-										<PHP />
-									{:else if application.buildPack.toLowerCase() === 'python'}
-										<Python />
-									{:else if application.buildPack.toLowerCase() === 'static'}
-										<Static />
-									{:else if application.buildPack.toLowerCase() === 'nestjs'}
-										<Nestjs />
-									{:else if application.buildPack.toLowerCase() === 'nuxtjs'}
-										<Nuxtjs />
-									{:else if application.buildPack.toLowerCase() === 'nextjs'}
-										<Nextjs />
-									{:else if application.buildPack.toLowerCase() === 'gatsby'}
-										<Gatsby />
-									{:else if application.buildPack.toLowerCase() === 'docker'}
-										<Docker />
-									{:else if application.buildPack.toLowerCase() === 'astro'}
-										<Astro />
-									{:else if application.buildPack.toLowerCase() === 'eleventy'}
-										<Eleventy />
-									{:else if application.buildPack.toLowerCase() === 'deno'}
-										<Deno />
-									{:else if application.buildPack.toLowerCase() === 'laravel'}
-										<Laravel />
-									{/if}
+									<ApplicationsIcons {application} />
 								{/if}
 
 								<div class="truncate text-center text-xl font-bold">{application.name}</div>