chore: app dir headers re-implementation (#4751)

* chore: header refactor.

* fix: core imports

* chore: refactor profile activity header and fix all other header imports.

* fix: import fixes

* chore: header refactor.

* fix: app dir header reimplementation

* fix: removing parllel headers

* fix: adding route groups to handle pages

* fix: disabling sentry for temp

* chore: update default exports in layouts & headers for consistency.

* fix: bugfixes

* fix: build errors

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

web/app/[workspaceSlug]/(projects)/analytics/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import React, { Fragment } from "react";
+import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+import { Tab } from "@headlessui/react";
+// components
+import { CustomAnalytics, ScopeAndDemand } from "@/components/analytics";
+import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
+// constants
+import { ANALYTICS_TABS } from "@/constants/analytics";
+import { EmptyStateType } from "@/constants/empty-state";
+// hooks
+import { useCommandPalette, useEventTracker, useProject, useWorkspace } from "@/hooks/store";
+
+const AnalyticsPage = observer(() => {
+  const searchParams = useSearchParams();
+  const analytics_tab = searchParams.get("analytics_tab");
+  // store hooks
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { setTrackElement } = useEventTracker();
+  const { workspaceProjectIds } = useProject();
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Analytics` : undefined;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
+        <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
+          <Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}>
+            <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-5">
+              {ANALYTICS_TABS.map((tab) => (
+                <Tab key={tab.key} as={Fragment}>
+                  {({ selected }) => (
+                    <button
+                      className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none  ${
+                        selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
+                      }`}
+                    >
+                      {tab.title}
+                      <div
+                        className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
+                      />
+                    </button>
+                  )}
+                </Tab>
+              ))}
+            </Tab.List>
+            <Tab.Panels as={Fragment}>
+              <Tab.Panel as={Fragment}>
+                <ScopeAndDemand fullScreen />
+              </Tab.Panel>
+              <Tab.Panel as={Fragment}>
+                <CustomAnalytics fullScreen />
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </div>
+      ) : (
+        <EmptyState
+          type={EmptyStateType.WORKSPACE_ANALYTICS}
+          primaryButtonOnClick={() => {
+            setTrackElement("Analytics empty state");
+            toggleCreateProjectModal(true);
+          }}
+        />
+      )}
+    </>
+  );
+});
+
+export default AnalyticsPage;