fix: add estimated & expense dialog.

src/common/modalChargeOptions.tsx

@@ -12,6 +12,6 @@ export const expenseChargeOption = [
     value: '% markup',
   },
   { name: intl.get('expenses.dialog.pass_cost_on'), value: 'Pass cost on' },
-  { name: intl.get('expemses.dialog.custom_price'), value: 'Custom Pirce' },
+  { name: intl.get('expenses.dialog.custom_pirce'), value: 'Custom Pirce' },
   { name: intl.get('expenses.dialog.non_chargeable'), value: 'Non-chargeable' },
 ];

src/containers/Projects/components/FInputGroupComponent.tsx

@@ -0,0 +1,20 @@
+//@ts-nocheck
+import React from 'react';
+import { FInputGroup } from 'components';
+import { useFormikContext } from 'formik';
+
+export function FInputGroupComponent({ toField, ...props }) {
+  const { values, setFieldValue } = useFormikContext();
+  const { expenseQuantity, expenseUnitPrice } = values;
+  const total = expenseQuantity * expenseUnitPrice;
+
+  const handleBlur = () => {
+    setFieldValue(toField, total);
+  };
+
+  const inputGroupProps = {
+    onBlur: handleBlur,
+    ...props,
+  };
+  return <FInputGroup {...inputGroupProps} />;
+}

src/containers/Projects/components/index.ts

@@ -1,2 +1,3 @@
 export * from './ExpenseSelect';
 export * from './ChargeSelect';
+export * from './FInputGroupComponent'

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpense.schema.tsx

@@ -12,7 +12,7 @@ const Schema = Yup.object().shape({
   unitPrice: Yup.number().label(
     intl.get('estimated_expense.schema.label.unit_price'),
   ),
-  total: Yup.number(),
+  expenseTotal: Yup.number(),
   charge: Yup.string(),
 });
 

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseFormFields.tsx

@@ -10,7 +10,7 @@ import {
   FormattedMessage as T,
   FieldRequiredHint,
 } from 'components';
-import { ExpenseSelect } from '../../components';
+import { ExpenseSelect, FInputGroupComponent } from '../../components';
 import { useEstimatedExpenseFormContext } from './EstimatedExpenseFormProvider';
 import EstimatedExpenseFormChargeFields from './EstimatedExpenseFormChargeFields';
 import { ChargeSelect } from '../../components';
