fix: project form.

src/components/Forms/BlueprintFormik.js

@@ -9,6 +9,7 @@ import {
   TextArea,
 } from '@blueprintjs-formik/core';
 import { Select, MultiSelect } from '@blueprintjs-formik/select';
+import { DateInput } from '@blueprintjs-formik/datetime';
 
 export {
   FormGroup as FFormGroup,
@@ -21,4 +22,5 @@ export {
   MultiSelect as FMultiSelect,
   EditableText as FEditableText,
   TextArea as FTextArea,
+  DateInput as FDateInput,
 };

src/containers/Dialogs/ProjectDialog/containers/ProjectForm.tsx

@@ -15,11 +15,12 @@ import { useProjectFormContext } from './ProjectFormProvider';
 import { compose } from 'utils';
 
 const defaultInitialValues = {
-  contact:'',
-  project_name:'',
-  project_deadline: moment(new Date()).format('YYYY-MM-DD'),
+  contact: '',
+  project_name: '',
+  project_deadline: '',
+  // project_deadline: moment(new Date()).format('YYYY-MM-DD'),
   project_state: false,
-  project_cost:''
+  project_cost: '',
 };
 
 /**

src/containers/Dialogs/ProjectDialog/containers/ProjectFormFields.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
 
@@ -10,11 +11,11 @@ import {
   FFormGroup,
   FInputGroup,
   FCheckbox,
+  FDateInput,
   FMoneyInputGroup,
   InputPrependText,
   FormattedMessage as T,
   CustomerSelectField,
-  FCustomerSelectField,
 } from 'components';
 import {
   inputIntent,
@@ -22,24 +23,27 @@ import {
   tansformDateValue,
   handleDateChange,
 } from 'utils';
+import { useProjectFormContext } from './ProjectFormProvider';
 
 /**
  * Project form fields.
  * @returns
  */
 function ProjectFormFields() {
+  const { customers } = useProjectFormContext();
+
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------ Contact -----------*/}
       <FastField name={'contact'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
-            label={'Contact'}
+            label={intl.get('projects.label.contact')}
             className={classNames('form-group--select-list', Classes.FILL)}
             intent={inputIntent({ error, touched })}
           >
             <CustomerSelectField
-              contacts={[]}
+              contacts={customers}
               selectedContactId={value}
               defaultSelectText={'Select Contact Account'}
               onContactSelected={(customer) => {
@@ -51,22 +55,21 @@ function ProjectFormFields() {
           </FormGroup>
         )}
       </FastField>
-
       {/*------------ Project Name -----------*/}
-      <FFormGroup label={'Project Name'} name={'project_name'}>
+      <FFormGroup
+        label={intl.get('projects.label.project_name')}
+        name={'project_name'}
+      >
         <FInputGroup name="project_name" />
       </FFormGroup>
       {/*------------ DeadLine -----------*/}
       <FFormGroup
-        label={'DeadLine'}
+        label={intl.get('projects.label.deadline')}
         name={'project_deadline'}
         className={classNames(CLASSES.FILL, 'form-group--date')}
       >
-        <DateInput
-          {...momentFormatter('YYYY/MM/DD')}
-          // onChange={handleDateChange((formattedDate) => {
-          // })}
-          // value={tansformDateValue(value)}
+        <FDateInput
+          name="project_deadline"
           popoverProps={{
             position: Position.BOTTOM,
             minimal: true,
@@ -78,11 +81,14 @@ function ProjectFormFields() {
       <FFormGroup name={'project_state'}>
         <FCheckbox
           name="project_state"
-          label={'Calculato from tasks & estimated expenses'}
+          label={intl.get('projects.label.calculator_expenses')}
         />
       </FFormGroup>
       {/*------------ Cost Estimate -----------*/}
-      <FFormGroup name={'project_cost'} label={' Cost Estimate'}>
+      <FFormGroup
+        name={'project_cost'}
+        label={intl.get('projects.label.cost_estimate')}
+      >
         <ControlGroup>
           <InputPrependText text={'USD'} />
           <FMoneyInputGroup

src/containers/Dialogs/ProjectDialog/containers/ProjectFormProvider.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from 'react';
+import { useCustomers } from 'hooks/query';
 
 import { DialogContent } from 'components';
 
@@ -16,13 +17,19 @@ function ProjectFormProvider({
   projectId,
   ...props
 }) {
+  // Handle fetch customers data table or list
+  const {
+    data: { customers },
+    isLoading: isCustomersLoading,
+  } = useCustomers({ page_size: 10000 });
+
   // State provider.
-  const provider = {};
+  const provider = {
+    customers,
+  };
 
   return (
-    <DialogContent
-    // isLoading={}
-    >
+    <DialogContent isLoading={isCustomersLoading}>
       <ProjectFormContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/ProjectDialog/index.tsx

@@ -16,7 +16,7 @@ function ProjectDialog({ dialogName, payload: { projectId = null }, isOpen }) {
   return (
     <Dialog
       name={dialogName}
-      title={'New Project'}
+      title={<T id={'projects.label.new_project'} />}
       isOpen={isOpen}
       autoFocus={true}
       canEscapeKeyClose={true}

src/containers/Dialogs/TaskDialog/containers/TaskFormFields.tsx

@@ -18,19 +18,22 @@ function TaskFormFields() {
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------ Task Name -----------*/}
-      <FFormGroup label={'Task Name'} name={'task_name'}>
+      <FFormGroup label={<T id={'task.label.task_name'} />} name={'task_name'}>
         <FInputGroup name="task_name" />
       </FFormGroup>
       {/*------------ Estimated Hours -----------*/}
       <Row>
         <Col xs={4}>
-          <FFormGroup label={'Estimated Hours'} name={'task_house'}>
+          <FFormGroup
+            label={<T id={'task.label.estimated_hours'} />}
+            name={'task_house'}
+          >
             <FInputGroup name="task_house" />
           </FFormGroup>
         </Col>
         {/*------------ Charge -----------*/}
         <Col xs={8}>
-          <FFormGroup label={'Charge'} name={'Charge'}>
+          <FFormGroup label={<T id={'task.label.charge'} />} name={'Charge'}>
             <ControlGroup>
               <FInputGroup name="change" />
               <FInputGroup name="change_amount" />
@@ -41,7 +44,7 @@ function TaskFormFields() {
       {/*------------ Estimated Amount -----------*/}
       <EstimatedAmountBase>
         <EstimatedAmountContent>
-          Estimated Amount:
+          <T id={'task.label.estimated_amount'} />
           <EstimateAmount>$100000</EstimateAmount>
         </EstimatedAmountContent>
       </EstimatedAmountBase>

src/containers/Dialogs/TaskDialog/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
+import intl from 'react-intl-universal';
 import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'utils';
 
-const TaskDialogContent = React.lazy(() =>
-  import('./containers/TaskDialogContent'),
+const TaskDialogContent = React.lazy(
+  () => import('./containers/TaskDialogContent'),
 );
 
 /**
@@ -16,7 +17,7 @@ function TaskDialog({ dialogName, payload: { taskId = null }, isOpen }) {
   return (
     <Dialog
       name={dialogName}
-      title={'New Task'}
+      title={intl.get('task.label.new_task')}
       isOpen={isOpen}
       autoFocus={true}
       canEscapeKeyClose={true}

src/containers/Projects/components/index.tsx

@@ -22,17 +22,17 @@ export const ActionsMenu = ({
     <MenuDivider />
     <MenuItem
       icon={<Icon icon="pen-18" />}
-      text={'Edit Project'}
+      text={intl.get('projects.action.edit_project')}
       onClick={safeCallback(onEdit, original)}
     />
     <MenuItem
       icon={<Icon icon="plus" />}
-      text={'New Task'}
+      text={intl.get('projects.action.new_task')}
       onClick={safeCallback(onNewTask, original)}
     />
     <MenuDivider />
     <MenuItem
-      text={'Delete Project'}
+      text={intl.get('projects.action.delete_project')}
       icon={<Icon icon="trash-16" iconSize={16} />}
       intent={Intent.DANGER}
       onClick={safeCallback(onDelete, original)}

src/lang/en/index.json

@@ -2044,5 +2044,20 @@
   "expense.entries.remove_row": "Remove line",
   "warehouse_transfer.entries.remove_row": "Remove line",
   "item.details.inactive": "Inactive",
-  "bill.validation.due_date": "{path} field must be later than {min}"
+  "bill.validation.due_date": "{path} field must be later than {min}",
+  "sidebar.projects": "Projects",
+  "projects.action.edit_project": "Edit Project",
+  "projects.action.new_task": "New Task",
+  "projects.action.delete_project": "Delete Project",
+  "projects.label.new_project": "New Project",
+  "projects.label.contact": "Contact",
+  "projects.label.project_name": "Project Name",
+  "projects.label.deadline": "Deadline",
+  "projects.label.calculator_expenses": "Calculator from tasks & estimated expenses",
+  "projects.label.cost_estimate": "Cost Estimate",
+  "task.label.new_task": "New Task",
+  "task.label.task_name": "Task Name",
+  "task.label.estimated_hours": "Task Name",
+  "task.label.charge": "Charge",
+  "task.label.estimated_amount": "Estimated Amount"
 }

src/routes/dashboard.js

@@ -974,7 +974,7 @@ export const getDashboardRoutes = () => [
     component: lazy(() =>
       import('../containers/Projects/containers/ProjectsList'),
     ),
-    pageTitle: 'Projects',
+    pageTitle: intl.get('sidebar.projects'),
   },
   // Homepage
   {