CRM Dashboard for managing agencies and users
1. Task
A web panel / CRM dashboard needs to be developed for managing multiple agencies and users.
The site should have a premium dark dashboard style:
- dark interface
- neon/glow elements
- sidebar on the left
- top statistics cards
- user table
- filters
- Split button
- adaptation for PC and mobile devices
Design reference: as shown in the attached screenshot.
2. Main sections of the site
The sidebar should have sections:
- Dashboard
- Users
- Risk Zone
- Agencies
- Split
- Administrators
- Changes
- Reports
- Settings
3. Authorization in CRM
Standard authorization is needed:
- login
- password
Google Authenticator is not needed for the CRM itself.
4. Connection to external working panel
Data should be automatically pulled from an external official panel.
The external panel does not have a public API, so the connection needs to be implemented through browser automation:
- Playwright
or
- Puppeteer
or
- Selenium
Logic for logging into the external panel:
1. The system opens the site that I will provide.
2. Enters the first login / password.
3. After that, enters the second login / password if required.
4. If Google Authenticator / 2FA appears — the system waits for the code input.
5. After entering the code, the authorization continues.
6. The active session is saved to avoid entering the code every time.
7. After successful login, the system retrieves data from the panel and transfers it to my CRM.
5. What data needs to be retrieved
For each user:
- photo / avatar
- nickname
- ID
- agency
- percentage
- profile coefficient
- 30 days coefficient
- earnings today
- earnings this month
- online today
- online this month
- level
- risk status
- risk reason
For agencies:
- list of agencies
- total earnings for the day
- total earnings for the month
- total online for the day
- total online for the month
- number of users
- number of users in the risk zone
6. Dashboard
At the top there should be cards:
- Earnings today
- Earnings this month
- Online today
- Online this month
- Users at risk
Also needed:
- Refresh data button
- Split button
- agency filter
- last update date
7. User table
The table should contain:
- User / ID
- Agency
- Percent
- Profile coefficient
- 30 days coefficient
- Earnings today
- Earnings this month
- Online today
- Online this month
- Level / Limit
- Risk status / Reason
- Actions
8. User percentage
The table should allow changing the user percentage.
Conditions:
- maximum 20%
- after changing, need to click Save
- the change should apply in the external panel through automation
- after saving, show status:
- success
- in progress
- error
9. Risk system
The CRM should automatically determine the risk status.
Statuses:
- All good
- Warning
- At Risk
The reason for the risk should be displayed in the table.
Example:
At Risk:
30 days coefficient 0.23 exceeds level B limit 0.18
Warning:
coefficient is close to the limit
All good:
both coefficients are below the limit
10. User levels
The level is determined by monthly earnings:
S:
45,000+ coins
limit: 0.25
A:
20,000 – 44,999 coins
limit: 0.25
B:
7,000 – 19,999 coins
limit: 0.18
C:
2,000 – 6,999 coins
limit: 0.18
D:
up to 2,000 coins
limit: 0.12
11. Split function
There should be a Split button on the main panel.
Logic:
- Split is initiated by the selected agency
- or by all agencies
- the system finds users with a balance greater than 100 coins
- performs split in the external panel through browser automation
- shows the result of the operation
After execution, show:
- processed users
- skipped users
- total split amount
- errors
- date
- duration
- operation status
Statuses:
- In Progress
- Completed
- Partially Completed
- Error
12. Administrators
A section for Administrators needs to be created.
The main admin can:
- create an administrator
- set login
- set password
- select available agencies
- grant permissions
Permissions:
- view only
- edit percentage
- split access
- admin management
If the administrator has access only to Agency1 and Agency2, they should not see other agencies.
13. Filters
Filters are needed:
- agency
- risk status
- level
- nickname
- ID
- earnings
- coefficient
14. Search
Search is needed by:
- nickname
- ID
15. Sorting
Sorting is needed by:
- earnings today
- earnings this month
- online today
- online this month
- profile coefficient
- 30 days coefficient
- level
- risk status
- percentage
16. Languages
The interface should support:
- RU
- EN
Language switching without reloading the page.
17. Technical part
Frontend:
- React
- Vite
- TypeScript
- TailwindCSS
Backend:
- Node.js / Express
or
- NestJS
Database:
- PostgreSQL
or
- MySQL
Automation:
- Playwright preferred
18. Data update
Data should be updated:
- manually via the Refresh data button
- automatically every 5–30 minutes
19. Logs
Need to store:
- update history
- split operation history
- automation errors
- percentage change history
- administrator actions
20. Deploy
The project needs to be installed on VDS.
To do:
- production build
- start frontend
- start backend
- configure database
- configure domain
- SSL
- launch instruction
21. Result
As a result, there should be a ready CRM dashboard site:
- beautiful interface as in the reference
- data pulled from the external panel
- percentage changes possible
- Split works
- administrator roles exist
- filters, search, sorting available
- RU / EN available
- project installed on VDS
- source code handed over to me
