fix(erp): enable erp pages and menu items

front-end-agency/components/ui/StatsCard.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { ReactNode } from "react";
+import { ArrowTrendingUpIcon as TrendingUpIcon, ArrowTrendingDownIcon as TrendingDownIcon } from "@heroicons/react/24/outline";
+
+interface StatsCardProps {
+    title: string;
+    value: string | number;
+    icon: ReactNode;
+    trend?: {
+        value: string | number;
+        label: string;
+        type: "up" | "down" | "neutral";
+    };
+    description?: string;
+}
+
+export default function StatsCard({
+    title,
+    value,
+    icon,
+    trend,
+    description
+}: StatsCardProps) {
+    return (
+        <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6 transition-all group">
+            <div className="flex items-start justify-between">
+                <div>
+                    <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
+                        {title}
+                    </p>
+                    <h3 className="mt-1 text-2xl font-bold text-zinc-900 dark:text-white group-hover:text-brand-500 transition-colors">
+                        {value}
+                    </h3>
+
+                    {trend && (
+                        <div className="mt-2 flex items-center gap-1.5">
+                            <div className={`flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-bold ${trend.type === 'up'
+                                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400'
+                                : trend.type === 'down'
+                                    ? 'bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400'
+                                    : 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-400'
+                                }`}>
+                                {trend.type === 'up' && <TrendingUpIcon className="w-3 h-3" />}
+                                {trend.type === 'down' && <TrendingDownIcon className="w-3 h-3" />}
+                                {trend.value}
+                            </div>
+                            <span className="text-[10px] text-zinc-500 dark:text-zinc-500">
+                                {trend.label}
+                            </span>
+                        </div>
+                    )}
+
+                    {description && !trend && (
+                        <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">
+                            {description}
+                        </p>
+                    )}
+                </div>
+
+                <div className="p-3 bg-zinc-50 dark:bg-zinc-800 rounded-xl text-zinc-500 dark:text-zinc-400 group-hover:bg-brand-50 dark:group-hover:bg-brand-900/10 group-hover:text-brand-500 transition-all">
+                    {icon}
+                </div>
+            </div>
+        </div>
+    );
+}