chore: setting up sections on page

apps/studio/components/interfaces/QueryInsights/QueryQuickGlance.tsx

@@ -0,0 +1,7 @@
+export const QueryQuickGlance = () => {
+  return (
+    <>
+      <div>At a glance blocks here...</div>
+    </>
+  )
+}

apps/studio/pages/project/[ref]/reports/query-insights.tsx

@@ -2,7 +2,9 @@ import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import ReportPadding from 'components/interfaces/Reports/ReportPadding'
 import ReportHeader from 'components/interfaces/Reports/ReportHeader'
+import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
 import { NextPageWithLayout } from 'types'
+import { QueryQuickGlance } from 'components/interfaces/QueryInsights/QueryQuickGlance'
 
 const QueryInsightsReport: NextPageWithLayout = () => {
   return (
@@ -24,7 +26,17 @@ const QueryInsights = () => {
   return (
     <>
       <ReportHeader title="Query Insights" />
-      <div>Content here...</div>
+      <ReportStickyNav
+        content={
+          <>
+            <div>Date picker here</div>
+          </>
+        }
+      />
+      <QueryQuickGlance />
+      <div>Tab group</div>
+      <div>Metrics explorer...</div>
+      <div>Row expolrer...</div>
     </>
   )
 }