@@ -41,27 +41,31 @@ export default function EstimatedExpenseFormFields() {
         label={intl.get('estimated_expenses.dialog.quantity')}
         name={'quantity'}
       >
-        <FInputGroup name="quantity" />
+        <FInputGroupComponent name="quantity" />
       </FFormGroup>
 
-      <MetaLineLabel>Cost to you</MetaLineLabel>
+      <MetaLineLabel>
+        <T id={'estimated_expenses.dialog.cost_to_you'} />
+      </MetaLineLabel>
       {/*------------ Unit Price -----------*/}
       <ControlGroup className={Classes.FILL}>
         <FFormGroup
           name={'unitPrice'}
           label={intl.get('estimated_expenses.dialog.unit_price')}
         >
-          <FInputGroup name="unitPrice" />
+          <FInputGroupComponent name="unitPrice" />
         </FFormGroup>
         <FFormGroup
           name={'unitPrice'}
           label={intl.get('estimated_expenses.dialog.total')}
         >
-          <FInputGroup label="Total" name="total" />
+          <FInputGroup name="expenseTotal" />
         </FFormGroup>
       </ControlGroup>
 
-      <MetaLineLabel>What you'll charge</MetaLineLabel>
+      <MetaLineLabel>
+        <T id={'estimated_expenses.dialog.what_you_ll_charge'} />
+      </MetaLineLabel>
       {/*------------ Charge -----------*/}
       <FFormGroup
         name={'charge'}

src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormFields.tsx

@@ -11,7 +11,7 @@ import {
   FDateInput,
   FormattedMessage as T,
 } from 'components';
-import { ExpenseSelect } from '../../components';
+import { ExpenseSelect, FInputGroupComponent } from '../../components';
 import ExpenseFormChargeFields from './ExpenseFormChargeFields';
 import { momentFormatter } from 'utils';
 import { useExpenseFormContext } from './ExpenseFormProvider';
@@ -66,17 +66,19 @@ export default function ExpenseFormFields() {
         label={intl.get('expenses.dialog.quantity')}
         name={'expenseQuantity'}
       >
-        <FInputGroup name="expenseQuantity" />
+        <FInputGroupComponent name="expenseQuantity" />
       </FFormGroup>
 
-      <MetaLineLabel>Cost to you</MetaLineLabel>
+      <MetaLineLabel>
+        <T id={'expenses.dialog.cost_to_you'} />
+      </MetaLineLabel>
       {/*------------ Unit Price -----------*/}
       <ControlGroup className={Classes.FILL}>
         <FFormGroup
           name={'unitPrice'}
           label={intl.get('expenses.dialog.unit_price')}
         >
-          <FInputGroup name="expenseUnitPrice" />
+          <FInputGroupComponent name="expenseUnitPrice" />
         </FFormGroup>
         <FFormGroup
           name={'expenseTotal'}
@@ -86,7 +88,9 @@ export default function ExpenseFormFields() {
         </FFormGroup>
       </ControlGroup>
 
-      <MetaLineLabel>What you'll charge</MetaLineLabel>
+      <MetaLineLabel>
+        <T id={'expenses.dialog.what_you_ll_charge'} />
+      </MetaLineLabel>
       {/*------------ Charge -----------*/}
       <FFormGroup
         name={'expenseCharge'}

src/containers/Projects/containers/TaskFormDialog/TaskForm.tsx

@@ -13,7 +13,7 @@ const defaultInitialValues = {
   taskName: '',
   taskHouse: '00:00',
   taskCharge: 'Hourly rate',
-  taskamount: '100000000',
+  taskamount: '',
 };
 
 /**

src/containers/Projects/containers/TaskFormDialog/TaskFormFields.tsx

@@ -63,7 +63,7 @@ function TaskFormFields() {
       <EstimatedAmountBase>
         <EstimatedAmountContent>
           <T id={'task.dialog.estimated_amount'} />
-          <EstimateAmount>$100000</EstimateAmount>
+          <EstimateAmount>0.00</EstimateAmount>
         </EstimatedAmountContent>
       </EstimatedAmountBase>
     </div>
@@ -75,8 +75,9 @@ export default TaskFormFields;
 const EstimatedAmountBase = styled.div`
   display: flex;
   justify-content: flex-end;
-  font-size: 12px;
+  font-size: 14px;
-  /* opacity: 0.7; */
+  line-height: 1.5rem;
+  opacity: 0.75;
 `;
 
 const EstimatedAmountContent = styled.span`
@@ -85,7 +86,7 @@ const EstimatedAmountContent = styled.span`
 `;
 
 const EstimateAmount = styled.span`
-  font-size: 13px;
+  font-size: 15px;
   font-weight: 700;
   margin-left: 10px;
 `;

src/lang/en/index.json

@@ -2115,6 +2115,8 @@
   "expenses.dialog.pass_cost_on": "Pass cost on",
   "expenses.dialog.custom_pirce": "Custom Pirce",
   "expenses.dialog.non_chargeable": "Non-chargeable",
+  "expenses.dialog.cost_to_you":"Cost to you",
+  "expenses.dialog.what_you_ll_charge":"What you'll charge",
   "expense.schema.label.expense_name": "Expense name",
   "expense.schema.label.estimated_expense": "Estimated expense",
   "expense.schema.label.quantity": "Quantity",
@@ -2128,6 +2130,8 @@
   "estimated_expenses.dialog.charge": "Charge",
   "estimated_expenses.dialog.percentage": "Percentage",
   "estimated_expenses.dialog.estimated_amount": "Estimated Amount:",
+  "estimated_expenses.dialog.cost_to_you":"Cost to you",
+  "estimated_expenses.dialog.what_you_ll_charge":"What you'll charge",
   "estimated_expense.schema.label.estimated_expense": "Estimated expense name",
   "estimated_expense.schema.label.quantity": "Quantity",
   "estimated_expense.schema.label.unit_price": "Unit price",