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

feat(settings): Update account management UI and add sync functionality

This commit is contained in:
Víctor Falcón 2025-11-14 10:53:55 +01:00
parent 193ca59732
commit ab63edde2b
2 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/js/pages/settings/account.tsx
View File

@ -23,7 +23,7 @@ import { useRef, useState } from 'react';
const breadcrumbs: BreadcrumbItem[] = [
{
title: 'Account settings',
title: 'Bank accounts',
href: accountEdit().url,
},
];
@ -57,7 +57,7 @@ export default function Account({
return (
<AppLayout breadcrumbs={breadcrumbs}>
<Head title="Account settings" />
<Head title="Bank accounts" />
<SettingsLayout>
<div className="space-y-6">
@ -132,12 +132,12 @@ export default function Account({
{status ===
'verification-link-sent' && (
<div className="mt-2 text-sm font-medium text-green-600">
A new verification link has
been sent to your email
address.
</div>
)}
<div className="mt-2 text-sm font-medium text-green-600">
A new verification link has
been sent to your email
address.
</div>
)}
</div>
)}

39
resources/js/pages/settings/accounts.tsx
View File

@ -42,17 +42,24 @@ import {
import AppLayout from '@/layouts/app-layout';
import SettingsLayout from '@/layouts/settings/layout';
import { db } from '@/lib/dexie-db';
import { accountSyncService } from '@/services/account-sync';
import { type BreadcrumbItem } from '@/types';
import { type Account, formatAccountType } from '@/types/account';
const breadcrumbs: BreadcrumbItem[] = [
{
title: 'Accounts settings',
title: 'Bank accounts',
href: accountsIndex.url(),
},
];
function AccountActions({ account }: { account: Account }) {
function AccountActions({
account,
onSuccess,
}: {
account: Account;
onSuccess?: () => void;
}) {
const [editOpen, setEditOpen] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
@ -83,13 +90,13 @@ function AccountActions({ account }: { account: Account }) {
account={account}
open={editOpen}
onOpenChange={setEditOpen}
onSuccess={() => {}}
onSuccess={onSuccess}
/>
<DeleteAccountDialog
account={account}
open={deleteOpen}
onOpenChange={setDeleteOpen}
onSuccess={() => {}}
onSuccess={onSuccess}
/>
</>
);
@ -103,6 +110,10 @@ export default function Accounts() {
{},
);
const handleAccountCreated = async () => {
await accountSyncService.sync();
};
const columns: ColumnDef<Account>[] = [
{
accessorKey: 'name',
@ -180,7 +191,7 @@ export default function Accounts() {
cell: ({ row }) => (
<AccountActions
account={row.original}
onSuccess={loadAccounts}
onSuccess={handleAccountCreated}
/>
),
},
@ -205,12 +216,12 @@ export default function Accounts() {
return (
<AppLayout breadcrumbs={breadcrumbs}>
<Head title="Accounts settings" />
<Head title="Bank accounts" />
<SettingsLayout>
<div className="space-y-6">
<HeadingSmall
title="Accounts settings"
title="Bank accounts"
description="Manage your bank accounts"
/>
@ -230,7 +241,7 @@ export default function Accounts() {
}
className="max-w-sm"
/>
<CreateAccountDialog onSuccess={loadAccounts} />
<CreateAccountDialog onSuccess={handleAccountCreated} />
</div>
<div className="rounded-md border">
@ -249,12 +260,12 @@ export default function Accounts() {
{header.isPlaceholder
? null
: flexRender(
header
.column
.columnDef
.header,
header.getContext(),
)}
header
.column
.columnDef
.header,
header.getContext(),
)}
</TableHead>
);
},