Akhib.Shaik/Seera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed .md

Browse Source
This commit is contained in:
Akhib.Shaik 2025-11-03 14:12:29 +05:30
parent 8f3687175e
commit 107003bb03
4 changed files with 0 additions and 790 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
DASHBOARD_SETUP.md
View File

@ -1,249 +0,0 @@
# Modern Dashboard Setup Guide
## Overview
Your React frontend now has a beautiful modern dashboard that consumes data from Frappe Dashboard Chart and Number Card doctypes.
## What's Been Created
### 1. Backend API File
**File**: `frappe_dashboard_api.py`
- Copy this to your Frappe app: `asset_lite/api/dashboard_api.py`
- Contains endpoints:
- `get_number_cards()` - Returns KPI counts (total assets, work orders by status)
- `list_dashboard_charts()` - Lists all public Dashboard Chart docs
- `get_dashboard_chart_data(chart_name)` - Returns chart-ready JSON for any Report-based Dashboard Chart
- `get_repair_cost_by_item(year)` - Example specialized chart endpoint
### 2. Frontend Components
#### `src/pages/ModernDashboard.tsx` (NEW)
Modern dashboard matching your reference image with:
- Gradient KPI cards (pink, cyan, emerald)
- Tab switcher (Variation 1 / Variation 2)
- Work Order Status chart with bar visualization
- Bandwidth Reports chart (multi-dataset bars)
- Progress bars for metrics
- Message statistics cards
- Author rankings with trend indicators
#### `src/components/SimpleChart.tsx`
Lightweight SVG-based chart renderer:
- Bar charts (single & stacked)
- Pie charts
- No external dependencies
#### `src/components/ChartTile.tsx`
Reusable tile that fetches and displays a Dashboard Chart by name
### 3. API Integration
#### `src/config/api.ts`
Added endpoints:
```typescript
DASHBOARD_NUMBER_CARDS: '/api/method/asset_lite.api.dashboard_api.get_number_cards'
DASHBOARD_LIST_CHARTS: '/api/method/asset_lite.api.dashboard_api.list_dashboard_charts'
DASHBOARD_CHART_DATA: '/api/method/asset_lite.api.dashboard_api.get_dashboard_chart_data'
```
#### `src/services/apiService.ts`
Added methods:
- `getNumberCards()`
- `listDashboardCharts(publicOnly)`
- `getDashboardChartData(chartName, filters)`
#### `src/hooks/useApi.ts`
Added hooks:
- `useNumberCards()` - Fetches KPI card data
- `useDashboardChart(chartName, filters)` - Fetches specific chart data
- `useChartsList(publicOnly)` - Lists available charts
### 4. Routing
**File**: `src/App.tsx`
- `/dashboard` route already points to `ModernDashboard` component
- Protected by authentication
- Includes sidebar navigation
## Installation Steps
### Step 1: Deploy Backend API
```bash
# Navigate to your Frappe app directory
cd frappe-bench/apps/asset_lite
# Create the api directory if it doesn't exist
mkdir -p asset_lite/api
# Copy the Python file
cp /path/to/frappe_dashboard_api.py asset_lite/api/dashboard_api.py
# Restart your Frappe server
bench restart
```
### Step 2: Verify Dashboard Charts in Frappe
Ensure these Dashboard Charts exist and are marked as "Public":
- 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
- Repair Cost
Each chart should:
- Chart Type: "Report"
- Use Report Chart: ✓ checked
- Have a Report Name configured
- Have X Field set
- Have Y Axis fields configured in child table
- Is Public: ✓ checked
### Step 3: Test the API Endpoints
```bash
# Test number cards
curl -X GET "https://seeraasm-med.seeraarabia.com/api/method/asset_lite.api.dashboard_api.get_number_cards" \
-H "Authorization: token YOUR_API_KEY:YOUR_API_SECRET"
# Test chart data
curl -X GET "https://seeraasm-med.seeraarabia.com/api/method/asset_lite.api.dashboard_api.get_dashboard_chart_data?chart_name=Work%20Order%20Status%20Chart" \
-H "Authorization: token YOUR_API_KEY:YOUR_API_SECRET"
```
### Step 4: Run Frontend
```bash
cd frappe-frontend
npm install
npm run dev
```
Navigate to: `http://localhost:5173/dashboard`
## Dashboard Features
### KPI Cards (Top Row)
- **Total Assets**: Pink gradient, shows count from Asset doctype
- **Work Orders**: Cyan gradient, shows open + in progress count
- **Completed**: Green gradient, shows completed work orders
### Charts Section
- **Work Order Status**: Bar chart from "Work Order Status Chart" Dashboard Chart
- **Bandwidth Reports**: Multi-dataset chart from "Maintenance - Asset wise Count"
- Both support tab switching and dynamic data loading
### Additional Sections
- Top Authors ranking (mock data for now)
- Progress metrics with colored bars
- Message statistics at bottom
## Customization
### Change Chart Names
Edit `src/pages/ModernDashboard.tsx` lines with `useDashboardChart`:
```typescript
const { data: workOrderChart } = useDashboardChart('Your Chart Name Here');
```
### Add More KPI Cards
1. Add new field in backend `get_number_cards()` function
2. Update TypeScript interface in `src/services/apiService.ts`
3. Add card in `ModernDashboard.tsx` KPI grid
### Customize Colors
Tailwind gradient classes used:
- `from-pink-400 to-pink-300`
- `from-cyan-400 to-cyan-300`
- `from-emerald-400 to-emerald-300`
Change these to any Tailwind color you want.
### Add Filters to Charts
Pass filters to chart hook:
```typescript
const { data: chart } = useDashboardChart('Chart Name', {
from_date: '2025-01-01',
to_date: '2025-12-31',
status: 'Open'
});
```
## Troubleshooting
### Charts Not Loading
1. Check browser console for API errors
2. Verify Dashboard Chart docname is correct (case-sensitive)
3. Ensure chart is marked "Public" or user has permission
4. Check that Report exists and returns data
### Number Cards Show Zero
1. Verify Work Order statuses match those in `get_number_cards()` function
2. Adjust status filters in Python code if your statuses differ:
```python
work_orders_open = frappe.db.count("Work Order", {"status": ["in", ["Your", "Custom", "Statuses"]]})
```
### CORS Errors
1. Check Vite proxy configuration in `vite.config.ts`
2. Ensure Frappe CORS settings allow your frontend domain
3. Verify cookies are being sent (credentials: 'include')
## API Reference
### GET /api/method/asset_lite.api.dashboard_api.get_number_cards
Returns:
```json
{
"total_assets": 123,
"work_orders_open": 7,
"work_orders_in_progress": 3,
"work_orders_completed": 42
}
```
### GET /api/method/asset_lite.api.dashboard_api.get_dashboard_chart_data
Params:
- `chart_name` (required): Dashboard Chart docname
- `report_filters` (optional): JSON string of filters
Returns:
```json
{
"labels": ["A", "B", "C"],
"datasets": [
{
"name": "Series 1",
"values": [10, 20, 15],
"color": "#4F46E5"
}
],
"type": "Bar",
"options": {},
"source": {"report": "Report Name"}
}
```
## Next Steps
1. **Replace Mock Data**: Update TOP AUTHORS section with real user activity data
2. **Add Real-time Updates**: Use WebSocket or polling to refresh charts every N seconds
3. **Add Date Range Picker**: Let users filter charts by date range
4. **Export Features**: Add PDF/Excel export for charts
5. **Drill-down**: Make chart bars/slices clickable to view detail pages
6. **Responsive Design**: Already responsive, but test on mobile/tablet
7. **Dark Mode**: Add theme toggle using Tailwind dark: classes
## Support
If you encounter issues:
1. Check Frappe logs: `bench logs`
2. Check browser console for frontend errors
3. Verify API responses in Network tab
4. Ensure all Dashboard Charts are properly configured in Frappe
---
**Created**: 2025-10-30
**Version**: 1.0
**Frontend**: React + TypeScript + Vite + TailwindCSS
**Backend**: Frappe v15+ with custom API module

