Enhance analytics charts with interactivity and skeletons

Added interactive active segment highlighting to the customer segments pie chart and improved the monthly revenue/orders chart with gradient areas and labeled axes. Replaced loading spinners with ChartSkeleton components for a more consistent loading state. Refactored SkeletonLoaders to accept className and improved code style.

components/analytics/SkeletonLoaders.tsx

@@ -1,20 +1,24 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
 import { Skeleton } from "@/components/common/skeleton";
 
+import { cn } from "@/lib/utils";
+
 // Chart skeleton for revenue trends and order analytics
-export function ChartSkeleton({ 
-  title, 
-  description, 
+export function ChartSkeleton({
+  title,
+  description,
   icon: Icon,
-  showStats = false 
-}: { 
-  title: string; 
-  description: string; 
+  showStats = false,
+  className,
+}: {
+  title: string;
+  description: string;
   icon: any;
   showStats?: boolean;
+  className?: string;
 }) {
   return (
-    <Card>
+    <Card className={cn(className)}>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Icon className="h-5 w-5" />
@@ -26,7 +30,7 @@ export function ChartSkeleton({
         <div className="space-y-6">
           {/* Chart area */}
           <div className="h-64 bg-muted/20 rounded-md animate-pulse" />
-          
+
           {/* Summary stats if applicable */}
           {showStats && (
             <div className="grid grid-cols-3 gap-4 pt-4 border-t">
@@ -45,15 +49,15 @@ export function ChartSkeleton({
 }
 
 // Table skeleton for product performance
-export function TableSkeleton({ 
-  title, 
-  description, 
+export function TableSkeleton({
+  title,
+  description,
   icon: Icon,
   rows = 5,
   columns = 5
-}: { 
-  title: string; 
-  description: string; 
+}: {
+  title: string;
+  description: string;
   icon: any;
   rows?: number;
   columns?: number;
@@ -75,7 +79,7 @@ export function TableSkeleton({
               <Skeleton key={i} className="h-4 w-full" />
             ))}
           </div>
-          
+
           {/* Table rows */}
           {[...Array(rows)].map((_, rowIndex) => (
             <div key={rowIndex} className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
@@ -96,13 +100,13 @@ export function TableSkeleton({
 }
 
 // Customer insights skeleton with segments
-export function CustomerInsightsSkeleton({ 
-  title, 
-  description, 
-  icon: Icon 
-}: { 
-  title: string; 
-  description: string; 
+export function CustomerInsightsSkeleton({
+  title,
+  description,
+  icon: Icon
+}: {
+  title: string;
+  description: string;
   icon: any;
 }) {
   return (
@@ -125,7 +129,7 @@ export function CustomerInsightsSkeleton({
               </div>
             ))}
           </div>
-          
+
           {/* Top customers table */}
           <div className="space-y-4">
             <Skeleton className="h-6 w-32" />