Item Info Popup - DC-wise Quantities Display

Visual Layout

┌─────────────────────────────────────────────────────────────┐
│                    Item Information Modal                    │
├─────────────────────────────────────────────────────────────┤
│                                                               │
│                  [Item Image - Optional]                      │
│                                                               │
│  Item Code (Code-123) │ Item ID (5) │ UOM (Unit)            │
│                                                               │
│  Item Name: Complete Item Description Here                  │
│                                                               │
│  ┌─────────────────────────────────────────────────────┐    │
│  │ DC-wise Quantities                                  │    │
│  ├──────────────────┬──────────┬──────────┬───────────┤    │
│  │ DC Name          │ BOQ Qty  │ Done Qty │    %      │    │
│  ├──────────────────┼──────────┼──────────┼───────────┤    │
│  │ DC New Delhi     │   100    │   45     │  45.0%    │    │
│  │ DC Mumbai        │   80     │   65     │  81.3%    │    │
│  │ DC Bangalore     │   120    │   0      │   0%      │    │
│  └──────────────────┴──────────┴──────────┴───────────┘    │
│                                                               │
│  Total BOQ Qty (300) │ Total Done Qty (110) │ Overall (36.7%)||
│                                                               │
└─────────────────────────────────────────────────────────────┘

Color Scheme

┌─────────────────────────────────┐
│ ITEM CODE (Cyan)         #0dcaf0│  Primary accent color
├─────────────────────────────────┤
│ BOQ Qty (Gold)           #ffc107│  Planned/Target quantities
├─────────────────────────────────┤
│ Done Qty (Green)         #28a745│  Completed work
├─────────────────────────────────┤
│ Completion % (Cyan)      #17a2b8│  Status indicator
├─────────────────────────────────┤
│ Table Header (Cyan)      #0dcaf0│  Section labels
├─────────────────────────────────┤
│ Background (Dark)        #0d1117│  Dark theme
└─────────────────────────────────┘

Data Flow Diagram

┌──────────────────────────────────────────────────┐
│ User clicks Item Code in DataTable              │
│ Event: .item-info-link click                    │
└────────────────┬─────────────────────────────────┘
                 │
                 ├─ Extract itemId from data-item-id
                 └─ Extract dcId from data-dc-id (current row context)
                 │
                 ▼
┌──────────────────────────────────────────────────┐
│ showItemInfo(itemId, dcId)                      │
│ - Display loading spinner                       │
│ - AJAX POST to item-info-drilldown.php         │
└────────────────┬─────────────────────────────────┘
                 │
                 ▼
┌──────────────────────────────────────────────────┐
│ API: item-info-drilldown.php                    │
│                                                  │
│ 1. Verify user authentication                  │
│ 2. Query item details from item table          │
│ 3. Query DC-wise breakdown:                    │
│    GROUP BY dcId                               │
│    - SUM(boq.totalQty) = BOQ Qty              │
│    - SUM(work.doneQty) = Done Qty             │
│    - Calculate: % = Done/BOQ * 100            │
│ 4. Calculate summary totals                   │
│ 5. Return JSON response                       │
└────────────────┬─────────────────────────────────┘
                 │
                 ▼
┌──────────────────────────────────────────────────┐
│ JavaScript Success Handler                      │
│                                                  │
│ response.data = {                              │
│   item: { itemCode, itemName, ... },           │
│   dcWiseQuantities: [                          │
│     { dcName, boqQuantity, doneQuantity, % },  │
│     { dcName, boqQuantity, doneQuantity, % },  │
│     ...                                         │
│   ],                                            │
│   summary: { totalBoqQty, totalDoneQty, % }   │
│ }                                               │
└────────────────┬─────────────────────────────────┘
                 │
                 ├─ Build HTML with 3-column header
                 ├─ Build DC-wise quantities table
                 ├─ Build summary totals
                 └─ Display in #itemInfoContent
                 │
                 ▼
