From d636c29f698615d7794227edea78f6a6015b7e79 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Sat, 4 Jan 2025 00:07:25 -0500
Subject: [PATCH] Minieventfeed tweaks and saleschart skeletons

---
 .../components/dashboard/MiniEventFeed.jsx    |  10 +-
 .../components/dashboard/MiniSalesChart.jsx   | 344 ++++++++++--------
 2 files changed, 195 insertions(+), 159 deletions(-)

diff --git a/dashboard/src/components/dashboard/MiniEventFeed.jsx b/dashboard/src/components/dashboard/MiniEventFeed.jsx
index 62f4fad..4c3f1ad 100644
--- a/dashboard/src/components/dashboard/MiniEventFeed.jsx
+++ b/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`}>
diff --git a/dashboard/src/components/dashboard/MiniSalesChart.jsx b/dashboard/src/components/dashboard/MiniSalesChart.jsx
index e1b3eae..79d9b9f 100644
--- a/dashboard/src/components/dashboard/MiniSalesChart.jsx
+++ b/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">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
-              <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>
+          <SkeletonCard colorScheme="emerald" />
+          <SkeletonCard colorScheme="blue" />
         </div>
 
         {/* Chart Card */}
@@ -304,129 +294,175 @@ const MiniSalesChart = ({ className = "" }) => {
     <div className="space-y-2">
       {/* Stat Cards */}
       <div className="grid grid-cols-2 gap-2">
-        <MiniStatCard
-          title="30 Days Revenue"
-          value={formatCurrency(summaryStats.totalRevenue, false)}
-          previousValue={formatCurrency(summaryStats.prevRevenue, false)}
-          trend={summaryStats.growth.revenue >= 0 ? "up" : "down"}
-          trendValue={`${Math.abs(Math.round(summaryStats.growth.revenue))}%`}
-          colorClass="text-emerald-300"
-          titleClass="text-emerald-300 font-bold text-md"
-          descriptionClass="text-emerald-300 text-md font-semibold"
-          icon={PiggyBank}
-          iconColor="text-emerald-900"
-          iconBackground="bg-emerald-300"
-          onClick={() => toggleMetric('revenue')}
-          active={visibleMetrics.revenue}
-        />
-        <MiniStatCard
-          title="30 Days Orders"
-          value={summaryStats.totalOrders.toLocaleString()}
-          previousValue={summaryStats.prevOrders.toLocaleString()}
-          trend={summaryStats.growth.orders >= 0 ? "up" : "down"}
-          trendValue={`${Math.abs(Math.round(summaryStats.growth.orders))}%`}
-          colorClass="text-blue-300"
-          titleClass="text-blue-300 font-bold text-md"
-          descriptionClass="text-blue-300 text-md font-semibold"
-          icon={Truck}
-          iconColor="text-blue-900"
-          iconBackground="bg-blue-300"
-          onClick={() => toggleMetric('orders')}
-          active={visibleMetrics.orders}
-        />
+        {loading ? (
+          <>
+            <SkeletonCard colorScheme="emerald" />
+            <SkeletonCard colorScheme="blue" />
+          </>
+        ) : (
+          <>
+            <MiniStatCard
+              title="30 Days Revenue"
+              value={formatCurrency(summaryStats.totalRevenue, false)}
+              previousValue={formatCurrency(summaryStats.prevRevenue, false)}
+              trend={summaryStats.growth.revenue >= 0 ? "up" : "down"}
+              trendValue={`${Math.abs(Math.round(summaryStats.growth.revenue))}%`}
+              colorClass="text-emerald-300"
+              titleClass="text-emerald-300 font-bold text-md"
+              descriptionClass="text-emerald-300 text-md font-semibold"
+              icon={PiggyBank}
+              iconColor="text-emerald-900"
+              iconBackground="bg-emerald-300"
+              onClick={() => toggleMetric('revenue')}
+              active={visibleMetrics.revenue}
+            />
+            <MiniStatCard
+              title="30 Days Orders"
+              value={summaryStats.totalOrders.toLocaleString()}
+              previousValue={summaryStats.prevOrders.toLocaleString()}
+              trend={summaryStats.growth.orders >= 0 ? "up" : "down"}
+              trendValue={`${Math.abs(Math.round(summaryStats.growth.orders))}%`}
+              colorClass="text-blue-300"
+              titleClass="text-blue-300 font-bold text-md"
+              descriptionClass="text-blue-300 text-md font-semibold"
+              icon={Truck}
+              iconColor="text-blue-900"
+              iconBackground="bg-blue-300"
+              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]">
-            <ResponsiveContainer width="100%" height="100%">
-              <LineChart
-                data={data}
-                margin={{ top: 0, right: -30, left: -5, bottom: -10 }}
-              >
-                <CartesianGrid strokeDasharray="3 3" className="stroke-stone-700" />
-                <XAxis
-                  dataKey="timestamp"
-                  tickFormatter={formatXAxis}
-                  className="text-xs"
-                  tick={{ fill: "#f5f5f4" }}
-                />
-                {visibleMetrics.revenue && (
-                  <YAxis
-                    yAxisId="revenue"
-                    tickFormatter={(value) => formatCurrency(value, false)}
+            {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}
+                  margin={{ top: 0, right: -30, left: -5, bottom: -10 }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" className="stroke-stone-700" />
+                  <XAxis
+                    dataKey="timestamp"
+                    tickFormatter={formatXAxis}
                     className="text-xs"
                     tick={{ fill: "#f5f5f4" }}
                   />
-                )}
-                {visibleMetrics.orders && (
-                  <YAxis
-                    yAxisId="orders"
-                    orientation="right"
-                    className="text-xs"
-                    tick={{ fill: "#f5f5f4" }}
+                  {visibleMetrics.revenue && (
+                    <YAxis
+                      yAxisId="revenue"
+                      tickFormatter={(value) => formatCurrency(value, false)}
+                      className="text-xs"
+                      tick={{ fill: "#f5f5f4" }}
+                    />
+                  )}
+                  {visibleMetrics.orders && (
+                    <YAxis
+                      yAxisId="orders"
+                      orientation="right"
+                      className="text-xs"
+                      tick={{ fill: "#f5f5f4" }}
+                    />
+                  )}
+                  <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-stone-800 border-none">
+                            <CardContent className="p-0 space-y-1">
+                              <p className="font-medium text-sm text-stone-100 border-b border-stone-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-stone-200">
+                                      {entry.name}:
+                                    </span>
+                                    <span className="font-medium ml-4 text-stone-100">
+                                      {entry.dataKey === 'revenue' 
+                                        ? formatCurrency(entry.value)
+                                        : entry.value.toLocaleString()}
+                                    </span>
+                                  </div>
+                                ))}
+                            </CardContent>
+                          </Card>
+                        );
+                      }
+                      return null;
+                    }}
                   />
-                )}
-                <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-stone-800 border-none">
-                          <CardContent className="p-0 space-y-1">
-                            <p className="font-medium text-sm text-stone-100 border-b border-stone-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-stone-200">
-                                    {entry.name}:
-                                  </span>
-                                  <span className="font-medium ml-4 text-stone-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="#10b981"
-                    strokeWidth={2}
-                    dot={false}
-                  />
-                )}
-                {visibleMetrics.orders && (
-                  <Line
-                    yAxisId="orders"
-                    type="monotone"
-                    dataKey="orders"
-                    name="Orders"
-                    stroke="#3b82f6"
-                    strokeWidth={2}
-                    dot={false}
-                  />
-                )}
-              </LineChart>
-            </ResponsiveContainer>
+                  {visibleMetrics.revenue && (
+                    <Line
+                      yAxisId="revenue"
+                      type="monotone"
+                      dataKey="revenue"
+                      name="Revenue"
+                      stroke="#10b981"
+                      strokeWidth={2}
+                      dot={false}
+                    />
+                  )}
+                  {visibleMetrics.orders && (
+                    <Line
+                      yAxisId="orders"
+                      type="monotone"
+                      dataKey="orders"
+                      name="Orders"
+                      stroke="#3b82f6"
+                      strokeWidth={2}
+                      dot={false}
+                    />
+                  )}
+                </LineChart>
+              </ResponsiveContainer>
+            )}
           </div>
         </CardContent>
       </Card>