> ## Documentation Index
> Fetch the complete documentation index at: https://docs.statusstack.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customer Dashboard Guide

> Learn how to use the StatusStack Customer Dashboard to monitor your services and manage notifications

## Overview

The StatusStack Customer Dashboard is your central hub for monitoring service health, managing stacks, and configuring notifications. Built with modern technologies, it provides real-time updates and an intuitive interface for tracking all your monitored services.

## Getting Started

### Accessing Your Dashboard

1. Visit `https://statusstack.com/dashboard/{your-organization}`
2. Sign in using:
   * Google OAuth (recommended)
   * Microsoft OAuth
   * Email/Password

### First-Time Setup

When you first log in, you'll be guided through:

1. **Organization Selection** - Choose or create your organization
2. **Quick Start Wizard** - Optional guided onboarding for setting up your first stack
3. **Dashboard Overview** - Your main monitoring dashboard with live widgets

***

## Dashboard Features

### System Health Widget

The hero status banner at the top shows your overall system health:

* **Operational** (Green) - All systems running normally
* **Degraded** (Yellow) - Some services experiencing issues
* **Critical** (Red) - Major outages detected
* **Maintenance** (Blue) - Scheduled maintenance windows

### Key Metrics

**Status Overview Cards**

* Total monitored components
* Operational services count
* Degraded services count
* Active outages

**Real-Time Updates**

* Auto-refresh every 30 seconds
* Live status indicators
* Relative timestamps ("2h ago", "just now")

***

## Managing Stacks

### What is a Stack?

A **Stack** is a collection of services/components that form a logical group (e.g., "Production Infrastructure", "Customer Portal"). Stacks help you organize and monitor related services together.

### Creating a Stack

<Steps>
  <Step title="Navigate to Stacks">
    Click **Monitoring** → **Stacks** in the sidebar
  </Step>

  <Step title="Create New Stack">
    Click the "Create Stack" button
  </Step>

  <Step title="Fill in Details">
    * **Name**: Descriptive name (e.g., "Production API")
    * **Description**: Optional details about what this stack monitors
    * **Team**: Select which team owns this stack
    * **Visibility**: Public (shareable) or Private (team-only)
  </Step>

  <Step title="Add Components">
    Select services to monitor from our 5,200+ sources or add custom websites
  </Step>
</Steps>

### Managing Stack Components

**Adding Components**

1. Open your stack
2. Click "Add Component"
3. Choose from:
   * Pre-configured services (AWS, Cloudflare, GitHub, etc.)
   * Custom websites (monitor any HTTP/HTTPS endpoint)
   * Existing monitors

**Removing Components**

1. Navigate to stack view
2. Click the component actions menu
3. Select "Remove from Stack"

***

## Custom Website Monitoring

Monitor your own websites and APIs that aren't in our service catalog.

### Creating a Monitor

```javascript theme={null}
// Configuration options
{
  name: "API Health Check",
  url: "https://api.example.com/health",
  check_interval: 60, // seconds
  alert_threshold: 3, // failures before alert
  timeout: 10000 // milliseconds
}
```

**Available Checks**

* HTTP/HTTPS endpoint monitoring
* Response time tracking
* Status code validation
* SSL certificate expiry
* Custom headers and authentication

### Monitor Settings

| Setting         | Description                 | Default |
| --------------- | --------------------------- | ------- |
| Check Interval  | How often to ping (seconds) | 60s     |
| Alert Threshold | Failures before alerting    | 3       |
| Timeout         | Request timeout (ms)        | 10000   |
| Expected Status | HTTP status code            | 200-299 |

***

## Notification Rules

Configure when and how you receive alerts about service status changes.

### Creating Notification Rules

