feat: display dashboard (#234)

Refs: closes #191

## Summary

Display dashboard.

web/package.json

@@ -68,6 +68,7 @@
 		]
 	},
 	"dependencies": {
+		"chart.js": "^4.4.3",
 		"ol": "^9.1.0",
 		"openapi-fetch": "^0.9.5"
 	},

web/src/lib/components/table/Table.svelte

@@ -63,6 +63,13 @@
 	 */
 	export let sortingOrder: SortingDirection | null = null;
 
+	/**
+	 * A space-separated list of the classes of the element.
+	 * @default ""
+	 */
+	let className: string = "";
+	export { className as class };
+
 	/**
 	 * Map that contains the sorting state for each column.
 	 * @example
@@ -174,7 +181,7 @@
 	$: columnsSorting = getColumnsSorting(columns, sortingField, sortingOrder);
 </script>
 
-<div class="table-container">
+<div class={`table-container ${className}`}>
 	<table>
 		<thead>
 			<tr>

web/src/lib/utils/chart.ts

@@ -0,0 +1,41 @@
+import {
+	Chart,
+	LineElement,
+	LineController,
+	LinearScale,
+	CategoryScale,
+	PointElement,
+	Tooltip,
+	Legend,
+	DoughnutController,
+	ArcElement,
+	BarElement,
+	BarController,
+	Filler,
+} from "chart.js";
+import { getCssVariable } from "./cssVars";
+
+/**
+ * Set up Chart.js with the required components for the application and a
+ * custom theme.
+ */
+export function setupChart() {
+	Chart.register(
+		LineElement,
+		LineController,
+		LinearScale,
+		CategoryScale,
+		PointElement,
+		Tooltip,
+		Legend,
+		DoughnutController,
+		ArcElement,
+		BarElement,
+		BarController,
+		Filler,
+	);
+
+	Chart.defaults.font.family = "Inter, sans-serif";
+	Chart.defaults.font.lineHeight = 1.5;
+	Chart.defaults.color = getCssVariable("--gray-900");
+}

web/src/lib/utils/color.ts

@@ -0,0 +1,9 @@
+/**
+ * Retrieves a color with an opacity.
+ * @param hex Color hexadecimal value.
+ * @param opacity Value between 0 and 1.
+ * @returns Hexadecimal color with an opacity.
+ */
+export function getColorWithOpacity(hex: string, opacity: number) {
+	return `${hex}${Math.floor(opacity * 255).toString(16)}`;
+}

web/src/locales/en.json

@@ -99,6 +99,12 @@
 	"signOut.button": "Sign out",
 	"myInformation": "My information",
 	"dashboard": "Dashboard",
+	"dashboard.activeEmployees": "Active employees",
+	"dashboard.amountOfWarehouses": "Number of warehouses",
+	"dashboard.amountOfTrucks": "Number of trucks",
+	"dashboard.containersAdded": "Containers added",
+	"dashboard.containersByCategory": "Containers by category",
+	"dashboard.containersByMunicipality": "Containers by municipality",
 	"map": "Map",
 	"departure": "Departure",
 	"arrival": "Arrival",

web/src/locales/pt.json

@@ -98,6 +98,12 @@
 	"signOut.button": "Terminar sessão",
 	"myInformation": "Minha informação",
 	"dashboard": "Painel",
+	"dashboard.activeEmployees": "Colaboradores ativos",
+	"dashboard.amountOfWarehouses": "Número de armazéns",
+	"dashboard.amountOfTrucks": "Número de camiões",
+	"dashboard.containersAdded": "Contentores adicionados",
+	"dashboard.containersByCategory": "Contentores por categoria",
+	"dashboard.containersByMunicipality": "Contentores por município",
 	"map": "Mapa",
 	"departure": "Partida",
 	"arrival": "Chegada",

web/src/locales/schema.json

@@ -295,6 +295,24 @@
 		"dashboard": {
 			"type": "string"
 		},
+		"dashboard.activeEmployees": {
+			"type": "string"
+		},
+		"dashboard.amountOfWarehouses": {
+			"type": "string"
+		},
+		"dashboard.amountOfTrucks": {
+			"type": "string"
+		},
+		"dashboard.containersAdded": {
+			"type": "string"
+		},
+		"dashboard.containersByCategory": {
+			"type": "string"
+		},
+		"dashboard.containersByMunicipality": {
+			"type": "string"
+		},
 		"map": {
 			"type": "string"
 		},

web/src/main.ts

@@ -1,5 +1,8 @@
 import "./app.css";
 import App from "./App.svelte";
