Add monitoring features and alert configurations

- Introduced new system metrics tracking with the ability to save and retrieve metrics such as CPU usage, memory usage, and network latency.
- Added alert configuration functionality, allowing users to set thresholds for metrics and receive notifications via email or chat.
- Updated the sidebar component to include a new "Monitorar SGSE" card for real-time system monitoring.
- Enhanced the package dependencies with `papaparse` and `svelte-chartjs` for improved data handling and charting capabilities.
- Updated the schema to support new tables for system metrics and alert configurations.

apps/web/src/lib/components/ti/charts/BarChart.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { Chart, registerables } from 'chart.js';
+
+  Chart.register(...registerables);
+
+  type Props = {
+    data: any;
+    title?: string;
+    height?: number;
+    horizontal?: boolean;
+  };
+
+  let { data, title = '', height = 300, horizontal = false }: Props = $props();
+  
+  let canvas: HTMLCanvasElement;
+  let chart: Chart | null = null;
+
+  onMount(() => {
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        chart = new Chart(ctx, {
+          type: horizontal ? 'bar' : 'bar',
+          data: data,
+          options: {
+            indexAxis: horizontal ? 'y' : 'x',
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                display: true,
+                position: 'top',
+                labels: {
+                  color: '#a6adbb',
+                  font: {
+                    size: 12,
+                    family: "'Inter', sans-serif",
+                  },
+                  usePointStyle: true,
+                  padding: 15,
+                }
+              },
+              title: {
+                display: !!title,
+                text: title,
+                color: '#e5e7eb',
+                font: {
+                  size: 16,
+                  weight: 'bold',
+                  family: "'Inter', sans-serif",
+                }
+              },
+              tooltip: {
+                backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                titleColor: '#fff',
+                bodyColor: '#fff',
+                borderColor: '#570df8',
+                borderWidth: 1,
+                padding: 12,
+              }
+            },
+            scales: {
+              x: {
+                grid: {
+                  color: 'rgba(255, 255, 255, 0.05)',
+                },
+                ticks: {
+                  color: '#a6adbb',
+                  font: {
+                    size: 11,
+                  }
+                }
+              },
+              y: {
+                beginAtZero: true,
+                grid: {
+                  color: 'rgba(255, 255, 255, 0.05)',
+                },
+                ticks: {
+                  color: '#a6adbb',
+                  font: {
+                    size: 11,
+                  }
+                }
+              }
+            },
+            animation: {
+              duration: 750,
+              easing: 'easeInOutQuart'
+            }
+          }
+        });
+      }
+    }
+  });
+
+  $effect(() => {
+    if (chart && data) {
+      chart.data = data;
+      chart.update('none');
+    }
+  });
+
+  onDestroy(() => {
+    if (chart) {
+      chart.destroy();
+    }
+  });
+</script>
+
+<div style="height: {height}px;">
+  <canvas bind:this={canvas}></canvas>
+</div>
+