181
DEPLOY_ASSET_API.md
View File

@ -1,181 +0,0 @@
# Deploy Asset API to Frappe Server
## Issue
When trying to create/edit/delete assets, you get an error: "Failed to save asset" or "Failed to create asset"
This happens because the Asset API endpoints are not deployed on your Frappe server yet.
## Solution
Follow these steps to deploy the Asset API:
### Step 1: SSH into Your Frappe Server
```bash
ssh user@seeraasm-med.seeraarabia.com
```
Replace `user` with your actual SSH username.
### Step 2: Navigate to the Asset Lite App API Directory
```bash
cd frappe-bench/apps/asset_lite/asset_lite/api/
```
If the `api` directory doesn't exist, create it:
```bash
mkdir -p frappe-bench/apps/asset_lite/asset_lite/api/
cd frappe-bench/apps/asset_lite/asset_lite/api/
```
### Step 3: Create the Asset API File
Create a new file called `asset_api.py`:
```bash
nano asset_api.py
```
### Step 4: Copy the API Code
Copy the **ENTIRE contents** of the file `frappe_asset_api.py` from your project folder and paste it into the editor.
The file contains these API endpoints:
- `get_assets` - Get list of assets with filters
- `get_asset_details` - Get details of a specific asset
- `create_asset` - Create a new asset
- `update_asset` - Update an existing asset
- `delete_asset` - Delete an asset
- `get_asset_filters` - Get filter options
- `get_asset_stats` - Get asset statistics
- `search_assets` - Search assets by keyword
### Step 5: Save and Exit
In nano:
- Press `Ctrl + O` (to save)
- Press `Enter` (to confirm)
- Press `Ctrl + X` (to exit)
### Step 6: Create __init__.py (if needed)
Make sure there's an `__init__.py` file in the api directory:
```bash
touch __init__.py
```
### Step 7: Restart Frappe
Go back to the bench directory and restart:
```bash
cd ~/frappe-bench
bench restart
```
Or if using supervisor:
```bash
sudo supervisorctl restart all
```
### Step 8: Test the API
Open your browser console and try creating an asset again. You should now see detailed logs:
```
[useAssetMutations] Creating asset with data: {...}
[useAssetMutations] Create asset response: {...}
```
## Verify Deployment
You can verify the API is deployed by checking if the endpoint exists:
```bash
curl -X GET "https://seeraasm-med.seeraarabia.com/api/method/asset_lite.api.asset_api.get_assets?limit=1"
```
You should get a response (even if it's an authentication error, that means the endpoint exists).
## Troubleshooting
### Error: "Module has no attribute 'asset_api'"
**Cause:** The file wasn't created in the right location or Frappe hasn't reloaded.
**Solution:**
1. Check the file exists: `ls -la ~/frappe-bench/apps/asset_lite/asset_lite/api/asset_api.py`
2. Restart Frappe: `cd ~/frappe-bench && bench restart`
### Error: "Not permitted to create asset"
**Cause:** Your user doesn't have permissions for the Asset doctype.
**Solution:**
1. Log in to Frappe desk as Administrator
2. Go to User Permissions
3. Grant your user "Create" permission for Asset doctype
### Error: "Asset doctype not found"
**Cause:** The Asset Lite app doesn't have an Asset doctype, or it's named differently.
**Solution:**
Check what doctypes are available:
```bash
cd ~/frappe-bench
bench console
```
Then in the console:
```python
import frappe
frappe.get_all('DocType', filters={'module': 'Asset Lite'}, fields=['name'])
```
You may need to adjust the doctype name in the API code.
## Expected Behavior After Deployment
✅ **Create Asset:** Form data is saved, new asset is created with auto-generated ID
✅ **Edit Asset:** Changes are saved to existing asset
✅ **Delete Asset:** Asset is deleted after confirmation
✅ **Duplicate Asset:** New asset is created based on existing one
✅ **Export/Print:** Asset data is exported or printed
## Console Debugging
After deployment, when you try to save an asset, you should see in the browser console:
```javascript
[useAssetMutations] Creating asset with data: {
asset_name: "Test Asset",
company: "Test Company",
custom_asset_type: "Medical Equipment",
// ... other fields
}
[useAssetMutations] Create asset response: {
success: true,
asset: { name: "ACC-ASS-2025-00097", ... },
message: "Asset created successfully"
}
```
If you see errors instead, they will now show the actual backend error message.
## Need Help?
If you continue having issues:
1. Check the Frappe error logs: `tail -f ~/frappe-bench/logs/error.log`
2. Check the worker logs: `tail -f ~/frappe-bench/logs/worker.error.log`
3. Verify your user has the correct permissions in Frappe
4. Make sure the Asset doctype exists in your Asset Lite app

150
DEPLOY_BACKEND.md
View File

@ -1,150 +0,0 @@
# Backend Deployment Guide
## Quick Deploy
Copy the updated `frappe_dashboard_api.py` to your Frappe server:
```bash
# Step 1: Copy file to Frappe app
scp frappe_dashboard_api.py user@your-server:/tmp/
# Step 2: SSH to server
ssh user@your-server
# Step 3: Move to correct location
cd /path/to/frappe-bench/apps/asset_lite
mkdir -p asset_lite/api
cp /tmp/frappe_dashboard_api.py asset_lite/api/dashboard_api.py
# Step 4: Restart Frappe
bench restart
# Step 5: Test the API
curl "https://seeraasm-med.seeraarabia.com/api/method/asset_lite.api.dashboard_api.get_number_cards"
```
## What This API Does
### 1. `get_number_cards()`
Returns counts for KPI cards:
- Total Assets
- Open Work Orders
- Work Orders In Progress
- Completed Work Orders
### 2. `list_dashboard_charts()`
Lists all public Dashboard Charts with their configuration
### 3. `get_dashboard_chart_data(chart_name, filters)`
**Supports BOTH:**
- **Report Charts** - Uses the Report's query and x/y field configuration
- **Custom Charts** - Queries the source doctype directly based on `based_on` and `value_based_on` fields
### 4. `get_repair_cost_by_item(year)`
Specialized endpoint for repair cost analysis
## What Was Fixed
### Issue 1: "Unknown column 'label'"
- ✅ Removed `label` field from queries
- ✅ Now only queries `y_field` and `color`
### Issue 2: "DashboardChart object has no attribute 'get_chart_data'"
- ✅ Replaced with custom SQL queries
- ✅ Reads `document_type`, `based_on`, `value_based_on` fields
- ✅ Builds appropriate GROUP BY queries
### Issue 3: Empty datasets
- ✅ Added proper error handling
- ✅ Logs errors to Frappe error log
- ✅ Returns meaningful error messages
## Chart Types Supported
### Report Charts (with "Use Report Chart" checked)
Examples from your Frappe:
- Up & Down Time Chart
- Work Order Status Chart
- PPM Status
- PPM Template Counts
- Repair Cost
**Configuration Required:**
- Chart Type: Report
- Report Name: Valid report name
- Use Report Chart: ✓ checked
- X Field: Field name for X-axis
- Y Axis: At least one row with y_field and color
### Custom Charts (DocType-based)
Examples from your Frappe:
- Maintenance - Asset wise Count
- Asset Maintenance Assignees Status Count
- Asset Maintenance Frequency Chart
**Configuration Required:**
- Chart Type: Custom
- Document Type: Source doctype (e.g., "Asset Maintenance")
- Based On: Field to group by (e.g., "assigned_to")
- Value Based On: Field to count (optional, defaults to "name")
## Troubleshooting
### Charts still showing "No data"
1. **Check chart exists:**
```sql
SELECT name, chart_name, chart_type, document_type, based_on
FROM `tabDashboard Chart`
WHERE name = 'Up & Down Time Chart';
```
2. **Check if Public:**
```sql
SELECT name, is_public FROM `tabDashboard Chart`;
```
3. **Test API directly:**
```bash
# In browser (while logged in):
https://seeraasm-med.seeraarabia.com/api/method/asset_lite.api.dashboard_api.get_dashboard_chart_data?chart_name=Up%20%26%20Down%20Time%20Chart
```
4. **Check Frappe logs:**
```bash
bench logs
# or
tail -f logs/web.error.log
```
### API returns 404
- Backend file not copied to correct location
- App name is not `asset_lite` (update paths in API calls)
### API returns 500
- Check Frappe error logs
- Verify chart configuration matches what API expects
## Next Steps After Deploy
1. Deploy this file to your Frappe server
2. Restart: `bench restart`
3. Hard refresh your React dashboard (Ctrl+Shift+R)
4. Check browser console for data logs
5. Charts should now display with real data!
## Expected Console Output (Success)
After successful deployment, you should see:
```
Up & Down Time Chart data: {labels: ["up", "down"], datasets: [{values: [7092, 16]}], type: "Pie"}
Work Order Status Chart data: {labels: ["Open", "Completed"], datasets: [{values: [3, 2]}], type: "Bar"}
Maintenance - Asset wise Count data: {labels: ["Asset1", "Asset2"], datasets: [{values: [10, 5]}], type: "Bar"}
```
---
**File to deploy:** `frappe_dashboard_api.py`
**Location:** `asset_lite/api/dashboard_api.py`
**Restart:** `bench restart`

210
TROUBLESHOOTING_CHARTS.md
View File

@ -1,210 +0,0 @@
# 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!