Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: exclude reference workflow folder from repo, refresh README

Browse Source 
- Add Estimate_Section_Screens_and_Workflows/ to .gitignore (local reference images only)
- Rewrite README to reflect revamp branch: React 19, ProCanvas dual-mode design, EstimateBuilder redesign, Lead Creation and LynkDispatch AI upcoming features
This commit is contained in:
Satyam
2026-03-13 01:06:06 +05:30
parent d3d6af33cc
commit dc117e8180
2 changed files with 108 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -30,3 +30,6 @@ dist-ssr
!data_schema.txt
!docs/**/*.md
.env
# Reference images / design workflows (local only, not for repo)
Estimate_Section_Screens_and_Workflows/
README.md
+102 -70
View File
@@ -1,99 +1,131 @@
# Plano Realty CRM - Geospatial Field Service Platform
# LynkedUpPro CRM — Field Sales & Territory Management Platform
> **The Next Generation of Roofing Sales & Territory Management**
> **The Next Generation of Roofing Sales & Dispatch Management**
**Plano Realty CRM** is an advanced, data-driven platform designed to revolutionize how roofing professionals in Plano, Texas manage their territories, leads, and customer interactions. By combining geospatial intelligence, AI-driven insights, and intuitive workflows, we bridge the gap between field agents and office operations.
**LynkedUpPro CRM** is an advanced, data-driven platform for roofing and real estate canvassing teams. Field agents knock doors and log leads on mobile, admins dispatch reps from the office, and owners get a real-time command center — all in one app.
**Current branch:** `revamp` — complete UI/UX overhaul in progress.
---
## 🏛️ PART 1: PRODUCT OVERVIEW
## 🏛️ PRODUCT OVERVIEW
### 🌟 Value Proposition
In a competitive roofing market, speed and data are everything. Traditional spreadsheets and paper maps leave money on the table. **Plano Realty CRM** solves this by providing:
- **Precision Targeting**: Identify "Golden Leads" (older homes with high value) instantly on a map.
- **Operational Efficiency**: Automate scheduling and follow-ups with our AI Concierge.
- **Real-Time Intelligence**: Know the storm risk and roof condition of every property before you knock.
### 🤖 The "Plano AI Concierge" (Upgrade)
Our AI is now a full-fledged **Sales & Support Engine**:
- **For Guests**: Acts as a "Seasoned Consultant" to triage emergencies (leaks) vs. sales (inspections). "Hook" logic converts casual visitors into leads.
- **For Employees**: Answers complex queries like *“What is my win rate this month?”* or *“Show me the average home value in this zip code.”*
- **For Admins**: Provides instant summaries of urgent actions (Unassigned Leads, Pending Signatures) and business health.
- **For Customers**: Dynamic logic checks warranty status based on build year and offers personalized maintenance tips.
### 📊 The Data Dashboard
A 360-degree view of your territory's health.
1. **Admin Action Center**: A dedicated command center for managers to assign leads, approve schedules, and track urgent tasks.
2. **Golden Leads Scatter Plot**: Visualizes high-value opportunities (High Value + Older Built Year).
3. **Risk Index Gauge**: A real-time meter combining live wind speed data with the percentage of "Needs Repair" roofs.
4. **Revenue Potential**: Bar charts showing which neighborhoods offer the highest ROI based on renovation needs.
5. **Roof Health**: A visual breakdown of the entire territory's roof conditions (Good, Fair, Needs Repair).
### Value Proposition
- **Precision Targeting**: Identify "Golden Leads" (older, high-value homes) instantly on a map.
- **AI-Powered Dispatch**: LynkDispatch AI scores and recommends rep assignments in real-time.
- **Gamified Field Performance**: ProCanvas turns door-knocking into a game — XP, streaks, leaderboards, daily missions.
- **Intelligent Lead Capture**: Mobile-optimized lead creation with Quick Capture for the door, Full Form for the office.
---
## 🎨 KEY FEATURES (Latest Updates)
## 🎨 KEY FEATURES
### 1. "LynkedUp Pro" Branding & UX
- **Glassmorphism UI**: A premium, dark-mode-first aesthetic with "Spotlight" cards that glow on hover.
- **Smooth Animations**: Global page transitions (Fade/Slide) and silky-smooth collapsible sidebar.
- **System-Wide Dark Mode**: Inverted map tiles and high-contrast text for comfortable night viewing.
### ProCanvas — Gamified Agent Dashboard
- FIFA-style player card with XP bar, streak tracker, and rank badge
- Log Action hub (Door Knocked, Lead Gained, Appointment, Client Meet)
- Daily Missions with Energy Bars, Weekly Challenge with progress tracking
- Live event cards: Showdown, Hot Streak, Weekly Objective
- Rewards & Checkpoints milestone track
- Badges & Achievements trophy room
- **Dual design identity**: Light mode (energetic/clean — solid colored header banners on white cards) and Dark mode (neon/glass arcade aesthetic) — distinct, never washed-out
### 2. Admin Action Center (NEW)
- **Unassigned Leads**: Instant visibility into new opportunities that need an owner.
- **Hot Leads**: Track high-value prospects that haven't been contacted in >7 days.
- **Smart Assignment**: "One-click" agent assignment with a searchable modal.
- **Urgency Counters**: visual badges highlighting pending signatures and reschedule requests.
### Estimate Builder
- Section → Group → Item hierarchy
- Material Details Modal (measurement → waste → qty → cost → price formula)
- Measurements Modal for detailed takeoffs
- Financial Summary sidebar with adjustable margin slider
- Full light/dark theme support
### 3. Advanced Geospatial Mapping
- **Interactive Polygons**: Color-coded property footprints (Red=Hot Lead, Blue=Customer).
- **Reverse Geocoding**: Click anywhere on the map to create a new property record instantly using OpenStreetMap data.
### LynkDispatch AI _(investor demo — in development)_
- 3-panel command center: Lead Queue + Map + AI Recommendation Drawer
- Rep scoring with proximity, drive time, calendar fit, weather, and skill factors
- Storm Mode — full UI shift to amber, storm path on map, weather-aware recommendations
- KPI bar with animated metrics (leads in queue, assigned today, response time, storm alerts)
### 4. Role-Based Access Control (RBAC)
- **Field Agents**: View assigned territories, update lead status, and request schedule changes.
- **Admins**: Global view of all agents, approval workflows, and system settings.
- **Customers**: (Coming Soon) Portal to view project status and request service.
### Lead Creation Page _(in development)_
- Quick Capture (7 fields) for agents at the door, Full Form for office
- 5 color-coded sections: Contact (blue), Property (emerald), Job Details (amber), Insurance (purple), Assignment (cyan)
- Role-aware: agents get simplified assignment, admins/owners get Smart Assign with rep scoring
- Mobile-first, works beautifully on tablet and desktop too
### 5. Enterprise-Grade Reliability (NEW)
- **Resilient AI**: Chatbot restores user input on network failure, preventing frustration.
- **Global Error Boundaries**: Catches unexpected crashes and offers a graceful "Reload" option.
- **Visual Feedback**: Comprehensive toast notifications for all data actions (Success/Error states).
### Maps & Territory
- Interactive Leaflet map with color-coded property polygons
- Reverse geocoding to create properties from map clicks
- Rep location overlays and lead clustering (in development)
### Admin Action Center
- Unassigned lead queue — zero leakage
- Smart agent assignment modal
- Urgency counters and pending signatures tracking
### Owner's Box
- Financial KPIs (revenue, spend, health score)
- Project command center with change orders and budget vs. actuals
- People, vendor, and document management
---
## 👥 USER ROLES & DEMO ACCOUNTS
To explore the platform, use these pre-configured accounts. **Password for ALL accounts is: `password`**
**Password for ALL accounts: `password`**
### 1. Field Agent (Worker)
*The primary user. Can view maps, access detailed property data, and manage leads.*
- **Username/ID**: `FA001` (Frank Agent)
- **Alternates**: `FA002`, `FA003`, `FA004`, `FA005`
### 2. Administrator
*The manager. Sees all agents, global stats, and the **Action Center**.*
- **Username/ID**: `ADM01` (Adam Admin)
- **Alternates**: `ADM02`, `ADM03`
### 3. Customer (Homeowner)
*The client. Limited view of their own property.*
- **Username**: `alice`
- **Alternates**: `bob`, `charlie`
| Role | Account ID | Description |
|---|---|---|
| Field Agent | `FA001` – `FA005` | Door knocking, lead logging, ProCanvas |
| Admin | `ADM01` – `ADM03` | Action center, dispatch, leaderboard |
| Owner | `OWN01`, `OWN02` | Full platform access, owner snapshot |
| Contractor | `CON01` | Project and task management |
| Vendor | `VEN01` | Orders and invoices |
| Subcontractor | `SUB01` | Work scope and tasks |
| Customer | `alice`, `bob`, `charlie` | Customer portal |
---
## 💻 PART 2: DEVELOPER GUIDE
## 💻 DEVELOPER GUIDE
### 🛠 Tech Stack & Architecture
- **Frontend**: React 18 (Vite), Tailwind CSS, Glassmorphism UI.
- **State**: `MockStore` (Simulates Backend/DB), `AuthContext` (Session Management).
- **AI Engine**: Groq SDK (`qwen-32b`) injected with dynamic system prompts.
- **Visuals**: `react-leaflet` (Maps), `recharts` (Analytics), `lucide-react` (Icons).
- **Reliability**: `sonner` (Toasts), Error Boundaries, Layout Portals.
### Tech Stack
- **Frontend**: React 19 (Vite), Tailwind CSS (`darkMode: 'class'`)
- **State**: MockStore (simulates backend), AuthContext (RBAC), ThemeContext (light/dark), GamificationContext (XP/streaks)
- **Routing**: React Router v7 with ProtectedRoute (role-based)
- **Animations**: Framer Motion (page transitions, stagger entrances, height animations)
- **Maps**: react-leaflet (Leaflet.js)
- **Charts**: Recharts (bar, area, pie, scatter)
- **Icons**: lucide-react
- **AI**: Groq SDK (qwen-32b) with dynamic role-aware system prompts
- **Notifications**: sonner (toasts)
- **Smooth Scroll**: Lenis
### 🚀 Setup & Contribution
### Setup
1. **Clone**: `git clone <repo>`
2. **Install**: `pnpm install`
3. **Env**: Create `.env` with `VITE_GROQ_API_KEY` and `VITE_OPENWEATHER_API_KEY`.
3. **Env**: Create `.env` with `VITE_GROQ_API_KEY` and `VITE_OPENWEATHER_API_KEY`
4. **Run**: `pnpm run dev`
**Maintained by Satyam Rastogi**
### Design System
- Dark mode: Glass panels (`bg-zinc-900/70 backdrop-blur-xl`), neon accents, Barlow Condensed uppercase
- Light mode: White cards (`bg-white shadow-md`), solid colored header banners, `bg-zinc-100/80` page background
- Theme controlled via `useTheme()` from `src/context/ThemeContext.jsx`
- All components use `dark:` Tailwind variants — no JS theme switching per-element needed
---
## 📁 Project Structure (Abbreviated)
```
src/
├── pages/ # Route-level pages by role
├── components/
│ ├── estimates/ # EstimateBuilder modals (MaterialDetails, Measurements, etc.)
│ ├── leads/ # Lead creation form components (in development)
│ ├── dispatch/ # LynkDispatch AI panels (in development)
│ ├── dashboard/ # Admin dashboard widgets
│ ├── ProCanvas/ # Gamification subcomponents
│ └── ... # Shared components (Layout, AnimatedCounter, etc.)
├── context/ # AuthContext, ThemeContext, GamificationContext
├── data/ # mockStore.jsx — central data layer
└── hooks/ # useGamification, custom hooks
```
---
**Maintained by Satyam Rastogi | Branch: revamp | Last updated: March 12, 2026**