how are you structuring action heavy dashboards in Next.js without turning everything into client state?

I’m working through a Next.js dashboard pattern and would like to understand how others structure this.

The UI looks simple at first:

list of records
status badges
filters
detail drawer
action buttons
activity history

But the page gets messy once the dashboard is not just read-only.

Example actions:

mark item as resolved
pause a reminder
assign an owner
upload proof/photo
change priority
add internal note
trigger notification
show updated activity history immediately

The part I’m trying to avoid is pushing too much workflow logic into client components just because the UI is interactive.

What I’ve considered so far:

• Server Components for the main data view
• Client Components only for interactive controls
• Server Actions for mutations
• optimistic updates only for low-risk actions
• revalidatePath / revalidateTag after important changes
• separate activity log table instead of only updating current status
• keeping current state and history separate
• using route handlers only where external webhooks are involved

The open question is how to keep the structure clean as the dashboard grows.

For people building serious admin/internal dashboards in Next.js App Router:

Do you usually keep mutations in Server Actions, API routes, or a separate backend layer?

And how do you avoid the dashboard becoming a mix of client state, stale server data, and duplicated business logic?