<Steps>
  <Step title="Navigate to Notifications">
    Click **Settings** → **Notifications** in the sidebar
  </Step>

  <Step title="Create Rule">
    Click "Create Notification Rule"
  </Step>

  <Step title="Configure Channels">
    Select notification channels:

    * Email
    * Slack
    * Discord
    * Microsoft Teams
    * SMS (Twilio)
    * Webhooks (custom integrations)
  </Step>

  <Step title="Set Conditions">
    * **Alert Levels**: Info, Warning, Alert
    * **Stacks**: Which stacks to monitor
    * **Components**: Specific components (optional)
    * **Schedule**: When to receive notifications
  </Step>
</Steps>

### Notification Channels

#### Email Notifications

* Sent to your registered email
* Rich HTML formatting
* Incident details and resolution links

#### Slack Integration

```json theme={null}
{
  "channel": "#alerts",
  "webhook_url": "https://hooks.slack.com/services/YOUR/WEBHOOK/URL",
  "mention_users": ["@oncall-engineer"],
  "thread_replies": true
}
```

#### Discord Integration

```json theme={null}
{
  "webhook_url": "https://discord.com/api/webhooks/YOUR/WEBHOOK",
  "mention_roles": ["@monitoring-team"],
  "embed_color": "#FF5D5C"
}
```

#### Microsoft Teams

```json theme={null}
{
  "webhook_url": "https://outlook.office.com/webhook/YOUR/WEBHOOK",
  "card_title": "StatusStack Alert",
  "adaptive_cards": true
}
```

***

## Team Management

### Inviting Team Members

<Steps>
  <Step title="Open Team Settings">
    Navigate to **Settings** → **Teams**
  </Step>

  <Step title="Invite Members">
    Click "Invite Member" and enter their email
  </Step>

  <Step title="Assign Roles">
    Choose role level:

    * **Admin**: Full access, can manage billing
    * **Member**: Can create/edit stacks and monitors
    * **Viewer**: Read-only access
  </Step>
</Steps>

### Team Permissions

| Permission           | Admin | Member | Viewer |
| -------------------- | ----- | ------ | ------ |
| View stacks          | ✅     | ✅      | ✅      |
| Create stacks        | ✅     | ✅      | ❌      |
| Delete stacks        | ✅     | ❌      | ❌      |
| Manage notifications | ✅     | ✅      | ❌      |
| Invite members       | ✅     | ❌      | ❌      |
| Manage billing       | ✅     | ❌      | ❌      |

***

## Billing & Plans

### Plan Features

<CardGroup cols={3}>
  <Card title="Free" icon="gift">
    * 1 stack
    * 10 components
    * 1 custom monitor
    * 1 user
    * Email notifications
  </Card>

  <Card title="Pro" icon="rocket">
    * Unlimited stacks & components
    * Unlimited custom monitors
    * Unlimited users
    * All notification channels
    * Scheduled reports
    * TV Dashboard
  </Card>

  <Card title="Enterprise" icon="building">
    * Everything in Pro
    * MSP features
    * White-label portals
    * Custom domains
    * SAML SSO
    * Priority support
  </Card>
</CardGroup>

### Upgrading Your Plan

1. Navigate to **Billing** → **Plans**
2. Select your desired plan
3. Enter payment information
4. Confirm upgrade

Billing is prorated based on your current cycle.

***

## Keyboard Shortcuts

Speed up your workflow with keyboard shortcuts:

| Shortcut       | Action                     |
| -------------- | -------------------------- |
| `Cmd/Ctrl + K` | Open global search         |
| `Cmd/Ctrl + /` | Show keyboard shortcuts    |
| `G then D`     | Go to Dashboard            |
| `G then S`     | Go to Stacks               |
| `G then N`     | Go to Notifications        |
| `N`            | Create new (context-aware) |
| `Esc`          | Close modal/dialog         |

***

## Best Practices

### Stack Organization

✅ **Do:**

* Group related services together
* Use descriptive stack names
* Separate prod/staging/dev environments
* Keep stacks focused and manageable

❌ **Don't:**

* Mix unrelated services in one stack
* Create too many tiny stacks
* Use generic names like "Stack 1"

### Notification Configuration

✅ **Do:**

