From 5c466464a2587586320ff271b3adc5765ed2d823 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Thu, 23 Oct 2025 12:40:08 +0200
Subject: [PATCH] feat: optimize status tags

---
 .../webapp/src/components/Aside/Aside.tsx     |   4 +-
 .../MatchTransactionCheckbox.module.scss      |   6 +-
 .../MatchingTransaction.tsx                   | 228 +++++++++---------
 .../Bills/BillsLanding/components.tsx         |  31 +--
 .../CreditNotesLanding/components.tsx         |   6 +-
 .../CreditNotesLanding/components.tsx         |   6 +-
 .../Invoices/InvoicesLanding/components.tsx   |  31 +--
 .../Receipts/ReceiptsLanding/components.tsx   |   4 +-
 packages/webapp/src/style/_variables.scss     |   2 +-
 9 files changed, 153 insertions(+), 165 deletions(-)

diff --git a/packages/webapp/src/components/Aside/Aside.tsx b/packages/webapp/src/components/Aside/Aside.tsx
index 20ebc24f6..6fb27ffbb 100644
--- a/packages/webapp/src/components/Aside/Aside.tsx
+++ b/packages/webapp/src/components/Aside/Aside.tsx
@@ -1,5 +1,6 @@
 import { Button, Classes } from '@blueprintjs/core';
 import clsx from 'classnames';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 import { Box, BoxProps, Group } from '../Layout';
 import { Icon } from '../Icon';
 import styles from './Aside.module.scss';
@@ -21,6 +22,7 @@ export function Aside({
   classNames,
   className
 }: AsideProps) {
+  const isDarkMode = useIsDarkMode();
   const handleClose = () => {
     onClose && onClose();
   };
@@ -32,7 +34,7 @@ export function Aside({
           <Button
             aria-label="Close"
             className={Classes.DIALOG_CLOSE_BUTTON}
-            icon={<Icon icon={'smallCross'} color={'#000'} />}
+            icon={<Icon icon={'smallCross'} color={isDarkMode ? '#fff' : '#000'} />}
             minimal={true}
             onClick={handleClose}
           />
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
index d7eef6348..c5c2b1f76 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransactionCheckbox.module.scss
@@ -4,12 +4,14 @@
   --item-active-border: #88abdb;
   --item-label-text: #252a33;
   --item-date-text: #5c7080;
+  --item-border-hover: #c0c0c0;
   
   :global(.bp4-dark) & {
-    --item-background: var(--color-dark-gray4);
+    --item-background: var(--color-dark-gray3);
     --item-border: rgba(255, 255, 255, 0.2);
     --item-date-text: var(--color-light-gray1);
     --item-label-text: var(--color-light-gray4);    
+    --item-border-hover: rgba(255, 255, 255, 0.45);
   }
   background: var(--item-background);
   border-radius: 5px;
@@ -27,7 +29,7 @@
     }
   }
   &:hover:not(.active) {
-    border-color: #c0c0c0;
+    border-color: var(--item-border-hover);
   }
 }
 
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx
index 01c6736b8..7c928594b 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx
@@ -27,6 +27,7 @@ import {
 } from '../withBankingActions';
 import { withBanking } from '../withBanking';
 import { MatchingReconcileTransactionForm } from './MatchingReconcileTransactionAside/MatchingReconcileTransactionForm';
