feat(branche): add crud branches.

src/containers/Preferences/Branches/BranchesActions.js

@@ -20,7 +20,7 @@ function BranchesActions({
         onClick={handleClickNewBranche}
         intent={Intent.PRIMARY}
       >
-        <T id={'branches.label.new_branche'} />
+        <T id={'branches.label.new_branch'} />
       </Button>
     </React.Fragment>
   );

src/containers/Preferences/Branches/BranchesAlerts.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const BranchDeleteAlert = React.lazy(() =>
+  import('../../Alerts/Branches/BranchDeleteAlert'),
+);
+
+export default [{ name: 'branch-delete', component: BranchDeleteAlert }];

src/containers/Preferences/Branches/BranchesDataTable.js

@@ -4,8 +4,11 @@ import styled from 'styled-components';
 import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import { useBranchesTableColumns, ActionsMenu } from './components';
+import { useBranchesContext } from './BranchesProvider';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
 import { compose } from 'utils';
 
 /**
@@ -14,23 +17,42 @@ import { compose } from 'utils';
 function BranchesDataTable({
   // #withDialogAction
   openDialog,
+
+  // #withAlertActions
+  openAlert,
 }) {
   // Table columns.
   const columns = useBranchesTableColumns();
 
+  const { branches, isBranchesLoading, isBranchesFetching } =
+    useBranchesContext();
+
+  const handleEditBranch = ({ id }) => {
+    openDialog('branch-form', { branchId: id, action: 'edit' });
+  };
+
+  const handleDeleteBranch = ({ id }) => {
+    openAlert('branch-delete', { branchId: id });
+  };
+
   return (
     <BranchesTable
       columns={columns}
-      data={[]}
-      // loading={}
-      // progressBarLoading={}
+      data={branches}
+      loading={isBranchesLoading}
+      headerLoading={isBranchesLoading}
+      progressBarLoading={isBranchesFetching}
       TableLoadingRenderer={TableSkeletonRows}
+      noInitialFetch={true}
       ContextMenu={ActionsMenu}
-      payload={{}}
+      payload={{
+        onEdit: handleEditBranch,
+        onDelete: handleDeleteBranch,
+      }}
     />
   );
 }
 
-export default compose(withDialogActions)(BranchesDataTable);
+export default compose(withDialogActions, withAlertActions)(BranchesDataTable);
 
 const BranchesTable = styled(DataTable)``;

src/containers/Preferences/Branches/BranchesProvider.js

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { Card } from 'components';
+import { useBranches } from 'hooks/query';
+import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const BranchesContext = React.createContext();
 
@@ -10,8 +12,19 @@ const BranchesContext = React.createContext();
  * Branches data provider.
  */
 function BranchesProvider({ ...props }) {
+  // Fetches the branches list.
+  const {
+    isLoading: isBranchesLoading,
+    isFetching: isBranchesFetching,
+    data: branches,
+  } = useBranches();
+
   // Provider state.
-  const provider = {};
+  const provider = {
+    branches,
+    isBranchesLoading,
+    isBranchesFetching,
+  };
 
   return (
     <div

src/containers/Preferences/Branches/components.js

@@ -1,15 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import {
-  Intent,
-  Button,
-  Popover,
-  Menu,
-  MenuDivider,
-  Tag,
-  MenuItem,
-  Position,
-} from '@blueprintjs/core';
+import { Intent, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
 
 import { safeCallback } from 'utils';
 import { Icon } from 'components';
@@ -47,14 +38,23 @@ export function useBranchesTableColumns() {
   return React.useMemo(
     () => [
       {
-        id: 'branch_name',
+        id: 'name',
         Header: intl.get('branches.column.branch_name'),
-        accessor: 'branch_name',
-        className: 'branch_name',
+        accessor: 'name',
+        className: 'name',
         width: '120',
         disableSortBy: true,
         textOverview: true,
       },
+      {
+        id: 'code',
+        Header: intl.get('branches.column.code'),
+        accessor: 'code',
+        className: 'code',
+        width: '100',
+        disableSortBy: true,
+        textOverview: true,
+      },
       {
         Header: intl.get('branches.column.address'),
         accessor: 'address',