Add background to cards

dashboard/src/components/dashboard/MiniEventFeed.jsx

@@ -138,7 +138,7 @@ const EventCard = ({ event }) => {
 
   return (
     <EventDialog event={event}>
-      <Card className={`w-[210px] shrink-0 hover:brightness-110 cursor-pointer transition-colors h-[125px] bg-gradient-to-br ${eventType.gradient} backdrop-blur-sm`}>
+      <Card className={`w-[210px] border-none shrink-0 hover:brightness-110 cursor-pointer transition-colors h-[125px] bg-gradient-to-br ${eventType.gradient} backdrop-blur-sm`}>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 px-3 py-2 pb-0">
           <div className="flex items-baseline justify-between w-full pr-1">
             <CardTitle className={`text-sm font-bold ${eventType.textColor}`}>
@@ -372,7 +372,8 @@ const MiniEventFeed = ({
 
   return (
     <div className="fixed bottom-0 left-0 right-0">
-      <div className="p-2">
+        <Card className="bg-gradient-to-br rounded-none from-gray-900 to-gray-600 backdrop-blur">
+      <div className="px-1 pt-2 pb-3">
         <div className="overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']">
           <div className="flex flex-row gap-3 pr-4" style={{ width: 'max-content' }}>
             {loading && !events.length ? (
@@ -400,6 +401,7 @@ const MiniEventFeed = ({
           </div>
         </div>
       </div>
+      </Card>
     </div>
   );
 };

dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx

@@ -198,7 +198,7 @@ const MiniRealtimeAnalytics = () => {
 
         <Card className="bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
           <CardContent className="p-4">
-            <div className="h-[230px]">
+            <div className="h-[216px]">
               <ResponsiveContainer width="100%" height="100%">
                 <BarChart
                   data={basicData.byMinute}

dashboard/src/components/dashboard/MiniSalesChart.jsx

@@ -341,7 +341,7 @@ const MiniSalesChart = ({ className = "" }) => {
       {/* Chart Card */}
       <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm">
         <CardContent className="p-4">
-          <div className="h-[230px]">
+          <div className="h-[216px]">
             <ResponsiveContainer width="100%" height="100%">
               <LineChart
                 data={data}

dashboard/src/components/ui/calendaredit.jsx

@@ -16,8 +16,8 @@ function Calendar({
       className={cn("p-2", className)}
       classNames={{
         months: "flex flex-col sm:flex-row space-y-2 sm:space-x-2 sm:space-y-0",
-        month: "w-full space-y-2",
-        caption: "flex justify-center pt-1 relative items-center",
+        month: "w-full",
+        caption: "flex justify-center relative items-center",
         caption_label: "text-lg font-medium", // Reduced from text-4xl
         nav: "space-x-1 flex items-center",
         nav_button: cn(