update: ConnectedAccounts page

app/Events/PlaidSuccess.php

@@ -8,9 +8,11 @@ use Illuminate\Queue\SerializesModels;
 
 class PlaidSuccess
 {
-    use Dispatchable, SerializesModels;
+    use Dispatchable;
+    use SerializesModels;
 
     public string $publicToken;
+
     public string $accessToken;
 
     public Company $company;

app/Events/StartTransactionImport.php

@@ -2,31 +2,31 @@
 
 namespace App\Events;
 
+use App\Models\Banking\ConnectedBankAccount;
 use App\Models\Company;
-use Illuminate\Broadcasting\Channel;
-use Illuminate\Broadcasting\InteractsWithSockets;
-use Illuminate\Broadcasting\PresenceChannel;
-use Illuminate\Broadcasting\PrivateChannel;
-use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
 use Illuminate\Foundation\Events\Dispatchable;
 use Illuminate\Queue\SerializesModels;
 
 class StartTransactionImport
 {
-    use Dispatchable, SerializesModels;
+    use Dispatchable;
+    use SerializesModels;
 
     public Company $company;
-    public $connectedBankAccountId;
-    public $selectedBankAccountId;
-    public $startDate;
+
+    public ConnectedBankAccount $connectedBankAccount;
+
+    public mixed $selectedBankAccountId;
+
+    public mixed $startDate;
 
     /**
      * Create a new event instance.
      */
-    public function __construct($company, $connectedBankAccountId, $selectedBankAccountId, $startDate)
+    public function __construct($company, $connectedBankAccount, $selectedBankAccountId, $startDate)
     {
         $this->company = $company;
-        $this->connectedBankAccountId = $connectedBankAccountId;
+        $this->connectedBankAccount = $connectedBankAccount;
         $this->selectedBankAccountId = $selectedBankAccountId;
         $this->startDate = $startDate;
     }

app/Filament/Company/Pages/Accounting/AccountChart.php

@@ -2,8 +2,8 @@
 
 namespace App\Filament\Company\Pages\Accounting;
 
-use App\Models\Accounting\Account as ChartModel;
 use App\Enums\Accounting\AccountCategory;
+use App\Models\Accounting\Account as ChartModel;
 use App\Models\Accounting\AccountSubtype;
 use App\Utilities\Accounting\AccountCode;
 use App\Utilities\Currency\CurrencyAccessor;
@@ -117,11 +117,11 @@ class AccountChart extends Page
                 ->disabled(static fn (string $operation, ?ChartModel $record) => $operation === 'edit' && $record?->default === true)
                 ->options($this->getChartSubtypeOptions($useActiveTab))
                 ->afterStateUpdated(static function (?string $state, Set $set): void {
-                   if ($state) {
-                       $companyId = auth()->user()->currentCompany->id;
-                       $generatedCode = AccountCode::generate($companyId, $state);
-                       $set('code', $generatedCode);
-                   }
+                    if ($state) {
+                        $companyId = auth()->user()->currentCompany->id;
+                        $generatedCode = AccountCode::generate($companyId, $state);
+                        $set('code', $generatedCode);
+                    }
                 }),
             TextInput::make('code')
                 ->label('Code')
@@ -154,8 +154,8 @@ class AccountChart extends Page
             AccountSubtype::where('category', $this->activeTab)->get() :
             AccountSubtype::all();
 
-        return $subtypes->groupBy(fn(AccountSubtype $subtype) => $subtype->type->getLabel())
-            ->map(fn(Collection $subtypes, string $type) => $subtypes->mapWithKeys(static fn (AccountSubtype $subtype) => [$subtype->id => $subtype->name]))
+        return $subtypes->groupBy(fn (AccountSubtype $subtype) => $subtype->type->getLabel())
+            ->map(fn (Collection $subtypes, string $type) => $subtypes->mapWithKeys(static fn (AccountSubtype $subtype) => [$subtype->id => $subtype->name]))
             ->toArray();
     }
 

app/Filament/Company/Pages/Service/ConnectedAccount.php

@@ -20,7 +20,7 @@ class ConnectedAccount extends Page
 
     protected static string $view = 'filament.company.pages.service.connected-account';
 
-    public function getTitle(): string|Htmlable
+    public function getTitle(): string | Htmlable
     {
         return translate(static::$title);
     }
@@ -48,7 +48,7 @@ class ConnectedAccount extends Page
         ];
     }
 
-    public function getMaxContentWidth(): MaxWidth|string|null
+    public function getMaxContentWidth(): MaxWidth | string | null
     {
         return MaxWidth::ScreenLarge;
     }

app/Filament/Company/Resources/Accounting/TransactionResource.php

@@ -4,7 +4,6 @@ namespace App\Filament\Company\Resources\Accounting;
 
 use App\Enums\DateFormat;
 use App\Filament\Company\Resources\Accounting\TransactionResource\Pages;
-use App\Filament\Company\Resources\Accounting\TransactionResource\RelationManagers;
 use App\Models\Accounting\Transaction;
 use App\Models\Banking\Account;
 use App\Models\Setting\Localization;
@@ -14,8 +13,6 @@ use Filament\Resources\Resource;
 use Filament\Support\Enums\FontWeight;
 use Filament\Tables;
 use Filament\Tables\Table;
-use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Database\Eloquent\SoftDeletingScope;
 use Illuminate\Support\Carbon;
 
 class TransactionResource extends Resource

app/Filament/Company/Resources/Accounting/TransactionResource/Pages/CreateTransaction.php

@@ -3,7 +3,6 @@
 namespace App\Filament\Company\Resources\Accounting\TransactionResource\Pages;
 
 use App\Filament\Company\Resources\Accounting\TransactionResource;
-use Filament\Actions;
 use Filament\Resources\Pages\CreateRecord;
 
 class CreateTransaction extends CreateRecord

app/Filament/Company/Resources/Banking/AccountResource.php

@@ -4,7 +4,6 @@ namespace App\Filament\Company\Resources\Banking;
 
 use App\Actions\OptionAction\CreateCurrency;
 use App\Enums\Accounting\AccountCategory;
-use App\Enums\Accounting\AccountType;
 use App\Enums\BankAccountType;
 use App\Facades\Forex;
 use App\Filament\Company\Resources\Banking\AccountResource\Pages;
