Feat create edit organization

src/frontend/package.json

@@ -52,6 +52,7 @@
     "@mui/lab": "^5.0.0-alpha.134",
     "@mui/material": "^5.14.12",
     "@mui/system": "^5.14.12",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^1.2.2",

src/frontend/src/api/OrganisationService.ts

@@ -78,24 +78,110 @@ export const PostOrganisationDataService: Function = (url: string, payload: any)
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: 'Organization Successfully Created.',
+            message: 'Organization Request Submitted.',
             variant: 'success',
             duration: 2000,
           }),
         );
       } catch (error: any) {
+        dispatch(OrganisationAction.PostOrganisationDataLoading(false));
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: error.response.data.detail,
+            message: error.response.data.detail || 'Failed to create organization.',
             variant: 'error',
             duration: 2000,
           }),
         );
-        dispatch(OrganisationAction.PostOrganisationDataLoading(false));
       }
     };
 
     await postOrganisationData(url, payload);
   };
 };
+
+export const GetIndividualOrganizationService: Function = (url: string) => {
+  return async (dispatch) => {
+    const getOrganisationData = async (url) => {
+      try {
+        const getOrganisationDataResponse = await axios.get(url);
+        const response: GetOrganisationDataModel = getOrganisationDataResponse.data;
+        dispatch(OrganisationAction.SetIndividualOrganization(response));
+      } catch (error) {}
+    };
+    await getOrganisationData(url);
+  };
+};
+
+export const PatchOrganizationDataService: Function = (url: string, payload: any) => {
+  return async (dispatch) => {
+    dispatch(OrganisationAction.PostOrganisationDataLoading(true));
+
+    const patchOrganisationData = async (url, payload) => {
+      dispatch(OrganisationAction.SetOrganisationFormData(payload));
+
+      try {
+        const generateApiFormData = new FormData();
+        appendObjectToFormData(generateApiFormData, payload);
+
+        const patchOrganisationData = await axios.patch(url, payload, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        });
+
+        const resp: HomeProjectCardModel = patchOrganisationData.data;
+        dispatch(OrganisationAction.PostOrganisationDataLoading(false));
+        dispatch(OrganisationAction.postOrganisationData(resp));
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: 'Organization Updated Successfully.',
+            variant: 'success',
+            duration: 2000,
+          }),
+        );
+      } catch (error: any) {
+        dispatch(OrganisationAction.PostOrganisationDataLoading(false));
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: error.response.data.detail || 'Failed to update organization.',
+            variant: 'error',
+            duration: 2000,
+          }),
+        );
+      }
+    };
+
+    await patchOrganisationData(url, payload);
+  };
+};
+
+export const ApproveOrganizationService: Function = (url: string, organizationId: string) => {
+  return async (dispatch) => {
+    const approveOrganization = async (url) => {
+      try {
+        await axios.post(url, organizationId);
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: 'Organization approved successfully.',
+            variant: 'success',
+            duration: 2000,
+          }),
+        );
+      } catch (error) {
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: 'Failed to approve organization.',
+            variant: 'error',
+            duration: 2000,
+          }),
+        );
+      }
+    };
+    await approveOrganization(url);
+  };
+};

src/frontend/src/components/ApproveOrganization/ApproveOrganizationHeader.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import AssetModules from '@/shared/AssetModules.js';
+import { useNavigate } from 'react-router-dom';
+
+const ApproveOrganizationHeader = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="fmtm-px-5 fmtm-border-b-white fmtm-border-[1px] fmtm-bg-[#F5F5F5]">
+      <div className="fmtm-flex fmtm-justify-between fmtm-items-center">
+        <div className="fmtm-pt-3 fmtm-pb-1">
+          <h1 className="sm:fmtm-text-xl md:fmtm-text-2xl">APPROVE ORGANIZATION</h1>
+        </div>
+        <div
+          className="hover:fmtm-bg-gray-200 fmtm-rounded-full fmtm-p-2 fmtm-duration-300 fmtm-cursor-pointer"
+          onClick={() => navigate('/organisation')}
+        >
+          <AssetModules.CloseIcon />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ApproveOrganizationHeader;

