fix: danger intent fields.

client/package.json

@@ -6,6 +6,7 @@
     "@babel/core": "7.8.4",
     "@blueprintjs/core": "^3.38.1",
     "@blueprintjs/datetime": "^3.15.2",
+    "@blueprintjs/popover2": "^0.11.1",
     "@blueprintjs/select": "^3.11.2",
     "@blueprintjs/table": "^3.8.3",
     "@blueprintjs/timezone": "^3.6.2",
@@ -135,6 +136,7 @@
     "@types/node": "^14.14.9",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.8",
     "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
     "compression-webpack-plugin": "^6.1.0",
     "http-proxy-middleware": "^1.0.0",

client/src/components/App.js

@@ -28,7 +28,7 @@ const queryConfig = {
 function GlobalFetchQuery({
   children
 }) {
-  window.localStorage.setItem('lang', 'ar-ly');
+  window.localStorage.setItem('lang', 'en');
   return children
 }
 

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js

@@ -25,7 +25,12 @@ function DecrementAdjustmentFields() {
               intent={inputIntent({ error, touched })}
               helperText={<ErrorMessage name="quantity_on_hand" />}
             >
-              <InputGroup disabled={true} medium={'true'} {...field} />
+              <InputGroup
+                disabled={true}
+                medium={'true'}
+                intent={inputIntent({ error, touched })}
+                {...field}
+              />
             </FormGroup>
           )}
         </FastField>
@@ -66,6 +71,7 @@ function DecrementAdjustmentFields() {
                     ),
                   );
                 }}
+                intent={inputIntent({ error, touched })}
               />
             </FormGroup>
           )}
@@ -104,6 +110,7 @@ function DecrementAdjustmentFields() {
                     ),
                   );
                 }}
+                intent={inputIntent({ error, touched })}
               />
             </FormGroup>
           )}

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js

@@ -21,7 +21,12 @@ export default function IncrementAdjustmentFields() {
               intent={inputIntent({ error, touched })}
               helperText={<ErrorMessage name="quantity_on_hand" />}
             >
-              <InputGroup disabled={true} medium={'true'} {...field} />
+              <InputGroup
+                disabled={true}
+                medium={'true'}
+                intent={inputIntent({ error, touched })}
+                {...field}
+              />
             </FormGroup>
           )}
         </FastField>
@@ -63,6 +68,7 @@ export default function IncrementAdjustmentFields() {
                     ),
                   );
                 }}
+                intent={inputIntent({ error, touched })}
               />
             </FormGroup>
           )}
@@ -87,6 +93,7 @@ export default function IncrementAdjustmentFields() {
                 onChange={(value) => {
                   setFieldValue('cost', value);
                 }}
+                intent={inputIntent({ error, touched })}
               />
             </FormGroup>
           )}
@@ -127,6 +134,7 @@ export default function IncrementAdjustmentFields() {
                     ),
                   );
                 }}
+                intent={inputIntent({ error, touched })}
               />
             </FormGroup>
           )}

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js

@@ -3,20 +3,18 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  date: Yup.date()
+  date: Yup.date().required().label(intl.get('date')),
-    .required()
-    .label(intl.get('date')),
   type: Yup.string().required(),
-  adjustment_account_id: Yup.string().required(),
+  adjustment_account_id: Yup.string()
+    .required()
+    .label(intl.get('adjustment_account')),
   item_id: Yup.number().required(),
   reason: Yup.string()
     .required()
     .min(3)
     .max(DATATYPES_LENGTH.TEXT)
     .label(intl.get('reason')),
