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.

4.1 KiB Raw Permalink Blame History