AppBarTable

collections of tables

import {
	Box,
	Input,
	InputGroup,
	InputLeftElement,
	Stack,
	useBreakpointValue,
	useColorModeValue, Heading, Avatar,
	Badge,
	HStack,
	Icon,
	IconButton,
	Table,
	Tbody,
	Td,
	Text,
	Th,
	Thead,
	Tr,
	SimpleGrid,
	Divider,
} from '@chakra-ui/react';
import React from 'react';
import { FiSearch } from 'react-icons/fi'
import { FiEdit2, FiSlash, FiPercent, FiBookOpen, FiUserCheck, FiXCircle, FiCheckCircle } from 'react-icons/fi'

// import { Rating } from './Rating'

const Accounting = () => {
	// const isMobile = useBreakpointValue({ base: true, md: false })

	const MemberTable = () => (
		<Table>
			<Thead >
				<Tr>
					<Th>Project / Team</Th>
					<Th>
						<HStack spacing="3">
							{/* <Checkbox /> */}
							{/* <HStack spacing="1"> */}
							<Text>Transactions</Text>
							{/* <Icon as={IoArrowDown} color="muted" boxSize="4" /> */}
							{/* </HStack> */}
						</HStack>
					</Th>
					<Th>Description</Th>
					<Th>Approval</Th>
					<Th></Th>
				</Tr>
			</Thead>
			<Tbody>
				{data.map((member) => (
					<Tr key={member.id}>
						<Td>
							<Text>{member.name}</Text>
							<Divider marginTop='2' />
							<Text marginTop='2'>Nama : YG 1234</Text>
							<Text color="muted">Status : Uang Masuk</Text>
							<Text color="muted">Tanggal : 23 Jan 2021</Text>
						</Td>
						<Td>
							<HStack>
								<Box display='flex' flexDirection='row' verticalAlign='center'>
									<Box>
										<Text fontWeight="medium">piutang x penjualan</Text>
										<Text fontWeight="medium">penjualan x pituang</Text>
									</Box>
									<Box marginLeft='2' >
										<IconButton
											icon={<FiEdit2 fontSize="1.25rem" />}
											variant="ghost"
											size='sm'
											aria-label="Edit member"
											bg='green'
											color='white'
										/>
									</Box>
								</Box>
							</HStack>
							<Divider m='2' />
							<HStack>
								<SimpleGrid columns='2'>
									<Box>
										<Text fontWeight="medium">Pajak :</Text>
										<Text fontWeight="medium" fontSize='sm'>PPN 11%</Text>
									</Box>
									<Box marginLeft='2' >
										<IconButton
											icon={<FiEdit2 fontSize="1.25rem" />}
											variant="ghost"
											size='sm'
											aria-label="Edit member"
											bg='green'
											color='white'
										/>
									</Box>
								</SimpleGrid>
							</HStack>

						</Td>

						<Td>
							<Text fontSize='sm'>Tags :</Text>
							<SimpleGrid columns={{ base: 1, lg: 4, md: 3, sm: 2 }}>
								<Badge size="sm" fontSize='0.1em' colorScheme='red' textAlign='center'>Seminar</Badge>
								<Badge size="sm" fontSize='0.2em' colorScheme='green' textAlign='center'>123456</Badge>
								<Badge size="sm" fontSize='0.2em' colorScheme='blue' textAlign='center'>Bandung</Badge>
								<Badge size="sm" fontSize='0.2em' colorScheme='yellow' textAlign='center'>kodok</Badge>
							</SimpleGrid>

							<Divider marginTop='2' />
							<Text marginTop='2' fontSize='sm'>Documents :</Text>
							<SimpleGrid columns={{ base: 1, lg: 4, md: 3, sm: 2 }} gap='1'>
								<Text fontSize='sm'>Doc 1</Text>
								<Text fontSize='sm'>Doc 2</Text>
								<Text fontSize='sm'>Doc 3</Text>
								<Text fontSize='sm'>Doc 4</Text>
								<Text fontSize='sm'>Doc 5</Text>
								<Text fontSize='sm'>Doc 6</Text>
								<Text fontSize='sm'>Doc 7</Text>
								<Text fontSize='sm'>Doc 8</Text>
							</SimpleGrid>
						</Td>
						<Td>
							<Text fontSize='sm'>Approval Status :</Text>
							<HStack spacing="1">
								<IconButton
									icon={<FiUserCheck fontSize="1.25rem" />}
									bg='green'
									color='white'
									variant='outline'
									aria-label="Delete member"
								/>

								<IconButton
									bg='green'
									color='white'
									icon={<FiPercent fontSize="1.25rem" />}
									variant="ghost"
									aria-label="Delete member"
								/>

								<IconButton
									icon={<FiBookOpen fontSize="1.25rem" />}
									bg='yellow'
									color='black'
									variant="outline"
									aria-label="Delete member"
								/>
							</HStack>

							<Text marginTop='2' fontSize='sm'>Approval</Text>
							<HStack spacing="1">
								<IconButton
									bg='green'
									color='white'
									icon={<FiCheckCircle fontSize="1.25rem" />}
									variant="ghost"
									aria-label="Approve"
								/>
								<IconButton
									bg='red'
									color='white'
									icon={<FiSlash fontSize="1.25rem" />}
									variant="ghost"
									aria-label="Reject"
								/>
							</HStack>
						</Td>
					</Tr>
				))}
			</Tbody>
		</Table>
	)

	return (
		<Box width='100%' >
			<Heading>Accounting</Heading>
			<Divider width='100%' />
			<Box
				bg="bg-surface"
				boxShadow={{ base: 'none', md: useColorModeValue('sm', 'sm-dark') }}
				borderRadius={useBreakpointValue({ base: 'none', md: 'lg' })}
				width='full'
			>
				<Stack spacing="5" width='100%'>
					<Box px={{ base: '4', md: '6' }} pt="5" width='100%'>
						<Stack direction={{ base: 'column', md: 'row' }} justify="space-between">
							<Text fontSize="lg" fontWeight="medium">
								Members
							</Text>
							<InputGroup maxW="xs">
								<InputLeftElement pointerEvents="none">
									<Icon as={FiSearch} color="muted" boxSize="5" />
								</InputLeftElement>
								<Input placeholder="Search" />
							</InputGroup>
						</Stack>
					</Box>
					<Box width='100%' height='100vh' display='flex'>
						<MemberTable />
					</Box>
				</Stack>
			</Box>
		</Box>
	);


}

