Seera/TROUBLESHOOTING_CHARTS.md

# Charts Not Showing - Troubleshooting Guide

## Step 1: Check Browser Console

1. Open your browser's Developer Tools (F12)
2. Go to the **Console** tab
3. Look for error messages for each chart
4. Look for API call logs showing chart data

You should see logs like:
```
Up & Down Time Chart data: {labels: [...], datasets: [...]}
```

If you see errors instead, note them down.

## Step 2: Verify Backend API is Deployed

The Python file `frappe_dashboard_api.py` must be copied to your Frappe server:

```bash
# SSH to your Frappe server
cd frappe-bench/apps/asset_lite

# Create api directory if it doesn't exist
mkdir -p asset_lite/api

# Copy the file
cp /path/to/frappe_dashboard_api.py asset_lite/api/dashboard_api.py

# Restart Frappe
bench restart
```

## Step 3: Test API Directly

Open a new browser tab and try accessing the API directly:

### Test Number Cards
```
https://seeraasm-med.seeraarabia.com/api/method/asset_lite.api.dashboard_api.get_number_cards
```

**Expected Response:**
```json
{
  "message": {
    "total_assets": 7109,
    "work_orders_open": 3,
    "work_orders_in_progress": 1,
    "work_orders_completed": 2
  }
}
```

### Test Chart Data
```
https://seeraasm-med.seeraarabia.com/api/method/asset_lite.api.dashboard_api.get_dashboard_chart_data?chart_name=Work%20Order%20Status%20Chart
```

**Expected Response:**
```json
{
  "message": {
    "labels": ["Open", "Completed", "Pending"],
    "datasets": [{
      "name": "Count",
      "values": [10, 20, 5],
      "color": "#4F46E5"
    }],
    "type": "Bar"
  }
}
```

## Step 4: Check Dashboard Chart Names

The chart names in React MUST match EXACTLY (including spaces and capitalization) with your Frappe Dashboard Chart docnames.

In Frappe, go to: **Desk → Dashboard Chart List**

Current names in React code:
- `Up & Down Time Chart`
- `Work Order Status Chart`
- `Maintenance - Asset wise Count`
- `Asset Maintenance Assignees Status Count`
- `Asset Maintenance Frequency Chart`
- `PPM Status`
- `PPM Template Counts`

If your Frappe charts have different names, update them in `ModernDashboard.tsx` line 12-18.

## Step 5: Verify Dashboard Chart Configuration

Each Dashboard Chart in Frappe must have:

1. **Chart Type:** "Report"
2. **Use Report Chart:** ✓ (checked)
3. **Report Name:** A valid report name
4. **X Field:** The field to use for X-axis (e.g., `status`, `item_name`)
5. **Y Axis Fields:** At least one entry in child table with:
   - Y Field (e.g., `count`, `amount`)
   - Color (e.g., `#4F46E5`)
   - Label (e.g., `Count`)
6. **Is Public:** ✓ (checked) OR user has permission

## Step 6: Check Network Tab

1. Open Developer Tools (F12)
2. Go to **Network** tab
3. Refresh the dashboard page
4. Look for API calls to `get_dashboard_chart_data`
5. Click on each call and check:
   - **Status Code:** Should be 200
   - **Response:** Should contain chart data

### Common Errors:

**404 Not Found**
- Backend API file not deployed
- Endpoint path is wrong

**500 Internal Server Error**
- Chart doesn't exist in Frappe
- Report has an error
- Python code has a bug

**401 Unauthorized**
- Not logged in
- Session expired

**403 Forbidden**
- Chart is not Public
- User doesn't have permission

## Step 7: Quick Fixes

### If API endpoint doesn't exist (404):
```bash
# On Frappe server
cd frappe-bench/apps/asset_lite
ls -la asset_lite/api/  # Check if dashboard_api.py exists
bench restart
```

### If chart names don't match:
Edit `src/pages/ModernDashboard.tsx` and update chart names to match exactly.

### If charts are private:
In Frappe, for each Dashboard Chart:
1. Open the chart
2. Check **Is Public**
3. Save

### If using wrong report:
The backend expects Report-based charts. Regular charts won't work.

## Step 8: Enable Debug Mode

Add this to see what's being fetched:

Open `src/hooks/useApi.ts` and check if errors are being caught properly.

## Step 9: Test with Mock Data

Temporarily add mock data to verify charts render:

```typescript
// In ModernDashboard.tsx, replace chart fetch with:
const mockData = {
  labels: ['A', 'B', 'C'],
  datasets: [{
    name: 'Test',
    values: [10, 20, 15],
    color: '#4F46E5'
  }],
  type: 'Bar'
};

const { data: workOrderChart } = { data: mockData, loading: false, error: null };
```

If charts appear with mock data, the problem is the API. If not, it's the chart rendering logic.

## Step 10: Contact Support

If none of the above work, provide:
1. Browser console errors
2. Network tab screenshots showing API responses
3. Frappe Dashboard Chart configuration screenshots
4. Frappe error logs: `bench logs`

---

## Quick Checklist

- [ ] `frappe_dashboard_api.py` copied to `asset_lite/api/dashboard_api.py`
- [ ] Frappe server restarted (`bench restart`)
- [ ] Chart names in React match Frappe exactly
- [ ] All charts are marked "Is Public" in Frappe
- [ ] Charts are "Report" type with "Use Report Chart" checked
- [ ] Each chart has X Field and Y Axis configured
- [ ] Can access API endpoint directly in browser
- [ ] Browser console shows no 404/500 errors
- [ ] Logged in user has permissions

---

**Most Common Issue:** Backend API file not deployed to Frappe server yet!