CRM Dashboard do zarządzania agencjami i użytkownikami
1. Zadanie
Trzeba opracować panel webowy / CRM dashboard do zarządzania wieloma agencjami i użytkownikami.
Strona powinna wyglądać w stylu premium dark dashboard:
- ciemny interfejs
- neonowe/świecące elementy
- pasek boczny po lewej
- górne karty statystyk
- tabela użytkowników
- filtry
- przycisk Split
- adaptacja na PC i urządzenia mobilne
Referencja designu: jak na załączonym zrzucie ekranu.
2. Główne sekcje strony
W pasku bocznym powinny być sekcje:
- Dashboard
- Użytkownicy
- Strefa ryzyka
- Agencje
- Split
- Administratorzy
- Zmiany
- Raporty
- Ustawienia
3. Autoryzacja w CRM
Potrzebna jest zwykła autoryzacja:
- login
- hasło
Google Authenticator dla samej CRM nie jest potrzebny.
4. Połączenie z zewnętrznym panelem roboczym
Dane powinny być automatycznie pobierane z zewnętrznego oficjalnego panelu.
Nie ma publicznego API dla zewnętrznego panelu, dlatego trzeba zrealizować połączenie przez automatyzację przeglądarki:
- Playwright
lub
- Puppeteer
lub
- Selenium
Logika logowania do zewnętrznego panelu:
1. System otwiera stronę, którą dostarczę.
2. Wprowadza pierwszy login / hasło.
3. Następnie wprowadza drugi login / hasło, jeśli to konieczne.
4. Jeśli pojawi się Google Authenticator / 2FA — system czeka na wprowadzenie kodu.
5. Po wprowadzeniu kodu autoryzacja trwa dalej.
6. Aktywna sesja jest zapisywana, aby nie wprowadzać kodu za każdym razem.
7. Po pomyślnym logowaniu system pobiera dane z panelu i przekazuje je do mojej CRM.
5. Jakie dane trzeba pobierać
Dla każdego użytkownika:
- zdjęcie / avatar
- pseudonim
- ID
- agencja
- procent
- współczynnik profilu
- współczynnik 30 dni
- zarobki dzisiaj
- zarobki w tym miesiącu
- online dzisiaj
- online w tym miesiącu
- poziom
- status ryzyka
- powód ryzyka
Dla agencji:
- lista agencji
- całkowity zarobek za dzień
- całkowity zarobek za miesiąc
- całkowity online za dzień
- całkowity online za miesiąc
- liczba użytkowników
- liczba użytkowników w strefie ryzyka
6. Dashboard
Na górze powinny być karty:
- Zarobki dzisiaj
- Zarobki w tym miesiącu
- Online dzisiaj
- Online w tym miesiącu
- Użytkownicy w ryzyku
Potrzebne są również:
- przycisk Odśwież dane
- przycisk Split
- filtr według agencji
- data ostatniej aktualizacji
7. Tabela użytkowników
Tabela powinna zawierać:
- Użytkownik / ID
- Agencja
- Procent
- Współczynnik profilu
- Współczynnik 30 dni
- Zarobki dzisiaj
- Zarobki w tym miesiącu
- Online dzisiaj
- Online w tym miesiącu
- Poziom / Limit
- Status ryzyka / Powód
- Akcje
8. Procent użytkownika
W tabeli powinna być możliwość zmiany procentu użytkownika.
Warunki:
- maksymalnie 20%
- po zmianie trzeba kliknąć Zapisz
- zmiana powinna być stosowana w zewnętrznym panelu przez automatyzację
- po zapisaniu pokazywać status:
- sukces
- w toku
- błąd
9. System ryzyka
CRM powinna automatycznie określać status ryzyka.
Statusy:
- Wszystko w porządku
- Ostrzeżenie
- W ryzyku
Powód ryzyka powinien być pokazywany w tabeli.
Przykład:
W ryzyku:
współczynnik 30 dni 0.23 przekracza limit poziomu B 0.18
Ostrzeżenie:
współczynnik jest bliski limitu
Wszystko w porządku:
oba współczynniki są poniżej limitu
10. Poziomy użytkowników
Poziom określa się na podstawie miesięcznego zarobku:
S:
45,000+ monet
limit: 0.25
A:
20,000 – 44,999 monet
limit: 0.25
B:
7,000 – 19,999 monet
limit: 0.18
C:
2,000 – 6,999 monet
limit: 0.18
D:
do 2,000 monet
limit: 0.12
11. Funkcja Split
Na głównym panelu powinien być przycisk Split.
Logika:
- Split uruchamia się dla wybranej agencji
- lub dla wszystkich agencji
- system znajduje użytkowników z saldem większym niż 100 monet
- wykonuje split w zewnętrznym panelu przez automatyzację przeglądarki
- pokazuje wynik operacji
Po wykonaniu pokazywać:
- przetworzeni użytkownicy
- pominięci użytkownicy
- całkowita kwota splitu
- błędy
- data
- czas trwania
- status operacji
Statusy:
- W toku
- Zakończone
- Częściowo zakończone
- Błąd
12. Administratorzy
Trzeba zrobić sekcję Administratorzy.
Główny administrator może:
- tworzyć administratora
- ustalać login
- ustalać hasło
- wybierać dostępne agencje
- przyznawać uprawnienia
Uprawnienia:
- tylko do przeglądania
- edytować procent
- dostęp do splitu
- zarządzanie administratorami
Jeśli administrator ma dostęp tylko do Agency1 i Agency2, nie powinien widzieć pozostałych agencji.
13. Filtry
Potrzebne są filtry:
- agencja
- status ryzyka
- poziom
- pseudonim
- ID
- zarobki
- współczynnik
14. Wyszukiwanie
Potrzebne jest wyszukiwanie po:
- pseudonimie
- ID
15. Sortowanie
Potrzebne jest sortowanie po:
- zarobkach dzisiaj
- zarobkach w tym miesiącu
- online dzisiaj
- online w tym miesiącu
- współczynniku profilu
- współczynniku 30 dni
- poziomie
- statusie ryzyka
- procencie
16. Języki
Interfejs powinien wspierać:
- RU
- EN
Przełączanie języka bez przeładowania strony.
17. Część techniczna
Frontend:
- React
- Vite
- TypeScript
- TailwindCSS
Backend:
- Node.js / Express
lub
- NestJS
Baza danych:
- PostgreSQL
lub
- MySQL
Automatyzacja:
- Playwright preferowane
18. Aktualizacja danych
Dane powinny być aktualizowane:
- ręcznie przez przycisk Odśwież dane
- automatycznie co 5–30 minut
19. Logi
Trzeba przechowywać:
- historię aktualizacji
- historię operacji split
- błędy automatyzacji
- historię zmian procentów
- działania administratorów
20. Deploy
Trzeba zainstalować projekt na VDS.
Wykonać:
- produkcyjny build
- uruchomienie frontend
- uruchomienie backend
- konfigurację bazy danych
- konfigurację domeny
- SSL
- instrukcję uruchomienia
21. Wynik
W efekcie powinien być gotowy serwis CRM dashboard:
- ładny interfejs jak w referencji
- dane pobierane z zewnętrznego panelu
- możliwość zmiany procentów
- działa Split
- są role administratorów
- są filtry, wyszukiwanie, sortowanie
- są RU / EN
- projekt zainstalowany na VDS
- kod źródłowy przekazany mi