RomanNum3ral
/
whisper-money
mirror of https://github.com/whisper-money/whisper-money.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix accounts/index page grid

This commit is contained in:
Víctor Falcón 2025-12-08 17:12:33 +01:00
parent 3a6991484a
commit f260e933ca
2 changed files with 40 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
resources/js/components/accounts/account-list-card.tsx
View File

@ -65,29 +65,34 @@ export function AccountListCard({
<div className="flex max-w-full flex-col sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-start gap-3">
<div className="flex flex-col gap-1">
<h3 className="flex items-center gap-2 font-semibold">
{account.bank?.logo ? (
<img
src={account.bank.logo}
alt={account.bank.name}
className="size-4 rounded-full object-contain"
<Link
href={show.url(account.id)}
className="-my-1 -ml-1.5 flex items-center rounded-md px-1.5 py-1 transition-colors hover:bg-muted"
>
<h3 className="flex items-center gap-2 font-semibold">
{account.bank?.logo ? (
<img
src={account.bank.logo}
alt={account.bank.name}
className="size-4 rounded-full object-contain"
/>
) : (
<div className="flex size-4 items-center justify-center rounded-full bg-muted">
<span className="text-sm font-medium text-muted-foreground">
{account.bank?.name?.charAt(
0,
) || '?'}
</span>
</div>
)}
<EncryptedText
encryptedText={account.name}
iv={account.name_iv}
length={{ min: 8, max: 25 }}
className="truncate"
/>
) : (
<div className="flex size-4 items-center justify-center rounded-full bg-muted">
<span className="text-sm font-medium text-muted-foreground">
{account.bank?.name?.charAt(
0,
) || '?'}
</span>
</div>
)}
<EncryptedText
encryptedText={account.name}
iv={account.name_iv}
length={{ min: 8, max: 25 }}
className="truncate"
/>
</h3>
</h3>
</Link>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span>
{account.bank?.name || 'Unknown Bank'}

26
resources/js/pages/Accounts/Index.tsx
View File

@ -78,7 +78,7 @@ export default function AccountsIndex({ accounts }: Props) {
description="View and manage your bank accounts"
/>
<div className="">
<div className="grid sm:grid-cols-2 gap-4">
{ACCOUNT_TYPE_ORDER.map((type) => {
const accountsInGroup = groupedAccounts[type];
if (accountsInGroup.length === 0) return null;
@ -87,19 +87,19 @@ export default function AccountsIndex({ accounts }: Props) {
<>
{isLoading
? accountsInGroup.map((account) => (
<AccountListCard
key={account.id}
account={account}
loading={true}
/>
))
<AccountListCard
key={account.id}
account={account}
loading={true}
/>
))
: accountsInGroup.map((account) => (
<AccountListCard
key={account.id}
account={account}
onBalanceUpdated={refetch}
/>
))}
<AccountListCard
key={account.id}
account={account}
onBalanceUpdated={refetch}
/>
))}
</>
);
})}