feat(webapp): wip tax rates management

packages/webapp/src/containers/TaxRates/drawers/TaxRateDetailsDrawer/TaxRateDetailsContent.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+import TaxRateDetailsContentActionsBar from './TaxRateDetailsContentActionsBar';
+import { TaxRateDetailsContentBoot } from './TaxRateDetailsContentBoot';
+import { DrawerBody, DrawerHeaderContent } from '@/components';
+import TaxRateDetailsContentDetails from './TaxRateDetailsContentDetails';
+import { DRAWERS } from '@/constants/drawers';
+
+interface TaxRateDetailsContentProps {
+  taxRateid: number;
+}
+
+export default function TaxRateDetailsContent({
+  taxRateId,
+}: TaxRateDetailsContentProps) {
+  return (
+    <TaxRateDetailsContentBoot taxRateId={taxRateId}>
+      <DrawerHeaderContent
+        name={DRAWERS.TAX_RATE_DETAILS}
+        title={'Tax Rate Details'}
+      />
+      <TaxRateDetailsContentActionsBar />
+
+      <DrawerBody>
+        <TaxRateDetailsContentDetails />
+      </DrawerBody>
+    </TaxRateDetailsContentBoot>
+  );
+}

packages/webapp/src/containers/TaxRates/drawers/TaxRateDetailsDrawer/TaxRateDetailsContentActionsBar.tsx

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Button,
+  Classes,
+  Intent,
+  NavbarDivider,
+  NavbarGroup,
+} from '@blueprintjs/core';
+import * as R from 'ramda';
+import { Can, DashboardActionsBar, Icon } from '@/components';
+import { AbilitySubject, TaxRateAction } from '@/constants/abilityOption';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { useTaxRateDetailsContext } from './TaxRateDetailsContentBoot';
+import { DialogsName } from '@/constants/dialogs';
+
+/**
+ * Tax rate details content actions bar.
+ * @returns {JSX.Element}
+ */
+function TaxRateDetailsContentActionsBar({
+  // #withDrawerActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { taxRateId } = useTaxRateDetailsContext();
+
+  // Handle edit tax rate.
+  const handleEditTaxRate = () => {
+    openDialog(DialogsName.TaxRateForm, { id: taxRateId });
+  };
+  // Handle delete tax rate.
+  const handleDeleteTaxRate = () => {
+    openAlert('tax-rate-delete', { taxRateId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Can I={TaxRateAction.Edit} a={AbilitySubject.TaxRate}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={'Edit Tax Rate'}
+            onClick={handleEditTaxRate}
+          />
+        </Can>
+        <Can I={TaxRateAction.Delete} a={AbilitySubject.Item}>
+          <NavbarDivider />
+          <Button
+            className={Classes.MINIMAL}
+            text={'Delete'}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteTaxRate}
+          />
+        </Can>
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default R.compose(
+  withDrawerActions,
+  withDialogActions,
+  withAlertsActions
+)(TaxRateDetailsContentActionsBar);

packages/webapp/src/containers/TaxRates/drawers/TaxRateDetailsDrawer/TaxRateDetailsContentBoot.tsx

@@ -0,0 +1,40 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import { DrawerLoading } from '@/components';
+import { useTaxRate } from '@/hooks/query/taxRates';
+
+const TaxRateDetailsContext = createContext();
+
+interface TaxRateDetailsContentBootProps {
+  taxRateId: number;
+}
+
+/**
+ * Tax rate details content boot.
+ * @returns {JSX}
+ */
+export function TaxRateDetailsContentBoot({
+  taxRateId,
+  ...props
+}: TaxRateDetailsContentBootProps) {
+  const {
+    data: taxRate,
+    isFetching: isTaxRateFetching,
+    isLoading: isTaxRateLoading,
+  } = useTaxRate(taxRateId, { keepPreviousData: true });
+
+  const provider = {
+    isTaxRateLoading,
+    isTaxRateFetching,
+    taxRate,
+    taxRateId,
+  };
+
+  return (
+    <DrawerLoading loading={isTaxRateLoading}>
+      <TaxRateDetailsContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+export const useTaxRateDetailsContext = () => useContext(TaxRateDetailsContext);

packages/webapp/src/containers/TaxRates/drawers/TaxRateDetailsDrawer/TaxRateDetailsContentDetails.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React from 'react';
+import { Card, DetailItem, DetailsMenu } from '@/components';
+import { useTaxRateDetailsContext } from './TaxRateDetailsContentBoot';
+import { Intent, Tag } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+export default function TaxRateDetailsContentDetails() {
+  const { taxRate } = useTaxRateDetailsContext();
+
+  return (
+    <Card>
+      <div>
+        <TaxRateHeader>
+          <TaxRateAmount>{taxRate.rate}%</TaxRateAmount>
+          <TaxRateActiveTag round={false} intent={Intent.SUCCESS} minimal>
+            Active
+          </TaxRateActiveTag>
+        </TaxRateHeader>
+        <DetailsMenu direction={'horizantal'} minLabelSize={200}>
+          <DetailItem label={'Tax Rate Name'} children={taxRate.name} />
+          <DetailItem label={'Code'} children={taxRate.code} />
+          <DetailItem
+            label={'Description'}
+            children={taxRate.description || '-'}
+          />
+          <DetailItem
+            label={'Non Recoverable'}
+            children={
+              <Tag round={false} intent={Intent.SUCCESS} minimal>
+                Enabled
+              </Tag>
+            }
+          />
+          <DetailItem
+            label={'Compound'}
+            children={
+              <Tag round={false} intent={Intent.SUCCESS} minimal>
+                Enabled
+              </Tag>
+            }
+          />
+        </DetailsMenu>
+      </div>
+    </Card>
+  );
+}
+
+const TaxRateHeader = styled(`div`)`
+  margin-bottom: 1.25rem;
+  display: flex;
+  align-items: flex-start;
+  margin-top: 0.25rem;
+`;
+
+const TaxRateAmount = styled('div')`
+  line-height: 1;
+  font-size: 30px;
+  color: #565b71;
+  font-weight: 600;
+  display: inline-block;
+`;
+
+const TaxRateActiveTag = styled(Tag)`
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-left: 1rem;
+`;

packages/webapp/src/containers/TaxRates/drawers/TaxRateDetailsDrawer/TaxRateDetailsDrawer.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { Drawer, DrawerHeaderContent, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+import { DRAWERS } from '@/constants/drawers';
+
+const TaxRateDetailsDrawerContent = React.lazy(
+  () => import('./TaxRateDetailsContent'),
+);
+
+/**
+ * Tax rate details drawer.
+ */
+function TaxRateDetailsDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { taxRateId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '650px', maxWidth: '650px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <TaxRateDetailsDrawerContent name={name} taxRateId={taxRateId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default R.compose(withDrawers())(TaxRateDetailsDrawer);