Fix : Preferences

client/src/containers/Preferences/Currencies/CurrenciesDataTable.js

@@ -0,0 +1,154 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  Position,
+} from '@blueprintjs/core';
+import { withRouter } from 'react-router';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { compose } from 'utils';
+import { useUpdateEffect } from 'hooks';
+import LoadingIndicator from 'components/LoadingIndicator';
+import { DataTable, Icon } from 'components';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withCurrencies from 'containers/Currencies/withCurrencies';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+function CurrenciesDataTable({
+  // #withCurrencies
+  currenciesList,
+  currenciesLoading,
+
+  loading,
+  onFetchData,
+  onSelectedRowsChange,
+  onDeleteCurrency,
+
+  // #withDialog.
+  openDialog,
+}) {
+  const [initialMount, setInitialMount] = useState(false);
+
+  const { formatMessage } = useIntl();
+
+  useUpdateEffect(() => {
+    if (!currenciesLoading) {
+      setInitialMount(true);
+    }
+  }, [currenciesLoading, setInitialMount]);
+
+  const handleEditCurrency = useCallback(
+    (currency) => {
+      openDialog('currency-form', {
+        action: 'edit',
+        currencyCode: currency.currency_code,
+      });
+    },
+    [openDialog],
+  );
+
+  const actionMenuList = useCallback(
+    (currency) => (
+      <Menu>
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={formatMessage({ id: 'edit_currency' })}
+          onClick={() => handleEditCurrency(currency)}
+        />
+
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={formatMessage({ id: 'delete_currency' })}
+          onClick={() => onDeleteCurrency(currency)}
+          intent={Intent.DANGER}
+        />
+      </Menu>
+    ),
+    [handleEditCurrency, onDeleteCurrency, formatMessage],
+  );
+
+  const onRowContextMenu = useCallback(
+    (cell) => {
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'currency_name' }),
+        accessor: 'currency_name',
+        width: 150,
+      },
+      {
+        Header: formatMessage({ id: 'currency_code' }),
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 120,
+      },
+      {
+        Header: 'Currency sign',
+        width: 120,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_BOTTOM}
+          >
+            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
+
+  const handleDataTableFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
+
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
+
+  return (
+    <LoadingIndicator loading={loading} mount={false}>
+      <DataTable
+        columns={columns}
+        data={currenciesList}
+        onFetchData={handleDataTableFetchData}
+        noInitialFetch={true}
+        loading={currenciesLoading && !initialMount}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={onRowContextMenu}
+      />
+    </LoadingIndicator>
+  );
+}
+
+export default compose(
+  withRouter,
+  withDashboardActions,
+  withDialogActions,
+  withCurrencies(({ currenciesList }) => ({
+    currenciesList,
+  })),
+)(CurrenciesDataTable);

client/src/containers/Preferences/Currencies/CurrenciesList.js

@@ -1,13 +1,5 @@
 import React, { useCallback, useState, useMemo, useEffect } from 'react';
