Contract & Agent Management Dashboard

A fast, secure and modular platform for agents and administrators

Web dashboard for a company in the gambling sector (both land-based and online). They needed one fast tool where agents could manage contracts, custom forms, files, and other agents without the headache. I handled the UI and the React frontend.

Client
Gambling industry company
Industry
Gambling • B2B • Agent Network Management
Role
Frontend Consultant & UI Developer
Timeline
2024
Services
UI Design, Frontend Development, Component Architecture, UX Optimization
Stack
React, JavaScript, SCSS, Custom UI Libraries

Context and Idea

The Context The project came from the need to give agents and administrators a serious dashboard for managing contracts, agents, and files. The company is in gambling, a sector where security, speed, and a clear interface really matter. The idea was to have a single tool instead of a bunch of manual, disconnected processes — all in one fast, stable web environment.

Challenges

  • Create an advanced drag&drop form builder inspired by Google Forms
  • Build an OneDrive-style file manager with memory limits per agent
  • Manage complex UI with conditional logic, validations and live preview
  • Maintain high performance despite large amounts of data handled

The Solution

I split the system into modules: dashboard, agent management, form builder, and file manager. Form Builder Google Forms-style: drag&drop components, field editor, validation with a JS library, and a live preview on the side. It was used to build the forms sent to clients to collect contract data. File Manager OneDrive-style: a list view with folders, multiple uploads, drag&drop, progress bar, and a check on the space each agent uses. Agent Management Cards with agent data, available space, permissions, and assignments. For admins, filterable and sortable tables. In every section the goal was the same: visual cleanliness and performance that holds up even with a lot of data.

Key Features

  • Modular form builder with drag & drop
  • Live form preview
  • Dynamic field editor (text, select, upload)
  • File manager with drag & drop, multiple uploads and progress bar
  • Agent management with roles, permissions and assigned memory
  • Main dashboard with activity overview and contracts

Development and Technologies

Modular structure, all built on reusable React components. Drag&drop with dedicated libraries. Form validation with a JS library. File upload with memory management, progress bar, and real-time feedback. A fully custom UI, with complete stylistic freedom. Working side by side with the backend on API integration.

Results

  • Fast, modern and fully responsive interface
  • Reduced management times for agents and admins
  • Highly customizable form system
  • Intuitive file manager similar to familiar solutions
  • Reusable components and scalable front-end architecture

Conclusion

A big, technical project — the kind that makes you grow: lots of complex interfaces that still had to stay simple to use. For me it was a great exercise in product design and frontend, always with an eye on modularity, performance, and usability.

← Projects