Web-Frontend/client/src/App.jsx

import { useState } from 'react'
import Header from './components/header.jsx';
import Sidebar from './components/sidebar.jsx';
import Widget from './components/Widget.jsx'
import { Grid, GridItem } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"

function App() {
  return (
    <Grid
      templateRows="0.75fr 11.25fr"
      templateColumns="0.25fr 11.75fr"
      height="100vh"
      width="100vw"
    >
      <GridItem rowSpan={1} colSpan={2}>
        <Header />
      </GridItem>
      <GridItem colSpan={1}>
        <Sidebar />
      </GridItem>
      <GridItem colSpan={1}>
        <Grid
          templateRows="repeat(6 1fr)"
          templateColumns="repeat(4 1fr)"
          height="100%"
          width="100%"
          >
          <Widget />
        </Grid>
      </GridItem>
    </Grid>
  );
}

export default App