fix: match transaction aside layout

packages/webapp/src/components/AppShell/AppShell.module.scss

@@ -1,5 +1,7 @@
 :root {
   --aside-topbar-offset: 60px;
+  --aside-width: 34%;
+  --aside-min-width: 400px;
 }
 
 .main{
@@ -9,11 +11,14 @@
 }
 
 .aside{
-  width: 500px;
+  width: var(--aside-width);
+  min-width: var(--aside-min-width);
   height: 100dvh;
   border-left: 1px solid rgba(17, 20, 24, 0.15);
   height: inherit;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .root {

packages/webapp/src/components/Aside/Aside.module.scss

@@ -1,3 +1,9 @@
+.root{
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+
 .title{
   align-items: center;
   background: #fff;
@@ -9,3 +15,9 @@
   z-index: 0;
   font-weight: 600;
 }
+
+.content{
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}

packages/webapp/src/components/Aside/Aside.tsx

@@ -20,7 +20,7 @@ export function Aside({
     onClose && onClose();
   };
   return (
-    <Box>
+    <Box className={styles.root}>
       <Group position="apart" className={styles.title}>
         {title}
 
@@ -34,7 +34,7 @@ export function Aside({
           />
         )}
       </Group>
-      <Box>{children}</Box>
+      <Box className={styles.content}>{children}</Box>
     </Box>
   );
 }

packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx

@@ -51,7 +51,8 @@ function RecognizedTransactionsTableRoot({
   const { mutateAsync: excludeBankTransaction } =
     useExcludeUncategorizedTransaction();
 
-  const { recognizedTransactions } = useRecognizedTransactionsBoot();
+  const { recognizedTransactions, isRecongizedTransactionsLoading } =
+    useRecognizedTransactionsBoot();
 
   // Retrieve table columns.
   const columns = useUncategorizedTransactionsColumns();
@@ -96,8 +97,8 @@ function RecognizedTransactionsTableRoot({
       columns={columns}
       data={recognizedTransactions}
       sticky={true}
-      loading={false}
+      loading={isRecongizedTransactionsLoading}
-      headerLoading={false}
+      headerLoading={isRecongizedTransactionsLoading}
       expandColumnSpace={1}
       expandToggleColumn={2}
       selectionColumnWidth={45}

packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/_components.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { safeCallback } from '@/utils';
+import { Icon } from '@/components';
 
 export function ActionsMenu({
   payload: { onCategorize, onExclude },
@@ -13,7 +14,11 @@ export function ActionsMenu({
         onClick={safeCallback(onCategorize, original)}
       />
       <MenuDivider />
-      <MenuItem text={'Exclude'} onClick={safeCallback(onExclude, original)} />
+      <MenuItem
+        text={'Exclude'}
+        onClick={safeCallback(onExclude, original)}
+        icon={<Icon icon="disable" iconSize={16} />}
+      />
     </Menu>
   );
 }

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/_utils.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as R from 'ramda';
 import { transformToForm, transfromToSnakeCase } from '@/utils';
 import { useCategorizeTransactionTabsBoot } from '@/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabsBoot';

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.module.scss

@@ -1,7 +1,7 @@
 
 .root {
-  position: relative;
+  flex: 1 1 auto;
-  padding-bottom: 110px;
+  overflow: auto;
 }
 
 .transaction {
@@ -25,9 +25,6 @@
 
 .footer {
   background-color: #fff;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
 }
 
 .footerActions {

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.module.scss

@@ -1,6 +1,10 @@
 
 .tabs :global .bp4-tab-panel{
   margin-top: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: calc(100dvh - 144px);
 }
 .tabs :global .bp4-tab-list{
   background: #fff;
@@ -11,3 +15,9 @@
 .tabs :global .bp4-large > .bp4-tab{
   font-size: 14px;
 }
+
+.tabs {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.module.scss

@@ -9,6 +9,11 @@
   &.active{
     border-color: #88ABDB;
     box-shadow: 0 0 0 2px rgba(136, 171, 219, 0.2);
+
+    .label,
+    .date {
+      color: rgb(21, 82, 200),
+    }
   }
 
   &:hover:not(.active){
@@ -33,3 +38,8 @@
   color: #10161A;
   font-size: 15px;
 }
+
+.date {
+  font-size: 12px;
+  color: #5C7080;
+}

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchTransaction.tsx

@@ -45,7 +45,7 @@ export function MatchTransaction({
     >
       <Stack spacing={3}>
         <span className={styles.label}>{label}</span>
-        <Text style={{ fontSize: 12, color: '#5C7080' }}>Date: {date}</Text>
+        <Text className={styles.date}>Date: {date}</Text>
       </Stack>
 
       <Checkbox

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransaction.tsx

@@ -58,9 +58,10 @@ export function MatchingBankTransaction() {
       uncategorizedTransactionId={uncategorizedTransactionId}
     >
       <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-        <Form>
+        <>
           <MatchingBankTransactionContent />
-        </Form>
+          <MatchTransactionFooter />
+        </>
       </Formik>
     </MatchingTransactionBoot>
   );
@@ -71,7 +72,6 @@ function MatchingBankTransactionContent() {
     <Box className={styles.root}>
       <PerfectMatchingTransactions />
       <GoodMatchingTransactions />
-      <MatchTransactionFooter />
     </Box>
   );
 }