Raf/splash

package.json

@@ -6,16 +6,20 @@
     "@chakra-ui/react": "^1.8.6",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
+    "@supabase/supabase-js": "^1.32.1",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.26.1",
+    "chart.js": "^3.7.1",
     "framer-motion": "^4.1.17",
     "react": "^17.0.2",
+    "react-chartjs-2": "^4.0.1",
     "react-dom": "^17.0.2",
     "react-icons": "^3.11.0",
     "react-router": "^6.2.2",
     "react-scripts": "^2.1.3",
+    "test-react-chartjs-2": "^3.0.4",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/App.js

@@ -1,29 +1,19 @@
 import React from 'react';
-import {
-  ChakraProvider,
-  Box,
-  Text,
-  Link,
-  VStack,
-  Grid,
-  theme,
-  FormControl,
-  Input,
-  FormHelperText,
-  FormLabel,
-  Button,
-} from '@chakra-ui/react';
-import { useEffect, useState, useRef } from 'react';
 import { ColorModeSwitcher } from './ColorModeSwitcher';
+import { useEffect, useState, useRef } from 'react';
 import axios from 'axios';
 import SignUp from './components/signup';
 import Step from './components/signup/steptwo';
 import Last from './components/signup/stepthree';
+import Splash from './components/splash';
+import Patient from './components/home-patient';
+import { Container } from '@chakra-ui/react';
 
 function App() {
-
   return (
-    <Last />
+    <Container px={2}>
+      <Patient />;
+    </Container>
   );
 }
 

src/Auth.js

@@ -0,0 +1 @@
+export default function Auth

src/components/home-patient/Chart.jsx