+import { useIsDarkMode } from '@/hooks/useDarkMode';
 import styles from './CategorizeTransactionAside.module.scss';
 
 const initialValues = {
@@ -119,67 +120,65 @@ const MatchingBankTransactionFormContent = R.compose(
   withBanking(({ openReconcileMatchingTransaction }) => ({
     openReconcileMatchingTransaction,
   })),
-)(
-  ({
-    // #withBanking
-    openReconcileMatchingTransaction,
-  }) => {
-    const {
-      isMatchingTransactionsFetching,
-      isMatchingTransactionsSuccess,
-      matches,
-    } = useMatchingTransactionBoot();
-    const [pending, setPending] = useState<null | {
-      refId: number;
-      refType: string;
-    }>(null);
+)(({
+  // #withBanking
+  openReconcileMatchingTransaction,
+}) => {
+  const {
+    isMatchingTransactionsFetching,
+    isMatchingTransactionsSuccess,
+    matches,
+  } = useMatchingTransactionBoot();
+  const [pending, setPending] = useState<null | {
+    refId: number;
+    refType: string;
+  }>(null);
 
-    const { setFieldValue } = useFormikContext();
+  const { setFieldValue } = useFormikContext();
 
-    // This effect is responsible for automatically marking a transaction as matched
-    // when the matching process is successful and not currently fetching.
-    useEffect(() => {
-      if (
-        pending &&
-        isMatchingTransactionsSuccess &&
-        !isMatchingTransactionsFetching
-      ) {
-        const foundMatch = matches?.find(
-          (m) =>
-            m.referenceType === pending?.refType &&
-            m.referenceId === pending?.refId,
-        );
-        if (foundMatch) {
-          setFieldValue(`matched.${pending.refType}-${pending.refId}`, true);
-        }
-        setPending(null);
+  // This effect is responsible for automatically marking a transaction as matched
+  // when the matching process is successful and not currently fetching.
+  useEffect(() => {
+    if (
+      pending &&
+      isMatchingTransactionsSuccess &&
+      !isMatchingTransactionsFetching
+    ) {
+      const foundMatch = matches?.find(
+        (m) =>
+          m.referenceType === pending?.refType &&
+          m.referenceId === pending?.refId,
+      );
+      if (foundMatch) {
+        setFieldValue(`matched.${pending.refType}-${pending.refId}`, true);
       }
-    }, [
-      isMatchingTransactionsFetching,
-      isMatchingTransactionsSuccess,
-      matches,
-      pending,
-      setFieldValue,
-    ]);
+      setPending(null);
+    }
+  }, [
+    isMatchingTransactionsFetching,
+    isMatchingTransactionsSuccess,
+    matches,
+    pending,
+    setFieldValue,
+  ]);
 
-    const handleReconcileFormSubmitSuccess = (payload) => {
-      setPending({ refId: payload.id, refType: payload.type });
-    };
+  const handleReconcileFormSubmitSuccess = (payload) => {
+    setPending({ refId: payload.id, refType: payload.type });
+  };
 
-    return (
-      <>
-        <MatchingBankTransactionContent />
+  return (
+    <>
+      <MatchingBankTransactionContent />
 
-        {openReconcileMatchingTransaction && (
-          <MatchingReconcileTransactionForm
-            onSubmitSuccess={handleReconcileFormSubmitSuccess}
-          />
-        )}
-        {!openReconcileMatchingTransaction && <MatchTransactionFooter />}
-      </>
-    );
-  },
-);
+      {openReconcileMatchingTransaction && (
+        <MatchingReconcileTransactionForm
+          onSubmitSuccess={handleReconcileFormSubmitSuccess}
+        />
+      )}
+      {!openReconcileMatchingTransaction && <MatchTransactionFooter />}
+    </>
+  );
+});
 
 function MatchingBankTransactionContent() {
   return (
@@ -296,73 +295,76 @@ function MatchTransactionField({
   );
 }
 
-interface MatchTransctionFooterProps extends WithBankingActionsProps {}
+interface MatchTransctionFooterProps extends WithBankingActionsProps { }
 
 /**
  * Renders the match transactions footer.
  * @returns {React.ReactNode}
  */
-const MatchTransactionFooter = R.compose(withBankingActions)(
-  ({
-    closeMatchingTransactionAside,
-    openReconcileMatchingTransaction,
-  }: MatchTransctionFooterProps) => {
-    const { submitForm, isSubmitting } = useFormikContext();
-    const totalPending = useGetPendingAmountMatched();
-    const showReconcileLink = useIsShowReconcileTransactionLink();
-    const submitDisabled = totalPending !== 0;
+const MatchTransactionFooter = R.compose(withBankingActions)(({
+  closeMatchingTransactionAside,
+  openReconcileMatchingTransaction,
+}: MatchTransctionFooterProps) => {
+  const { submitForm, isSubmitting } = useFormikContext();
+  const totalPending = useGetPendingAmountMatched();
+  const showReconcileLink = useIsShowReconcileTransactionLink();
+  const submitDisabled = totalPending !== 0;
+  const isDarkMode = useIsDarkMode();
 
-    const handleCancelBtnClick = () => {
-      closeMatchingTransactionAside();
-    };
-    const handleSubmitBtnClick = () => {
-      submitForm();
-    };
-    const handleReconcileTransaction = () => {
-      openReconcileMatchingTransaction(totalPending);
-    };
+  const handleCancelBtnClick = () => {
+    closeMatchingTransactionAside();
+  };
+  const handleSubmitBtnClick = () => {
+    submitForm();
+  };
+  const handleReconcileTransaction = () => {
+    openReconcileMatchingTransaction(totalPending);
+  };
 
-    return (
-      <Box className={styles.footer}>
-        <Box className={styles.footerTotal}>
-          <Group position={'apart'}>
-            {showReconcileLink && (
-              <AnchorButton
-                small
-                minimal
-                intent={Intent.PRIMARY}
-                onClick={handleReconcileTransaction}
-              >
-                Add Reconcile Transaction +
-              </AnchorButton>
-            )}
-            <Text
-              style={{ fontSize: 14, marginLeft: 'auto', color: '#404854' }}
-              tagName="span"
-            >
-              Pending <FormatNumber value={totalPending} currency={'USD'} />
-            </Text>
-          </Group>
-        </Box>
-
-        <Box className={styles.footerActions}>
-          <Group spacing={10}>
-            <Button
+  return (
+    <Box className={styles.footer}>
+      <Box className={styles.footerTotal}>
+        <Group position={'apart'}>
+          {showReconcileLink && (
+            <AnchorButton
+              small
+              minimal
               intent={Intent.PRIMARY}
-              style={{ minWidth: 85 }}
-              onClick={handleSubmitBtnClick}
-              loading={isSubmitting}
-              disabled={submitDisabled}
+              onClick={handleReconcileTransaction}
             >
-              Match
-            </Button>
-
-            <Button onClick={handleCancelBtnClick}>Cancel</Button>
-          </Group>
-        </Box>
+              Add Reconcile Transaction +
+            </AnchorButton>
+          )}
+          <Text
+            style={{
+              fontSize: 14,
+              marginLeft: 'auto',
+              color: isDarkMode ? 'var(--color-light-gray1)' : '#404854',
+            }}
+            tagName="span"
+          >
+            Pending <FormatNumber value={totalPending} currency={'USD'} />
+          </Text>
+        </Group>
       </Box>
-    );
-  },
-);
+
+      <Box className={styles.footerActions}>
+        <Group spacing={10}>
+          <Button
+            intent={Intent.PRIMARY}
+            style={{ minWidth: 85 }}
+            onClick={handleSubmitBtnClick}
+            loading={isSubmitting}
+            disabled={submitDisabled}
+          >
+            Match
+          </Button>
+
+          <Button onClick={handleCancelBtnClick}>Cancel</Button>
+        </Group>
+      </Box>
+    </Box>
+  );
+});
 
 MatchTransactionFooter.displayName = 'MatchTransactionFooter';
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx
index 413c45a3b..0222d6a97 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx
@@ -7,7 +7,6 @@ import {
   MenuItem,
   MenuDivider,
   Tag,
-  ProgressBar,
 } from '@blueprintjs/core';
 import clsx from 'classnames';
 import {
@@ -21,7 +20,6 @@ import {
 import {
   formattedAmount,
   safeCallback,
-  calculateStatus,
 } from '@/utils';
 import {
   BillAction,
@@ -108,42 +106,35 @@ export function StatusAccessor(bill) {
     <div className={'status-accessor'}>
       <Choose>
         <Choose.When condition={bill.is_fully_paid && bill.is_open}>
-          <span className={'fully-paid-icon'}>
-            <Icon icon="small-tick" iconSize={18} />
-          </span>
-          <span class="fully-paid-text">
+          <Tag round intent={Intent.SUCCESS}>
             <T id={'paid'} />
-          </span>
+          </Tag>
         </Choose.When>
+
         <Choose.When condition={bill.is_open}>
           <Choose>
             <Choose.When condition={bill.is_overdue}>
-              <span className={'overdue-status'}>
+              <Tag round intent={Intent.DANGER}>
                 {intl.get('overdue_by', { overdue: bill.overdue_days })}
-              </span>
+              </Tag>
             </Choose.When>
             <Choose.Otherwise>
-              <span className={'due-status'}>
+              <Tag round intent={Intent.WARNING}>
                 {intl.get('due_in', { due: bill.remaining_days })}
-              </span>
+              </Tag>
             </Choose.Otherwise>
           </Choose>
           <If condition={bill.is_partially_paid}>
-            <span className="partial-paid">
+            <Tag round intent={Intent.PRIMARY}>
               {intl.get('day_partially_paid', {
                 due: formattedAmount(bill.due_amount, bill.currency_code),
               })}
-            </span>
-            <ProgressBar
-              animate={false}
-              stripes={false}
-              intent={Intent.PRIMARY}
-              value={calculateStatus(bill.balance, bill.amount)}
-            />
+            </Tag>
           </If>
         </Choose.When>
+
         <Choose.Otherwise>
-          <Tag minimal={true} round={true}>
+          <Tag round>
             <T id={'draft'} />
           </Tag>
         </Choose.Otherwise>
diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.tsx
index e3204b62f..22a575816 100644
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.tsx
@@ -81,19 +81,19 @@ export function StatusAccessor(creditNote) {
     <div>
       <Choose>
         <Choose.When condition={creditNote.is_open}>
-          <Tag minimal={true} intent={Intent.WARNING} round={true}>
+          <Tag intent={Intent.WARNING} round>
             <T id={'open'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_closed}>
-          <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+          <Tag intent={Intent.SUCCESS} round>
             <T id={'closed'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_draft}>
-          <Tag minimal={true} round={true}>
+          <Tag round>
             <T id={'draft'} />
           </Tag>
         </Choose.When>
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/components.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/components.tsx
index 864121cac..4d8d8ab05 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/components.tsx
@@ -80,19 +80,19 @@ export function StatusAccessor(creditNote) {
     <div>
       <Choose>
         <Choose.When condition={creditNote.is_open}>
-          <Tag intent={Intent.WARNING} minimal={true} round={true}>
+          <Tag intent={Intent.WARNING} round>
             <T id={'open'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_closed}>
-          <Tag intent={Intent.SUCCESS} minimal={true} round={true}>
+          <Tag intent={Intent.SUCCESS} round>
             <T id={'closed'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_draft}>
-          <Tag intent={Intent.NONE} minimal={true} round={true}>
+          <Tag intent={Intent.NONE} round>
             <T id={'draft'} />
           </Tag>
         </Choose.When>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
index 8fc32a662..f5a2fb5b3 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
@@ -6,7 +6,6 @@ import {
   Menu,
   MenuItem,
   MenuDivider,
-  ProgressBar,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
@@ -20,7 +19,7 @@ import {
   Icon,
   Can,
 } from '@/components';
-import { formattedAmount, safeCallback, calculateStatus } from '@/utils';
+import { formattedAmount, safeCallback } from '@/utils';
 import {
   SaleInvoiceAction,
   PaymentReceiveAction,
@@ -31,44 +30,36 @@ export function InvoiceStatus({ invoice }) {
   return (
     <Choose>
       <Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
-        <span className={'fully-paid-icon'}>
-          <Icon icon="small-tick" iconSize={18} />
-        </span>
-        <span class="fully-paid-text">
+        <Tag intent={Intent.SUCCESS} round>
           <T id={'paid'} />
-        </span>
+        </Tag>
       </Choose.When>
 
       <Choose.When condition={invoice.is_delivered}>
         <Choose>
           <Choose.When condition={invoice.is_overdue}>
-            <span className={'overdue-status'}>
+            <Tag intent={Intent.DANGER} round>
               {intl.get('overdue_by', { overdue: invoice.overdue_days })}
-            </span>
+            </Tag>
           </Choose.When>
           <Choose.Otherwise>
-            <span className={'due-status'}>
+            <Tag intent={Intent.WARNING} round>
               {intl.get('due_in', { due: invoice.remaining_days })}
-            </span>
+            </Tag>
           </Choose.Otherwise>
         </Choose>
 
         <If condition={invoice.is_partially_paid}>
-          <span class="partial-paid">
+          <Tag intent={Intent.PRIMARY} round>
             {intl.get('day_partially_paid', {
               due: formattedAmount(invoice.due_amount, invoice.currency_code),
             })}
-          </span>
-          <ProgressBar
-            animate={false}
-            stripes={false}
-            intent={Intent.PRIMARY}
-            value={calculateStatus(invoice.balance_amount, invoice.balance)}
-          />
+          </Tag>
         </If>
       </Choose.When>
+
       <Choose.Otherwise>
-        <Tag minimal={true} round={true}>
+        <Tag round>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
index cf32e1845..c4fff0cbf 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
@@ -96,13 +96,13 @@ export function StatusAccessor(receipt) {
   return (
     <Choose>
       <Choose.When condition={receipt.is_closed}>
-        <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+        <Tag intent={Intent.SUCCESS} round>
           <T id={'closed'} />
         </Tag>
       </Choose.When>
 
       <Choose.Otherwise>
-        <Tag minimal={true} intent={Intent.WARNING} round={true}>
+        <Tag intent={Intent.WARNING} round>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>
diff --git a/packages/webapp/src/style/_variables.scss b/packages/webapp/src/style/_variables.scss
index c26f54269..2cead24ee 100644
--- a/packages/webapp/src/style/_variables.scss
+++ b/packages/webapp/src/style/_variables.scss
@@ -572,7 +572,7 @@ body.bp4-dark  {
 
   // Aside
   --color-aside-background: #fff;
-  --color-aside-background: var(--color-dark-gray2);
+  --color-aside-background: var(--color-dark-gray1);
 
   --color-aside-title-background: #fff;
   --color-aside-title-background: var(--color-dark-gray1);