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/ui/range-datepicker.tsx

@@ -0,0 +1,65 @@
+// react-datepicker
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  renderAs?: "input" | "button";
+  value: Date | string | null | undefined;
+  onChange: (val: string | null) => void;
+  error?: boolean;
+  className?: string;
+  isClearable?: boolean;
+  disabled?: boolean;
+  startDate: string | null;
+  endDate: string | null;
+  selectsStart?: boolean;
+  selectsEnd?: boolean;
+  minDate?: Date | null | undefined;
+  maxDate?: Date | null | undefined;
+};
+
+export const CustomRangeDatePicker: React.FC<Props> = ({
+  renderAs = "button",
+  value,
+  onChange,
+  error = false,
+  className = "",
+  disabled = false,
+  startDate,
+  endDate,
+  selectsStart = false,
+  selectsEnd = false,
+  minDate = null,
+  maxDate = null,
+}) => (
+  <DatePicker
+    selected={value ? new Date(value) : null}
+    onChange={(val) => {
+      if (!val) onChange(null);
+      else onChange(renderDateFormat(val));
+    }}
+    className={`${
+      renderAs === "input"
+        ? "block px-3 py-2 text-sm focus:outline-none"
+        : renderAs === "button"
+        ? `px-3 py-1 text-xs shadow-sm ${
+            disabled ? "" : "hover:bg-custom-background-80"
+          } duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
+        : ""
+    } ${error ? "border-red-500 bg-red-100" : ""} ${
+      disabled ? "cursor-not-allowed" : "cursor-pointer"
+    } w-full rounded-md border border-custom-border-200 bg-transparent caret-transparent ${className}`}
+    dateFormat="dd-MM-yyyy"
+    disabled={disabled}
+    selectsStart={selectsStart}
+    selectsEnd={selectsEnd}
+    startDate={startDate ? new Date(startDate) : new Date()}
+    endDate={endDate ? new Date(endDate) : new Date()}
+    minDate={minDate}
+    maxDate={maxDate}
+    shouldCloseOnSelect
+    inline
+  />
+);