New Directory Setup (#2065)

* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>

web/components/analytics/custom-analytics/select-bar.tsx

@@ -0,0 +1,80 @@
+// react-hook-form
+import { Control, Controller, UseFormSetValue } from "react-hook-form";
+// components
+import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
+// types
+import { IAnalyticsParams, IProject } from "types";
+
+type Props = {
+  control: Control<IAnalyticsParams, any>;
+  setValue: UseFormSetValue<IAnalyticsParams>;
+  projects: IProject[];
+  params: IAnalyticsParams;
+  fullScreen: boolean;
+  isProjectLevel: boolean;
+};
+
+export const AnalyticsSelectBar: React.FC<Props> = ({
+  control,
+  setValue,
+  projects,
+  params,
+  fullScreen,
+  isProjectLevel,
+}) => (
+  <div
+    className={`grid items-center gap-4 px-5 py-2.5 ${
+      isProjectLevel ? "grid-cols-3" : "grid-cols-2"
+    } ${fullScreen ? "lg:grid-cols-4 md:py-5" : ""}`}
+  >
+    {!isProjectLevel && (
+      <div>
+        <h6 className="text-xs text-custom-text-200">Project</h6>
+        <Controller
+          name="project"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <SelectProject value={value} onChange={onChange} projects={projects} />
+          )}
+        />
+      </div>
+    )}
+    <div>
+      <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
+      <Controller
+        name="y_axis"
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <SelectYAxis value={value} onChange={onChange} />
+        )}
+      />
+    </div>
+    <div>
+      <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
+      <Controller
+        name="x_axis"
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <SelectXAxis
+            value={value}
+            onChange={(val: string) => {
+              if (params.segment === val) setValue("segment", null);
+
+              onChange(val);
+            }}
+          />
+        )}
+      />
+    </div>
+    <div>
+      <h6 className="text-xs text-custom-text-200">Group</h6>
+      <Controller
+        name="segment"
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <SelectSegment value={value} onChange={onChange} params={params} />
+        )}
+      />
+    </div>
+  </div>
+);