chore: add CONTRIBUTING file

Add FCY/BCY transactions to the account drawer.

CONTRIBUTING.md

@@ -0,0 +1,132 @@
+# Contributing Guidelines
+
+Thank you for considering contributing to our project! We appreciate your interest and welcome any contributions you may have.
+
+Please read through this document before submitting any issues or pull requests to ensure we have all the necessary information to effectively respond to your bug report or contribution.
+
+## Sections
+
+- [General Instructions](#general-instructions)
+- [Contribute to Backend](#contribute-to-backend)
+- [Contribute to Frontend](#contribute-to-frontend)
+- [Other Ways to Contribute](#other-ways-to-contribute)
+
+## General Instructions
+
+## For Pull Request(s)
+
+Contributions via pull requests are much appreciated. Once the approach is agreed upon ✅, make your changes and open a Pull Request(s). Before sending us a pull request, please ensure that,
+
+- Fork the repo on GitHub, clone it on your machine.
+- Create a branch with your changes.
+- You are working against the latest source on the `develop` branch.
+- Modify the source; please focus only on the specific change.
+- Ensure local tests pass.
+- Commit to your fork using clear commit messages.
+- Send us a pull request.
+- Pay attention to any automated CI failures reported in the pull request.
+- Stay involved in the conversation
+
+⚠️ Please note: If you want to work on an issue, please ask the maintainers to assign the issue to you before starting work on it. This would help us understand who is working on an issue and prevent duplicate work. 🙏🏻
+
+---
+
+## Contribute to Backend
+
+- Clone the `bigcapital` repository and `cd` into `bigcapital` directory.
+- Install all npm dependencies of the monorepo, you don't have to change directory to the `backend` package. just hit the command on root directory and it will install dependencies of all packages.
+
+```
+npm install
+npm run bootstrap
+```
+
+- Run all required docker containers in the development, we already configured all containers under `docker-compose.yml`.
+
+```
+docker-compose up -d
+```
+
+Wait some seconds, and hit `docker-compose ps` to see the result and you should see the same result below.
+
+```
+CONTAINER ID   IMAGE              COMMAND                  CREATED         STATUS        PORTS                               NAMES
+d974edfab9df   bigcapital-mysql   "docker-entrypoint.s…"   7 seconds ago   Up 1 second   0.0.0.0:3306->3306/tcp, 33060/tcp   bigcapital-mysql-1
+cefa73fe2881   bigcapital-redis   "docker-entrypoint.s…"   7 seconds ago   Up 1 second   6379/tcp                            bigcapital-redis-1
+1ea059198cb4   bigcapital-mongo   "docker-entrypoint.s…"   7 seconds ago   Up 1 second   0.0.0.0:27017->27017/tcp            bigcapital-mongo-1
+```
+
+- There're some CLI commands we should run before running the server like databaase migration, so we need to build the `server` app first.
+
+```
+npm run build:server
+```
+
+- Run the database migration for system database.
+
+```
+node packages/server/build/commands.js system:migrate:latest
+```
+
+And you should get something like that.
+
+```
+Batch 1 run: 6 migrations
+```
+
+- Next, start the webapp application.
+
+```
+npm run dev:server
+```
+
+**[`^top^`](#)**
+
+----
+
+## Contribute to Frontend
+
+- Clone the `bigcapital` repository and cd into `bigcapital` directory.
+
+```
+git clone https://github.com/bigcapital/bigcapital.git && cd bigcaptial
+```
+
+- Install all npm dependencies of the monorepo, you don't have to change directory to the `frontend` package. just hit that command and will install all packages across all application.
+
+```
+npm install
+npm run bootstrap
+```
+
+- Next, start the webapp application.
+
+```
+npm run dev:webapp
+```
+
+**[`^top^`](#)**
+
+---
+
+## Code Review
+
+We welcome constructive criticism and feedback on code submitted by contributors. All feedback should be constructive and respectful, and should focus on the code rather than the contributor. Code review may include suggestions for improvement or changes to the code.
+
+---
+
+## Other Ways to Contribute
+
+There are many other ways to get involved with the community and to participate in this project:
+
+- Use the product, submitting GitHub issues when a problem is found.
+- Help code review pull requests and participate in issue threads.
+- Submit a new feature request as an issue.
+- Help answer questions on forums such as Stack Overflow and SigNoz Community Slack Channel.
+- Tell others about the project on Twitter, your blog, etc.
+
+**[`^top^`](#)**
+
+Again, Feel free to ping us on [`#contributing`](https://discord.com/invite/c8nPBJafeb) on our Discord community if you need any help on this :)
+
+Thank You!

packages/server/src/api/controllers/InviteUsers.ts

@@ -92,6 +92,7 @@ export default class InviteUsersController extends BaseController {
 
     try {
       await this.inviteUsersService.sendInvite(tenantId, sendInviteDTO, user);
+
       return res.status(200).send({
         type: 'success',
         code: 'INVITE.SENT.SUCCESSFULLY',

packages/server/src/api/controllers/Items/Items.ts

@@ -177,7 +177,7 @@ export default class ItemsController extends BaseController {
   /**
    * Validate list query schema.
    */
-  get validateListQuerySchema() {
+  private get validateListQuerySchema() {
     return [
       query('column_sort_by').optional().trim().escape(),
       query('sort_order').optional().isIn(['desc', 'asc']),
@@ -193,32 +193,20 @@ export default class ItemsController extends BaseController {
     ];
   }
 
-  /**
-   * Validate autocomplete list query schema.
-   */
-  get autocompleteQuerySchema() {
-    return [
-      query('column_sort_by').optional().trim().escape(),
-      query('sort_order').optional().isIn(['desc', 'asc']),
-
-      query('stringified_filter_roles').optional().isJSON(),
-      query('limit').optional().isNumeric().toInt(),
-
-      query('keyword').optional().isString().trim().escape(),
-    ];
-  }
-
   /**
    * Stores the given item details to the storage.
    * @param {Request} req
    * @param {Response} res
    */
-  async newItem(req: Request, res: Response, next: NextFunction) {
+  private async newItem(req: Request, res: Response, next: NextFunction) {
     const { tenantId } = req;
     const itemDTO: IItemDTO = this.matchedBodyData(req);
 
     try {
-      const storedItem = await this.itemsApplication.createItem(tenantId, itemDTO);
+      const storedItem = await this.itemsApplication.createItem(
+        tenantId,
+        itemDTO
+      );
 
       return res.status(200).send({
         id: storedItem.id,
@@ -234,7 +222,7 @@ export default class ItemsController extends BaseController {
    * @param {Request} req
    * @param {Response} res
    */
-  async editItem(req: Request, res: Response, next: NextFunction) {
+  private async editItem(req: Request, res: Response, next: NextFunction) {
     const { tenantId } = req;
     const itemId: number = req.params.id;
     const item: IItemDTO = this.matchedBodyData(req);
@@ -257,7 +245,7 @@ export default class ItemsController extends BaseController {
    * @param {Response} res
    * @param {NextFunction} next
    */
-  async activateItem(req: Request, res: Response, next: NextFunction) {
+  private async activateItem(req: Request, res: Response, next: NextFunction) {
     const { tenantId } = req;
     const itemId: number = req.params.id;
 
@@ -279,7 +267,11 @@ export default class ItemsController extends BaseController {
    * @param {Response} res
    * @param {NextFunction} next
    */
-  async inactivateItem(req: Request, res: Response, next: NextFunction) {
+  private async inactivateItem(
+    req: Request,
+    res: Response,
+    next: NextFunction
+  ) {
     const { tenantId } = req;
     const itemId: number = req.params.id;
 
@@ -300,7 +292,7 @@ export default class ItemsController extends BaseController {
    * @param {Request} req
    * @param {Response} res
    */
-  async deleteItem(req: Request, res: Response, next: NextFunction) {
+  private async deleteItem(req: Request, res: Response, next: NextFunction) {
     const itemId: number = req.params.id;
     const { tenantId } = req;
 
@@ -322,7 +314,7 @@ export default class ItemsController extends BaseController {
    * @param {Response} res
    * @return {Response}
    */
-  async getItem(req: Request, res: Response, next: NextFunction) {
+  private async getItem(req: Request, res: Response, next: NextFunction) {
     const itemId: number = req.params.id;
     const { tenantId } = req;
 
@@ -342,7 +334,7 @@ export default class ItemsController extends BaseController {
    * @param {Request} req
    * @param {Response} res
    */
-  async getItemsList(req: Request, res: Response, next: NextFunction) {
+  private async getItemsList(req: Request, res: Response, next: NextFunction) {
     const { tenantId } = req;
 
     const filter = {

packages/server/src/interfaces/Account.ts

@@ -42,6 +42,7 @@ export enum AccountNormal {
 
 export interface IAccountsTransactionsFilter {
   accountId?: number;
+  limit?: number;
 }
 
 export interface IAccountTransaction {

packages/server/src/loaders/eventEmitter.ts

@@ -25,6 +25,7 @@ import SyncSystemSendInvite from '@/services/InviteUsers/SyncSystemSendInvite';
 import InviteSendMainNotification from '@/services/InviteUsers/InviteSendMailNotification';
 import SyncTenantAcceptInvite from '@/services/InviteUsers/SyncTenantAcceptInvite';
 import SyncTenantUserMutate from '@/services/Users/SyncTenantUserSaved';
+import { SyncTenantUserDelete } from '@/services/Users/SyncTenantUserDeleted';
 import OrgSyncTenantAdminUserSubscriber from '@/subscribers/Organization/SyncTenantAdminUser';
 import OrgBuildSmsNotificationSubscriber from '@/subscribers/Organization/BuildSmsNotification';
 import PurgeUserAbilityCache from '@/services/Users/PurgeUserAbilityCache';
@@ -113,6 +114,7 @@ export const susbcribers = () => {
     SyncTenantAcceptInvite,
     InviteSendMainNotification,
     SyncTenantUserMutate,
+    SyncTenantUserDelete,
     OrgSyncTenantAdminUserSubscriber,
     OrgBuildSmsNotificationSubscriber,
     PurgeUserAbilityCache,

packages/server/src/services/Accounts/AccountTransactionTransformer.ts

@@ -106,7 +106,7 @@ export default class AccountTransactionTransformer extends Transformer {
    * @returns {string}
    */
   protected formattedFcCredit(transaction: IAccountTransaction) {
-    return this.formatMoney(this.fcDebit(transaction), {
+    return this.formatMoney(this.fcCredit(transaction), {
       currencyCode: transaction.currencyCode,
       excerptZero: true,
     });
@@ -117,7 +117,7 @@ export default class AccountTransactionTransformer extends Transformer {
    * @returns {string}
    */
   protected formattedFcDebit(transaction: IAccountTransaction) {
-    return this.formatMoney(this.fcCredit(transaction), {
+    return this.formatMoney(this.fcDebit(transaction), {
       currencyCode: transaction.currencyCode,
       excerptZero: true,
     });

packages/server/src/services/InviteUsers/InviteSendMailNotification.ts

@@ -8,7 +8,7 @@ import { Inject, Service } from 'typedi';
 @Service()
 export default class InviteSendMainNotificationSubscribe {
   @Inject('agenda')
-  agenda: any;
+  private agenda: any;
 
   /**
    * Attaches events with handlers.

packages/server/src/services/InviteUsers/TenantInviteUser.ts

@@ -3,7 +3,6 @@ import uniqid from 'uniqid';
 import moment from 'moment';
 import { ServiceError } from '@/exceptions';
 import TenancyService from '@/services/Tenancy/TenancyService';
-import InviteUsersMailMessages from '@/services/InviteUsers/InviteUsersMailMessages';
 import events from '@/subscribers/events';
 import {
   ISystemUser,
@@ -13,7 +12,6 @@ import {
   IUserInvitedEventPayload,
   IUserInviteResendEventPayload,
 } from '@/interfaces';
-import TenantsManagerService from '@/services/Tenancy/TenantsManager';
 import { ERRORS } from './constants';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 import RolesService from '@/services/Roles/RolesService';
@@ -21,25 +19,13 @@ import RolesService from '@/services/Roles/RolesService';
 @Service()
 export default class InviteTenantUserService implements IInviteUserService {
   @Inject()
-  eventPublisher: EventPublisher;
+  private eventPublisher: EventPublisher;
 
   @Inject()
-  tenancy: TenancyService;
-
-  @Inject('logger')
-  logger: any;
+  private tenancy: TenancyService;
 
   @Inject()
-  mailMessages: InviteUsersMailMessages;
-
-  @Inject('repositories')
-  sysRepositories: any;
-
-  @Inject()
-  tenantsManager: TenantsManagerService;
-
-  @Inject()
-  rolesService: RolesService;
+  private rolesService: RolesService;
 
   /**
    * Sends invite mail to the given email from the given tenant and user.
@@ -99,8 +85,6 @@ export default class InviteTenantUserService implements IInviteUserService {
   ): Promise<{
     user: ITenantUser;
   }> {
-    const { User } = this.tenancy.models(tenantId);
-
     // Retrieve the user by id or throw not found service error.
     const user = await this.getUserByIdOrThrowError(tenantId, userId);
 

packages/server/src/services/Roles/RoleTransformer.ts

@@ -10,18 +10,18 @@ export class RoleTransformer extends Transformer {
   };
 
   /**
-   * 
+   * Retrieves the localized role name if is predefined or stored name.
    * @param role 
-   * @returns 
+   * @returns {string}
    */
   public name(role) {
     return role.predefined ? this.context.i18n.__(role.name) : role.name;
   }
 
   /**
-   * 
+   * Retrieves the localized role description if is predefined or stored description.
    * @param role 
-   * @returns 
+   * @returns {string}
    */
   public description(role) {
     return role.predefined

packages/server/src/services/Users/SyncTenantUserDeleted.ts

@@ -0,0 +1,26 @@
+import events from '@/subscribers/events';
+import { ITenantUserDeletedPayload } from '@/interfaces';
+import { SystemUser } from '@/system/models';
+
+export class SyncTenantUserDelete {
+  /**
+   * Attaches events with handlers.
+   * @param bus
+   */
+  public attach(bus) {
+    bus.subscribe(
+      events.tenantUser.onDeleted,
+      this.syncSystemUserOnceUserDeleted
+    );
+  }
+
+  /**
+   * Deletes the system user once tenant user be deleted.
+   * @param {ITenantUserDeletedPayload} payload -
+   */
+  private syncSystemUserOnceUserDeleted = async ({
+    tenantUser,
+  }: ITenantUserDeletedPayload) => {
+    await SystemUser.query().where('id', tenantUser.systemUserId).delete();
+  };
+}

packages/server/src/services/Users/UserTransformer.ts

@@ -0,0 +1,50 @@
+import { Transformer } from '@/lib/Transformer/Transformer';
+
+export class UserTransformer extends Transformer {
+  /**
+   * Exclude these attributes from user object.
+   * @returns {Array}
+   */
+  public excludeAttributes = (): string[] => {
+    return ['role'];
+  };
+
+  /**
+   * Includeded attributes.
+   * @returns {string[]}
+   */
+  public includeAttributes = (): string[] => {
+    return ['roleName', 'roleDescription', 'roleSlug'];
+  };
+
+  /**
+   * Retrieves the localized role name if is predefined or stored name.
+   * @param role
+   * @returns {string}
+   */
+  public roleName(user) {
+    return user.role.predefined
+      ? this.context.i18n.__(user.role.name)
+      : user.role.name;
+  }
+
+  /**
+   * Retrieves the localized role description if is predefined or stored description.
+   * @param user
+   * @returns {string}
+   */
+  public roleDescription(user) {
+    return user.role.predefined
+      ? this.context.i18n.__(user.role.description)
+      : user.role.description;
+  }
+
+  /**
+   * Retrieves the role slug.
+   * @param user
+   * @returns {string}
+   */
+  public roleSlug(user) {
+    return user.role.slug;
+  }
+}

packages/server/src/services/Users/UsersService.ts

@@ -14,12 +14,11 @@ import RolesService from '@/services/Roles/RolesService';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
 import { ERRORS } from './constants';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
+import { UserTransformer } from './UserTransformer';
 
 @Service()
 export default class UsersService {
-  @Inject('repositories')
-  private repositories: any;
-
   @Inject()
   private rolesService: RolesService;
 
@@ -29,6 +28,9 @@ export default class UsersService {
   @Inject()
   private eventPublisher: EventPublisher;
 
+  @Inject()
+  private transformer: TransformerInjectable;
+
   /**
    * Creates a new user.
    * @param {number} tenantId - Tenant id.
@@ -91,9 +93,10 @@ export default class UsersService {
     // Retrieve user details or throw not found service error.
     const tenantUser = await this.getTenantUserOrThrowError(tenantId, userId);
 
-    // Validate the delete user should not be the last user.
-    await this.validateNotLastUserDelete(tenantId);
-
+    // Validate the delete user should not be the last active user.
+    if (tenantUser.isInviteAccepted) {
+      await this.validateNotLastUserDelete(tenantId);
+    }
     // Delete user from the storage.
     await User.query().findById(userId).delete();
 
@@ -183,7 +186,7 @@ export default class UsersService {
 
     const users = await User.query().withGraphFetched('role');
 
-    return users;
+    return this.transformer.transform(tenantId, users, new UserTransformer());
   }
 
   /**
@@ -223,11 +226,13 @@ export default class UsersService {
    * @param {number} tenantId
    */
   private async validateNotLastUserDelete(tenantId: number) {
-    const { systemUserRepository } = this.repositories;
+    const { User } = this.tenancy.models(tenantId);
 
-    const usersFound = await systemUserRepository.find({ tenantId });
+    const inviteAcceptedUsers = await User.query()
+      .select(['id'])
+      .whereNotNull('invite_accepted_at');
 
-    if (usersFound.length === 1) {
+    if (inviteAcceptedUsers.length === 1) {
       throw new ServiceError(ERRORS.CANNOT_DELETE_LAST_USER);
     }
   }
@@ -291,9 +296,9 @@ export default class UsersService {
 
   /**
    * Validate the authorized user cannot mutate its role.
-   * @param {ITenantUser} oldTenantUser 
-   * @param {IEditUserDTO} editUserDTO 
-   * @param {ISystemUser} authorizedUser 
+   * @param {ITenantUser} oldTenantUser
+   * @param {IEditUserDTO} editUserDTO
+   * @param {ISystemUser} authorizedUser
    */
   validateMutateRoleNotAuthorizedUser(
     oldTenantUser: ITenantUser,
@@ -307,5 +312,4 @@ export default class UsersService {
       throw new ServiceError(ERRORS.CANNOT_AUTHORIZED_USER_MUTATE_ROLE);
     }
   }
-
 }

packages/webapp/src/components/Dashboard/DashboardBackLink.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
 import { useHistory } from 'react-router-dom';
-import { getDashboardRoutes } from '@/routes/dashboard';
+
 import { If, Icon } from '@/components';
 import { FormattedMessage as T } from '@/components';
 import withDashboard from '@/containers/Dashboard/withDashboard';

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserForm.tsx

@@ -16,6 +16,11 @@ import { transformApiErrors } from './utils';
 
 import { compose, objectKeysTransform } from '@/utils';
 
+const initialValues = {
+  email: '',
+  role_id: ''
+}
+
 function InviteUserForm({
   // #withDialogActions
   closeDialog,
@@ -23,7 +28,8 @@ function InviteUserForm({
   const { dialogName, isEditMode, inviteUserMutate, userId } =
     useInviteUserFormContext();
 
-  const initialValues = {
+  const initialFormValues = {
+    ...initialValues,
     status: 1,
     ...(isEditMode &&
       pick(
@@ -66,7 +72,7 @@ function InviteUserForm({
   return (
     <Formik
       validationSchema={InviteUserFormSchema}
-      initialValues={initialValues}
+      initialValues={initialFormValues}
       onSubmit={handleSubmit}
     >
       <InviteUserFormContent />

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx

@@ -6,6 +6,8 @@ import {
   ListSelect,
   FieldRequiredHint,
   FormattedMessage as T,
+  FFormGroup,
+  FInputGroup,
 } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import classNames from 'classnames';
@@ -32,19 +34,13 @@ function InviteUserFormContent({
           <T id={'your_access_to_your_team'} />
         </p>
         {/* ----------- Email ----------- */}
-        <FastField name={'email'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'email'} />}
-              labelInfo={<FieldRequiredHint />}
-              className={classNames('form-group--email', CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="email" />}
-            >
-              <InputGroup medium={true} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup
+          name={'email'}
+          label={<T id={'invite_user.label.email'} />}
+          labelInfo={<FieldRequiredHint />}
+        >
+          <FInputGroup name={'email'} />
+        </FFormGroup>
         {/* ----------- Role name ----------- */}
         <FastField name={'role_id'}>
           {({ form, field: { value }, meta: { error, touched } }) => (
@@ -78,7 +74,13 @@ function InviteUserFormContent({
             <T id={'cancel'} />
           </Button>
 
-          <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
+          <Button
+            intent={Intent.PRIMARY}
+            type="submit"
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            style={{ minWidth: '95px' }}
+          >
             {isEditMode ? <T id={'edit'} /> : <T id={'invite'} />}
           </Button>
         </div>

packages/webapp/src/containers/Dialogs/UserFormDialog/UserFormContent.tsx

@@ -41,17 +41,29 @@ function UserFormContent({
         <UserFormCalloutAlerts calloutCodes={calloutCode} />
 
         {/* ----------- Email ----------- */}
-        <FFormGroup name={'email'} label={<T id={'email'} />}>
+        <FFormGroup
+          name={'email'}
+          label={<T id={'email'} />}
+          labelInfo={<FieldRequiredHint />}
+        >
           <FInputGroup name={'email'} />
         </FFormGroup>
 
         {/* ----------- First name ----------- */}
-        <FFormGroup name={'first_name'} label={<T id={'first_name'} />}>
+        <FFormGroup
+          name={'first_name'}
+          label={<T id={'first_name'} />}
+          labelInfo={<FieldRequiredHint />}
+        >
           <FInputGroup name={'first_name'} />
         </FFormGroup>
 
         {/* ----------- Last name ----------- */}
-        <FFormGroup name={'last_name'} label={<T id={'last_name'} />}>
+        <FFormGroup
+          name={'last_name'}
+          label={<T id={'last_name'} />}
+          labelInfo={<FieldRequiredHint />}
+        >
           <FInputGroup name={'last_name'} />
         </FFormGroup>
 
@@ -94,6 +106,7 @@ function UserFormContent({
             type="submit"
             disabled={isSubmitting}
             loading={isSubmitting}
+            style={{ minWidth: '85px' }}
           >
             <T id={'edit'} />
           </Button>

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTable.tsx

@@ -4,23 +4,24 @@ import intl from 'react-intl-universal';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { compose } from '@/utils';
 import { TableStyle } from '@/constants';
 import { Card, DataTable, If } from '@/components';
+import { AccountDrawerTableOptionsProvider } from './AccountDrawerTableOptionsProvider';
+import { AccountDrawerTableHeader } from './AccountDrawerTableHeader';
+
 import { useAccountReadEntriesColumns } from './utils';
 import { useAppIntlContext } from '@/components/AppIntlProvider';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
+import { compose } from '@/utils';
+
 /**
  * account drawer table.
  */
 function AccountDrawerTable({ closeDrawer }) {
-  const { account, accounts, drawerName } = useAccountDrawerContext();
-
-  // Account read-only entries table columns.
-  const columns = useAccountReadEntriesColumns();
+  const { accounts, drawerName } = useAccountDrawerContext();
 
   // Handle view more link click.
   const handleLinkClick = () => {
@@ -31,27 +32,41 @@ function AccountDrawerTable({ closeDrawer }) {
 
   return (
     <Card>
-      <DataTable
-        columns={columns}
-        data={accounts}
-        payload={{ account }}
-        styleName={TableStyle.Constrant}
-      />
+      <AccountDrawerTableOptionsProvider>
+        <AccountDrawerTableHeader />
+        <AccountDrawerDataTable />
 
-      <If condition={accounts.length > 0}>
-        <TableFooter>
-          <Link
-            to={`/financial-reports/general-ledger`}
-            onClick={handleLinkClick}
-          >
-            {isRTL ? '→' : '←'} {intl.get('view_more_transactions')}
-          </Link>
-        </TableFooter>
-      </If>
+        <If condition={accounts.length > 0}>
+          <TableFooter>
+            <Link
+              to={`/financial-reports/general-ledger`}
+              onClick={handleLinkClick}
+            >
+              {isRTL ? '→' : '←'} {intl.get('view_more_transactions')}
+            </Link>
+          </TableFooter>
+        </If>
+      </AccountDrawerTableOptionsProvider>
     </Card>
   );
 }
 
+function AccountDrawerDataTable() {
+  const { account, accounts } = useAccountDrawerContext();
+
+  // Account read-only entries table columns.
+  const columns = useAccountReadEntriesColumns();
+
+  return (
+    <DataTable
+      columns={columns}
+      data={accounts}
+      payload={{ account }}
+      styleName={TableStyle.Constrant}
+    />
+  );
+}
+
 export default compose(withDrawerActions)(AccountDrawerTable);
 
 const TableFooter = styled.div`

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTableHeader.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button, ButtonGroup } from '@blueprintjs/core';
+import styled from 'styled-components';
+import { useAccountDrawerTableOptionsContext } from './AccountDrawerTableOptionsProvider';
+
+export function AccountDrawerTableHeader() {
+  const {
+    setBCYCurrencyType,
+    setFYCCurrencyType,
+    isBCYCurrencyType,
+    isFCYCurrencyType,
+  } = useAccountDrawerTableOptionsContext();
+
+  const handleBCYBtnClick = () => {
+    setBCYCurrencyType();
+  };
+  const handleFCYBtnClick = () => {
+    setFYCCurrencyType();
+  };
+
+  return (
+    <TableHeaderRoot>
+      <ButtonGroup>
+        <Button
+          small
+          outlined
+          onClick={handleFCYBtnClick}
+          active={isFCYCurrencyType}
+        >
+          FCY
+        </Button>
+        <Button
+          small
+          outlined
+          onClick={handleBCYBtnClick}
+          active={isBCYCurrencyType}
+        >
+          BCY
+        </Button>
+      </ButtonGroup>
+    </TableHeaderRoot>
+  );
+}
+
+const TableHeaderRoot = styled.div`
+  margin-bottom: 1rem;
+`;

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTableOptionsProvider.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useCallback } from 'react';
+
+interface AccountDrawerTableOptionsContextValue {
+  setFYCCurrencyType: () => void;
+  setBCYCurrencyType: () => void;
+  isFCYCurrencyType: boolean;
+  isBCYCurrencyType: boolean;
+  currencyType: ForeignCurrencyType;
+}
+
+const AccountDrawerTableOptionsContext = React.createContext(
+  {} as AccountDrawerTableOptionsContextValue,
+);
+
+enum ForeignCurrencyTypes {
+  FCY = 'FCY',
+  BCY = 'BCY',
+}
+type ForeignCurrencyType = ForeignCurrencyTypes.FCY | ForeignCurrencyTypes.BCY;
+
+function AccountDrawerTableOptionsProvider({
+  initialCurrencyType = ForeignCurrencyTypes.FCY,
+  ...props
+}) {
+  const [currencyType, setCurrentType] =
+    useState<ForeignCurrencyType>(initialCurrencyType);
+
+  const setFYCCurrencyType = useCallback(
+    () => setCurrentType(ForeignCurrencyTypes.FCY),
+    [setCurrentType],
+  );
+  const setBCYCurrencyType = useCallback(
+    () => setCurrentType(ForeignCurrencyTypes.BCY),
+    [setCurrentType],
+  );
+
+  // Provider.
+  const provider = {
+    setFYCCurrencyType,
+    setBCYCurrencyType,
+    isFCYCurrencyType: currencyType === ForeignCurrencyTypes.FCY,
+    isBCYCurrencyType: currencyType === ForeignCurrencyTypes.BCY,
+    currencyType,
+  };
+
+  return (
+    <AccountDrawerTableOptionsContext.Provider value={provider} {...props} />
+  );
+}
+
+const useAccountDrawerTableOptionsContext = () =>
+  React.useContext(AccountDrawerTableOptionsContext);
+
+export {
+  AccountDrawerTableOptionsProvider,
+  useAccountDrawerTableOptionsContext,
+};

packages/webapp/src/containers/Drawers/AccountDrawer/utils.tsx

@@ -3,27 +3,15 @@ import intl from 'react-intl-universal';
 import React from 'react';
 
 import { FormatDateCell } from '@/components';
-import { isBlank } from '@/utils';
-
-/**
- * Debit/credit table cell.
- */
-function DebitCreditTableCell({ value, payload: { account } }) {
-  return !isBlank(value) && value !== 0 ? account.formatted_amount : null;
-}
-
-/**
- * Running balance table cell.
- */
-function RunningBalanceTableCell({ value, payload: { account } }) {
-  return account.formatted_amount;
-}
+import { useAccountDrawerTableOptionsContext } from './AccountDrawerTableOptionsProvider';
 
 /**
  * Retrieve entries columns of read-only account view.
  */
-export const useAccountReadEntriesColumns = () =>
-  React.useMemo(
+export const useAccountReadEntriesColumns = () => {
+  const { isFCYCurrencyType } = useAccountDrawerTableOptionsContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('transaction_date'),
@@ -34,14 +22,15 @@ export const useAccountReadEntriesColumns = () =>
       },
       {
         Header: intl.get('transaction_type'),
-        accessor: 'reference_type_formatted',
+        accessor: 'transaction_type_formatted',
         width: 100,
         textOverview: true,
       },
       {
         Header: intl.get('credit'),
-        accessor: 'credit',
-        Cell: DebitCreditTableCell,
+        accessor: isFCYCurrencyType
+          ? 'formatted_fc_credit'
+          : 'formatted_credit',
         width: 80,
         className: 'credit',
         align: 'right',
@@ -49,22 +38,13 @@ export const useAccountReadEntriesColumns = () =>
       },
       {
         Header: intl.get('debit'),
-        accessor: 'debit',
-        Cell: DebitCreditTableCell,
+        accessor: isFCYCurrencyType ? 'formatted_fc_debit' : 'formatted_debit',
         width: 80,
         className: 'debit',
         align: 'right',
         textOverview: true,
       },
-      {
-        Header: intl.get('running_balance'),
-        Cell: RunningBalanceTableCell,
-        accessor: 'running_balance',
-        width: 110,
-        className: 'running_balance',
-        align: 'right',
-        textOverview: true,
-      },
     ],
-    [],
+    [isFCYCurrencyType],
   );
+};

packages/webapp/src/containers/Preferences/Currencies/components.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 import {
   Menu,
   Popover,
@@ -9,6 +10,7 @@ import {
   MenuItem,
   MenuDivider,
   Intent,
+  Tag,
 } from '@blueprintjs/core';
 import { Icon } from '@/components';
 import { safeCallback } from '@/utils';
@@ -52,12 +54,25 @@ export const ActionsCell = (props) => {
   );
 };
 
+export const CurrencyNameAccessor = (value) => {
+  return (
+    <CurrencyNameRoot>
+      {value.currency_name} {value.is_base_currency && <Tag>Base Currency</Tag>}
+    </CurrencyNameRoot>
+  );
+};
+
+const CurrencyNameRoot = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
 export function useCurrenciesTableColumns() {
   return useMemo(
     () => [
       {
         Header: intl.get('currency_name'),
-        accessor: 'currency_name',
+        accessor: CurrencyNameAccessor,
         width: 150,
       },
       {

packages/webapp/src/containers/Preferences/Users/UsersDataTable.tsx

@@ -22,6 +22,14 @@ function UsersDataTable({
   // #withAlertActions
   openAlert,
 }) {
+  const { mutateAsync: resendInviation } = useResendInvitation();
+
+  // Users list columns.
+  const columns = useUsersListColumns();
+
+  // Users list context.
+  const { users, isUsersLoading, isUsersFetching } = useUsersListContext();
+
   // Handle edit user action.
   const handleEditUserAction = useCallback(
     (user) => {
@@ -50,9 +58,6 @@ function UsersDataTable({
     },
     [openAlert],
   );
-
-  const { mutateAsync: resendInviation } = useResendInvitation();
-
   const handleResendInvitation = useCallback((user) => {
     resendInviation(user.id)
       .then(() => {
@@ -71,17 +76,12 @@ function UsersDataTable({
             AppToaster.show({
               message:
                 'This person was recently invited. No need to invite them again just yet.',
-              intent: Intent.DANGER,
+              intent: Intent.WARNING,
             });
           }
         },
       );
   });
-  // Users list columns.
-  const columns = useUsersListColumns();
-
-  // Users list context.
-  const { users, isUsersLoading, isUsersFetching } = useUsersListContext();
 
   return (
     <DataTable

packages/webapp/src/containers/Preferences/Users/components.tsx

@@ -132,15 +132,9 @@ export const useUsersListColumns = () => {
       {
         id: 'role_name',
         Header: intl.get('users.column.role_name'),
-        accessor: 'role.name',
+        accessor: 'role_name',
         width: 120,
       },
-      // {
-      //   id: 'phone_number',
-      //   Header: intl.get('phone_number'),
-      //   accessor: 'phone_number',
-      //   width: 120,
-      // },
       {
         id: 'status',
         Header: intl.get('status'),

packages/webapp/src/lang/en/index.json

@@ -2228,5 +2228,8 @@
   "project_billable_entries.dialog.show": "Show",
   "project_billable_entries.alert.there_is_no_billable_entries": "There is no billable entries for that project.",
   "project_billable_entries.billable_type": "Billable {value}",
-  "add_billable_entries": "Add Billable Entries"
+  "add_billable_entries": "Add Billable Entries",
+
+  "invite_user.label.email": "Email",
+  "invite_user.label.role_name": "Role name"
 }