# Dashboard Layout and Navigation

The Ideas & Issues dashboard uses a two-panel layout designed for efficient feedback management. The main content panel displays your feedback feed with statistics and filters, while the insights sidebar provides analytical widgets for data-driven decision making.

---

## Dashboard Layout Structure

### Two-Panel Design

**Left Panel: Main Content (70% width)**
- Statistics widgets row
- Feed tabs and controls
- Feedback item list
- Filters and search

**Right Panel: Insights Sidebar (30% width)**
- Segment Activity widget
- Future: Emerging Patterns (commented out)
- Future: AI Suggestions (commented out)

### Layout Benefits

**Focused Workflow:**
- Primary tasks in main panel
- Supporting data in sidebar
- Minimal context switching
- Clear visual hierarchy

**Information Density:**
- Key metrics always visible
- Insights at a glance
- Detailed data on demand
- Efficient use of screen space

---

## Main Content Panel

### Statistics Widgets Row

**Layout:**
- Horizontal row of 4 stat cards
- Equal width distribution
- Responsive grid
- Consistent spacing

**Each Stat Card Contains:**
```
┌─────────────────────────┐
│ Label                   │
│ Value (large)      Icon │
│ Trend                   │
└─────────────────────────┘
```

**Visual Design:**
- **Label:** Small, gray text
- **Value:** Large, bold number
- **Unit:** Small text next to value (if applicable)
- **Trend:** Colored text with indicator
- **Icon:** Colored circle with Material icon

**Responsive Behavior:**
- Desktop: 4 cards in a row
- Tablet: 2 cards per row
- Mobile: 1 card per row (stacked)

### Feed Tabs

**Tab Bar Layout:**
```
[New] [Rising] [Top] [Discussed] [Backlog (23)]
```

**Active Tab Styling:**
- Highlighted background
- Bold text
- Bottom border accent
- Smooth transition

**Tab Description:**
```
Below tabs: "Most recently posted" (changes with tab)
```

**Interaction:**
- Click to switch tabs
- Instant feed update
- Maintains other filters
- Smooth animation

### Filters and Search Bar

**Top Controls Row:**
```
[Search Icon] [Filter Icon (2)] [More Options]
```

**Expanded Search:**
```
┌────────────────────────────────────┐
│ 🔍 Search feedback...              │
└────────────────────────────────────┘
```

**Active Filter Chips:**
```
[Category: Performance ×] [Status: New ×] [Clear All]
```

**Filter Panel (Slide-in):**
```
┌─────────────────────────┐
│ Filters            [×]  │
├─────────────────────────┤
│ Categories              │
│ ☐ Feature Request       │
│ ☑ Bug Reports           │
│ ☐ Performance           │
│                         │
│ Idea Status             │
│ ☐ Under Review          │
│ ☑ Planned               │
│                         │
│ [Clear Filters]         │
└─────────────────────────┘
```

### Feedback Feed

**List View (Default):**
```
┌────────────────────────────────────┐
│ 🔥 Performance issue on mobile     │
│ Posted 2h ago • 23 votes • 5 comm │
│ Category: Performance • Status: New│
└────────────────────────────────────┘
```

**Grid View (if supported):**
```
┌─────────┐ ┌─────────┐ ┌─────────┐
│ Item 1  │ │ Item 2  │ │ Item 3  │
│ 23 ▲    │ │ 15 ▲    │ │ 42 ▲    │
└─────────┘ └─────────┘ └─────────┘
```

**Loading States:**
```
[Spinner] Loading feedback...
```

**Empty States:**
```
No feedback items match your filters.
Try adjusting your search or filters.
```

---

## Insights Sidebar

### Segment Activity Widget

**Widget Structure:**
```
┌─────────────────────────────────┐
│ 👥 Segment Activity             │
├─────────────────────────────────┤
│ Most Engaged                    │
│ Enterprise (42%)                │
│                                 │
│ Needs Attention                 │
│ Free Tier                       │
├─────────────────────────────────┤
│ Enterprise                      │
│ Score: 50.0 • 45 items          │
│ Top Issues: Integrations        │
│ ████████████░░░░░░░░ 42%        │
│                                 │
│ SMB Customers                   │
│ Score: 32.5 • 28 items          │
│ Top Issues: Performance         │
│ ████████░░░░░░░░░░░░ 26%        │
└─────────────────────────────────┘
```

**Visual Elements:**
- **Header:** Icon + title
- **Comparison badges:** Green (most) / Orange (least)
- **Segment cards:** Name, score, count, category
- **Progress bars:** Visual percentage representation
- **Tooltips:** Hover for user/vote counts

