Refactor admin analytics stat cards to reusable component

Extracted repeated stat card logic in AdminAnalytics to a new AdminStatCard component and moved the trend indicator to its own file. Updated AdminAnalytics to use AdminStatCard for orders, revenue, vendors, and products, improving code maintainability and consistency. Also updated chart and loading skeleton handling for better UX.

components/admin/TrendIndicator.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { TrendingDown, TrendingUp } from "lucide-react";
+
+// Trend indicator component for metric cards
+export const TrendIndicator = ({
+    current,
+    previous,
+}: {
+    current: number;
+    previous: number;
+}) => {
+    if (!current || !previous) return null;
+
+    const percentChange = ((current - previous) / previous) * 100;
+
+    if (Math.abs(percentChange) < 0.1) return null;
+
+    return (
+        <div
+            className={`flex items-center text-xs font-medium ${percentChange >= 0 ? "text-green-500" : "text-red-500"}`}
+        >
+            {percentChange >= 0 ? (
+                <TrendingUp className="h-3 w-3 mr-1" />
+            ) : (
+                <TrendingDown className="h-3 w-3 mr-1" />
+            )}
+            {Math.abs(percentChange).toFixed(1)}%
+        </div>
+    );
+};