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/modules/form.tsx

@@ -0,0 +1,160 @@
+import { useEffect } from "react";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// components
+import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
+// ui
+import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+// types
+import { IModule } from "types";
+
+type Props = {
+  handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: IModule;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: "backlog",
+  lead: null,
+  members_list: [],
+};
+
+export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+    control,
+    reset,
+  } = useForm<IModule>({
+    defaultValues,
+  });
+
+  const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  const startDate = watch("start_date");
+  const targetDate = watch("target_date");
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
+          {status ? "Update" : "Create"} Module
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <Input
+              id="name"
+              name="name"
+              type="name"
+              placeholder="Title"
+              autoComplete="off"
+              className="resize-none text-xl"
+              error={errors.name}
+              register={register}
+              validations={{
+                required: "Title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Title should be less than 255 characters",
+                },
+              }}
+            />
+          </div>
+          <div>
+            <TextArea
+              id="description"
+              name="description"
+              placeholder="Description"
+              className="h-32 resize-none text-sm"
+              error={errors.description}
+              register={register}
+            />
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Controller
+              control={control}
+              name="start_date"
+              render={({ field: { value, onChange } }) => (
+                <DateSelect
+                  label="Start date"
+                  value={value}
+                  onChange={(val) => {
+                    onChange(val);
+                  }}
+                  maxDate={maxDate ?? undefined}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="target_date"
+              render={({ field: { value, onChange } }) => (
+                <DateSelect
+                  label="Target date"
+                  value={value}
+                  onChange={(val) => {
+                    onChange(val);
+                  }}
+                  minDate={minDate ?? undefined}
+                />
+              )}
+            />
+            <ModuleStatusSelect control={control} error={errors.status} />
+            <Controller
+              control={control}
+              name="lead"
+              render={({ field: { value, onChange } }) => (
+                <ModuleLeadSelect value={value} onChange={onChange} />
+              )}
+            />
+            <Controller
+              control={control}
+              name="members"
+              render={({ field: { value, onChange } }) => (
+                <ModuleMembersSelect value={value} onChange={onChange} />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton type="submit" loading={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating Module..."
+              : "Update Module"
+            : isSubmitting
+            ? "Creating Module..."
+            : "Create Module"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};