-  quantity_on_hand: Yup.number()
+  quantity_on_hand: Yup.number().required().label(intl.get('qty')),
-    .required()
-    .label(intl.get('qty')),
   quantity: Yup.number().integer().min(1).required(),
   cost: Yup.number().when(['type'], {
     is: (type) => type === 'increment',

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js

@@ -38,7 +38,6 @@ export default function InventoryAdjustmentFormDialogFields() {
   const { accounts } = useInventoryAdjContext();
 
   // Intl context.
-  
 
   return (
     <div className={Classes.DIALOG_BODY}>
@@ -65,6 +64,7 @@ export default function InventoryAdjustmentFormDialogFields() {
                     position: Position.BOTTOM,
                     minimal: true,
                   }}
+                  intent={inputIntent({ error, touched })}
                   inputRef={(ref) => (dateFieldRef.current = ref)}
                 />
               </FormGroup>
@@ -103,6 +103,7 @@ export default function InventoryAdjustmentFormDialogFields() {
                   selectedItemProp={'value'}
                   textProp={'name'}
                   popoverProps={{ minimal: true }}
+                  intent={inputIntent({ error, touched })}
                 />
               </FormGroup>
             )}
@@ -129,6 +130,7 @@ export default function InventoryAdjustmentFormDialogFields() {
               }
               inputProps={{
                 placeholder: intl.get('select_adjustment_account'),
+                intent: inputIntent({ error, touched }),
               }}
             />
           </FormGroup>
@@ -144,7 +146,7 @@ export default function InventoryAdjustmentFormDialogFields() {
             helperText={<ErrorMessage name="reference_no" />}
             className={'form-group--reference-no'}
           >
-            <InputGroup {...field} />
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
           </FormGroup>
         )}
       </FastField>
@@ -159,7 +161,12 @@ export default function InventoryAdjustmentFormDialogFields() {
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'reason'} />}
           >
-            <TextArea growVertically={true} large={true} {...field} />
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
           </FormGroup>
         )}
       </FastField>

client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFields.js

@@ -29,6 +29,7 @@ export default function ItemCategoryFormFields() {
             <InputGroup
               medium={true}
               inputRef={(ref) => (categoryNameFieldRef.current = ref)}
+              intent={inputIntent({ error, touched })}
               {...field}
             />
           </FormGroup>
@@ -45,7 +46,12 @@ export default function ItemCategoryFormFields() {
             helperText={<ErrorMessage name="description" />}
             inline={true}
           >
-            <TextArea growVertically={true} large={true} {...field} />
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
           </FormGroup>
         )}
       </FastField>

client/src/containers/Items/ItemFormPrimarySection.js

@@ -109,6 +109,7 @@ export default function ItemFormPrimarySection() {
                 <InputGroup
                   medium={true}
                   {...field}
+                  intent={inputIntent({ error, touched })}
                   inputRef={(ref) => (nameFieldRef.current = ref)}
                 />
               </FormGroup>
@@ -125,7 +126,7 @@ export default function ItemFormPrimarySection() {
                 helperText={<ErrorMessage name={'code'} />}
                 inline={true}
               >
-                <InputGroup medium={true} {...field} />
+                <InputGroup medium={true} intent={inputIntent({ error, touched })} {...field} />
               </FormGroup>
             )}
           </FastField>

client/src/containers/Items/ItemsActionsBar.js

@@ -11,7 +11,9 @@ import {
   Classes,
   Intent,
   Switch,
+  Alignment,
 } from '@blueprintjs/core';
+import { Tooltip2 } from '@blueprintjs/popover2';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -19,6 +21,7 @@ import Icon from 'components/Icon';
 import { If, DashboardActionViewsList } from 'components';
 
 import { useItemsListContext } from './ItemsListProvider';
+import { useRefreshItems } from 'hooks/query/items';
 
 import withItems from 'containers/Items/withItems';
 import withItemsActions from './withItemsActions';
