chore: very close, before switching to grid

Author: PatrickDinh

src/assets/svg/pointer-left.svg

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgPointerLeft = (props: SVGProps<SVGSVGElement>) => <svg xmlnsXlink="http://www.w3.org/1999/xlink" width="11px" height="19px" preserveAspectRatio="xMinYMid meet" viewBox="159 229 7 10" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M 165.8 228.1 L 159.1 234.1 L 165.8 240.1 L 163.5 234.1 L 165.8 228.1 Z" fillRule="nonzero" fill="currentColor" stroke="none" /></svg>;
+export default SvgPointerLeft;

src/assets/svg/pointer-right.svg

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgPointerRight = (props: SVGProps<SVGSVGElement>) => <svg xmlnsXlink="http://www.w3.org/1999/xlink" width="11px" height="19px" preserveAspectRatio="xMinYMid meet" viewBox="340 139 1 13" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M 340.3 151.3 L 347 145.3 L 340.3 139.3 L 342.6 145.3 L 340.3 151.3 Z" fillRule="nonzero" fill="currentColor" stroke="none" /></svg>;
+export default SvgPointerRight;

src/features/common/components/svg/pointer-left.tsx

@@ -1,4 +1,6 @@
 import SvgCircle from '@/features/common/components/svg/circle'
+import SvgPointerLeft from '@/features/common/components/svg/pointer-left'
+import SvgPointerRight from '@/features/common/components/svg/pointer-right'
 import { cn } from '@/features/common/utils'
 import { useMemo, useState } from 'react'
 
@@ -65,12 +67,16 @@ function TransactionTableRow({
           if (index === foo.from)
             return (
               <td key={index} colSpan={foo.to - foo.from + 1}>
-                <div className={cn('flex items-center justify-center bg-red-200')}>
+                <div className={cn('flex items-center justify-center')}>
                   <SvgCircle width={20} height={20}></SvgCircle>
                   <div
-                    className={cn('border-primary border-b-2')}
-                    style={{ width: `calc(${(100 - 100 / (foo.to - foo.from + 1)).toFixed(2)}% - 20px)` }}
-                  ></div>
+                    style={{ width: `calc(${(100 - 100 / (foo.to - foo.from + 1)).toFixed(2)}% - 20px)`, height: '20px' }}
+                    className="relative text-primary"
+                  >
+                    {foo.direction === 'rightToLeft' && <SvgPointerLeft className={cn('absolute top-0 left-0')} />}
+                    <div className={cn('border-primary border-b-2 h-1/2')}></div>
+                    {foo.direction === 'leftToRight' && <SvgPointerRight className={cn('absolute top-0 right-0')} />}
+                  </div>
                   <SvgCircle width={20} height={20}></SvgCircle>
                 </div>
               </td>
@@ -123,7 +129,14 @@ export function GroupPage() {
                 name: 'Inner 5',
                 sender: 'Account 3',
                 receiver: 'Account 1',
-                transactions: [{ name: 'Inner 10', sender: 'Account 2', receiver: 'Account 6' }],
+                transactions: [
+                  {
+                    name: 'Inner 10',
+                    sender: 'Account 2',
+                    receiver: 'Account 6',
+                    transactions: [{ name: 'Inner 12', sender: 'Account 5', receiver: 'Account 6' }],
+                  },
+                ],
               },
             ],
           },
@@ -147,21 +160,27 @@ export function GroupPage() {
     ],
   }
   const accounts = extractSendersAndReceivers(group)
-  const allTransactionCounts = 15
+  const allTransactionCounts = 16
+
   return (
-    <table className={cn('')}>
+    <table className={cn('relative')}>
       <tr>
         <th></th>
         {accounts.map((account, index) => (
-          <th className={cn('w-32 p-2')} key={index}>
+          <th className={cn('w-32 p-2 h-10')} key={index}>
             {account}
           </th>
         ))}
       </tr>
-      <tbody style={{ height: `${allTransactionCounts * 40}px` }}>
+      <tbody className={cn('absolute top-10 right-0 -z-10')}>
         <tr>
           <td className={cn('p-0')}></td>
-          <td className={cn('p-0')} rowSpan={allTransactionCounts} colSpan={accounts.length}>
+          <td
+            className={cn('p-0')}
+            rowSpan={allTransactionCounts}
+            colSpan={accounts.length}
+            style={{ height: `${allTransactionCounts * 40}px`, width: `${128 * accounts.length}px` }}
+          >
             <div
               className={cn('grid h-full')}
               style={{
@@ -178,7 +197,7 @@ export function GroupPage() {
           </td>
         </tr>
       </tbody>
-      <tbody className="relative" style={{ top: `-${15 * 40}px` }}>
+      <tbody>
         {group.transactions.map((transaction, index, arr) => (
           <TransactionTableRow
             transaction={transaction}