<div style="margin-left: 85%;padding-bottom: 10px;"  *ngIf="roleId !== 38">
<a href="#/dashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
   <i class="fal fa-chart-area"></i> Go back to dashboard</a>
   
</div>     
<section class="content-header">
   <h4 class="subheader-title text-center">    
      vLex Dashboard
   </h4>
</section>

<section class="content" style="padding-top: 15px;">
   <div class="dashboard-container">
      
      <!-- Summary Cards -->
      <div class="summary-cards">          
         <div class="card">
            <div class="card-body text-center">
               <h5>Total <br> Received</h5>
               <h6>{{ statusChartData[6]?.count }}</h6>
            </div>
         </div>
         <div class="card">
            <div class="card-body text-center">
               <h5>Download <br>In-Progress</h5>
               <h6>{{ statusChartData[0]?.count }}</h6>
            </div>
         </div>
         <div class="card">
         <div class="card-body text-center">
            <h5>Conversion <br> YTS</h5>
            <h6>{{ statusChartData[1]?.count }}</h6>
         </div>
         </div>
          <div class="card">
            <div class="card-body text-center">
               <h5>Conversion <br>In-Progress</h5>
               <h6>{{ statusChartData[2]?.count }}</h6>
            </div>
         </div>
          <div class="card">
            <div class="card-body text-center">
               <h5>QA <br> In-Progress</h5>
               <h6>{{ statusChartData[3]?.count }}</h6>
            </div>
         </div>
       <div class="card">
  <div class="card-body text-center">
    <h5>Query</h5>
    <h6>
      <a 
        href="#/masters/lot-comments/367"
        target="_self"
        style="text-decoration: none; color: inherit; cursor: pointer;"
      >
        {{ statusChartData[4]?.count }}
      </a>
    </h6>
  </div>
</div>
         <div class="card">
            <div class="card-body text-center">
               <h5>No Case</h5>
               <h6>{{ statusChartData[7]?.count }}</h6>
            </div>
         </div>
         <div class="card">
            <div class="card-body text-center">
               <h5>Delivered</h5>
               <h6>{{ statusChartData[5]?.count }}</h6>
            </div>
         </div>        
      </div>

      <!-- Charts Row -->
      <div class="charts-container" style="display: flex; gap: 20px; margin-bottom: 20px;">

         <!-- Bar Chart -->
         <!-- Stacked Bar Chart -->
<div class="chart-box" style="flex: 1;">
  <dx-chart
    id="jobsChart"
    [dataSource]="jobmonthwisedata"
    palette="Soft"
    class="custom-chart"
  >
    <!-- Make bars stacked -->
    <dxo-common-series-settings
      type="stackedBar"
      argumentField="period"
      [barWidth]="50"
    ></dxo-common-series-settings>   

    <!-- In Progress -->
    <dxi-series
      valueField="jobs_in_progress"
      name="In Progress"
      color="#ffc107"
    >
      <dxo-label [visible]="false">
        <dxo-font weight="700" color="#ffffff" size="11"></dxo-font>
      </dxo-label>
    </dxi-series>

    <!-- Completed -->
    <dxi-series
      valueField="jobs_completed"
      name="Delivered"
      color="#28a745"
    >
      <dxo-label [visible]="false">
        <dxo-font weight="700" color="#ffffff" size="11"></dxo-font>
      </dxo-label>
    </dxi-series>
    <!-- No Case -->
    <dxi-series
      valueField="no_case"
      name="No Case"
      color="#dc3545"
    >
      <dxo-label [visible]="false">
        <dxo-font weight="700" color="#ffffff" size="11"></dxo-font>
      </dxo-label>
    </dxi-series>

    <!-- Tooltip -->
    <dxo-tooltip
      [enabled]="true"
      [shared]="true"
      [customizeTooltip]="customizeBarTooltip"
    ></dxo-tooltip>

    <!-- Legend -->
    <dxo-legend
      verticalAlignment="top"
      horizontalAlignment="center"
      orientation="horizontal"
      itemTextPosition="right"
      [visible]="true"
    >
      <dxo-font size="11"></dxo-font>
    </dxo-legend>

    <!-- X-axis -->
    <dxo-argument-axis>
      <dxo-label [customizeText]="formatMonth">
        <dxo-font size="11"></dxo-font>
      </dxo-label>
    </dxo-argument-axis>

    <!-- Y-axis -->
    <dxi-value-axis>
      <dxo-label format="fixedPoint">
        <dxo-font size="11"></dxo-font>
      </dxo-label>     
    </dxi-value-axis>
  </dx-chart>
