Adiciona dados de proposta.

cli/web/config/prod.json

 {
   "service": {
-    "url": "https://mdk.evologica.com.br/cxClient/cxIsapiClient.dll/gatewayJSONBalanced?version=4",
-    "server": "mdk.evologica.com.br",
-    "system": 94,
-    "port": 7902
+    "url": "https://srvd1.dev.evologica.com.br/cxClient/cxIsapiClient.dll/gatewayJSON?version=4",
+    "server": "192.168.0.34",
+    "system": 19,
+    "port": 9801,
+    "module": 1,
+    "version": 3
   },
-  "accessToken": "ed296c1d9dc3d3eb41a29077bd715278cc985849e0df51da0c2653996055d19f",
+  "accessToken": "ab4dfc4ab84517f900193f8a2530680c73ad3539f75e1f5661bee7065cfcdd32",
   "resources": {
     "get": "https://mdk.dev.evologica.com.br/cxClient/cxIsapiClient.dll/getpr",
     "put": "https://mdk.dev.evologica.com.br/cxClient/cxIsapiClient.dll/putpr"

cli/web/config/staging.json

 {
   "service": {
-    "url": "https://mdk.dev.evologica.com.br/cxClient/cxIsapiClient.dll/gatewayJSON?version=4",
-    "server": "srvp4",
-    "system": 94,
-    "port": 7901
+    "url": "https://srvd1.dev.evologica.com.br/cxClient/cxIsapiClient.dll/gatewayJSON?version=4",
+    "server": "192.168.0.34",
+    "system": 19,
+    "port": 9801,
+    "module": 1,
+    "version": 3
   },
   "accessToken": "ab4dfc4ab84517f900193f8a2530680c73ad3539f75e1f5661bee7065cfcdd32",
   "resources": {

cli/web/package.json

@@ -80,7 +80,7 @@
   },
   "dependencies": {
     "@curio/client": "1.3.3",
-    "@curio/components": "^0.1.3",
+    "@curio/components": "^0.1.5",
     "@curio/ui": "^0.1.0",
     "@date-io/date-fns": "^1.0.0",
     "@dynamo/components": "0.70.1",

cli/web/src/__mocks__/proposalData/index.ts

+export * from './involvedPeople'

cli/web/src/__mocks__/proposalData/involvedPeople/identification.ts

+import { InvolvedPerson } from '@agiliza/api/domain'
+
+export const people = Array.from(Array(15).keys()).map<InvolvedPerson>((p) => {
+  // const type = types[Math.ceil((Math.random() * 10) % types.length)]
+  return {
+    id: (p + 1).toString(),
+    identification: {
+      id: (p + 1).toString(),
+      type: Math.ceil((Math.random() * 10) % 3).toString(),
+      cpfcnpj: Math.ceil(Math.random() * 100000000000).toString(),
+      gender: Math.floor((Math.random() * 10) % 2) ? '0' : '1',
+      name: `Person ${p + 1}`,
+      dataType: { framework: Math.ceil((Math.random() * 10) % 4).toString() },
+    },
+  }
+})
+
+export const frameworks = Array.from(Array(4).keys()).map<{ id: string; name: string }>((p) => ({
+  id: (p + 1).toString(),
+  name: `Enquadramento ${p + 1}`,
+}))
+
+export const genders = [
+  { id: '0', name: 'Masculino' },
+  { id: '1', name: 'Feminino' },
+]

cli/web/src/__mocks__/proposalData/involvedPeople/index.ts

+export * from './identification'
+export * from './references'
+export * from './vehicles'

cli/web/src/__mocks__/proposalData/involvedPeople/productServices.ts

+import { BDProductService } from '@agiliza/api/domain'
+
+export const productServices = Array.from(Array(10).keys()).map<BDProductService>((p) => ({
+  description: `Descrição ${p + 1}`,
+  unit: `Unidade ${p + 1}`,
+  monthlySales: { price: Math.ceil(Math.random() * 1000).toString(), amount: Math.ceil(Math.random() % 11).toString() },
+  stock: { price: Math.ceil(Math.random() * 1000).toString(), amount: Math.ceil(Math.random() % 11).toString() },
+  variableCosts: { price: Math.ceil(Math.random() * 1000).toString(), amount: Math.ceil(Math.random() % 11).toString() },
+}))

cli/web/src/__mocks__/proposalData/involvedPeople/references.tsx

+import { Reference } from '@agiliza/api/domain/proposalData/involvedPeople/reference'
+
+export const references = Array.from(Array(10).keys()).map<Reference>((p) => ({
+  id: (p + 1).toString(),
+  name: `Referência ${p + 1}`,
+  description: `Descrição ${p + 1}`,
+  concept: `Conceito ${p + 1}`,
+  extraInfo: `Informações adicionais ${p + 1}`,
+  telephone: `279${Math.ceil(Math.random() * 1e8).toString()}`,
+  photo: '',
+  type: `Tipo ${p + 1}`,
+}))

cli/web/src/__mocks__/proposalData/involvedPeople/vehicles.ts

+import { Vehicle } from '@agiliza/api/domain'
+
+export const vehicles = Array.from(Array(10).keys()).map<Vehicle>((p) => ({
+  id: (p + 1).toString(),
+  brand: `Modelo ${p + 1}`,
+  document: `Documento ${p + 1}`,
+  hasInsurance: false,
+  hasOnus: false,
+  licensePlate: `AAA9999`,
+  marketValue: Math.ceil(Math.random() * 10000).toString(),
+  model: `Modelo ${p + 1}`,
+  year: (1980 + Math.ceil(Math.random() % 51)).toString(),
+}))

cli/web/src/api/domain/index.ts

+export * from './proposalData'

cli/web/src/api/domain/proposalData/businessData/address.d.ts

+import type { VisitAddress } from '../../../domain/schedule'
+
+export interface BDAddress extends Omit<VisitAddress, 'id'> {
+  proof: string
+  referencePoint?: string
+}
+
+export interface UpdateBDAddressArgs {
+  projectId: string
+  address: BDAddress
+}

cli/web/src/api/domain/proposalData/businessData/identification.d.ts

+import type { Document } from '../../../domain/project'
+
+export interface BDIdentification {
+  cnpj: string
+  document: Document
+  openingDate: Date | null
+  companyName: string
+  stateRegistration: string
+  cityRegistration: string
+  fantasyName: string
+  commercialRegistration: string
+  activitySector: string
+  settledOP: string
+  local: string
+  codeCNAE: string
+}
+
+export interface UpdateBDIdentificationArgs {
+  projectId: string
+  identification: BDIdentification
+}

cli/web/src/api/domain/proposalData/businessData/index.d.ts

+import type { BDIdentification } from './identification'
+import type { BDAddress } from './address'
+import type { StockSalesCosts } from './stockSalesCosts'
+import type { BDProductService } from './productService'
+
+export interface BusinessData {
+  identification?: BDIdentification
+  address?: BDAddress
+  stockSalesCosts?: StockSalesCosts
+  productsServices?: BDProductService[]
+}
+
+export * from './address'
+export * from './identification'
+export * from './productService'
+export * from './stockSalesCosts'

cli/web/src/api/domain/proposalData/businessData/productService.d.ts

+import { Entity } from '../../shared'
+
+export interface BDProductService extends Entity {
+  description: string
+  unit: string
+  stock: PriceAmountValue
+  monthlySales: PriceAmountValue
+  variableCosts: PriceAmountValue
+}
+
+export interface PriceAmountValue {
+  price: string
+  amount: string
+}
+
+export interface AddBDProductServiceArgs {
+  projectId: string
+  productService: BDProductService
+}
+export interface UpdateBDProductServiceArgs {
+  projectId: string
+  productServiceId: string
+  productService: BDProductService
+}
+export interface DeleteBDProductServiceArgs {
+  projectId: string
+  productServiceId: string
+}

cli/web/src/api/domain/proposalData/businessData/stockSalesCosts.d.ts

+import { Document } from '../../../domain/project'
+
+export interface StockSalesCosts {
+  document: Document
+  monthYearReference: string
+  salesCommission: string
+  monthRating: string
+}

cli/web/src/api/domain/proposalData/index.ts

+export * from './involvedPeople'
+export * from './businessData'
+
+export interface Address {
+  id: string
+  street: string
+  number: string
+  cep: string
+  complement: string
+  city: string
+  district: string
+  state: string
+}

cli/web/src/api/domain/proposalData/involvedPeople/address.d.ts

+export interface InvolvedPersonAddress extends Omit<IPAddress, 'id'> {
+  proof: string
+}
+
+export interface IPAddress {
+  id: string
+  proof: string
+  street: string
+  number: string
+  cep: string
+  complement: string
+  city: string
+  district: string
+  state: string
+}

cli/web/src/api/domain/proposalData/involvedPeople/home.d.ts

+import { IPAddress } from './address'
+
+export interface Home {
+  type: string
+  reside: boolean
+  hasOnus: boolean
+  deedRecord: string
+  resideTime: string
+  cityResideTime: string
+  marketValue: string
+  address: IPAddress
+  deed: string
+}

cli/web/src/api/domain/proposalData/involvedPeople/identification.d.ts

+import { PersonalData } from './personalData'
+
+export interface InvolvedPerson {
+  id: string
+  identification: Identification
+  personalData?: PersonalData
+  sourceIncome?: SourceIncome
+  address?: InvolvedPersonAddress
+  // home?: Home
+  // spousePersonalData?: SpousePersonalData
+  // vehicles?: Vehicle[]
+  // references?: Reference[]
+}
+
+export interface Identification {
+  id: string
+  name: string
+  cpfcnpj: string
+  type: string
+  gender: string
+  account?: BanestesAccount
+  dataType?: DataType
+}
+
+export interface BanestesAccount {
+  number?: string
+  cardPicture?: string
+  agencyNumber?: string
+}
+
+export interface DataType {
+  doesWithdrawal?: boolean
+  participationPercentage?: string
+  framework?: string
+}
+
+export type InvolvedPersonType = 'CUSTOMER' | 'PARTNER' | 'GUARANTOR'

cli/web/src/api/domain/proposalData/involvedPeople/index.d.ts

+import type { IPAddress } from './address'
+
+export * from './identification'
+export * from './personalData'
+export * from './address'
+export * from './sourceIncome'
+export * from './spousePersonalData'
+export * from './reference'
+export * from './home'
+export * from './vehicle'
+
+export interface RG {
+  front: string
+  back: string
+  number: string
+  dispatcherAgency: string
+}

cli/web/src/api/domain/proposalData/involvedPeople/personalData.d.ts

+import { InvolvedPerson, RG } from './index'
+
+export interface PersonalData {
+  rg?: RG
+  birthday: Date | null
+  userCRAS: boolean
+  participationPercentage?: number
+  mothersName: string
+  fathersName: string
+  occupation: string
+  schooling: string
+  maritalStatus: string
+  dependents: string
+  primaryEmail: string
+  secundaryEmail: string
+  mobile: string
+  landline: string
+}
+
+export interface UpdatePersonalDataArgs {
+  projectId: string
+  personId: string
+  personalData: InvolvedPerson['personalData']
+}

cli/web/src/api/domain/proposalData/involvedPeople/reference.d.ts

+import { Entity } from '@agiliza/utils/method'
+
+export interface Reference extends Entity {
+  photo: string
+  type: string
+  name: string
+  telephone: string
+  extraInfo: string
+  concept: string
+}

cli/web/src/api/domain/proposalData/involvedPeople/sourceIncome.d.ts

+import { BaseAddress } from './index'
+
+export interface SourceIncome {
+  companyName: string
+  netIncome: string
+  proofAddress: string
+  cnpj: string
+  admissionDate: Date | null
+  mobile: string
+  position: string
+  address: BaseAddress
+}

cli/web/src/api/domain/proposalData/involvedPeople/spousePersonalData.d.ts

+import { BaseAddress, RG } from './index'
+
+export interface SpousePersonalData {
+  name?: string
+  rg?: RG
+  cpf?: string
+  birthday?: Date | null
+  userCRAS?: boolean
+  participationPercentage?: string
+  mothersName?: string
+  fathersName?: string
+  occupation?: string
+  schooling?: string
+  maritalStatus?: string
+  dependents?: string
+  marriageCertificate?: string
+  primaryEmail?: string
+  secundaryEmail?: string
+  mobile?: string
+  landline?: string
+  workplace?: Workplace
+}
+
+export interface Workplace {
+  admissionDate?: Date | null
+  workplaceName?: string
+  netIncome?: string
+  role?: string
+  phone?: string
+  cnpj?: string
+  address?: BaseAddress
+  proof?: string
+}
+
+export interface FetchSpouseDataArgs {
+  projectId: string
+  personId: string
+}
+
+export interface UpdateSpouseDataArgs {
+  projectId: string
+  personId: string
+  spouseData: SpousePersonalData
+}

cli/web/src/api/domain/proposalData/involvedPeople/vehicle.d.ts

+import { Entity } from '@agiliza/utils/method'
+
+export interface Vehicle extends Entity {
+  licensePlate: string
+  model: string
+  brand: string
+  year: string
+  marketValue: string
+  hasOnus: boolean
+  hasInsurance: boolean
+  document: string
+}
+
+export interface AddVehicleArgs {
+  projectId: string
+  personId: string
+  vehicle: Vehicle
+}
+export interface UpdateVehicleArgs {
+  projectId: string
+  personId: string
+  vehicleId: string
+  vehicle: Vehicle
+}
+
+export interface DeleteVehicleArgs {
+  projectId: string
+  personId: string
+  vehicleId: string
+}

cli/web/src/components/organisms/DashboardCard/DashboardCard.tsx

+import cn from 'classnames'
+import React from 'react'
+
+import { makeStyles, Theme } from '@material-ui/core/styles'
+
+const useStyles = makeStyles((theme: Theme) => ({
+  card: {
+    // backgroundColor: '#fafafa',
+    height: 100,
+    width: 175,
+    padding: theme.spacing(1),
+    border: '1px solid #dfdfdf',
+    borderRadius: '10px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // color: theme.palette.grey[500],
+    transform: 'scale(1)',
+    transition: theme.transitions.create(['color', 'border', 'transform'], {
+      duration: theme.transitions.duration.short,
+    }),
+    '&:hover': {
+      transform: 'scale(1.03)',
+      color: theme.palette.primary.main,
+      borderColor: theme.palette.primary.main,
+      cursor: 'pointer',
+      border: `1px solid ${theme.palette.primary.main}`,
+    },
+  },
+  cardIcon: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cardDescription: {
+    textAlign: 'center',
+  },
+}))
+
+export interface DashboardCardProps {
+  label: string
+  icon: React.ReactNode
+  className?: string
+  onClick?(): void
+}
+
+function DashboardCard(props: DashboardCardProps) {
+  const classes = useStyles()
+  return (
+    <div onClick={props.onClick} className={cn(classes.card, props.className)}>
+      <div className={classes.cardIcon}>{props.icon}</div>
+      <div className={classes.cardDescription}>{props.label}</div>
+    </div>
+  )
+}
+
+export default DashboardCard

cli/web/src/components/organisms/DashboardCard/index.ts

+export { default } from './DashboardCard'
+export * from './DashboardCard'

cli/web/src/components/organisms/index.ts

+export * from './DashboardCard'

cli/web/src/components/templates/AccountInputsPhoto/AccountInputsPhoto.tsx

+import React from 'react'
+
+import { BanestesAccount } from '@agiliza/api/domain'
+import { Button, TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { PhotoCamera as PhotoCameraIcon } from '@material-ui/icons'
+
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  values: BanestesAccount
+  onChanges: {
+    account: (type: keyof BanestesAccount) => TextFieldProps['onChange']
+    photo: (name: string) => void
+    validState?: (validState: boolean) => void
+  }
+}
+
+const AccountInputsPhoto = (props: Props) => {
+  const { classes, values, onChanges } = props
+  const { agencyNumber, cardPicture, number } = values
+
+  const handleChangeField = (type: keyof BanestesAccount): TextFieldProps['onChange'] => onChanges.account(type)
+
+  const handleChangePhoto: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>['onChange'] = (evt) => {
+    const file = evt.target.files && evt.target.files[0]
+    if (file) onChanges.photo(URL.createObjectURL(file))
+  }
+
+  return (
+    <div className={classes.accountInputsPhotoContainer}>
+      <div className={classes.accountInputsContainer}>
+        <TextField label="Número da agência" value={agencyNumber || ''} onChange={handleChangeField('agencyNumber')} variant="outlined" />
+        <TextField label="Número da conta corrente" value={number || ''} onChange={handleChangeField('number')} variant="outlined" />
+      </div>
+      <Button variant="text" component="label" className={classes.photoBtn} classes={{ label: classes.photoLabelBtn }}>
+        {cardPicture ? (
+          <div className={classes.card}>
+            <img src={cardPicture} className={classes.media} />
+          </div>
+        ) : (
+          <PhotoCameraIcon />
+        )}
+        Foto cartão
+        <input
+          type="file"
+          // value={cardPicture}
+          accept="image/jpg, image/jpeg, image/png"
+          hidden
+          onChange={handleChangePhoto}
+        />
+      </Button>
+    </div>
+  )
+}
+
+export default withStyles(styles)(AccountInputsPhoto)

cli/web/src/components/templates/AccountInputsPhoto/index.ts

+export { default } from './AccountInputsPhoto'
+export * from './AccountInputsPhoto'

cli/web/src/components/templates/AccountInputsPhoto/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    accountInputsPhotoContainer: { display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' },
+    accountInputsContainer: { marginRight: theme.spacing(1), height: '100%' },
+    photoBtn: { minWidth: '50%' },
+    photoLabelBtn: { display: 'flex', flexDirection: 'column', height: '280px', alignItems: 'center', flexGrow: 1 },
+    card: { width: 'auto', height: 'auto' },
+    media: {
+      height: '250px',
+      width: 'auto',
+      // paddingTop: '56.25%', // 16:9
+    },
+  })
+}

cli/web/src/components/templates/index.ts

 export * from './NotFound'
+export * from './AccountInputsPhoto'

cli/web/src/constants/involvedPeople.ts

+export const INVOLVED_PERSON_TYPES = {
+  GUARANTOR: '1',
+  CUSTOMER: '2',
+  PARTNER: '3',
+} as const
+
+// export const INVOLVED_PERSON_NAMES = {
+//   GUARANTOR: 'Avalista',
+//   CUSTOMER: 'Cliente',
+//   PARTNER: 'Sócio',
+// } as const
+export const INVOLVED_PERSON_NAMES = {
+  '1': 'Avalista',
+  '2': 'Cliente',
+  '3': 'Sócio',
+} as const
+
+export const INVOLVED_PERSON_IDS = {
+  '1': 'GUARANTOR',
+  '2': 'CUSTOMER',
+  '3': 'PARTNER',
+} as const

cli/web/src/curio/SessionManager.ts

@@ -5,7 +5,7 @@ import { MainUseCase, RequestDriver, SecurityManager, UseCaseMessageType } from
 import { ConnectionError, DestinataryNotFoundError } from '@curio/client/errors'
 import { ABORT } from '@curio/client/utils/constants'
 
-const STORAGE_SESSION_KEY = '@app-exames-adm-session-token'
+const STORAGE_SESSION_KEY = '@agiliza-session-token'
 
 export interface ConfigService {
   url: string

cli/web/src/utils/hooks/state.ts

+import merge from 'deepmerge'
+import { useMemo, useReducer } from 'react'
+
+import { CaseReducerActions, createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { entries } from '../method'
+import bindActionCreators from './bindActionCreators'
+
+export type Formatter = (txt: string) => string
+
+export type FormatterState<S> = { [k in keyof S]?: Formatter | Formatter[] }
+
+export type UpdatePayload<S> = {
+  [k in keyof S]: S[k]
+}
+
+type FormState<S> = {
+  [k in keyof S]: S extends Record<string, any> ? S[k] : string | boolean | number
+}
+
+export type ActionType<State> = CaseReducerActions<{
+  update: (
+    state: State,
+    action: {
+      payload: Partial<UpdatePayload<State>>
+      type: string
+    }
+  ) => void
+}>
+
+export const useFormState = <S extends FormState<S>>(
+  name: string,
+  initialState: S
+  // formatters: FormatterState<S> = {}
+) => {
+  const slice = useMemo(
+    () =>
+      createSlice({
+        name,
+        initialState,
+        reducers: {
+          update: (state, action: PayloadAction<Partial<UpdatePayload<S>>>) => {
+            const { payload } = action
+            entries(payload).forEach(([k, v]) => {
+              if (!(v instanceof Date) && v instanceof Object) state[k] = merge.all([state[k], v]) as any
+              else state[k] = v
+              // let aux = state
+              // const splitedPath = k.split('.')
+              // if (splitedPath.length > 1) {
+              //   const lastKey = splitedPath.pop()
+              //   splitedPath.forEach((k) => (aux = aux[k]))
+              //   if (lastKey && !(aux[lastKey] instanceof Object)) aux[lastKey] = v
+              // } else {
+              // }
+              // setValueFromPath(state[k], k, v)
+              // state[k] = v
+              // const formatter = getValueFromPath(formatters, k)
+              // if (formatter) {
+              //   if (formatter instanceof Array) {
+              //     let formatted = v
+              //     formatter.forEach((fmtr) => (formatted = fmtr(formatted)))
+              //     setValueFromPath(state[k], k, formatted)
+              //   }
+              //   if (formatter instanceof Function) {
+              //     const formatted = formatter(v)
+              //     setValueFromPath(state[k], k, formatted)
+              //   }
+              // }
+            })
+          },
+        },
+      }),
+    [initialState]
+  )
+
+  const [state, dispatch] = useReducer(slice.reducer, initialState)
+
+  const actions = bindActionCreators(slice.actions, dispatch) as typeof slice.actions
+
+  return { state, actions }
+}

cli/web/src/utils/masks.ts

@@ -49,3 +49,33 @@ export const maskTel = (str?: string) => {
 
   return filteredString
 }
+
+export const maskPhone = (str?: string) => {
+  if (!str) return ''
+  const filteredString = extractNumbers(str)
+  const length = filteredString.length
+  if (length < 3) return filteredString
+  if (length < 8) return filteredString.replace(/(\d\d)/, '($1) ')
+  // if (length < 12) return filteredString.replace(/(\d\d)(\d\d\d\d\d)/, '($1) $2-')
+  return filteredString.replace(/(\d\d)(\d\d\d\d\d)/, '($1) $2-')
+
+  // return filteredString
+}
+
+export const maskLicensePlate = (str?: string) => {
+  if (!str) return ''
+  const filteredString = str.toUpperCase().replace(/([^A-Z0-9]*)/g, '')
+  const length = filteredString.length
+  if (length < 4) return filteredString
+  if (length < 8) return filteredString.replace(/(\w{3})/, '$1-')
+  // if (length < 8) return filteredString.replace(/(\w{3})(\d{4})/g, '$1-$2')
+
+  return filteredString
+}
+
+export const maskMonthYear = (text: string) => {
+  if (!text) return ''
+  const filteredTxt = extractNumbers(text)
+  if (filteredTxt.length < 2) return filteredTxt
+  return filteredTxt.replace(/^(\d{2})/g, '$1/')
+}

cli/web/src/utils/method.ts

@@ -2,14 +2,14 @@ import deepmerge from 'deepmerge'
 
 import { PayloadAction } from '@reduxjs/toolkit'
 
-export const values = (obj: Record<string, unknown>) => {
+export const values = (obj: Record<string, any>) => {
   return Object.values(obj || {})
 }
 
-export const entries = (obj: Record<string, unknown>) => {
+export const entries = (obj: Record<string, any>) => {
   return Object.entries(obj || {})
 }
-export const keys = (obj: Record<string, unknown>) => {
+export const keys = (obj: Record<string, any>) => {
   return Object.keys(obj || {})
 }
 
@@ -123,6 +123,8 @@ export function syncAllIds<T extends Entity, State extends EntityStore<T>>(state
   return deepmergeArray(state.allIds, Object.keys(entities))
 }
 
+export type ValueOf<T> = T[keyof T]
+
 type FirstParameter<T extends (...args: any) => any> = Parameters<T>[0]
 type RequiredBy<T, K extends keyof T> = Pick<T, K> & Partial<Omit<T, K>>
 

cli/web/src/views/Main/DrawerItems/DrawerItems.tsx

@@ -3,7 +3,11 @@ import React from 'react'
 
 import ItemWithIcon from '@agiliza/components/atoms/ItemWithIcon'
 import List from '@material-ui/core/List'
-import { AttachMoney as AttachMoneyIcon, ExitToApp } from '@material-ui/icons'
+import {
+  AttachMoney as AttachMoneyIcon,
+  Description as DescriptionIcon,
+  ExitToApp
+} from '@material-ui/icons'
 import withStyles from '@material-ui/styles/withStyles'
 
 import { styles } from './styles'
@@ -19,9 +23,13 @@ interface ListItem {
 
 export const PATHS = {
   creditLines: '/linhasCredito',
+  proposalData: '/dadosProposta',
 }
 
-export const drawerListItems: ListItem[] = [{ label: 'Linhas de Crédito', path: PATHS.creditLines, Icon: AttachMoneyIcon }]
+export const drawerListItems: ListItem[] = [
+  { label: 'Linhas de Crédito', path: PATHS.creditLines, Icon: AttachMoneyIcon },
+  { label: 'Dados da Proposta', path: PATHS.proposalData, Icon: DescriptionIcon },
+]
 
 export const mapPathToTitle = (path: string) => {
   return drawerListItems.find((dL) => dL.path === path)?.label || ''

cli/web/src/views/Main/Main.tsx

@@ -13,6 +13,7 @@ import DrawerItems, { mapPathToTitle, PATHS } from './DrawerItems'
 import styles from './styles'
 
 const SimulationCreditLines = lazy(() => import('@agiliza/views/SimulationCreditLines/pages/router'))
+const ProposalData = lazy(() => import('@agiliza/views/ProposalData/pages/ProposalData'))
 // const SecurityProfile = lazy(() => import('@curio/ui/dist/views/SecurityProfile'))
 
 type BaseProps = RouteComponentProps & ConnectedProps & WithStyles<typeof styles>
@@ -33,15 +34,13 @@ const Main = (props: Props) => {
 
   return (
     <div className={classes.pageContainer}>
-      <AppBar
-        onNavClick={toggleDrawer}
-        title={<div className={classes.title}>{mapPathToTitle(pathname.substring(0, pathname.lastIndexOf('/')))}</div>}
-      ></AppBar>
+      <AppBar onNavClick={toggleDrawer} title={<div className={classes.title}>{mapPathToTitle(pathname)}</div>} />
       <Drawer drawerOpen={drawerOpen} toggleDrawer={toggleDrawer} logout={logout} Items={DrawerItems} {...routeProps} />
       <Suspense fallback={<CircularProgress />}>
         <Switch>
           <Route path={PATHS.creditLines} render={(rProps) => <SimulationCreditLines {...rProps} />} />
-          <Redirect from="/" to={PATHS.creditLines} />
+          <Route path={PATHS.proposalData} render={(rProps) => <ProposalData {...rProps} />} />
+          <Redirect from="/" to={PATHS.proposalData} />
         </Switch>
       </Suspense>
     </div>

cli/web/src/views/Main/styles.ts

@@ -5,5 +5,14 @@ import sharedStyles from '../shared-styles'
 export default (theme: Theme) => {
   return createStyles({
     ...sharedStyles(theme),
+    pageContainer: {
+      height: '100vh',
+      display: 'flex',
+      flexDirection: 'column',
+      // padding: theme.spacing(2),
+      paddingTop: 0,
+      paddingBottom: 0,
+      justifyContent: 'flex-start',
+    },
   })
 }

cli/web/src/views/ProposalData/components/templates/Address/Address.tsx

+import React from 'react'
+
+import { IPAddress } from '@agiliza/api/domain'
+import { maskCEP } from '@agiliza/utils/masks'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { AddressState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: AddressState
+  onChange: (address: Partial<IPAddress>) => void
+}
+
+const Address = (props: Props) => {
+  const { state, onChange } = props
+
+  const { cep, number, street } = state
+
+  const handleChangeText =
+    (key: keyof AddressState): TextFieldProps['onChange'] =>
+    (evt) => {
+      onChange({ [key]: evt.target.value })
+    }
+
+  return (
+    <>
+      <TextField variant="outlined" label="CEP" value={maskCEP(cep)} onChange={handleChangeText('cep')} inputProps={{ maxLength: 9 }} />
+      <TextField variant="outlined" label="Rua / Avenida" value={street} onChange={handleChangeText('street')} />
+      <TextField variant="outlined" label="Number" value={number} onChange={handleChangeText('number')} type="tel" />
+    </>
+  )
+}
+
+export default withStyles(styles)(Address)

cli/web/src/views/ProposalData/components/templates/Address/index.ts

+export { default } from './Address'
+export * from './Address'

cli/web/src/views/ProposalData/components/templates/Address/state.ts

+import { Address } from '@agiliza/api/domain'
+
+type ExtendedState = Omit<Address, 'id'>
+
+export interface AddressState extends ExtendedState {}
+
+export const initialState: AddressState = {
+  cep: '',
+  city: '',
+  complement: '',
+  district: '',
+  number: '',
+  state: '',
+  street: '',
+}

cli/web/src/views/ProposalData/components/templates/Address/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+  })
+}

cli/web/src/views/ProposalData/components/templates/index.ts

+export * from './Address'

cli/web/src/views/ProposalData/pages/BusinessData/Address/Address.tsx

+import React from 'react'
+
+import { useFormState } from '@agiliza/utils/hooks/state'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from './Form'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const Address = (props: Props) => {
+  const { classes } = props
+  const formState = useFormState('addressData', initialState)
+
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <Form {...formState} />
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(Address)

cli/web/src/views/ProposalData/pages/BusinessData/Address/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import Address from '@agiliza/views/ProposalData/components/templates/Address'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { BDAddressState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: BDAddressState
+  actions: ActionType<BDAddressState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state: _state, actions } = props
+
+  const { cep, number, street, city, complement, district, state, referencePoint } = _state
+
+  const handleChangeText =
+    (key: keyof BDAddressState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  return (
+    <form className={classes.form}>
+      <Address state={{ cep, number, street, city, complement, district, state }} onChange={(addrs) => actions.update(addrs)} />
+      <TextField variant="outlined" label="Ponto de referência" value={referencePoint} onChange={handleChangeText('referencePoint')} />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/BusinessData/Address/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/BusinessData/Address/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/BusinessData/Address/index.ts

+export { default } from './Address'
+export * from './Address'

cli/web/src/views/ProposalData/pages/BusinessData/Address/state.ts

+import { BDAddress } from '@agiliza/api/domain'
+
+type ExtendedState = BDAddress
+
+export interface BDAddressState extends ExtendedState {}
+
+export const initialState: BDAddressState = {
+  proof: '',
+  cep: '',
+  city: '',
+  complement: '',
+  district: '',
+  number: '',
+  state: '',
+  street: '',
+  referencePoint: '',
+}

cli/web/src/views/ProposalData/pages/BusinessData/Address/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+  })
+}

cli/web/src/views/ProposalData/pages/BusinessData/BusinessData.tsx

+import React, { ChangeEvent, useState } from 'react'
+import { RouteComponentProps } from 'react-router'
+
+import { Tab } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import {
+  AccountBox as AccountBoxIcon,
+  Apartment as ApartmentIcon,
+  AttachMoney as AttachMoneyIcon,
+  InsertDriveFile as InsertDriveFileIcon
+} from '@material-ui/icons'
+import { TabContext, TabList, TabPanel } from '@material-ui/lab'
+
+import Address from './Address'
+import Identification from './Identification'
+import ProductsServices from './ProductsServices'
+import StockSalesCosts from './StockSalesCosts'
+import styles from './styles'
+
+export const businessDataItems = [
+  { label: 'Identificação', icon: <AccountBoxIcon />, component: <Identification /> },
+  { label: 'Endereço', icon: <ApartmentIcon />, component: <Address /> },
+  { label: 'Estoque, Vendas e Custos', icon: <AttachMoneyIcon />, component: <StockSalesCosts /> },
+  { label: 'Produto', icon: <InsertDriveFileIcon />, component: <ProductsServices /> },
+]
+
+type ExtendedProps = WithStyles<typeof styles> & RouteComponentProps
+
+interface Props extends ExtendedProps {}
+
+const BusinessData = (props: Props) => {
+  const { classes } = props
+  const [tab, setTab] = useState('0')
+
+  const handleChange = (evt: ChangeEvent<Record<string, unknown>>, newValue: number) => {
+    setTab(newValue.toString())
+  }
+
+  return (
+    <div className={classes.contentContainer}>
+      {/* <div className={classes.breadcrumbsContainer}>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link color="inherit" href="/" onClick={() => history.push(PATHS.proposalData)}>
+            Dados Proposta
+          </Link>
+          <Link href="/" color="textPrimary" onClick={() => history.push(PATHS.proposalData + PROPOSAL_DATA_PATHS.businessData)}>
+            Dados Negócio
+          </Link>
+        </Breadcrumbs>
+      </div> */}
+      <div className={classes.tabsContainer}>
+        <TabContext value={tab}>
+          <TabList
+            orientation="vertical"
+            variant="scrollable"
+            value={tab}
+            onChange={handleChange}
+            aria-label="Vertical tabs example"
+            className={classes.tabs}
+          >
+            {businessDataItems.map(({ component, ...tb }, i) => (
+              <Tab wrapped key={i} {...tb} value={i.toString()} />
+            ))}
+          </TabList>
+          <div className={classes.content}>
+            {businessDataItems.map((tb, i) => (
+              <TabPanel key={i} value={i.toString()}>
+                {tb.component}
+              </TabPanel>
+            ))}
+          </div>
+        </TabContext>
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(BusinessData)

cli/web/src/views/ProposalData/pages/BusinessData/Identification/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { maskCPFCNPJ } from '@agiliza/utils/masks'
+import { DatePicker } from '@curio/components'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { BDIdentificationState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: BDIdentificationState
+  actions: ActionType<BDIdentificationState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { cnpj, openingDate } = state
+
+  const handleChangeText =
+    (key: keyof BDIdentificationState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  const handleChangeDate = (type: keyof Pick<BDIdentificationState, 'openingDate'>) => (date: Date | null) => {
+    actions.update({ [type]: date })
+  }
+
+  return (
+    <form className={classes.form}>
+      <TextField
+        variant="outlined"
+        type="tel"
+        label="CNPJ"
+        value={maskCPFCNPJ(cnpj)}
+        onChange={handleChangeText('cnpj')}
+        inputProps={{ maxLength: 18 }}
+      />
+      <DatePicker
+        id="admission-date"
+        label="Data de admissão"
+        value={openingDate}
+        onChange={handleChangeDate('openingDate')}
+        format="dd/MM/yyyy"
+        className={classes.datePicker}
+      />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/BusinessData/Identification/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/BusinessData/Identification/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/BusinessData/Identification/Identification.tsx

+import React from 'react'
+
+import { useFormState } from '@agiliza/utils/hooks/state'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from './Form'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const Identification = (props: Props) => {
+  const { classes } = props
+
+  const formState = useFormState('identificationForm', initialState)
+
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <Form {...formState} />
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(Identification)

cli/web/src/views/ProposalData/pages/BusinessData/Identification/index.ts

+export { default } from './Identification'
+export * from './Identification'

cli/web/src/views/ProposalData/pages/BusinessData/Identification/state.ts

+import { BDIdentification } from '@agiliza/api/domain'
+
+type ExtendedState = BDIdentification
+
+export interface BDIdentificationState extends ExtendedState {
+  mainActivity: ''
+}
+
+export const initialState: BDIdentificationState = {
+  cnpj: '',
+  activitySector: '',
+  cityRegistration: '',
+  codeCNAE: '',
+  companyName: '',
+  document: { extraInformations: '', id: '', url: undefined, type: { id: undefined, description: '' } },
+  fantasyName: '',
+  local: '',
+  settledOP: '',
+  stateRegistration: '',
+  commercialRegistration: '',
+  mainActivity: '',
+  openingDate: null,
+}

cli/web/src/views/ProposalData/pages/BusinessData/Identification/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+  })
+}

cli/web/src/views/ProposalData/pages/BusinessData/ProductsServices/Dialog/Dialog.tsx

+import React, { useEffect } from 'react'
+
+import { BDProductService } from '@agiliza/api/domain'
+import { useFormState } from '@agiliza/utils/hooks/state'
+import {
+  Button,
+  Dialog as MUIDialog,
+  DialogActions,
+  DialogContent,
+  DialogProps,
+  DialogTitle
+} from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from '../Form'
+import { initialState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = Pick<DialogProps, 'open'> & WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  onClose: () => void
+  productService?: BDProductService
+  onSave(rfc: BDProductService): () => void
+}
+
+const Dialog = (props: Props) => {
+  const { classes, open, onClose, onSave, productService } = props
+
+  const formState = useFormState('VehicleForm', initialState)
+
+  const { actions } = formState
+
+  useEffect(() => {
+    if (productService) actions.update(productService)
+    else actions.update(initialState)
+  }, [productService])
+
+  const mapStateToProductService = (): BDProductService => {
+    return formState.state
+  }
+
+  return (
+    <MUIDialog onClose={onClose} aria-labelledby="simple-dialog-title" open={open} PaperProps={{ className: classes.dialog }}>
+      <DialogTitle>{productService ? 'Editar' : 'Adicionar'} pessoa envolvida</DialogTitle>
+      <DialogContent>
+        <Form {...formState} />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancelar</Button>
+        <Button onClick={onSave(mapStateToProductService())}>Salvar</Button>
+      </DialogActions>
+    </MUIDialog>
+  )
+}
+
+export default withStyles(styles)(Dialog)

cli/web/src/views/ProposalData/pages/BusinessData/ProductsServices/Dialog/index.ts

+export { default } from './Dialog'
+export * from './Dialog'

cli/web/src/views/ProposalData/pages/BusinessData/ProductsServices/Dialog/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    dialog: { height: '40%', width: '40%' },
+  })
+}

cli/web/src/views/ProposalData/pages/BusinessData/ProductsServices/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { BDProductServiceState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: BDProductServiceState
+  actions: ActionType<BDProductServiceState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { description, unit } = state
+
+  const handleChangeText =
+    (key: keyof BDProductServiceState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  return (
+    <form className={classes.form}>
+      <TextField variant="outlined" label="Descrição do produto / serviço" value={description} onChange={handleChangeText('description')} />
+      <TextField variant="outlined" label="Placa" value={unit} onChange={handleChangeText('unit')} type="tel" />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/BusinessData/ProductsServices/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/BusinessData/ProductsServices/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/BusinessData/ProductsServices/ProductsServices.tsx

+import React, { useState } from 'react'
+
+import { productServices } from '@agiliza/__mocks__/proposalData/involvedPeople/productServices'
+import { BDProductService } from '@agiliza/api/domain'
+import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Add as AddIcon, Apps as AppsIcon } from '@material-ui/icons'
+
+import Dialog from './Dialog'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const ProductsServices = (props: Props) => {
+  const { classes } = props
+
+  const [selectedProductService, setSelectedProductService] = useState<BDProductService | undefined>()
+
+  const [open, setOpen] = useState(false)
+
+  const handleClickListItem = (vehicle: BDProductService) => () => {
+    setSelectedProductService(vehicle)
+    setOpen(true)
+  }
+
+  const handleClickAdd = () => {
+    setOpen(true)
+    setSelectedProductService(undefined)
+  }
+
+  const handleSave = (vehicle: BDProductService) => () => {}
+
+  return (
+    <>
+      <div className={classes.contentContainer}>
+        <div className={classes.content}>
+          <List className={classes.list}>
+            {productServices.map((vehicle, i) => (
+              <ListItem key={i} button onClick={handleClickListItem(vehicle)}>
+                <ListItemAvatar>
+                  <Avatar>
+                    <AppsIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText primary={vehicle.description} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </div>
+      <Avatar className={classes.avatarBtnContainer} onClick={handleClickAdd}>
+        <AddIcon />
+      </Avatar>
+      <Dialog open={open} onClose={() => setOpen(false)} productService={selectedProductService} onSave={handleSave} />
+    </>
+  )
+}
+
+export default withStyles(styles)(ProductsServices)

cli/web/src/views/ProposalData/pages/BusinessData/ProductsServices/index.ts

+export { default } from './ProductsServices'
+export * from './ProductsServices'

cli/web/src/views/ProposalData/pages/BusinessData/ProductsServices/state.ts

+import { BDProductService } from '@agiliza/api/domain'
+
+type ExtendedState = BDProductService
+
+export interface BDProductServiceState extends ExtendedState {}
+
+export const initialState: BDProductServiceState = {
+  description: '',
+  unit: '',
+  monthlySales: { amount: '', price: '' },
+  stock: { amount: '', price: '' },
+  variableCosts: { amount: '', price: '' },
+}

cli/web/src/views/ProposalData/pages/BusinessData/ProductsServices/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    list: { width: '100%' },
+    avatarBtnContainer: {
+      margin: theme.spacing(1),
+      backgroundColor: theme.palette.primary.main,
+      position: 'absolute',
+      bottom: 0,
+      right: 20,
+    },
+    plusBtnContainer: { width: '100%', flexGrow: 1, display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' },
+  })
+}

cli/web/src/views/ProposalData/pages/BusinessData/StockSalesCosts/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { maskMonthYear } from '@agiliza/utils/masks'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { BDStockSalesCostsState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: BDStockSalesCostsState
+  actions: ActionType<BDStockSalesCostsState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { monthYearReference, salesCommission } = state
+
+  const handleChangeText =
+    (key: keyof BDStockSalesCostsState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  return (
+    <form className={classes.form}>
+      <TextField
+        variant="outlined"
+        label="Mês/Ano referência"
+        value={maskMonthYear(monthYearReference)}
+        onChange={handleChangeText('monthYearReference')}
+        inputProps={{ maxLength: 7 }}
+        type="tel"
+      />
+      <TextField
+        variant="outlined"
+        label="Comissão vendas (%)"
+        value={salesCommission}
+        onChange={handleChangeText('salesCommission')}
+        inputProps={{ maxLength: 7 }}
+      />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/BusinessData/StockSalesCosts/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/BusinessData/StockSalesCosts/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/BusinessData/StockSalesCosts/StockSalesCosts.tsx

+import React from 'react'
+
+import { useFormState } from '@agiliza/utils/hooks/state'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from './Form'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const StockSalesCosts = (props: Props) => {
+  const { classes } = props
+
+  const formState = useFormState('stockSalesCostsForm', initialState)
+
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <Form {...formState} />
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(StockSalesCosts)

cli/web/src/views/ProposalData/pages/BusinessData/StockSalesCosts/index.ts

+export { default } from './StockSalesCosts'
+export * from './StockSalesCosts'

cli/web/src/views/ProposalData/pages/BusinessData/StockSalesCosts/state.ts

+import { StockSalesCosts } from '@agiliza/api/domain'
+
+type ExtendedState = StockSalesCosts
+
+export interface BDStockSalesCostsState extends ExtendedState {
+  totalStock: string
+  totalSale: string
+  totalCommission: string
+  totalCostVar: string
+}
+
+export const initialState: BDStockSalesCostsState = {
+  document: { extraInformations: '', id: '', url: undefined, type: { id: '', description: '' } },
+  monthRating: '',
+  monthYearReference: '',
+  salesCommission: '',
+  totalStock: '',
+  totalSale: '',
+  totalCommission: '',
+  totalCostVar: '',
+}

cli/web/src/views/ProposalData/pages/BusinessData/StockSalesCosts/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+  })
+}

cli/web/src/views/ProposalData/pages/BusinessData/index.ts

+export { default } from './BusinessData'
+export * from './BusinessData'

cli/web/src/views/ProposalData/pages/BusinessData/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../shared-styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) =>
+  createStyles({
+    ...sharedStyles(theme),
+    cardsContainer: { display: 'flex' },
+    gridItem: { display: 'flex', justifyContent: 'center' },
+    tabsContainer: { display: 'flex', width: '100%', flex: 10 },
+    tabs: { borderRight: `1px solid ${theme.palette.divider}` },
+    tabWrapper: { flexDirection: 'row' },
+    tabLabelIcon: { marginBottom: '0px !important', marginRight: theme.spacing(1) },
+  })

cli/web/src/views/ProposalData/pages/CustomerData/Address/Address.tsx

+import React from 'react'
+
+import { useFormState } from '@agiliza/utils/hooks/state'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from './Form'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const Address = (props: Props) => {
+  const { classes } = props
+  const formState = useFormState('addressData', initialState)
+
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <Form {...formState} />
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(Address)

cli/web/src/views/ProposalData/pages/CustomerData/Address/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import Address from '@agiliza/views/ProposalData/components/templates/Address'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { CustomerAddressState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: CustomerAddressState
+  actions: ActionType<CustomerAddressState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  return (
+    <form className={classes.form}>
+      <Address state={state} onChange={(addrs) => actions.update(addrs)} />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/CustomerData/Address/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/CustomerData/Address/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/Address/index.ts

+export { default } from './Address'
+export * from './Address'

cli/web/src/views/ProposalData/pages/CustomerData/Address/state.ts

+import { IPAddress } from '@agiliza/api/domain'
+
+type ExtendedState = IPAddress
+
+export interface CustomerAddressState extends ExtendedState {}
+
+export const initialState: CustomerAddressState = {
+  id: '',
+  proof: '',
+  cep: '',
+  city: '',
+  complement: '',
+  district: '',
+  number: '',
+  state: '',
+  street: '',
+}

cli/web/src/views/ProposalData/pages/CustomerData/Address/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/CustomerData.tsx

+import React from 'react'
+
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import {
+  AccountBox as AccountBoxIcon,
+  CheckBox as CheckBoxIcon,
+  ContactMail as ContactMailIcon,
+  DriveEta as DriveEtaIcon,
+  Forum as ForumIcon,
+  Home as HomeIcon,
+  List as ListIcon,
+  LocalAtm as LocalAtmIcon,
+  ZoomOutMap as ZoomOutMapIcon
+} from '@material-ui/icons'
+
+import Address from './Address'
+import Home from './Home'
+import Identification from './Identification'
+import PersonalData from './PersonalData'
+import References from './References'
+import SourceIncome from './SourceIncome'
+import SpouseAdditionalData from './SpouseAdditionalData'
+import SpouseData from './SpouseData'
+import styles from './styles'
+import Vehicles from './Vehicles'
+
+export const personalDataItems = [
+  { label: 'Identificação', icon: <AccountBoxIcon />, component: <Identification /> },
+  { label: 'Dados Pessoais', icon: <ListIcon />, component: <PersonalData /> },
+  { label: 'Endereço', icon: <ContactMailIcon />, component: <Address /> },
+  { label: 'Fonte de renda', icon: <LocalAtmIcon />, component: <SourceIncome /> },
+  { label: 'Cônjuge - Ident.', icon: <ForumIcon />, component: <SpouseData /> },
+  { label: 'Cônjuge +', icon: <ZoomOutMapIcon />, component: <SpouseAdditionalData /> },
+  { label: 'Referências', icon: <CheckBoxIcon />, component: <References /> },
+  { label: 'Moradia', icon: <HomeIcon />, component: <Home /> },
+  { label: 'Veículos', icon: <DriveEtaIcon />, component: <Vehicles /> },
+]
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  activeStep: number
+}
+
+const CustomerData = (props: Props) => {
+  const { classes, activeStep } = props
+  return <div className={classes.stepContentContainer}>{personalDataItems[activeStep].component}</div>
+}
+
+export default withStyles(styles)(CustomerData)

cli/web/src/views/ProposalData/pages/CustomerData/Home/Form/Form.tsx

+import React from 'react'
+
+import { IPAddress } from '@agiliza/api/domain'
+import { ActionType } from '@agiliza/utils/hooks/state'
+import AddressTemplate from '@agiliza/views/ProposalData/components/templates/Address'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { CustomerHomeState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: CustomerHomeState
+  actions: ActionType<CustomerHomeState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { resideTime, cityResideTime, address } = state
+
+  const handleChangeText =
+    (key: keyof CustomerHomeState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  return (
+    <form className={classes.form}>
+      <TextField variant="outlined" label="Tempo (no local)" value={resideTime} onChange={handleChangeText('resideTime')} type="number" />
+      <TextField variant="outlined" label="Tempo (no município)" value={cityResideTime} onChange={handleChangeText('cityResideTime')} type="number" />
+      <AddressTemplate state={address} onChange={(addrs) => actions.update({ address: addrs as IPAddress })} />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/CustomerData/Home/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/CustomerData/Home/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/Home/Home.tsx

+import React from 'react'
+
+import { useFormState } from '@agiliza/utils/hooks/state'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from './Form'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const Home = (props: Props) => {
+  const { classes } = props
+
+  const formState = useFormState('homeForm', initialState)
+
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <Form {...formState} />
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(Home)

cli/web/src/views/ProposalData/pages/CustomerData/Home/index.ts

+export { default } from './Home'
+export * from './Home'

cli/web/src/views/ProposalData/pages/CustomerData/Home/state.ts

+import { Home } from '@agiliza/api/domain'
+
+type ExtendedState = Home
+
+export interface CustomerHomeState extends ExtendedState {
+  hasProperty: boolean
+}
+
+export const initialState: CustomerHomeState = {
+  hasProperty: true,
+  address: { id: '', cep: '', city: '', complement: '', district: '', number: '', state: '', street: '', proof: '' },
+  cityResideTime: '',
+  deed: '',
+  deedRecord: '',
+  hasOnus: false,
+  marketValue: '',
+  reside: false,
+  resideTime: '',
+  type: '',
+}

cli/web/src/views/ProposalData/pages/CustomerData/Home/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/Identification/Form/Form.tsx

+import React from 'react'
+
+import { frameworks, genders } from '@agiliza/__mocks__/proposalData'
+import { BanestesAccount, DataType } from '@agiliza/api/domain'
+import AccountInputsPhoto from '@agiliza/components/templates/AccountInputsPhoto'
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { maskCPFCNPJ } from '@agiliza/utils/masks'
+import { SelectField, SelectFieldProps } from '@curio/components'
+import { FormControlLabel, Switch, TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { IPIdentificationState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: IPIdentificationState
+  actions: ActionType<IPIdentificationState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { cpfcnpj, dataType, name, gender, hasAccount, account } = state
+
+  const handleChangeText =
+    (key: keyof IPIdentificationState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+  const handleChangeSelect =
+    (key: keyof IPIdentificationState): SelectFieldProps['onChange'] =>
+    (vl) => {
+      actions.update({ [key]: vl })
+    }
+
+  const handleChangeDataType =
+    (key: keyof DataType): SelectFieldProps['onChange'] =>
+    (vl) => {
+      actions.update({ dataType: { [key]: vl } })
+    }
+
+  const handleChangeAccount =
+    (type: keyof BanestesAccount): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ account: { [type]: evt.target.value } })
+    }
+
+  const handleChangePhoto = (name: string) => {
+    actions.update({ account: { cardPicture: name } })
+  }
+
+  const handleChangeValidState = (vldStt: boolean) => {}
+
+  return (
+    <form className={classes.form}>
+      <SelectField
+        id="framework-select-field"
+        label="Enquadramento"
+        value={dataType?.framework}
+        onChange={handleChangeDataType('framework')}
+        items={frameworks.map((fw) => ({ label: fw.name, value: fw.id }))}
+        variant="outlined"
+        shrink={false}
+      />
+      <TextField
+        variant="outlined"
+        label="CPF / CNPJ"
+        value={maskCPFCNPJ(cpfcnpj)}
+        onChange={handleChangeText('cpfcnpj')}
+        inputProps={{ maxLength: 18 }}
+      />
+      <TextField variant="outlined" label="Nome / Razão social" value={name || ''} onChange={handleChangeText('name')} />
+      <SelectField
+        id="gender-select-field"
+        label="Sexo"
+        value={gender}
+        onChange={handleChangeSelect('gender')}
+        items={genders.map((fw) => ({ label: fw.name, value: fw.id }))}
+        variant="outlined"
+        shrink={false}
+      />
+      <div className={classes.switchCardPhotoContainer}>
+        <FormControlLabel
+          label="Possui conta no Banestes?"
+          control={
+            <Switch
+              checked={hasAccount}
+              onChange={(_, checked) => {
+                actions.update({ hasAccount: checked })
+              }}
+              name="has-account"
+              inputProps={{ 'aria-label': 'secondary checkbox' }}
+            />
+          }
+        />
+        {hasAccount ? (
+          <AccountInputsPhoto
+            values={{ ...account }}
+            onChanges={{ account: handleChangeAccount, photo: handleChangePhoto, validState: handleChangeValidState }}
+          />
+        ) : null}
+      </div>
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/CustomerData/Identification/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/CustomerData/Identification/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/Identification/Identification.tsx

+import React from 'react'
+
+import { useFormState } from '@agiliza/utils/hooks/state'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from './Form'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const Identification = (props: Props) => {
+  const { classes } = props
+
+  const formState = useFormState('identificationForm', initialState)
+
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <Form {...formState} />
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(Identification)

cli/web/src/views/ProposalData/pages/CustomerData/Identification/index.ts

+export { default } from './Identification'
+export * from './Identification'

cli/web/src/views/ProposalData/pages/CustomerData/Identification/state.ts

+import { InvolvedPerson } from '@agiliza/api/domain'
+
+type ExtendedState = Omit<InvolvedPerson['identification'], 'type'>
+
+export interface IPIdentificationState extends ExtendedState {
+  hasAccount: boolean
+}
+
+export const initialState: IPIdentificationState = {
+  id: '',
+  name: '',
+  cpfcnpj: '',
+  gender: '',
+  hasAccount: false,
+  account: { agencyNumber: '', number: '', cardPicture: '' },
+  dataType: { doesWithdrawal: false, framework: '' },
+}

cli/web/src/views/ProposalData/pages/CustomerData/Identification/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/PersonalData/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { DatePicker } from '@curio/components'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { CustomerPersonalDataState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: CustomerPersonalDataState
+  actions: ActionType<CustomerPersonalDataState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { birthday, primaryEmail } = state
+
+  const handleChangeDate = (type: keyof Pick<CustomerPersonalDataState, 'birthday'>) => (date: Date | null) => {
+    actions.update({ [type]: date })
+  }
+
+  const handleChangeText =
+    (key: keyof CustomerPersonalDataState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  return (
+    <form className={classes.form}>
+      <DatePicker
+        id="birthday"
+        label="Data de nascimento"
+        value={birthday}
+        onChange={handleChangeDate('birthday')}
+        format="dd/MM/yyyy"
+        className={classes.datePicker}
+      />
+      <TextField variant="outlined" label="Email primário" value={primaryEmail} onChange={handleChangeText('primaryEmail')} />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/CustomerData/PersonalData/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/CustomerData/PersonalData/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/PersonalData/PersonalData.tsx

+import React from 'react'
+
+import { useFormState } from '@agiliza/utils/hooks/state'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from './Form'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const PersonalData = (props: Props) => {
+  const { classes } = props
+
+  const formState = useFormState('personalData', initialState)
+
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <Form {...formState} />
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(PersonalData)

cli/web/src/views/ProposalData/pages/CustomerData/PersonalData/index.ts

+export { default } from './PersonalData'
+export * from './PersonalData'

cli/web/src/views/ProposalData/pages/CustomerData/PersonalData/state.ts

+import { PersonalData } from '@agiliza/api/domain'
+
+type ExtendedState = PersonalData
+
+export interface CustomerPersonalDataState extends ExtendedState {}
+
+export const initialState: CustomerPersonalDataState = {
+  rg: { number: '', dispatcherAgency: '', front: '', back: '' },
+  birthday: null,
+  userCRAS: false,
+  mothersName: '',
+  fathersName: '',
+  occupation: '',
+  schooling: '',
+  maritalStatus: '',
+  dependents: '',
+  primaryEmail: '',
+  secundaryEmail: '',
+  mobile: '',
+  landline: '',
+}

cli/web/src/views/ProposalData/pages/CustomerData/PersonalData/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/References/Dialog/Dialog.tsx

+import React, { useEffect } from 'react'
+
+import { Reference } from '@agiliza/api/domain'
+import { useFormState } from '@agiliza/utils/hooks/state'
+import {
+  Button,
+  Dialog as MUIDialog,
+  DialogActions,
+  DialogContent,
+  DialogProps,
+  DialogTitle
+} from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from '../Form'
+import { initialState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = Pick<DialogProps, 'open'> & WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  onClose: () => void
+  reference?: Reference
+  onSave(rfc: Reference): () => void
+}
+
+const Dialog = (props: Props) => {
+  const { classes, open, onClose, onSave, reference } = props
+
+  const formState = useFormState('referenceForm', initialState)
+
+  const { actions } = formState
+
+  useEffect(() => {
+    if (reference) actions.update(reference)
+    else actions.update(initialState)
+  }, [reference])
+
+  const mapStateToReference = (): Reference => {
+    return formState.state
+  }
+
+  return (
+    <MUIDialog onClose={onClose} aria-labelledby="simple-dialog-title" open={open} PaperProps={{ className: classes.dialog }}>
+      <DialogTitle>{reference ? 'Editar' : 'Adicionar'} pessoa envolvida</DialogTitle>
+      <DialogContent>
+        <Form {...formState} />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancelar</Button>
+        <Button onClick={onSave(mapStateToReference())}>Salvar</Button>
+      </DialogActions>
+    </MUIDialog>
+  )
+}
+
+export default withStyles(styles)(Dialog)

cli/web/src/views/ProposalData/pages/CustomerData/References/Dialog/index.ts

+export { default } from './Dialog'
+export * from './Dialog'

cli/web/src/views/ProposalData/pages/CustomerData/References/Dialog/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    dialog: { height: '40%', width: '40%' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/References/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { maskPhone } from '@agiliza/utils/masks'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { CustomerReferenceState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: CustomerReferenceState
+  actions: ActionType<CustomerReferenceState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { name, telephone } = state
+
+  const handleChangeText =
+    (key: keyof CustomerReferenceState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  return (
+    <form className={classes.form}>
+      <TextField variant="outlined" label="Nome" value={name} onChange={handleChangeText('name')} />
+      <TextField
+        variant="outlined"
+        label="Telefone"
+        value={maskPhone(telephone)}
+        onChange={handleChangeText('telephone')}
+        inputProps={{ maxLength: 15 }}
+      />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/CustomerData/References/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/CustomerData/References/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/References/References.tsx

+import React, { useState } from 'react'
+
+import { references } from '@agiliza/__mocks__/proposalData'
+import { Reference } from '@agiliza/api/domain/proposalData/involvedPeople/reference'
+import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Add as AddIcon, EmojiEmotions as EmojiEmotionsIcon } from '@material-ui/icons'
+
+import Dialog from './Dialog'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const References = (props: Props) => {
+  const { classes } = props
+
+  const [selectedReference, setSelectedReference] = useState<Reference | undefined>()
+
+  const [open, setOpen] = useState(false)
+
+  const handleClickListItem = (reference: Reference) => () => {
+    setSelectedReference(reference)
+    setOpen(true)
+  }
+
+  const handleClickAdd = () => {
+    setOpen(true)
+    setSelectedReference(undefined)
+  }
+
+  const handleSave = (reference: Reference) => () => {}
+
+  return (
+    <>
+      <div className={classes.contentContainer}>
+        <div className={classes.content}>
+          <List className={classes.list}>
+            {references.map((reference, i) => (
+              <ListItem key={i} button onClick={handleClickListItem(reference)}>
+                <ListItemAvatar>
+                  <Avatar>
+                    <EmojiEmotionsIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText primary={reference.name} secondary={reference.extraInfo} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </div>
+      <Avatar className={classes.avatarBtnContainer} onClick={handleClickAdd}>
+        <AddIcon />
+      </Avatar>
+      <Dialog open={open} onClose={() => setOpen(false)} reference={selectedReference} onSave={handleSave} />
+    </>
+  )
+}
+
+export default withStyles(styles)(References)

cli/web/src/views/ProposalData/pages/CustomerData/References/index.ts

+export { default } from './References'
+export * from './References'

cli/web/src/views/ProposalData/pages/CustomerData/References/state.ts

+import { Reference } from '@agiliza/api/domain'
+
+type ExtendedState = Reference
+
+export interface CustomerReferenceState extends ExtendedState {}
+
+export const initialState: CustomerReferenceState = {
+  id: '',
+  concept: '',
+  extraInfo: '',
+  name: '',
+  photo: '',
+  telephone: '',
+  type: '',
+}

cli/web/src/views/ProposalData/pages/CustomerData/References/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    list: { width: '100%' },
+    avatarBtnContainer: {
+      margin: theme.spacing(1),
+      backgroundColor: theme.palette.primary.main,
+      position: 'absolute',
+      bottom: 0,
+      right: 20,
+    },
+    plusBtnContainer: { width: '100%', flexGrow: 1, display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/SourceIncome/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { maskCPFCNPJ } from '@agiliza/utils/masks'
+import { DatePicker } from '@curio/components'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { CustomerSourceIncomeState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: CustomerSourceIncomeState
+  actions: ActionType<CustomerSourceIncomeState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { cnpj, admissionDate } = state
+
+  const handleChangeDate = (type: keyof Pick<CustomerSourceIncomeState, 'admissionDate'>) => (date: Date | null) => {
+    actions.update({ [type]: date })
+  }
+
+  const handleChangeText =
+    (key: keyof CustomerSourceIncomeState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  return (
+    <form className={classes.form}>
+      <TextField variant="outlined" label="CNPJ" value={maskCPFCNPJ(cnpj)} onChange={handleChangeText('cnpj')} />
+      <DatePicker
+        id="admission-date"
+        label="Data de admissão"
+        value={admissionDate}
+        onChange={handleChangeDate('admissionDate')}
+        format="dd/MM/yyyy"
+        className={classes.datePicker}
+      />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/CustomerData/SourceIncome/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/CustomerData/SourceIncome/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/SourceIncome/SourceIncome.tsx

+import React from 'react'
+
+import { useFormState } from '@agiliza/utils/hooks/state'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from './Form'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const SourceIncome = (props: Props) => {
+  const { classes } = props
+
+  const formState = useFormState('sourceIncome', initialState)
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <Form {...formState} />
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(SourceIncome)

cli/web/src/views/ProposalData/pages/CustomerData/SourceIncome/index.ts

+export { default } from './SourceIncome'
+export * from './SourceIncome'

cli/web/src/views/ProposalData/pages/CustomerData/SourceIncome/state.ts

+import { SourceIncome } from '@agiliza/api/domain'
+
+type ExtendedState = SourceIncome
+
+export interface CustomerSourceIncomeState extends ExtendedState {}
+
+export const initialState: CustomerSourceIncomeState = {
+  cnpj: '',
+  address: { cep: '', city: '', complement: '', district: '', number: '', state: '', street: '', proof: '' },
+  admissionDate: null,
+  companyName: '',
+  mobile: '',
+  position: '',
+  netIncome: '',
+  proofAddress: '',
+}

cli/web/src/views/ProposalData/pages/CustomerData/SourceIncome/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/SpouseAdditionalData/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { maskPhone } from '@agiliza/utils/masks'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { CustomerSpousePersonalDataState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: CustomerSpousePersonalDataState
+  actions: ActionType<CustomerSpousePersonalDataState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { mobile, primaryEmail } = state
+
+  const handleChangeText =
+    (key: keyof CustomerSpousePersonalDataState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  return (
+    <form className={classes.form}>
+      <TextField variant="outlined" label="Telefone celular" value={maskPhone(mobile)} onChange={handleChangeText('mobile')} />
+      <TextField variant="outlined" label="Email primário" value={primaryEmail} onChange={handleChangeText('primaryEmail')} />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/CustomerData/SpouseAdditionalData/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/CustomerData/SpouseAdditionalData/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/SpouseAdditionalData/SpouseAdditionalData.tsx

+import React from 'react'
+
+import { useFormState } from '@agiliza/utils/hooks/state'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from './Form'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const SpouseAdditionalData = (props: Props) => {
+  const { classes } = props
+
+  const formState = useFormState('spouseDataForm', initialState)
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <Form {...formState} />
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(SpouseAdditionalData)

cli/web/src/views/ProposalData/pages/CustomerData/SpouseAdditionalData/index.ts

+export { default } from './SpouseAdditionalData'
+export * from './SpouseAdditionalData'

cli/web/src/views/ProposalData/pages/CustomerData/SpouseAdditionalData/state.ts

+import { SpousePersonalData } from '@agiliza/api/domain'
+
+type ExtendedState = SpousePersonalData
+
+export interface CustomerSpousePersonalDataState extends ExtendedState {}
+
+export const initialState: CustomerSpousePersonalDataState = {
+  landline: '',
+  mobile: '',
+  primaryEmail: '',
+  secundaryEmail: '',
+  workplace: {
+    // address: { cep: '', city: '', complement: '', district: '', number: '', state: '', street: '' },
+    workplaceName: '',
+    admissionDate: null,
+    netIncome: '',
+    phone: '',
+    proof: '',
+    role: '',
+  },
+}

cli/web/src/views/ProposalData/pages/CustomerData/SpouseAdditionalData/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/SpouseData/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { DatePicker } from '@curio/components'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { CustomerSpousePersonalDataState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: CustomerSpousePersonalDataState
+  actions: ActionType<CustomerSpousePersonalDataState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { name, birthday } = state
+
+  const handleChangeDate = (type: keyof Pick<CustomerSpousePersonalDataState, 'birthday'>) => (date: Date | null) => {
+    actions.update({ [type]: date })
+  }
+
+  const handleChangeText =
+    (key: keyof CustomerSpousePersonalDataState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  return (
+    <form className={classes.form}>
+      <TextField variant="outlined" label="Nome" value={name} onChange={handleChangeText('name')} />
+      <DatePicker
+        id="admission-date"
+        label="Data de nascimento"
+        value={birthday}
+        onChange={handleChangeDate('birthday')}
+        format="dd/MM/yyyy"
+        className={classes.datePicker}
+      />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/CustomerData/SpouseData/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/CustomerData/SpouseData/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/SpouseData/SpouseData.tsx

+import React from 'react'
+
+import { useFormState } from '@agiliza/utils/hooks/state'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from './Form'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const SpouseData = (props: Props) => {
+  const { classes } = props
+
+  const formState = useFormState('spouseDataForm', initialState)
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <Form {...formState} />
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(SpouseData)

cli/web/src/views/ProposalData/pages/CustomerData/SpouseData/index.ts

+export { default } from './SpouseData'
+export * from './SpouseData'

cli/web/src/views/ProposalData/pages/CustomerData/SpouseData/state.ts

+import { SpousePersonalData } from '@agiliza/api/domain'
+
+type ExtendedState = SpousePersonalData
+
+export interface CustomerSpousePersonalDataState extends ExtendedState {}
+
+export const initialState: CustomerSpousePersonalDataState = {
+  cpf: '',
+  name: '',
+  rg: { number: '', dispatcherAgency: '', front: '', back: '' },
+  birthday: null,
+  userCRAS: false,
+  mothersName: '',
+  fathersName: '',
+  occupation: '',
+  schooling: '',
+  maritalStatus: '',
+  dependents: '',
+  participationPercentage: '',
+  marriageCertificate: '',
+}

cli/web/src/views/ProposalData/pages/CustomerData/SpouseData/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/Vehicles/Dialog/Dialog.tsx

+import React, { useEffect } from 'react'
+
+import { Vehicle } from '@agiliza/api/domain'
+import { useFormState } from '@agiliza/utils/hooks/state'
+import {
+  Button,
+  Dialog as MUIDialog,
+  DialogActions,
+  DialogContent,
+  DialogProps,
+  DialogTitle
+} from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Form from '../Form'
+import { initialState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = Pick<DialogProps, 'open'> & WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  onClose: () => void
+  vehicle?: Vehicle
+  onSave(rfc: Vehicle): () => void
+}
+
+const Dialog = (props: Props) => {
+  const { classes, open, onClose, onSave, vehicle } = props
+
+  const formState = useFormState('VehicleForm', initialState)
+
+  const { actions } = formState
+
+  useEffect(() => {
+    if (vehicle) actions.update(vehicle)
+    else actions.update(initialState)
+  }, [vehicle])
+
+  const mapStateToVehicle = (): Vehicle => {
+    return formState.state
+  }
+
+  return (
+    <MUIDialog onClose={onClose} aria-labelledby="simple-dialog-title" open={open} PaperProps={{ className: classes.dialog }}>
+      <DialogTitle>{vehicle ? 'Editar' : 'Adicionar'} pessoa envolvida</DialogTitle>
+      <DialogContent>
+        <Form {...formState} />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancelar</Button>
+        <Button onClick={onSave(mapStateToVehicle())}>Salvar</Button>
+      </DialogActions>
+    </MUIDialog>
+  )
+}
+
+export default withStyles(styles)(Dialog)

cli/web/src/views/ProposalData/pages/CustomerData/Vehicles/Dialog/index.ts

+export { default } from './Dialog'
+export * from './Dialog'

cli/web/src/views/ProposalData/pages/CustomerData/Vehicles/Dialog/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    dialog: { height: '40%', width: '40%' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/Vehicles/Form/Form.tsx

+import React from 'react'
+
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { maskLicensePlate } from '@agiliza/utils/masks'
+import { TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { CustomerVehicleState } from '../state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: CustomerVehicleState
+  actions: ActionType<CustomerVehicleState>
+}
+
+const Form = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { brand, licensePlate } = state
+
+  const handleChangeText =
+    (key: keyof CustomerVehicleState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+
+  return (
+    <form className={classes.form}>
+      <TextField variant="outlined" label="Marca" value={brand} onChange={handleChangeText('brand')} />
+      <TextField
+        variant="outlined"
+        label="Placa"
+        value={maskLicensePlate(licensePlate)}
+        onChange={handleChangeText('licensePlate')}
+        inputProps={{ maxLength: 8 }}
+      />
+    </form>
+  )
+}
+
+export default withStyles(styles)(Form)

cli/web/src/views/ProposalData/pages/CustomerData/Vehicles/Form/index.ts

+export { default } from './Form'
+export * from './Form'

cli/web/src/views/ProposalData/pages/CustomerData/Vehicles/Form/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+    datePicker: { marginBottom: '0px !important' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/Vehicles/Vehicles.tsx

+import React, { useState } from 'react'
+
+import { vehicles } from '@agiliza/__mocks__/proposalData'
+import { Vehicle } from '@agiliza/api/domain'
+import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Add as AddIcon, DriveEta as DriveEtaIcon } from '@material-ui/icons'
+
+import Dialog from './Dialog'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const Vehicles = (props: Props) => {
+  const { classes } = props
+
+  const [selectedVehicle, setSelectedVehicle] = useState<Vehicle | undefined>()
+
+  const [open, setOpen] = useState(false)
+
+  const handleClickListItem = (vehicle: Vehicle) => () => {
+    setSelectedVehicle(vehicle)
+    setOpen(true)
+  }
+
+  const handleClickAdd = () => {
+    setOpen(true)
+    setSelectedVehicle(undefined)
+  }
+
+  const handleSave = (vehicle: Vehicle) => () => {}
+
+  return (
+    <>
+      <div className={classes.contentContainer}>
+        <div className={classes.content}>
+          <List className={classes.list}>
+            {vehicles.map((vehicle, i) => (
+              <ListItem key={i} button onClick={handleClickListItem(vehicle)}>
+                <ListItemAvatar>
+                  <Avatar>
+                    <DriveEtaIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText primary={vehicle.brand} secondary={vehicle.licensePlate} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </div>
+      <Avatar className={classes.avatarBtnContainer} onClick={handleClickAdd}>
+        <AddIcon />
+      </Avatar>
+      <Dialog open={open} onClose={() => setOpen(false)} vehicle={selectedVehicle} onSave={handleSave} />
+    </>
+  )
+}
+
+export default withStyles(styles)(Vehicles)

cli/web/src/views/ProposalData/pages/CustomerData/Vehicles/index.ts

+export { default } from './Vehicles'
+export * from './Vehicles'

cli/web/src/views/ProposalData/pages/CustomerData/Vehicles/state.ts

+import { Vehicle } from '@agiliza/api/domain'
+
+type ExtendedState = Vehicle
+
+export interface CustomerVehicleState extends ExtendedState {}
+
+export const initialState: CustomerVehicleState = {
+  id: '',
+  brand: '',
+  document: '',
+  hasInsurance: false,
+  hasOnus: false,
+  licensePlate: '',
+  marketValue: '',
+  model: '',
+  year: '',
+}

cli/web/src/views/ProposalData/pages/CustomerData/Vehicles/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    list: { width: '100%' },
+    avatarBtnContainer: {
+      margin: theme.spacing(1),
+      backgroundColor: theme.palette.primary.main,
+      position: 'absolute',
+      bottom: 0,
+      right: 20,
+    },
+    plusBtnContainer: { width: '100%', flexGrow: 1, display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' },
+  })
+}

cli/web/src/views/ProposalData/pages/CustomerData/index.ts

+export { default } from './CustomerData'
+export * from './CustomerData'

cli/web/src/views/ProposalData/pages/CustomerData/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../shared-styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) =>
+  createStyles({
+    ...sharedStyles(theme),
+  })

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/AddUpdateDialog/AddUpdateDialog.tsx

+import React, { useCallback, useEffect } from 'react'
+
+import { InvolvedPerson, InvolvedPersonType } from '@agiliza/api/domain'
+import { useFormState } from '@agiliza/utils/hooks/state'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogProps,
+  DialogTitle
+} from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import Customer from '../Customer'
+import { initialState } from './state'
+import styles from './styles'
+
+type ExtendedProps = Pick<DialogProps, 'open'> & WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  person?: InvolvedPerson
+  type?: InvolvedPersonType
+  onSave(person?: InvolvedPerson): () => void
+  onClose: () => void
+}
+
+const AddUpdateDialog = (props: Props) => {
+  const { classes, open, onClose, type, person, onSave } = props
+
+  const { actions, state } = useFormState('involvedPersonForm', initialState)
+
+  useEffect(() => {
+    if (person) actions.update(person.identification)
+    else actions.update(initialState)
+  }, [person])
+
+  const renderForm = useCallback(
+    (type: InvolvedPersonType) => {
+      switch (type) {
+        case 'CUSTOMER':
+          return <Customer state={state} actions={actions} />
+      }
+    },
+    [type, state]
+  )
+
+  const mapStateToPerson = (): InvolvedPerson | undefined => {
+    const { hasAccount, ...identification } = state
+    return type && { id: person?.id || '', identification: { ...identification, type } }
+  }
+
+  return (
+    <Dialog onClose={onClose} aria-labelledby="simple-dialog-title" open={open} PaperProps={{ className: classes.dialog }}>
+      <DialogTitle>{person ? 'Editar' : 'Adicionar'} pessoa envolvida</DialogTitle>
+      <DialogContent>{type && renderForm(type)}</DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancelar</Button>
+        <Button onClick={onSave(mapStateToPerson())}>Salvar</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default withStyles(styles)(AddUpdateDialog)

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/AddUpdateDialog/index.ts

+export { default } from './AddUpdateDialog'
+export * from './AddUpdateDialog'

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/AddUpdateDialog/state/index.ts

+export * from './state'

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/AddUpdateDialog/state/state.ts

+import { InvolvedPerson } from '@agiliza/api/domain'
+
+type ExtendedState = Omit<InvolvedPerson['identification'], 'type'>
+
+export interface IPIdentificationState extends ExtendedState {
+  hasAccount: boolean
+}
+
+export const initialState: IPIdentificationState = {
+  id: '',
+  name: '',
+  cpfcnpj: '',
+  gender: '',
+  hasAccount: false,
+  account: { agencyNumber: '', number: '', cardPicture: '' },
+  dataType: { doesWithdrawal: false, framework: '' },
+}

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/AddUpdateDialog/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    dialog: { height: '80%', width: '60%' },
+  })
+}

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/Customer/Customer.tsx

+import React from 'react'
+
+import { frameworks, genders } from '@agiliza/__mocks__/proposalData'
+import { BanestesAccount, DataType } from '@agiliza/api/domain'
+import AccountInputsPhoto from '@agiliza/components/templates/AccountInputsPhoto'
+import { ActionType } from '@agiliza/utils/hooks/state'
+import { maskCPFCNPJ } from '@agiliza/utils/masks'
+import { SelectField, SelectFieldProps } from '@curio/components'
+import { FormControlLabel, Switch, TextField, TextFieldProps } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import { IPIdentificationState } from '../AddUpdateDialog/state'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  state: IPIdentificationState
+  actions: ActionType<IPIdentificationState>
+}
+
+const Customer = (props: Props) => {
+  const { classes, state, actions } = props
+
+  const { cpfcnpj, dataType, name, gender, hasAccount, account } = state
+
+  const handleChangeText =
+    (key: keyof IPIdentificationState): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ [key]: evt.target.value })
+    }
+  const handleChangeSelect =
+    (key: keyof IPIdentificationState): SelectFieldProps['onChange'] =>
+    (vl) => {
+      actions.update({ [key]: vl })
+    }
+
+  const handleChangeDataType =
+    (key: keyof DataType): SelectFieldProps['onChange'] =>
+    (vl) => {
+      actions.update({ dataType: { [key]: vl } })
+    }
+
+  const handleChangeAccount =
+    (type: keyof BanestesAccount): TextFieldProps['onChange'] =>
+    (evt) => {
+      actions.update({ account: { [type]: evt.target.value } })
+    }
+
+  const handleChangePhoto = (name: string) => {
+    actions.update({ account: { cardPicture: name } })
+  }
+
+  const handleChangeValidState = (vldStt: boolean) => {}
+
+  return (
+    <form className={classes.form}>
+      <SelectField
+        id="framework-select-field"
+        label="Enquadramento"
+        value={dataType?.framework}
+        onChange={handleChangeDataType('framework')}
+        items={frameworks.map((fw) => ({ label: fw.name, value: fw.id }))}
+        variant="outlined"
+        shrink={false}
+      />
+      <TextField
+        variant="outlined"
+        label="CPF / CNPJ"
+        value={maskCPFCNPJ(cpfcnpj)}
+        onChange={handleChangeText('cpfcnpj')}
+        inputProps={{ maxLength: 18 }}
+      />
+      <TextField variant="outlined" label="Nome / Razão social" value={name || ''} onChange={handleChangeText('name')} />
+      <SelectField
+        id="gender-select-field"
+        label="Sexo"
+        value={gender}
+        onChange={handleChangeSelect('gender')}
+        items={genders.map((fw) => ({ label: fw.name, value: fw.id }))}
+        variant="outlined"
+        shrink={false}
+      />
+      <div className={classes.switchCardPhotoContainer}>
+        <FormControlLabel
+          label="Possui conta no Banestes?"
+          control={
+            <Switch
+              checked={hasAccount}
+              onChange={(_, checked) => {
+                actions.update({ hasAccount: checked })
+              }}
+              name="has-account"
+              inputProps={{ 'aria-label': 'secondary checkbox' }}
+            />
+          }
+        />
+        {hasAccount ? (
+          <AccountInputsPhoto
+            values={{ ...account }}
+            onChanges={{ account: handleChangeAccount, photo: handleChangePhoto, validState: handleChangeValidState }}
+          />
+        ) : null}
+      </div>
+    </form>
+  )
+}
+
+export default withStyles(styles)(Customer)

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/Customer/index.ts

+export { default } from './Customer'
+export * from './Customer'

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/Customer/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    form: {
+      '& .MuiTextField-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+      '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2),
+        width: '100%',
+      },
+    },
+    switchCardPhotoContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly' },
+  })
+}

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/Identification.tsx

+import React, { useState } from 'react'
+
+import { people } from '@agiliza/__mocks__/proposalData/involvedPeople'
+import { InvolvedPerson, InvolvedPersonType } from '@agiliza/api/domain'
+import { INVOLVED_PERSON_IDS, INVOLVED_PERSON_NAMES } from '@agiliza/constants/involvedPeople'
+import { maskCPFCNPJ } from '@agiliza/utils/masks'
+import { Avatar, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import { Add as AddIcon, Person as PersonIcon } from '@material-ui/icons'
+
+import AddUpdateDialog from './AddUpdateDialog'
+import SelectTypeDialog from './SelectTypeDialog'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const Identification = (props: Props) => {
+  const { classes } = props
+
+  const [open, setOpen] = useState({ type: false, form: false })
+  const [type, setType] = useState<InvolvedPersonType | ''>('')
+  const [selectedPerson, setSelectedPerson] = useState<InvolvedPerson | undefined>()
+
+  const handleSelectType = (type: InvolvedPersonType) => () => {
+    setType(type)
+    setSelectedPerson(undefined)
+    setOpen({ type: false, form: true })
+  }
+
+  const handleClickAdd = () => {
+    setOpen({ ...open, type: true })
+  }
+
+  const handleClickListItem = (person: InvolvedPerson) => () => {
+    setSelectedPerson(person)
+    setType(INVOLVED_PERSON_IDS[person.identification.type])
+    setOpen({ ...open, form: true })
+  }
+
+  const handleSave = (person: InvolvedPerson) => () => {}
+
+  return (
+    <>
+      <div className={classes.contentContainer}>
+        <div className={classes.content}>
+          <Typography className={classes.title}>Identicação</Typography>
+          <List className={classes.list}>
+            {people.map((person, i) => (
+              <ListItem key={i} button onClick={handleClickListItem(person)}>
+                <ListItemAvatar>
+                  <Avatar>
+                    <PersonIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                  primary={INVOLVED_PERSON_NAMES[person.identification.type]}
+                  secondary={`${person.identification.name} - ${maskCPFCNPJ(person.identification.cpfcnpj)}`}
+                />
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </div>
+      <Avatar
+        className={classes.avatarBtnContainer}
+        onClick={handleClickAdd}
+        // rounded
+        // Component={TouchableOpacity}
+      >
+        <AddIcon />
+      </Avatar>
+      <SelectTypeDialog open={open.type} onClose={() => setOpen({ ...open, type: false })} onSelectType={handleSelectType} />
+      <AddUpdateDialog
+        open={open.form}
+        onClose={() => setOpen({ ...open, form: false })}
+        person={selectedPerson}
+        type={type as InvolvedPersonType}
+        onSave={handleSave}
+      />
+    </>
+  )
+}
+
+export default withStyles(styles)(Identification)

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/SelectTypeDialog/SelectTypeDialog.tsx

+import React from 'react'
+
+import { InvolvedPersonType } from '@agiliza/api/domain'
+import { Dialog, DialogProps, List, ListItem, ListItemText } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import styles from './styles'
+
+type ExtendedProps = Pick<DialogProps, 'open' | 'onClose'> & WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  onSelectType(type: InvolvedPersonType): () => void
+}
+
+const SelectTypeDialog = (props: Props) => {
+  const { classes, open, onClose, onSelectType } = props
+  return (
+    <Dialog onClose={onClose} aria-labelledby="simple-dialog-title" open={open} PaperProps={{ className: classes.dialog }}>
+      <List>
+        <ListItem button onClick={onSelectType('CUSTOMER')}>
+          <ListItemText primary="Cliente" className={classes.listItemText} />
+        </ListItem>
+        <ListItem button onClick={onSelectType('GUARANTOR')}>
+          <ListItemText primary="Avalista" className={classes.listItemText} />
+        </ListItem>
+        <ListItem button>
+          <ListItemText primary="Sócio" onClick={onSelectType('PARTNER')} className={classes.listItemText} />
+        </ListItem>
+      </List>
+    </Dialog>
+  )
+}
+
+export default withStyles(styles)(SelectTypeDialog)

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/SelectTypeDialog/index.ts

+export { default } from './SelectTypeDialog'
+export * from './SelectTypeDialog'

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/SelectTypeDialog/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  return createStyles({
+    ...sharedStyles(theme),
+    dialog: { width: '20%' },
+    listItemText: { textAlign: 'center' },
+  })
+}

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/index.ts

+export { default } from './Identification'
+export * from './Identification'

cli/web/src/views/ProposalData/pages/InvolvedPeople/Identification/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) => {
+  const width = '100%'
+  return createStyles({
+    ...sharedStyles(theme),
+    list: { width },
+    avatarBtnContainer: {
+      margin: theme.spacing(1),
+      backgroundColor: theme.palette.primary.main,
+      position: 'absolute',
+      bottom: 0,
+      right: 20,
+    },
+    plusBtnContainer: { width, flexGrow: 1, display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' },
+  })
+}

cli/web/src/views/ProposalData/pages/InvolvedPeople/InvolvedPeople.tsx

+import React, { ChangeEvent, useState } from 'react'
+
+import { Tab } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import {
+  AccountBox as AccountBoxIcon,
+  CheckBox as CheckBoxIcon,
+  ContactMail as ContactMailIcon,
+  Forum as ForumIcon,
+  Home as HomeIcon,
+  List as ListIcon,
+  LocalAtm as LocalAtmIcon,
+  ZoomOutMap as ZoomOutMapIcon
+} from '@material-ui/icons'
+import { TabContext, TabList, TabPanel } from '@material-ui/lab'
+
+import Identification from './Identification'
+import styles from './styles'
+
+export const involvedPeopleItems = [
+  { label: 'Identificação', icon: <AccountBoxIcon />, component: <Identification /> },
+  { label: 'Dados Pessoais', icon: <ListIcon />, component: <div>Dados Pessoais</div> },
+  { label: 'Endereço', icon: <ContactMailIcon />, component: <div>Endereço</div> },
+  { label: 'Fonte de renda', icon: <LocalAtmIcon />, component: <div>Fonte de renda</div> },
+  { label: 'Cônjuge - Ident.', icon: <ForumIcon />, component: <div>Cônjuge - Ident.</div> },
+  { label: 'Cônjuge +', icon: <ZoomOutMapIcon />, component: <div>Cônjuge +</div> },
+  { label: 'Referências', icon: <CheckBoxIcon />, component: <div>Referências</div> },
+  { label: 'Moradia', icon: <HomeIcon />, component: <div>Moradia</div> },
+]
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {}
+
+const InvolvedPeople = (props: Props) => {
+  const { classes } = props
+  const [tab, setTab] = useState('0')
+
+  const handleChange = (evt: ChangeEvent<Record<string, unknown>>, newValue: number) => {
+    setTab(newValue.toString())
+  }
+
+  return (
+    <div className={classes.contentContainer}>
+      <TabContext value={tab}>
+        <TabList
+          orientation="vertical"
+          variant="scrollable"
+          value={tab}
+          onChange={handleChange}
+          aria-label="Vertical tabs example"
+          className={classes.tabs}
+        >
+          {involvedPeopleItems.map(({ component, ...tb }, i) => (
+            <Tab wrapped key={i} {...tb} value={i.toString()} />
+          ))}
+        </TabList>
+        <div className={classes.content}>
+          {involvedPeopleItems.map((tb, i) => (
+            <TabPanel key={i} value={i.toString()}>
+              {tb.component}
+            </TabPanel>
+          ))}
+        </div>
+      </TabContext>
+    </div>
+  )
+}
+
+export default withStyles(styles)(InvolvedPeople)

cli/web/src/views/ProposalData/pages/InvolvedPeople/index.ts

+export { default } from './InvolvedPeople'
+export * from './InvolvedPeople'

cli/web/src/views/ProposalData/pages/InvolvedPeople/styles.ts

+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../shared-styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) =>
+  createStyles({
+    ...sharedStyles(theme),
+    contentContainer: { display: 'flex', flexDirection: 'column', alignItems: 'center', flexGrow: 1, overflowY: 'auto' },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      width: '25%',
+      height: '100%',
+    },
+    cardsContainer: { display: 'flex' },
+    gridItem: { display: 'flex', justifyContent: 'center' },
+    tabs: { borderRight: `1px solid ${theme.palette.divider}` },
+    tabWrapper: { flexDirection: 'row' },
+    tabLabelIcon: { marginBottom: '0px !important', marginRight: theme.spacing(1) },
+  })

cli/web/src/views/ProposalData/pages/ProposalData.tsx

+import React, { useMemo, useState } from 'react'
+import { RouteComponentProps } from 'react-router'
+
+import { PATHS } from '@agiliza/views/Main/DrawerItems'
+import { Button, MobileStepper, Typography } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import {
+  KeyboardArrowLeft as KeyboardArrowLeftIcon,
+  KeyboardArrowRight as KeyboardArrowRightIcon
+} from '@material-ui/icons'
+
+import { businessDataItems } from './BusinessData'
+import { personalDataItems } from './CustomerData'
+import styles from './shared-styles'
+
+export const PROPOSAL_DATA_PATHS = {
+  selectOption: PATHS.proposalData + '/selecionarOpcao',
+  involvedPeople: PATHS.proposalData + '/pessoasEnvolvidas',
+  businessData: PATHS.proposalData + '/dadosNegocio',
+}
+
+const proposalDataItems = [...personalDataItems, ...businessDataItems]
+
+type ExtendedProps = WithStyles<typeof styles> & RouteComponentProps
+
+interface Props extends ExtendedProps {}
+
+const ProposalData = (props: Props) => {
+  const { classes } = props
+  const [activeStep, setActiveStep] = useState(0)
+
+  const steps = useMemo(() => proposalDataItems.length, [proposalDataItems])
+
+  const handleNext = () => {
+    // if (activeStep === steps - 1) history.push({ pathname: PATHS.creditLines })
+    setActiveStep((prevActiveStep) => prevActiveStep + 1)
+  }
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1)
+  }
+
+  const mapActiveStepToTitle = () => {
+    if (activeStep < personalDataItems.length) return 'Dados do cliente'
+    if (activeStep < proposalDataItems.length) return 'Dados de negócio'
+  }
+
+  return (
+    <div className={classes.pageContent}>
+      <Typography className={classes.pageTitle} variant="h5">
+        {mapActiveStepToTitle()}
+      </Typography>
+      <Typography className={classes.pageSubtitle}>{proposalDataItems[activeStep].label}</Typography>
+      <div className={classes.stepContentContainer}>{proposalDataItems[activeStep].component}</div>
+      <div className={classes.stepperContainer}>
+        {/* <Stepper activeStep={activeStep} alternativeLabel className={classes.stepper}> */}
+        {/* {propostalDataItems.map((iPI, i) => (
+            <Step key={i}>
+              <StepLabel>{iPI.label}</StepLabel>
+            </Step>
+          ))} */}
+        <MobileStepper
+          variant="dots"
+          steps={steps}
+          position="static"
+          activeStep={activeStep}
+          style={{ width: '100%' }}
+          nextButton={
+            <Button size="large" onClick={handleNext} disabled={activeStep === steps - 1} className={classes.stepperBtn}>
+              {activeStep === steps - 1 ? (
+                'Finalizar'
+              ) : (
+                <>
+                  Próximo
+                  <KeyboardArrowRightIcon />
+                </>
+              )}
+            </Button>
+          }
+          backButton={
+            <Button size="large" onClick={handleBack} disabled={activeStep === 0} className={classes.stepperBtn}>
+              <KeyboardArrowLeftIcon />
+              Anterior
+            </Button>
+          }
+        />
+        {/* </Stepper> */}
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(ProposalData)

cli/web/src/views/ProposalData/pages/SelectOption/ListItem.tsx

+import React from 'react'
+
+import { Avatar, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles>
+
+interface Props extends ExtendedProps {
+  label: string
+  icon: JSX.Element
+  onClick?: () => void
+}
+
+const GridItem = (props: Props) => {
+  const { classes, icon, label, onClick } = props
+  return (
+    <ListItem button onClick={onClick} className={classes.listItem}>
+      <ListItemAvatar>
+        <Avatar className={classes.avatar}>{icon}</Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={label} />
+    </ListItem>
+
+    // <Grid item xl={4} className={classes.gridItem}>
+    //   <DashboardCard label={label} icon={icon} onClick={onClick} />
+    // </Grid>
+  )
+}
+
+export default withStyles(styles)(GridItem)

cli/web/src/views/ProposalData/pages/SelectOption/SelectOption.tsx

+import React from 'react'
+import { RouteComponentProps } from 'react-router'
+
+import { List } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+import {
+  CheckBox as CheckBoxIcon,
+  Description as DescriptionIcon,
+  Person as PersonIcon,
+  Settings as SettingsIcon,
+  ThumbUp as ThumbUpIcon,
+  TrendingUp as TrendingUpIcon,
+  VisibilityOff as VisibilityOffIcon
+} from '@material-ui/icons'
+
+import { PROPOSAL_DATA_PATHS } from '../ProposalData'
+import ListItem from './ListItem'
+import styles from './styles'
+
+type ExtendedProps = WithStyles<typeof styles> & RouteComponentProps
+
+interface Props extends ExtendedProps {}
+
+const SelectOption = (props: Props) => {
+  const { classes, history } = props
+
+  return (
+    <div className={classes.contentContainer}>
+      <div className={classes.content}>
+        <List component="nav" className={classes.list}>
+          <ListItem
+            label="Pessoas envolvidas"
+            icon={<PersonIcon className={classes.listItemIcon} />}
+            onClick={() => history.push(PROPOSAL_DATA_PATHS.involvedPeople)}
+          />
+          <ListItem
+            label="Dados de negócio"
+            icon={<SettingsIcon className={classes.listItemIcon} />}
+            onClick={() => history.push(PROPOSAL_DATA_PATHS.businessData)}
+          />
+          <ListItem label="LSE" icon={<TrendingUpIcon className={classes.listItemIcon} />} />
+          <ListItem label="Solicitação" icon={<ThumbUpIcon className={classes.listItemIcon} />} />
+          <ListItem label="Parecer" icon={<VisibilityOffIcon className={classes.listItemIcon} />} />
+          <ListItem label="Resumo" icon={<DescriptionIcon className={classes.listItemIcon} />} />
+          <ListItem label="Checklist do Projeto" icon={<CheckBoxIcon className={classes.listItemIcon} />} />
+        </List>
+      </div>
+    </div>
+  )
+}
+
+export default withStyles(styles)(SelectOption)

cli/web/src/views/ProposalData/pages/SelectOption/index.ts

+export { default } from './SelectOption'
+export * from './SelectOption'

cli/web/src/views/ProposalData/pages/SelectOption/styles.ts

+import { grey } from '@material-ui/core/colors'
+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+import sharedStyles from '../shared-styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) =>
+  createStyles({
+    ...sharedStyles(theme),
+    contentContainer: { display: 'flex', justifyContent: 'center', width: '100%', height: '100%' },
+    content: { display: 'flex', flexDirection: 'column', width: '100%' },
+    cardsContainer: { display: 'flex' },
+    list: { width: '50%', paddingLeft: theme.spacing(2) },
+    listItem: { display: 'flex', justifyContent: 'center', padding: theme.spacing(1) },
+    listItemIcon: { fontSize: theme.spacing(3.5) },
+    avatar: { background: grey['900'] },
+  })

cli/web/src/views/ProposalData/pages/index.ts

+export { default } from './ProposalData'
+export * from './ProposalData'

cli/web/src/views/ProposalData/pages/router.tsxx

+import React, { lazy, Suspense } from 'react'
+import { Redirect, Route, RouteComponentProps, Switch } from 'react-router'
+
+import { entries } from '@agiliza/utils/method'
+import { PATHS } from '@agiliza/views/Main/DrawerItems'
+import { Breadcrumbs, CircularProgress, Link } from '@material-ui/core'
+import { withStyles, WithStyles } from '@material-ui/core/styles'
+
+import styles from './shared-styles'
+
+export const PROPOSAL_DATA_PATHS = {
+  selectOption: PATHS.proposalData + '/selecionarOpcao',
+  involvedPeople: PATHS.proposalData + '/pessoasEnvolvidas',
+  businessData: PATHS.proposalData + '/dadosNegocio',
+}
+
+const SelectOption = lazy(() => import('./SelectOption'))
+const InvolvedPeople = lazy(() => import('./InvolvedPeople'))
+const BusinessData = lazy(() => import('./BusinessData'))
+
+type ExtendedProps = WithStyles<typeof styles> & RouteComponentProps
+
+interface Props extends ExtendedProps {}
+
+const ProposalDataRouter = (props: Props) => {
+  const { classes, match, history, location } = props
+
+  const mapPathToBreadscrumbs = (name: keyof typeof PROPOSAL_DATA_PATHS) => {
+    switch (name) {
+      case 'businessData':
+        return 'Dados de negócio'
+      case 'involvedPeople':
+        return 'Dados de negócio'
+      case 'selectOption':
+        return 'Escolher Opção'
+    }
+    return ''
+  }
+
+  return (
+    <div className={classes.pageContent}>
+      <div className={classes.breadcrumbsContainer}>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link color="inherit" onClick={() => history.push(PATHS.proposalData)} className={classes.link}>
+            Dados da proposta
+          </Link>
+          {location.pathname.split('/').map((mP, i, thisArg) => {
+            const allPaths = { ...PROPOSAL_DATA_PATHS }
+            console.log(allPaths)
+            const pathEntry = entries(allPaths).find(([k, v]) => !!mP && (v as string).includes(mP)) as [keyof typeof PROPOSAL_DATA_PATHS, string]
+            const path = pathEntry && pathEntry[0]
+
+            if (!path) return null
+            return (
+              <Link
+                key={i}
+                color={i === thisArg.length - 1 ? 'textPrimary' : 'inherit'}
+                onClick={() => history.push(allPaths[path])}
+                className={classes.link}
+              >
+                {mapPathToBreadscrumbs(path)}
+              </Link>
+            )
+          })}
+        </Breadcrumbs>
+      </div>
+      <Suspense fallback={<CircularProgress className={classes.circularProgress} />}>
+        <Switch>
+          <Route exact path={PROPOSAL_DATA_PATHS.selectOption} render={(rProps) => <SelectOption {...rProps} />} />
+          <Route exact path={PROPOSAL_DATA_PATHS.involvedPeople} render={(rProps) => <InvolvedPeople {...rProps} />} />
+          <Route exact path={PROPOSAL_DATA_PATHS.businessData} render={(rProps) => <BusinessData {...rProps} />} />
+          <Redirect from={match.path} to={PROPOSAL_DATA_PATHS.selectOption} />
+        </Switch>
+      </Suspense>
+    </div>
+  )
+}
+
+export default withStyles(styles)(ProposalDataRouter)

cli/web/src/views/ProposalData/pages/shared-styles.ts

+import sharedStyles from '@agiliza/views/shared-styles'
+import { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/styles'
+
+// eslint-disable-next-line
+export default (theme: Theme) =>
+  createStyles({
+    ...sharedStyles(theme),
+    title: { marginBottom: theme.spacing(2) },
+    link: { cursor: 'pointer' },
+    breadcrumbsContainer: { margin: theme.spacing(2) },
+    stepContentContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      height: '92%',
+      position: 'relative',
+      overflowY: 'auto',
+    },
+    stepperContainer: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '8%' },
+    stepper: { flexGrow: 1 },
+    stepperBtn: { height: '100%' },
+    pageTitle: { width: '100%', textAlign: 'center' },
+    pageSubtitle: { width: '100%', textAlign: 'center' },
+    contentContainer: { display: 'flex', flexDirection: 'column', alignItems: 'center', flexGrow: 1, overflowY: 'auto', padding: theme.spacing(2) },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      width: '25%',
+      height: '100%',
+    },
+  })

cli/web/src/views/SimulationCreditLines/pages/CreditLinesList/styles.ts

@@ -7,7 +7,7 @@ import sharedStyles from '../shared-styles'
 export default (theme: Theme) =>
   createStyles({
     ...sharedStyles(theme),
-    contentContainer: { display: 'flex', justifyContent: 'center', width: '100%' },
+    contentContainer: { display: 'flex', justifyContent: 'center', width: '100%', overflowY: 'auto' },
     content: { display: 'flex', flexDirection: 'column', alignItems: 'center', width: '50%' },
     creditLinesAutocomplete: { width: '100%' },
     description: { margin: theme.spacing(2), width: '100%' },

cli/web/src/views/SimulationCreditLines/pages/Simulation/Simulation.tsx

@@ -59,7 +59,7 @@ const Simulation = (props: Props) => {
           <KeyboardArrowLeftIcon />
           Anterior
         </Button>
-        <Stepper activeStep={activeStep} alternativeLabel className={classes.stepper}>
+        <Stepper activeStep={activeStep} className={classes.stepper}>
           <Step>
             <StepLabel>Informações linha de crédito</StepLabel>
           </Step>

cli/web/src/views/SimulationCreditLines/pages/router.tsx

@@ -22,7 +22,7 @@ interface Props extends ExtendedProps {}
 const CreditLinesRouter = (props: Props) => {
   const { classes, match } = props
   return (
-    <div className={classes.pageContainer}>
+    <div className={classes.pageContent}>
       <Suspense fallback={<CircularProgress className={classes.circularProgress} />}>
         <Switch>
           <Route exact path={match.path + CREDIT_LINES_PATHS.creditLinesList} render={(rProps) => <CreditLinesList fetching={false} {...rProps} />} />

cli/web/src/views/SimulationCreditLines/pages/shared-styles.ts

@@ -6,14 +6,5 @@ import { createStyles } from '@material-ui/styles'
 export default (theme: Theme) =>
   createStyles({
     ...sharedStyles(theme),
-    circularProgressContainer: {
-      display: 'flex',
-      width: '100%',
-      height: '100%',
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    circularProgress: { position: 'absolute', top: '50%', left: '50%' },
     title: { marginBottom: theme.spacing(2) },
   })

cli/web/src/views/shared-styles.ts

@@ -6,25 +6,25 @@ import { createStyles } from '@material-ui/core/styles'
 export default (theme: Theme) => {
   const display = 'flex'
   return createStyles({
-    pageContainer: {
-      height: '100vh',
-      display: 'flex',
-      flexDirection: 'column',
-      // padding: theme.spacing(2),
-      paddingTop: 0,
-      paddingBottom: 0,
-      justifyContent: 'flex-start',
-    },
     pageContent: {
       height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
       padding: theme.spacing(2),
       display: 'flex',
       flexDirection: 'column',
+      overflowY: 'hidden',
     },
     title: {
       flexGrow: 1,
       fontSize: '100%',
     },
+    circularProgressContainer: {
+      display: 'flex',
+      width: '100%',
+      height: '100%',
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
     circularProgress: { position: 'absolute', top: '50%', left: '50%' },
     container: { display: 'flex', flexDirection: 'column', flex: 1, height: '100%' },
     inputContainer: { display, flexWrap: 'wrap' },

cli/web/tsconfig.json

@@ -3,6 +3,8 @@
     "baseUrl": ".",
     "paths": {
       /*Modified paths, e.g. @projectName/.../, required modify webpack: resolve->alias*/
+      "@agiliza/__mocks__": ["src/__mocks__"],
+      "@agiliza/__mocks__/*": ["src/__mocks__/*"],
       "@agiliza/api": ["src/api"],
       "@agiliza/api/*": ["src/api/*"],
       "@agiliza/constants": ["src/constants"],

cli/web/webpack.config.js

@@ -77,6 +77,7 @@ const fileLoader = {
 
 const resolve = {
   alias: {
+    '@agiliza/__mocks__': pathResolve('src/__mocks__'),
     '@agiliza/api': pathResolve('src/api'),
     '@agiliza/theme': pathResolve('src/theme'),
     '@agiliza/constants': pathResolve('src/constants'),

cli/web/yarn.lock

@@ -937,10 +937,10 @@
     isomorphic-fetch "^2.2.1"
     symbol-observable "^1.2.0"
 
-"@curio/components@^0.1.3":
-  version "0.1.3"
-  resolved "https://nexus.dev.evologica.com.br/repository/npm/@curio/components/-/components-0.1.3.tgz#82cac0b6abfa5152441f703a4521c033d61ef305"
-  integrity sha512-Q0uBy01hOoFKf7YMPLM2fj6S13Hh5ti7Nr6LvNV2Y/woGR/EkloqeahqiJsxqW/x0b0Av08zr13S0ps6TPbijA==
+"@curio/components@^0.1.5":
+  version "0.1.5"
+  resolved "https://nexus.dev.evologica.com.br/repository/npm/@curio/components/-/components-0.1.5.tgz#098d89ed0d06a0178af71a6e7c73f588aeccb241"
+  integrity sha512-g9WKPReGIzDioaXBMlycUO4ghWY2WPCoAE7U/YC88+s8tDylgrqSIDpE8SQJGZ0p8R0odqszhXehmec2Amfv7A==
   dependencies:
     "@curio/client" "1.3.3"
     "@date-io/date-fns" "^1.0.0"