Put chart into a card and adjust margins

dashboard/src/components/dashboard/MiniSalesChart.jsx

@@ -67,9 +67,16 @@ const MiniStatCard = memo(({
   background,
   previousValue,
   trend,
-  trendValue 
+  trendValue,
+  onClick,
+  active = true
 }) => (
-  <Card className={`w-full ${background || 'bg-gradient-to-br from-gray-800 to-gray-900 backdrop-blur-md'}`}>
+  <Card 
+    className={`w-full ${background || 'bg-gradient-to-br from-gray-800 to-gray-900 backdrop-blur-md'} ${
+      onClick ? 'cursor-pointer transition-all hover:brightness-110' : ''
+    } ${!active ? 'opacity-50' : ''}`}
+    onClick={onClick}
+  >
     <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
       <CardTitle className="text-sm font-bold text-gray-100">
         {title}
@@ -118,6 +125,10 @@ const MiniSalesChart = ({ className = "" }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [visibleMetrics, setVisibleMetrics] = useState({
+    revenue: true,
+    orders: true
+  });
   const [summaryStats, setSummaryStats] = useState({
     totalRevenue: 0,
     totalOrders: 0,
@@ -201,6 +212,13 @@ const MiniSalesChart = ({ className = "" }) => {
     });
   };
 
+  const toggleMetric = (metric) => {
+    setVisibleMetrics(prev => ({
+      ...prev,
+      [metric]: !prev[metric]
+    }));
+  };
+
   if (error) {
     return (
       <Alert variant="destructive" className="bg-white/10 backdrop-blur-sm">
@@ -212,7 +230,7 @@ const MiniSalesChart = ({ className = "" }) => {
   }
 
   return (
-    <div>
+    <div className="space-y-2">
       {/* Stat Cards */}
       <div className="grid grid-cols-2 gap-2">
         <MiniStatCard
@@ -226,6 +244,8 @@ const MiniSalesChart = ({ className = "" }) => {
           iconColor="text-emerald-900"
           iconBackground="bg-emerald-300"
           background="bg-gradient-to-br from-emerald-900 to-emerald-800"
+          onClick={() => toggleMetric('revenue')}
+          active={visibleMetrics.revenue}
         />
         <MiniStatCard
           title="30 Days Orders"
@@ -238,69 +258,121 @@ const MiniSalesChart = ({ className = "" }) => {
           iconColor="text-blue-900"
           iconBackground="bg-blue-300"
           background="bg-gradient-to-br from-blue-900 to-blue-800"
+          onClick={() => toggleMetric('orders')}
+          active={visibleMetrics.orders}
         />
       </div>
 
-      {/* Chart */}
+      {/* Chart Card */}
+      <Card className="bg-gradient-to-br from-purple-900 to-purple-800 backdrop-blur-sm">
         {loading ? (
+          <CardContent className="p-4">
             <SkeletonChart />
+          </CardContent>
         ) : !data.length ? (
-        <div className="flex items-center justify-center h-[200px] text-muted-foreground">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-center h-[200px] text-purple-200">
               <div className="text-center">
                 <TrendingUp className="h-8 w-8 mx-auto mb-2" />
-            <div className="text-sm text-gray-300">No sales data available</div>
+                <div className="text-sm">No sales data available</div>
               </div>
             </div>
+          </CardContent>
         ) : (
+          <CardContent className="p-4">
             <div className="h-[200px]">
               <ResponsiveContainer width="100%" height="100%">
                 <LineChart
                   data={data}
-              margin={{ top: 5, right: 5, left: -20, bottom: 5 }}
+                  margin={{ top: 0, right: -30, left: -10, bottom: -10 }}
                 >
-              <CartesianGrid strokeDasharray="3 3" className="stroke-gray-700" />
+                  <CartesianGrid strokeDasharray="3 3" className="stroke-purple-700" />
                   <XAxis
                     dataKey="timestamp"
                     tickFormatter={formatXAxis}
-                className="text-[10px] text-gray-300"
+                    className="text-[10px]"
-                tick={{ fill: "currentColor" }}
+                    tick={{ fill: "#E9D5FF" }}
                   />
+                  {visibleMetrics.revenue && (
                     <YAxis
                       yAxisId="revenue"
                       tickFormatter={(value) => formatCurrency(value, false)}
-                className="text-[10px] text-gray-300"
+                      className="text-[10px]"
-                tick={{ fill: "currentColor" }}
+                      tick={{ fill: "#E9D5FF" }}
                     />
+                  )}
+                  {visibleMetrics.orders && (
                     <YAxis
                       yAxisId="orders"
                       orientation="right"
                       tickFormatter={(value) => value.toLocaleString()}
-                className="text-[10px] text-gray-300"
+                      className="text-[10px]"
-                tick={{ fill: "currentColor" }}
+                      tick={{ fill: "#E9D5FF" }}
                     />
-              <Tooltip content={<CustomTooltip />} />
+                  )}
+                  <Tooltip
+                    content={({ active, payload }) => {
+                      if (active && payload && payload.length) {
+                        const timestamp = new Date(payload[0].payload.timestamp);
+                        return (
+                          <Card className="p-2 shadow-lg bg-purple-800 border-none">
+                            <CardContent className="p-0 space-y-1">
+                              <p className="font-medium text-sm text-purple-100 border-b border-purple-700 pb-1 mb-1">
+                                {timestamp.toLocaleDateString([], {
+                                  weekday: "short",
+                                  month: "short",
+                                  day: "numeric"
+                                })}
+                              </p>
+                              {payload
+                                .filter(entry => visibleMetrics[entry.dataKey])
+                                .map((entry, index) => (
+                                  <div key={index} className="flex justify-between items-center text-sm">
+                                    <span className="text-purple-200">
+                                      {entry.name}:
+                                    </span>
+                                    <span className="font-medium ml-4 text-purple-100">
+                                      {entry.dataKey === 'revenue' 
+                                        ? formatCurrency(entry.value)
+                                        : entry.value.toLocaleString()}
+                                    </span>
+                                  </div>
+                                ))}
+                            </CardContent>
+                          </Card>
+                        );
+                      }
+                      return null;
+                    }}
+                  />
+                  {visibleMetrics.revenue && (
                     <Line
                       yAxisId="revenue"
                       type="monotone"
                       dataKey="revenue"
                       name="Revenue"
-                stroke="#8b5cf6"
+                      stroke="#A855F7"
                       strokeWidth={2}
                       dot={false}
                     />
+                  )}
+                  {visibleMetrics.orders && (
                     <Line
                       yAxisId="orders"
                       type="monotone"
                       dataKey="orders"
                       name="Orders"
-                stroke="#10b981"
+                      stroke="#38BDF8"
                       strokeWidth={2}
                       dot={false}
                     />
+                  )}
                 </LineChart>
               </ResponsiveContainer>
             </div>
+          </CardContent>
         )}
+      </Card>
     </div>
   );
 };