Dashboards
Camufacturing dashboard
A license-management dashboard with a searchable grid, bulk CSV import and live import progress.
Context / scope
Overview and scope
CAMufacturing is a license-management dashboard for a software vendor: staff manage the license records of customers across nine software products, from issue date and expiration to invoice number and reseller. The front end is Next.js 15 (App Router) with React 19, TypeScript, MUI 7 with the MUI X DataGrid, SCSS modules, Joi-validated forms and next-auth.
It sits next to a marketing site and a subscription app from the same client; the dashboard is the internal tool that keeps license data accurate.
Support and licensing staff need to find a customer's license quickly, see whether it is active, create records for new customers, and load hundreds of existing licenses at once instead of typing them in.
Two permission levels exist: regular staff and super admins. Destructive actions and the license download are only offered to super admins, so the grid reads the role and adapts its actions.
Front-end developer: built the dashboard UI, forms, validation, grid and the import and notification flows against the client's API.
Results
- Delivered a working license console: searchable, paginated license grid, create-with-user flow, bulk CSV import with live progress, notifications and role-aware actions. No usage or time-saving figures were recorded for this project, so none are claimed.
Interface / screens
Walkthrough
Screen 1 of 6: License grid. Real interface, sample data.
Behaviour / flows
Features and flows
License grid: server-paginated DataGrid with search, sorting and row selection kept in the URL query string, a status column that maps license and maintenance states to active or inactive, and CSV export.
Create and edit: a New Dataset form that creates a license for an existing user or creates the user and the license in one step. Fields cover software, type (educational or industrial), level (demo, partner, permanent, subscription), network, issue and expiration dates, invoice and reseller.
Bulk import: drag-and-drop or browse for a CSV or Excel file, an override-existing switch, and a live progress indicator driven by SignalR events until the import completes.
Notifications and settings: a notification panel fed by SignalR, and settings for account, notification preferences and license defaults. Authentication includes login, email verification, forgot and reset password.
Import safeguards
- The import form rejects an empty selection or more than one file and blocks another submission while an import is in progress.
- A successful upload request clears the selected filenames and resets the form; API errors appear in a toast.
Engineering / decisions
Architecture and decisions
Schemas drive validation: Joi schemas define the allowed values (the software, type, level and network enums) and swap between a variant that requires a user and one that creates a user, so one form covers both flows.
Auth is credentials-based next-auth with a JWT session in an httpOnly cookie. Middleware redirects signed-in users away from auth pages, protects every dashboard route and tracks the cookie variant used in production.
The data grid state (page, sort, search) lives in the URL so views are shareable and survive refresh. Long-running imports report progress through SignalR rather than polling, and the app shows a desktop-only message on small screens because the grid is built for wide layouts.
UI building blocks (inputs, selects with search and paginated loading hooks, modals, dropzone, password strength indicator) are small typed components styled with SCSS modules.
Clear completed import progress
Progress events are stored by operation ID. A completion event revalidates the license cache tag and removes that operation from progress state after a three-second delay.
Stack / tools
Technologies
- Next.js
- React
- TypeScript
- MUI
- MUI X DataGrid
- next-auth
- Joi
- SignalR
- SCSS