fix(costs): rework the cost panel UX wise and apply prettier on the shared package

server/tests/e2e/budget.e2e.test.ts

@@ -31,6 +31,7 @@ const { svc } = vi.hoisted(() => ({
     verifyTripAccess: vi.fn(), listBudgetItems: vi.fn(), createBudgetItem: vi.fn(), updateBudgetItem: vi.fn(),
     deleteBudgetItem: vi.fn(), updateMembers: vi.fn(), toggleMemberPaid: vi.fn(), getPerPersonSummary: vi.fn(),
     calculateSettlement: vi.fn(), reorderBudgetItems: vi.fn(), reorderBudgetCategories: vi.fn(),
+    setItemPayers: vi.fn(), listSettlements: vi.fn(), createSettlement: vi.fn(), updateSettlement: vi.fn(), deleteSettlement: vi.fn(),
   },
 }));
 vi.mock('../../src/services/budgetService', () => svc);
@@ -104,4 +105,18 @@ describe('Budget e2e (real auth guard + temp SQLite)', () => {
     expect(res.status).toBe(400);
     expect(res.body).toEqual({ error: 'user_ids must be an array' });
   });
+
+  it('200 on settlement update with permission', async () => {
+    svc.updateSettlement.mockReturnValue({ id: 7, from_user_id: 2, to_user_id: 1, amount: 15 });
+    const res = await request(server).put('/api/trips/5/budget/settlements/7').set('Cookie', sessionCookie(1)).send({ from_user_id: 2, to_user_id: 1, amount: 15 });
+    expect(res.status).toBe(200);
+    expect(res.body).toEqual({ settlement: { id: 7, from_user_id: 2, to_user_id: 1, amount: 15 } });
+  });
+
+  it('404 on settlement update when it does not exist', async () => {
+    svc.updateSettlement.mockReturnValue(null);
+    const res = await request(server).put('/api/trips/5/budget/settlements/7').set('Cookie', sessionCookie(1)).send({ from_user_id: 2, to_user_id: 1, amount: 15 });
+    expect(res.status).toBe(404);
+    expect(res.body).toEqual({ error: 'Settlement not found' });
+  });
 });

server/tests/unit/nest/budget.controller.test.ts

@@ -111,6 +111,37 @@ describe('BudgetController (parity with the legacy /api/trips/:tripId/budget rou
       expect(new BudgetController(svc).deleteSettlement(user, '5', '7', 'sock')).toEqual({ success: true });
       expect(broadcast).toHaveBeenCalledWith('5', 'budget:settlement-deleted', { settlementId: 7 }, 'sock');
     });
