refactor(dashboard): the chart component is now cleaned up and easier to extend

apps/dashboard/src/components/ui/sheet.tsx

@@ -82,15 +82,26 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
   className,
+  children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
+      'relative -m-6 mb-6 flex justify-between rounded-t-lg border-b bg-def-100 p-6',
       className
     )}
     {...props}
-  />
+    style={{
+      backgroundImage: `url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(2) rotate(85)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='0.5' stroke='hsla(259, 0%, 52%, 0.46)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")`,
+      backgroundSize: '100% 100%',
+      backgroundRepeat: 'repeat',
+    }}
+  >
+    <div className="absolute inset-0 bg-gradient-to-r from-def-100/95 to-def-100/80"></div>
+    <div className="row relative w-full items-start justify-between">
+      {children}
+    </div>
+  </div>
 );
 SheetHeader.displayName = 'SheetHeader';
 
@@ -114,7 +125,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold text-foreground', className)}
+    className={cn('text-3xl font-bold text-foreground', className)}
     {...props}
   />
 ));