Add application feature

Queries/Application/index.js

@@ -0,0 +1,42 @@
+import apiClient from '../../utlis/apiClient';
+import { APPLICATION_ENDPOINT } from '../../utlis/apiEndpoints';
+
+const url = APPLICATION_ENDPOINT;
+
+export const getApplication = async () => {
+  try {
+    const data = await apiClient.get(url);
+    return data;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch applications');
+  }
+};
+
+export const addEnvironment = async (id, values) => {
+  const updatedUrl = `${url}/${id}/environments`;
+  try {
+    const response = await apiClient.post(updatedUrl, values);
+    return response;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to add environment');
+  }
+};
+
+export const getApplicationById = async (id) => {
+  const updatedUrl = `${url}/${id}`;
+  try {
+    const response = await apiClient.get(updatedUrl);
+    return response;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch application');
+  }
+};
+
+export const addApplication = async (values) => {
+  try {
+    const response = await apiClient.post(url, values);
+    return response;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to add application');
+  }
+};

Queries/DeploymentSpace/index.js

@@ -0,0 +1,14 @@
+import apiClient from '../../utlis/apiClient';
+import { ENVIRONMENT_ENDPOINT } from '../../utlis/apiEndpoints';
+
+const url = ENVIRONMENT_ENDPOINT;
+
+export const addDeploymentConfig = async (id, values) => {
+  const updatedUrl = `${url}/${id}/deploymentspace`;
+  try {
+    const response = await apiClient.post(updatedUrl, values);
+    return response;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to add deployment space');
+  }
+};

README.md

@@ -24,15 +24,15 @@ Zop is a comprehensive tool for managing cloud infrastructure. It consists of th
 Run the following command to pull and start the Docker image for the zop-api:
 
 ```bash
-    docker run -d -p 8000:8000 --name zop-api zop.dev/zop-api:v0.0.1
+    docker run -d -p 8000:8000 --name zop-api zopdev/zop-api:v0.0.1
 ```
 
 #### zop-ui
 
 Run the following command to pull and start the Docker image for the zop-ui:
 
 ```bash
-    docker run -d -p 3000:3000 -e NEXT_PUBLIC_API_BASE_URL='http://localhost:8000' --name zop-ui zop.dev/zop-ui:v0.0.1
+    docker run -d -p 3000:3000 -e NEXT_PUBLIC_API_BASE_URL='http://localhost:8000' --name zop-ui zopdev/zop-ui:v0.0.1
 ```
 
 > **Note:** The environment variable `NEXT_PUBLIC_API_BASE_URL` is used by zop-ui to connect to the