+
+    it('PUT /settlements/:id 403 without budget_edit', () => {
+      const svc = makeService({ canEdit: vi.fn().mockReturnValue(false) });
+      expect(thrown(() => new BudgetController(svc).updateSettlement(user, '5', '7', { from_user_id: 1, to_user_id: 2, amount: 10 }))).toEqual({
+        status: 403, body: { error: 'No permission' },
+      });
+    });
+
+    it('PUT /settlements/:id 400 when a field is missing', () => {
+      const svc = makeService();
+      expect(thrown(() => new BudgetController(svc).updateSettlement(user, '5', '7', { from_user_id: 1, to_user_id: 2 }))).toEqual({
+        status: 400, body: { error: 'from_user_id, to_user_id and amount are required' },
+      });
+    });
+
+    it('PUT /settlements/:id 404 when missing', () => {
+      const svc = makeService({ updateSettlement: vi.fn().mockReturnValue(null) } as Partial<BudgetService>);
+      expect(thrown(() => new BudgetController(svc).updateSettlement(user, '5', '7', { from_user_id: 1, to_user_id: 2, amount: 10 }))).toEqual({
+        status: 404, body: { error: 'Settlement not found' },
+      });
+    });
+
+    it('PUT /settlements/:id updates and broadcasts', () => {
+      const updateSettlement = vi.fn().mockReturnValue({ id: 7, from_user_id: 2, to_user_id: 1, amount: 15 });
+      const broadcast = vi.fn();
+      const svc = makeService({ updateSettlement, broadcast } as Partial<BudgetService>);
+      const res = new BudgetController(svc).updateSettlement(user, '5', '7', { from_user_id: 2, to_user_id: 1, amount: 15 }, 'sock');
+      expect(res).toEqual({ settlement: { id: 7, from_user_id: 2, to_user_id: 1, amount: 15 } });
+      expect(updateSettlement).toHaveBeenCalledWith('7', '5', { from_user_id: 2, to_user_id: 1, amount: 15 });
+      expect(broadcast).toHaveBeenCalledWith('5', 'budget:settlement-updated', { settlement: { id: 7, from_user_id: 2, to_user_id: 1, amount: 15 } }, 'sock');
+    });
   });
 
   describe('POST /', () => {

server/tests/unit/services/budgetService.test.ts

@@ -17,7 +17,7 @@ const mockDb = vi.hoisted(() => {
 
 vi.mock('../../../src/db/database', () => mockDb);
 
-import { calculateSettlement } from '../../../src/services/budgetService';
+import { calculateSettlement, updateSettlement } from '../../../src/services/budgetService';
 import type { BudgetItem, BudgetItemMember, BudgetItemPayer } from '../../../src/types';
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
@@ -189,4 +189,60 @@ describe('calculateSettlement', () => {
     expect(result.flows).toHaveLength(1);
     expect(result.flows[0].amount).toBe(20);
   });
+
+  it('counts a settlement with no matching expense as an amount still to square up', () => {
+    // bob paid alice 30 but every expense behind it was deleted: alice now owes bob.
+    mockDb.db.prepare.mockImplementation((sql: string) => {
+      if (sql.includes('FROM budget_settlements')) {
+        return { all: vi.fn(() => [
+          { id: 1, trip_id: 1, from_user_id: 2, to_user_id: 1, amount: 30, from_username: 'bob', to_username: 'alice', from_avatar: null, to_avatar: null },
+        ]), get: vi.fn(), run: vi.fn() };
+      }
+      return { all: vi.fn(() => []), get: vi.fn(), run: vi.fn() };
+    });
+    const result = calculateSettlement(1);
+    const alice = result.balances.find(b => b.user_id === 1)!;
+    const bob = result.balances.find(b => b.user_id === 2)!;
+    expect(bob.balance).toBe(30);
+    expect(alice.balance).toBe(-30);
+    expect(result.flows).toEqual([
+      expect.objectContaining({ amount: 30, from: expect.objectContaining({ user_id: 1 }), to: expect.objectContaining({ user_id: 2 }) }),
+    ]);
+  });
+});
+
+// ── updateSettlement ──────────────────────────────────────────────────────────
+
+describe('updateSettlement', () => {
+  it('returns null when the settlement is not in the trip', () => {
+    mockDb.db.prepare.mockImplementation((sql: string) => {
+      if (sql.includes('SELECT id FROM budget_settlements')) {
+        return { get: vi.fn(() => undefined), all: vi.fn(), run: vi.fn() };
+      }
+      return { get: vi.fn(), all: vi.fn(() => []), run: vi.fn() };
+    });
+    expect(updateSettlement(7, 1, { from_user_id: 2, to_user_id: 1, amount: 10 })).toBeNull();
+  });
+
+  it('updates the row (rounded to cents) and returns the refreshed settlement', () => {
+    const run = vi.fn();
+    mockDb.db.prepare.mockImplementation((sql: string) => {
+      if (sql.includes('SELECT id FROM budget_settlements')) {
+        return { get: vi.fn(() => ({ id: 7 })), all: vi.fn(), run: vi.fn() };
+      }
+      if (sql.includes('UPDATE budget_settlements')) {
+        return { get: vi.fn(), all: vi.fn(), run };
+      }
+      if (sql.includes('FROM budget_settlements')) {
+        return { get: vi.fn(), all: vi.fn(() => [
+          { id: 7, trip_id: 1, from_user_id: 2, to_user_id: 1, amount: 10.13, from_username: 'bob', to_username: 'alice', from_avatar: null, to_avatar: null },
+        ]), run: vi.fn() };
+      }
+      return { get: vi.fn(), all: vi.fn(() => []), run: vi.fn() };
+    });
+
+    const res = updateSettlement(7, 1, { from_user_id: 2, to_user_id: 1, amount: 10.126 });
+    expect(run).toHaveBeenCalledWith(2, 1, 10.13, 7);
+    expect(res).toMatchObject({ id: 7, from_user_id: 2, to_user_id: 1, amount: 10.13 });
+  });
 });