src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import InputTextField from '@/components/common/InputTextField';
+import TextArea from '@/components/common/TextArea';
+import Button from '@/components/common/Button';
+import { ApproveOrganizationService, GetIndividualOrganizationService } from '@/api/OrganisationService';
+import CoreModules from '@/shared/CoreModules';
+
+const OrganizationForm = () => {
+  const dispatch = useDispatch();
+  const params = useParams();
+  const organizationId = params.id;
+  const organisationFormData: any = CoreModules.useAppSelector((state) => state.organisation.organisationFormData);
+
+  useEffect(() => {
+    if (organizationId) {
+      dispatch(GetIndividualOrganizationService(`${import.meta.env.VITE_API_URL}/organisation/${organizationId}`));
+    }
+  }, [organizationId]);
+
+  const approveOrganization = () => {
+    dispatch(
+      ApproveOrganizationService(`${import.meta.env.VITE_API_URL}/organisation/approve`, { org_id: organizationId }),
+    );
+  };
+
+  return (
+    <div className="fmtm-max-w-[50rem] fmtm-bg-white fmtm-py-5 lg:fmtm-py-10 fmtm-px-5 lg:fmtm-px-9 fmtm-mx-auto">
+      <div className="fmtm-flex fmtm-justify-center">
+        <h5 className="fmtm-text-[#484848] fmtm-text-2xl fmtm-font-[600] fmtm-pb-3 lg:fmtm-pb-7 fmtm-font-archivo fmtm-tracking-wide">
+          Organizational Details
+        </h5>
+      </div>
+      <div className="fmtm-flex fmtm-flex-col fmtm-gap-6">
+        <InputTextField
+          id="name"
+          name="name"
+          label="Community or Organization Name"
+          value={organisationFormData?.name}
+          onChange={() => {}}
+          fieldType="text"
+        />
+        <InputTextField
+          id="email"
+          name="email"
+          label="Email"
+          value={organisationFormData?.email}
+          onChange={() => {}}
+          fieldType="text"
+        />
+        <InputTextField
+          id="url"
+          name="url"
+          label="Website URL"
+          value={organisationFormData?.url}
+          onChange={() => {}}
+          fieldType="text"
+        />
+        <TextArea
+          id="description"
+          name="description"
+          label="Description"
+          rows={3}
+          value={organisationFormData?.description}
+          onChange={() => {}}
+        />
+        <InputTextField
+          id="odk_central_url"
+          name="odk_central_url"
+          label="ODK Central URL "
+          value={organisationFormData?.odk_central_url}
+          onChange={() => {}}
+          fieldType="text"
+        />
+        <InputTextField
+          id="url"
+          name="url"
+          label="Community or Organization are you applied for? "
+          value={organisationFormData?.organization_type}
+          onChange={() => {}}
+          fieldType="text"
+        />
+        <div>
+          <p className="fmtm-text-[1rem] fmtm-font-semibold fmtm-mb-2">Logo</p>
+          {organisationFormData?.logo ? (
+            <div>
+              <img
+                src={organisationFormData?.logo}
+                alt=""
+                className="fmtm-h-[100px] fmtm-rounded-sm fmtm-border-[1px]"
+              />
+            </div>
+          ) : (
+            <p className="fmtm-ml-3">-</p>
+          )}
+        </div>
+      </div>
+      <div className="fmtm-flex fmtm-items-center fmtm-justify-center fmtm-gap-6 fmtm-mt-8 lg:fmtm-mt-16">
+        <Button btnText="Reject" btnType="other" className="fmtm-font-bold" onClick={() => {}} />
+        <Button btnText="Verify" btnType="primary" className="fmtm-font-bold" onClick={approveOrganization} />
+      </div>
+    </div>
+  );
+};
+
+export default OrganizationForm;

