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)