# brainstorm: Redesign Frontend From Reference Image

## Goal

Refactor the JSP/CSS frontend so the library-management application visually matches the provided dashboard reference as closely as practical while preserving existing Servlet/JSP behavior, routes, role-based navigation, forms, tables, and Simplified Chinese interface copy.

## What I Already Know

* The user wants the frontend rebuilt to imitate the attached reference image as closely as possible.
* The reference image is a Chinese library management dashboard with a dark left sidebar, white top bar, dense white card panels, blue primary actions, rounded statistics cards, table sections, and operational shortcut tiles.
* The application is a JSP + Servlet + Maven WAR project, not a React/Vue SPA.
* Existing frontend files live under `src/main/webapp/WEB-INF/jsp/` with shared CSS in `src/main/webapp/static/css/app.css`.
* Current shared header fragment is `src/main/webapp/WEB-INF/jsp/common/header.jspf`.
* Existing pages include dashboard, login, catalog, book management, reader management, borrowing, reports, system logs, and user management JSPs.
* Frontend spec requires image-first implementation and Simplified Chinese display copy.

## Assumptions

* "Frontend" means the shared visual system across JSP pages, with the dashboard receiving the closest match because the reference image is a dashboard screenshot.
* The redesign should keep current endpoints, request parameter names, JSTL conditions, and server-rendered data contracts unchanged.
* New CSS classes and JSP structure are allowed when they improve visual fidelity, but no new frontend framework should be introduced.
* The reference image should be stored with the task for implementation/check agents.

## Open Questions

* Confirm scope: apply the reference style across the whole JSP frontend, not only the dashboard page.

## Requirements

* Build a left dark sidebar similar to the reference, including brand/title, role workbench buttons, module navigation, and compact footer/menu area.
* Build a top utility bar similar to the reference, including breadcrumb/location text, search field, notification/avatar/user controls where appropriate.
* Restyle the dashboard as a dense admin workspace with:
  * Large white dashboard shell.
  * Four metric cards with colored icon blocks and month-over-month text.
  * Search/filter panel.
  * Ranking/chart-like panel matching the screenshot's simple blue bar chart look.
  * Recent borrowing table and overdue table.
  * Book-management table.
  * Shortcut cards for reader management, report center, borrowing circulation, and system logs.
* Restyle shared tables, forms, buttons, badges, panels, empty states, and navigation so secondary pages feel consistent with the reference.
* Preserve existing JSP/Servlet behavior and role-based visibility.
* Keep user-visible copy in Simplified Chinese.
* Keep responsive behavior usable on narrower screens.

## Acceptance Criteria

* [ ] Dashboard layout visibly matches the reference image's structure, spacing, palette, and density.
* [ ] Shared navigation changes are reflected across existing JSP pages without breaking role-based links.
* [ ] Existing forms and tables remain functional and readable after the redesign.
* [ ] No React/Vue/SPA tooling is introduced.
* [ ] Maven build succeeds.

## Definition Of Done

* Tests/build run where available.
* JSP/CSS changes reviewed against frontend specs and the reference image.
* Task context files are curated for implement/check agents.
* Any reusable convention learned during the work is considered for spec update.

## Out Of Scope

* Backend behavior changes.
* Database schema changes.
* Replacing JSP with a JavaScript framework.
* Exact live charting libraries unless needed; a CSS/HTML approximation is acceptable for this visual refactor.

## Technical Notes

* Reference image copied to `.trellis/tasks/04-28-frontend-reference-redesign/research/reference-dashboard.png`.
* Visual notes are recorded in `.trellis/tasks/04-28-frontend-reference-redesign/research/reference-dashboard-visual-notes.md`.
* Relevant spec index: `.trellis/spec/frontend/index.md`.