fix-docs

src/components/Docs/DocsMain.tsx

@@ -5,11 +5,11 @@ import Footer from '../Footer';
 // eslint-disable-next-line react/function-component-definition
 const DocsMain: FC<{ content: any }> = ({ content }) => (
   <>
-    <section className="dark:bg-dark-bg flex justify-start items-start w-full font-serif">
-      <div className="w-[23%] box-border">
+    <section className="relative dark:bg-dark-bg flex justify-start items-stretch w-full font-serif">
+      <div className="hidden lg:flex stick min-h-[72vh] max-h-[540px] px-5 py-2 w-full max-w-[235px] box-border flex-grow border-r-[1px] border-primary custom-scrollbar">
         <SideBarDocs />
       </div>
-      <div className="box-border w-[70%]  border-l-[1px] border-primary min-h-[92vh]">
+      <div className="stick lg:overflow-y-auto lg:min-h-[72vh] lg:max-h-[540px] box-border  w-full flex-grow lg:custom-scrollbar">
         {content}
       </div>
     </section>

src/components/Docs/MobileDropdown.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+function MobileDropdown() {
+  return (
+    <section className="py-1 pt-2 font-serif max-h-[300px] pr-3 overflow-auto custom-scrollbar">
+      <ul className="py-2 flex flex-col gap-4 text-[16px]">
+        <NavLink
+          className={(navData) => {
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
+            return '';
+          }}
+          to="/docs/getting-started"
+        >
+          Getting started (new users)
+        </NavLink>
+
+        <NavLink
+          className={(navData) => {
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
+            return '';
+          }}
+          to="/docs/org-signin"
+        >
+          <li>How To SignIn An Organization</li>
+        </NavLink>
+        <NavLink
+          className={(navData) => {
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
+            return '';
+          }}
+          to="/docs/org-signup"
+        >
+          <li>How To SignUp A New Organization</li>
+        </NavLink>
+      </ul>
+    </section>
+  );
+}
+
+export default MobileDropdown;

src/components/Docs/RoleDocs.tsx

@@ -0,0 +1,240 @@
+/* eslint-disable react/no-unescaped-entities */
+/* eslint-disable react/button-has-type */
+
+import React, { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyQuery } from '@apollo/client';
+import DataTable from '../DataTable';
+import Modal from './DocModel';
+import Button from '../Buttons';
+import useDocumentTitle from '../../hook/useDocumentTitle';
+import { GET_DOCUMENTATION } from '../../queries/manageStudent.queries';
+import { UserContext } from '../../hook/useAuth';
+
+interface RoleDocsProps {
+  userRole: String;
+}
+
+function RoleDocs({ userRole }: RoleDocsProps) {
+  useDocumentTitle('Role Documentation');
+  const { user } = useContext(UserContext);
+  const { t } = useTranslation();
+  const [selectedContent, setSelectedContent] = useState<any | null>(null);
+  const [documentations, setDocumentations] = useState<any[]>([]);
+  const [selectedDocId, setSelectedDocId] = useState<string>('');
+
+  const columns = [{ Header: t('Contents'), accessor: 'Contents' }];
+
+  const closeModal = () => {
+    setSelectedContent(null);
+  };
+
+  const [getDocumentations, { loading }] = useLazyQuery(GET_DOCUMENTATION, {
+    fetchPolicy: 'network-only',
+
+    onCompleted: (data) => {
+      setDocumentations(
+        data.getDocumentations.filter((documentation: any) => {
+          if (userRole.toLowerCase() === 'trainee') {
+            return (
+              documentation.for.toLowerCase() === userRole ||
+              documentation.for.toLowerCase() === 'all users'
+            );
+          }
+          return (
+            documentation.for.toLowerCase() === userRole ||
+            documentation.for.toLowerCase() === 'not trainees' ||
+            documentation.for.toLowerCase() === 'all users'
+          );
+        }),
+      );
+    },
+    onError: (error) => {},
+  });
+
+  useEffect(() => {
+    getDocumentations();
+  }, []);
+
+  const request = (
+    <Button
+      variant="primary"
+      size="sm"
+      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+      onClick={() => setSelectedContent('Requesting feedback on ratings')}
+    >
+      {t('Requesting feedback on ratings')}
+    </Button>
+  );
+
+  const provide = (
+    <Button
+      variant="primary"
+      size="sm"
+      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+      onClick={() =>
+        setSelectedContent('Providing Feedback to the Coordinator')
+      }
+    >
+      {t('Providing Feedback to the Coordinator')}
+    </Button>
+  );
+
+  const understanding = (
+    <Button
+      variant="primary"
+      size="sm"
+      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+      onClick={() => setSelectedContent('Understanding the Rating System')}
+    >
+      {t('Understanding the Rating System')}
+    </Button>
+  );
+
+  const improving = (
+    <Button
+      variant="primary"
+      size="sm"
+      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+      onClick={() => setSelectedContent('Improving Your Ratings')}
+    >
+      {t('Improving Your Ratings')}
+    </Button>
+  );
+
+  const contents1 = [request, provide];
+  const tableData1 = contents1.map((content) => ({ Contents: content }));
+
+  const contents2 = [understanding, improving];
+  const tableData2 = contents2.map((content) => ({ Contents: content }));
+
+  const togglePage = (pageNumber: string) => {
+    setSelectedDocId(pageNumber);
+    // get all ids from documentation
+    documentations.map((documentation) => {
+      // set class to hidden
+      document.getElementById(`${documentation.id}`)?.classList.add('hidden');
+
+      // if id matches the page number, remove hidden class
+      if (documentation.id === pageNumber) {
+        if (selectedDocId === pageNumber) {
+          document
+            .getElementById(`${documentation.id}`)
+            ?.classList.add('hidden');
+          setSelectedDocId('');
+        } else {
+          document
+            .getElementById(`${documentation.id}`)
+            ?.classList.remove('hidden');
+        }
+      }
+      return null;
+    });
+  };
+
+  const Skeleton = (
+    <>
+      <div className="flex flex-col px-5 grow bg-light-bg dark:bg-dark-frame-bg text-light-text dark:text-dark-text-fill font-serif">
+        {[0, 1, 2, 3, 4, 5].map((i) => (
+          <div key={i} className="mt-4 flex gap-3">
+            <div className="w-[32px] h-7 animate-pulse duration-75 bg-gray-400/70 dark:bg-gray-400/40 rounded-[6px]" />
+            <div className="flex items-center w-[280px] mb-4 h-7 animate-pulse duration-75 bg-gray-400 dark:bg-gray-400/40 rounded-[6px]" />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+
+  const page1 = (
+    <>
+      {!loading &&
+        documentations.length > 0 &&
+        documentations.map((documentation, index: number) => (
+          <React.Fragment key={documentation.id}>
+            <div className="flex gap-2 items-center">
+              <p>{index + 1}.</p>
+              <Button
+                variant="primary"
+                size="sm"
+                style="bg-light-bg dark:bg-transparent hover:dark:bg-gray-500 text-light-text dark:text-dark-text-fill"
+                onClick={() => togglePage(documentation.id)}
+              >
+                {documentation.title}
+              </Button>
+            </div>
+
+            <div id={documentation.id} className="hidden">
+              <div className="w-full pr-2 md:w-2/3 mb-10 ml-0 md:ml-48 max-h-[430px] overflow-auto custom-scrollbar">
+                <div>{documentation.description}</div>
+              </div>
+
+              {documentation.subDocuments.length > 0 && (
+                <DataTable
+                  data={documentation.subDocuments.map((subDocument: any) => ({
+                    Contents: (
+                      <Button
+                        key={subDocument.title}
+                        variant="primary"
+                        size="sm"
+                        style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+                        onClick={() => {
+                          setSelectedContent({
+                            title: subDocument.title,
+                            description: subDocument.description,
+                          });
+                        }}
+                      >
+                        {t(`${subDocument.title}`)}
+                      </Button>
+                    ),
+                  }))}
+                  columns={columns}
+                  title={t('')}
+                />
+              )}
+            </div>
+          </React.Fragment>
+        ))}
+
+      {loading && <p className="text-lg text-center">Loading Docs ...</p>}
+
+      {!loading && documentations.length === 0 && (
+        <p className="text-lg text-center">
+          There are no documentations by now.
+        </p>
+      )}
+    </>
+  );
+
+  return (
+    <div className="flex flex-col px-5 grow bg-light-bg dark:bg-dark-frame-bg text-light-text dark:text-dark-text-fill font-serif">
+      <div className="">{!loading ? page1 : Skeleton}</div>
+
+      {selectedContent && (
+        <Modal onClose={closeModal}>
+          {selectedContent && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
+              <div className="relative overflow-auto min-h-[300px] max-h-[500px] lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 pt-3 text-left align-middle shadow-xl transition-all custom-scrollbar">
+                <button
+                  className="sticky text-black top-2 ml-[90%] px-2 py-[2px] rounded-[4px] dark:bg-gray-600 bg-gray-200 hover:bg-gray-400 dark:text-white"
+                  onClick={closeModal}
+                >
+                  close
+                </button>
+
+                <h2 className="mb-4 mt-[2px] text-[16px] sm:text-[20px] font-bold">
+                  {selectedContent.title}
+                </h2>
+                <p className="text-[14px] sm:text-[15px]">
+                  {selectedContent.description}
+                </p>
+              </div>
+            </div>
+          )}
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+export default RoleDocs;

src/components/Docs/SideBarDocs.tsx

@@ -3,11 +3,11 @@ import { NavLink } from 'react-router-dom';
 
 function SideBarDocs() {
   return (
-    <section className="py-8 px-5 font-serif">
-      <ul className="p-2 flex flex-col gap-4">
+    <section className="py-5 font-serif">
+      <ul className="py-2 flex flex-col gap-4 text-[16px]">
         <NavLink
           className={(navData) => {
-            if (navData.isActive) return 'text-primary';
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
             return '';
           }}
           to="/docs/getting-started"
@@ -17,7 +17,7 @@ function SideBarDocs() {
 
         <NavLink
           className={(navData) => {
-            if (navData.isActive) return 'text-primary';
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
             return '';
           }}
           to="/docs/org-signin"
@@ -26,7 +26,7 @@ function SideBarDocs() {
         </NavLink>
         <NavLink
           className={(navData) => {
-            if (navData.isActive) return 'text-primary';
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
             return '';
           }}
           to="/docs/org-signup"

src/components/Docs/SigninOrgDocs.tsx

@@ -10,11 +10,11 @@ function SigninOrgDocs() {
         content={
           <div className="flex items-start box-border font-serif">
             <div className="w-full">
-              <div className=" w-full sm:px-10 mb-10 text-gray-600  dark:text-slate-300 text-lg ml-0 pt-4">
-                <h2 className="mb-4 mt-4 text-4xl font-[800] text-primary">
+              <div className=" w-full sm:px-10 text-slate-700 dark:text-slate-200 ml-0 pt-4">
+                <h2 className="mb-4 mt-4 text-2xl font-[800] text-primary">
                   How to Login to an Organisation.
                 </h2>
-                <div className="mt-5 w-[100%] sm:w-full mb-4">
+                <div className="mt-5 w-[100%] sm:w-full">
                   To sign in to our website, users need to choose an
                   organization they belong to. This selection is essential for
                   access control, data security, and providing a personalized
@@ -27,7 +27,7 @@ function SigninOrgDocs() {
                   security, and tailors the user experience to the needs of
                   individual organizations.
                 </div>
-                <h2 className="mb-4 text-3xl font-bold text-black dark:text-white">
+                <h2 className="mb-4 text-xl font-bold text-black dark:text-white">
                   Steps on how to:
                 </h2>
                 <p className="text-gray-800 mb-4 dark:text-slate-300">

src/components/Docs/SignupOrgDocs.tsx

@@ -10,8 +10,8 @@ function SignupOrgDocs() {
         content={
           <div className="flex items-start font-serif">
             <div className="w-full">
-              <div className=" w-full sm:px-10 mb-10 ml-0 text-lg text-gray-600 dark:text-slate-300 sm:w-full pt-4">
-                <h2 className="mb-4 mt-4 text-4xl font-[800] text-primary">
+              <div className=" w-full sm:px-10 ml-0 text-slate-700 dark:text-slate-200 sm:w-full pt-4">
+                <h2 className="mt-4 text-2xl font-[800] text-primary">
                   How to Register an Organisation.
                 </h2>
                 <div className="mt-5 w-[100%] sm:w-full mb-4">
@@ -28,7 +28,7 @@ function SignupOrgDocs() {
                   manage their organization's profile, and utilize our
                   platform's services effectively.
                 </div>
-                <h2 className="mb-4 text-3xl font-bold text-black dark:text-white">
+                <h2 className="mb-4 text-xl font-bold text-black dark:text-white">
                   Steps on how to:
                 </h2>
                 <ol className="list-decimal ml-6">