Add other tools page

client/orval.config.ts

@@ -31,6 +31,7 @@ module.exports = {
           "Pillar",
           "Sdg",
           "Download-email",
+          "Other-tool"
         ],
       },
     },

client/src/app/(app)/other-tools/page.tsx

@@ -0,0 +1,45 @@
+import { dehydrate, Hydrate } from "@tanstack/react-query";
+import { getGetOtherToolsQueryOptions } from "@/types/generated/other-tool";
+import getQueryClient from "@/lib/react-query/getQueryClient";
+import OtherToolsList from "@/containers/other-tools";
+
+async function prefetchQueries() {
+  const queryClient = getQueryClient();
+  try {
+    const { queryKey, queryFn } = getGetOtherToolsQueryOptions({
+      populate: "other_tools_category",
+      sort: "other_tools_category.name",
+    });
+
+    await queryClient.prefetchQuery({
+      queryKey,
+      queryFn,
+    });
+    return dehydrate(queryClient);
+  } catch (error) {
+    console.info(error);
+    return null;
+  }
+}
+
+export default async function OtherTools() {
+  const dehydratedState = await prefetchQueries();
+
+  return (
+    <Hydrate state={dehydratedState}>
+      <>
+        <div className="relative z-10 h-full w-full bg-white">
+          <div className="h-full overflow-auto">
+            <div className="space-y-5 px-5 py-10">
+              <h1 className="font-metropolis text-3xl tracking-tight text-gray-700">Other Tools</h1>
+
+              <div className="space-y-5">
+                <OtherToolsList />
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    </Hydrate>
+  );
+}

client/src/containers/navigation/index.tsx

@@ -78,6 +78,33 @@ const Navigation = (): JSX.Element => {
             <span>Projects</span>
           </Link>
         </li>
+
+        <li className="group relative text-center">
+          <div
+            className={cn({
+              "absolute left-0 top-0 h-full w-1 -translate-x-full bg-[#E44491] transition-transform":
+                true,
+              "translate-x-0": pathname === "/other-tools",
+            })}
+          />
+          <Link
+            className={cn({
+              "flex flex-col items-center justify-center space-y-2 py-5 transition-colors": true,
+              "bg-[#E44491]/10": pathname === "/other-tools",
+              "text-gray-400 group-hover:text-gray-900": pathname !== "/other-tools",
+            })}
+            href="/other-tools"
+          >
+            <ProjectsSVG
+              className={cn({
+                "h-6 w-6 fill-none ": true,
+                "stroke-gray-400 group-hover:stroke-gray-900": pathname !== "/other-tools",
+                "stroke-[#E44491]": pathname === "/other-tools",
+              })}
+            />
+            <span>Other Tools</span>
+          </Link>
+        </li>
       </ul>
     </nav>
   );

