# Issue #213: Frontend State Management Issues

## Problem

Several issues in the Pinia stores and Vue components:

### 1. Store State Not Persisted

The `members.js` store state (filters, pagination) is lost on page refresh. Users lose their filter settings.

### 2. No Optimistic UI Updates

When creating/updating/deleting members, the UI waits for the server response before updating. For better UX, implement optimistic updates:

```javascript
async function deleteMember(id) {
    // Optimistic: remove from local state immediately
    this.members = this.members.filter(m => m.id !== id)
    
    try {
        await axios.delete(url)
    } catch (err) {
        // Revert on failure
        await this.fetchMembers()
        throw err
    }
}
```

### 3. Stale Data After Navigation

After updating a member in `MemberDetail.vue`, navigating back to `MemberList.vue` may show stale data if the list wasn't refetched.

### 4. Error State Not Cleared

`store.clearError()` exists but isn't always called before retry operations, potentially showing old errors alongside new data.

## Impact

- Poor UX (page refresh loses context)
- Slower perceived performance (no optimistic updates)
- Confusing states when data is stale
- Confusing error messages

## Solution

1. Add `pinia-plugin-persistedstate` to persist store state
2. Implement optimistic updates in CRUD operations
3. Use `watch` to refetch data when navigating back
4. Ensure `clearError()` is called at the start of all fetch operations

## Tasks

- [ ] Add `pinia-plugin-persistedstate` dependency
- [ ] Configure persistence for filter and pagination state
- [ ] Implement optimistic updates in `deleteMember()`, `updateMember()`, `createMember()`
- [ ] Add navigation watchers to refetch stale data
- [ ] Verify `clearError()` is called before all fetch operations
- [ ] Test page refresh preserves filter state

## Labels

- enhancement
- frontend
- ux
- priority:medium