Add bank logos and improve transaction table UI

- Add bank logos for BBVA, Indexa Capital, and ING
- Move bank logo from Bank column to Account column
- Make bank logos rounded-full in both custom bank form and transaction table
- Adjust description column max width from 500px to 400px
- Improve Account column layout with flex container and min-width

resources/js/components/accounts/custom-bank-form.tsx

@@ -143,7 +143,7 @@ export function CustomBankForm({
                                 <img
                                     src={value.logoPreview}
                                     alt="Bank logo preview"
-                                    className="size-5 object-contain"
+                                    className="rounded-full size-5 object-contain"
                                 />
                             ) : (
                                 <ImagePlus className="size-4 text-muted-foreground" />

resources/js/components/transactions/transaction-columns.tsx

@@ -117,7 +117,7 @@ export function createTransactionColumns({
             cell: ({ row }) => {
                 const transaction = row.original;
                 return (
-                    <div className="max-w-[150px] truncate md:max-w-[250px] lg:max-w-[500px]">
+                    <div className="max-w-[150px] truncate md:max-w-[250px] lg:max-w-[400px]">
                         <EncryptedText
                             encryptedText={transaction.description}
                             iv={transaction.description_iv}
@@ -135,38 +135,41 @@ export function createTransactionColumns({
                 const bank = row.original.bank;
                 return (
                     <div className="flex items-center gap-2 px-1">
-                        {bank?.logo && (
-                            <img
-                                src={bank.logo}
-                                alt={bank.name}
-                                className="h-6 w-6 rounded"
-                            />
-                        )}
                         <span>{bank?.name || 'N/A'}</span>
                     </div>
                 );
             },
+            enableHiding: true,
         },
         {
             accessorKey: 'account',
             meta: { label: 'Account' },
             header: 'Account',
             cell: ({ row }) => {
+                const bank = row.original.bank;
                 const account = row.original.account;
                 if (!account) {
                     return <div className="px-1">N/A</div>;
                 }
 
                 return (
-                    <EncryptedText
-                        encryptedText={account.name}
-                        iv={account.name_iv}
-                        length={{ min: 5, max: 10 }}
-                        className="max-w-[100px] truncate px-1"
-                    />
+                    <div className="flex min-w-[140px] items-center gap-2 px-1">
+                        {bank?.logo && (
+                            <img
+                                src={bank.logo}
+                                alt={bank.name}
+                                className="h-6 w-6 rounded-full"
+                            />
+                        )}
+                        <EncryptedText
+                            encryptedText={account.name}
+                            iv={account.name_iv}
+                            length={{ min: 5, max: 10 }}
+                            className="w-full truncate px-1"
+                        />
+                    </div>
                 );
             },
-            enableHiding: true,
         },
         {
             accessorKey: 'amount',