feat(ProCanvas): retro game overhaul with log actions, challenges & achievements modals
- Complete ProCanvas redesign with retro sports game aesthetic - Card-game style photo frame with tilt, shimmer, corner star accents - Daily Missions card with weekly challenge + individual quest progress bars - Log Action card (Door Knocked, Lead Gained, Appointment Set, Client Meeting) - Each log action opens themed modal with relevant input fields - Challenges modal with 6 active challenges and progress tracking - Achievements modal with all badges, unlock status, descriptions - Nav bar tabs (Leaderboard, Challenges, Achievements) wired to modals - Rewards & Checkpoints with named stages (Daily Grind to Legend Run) - Smoother Hot Streak pulse animation (2.5s float + 3s pulse rings) - Hit The Map button with smooth pulsing glow animation - Grid pattern overlay in Leaderboard card - Light mode support via dark: Tailwind variants throughout - Top 3 badges displayed on profile card - Fixed dropdown option visibility in dark mode
This commit is contained in:
Satyam
@@ -0,0 +1,280 @@
|
||||
# HLD — High-Level Design Diagrams
|
||||
|
||||
**Scope:** LynkedUpPro CRM — Full System
|
||||
**Renders in:** GitHub, VS Code (Mermaid extension), GitLab, Notion
|
||||
|
||||
---
|
||||
|
||||
## Diagram 1 — System Context
|
||||
|
||||
Who uses the system, what it does, and what external services it depends on.
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph Users["👤 User Roles"]
|
||||
OWN([Owner])
|
||||
ADM([Admin])
|
||||
FA([Field Agent])
|
||||
CON([Contractor])
|
||||
SUB([Subcontractor])
|
||||
VEN([Vendor])
|
||||
CUS([Customer])
|
||||
end
|
||||
|
||||
subgraph LynkedUpPro["🏢 LynkedUpPro System"]
|
||||
FE["React 19 SPA\n(Vercel)"]
|
||||
BE["FastAPI Backend\n(Railway / Render)"]
|
||||
DB[(PostgreSQL 16)]
|
||||
end
|
||||
|
||||
subgraph External["☁️ External Services"]
|
||||
GROQ["Groq API\n(AI / LLM)"]
|
||||
S3["AWS S3\n(File Storage)"]
|
||||
SMTP["SendGrid\n(Email)"]
|
||||
end
|
||||
|
||||
OWN & ADM & FA & CON & SUB & VEN & CUS -->|"HTTPS browser"| FE
|
||||
FE -->|"REST /api/v1/ + JWT"| BE
|
||||
BE -->|"SQLAlchemy async"| DB
|
||||
BE -->|"httpx proxy"| GROQ
|
||||
BE -->|"boto3 SDK"| S3
|
||||
BE -->|"SMTP / SendGrid SDK"| SMTP
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Diagram 2 — System Components
|
||||
|
||||
Internal components of each layer and how they connect.
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
subgraph Frontend["Frontend — React SPA (Vite)"]
|
||||
direction TB
|
||||
AC["AuthContext\n(login / logout)"]
|
||||
MS["mockStore → ApiProvider\n(data layer)"]
|
||||
GC["GamificationContext\n(XP / levels)"]
|
||||
PAGES["Pages\n(Owner / Admin / Agent\nContractor / Vendor / Customer)"]
|
||||
CHAT["Chatbot Component\n(AI assistant)"]
|
||||
MAP["Maps Component\n(Leaflet + Polygons)"]
|
||||
end
|
||||
|
||||
subgraph Backend["Backend — FastAPI"]
|
||||
direction TB
|
||||
MW["Middleware\n(CORS · Rate Limit · Logging)"]
|
||||
AUTH_R["Auth Router\n(/api/v1/auth)"]
|
||||
ROUTERS["Feature Routers\n(properties · meetings · vendors\nprojects · invoices · documents\nusers · chatbot)"]
|
||||
SERVICES["Service Layer\n(business logic)"]
|
||||
DEPS["Dependencies\nget_db · get_current_user\nrequire_role()"]
|
||||
end
|
||||
|
||||
subgraph Data["Data Layer"]
|
||||
PG[(PostgreSQL\n16 tables)]
|
||||
S3_B["AWS S3\n(documents / COIs)"]
|
||||
end
|
||||
|
||||
subgraph Ext["External APIs"]
|
||||
GROQ_A["Groq API\nqwen-32b"]
|
||||
SG["SendGrid\n(alerts)"]
|
||||
end
|
||||
|
||||
Frontend -->|"JWT Bearer / httpOnly cookie"| MW
|
||||
MW --> AUTH_R
|
||||
MW --> ROUTERS
|
||||
AUTH_R --> DEPS
|
||||
ROUTERS --> DEPS
|
||||
DEPS --> SERVICES
|
||||
SERVICES --> PG
|
||||
SERVICES --> S3_B
|
||||
SERVICES -->|"RBAC-gated proxy"| GROQ_A
|
||||
SERVICES -->|"async trigger"| SG
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Diagram 3 — Role Access Zones
|
||||
|
||||
Which roles can access which portals and routes. Each role logs in through a single `/login` page and is routed to their portal based on JWT claims.
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
LOGIN["/login\nSingle Entry Point"]
|
||||
|
||||
LOGIN -->|"role = OWNER"| OWNER_ZONE
|
||||
LOGIN -->|"role = ADMIN"| ADMIN_ZONE
|
||||
LOGIN -->|"role = FIELD_AGENT"| FA_ZONE
|
||||
LOGIN -->|"role = CONTRACTOR"| CON_ZONE
|
||||
LOGIN -->|"role = VENDOR"| VEN_ZONE
|
||||
LOGIN -->|"role = SUBCONTRACTOR"| SUB_ZONE
|
||||
LOGIN -->|"role = CUSTOMER"| CUS_ZONE
|
||||
|
||||
subgraph OWNER_ZONE["👑 Owner Portal"]
|
||||
O1["/owner/snapshot\nBusiness Health Dashboard"]
|
||||
O2["/owner/projects\nProject Command Center"]
|
||||
O3["/owner/vendors\nVendor Directory"]
|
||||
O4["/owner/people\nPeople Directory"]
|
||||
O5["/owner/documents\nDocument Management"]
|
||||
O6["/owner/maps\nTerritory Map"]
|
||||
O7["/owner/pro-canvas\nTeam Leaderboard"]
|
||||
O8["/admin/*\nFull Admin Access"]
|
||||
end
|
||||
|
||||
subgraph ADMIN_ZONE["🏢 Admin Portal"]
|
||||
A1["/admin/dashboard\nCommand Center"]
|
||||
A2["/admin/schedule\nTeam Schedule"]
|
||||
A3["/admin/leaderboard\nSales Leaderboard"]
|
||||
A4["/admin/maps\nTerritory Map"]
|
||||
A5["/admin/pro-canvas\nTeam Performance"]
|
||||
end
|
||||
|
||||
subgraph FA_ZONE["🚶 Field Agent Portal"]
|
||||
FA1["/emp/fa/dashboard\nMy Dashboard"]
|
||||
FA2["/emp/fa/maps\nTerritory Map"]
|
||||
FA3["/emp/fa/pro-canvas\nMy Gamification Hub"]
|
||||
end
|
||||
|
||||
subgraph CON_ZONE["🔨 Contractor Portal"]
|
||||
C1["/contractor/dashboard\nMy Projects"]
|
||||
C2["/contractor/projects\nProject List"]
|
||||
end
|
||||
|
||||
subgraph VEN_ZONE["📦 Vendor Portal"]
|
||||
V1["/vendor/dashboard\nMy Orders & KPIs"]
|
||||
V2["/vendor/orders\nOrder Management"]
|
||||
end
|
||||
|
||||
subgraph SUB_ZONE["⚙️ Subcontractor Portal"]
|
||||
S1["/subcontractor/dashboard\nMy Work"]
|
||||
S2["/subcontractor/projects\nAssigned Projects"]
|
||||
end
|
||||
|
||||
subgraph CUS_ZONE["🏠 Customer Portal"]
|
||||
CU1["/portal/profile\nMy Property & Meetings"]
|
||||
end
|
||||
|
||||
SHARED["/chat-assistant\nAI Assistant\n(all roles)"]
|
||||
LOGIN --> SHARED
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Diagram 4 — High-Level Data Flow
|
||||
|
||||
How a user action travels from browser → API → database and back.
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
actor User as 👤 User (any role)
|
||||
participant FE as React SPA
|
||||
participant AC as AuthContext
|
||||
participant API as FastAPI /api/v1
|
||||
participant DB as PostgreSQL
|
||||
|
||||
Note over User,DB: ── Initial Login ──
|
||||
User->>FE: Enter credentials
|
||||
FE->>AC: login(identifier, password, type)
|
||||
AC->>API: POST /auth/login
|
||||
API->>DB: SELECT user WHERE email/empId = ?
|
||||
DB-->>API: User row
|
||||
API-->>AC: { access_token, refresh_token, user }
|
||||
AC-->>FE: Set cookie + update user state
|
||||
FE-->>User: Redirect to role portal
|
||||
|
||||
Note over User,DB: ── Authenticated Data Request ──
|
||||
User->>FE: Navigate to page
|
||||
FE->>API: GET /properties?status=Hot+Lead\nAuthorization: Bearer <token>
|
||||
API->>API: Validate JWT → extract role
|
||||
API->>API: require_role(FIELD_AGENT, ADMIN, OWNER)
|
||||
API->>DB: SELECT * FROM properties WHERE deleted_at IS NULL
|
||||
DB-->>API: Rows
|
||||
API-->>FE: { data: [...], meta: { total, page } }
|
||||
FE-->>User: Render page with data
|
||||
|
||||
Note over User,DB: ── Write Action (e.g. assign agent) ──
|
||||
User->>FE: Click "Assign Agent"
|
||||
FE->>API: PATCH /properties/42\n{ assigned_agent_id: "uuid" }
|
||||
API->>API: require_role(ADMIN, OWNER)
|
||||
API->>DB: UPDATE properties SET assigned_agent_id = ?, updated_at = NOW()
|
||||
API->>DB: INSERT INTO audit_logs (actor_id, action, ...)
|
||||
DB-->>API: Updated row
|
||||
API-->>FE: { data: { ...updatedProperty } }
|
||||
FE-->>User: Toast "Agent assigned ✓"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Diagram 5 — Deployment Architecture
|
||||
|
||||
How the pieces are hosted and connected in production.
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph Internet["🌐 Internet"]
|
||||
BROWSER["User Browser"]
|
||||
end
|
||||
|
||||
subgraph Vercel["Vercel (Frontend CDN)"]
|
||||
CDN["Static Assets\nReact SPA Bundle"]
|
||||
end
|
||||
|
||||
subgraph Railway["Railway / Render (Backend)"]
|
||||
UVICORN["uvicorn workers\nFastAPI app"]
|
||||
PG_DB[("PostgreSQL 16\nManaged DB")]
|
||||
end
|
||||
|
||||
subgraph AWS["AWS"]
|
||||
S3_BUCKET["S3 Bucket\nlynkeduppro-docs\n(COIs, W9s, Contracts)"]
|
||||
end
|
||||
|
||||
subgraph ThirdParty["Third-Party APIs"]
|
||||
GROQ_API["Groq API\nLLM inference"]
|
||||
SENDGRID_API["SendGrid\nTransactional email"]
|
||||
end
|
||||
|
||||
BROWSER -->|"HTTPS :443"| CDN
|
||||
CDN -->|"HTTPS /api/v1/*\nJWT in cookie"| UVICORN
|
||||
UVICORN <-->|"TCP :5432\nasyncpg"| PG_DB
|
||||
UVICORN -->|"HTTPS\npre-signed URLs"| S3_BUCKET
|
||||
UVICORN -->|"HTTPS\nAPI key"| GROQ_API
|
||||
UVICORN -->|"HTTPS\nAPI key"| SENDGRID_API
|
||||
BROWSER -->|"pre-signed URL\ndirect upload"| S3_BUCKET
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Diagram 6 — Role Permission Overview (RBAC Summary)
|
||||
|
||||
A simplified view of the data each role can read and write.
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
subgraph ReadAll["📖 Read All Data"]
|
||||
OWNER_R["OWNER\nAll tables, all records"]
|
||||
ADMIN_R["ADMIN\nAll tables, all records"]
|
||||
end
|
||||
|
||||
subgraph ReadScoped["📖 Read Scoped Data"]
|
||||
FA_R["FIELD_AGENT\nOwn meetings + assigned properties"]
|
||||
CON_R["CONTRACTOR\nAssigned projects + own invoices"]
|
||||
SUB_R["SUBCONTRACTOR\nAssigned tasks + project scope"]
|
||||
VEN_R["VENDOR\nOwn orders + own compliance docs"]
|
||||
CUS_R["CUSTOMER\nOwn property + own meetings"]
|
||||
end
|
||||
|
||||
subgraph WriteAll["✏️ Write All Data"]
|
||||
OWNER_W["OWNER\nProjects · Vendors · Documents\nInvoice approval · Change orders"]
|
||||
ADMIN_W["ADMIN\nProperties · Meetings · Assignments"]
|
||||
end
|
||||
|
||||
subgraph WriteSelf["✏️ Write Own Data"]
|
||||
FA_W["FIELD_AGENT\nMeeting outcomes · Lead status"]
|
||||
VEN_W["VENDOR\nOrder acknowledgement"]
|
||||
CUS_W["CUSTOMER\nProfile info"]
|
||||
end
|
||||
|
||||
OWNER_R --- OWNER_W
|
||||
ADMIN_R --- ADMIN_W
|
||||
FA_R --- FA_W
|
||||
VEN_R --- VEN_W
|
||||
CUS_R --- CUS_W
|
||||
```
|
||||
Reference in New Issue
Block a user