Dashboard UI updates / Social Share Modal

frontend/src/components/common/EventCard/index.tsx

@@ -93,7 +93,7 @@ export function EventCard({event}: EventCardProps) {
                 <div className={classes.body}>
                     {event && <EventStatusBadge event={event}/>}
                     <div className={classes.title}>
-                        <NavLink to={`/manage/event/${event.id}`}>
+                        <NavLink to={`/manage/event/${event.id}/dashboard`}>
                             {event.title}
                         </NavLink>
                     </div>

frontend/src/components/common/PageTitle/index.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 import classes from './PageTitle.module.scss';
 
-interface PageTitleProps {
+interface PageTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     children: React.ReactNode,
 }
 
-export const PageTitle = ({children}: PageTitleProps) => {
+export const PageTitle = (props: PageTitleProps) => {
     return (
-        <h1 className={classes.title}>{children}</h1>
+        <h1 className={classes.title} {...props}>
+            {props.children}
+        </h1>
     );
 }

frontend/src/components/common/StatBoxes/StatBoxes.module.scss

@@ -1,77 +1,100 @@
 @import "../../../styles/mixins.scss";
 
 .statistics {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
   color: var(--tk-primary);
-  gap: 15px;
+  margin: 0.5rem 0;
+
+  @include respond-below(lg) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include respond-below(md) {
+    grid-template-columns: 1fr;
+  }
 }
 
 .statistic {
-  flex: 1 1 50px;
   display: flex;
-  flex-direction: row;
-  padding: 15px !important;
-  min-width: 300px;
-  margin-bottom: 0px !important;
+  align-items: center;
+  padding: 1.25rem !important;
+  transition: all 0.2s ease-in-out;
+  margin-bottom: 0 !important;
+  height: 100%;
 
-  @include respond-below(md) {
-    padding: 7px 20px !important;
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   }
 
   .leftPanel {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    @include respond-below(md) {
-      align-items: center;
-      flex-direction: row-reverse;
-      justify-content: space-between;
-      width: 100%;
-    }
+    flex: 1;
+    display: grid;
+    grid-template-rows: auto auto;
+    min-height: 65px;
+    gap: 5px;
 
     .number {
-      font-size: 1.5em;
-      font-weight: bold;
+      font-size: 1.75rem;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      line-height: 1.2;
+      align-self: end;
 
       @include respond-below(md) {
-        font-size: 1.1em;
+        font-size: 1.5rem;
       }
     }
 
     .description {
-      font-size: 1em;
+      font-size: 1rem;
       color: var(--tk-color-gray-dark);
-    }
-
-    .change {
-      font-size: 1em;
+      font-weight: 500;
+      align-self: start;
     }
   }
 
   .rightPanel {
-    flex: 1;
-    display: flex;
-    place-content: flex-end;
-    align-items: flex-start;
-
-    @include respond-below(md) {
-      display: none;
-    }
+    margin-left: 1rem;
+    align-self: flex-start;
 
     .icon {
-      width: 40px;
-      height: 40px;
-      background: #63d57e;
-      border-radius: 50px;
+      width: 42px;
+      height: 42px;
+      border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #ffffff;
+      transition: transform 0.2s ease;
+
+      @include respond-below(md) {
+        width: 36px;
+        height: 36px;
+        border-radius: 10px;
+      }
+
+      &:hover {
+        transform: scale(1.05);
+      }
     }
   }
-}
 
+  @include respond-below(sm) {
+    padding: 1rem !important;
 
+    .leftPanel {
+      min-height: 55px;
+
+      .number {
+        font-size: 1.25rem;
+      }
+
+      .description {
+        font-size: 0.9125rem;
+      }
+    }
+  }
+}

frontend/src/components/common/StatBoxes/index.tsx

@@ -19,32 +19,38 @@ export const StatBoxes = () => {
         {
             number: formatNumber(eventStats?.total_products_sold as number),
             description: t`Products sold`,
-            icon: <IconShoppingCart size={18}/>
+            icon: <IconShoppingCart size={18}/>,
+            backgroundColor: '#4B7BE5' // Deep blue
         },
         {
             number: formatNumber(eventStats?.total_attendees_registered as number),
             description: t`Attendees`,
-            icon: <IconUsers size={18}/>
+            icon: <IconUsers size={18}/>,
+            backgroundColor: '#E6677E' // Rose pink
         },
         {
             number: formatCurrency(eventStats?.total_refunded as number || 0, event?.currency),
             description: t`Refunded`,
-            icon: <IconCreditCardRefund size={18}/>
+            icon: <IconCreditCardRefund size={18}/>,
+            backgroundColor: '#49A6B7' // Teal
         },
         {
             number: formatCurrency(eventStats?.total_gross_sales || 0, event?.currency),
             description: t`Gross sales`,
-            icon: <IconCash size={18}/>
+            icon: <IconCash size={18}/>,
+            backgroundColor: '#7C63E6' // Purple
         },
         {
             number: formatNumber(eventStats?.total_views as number),
             description: t`Page views`,
-            icon: <IconEye size={18}/>
+            icon: <IconEye size={18}/>,
+            backgroundColor: '#63B3A1' // Sage green
         },
         {
             number: formatNumber(eventStats?.total_orders as number),
             description: t`Orders Created`,
-            icon: <IconReceipt size={18}/>
+            icon: <IconReceipt size={18}/>,
+            backgroundColor: '#E67D49' // Coral orange
         }
     ];
 
@@ -56,7 +62,7 @@ export const StatBoxes = () => {
                     <div className={classes.description}>{stat.description}</div>
                 </div>
                 <div className={classes.rightPanel}>
-                    <div className={classes.icon}>
+                    <div className={classes.icon} style={{backgroundColor: stat.backgroundColor}}>
                         {stat.icon}
                     </div>
                 </div>
@@ -70,4 +76,3 @@ export const StatBoxes = () => {
         </div>
     );
 };
-