@@ -25,7 +24,6 @@ use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Validation\Rules\Unique;
-use Livewire\Component as Livewire;
 use Wallo\FilamentSelectify\Components\ToggleButton;
 
 class AccountResource extends Resource
@@ -198,7 +196,7 @@ class AccountResource extends Resource
                     ->icon(static fn (BankAccount $record) => $record->isEnabled() ? 'heroicon-o-lock-closed' : null)
                     ->tooltip(static fn (BankAccount $record) => $record->isEnabled() ? 'Default Account' : null)
                     ->iconPosition('after')
-                    ->description(static fn (BankAccount $record) => $record->number ?: 'N/A')
+                    ->description(static fn (BankAccount $record) => $record->mask ?: 'N/A')
                     ->sortable(),
                 Tables\Columns\TextColumn::make('account.starting_balance')
                     ->localizeLabel('Current Balance')
@@ -300,8 +298,8 @@ class AccountResource extends Resource
 
         $subtypes = AccountSubtype::where('category', $category)->get();
 
-        return $subtypes->groupBy(fn(AccountSubtype $subtype) => $subtype->type->getLabel())
-            ->map(fn(Collection $subtypes, string $type) => $subtypes->mapWithKeys(static fn (AccountSubtype $subtype) => [$subtype->id => $subtype->name]))
+        return $subtypes->groupBy(fn (AccountSubtype $subtype) => $subtype->type->getLabel())
+            ->map(fn (Collection $subtypes, string $type) => $subtypes->mapWithKeys(static fn (AccountSubtype $subtype) => [$subtype->id => $subtype->name]))
             ->toArray();
     }
 }

app/Filament/Company/Resources/Banking/AccountResource/Pages/CreateAccount.php

@@ -3,17 +3,12 @@
 namespace App\Filament\Company\Resources\Banking\AccountResource\Pages;
 
 use App\Filament\Company\Resources\Banking\AccountResource;
-use App\Models\Banking\BankAccount;
-use App\Traits\HandlesResourceRecordCreation;
 use Filament\Resources\Pages\CreateRecord;
-use Filament\Support\Exceptions\Halt;
 use Illuminate\Database\Eloquent\Model;
