created initial page layouts, added branding and updated tests from b…

…oilerplate

Created required reusable components
Set-up API calls to required endpoints
Deleted components which were not required for test

package.json

@@ -23,13 +23,14 @@
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
+    "axios": "^1.7.2",
     "framer-motion": "10.18.0",
+    "moment": "^2.30.1",
     "next": "^14.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "axios": "^1.7.2",
-    "swr": "^2.2.5",
-    "react-icons": "5.0.1"
+    "react-icons": "5.0.1",
+    "swr": "^2.2.5"
   },
   "devDependencies": {
     "@types/node": "20.10.5",

src/components/Device/deviceSensorDetails.tsx

@@ -0,0 +1,50 @@
+/**
+ * A React component that renders a card displaying details about a sensor, including its name, value, and unit.
+ *
+ * @param {DeviceSensorDetailsProps} props - The props for the component.
+ * @param {string} props.detailTitle - The title of the sensor detail.
+ * @param {string} props.value - The value of the sensor.
+ * @param {string} props.iconSrc - The source of the icon to display.
+ * @param {string} props.iconAlt - The alt text for the icon.
+ * @returns {JSX.Element} - The rendered sensor detail card.
+ */
+import { HStack, Img, Skeleton, Text, VStack } from "@chakra-ui/react";
+
+type DeviceSensorDetailsProps = {
+  detailTitle: string;
+  value: string;
+  iconSrc: string;
+  iconAlt: string;
+};
+const DeviceSensorDetails = ({
+  detailTitle,
+  value,
+  iconSrc,
+  iconAlt,
+}: DeviceSensorDetailsProps) => {
+  if (!value) {
+    return <Skeleton />;
+  }
+  return (
+    <VStack
+      textAlign="left"
+      spacing="0"
+      justifyContent="flex-start"
+      alignItems="flex-start"
+    >
+      <Text fontSize="xs" color="gray.400">
+        {detailTitle}
+      </Text>
+      <Text fontSize="sm" color="black">
+        <HStack spacing="2" justifyContent="flex-start">
+          <Img src={iconSrc} alt={iconAlt} width="15px" />
+          <Text width="full" fontSize="xs">
+            {value}
+          </Text>
+        </HStack>
+      </Text>
+    </VStack>
+  );
+};
+
+export default DeviceSensorDetails;

src/components/Device/deviceStatusDetails.tsx

@@ -0,0 +1,27 @@
+import { Skeleton, Text, VStack } from "@chakra-ui/react";
+
+type DeviceDetailCardProps = {
+  detailTitle: string;
+  value: string;
+};
+
+const DeviceStatusDetails = ({ detailTitle, value }: DeviceDetailCardProps) => {
+  if (!value) {
+    return <Skeleton />;
+  }
+  return (
+    <VStack
+      textAlign="left"
+      spacing="0"
+      justifyContent="flex-start"
+      alignItems="flex-start"
+    >
+      <Text fontSize="xs" color="gray.400">
+        {detailTitle}
+      </Text>
+      <Text fontSize="xs">{value}</Text>
+    </VStack>
+  );
+};
+
+export default DeviceStatusDetails;

src/components/Device/index.tsx

@@ -0,0 +1,4 @@
+import DeviceSensorDetails from "./deviceSensorDetails";
+import DeviceStatusDetails from "./deviceStatusDetails";
+
+export { DeviceSensorDetails, DeviceStatusDetails };

src/components/Filters/TextSearch/index.tsx

@@ -0,0 +1,20 @@
+import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
+import { BiSearch } from "react-icons/bi";
+
+const TextSearch = () => {
+  return (
+    <InputGroup>
+      <InputLeftElement pointerEvents="none">
+        <BiSearch color="gray.300" />
+      </InputLeftElement>
+      <Input
+        type="text"
+        maxWidth="600px"
+        placeholder="Search Devices"
+        backgroundColor="gray.200"
+      />
+    </InputGroup>
+  );
+};
+
+export default TextSearch;

src/components/Header/index.component.cy.tsx

@@ -8,7 +8,5 @@ describe("Header", () => {
     cy.get('[data-cy="title-header"]')
       .should("be.visible")
       .contains("Cypress Test");
-
-    cy.get('[data-cy="theme-button"]').should("be.visible").and("be.enabled");
   });
 });

src/components/Header/index.tsx

@@ -1,17 +1,25 @@
-import { Flex, Text } from "@chakra-ui/react";
+/**
+ * Renders a header component with a title, page icon, and descriptive text.
+ *
+ * @param {HeaderProps} props - The props for the header component.
+ * @param {string} props.title - The title to display in the header.
+ * @returns {JSX.Element} The rendered header component.
+ */
+import { Text } from "@chakra-ui/react";
 
