ClientDetail common
unknown
plain_text
2 years ago
6.9 kB
4
Indexable
import { Box, Button, Tab, Tabs, Typography } from '@mui/material'; import { GridValidRowModel } from '@mui/x-data-grid'; import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; const ClientDetails = ({ setClientDetails, typeDetails, setEdit, }: { setClientDetails: React.Dispatch<React.SetStateAction<boolean>>; typeDetails: GridValidRowModel; setEdit: React.Dispatch<React.SetStateAction<boolean>>; }) => { const [tab, setTab] = useState(0); const handleChange = (event: React.SyntheticEvent, newValue: number) => { setTab(newValue); }; return ( <> <Box display="flex" justifyContent="space-between"> <Box display="flex" pb={4} alignItems="center"> <Button sx={{ minWidth: 0, p: 0 }} onClick={() => setClientDetails(false)}> <ArrowBackIcon color="disabled" /> </Button> <Typography ml={1} variant="h2"> {typeDetails.clientName} </Typography> </Box> <Button variant="contained" color="secondary" onClick={() => setEdit(true)} sx={{ height: '35px' }} > Edit </Button> </Box> <Box sx={{ background: 'white' }} display="flex" flexDirection="column"> <Box sx={{ width: '100%' }}> <Box sx={{ borderBottom: 1, borderColor: 'divider', px: 3, display: 'flex', justifyContent: 'space-between', alignItems: 'center', }} > <Tabs variant="scrollable" scrollButtons="auto" allowScrollButtonsMobile aria-label="scrollable auto tabs example" value={tab} onChange={handleChange} > <Tab label="1. Details" /> <Tab label="2. Needs analyses" /> <Tab label="3. Quotes" /> <Tab label="4. Reports" /> </Tabs> </Box> </Box> {tab === 0 && ( <Box p={4}> <Typography sx={{ color: 'text.secondary', mb: 1 }}>SECTION TITLE</Typography> <Box display="flex" sx={{ borderBottom: 1, borderColor: 'divider' }} pb={2} flexDirection={{ xs: 'column', md: 'row' }} > <Box mr={5} display="flex" flexDirection="column"> <Box display="flex"> <Typography>Tax status </Typography> <Typography ml={1} fontWeight={800}> {typeDetails.typeNote} </Typography> </Box> <Box display="flex"> <Typography>Registration number</Typography> <Typography ml={1} fontWeight={800}> {typeDetails.idRegNumber} </Typography> </Box> </Box> <Box mr={5} display="flex" flexDirection="column"> <Box display="flex"> <Typography>Vat number</Typography> <Typography ml={1} fontWeight={800}> - </Typography> </Box> <Box display="flex"> <Typography>Tax number</Typography> <Typography ml={1} fontWeight={800}> - </Typography> </Box> </Box> <Box display="flex" flexDirection="column"> <Box display="flex"> <Typography>Valuation</Typography> <Typography ml={1} fontWeight={800}> - </Typography> </Box> <Box display="flex"> <Typography>Loan accounts</Typography> <Typography ml={1} fontWeight={800}> - </Typography> </Box> </Box> </Box> <Box mt={4} display="flex" flexDirection={{ xs: 'column', md: 'row' }}> <Box width="160px" display="flex" flexDirection="column"> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Typography sx={{ color: 'text.secondary', mb: 1 }}>BASIC</Typography> </Box> <Box mt={2} display="flex"> <Typography>Language</Typography> <Typography ml={1} fontWeight={800}> - </Typography> </Box> <Box display="flex"> <Typography>Date established</Typography> <Typography ml={1} fontWeight={800}> {typeDetails.establishedDOB} </Typography> </Box> </Box> <Box width="160px" display="flex" ml={{ xs: 0, md: 5 }} mt={{ xs: 2, md: 0 }} flexDirection="column" > <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Typography sx={{ color: 'text.secondary', mb: 1 }}>ADDRESSES</Typography> </Box> <Box display="flex" mt={2}> <Typography>Physical:</Typography> <Typography ml={1}>-</Typography> </Box> <Box display="flex"> <Typography>Postal:</Typography> <Typography ml={1}>-</Typography> </Box> </Box> <Box width="160px" display="flex" ml={{ xs: 0, md: 5 }} mt={{ xs: 2, md: 0 }} flexDirection="column" > <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Typography sx={{ color: 'text.secondary', mb: 1 }}>CONTACT</Typography> </Box> <Box mt={2} display="flex"> <Typography>Contact person</Typography> <Typography ml={1} fontWeight={800}> - </Typography> </Box> <Box display="flex"> <Typography>Phone number</Typography> <Typography ml={1} fontWeight={800}> - </Typography> </Box> <Box display="flex"> <Typography>Email address</Typography> <Typography ml={1} fontWeight={800}> - </Typography> </Box> </Box> </Box> </Box> )} </Box> </> ); }; export default ClientDetails;
Editor is loading...