* Set up multiple channels for redundancy
* Use alert level filtering to reduce noise
* Configure quiet hours for non-critical alerts
* Test notifications after setup

❌ **Don't:**

* Send all alerts to entire team
* Ignore notification delivery failures
* Set overly sensitive thresholds

### Monitor Setup

✅ **Do:**

* Set realistic check intervals (60-300s)
* Configure appropriate timeouts
* Use alert thresholds (3-5 failures)
* Monitor from multiple regions

❌ **Don't:**

* Poll too frequently (\< 30s)
* Set instant alerts (threshold of 1)
* Ignore SSL certificate warnings

***

## Troubleshooting

### Dashboard Not Loading

**Check:**

* Organization is active
* Browser cache (try incognito mode)
* Network connectivity
* JavaScript is enabled

**Solution:**

```bash theme={null}
# Clear browser cache
# Or use private/incognito window
```

### Widgets Showing "No Data"

**Possible causes:**

* No stacks created yet
* No components added to stacks
* Team/organization scoping issue

**Solution:**

1. Create your first stack
2. Add at least one component
3. Refresh the dashboard

### Notifications Not Arriving

**Check:**

1. Notification rule is active
2. Channels are correctly configured
3. Alert levels match incident severity
4. No delivery failures in notification center

**Debug:**

```javascript theme={null}
// Test your webhook
curl -X POST https://your-webhook-url \
  -H "Content-Type: application/json" \
  -d '{"test": "StatusStack notification test"}'
```

### Session Expired / 419 Error

**Cause:** CSRF token mismatch or session timeout

**Solution:**

* Refresh the page (tokens auto-refresh)
* Clear browser cookies and re-login
* Check session domain configuration

***

## TV Dashboard

For NOC (Network Operations Center) environments, office displays, and large-screen monitoring, StatusStack provides a dedicated TV Dashboard.

<Card title="TV Dashboard Guide" icon="tv" href="/guides/tv-dashboard">
  Learn how to set up large-screen displays for real-time monitoring
</Card>

**Key Features:**

* Large-screen optimized display
* Auto-refresh and page rotation
* Public share links for unauthenticated displays
* Customizable refresh and rotation intervals
* Incident feed at screen bottom

***

## Mobile App

Access your dashboard on the go with our mobile apps:

<CardGroup cols={2}>
  <Card title="iOS App" icon="apple" href="https://apps.apple.com/statusstack">
    Download for iPhone & iPad
  </Card>

  <Card title="Android App" icon="android" href="https://play.google.com/statusstack">
    Download for Android
  </Card>
</CardGroup>

**Mobile Features:**

* Real-time status updates
* Push notifications
* Quick stack overview
* Incident history
* Dark mode support

***

## Need Help?

<CardGroup cols={2}>
  <Card title="Support" icon="headset" href="mailto:support@statusstack.com">
    Email our support team
  </Card>

  <Card title="Community" icon="users" href="https://statusstack.com/community">
    Join our community forum
  </Card>

  <Card title="Documentation" icon="book" href="/">
    Browse all documentation
  </Card>

  <Card title="Status Page" icon="chart-line" href="https://status.statusstack.com">
    Check StatusStack status
  </Card>
</CardGroup>

***

## Related Guides

<CardGroup cols={2}>
  <Card title="Maintenance Calendar" icon="calendar" href="/guides/maintenance-management">
    Schedule and manage maintenance windows with iCal subscription
  </Card>

  <Card title="Activity Log" icon="clock" href="/guides/activity-log">
    View a full audit trail of changes across your organization
  </Card>

  <Card title="TV Dashboard" icon="tv" href="/guides/tv-dashboard">
    Set up large-screen displays for NOC and office monitoring
  </Card>

  <Card title="Scheduled Reports" icon="chart-bar" href="/guides/scheduled-reports">
    Automate recurring uptime and incident reports
  </Card>
</CardGroup>

Your Customer Dashboard is designed to give you complete visibility into your service health. If you have questions or need assistance, our support team is here to help!