feat: enhance dashboard components with framer-motion animations

- Added motion effects to Donut, Gauge, Header, NoData, Sparkline components for improved user experience.
- Implemented initial and animate properties for SVG elements to create smooth transitions.
- Introduced new motion primitives for reusable animations across components.
- Updated UI elements like badges and buttons with hover effects and transitions.
- Enhanced skeleton and spinner components for better loading states.
- Created a motion library for consistent animation variants and utility constants.

src/components/dashboard/no-data.tsx

@@ -1,22 +1,32 @@
+"use client";
+
+import { motion } from "framer-motion";
+
 export function NoData() {
   return (
-    <svg
+    <motion.svg
       width={200}
       height={100}
       viewBox="0 0 200 100"
       role="img"
       aria-label="No data available"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.4 }}
     >
-      <text
+      <motion.text
         x={100}
         y={50}
         textAnchor="middle"
         fill="#6e7681"
         fontSize={12}
         fontFamily="system-ui,sans-serif"
+        initial={{ opacity: 0, y: 6 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
       >
         No data
-      </text>
-    </svg>
+      </motion.text>
+    </motion.svg>
   );
 }