[WEB-5358] fix: analytics enhancements (#8150)

* refactor: enhance analytics page tab functionality and UI

- Introduced state management for selected tabs using useState and useEffect hooks.
- Updated tab handling to improve user experience with onValueChange for Tabs component.
- Refactored AnalyticsFilterActions to remove unused duration selection.
- Added Tooltip to project name in ActiveProjectItem for better visibility.
- Minor styling adjustments in Tabs component for improved layout consistency.

* refactor: improve tab layout in analytics page by adding w-fit

* fix: update styling for ActiveProjectItem component

* refactor: simplify analytics page and introduce useAnalyticsTabs hook

- Removed unused imports and optimized the analytics page component.
- Replaced getAnalyticsTabs with a new custom hook useAnalyticsTabs for better modularity.
- Added useAnalyticsTabs hook to manage analytics tab logic.
- Created new files for useAnalyticsTabs and analytics tabs in the 'ce' and 'ee' directories.

* fix: ensure consistent export in use-analytics-tabs file

* style: format code for better readability in AnalyticsPage component

* fix: add missing newline at end of file in use-analytics-tabs

* chore: remove unused analytics tab components

---------

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

apps/web/core/components/analytics/analytics-filter-actions.tsx

@@ -4,11 +4,10 @@ import { observer } from "mobx-react";
 import { useAnalytics } from "@/hooks/store/use-analytics";
 import { useProject } from "@/hooks/store/use-project";
 // components
-import DurationDropdown from "./select/duration";
 import { ProjectSelect } from "./select/project";
 
 const AnalyticsFilterActions = observer(function AnalyticsFilterActions() {
-  const { selectedProjects, selectedDuration, updateSelectedProjects, updateSelectedDuration } = useAnalytics();
+  const { selectedProjects, updateSelectedProjects } = useAnalytics();
   const { joinedProjectIds } = useProject();
   return (
     <div className="flex items-center justify-end gap-2">

apps/web/core/components/analytics/overview/active-project-item.tsx

@@ -1,6 +1,7 @@
 // plane package imports
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // plane web hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -33,9 +34,9 @@ function ActiveProjectItem(props: Props) {
   if (!projectDetails) return null;
 
   return (
-    <div className="flex items-center justify-between gap-2  ">
-      <div className="flex items-center gap-2">
-        <div className="flex h-8  w-8 items-center justify-center rounded-xl bg-custom-background-80">
+    <div className="flex items-center justify-between gap-2 w-full">
+      <div className="flex items-center gap-2 flex-1 overflow-hidden">
+        <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-custom-background-80 shrink-0">
           <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
             {projectDetails?.logo_props ? (
               <Logo logo={projectDetails?.logo_props} size={16} />
@@ -46,13 +47,15 @@ function ActiveProjectItem(props: Props) {
             )}
           </span>
         </div>
-        <p className="text-sm font-medium">{projectDetails?.name}</p>
+        <Tooltip tooltipContent={projectDetails?.name} position="top-start">
+          <p className="text-sm font-medium truncate">{projectDetails?.name}</p>
+        </Tooltip>
       </div>
       <CompletionPercentage
         percentage={completed_issues && total_issues ? Math.round((completed_issues / total_issues) * 100) : 0}
       />
     </div>
   );
-}
+};
 
 export default ActiveProjectItem;