diff --git a/DASHBOARD_SETUP.md b/DASHBOARD_SETUP.md deleted file mode 100644 index fb01ded..0000000 --- a/DASHBOARD_SETUP.md +++ /dev/null @@ -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 - diff --git a/DEPLOY_ASSET_API.md b/DEPLOY_ASSET_API.md deleted file mode 100644 index bf2b0be..0000000 --- a/DEPLOY_ASSET_API.md +++ /dev/null @@ -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 - diff --git a/DEPLOY_BACKEND.md b/DEPLOY_BACKEND.md deleted file mode 100644 index 6bac617..0000000 --- a/DEPLOY_BACKEND.md +++ /dev/null @@ -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` - diff --git a/TROUBLESHOOTING_CHARTS.md b/TROUBLESHOOTING_CHARTS.md deleted file mode 100644 index e9eb8a7..0000000 --- a/TROUBLESHOOTING_CHARTS.md +++ /dev/null @@ -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! -