</div>

         <!-- Donut Chart -->
         <div class="chart-box" style="flex: 1; position: relative;">
            <dx-pie-chart id="statusPie" [dataSource]="statusChartData" [palette]="customPalette" type="doughnut"
               [innerRadius]="0.6" class="custom-chart">

               <dxi-series argumentField="status" valueField="count">
                  <dxo-label [visible]="false"></dxo-label>
                  <dxo-connector [visible]="false"></dxo-connector>
               </dxi-series>

               <!-- Tooltip goes here at chart level -->
               <dxo-tooltip [enabled]="true" [shared]="false" [customizeTooltip]="customizeTooltip"></dxo-tooltip>

               <dxo-legend orientation="horizontal" horizontalAlignment="center" verticalAlignment="top"
                  itemTextPosition="right">
               </dxo-legend>

            </dx-pie-chart>
            <div class="donut-center"
               style="position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
               <div class="total">{{ statusChartData[6]?.count }}</div>
               <div class="caption">Total Received</div>
            </div>
         </div>
      </div>

      <!-- Data Grid -->
  <dx-data-grid
  #gridContainer
  id="gridContainer"
  [dataSource]="batchDatafinal"
  [keyExpr]="'sequenceid'"
  [allowColumnReordering]="true"
  [width]="'100%'"
  [height]="390"
  [showBorders]="true"
  [allowColumnResizing]="true"
  [columnAutoWidth]="true"
  [export]="{ enabled: true }"
  (onExporting)="onExporting($event)"
  (onToolbarPreparing)="customizeToolbar($event)"
  [paging]="{ pageSize: 20 }"
  [pager]="{
    showPageSizeSelector: true,
    allowedPageSizes: [20, 40, 60],
    showInfo: true
  }"
>
  <!-- Fixed Serial Number column (no sorting, shows object's slNo) -->
 <dxi-column dataField="sequenceid" caption="Sl. No" [width]="70"  [allowFiltering]="false"></dxi-column>


  <!-- your other columns -->
  <dxi-column dataField="reportername" caption="Report Name"></dxi-column>
  <dxi-column dataField="volumne" caption="Volume"></dxi-column>
  <dxi-column dataField="edition" caption="Edition"></dxi-column>
  <dxi-column dataField="issue" caption="Issue"></dxi-column>
  <dxi-column
    dataField="dateofpublication"
    caption="Publishing date"
    dataType="date"
    [format]="'yyyy_MM_dd'"
  ></dxi-column>
  <dxi-column dataField="title" caption="Job Title"></dxi-column>
  <dxi-column dataField="startpage"caption="startpage"[visible]="false"[allowExporting]="true"></dxi-column>
  <dxi-column dataField="endpage"caption="endpage"[visible]="false"[allowExporting]="true"></dxi-column>
  <dxi-column dataField="bmpcount" caption="Bmp file count"></dxi-column>
  <!-- <dxi-column dataField="Conversion Status"caption="correctionstatus"[visible]="false"[allowExporting]="true"></dxi-column>
  <dxi-column dataField="QA Status"caption="qastatus"[visible]="false"[allowExporting]="true"></dxi-column> -->
  
  <dxi-column
    dataField="datereceived"
    caption="Date Received" 
  ></dxi-column>
  <dxi-column
    dataField="planneddeliverydate"
    caption="Planned Date"
  ></dxi-column>
  <dxi-column
    dataField="datedelivered"
    caption="Date Delivered"
  ></dxi-column>
  <dxi-column dataField="status" caption="Status"></dxi-column>
   <dxi-column dataField="remarks" caption="Remarks"></dxi-column>
  <!-- <dxi-column dataField="Correction received from Vlex"caption="correctionreceivedfromvlex"[visible]="false"[allowExporting]="true"></dxi-column>
    <dxi-column dataField="Document Received"caption=""[visible]="false"[allowExporting]="true"></dxi-column>
    <dxi-column dataField="Correction Status"caption=""[visible]="false"[allowExporting]="true"></dxi-column>
      <dxi-column dataField="Correction reviewed by Lumina QA"caption=""[visible]="false"[allowExporting]="true"></dxi-column>
        <dxi-column dataField="Final Delivery"caption=""[visible]="false"[allowExporting]="true"></dxi-column>
          <dxi-column dataField="Comments"caption=""[visible]="false"[allowExporting]="true"></dxi-column> -->
   <dxi-column dataField="querystatus" caption="Query Status" [visible]="false" [allowExporting]="true"></dxi-column>
          <dxi-column dataField="querytype" caption="Query Type" [visible]="false" [allowExporting]="true"></dxi-column>
 
  <dxi-column dataField="querydescription" caption="Query Description" [visible]="false" [allowExporting]="true"></dxi-column>

  <dxo-header-filter [visible]="true" [allowSearch]="true"></dxo-header-filter>
  <dxo-load-panel [enabled]="true"></dxo-load-panel>
  <dxo-search-panel [visible]="true"></dxo-search-panel>
  <dxo-scrolling mode="standard" showScrollbar="always"></dxo-scrolling>

  <!-- Template MUST be an ng-template with dxTemplate -->
  <ng-template dxTemplate="slNoTemplate" let-cellData>
    {{ cellData.data.slNo }}
  </ng-template>
</dx-data-grid>


   </div>
</section>