Design Finish Stage 1

1. Finish 3 pages design

src/components/shared/MetricCard.tsx

@@ -0,0 +1,78 @@
+import { ArrowUp, Info } from "lucide-react";
+import { useState } from "react";
+
+// Reusable Metric Card Component
+const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size }: { icon: any, img: any, value: any, label: any, tooltipText: any, valueChange: any, size: any }) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    if (Img) {
+        return (
+            <div className="relative cursor-pointer"
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}>
+                <img src={Img} alt="Img" className="w-12 h-12" />
+                <div className=" ">
+                    {tooltipText && (
+                        <div className="relative">
+                            {isHovered && (
+                                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-72 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
+                                    {/* Tooltip triangle */}
+                                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800"></div>
+                                    {tooltipText}
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+
+            </div>
+        )
+    }
+    return (
+        <div
+            className="flex-1 min-w-[50px] bg-white rounded-xl shadow-sm p-2 flex items-center space-x-2 relative"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            {Icon && (
+                <div className="p-3 bg-gray-100 rounded-lg">
+                    <Icon size={24} className="text-gray-500" />
+                </div>
+            )}
+
+
+
+            <div className="flex-1">
+                <div className={`${size === 'sm' ? 'text-sm border-2 border-gray-200 px-1 rounded-lg' : 'text-xl'} font-bold text-gray-800 flex items-center space-x-2`}>
+                    <span>{value}</span>
+                    {valueChange && (
+                        <div className="flex items-center text-sm font-semibold text-green-500">
+                            {Icon && (
+                                <ArrowUp size={14} className="inline-block mr-1" />
+                            )}
+                            <span>{valueChange}</span>
+                        </div>
+                    )}
+
+                    <div className="flex items-center space-x-1 mt-1 text-gray-500">
+                        <span className="text-sm">{label}</span>
+                        {tooltipText && (
+                            <div className="relative">
+                                <Info size={16} className="text-gray-400 cursor-pointer" />
+                                {isHovered && (
+                                    <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-72 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
+                                        {/* Tooltip triangle */}
+                                        <div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800"></div>
+                                        {tooltipText}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default MetricCard