@@ -0,0 +1,117 @@
+import { Line } from 'react-chartjs-2';
+import { GrAdd } from 'react-icons/gr';
+import React from 'react';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { Box, Button, Flex, Heading, HStack, Text } from '@chakra-ui/react';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+const data = {
+  labels: [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ],
+  datasets: [
+    {
+      label: 'My Balance',
+      fill: false,
+      lineTension: 0.5,
+      backgroundColor: '#db86b2',
+      borderColor: '#B57295',
+      borderCapStyle: 'butt',
+      borderDashOffset: 0.0,
+      borderJoinStyle: '#B57295',
+      pointBorderColor: '#B57295',
+      pointBackgroundColor: '#fff',
+      pointBorderWidth: 1,
+      pointHoverRadius: 5,
+      pointHoverBackgroundColor: '#B57295',
+      pointHoverBorderColor: '#B57295',
+      pointHoverBorderWidth: 2,
+      pointRadius: 1,
+      pointHitRadius: 10,
+      data: [500, 300, 400, 800, 650, 700, 690, 1200, 1050, 1300],
+    },
+  ],
+};
+
+const options = {
+  maintainAspectRatio: true,
+  scales: {
+    x: {
+      grid: {
+        display: true,
+      },
+    },
+    y: {
+      grid: {
+        borderDash: [3, 3],
+      },
+      // beginAtZero: true, // this works
+    },
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+};
+
+const Chart = ({ indicator }) => {
+  return (
+    <>
+      <HStack width="100%" justifyContent="space-between">
+        <Heading size="md">{indicator}</Heading>
+        <Button
+          display="flex"
+          align="center"
+          variant="unstyled"
+          rightIcon={<GrAdd />}
+          p={2}
+        >
+          Add Info
+        </Button>
+      </HStack>
+      <HStack justifyContent="space-between">
+        <Text>Sort by:</Text>
+        <Flex width="50%" justifyContent="space-between">
+          <Text color="gray.400" as="ins">
+            day
+          </Text>
+          <Text>week</Text>
+
+          <Text>month</Text>
+        </Flex>
+      </HStack>
+      <Line data={data} options={options} />
+    </>
+  );
+};
+
+export default Chart;

src/components/home-patient/Profile.jsx

@@ -0,0 +1,34 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Divider,
+  Heading,
+  HStack,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import React from 'react';
+
+const Profile = () => {
+  return (
+    <HStack height="10vh" mt={2} gap={6}>
+      <Box height="10vh" width="10vh">
+        <Avatar height="100%" width="100%" />
+      </Box>
+      <VStack height="90%" width="55%">
+        <Heading alignSelf="flex-start" size="lg">
+          Rafik Daouha
+        </Heading>
+        <Divider />
+        <HStack width="100%" justify="space-between">
+          <Badge>Male</Badge>
+          <Badge>Age:21</Badge>
+          <Badge>1m79</Badge>
+        </HStack>
+      </VStack>
+    </HStack>
+  );
+};
+
+export default Profile;

src/components/home-patient/Vaccination.jsx

@@ -0,0 +1,55 @@
+import {
+  Button,
+  Heading,
+  HStack,
+  VStack,
+  Table,
+  Tr,
+  Thead,
+  Th,
+  Tbody,
+  Td,
+  Tfoot,
+  Text,
+} from '@chakra-ui/react';
+import React from 'react';
+import { GrAdd } from 'react-icons/gr';
+
+function Vaccination() {
+  return (
+    <VStack>
+      <HStack width="100%" justifyContent="space-between">
+        <Heading size="md">Vaccination</Heading>
+        <Button
+          display="flex"
+          align="center"
+          variant="unstyled"
+          rightIcon={<GrAdd />}
+          p={2}
+        >
+          Add Info
+        </Button>
+      </HStack>
+      <HStack width="100%" justifyContent="space-between">
+        <VStack>
+          <Heading size="sm">Name</Heading>
+          <Text alignSelf="flex-start">Flue</Text>
+          <Text alignSelf="flex-start">Pfizer</Text>
+          <Text alignSelf="flex-start">Flue</Text>
+          <Text alignSelf="flex-start">Pfizer</Text>
+        </VStack>
+        <VStack>
+          <Heading size="sm" alignSelf="flex-start">
+            Date
+          </Heading>
+          <Text alignSelf="flex-start">06/09/2021</Text>
+          <Text alignSelf="flex-start">06/09/2021</Text>
+          <Text alignSelf="flex-start">06/09/2021</Text>
+          <Text alignSelf="flex-start">06/09/2021</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  );
+}
+
+export default Vaccination;

src/components/home-patient/index.jsx

@@ -0,0 +1,34 @@
+import { Container, Flex } from '@chakra-ui/react';
+import React from 'react';
+import NavBar from '../shared/NavBar';
+import Chart from './Chart';
+import Profile from './Profile';
+import Vaccination from './Vaccination';
+
+const Patient = () => {
+  return (
+    <Container
+      position="relative"
+      border="2px solid"
+      borderColor="gray.200"
+      display="flex"
+      flexDirection="column"
+      my={3}
+      gap={5}
+      mb="7vh"
+      borderRadius="xl"
+    >
+      <Profile />
+      <Flex flexDirection="column" mt="5%" height="25vh">
+        <Chart indicator="Temperature" />
+      </Flex>
+      <Vaccination />
+      <Flex flexDirection="column" mt="5%" height="25vh">
+        <Chart indicator="Blood glucose" />
+      </Flex>
+      <NavBar />
+    </Container>
+  );
+};
+
+export default Patient;

src/components/shared/NavBar.jsx

@@ -0,0 +1,58 @@
+import {
+  HStack,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Button,
+} from '@chakra-ui/react';
+import React from 'react';
+import {
+  BiHome,
+  BiMessageSquare,
+  BiSearch,
+  BiDotsHorizontalRounded,
+} from 'react-icons/bi';
+import { GrAdd } from 'react-icons/gr';
+
+function NavBar() {
+  return (
+    <HStack
+      justify="space-around"
+      position="fixed"
+      bottom="0"
+      left="0"
+      height="10vh"
+      width="100%"
+      bg="white"
+    >
+      <IconButton variant="unstyled" fontSize={35} icon={<BiHome />} />
+      <IconButton variant="unstyled" fontSize={35} icon={<GrAdd />} />
+      <IconButton variant="unstyled" fontSize={35} icon={<BiMessageSquare />} />
+      <IconButton variant="unstyled" fontSize={35} icon={<BiSearch />} />
+
+      <Menu>
+        <MenuButton
+          display="flex"
+          justifyContent="center"
+          as={IconButton}
+          fontSize={35}
+          variant="unstyled"
+          icon={<BiDotsHorizontalRounded />}
+        ></MenuButton>
+        <MenuList>
+          <MenuItem>Profile Settings</MenuItem>
+
+          <MenuItem>Add Doctors</MenuItem>
+          <MenuItem>Add Clinics</MenuItem>
+          <MenuItem>Doctors List</MenuItem>
+          <MenuItem>Clinics list</MenuItem>
+          <MenuItem>Messages</MenuItem>
+        </MenuList>
+      </Menu>
+    </HStack>
+  );
+}
+
+export default NavBar;

src/components/splash/index.jsx

@@ -0,0 +1,30 @@
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import React from 'react';
+import { ColorModeSwitcher } from '../../ColorModeSwitcher';
+
+export default function Splash() {
+  return (
+    <Flex height="100vh" display="flex" flexDirection="column" p={0}>
+      <ColorModeSwitcher />
+      <Box height="60vh" bg="green.200"></Box>
+      <VStack h="50vh" justifyContent="space-around">
+        <VStack align="center" width="100%">
+          <Heading fontSize="lg">You want to track your health ?</Heading>
+          <Text>In love with Chakra</Text>
+        </VStack>
+        <VStack p={6}>
+          <Button colorScheme="teal">Sign Up</Button>
+          <Button colorScheme="teal">Log In</Button>
+        </VStack>
+      </VStack>
+    </Flex>
+  );
+}