text: import { Box, SimpleGrid } from "@chakra-ui/react"
  import dynamic from "next/dynamic"
  import Card from "../components/Core/Card/Card"
  import SimpleTable from "../components/Core/Table/SimpleTable"
  import withPrivateRoute from "../components/Router/withPrivateRoute"
  import CounterTile from "../components/Tile/CounterTile"
  
  const BasePage = dynamic(import("../components/Core/Page/BasePage"))
  
  const columns = {
    domain: "Domain",
    url: "URL",
    creationDate: "Creation date",
  }
  
  const data = [
    {
      uuid: "321",
      url: "blabla",
      domain: "domain1",
      creationDate: "today",
    },
    {
      uuid: "3221",
      url: "bladedebla",
      domain: "domain2",
      creationDate: "todaydede",
    },
    {
      uuid: "321",
      url: "blabla",
      domain: "domain3",
      creationDate: "today",
    },
    {
      uuid: "3221",
      url: "bladedebla",
      domain: "domain4",
      creationDate: "todaydede",
    },
    {
      uuid: "321",
      url: "blabla",
      domain: "domain5",
      creationDate: "today",
    },
    {
      uuid: "3221",
      url: "bladedebla",
      domain: "domain6",
      creationDate: "todaydede",
    },
    {
      uuid: "321",
      url: "blabla",
      domain: "domain7",
      creationDate: "today",
    },
    {
      uuid: "3221",
      url: "bladedebla",
      domain: "domain8",
      creationDate: "todaydede",
    },
    {
      uuid: "321",
      url: "blabla",
      domain: "domain9",
      creationDate: "today",
    },
    {
      uuid: "3221",
      url: "bladedebla",
      domain: "domain10",
      creationDate: "todaydede",
    },
  ]
  
  const Dashboard = () => {
    return (
      <BasePage>
        <SimpleGrid columns={3} spacing={5}>
          <CounterTile title="Daily calls"></CounterTile>
          <CounterTile title="Monthly calls"></CounterTile>
          <CounterTile title="Yearly calls"></CounterTile>
        </SimpleGrid>
        <Box mt={5}>
          <Card title="Last API calls">
            <SimpleTable variant="simple" columns={columns} data={data} />
          </Card>
        </Box>
      </BasePage>
    )
  }
  
  export default withPrivateRoute(Dashboard)
  