**Color Coding:**
- **Green bar:** Most engaged segment
- **Orange bar:** Least engaged segment
- **Gray bars:** Normal segments

### Future Widgets (Commented Out)

**Emerging Patterns:**
```
Currently disabled in code
Purpose: AI-detected feedback trends
Features: Pattern detection, trend alerts
```

**AI Suggestions:**
```
Currently disabled in code
Purpose: Automated feedback grouping
Features: Opportunity creation, analysis
```

---

## Navigation Patterns

### Primary Navigation

**Dashboard Access:**
```
Main Menu → Feedback Manager → Dashboard
```

**Breadcrumbs:**
```
Home > Feedback Manager > Ideas & Issues
```

**Quick Access:**
- Bookmark dashboard URL
- Pin to favorites
- Keyboard shortcuts (if configured)

### Within-Dashboard Navigation

**Tab Switching:**
- Click tab to change view
- Keyboard: Arrow keys (if supported)
- Maintains filters and search

**Filter Navigation:**
- Open/close filter panel
- Toggle individual filters
- Clear all filters

**Item Navigation:**
- Click item to view details
- Back button to return to feed
- Breadcrumb navigation

### External Navigation

**From Dashboard:**
- Click feedback item → Detail page
- Click user name → User profile
- Click category → Category view
- Click backlog link → Work item

**To Dashboard:**
- Main menu link
- Browser back button
- Breadcrumb navigation
- Logo click (if configured)

---

## Responsive Design

### Desktop View (>1200px)

**Layout:**
```
┌────────────────────────────────────────────┐
│ [Stats Row - 4 cards]                      │
├────────────────────────┬───────────────────┤
│ Main Content           │ Insights Sidebar  │
│ - Tabs                 │ - Segment Activity│
│ - Filters              │                   │
│ - Feed                 │                   │
│                        │                   │
└────────────────────────┴───────────────────┘
```

**Characteristics:**
- Full two-panel layout
- All features visible
- Optimal information density
- Comfortable reading width

### Tablet View (768px - 1200px)

**Layout:**
```
┌────────────────────────────────────────────┐
│ [Stats Row - 2 cards per row]              │
├────────────────────────────────────────────┤
│ Main Content (Full Width)                  │
│ - Tabs                                     │
│ - Filters                                  │
│ - Feed                                     │
├────────────────────────────────────────────┤
│ Insights Sidebar (Below or Collapsible)    │
│ - Segment Activity                         │
└────────────────────────────────────────────┘
```

**Characteristics:**
- Stats wrap to 2 columns
- Sidebar may collapse or move below
- Touch-friendly controls
- Reduced padding

### Mobile View (<768px)

**Layout:**
```
┌──────────────────────┐
│ [Stats - Stacked]    │
│ [Card 1]             │
│ [Card 2]             │
│ [Card 3]             │
│ [Card 4]             │
├──────────────────────┤
│ [Tabs - Scrollable]  │
├──────────────────────┤
│ [Search/Filter]      │
├──────────────────────┤
│ [Feed Items]         │
│ [Item 1]             │
│ [Item 2]             │
│ ...                  │
└──────────────────────┘
```

**Characteristics:**
- Single column layout
- Collapsible sections
- Hamburger menu for filters
- Swipeable tabs
- Larger touch targets

---

## Visual Design Elements

### Color Scheme

**Stat Card Icons:**
- **Purple:** Total Feedback
- **Orange:** Unprocessed
- **Deep Purple:** Linked to Backlog
- **Blue:** Avg Response Time

**Trend Indicators:**
- **Green:** Positive/improvement
- **Red:** Negative/decline (or improvement for response time)
- **Gray:** Neutral/no change

**Segment Bars:**
- **Green:** Most engaged
- **Orange:** Needs attention
- **Gray:** Normal engagement

### Typography

**Hierarchy:**
```
H1: Page title (if present)
H2: Section headers
H3: Widget titles
Body: Regular text
Small: Labels, metadata
```

**Font Weights:**
- **Bold:** Values, important data
- **Semi-bold:** Headers
- **Regular:** Body text
- **Light:** Secondary information

### Spacing and Padding

**Consistent Spacing:**
- Card padding: 16-24px
- Row gaps: 16px
- Column gaps: 16px
- Section margins: 24-32px

**Visual Rhythm:**
- Consistent vertical spacing
- Aligned elements
- Clear visual groups
- Adequate whitespace

### Icons

