Minieventfeed tweaks and saleschart skeletons

dashboard/src/components/dashboard/MiniEventFeed.jsx

@@ -239,7 +239,7 @@ const EventCard = ({ event }) => {
 
           {event.metric_id === METRIC_IDS.SHIPPED_ORDER && (
             <>
-              <div className={`text-xl font-bold ${eventType.textColor}`}>
+              <div className={`text-xl truncate font-bold ${eventType.textColor}`}>
                 {details.ShippingName}
               </div>
               <div className="flex items-center justify-between mt-1">
@@ -252,7 +252,7 @@ const EventCard = ({ event }) => {
 
           {event.metric_id === METRIC_IDS.ACCOUNT_CREATED && (
             <>
-              <div className={`text-xl font-bold ${eventType.textColor}`}>
+              <div className={`text-xl truncate font-bold ${eventType.textColor}`}>
                 {details.FirstName} {details.LastName}
               </div>
               <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 truncate mt-1`}>
@@ -263,7 +263,7 @@ const EventCard = ({ event }) => {
 
           {event.metric_id === METRIC_IDS.CANCELED_ORDER && (
             <>
-              <div className={`text-xl font-bold ${eventType.textColor}`}>
+              <div className={`text-xl truncate font-bold ${eventType.textColor}`}>
                 {details.ShippingName}
               </div>
               <div className="flex items-center justify-between mt-1">
@@ -279,7 +279,7 @@ const EventCard = ({ event }) => {
 
           {event.metric_id === METRIC_IDS.PAYMENT_REFUNDED && (
             <>
-              <div className={`text-xl font-bold ${eventType.textColor}`}>
+              <div className={`text-xl truncate font-bold ${eventType.textColor}`}>
                 {details.ShippingName}
               </div>
               <div className="flex items-center justify-between mt-1">
@@ -295,7 +295,7 @@ const EventCard = ({ event }) => {
 
           {event.metric_id === METRIC_IDS.NEW_BLOG_POST && (
             <>
-              <div className={`text-xl font-bold ${eventType.textColor}`}>
+              <div className={`text-lg truncate font-bold ${eventType.textColor}`}>
                 {details.title}
               </div>
               <div className={`text-sm font-semibold ${eventType.textColor} opacity-80 line-clamp-2 mt-1`}>

dashboard/src/components/dashboard/MiniSalesChart.jsx

@@ -134,6 +134,35 @@ const MiniStatCard = memo(({
 
 MiniStatCard.displayName = "MiniStatCard";
 
+const SkeletonCard = ({ colorScheme = "emerald" }) => (
+  <Card className={`w-full h-[150px] bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm`}>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+      <CardTitle>
+        <div className="space-y-2">
+          <Skeleton className={`h-4 w-24 bg-${colorScheme}-300/20`} />
+        </div>
+      </CardTitle>
+      <div className="relative p-2">
+        <div className={`absolute inset-0 rounded-full bg-${colorScheme}-300/20`} />
+        <div className="h-5 w-5 relative rounded-full bg-${colorScheme}-300/20" />
+      </div>
+    </CardHeader>
+    <CardContent className="p-4 pt-0">
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Skeleton className={`h-8 w-32 bg-${colorScheme}-300/20`} />
+          <div className="flex justify-between items-center">
+            <div className="space-y-1">
+              <Skeleton className={`h-4 w-24 bg-${colorScheme}-300/20`} />
+            </div>
+            <Skeleton className={`h-6 w-16 bg-${colorScheme}-300/20 rounded-full`} />
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+);
+
 const MiniSalesChart = ({ className = "" }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -247,47 +276,8 @@ const MiniSalesChart = ({ className = "" }) => {
       <div className="space-y-2">
         {/* Stat Cards */}
         <div className="grid grid-cols-2 gap-2">
-          <Card className="h-[150px] bg-gradient-to-br from-rose-900 to-rose-800 backdrop-blur-sm">
+          <SkeletonCard colorScheme="emerald" />
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
+          <SkeletonCard colorScheme="blue" />
-              <CardTitle className="text-rose-100 font-bold text-md">
-                <Skeleton className="h-4 w-24 bg-rose-700" />
-              </CardTitle>
-              <div className="relative p-2">
-                <div className="absolute inset-0 rounded-full bg-rose-300" />
-                <Skeleton className="h-5 w-5 bg-rose-700 relative rounded-full" />
-              </div>
-            </CardHeader>
-            <CardContent className="p-4 pt-0">
-              <div className="space-y-2">
-                <Skeleton className="h-8 w-20 bg-rose-700" />
-                <div className="flex justify-between items-center">
-                  <Skeleton className="h-4 w-24 bg-rose-700" />
-                  <Skeleton className="h-4 w-12 bg-rose-700 rounded-full" />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card className="h-[150px] bg-gradient-to-br from-indigo-900 to-indigo-800 backdrop-blur-sm">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
-              <CardTitle className="text-indigo-100 font-bold text-md">
-                <Skeleton className="h-4 w-24 bg-indigo-700" />
-              </CardTitle>
-              <div className="relative p-2">
-                <div className="absolute inset-0 rounded-full bg-indigo-300" />
-                <Skeleton className="h-5 w-5 bg-indigo-700 relative rounded-full" />
-              </div>
-            </CardHeader>
-            <CardContent className="p-4 pt-0">
-              <div className="space-y-2">
-                <Skeleton className="h-8 w-20 bg-indigo-700" />
-                <div className="flex justify-between items-center">
-                  <Skeleton className="h-4 w-24 bg-indigo-700" />
-                  <Skeleton className="h-4 w-12 bg-indigo-700 rounded-full" />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
         </div>
 
         {/* Chart Card */}
@@ -304,6 +294,13 @@ const MiniSalesChart = ({ className = "" }) => {
     <div className="space-y-2">
       {/* Stat Cards */}
       <div className="grid grid-cols-2 gap-2">
+        {loading ? (
+          <>
+            <SkeletonCard colorScheme="emerald" />
+            <SkeletonCard colorScheme="blue" />
+          </>
+        ) : (
+          <>
             <MiniStatCard
               title="30 Days Revenue"
               value={formatCurrency(summaryStats.totalRevenue, false)}
@@ -334,12 +331,50 @@ const MiniSalesChart = ({ className = "" }) => {
               onClick={() => toggleMetric('orders')}
               active={visibleMetrics.orders}
             />
+          </>
+        )}
       </div>
 
       {/* Chart Card */}
       <Card className="bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm">
         <CardContent className="p-4">
           <div className="h-[216px]">
+            {loading ? (
+              <div className="h-full w-full relative">
+                {/* Grid lines */}
+                {[...Array(5)].map((_, i) => (
+                  <div
+                    key={i}
+                    className="absolute w-full h-px bg-slate-600"
+                    style={{ top: `${(i + 1) * 20}%` }}
+                  />
+                ))}
+                {/* Y-axis labels */}
+                <div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4">
+                  {[...Array(5)].map((_, i) => (
+                    <Skeleton key={i} className="h-3 w-6 bg-slate-600 rounded-sm" />
+                  ))}
+                </div>
+                {/* X-axis labels */}
+                <div className="absolute left-8 right-4 bottom-0 flex justify-between">
+                  {[...Array(6)].map((_, i) => (
+                    <Skeleton key={i} className="h-3 w-8 bg-slate-600 rounded-sm" />
+                  ))}
+                </div>
+                {/* Chart lines */}
+                <div className="absolute inset-x-8 bottom-6 top-4">
+                  <div className="h-full w-full relative">
+                    <div
+                      className="absolute inset-0 bg-slate-600 rounded-sm"
+                      style={{
+                        opacity: 0.5,
+                        clipPath: "polygon(0 50%, 100% 20%, 100% 100%, 0 100%)",
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : (
               <ResponsiveContainer width="100%" height="100%">
                 <LineChart
                   data={data}
@@ -427,6 +462,7 @@ const MiniSalesChart = ({ className = "" }) => {
                   )}
                 </LineChart>
               </ResponsiveContainer>
+            )}
           </div>
         </CardContent>
       </Card>