-use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Log;
 
 class CreateAccount extends CreateRecord
 {
-
     protected static string $resource = AccountResource::class;
 
     protected function getRedirectUrl(): string

app/Filament/Company/Resources/Banking/AccountResource/Pages/EditAccount.php

@@ -6,9 +6,6 @@ use App\Filament\Company\Resources\Banking\AccountResource;
 use App\Traits\HandlesResourceRecordUpdate;
 use Filament\Actions;
 use Filament\Resources\Pages\EditRecord;
-use Filament\Support\Exceptions\Halt;
-use Illuminate\Database\Eloquent\Model;
-use Illuminate\Support\Facades\Auth;
 
 class EditAccount extends EditRecord
 {

app/Listeners/CreateConnectedAccount.php

@@ -6,8 +6,6 @@ use App\Events\PlaidSuccess;
 use App\Models\Banking\Institution;
 use App\Models\Company;
 use App\Services\PlaidService;
-use Illuminate\Contracts\Queue\ShouldQueue;
-use Illuminate\Queue\InteractsWithQueue;
 use Illuminate\Support\Facades\DB;
 
 class CreateConnectedAccount

app/Listeners/HandleTransactionImport.php

@@ -10,8 +10,6 @@ use App\Models\Company;
 use App\Models\Setting\Currency;
 use App\Services\PlaidService;
 use App\Utilities\Currency\CurrencyAccessor;
-use Illuminate\Contracts\Queue\ShouldQueue;
-use Illuminate\Queue\InteractsWithQueue;
 use Illuminate\Support\Facades\DB;
 
 class HandleTransactionImport
@@ -39,16 +37,10 @@ class HandleTransactionImport
     public function processTransactionImport(StartTransactionImport $event): void
     {
         $company = $event->company;
-        $connectedBankAccountId = $event->connectedBankAccountId;
+        $connectedBankAccount = $event->connectedBankAccount;
         $selectedBankAccountId = $event->selectedBankAccountId;
         $startDate = $event->startDate;
 
-        $connectedBankAccount = ConnectedBankAccount::find($connectedBankAccountId);
-
-        if ($connectedBankAccount === null) {
-            return;
-        }
-
         $accessToken = $connectedBankAccount->access_token;
 
         if ($selectedBankAccountId === 'new') {

app/Livewire/Company/Service/ConnectedAccount/ListInstitutions.php

@@ -12,36 +12,33 @@ use App\Services\PlaidService;
 use Filament\Actions\Action;
 use Filament\Actions\Concerns\InteractsWithActions;
 use Filament\Actions\Contracts\HasActions;
+use Filament\Forms\Components\Checkbox;
 use Filament\Forms\Components\DatePicker;
+use Filament\Forms\Components\Placeholder;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Concerns\InteractsWithForms;
 use Filament\Forms\Contracts\HasForms;
-use Filament\Forms\Form;
-use Filament\Forms\Get;
 use Filament\Notifications\Notification;
-use Filament\Support\Enums\MaxWidth;
+use Filament\Support\Enums\Alignment;
 use Illuminate\Contracts\View\View;
-use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
-use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Log;
-use JsonException;
 use Livewire\Attributes\Computed;
 use Livewire\Attributes\On;
 use Livewire\Component;
 use RuntimeException;
 
-class ListInstitutions extends Component implements HasForms, HasActions
+class ListInstitutions extends Component implements HasActions, HasForms
 {
-    use InteractsWithForms;
     use InteractsWithActions;
+    use InteractsWithForms;
 
     protected PlaidService $plaidService;
 
     public User $user;
 
-    public ?ConnectedBankAccount $connectedBankAccount = null;
+    public string $modalWidth;
 
     public function boot(PlaidService $plaidService): void
     {
@@ -54,7 +51,7 @@ class ListInstitutions extends Component implements HasForms, HasActions
     }
 
     #[Computed]
-    public function connectedInstitutions(): Collection|array
+    public function connectedInstitutions(): Collection | array
     {
         return Institution::withWhereHas('connectedBankAccounts')
             ->get();
@@ -66,58 +63,60 @@ class ListInstitutions extends Component implements HasForms, HasActions
             ->link()
             ->icon('heroicon-o-cloud-arrow-down')
             ->label('Start Importing Transactions')
-            ->modalWidth(MaxWidth::TwoExtraLarge)
+            ->modalWidth(fn () => $this->modalWidth)
+            ->modalFooterActionsAlignment(fn () => $this->modalWidth === 'screen' ? Alignment::Center : Alignment::Start)
             ->stickyModalHeader()
             ->stickyModalFooter()
-            ->record($this->connectedBankAccount)
-            ->mountUsing(function (array $arguments, Form $form) {
-                $connectedAccountId = $arguments['connectedBankAccount'];
-
-                $this->connectedBankAccount = ConnectedBankAccount::find($connectedAccountId);
-
-                $form
-                    ->fill($this->connectedBankAccount->toArray())
-                    ->operation('edit')
-                    ->model($this->connectedBankAccount);
-            })
+            ->record(fn (array $arguments) => ConnectedBankAccount::find($arguments['connectedBankAccount']))
             ->form([
+                Placeholder::make('import_from')
+                    ->label('Import Transactions From')
+                    ->content(static fn (ConnectedBankAccount $connectedBankAccount): View => view(
+                        'components.actions.transaction-import-modal',
+                        compact('connectedBankAccount')
+                    )),
+                Placeholder::make('info')
+                    ->hiddenLabel()
+                    ->visible(static fn (ConnectedBankAccount $connectedBankAccount) => $connectedBankAccount->bank_account_id === null)
+                    ->content(static fn (ConnectedBankAccount $connectedBankAccount) => 'If ' . $connectedBankAccount->name . ' already has transactions for an existing account, select the account to import transactions into.'),
                 Select::make('bank_account_id')
                     ->label('Select Account')
-                    ->visible(static fn (?ConnectedBankAccount $connectedBankAccount) => $connectedBankAccount?->bank_account_id === null)
-                    ->options(fn () => $this->getBankAccountOptions())
-                    ->required()
-                    ->placeholder('Select an account to start importing transactions for.'),
+                    ->visible(static fn (ConnectedBankAccount $connectedBankAccount) => $connectedBankAccount->bank_account_id === null)
+                    ->options(fn (ConnectedBankAccount $connectedBankAccount) => $this->getBankAccountOptions($connectedBankAccount))
+                    ->required(),
                 DatePicker::make('start_date')
                     ->label('Start Date')
                     ->required()
                     ->placeholder('Select a start date for importing transactions.'),
             ])
             ->action(function (array $arguments, array $data, ConnectedBankAccount $connectedBankAccount) {
-                $connectedBankAccountId = $arguments['connectedBankAccount'];
                 $selectedBankAccountId = $data['bank_account_id'] ?? $connectedBankAccount->bank_account_id;
                 $startDate = $data['start_date'];
                 $company = $this->user->currentCompany;
 
-                StartTransactionImport::dispatch($company, $connectedBankAccountId, $selectedBankAccountId, $startDate);
+                StartTransactionImport::dispatch($company, $connectedBankAccount, $selectedBankAccountId, $startDate);
 
                 unset($this->connectedInstitutions);
             });
     }
 
-    public function getBankAccountOptions(): array
+    public function getBankAccountOptions(ConnectedBankAccount $connectedBankAccount): array
     {
-        $institutionId = $this->connectedBankAccount->institution_id ?? null;
-
-        $options = BankAccount::query()
-            ->where('company_id', $this->user->currentCompany->id)
-            ->when($institutionId, static fn($query) => $query->where('institution_id', $institutionId))
-            ->whereDoesntHave('connectedBankAccount')
-            ->with('account')
-            ->get()
-            ->pluck('account.name', 'id')
-            ->toArray();
-
-        return ['new' => 'New Account'] + $options;
+        $institutionId = $connectedBankAccount->institution_id ?? null;
+        $options = ['new' => 'New Account'];
+
+        if ($institutionId) {
+            $options += BankAccount::query()
+                ->where('company_id', $this->user->currentCompany->id)
+                ->where('institution_id', $institutionId)
+                ->whereDoesntHave('connectedBankAccount')
+                ->with('account')
+                ->get()
+                ->pluck('account.name', 'id')
+                ->toArray();
+        }
+
+        return $options;
     }
 
     public function stopImportingTransactions(): Action
@@ -137,7 +136,7 @@ class ListInstitutions extends Component implements HasForms, HasActions
 
                 if ($connectedBankAccount) {
                     $connectedBankAccount->update([
-                        'import_transactions' => !$connectedBankAccount->import_transactions,
+                        'import_transactions' => ! $connectedBankAccount->import_transactions,
                     ]);
                 }
 
@@ -150,9 +149,28 @@ class ListInstitutions extends Component implements HasForms, HasActions
         return Action::make('deleteBankConnection')
             ->iconButton()
             ->icon('heroicon-o-trash')
-            ->requiresConfirmation()
+            ->color('danger')
             ->modalHeading('Delete Bank Connection')
-            ->modalDescription('Deleting this bank connection will stop the import of transactions for all accounts associated with this bank. Existing transactions will remain unchanged.')
+            ->modalWidth(fn () => $this->modalWidth)
+            ->modalFooterActionsAlignment(fn () => $this->modalWidth === 'screen' ? Alignment::Center : Alignment::Start)
+            ->stickyModalHeader()
+            ->stickyModalFooter()
+            ->record(fn (array $arguments) => Institution::find($arguments['institution']))
+            ->form([
+                Placeholder::make('accounts')
+                    ->hiddenLabel()
+                    ->content(static fn (Institution $institution): View => view(
+                        'components.actions.delete-bank-connection-modal',
+                        compact('institution')
+                    )),
+                Placeholder::make('info')
+                    ->hiddenLabel()
+                    ->content('Deleting this bank connection will stop the import of transactions for all accounts associated with this bank. Existing transactions will remain unchanged.'),
+                Checkbox::make('confirm')
+                    ->label('Yes, I want to delete this bank connection.')
+                    ->markAsRequired(false)
+                    ->required(),
+            ])
             ->action(function (array $arguments) {
                 $institutionId = $arguments['institution'];
 
@@ -183,7 +201,7 @@ class ListInstitutions extends Component implements HasForms, HasActions
 
             $this->dispatch('initializeLink', $plaidLinkToken)->self();
         } catch (RuntimeException) {
-            Log::error("Error creating Plaid token.");
+            Log::error('Error creating Plaid token.');
 
             $this->sendErrorNotification("We're currently experiencing issues connecting your account. Please try again in a few moments.");
         }

app/Livewire/UpdatePassword.php

@@ -10,11 +10,11 @@ use Filament\Forms\Form;
 use Filament\Notifications\Notification;
 use Filament\Support\Exceptions\Halt;
 use Illuminate\Contracts\Auth\Authenticatable;
+use Illuminate\Contracts\View\View;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Validation\Rules\Password;
 use Livewire\Component;
-use Illuminate\Contracts\View\View;
 use RuntimeException;
 
 /**
@@ -34,7 +34,7 @@ class UpdatePassword extends Component implements HasForms
         $this->fillForm();
     }
 
-    public function getUser(): Authenticatable|Model
+    public function getUser(): Authenticatable | Model
     {
         $user = Filament::auth()->user();
 

app/Livewire/UpdateProfileInformation.php

@@ -11,12 +11,12 @@ use Filament\Forms\Form;
 use Filament\Notifications\Notification;
 use Filament\Support\Exceptions\Halt;
 use Illuminate\Contracts\Auth\Authenticatable;
+use Illuminate\Contracts\View\View;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Http\UploadedFile;
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\HtmlString;
 use Livewire\Component;
-use Illuminate\Contracts\View\View;
 use RuntimeException;
 use Wallo\FilamentCompanies\Features;
 
@@ -37,7 +37,7 @@ class UpdateProfileInformation extends Component implements HasForms
         $this->fillForm();
     }
 
-    public function getUser(): Authenticatable|Model
+    public function getUser(): Authenticatable | Model
     {
         $user = Filament::auth()->user();
 

app/Models/Accounting/AccountSubtype.php

@@ -15,8 +15,8 @@ use Wallo\FilamentCompanies\FilamentCompanies;
 
 class AccountSubtype extends Model
 {
-    use HasFactory;
     use CompanyOwned;
+    use HasFactory;
 
     protected $table = 'account_subtypes';
 
@@ -35,7 +35,6 @@ class AccountSubtype extends Model
         'type' => AccountType::class,
     ];
 
-
     public function company(): BelongsTo
     {
         return $this->belongsTo(FilamentCompanies::companyModel(), 'company_id');

app/Models/Banking/BankAccount.php

@@ -2,7 +2,6 @@
 
 namespace App\Models\Banking;
 
-use App\Enums\BankAccountSubtype;
 use App\Enums\BankAccountType;
 use App\Models\Accounting\Account;
 use App\Traits\Blamable;
@@ -81,7 +80,7 @@ class BankAccount extends Model
     protected function mask(): Attribute
     {
         return Attribute::get(static function (mixed $value, array $attributes): ?string {
-            return $attributes['number'] ? '****' . substr($attributes['number'], -4) : null;
+            return $attributes['number'] ? '•••• ' . substr($attributes['number'], -4) : null;
         });
     }
 

app/Models/Banking/ConnectedBankAccount.php

@@ -62,7 +62,7 @@ class ConnectedBankAccount extends Model
     protected function maskedNumber(): Attribute
     {
         return Attribute::get(static function (mixed $value, array $attributes): ?string {
-            return $attributes['mask'] ? '****' . $attributes['mask'] : null;
+            return $attributes['mask'] ? '•••• ' . substr($attributes['mask'], -4) : null;
         });
     }
 

app/Observers/AccountObserver.php

@@ -55,19 +55,19 @@ class AccountObserver
     public function created(Account $account): void
     {
         //$account->histories()->create([
-           // 'company_id' => $account->company_id,
-          //  'account_id' => $account->id,
-           // 'type' => $account->type,
-          //  'name' => $account->name,
-          //  'number' => $account->number,
-           // 'currency_code' => $account->currency_code,
-         //   'opening_balance' => $account->opening_balance,
-         //   'balance' => $account->balance,
-         //   'exchange_rate' => $account->currency->rate,
-          //  'status' => AccountStatus::Open,
-          //  'actions' => ['account_created'],
-         //   'enabled' => $account->enabled,
-          //  'changed_by' => $account->created_by,
+        // 'company_id' => $account->company_id,
+        //  'account_id' => $account->id,
+        // 'type' => $account->type,
+        //  'name' => $account->name,
+        //  'number' => $account->number,
+        // 'currency_code' => $account->currency_code,
+        //   'opening_balance' => $account->opening_balance,
+        //   'balance' => $account->balance,
+        //   'exchange_rate' => $account->currency->rate,
+        //  'status' => AccountStatus::Open,
+        //  'actions' => ['account_created'],
+        //   'enabled' => $account->enabled,
+        //  'changed_by' => $account->created_by,
         //]);
     }
 
@@ -79,27 +79,27 @@ class AccountObserver
         //$actionsTaken = [];
 
         //foreach ($this->actions as $action => $attribute) {
-            //if ($account->isDirty($attribute)) {
-                //$actionsTaken[] = $action;
-           // }
+        //if ($account->isDirty($attribute)) {
+        //$actionsTaken[] = $action;
+        // }
         //}
 
         //if (count($actionsTaken) > 0) {
-            //$account->histories()->create([
-                //'company_id' => $account->company_id,
-               // 'account_id' => $account->id,
-               // 'type' => $account->getOriginal('type'),
-               // 'name' => $account->getOriginal('name'),
-               // 'number' => $account->getOriginal('number'),
-               // 'currency_code' => $account->getOriginal('currency_code'),
-               // 'opening_balance' => $account->getRawOriginal('opening_balance'),
-               // 'balance' => $account->getRawOriginal('balance'),
-               // 'exchange_rate' => $account->currency->getRawOriginal('rate'),
-               // 'status' => $account->getOriginal('status'),
-               // 'actions' => $actionsTaken,
-               // 'enabled' => $account->getOriginal('enabled'),
-               // 'changed_by' => $account->updated_by,
-            //]);
+        //$account->histories()->create([
+        //'company_id' => $account->company_id,
+        // 'account_id' => $account->id,
+        // 'type' => $account->getOriginal('type'),
+        // 'name' => $account->getOriginal('name'),
+        // 'number' => $account->getOriginal('number'),
+        // 'currency_code' => $account->getOriginal('currency_code'),
+        // 'opening_balance' => $account->getRawOriginal('opening_balance'),
+        // 'balance' => $account->getRawOriginal('balance'),
+        // 'exchange_rate' => $account->currency->getRawOriginal('rate'),
+        // 'status' => $account->getOriginal('status'),
+        // 'actions' => $actionsTaken,
+        // 'enabled' => $account->getOriginal('enabled'),
+        // 'changed_by' => $account->updated_by,
+        //]);
         //}
     }
 
@@ -133,8 +133,8 @@ class AccountObserver
         $defaultChartType = AccountType::CurrentAsset;
 
         //if ($account->type->isCreditCard()) {
-            //$defaultChartCategory = ChartCategory::Liability;
-            //$defaultChartType = ChartType::CurrentLiability;
+        //$defaultChartCategory = ChartCategory::Liability;
+        //$defaultChartType = ChartType::CurrentLiability;
         //}
 
         $subTypeId = $this->getSubTypeId($account->company_id, $defaultChartType);
@@ -170,7 +170,7 @@ class AccountObserver
             ->where('type', $type)
             ->first();
 
-        if (!$subType) {
+        if (! $subType) {
             $subType = AccountSubtype::where('company_id', $companyId)
                 ->where('type', $type)
                 ->first();

app/Observers/BankAccountObserver.php

@@ -2,12 +2,10 @@
 
 namespace App\Observers;
 
-use App\Enums\Accounting\AccountCategory;
 use App\Enums\Accounting\AccountType;
 use App\Models\Accounting\Account;
 use App\Models\Accounting\AccountSubtype;
 use App\Models\Banking\BankAccount;
-use Illuminate\Support\Facades\Log;
 
 class BankAccountObserver
 {
@@ -37,7 +35,7 @@ class BankAccountObserver
             ->where('type', $type)
             ->first();
 
-        if (!$subType) {
+        if (! $subType) {
             $subType = AccountSubtype::where('company_id', $companyId)
                 ->where('type', $type)
                 ->first();

app/Providers/EventServiceProvider.php

@@ -31,7 +31,6 @@ use App\Observers\CurrencyObserver;
 use Illuminate\Auth\Events\Registered;
 use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
 use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
-use Wallo\FilamentCompanies\Events\CompanyCreated;
 
 class EventServiceProvider extends ServiceProvider
 {

app/Providers/MacroServiceProvider.php

@@ -108,17 +108,17 @@ class MacroServiceProvider extends ServiceProvider
             $this
                 ->rules([
                     fn (Field $component): Closure => static function (string $attribute, $value, Closure $fail) use ($subtype, $component) {
-                    $subtype = $component->evaluate($subtype);
-                    $chartSubtype = AccountSubtype::find($subtype);
-                    $type = $chartSubtype->type;
+                        $subtype = $component->evaluate($subtype);
+                        $chartSubtype = AccountSubtype::find($subtype);
+                        $type = $chartSubtype->type;
 
-                    if (!AccountCode::isValidCode($value, $type)) {
-                        $message = AccountCode::getMessage($type);
+                        if (! AccountCode::isValidCode($value, $type)) {
+                            $message = AccountCode::getMessage($type);
 
-                        $fail($message);
-                    }
-                },
-            ]);
+                            $fail($message);
+                        }
+                    },
+                ]);
 
             return $this;
         });

app/Services/PlaidService.php

@@ -276,7 +276,7 @@ class PlaidService
         return $this->sendRequest('institutions/get_by_id', $data);
     }
 
-    public function syncTransactions(string $access_token, string|null $cursor = null, int $count = 100, array $options = []): object
+    public function syncTransactions(string $access_token, ?string $cursor = null, int $count = 100, array $options = []): object
     {
         $data = [
             'access_token' => $access_token,

app/Utilities/Plaid/AccountTypeMapper.php

@@ -7,7 +7,8 @@ use App\Enums\BankAccountType;
 
 class AccountTypeMapper
 {
-    public static function mapToEnums(string $plaidType, string $plaidSubtype): array {
+    public static function mapToEnums(string $plaidType, string $plaidSubtype): array
+    {
         $mappedType = self::mapType($plaidType);
         $mappedSubtype = self::mapSubtype($plaidType, $plaidSubtype);
 
@@ -17,7 +18,8 @@ class AccountTypeMapper
         ];
     }
 
-    private static function mapType(string $plaidType): BankAccountType {
+    private static function mapType(string $plaidType): BankAccountType
+    {
         return match ($plaidType) {
             'depository' => BankAccountType::Depository,
             'credit' => BankAccountType::Credit,

composer.lock

@@ -413,16 +413,16 @@
         },
         {
             "name": "aws/aws-sdk-php",
-            "version": "3.298.9",
+            "version": "3.299.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/aws/aws-sdk-php.git",
-                "reference": "db225c3a1c5dabfbb5071349cfb7e4c396c3d9ec"
+                "reference": "a0f87b8e8bfb9afd0ffd702fcda556b465eee457"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/db225c3a1c5dabfbb5071349cfb7e4c396c3d9ec",
-                "reference": "db225c3a1c5dabfbb5071349cfb7e4c396c3d9ec",
+                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/a0f87b8e8bfb9afd0ffd702fcda556b465eee457",
+                "reference": "a0f87b8e8bfb9afd0ffd702fcda556b465eee457",
                 "shasum": ""
             },
             "require": {
@@ -502,9 +502,9 @@
             "support": {
                 "forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
                 "issues": "https://github.com/aws/aws-sdk-php/issues",
-                "source": "https://github.com/aws/aws-sdk-php/tree/3.298.9"
+                "source": "https://github.com/aws/aws-sdk-php/tree/3.299.1"
             },
-            "time": "2024-02-13T19:08:16+00:00"
+            "time": "2024-02-16T19:08:34+00:00"
         },
         {
             "name": "aws/aws-sdk-php-laravel",
@@ -1210,16 +1210,16 @@
         },
         {
             "name": "doctrine/dbal",
-            "version": "3.8.1",
+            "version": "3.8.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/doctrine/dbal.git",
-                "reference": "c9ea252cdce4da324ede3d6c5913dd89f769afd2"
+                "reference": "a19a1d05ca211f41089dffcc387733a6875196cb"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/doctrine/dbal/zipball/c9ea252cdce4da324ede3d6c5913dd89f769afd2",
-                "reference": "c9ea252cdce4da324ede3d6c5913dd89f769afd2",
+                "url": "https://api.github.com/repos/doctrine/dbal/zipball/a19a1d05ca211f41089dffcc387733a6875196cb",
+                "reference": "a19a1d05ca211f41089dffcc387733a6875196cb",
                 "shasum": ""
             },
             "require": {
@@ -1303,7 +1303,7 @@
             ],
             "support": {
                 "issues": "https://github.com/doctrine/dbal/issues",
-                "source": "https://github.com/doctrine/dbal/tree/3.8.1"
+                "source": "https://github.com/doctrine/dbal/tree/3.8.2"
             },
             "funding": [
                 {
@@ -1319,7 +1319,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-02-03T17:33:49+00:00"
+            "time": "2024-02-12T18:36:36+00:00"
         },
         {
             "name": "doctrine/deprecations",
@@ -3220,16 +3220,16 @@
         },
         {
             "name": "laravel/socialite",
-            "version": "v5.12.0",
+            "version": "v5.12.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/socialite.git",
-                "reference": "ffeeb2cdf723b4c88b25479968e2d3a61a83dbe5"
+                "reference": "7dae1b072573809f32ab6dcf4aebb57c8b3e8acf"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/socialite/zipball/ffeeb2cdf723b4c88b25479968e2d3a61a83dbe5",
-                "reference": "ffeeb2cdf723b4c88b25479968e2d3a61a83dbe5",
+                "url": "https://api.github.com/repos/laravel/socialite/zipball/7dae1b072573809f32ab6dcf4aebb57c8b3e8acf",
+                "reference": "7dae1b072573809f32ab6dcf4aebb57c8b3e8acf",
                 "shasum": ""
             },
             "require": {
@@ -3286,7 +3286,7 @@
                 "issues": "https://github.com/laravel/socialite/issues",
                 "source": "https://github.com/laravel/socialite"
             },
-            "time": "2024-02-11T18:29:55+00:00"
+            "time": "2024-02-16T08:58:20+00:00"
         },
         {
             "name": "laravel/tinker",
@@ -4231,16 +4231,16 @@
         },
         {
             "name": "matomo/device-detector",
-            "version": "6.2.1",
+            "version": "6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/matomo-org/device-detector.git",
-                "reference": "19138b0c4b9ddf4ffd8e423d6af3764b7317cb0b"
+                "reference": "35efad75b31f2596701834d19f097497909572a4"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/matomo-org/device-detector/zipball/19138b0c4b9ddf4ffd8e423d6af3764b7317cb0b",
-                "reference": "19138b0c4b9ddf4ffd8e423d6af3764b7317cb0b",
+                "url": "https://api.github.com/repos/matomo-org/device-detector/zipball/35efad75b31f2596701834d19f097497909572a4",
+                "reference": "35efad75b31f2596701834d19f097497909572a4",
                 "shasum": ""
             },
             "require": {
@@ -4296,7 +4296,7 @@
                 "source": "https://github.com/matomo-org/matomo",
                 "wiki": "https://dev.matomo.org/"
             },
-            "time": "2024-01-05T09:03:21+00:00"
+            "time": "2024-02-16T16:26:57+00:00"
         },
         {
             "name": "monolog/monolog",

config/chart-of-accounts.php

@@ -382,7 +382,7 @@ return [
             ],
         ],
         'contra_expense' => [
-             'Contra Expenses' => [
+            'Contra Expenses' => [
                 'description' => 'Expenses that are deducted from gross expenses to arrive at net expenses. This includes purchase discounts, returns, and allowances.',
                 'multi_currency' => false,
                 'base_code' => '5900',
@@ -394,7 +394,7 @@ return [
                         'description' => 'The amount of money deducted from purchases due to discounts offered by suppliers for early payment or other reasons.',
                     ],
                 ],
-             ],
+            ],
         ],
         'uncategorized_expense' => [
             'Uncategorized Expense' => [

config/livewire.php

@@ -0,0 +1,159 @@
+<?php
+
+return [
+
+    /*
+    |---------------------------------------------------------------------------
+    | Class Namespace
+    |---------------------------------------------------------------------------
+    |
+    | This value sets the root class namespace for Livewire component classes in
+    | your application. This value will change where component auto-discovery
+    | finds components. It's also referenced by the file creation commands.
+    |
+    */
+
+    'class_namespace' => 'App\\Livewire',
+
+    /*
+    |---------------------------------------------------------------------------
+    | View Path
+    |---------------------------------------------------------------------------
+    |
+    | This value is used to specify where Livewire component Blade templates are
+    | stored when running file creation commands like `artisan make:livewire`.
+    | It is also used if you choose to omit a component's render() method.
+    |
+    */
+
+    'view_path' => resource_path('views/livewire'),
+
+    /*
+    |---------------------------------------------------------------------------
+    | Layout
+    |---------------------------------------------------------------------------
+    | The view that will be used as the layout when rendering a single component
+    | as an entire page via `Route::get('/post/create', CreatePost::class);`.
+    | In this case, the view returned by CreatePost will render into $slot.
+    |
+    */
+
+    'layout' => 'components.layouts.app',
+
+    /*
+    |---------------------------------------------------------------------------
+    | Lazy Loading Placeholder
+    |---------------------------------------------------------------------------
+    | Livewire allows you to lazy load components that would otherwise slow down
+    | the initial page load. Every component can have a custom placeholder or
+    | you can define the default placeholder view for all components below.
+    |
+    */
+
+    'lazy_placeholder' => null,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Temporary File Uploads
+    |---------------------------------------------------------------------------
+    |
+    | Livewire handles file uploads by storing uploads in a temporary directory
+    | before the file is stored permanently. All file uploads are directed to
+    | a global endpoint for temporary storage. You may configure this below:
+    |
+    */
+
+    'temporary_file_upload' => [
+        'disk' => null,        // Example: 'local', 's3'              | Default: 'default'
+        'rules' => null,       // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
+        'directory' => null,   // Example: 'tmp'                      | Default: 'livewire-tmp'
+        'middleware' => null,  // Example: 'throttle:5,1'             | Default: 'throttle:60,1'
+        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs...
+            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
+            'mov', 'avi', 'wmv', 'mp3', 'm4a',
+            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
+        ],
+        'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated...
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | Render On Redirect
+    |---------------------------------------------------------------------------
+    |
+    | This value determines if Livewire will run a component's `render()` method
+    | after a redirect has been triggered using something like `redirect(...)`
+    | Setting this to true will render the view once more before redirecting
+    |
+    */
+
+    'render_on_redirect' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Eloquent Model Binding
+    |---------------------------------------------------------------------------
+    |
+    | Previous versions of Livewire supported binding directly to eloquent model
+    | properties using wire:model by default. However, this behavior has been
+    | deemed too "magical" and has therefore been put under a feature flag.
+    |
+    */
+
+    'legacy_model_binding' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Auto-inject Frontend Assets
+    |---------------------------------------------------------------------------
+    |
+    | By default, Livewire automatically injects its JavaScript and CSS into the
+    | <head> and <body> of pages containing Livewire components. By disabling
+    | this behavior, you need to use @livewireStyles and @livewireScripts.
+    |
+    */
+
+    'inject_assets' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Navigate (SPA mode)
+    |---------------------------------------------------------------------------
+    |
+    | By adding `wire:navigate` to links in your Livewire application, Livewire
+    | will prevent the default link handling and instead request those pages
+    | via AJAX, creating an SPA-like effect. Configure this behavior here.
+    |
+    */
+
+    'navigate' => [
+        'show_progress_bar' => true,
+        'progress_bar_color' => '#2299dd',
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | HTML Morph Markers
+    |---------------------------------------------------------------------------
+    |
+    | Livewire intelligently "morphs" existing HTML into the newly rendered HTML
+    | after each update. To make this process more reliable, Livewire injects
+    | "markers" into the rendered Blade surrounding @if, @class & @foreach.
+    |
+    */
+
+    'inject_morph_markers' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Pagination Theme
+    |---------------------------------------------------------------------------
+    |
+    | When enabling Livewire's pagination feature by using the `WithPagination`
+    | trait, Livewire will use Tailwind templates to render pagination views
+    | on the page. If you want Bootstrap CSS, you can specify: "bootstrap"
+    |
+    */
+
+    'pagination_theme' => 'tailwind',
+];

config/services.php

@@ -46,5 +46,5 @@ return [
         'client_id' => env('PLAID_CLIENT_ID'),
         'client_secret' => env('PLAID_CLIENT_SECRET'),
         'environment' => env('PLAID_ENVIRONMENT', 'sandbox'),
-    ]
+    ],
 ];

database/factories/Accounting/AccountFactory.php

@@ -10,7 +10,6 @@ use Illuminate\Database\Eloquent\Factories\Factory;
  */
 class AccountFactory extends Factory
 {
-
     /**
      * The name of the factory's corresponding model.
      */

package-lock.json

@@ -411,9 +411,9 @@
             }
         },
         "node_modules/@jridgewell/resolve-uri": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
-            "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+            "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
             "dev": true,
             "engines": {
                 "node": ">=6.0.0"
@@ -656,9 +656,9 @@
             }
         },
         "node_modules/browserslist": {
-            "version": "4.22.3",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
-            "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
+            "version": "4.23.0",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+            "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
             "dev": true,
             "funding": [
                 {
@@ -675,8 +675,8 @@
                 }
             ],
             "dependencies": {
-                "caniuse-lite": "^1.0.30001580",
-                "electron-to-chromium": "^1.4.648",
+                "caniuse-lite": "^1.0.30001587",
+                "electron-to-chromium": "^1.4.668",
                 "node-releases": "^2.0.14",
                 "update-browserslist-db": "^1.0.13"
             },
@@ -845,9 +845,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.668",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.668.tgz",
-            "integrity": "sha512-ZOBocMYCehr9W31+GpMclR+KBaDZOoAEabLdhpZ8oU1JFDwIaFY0UDbpXVEUFc0BIP2O2Qn3rkfCjQmMR4T/bQ==",
+            "version": "1.4.673",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.673.tgz",
+            "integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
             "dev": true
         },
         "node_modules/emoji-regex": {
@@ -1551,12 +1551,15 @@
             }
         },
         "node_modules/postcss-load-config/node_modules/lilconfig": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
-            "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.0.tgz",
+            "integrity": "sha512-p3cz0JV5vw/XeouBU3Ldnp+ZkBjE+n8ydJ4mcwBrOiXXPqNlrzGBqWs9X4MWF7f+iKUBu794Y8Hh8yawiJbCjw==",
             "dev": true,
             "engines": {
                 "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antonk52"
             }
         },
         "node_modules/postcss-nested": {

resources/views/components/actions/delete-bank-connection-modal.blade.php

@@ -0,0 +1,6 @@
+<span>Are you sure you want to delete your {{ $institution->name }} connection? Deleting this bank connection will remove the following connected accounts:</span>
+<ul class="list-disc list-inside p-2">
+    @foreach($institution->connectedBankAccounts as $connectedBankAccount)
+        <li>{{ $connectedBankAccount->name }}</li>
+    @endforeach
+</ul>

resources/views/components/actions/transaction-import-modal.blade.php

@@ -0,0 +1,18 @@
+<div class="rounded-lg bg-primary-300/10 shadow-sm ring-1 ring-gray-950/10 dark:ring-white/20 overflow-hidden">
+    <div class="flex items-center p-4 gap-x-2">
+        @if($connectedBankAccount->institution->logo_url)
+            <img src="{{ $connectedBankAccount->institution->logo_url }}" alt="{{ $connectedBankAccount->institution->name }}" class="h-10">
+        @else
+            <div class="flex-shrink-0 bg-platinum p-2 rounded-full dark:bg-gray-500/20">
+                <x-filament::icon
+                    icon="heroicon-o-building-library"
+                    class="h-6 w-6 text-gray-500 dark:text-gray-400"
+                />
+            </div>
+        @endif
+        <div>
+            <p class="text-sm font-medium leading-6 text-gray-900 dark:text-white">{{ $connectedBankAccount->institution->name }}</p>
+            <p class="text-sm leading-6 text-gray-600 dark:text-gray-200">{{ ucwords($connectedBankAccount->subtype) }} {{ $connectedBankAccount->masked_number }}</p>
+        </div>
+    </div>
+</div>

resources/views/livewire/company/service/connected-account/list-institutions.blade.php

@@ -2,7 +2,7 @@
     <div class="grid grid-cols-1 gap-4">
         @forelse($this->connectedInstitutions as $institution) {{-- Group connected accounts by institution --}}
             <section class="connected-account-section overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
-                <header class="connected-account-header bg-primary-300/10 flex flex-col gap-3 overflow-hidden sm:flex-row sm:items-center px-6 py-4">
+                <header class="connected-account-header bg-primary-300/10 px-6 py-4 flex flex-col sm:flex-row sm:items-center gap-3">
                     @if($institution->logo_url === null)
                         <div class="flex-shrink-0 bg-platinum p-2 rounded-full dark:bg-gray-500/20">
                             <x-filament::icon
@@ -11,16 +11,16 @@
                             />
                         </div>
                     @else
-                        <img src="{{ $institution->logo_url }}" alt="{{ $institution->name }}" class="h-10">
+                        <img src="{{ $institution->logo_url }}" alt="{{ $institution->name }}" class="h-10 object-contain object-left">
                     @endif
 
-                    <div class="grid flex-1 gap-y-1">
-                        <h3 class="connected-account-section-header-heading text-lg font-semibold leading-[1.4] text-gray-950 dark:text-white">
+                    <div class="flex-auto">
+                        <h3 class="connected-account-section-header-heading text-lg font-semibold leading-6 text-gray-950 dark:text-white">
                             {{ $institution->name }}
                         </h3>
 
                         {{-- Eventually we will need to assert last updated time based on when the last time one of the accounts for the institution last has transactions imported --}}
-                        <p class="connected-account-section-header-description text-sm text-gray-500 dark:text-gray-400">
+                        <p class="connected-account-section-header-description text-sm leading-6 text-gray-500 dark:text-gray-400">
                             {{ __('Last Updated') }} {{ $institution->updated_at->diffForHumans() }}
                         </p>
                     </div>
@@ -29,30 +29,28 @@
                 </header>
 
                 @foreach($institution->connectedBankAccounts as $connectedBankAccount)
-                    <div class="border-t-2 border-gray-200 dark:border-white/10">
-                        <div class="p-6">
-                            <div class="flex justify-between items-start">
-                                <div class="flex flex-col space-y-2">
-                                    <span class="account-name text-base font-medium text-gray-900 dark:text-white">{{ $connectedBankAccount->name }}</span>
-                                    <span class="account-type text-sm text-gray-600 dark:text-gray-200">{{  ucwords($connectedBankAccount->subtype) }} {{ $connectedBankAccount->masked_number }}</span>
-                                </div>
-
-                                @if($connectedBankAccount->bankAccount?->account)
-                                    <div class="account-balance flex justify-between text-base text-gray-700 dark:text-gray-200 space-x-1">
-                                        <strong>@money($connectedBankAccount->bankAccount->account->ending_balance, $connectedBankAccount->bankAccount->account->currency_code, true)</strong>
-                                        <p>{{ $connectedBankAccount->bankAccount->account->currency_code }}</p>
-                                    </div>
-                                @endif
+                    <div class="border-t-2 border-gray-200 dark:border-white/10 px-6 py-4">
+                        <div class="flex flex-col sm:flex-row items-start gap-y-2">
+                            <div class="grid flex-auto gap-y-2">
+                                <span class="account-name text-base font-medium leading-6 text-gray-900 dark:text-white">{{ $connectedBankAccount->name }}</span>
+                                <span class="account-type text-sm leading-6 text-gray-600 dark:text-gray-200">{{  ucwords($connectedBankAccount->subtype) }} {{ $connectedBankAccount->masked_number }}</span>
                             </div>
 
-                            {{-- Add the toggle button to import transactions or not --}}
-                            <div class="mt-4 flex items-center space-x-2">
-                                @if($connectedBankAccount->import_transactions)
-                                    {{ ($this->stopImportingTransactions)(['connectedBankAccount' => $connectedBankAccount->id]) }}
-                                @else
-                                    {{ ($this->startImportingTransactions)(['connectedBankAccount' => $connectedBankAccount->id]) }}
-                                @endif
-                            </div>
+                            @if($connectedBankAccount->bankAccount?->account)
+                                <div class="account-balance flex text-base leading-6 text-gray-700 dark:text-gray-200 space-x-1">
+                                    <strong>@money($connectedBankAccount->bankAccount->account->ending_balance, $connectedBankAccount->bankAccount->account->currency_code, true)</strong>
+                                    <p>{{ $connectedBankAccount->bankAccount->account->currency_code }}</p>
+                                </div>
+                            @endif
+                        </div>
+
+                        {{-- Add the toggle button to import transactions or not --}}
+                        <div class="mt-4">
+                            @if($connectedBankAccount->import_transactions)
+                                {{ ($this->stopImportingTransactions)(['connectedBankAccount' => $connectedBankAccount->id]) }}
+                            @else
+                                {{ ($this->startImportingTransactions)(['connectedBankAccount' => $connectedBankAccount->id]) }}
+                            @endif
                         </div>
                     </div>
                 @endforeach
@@ -96,6 +94,16 @@
     {{-- Initialize Plaid Link --}}
     @script
     <script>
+        let data = Alpine.reactive({ windowWidth: 'max-w-2xl' });
+
+        Alpine.effect(() => {
+            $wire.$set('modalWidth', data.windowWidth);
+        });
+
+        window.addEventListener('resize', () => {
+            data.windowWidth = window.innerWidth <= 480 ? 'screen' : 'max-w-2xl';
+        });
+
         $wire.on('initializeLink', token => {
             const handler = Plaid.create({
                 token: token,