refactor: update components to use lucide icons and improve structure

- Replaced SVG icons with lucide-svelte components across various files for consistency and improved performance.
- Refactored ActionGuard, ErrorModal, FileUpload, and other components to enhance readability and maintainability.
- Updated the dashboard pages to include new icons and improved layout for better user experience.
- Enhanced StatsCard component to support dynamic icon rendering, allowing for more flexible usage.
- Improved overall styling and structure in multiple components to align with design standards.

apps/web/src/lib/components/ti/StatsCard.svelte

@@ -1,39 +1,42 @@
-<script lang="ts">
-  interface Props {
-    title: string;
-    value: string | number;
-    icon?: string;
-    trend?: {
-      value: number;
-      isPositive: boolean;
-    };
-    description?: string;
-    color?: "primary" | "secondary" | "accent" | "success" | "warning" | "error";
-  }
-
-  let { title, value, icon, trend, description, color = "primary" }: Props = $props();
-</script>
-
-<div class="stats shadow bg-base-100">
-  <div class="stat">
-    <div class="stat-figure text-{color}">
-      {#if icon}
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current">
-          {@html icon}
-        </svg>
-      {/if}
-    </div>
-    <div class="stat-title">{title}</div>
-    <div class="stat-value text-{color}">{value}</div>
-    {#if description}
-      <div class="stat-desc">{description}</div>
-    {/if}
-    {#if trend}
-      <div class="stat-desc {trend.isPositive ? 'text-success' : 'text-error'}">
-        {trend.isPositive ? '↗︎' : '↘︎'} {Math.abs(trend.value)}%
-      </div>
-    {/if}
-  </div>
-</div>
-
-
+<script lang="ts">
+  import type { Component } from "svelte";
+
+  interface Props {
+    title: string;
+    value: string | number;
+    Icon?: Component;
+    icon?: string; // Mantido para compatibilidade retroativa
+    trend?: {
+      value: number;
+      isPositive: boolean;
+    };
+    description?: string;
+    color?: "primary" | "secondary" | "accent" | "success" | "warning" | "error";
+  }
+
+  let { title, value, Icon, icon, trend, description, color = "primary" }: Props = $props();
+</script>
+
+<div class="stats shadow bg-base-100">
+  <div class="stat">
+    <div class="stat-figure text-{color}">
+      {#if Icon}
+        <svelte:component this={Icon} class="inline-block w-8 h-8 stroke-current" strokeWidth={2} />
+      {:else if icon}
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current">
+          {@html icon}
+        </svg>
+      {/if}
+    </div>
+    <div class="stat-title">{title}</div>
+    <div class="stat-value text-{color}">{value}</div>
+    {#if description}
+      <div class="stat-desc">{description}</div>
+    {/if}
+    {#if trend}
+      <div class="stat-desc {trend.isPositive ? 'text-success' : 'text-error'}">
+        {trend.isPositive ? '↗︎' : '↘︎'} {Math.abs(trend.value)}%
+      </div>
+    {/if}
+  </div>
+</div>