@@ -43,7 +46,8 @@ function ItemsActionsBar({
   // Items list context.
   const { itemsViews } = useItemsListContext();
 
-  // React intl.
+  // Items refresh action.
+  const { refresh } = useRefreshItems();
 
   // History context.
   const history = useHistory();
@@ -69,6 +73,10 @@ function ItemsActionsBar({
     setItemsTableState({ inactiveMode: checked });
   };
 
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -125,6 +133,14 @@ function ItemsActionsBar({
           onChange={handleInactiveSwitchChange}
         />
       </NavbarGroup>
+
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }

client/src/hooks/query/items.js

@@ -142,6 +142,16 @@ export function useItems(query, props) {
   );
 }
 
+export function useRefreshItems() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.ITEMS);
+    },
+  }
+}
+
 /**
  * Retrieve details of the given item.
  * @param {number} id - Item id.

client/src/style/App.scss

@@ -5,6 +5,7 @@
 // Blueprint framework.
 @import '@blueprintjs/core/src/blueprint.scss';
 @import '@blueprintjs/datetime/src/blueprint-datetime.scss';
+@import "@blueprintjs/popover2";
 
 @import 'basscss';
 
@@ -325,4 +326,14 @@ html[lang^="ar"] {
 }
 .sidebar-overlay-backdrop{
   background-color: rgba(0, 10, 30, 0.15);
+}
+
+
+.bp3-popover2{
+  box-shadow: 0 0 0;
+}
+
+
+.bp3-tooltip2 .bp3-popover2-arrow:before{
+  box-shadow: 0 0 0;
 }

client/src/style/objects/form.scss

@@ -1,4 +1,3 @@
-
 .form {
   &__floating-footer {
     position: fixed;
@@ -14,7 +13,7 @@
   }
 }
 
-// Form
+// Form form.
 label.bp3-label {
   color: #353535;
   font-weight: 400;
@@ -31,6 +30,7 @@ label.bp3-label {
   }
 }
 
+// Form input.
 .#{$ns}-input {
   box-shadow: 0 0 0 transparent;
   border: 1px solid #ced4da;
@@ -44,12 +44,13 @@ label.bp3-label {
     box-shadow: 0 0 0 1px #116cd0;
     border-color: #116cd0;
   }
+
   &.bp3-disabled,
   &:disabled {
     background: #e9ecef;
   }
 
-  .bp3-form-group.bp3-intent-danger > & {
+  .bp3-input-group.bp3-intent-danger & {
     box-shadow: 0 0 0 transparent;
     border-color: #db3737;
 
@@ -92,6 +93,7 @@ label.bp3-label {
     box-shadow: none;
     border: 1px solid #ced4da;
   }
+
   &:focus {
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
     border-color: #80bdff;
@@ -128,8 +130,9 @@ label.bp3-label {
   .bp3-input-group {
     flex: 1 1 auto;
   }
+
   .bp3-control-group {
-    > .input-group-prepend:first-child .input-group-text {
+    >.input-group-prepend:first-child .input-group-text {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
@@ -141,7 +144,9 @@ label.bp3-label {
     display: none;
   }
 }
+
 .bp3-datepicker-caption select {
+
   &,
   &:hover {
     border-color: transparent;
@@ -180,18 +185,20 @@ label.bp3-label {
     padding-right: 25px;
     justify-content: start;
 
-    &:not([class*="bp3-intent-"]):not(.bp3-minimal){
+    &:not([class*="bp3-intent-"]):not(.bp3-minimal) {
+
       &,
       &:hover {
         outline: none;
         box-shadow: 0 0 0 transparent;
         border: 1px solid #ced4da;
-  
+
         &:not(:disabled) {
           background: #fff;
         }
       }
-      &:focus{
+
+      &:focus {
         box-shadow: 0 0 0 1px #116cd0;
         border-color: #116cd0;
       }
@@ -202,12 +209,12 @@ label.bp3-label {
     width: 100%;
   }
 
-  .bp3-popover-target.bp3-popover-open{
+  .bp3-popover-target.bp3-popover-open {
 
     .#{$ns}-button {
 
       &:not([class*="bp3-intent-"]):not(.bp3-minimal):not(:disabled),
-      &:not([class*="bp3-intent-"]):not(.bp3-minimal):hover:not(:disabled){
+      &:not([class*="bp3-intent-"]):not(.bp3-minimal):hover:not(:disabled) {
         background-color: #fafafa;
       }
     }
@@ -220,7 +227,7 @@ label.bp3-label {
       left: 0;
       margin: 7px;
 
-      + .bp3-button-text {
+      +.bp3-button-text {
         padding-left: 20px;
       }
     }
@@ -252,25 +259,25 @@ label.bp3-label {
 }
 
 @mixin control-checked-colors($selector: ':checked') {
-  input#{$selector} ~ .#{$ns}-control-indicator {
+  input#{$selector}~.#{$ns}-control-indicator {
     box-shadow: none;
     background-color: $control-checked-background-color;
     color: $white;
   }
 
-  &:hover input#{$selector} ~ .#{$ns}-control-indicator {
+  &:hover input#{$selector}~.#{$ns}-control-indicator {
     box-shadow: none;
     background-color: $control-checked-background-color-hover;
     border-color: $control-checked-background-color-active;
   }
 
-  input:not(:disabled):active#{$selector} ~ .#{$ns}-control-indicator {
+  input:not(:disabled):active#{$selector}~.#{$ns}-control-indicator {
     box-shadow: none;
     background-color: $control-checked-background-color-active;
     border-color: $control-checked-background-color-active;
   }
 
-  input:disabled#{$selector} ~ .#{$ns}-control-indicator {
+  input:disabled#{$selector}~.#{$ns}-control-indicator {
     box-shadow: none;
     background: rgba($control-checked-background-color, 0.5);
   }
@@ -278,20 +285,23 @@ label.bp3-label {
 
 ///@extend
 .#{$ns}-control {
-  input:checked ~ .#{$ns}-control-indicator {
+  input:checked~.#{$ns}-control-indicator {
     box-shadow: none;
     background-color: transparent;
     background-image: none;
   }
-  &:hover input:checked ~ .#{$ns}-control-indicator {
+
+  &:hover input:checked~.#{$ns}-control-indicator {
     box-shadow: none;
     background-color: transparent;
   }
-  input:not(:disabled):active:checked ~ .#{$ns}-control-indicator {
+
+  input:not(:disabled):active:checked~.#{$ns}-control-indicator {
     box-shadow: none;
     background: transparent;
   }
-  input:disabled:checked ~ .#{$ns}-control-indicator {
+
+  input:disabled:checked~.#{$ns}-control-indicator {
     box-shadow: none;
     background: transparent;
   }
@@ -334,7 +344,7 @@ label.bp3-label {
     background-color: transparent;
   }
 
-  input:not(:disabled):active ~ .#{$ns}-control-indicator {
+  input:not(:disabled):active~.#{$ns}-control-indicator {
     box-shadow: 0 0 0 transparent;
     background: transparent;
   }
@@ -359,7 +369,7 @@ label.bp3-label {
     Styleguide checkbox
   */
   &.#{$ns}-checkbox {