**Material Icons Used:**
- `chat_bubble_outline` - Total Feedback
- `schedule` - Unprocessed
- `check_circle_outline` - Linked to Backlog
- `show_chart` - Avg Response Time
- `groups` - Segment Activity
- `filter_list` - Filters
- [search](file:///Users/dineshrawat/Documents/projects/shorterloop/frontend/projects/covation/src/app/idm/dashboard/common/shared/components/common-idea-issue/common-idea-issue.ts#573-577) - Search
- `more_horiz` - More options

---

## Interaction Patterns

### Loading States

**Initial Load:**
```
1. Show skeleton screens
2. Load statistics
3. Load feed items
4. Load segment data
5. Fade in content
```

**Filter Application:**
```
1. Show filtering indicator
2. Disable controls
3. Update results
4. Re-enable controls
5. Smooth transition
```

**Tab Switching:**
```
1. Highlight new tab
2. Brief loading state
3. Update feed
4. Update description
5. Maintain scroll position
```

### Hover States

**Stat Cards:**
- Subtle elevation
- Slight scale increase
- Cursor: pointer (if clickable)

**Segment Items:**
- Highlight background
- Show tooltip
- Reveal additional info

**Filter Options:**
- Highlight background
- Show checkmark
- Cursor: pointer

### Click/Tap Feedback

**Buttons:**
- Ripple effect
- Color change
- Immediate response

**Tabs:**
- Instant switch
- Smooth underline animation
- Color transition

**Filters:**
- Checkbox toggle
- Immediate filter application
- Visual confirmation

---

## Customization Options

### User Preferences (if supported)

**Layout:**
- List vs. Grid view
- Sidebar position (left/right)
- Compact vs. Comfortable density

**Display:**
- Items per page
- Default tab
- Default filters

**Notifications:**
- New feedback alerts
- Status change notifications
- Comment notifications

### Admin Configuration

**Widget Visibility:**
- Enable/disable specific widgets
- Reorder widgets
- Custom widget content

**Branding:**
- Custom colors
- Logo placement
- Theme selection

**Defaults:**
- Default filters for team
- Preset views
- Saved searches

---

## Accessibility

### Keyboard Navigation

**Tab Key:**
- Navigate through interactive elements
- Focus indicators visible
- Logical tab order

**Enter/Space:**
- Activate buttons
- Toggle checkboxes
- Select options

**Arrow Keys:**
- Navigate tabs (if supported)
- Navigate lists
- Navigate menus

### Screen Reader Support

**ARIA Labels:**
- Descriptive button labels
- Status announcements
- Error messages
- Loading states

**Semantic HTML:**
- Proper heading hierarchy
- Landmark regions
- List structures
- Form labels

### Visual Accessibility

**Color Contrast:**
- WCAG AA compliant
- Readable text
- Clear icons
- Distinct states

**Focus Indicators:**
- Visible focus rings
- High contrast
- Consistent styling

**Text Sizing:**
- Scalable fonts
- Readable at 200% zoom
- No text in images

---

## Performance Optimization

### Lazy Loading

**Feed Items:**
- Load initial batch (5-10 items)
- Infinite scroll for more
- Virtualization for long lists

**Widgets:**
- Load above-the-fold first
- Defer sidebar widgets
- Progressive enhancement

### Caching

**Static Data:**
- Cache category list
- Cache status options
- Cache user preferences

**Dynamic Data:**
- Cache feed results briefly
- Invalidate on filter change
- Refresh on explicit action

### Rendering Optimization

**Virtual Scrolling:**
- Render visible items only
- Recycle DOM elements
- Smooth scrolling

**Debouncing:**
- Search input (400ms)
- Filter changes (200ms)
- Resize events (100ms)

---

## Troubleshooting

### Layout Issues

**Problem: Sidebar not visible**
```
Solutions:
- Check screen width (may be hidden on mobile)
- Verify no CSS conflicts
- Check browser zoom level
- Try different browser
```

**Problem: Stats cards misaligned**
```
Solutions:
- Refresh page
- Clear browser cache
- Check responsive breakpoints
- Verify CSS loaded correctly
```

**Problem: Feed items overlapping**
```
Solutions:
- Check browser compatibility
- Disable browser extensions
- Clear cache and cookies
- Report to support
```

---

## Best Practices

### Efficient Navigation

✅ **Use keyboard shortcuts** - Faster than mouse  
✅ **Bookmark common views** - Quick access  
✅ **Learn tab system** - Efficient switching  
✅ **Master filters** - Find what you need  
✅ **Customize layout** - Optimize for your workflow  

### Visual Clarity

✅ **Maintain clean workspace** - Close unused panels  
✅ **Use appropriate zoom** - Comfortable reading  
✅ **Leverage color coding** - Quick visual scanning  
✅ **Read tooltips** - Additional context  
✅ **Check all widgets** - Don't miss insights  

---

The dashboard layout is designed for efficient feedback management with all key information accessible at a glance. Understanding the layout helps you work faster and make better data-driven decisions.