components/Animation/animateHeight.js

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const AnimateHeight = ({ children, className, dependency, customAnimation }) => {
+  const [height, setHeight] = useState(0);
+  const parentRef = useRef(null);
+
+  let time;
+  const handleChange = () => {
+    if (!parentRef.current) {
+      return;
+    }
+    const childFirst = parentRef.current.children[0];
+    const heightChild = childFirst.getBoundingClientRect().height;
+    setHeight(heightChild);
+    time = setTimeout(() => {
+      if (heightChild !== childFirst.getBoundingClientRect().height) {
+        handleChange();
+      }
+    }, 100);
+  };
+
+  useEffect(() => {
+    handleChange();
+    return () => {
+      clearTimeout(time);
+    };
+  }, [children, dependency]);
+
+  useEffect(() => {
+    if (!parentRef.current) {
+      return;
+    }
+    const resizeOb = new ResizeObserver(handleChange);
+    const childFirst = parentRef.current.children[0];
+    if (childFirst) resizeOb.observe(childFirst);
+
+    return () => {
+      if (childFirst) resizeOb.unobserve(childFirst);
+    };
+  }, [parentRef.current]);
+
+  return (
+    <div className={`overflow-hidden ${className}`}>
+      <div
+        className={`ease-linear transition-all ${customAnimation || 'duration-500'}`}
+        style={{
+          height,
+        }}
+        ref={parentRef}
+      >
+        <div>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default AnimateHeight;

components/BreadCrumb/index.js

@@ -0,0 +1,42 @@
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
+import Link from 'next/link';
+
+export default function BreadCrumbComp({ breadcrumbList, style }) {
+  return (
+    <>
+      {breadcrumbList[1]?.name !== 'loading...' && (
+        <nav
+          className={`flex overflow-x-auto max-w-[90vw] -mt-4 mb-3 ${style}`}
+          aria-label="Breadcrumb"
+        >
+          <ol role="list" className="flex items-center space-x-2 whitespace-nowrap">
+            {breadcrumbList.map((page, idx) => (
+              <li key={idx}>
+                <div className="flex items-center">
+                  <Link
+                    href={page.link}
+                    className={`text-xs font-medium ${
+                      page.disable
+                        ? 'border-gray-500 border-solid cursor-default text-gray-500 '
+                        : 'text-gray-500 hover:text-gray-700'
+                    }`}
+                  >
+                    {page.name?.length > 16
+                      ? `${page.name.slice(0, 10)}...${page.name.slice(-3)}`
+                      : page.name}
+                  </Link>
+                  {breadcrumbList.length !== idx + 1 && (
+                    <ChevronRightIcon
+                      className=" ml-2 h-3 w-3 flex-shrink-0 text-gray-400"
+                      aria-hidden="true"
+                    />
+                  )}
+                </div>
+              </li>
+            ))}
+          </ol>
+        </nav>
+      )}
+    </>
+  );
+}

components/Cards/applicationCard.js

@@ -0,0 +1,94 @@
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { formatTime } from '../../utlis/helperFunc';
+
+const ApplicationCard = ({ data, view }) => {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (data?.id) {
+      router.prefetch(`/applications/${data?.id}`);
+    }
+  }, [data?.id, router]);
+
+  const handleRedirect = () => {
+    router.push(`/applications/${data?.id}/deploymentSpace`);
+  };
+
+  return (
+    <div
+      className={`relative w-[330px] ${view === 'navBar' ? 'h-[146px]' : 'h-auto'} p-6 ${
+        view === 'navBar' ? 'px-6 py-4' : 'px-5 py-5'
+      } cursor-pointer rounded-md border border-gray-200 hover:bg-gray-50 hover:shadow-lg transition-shadow`}
+      onClick={handleRedirect}
+    >
+      <div className="flex items-center mb-5 gap-2">
+        <h3 className="text-lg font-medium text-gray-600">{data?.name}</h3>
+      </div>
+
+      <div className="flex justify-between mb-5">
+        <div className="flex w-full  items-center">
+          {data?.services !== 0 && (
+            <p className="text-xs text-gray-500 font-medium">{data?.environments?.length}</p>
+          )}
+          <p className="text-xs text-gray-500 font-light ">
+            &nbsp;
+            {data?.environments?.length === 1
+              ? 'Environment'
+              : data?.environments?.length > 1
+                ? 'Environments'
+                : ' '}
+          </p>
+        </div>
+      </div>
+
+      {data?.environments?.length > 1 ? (
+        <div className={`flex gap-2 overflow-auto scroll-hidden`}>
+          {data.environments.map((single) => (
+            <div
+              className="h-14 bg-gray-900/5 rounded-lg flex justify-center items-center p-2 mb-3 min-w-[100] w-full"
+              key={single.id}
+            >
+              <div>
+                {/* <p className="text-xs text-gray-500">Environment</p> */}
+                <p className="text-sm text-gray-900 text-start">{single.name}</p>
+              </div>
+
+              {/* <div>
+                <div className={`relative flex gap-1`}>
+                  <p className="text-xs text-gray-500">Order</p>
+                </div>
+                <p className="text-sm text-gray-900 text-right">{single.level ?? '1'}</p>
+              </div> */}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="h-14 bg-gray-900/5 rounded-lg flex justify-between p-2 mb-3">
+          <div>
+            <p className="text-xs text-gray-500">Environment</p>
+            <p className="text-sm text-gray-900 text-start">{data?.environments?.[0]?.name}</p>
+          </div>
+
+          <div>
+            <p className="text-xs text-gray-500">Order</p>
+            <p className="text-sm text-gray-900 text-center">{data?.environments?.[0]?.level}</p>
+          </div>
+        </div>
+      )}
+
+      <div className="text-xs text-gray-400 pt-1 ">
+        Updated At{' '}
+        {/* <span className="text-gray-900">
+          {item?.updatedByIdentifier || item?.createdByIdentifier}
+        </span> */}
+        <span className="text-xs text-gray-500">{formatTime(data?.updatedAt)}</span>
+      </div>
+      {/* <p className="text-xs text-gray-500">
+        <span>{formatTime(data?.updatedAt)}</span>
+      </p> */}
+    </div>
+  );
+};
+
+export default ApplicationCard;