-import {
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  Position,
-  Alert,
-  Intent,
-} from '@blueprintjs/core';
+import { Alert, Intent } from '@blueprintjs/core';
 import { useQuery, queryCache } from 'react-query';
 import {
   FormattedMessage as T,
@@ -15,13 +7,12 @@ import {
   useIntl,
 } from 'react-intl';
 
-import Icon from 'components/Icon';
-import LoadingIndicator from 'components/LoadingIndicator';
-import DataTable from 'components/DataTable';
+import CurrenciesDataTable from './CurrenciesDataTable';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import AppToaster from 'components/AppToaster';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withCurrencies from 'containers/Currencies/withCurrencies';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
@@ -41,41 +32,34 @@ function CurrenciesList({
 
   // #withDashboardActions
   changePreferencesPageTitle,
-
-  // #ownProps
-  onFetchData,
 }) {
   const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
   const { formatMessage } = useIntl();
 
-  const fetchCurrencies = useQuery('currencies-table',
+  const fetchCurrencies = useQuery(
+    'currencies-table',
     () => requestFetchCurrencies(),
     { enabled: true },
   );
 
-
-
   useEffect(() => {
     changePreferencesPageTitle(formatMessage({ id: 'currencies' }));
   }, [changePreferencesPageTitle, formatMessage]);
 
-  const handleEditCurrency = useCallback(
-    (currency) => {
-      openDialog('currency-form', {
-        action: 'edit',
-        currencyCode: currency.currency_code,
-      });
-    },
-    [openDialog],
-  );
+  const handleEditCurrency = useCallback(() => {}, []);
 
-  const onDeleteCurrency = useCallback((currency) => {
+  // Handle click and cancel/confirm currency delete
+  const handleDeleteCurrency = useCallback((currency) => {
     setDeleteCurrencyState(currency);
   }, []);
+
+  // handle cancel delete currency alert.
   const handleCancelCurrencyDelete = () => {
     setDeleteCurrencyState(false);
   };
 
+  // Handle confirm Currency delete
   const handleConfirmCurrencyDelete = useCallback(
     (refetch) => {
       requestDeleteCurrency(deleteCurrencyState.currency_code)
@@ -95,95 +79,44 @@ function CurrenciesList({
     [deleteCurrencyState, requestDeleteCurrency, formatMessage],
   );
 
-  const actionMenuList = useCallback(
-    (currency) => (
-      <Menu>
-        <MenuItem
-          text={<T id={'edit_currency'} />}
-          onClick={() => handleEditCurrency(currency)}
-        />
-
-        <MenuItem
-          text={<T id={'delete_currency'} />}
-          onClick={() => onDeleteCurrency(currency)}
-          intent={Intent.DANGER}
-        />
-      </Menu>
-    ),
-    [handleEditCurrency, onDeleteCurrency],
+  // Handle selected rows change.
+  const handleSelectedRowsChange = useCallback(
+    (accounts) => {
+      setSelectedRows(accounts);
+    },
+    [setSelectedRows],
   );
 
-  const columns = useMemo(
-    () => [
-      {
-        Header: formatMessage({ id: 'currency_name' }),
-        accessor: 'currency_name',
-        width: 150,
-      },
-      {
-        Header: formatMessage({ id: 'currency_code' }),
-        accessor: 'currency_code',
-        className: 'currency_code',
-        width: 120,
-      },
-      {
-        Header: 'Currency sign',
-        width: 120,
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_TOP}
-          >
-            <Button icon={<Icon icon="ellipsis-h" />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handleDataTableFetchData = useCallback(() => {
-    // fetchCurrencies.refetch();
-  }, [fetchCurrencies]);
-
   return (
-    <LoadingIndicator loading={fetchCurrencies.isFetching}>
-      <DataTable
-        columns={columns}
-        data={currenciesList}
-        onFetchData={handleDataTableFetchData}
-        loading={currenciesLoading}
-      />
-      <Alert
-        cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={<T id={'delete'} />}
-        icon="trash"
-        intent={Intent.DANGER}
-        isOpen={deleteCurrencyState}
-        onCancel={handleCancelCurrencyDelete}
-        onConfirm={handleConfirmCurrencyDelete}
-      >
-        <p>
-          <FormattedHTMLMessage
-            id={'once_delete_this_currency_you_will_able_to_restore_it'}
-          />
-        </p>
-      </Alert>
-    </LoadingIndicator>
+    <DashboardInsider loading={fetchCurrencies.isFetching}>
+      <DashboardPageContent>
+        <CurrenciesDataTable
+          onDeleteCurrency={handleDeleteCurrency}
+          onEditCurrency={handleEditCurrency}
+          onSelectedRowsChange={handleSelectedRowsChange}
+        />
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon="trash"
+          intent={Intent.DANGER}
+          isOpen={deleteCurrencyState}
+          onCancel={handleCancelCurrencyDelete}
+          onConfirm={handleConfirmCurrencyDelete}
+        >
+          <p>
+            <FormattedHTMLMessage
+              id={'once_delete_this_currency_you_will_able_to_restore_it'}
+            />
+          </p>
+        </Alert>
+      </DashboardPageContent>
+    </DashboardInsider>
   );
 }
 
 export default compose(
   withDashboardActions,
-  withCurrencies(({ currenciesList }) => ({
-    currenciesList,
-  })),
   withCurrenciesActions,
   withDialogActions,
 )(CurrenciesList);

client/src/containers/Preferences/General/General.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { useFormik } from 'formik';
+import { mapKeys, snakeCase } from 'lodash';
 import * as Yup from 'yup';
 import {
   Button,
@@ -9,19 +10,30 @@ import {
   MenuItem,
   Classes,
   Spinner,
+  Position,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { useQuery, queryCache } from 'react-query';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import { DateInput } from '@blueprintjs/datetime';
 import moment from 'moment';
+import { useHistory } from 'react-router-dom';
 
-import { compose, optionsMapToArray } from 'utils';
+import {
+  compose,
+  optionsMapToArray,
+  tansformDateValue,
+  momentFormatter,
+} from 'utils';
 
-import ErrorMessage from 'components/ErrorMessage';
-import AppToaster from 'components/AppToaster';
-import { ListSelect } from 'components';
-import { If } from 'components';
+import {
+  If,
+  FieldRequiredHint,
+  ListSelect,
+  ErrorMessage,
+  AppToaster,
+} from 'components';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -40,14 +52,11 @@ function GeneralPreferences({
 }) {
   const { formatMessage } = useIntl();
   const [selectedItems, setSelectedItems] = useState({});
+  const history = useHistory();
 
-  const fetchHook = useQuery(
-    ['settings'],
-    () => {
-      requestFetchOptions();
-    },
-    { manual: true },
-  );
+  const fetchHook = useQuery(['settings'], () => {
+    requestFetchOptions();
+  });
 
   useEffect(() => {
     changePreferencesPageTitle(formatMessage({ id: 'general' }));
@@ -193,16 +202,21 @@ function GeneralPreferences({
     name: Yup.string()
       .required()
       .label(formatMessage({ id: 'organization_name_' })),
+    financial_date_start: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'date_start_' })),
     industry: Yup.string()
       .required()
       .label(formatMessage({ id: 'organization_industry_' })),
     location: Yup.string()
       .required()
       .label(formatMessage({ id: 'location' })),
-    base_currency: Yup.string().required(formatMessage({ id: 'required' })),
-    fiscal_year: Yup.string()
+    base_currency: Yup.string()
       .required()
       .label(formatMessage({ id: 'base_currency_' })),
+    fiscal_year: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'fiscal_year_' })),
     language: Yup.string()
       .required()
       .label(formatMessage({ id: 'language' })),
@@ -214,6 +228,12 @@ function GeneralPreferences({
       .label(formatMessage({ id: 'date_format_' })),
   });
 
+  function snakeCaseChange(data) {
+    return mapKeys(data, (value, key) => snakeCase(key));
+  }
+
+  const initialValues = snakeCaseChange(organizationSettings);
+
   const {
     values,
     errors,
@@ -226,7 +246,7 @@ function GeneralPreferences({
   } = useFormik({
     enableReinitialize: true,
     initialValues: {
-      ...organizationSettings,
+      ...initialValues,
     },
     validationSchema,
     onSubmit: (values, { setSubmitting }) => {
@@ -264,6 +284,13 @@ function GeneralPreferences({
     />
   );
 
+  const handleDateChange = useCallback(
+    (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue('financial_date_start', formatted);
+    },
+    [setFieldValue],
+  );
   const date_format = (item, { handleClick }) => (
     <MenuItem
       key={item.id}
@@ -300,6 +327,11 @@ function GeneralPreferences({
     },
     [setFieldValue],
   );
+
+  const handleClose = () => {
+    history.goBack();
+  };
+
   return (
     <div
       className={classNames({
@@ -310,6 +342,7 @@ function GeneralPreferences({
       <form onSubmit={handleSubmit}>
         <FormGroup
           label={<T id={'organization_name'} />}
+          labelInfo={<FieldRequiredHint />}
           inline={true}
           intent={errors.name && touched.name && Intent.DANGER}
           helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
@@ -321,6 +354,30 @@ function GeneralPreferences({
             {...getFieldProps('name')}
           />
         </FormGroup>
+        <FormGroup
+          label={<T id={'financial_starting_date'} />}
+          labelInfo={<FieldRequiredHint />}
+          inline={true}
+          intent={
+            errors.financial_date_start &&
+            touched.financial_date_start &&
+            Intent.DANGER
+          }
+          helperText={
+            <ErrorMessage
+              name="financial_date_start"
+              {...{ errors, touched }}
+            />
+          }
+          className={classNames('form-group--select-list', Classes.FILL)}
+        >
+          <DateInput
+            {...momentFormatter('MMMM Do YYYY')}
+            value={tansformDateValue(values.financial_date_start)}
+            onChange={handleDateChange}
+            popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          />
+        </FormGroup>
 
         <FormGroup
           label={<T id={'organization_industry'} />}
@@ -362,6 +419,7 @@ function GeneralPreferences({
 
         <FormGroup
           label={<T id={'base_currency'} />}
+          labelInfo={<FieldRequiredHint />}
           className={classNames(
             'form-group--base-currency',
             'form-group--select-list',
@@ -392,6 +450,7 @@ function GeneralPreferences({
 
         <FormGroup
           label={<T id={'fiscal_year'} />}
+          labelInfo={<FieldRequiredHint />}
           className={classNames(
             'form-group--fiscal-year',
             'form-group--select-list',
@@ -419,6 +478,7 @@ function GeneralPreferences({
 
         <FormGroup
           label={<T id={'language'} />}
+          labelInfo={<FieldRequiredHint />}
           inline={true}
           className={classNames(
             'form-group--language',
@@ -443,6 +503,7 @@ function GeneralPreferences({
         </FormGroup>
         <FormGroup
           label={<T id={'time_zone'} />}
+          labelInfo={<FieldRequiredHint />}
           inline={true}
           className={classNames(
             'form-group--time-zone',
@@ -463,6 +524,7 @@ function GeneralPreferences({
         </FormGroup>
         <FormGroup
           label={<T id={'date_format'} />}
+          labelInfo={<FieldRequiredHint />}
           inline={true}
           className={classNames(
             'form-group--language',
@@ -497,7 +559,7 @@ function GeneralPreferences({
           >
             <T id={'save'} />
           </Button>
-          <Button onClick={'handleClose'}>
+          <Button onClick={handleClose}>
             <T id={'close'} />
           </Button>
         </div>
@@ -512,7 +574,7 @@ function GeneralPreferences({
 }
 
 export default compose(
-  withSettings,
+  withSettings(({ organizationSettings }) => ({ organizationSettings })),
   withSettingsActions,
   withDashboardActions,
 )(GeneralPreferences);

client/src/containers/Preferences/Users/UsersDataTable.js

@@ -0,0 +1,185 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuDivider,
+  Tag,
+  MenuItem,
+  Position,
+} from '@blueprintjs/core';
+import { withRouter } from 'react-router';
+import { snakeCase } from 'lodash';
+
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
+import { compose } from 'utils';
+import LoadingIndicator from 'components/LoadingIndicator';
+import { DataTable, Icon, If, AppToaster } from 'components';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withUsers from 'containers/Users/withUsers';
+
+function UsersDataTable({
+  // #withDialogActions
+  openDialog,
+
+  // #withUsers
+  usersList,
+  usersLoading,
+
+  // #ownProps
+  loading,
+  onFetchData,
+  onInactiveUser,
+  onDeleteUser,
+  onSelectedRowsChange,
+}) {
+  const [initialMount, setInitialMount] = useState(false);
+  const { formatMessage } = useIntl();
+
+  const onEditUser = useCallback(
+    (user) => () => {
+      const form = Object.keys(user).reduce((obj, key) => {
+        const camelKey = snakeCase(key);
+        obj[camelKey] = user[key];
+        return obj;
+      }, {});
+
+      openDialog('userList-form', { action: 'edit', user: form });
+    },
+    [openDialog],
+  );
+
+  const actionMenuList = useCallback(
+    (user) => (
+      <Menu>
+        <If condition={user.invite_accepted_at}>
+          <MenuItem
+            icon={<Icon icon="pen-18" />}
+            text={formatMessage({ id: 'edit_user' })}
+            onClick={onEditUser(user)}
+          />
+          <MenuDivider />
+
+          <MenuItem
+            text={formatMessage({ id: 'inactivate_user' })}
+            onClick={() => onInactiveUser(user)}
+          />
+        </If>
+
+        <MenuItem
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={formatMessage({ id: 'delete_user' })}
+          onClick={() => onDeleteUser(user)}
+          intent={Intent.DANGER}
+        />
+      </Menu>
+    ),
+    [onInactiveUser, onDeleteUser, onEditUser],
+  );
+  const onRowContextMenu = useCallback(
+    (cell) => {
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'full_name',
+        Header: formatMessage({ id: 'full_name' }),
+        accessor: 'full_name',
+        width: 150,
+      },
+      {
+        id: 'email',
+        Header: formatMessage({ id: 'email' }),
+        accessor: 'email',
+        width: 150,
+      },
+      {
+        id: 'phone_number',
+        Header: formatMessage({ id: 'phone_number' }),
+        accessor: 'phone_number',
+        width: 120,
+      },
+      {
+        id: 'status',
+        Header: 'Status',
+        accessor: (user) =>
+          !user.invite_accepted_at ? (
+            <Tag minimal={true}>
+              <T id={'inviting'} />
+            </Tag>
+          ) : user.active ? (
+            <Tag intent={Intent.SUCCESS} minimal={true}>
+              <T id={'activate'} />
+            </Tag>
+          ) : (
+            <Tag intent={Intent.WARNING} minimal={true}>
+              <T id={'inactivate'} />
+            </Tag>
+          ),
+        width: 80,
+        className: 'status',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_BOTTOM}
+          >
+            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
+
+  const handelDataTableFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
+
+  return (
+    <LoadingIndicator loading={loading} mount={false}>
+      <DataTable
+        columns={columns}
+        data={usersList}
+        onFetchData={handelDataTableFetchData}
+        loading={usersLoading && !initialMount}
+        manualSortBy={true}
+        noInitialFetch={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        rowContextMenu={onRowContextMenu}
+      />
+    </LoadingIndicator>
+  );
+}
+
+export default compose(
+  withRouter,
+  withDialogActions,
+  withUsers(({ usersList, usersLoading }) => ({ usersList, usersLoading })),
+)(UsersDataTable);

client/src/containers/Preferences/Users/UsersList.js

@@ -1,41 +1,31 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { queryCache, useQuery } from 'react-query';
-import DataTable from 'components/DataTable';
-import {
-  Alert,
-  Popover,
-  Button,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-  Intent,
-  Tag,
-} from '@blueprintjs/core';
-import { snakeCase } from 'lodash';
+import { Alert, Intent } from '@blueprintjs/core';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withUsers from 'containers/Users/withUsers';
+import UsersDataTable from './UsersDataTable';
+import withUsersActions from 'containers/Users/withUsersActions';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
-
-import Icon from 'components/Icon';
-import LoadingIndicator from 'components/LoadingIndicator';
-import { If } from 'components';
+import { snakeCase } from 'lodash';
 
 import AppToaster from 'components/AppToaster';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withUsers from 'containers/Users/withUsers';
-import withUsersActions from 'containers/Users/withUsersActions';
-
 import { compose } from 'utils';
 
-
 function UsersListPreferences({
   // #withDialog
   openDialog,
+
+  // #withDashboardActions
   changePreferencesPageTitle,
 
   // #withUsers
@@ -51,15 +41,18 @@ function UsersListPreferences({
 }) {
   const [deleteUserState, setDeleteUserState] = useState(false);
   const [inactiveUserState, setInactiveUserState] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+
   const { formatMessage } = useIntl();
+
   const fetchUsers = useQuery('users-table', () => requestFetchUsers());
 
   useEffect(() => {
     changePreferencesPageTitle(formatMessage({ id: 'users' }));
   }, [changePreferencesPageTitle, formatMessage]);
 
-
-  const onInactiveUser = useCallback((user) => {
+  // Handle cancel/confirm user inactive.
+  const handleInactiveUser = useCallback((user) => {
     setInactiveUserState(user);
   }, []);
 
@@ -86,26 +79,20 @@ function UsersListPreferences({
       });
   }, [inactiveUserState, requestInactiveUser, formatMessage]);
 
-  const onDeleteUser = useCallback((user) => {
+  // Handle click and cancel/confirm user delete
+  const handleDeleteUser = useCallback((user) => {
     setDeleteUserState(user);
   }, []);
 
+  // handle cancel delete user alert.
   const handleCancelUserDelete = () => {
     setDeleteUserState(false);
   };
 
-  const onEditUser = useCallback(
-    (user) => () => {
-      const form = Object.keys(user).reduce((obj, key) => {
-        const camelKey = snakeCase(key);
-        obj[camelKey] = user[key];
-        return obj;
-      }, {});
+  const handleEditUser = useCallback(() => {}, []);
+
+
 
-      openDialog('userList-form', { action: 'edit', user: form });
-    },
-    [openDialog],
-  );
 
   // Handle confirm User delete
   const handleConfirmUserDelete = useCallback(() => {
@@ -128,138 +115,63 @@ function UsersListPreferences({
       });
   }, [deleteUserState, requestDeleteUser, formatMessage]);
 
-  const actionMenuList = useCallback(
-    (user) => (
-      <Menu>
-        <If condition={user.invite_accepted_at}>
-          <MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
-          <MenuDivider />
+  // const handelDataTableFetchData = useCallback(() => {
+  //   onFetchData && onFetchData();
+  // }, [onFetchData]);
 
-          <MenuItem
-            text={<T id={'inactivate_user'} />}
-            onClick={() => onInactiveUser(user)}
-          />
-        </If>
-
-        <MenuItem
-          text={<T id={'delete_user'} />}
-          onClick={() => onDeleteUser(user)}
-          intent={Intent.DANGER}
-        />
-      </Menu>
-    ),
-    [onInactiveUser, onDeleteUser, onEditUser],
+  // Handle selected rows change.
+  const handleSelectedRowsChange = useCallback(
+    (accounts) => {
+      setSelectedRows(accounts);
+    },
+    [setSelectedRows],
   );
 
-  const columns = useMemo(
-    () => [
-      {
-        id: 'full_name',
-        Header: formatMessage({ id: 'full_name' }),
-        accessor: 'full_name',
-        width: 150,
-      },
-      {
-        id: 'email',
-        Header: formatMessage({ id: 'email' }),
-        accessor: 'email',
-        width: 150,
-      },
-      {
-        id: 'phone_number',
-        Header: formatMessage({ id: 'phone_number' }),
-        accessor: 'phone_number',
-        width: 120,
-      },
-      {
-        id: 'status',
-        Header: 'Status',
-        accessor: (user) =>
-          !user.invite_accepted_at ? (
-            <Tag minimal={true}>
-              <T id={'inviting'} />
-            </Tag>
-          ) : user.active ? (
-            <Tag intent={Intent.SUCCESS} minimal={true}>
-              <T id={'activate'} />
-            </Tag>
-          ) : (
-            <Tag intent={Intent.WARNING} minimal={true}>
-              <T id={'inactivate'} />
-            </Tag>
-          ),
-        width: 80,
-        className: 'status',
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ({ cell }) => (
-          <Popover
-            content={actionMenuList(cell.row.original)}
-            position={Position.RIGHT_TOP}
-          >
-            <Button icon={<Icon icon="ellipsis-h" />} />
-          </Popover>
-        ),
-        className: 'actions',
-        width: 50,
-        disableResizing: true,
-      },
-    ],
-    [actionMenuList, formatMessage],
-  );
-
-  const handelDataTableFetchData = useCallback(() => {
-    onFetchData && onFetchData();
-  }, [onFetchData]);
-
   return (
-    <LoadingIndicator>
-      <DataTable
-        columns={columns}
-        data={usersList}
-        onFetchData={handelDataTableFetchData()}
-        loading={fetchUsers.isFetching}
-        manualSortBy={true}
-        expandable={false}
-      />
+    <DashboardInsider loading={fetchUsers.isFetching}>
+      <DashboardPageContent>
+        <UsersDataTable
+          onDeleteUser={handleDeleteUser}
+          onInactiveUser={handleInactiveUser}
+          onEditUser={handleEditUser}
+          // onFetchData={handleFetchData}
+          onSelectedRowsChange={handleSelectedRowsChange}
+        />
 
-      <Alert
-        cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={<T id={'delete'} />}
-        icon="trash"
-        intent={Intent.DANGER}
-        isOpen={deleteUserState}
-        onCancel={handleCancelUserDelete}
-        onConfirm={handleConfirmUserDelete}
-      >
-        <p>
-          <FormattedHTMLMessage
-            id={'once_delete_this_account_you_will_able_to_restore_it'}
-          />
-        </p>
-      </Alert>
-
-      <Alert
-        cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={<T id={'inactivate'} />}
-        intent={Intent.WARNING}
-        isOpen={inactiveUserState}
-        onCancel={handleCancelInactiveUser}
-        onConfirm={handleConfirmUserActive}
-      >
-        <p>
-          <T id={'are_sure_to_inactive_this_account'} />
-        </p>
-      </Alert>
-    </LoadingIndicator>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon="trash"
+          intent={Intent.DANGER}
+          isOpen={deleteUserState}
+          onCancel={handleCancelUserDelete}
+          onConfirm={handleConfirmUserDelete}
+        >
+          <p>
+            <FormattedHTMLMessage
+              id={'once_delete_this_account_you_will_able_to_restore_it'}
+            />
+          </p>
+        </Alert>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'inactivate'} />}
+          intent={Intent.WARNING}
+          isOpen={inactiveUserState}
+          onCancel={handleCancelInactiveUser}
+          onConfirm={handleConfirmUserActive}
+        >
+          <p>
+            <T id={'are_sure_to_inactive_this_account'} />
+          </p>
+        </Alert>
+      </DashboardPageContent>
+    </DashboardInsider>
   );
 }
 
 export default compose(
   withDialogActions,
   withDashboardActions,
-  withUsers,
   withUsersActions,
 )(UsersListPreferences);