const data = [
	{
		id: '1',
		name: 'IMPORTIR.ORG',
		handle: '@christian',
		email: '[email protected]',
		avatarUrl: 'https://bit.ly/code-beast',
		status: 'active',
		role: 'Senior Developer Advocate',
		rating: 4,
	},
	{
		id: '2',
		name: 'IMPORTIR.ID',
		handle: '@kent',
		email: '[email protected]',
		avatarUrl: 'https://bit.ly/kent-c-dodds',
		status: 'active',
		role: 'Director of DX',
		rating: 4,
	},
	{
		id: '3',
		name: 'Entrepreneurs.id',
		handle: '@prosper',
		email: '[email protected]',
		avatarUrl: 'https://bit.ly/prosper-baba',
		status: 'active',
		role: 'Director of Evangelism',
		rating: 4,
	},
	{
		id: '4',
		name: 'IMPORTIR.ORG',
		handle: '@ryan',
		email: '[email protected]',
		avatarUrl: 'https://bit.ly/ryan-florence',
		status: 'active',
		role: 'Co-Founder',
		rating: 4,
	},
	{
		id: '5',
		name: 'DOCIAL.COM',
		handle: '@segun',
		email: '[email protected]',
		avatarUrl: 'https://bit.ly/sage-adebayo',
		status: 'active',
		role: 'Frontend UI Engineer',
		rating: 4,
	},
]

export default Accounting;