Enterprise applications are notorious for being cluttered, slow, and aesthetically outdated. For this project, our goal was to completely shatter that stereotype. We set out to design a sleek, dark themed, ultra modern frontend client for an electronics assembly factory ERP that feels like a premium SaaS product, while retaining the heavy, nested data-entry workflows required on a complex manufacturing floor.
Why We Chose Next.js 15, Tailwind, and shadcn/ui
To build a high-fidelity interface that runs smoothly on desktop and mobile, we chose a modern, future-proof stack:
- Next.js 15 (App Router): Leveraged Next.js for high-speed compiling with Turbopack, structured folder routing, and fast initial page loads.
- Tailwind CSS: Provided complete utility first control over spacing, colors, and responsive layouts without bloated CSS files.
- shadcn/ui: Allowed us to import raw, accessible Radix based components (like dialog modals, progress bars, and tabs) and style them directly to match our custom dark-mode aesthetic.
Key Frontend Innovations Developed
Collapsible Accordion Navigation Sidebar:
- Traditional sidebars get cluttered with dozens of links, leading to ugly scrollbars on smaller laptops. We grouped 14+ separate factory screens into 4 Collapsible Accordion Groups (General, Logistics, Production, and Business). Clicking on a category expands its sub-items smoothly, keeping the workspace compact, balanced, and 100% scrollbar-free.
Real-time Claims-Based Menu Filtering:
- Security should be intuitive. When a user logs in, the portal decodes the JWT token claims entirely on the client-side using native Base64 decoders. It reads the specific list of allowed modules (e.g., Inventory, BOM, Assembly) directly from the token, dynamically hiding or showing the sidebar options and action buttons in real-time.
Complex Nested Invoicing & Form Composers:
- We built complex, responsive forms such as the Sales Order Composer and New BOM Form. Users can dynamically add, update, and remove nested line items on the fly, with sub-totals, taxes, and total costs calculated instantly in local state.
Interactive Data Visualization (Recharts):
- Integrated Recharts to display live factory analytics. The Overview dashboard maps raw financial collections into smooth production velocity area curves and dynamic pie charts displaying factory QA pass/fail yields.
Elegant Custom Modals & Toast Alerts:
- To maintain a professional feel, we avoided raw browser alerts. Instead, we designed custom Delete Confirmation Modals matching the dark-mode aesthetic, and custom Floating Toast Notifications that pop up on actions (Create, Edit, Delete) and auto-dismiss after 3 seconds.
A major hurdle we solved was the classic Next.js Server Side Rendering (SSR) error: ReferenceError: localStorage is not defined. Since the server compiles components before sending them to the browser, accessing local storage or JWT tokens on the initial render crashes the page.
We resolved this by shifting all token decoding, session restoration, and dynamic menu filtering logic inside the React useEffect hook. This ensures the initial skeleton renders safely on the server, and the dynamic client side state is seamlessly activated once mounted in the browser.