TL;DR

Jusmila-ის ადმინი — ცალკე SPA Vite + React 18-ზე, ხელმისაწვდომი მხოლოდ საწყობის თანამშრომლებისთვის და მენეჯერისთვის. მართავს 10 000+ ნაწილის კატალოგს, შეკვეთების რიგს, მომწოდებლების იმპორტს, მიწოდების ზონებს რუკაზე და ჩაშენებულ session replay-ს UX-პრობლემების გასარჩევად.

ადმინის მიმოხილვა

ადმინი — სისტემის მეორე ნახევარია. ვიტრინაზე მყიდველი ხედავს კატალოგსა და აფორმებს შეკვეთას. ადმინში საწყობის თანამშრომელი ამუშავებს შეკვეთებს და ინახავს კატალოგს აქტუალურად. მათ შორის — საერთო NestJS API.

კატალოგი

ადმინის მთავარი ეკრანი — პროდუქტების სია ფილტრებით: მარაგის სტატუსი, კატეგორია, მომწოდებელი. შეიძლება ახალი ბარათის შექმნა, არსებულის რედაქტირება (სახელი, აღწერა, ფასები, ფოტოები, თავსებადობა), მასობრივი ნაშთების განახლება.

თითო ნაწილს აქვს fitment ცხრილი (თავსებადობა): რომელი მოტოციკლის მოდელები ერგება, რომელი წლიდან. ეს ცხრილი საჭიროა «მოდელით» ფილტრისთვის ვიტრინაზე. მის გარეშე კლიენტი ვერ გაიგებს, მოერგება თუ არა ნაწილი მის მოტოციკლს.

კატეგორიები — ხის სტრუქტურით: მოტოციკლები → სახარჯი მასალები → მუხრუჭის სისტემები → ნაკრებები. ახალი პროდუქტის დამატებისას ირჩევ ფოთლის კატეგორიას, და ვიტრინა ავტომატურად ჯდება შესაბამის ჩამონათვალში.

შეკვეთები

შეკვეთების რიგი — მთავარი ოპერაციული ეკრანი. თანამშრომელი ხედავს ყველა ახალ შეკვეთას რეალურ დროში (Socket.IO). თითო შეკვეთაზე — პოზიციები SKU-ებითა და რაოდენობით, მიწოდების მისამართი, გადახდის მეთოდი, სტატუსი.

შეკვეთის ცხოვრების ციკლი: new → confirmed → picking → packed → shipped → delivered. თითო გადასვლაზე კლიენტი იღებს შეტყობინებას.

თუ საწყობში არ აღმოჩნდა ყველა პოზიცია (ნაშთების სხვაობა), თანამშრომელი ცვლის შეკვეთის სტატუსს partial-ად, უთითებს რა აკლია, კლიენტს მიდის წერილი ვარიანტებით — დაელოდოს, შეცვალოს, გააუქმოს.

იმპორტი

ცალკე განყოფილება იმპორტ-სკრიპტებისთვის. ამჟამად მუშაობს pipeline-ები mototex-სა და anjese-სთვის — ეს მომწოდებლები არიან, რომლებსაც აქვთ თავიანთი კატალოგი საჯარო ვებში. იმპორტი იწყება ადმინიდან ღილაკით; შედეგი — რეალურ დროში ლოგი Socket.IO-ით: რომელი SKU-ები განახლდა, რომელი დაემატა, რომელი გამოიტოვა კონფლიქტების გამო.

გადახურვის ქვეშ — chrome-devtools MCP: იხსნება რეალური ბრაუზერი, იპარსება პროდუქტების ბარათები, SKU-ები და ფასები, შემდეგ ეგზავნება განახლების რიგში API-ით.

რუკები და ზონები

ინტეგრირებულია Leaflet — ოპერატორს შეუძლია ნახოს მიწოდების ზონები პოლიგონების სახით ლიტვის რუკაზე. თითო ზონის შიგნით — წესები: შეკვეთის მინიმალური თანხა, მიწოდების დრო, ფასნამატი მანძილისთვის. მენეჯერს შეუძლია გადახაზოს ზონის საზღვრები კოდის შეცვლის გარეშე.

შეკვეთის გაფორმებისას კლიენტი შემოაქვს მისამართი, ის გადადის კოორდინატებად, და სისტემა ამოწმებს, რომელ ზონაშია. არც ერთში — «მიწოდება არ ფარავს თქვენს რაიონს».

Session replay

ადმინში ყველაზე უჩვეულო — ჩაშენებული rrweb-player. როცა კლიენტი იუწყება ბაგზე («ვერ ვამატებ კალათაში», «გადახდა ვერ მოხდა»), ოპერატორი ხსნის ამ კლიენტის სესიას, გადახვევას ჩანაწერით და ხედავს ზუსტ კლიკების თანმიმდევრობასა და DOM-ის მდგომარეობას.

rrweb წერს event-ებს კლიენტზე (პაროლებისა და გადახდის მონაცემების მასკირებით), აგზავნის backend-ზე, ის ინახავს მათ Postgres-ში. ადმინში player-ი აჩვენებს სესიას მინი-ვიდეოს სახით: შეიძლება გადახვევა, პაუზა, ფილტრი event-ის ტიპით.

ეს კრიტიკულია UX-დახვეწისთვის: «ჩემთან არ მუშაობს»-ის ნაცვლად ოპერატორი ხედავს კონკრეტულ ქცევას, და ინჟინერი იღებს გამეორებად რეპორტს.

ანალიტიკა

Recharts ხატავს ბაზისურ გრაფიკებს: გაყიდვები დღეებად, ტოპ კატეგორიები, კონვერსია მიწოდების ზონებად. ეს BI-დონე არ არის, ეს ოპერატიული შეჯამებაა — მენეჯერი ხსნის ადმინს, ხედავს კვირის გრაფიკს, იღებს გადაწყვეტილებას «უნდა დავამატოთ მძღოლები ამ ზონაში» ან «გავაფართოვოთ ასორტიმენტი ამ კატეგორიაში».

ექსპორტი და რეპორტები

jsPDF აგენერირებს ზედნადებებს, აქტებსა და რეპორტებს პირდაპირ ბრაუზერში. საწყობის თანამშრომელი ბეჭდავს ზედნადებს შეკვეთის აწყობისას; მენეჯერი გადმოაქვს თვის გაყიდვების რეპორტი PDF-ში.

წვდომა და როლები

ავთენტიფიკაცია — JWT NestJS Passport-ით. ორი ძირითადი როლი: manager (ყველაფერი, ფასიანი პოლიტიკის ჩათვლით) და warehouse (მხოლოდ შეკვეთები, ნაშთები და აწყობა). თუ ხვალ გამოჩნდება დისპეტჩერი ან მარკეტერი — ახალი როლის დამატება ეს permissions ცხრილის რედაქტირებაა, არა რეფაქტორი.