New Clients page

 avatar
unknown
plain_text
2 years ago
16 kB
5
Indexable
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
  Autocomplete,
  Box,
  Button,
  FormControl,
  FormControlLabel,
  Radio,
  RadioGroup,
  Tab,
  Tabs,
  TextField,
  Typography,
} from '@mui/material';
import { Controller, useForm } from 'react-hook-form';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { useState } from 'react';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import Content from '../common/components/content';
import Layout from '../common/components/layout';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

const NewClientPage = () => {
  const breadcrumbs = [
    { label: 'System', href: '/' },
    { label: 'Dashboard', href: '/' },
    { label: 'Your Clients', href: '/clients' },
    { label: 'Add New Natural Person', href: '/newClient' },
  ];
  const {
    handleSubmit,
    control,
    formState: { errors },
    getValues,
  } = useForm({
    mode: 'onChange',
  });
  const onSubmit = (data: any) => console.log(data, 'data');
  const values = getValues();
  console.log(values, 999);
  const [tab, setTab] = useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setTab(newValue);
  };

  const taxes = [{ label: 'tax1' }, { label: 'tax2' }, { label: 'tax3' }, { label: 'tax4' }];
  const titles = [
    { label: 'title1' },
    { label: 'title2' },
    { label: 'title3' },
    { label: 'title4' },
  ];
  const gender = [{ label: 'Male' }, { label: 'Female' }];

  return (
    <Layout breadcrumbs={breadcrumbs}>
      <Content sx={{ mt: 4 }}>
        <Box display="flex" pb={4} alignItems="center">
          <Button sx={{ minWidth: 0, p: 0 }} component="a" href="/clients">
            <ArrowBackIcon color="disabled" />
          </Button>
          <Typography ml={1} variant="h2">
            Natural Person
          </Typography>
        </Box>
        <Box sx={{ background: 'white' }}>
          <form style={{ padding: '20px' }} onSubmit={handleSubmit(onSubmit)}>
            <Box sx={{ width: '100%', p: '12px' }}>
              <Box
                sx={{
                  borderBottom: 1,
                  borderColor: 'divider',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
              >
                <Tabs value={tab} onChange={handleChange}>
                  <Tab label="1. Basic Information" />
                  <Tab label="2. Rating details" />
                  <Tab label="3. Contact and address details" />
                  <Tab label="4. Discounts" />
                </Tabs>
                <Typography color="text.secondary" mr={2}>
                  Status: Unfilled
                </Typography>
              </Box>
            </Box>
            {tab === 0 && (
              <>
                <Box display="flex" justifyContent="space-between">
                  <Controller
                    control={control}
                    name="taxes"
                    rules={{
                      required: 'Please enter something',
                    }}
                    render={({ field: { onChange, value }, fieldState: { error } }) => (
                      <Autocomplete
                        onChange={(event, item) => {
                          onChange(item?.label);
                        }}
                        value={value}
                        options={taxes}
                        sx={{ width: '270px' }}
                        getOptionLabel={(option) => {
                          return option.label ?? option;
                        }}
                        isOptionEqualToValue={(
                          option: { label: string },
                          value: { label: string },
                        ) => value === undefined || option.label === value.label}
                        renderInput={(parameters) => (
                          <TextField
                            {...parameters}
                            variant="outlined"
                            sx={{ p: 0 }}
                            label="Tax status *"
                            placeholder="Please choose ..."
                            size="small"
                            error={!!error}
                            helperText={error?.message}
                          />
                        )}
                      />
                    )}
                  />
                  <Box display="flex" flexDirection="column">
                    <Controller
                      name="identity"
                      control={control}
                      rules={{
                        required: 'Please enter something',
                      }}
                      render={({ field: { onChange, value }, fieldState: { error } }) => (
                        <TextField
                          onChange={({ target: { value } }) => {
                            onChange(value);
                          }}
                          value={value}
                          sx={{ p: 0, width: '270px' }}
                          label="Identity number *"
                          placeholder="e.g. 123456789"
                          error={!!error}
                          helperText={error?.message}
                        />
                      )}
                    />
                    <FormControl>
                      <RadioGroup
                        aria-labelledby="demo-radio-buttons-group-label"
                        defaultValue="female"
                        row
                        name="radio-buttons-group"
                      >
                        <FormControlLabel value="id" control={<Radio />} label="South African ID" />
                        <FormControlLabel value="passport" control={<Radio />} label="Passport" />
                      </RadioGroup>
                    </FormControl>
                  </Box>
                  <Controller
                    control={control}
                    name="title"
                    render={({ field: { onChange, value } }) => (
                      <Autocomplete
                        onChange={(event, item) => {
                          onChange(item?.label);
                        }}
                        value={value}
                        options={titles}
                        sx={{ width: '270px' }}
                        getOptionLabel={(option) => option.label}
                        isOptionEqualToValue={(
                          option: { label: string },
                          value: { label: string },
                        ) => value === undefined || option.label === value.label}
                        renderInput={(parameters) => (
                          <TextField
                            {...parameters}
                            variant="outlined"
                            sx={{ p: 0 }}
                            label="Title"
                            placeholder="Please choose ..."
                            size="small"
                          />
                        )}
                      />
                    )}
                  />
                </Box>
                <Box mt={2} display="flex" justifyContent="space-between">
                  <Controller
                    name="firstName"
                    control={control}
                    rules={{
                      required: 'Please enter something',
                    }}
                    render={({ field: { onChange, value }, fieldState: { error } }) => (
                      <TextField
                        value={value}
                        sx={{ p: 0, width: '270px' }}
                        label="First name(s) as per ID document *"
                        placeholder="e.g. Peter"
                        error={!!error}
                        helperText={error?.message}
                        onChange={({ target: { value } }) => {
                          onChange(value);
                        }}
                      />
                    )}
                  />
                  <Controller
                    name="middleName"
                    control={control}
                    rules={{
                      required: 'Please enter something',
                    }}
                    render={({ field: { onChange, value }, fieldState: { error } }) => (
                      <TextField
                        value={value}
                        sx={{ p: 0, width: '270px' }}
                        label="Middle name(s) as per ID document *"
                        placeholder="e.g. John"
                        error={!!error}
                        helperText={error?.message}
                        onChange={({ target: { value } }) => {
                          onChange(value);
                        }}
                      />
                    )}
                  />
                  <Controller
                    name="lastName"
                    control={control}
                    rules={{
                      required: 'Please enter something',
                    }}
                    render={({ field: { onChange, value }, fieldState: { error } }) => (
                      <TextField
                        value={value}
                        sx={{ p: 0, width: '270px' }}
                        label="Last name as per ID document *"
                        placeholder="e.g. Lambie"
                        error={!!error}
                        helperText={error?.message}
                        onChange={({ target: { value } }) => {
                          onChange(value);
                        }}
                      />
                    )}
                  />
                </Box>
                <Box display="flex" mt={4} justifyContent="space-between">
                  <Controller
                    control={control}
                    name="gender"
                    rules={{
                      required: 'Please enter something',
                    }}
                    render={({ field: { onChange, value }, fieldState: { error } }) => (
                      <Autocomplete
                        onChange={(event, item) => {
                          onChange(item?.label);
                        }}
                        value={value}
                        options={gender}
                        sx={{ width: '270px' }}
                        getOptionLabel={(option) => option.label}
                        isOptionEqualToValue={(
                          option: { label: string },
                          value: { label: string },
                        ) => value === undefined || option.label === value.label}
                        renderInput={(parameters) => (
                          <TextField
                            {...parameters}
                            variant="outlined"
                            sx={{ p: 0 }}
                            label="Gender*"
                            placeholder="Please choose ..."
                            size="small"
                            error={!!error}
                            helperText={error?.message}
                          />
                        )}
                      />
                    )}
                  />
                  <Controller
                    name="date"
                    defaultValue=""
                    control={control}
                    rules={{
                      required: 'Please enter something',
                    }}
                    render={({ field: { onBlur, onChange, value, name }, fieldState }) => (
                      <LocalizationProvider dateAdapter={AdapterDayjs}>
                        <DatePicker
                          value={value}
                          renderInput={(inputProps) => (
                            <TextField
                              {...inputProps}
                              onBlur={onBlur}
                              label="Date of birth *"
                              name={name}
                              error={!!fieldState.error}
                              helperText={fieldState.error?.message}
                            />
                          )}
                          onChange={onChange}
                        />
                      </LocalizationProvider>
                    )}
                  />
                  <Box width={271}></Box>
                </Box>
                <Box
                  sx={{
                    position: 'absolute',
                    display: 'flex',
                    justifyContent: 'flex-end',
                    bottom: 0,
                    left: 0,
                    height: '60px',
                    padding: '10px',
                    backgroundColor: 'common.white',
                    width: '100%',
                  }}
                >
                  <Button type="submit" variant="outlined" sx={{ width: 70 }} color="primary">
                    Next
                  </Button>
                </Box>
              </>
            )}
            {tab === 1 && (
              <>
                <Typography p={3} width="50%" color="text.secondary">
                  Instructional text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </Typography>

                <Controller
                  control={control}
                  name="tabacco"
                  rules={{
                    required: 'Please enter something',
                  }}
                  render={({ field: { onChange, value }, fieldState: { error } }) => (
                    <Autocomplete
                      onChange={(event, item) => {
                        onChange(item?.label);
                      }}
                      value={value}
                      options={[{ label: 'Yes' }, { label: 'No' }]}
                      sx={{ width: '270px' }}
                      getOptionLabel={(option) => {
                        return option.label ?? option;
                      }}
                      isOptionEqualToValue={(option: { label: string }, value: { label: string }) =>
                        value === undefined || option.label === value.label
                      }
                      renderInput={(parameters) => (
                        <TextField
                          {...parameters}
                          variant="outlined"
                          sx={{ p: 0 }}
                          label="Has the person used tobacco in the last 6 months?"
                          placeholder="Please choose ..."
                          size="small"
                          error={!!error}
                          helperText={error?.message}
                        />
                      )}
                    />
                  )}
                />
              </>
            )}
          </form>

          {/* <TabPanel value={tab} index={2}>
            Item Three
          </TabPanel> */}
        </Box>
      </Content>
    </Layout>
  );
};

export default NewClientPage;
Editor is loading...