Implement comprehensive Analytics Dashboard with charts and financial insights

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>

frontend/src/components/analytics/StatCard.tsx

@@ -0,0 +1,64 @@
+import type { LucideIcon } from "lucide-react";
+import clsx from "clsx";
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  icon: LucideIcon;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+  className?: string;
+}
+
+export default function StatCard({
+  title,
+  value,
+  subtitle,
+  icon: Icon,
+  trend,
+  className,
+}: StatCardProps) {
+  return (
+    <div
+      className={clsx(
+        "bg-white rounded-lg shadow p-6 border border-gray-200",
+        className
+      )}
+    >
+      <div className="flex items-center">
+        <div className="flex-shrink-0">
+          <Icon className="h-8 w-8 text-blue-600" />
+        </div>
+        <div className="ml-5 w-0 flex-1">
+          <dl>
+            <dt className="text-sm font-medium text-gray-500 truncate">
+              {title}
+            </dt>
+            <dd className="flex items-baseline">
+              <div className="text-2xl font-semibold text-gray-900">
+                {value}
+              </div>
+              {trend && (
+                <div
+                  className={clsx(
+                    "ml-2 flex items-baseline text-sm font-semibold",
+                    trend.isPositive ? "text-green-600" : "text-red-600"
+                  )}
+                >
+                  {trend.isPositive ? "+" : ""}
+                  {trend.value}%
+                </div>
+              )}
+            </dd>
+            {subtitle && (
+              <dd className="text-sm text-gray-600 mt-1">{subtitle}</dd>
+            )}
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
+}