-import ThemeButton from "../ThemeButton";
+import { devicesPage } from "~/constants/branding/pages";
+import { PageHeader } from "./pageHeader";
 
 interface HeaderProps {
   title: string;
 }
 
 export default function Header({ title }: HeaderProps) {
   return (
-    <Flex justifyContent="space-between">
-      <Flex />
-      <Text data-cy="title-header">{title}</Text>
-      <ThemeButton aria-label="Toggle light-dark mode" />
-    </Flex>
+    <PageHeader
+      header={<Text>{title || devicesPage.name}</Text>}
+      pageIcon={devicesPage.icon}
+      pageDescription={devicesPage.descriptiveText}
+    />
   );
 }

src/components/Header/pageHeader.tsx

@@ -0,0 +1,64 @@
+import { HStack, Img, Heading, IconButton } from "@chakra-ui/react";
+
+type PageContentContainerProps = {
+  header: React.ReactNode;
+  pageIcon: string;
+  pageDescription: string;
+};
+
+const PageHeader = ({
+  header,
+  pageIcon,
+  pageDescription,
+}: PageContentContainerProps) => {
+  return (
+    <HStack width="full" justifyContent="space-between">
+      <HStack width="auto" alignContent="baseline" spacing="2" paddingY="4">
+        <Img src={pageIcon} alt={pageDescription} width="40px" height="40px" />
+        <Heading as="h1" size="md" data-cy="title-header">
+          {header}
+        </Heading>
+      </HStack>
+      <HStack width="auto">
+        <IconButton
+          isDisabled
+          aria-label="Notifications"
+          icon={
+            <Img
+              width="16px"
+              height="19px"
+              src="/icons/icon-notification-bell.svg"
+              alt="Notifications"
+            />
+          }
+        />
+        <IconButton
+          isDisabled
+          aria-label="Apps"
+          icon={
+            <Img
+              width="16px"
+              height="16px"
+              src="/icons/icon-apps.svg"
+              alt="Apps"
+            />
+          }
+        />
+        <IconButton
+          isDisabled
+          aria-label="Account"
+          icon={
+            <Img
+              width="20px"
+              height="20px"
+              src="/icons/icon-account--circle.svg"
+              alt="Account"
+            />
+          }
+        />
+      </HStack>
+    </HStack>
+  );
+};
+
+export { PageHeader };

src/components/Layout/index.tsx

@@ -0,0 +1,45 @@
+/**
+ * `PageContentContainer` is a React component that provides a layout for a page content area. It includes a header with a page icon, title, and some action buttons, as well as a side navigation component and the main content area.
+ *
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.header - The header content for the page.
+ * @param {React.ReactNode} props.children - The main content for the page.
+ * @param {string} props.pageIcon - The URL of the page icon image.
+ * @param {string} props.pageDescription - A description of the page, used as the alt text for the page icon.
+ * @returns {React.ReactElement} - The `PageContentContainer` component.
+ */
+import { HStack, VStack } from "@chakra-ui/react";
+import React from "react";
+import SideNav from "../Sidenav";
+
+type PageContentContainerProps = {
+  children: React.ReactNode;
+};
+
+const PageContentContainer = ({ children }: PageContentContainerProps) => {
+  return (
+    <VStack width="100%" p={0} paddingX="4" alignItems="flex-start">
+      <HStack
+        width="full"
+        height="100vh"
+        justifyContent="flex-start"
+        alignItems="flex-start"
+        overflow="hidden"
+        spacing="0"
+      >
+        <SideNav />
+        <VStack
+          justifyContent="flex-start"
+          padding="0"
+          alignItems="flex-start"
+          width="full"
+          height="100vh"
+        >
+          {children}
+        </VStack>
+      </HStack>
+    </VStack>
+  );
+};
+
+export default PageContentContainer;

src/components/Sidenav/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * The `SideNav` component represents the side navigation bar in the application.
+ * It contains the main navigation links and the logo with the sign-out container.
+ * The component is responsible for rendering the side navigation UI and managing its layout.
+ */
+import { VStack } from "@chakra-ui/react";
+
+import { LogoWithSignoutContainer } from "./logoSignoutContainer";
+import { MainNavigation } from "./mainNavigation";
+
+const SideNav = () => {
+  return (
+    <VStack
+      width="340px"
+      height="calc(100vh - 100px)"
+      justifyContent="space-between"
+      alignItems="space-between"
+    >
+      <MainNavigation />
+      <LogoWithSignoutContainer />
+    </VStack>
+  );
+};
+
+export default SideNav;