fix: workspace and analytics page casing

web/components/analytics/custom-analytics/sidebar/projects-list.tsx

@@ -15,7 +15,7 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = (props) => {
 
   return (
     <div className="hidden h-full overflow-hidden md:flex md:flex-col">
-      <h4 className="font-medium">Selected Projects</h4>
+      <h4 className="font-medium">Selected projects</h4>
       <div className="space-y-6 mt-4 h-full overflow-y-auto">
         {projects.map((project) => (
           <div key={project.id} className="w-full">

web/components/analytics/custom-analytics/sidebar/sidebar.tsx

@@ -29,26 +29,26 @@ type Props = {
 
 const analyticsService = new AnalyticsService();
 
-export const CustomAnalyticsSidebar: React.FC<Props> = observer(
+export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
-  ({ analytics, params, fullScreen, isProjectLevel = false }) => {
+  const { analytics, params, fullScreen, isProjectLevel = false } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
+  // toast
   const { setToastAlert } = useToast();
+  // mobx store
+  const {
+    project: { workspaceProjects, getProjectById },
+    cycle: { getCycleById, fetchCycleWithId },
+    module: { getModuleById, fetchModuleDetails },
+  } = useMobxStore();
 
-    const { user: userStore, project: projectStore, cycle: cycleStore, module: moduleStore } = useMobxStore();
-
-    const user = userStore.currentUser;
-
-    const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
   const projectDetails =
     workspaceSlug && projectId
-        ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) ?? undefined
+      ? getProjectById(workspaceSlug.toString(), projectId.toString()) ?? undefined
       : undefined;
 
   const trackExportAnalytics = () => {
-      if (!user) return;
-
     const eventPayload: any = {
       workspaceSlug: workspaceSlug?.toString(),
       params: {
@@ -121,24 +121,25 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
       );
   };
 
-    const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
+  const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
-    const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
+  const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
 
   // fetch cycle details
   useEffect(() => {
     if (!workspaceSlug || !projectId || !cycleId || cycleDetails) return;
 
-      cycleStore.fetchCycleWithId(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
+    fetchCycleWithId(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
-    }, [cycleId, cycleDetails, cycleStore, projectId, workspaceSlug]);
+  }, [cycleId, cycleDetails, fetchCycleWithId, projectId, workspaceSlug]);
 
   // fetch module details
   useEffect(() => {
     if (!workspaceSlug || !projectId || !moduleId || moduleDetails) return;
 
-      moduleStore.fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
+    fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
-    }, [moduleId, moduleDetails, moduleStore, projectId, workspaceSlug]);
+  }, [moduleId, moduleDetails, fetchModuleDetails, projectId, workspaceSlug]);
 
-    const selectedProjects = params.project && params.project.length > 0 ? params.project : projects?.map((p) => p.id);
+  const selectedProjects =
+    params.project && params.project.length > 0 ? params.project : workspaceProjects?.map((p) => p.id);
 
   return (
     <div
@@ -171,7 +172,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
           <>
             {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
               <CustomAnalyticsSidebarProjectsList
-                  projects={projects?.filter((p) => selectedProjects.includes(p.id)) ?? []}
+                projects={workspaceProjects?.filter((p) => selectedProjects.includes(p.id)) ?? []}
               />
             )}
             <CustomAnalyticsSidebarHeader />
@@ -196,5 +197,4 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
       </div>
     </div>
   );
-  }
+});
-);

web/components/analytics/scope-and-demand/demand.tsx

@@ -53,7 +53,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
     <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
       <p className="flex items-center gap-1 text-custom-text-200">
         <Triangle className="h-4 w-4" />
-        <span>Estimate Demand:</span>
+        <span>Estimate demand:</span>
       </p>
       <p className="font-medium">
         {defaultAnalytics.open_estimate_sum}/{defaultAnalytics.total_estimate_sum}

web/components/analytics/scope-and-demand/leaderboard.tsx

@@ -17,7 +17,10 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyStateMessage, workspaceSlug }) => (
+export const AnalyticsLeaderBoard: React.FC<Props> = (props) => {
+  const { users, title, emptyStateMessage, workspaceSlug } = props;
+
+  return (
     <div className="p-3 border border-custom-border-200 rounded-[10px]">
       <h6 className="text-base font-medium">{title}</h6>
       {users.length > 0 ? (
@@ -54,8 +57,9 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
         </div>
       ) : (
         <div className="px-7 py-4">
-        <ProfileEmptyState title="No Data yet" description={emptyStateMessage} image={emptyUsers} />
+          <ProfileEmptyState title="No data yet" description={emptyStateMessage} image={emptyUsers} />
         </div>
       )}
     </div>
   );
+};

web/components/headers/workspace-dashboard.tsx

@@ -2,17 +2,16 @@ import { useState } from "react";
 import { LayoutGrid, Zap } from "lucide-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
-// images
-import githubBlackImage from "/public/logos/github-black.png";
-import githubWhiteImage from "/public/logos/github-white.png";
 // components
 import { ProductUpdatesModal } from "components/common";
+// ui
 import { Breadcrumbs } from "@plane/ui";
-import { useMobxStore } from "lib/mobx/store-provider";
+// assetsˀ
+import githubBlackImage from "/public/logos/github-black.png";
+import githubWhiteImage from "/public/logos/github-white.png";
 
 export const WorkspaceDashboardHeader = () => {
   const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
-  const { trackEvent: { postHogEventTracker } } = useMobxStore();
   // theme
   const { resolvedTheme } = useTheme();
 
@@ -39,7 +38,7 @@ export const WorkspaceDashboardHeader = () => {
             className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded flex-shrink-0"
           >
             <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
-            {"What's New?"}
+            What{"'"}s new?
           </a>
           <a
             className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded flex-shrink-0"

web/components/page-views/workspace-dashboard.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import Image from "next/image";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
@@ -9,9 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { TourRoot } from "components/onboarding";
 import { UserGreetingsView } from "components/user";
 import { CompletedIssuesGraph, IssuesList, IssuesPieChart, IssuesStats } from "components/workspace";
-import { Button } from "@plane/ui";
 // images
-import emptyDashboard from "public/empty-state/dashboard.svg";
 import { NewEmptyState } from "components/common/new-empty-state";
 import emptyProject from "public/empty-state/dashboard_empty_project.webp";
 

web/components/workspace/issues-list.tsx

@@ -34,7 +34,9 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
 
   return (
     <div>
-      <h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
+      <h3 className="mb-2 font-semibold">
+        <span className="capitalize">{type}</span> issues
+      </h3>
       {issues ? (
         <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 text-sm">
           <div
@@ -44,7 +46,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
           >
             <h4 className="capitalize">{type}</h4>
             <h4 className="col-span-2">Issue</h4>
-            <h4>{type === "overdue" ? "Due" : "Start"} Date</h4>
+            <h4>{type === "overdue" ? "Due" : "Start"} date</h4>
           </div>
           <div className="max-h-72 overflow-y-scroll">
             {issues.length > 0 ? (

web/components/workspace/issues-pie-chart.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
   <div>
-    <h3 className="mb-2 font-semibold">Issues by States</h3>
+    <h3 className="mb-2 font-semibold">Issues by states</h3>
     <div className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
       <div className="grid grid-cols-1 sm:grid-cols-4">
         <div className="sm:col-span-3">

web/components/workspace/issues-stats.tsx

@@ -15,6 +15,7 @@ type Props = {
 export const IssuesStats: React.FC<Props> = ({ data }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
+
   return (
     <div className="grid grid-cols-1 rounded-[10px] border border-custom-border-200 bg-custom-background-100 lg:grid-cols-3">
       <div className="grid grid-cols-1 divide-y divide-custom-border-200 border-b border-custom-border-200 lg:border-r lg:border-b-0">
@@ -77,8 +78,8 @@ export const IssuesStats: React.FC<Props> = ({ data }) => {
         </div>
       </div>
       <div className="p-4 lg:col-span-2">
-        <h3 className="mb-2 font-semibold capitalize flex items-center gap-2">
+        <h3 className="mb-2 font-semibold flex items-center gap-2">
-          Activity Graph
+          Activity graph
           <Tooltip
             tooltipContent="Your profile activity graph is a record of actions you've performed on issues across the workspace."
             className="w-72 border border-custom-border-200"

web/constants/analytics.ts

@@ -60,7 +60,7 @@ export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] =
 export const ANALYTICS_Y_AXIS_VALUES: { value: TYAxisValues; label: string }[] = [
   {
     value: "issue_count",
-    label: "Issue Count",
+    label: "Issue count",
   },
   {
     value: "estimate",

web/pages/[workspaceSlug]/analytics.tsx

@@ -17,7 +17,6 @@ import emptyAnalytics from "public/empty-state/analytics.svg";
 import { ANALYTICS_TABS } from "constants/analytics";
 // type
 import { NextPageWithLayout } from "types/app";
-import { NewEmptyState } from "components/common/new-empty-state";
 
 const AnalyticsPage: NextPageWithLayout = observer(() => {
   // store