Feat: tree details page

dashboard/package.json

@@ -43,6 +43,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-intl": "^6.6.8",
+    "react-router-dom": "^6.24.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.1",

dashboard/src/api/TreeDetails.tsx

@@ -0,0 +1,17 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+
+import { TreeDetails } from '@/types/tree/TreeDetails';
+
+import http from './api';
+
+const fetchTreeDetailData = async (treeId: string): Promise<TreeDetails> => {
+  const res = await http.get(`/api/tree/${treeId}`);
+  return res.data;
+};
+
+export const useTreeDetails = (treeId: string): UseQueryResult<TreeDetails> => {
+  return useQuery({
+    queryKey: ['treeData', treeId],
+    queryFn: () => fetchTreeDetailData(treeId),
+  });
+};

dashboard/src/components/Accordion/Accordion.tsx

@@ -10,7 +10,7 @@ import {
   CollapsibleTrigger,
 } from '../ui/collapsible';
 import ColoredCircle from '../ColoredCircle/ColoredCircle';
-import { ComponentType } from '../ListingComponentItem/ListingComponentItem';
+import { ItemType } from '../ListingItem/ListingItem';
 
 export interface IAccordion {
   headers: string[];
@@ -97,7 +97,7 @@ const AccordionBuildsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
         <ColoredCircle
           className="max-w-6"
           quantity={triggerInfo.buildErrors ?? 0}
-          type={ComponentType.Error}
+          type={ItemType.Error}
         />
       </TableCell>
       <TableCell>{triggerInfo.buildTime}</TableCell>
@@ -120,11 +120,11 @@ const AccordionTestsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
       <TableCell className="flex flex-row gap-1">
         <ColoredCircle
           quantity={triggerInfo.testErrors ?? 0}
-          type={ComponentType.Error}
+          type={ItemType.Error}
         />
         <ColoredCircle
           quantity={triggerInfo.testSuccessfull ?? 0}
-          type={ComponentType.Warning}
+          type={ItemType.Warning}
         />
       </TableCell>
       <TableCell>

dashboard/src/components/Button/ButtonWithIcon.tsx

@@ -0,0 +1,28 @@
+import { ReactElement } from 'react';
+import classNames from 'classnames';
+
+import { Button } from '../ui/button';
+
+interface IButtonWithIcon {
+  icon?: ReactElement;
+  label?: ReactElement;
+  className?: string;
+}
+
+const buttonsClassName =
+  'bg-lightGray border border-black text-black rounded-full items-center gap-2 hover:bg-darkGray px-6';
+
+const ButtonWithIcon = ({
+  icon,
+  label,
+  className,
+}: IButtonWithIcon): JSX.Element => {
+  return (
+    <Button className={classNames(buttonsClassName, className)}>
+      {label}
+      {icon}
+    </Button>
+  );
+};
+
+export default ButtonWithIcon;

dashboard/src/components/Cards/BaseCard.tsx

@@ -2,13 +2,13 @@ import { ReactElement } from 'react';
 import classNames from 'classnames';
 
 interface IBaseCard {
-  title: string;
+  title: ReactElement;
   content: ReactElement;
   className?: string;
 }
 
 const containerClassName =
-  'flex flex-col rounded-xl bg-white w-1/2 h-fit border border-darkGray text-black';
+  'flex flex-col rounded-xl bg-white w-full h-fit border border-darkGray text-black';
 
 const BaseCard = ({ title, content, className }: IBaseCard): JSX.Element => {
   return (

dashboard/src/components/CardsGroup/CardsGroup.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+import Summary, { ISummary } from '../Summary/Summary';
+import BaseCard from '../Cards/BaseCard';
+import ListingContent, {
+  IListingContent,
+} from '../ListingContent/ListingContent';
+
+interface ICardsGroup {
+  cards: (IListingContent | ISummary)[];
+}
+
+interface ICardContent {
+  card: IListingContent | ISummary;
+}
+
+const CardsGroup = ({ cards }: ICardsGroup): JSX.Element => {
+  const cardsList = useMemo(() => {
+    return cards.map(card => (
+      <BaseCard
+        key={card.title.key}
+        title={card.title}
+        content={<CardContent card={card} />}
+      />
+    ));
+  }, [cards]);
+  return <div className="grid grid-cols-2 gap-8">{cardsList}</div>;
+};
+
+const CardContent = ({ card }: ICardContent): JSX.Element => {
+  if (card.type === 'listing' && card.items) {
+    return <ListingContent key={card.title.key} items={card.items} />;
+  } else if (card.type === 'summary' && card.summaryBody) {
+    return (
+      <Summary
+        key=""
+        summaryHeaders={card?.summaryHeaders}
+        summaryBody={card?.summaryBody}
+      />
+    );
+  } else {
+    return <></>;
+  }
+};
+
+export default CardsGroup;