┌──────────────────────────────────────────────────┐
│ Modal Display                                   │
│ - Header: Item Code, ID, UOM (3 columns)      │
│ - Item Name (full width)                       │
│ - DC-wise table (sortable, hoverable)          │
│ - Summary row (totals)                         │
└──────────────────────────────────────────────────┘

Database Query Structure

Query 1: Item Details
─────────────────────
SELECT i.itemId, i.itemCode, i.name, i.uom, i.imagePath
FROM workpro.item i
WHERE i.itemId = :itemId

Query 2: DC-wise Breakdown
──────────────────────────
SELECT 
    b.dcId,
    d.dcName,
    SUM(b.totalQty) as boqQuantity,
    (SELECT SUM(w.doneQty) 
     FROM workpro.work w 
     WHERE w.boqId IN (SELECT boqId FROM workpro.boq 
                       WHERE itemId = :itemId AND dcId = b.dcId)) as doneQuantity
FROM workpro.boq b
LEFT JOIN workpro.dc d ON b.dcId = d.dcId
WHERE b.itemId = :itemId
GROUP BY b.dcId, d.dcName

Result:
┌──────┬────────────┬──────────────┬──────────────┐
│ dcId │ dcName     │ boqQuantity  │ doneQuantity │
├──────┼────────────┼──────────────┼──────────────┤
│ 1    │ New Delhi  │ 100          │ 45           │
│ 2    │ Mumbai     │ 80           │ 65           │
│ 3    │ Bangalore  │ 120          │ 0            │
└──────┴────────────┴──────────────┴──────────────┘

HTML Structure

<style>
  .item-info-image { max-width: 100%; max-height: 200px; }
  .item-info-field { margin-bottom: 0.75rem; }
  .dc-table { font-size: 0.85rem; margin-top: 1rem; }
  .dc-table thead { background-color: #1a2332; }
  .dc-table tbody tr:hover { background-color: #1a2332; }
</style>

<!-- Item Details Header -->
<div class="row mb-2">
  <div class="col-md-4">Item Code (Cyan)</div>
  <div class="col-md-4">Item ID</div>
  <div class="col-md-4">UOM</div>
</div>

<!-- Item Name -->
<div class="row mb-2">
  <div class="col-12">Item Name</div>
</div>

<!-- DC-wise Table -->
<div class="row mb-3">
  <div class="col-12">
    <table class="table table-sm table-dark dc-table">
      <thead>
        <tr>
          <th>DC Name (Cyan)</th>
          <th>BOQ Qty (Gold)</th>
          <th>Done Qty (Green)</th>
          <th>% (Cyan)</th>
        </tr>
      </thead>
      <tbody>
        <!-- Rows added by forEach loop -->
      </tbody>
    </table>
  </div>
</div>

<!-- Summary -->
<div class="row">
  <div class="col-md-4">Total BOQ Qty (Gold)</div>
  <div class="col-md-4">Total Done Qty (Green)</div>
  <div class="col-md-4">Completion % (Cyan)</div>
</div>

State Transitions

┌─────────────────────────────────────────────────────────┐
│ IDLE STATE                                              │
│ Modal closed, no data loaded                           │
└──────────────────┬──────────────────────────────────────┘
                   │
        User clicks Item Code
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ LOADING STATE                                           │
│ Spinner displayed in modal                             │
│ AJAX request in progress                               │
└──────────────────┬──────────────────────────────────────┘
                   │
           API returns successfully
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ SUCCESS STATE                                           │
│ DC-wise table populated                                │
│ All data displayed                                      │
│ User can view quantities for each DC                   │
└──────────────────┬──────────────────────────────────────┘
                   │
      User closes modal or navigates
                   │
                   ▼
┌─────────────────────────────────────────────────────────┐
│ IDLE STATE (returns)                                    │
└─────────────────────────────────────────────────────────┘

Sample Data Display

ITEM CODE: IGL-WIRE-01
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  │    120   │  10.0%   │
│ IGL Chennai        │    600   │      0   │   0%     │
└────────────────────┴──────────┴──────────┴──────────┘

TOTAL BOQ QTY: 3,600
TOTAL DONE QTY: 1,420
COMPLETION %: 39.4%