+import { setupChart } from "./lib/utils/chart";
+
+setupChart();
 
 const app = new App({
 	target: document.getElementById("app")!,

web/src/routes/backOffice/components/BackOfficeLayout.svelte

@@ -14,35 +14,23 @@
 	}
 </script>
 
-<div class="main">
-	<TopBar />
-	<div class="container">
-		<SideBar />
-		<div class="layout">
-			<slot />
-		</div>
+<TopBar />
+<div class="content">
+	<SideBar />
+	<div class="layout">
+		<slot />
 	</div>
 </div>
 
 <style>
-	.main {
-		min-height: 100vh;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.container {
-		flex: 1;
+	.content {
 		display: flex;
+		height: calc(100vh - var(--top-bar-height));
 	}
 
 	.layout {
-		display: flex;
 		flex: 1;
+		display: grid;
 		overflow: auto;
-
-		& > * {
-			flex: 1;
-		}
 	}
 </style>

web/src/routes/backOffice/components/Card.svelte

@@ -5,14 +5,20 @@
 	 */
 	let className: string = "";
 	export { className as class };
+
+	/**
+	 * The HTML element that's rendered.
+	 * @default "main"
+	 */
+	export let element: string = "main";
 </script>
 
-<main class={className}>
+<svelte:element this={element} class={`card ${className}`}>
 	<slot />
-</main>
+</svelte:element>
 
 <style>
-	main {
+	.card {
 		padding: 2rem;
 		background-color: var(--white);
 		border: 1px solid var(--gray-300);

web/src/routes/backOffice/components/sidebar/SideBar.svelte

@@ -102,7 +102,6 @@
 		padding: 1rem;
 		background-color: var(--white);
 		border-right: 1px solid var(--gray-300);
-		flex-shrink: 0;
 	}
 
 	ul {

web/src/routes/backOffice/components/topbar/TopBar.svelte

@@ -5,18 +5,23 @@
 	import EmployeeMenu from "./EmployeeMenu.svelte";
 </script>
 
-<div class="top-bar">
+<nav>
 	<Link to={BackOfficeRoutes.DASHBOARD}>
 		<div class="logo-container">
 			<Logo />
 			<h1>EcoMap</h1>
 		</div>
 	</Link>
 	<EmployeeMenu />
-</div>
+</nav>
 
 <style>
-	.top-bar {
+	:root {
+		--top-bar-height: 4rem;
+	}
+
+	nav {
+		height: var(--top-bar-height);
 		display: flex;
 		justify-content: space-between;
 		justify-items: center;

web/src/routes/backOffice/dashboard/Dashboard.svelte

@@ -1,5 +1,70 @@
 <script lang="ts">
+	import ecomapHttpClient from "../../../lib/clients/ecomap/http";
 	import { t } from "../../../lib/utils/i8n";
+	import { getBatchPaginatedResponse } from "../../../lib/utils/request";
+	import ContainersAdded from "./partials/ContainersAdded.svelte";
+	import ContainersByCategory from "./partials/ContainersByCategory.svelte";
+	import ContainersByMunicipality from "./partials/ContainersByMunicipality.svelte";
+	import TruckAmount from "./partials/TruckAmount.svelte";
+	import WarehouseAmount from "./partials/WarehouseAmount.svelte";
+	import ActiveEmployees from "./partials/ActiveEmployees.svelte";
+
+	/**
+	 * Retrieves the containers to be displayed in the charts.
+	 * @returns Containers.
+	 */
+	async function getContainers() {
+		const containers = await getBatchPaginatedResponse(
+			async (limit, offset) => {
+				const res = await ecomapHttpClient.GET("/containers", {
+					params: {
+						query: {
+							offset,
+							limit,
+							sort: "createdAt",
+							order: "asc",
+						},
+					},
+				});
+
+				if (res.error) {
+					return { total: 0, items: [] };
+				}
+
+				return { total: res.data.total, items: res.data.containers };
+			},
+		);
+
+		return containers;
+	}
+
+	let containersPromise = getContainers();
 </script>
 
-<main>{$t("dashboard")}</main>
+<main class="page-layout">
+	<h1>{$t("dashboard")}</h1>
+	<div class="dashboard-content">
+		<ActiveEmployees />
+		<WarehouseAmount />
+		<TruckAmount />
+		<ContainersAdded {containersPromise} />
+		<ContainersByCategory {containersPromise} />
+		<ContainersByMunicipality {containersPromise} />
+	</div>
+</main>
+
+<style>
+	h1 {
+		font: var(--text-2xl-semibold);
+	}
+
+	.dashboard-content {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-areas:
+			"activeEmployees warehouseAmount truckAmount"
+			"containersAdded containersAdded containersByCategory"
+			"containersByMunicipality containersByMunicipality containersByMunicipality";
+		gap: 1rem;
+	}
+</style>