# Synapse IQ - Screens Overview
## ???? Application Architecture
Synapse IQ is a comprehensive CRM dashboard with three main screens designed for different user needs and workflows.
---
## ???? Screen 1: Kanban Board (Deal Management)
**Purpose**: Daily deal management and pipeline visualization
**Key Features**:
- ✅ Drag & Drop functionality between priority columns
- ???? Advanced search and filtering
- ???? Real-time sorting (progress, value, date)
- ???? Quick detail modals
- ???? AI Chat assistant
**Layout**:
```
┌─────────────────────────────────────────────────────┐
│ Header (Logo | Navigation | Search | Notifications) │
├─────────────────────────────────────────────────────┤
│ Quick Stats Card (Conversion, Deals, Revenue) │
├─────────────────────────────────────────────────────┤
│ Filter Bar (Search, Priority Filter, Sort) │
├─────────────────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ HIGH │ │ MEDIUM │ │ LOW │ │
│ │ ???? │ │ ???? │ │ ???? │ │
│ │ Card 1 │ │ Card 1 │ │ Card 1 │ │
│ │ Card 2 │ │ Card 2 │ │ Card 2 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
└─────────────────────────────────────────────────────┘
???? AI Chat (floating)
```
**User Actions**:
1. Drag cards between columns to change priority
2. Click card to open quick modal
3. Use filters to find specific deals
4. Sort by different criteria
5. Access full deal details from modal
---
## ???? Screen 2: Deal Details Page (Individual Deal View)
**Purpose**: Deep-dive into a single deal with full context and AI recommendations
**Key Features**:
- ???? Breadcrumb navigation
- ???? Visual progress tracking
- ???? Quick action buttons (Call, Email, WhatsApp, Meeting)
- ???? AI-generated email drafts
- ???? Communication timeline with sentiment analysis
- ???? Deal-specific AI chat
**Layout**:
```
┌─────────────────────────────────────────────────────┐
│ Header (with Back Button) │
├─────────────────────────────────────────────────────┤
│ Breadcrumb: Home → Company Name │
├─────────────────────────────────────────────────────┤
│ Deal Header (Title, Priority Badge, Progress) │
│ [???? Call] [???? Email] [???? WhatsApp] [???? Meeting] │
├─────────────────────────────────────────────────────┤
│ ┌───────────────────────────┐ ┌─────────────────┐ │
│ │ ???? AI Recommendation │ │ Client Info │ │
│ │ - Insight │ │ - Contact │ │
│ │ - Email Draft (editable) │ │ - Value │ │
│ │ [Send] [Edit] [Cancel] │ │ - Tags │ │
│ ├───────────────────────────┤ │ - Notes │ │
│ │ ???? Communication Timeline │ └─────────────────┘ │
│ │ 05.11 - Call (???? Stress) │ │
│ │ 04.11 - WhatsApp (???? +) │ │
│ │ 03.11 - Email (???? OK) │ │
│ └───────────────────────────┘ │
└─────────────────────────────────────────────────────┘
???? AI Chat (expanded, contextual)
```
**User Actions**:
1. Review AI recommendations before contact
2. Edit and send AI-generated emails
3. Review sentiment analysis in timeline
4. Make quick contact via action buttons
5. Ask AI about deal-specific insights
---
## ???? Screen 3: Manager Dashboard (Analytics & Team Performance)
**Purpose**: Team oversight, performance analysis, and strategic decision-making
**Key Features**:
- ???? Key performance metrics with trends
- ???? Team rankings and performance
- ???? Critical deals identification
- ???? Best practices and improvement areas
- ???? Team goals tracking
- ???? Contextual AI analytics
**Layout**:
```
┌─────────────────────────────────────────────────────┐
│ Header (with Navigation) │
├─────────────────────────────────────────────────────┤
│ Аналитика отдела | [Period ▼] [Export Report] │
├─────────────────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ ???? │ │ ⏱️ │ │ ???? │ │
│ │ Conv 67% │ │ Time 14d │ │ Rev 2.4M │ │
│ │ ↑ 12% │ │ ↓ 3d │ │ ↑ 18% │ │
│ └──────────┘ └──────────┘ └──────────┘ │
├─────────────────────────────────────────────────────┤
│ ┌─────────────────────┐ ┌──────────────────────┐ │
│ │ ???? Team Performance │ │ ???? Critical Deals │ │
│ │ ???? Alexey - 85% │ │ ???? TechnoStroy │ │
│ │ ???? Maria - 72% │ │ (Risk - Alexey) │ │
│ │ ⚠️ Dmitry - 45% │ │ ???? Sidorov IP │ │
│ │ [Help] │ │ (Delay - Dmitry) │ │
│ └─────────────────────┘ └──────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ ✅ Best │ │ ???? Areas │ │ ???? Goals │ │
│ │ Practices │ │ for Growth │ │ Progress │ │
│ └────────────┘ └────────────┘ └─────���──────┘ │
└─────────────────────────────────────────────────────┘
???? AI Analytics Chat (floating)
```
**User Actions**:
1. Monitor team performance metrics
2. Identify and help struggling team members
3. Review critical deals requiring attention
4. Analyze best practices from top performers
5. Track progress toward team goals
6. Export reports for presentations
7. Ask AI for performance insights
---
## ???? Navigation Flow
```
┌──────────────────────────────────────────────────┐
│ HEADER │
│ [Сделки] ←→ [Аналитика] │
└──────────────────────────────────────────────────┘
↓ ↓
[Screen 1] [Screen 3]
Kanban Board Manager Dashboard
↓ ↓
Click Card Click Critical
↓ Deal
↓ ↓
Quick Modal ────────────→
↓
[Open Full Page]
↓
[Screen 2]
Deal Details
↓
[Back Button]
↓
[Screen 1]
```
---
## ???? Design System
### Colors
- **Primary**: #6366F1 (Indigo)
- **Secondary**: #3B82F6 (Blue)
- **Success**: #10B981 (Green)
- **Warning**: #F59E0B (Amber)
- **Error**: #EF4444 (Red)
### Priority Colors
- **High**: Red (#EF4444)
- **Medium**: Yellow (#F59E0B)
- **Low**: Green (#10B981)
### Typography
- **Font Family**: Inter
- **Headers**: System defaults
- **Body**: System defaults
### Components
- Cards with shadow and hover effects
- Rounded corners (8px, 12px)
- Gradient backgrounds for highlights
- Color-coded badges and indicators
---
## ???? AI Integration Points
### Screen 1 (Kanban)
- General CRM assistance
- Quick answers about deals
- Navigation help
### Screen 2 (Deal Details)
- Deal-specific insights
- Sentiment analysis explanation
- Email generation and editing
- Client communication suggestions
### Screen 3 (Analytics)
- Team performance analysis
- Conversion rate insights
- Best practice identification
- Trend analysis and predictions
- Comparison reports
---
## ???? Key Differentiators
1. **AI-First Design**: AI is integrated at every level, not just as an add-on
2. **Sentiment Analysis**: Emotional context in every communication
3. **Contextual AI**: Different AI behavior for different screens
4. **Visual Hierarchy**: Clear priority and status indicators
5. **Seamless Navigation**: Easy movement between overview and details
6. **Action-Oriented**: Quick action buttons throughout
7. **Performance Focus**: Manager dashboard for team oversight
---
## ???? Responsive Design
All screens are designed to work on:
- ???? Desktop (1440px+)
- ???? Laptop (1024px - 1440px)
- ???? Tablet (768px - 1024px)
Mobile phone support can be added as needed.
---
## ???? Technology Stack
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS v4.0
- **Drag & Drop**: react-dnd
- **UI Components**: Shadcn/ui
- **Icons**: Lucide React
- **State Management**: React Hooks
---
## ???? Data Flow
```
App.tsx (Root State)
↓
├── Deals Data (Array)
├── Current Page State
├── Selected Deal
├── Filter/Sort State
└── Modal State
↓
Components render based on state
↓
User interactions update state
↓
Re-render with new data
```
---
## ???? User Personas
### Sales Manager (Primary User - Screens 1 & 2)
- Manages 10-30 active deals
- Needs quick access to deal information
- Values AI recommendations
- Mobile during client meetings
### Sales Director (Primary User - Screen 3)
- Oversees 3-10 team members
- Focuses on metrics and performance
- Makes strategic decisions
- Needs export capabilities
### Sales Representative (Secondary User - Screens 1 & 2)
- Handles individual deals
- Follows up on leads
- Uses AI for email composition
- Tracks communication history