-    &:hover input:indeterminate ~ .#{$ns}-control-indicator {
+    &:hover input:indeterminate~.#{$ns}-control-indicator {
       // box-shadow: 0 0 0 transparent;
     }
 
@@ -371,6 +381,7 @@ label.bp3-label {
         width: 100%;
       }
     }
+
     @include control-checked-colors(':checked');
 
     // make :indeterminate look like :checked _for Checkbox only_
@@ -381,12 +392,14 @@ label.bp3-label {
       border-radius: $pt-border-radius;
       background-color: #fff;
     }
-    input:checked ~ .#{$ns}-control-indicator {
+
+    input:checked~.#{$ns}-control-indicator {
       background-image: escape-svg($form-check-input-checked-bg-image);
       border-color: $form-check-input-checked-bg-color;
       background-color: $form-check-input-checked-bg-color;
     }
-    input:indeterminate ~ .#{$ns}-control-indicator {
+
+    input:indeterminate~.#{$ns}-control-indicator {
       background-image: escape-svg($form-check-input-indeterminate-bg-image);
       border-color: $form-check-input-checked-bg-color;
       background-color: $form-check-input-checked-bg-color;
@@ -422,29 +435,27 @@ label.bp3-label {
       }
     }
 
-    input:checked ~ .#{$ns}-control-indicator {
+    input:checked~.#{$ns}-control-indicator {
       border-color: $form-check-input-checked-bg-color;
 
       &::before {
-        background-image: radial-gradient(
+        background-image: radial-gradient($form-check-input-checked-bg-color 40%,
-          $form-check-input-checked-bg-color 40%,
+            transparent 40%);
-          transparent 40%
-        );
       }
     }
 
-    input:checked:disabled ~ .#{$ns}-control-indicator::before {
+    input:checked:disabled~.#{$ns}-control-indicator::before {
       opacity: 0.5;
     }
 
-    input:focus ~ .#{$ns}-control-indicator {
+    input:focus~.#{$ns}-control-indicator {
       -moz-outline-radius: $control-indicator-size;
     }
   }
 }
 
 .bp3-menu-item::before,
-.bp3-menu-item > .bp3-icon {
+.bp3-menu-item>.bp3-icon {
   color: #4b5d6b;
 }
 
@@ -476,4 +487,4 @@ label.bp3-label {
       }
     }
   }
-}
+}

client/src/style/pages/Dashboard/Dashboard.scss

@@ -181,7 +181,6 @@ $dashboard-views-bar-height: 45px;
         }
         .#{$ns}-icon {
           color: #32304a;
-          margin-right: 7px;
         }
         &.#{$ns}-minimal.#{$ns}-intent-danger {
           color: #c23030;