feat: project table.

src/containers/Projects/containers/ProjectFormDialog/ProjectForm.tsx

@@ -15,7 +15,7 @@ const defaultInitialValues = {
   contact: '',
   projectName: '',
   projectDeadline: moment(new Date()).format('YYYY-MM-DD'),
-  projectState: true,
+  projectState: false,
   projectCost: '',
 };
 

src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
+import { useFormikContext } from 'formik';
 
 import { Classes, Position, FormGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField } from 'formik';
@@ -14,6 +15,7 @@ import {
   FMoneyInputGroup,
   InputPrependText,
   FormattedMessage as T,
+  FieldRequiredHint,
   CustomerSelectField,
 } from 'components';
 import {
@@ -29,8 +31,12 @@ import { useProjectFormContext } from './ProjectFormProvider';
  * @returns
  */
 function ProjectFormFields() {
+  // project form dialog context.
   const { customers } = useProjectFormContext();
 
+  // Formik context.
+  const { values } = useFormikContext();
+
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------ Contact -----------*/}
@@ -38,6 +44,7 @@ function ProjectFormFields() {
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={intl.get('projects.dialog.contact')}
+            labelInfo={<FieldRequiredHint />}
             className={classNames('form-group--select-list', Classes.FILL)}
             intent={inputIntent({ error, touched })}
           >
@@ -93,7 +100,7 @@ function ProjectFormFields() {
         <ControlGroup>
           <InputPrependText text={'USD'} />
           <FMoneyInputGroup
-            // disabled={true}
+            disabled={values.projectState}
             name={'project_cost'}
             allowDecimals={true}
             allowNegativeValue={true}

src/containers/Projects/containers/ProjectFormDialog/index.tsx

@@ -12,7 +12,11 @@ const ProjectDialogContent = React.lazy(
  * Project form dialog.
  * @returns
  */
-function ProjectFormDialog({ dialogName, payload: { projectId = null }, isOpen }) {
+function ProjectFormDialog({
+  dialogName,
+  payload: { projectId = null },
+  isOpen,
+}) {
   return (
     <ProjectFormDialogRoot
       name={dialogName}
@@ -35,16 +39,14 @@ const ProjectFormDialogRoot = styled(Dialog)`
   .bp3-dialog-body {
     .bp3-form-group {
       margin-bottom: 15px;
-      margin-top: 15px;
 
       label.bp3-label {
         margin-bottom: 3px;
         font-size: 13px;
       }
     }
-
-    .bp3-dialog-footer {
-      padding-top: 10px;
-    }
+  }
+  .bp3-dialog-footer {
+    padding-top: 10px;
   }
 `;

src/containers/Projects/containers/ProjectsLanding/ProjectsActionsBar.tsx

@@ -79,7 +79,7 @@ function ProjectsActionsBar({
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="plus" />}
-          text={'New Project'}
+          text={<T id={'projects.label.new_project'} />}
           onClick={handleNewProjectBtnClick}
         />
         {/* AdvancedFilterPopover */}

src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx

@@ -20,18 +20,22 @@ const projects = [
     name: 'Maroon Bronze',
     deadline: '2022-06-08T22:00:00.000Z',
     display_name: 'Kyrie Rearden',
-    cost_estimate: '4000',
-    task_amount: '1000',
-    is_in_process: true,
+    cost_estimate: '40000',
+    task_amount: '10000',
+    is_process: true,
+    is_closed: false,
+    is_draft: false,
   },
   {
     id: 2,
     name: 'Project Sherwood',
     deadline: '2022-06-08T22:00:00.000Z',
     display_name: 'Ella-Grace Miller',
-    cost_estimate: '0',
-    task_amount: '1000',
-    is_in_process: true,
+    cost_estimate: '700',
+    task_amount: '300',
+    is_process: true,
+    is_closed: false,
+    is_draft: false,
   },
 ];
 
@@ -54,7 +58,8 @@ function ProjectsDataTable({
   // Handle cell click.
   const handleCellClick = ({ row: { original } }) => {
     return history.push(`/projects/${original?.id}/details`, {
-      name: original.name,
+      projectId: original.id,
+      projectName: original.name,
     });
   };
 
@@ -77,7 +82,8 @@ function ProjectsDataTable({
   // Handle view detail project.
   const handleViewDetailProject = (project) => {
     return history.push(`/projects/${project.id}/details`, {
-      name: project.name,
+      projectId: project.id,
+      projectName: project.name,
     });
   };
 
@@ -119,7 +125,7 @@ export default compose(
 const ProjectsTable = styled(DataTable)`
   .tbody {
     .tr .td {
-      padding: 0.8rem;
+      padding: 0.5rem 0.8rem;
     }
 
     .avatar.td {

src/containers/Projects/containers/ProjectsLanding/components.tsx

@@ -19,30 +19,36 @@ import { safeCallback, firstLettersArgs, calculateStatus } from 'utils';
 export function ProjectStatus({ project }) {
   return (
     <ProjectStatusRoot>
-      {project.task_amount}
       <ProjectProgressBar
         animate={false}
-        intent={Intent.NONE}
+        stripes={false}
+        // intent={Intent.PRIMARY}
         value={calculateStatus(project.task_amount, project.cost_estimate)}
       />
+      <ProjectStatusTaskAmount>{project.task_amount}</ProjectStatusTaskAmount>
     </ProjectStatusRoot>
   );
 }
 
 /**
- * project status accessor.
+ * status accessor.
  */
-export const ProjectStatusAccessor = (row) => {
+export const StatusAccessor = (project) => {
   return (
     <Choose>
-      <Choose.When condition={row.is_in_process}>
-        <ProjectStatus project={row} />
+      <Choose.When condition={project.is_process}>
+        <ProjectStatus project={project} />
       </Choose.When>
-      <Choose.Otherwise>
+      <Choose.When condition={project.is_closed}>
+        <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When condition={project.is_draft}>
         <Tag round={true} minimal={true}>
           <T id={'draft'} />
         </Tag>
-      </Choose.Otherwise>
+      </Choose.When>
     </Choose>
   );
 };
@@ -126,19 +132,18 @@ export const useProjectsListColumns = () => {
       },
       {
         id: 'name',
-        Header: 'Project Name',
+        Header: '',
         accessor: ProjectsAccessor,
-        width: 240,
+        width: 200,
         className: 'name',
         clickable: true,
       },
       {
         id: 'status',
-        Header: 'status',
-        accessor: ProjectStatusAccessor,
-        width: 80,
+        Header: '',
+        accessor: StatusAccessor,
+        width: 50,
         className: 'status',
-        clickable: true,
       },
     ],
     [],
@@ -150,10 +155,11 @@ const ProjectItemsWrap = styled.div``;
 const ProjectItemsHeader = styled.div`
   display: flex;
   align-items: baseline;
+  line-height: 1.3rem;
 `;
 
 const ProjectItemContactName = styled.div`
-  font-weight: 600;
+  font-weight: 500;
   padding-right: 4px;
 `;
 const ProjectItemProjectName = styled.div``;
@@ -162,23 +168,30 @@ const ProjectItemDescription = styled.div`
   display: inline-block;
   font-size: 13px;
   opacity: 0.75;
-  margin-top: 4px;
+  margin-top: 0.2rem;
+  line-height: 1;
 `;
 
 const ProjectStatusRoot = styled.div`
   display: flex;
   align-items: center;
-  flex-direction: row-reverse;
-  margin: 0 20px;
+  justify-content: flex-end;
+  /* margin-right: 0.8rem; */
+  /* flex-direction: row-reverse; */
+`;
+const ProjectStatusTaskAmount = styled.div`
+  text-align: right;
+  font-weight: 400;
+  line-height: 1.5rem;
+  margin-left: 20px;
 `;
 
 const ProjectProgressBar = styled(ProgressBar)`
   &.bp3-progress-bar {
-    margin-right: 20px;
+    display: block;
     flex-shrink: 0;
     height: 3px;
-    max-width: 130px;
-
+    max-width: 100px;
     &,
     .bp3-progress-meter {
       border-radius: 0;