src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { consentQuestions } from '@/constants/ConsentQuestions';
+import { CustomCheckbox } from '@/components/common/Checkbox';
+import RadioButton from '@/components/common/RadioButton';
+import Button from '@/components/common/Button';
+import useForm from '@/hooks/useForm';
+import CoreModules from '@/shared/CoreModules';
+import ConsentDetailsValidation from '@/components/CreateEditOrganization/validation/ConsentDetailsValidation';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { OrganisationAction } from '@/store/slices/organisationSlice';
+import InstructionsSidebar from '@/components/CreateEditOrganization/InstructionsSidebar';
+
+const ConsentDetailsForm = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const consentDetailsFormData: any = CoreModules.useAppSelector((state) => state.organisation.consentDetailsFormData);
+
+  const submission = () => {
+    dispatch(OrganisationAction.SetConsentApproval(true));
+    dispatch(OrganisationAction.SetConsentDetailsFormData(values));
+  };
+
+  const { handleSubmit, handleCustomChange, values, errors }: any = useForm(
+    consentDetailsFormData,
+    submission,
+    ConsentDetailsValidation,
+  );
+
+  return (
+    <div className="fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-5 lg:fmtm-gap-10">
+      <InstructionsSidebar />
+      <div className="fmtm-bg-white lg:fmtm-w-[70%] xl:fmtm-w-[55rem] fmtm-py-5 lg:fmtm-py-10 fmtm-px-5 lg:fmtm-px-9">
+        <h5 className="fmtm-text-[#484848] fmtm-text-2xl fmtm-font-[600] fmtm-pb-3 lg:fmtm-pb-7 fmtm-font-archivo fmtm-tracking-wide">
+          Consent Details
+        </h5>
+        <div className="fmtm-flex fmtm-flex-col fmtm-gap-6">
+          {consentQuestions.map((question) => (
+            <div key={question.id}>
+              <div className="fmtm-mb-3 fmtm-flex fmtm-flex-col">
+                <h6 className="fmtm-text-lg">
+                  {question.question} {question.required && <span className="fmtm-text-red-500">*</span>}
+                </h6>
+                {question.description && (
+                  <p className="fmtm-text-[#7A7676] fmtm-font-archivo fmtm-text-base">{question.description}</p>
+                )}
+              </div>
+              {question.type === 'radio' ? (
+                <RadioButton
+                  options={question.options}
+                  direction="column"
+                  value={values[question.id]}
+                  onChangeData={(value) => {
+                    handleCustomChange(question.id, value);
+                  }}
+                  className="fmtm-font-archivo fmtm-text-base fmtm-text-[#7A7676] fmtm-mt-1"
+                  errorMsg={errors.give_consent}
+                />
+              ) : (
+                <div className="fmtm-flex fmtm-flex-col fmtm-gap-2">
+                  {question.options.map((option) => (
+                    <CustomCheckbox
+                      key={option.id}
+                      label={option.label}
+                      checked={values[question.id].includes(option.id)}
+                      onCheckedChange={(checked) => {
+                        return checked
+                          ? handleCustomChange(question.id, [...values[question.id], option.id])
+                          : handleCustomChange(
+                              question.id,
+                              values[question.id].filter((value) => value !== option.id),
+                            );
+                      }}
+                    />
+                  ))}
+                  {errors[question.id] && <p className="fmtm-text-red-500 fmtm-text-sm">{errors[question.id]}</p>}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="fmtm-flex fmtm-items-center fmtm-justify-center fmtm-gap-6 fmtm-mt-8 lg:fmtm-mt-16">
+          <Button
+            btnText="Cancel"
+            btnType="other"
+            className="fmtm-font-bold"
+            onClick={() => navigate('/organisation')}
+          />
+          <Button btnText="NEXT" btnType="primary" className="fmtm-font-bold" onClick={handleSubmit} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConsentDetailsForm;