# Shield Dashboard

A professional analytics dashboard UI similar to the "Shield Overall Dashboard" design.

## Components

### Layout
- **Left Sidebar**: Contains application name, KPI metrics, and filter controls
- **Main Dashboard Area**: Grid-based responsive layout with various data visualization components

### Components

1. **Sidebar Filters**
   - Application header with title
   - KPI metrics display (Total Leads, Total Deals)
   - Filter controls (Sales Rep, Partner, Traction Channel, Sub Product Line)
   - Reset filters button

2. **Bar Chart**
   - Title: "Deal Stage Wise Progress"
   - Visualizes deal progress across different stages
   - Responsive design with loading shimmer effect

3. **Donut Charts**
   - End Customer Stage Split
   - Segment Penetration
   - Interactive with tooltips

4. **Map Chart**
   - Dealer locations with colored markers
   - Interactive hover tooltips showing dealer status
   - Legend for status colors

5. **Data Table**
   - Cross/Up Selling Scope
   - Scrollable with sticky header
   - Alternating row colors
   - Sortable columns
   - Probability bars with color coding

6. **Deal Details Card**
   - Company Name, Stage, Description, Amount, Stage Days
   - Color-coded deal stages
   - Responsive grid layout

7. **Quarterwise Flow**
   - Placeholder for chart configuration
   - "Chart configuration incomplete" message

## Features

### Responsiveness
- Grid-based layout adapts to different screen sizes
- Mobile-friendly design with stacked layout on small screens
- Flexible components that resize appropriately

### Filter Functionality
- Global filters that affect all dashboard components
- Shared state management using BehaviorSubject
- Real-time updates when filters change
- Reset filters functionality

### Visual Design
- Dark Navy Blue for headers and bars
- Bright Orange for highlights and KPI boxes
- White background for charts and tables
- Modern color scheme with consistent styling

### Interactive Elements
- Chart tooltips on hover
- Interactive map with dealer status information
- Sortable data table
- Loading shimmer effects during data updates

## Technical Implementation

### Technologies Used
- Angular 16
- Chart.js with ng2-charts
- Clarity Design System
- SCSS for styling

### State Management
- Shared service using BehaviorSubject for filter state
- Reactive components that update based on filter changes
- Simulated data updates (no backend integration)

### Responsive Design
- CSS Grid and Flexbox layouts
- Media queries for different screen sizes
- Relative units for scalable components

## Component Structure

```
shield-dashboard/
├── shield-dashboard.component.ts|.html|.scss
├── services/
│   └── dashboard-filter.service.ts
├── components/
│   ├── sidebar-filters/
│   │   ├── sidebar-filters.component.ts|.html|.scss
│   ├── bar-chart/
│   │   ├── bar-chart.component.ts|.html|.scss
│   ├── donut-chart/
│   │   ├── donut-chart.component.ts|.html|.scss
│   ├── map-chart/
│   │   ├── map-chart.component.ts|.html|.scss
│   ├── data-table/
│   │   ├── data-table.component.ts|.html|.scss
│   ├── deal-details-card/
│   │   ├── deal-details-card.component.ts|.html|.scss
│   ├── quarterwise-flow/
│   │   ├── quarterwise-flow.component.ts|.html|.scss
│   └── loading-shimmer/
│       ├── loading-shimmer.component.ts|.html|.scss
└── shield-dashboard-routing.module.ts
```

## Usage

To navigate to the Shield Dashboard, visit:
`/cns-portal/shield-dashboard`

The dashboard is fully responsive and will adapt to different screen sizes. All components are interconnected through the shared filter service, so changing any filter will update all visualizations in real-time.