Snippet created via Next.js API

main.dart

import React from 'react'
import {
  ChakraProvider,
  Box,
  Flex,
  Image,
  Text,
  Icon,
  InputGroup,
  Input,
  Avatar,
  Heading,
  Table,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Button
} from '@chakra-ui/react'
import { InfoIcon, BellIcon, SettingsIcon } from '@chakra-ui/icons'

const App = () => (
  <ChakraProvider resetCSS>
    <Box backgroundColor="gray.50" minHeight="100vh">
      <Flex>
        <Box
          width="240px"
          height="100vh"
          backgroundColor="white"
          borderColor="gray.200"
          p={4}
        >
          <Flex alignItems="center" mb={8}>
            <Image
              src="https://izadpasml6f7icvv.public.blob.vercel-storage.com/Bankdash_logo.png"
              mr={2}
            />
            <Text fontSize="3xl" fontWeight="bold" color="#343C6A">
              BankDash.
            </Text>
          </Flex>
          <Flex alignItems="stretch" gap={2} flexDirection="column">
            <Flex p={2} alignItems="center" color="gray.500">
              <InfoIcon mr={3} />
              <Text>Dashboard</Text>
            </Flex>
            <Flex p={2} alignItems="center" color="gray.500">
              <InfoIcon mr={3} />
              <Text>Transactions</Text>
            </Flex>
            <Flex p={2} alignItems="center" color="gray.500">
              <InfoIcon mr={3} />
              <Text>Accounts</Text>
            </Flex>
            <Flex p={2} alignItems="center" color="gray.500">
              <InfoIcon mr={3} />
              <Text>Investments</Text>
            </Flex>
            <Flex p={2} alignItems="center" color="gray.500">
              <InfoIcon mr={3} />
              <Text>Credit Cards</Text>
            </Flex>
            <Flex
              p={2}
              alignItems="center"
              backgroundColor="blue.50"
              color="blue.500"
              borderRadius="md"
            >
              <InfoIcon mr={3} />
              <Text>Loans</Text>
            </Flex>
            <Flex p={2} alignItems="center" color="gray.500">
              <InfoIcon mr={3} />
              <Text>Services</Text>
            </Flex>
            <Flex p={2} alignItems="center" color="gray.500">
              <InfoIcon mr={3} />
              <Text>My Privileges</Text>
            </Flex>
            <Flex p={2} alignItems="center" color="gray.500">
              <InfoIcon mr={3} />
              <Text>Setting</Text>
            </Flex>
          </Flex>
        </Box>
        <Box p={6}>
          <Flex justifyContent="space-between" alignItems="center" mb={6}>
            <Text fontSize="xl">Loans</Text>
            <Flex alignItems="center" gap={4} justifyContent="center">
              <InputGroup width="300px">
                <Input
                  placeholder="Search for something"
                  backgroundColor="white"
                />
              </InputGroup>
              <BellIcon color="gray.400" fontSize="2xl" />
              <SettingsIcon color="gray.600" fontSize="xl" height="100%" />
              <Avatar
                size="sm"
                src="https://izadpasml6f7icvv.public.blob.vercel-storage.com/bankdash_profile.png"
              />
            </Flex>
          </Flex>
          <Flex gap={4} mb={8} flexDirection="row">
            <Box
              backgroundColor="blue.50"
              p={4}
              borderRadius="xl"
              width="200px"
            >
              <Text color="#718EBF">Personal Loans</Text>
              <Text color="blue.500" fontSize="lg" fontWeight="bold">
                $50,000
              </Text>
            </Box>
            <Box
              backgroundColor="yellow.50"
              p={4}
              borderRadius="xl"
              width="200px"
            >
              <Text color="#718EBF">Corporate Loans</Text>
              <Text color="yellow.500" fontSize="lg" fontWeight="bold">
                $100,000
              </Text>
            </Box>
            <Box
              backgroundColor="pink.50"
              p={4}
              borderRadius="xl"
              width="200px"
            >
              <Text color="#718EBF">Business Loans</Text>
              <Text color="pink.500" fontSize="lg" fontWeight="bold">
                $500,000
              </Text>
            </Box>
            <Box
              backgroundColor="teal.50"
              p={4}
              borderRadius="xl"
              width="200px"
            >
              <Text color="#718EBF">Custom Loans</Text>
              <Text color="teal.500" fontSize="lg" fontWeight="bold">
                Choose Money
              </Text>
            </Box>
          </Flex>
          <Box backgroundColor="white" borderRadius="lg" p={6}>
            <Heading size="md" mb={4}>
              Active Loans Overview
            </Heading>
            <Table variant="simple">
              <Thead>
                <Tr>
                  <Th>SL No</Th>
                  <Th>Loan Money</Th>
                  <Th>Left to repay</Th>
                  <Th>Duration</Th>
                  <Th>Interest rate</Th>
                  <Th>Installment</Th>
                  <Th>Repay</Th>
                </Tr>
              </Thead>
              <Tbody>
                <Tr>
                  <Td>01</Td>
                  <Td>$100,000</Td>
                  <Td>$40,500</Td>
                  <Td>6 Months</Td>
                  <Td>12%</Td>
                  <Td>$2,000 / month</Td>
                  <Td>
                    <Button
                      size="sm"
                      colorScheme="blue"
                      backgroundColor="#f84c4c"
                      color="#ee5d5d"
                      variant="outline"
                    >
                      Repay
                    </Button>
                  </Td>
                </Tr>
                <Tr>
                  <Td>02</Td>
                  <Td>$200,000</Td>
                  <Td>$250,000</Td>
                  <Td>36 Months</Td>
                  <Td>10%</Td>
                  <Td>$8,000 / month</Td>
                  <Td>
                    <Button size="sm" colorScheme="blue">
                      Repay
                    </Button>
                  </Td>
                </Tr>
                <Tr>
                  <Td>03</Td>
                  <Td>$80,000</Td>
                  <Td>$45,500</Td>
                  <Td>12 Months</Td>
                  <Td>12%</Td>
                  <Td>$5,000 / month</Td>
                  <Td>
                    <Button size="sm" colorScheme="blue">
                      Repay
                    </Button>
                  </Td>
                </Tr>
              </Tbody>
            </Table>
          </Box>
        </Box>
      </Flex>
    </Box>
  </ChakraProvider>
)

export default App