client/src/containers/other-tools/index.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Search } from "@/components/ui/search";
+import { useGetOtherTools } from "@/types/generated/other-tool";
+import { useMemo, useState } from "react";
+import ToolCard from "./tool-card";
+
+const OtherTools = () => {
+  const [search, setSearch] = useState("");
+
+  const { data } = useGetOtherTools({
+    populate: "other_tools_category",
+    sort: "other_tools_category.name",
+  });
+
+  const otherTools = useMemo(
+    () =>
+      data?.data?.filter(
+        ({ attributes }) =>
+          attributes?.name?.toLowerCase()?.includes(search.toLowerCase()) ||
+          attributes?.other_tools_category?.data?.attributes?.name
+            ?.toLowerCase()
+            ?.includes(search.toLowerCase()) ||
+          attributes?.description?.toLowerCase()?.includes(search.toLowerCase()),
+      ),
+    [search, data],
+  );
+
+  return (
+    <div className="relative z-10 h-full w-full bg-white">
+      <div className="h-full overflow-auto">
+        <div className="p-1 pb-0">
+          <Search
+            placeholder="Search by name, category or description"
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </div>
+        <div className="space-y-5 px-5 py-10">
+          <div className="space-y-5">
+            {otherTools?.map((a) => <ToolCard key={a.id} tool={a.attributes} />)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default OtherTools;

client/src/containers/other-tools/tool-card/index.tsx

@@ -0,0 +1,25 @@
+import { OtherTool } from "@/types/generated/strapi.schemas";
+
+type ToolCardProps = {
+  tool?: OtherTool;
+};
+
+const ToolCard = ({ tool }: ToolCardProps) => {
+  return (
+    <div className="flex items-center space-x-5 rounded-lg border border-gray-200 p-5">
+      <a href={tool?.link} target="_blank" rel="noopener noreferrer">
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <h2 className="font-metropolis font-semibold text-gray-800">{tool?.name}</h2>
+            <div className="rounded-lg bg-gray-100 px-2 text-sm">
+              {tool?.other_tools_category?.data?.attributes?.name}
+            </div>
+          </div>
+          <p className="text-sm text-gray-600">{tool?.description}</p>
+        </div>
+      </a>
+    </div>
+  );
+};
+
+export default ToolCard;

client/src/types/generated/category.ts

@@ -13,10 +13,6 @@ import type {
   UseQueryOptions,
   UseQueryResult,
 } from "@tanstack/react-query";
-
-import { API } from "../../services/api/index";
-import type { ErrorType } from "../../services/api/index";
-
 import type {
   CategoryListResponse,
   CategoryRequest,
@@ -25,6 +21,8 @@ import type {
   GetCategoriesIdParams,
   GetCategoriesParams,
 } from "./strapi.schemas";
+import { API } from "../../services/api/index";
+import type { ErrorType } from "../../services/api/index";
 
 // eslint-disable-next-line
 type SecondParameter<T extends (...args: any) => any> = T extends (

client/src/types/generated/country.ts

@@ -13,10 +13,6 @@ import type {
   UseQueryOptions,
   UseQueryResult,
 } from "@tanstack/react-query";
-
-import { API } from "../../services/api/index";
-import type { ErrorType } from "../../services/api/index";
-
 import type {
   CountryListResponse,
   CountryRequest,
@@ -25,6 +21,8 @@ import type {
   GetCountriesIdParams,
   GetCountriesParams,
 } from "./strapi.schemas";
+import { API } from "../../services/api/index";
+import type { ErrorType } from "../../services/api/index";
 
 // eslint-disable-next-line
 type SecondParameter<T extends (...args: any) => any> = T extends (

client/src/types/generated/dataset.ts

@@ -13,10 +13,6 @@ import type {
   UseQueryOptions,
   UseQueryResult,
 } from "@tanstack/react-query";
-
-import { API } from "../../services/api/index";
-import type { ErrorType } from "../../services/api/index";
-
 import type {
   DatasetListResponse,
   DatasetRequest,
@@ -25,6 +21,8 @@ import type {
   GetDatasetsIdParams,
   GetDatasetsParams,
 } from "./strapi.schemas";
+import { API } from "../../services/api/index";
+import type { ErrorType } from "../../services/api/index";
 
 // eslint-disable-next-line
 type SecondParameter<T extends (...args: any) => any> = T extends (

client/src/types/generated/download-email.ts

@@ -13,10 +13,6 @@ import type {
   UseQueryOptions,
   UseQueryResult,
 } from "@tanstack/react-query";
-
-import { API } from "../../services/api/index";
-import type { ErrorType } from "../../services/api/index";
-
 import type {
   DownloadEmailListResponse,
   DownloadEmailRequest,
@@ -25,6 +21,8 @@ import type {
   GetDownloadEmailsIdParams,
   GetDownloadEmailsParams,
 } from "./strapi.schemas";
+import { API } from "../../services/api/index";
+import type { ErrorType } from "../../services/api/index";
 
 // eslint-disable-next-line
 type SecondParameter<T extends (...args: any) => any> = T extends (

client/src/types/generated/layer.ts

@@ -13,10 +13,6 @@ import type {
   UseQueryOptions,
   UseQueryResult,
 } from "@tanstack/react-query";
-
-import { API } from "../../services/api/index";
-import type { ErrorType } from "../../services/api/index";
-
 import type {
   Error,
   GetLayersIdParams,
@@ -25,6 +21,8 @@ import type {
   LayerRequest,
   LayerResponse,
 } from "./strapi.schemas";
+import { API } from "../../services/api/index";
+import type { ErrorType } from "../../services/api/index";
 
 // eslint-disable-next-line
 type SecondParameter<T extends (...args: any) => any> = T extends (