workPro Documentation
Getting Started
VISUAL_WALKTHROUGH.md
DC-WISE ITEM DRILLDOWN - VISUAL WALKTHROUGH
What the User Sees (Step-by-Step)
STEP 1: User is on All Work Page
┌─────────────────────────────────────────────────────────────────┐
│ All Work Management System │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Work Table showing: │
│ ┌─────┬──────────┬──────────┬─────────┬────────────────┐ │
│ │Item │BOQ ID │Done By │Status │Remarks │ │
│ ├─────┼──────────┼──────────┼─────────┼────────────────┤ │
│ │IGL │BOQ-001 │John D. │Pending │Awaiting parts │ │
│ │SIPL │BOQ-002 │Jane S. │In Prog │50% complete │ │
│ └─────┴──────────┴──────────┴─────────┴────────────────┘ │
│ │
│ User sees "IGL" (Item Code) in CYAN - it's clickable! │
│
└─────────────────────────────────────────────────────────────────┘STEP 2: User Clicks Item Code "IGL"
User Action: CLICK on "IGL" (cyan link)
↓
Event Handler Fires:
- Extract itemId = 5 from data-item-id
- Extract dcId = 1 from data-dc-id
- Call showItemInfo(5, 1)
↓
Modal Opens with Loading SpinnerSTEP 3: Loading State (Brief)
┌──────────────────────────────────────────────────┐
│ Item Information Modal │
├──────────────────────────────────────────────────┤
│ │
│ ⟳ Loading... │
│ │
│ (Fetching DC-wise quantities) │
│ │
└──────────────────────────────────────────────────┘STEP 4: Modal Loads Successfully ✅
┌──────────────────────────────────────────────────────────────┐
│ Item Information Modal │
├──────────────────────────────────────────────────────────────┤
│ │
│ Item Code: IGL-001 Item ID: 5 UOM: Meter │
│ │
│ Item Name: IGL Gas Distribution Pipe 2mm Copper Wire │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ DC-wise Quantities │ │
│ ├──────────────────┬──────────┬──────────┬───────────┤ │
│ │ DC Name │BOQ Qty │Done Qty │ % │ │
│ ├──────────────────┼──────────┼──────────┼───────────┤ │
│ │ IGL New Delhi │ 1,000 │ 800 │ 80.0% │ │
│ │ IGL Mumbai │ 800 │ 500 │ 62.5% │ │
│ │ IGL Bangalore │ 1,200 │ 0 │ 0% │ │
│ │ IGL Chennai │ 600 │ 60 │ 10.0% │ │
│ └──────────────────┴──────────┴──────────┴───────────┘ │
│ │
│ Total BOQ Qty: 3,600 │ Total Done: 1,360 │ Overall: 37.8% │
│ │
│ [X] Close │
└──────────────────────────────────────────────────────────────┘What Information is Displayed?
1. Item Header Information
Item Code: IGL-001
Item ID: 5
UOM: MeterPurpose: Quick identification of the item
2. Item Name
Item Name: IGL Gas Distribution Pipe 2mm Copper WirePurpose: Full descriptive name for context
3. DC-wise Quantities Table
Shows 4 DCs with:
DC Name BOQ Qty Done Qty %
─────────────────────────────────────────
New Delhi 1,000 800 80.0%
Mumbai 800 500 62.5%
Bangalore 1,200 0 0%
Chennai 600 60 10.0%What each column means:
- DC Name: Name of the Distribution Center
- BOQ Qty: How many items ordered for this DC (from BOQ table)
- Done Qty: How many items completed in this DC (from Work table)
- %: Completion percentage = (Done Qty / BOQ Qty) × 100
4. Summary Totals
Total BOQ Qty: 3,600 (sum of all DC BOQ Qty)
Total Done Qty: 1,360 (sum of all DC Done Qty)
Overall Completion: 37.8% (1,360 / 3,600 × 100)Purpose: Quick view of overall project status
Color Meanings
🔵 CYAN (#0dcaf0)
Used for: Item Code, DC headers, Percentage column
Meaning: Primary information, clickable elements
🟡 GOLD (#ffc107)
Used for: BOQ Qty column
Meaning: Planned/ordered quantities, target amounts
🟢 GREEN (#28a745)
Used for: Done Qty column
Meaning: Completed/done work, progress indicator
🔷 BLUE (#17a2b8)
Used for: Percentage column
Meaning: Completion status, metric trackingReal-World Example
Scenario: Manager checks work status for IGL Gas Pipes
Manager's Workflow:
- Opens All Work page
- Searches for or scrolls to "IGL" item
- Clicks on "IGL-001" Item Code
- Modal instantly shows DC-wise status:
- New Delhi: 80% done (800 of 1,000)
- Mumbai: 62.5% done (500 of 800)
- Bangalore: 0% done (0 of 1,200) ⚠️ Needs attention!
- Chennai: 10% done (60 of 600) ⚠️ Behind schedule
Manager's Insights:
- ✅ New Delhi is performing well (80%)
- ⚠️ Bangalore hasn't started (0%)
- ⚠️ Chennai is significantly behind (10%)
- 📊 Overall only 37.8% complete - more work needed
Action Taken:
- Allocate more resources to Bangalore
- Investigate Chennai delays
- Maintain New Delhi's pace
Data Accuracy Verification
Example Data Calculation
For New Delhi DC (dcId = 1):
Step 1: Query BOQ quantities
SELECT SUM(totalQty)
FROM workpro.boq
WHERE itemId = 5 AND dcId = 1
Result: 1,000 unitsStep 2: Query work (completed) quantities
SELECT SUM(doneQty)
FROM workpro.work
WHERE boqId IN (SELECT boqId FROM workpro.boq
WHERE itemId = 5 AND dcId = 1)
Result: 800 unitsStep 3: Calculate percentage
Percentage = (800 / 1,000) × 100 = 80.0%Display Result:
New Delhi │ 1,000 │ 800 │ 80.0%Interactive Features
Hover Effects
When user hovers over a DC row:
┌──────────────────────────────────────────────┐
│ Normal State │
└──────────────────────────────────────────────┘
↓
[User Hovers]
↓
┌──────────────────────────────────────────────┐
│ Highlighted State (darker background) │
└──────────────────────────────────────────────┘
Visual Feedback: Row background slightly darkens,
indicating it's interactiveModal Closing
- User can click [X] button to close
- Click outside modal to close
- Press ESC key to close
Common User Scenarios
Scenario 1: Daily Progress Check
Manager views modal to see:
"How much work did each DC complete today?"
→ Table shows completion % per DC
→ Can compare DC performanceScenario 2: Resource Allocation
Manager checks which DC needs help:
"Which DC is most behind?"
→ Table sorted by DC name
→ Identifies lagging DCs by % column
→ Allocates extra resourcesScenario 3: Client Reporting
Director prepares report:
"What's the status of IGL items?"
→ Modal shows DC-wise breakdown
→ Can report: "37.8% complete overall"
→ DC-wise status: Delhi 80%, Mumbai 62.5%, etc.Scenario 4: Quality Check
QA team verifies completions:
"Which DCs have completed their IGL work?"
→ Table shows completion % per DC
→ Can identify DCs ready for quality checkTechnical Flow (Behind the Scenes)
CLICK Item Code (IGL)
↓
JavaScript Event Handler
↓
Extract: itemId=5, dcId=1
↓
Call showItemInfo(5, 1)
↓
Display Loading Spinner
↓
AJAX POST → item-info-drilldown.php
↓
PHP API:
├─ Check authentication ✓
├─ Validate itemId ✓
├─ Query item from workpro.item
├─ Query DCs: GROUP BY dcId
│ ├─ SUM(boq.totalQty) = BOQ Qty
│ ├─ SUM(work.doneQty) = Done Qty
│ └─ Calculate %
├─ Calculate totals
└─ Return JSON
↓
JSON Response:
{
"item": { itemCode, itemName, ... },
"dcWiseQuantities": [
{ dcName, boqQuantity, doneQuantity, % },
{ dcName, boqQuantity, doneQuantity, % },
...
],
"summary": { totalBoq, totalDone, % }
}
↓
JavaScript Success Handler
↓
Build HTML:
├─ Item header (Code, ID, UOM)
├─ Item name
├─ DC-wise table (loop through array)
└─ Summary totals
↓
Display Modal with Table
↓
USER SEES: DC-wise Quantities BreakdownTroubleshooting Visual Issues
Issue: Table not appearing
- Check: JavaScript console for errors
- Check: Browser network tab for AJAX response
- Check: User is logged in
Issue: Wrong numbers showing
- Verify: Database has correct BOQ and Work entries
- Check: dcId matches database records
- Check: SQL queries execute correctly
Issue: Colors not displaying
- Check: Browser CSS support
- Clear: Browser cache
- Check: Bootstrap CSS loaded
Issue: Modal too small
- Note: Modal responsive to window size
- Check: Zoom level (100%)
- Try: Fullscreen mode
Accessibility Features
- ✅ Keyboard navigation (Tab, Enter, ESC)
- ✅ Screen reader compatible table structure
- ✅ High contrast colors for readability
- ✅ Responsive layout for mobile
- ✅ Clear label associations
Performance Expectations
| Metric | Expected Time |
|---|---|
| Click to modal open | <500ms |
| API call + response | 200-500ms |
| Table render | <100ms |
| Total Time | <1 second |
Users should see the full populated modal within 1 second of clicking an Item Code.
workPro Documentation | v1.3
Login to Dashboard